sonot
/
PteroTheme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Break out the server box into a component

This commit is contained in:
Dane Everitt 2018-06-02 17:41:06 -07:00
parent 0d56ed19a7
commit bcd3b055dd
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
2 changed files with 60 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
resources/assets/scripts/components/dashboard/Dashboard.vue
View File

@ -15,42 +15,12 @@
</div> </div>
</div> </div>
<transition-group class="w-full m-auto mt-4 animate fadein sm:flex flex-wrap content-start" v-else> <transition-group class="w-full m-auto mt-4 animate fadein sm:flex flex-wrap content-start" v-else>
<div class="server-box animate fadein" :key="index" v-for="(server, index) in servers.models"> <server-box
<router-link :to="{ name: 'server', params: { id: server.identifier }}" class="content"> v-for="(server, index) in servers.models"
<div class="float-right"> v-bind:key="index"
<div class="indicator"></div> v-bind:server="server"
</div> v-bind:resources="resources[server.uuid]"
<div class="mb-4"> />
<div class="text-black font-bold text-xl">
{{ server.name }}
</div>
</div>
<div class="mb-0 flex">
<div class="usage">
<div class="indicator-title">{{ $t('dashboard.index.cpu_title') }}</div>
</div>
<div class="usage">
<div class="indicator-title">{{ $t('dashboard.index.memory_title') }}</div>
</div>
</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">---</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">---</span>
<span class="font-light text-sm">Mb</span>
</div>
</div>
<div class="flex items-center">
<div class="text-sm">
<p class="text-grey">{{ server.node }}</p>
<p class="text-grey-dark">{{ server.allocation.ip }}:{{ server.allocation.port }}</p>
</div>
</div>
</router-link>
</div>
</transition-group> </transition-group>
</div> </div>
</template> </template>
@ -59,15 +29,17 @@
import { ServerCollection } from '../../models/server'; import { ServerCollection } from '../../models/server';
import _ from 'lodash'; import _ from 'lodash';
import Flash from '../Flash'; import Flash from '../Flash';
import ServerBox from './ServerBox';
export default { export default {
name: 'dashboard', name: 'dashboard',
components: { Flash }, components: { ServerBox, Flash },
data: function () { data: function () {
return { return {
loading: true, loading: true,
search: '', search: '',
servers: new ServerCollection, servers: new ServerCollection,
resources: {},
} }
}, },
@ -92,6 +64,7 @@
.then(response => { .then(response => {
this.servers = new ServerCollection; this.servers = new ServerCollection;
response.data.data.forEach(obj => { response.data.data.forEach(obj => {
this.resources[obj.attributes.uuid] = { cpu: 0, memory: 0 };
this.servers.add(obj.attributes); this.servers.add(obj.attributes);
}); });

50
resources/assets/scripts/components/dashboard/ServerBox.vue Normal file
View File

@ -0,0 +1,50 @@
<template>
<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>
<div class="mb-4">
<div class="text-black font-bold text-xl">
{{ server.name }}
</div>
</div>
<div class="mb-0 flex">
<div class="usage">
<div class="indicator-title">{{ $t('dashboard.index.cpu_title') }}</div>
</div>
<div class="usage">
<div class="indicator-title">{{ $t('dashboard.index.memory_title') }}</div>
</div>
</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 : '&mdash;' }}</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 : '&mdash;' }}</span>
<span class="font-light text-sm">Mb</span>
</div>
</div>
<div class="flex items-center">
<div class="text-sm">
<p class="text-grey">{{ server.node }}</p>
<p class="text-grey-dark">{{ server.allocation.ip }}:{{ server.allocation.port }}</p>
</div>
</div>
</router-link>
</div>
</template>
<script>
import { Server } from '../../models/server';
export default {
name: 'server-box',
props: {
server: { type: Server, required: true },
resources: { type: Object, required: true },
}
};
</script>