config: implement togglable metrics view

Metrics view switch for vm, volume, zone, cluster, host and storagepool

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

ui/src/config/section/compute.js

@@ -32,8 +32,8 @@ export default {
       resourceType: 'UserVm',
       filters: ['self', 'running', 'stopped'],
       columns: () => {
-        const fields = [
-          'name', 'state', 'ipaddress', 'cpunumber', 'cpuused', 'cputotal',
+        const fields = ['name', 'state', 'ipaddress']
+        const metricsFields = ['cpunumber', 'cpuused', 'cputotal',
           {
             memoryused: (record) => {
               return record.memorykbs && record.memoryintfreekbs ? parseFloat(100.0 * (record.memorykbs - record.memoryintfreekbs) / record.memorykbs).toFixed(2) + '%' : '0.0%'
@@ -42,15 +42,21 @@ export default {
           'memorytotal', 'networkread', 'networkwrite', 'diskkbsread', 'diskkbswrite', 'diskiopstotal'
         ]
 
+        if (store.getters.metrics) {
+          fields.push(...metricsFields)
+        }
+
         if (store.getters.userInfo.roletype === 'Admin') {
           fields.splice(2, 0, 'instancename')
           fields.push('account')
           fields.push('hostname')
           fields.push('zonename')
         } else if (store.getters.userInfo.roletype === 'DomainAdmin') {
+          fields.splice(2, 0, 'displayname')
           fields.push('account')
           fields.push('zonename')
         } else {
+          fields.splice(2, 0, 'displayname')
           fields.push('zonename')
         }
         return fields

ui/src/config/section/infra/clusters.js

@@ -15,12 +15,23 @@
 // specific language governing permissions and limitations
 // under the License.
 
+import store from '@/store'
+
 export default {
   name: 'cluster',
   title: 'label.clusters',
   icon: 'cluster',
   permission: ['listClustersMetrics'],
-  columns: ['name', 'state', 'allocationstate', 'clustertype', 'hypervisortype', 'hosts', 'cpuused', 'cpumaxdeviation', 'cpuallocated', 'cputotal', 'memoryused', 'memorymaxdeviation', 'memoryallocated', 'memorytotal', 'podname', 'zonename'],
+  columns: () => {
+    const fields = ['name', 'state', 'allocationstate', 'clustertype', 'hypervisortype', 'hosts']
+    const metricsFields = ['cpuused', 'cpumaxdeviation', 'cpuallocated', 'cputotal', 'memoryused', 'memorymaxdeviation', 'memoryallocated', 'memorytotal']
+    if (store.getters.metrics) {
+      fields.push(...metricsFields)
+    }
+    fields.push('podname')
+    fields.push('zonename')
+    return fields
+  },
   details: ['name', 'id', 'allocationstate', 'clustertype', 'hypervisortype', 'podname', 'zonename'],
   related: [{
     name: 'host',

ui/src/config/section/infra/hosts.js

@@ -15,6 +15,8 @@
 // specific language governing permissions and limitations
 // under the License.
 
+import store from '@/store'
+
 export default {
   name: 'host',
   title: 'label.hosts',
@@ -22,7 +24,16 @@ export default {
   permission: ['listHostsMetrics'],
   resourceType: 'Host',
   params: { type: 'routing' },
-  columns: ['name', 'state', 'resourcestate', 'powerstate', 'ipaddress', 'hypervisor', 'instances', 'cpunumber', 'cputotalghz', 'cpuusedghz', 'cpuallocatedghz', 'memorytotalgb', 'memoryusedgb', 'memoryallocatedgb', 'networkread', 'networkwrite', 'clustername', 'zonename'],
+  columns: () => {
+    const fields = ['name', 'state', 'resourcestate', 'ipaddress', 'hypervisor', 'instances', 'powerstate']
+    const metricsFields = ['cpunumber', 'cputotalghz', 'cpuusedghz', 'cpuallocatedghz', 'memorytotalgb', 'memoryusedgb', 'memoryallocatedgb', 'networkread', 'networkwrite']
+    if (store.getters.metrics) {
+      fields.push(...metricsFields)
+    }
+    fields.push('clustername')
+    fields.push('zonename')
+    return fields
+  },
   details: ['name', 'id', 'resourcestate', 'ipaddress', 'hypervisor', 'type', 'clustername', 'podname', 'zonename', 'disconnected', 'created'],
   tabs: [{
     name: 'details',

ui/src/config/section/infra/primaryStorages.js

@@ -15,12 +15,23 @@
 // specific language governing permissions and limitations
 // under the License.
 
+import store from '@/store'
+
 export default {
   name: 'storagepool',
   title: 'label.primary.storage',
   icon: 'database',
   permission: ['listStoragePoolsMetrics'],
-  columns: ['name', 'state', 'ipaddress', 'type', 'path', 'scope', 'disksizeusedgb', 'disksizetotalgb', 'disksizeallocatedgb', 'disksizeunallocatedgb', 'clustername', 'zonename'],
+  columns: () => {
+    const fields = ['name', 'state', 'ipaddress', 'scope', 'type', 'path']
+    const metricsFields = ['disksizeusedgb', 'disksizetotalgb', 'disksizeallocatedgb', 'disksizeunallocatedgb']
+    if (store.getters.metrics) {
+      fields.push(...metricsFields)
+    }
+    fields.push('clustername')
+    fields.push('zonename')
+    return fields
+  },
   details: ['name', 'id', 'ipaddress', 'type', 'scope', 'tags', 'path', 'provider', 'hypervisor', 'overprovisionfactor', 'disksizetotal', 'disksizeallocated', 'disksizeused', 'clustername', 'podname', 'zonename', 'created'],
   related: [{
     name: 'volume',

ui/src/config/section/infra/zones.js

@@ -15,12 +15,22 @@
 // specific language governing permissions and limitations
 // under the License.
 
+import store from '@/store'
+
 export default {
   name: 'zone',
   title: 'label.zones',
   icon: 'global',
   permission: ['listZonesMetrics'],
-  columns: ['name', 'state', 'allocationstate', 'networktype', 'clusters', 'cpuused', 'cpumaxdeviation', 'cpuallocated', 'cputotal', 'memoryused', 'memorymaxdeviation', 'memoryallocated', 'memorytotal', 'order'],
+  columns: () => {
+    const fields = ['name', 'state', 'allocationstate', 'networktype', 'clusters']
+    const metricsFields = ['cpuused', 'cpumaxdeviation', 'cpuallocated', 'cputotal', 'memoryused', 'memorymaxdeviation', 'memoryallocated', 'memorytotal']
+    if (store.getters.metrics) {
+      fields.push(...metricsFields)
+    }
+    fields.push('order')
+    return fields
+  },
   details: ['name', 'id', 'allocationstate', 'networktype', 'guestcidraddress', 'localstorageenabled', 'securitygroupsenabled', 'dns1', 'dns2', 'internaldns1', 'internaldns2'],
   related: [{
     name: 'pod',

ui/src/config/section/storage.js

@@ -29,7 +29,21 @@ export default {
       permission: ['listVolumesMetrics'],
       resourceType: 'Volume',
       columns: () => {
-        const fields = ['name', 'state', 'type', 'sizegb', 'vmname', 'diskkbsread', 'diskkbswrite', 'diskiopstotal']
+        const fields = ['name', 'state', 'type', 'vmname', 'sizegb']
+        const metricsFields = ['diskkbsread', 'diskkbswrite', 'diskiopstotal']
+
+        if (store.getters.userInfo.roletype === 'Admin') {
+          metricsFields.push({
+            physicalsize: (record) => {
+              return record.physicalsize ? parseFloat(record.physicalsize / (1024.0 * 1024.0 * 1024.0)).toFixed(2) + 'GB' : ''
+            }
+          })
+          metricsFields.push('utilization')
+        }
+
+        if (store.getters.metrics) {
+          fields.push(...metricsFields)
+        }
 
         if (store.getters.userInfo.roletype === 'Admin') {
           fields.push('account')

ui/src/store/getters.js

@@ -20,6 +20,7 @@ const getters = {
   version: state => state.app.version,
   theme: state => state.app.theme,
   color: state => state.app.color,
+  metrics: state => state.app.metrics,
   token: state => state.user.token,
   project: state => state.user.project,
   avatar: state => state.user.avatar,

ui/src/store/modules/app.js

@@ -42,7 +42,8 @@ const app = {
     autoHideHeader: false,
     color: null,
     inverted: true,
-    multiTab: true
+    multiTab: true,
+    metrics: false
   },
   mutations: {
     SET_SIDEBAR_TYPE: (state, type) => {
@@ -91,6 +92,9 @@ const app = {
     TOGGLE_MULTI_TAB: (state, bool) => {
       Vue.ls.set(DEFAULT_MULTI_TAB, bool)
       state.multiTab = bool
+    },
+    SET_METRICS: (state, bool) => {
+      state.metrics = bool
     }
   },
   actions: {
@@ -132,6 +136,9 @@ const app = {
     },
     ToggleMultiTab ({ commit }, bool) {
       commit('TOGGLE_MULTI_TAB', bool)
+    },
+    SetMetrics ({ commit }, bool) {
+      commit('SET_METRICS', bool)
     }
   }
 }

ui/src/views/AutogenView.vue

@@ -31,6 +31,13 @@
                 @click="fetchData()">
                 {{ $t('label.refresh') }}
               </a-button>
+              <a-switch
+                v-if="!dataView && ['vm', 'volume', 'zone', 'cluster', 'host', 'storagepool'].includes($route.name)"
+                style="margin-left: 8px"
+                :checked-children="$t('label.metrics')"
+                :un-checked-children="$t('label.metrics')"
+                :checked="$store.getters.metrics"
+                @change="(checked, event) => { $store.dispatch('SetMetrics', checked) }"/>
               <a-tooltip placement="right">
                 <template slot="title">
                   {{ $t('label.filterby') }}
@@ -62,9 +69,9 @@
             :resource="resource"
             @exec-action="execAction"/>
           <a-input-search
+            v-if="!dataView"
             style="width: 100%; display: table-cell"
             :placeholder="$t('label.search')"
-            v-if="!dataView"
             v-model="searchQuery"
             allowClear
             @search="onSearch" />
@@ -383,6 +390,9 @@ export default {
       if (to !== from) {
         this.fetchData()
       }
+    },
+    '$store.getters.metrics' (oldVal, newVal) {
+      this.fetchData()
     }
   },
   methods: {