Skip to content

Commit 68b23de

Browse files
DaneEverittDaneEveritt
committed
Significantly less atrocious resource checking for servers...
1 parent dc52e23 commit 68b23de

File tree

2 files changed

+95
-82
lines changed

2 files changed

+95
-82
lines changed

‎resources/assets/scripts/components/dashboard/Dashboard.vue‎

Lines changed: 0 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,7 @@
2828
</template>
2929

3030
<script>
31-
import Server from '../../models/server';
3231
import debounce from 'lodash/debounce';
33-
import differenceInSeconds from 'date-fns/difference_in_seconds';
3432
import Flash from '../Flash';
3533
import ServerBox from './ServerBox';
3634
import Navigation from '../core/Navigation';
@@ -56,11 +54,6 @@
5654
if (this.servers.length === 0) {
5755
this.loadServers();
5856
}
59-
60-
document.addEventListener('visibilitychange', () => {
61-
this.documentVisible = document.visibilityState === 'visible';
62-
this._handleDocumentVisibilityChange(this.documentVisible);
63-
});
6457
},
6558
6659
/**
@@ -69,10 +62,6 @@
6962
*/
7063
mounted: function () {
7164
this.$refs.search.focus();
72-
73-
window.setTimeout(() => {
74-
this._iterateServerResourceUse();
75-
}, 5000);
7665
},
7766
7867
computed: {
@@ -123,66 +112,6 @@
123112
onChange: debounce(function () {
124113
this.loadServers();
125114
}, 500),
126-
127-
/**
128-
* Get resource usage for an individual server for rendering purposes.
129-
*
130-
* @param {Server} server
131-
*/
132-
getResourceUse: function (server) {
133-
window.axios.get(this.route('api.client.servers.resources', { server: server.identifier }))
134-
.then(response => {
135-
if (!(response.data instanceof Object)) {
136-
throw new Error('Received an invalid response object back from status endpoint.');
137-
}
138-
139-
window.events.$emit(`server:${server.uuid}::resources`, response.data.attributes);
140-
});
141-
},
142-
143-
/**
144-
* Iterates over all of the active servers and gets their resource usage.
145-
*
146-
* @private
147-
*/
148-
_iterateServerResourceUse: function (loop = true) {
149-
// Try again in 10 seconds, window is not in the foreground.
150-
if (!this.documentVisible && loop) {
151-
window.setTimeout(() => {
152-
this._iterateServerResourceUse();
153-
}, 10000);
154-
}
155-
156-
this.servers.forEach(server => {
157-
this.getResourceUse(server);
158-
});
159-
160-
if (loop) {
161-
window.setTimeout(() => {
162-
this._iterateServerResourceUse();
163-
}, 10000);
164-
}
165-
},
166-
167-
/**
168-
* Handle changes to document visibilty to keep server statuses updated properly.
169-
*
170-
* @param {Boolean} isVisible
171-
* @private
172-
*/
173-
_handleDocumentVisibilityChange: function (isVisible) {
174-
if (!isVisible) {
175-
this.backgroundedAt = new Date();
176-
return;
177-
}
178-
179-
// If it has been more than 30 seconds since this window was put into the background
180-
// lets go ahead and refresh all of the listed servers so that they have fresh stats.
181-
const diff = differenceInSeconds(new Date(), this.backgroundedAt);
182-
if (diff > 30) {
183-
this._iterateServerResourceUse(false);
184-
}
185-
},
186115
}
187116
};
188117
</script>

‎resources/assets/scripts/components/dashboard/ServerBox.vue‎

Lines changed: 95 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -39,36 +39,107 @@
3939

