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

component: reusable resource count component for domain, account and projects (#459) 

Currenlty "Domain Admins" cannot see how much resources
they are consuming for their domain.
So display a "Resource Count" tab which displays the
current usage and the total allocated resoures

Co-authored-by: Rakesh Venkatesh <r.venkatesh@global.leaseweb.com>
Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
This commit is contained in:
Rakesh 2020-07-04 08:36:46 +02:00 committed by Rohit Yadav
parent b61c4ae35d
commit fc5bb9f123
5 changed files with 229 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

200
ui/src/components/view/ResourceCountUsage.vue Normal file
View File

@ -0,0 +1,200 @@
// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements. See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership. The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License. You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied. See the License for the
// specific language governing permissions and limitations
// 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) + '%'" />
</div>
</div>
</a-list-item>
</a-list>
</a-spin>
</template>
<script>
import { api } from '@/api'
export default {
name: 'ResourceCountTab',
props: {
resource: {
type: Object,
required: true
},
loading: {
type: Boolean,
default: false
}
},
data () {
return {
formLoading: false,
resourceData: {
type: Object,
required: false
},
resourceCountData: ['vm', 'cpu', 'memory', 'primarystorage', 'ip',
'volume', 'secondarystorage', 'snapshot',
'template', 'network', 'vpc', '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
}
}
}
</script>
<style scoped lang="scss">
.list-item {
&__container {
max-width: 90%;
width: 100%;
@media (min-width: 760px) {
max-width: 95%;
}
}
&__title {
font-weight: bold;
}
&__data {
margin-right: 20px;
white-space: nowrap;
}
&__vals {
@media (min-width: 760px) {
display: flex;
}
}
}
</style>

5
ui/src/config/section/account.js
View File

@ -38,6 +38,11 @@ export default {
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')

5
ui/src/config/section/domain.js
View File

@ -45,6 +45,11 @@ export default {
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'),

5
ui/src/config/section/project.js
View File

@ -38,6 +38,11 @@ export default {
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')
}
],
actions: [

14
ui/src/locales/en.json
View File

@ -555,6 +555,7 @@
"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",
@ -992,6 +993,7 @@
"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",
@ -1190,6 +1192,7 @@
"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",
@ -1291,6 +1294,7 @@
"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",
@ -1414,6 +1418,7 @@
"label.palp": "Palo Alto Log Profile",
"label.params": "Parameters",
"label.parent.domain": "Parent Domain",
"label.parentdomainname": "Parent Domain",
"label.parentname": "Parent",
"label.passive": "Passive",
"label.password": "Password",
@ -1473,6 +1478,7 @@
"label.primary.storage.used": "Primary Storage Used",
"label.primarystoragelimit": "Primary Storage limits (GiB)",
"label.primarystoragetotal": "Primary Storage",
"label.primarystorage.count": "Primary Storage Count",
"label.private.gateway": "Private Gateway",
"label.private.interface": "Private Interface",
"label.private.ip.range": "Private IP Range",
@ -1488,6 +1494,7 @@
"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",
@ -1642,6 +1649,7 @@
"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",
@ -1716,6 +1724,7 @@
"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",
@ -1793,6 +1802,7 @@
"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",
@ -1915,6 +1925,7 @@
"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",
@ -2056,6 +2067,7 @@
"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",
@ -2080,6 +2092,7 @@
"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",
@ -2094,6 +2107,7 @@
"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",