component: refactor and improve resource count usage

Fixes and improves work started in #459

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

ui/src/components/view/ResourceCountUsage.vue

@@ -16,41 +16,33 @@
 // under the License.
 
 <template>
-  <a-spin :spinning="formLoading">
   <a-list
     size="small"
-      :dataSource="resourceCountData"
+    :loading="loading"
-    >
+    :dataSource="usageList" >
-      <a-list-item slot="renderItem" slot-scope="item" class="list-item">
+    <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.' + String(item).toLowerCase() + '.count') }}
+          {{ $t('label.' + item + 'limit') }}
         </strong>
-          <br/>
+        ({{ resource[item + 'available'] === '-1' ? 'Unlimited' : resource[item + 'available'] }} {{ $t('label.available') }})
-          <br/>
         <div class="list-item__vals">
           <div class="list-item__data">
-              Current Usage: {{ resourceData[item + 'total'] }} / {{ resourceData[item + 'limit'] }}
+            {{ $t('label.used') }} / {{ $t('label.limit') }} : {{ resource[item + 'total'] }} / {{ resource[item + 'limit'] === '-1' ? 'Unlimited' : resource[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']))"
+            :percent="parseFloat(getPercentUsed(resource[item + 'total'], resource[item + 'limit']))"
-              :format="p => parseFloat(getPercentUsed(resourceData[item + 'total'], resourceData[item + 'limit'])).toFixed(2) + '%'" />
+            :format="p => resource[item + 'limit'] !== '-1' && resource[item + 'limit'] !== 'Unlimited' ? p.toFixed(2) + '%' : ''" />
         </div>
       </div>
     </a-list-item>
   </a-list>
-  </a-spin>
 </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,
+      usageList: [
-      resourceData: {
+        'vm', 'cpu', 'memory', 'primarystorage', 'volume', 'ip', 'network',
-        type: Object,
+        'vpc', 'secondarystorage', 'snapshot', 'template', 'project'
-        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
     }
@@ -192,6 +99,7 @@ export default {
     }
 
     &__vals {
+      margin-top: 10px;
       @media (min-width: 760px) {
         display: flex;
       }

ui/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',
@@ -33,16 +33,15 @@ export default {
       name: 'details',
       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')

ui/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',
@@ -40,16 +40,16 @@ export default {
       name: 'details',
       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'),

ui/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',
+      name: 'resources',
-      show: (record, route, user) => { return record.account === user.account || ['Admin', 'DomainAdmin'].includes(user.roletype) },
+      component: () => import('@/components/view/ResourceCountUsage.vue')
-      component: () => import('@/views/project/AccountsTab.vue')
     },
     {
       name: 'limits',
@@ -40,9 +39,9 @@ export default {
       component: () => import('@/components/view/ResourceLimitTab.vue')
     },
     {
-      name: 'resourcecount',
+      name: 'accounts',
-      show: (record, route, user) => { return ['Admin', 'DomainAdmin'].includes(user.roletype) },
+      show: (record, route, user) => { return record.account === user.account || ['Admin', 'DomainAdmin'].includes(user.roletype) },
-      component: () => import('@/components/view/ResourceCountUsage.vue')
+      component: () => import('@/views/project/AccountsTab.vue')
     }
   ],
   actions: [

ui/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",