etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix alignment bugs, fix issue on mobile by changing icons to small/round icons 

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
This commit is contained in:
Rohit Yadav 2019-08-13 13:34:19 +05:30
parent 671a04cc8c
commit 74ef647a28
2 changed files with 41 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
ui/src/views/dashboard/CapacityDashboard.vue
View File

@ -16,25 +16,42 @@
</a-select>
</div>
<div class="ant-pro-capacity-dashboard__button">
<a-button
type="primary"
@click="listCapacity(zoneSelected, true)">Fetch Latest</a-button>
<a-tooltip placement="bottom">
<template slot='title'>
Fetch Latest
</template>
<a-button
type="primary" shape="circle"
@click="listCapacity(zoneSelected, true)">
<a-icon style="font-size: 16px; padding: 2px" type="reload" />
</a-button>
</a-tooltip>
</div>
<div class="ant-pro-capacity-dashboard__button">
<a-button>
<router-link :to="{ name: 'alert' }">
<a-icon style="font-size: 16px; padding: 2px" type="flag" />
</router-link>
</a-button>
<a-tooltip placement="bottom">
<template slot='title'>
View Alerts
</template>
<a-button shape="circle">
<router-link :to="{ name: 'alert' }">
<a-icon style="font-size: 16px; padding: 2px" type="flag" />
</router-link>
</a-button>
</a-tooltip>
</div>
<div class="ant-pro-capacity-dashboard__button">
<a-button type="danger">
<router-link :to="{ name: 'host', query: {'state': 'Alert'} }">
<a-badge dot>
<a-icon style="font-size: 16px" type="desktop" />
</a-badge>
</router-link>
</a-button>
<a-tooltip placement="bottom">
<template slot='title'>
View Hosts in Alert State
</template>
<a-button type="danger" shape="circle">
<router-link :to="{ name: 'host', query: {'state': 'Alert'} }">
<a-badge dot>
<a-icon style="font-size: 16px" type="desktop" />
</a-badge>
</router-link>
</a-button>
</a-tooltip>
</div>
</div>
<a-row :gutter="12">

21
ui/src/views/dashboard/UsageDashboard.vue
View File

@ -3,13 +3,10 @@
<a-row :gutter="12">
<a-col
class="user-dashboard-chart-card"
:sm="12"
:md="12"
:xl="6"
:style="{ marginTop: '24px' }">
:xl="16">
<a-row :gutter="12">
<a-col
:xl="12"
:xl="8"
v-for="stat in stats"
:key="stat.type"
:style="{ marginBottom: '12px' }">
@ -82,48 +79,48 @@ export default {
},
methods: {
fetchData () {
this.stats = []
this.stats = [{}, {}, {}, {}, {}, {}]
api('listVirtualMachines', { state: 'Running', listall: true }).then(json => {
var count = 0
if (json && json.listvirtualmachinesresponse) {
count = json.listvirtualmachinesresponse.count
}
this.stats.push({ name: 'Running VMs', count: count, path: 'vm' })
this.stats.splice(0, 1, { name: 'Running VMs', count: count, path: 'vm' })
})
api('listVirtualMachines', { state: 'Stopped', listall: true }).then(json => {
var count = 0
if (json && json.listvirtualmachinesresponse) {
count = json.listvirtualmachinesresponse.count
}
this.stats.push({ name: 'Stopped VMs', count: count, path: 'vm' })
this.stats.splice(1, 1, { name: 'Stopped VMs', count: count, path: 'vm' })
})
api('listVirtualMachines', { listall: true }).then(json => {
var count = 0
if (json && json.listvirtualmachinesresponse) {
count = json.listvirtualmachinesresponse.count
}
this.stats.push({ name: 'Total VMs', count: count, path: 'vm' })
this.stats.splice(2, 1, { name: 'Total VMs', count: count, path: 'vm' })
})
api('listVolumes', { listall: true }).then(json => {
var count = 0
if (json && json.listvolumesresponse) {
count = json.listvolumesresponse.count
}
this.stats.push({ name: 'Total Volumes', count: count, path: 'volume' })
this.stats.splice(3, 1, { name: 'Total Volumes', count: count, path: 'volume' })
})
api('listNetworks', { listall: true }).then(json => {
var count = 0
if (json && json.listnetworksresponse) {
count = json.listnetworksresponse.count
}
this.stats.push({ name: 'Total Networks', count: count, path: 'guestnetwork' })
this.stats.splice(4, 1, { name: 'Total Networks', count: count, path: 'guestnetwork' })
})
api('listPublicIpAddresses', { listall: true }).then(json => {
var count = 0
if (json && json.listpublicipaddressesresponse) {
count = json.listpublicipaddressesresponse.count
}
this.stats.push({ name: 'Public IP Addresses', count: count, path: 'publicip' })
this.stats.splice(5, 1, { name: 'Public IP Addresses', count: count, path: 'publicip' })
})
this.listEvents()
},