This is an automated email from the ASF dual-hosted git repository.
rohit pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/cloudstack-primate.git
The following commit(s) were added to refs/heads/master by this push:
new 89c6745 views: fix dashboard and autogenview css issues
89c6745 is described below
commit 89c674553ec2a3043caf6cafef61a8ef378f0d10
Author: Rohit Yadav <[email protected]>
AuthorDate: Tue Jun 16 23:31:41 2020 +0530
views: fix dashboard and autogenview css issues
Signed-off-by: Rohit Yadav <[email protected]>
---
src/components/widgets/Breadcrumb.vue | 1 -
src/views/AutogenView.vue | 29 ++++++++++-------------------
src/views/compute/InstanceHardware.vue | 2 +-
src/views/dashboard/CapacityDashboard.vue | 16 +++++++++-------
src/views/dashboard/UsageDashboard.vue | 19 ++++++++++++++-----
src/views/infra/InfraSummary.vue | 4 ++--
6 files changed, 36 insertions(+), 35 deletions(-)
diff --git a/src/components/widgets/Breadcrumb.vue
b/src/components/widgets/Breadcrumb.vue
index a6f8e1e..c13c0ea 100644
--- a/src/components/widgets/Breadcrumb.vue
+++ b/src/components/widgets/Breadcrumb.vue
@@ -101,7 +101,6 @@ export default {
<style>
.ant-breadcrumb {
vertical-align: text-bottom;
- margin-bottom: 8px;
}
.ant-breadcrumb .anticon {
diff --git a/src/views/AutogenView.vue b/src/views/AutogenView.vue
index 70ef866..452d70b 100644
--- a/src/views/AutogenView.vue
+++ b/src/views/AutogenView.vue
@@ -22,20 +22,15 @@
<a-col :span="device === 'mobile' ? 24 : 12" style="padding-left:
12px">
<breadcrumb :resource="resource">
<span slot="end">
- <a-tooltip placement="bottom">
- <template slot="title">
- {{ $t('label.refresh') }}
- </template>
- <a-button
- style="margin-top: 4px"
- :loading="loading"
- shape="round"
- size="small"
- icon="reload"
- @click="fetchData()">
- {{ $t('label.refresh') }}
- </a-button>
- </a-tooltip>
+ <a-button
+ :loading="loading"
+ style="margin-bottom: 5px"
+ shape="round"
+ size="small"
+ icon="reload"
+ @click="fetchData()">
+ {{ $t('label.refresh') }}
+ </a-button>
<a-tooltip placement="right">
<template slot="title">
{{ $t('label.filterby') }}
@@ -971,7 +966,7 @@ export default {
.breadcrumb-card {
margin-left: -24px;
margin-right: -24px;
- margin-top: -18px;
+ margin-top: -16px;
margin-bottom: 12px;
}
@@ -983,8 +978,4 @@ export default {
.ant-breadcrumb {
vertical-align: text-bottom;
}
-
-.ant-breadcrumb .anticon {
- margin-left: 8px;
-}
</style>
diff --git a/src/views/compute/InstanceHardware.vue
b/src/views/compute/InstanceHardware.vue
index 2d0fe93..4d9dacb 100644
--- a/src/views/compute/InstanceHardware.vue
+++ b/src/views/compute/InstanceHardware.vue
@@ -75,7 +75,7 @@
<div class="label">{{ $t('label.physicalsize') }}</div>
<div>{{ (item.physicalsize / (1024 * 1024 *
1024.0)).toFixed(4) }} GB</div>
</div>
- <div class="attribute">
+ <div class="attribute" v-if="item.storage">
<div class="label">{{ $t('label.storagepool') }}</div>
<div>{{ item.storage }} ({{ item.storagetype }})</div>
</div>
diff --git a/src/views/dashboard/CapacityDashboard.vue
b/src/views/dashboard/CapacityDashboard.vue
index f717e3d..4820d12 100644
--- a/src/views/dashboard/CapacityDashboard.vue
+++ b/src/views/dashboard/CapacityDashboard.vue
@@ -17,7 +17,7 @@
<template>
<a-row class="capacity-dashboard" :gutter="12">
- <a-col :xl="18">
+ <a-col :xl="16">
<div class="capacity-dashboard-wrapper">
<div class="capacity-dashboard-select">
<a-select
@@ -48,11 +48,12 @@
<a-col
:xs="12"
:sm="8"
- :md="6"
+ :md="8"
:style="{ marginBottom: '12px' }"
v-for="stat in stats"
:key="stat.type">
<chart-card :loading="loading">
+ <router-link :to="{ path: '/zone/' + zoneSelected.id }">
<div class="capacity-dashboard-chart-card-inner">
<h3>{{ $t(ts[stat.name]) }}</h3>
<a-progress
@@ -63,18 +64,19 @@
:strokeColor="getStrokeColour(parseFloat(stat.percentused))"
:width="100" />
</div>
+ </router-link>
<template slot="footer"><center>{{ displayData(stat.name,
stat.capacityused) }} / {{ displayData(stat.name, stat.capacitytotal)
}}</center></template>
</chart-card>
</a-col>
</a-row>
</a-col>
- <a-col :xl="6">
+ <a-col :xl="8">
<chart-card>
<div style="text-align: center">
<a-tooltip placement="bottom"
class="capacity-dashboard-button-wrapper">
<template slot="title">
- View Hosts in Alert State
+ {{ $t('label.view') + ' ' + $t('label.host.alerts') }}
</template>
<a-button type="danger" shape="circle">
<router-link :to="{ name: 'host', query: {'state': 'Alert'} }">
@@ -84,7 +86,7 @@
</a-tooltip>
<a-tooltip placement="bottom"
class="capacity-dashboard-button-wrapper">
<template slot="title">
- View Alerts
+ {{ $t('label.view') + ' ' + $t('label.alerts') }}
</template>
<a-button shape="circle">
<router-link :to="{ name: 'alert' }">
@@ -94,7 +96,7 @@
</a-tooltip>
<a-tooltip placement="bottom"
class="capacity-dashboard-button-wrapper">
<template slot="title">
- View Events
+ {{ $t('label.view') + ' ' + $t('label.events') }}
</template>
<a-button shape="circle">
<router-link :to="{ name: 'event' }">
@@ -227,7 +229,7 @@ export default {
listEvents () {
const params = {
page: 1,
- pagesize: 6,
+ pagesize: 7,
listall: true
}
this.loading = true
diff --git a/src/views/dashboard/UsageDashboard.vue
b/src/views/dashboard/UsageDashboard.vue
index f3f8c16..bde8d8c 100644
--- a/src/views/dashboard/UsageDashboard.vue
+++ b/src/views/dashboard/UsageDashboard.vue
@@ -60,7 +60,11 @@
:xl="8">
<chart-card>
<div class="usage-dashboard-chart-card-inner">
- <a-button><router-link :to="{ name: 'event' }">View
Events</router-link></a-button>
+ <a-button>
+ <router-link :to="{ name: 'event' }">
+ {{ $t('label.view') + ' ' + $t('label.events') }}
+ </router-link>
+ </a-button>
</div>
<template slot="footer">
<div class="usage-dashboard-chart-footer">
@@ -139,6 +143,11 @@ export default {
},
resource (newData, oldData) {
this.project = newData
+ },
+ '$i18n.locale' (to, from) {
+ if (to !== from) {
+ this.fetchData()
+ }
}
},
methods: {
@@ -149,21 +158,21 @@ export default {
if (json && json.listvirtualmachinesresponse) {
count = json.listvirtualmachinesresponse.count
}
- this.stats.splice(0, 1, { name: 'Running VMs', count: count, path:
'vm' })
+ this.stats.splice(0, 1, { name: this.$t('label.running'), 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.splice(1, 1, { name: 'Stopped VMs', count: count, path:
'vm' })
+ this.stats.splice(1, 1, { name: this.$t('label.stopped'), count:
count, path: 'vm' })
})
api('listVirtualMachines', { listall: true }).then(json => {
var count = 0
if (json && json.listvirtualmachinesresponse) {
count = json.listvirtualmachinesresponse.count
}
- this.stats.splice(2, 1, { name: 'Total VMs', count: count, path: 'vm'
})
+ this.stats.splice(2, 1, { name: this.$t('label.total.vms'), count:
count, path: 'vm' })
})
api('listVolumes', { listall: true }).then(json => {
var count = 0
@@ -184,7 +193,7 @@ export default {
if (json && json.listpublicipaddressesresponse) {
count = json.listpublicipaddressesresponse.count
}
- this.stats.splice(5, 1, { name: 'Public IP Addresses', count: count,
path: 'publicip' })
+ this.stats.splice(5, 1, { name: this.$t('label.public.ip.addresses'),
count: count, path: 'publicip' })
})
this.listEvents()
},
diff --git a/src/views/infra/InfraSummary.vue b/src/views/infra/InfraSummary.vue
index c416bba..bffbb48 100644
--- a/src/views/infra/InfraSummary.vue
+++ b/src/views/infra/InfraSummary.vue
@@ -315,8 +315,8 @@ export default {
<style lang="scss" scoped>
.breadcrumb-card {
- margin-left: -36px;
- margin-right: -36px;
+ margin-left: -24px;
+ margin-right: -24px;
margin-top: -16px;
margin-bottom: 12px;
}