4040
<script>
4141
import get from 'lodash/get';
42+
import differenceInSeconds from 'date-fns/difference_in_seconds';
4243
4344
export default {
4445
name: 'server-box',
4546
props: {
4647
server: { type: Object, required: true },
4748
},
4849
50+
dataGetTimeout: null,
51+
4952
data: function () {
5053
return {
54+
backgroundedAt: new Date(),
55+
documentVisible: true,
5156
resources: undefined,
5257
cpu: 0,
5358
memory: 0,
5459
status: '',
5560
};
5661
},
5762
63+
watch: {
64+
/**
65+
* Watch the documentVisible item and perform actions when it is changed. If it becomes
66+
* true, we want to check how long ago the last poll was, if it was more than 30 seconds
67+
* we want to immediately trigger the resourceUse api call, otherwise we just want to restart
68+
* the time.
69+
*
70+
* If it is now false, we want to clear the timer that checks resource use, since we know
71+
* we won't be doing anything with them anyways. Might as well avoid extraneous resource
72+
* usage by the browser.
73+
*/
74+
documentVisible: function (value) {
75+
if (!value) {
76+
window.clearTimeout(this.$options.dataGetTimeout);
77+
return;
78+
}
79+
80+
if (differenceInSeconds(new Date(), this.backgroundedAt) >= 30) {
81+
this.getResourceUse();
82+
}
83+
84+
this.$options.dataGetTimeout = window.setInterval(() => {
85+
this.getResourceUse();
86+
}, 10000);
87+
},
88+
},
89+
90+
/**
91+
* Grab the initial resource usage for this specific server instance and add a listener
92+
* to monitor when this window is no longer visible. We don't want to needlessly poll the
93+
* API when we aren't looking at the page.
94+
*/
5895
created: function () {
59-
window.events.$on(`server:${this.server.uuid}::resources`, data => {
60-
this.resources = data;
61-
this.status = this.getServerStatus();
62-
63-
this.memory = Number(get(data, 'memory.current', 0)).toFixed(0);
64-
this.cpu = this._calculateCpu(
65-
Number(get(data, 'cpu.current', 0)),
66-
Number(this.server.limits.cpu)
67-
);
68-
});
96+
this.getResourceUse();
97+
document.addEventListener('visibilitychange', this._visibilityChange.bind(this));
98+
},
99+
100+
/**
101+
* Poll the API for changes every 10 seconds when the component is mounted.
102+
*/
103+
mounted: function () {
104+
this.$options.dataGetTimeout = window.setInterval(() => {
105+
this.getResourceUse();
106+
}, 10000);
107+
},
108+
109+
/**
110+
* Clear the timer and event listeners when we destroy the component.
111+
*/
112+
beforeDestroy: function () {
113+
window.clearInterval(this.$options.dataGetTimeout);
114+
document.removeEventListener('visibilitychange', this._visibilityChange.bind(this), false);
69115
},
70116
71117
methods: {
118+
/**
119+
* Query the resource API to determine what this server's state and resource usage is.
120+
*/
121+
getResourceUse: function () {
122+
window.axios.get(this.route('api.client.servers.resources', { server: this.server.identifier }))
123+
.then(response => {
124+
if (!(response.data instanceof Object)) {
125+
throw new Error('Received an invalid response object back from status endpoint.');
126+
}
127+
128+
129+
this.resources = response.data.attributes;
130+
this.status = this.getServerStatus();
131+
132+
this.memory = Number(get(this.resources, 'memory.current', 0)).toFixed(0);
133+
this.cpu = this._calculateCpu(
134+
Number(get(this.resources, 'cpu.current', 0)),
135+
Number(this.server.limits.cpu)
136+
);
137+
})
138+
.catch(err => {
139+
console.error({ err });
140+
});
141+
},
142+
72143
/**
73144
* Set the CSS to use for displaying the server's current status.
74145
*/
@@ -107,7 +178,20 @@
107178
}
108179
109180
return parseFloat((current / max * 100).toFixed(1));
110-
}
181+
},
182+
183+
/**
184+
* Handle document visibility changes.
185+
*
186+
* @private
187+
*/
188+
_visibilityChange: function () {
189+
this.documentVisible = document.visibilityState === 'visible';
190+
191+
if (!this.documentVisible) {
192+
this.backgroundedAt = new Date();
193+
}
194+
},
111195
}
112196
};
113197
</script>

0 commit comments

Comments
 (0)