You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cloudstack.apache.org by ro...@apache.org on 2020/07/05 03:28:26 UTC
[cloudstack-primate] branch master updated: component: refactor and
improve resource count usage
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 f80f072 component: refactor and improve resource count usage
f80f072 is described below
commit f80f0721e1760d0b7a9616cdcbb7de943a60cc3f
Author: Rohit Yadav <ro...@shapeblue.com>
AuthorDate: Sun Jul 5 08:57:16 2020 +0530
component: refactor and improve resource count usage
Fixes and improves work started in #459
Signed-off-by: Rohit Yadav <ro...@shapeblue.com>
---
src/components/view/ResourceCountUsage.vue | 144 ++++++-----------------------
src/config/section/account.js | 11 +--
src/config/section/domain.js | 12 +--
src/config/section/project.js | 13 ++-
src/locales/en.json | 18 +---
5 files changed, 47 insertions(+), 151 deletions(-)
diff --git a/src/components/view/ResourceCountUsage.vue b/src/components/view/ResourceCountUsage.vue
index 0ab6774..b029448 100644
--- a/src/components/view/ResourceCountUsage.vue
+++ b/src/components/view/ResourceCountUsage.vue
@@ -16,41 +16,33 @@
// under the License.
<template>
- <a-spin :spinning="formLoading">
- <a-list
- size="small"
- :dataSource="resourceCountData"
- >
- <a-list-item slot="renderItem" slot-scope="item" class="list-item">
- <div class="list-item__container">
- <strong>
- {{ $t('label.' + String(item).toLowerCase() + '.count') }}
- </strong>
- <br/>
- <br/>
- <div class="list-item__vals">
- <div class="list-item__data">
- Current Usage: {{ resourceData[item + 'total'] }} / {{ resourceData[item + 'limit'] }}
- </div>
- <div class="list-item__data">
- Available: {{ resourceData[item + 'available'] }}
- </div>
- <a-progress
- status="normal"
- :percent="parseFloat(getPercentUsed(resourceData[item + 'total'], resourceData[item + 'limit']))"
- :format="p => parseFloat(getPercentUsed(resourceData[item + 'total'], resourceData[item + 'limit'])).toFixed(2) + '%'" />
+ <a-list
+ size="small"
+ :loading="loading"
+ :dataSource="usageList" >
+ <a-list-item slot="renderItem" slot-scope="item" class="list-item" v-if="!($route.meta.name === 'project' && item === 'project')">
+ <div class="list-item__container">
+ <strong>
+ {{ $t('label.' + item + 'limit') }}
+ </strong>
+ ({{ resource[item + 'available'] === '-1' ? 'Unlimited' : resource[item + 'available'] }} {{ $t('label.available') }})
+ <div class="list-item__vals">
+ <div class="list-item__data">
+ {{ $t('label.used') }} / {{ $t('label.limit') }} : {{ resource[item + 'total'] }} / {{ resource[item + 'limit'] === '-1' ? 'Unlimited' : resource[item + 'limit'] }}
</div>
+ <a-progress
+ status="normal"
+ :percent="parseFloat(getPercentUsed(resource[item + 'total'], resource[item + 'limit']))"
+ :format="p => resource[item + 'limit'] !== '-1' && resource[item + 'limit'] !== 'Unlimited' ? p.toFixed(2) + '%' : ''" />
</div>
- </a-list-item>
- </a-list>
- </a-spin>
+ </div>
+ </a-list-item>
+ </a-list>
</template>
<script>
-import { api } from '@/api'
-
export default {
- name: 'ResourceCountTab',
+ name: 'ResourceCountUsageTab',
props: {
resource: {
type: Object,
@@ -63,106 +55,21 @@ export default {
},
data () {
return {
- formLoading: false,
- resourceData: {
- type: Object,
- required: false
- },
- resourceCountData: ['vm', 'cpu', 'memory', 'primarystorage', 'ip',
- 'volume', 'secondarystorage', 'snapshot',
- 'template', 'network', 'vpc', 'project']
+ usageList: [
+ 'vm', 'cpu', 'memory', 'primarystorage', 'volume', 'ip', 'network',
+ 'vpc', 'secondarystorage', 'snapshot', 'template', 'project'
+ ]
}
},
- mounted () {
- this.fetchData()
- },
watch: {
resource (newData, oldData) {
if (!newData || !newData.id) {
return
}
this.resource = newData
- this.fetchData()
}
},
methods: {
- getResourceData () {
- const params = {}
- if (this.$route.meta.name === 'account') {
- params.account = this.resource.name
- params.domainid = this.resource.domainid
- this.listAccounts(params)
- } else if (this.$route.meta.name === 'domain') {
- params.id = this.resource.id
- this.listDomains(params)
- } else { // project
- params.id = this.resource.id
- params.listall = true
- this.listProjects(params)
- }
- },
- fetchData () {
- try {
- this.formLoading = true
- this.getResourceData()
- this.formLoading = false
- } catch (e) {
- this.$notification.error({
- message: 'Request Failed',
- description: e
- })
- this.formLoading = false
- }
- },
- listDomains (params) {
- api('listDomains', params).then(json => {
- const domains = json.listdomainsresponse.domain || []
- this.resourceData = domains[0] || {}
- }).catch(error => {
- this.handleErrors(error)
- }).finally(f => {
- this.loading = false
- })
- },
- listAccounts (params) {
- api('listAccounts', params).then(json => {
- const accounts = json.listaccountsresponse.account || []
- this.resourceData = accounts[0] || {}
- }).catch(error => {
- this.handleErrors(error)
- }).finally(f => {
- this.loading = false
- })
- },
- listProjects (params) {
- api('listProjects', params).then(json => {
- const projects = json.listprojectsresponse.project || []
- this.resourceData = projects[0] || {}
- }).catch(error => {
- this.handleErrors(error)
- }).finally(f => {
- this.loading = false
- })
- },
- handleErrors (error) {
- this.$notification.error({
- message: 'Request Failed',
- description: error.response.headers['x-description'],
- duration: 0
- })
-
- if ([401, 405].includes(error.response.status)) {
- this.$router.push({ path: '/exception/403' })
- }
-
- if ([430, 431, 432].includes(error.response.status)) {
- this.$router.push({ path: '/exception/404' })
- }
-
- if ([530, 531, 532, 533, 534, 535, 536, 537].includes(error.response.status)) {
- this.$router.push({ path: '/exception/500' })
- }
- },
getPercentUsed (total, limit) {
return (limit === 'Unlimited') ? 0 : (total / limit) * 100
}
@@ -192,6 +99,7 @@ export default {
}
&__vals {
+ margin-top: 10px;
@media (min-width: 760px) {
display: flex;
}
diff --git a/src/config/section/account.js b/src/config/section/account.js
index 5edea26..12d1cae 100644
--- a/src/config/section/account.js
+++ b/src/config/section/account.js
@@ -22,7 +22,7 @@ export default {
docHelp: 'adminguide/accounts.html',
permission: ['listAccounts'],
columns: ['name', 'state', 'rolename', 'roletype', 'domainpath'],
- details: ['name', 'id', 'rolename', 'roletype', 'domainpath', 'networkdomain', 'iptotal', 'vmtotal', 'volumetotal', 'receivedbytes', 'sentbytes', 'vmlimit', 'iplimit', 'volumelimit', 'snapshotlimit', 'templatelimit', 'vpclimit', 'cpulimit', 'memorylimit', 'networklimit', 'primarystoragelimit', 'secondarystoragelimit'],
+ details: ['name', 'id', 'rolename', 'roletype', 'domainpath', 'networkdomain', 'iptotal', 'vmtotal', 'volumetotal', 'receivedbytes', 'sentbytes'],
related: [{
name: 'accountuser',
title: 'label.users',
@@ -34,16 +34,15 @@ export default {
component: () => import('@/components/view/DetailsTab.vue')
},
{
+ name: 'resources',
+ component: () => import('@/components/view/ResourceCountUsage.vue')
+ },
+ {
name: 'limits',
show: (record, route, user) => { return ['Admin'].includes(user.roletype) },
component: () => import('@/components/view/ResourceLimitTab.vue')
},
{
- name: 'resourcecount',
- show: (record, route, user) => { return ['Admin', 'DomainAdmin'].includes(user.roletype) },
- component: () => import('@/components/view/ResourceCountUsage.vue')
- },
- {
name: 'certificate',
component: () => import('@/views/iam/SSLCertificateTab.vue')
},
diff --git a/src/config/section/domain.js b/src/config/section/domain.js
index 2cc7dbe..64d9e91 100644
--- a/src/config/section/domain.js
+++ b/src/config/section/domain.js
@@ -23,7 +23,7 @@ export default {
permission: ['listDomains', 'listDomainChildren'],
resourceType: 'Domain',
columns: ['name', 'state', 'path', 'parentdomainname', 'level'],
- details: ['name', 'id', 'path', 'parentdomainname', 'level', 'networkdomain', 'iptotal', 'vmtotal', 'volumetotal', 'vmlimit', 'iplimit', 'volumelimit', 'snapshotlimit', 'templatelimit', 'vpclimit', 'cpulimit', 'memorylimit', 'networklimit', 'primarystoragelimit', 'secondarystoragelimit'],
+ details: ['name', 'id', 'path', 'parentdomainname', 'level', 'networkdomain'],
component: () => import('@/views/iam/DomainView.vue'),
related: [{
name: 'account',
@@ -41,16 +41,16 @@ export default {
component: () => import('@/components/view/DetailsTab.vue')
},
{
+ name: 'resources',
+ show: (record, route, user) => { return ['Admin', 'DomainAdmin'].includes(user.roletype) },
+ component: () => import('@/components/view/ResourceCountUsage.vue')
+ },
+ {
name: 'limits',
show: (record, route, user) => { return ['Admin'].includes(user.roletype) },
component: () => import('@/components/view/ResourceLimitTab.vue')
},
{
- name: 'resourcecount',
- show: (record, route, user) => { return ['Admin', 'DomainAdmin'].includes(user.roletype) },
- component: () => import('@/components/view/ResourceCountUsage.vue')
- },
- {
name: 'settings',
component: () => import('@/components/view/SettingsTab.vue'),
show: (record, route, user) => { return ['Admin'].includes(user.roletype) }
diff --git a/src/config/section/project.js b/src/config/section/project.js
index 01199a4..e5fdb3f 100644
--- a/src/config/section/project.js
+++ b/src/config/section/project.js
@@ -23,16 +23,15 @@ export default {
permission: ['listProjects'],
resourceType: 'Project',
columns: ['name', 'state', 'displaytext', 'account', 'domain'],
- details: ['name', 'id', 'displaytext', 'projectaccountname', 'vmtotal', 'cputotal', 'memorytotal', 'volumetotal', 'iptotal', 'vpctotal', 'templatetotal', 'primarystoragetotal', 'vmlimit', 'iplimit', 'volumelimit', 'snapshotlimit', 'templatelimit', 'vpclimit', 'cpulimit', 'memorylimit', 'networklimit', 'primarystoragelimit', 'secondarystoragelimit', 'account', 'domain'],
+ details: ['name', 'id', 'displaytext', 'projectaccountname', 'account', 'domain'],
tabs: [
{
name: 'details',
component: () => import('@/components/view/DetailsTab.vue')
},
{
- name: 'accounts',
- show: (record, route, user) => { return record.account === user.account || ['Admin', 'DomainAdmin'].includes(user.roletype) },
- component: () => import('@/views/project/AccountsTab.vue')
+ name: 'resources',
+ component: () => import('@/components/view/ResourceCountUsage.vue')
},
{
name: 'limits',
@@ -40,9 +39,9 @@ export default {
component: () => import('@/components/view/ResourceLimitTab.vue')
},
{
- name: 'resourcecount',
- show: (record, route, user) => { return ['Admin', 'DomainAdmin'].includes(user.roletype) },
- component: () => import('@/components/view/ResourceCountUsage.vue')
+ name: 'accounts',
+ show: (record, route, user) => { return record.account === user.account || ['Admin', 'DomainAdmin'].includes(user.roletype) },
+ component: () => import('@/views/project/AccountsTab.vue')
}
],
actions: [
diff --git a/src/locales/en.json b/src/locales/en.json
index ca73163..24f0ede 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -558,7 +558,6 @@
"label.counterid": "Counter",
"label.cpu": "CPU",
"label.cpu.allocated": "CPU Allocated",
-"label.cpu.count": "CPU Count",
"label.cpu.sockets": "CPU Sockets",
"label.cpuallocated": "CPU Allocated for VMs",
"label.cpuallocatedghz": "Allocated",
@@ -996,7 +995,6 @@
"label.invited.accounts": "Invited accounts",
"label.ip": "IP Address",
"label.ip.allocations": "IP Allocations",
-"label.ip.count": "IP Count",
"label.ip.or.fqdn": "IP or FQDN",
"label.ip.range": "IP Range",
"label.ip.ranges": "IP Ranges",
@@ -1134,8 +1132,9 @@
"label.ldap.group.name": "LDAP Group",
"label.ldap.port": "LDAP port",
"label.level": "Level",
+"label.limit": "Limit",
"label.limitcpuuse": "CPU Cap",
-"label.limits": "Limits",
+"label.limits": "Configure Limits",
"label.link.domain.to.ldap": "Link Domain to LDAP",
"label.linklocalip": "Link Local IP Address",
"label.list.ciscoasa1000v": "ASA 1000v",
@@ -1195,7 +1194,6 @@
"label.may.continue": "You may now continue.",
"label.memallocated": "Mem Allocation",
"label.memory": "Memory",
-"label.memory.count": "Memory Count",
"label.memory.maximum.mb": "Max Memory (in MB)",
"label.memory.total": "Memory Total",
"label.memory.used": "Memory Used",
@@ -1297,7 +1295,6 @@
"label.network.acl.lists": "Network ACL Lists",
"label.network.acls": "Network ACLs",
"label.network.addvm": "Add network to VM",
-"label.network.count": "Network Count",
"label.network.desc": "Network Desc",
"label.network.details": "Network Details",
"label.network.device": "Network Device",
@@ -1479,7 +1476,6 @@
"label.primary.storage.allocated": "Primary Storage Allocated",
"label.primary.storage.count": "Primary Storage Pools",
"label.primary.storage.used": "Primary Storage Used",
-"label.primarystorage.count": "Primary Storage Count",
"label.primarystoragelimit": "Primary Storage limits (GiB)",
"label.primarystoragetotal": "Primary Storage",
"label.private.gateway": "Private Gateway",
@@ -1497,7 +1493,6 @@
"label.profiledn": "Associated Profile",
"label.profilename": "Profile",
"label.project": "Project",
-"label.project.count": "Project Count",
"label.project.dashboard": "Project dashboard",
"label.project.ids": "Project IDs",
"label.project.invitation": "Project Invitations",
@@ -1506,6 +1501,7 @@
"label.project.view": "Project View",
"label.projectaccountname": "Project Account Name",
"label.projectid": "Project ID",
+"label.projectlimit": "Project Limits",
"label.projects": "Projects",
"label.promiscuousmode": "Promiscuous Mode",
"label.property": "Property",
@@ -1652,7 +1648,6 @@
"label.resource.limit.exceeded": "Resource Limit Exceeded",
"label.resource.limits": "Resource Limits",
"label.resource.name": "Resource Name",
-"label.resourcecount": "Resource Count",
"label.resourceid": "Resource ID",
"label.resourcename": "Resource Name",
"label.resources": "Resources",
@@ -1727,7 +1722,6 @@
"label.secondary.storage.vm": "Secondary storage VM",
"label.secondary.used": "Secondary Storage Used",
"label.secondaryips": "Secondary IPs",
-"label.secondarystorage.count": "Secondary Storage Count",
"label.secondarystoragelimit": "Secondary Storage limits (GiB)",
"label.secretkey": "Secret Key",
"label.secured": "Secured",
@@ -1805,7 +1799,6 @@
"label.smbpassword": "SMB Password",
"label.smbusername": "SMB Username",
"label.snapshot": "Snapshot",
-"label.snapshot.count": "Snapshot Count",
"label.snapshot.name": "Snapshot Name",
"label.snapshot.schedule": "Set up Recurring Snapshot",
"label.snapshotlimit": "Snapshot Limits",
@@ -1928,7 +1921,6 @@
"label.task.completed": "Task completed",
"label.tcp": "TCP",
"label.template": "Select a template",
-"label.template.count": "Template Count",
"label.templatebody": "Body",
"label.templatedn": "Select Template",
"label.templatefileupload": "Local file",
@@ -1998,6 +1990,7 @@
"label.usageunit": "Unit",
"label.use.vm.ip": "Use VM IP:",
"label.use.vm.ips": "Use VM IPs",
+"label.used": "Used",
"label.usehttps": "Use HTTPS",
"label.usenewdiskoffering": "Replace disk offering?",
"label.user": "User",
@@ -2070,7 +2063,6 @@
"label.vm.add": "Add Instance",
"label.vm.bootmode": "Boot Mode",
"label.vm.boottype": "Boot Type",
-"label.vm.count": "User VM Count",
"label.vm.destroy": "Destroy",
"label.vm.password": "Password of the VM is",
"label.vm.reboot": "Reboot",
@@ -2095,7 +2087,6 @@
"label.vnmc.devices": "VNMC Devices",
"label.volgroup": "Volume Group",
"label.volume": "Volume",
-"label.volume.count": "Volume Count",
"label.volume.details": "Volume details",
"label.volume.empty": "No data volumes attached to this VM",
"label.volume.ids": "Volume ID's",
@@ -2110,7 +2101,6 @@
"label.volumes": "Volumes",
"label.volumetotal": "Volume",
"label.vpc": "VPC",
-"label.vpc.count": "VPC Count",
"label.vpc.id": "VPC ID",
"label.vpc.offering.access": "VPC offering access",
"label.vpc.offering.details": "VPC offering details",