From fc5bb9f123cd7c349c681d5987af227b46edf339 Mon Sep 17 00:00:00 2001
From: Rakesh <rakeshv.com@gmail.com>
Date: Sat, 4 Jul 2020 08:36:46 +0200
Subject: [PATCH] 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>
---
 ui/src/components/view/ResourceCountUsage.vue | 200 ++++++++++++++++++
 ui/src/config/section/account.js              |   5 +
 ui/src/config/section/domain.js               |   5 +
 ui/src/config/section/project.js              |   5 +
 ui/src/locales/en.json                        |  14 ++
 5 files changed, 229 insertions(+)
 create mode 100644 ui/src/components/view/ResourceCountUsage.vue

diff --git a/ui/src/components/view/ResourceCountUsage.vue b/ui/src/components/view/ResourceCountUsage.vue
new file mode 100644
index 00000000000..0ab67743ab0
--- /dev/null
+++ b/ui/src/components/view/ResourceCountUsage.vue
@@ -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>
diff --git a/ui/src/config/section/account.js b/ui/src/config/section/account.js
index 6c973d92211..5edea26123e 100644
--- a/ui/src/config/section/account.js
+++ b/ui/src/config/section/account.js
@@ -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')
diff --git a/ui/src/config/section/domain.js b/ui/src/config/section/domain.js
index 7ba32af9b05..2cc7dbe798e 100644
--- a/ui/src/config/section/domain.js
+++ b/ui/src/config/section/domain.js
@@ -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'),
diff --git a/ui/src/config/section/project.js b/ui/src/config/section/project.js
index e94de954b32..01199a4b7ea 100644
--- a/ui/src/config/section/project.js
+++ b/ui/src/config/section/project.js
@@ -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: [
diff --git a/ui/src/locales/en.json b/ui/src/locales/en.json
index 1f2b7cb016d..c076e55d5ef 100644
--- a/ui/src/locales/en.json
+++ b/ui/src/locales/en.json
@@ -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",