Skip to content

Commit 1b548b3

Browse files
yadvryadvr
committed
component: refactor and improve resource count usage
Fixes and improves work started in #459 Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
1 parent bd00148 commit 1b548b3

File tree

5 files changed

+47
-151
lines changed

5 files changed

+47
-151
lines changed

‎ui/src/components/view/ResourceCountUsage.vue‎

Lines changed: 26 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -16,41 +16,33 @@
1616
// under the License.
1717

1818
<template>
19-
<a-spin :spinning="formLoading">
20-
<a-list
21-
size="small"
22-
:dataSource="resourceCountData"
23-
>
24-
<a-list-item slot="renderItem" slot-scope="item" class="list-item">
25-
<div class="list-item__container">
26-
<strong>
27-
{{ $t('label.' + String(item).toLowerCase() + '.count') }}
28-
</strong>
29-
<br/>
30-
<br/>
31-
<div class="list-item__vals">
32-
<div class="list-item__data">
33-
Current Usage: {{ resourceData[item + 'total'] }} / {{ resourceData[item + 'limit'] }}
34-
</div>
35-
<div class="list-item__data">
36-
Available: {{ resourceData[item + 'available'] }}
37-
</div>
38-
<a-progress
39-
status="normal"
40-
:percent="parseFloat(getPercentUsed(resourceData[item + 'total'], resourceData[item + 'limit']))"
41-
:format="p => parseFloat(getPercentUsed(resourceData[item + 'total'], resourceData[item + 'limit'])).toFixed(2) + '%'" />
19+
<a-list
20+
size="small"
21+
:loading="loading"
22+
:dataSource="usageList" >
23+
<a-list-item slot="renderItem" slot-scope="item" class="list-item" v-if="!($route.meta.name === 'project' && item === 'project')">
24+
<div class="list-item__container">
25+
<strong>
26+
{{ $t('label.' + item + 'limit') }}
27+
</strong>
28+
({{ resource[item + 'available'] === '-1' ? 'Unlimited' : resource[item + 'available'] }} {{ $t('label.available') }})
29+
<div class="list-item__vals">
30+
<div class="list-item__data">
31+
{{ $t('label.used') }} / {{ $t('label.limit') }} : {{ resource[item + 'total'] }} / {{ resource[item + 'limit'] === '-1' ? 'Unlimited' : resource[item + 'limit'] }}
4232
</div>
33+
<a-progress
34+
status="normal"
35+
:percent="parseFloat(getPercentUsed(resource[item + 'total'], resource[item + 'limit']))"
36+
:format="p => resource[item + 'limit'] !== '-1' && resource[item + 'limit'] !== 'Unlimited' ? p.toFixed(2) + '%' : ''" />
4337
</div>
44-
</a-list-item>
45-
</a-list>
46-
</a-spin>
38+
</div>
39+
</a-list-item>
40+
</a-list>
4741
</template>
4842

