Fix dashboard to track server state
This commit is contained in:
Dane Everitt
parent
8b3713e3ff
commit
7f5485d648
5 changed files with 95 additions and 31 deletions
|
|
@ -7,7 +7,7 @@
|
|||
<input type="text"
|
||||
:placeholder="$t('dashboard.index.search')"
|
||||
@input="onChange"
|
||||
v-model="search"
|
||||
v-model="searchTerm"
|
||||
ref="search"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -34,6 +34,8 @@
|
|||
import Flash from '../Flash';
|
||||
import ServerBox from './ServerBox';
|
||||
import Navigation from '../core/Navigation';
|
||||
import isObject from 'lodash/isObject';
|
||||
import {mapState} from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'dashboard',
|
||||
|
|
@ -42,17 +44,18 @@
|
|||
return {
|
||||
backgroundedAt: new Date(),
|
||||
documentVisible: true,
|
||||
loading: true,
|
||||
search: '',
|
||||
servers: [],
|
||||
loading: false,
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Start loading the servers before the DOM $.el is created.
|
||||
* Start loading the servers before the DOM $.el is created. If we already have servers
|
||||
* stored in vuex shows those and don't fire another API call just to load them again.
|
||||
*/
|
||||
created: function () {
|
||||
if (this.servers.length === 0) {
|
||||
this.loadServers();
|
||||
}
|
||||
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
this.documentVisible = document.visibilityState === 'visible';
|
||||
|
|
@ -68,28 +71,29 @@
|
|||
this._iterateServerResourceUse();
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState('dashboard', ['servers']),
|
||||
searchTerm: {
|
||||
get: function () {
|
||||
return this.$store.getters['dashboard/getSearchTerm'];
|
||||
},
|
||||
set: function (value) {
|
||||
this.$store.dispatch('dashboard/setSearchTerm', value);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Load the user's servers and render them onto the dashboard.
|
||||
*
|
||||
* @param {string} query
|
||||
*/
|
||||
loadServers: function (query = '') {
|
||||
loadServers: function () {
|
||||
this.loading = true;
|
||||
window.axios.get(this.route('api.client.index'), {
|
||||
params: { query },
|
||||
})
|
||||
this.$store.dispatch('dashboard/loadServers')
|
||||
.finally(() => {
|
||||
this.clearFlashes();
|
||||
})
|
||||
.then(response => {
|
||||
this.servers = [];
|
||||
response.data.data.forEach(obj => {
|
||||
const s = new Server(obj.attributes);
|
||||
this.servers.push(s);
|
||||
this.getResourceUse(s);
|
||||
});
|
||||
|
||||
.then(() => {
|
||||
if (this.servers.length === 0) {
|
||||
this.info(this.$t('dashboard.index.no_matches'));
|
||||
}
|
||||
|
|
@ -97,7 +101,7 @@
|
|||
.catch(err => {
|
||||
console.error(err);
|
||||
const response = err.response;
|
||||
if (response.data && _.isObject(response.data.errors)) {
|
||||
if (response.data && isObject(response.data.errors)) {
|
||||
response.data.errors.forEach(error => {
|
||||
this.error(error.detail);
|
||||
});
|
||||
|
|
@ -113,7 +117,7 @@
|
|||
* at the fastest.
|
||||
*/
|
||||
onChange: debounce(function () {
|
||||
this.loadServers(this.$data.search);
|
||||
this.loadServers();
|
||||
}, 500),
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="server-box animate fadein">
|
||||
<router-link :to="{ name: 'server', params: { serverID: server.identifier }}" class="content">
|
||||
<router-link :to="{ name: 'server', params: { id: server.identifier }}" class="content">
|
||||
<div class="float-right">
|
||||
<div class="indicator" :class="status"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,6 @@ const router = new VueRouter({
|
|||
// have no JWT or the JWT is expired and wouldn't be accepted by the Panel.
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (to.path === route('auth.logout')) {
|
||||
console.log('logging out');
|
||||
return window.location = route('auth.logout');
|
||||
}
|
||||
|
||||
|
|
@ -54,13 +53,11 @@ router.beforeEach((to, from, next) => {
|
|||
|
||||
// Check that if we're accessing a non-auth route that a user exists on the page.
|
||||
if (!to.path.startsWith('/auth') && !(user instanceof User)) {
|
||||
console.log('logging out 2');
|
||||
store.commit('auth/logout');
|
||||
return window.location = route('auth.logout');
|
||||
}
|
||||
|
||||
// Continue on through the pipeline.
|
||||
console.log('continuing');
|
||||
return next();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
import Vue from 'vue';
|
||||
import Vuex from 'vuex';
|
||||
import server from "./modules/server";
|
||||
import auth from "./modules/auth";
|
||||
import auth from './modules/auth';
|
||||
import dashboard from './modules/dashboard';
|
||||
|
||||
Vue.use(Vuex);
|
||||
|
||||
const store = new Vuex.Store({
|
||||
strict: process.env.NODE_ENV !== 'production',
|
||||
modules: { auth },
|
||||
modules: { auth, dashboard },
|
||||
});
|
||||
|
||||
if (module.hot) {
|
||||
module.hot.accept(['./modules/auth'], () => {
|
||||
const newAuthModule = require('./modules/auth').default;
|
||||
// const newServerModule = require('./modules/server').default;
|
||||
const newDashboardModule = require('./modules/dashboard').default;
|
||||
|
||||
store.hotUpdate({
|
||||
modules: { newAuthModule },
|
||||
modules: { newAuthModule, newDashboardModule },
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
63
resources/assets/scripts/store/modules/dashboard.js
Normal file
63
resources/assets/scripts/store/modules/dashboard.js
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
import Server from './../../models/server';
|
||||
const route = require('./../../../../../vendor/tightenco/ziggy/src/js/route').default;
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: {
|
||||
servers: [],
|
||||
searchTerm: '',
|
||||
},
|
||||
getters: {
|
||||
getSearchTerm: function (state) {
|
||||
return state.searchTerm;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
/**
|
||||
* Retrieve all of the servers for a user matching the query.
|
||||
*
|
||||
* @param commit
|
||||
* @param {String} query
|
||||
* @returns {Promise<any>}
|
||||
*/
|
||||
loadServers: ({commit, state}) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
window.axios.get(route('api.client.index'), {
|
||||
params: { query: state.searchTerm },
|
||||
})
|
||||
.then(response => {
|
||||
// If there is a 302 redirect or some other odd behavior (basically, response that isnt
|
||||
// in JSON format) throw an error and don't try to continue with the request processing.
|
||||
if (!(response.data instanceof Object)) {
|
||||
return reject(new Error('An error was encountered while processing this request.'));
|
||||
}
|
||||
|
||||
// Remove all of the existing servers.
|
||||
commit('clearServers');
|
||||
|
||||
response.data.data.forEach(obj => {
|
||||
commit('addServer', obj.attributes);
|
||||
});
|
||||
|
||||
resolve();
|
||||
})
|
||||
.catch(reject);
|
||||
});
|
||||
},
|
||||
|
||||
setSearchTerm: ({commit}, term) => {
|
||||
commit('setSearchTerm', term);
|
||||
},
|
||||
},
|
||||
mutations: {
|
||||
addServer: function (state, data) {
|
||||
state.servers.push(new Server(data));
|
||||
},
|
||||
clearServers: function (state) {
|
||||
state.servers = [];
|
||||
},
|
||||
setSearchTerm: function (state, term) {
|
||||
state.searchTerm = term;
|
||||
},
|
||||
},
|
||||
};
|
||||
Loading…
Reference in a new issue