Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Significantly less atrocious resource checking for servers...

Browse source
This commit is contained in:
Dane Everitt 2018-08-18 21:02:58 -07:00
parent dc52e238ac
commit 68b23de55d
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
2 changed files with 95 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
resources/assets/scripts/components/dashboard/Dashboard.vue
View file

@ -28,9 +28,7 @@
</template>
<script>
import Server from '../../models/server';
import debounce from 'lodash/debounce';
import differenceInSeconds from 'date-fns/difference_in_seconds';
import Flash from '../Flash';
import ServerBox from './ServerBox';
import Navigation from '../core/Navigation';
@ -56,11 +54,6 @@
if (this.servers.length === 0) {
this.loadServers();
}
document.addEventListener('visibilitychange', () => {
this.documentVisible = document.visibilityState === 'visible';
this._handleDocumentVisibilityChange(this.documentVisible);
});
},
/**
@ -69,10 +62,6 @@
*/
mounted: function () {
this.$refs.search.focus();
window.setTimeout(() => {
this._iterateServerResourceUse();
}, 5000);
},
computed: {
@ -123,66 +112,6 @@
onChange: debounce(function () {
this.loadServers();
}, 500),
/**
* Get resource usage for an individual server for rendering purposes.
*
* @param {Server} server
*/
getResourceUse: function (server) {
window.axios.get(this.route('api.client.servers.resources', { server: server.identifier }))
.then(response => {
if (!(response.data instanceof Object)) {
throw new Error('Received an invalid response object back from status endpoint.');
}
window.events.$emit(`server:${server.uuid}::resources`, response.data.attributes);
});
},
/**
* Iterates over all of the active servers and gets their resource usage.
*
* @private
*/
_iterateServerResourceUse: function (loop = true) {
// Try again in 10 seconds, window is not in the foreground.
if (!this.documentVisible && loop) {
window.setTimeout(() => {
this._iterateServerResourceUse();
}, 10000);
}
this.servers.forEach(server => {
this.getResourceUse(server);
});
if (loop) {
window.setTimeout(() => {
this._iterateServerResourceUse();
}, 10000);
}
},
/**
* Handle changes to document visibilty to keep server statuses updated properly.
*
* @param {Boolean} isVisible
* @private
*/
_handleDocumentVisibilityChange: function (isVisible) {
if (!isVisible) {
this.backgroundedAt = new Date();
return;
}
// If it has been more than 30 seconds since this window was put into the background
// lets go ahead and refresh all of the listed servers so that they have fresh stats.
const diff = differenceInSeconds(new Date(), this.backgroundedAt);
if (diff > 30) {
this._iterateServerResourceUse(false);
}
},
}
};
</script>

104
resources/assets/scripts/components/dashboard/ServerBox.vue
View file

@ -39,6 +39,7 @@
<script>
import get from 'lodash/get';
import differenceInSeconds from 'date-fns/difference_in_seconds';
export default {
name: 'server-box',
@ -46,8 +47,12 @@
server: { type: Object, required: true },
},
dataGetTimeout: null,
data: function () {
return {
backgroundedAt: new Date(),
documentVisible: true,
resources: undefined,
cpu: 0,
memory: 0,
@ -55,20 +60,86 @@
};
},
created: function () {
window.events.$on(`server:${this.server.uuid}::resources`, data => {
this.resources = data;
this.status = this.getServerStatus();
watch: {
/**
* Watch the documentVisible item and perform actions when it is changed. If it becomes
* true, we want to check how long ago the last poll was, if it was more than 30 seconds
* we want to immediately trigger the resourceUse api call, otherwise we just want to restart
* the time.
*
* If it is now false, we want to clear the timer that checks resource use, since we know
* we won't be doing anything with them anyways. Might as well avoid extraneous resource
* usage by the browser.
*/
documentVisible: function (value) {
if (!value) {
window.clearTimeout(this.$options.dataGetTimeout);
return;
}
this.memory = Number(get(data, 'memory.current', 0)).toFixed(0);
this.cpu = this._calculateCpu(
Number(get(data, 'cpu.current', 0)),
Number(this.server.limits.cpu)
);
});
if (differenceInSeconds(new Date(), this.backgroundedAt) >= 30) {
this.getResourceUse();
}
this.$options.dataGetTimeout = window.setInterval(() => {
this.getResourceUse();
}, 10000);
},
},
/**
* Grab the initial resource usage for this specific server instance and add a listener
* to monitor when this window is no longer visible. We don't want to needlessly poll the
* API when we aren't looking at the page.
*/
created: function () {
this.getResourceUse();
document.addEventListener('visibilitychange', this._visibilityChange.bind(this));
},
/**
* Poll the API for changes every 10 seconds when the component is mounted.
*/
mounted: function () {
this.$options.dataGetTimeout = window.setInterval(() => {
this.getResourceUse();
}, 10000);
},
/**
* Clear the timer and event listeners when we destroy the component.
*/
beforeDestroy: function () {
window.clearInterval(this.$options.dataGetTimeout);
document.removeEventListener('visibilitychange', this._visibilityChange.bind(this), false);
},
methods: {
/**
* Query the resource API to determine what this server's state and resource usage is.
*/
getResourceUse: function () {
window.axios.get(this.route('api.client.servers.resources', { server: this.server.identifier }))
.then(response => {
if (!(response.data instanceof Object)) {
throw new Error('Received an invalid response object back from status endpoint.');
}
this.resources = response.data.attributes;
this.status = this.getServerStatus();
this.memory = Number(get(this.resources, 'memory.current', 0)).toFixed(0);
this.cpu = this._calculateCpu(
Number(get(this.resources, 'cpu.current', 0)),
Number(this.server.limits.cpu)
);
})
.catch(err => {
console.error({ err });
});
},
/**
* Set the CSS to use for displaying the server's current status.
*/
@ -107,7 +178,20 @@
}
return parseFloat((current / max * 100).toFixed(1));
},
/**
* Handle document visibility changes.
*
* @private
*/
_visibilityChange: function () {
this.documentVisible = document.visibilityState === 'visible';
if (!this.documentVisible) {
this.backgroundedAt = new Date();
}
},
}
};
</script>