4943
<script>
50-
import { api } from '@/api'
51-
5244
export default {
53-
name: 'ResourceCountTab',
45+
name: 'ResourceCountUsageTab',
5446
props: {
5547
resource: {
5648
type: Object,
@@ -63,106 +55,21 @@ export default {
6355
},
6456
data () {
6557
return {
66-
formLoading: false,
67-
resourceData: {
68-
type: Object,
69-
required: false
70-
},
71-
resourceCountData: ['vm', 'cpu', 'memory', 'primarystorage', 'ip',
72-
'volume', 'secondarystorage', 'snapshot',
73-
'template', 'network', 'vpc', 'project']
58+
usageList: [
59+
'vm', 'cpu', 'memory', 'primarystorage', 'volume', 'ip', 'network',
60+
'vpc', 'secondarystorage', 'snapshot', 'template', 'project'
61+
]
7462
}
7563
},
76-
mounted () {
77-
this.fetchData()
78-
},
7964
watch: {
8065
resource (newData, oldData) {
8166
if (!newData || !newData.id) {
8267
return
8368
}
8469
this.resource = newData
85-
this.fetchData()
8670
}
8771
},
8872
methods: {
89-
getResourceData () {
90-
const params = {}
91-
if (this.$route.meta.name === 'account') {
92-
params.account = this.resource.name
93-
params.domainid = this.resource.domainid
94-
this.listAccounts(params)
95-
} else if (this.$route.meta.name === 'domain') {
96-
params.id = this.resource.id
97-
this.listDomains(params)
98-
} else { // project
99-
params.id = this.resource.id
100-
params.listall = true
101-
this.listProjects(params)
102-
}
103-
},
104-
fetchData () {
105-
try {
106-
this.formLoading = true
107-
this.getResourceData()
108-
this.formLoading = false
109-
} catch (e) {
110-
this.$notification.error({
111-
message: 'Request Failed',
112-
description: e
113-
})
114-
this.formLoading = false
115-
}
116-
},
117-
listDomains (params) {
118-
api('listDomains', params).then(json => {
119-
const domains = json.listdomainsresponse.domain || []
120-
this.resourceData = domains[0] || {}
121-
}).catch(error => {
122-
this.handleErrors(error)
123-
}).finally(f => {
124-
this.loading = false
125-
})
126-
},
127-
listAccounts (params) {
128-
api('listAccounts', params).then(json => {
129-
const accounts = json.listaccountsresponse.account || []
130-
this.resourceData = accounts[0] || {}
131-
}).catch(error => {
132-
this.handleErrors(error)
133-
}).finally(f => {
134-
this.loading = false
135-
})
136-
},
137-
listProjects (params) {
138-
api('listProjects', params).then(json => {
139-
const projects = json.listprojectsresponse.project || []
140-
this.resourceData = projects[0] || {}
141-
}).catch(error => {
142-
this.handleErrors(error)
143-
}).finally(f => {
144-
this.loading = false
145-
})
146-
},
147-
handleErrors (error) {
148-
this.$notification.error({
149-
message: 'Request Failed',
150-
description: error.response.headers['x-description'],
151-
duration: 0
152-
})
153-
154-
if ([401, 405].includes(error.response.status)) {
155-
this.$router.push({ path: '/exception/403' })
156-
}
157-
158-
if ([430, 431, 432].includes(error.response.status)) {
159-
this.$router.push({ path: '/exception/404' })
160-
}
161-
162-
if ([530, 531, 532, 533, 534, 535, 536, 537].includes(error.response.status)) {
163-
this.$router.push({ path: '/exception/500' })
164-
}
165-
},
16673
getPercentUsed (total, limit) {
16774
return (limit === 'Unlimited') ? 0 : (total / limit) * 100
16875
}
@@ -192,6 +99,7 @@ export default {
19299
}
193100
194101
&__vals {
102+
margin-top: 10px;
195103
@media (min-width: 760px) {
196104
display: flex;
197105
}

‎ui/src/config/section/account.js‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default {
2222
docHelp: 'adminguide/accounts.html',
2323
permission: ['listAccounts'],
2424
columns: ['name', 'state', 'rolename', 'roletype', 'domainpath'],
25-
details: ['name', 'id', 'rolename', 'roletype', 'domainpath', 'networkdomain', 'iptotal', 'vmtotal', 'volumetotal', 'receivedbytes', 'sentbytes', 'vmlimit', 'iplimit', 'volumelimit', 'snapshotlimit', 'templatelimit', 'vpclimit', 'cpulimit', 'memorylimit', 'networklimit', 'primarystoragelimit', 'secondarystoragelimit'],
25+
details: ['name', 'id', 'rolename', 'roletype', 'domainpath', 'networkdomain', 'iptotal', 'vmtotal', 'volumetotal', 'receivedbytes', 'sentbytes'],
2626
related: [{
2727
name: 'accountuser',
2828
title: 'label.users',
@@ -33,16 +33,15 @@ export default {
3333
name: 'details',
3434
component: () => import('@/components/view/DetailsTab.vue')
3535
},
36+
{
37+
name: 'resources',
38+
component: () => import('@/components/view/ResourceCountUsage.vue')
39+
},
3640
{
3741
name: 'limits',
3842
show: (record, route, user) => { return ['Admin'].includes(user.roletype) },
3943
component: () => import('@/components/view/ResourceLimitTab.vue')
4044
},
41-
{
42-
name: 'resourcecount',
43-
show: (record, route, user) => { return ['Admin', 'DomainAdmin'].includes(user.roletype) },
44-
component: () => import('@/components/view/ResourceCountUsage.vue')
45-
},
4645
{
4746
name: 'certificate',
4847
component: () => import('@/views/iam/SSLCertificateTab.vue')

‎ui/src/config/section/domain.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default {
2323
permission: ['listDomains', 'listDomainChildren'],
2424
resourceType: 'Domain',
2525
columns: ['name', 'state', 'path', 'parentdomainname', 'level'],
26-
details: ['name', 'id', 'path', 'parentdomainname', 'level', 'networkdomain', 'iptotal', 'vmtotal', 'volumetotal', 'vmlimit', 'iplimit', 'volumelimit', 'snapshotlimit', 'templatelimit', 'vpclimit', 'cpulimit', 'memorylimit', 'networklimit', 'primarystoragelimit', 'secondarystoragelimit'],
26+
details: ['name', 'id', 'path', 'parentdomainname', 'level', 'networkdomain'],
2727
component: () => import('@/views/iam/DomainView.vue'),
2828
related: [{
2929
name: 'account',
@@ -40,16 +40,16 @@ export default {
4040
name: 'details',
4141
component: () => import('@/components/view/DetailsTab.vue')
4242
},
43+
{
44+
name: 'resources',
45+
show: (record, route, user) => { return ['Admin', 'DomainAdmin'].includes(user.roletype) },
46+
component: () => import('@/components/view/ResourceCountUsage.vue')
47+
},
4348
{
4449
name: 'limits',
4550
show: (record, route, user) => { return ['Admin'].includes(user.roletype) },
4651
component: () => import('@/components/view/ResourceLimitTab.vue')
4752
},
48-
{
49-
name: 'resourcecount',
50-
show: (record, route, user) => { return ['Admin', 'DomainAdmin'].includes(user.roletype) },
51-
component: () => import('@/components/view/ResourceCountUsage.vue')
52-
},
5353
{
5454
name: 'settings',
5555
component: () => import('@/components/view/SettingsTab.vue'),

‎ui/src/config/section/project.js‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,26 +23,25 @@ export default {
2323
permission: ['listProjects'],
2424
resourceType: 'Project',
2525
columns: ['name', 'state', 'displaytext', 'account', 'domain'],
26-
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'],
26+
details: ['name', 'id', 'displaytext', 'projectaccountname', 'account', 'domain'],
2727
tabs: [
2828
{
2929
name: 'details',
3030
component: () => import('@/components/view/DetailsTab.vue')
3131
},
3232
{
33-
name: 'accounts',
34-
show: (record, route, user) => { return record.account === user.account || ['Admin', 'DomainAdmin'].includes(user.roletype) },
35-
component: () => import('@/views/project/AccountsTab.vue')
33+
name: 'resources',
34+
component: () => import('@/components/view/ResourceCountUsage.vue')
3635
},
3736
{
3837
name: 'limits',
3938
show: (record, route, user) => { return ['Admin'].includes(user.roletype) },
4039
component: () => import('@/components/view/ResourceLimitTab.vue')
4140
},
4241
{
43-
name: 'resourcecount',
44-
show: (record, route, user) => { return ['Admin', 'DomainAdmin'].includes(user.roletype) },
45-
component: () => import('@/components/view/ResourceCountUsage.vue')
42+
name: 'accounts',
43+
show: (record, route, user) => { return record.account === user.account || ['Admin', 'DomainAdmin'].includes(user.roletype) },
44+
component: () => import('@/views/project/AccountsTab.vue')
4645
}
4746
],
4847
actions: [

0 commit comments

Comments
 (0)