mirror of
https://github.com/pterodactyl/panel.git
synced 2024-11-22 17:12:30 +01:00
Dont refresh server statuses unless the page is active
Reduces the number of polling requests happening on the server by only sending those requests if the user is actively viewing the dashboard. There was no point in updating the resource usage if no one is viewing it. After 30 seconds away from the window when a user comes back it will update instantenously, otherwise it'll just update after 5 seconds.
This commit is contained in:
Dane Everitt
parent
02b29a66ea
commit
be5a9108f9
@ -26,6 +26,7 @@
|
||||
"jquery": "^3.3.1",
|
||||
"jwt-decode": "^2.2.0",
|
||||
"lodash": "^4.17.5",
|
||||
"luxon": "^1.2.1",
|
||||
"postcss": "^6.0.21",
|
||||
"postcss-import": "^11.1.0",
|
||||
"postcss-preset-env": "^3.4.0",
|
||||
@ -35,6 +36,7 @@
|
||||
"vue": "^2.5.7",
|
||||
"vue-axios": "^2.1.1",
|
||||
"vue-devtools": "^3.1.9",
|
||||
"vue-feather-icons": "^4.7.1",
|
||||
"vue-loader": "^14.2.2",
|
||||
"vue-mc": "^0.2.4",
|
||||
"vue-router": "^3.0.1",
|
||||
|
||||
@ -25,6 +25,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DateTime } from 'luxon';
|
||||
import { ServerCollection } from '../../models/server';
|
||||
import _ from 'lodash';
|
||||
import Flash from '../Flash';
|
||||
@ -35,6 +36,8 @@
|
||||
components: { ServerBox, Flash },
|
||||
data: function () {
|
||||
return {
|
||||
backgroundedAt: DateTime.local(),
|
||||
documentVisible: true,
|
||||
loading: true,
|
||||
search: '',
|
||||
servers: new ServerCollection,
|
||||
@ -46,6 +49,11 @@
|
||||
*/
|
||||
created: function () {
|
||||
this.loadServers();
|
||||
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
this.documentVisible = document.visibilityState === 'visible';
|
||||
this._handleDocumentVisibilityChange(this.documentVisible);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
@ -53,9 +61,7 @@
|
||||
* iterate through the visible servers and fetch their resource usage.
|
||||
*/
|
||||
mounted: function () {
|
||||
setInterval(() => {
|
||||
this.servers.each(this.getResourceUse)
|
||||
}, 10000);
|
||||
this._iterateServerResourceUse();
|
||||
},
|
||||
|
||||
methods: {
|
||||
@ -124,6 +130,37 @@
|
||||
console.error(err);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Iterates over all of the active servers and gets their resource usage.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
_iterateServerResourceUse: function (initialTimeout = 5000) {
|
||||
window.setTimeout(() => {
|
||||
if (this.documentVisible) {
|
||||
return window.setTimeout(this._iterateServerResourceUse(), 5000);
|
||||
}
|
||||
}, initialTimeout);
|
||||
},
|
||||
|
||||
/**
|
||||
* Handle changes to document visibilty to keep server statuses updated properly.
|
||||
*
|
||||
* @param {Boolean} isVisible
|
||||
* @private
|
||||
*/
|
||||
_handleDocumentVisibilityChange: function (isVisible) {
|
||||
if (!isVisible) {
|
||||
this.backgroundedAt = DateTime.local();
|
||||
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 = DateTime.local().diff(this.backgroundedAt, 'seconds');
|
||||
this._iterateServerResourceUse(diff.seconds > 30 ? 1 : 5000);
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
</div>
|
||||
<div class="inline-block border border-grey-lighter border-l-0 border-r-0 p-4 flex-1">
|
||||
<span class="font-bold text-xl">{{ memory > 0 ? memory : '—' }}</span>
|
||||
<span class="font-light text-sm">Mb</span>
|
||||
<span class="font-light text-sm">MB</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
|
||||
14
yarn.lock
14
yarn.lock
@ -505,6 +505,10 @@ babel-helper-replace-supers@^6.24.1:
|
||||
babel-traverse "^6.24.1"
|
||||
babel-types "^6.24.1"
|
||||
|
||||
babel-helper-vue-jsx-merge-props@^2.0.2:
|
||||
version "2.0.3"
|
||||
resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
|
||||
|
||||
babel-helpers@^6.24.1:
|
||||
version "6.24.1"
|
||||
resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.24.1.tgz#3471de9caec388e5c850e597e58a26ddf37602b2"
|
||||
@ -3424,6 +3428,10 @@ lru-cache@^4.0.1, lru-cache@^4.1.1:
|
||||
pseudomap "^1.0.2"
|
||||
yallist "^2.1.2"
|
||||
|
||||
luxon@^1.2.1:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/luxon/-/luxon-1.2.1.tgz#5c4948d141939c2b2820f0c3a99276932245efb1"
|
||||
|
||||
macaddress@^0.2.8:
|
||||
version "0.2.8"
|
||||
resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
|
||||
@ -5985,6 +5993,12 @@ vue-devtools@^3.1.9:
|
||||
version "3.1.9"
|
||||
resolved "https://registry.yarnpkg.com/vue-devtools/-/vue-devtools-3.1.9.tgz#283b458c6853f569a987da0092e7c52e8243a436"
|
||||
|
||||
vue-feather-icons@^4.7.1:
|
||||
version "4.7.1"
|
||||
resolved "https://registry.yarnpkg.com/vue-feather-icons/-/vue-feather-icons-4.7.1.tgz#d8c55fbee7c9ad59689ebbaf07ad1e2f1e5c37da"
|
||||
dependencies:
|
||||
babel-helper-vue-jsx-merge-props "^2.0.2"
|
||||
|
||||
vue-hot-reload-api@^2.2.0:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.0.tgz#97976142405d13d8efae154749e88c4e358cf926"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user