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
commit 223e59e354af1c8d65ec01532d73e645b27606a1 Author: Rohit Yadav <[email protected]> AuthorDate: Sun Jun 21 11:36:35 2020 +0530 dashboard: loading and assorted fixes Signed-off-by: Rohit Yadav <[email protected]> --- src/components/header/ProjectMenu.vue | 1 + src/components/view/ListView.vue | 5 ++++ src/config/section/compute.js | 37 ++++++++++++++++++++--------- src/config/section/network.js | 4 ++-- src/config/section/storage.js | 19 ++++++++++++++- src/permission.js | 4 ++-- src/store/modules/user.js | 4 ---- src/views/AutogenView.vue | 7 +++++- src/views/dashboard/CapacityDashboard.vue | 5 ++-- src/views/dashboard/UsageDashboard.vue | 34 ++++++++++++++++---------- src/views/dashboard/UsageDashboardChart.vue | 18 ++++++++++---- 11 files changed, 97 insertions(+), 41 deletions(-) diff --git a/src/components/header/ProjectMenu.vue b/src/components/header/ProjectMenu.vue index 25c6c23..0d1f8db 100644 --- a/src/components/header/ProjectMenu.vue +++ b/src/components/header/ProjectMenu.vue @@ -20,6 +20,7 @@ <a-select class="project-select" defaultValue="Default View" + :loading="loading" :value="('id' in $store.getters.project) ? ($store.getters.project.displaytext || $store.getters.project.name) : 'Default View'" :disabled="isDisabled()" :filterOption="filterProject" diff --git a/src/components/view/ListView.vue b/src/components/view/ListView.vue index e05a842..26f9d36 100644 --- a/src/components/view/ListView.vue +++ b/src/components/view/ListView.vue @@ -129,6 +129,11 @@ <router-link v-else-if="record.hostname" :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link> <span v-else>{{ text }}</span> </a> + <a slot="storage" slot-scope="text, record" href="javascript:;"> + <router-link v-if="record.storageid" :to="{ path: '/storagepool/' + record.storageid }">{{ text }}</router-link> + <span v-else>{{ text }}</span> + </a> + <a slot="clustername" slot-scope="text, record" href="javascript:;"> <router-link :to="{ path: '/cluster/' + record.clusterid }">{{ text }}</router-link> </a> diff --git a/src/config/section/compute.js b/src/config/section/compute.js index f948d34..4b06a42 100644 --- a/src/config/section/compute.js +++ b/src/config/section/compute.js @@ -16,6 +16,7 @@ // under the License. import kubernetes from '@/assets/icons/kubernetes.svg?inline' +import store from '@/store' export default { name: 'compute', @@ -30,16 +31,30 @@ export default { permission: ['listVirtualMachinesMetrics'], resourceType: 'UserVm', filters: ['self', 'running', 'stopped'], - columns: [ - 'name', 'state', 'instancename', 'ipaddress', 'cpunumber', 'cpuused', 'cputotal', - { - memoryused: (record) => { - return record.memorykbs && record.memoryintfreekbs ? parseFloat(100.0 * (record.memorykbs - record.memoryintfreekbs) / record.memorykbs).toFixed(2) + '%' : '0.0%' - } - }, - 'memorytotal', 'networkread', 'networkwrite', 'diskkbsread', 'diskkbswrite', 'diskiopstotal', - 'account', 'zonename' - ], + columns: () => { + const fields = [ + 'name', 'state', 'ipaddress', 'cpunumber', 'cpuused', 'cputotal', + { + memoryused: (record) => { + return record.memorykbs && record.memoryintfreekbs ? parseFloat(100.0 * (record.memorykbs - record.memoryintfreekbs) / record.memorykbs).toFixed(2) + '%' : '0.0%' + } + }, + 'memorytotal', 'networkread', 'networkwrite', 'diskkbsread', 'diskkbswrite', 'diskiopstotal' + ] + + if (store.getters.userInfo.roletype === 'Admin') { + fields.splice(2, 0, 'instancename') + fields.push('account') + fields.push('hostname') + fields.push('zonename') + } else if (store.getters.userInfo.roletype === 'DomainAdmin') { + fields.push('account') + fields.push('zonename') + } else { + fields.push('zonename') + } + return fields + }, related: [{ name: 'volume', title: 'label.volumes', @@ -105,7 +120,7 @@ export default { }, { api: 'stopVirtualMachine', - icon: 'stop', + icon: 'poweroff', label: 'label.action.stop.instance', message: 'message.action.stop.instance', docHelp: 'adminguide/virtual_machines.html#stopping-and-starting-vms', diff --git a/src/config/section/network.js b/src/config/section/network.js index f989bcd..38999d1 100644 --- a/src/config/section/network.js +++ b/src/config/section/network.js @@ -25,7 +25,7 @@ export default { { name: 'guestnetwork', title: 'label.guest.networks', - icon: 'gateway', + icon: 'apartment', permission: ['listNetworks'], resourceType: 'Network', columns: ['name', 'state', 'type', 'cidr', 'ip6cidr', 'broadcasturi', 'account', 'zonename'], @@ -267,7 +267,7 @@ export default { { name: 'privategw', title: 'label.private.gateway', - icon: 'branches', + icon: 'gateway', hidden: true, permission: ['listPrivateGateways'], columns: ['ipaddress', 'state', 'gateway', 'netmask', 'account', 'domain'], diff --git a/src/config/section/storage.js b/src/config/section/storage.js index eab50c7..775097c 100644 --- a/src/config/section/storage.js +++ b/src/config/section/storage.js @@ -15,6 +15,8 @@ // specific language governing permissions and limitations // under the License. +import store from '@/store' + export default { name: 'storage', title: 'label.storage', @@ -26,7 +28,22 @@ export default { icon: 'hdd', permission: ['listVolumesMetrics'], resourceType: 'Volume', - columns: ['name', 'state', 'type', 'vmname', 'size', 'physicalsize', 'utilization', 'diskkbsread', 'diskkbswrite', 'diskiopstotal', 'storage', 'account', 'zonename'], + columns: () => { + const fields = ['name', 'state', 'type', 'sizegb', 'vmname', 'diskkbsread', 'diskkbswrite', 'diskiopstotal'] + + if (store.getters.userInfo.roletype === 'Admin') { + fields.push('account') + fields.push('storage') + fields.push('zonename') + } else if (store.getters.userInfo.roletype === 'DomainAdmin') { + fields.push('account') + fields.push('zonename') + } else { + fields.push('zonename') + } + + return fields + }, details: ['name', 'id', 'type', 'storagetype', 'diskofferingdisplaytext', 'deviceid', 'sizegb', 'physicalsize', 'provisioningtype', 'utilization', 'diskkbsread', 'diskkbswrite', 'diskioread', 'diskiowrite', 'diskiopstotal', 'miniops', 'maxiops', 'path'], related: [{ name: 'snapshot', diff --git a/src/permission.js b/src/permission.js index f73f09d..4d37e0d 100644 --- a/src/permission.js +++ b/src/permission.js @@ -69,7 +69,7 @@ router.beforeEach((to, from, next) => { description: 'Exception caught while discoverying features' }) store.dispatch('Logout').then(() => { - next({ path: '/user/login', query: { redirect: to.fullPath } }) + next({ path: '/user/login' }) }) }) } else { @@ -80,7 +80,7 @@ router.beforeEach((to, from, next) => { if (whiteList.includes(to.name)) { next() } else { - next({ path: '/user/login', query: { redirect: to.fullPath } }) + next({ path: '/user/login' }) NProgress.done() } } diff --git a/src/store/modules/user.js b/src/store/modules/user.js index 10c56db..3a0b054 100644 --- a/src/store/modules/user.js +++ b/src/store/modules/user.js @@ -128,10 +128,6 @@ const user = { // This will show the dashboard and some common navigation sections // to most users/roles, while we complete API autodiscovery const apis = {} - apis.listVirtualMachinesMetrics = {} - apis.listVolumesMetrics = {} - apis.listNetworks = {} - apis.listTemplates = {} apis.listUsers = {} apis.listAccounts = {} commit('SET_APIS', apis) diff --git a/src/views/AutogenView.vue b/src/views/AutogenView.vue index ab5bd9c..712967f 100644 --- a/src/views/AutogenView.vue +++ b/src/views/AutogenView.vue @@ -415,7 +415,12 @@ export default { if (this.$route && this.$route.meta && this.$route.meta.permission) { this.apiName = this.$route.meta.permission[0] if (this.$route.meta.columns) { - this.columnKeys = this.$route.meta.columns + const columns = this.$route.meta.columns + if (columns && typeof columns === 'function') { + this.columnKeys = columns() + } else { + this.columnKeys = columns + } } if (this.$route.meta.actions) { diff --git a/src/views/dashboard/CapacityDashboard.vue b/src/views/dashboard/CapacityDashboard.vue index 55b444b..01db271 100644 --- a/src/views/dashboard/CapacityDashboard.vue +++ b/src/views/dashboard/CapacityDashboard.vue @@ -24,6 +24,7 @@ showSearch optionFilterProp="children" :defaultValue="zoneSelected.name" + :placeholder="$t('label.select.a.zone')" :value="zoneSelected.name" @change="changeZone"> <a-select-option v-for="(zone, index) in zones" :key="index"> @@ -72,7 +73,7 @@ </a-col> <a-col :xl="6"> - <chart-card> + <chart-card :loading="loading"> <div style="text-align: center"> <a-tooltip placement="bottom" class="capacity-dashboard-button-wrapper"> <template slot="title"> @@ -229,7 +230,7 @@ export default { listEvents () { const params = { page: 1, - pagesize: 7, + pagesize: 6, listall: true } this.loading = true diff --git a/src/views/dashboard/UsageDashboard.vue b/src/views/dashboard/UsageDashboard.vue index bde8d8c..01574b3 100644 --- a/src/views/dashboard/UsageDashboard.vue +++ b/src/views/dashboard/UsageDashboard.vue @@ -18,7 +18,7 @@ <template> <a-row class="usage-dashboard" :gutter="12"> <a-col :xl="16"> - <a-row> + <a-row :gutter="12"> <a-card> <a-tabs v-if="showProject" @@ -44,21 +44,29 @@ :md="8" v-for="stat in stats" :key="stat.type"> - <chart-card class="usage-dashboard-chart-card" :loading="loading"> + <a-card + class="usage-dashboard-chart-card" + :bordered="false" + :loading="loading" + :style="stat.bgcolor ? { 'background-color': stat.bgcolor } : {}"> <router-link :to="{ name: stat.path }"> - <div class="usage-dashboard-chart-card-inner"> - <h4>{{ stat.name }}</h4> - <h1>{{ stat.count == undefined ? 0 : stat.count }}</h1> + <div + class="usage-dashboard-chart-card-inner"> + <h3>{{ stat.name }}</h3> + <h2> + <a-icon :type="stat.icon" /> + {{ stat.count == undefined ? 0 : stat.count }} + </h2> </div> </router-link> - </chart-card> + </a-card> </a-col> </a-card> </a-row> </a-col> <a-col :xl="8"> - <chart-card> + <chart-card :loading="loading" > <div class="usage-dashboard-chart-card-inner"> <a-button> <router-link :to="{ name: 'event' }"> @@ -158,42 +166,42 @@ export default { if (json && json.listvirtualmachinesresponse) { count = json.listvirtualmachinesresponse.count } - this.stats.splice(0, 1, { name: this.$t('label.running'), count: count, path: 'vm' }) + this.stats.splice(0, 1, { name: this.$t('label.running'), count: count, icon: 'desktop', bgcolor: '#dfe9cc', 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: this.$t('label.stopped'), count: count, path: 'vm' }) + this.stats.splice(1, 1, { name: this.$t('label.stopped'), count: count, icon: 'poweroff', bgcolor: '#edcbce', 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: this.$t('label.total.vms'), count: count, path: 'vm' }) + this.stats.splice(2, 1, { name: this.$t('label.total.vms'), count: count, icon: 'number', path: 'vm' }) }) api('listVolumes', { listall: true }).then(json => { var count = 0 if (json && json.listvolumesresponse) { count = json.listvolumesresponse.count } - this.stats.splice(3, 1, { name: 'Total Volumes', count: count, path: 'volume' }) + this.stats.splice(3, 1, { name: 'Total Volumes', count: count, icon: 'database', path: 'volume' }) }) api('listNetworks', { listall: true }).then(json => { var count = 0 if (json && json.listnetworksresponse) { count = json.listnetworksresponse.count } - this.stats.splice(4, 1, { name: 'Total Networks', count: count, path: 'guestnetwork' }) + this.stats.splice(4, 1, { name: 'Total Networks', count: count, icon: 'apartment', path: 'guestnetwork' }) }) api('listPublicIpAddresses', { listall: true }).then(json => { var count = 0 if (json && json.listpublicipaddressesresponse) { count = json.listpublicipaddressesresponse.count } - this.stats.splice(5, 1, { name: this.$t('label.public.ip.addresses'), count: count, path: 'publicip' }) + this.stats.splice(5, 1, { name: this.$t('label.public.ip.addresses'), count: count, icon: 'environment', path: 'publicip' }) }) this.listEvents() }, diff --git a/src/views/dashboard/UsageDashboardChart.vue b/src/views/dashboard/UsageDashboardChart.vue index b2244a9..711218e 100644 --- a/src/views/dashboard/UsageDashboardChart.vue +++ b/src/views/dashboard/UsageDashboardChart.vue @@ -23,14 +23,22 @@ :md="8" v-for="stat in stats" :key="stat.type"> - <chart-card class="usage-dashboard-chart-card" :loading="loading"> + <a-card + class="usage-dashboard-chart-card" + :bordered="false" + :loading="loading" + :style="stat.bgcolor ? { 'background-color': stat.bgcolor } : {}"> <router-link :to="{ name: stat.path }"> - <div class="usage-dashboard-chart-card-inner"> - <h4>{{ stat.name }}</h4> - <h1>{{ stat.count == undefined ? 0 : stat.count }}</h1> + <div + class="usage-dashboard-chart-card-inner"> + <h3>{{ stat.name }}</h3> + <h2> + <a-icon :type="stat.icon" /> + {{ stat.count == undefined ? 0 : stat.count }} + </h2> </div> </router-link> - </chart-card> + </a-card> </a-col> </div> </template>
