apache/cloudstack
1
0
Fork 0
mirror of https://github.com/apache/cloudstack.git synced 2025-10-26 08:42:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

compute: vm view customisation

Browse Source 
Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
This commit is contained in:
Rohit Yadav 2019-10-10 12:52:41 +05:30
parent ef7b338d73
commit 0182a95ac6
5 changed files with 30 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/components/widgets/ListView.vue
View File

@ -33,7 +33,7 @@
<router-link :to="{ path: '/vm/' + record.virtualmachineid }">{{ text }}</router-link>
</a>
<template slot="state" slot-scope="text">
<status :text="text ? text : ''" />
<status :text="text ? text : ''" displayText />
</template>
<a slot="account" slot-scope="text, record" href="javascript:;">

4
ui/src/components/widgets/Status.vue
View File

@ -47,8 +47,10 @@ export default {
case 'Started':
status = 'success'
break
case 'Stopped':
case 'Disabled':
case 'Down':
case 'Error':
case 'Stopped':
status = 'error'
break
case 'Migrating':

6
ui/src/config/section/compute.js
View File

@ -117,6 +117,12 @@ export default {
label: 'Reset SSH Key',
dataView: true
},
{
api: 'assignVirtualMachine',
icon: 'user-add',
label: 'Assign Instance to Another Account',
dataView: true
},
{
api: 'destroyVirtualMachine',
icon: 'delete',

3
ui/src/views/AutogenView.vue
View File

@ -3,7 +3,7 @@
<breadcrumb v-if="device !== 'desktop'" class="mobile-breadcrumb" />
<a-row>
<a-col :span="17">
<a-tooltip placement="bottom" v-for="(action, actionIndex) in actions" :key="actionIndex" v-if="(!dataView && (action.listView || action.groupAction && selectedRowKeys.length > 0)) || (dataView && action.dataView)">
<a-tooltip placement="bottom" v-for="(action, actionIndex) in actions" :key="actionIndex" v-if="action.api in $store.getters.apis && ((!dataView && (action.listView || action.groupAction && selectedRowKeys.length > 0)) || (dataView && action.dataView))">
<template slot="title">
{{ action.label }}
</template>
@ -322,6 +322,7 @@ export default {
this.columns.push({
title: this.$t(key),
dataIndex: key,
width: key === 'state' ? '8%' : '',
scopedSlots: { customRender: key },
sorter: (a, b) => String(a[key]).length - String(b[key]).length
})

38
ui/src/views/compute/InstanceView.vue
View File

@ -3,7 +3,7 @@
<a-row :gutter="12">
<a-col :md="24" :lg="7" style="margin-bottom: 12px">
<a-card :bordered="true">
<div class="account-center-avatarHolder">
<div class="resource-details">
<div class="avatar">
<font-awesome-icon :icon="['fab', osLogo]" size="4x" style="color: #666;" />
</div>
@ -21,7 +21,7 @@
<a-tag :color="vm.isdynamicallyscalable ? 'green': 'red'">Dynamic Scalable</a-tag>
</div>
</div>
<div class="account-center-detail">
<div class="resource-center-detail">
<p>
<status :text="vm.state ? vm.state : ''" style="padding-left: 8px; padding-right: 5px"/>{{ vm.state }}
</p>
@ -43,26 +43,23 @@
<font-awesome-icon :icon="['fas', 'database']" />
{{ (totalStorage / (1024 * 1024 * 1024.0)).toFixed(2) }} GB Storage
(<router-link :to="{ path: '/template/' + vm.templateid }">{{ vm.templatename }}</router-link>)<br/>
<span style="padding-left: 32px">
<a-tag color="green">Disk Read {{ vm.diskkbsread }} KB</a-tag>
<a-tag color="blue">Disk Write {{ vm.diskkbswrite }} KB</a-tag>
</span><br/>
<span style="padding-left: 32px">
<a-tag color="green">Disk Read (IO) {{ vm.diskioread }}</a-tag>
<a-tag color="blue">Disk Write (IO) {{ vm.diskiowrite }}</a-tag>
</span>
<div style="margin-left: 45px">
<a-tag><a-icon type="download" /> Read {{ vm.diskkbsread }} KB</a-tag>
<a-tag><a-icon type="upload" /> Write {{ vm.diskkbswrite }} KB</a-tag><br/>
<a-tag><a-icon type="download" /> Read (IO) {{ vm.diskioread }}</a-tag>
<a-tag><a-icon type="upload" /> Write (IO) {{ vm.diskiowrite }}</a-tag>
</div>
</p>
<p>
<font-awesome-icon :icon="['fas', 'ethernet']" />
<span>
{{ vm && vm.nic ? vm.nic.length : 0 }} NIC(s):
<a-tag color="green"><a-icon type="arrow-down" /> RX {{ vm.networkkbsread }} KB</a-tag>
<a-tag color="blue"><a-icon type="arrow-up" /> TX {{ vm.networkkbswrite }} KB</a-tag>
<span style="margin-left: 5px">
<a-tag><a-icon type="arrow-down" /> RX {{ vm.networkkbsread }} KB</a-tag>
<a-tag><a-icon type="arrow-up" /> TX {{ vm.networkkbswrite }} KB</a-tag>
</span>
<br/>
<span style="padding-left: 34px" v-for="eth in vm.nic" :key="eth.id">
{{ eth.ipaddress }} <router-link :to="{ path: '/guestnetwork/' + eth.networkid }">({{ eth.networkname }})</router-link> <br/>
</span>
<div style="margin-left: 45px" v-for="(eth, index) in vm.nic" :key="eth.id">
<a-icon type="api"/> eth{{ index }} {{ eth.ipaddress}} (<router-link :to="{ path: '/guestnetwork/' + eth.networkid }">{{ eth.networkname }}</router-link>)
</div>
</p>
<p v-if="vm.group">
<a-icon type="team" style="margin-left: 6px; margin-right: 10px" />
@ -189,7 +186,7 @@
<status :text="item.state" displayText /><br/>
</div>
<div slot="description">
<a-icon type="barcode"/> <router-link :to="{ path: '/volume/' + item.id }"> {{ item.id }}</router-link>
<a-icon type="barcode"/> {{ item.id }}
</div>
<a-avatar slot="avatar">
<font-awesome-icon :icon="['fas', 'database']" />
@ -382,7 +379,7 @@ export default {
height: 100%;
min-height: 100%;
transition: 0.3s;
.account-center-avatarHolder {
.resource-details {
text-align: center;
margin-bottom: 24px;
& > .avatar {
@ -406,10 +403,11 @@ export default {
margin-bottom: 4px;
}
}
.account-center-detail {
.resource-center-detail {
p {
margin-bottom: 8px;
padding-left: 12px;
padding-right: 12px;
position: relative;
font-awesome-icon, .svg-inline--fa {