Use client API to get resource use for a server
This commit is contained in:
Dane Everitt
parent
bcd3b055dd
commit
02b29a66ea
6 changed files with 113 additions and 68 deletions
|
|
@ -19,7 +19,6 @@
|
|||
v-for="(server, index) in servers.models"
|
||||
v-bind:key="index"
|
||||
v-bind:server="server"
|
||||
v-bind:resources="resources[server.uuid]"
|
||||
/>
|
||||
</transition-group>
|
||||
</div>
|
||||
|
|
@ -39,14 +38,26 @@
|
|||
loading: true,
|
||||
search: '',
|
||||
servers: new ServerCollection,
|
||||
resources: {},
|
||||
}
|
||||
},
|
||||
|
||||
mounted: function () {
|
||||
/**
|
||||
* Start loading the servers before the DOM $.el is created.
|
||||
*/
|
||||
created: function () {
|
||||
this.loadServers();
|
||||
},
|
||||
|
||||
/**
|
||||
* Once the page is mounted set a function to run every 5 seconds that will
|
||||
* iterate through the visible servers and fetch their resource usage.
|
||||
*/
|
||||
mounted: function () {
|
||||
setInterval(() => {
|
||||
this.servers.each(this.getResourceUse)
|
||||
}, 10000);
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Load the user's servers and render them onto the dashboard.
|
||||
|
|
@ -64,8 +75,9 @@
|
|||
.then(response => {
|
||||
this.servers = new ServerCollection;
|
||||
response.data.data.forEach(obj => {
|
||||
this.resources[obj.attributes.uuid] = { cpu: 0, memory: 0 };
|
||||
this.servers.add(obj.attributes);
|
||||
this.getResourceUse(
|
||||
this.servers.add(obj.attributes)
|
||||
);
|
||||
});
|
||||
|
||||
if (this.servers.models.length === 0) {
|
||||
|
|
@ -93,6 +105,25 @@
|
|||
onChange: _.debounce(function () {
|
||||
this.loadServers(this.$data.search);
|
||||
}, 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);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="server-box animate fadein">
|
||||
<router-link :to="{ name: 'server', params: { id: server.identifier }}" class="content">
|
||||
<div class="float-right">
|
||||
<div class="indicator"></div>
|
||||
<div class="indicator" :class="status"></div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="text-black font-bold text-xl">
|
||||
|
|
@ -19,11 +19,11 @@
|
|||
</div>
|
||||
<div class="mb-4 flex text-center">
|
||||
<div class="inline-block border border-grey-lighter border-l-0 p-4 flex-1">
|
||||
<span class="font-bold text-xl">{{ resources.cpu > 0 ? resources.cpu : '—' }}</span>
|
||||
<span class="font-bold text-xl">{{ cpu > 0 ? cpu : '—' }}</span>
|
||||
<span class="font-light text-sm">%</span>
|
||||
</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">{{ resources.memory > 0 ? resources.memory : '—' }}</span>
|
||||
<span class="font-bold text-xl">{{ memory > 0 ? memory : '—' }}</span>
|
||||
<span class="font-light text-sm">Mb</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -38,13 +38,76 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { Server } from '../../models/server';
|
||||
import get from 'lodash/get';
|
||||
|
||||
export default {
|
||||
name: 'server-box',
|
||||
props: {
|
||||
server: { type: Server, required: true },
|
||||
resources: { type: Object, required: true },
|
||||
server: { type: Object, required: true },
|
||||
},
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
resources: undefined,
|
||||
cpu: 0,
|
||||
memory: 0,
|
||||
status: '',
|
||||
};
|
||||
},
|
||||
|
||||
created: function () {
|
||||
window.events.$on(`server:${this.server.uuid}::resources`, data => {
|
||||
this.resources = data;
|
||||
this.status = this.getServerStatus();
|
||||
|
||||
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)
|
||||
);
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Set the CSS to use for displaying the server's current status.
|
||||
*/
|
||||
getServerStatus: function () {
|
||||
if (!(this.resources instanceof Object)) {
|
||||
return '';
|
||||
}
|
||||
|
||||
if (!this.resources.installed || this.resources.suspended) {
|
||||
return '';
|
||||
}
|
||||
|
||||
switch (this.resources.state) {
|
||||
case 'off':
|
||||
return 'offline';
|
||||
case 'on':
|
||||
case 'starting':
|
||||
case 'stopping':
|
||||
return 'online';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Calculate the CPU usage for a given server relative to their set maximum.
|
||||
*
|
||||
* @param {Number} current
|
||||
* @param {Number} max
|
||||
* @return {Number}
|
||||
* @private
|
||||
*/
|
||||
_calculateCpu: function (current, max) {
|
||||
if (max === 0) {
|
||||
return parseFloat(current.toFixed(1));
|
||||
}
|
||||
|
||||
return parseFloat((current / max * 100).toFixed(1));
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue