autogen: fix issue, make keys with function iterable

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

ui/src/components/view/ListView.vue

@@ -17,9 +17,9 @@
     </template>
 
     <a slot="name" slot-scope="text, record" href="javascript:;">
+      <console :resource="record" size="small" />&nbsp;
       <router-link :to="{ path: $route.path + '/' + record.id }" v-if="record.id">{{ text }}</router-link>
       <router-link :to="{ path: $route.path + '/' + record.name }" v-else>{{ text }}</router-link>
-      <console :resource="record" size="small" style="float: right" />
     </a>
     <a slot="displayname" slot-scope="text, record" href="javascript:;">
       <router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
@@ -29,8 +29,10 @@
     </a>
     <a slot="ipaddress" slot-scope="text, record" href="javascript:;">
       <router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
-      &nbsp;
+      <span v-if="record.issourcenat">
-      <a-tag v-if="record.issourcenat">source-nat</a-tag>
+        &nbsp;
+        <a-tag>source-nat</a-tag>
+      </span>
     </a>
     <a slot="vmname" slot-scope="text, record" href="javascript:;">
       <router-link :to="{ path: '/vm/' + record.virtualmachineid }">{{ text }}</router-link>
@@ -38,7 +40,12 @@
     <template slot="state" slot-scope="text">
       <status :text="text ? text : ''" displayText />
     </template>
-
+    <a slot="guestnetworkname" slot-scope="text, record" href="javascript:;">
+      <router-link :to="{ path: '/guestnetwork/' + record.guestnetworkid }">{{ text }}</router-link>
+    </a>
+    <a slot="vpcname" slot-scope="text, record" href="javascript:;">
+      <router-link :to="{ path: '/vpc/' + record.vpcid }">{{ text }}</router-link>
+    </a>
     <a slot="account" slot-scope="text, record" href="javascript:;">
       <router-link :to="{ path: '/account/' + record.accountid }" v-if="record.accountid">{{ text }}</router-link>
       <router-link :to="{ path: '/account', query: { name: record.account, domainid: record.domainid } }" v-else>{{ text }}</router-link>
@@ -46,13 +53,18 @@
     <a slot="domain" slot-scope="text, record" href="javascript:;">
       <router-link :to="{ path: '/domain/' + record.domainid }">{{ text }}</router-link>
     </a>
+    <a slot="hostname" slot-scope="text, record" href="javascript:;">
+      <router-link :to="{ path: '/host/' + record.hostid }">{{ text }}</router-link>
+    </a>
+    <a slot="clustername" slot-scope="text, record" href="javascript:;">
+      <router-link :to="{ path: '/cluster/' + record.clusterid }">{{ text }}</router-link>
+    </a>
+    <a slot="podname" slot-scope="text, record" href="javascript:;">
+      <router-link :to="{ path: '/pod/' + record.podid }">{{ text }}</router-link>
+    </a>
     <a slot="zonename" slot-scope="text, record" href="javascript:;">
       <router-link :to="{ path: '/zone/' + record.zoneid }">{{ text }}</router-link>
     </a>
-
-    <a slot="guestnetworkname" slot-scope="text, record" href="javascript:;">
-      <router-link :to="{ path: '/guestnetwork/' + record.guestnetworkid }">{{ text }}</router-link>
-    </a>
   </a-table>
 </template>
 

ui/src/components/widgets/Console.vue

@@ -1,9 +1,9 @@
 <template>
   <a
-    v-if="['vm', 'systemvm', 'router'].includes($route.meta.name) && !['Stopped', 'Error', 'Destroyed'].includes(resource.state)"
+    v-if="['vm', 'systemvm', 'router'].includes($route.meta.name)"
     :href="'/client/console?cmd=access&vm=' + resource.id"
     target="_blank">
-    <a-button shape="circle" type="dashed" :size="size" >
+    <a-button shape="circle" type="dashed" :size="size" :disabled="['Stopped', 'Error', 'Destroyed'].includes(resource.state)" >
       <a-icon type="code" />
     </a-button>
   </a>

ui/src/config/section/compute.js

@@ -10,10 +10,13 @@ export default {
       permission: [ 'listVirtualMachinesMetrics', 'listVirtualMachines' ],
       resourceType: 'UserVm',
       columns: [
-        { 'name': (record) => { return record.displayname } }, 'state', 'instancename',
+        'name', 'state', 'instancename', 'ipaddress', 'cpunumber', 'cpuused', 'cputotal',
-        { 'ipaddress': (record) => { return record.nic[0].ipaddress } },
+        { 'memoryused':
-        'cpunumber', 'cpuused', 'cputotal', 'memoryintfreekbs', 'memorytotal',
+          (record) => {
-        'networkread', 'networkwrite', 'diskkbsread', 'diskkbswrite', 'diskiopstotal',
+            return record.memorykbs && record.memoryintfreekbs ? parseFloat(100.0 * (record.memorykbs - record.memoryintfreekbs) / record.memorykbs).toFixed(2) + '%' : '0.0%'
+          }
+        },
+        'memorytotal', 'networkread', 'networkwrite', 'diskkbsread', 'diskkbswrite', 'diskiopstotal',
         'account', 'zonename'
       ],
       related: [{

ui/src/locales/en.json

@@ -119,7 +119,7 @@
     "cpuallocated": "CPU Allocated for VMs",
     "cpuallocatedghz": "Allocated",
     "cpumaxdeviation": "Deviation",
-    "cpunumber": "# of CPU Cores",
+    "cpunumber": "CPU Cores",
     "cpusockets": "The Number of CPU Sockets",
     "cpuspeed": "CPU (in MHz)",
     "cputotal": "Total",
@@ -939,4 +939,4 @@
     "zoneId": "Zone",
     "zoneid": "Zone",
     "zonename": "Zone"
-}
+}

ui/src/views/AutogenView.vue

@@ -313,14 +313,16 @@ export default {
         })
       }
 
-      for (var key of this.columnKeys) {
+      const customRender = {}
-        if (typeof key === 'object') {
+      for (var columnKey of this.columnKeys) {
-          key = Object.keys(key)[0]
+        var key = columnKey
+        if (typeof columnKey === 'object') {
+          key = Object.keys(columnKey)[0]
+          customRender[key] = columnKey[key]
         }
         this.columns.push({
           title: this.$t(key),
           dataIndex: key,
-          width: key === 'state' ? '8%' : '',
           scopedSlots: { customRender: key },
           sorter: (a, b) => String(a[key]).length - String(b[key]).length
         })
@@ -358,6 +360,12 @@ export default {
         }
         for (let idx = 0; idx < this.items.length; idx++) {
           this.items[idx]['key'] = idx
+          for (const key in customRender) {
+            const func = customRender[key]
+            if (func && typeof func === 'function') {
+              this.items[idx][key] = func(this.items[idx])
+            }
+          }
         }
         if (this.items.length > 0) {
           this.resource = this.items[0]
@@ -399,10 +407,6 @@ export default {
     closeAction () {
       this.currentAction.loading = false
       this.showAction = false
-      if (this.currentAction.icon === 'delete') {
-        this.currentAction = {}
-        this.$router.go(-1)
-      }
       this.currentAction = {}
     },
     execAction (action) {
@@ -518,8 +522,6 @@ export default {
             params['id'] = this.resource['id']
           }
 
-          const closeAction = this.closeAction
-          const showError = this.$notification['error']
           api(this.currentAction.api, params).then(json => {
             for (const obj in json) {
               if (obj.includes('response')) {
@@ -532,16 +534,20 @@ export default {
                 break
               }
             }
-            closeAction()
+            if (this.currentAction.icon === 'delete') {
-          }).catch(function (error) {
+              this.$router.go(-1)
-            closeAction()
+            }
+          }).catch(error => {
             console.log(error)
-            showError({
+            this.$notification['error']({
               message: 'Request Failed',
               description: error.response.headers['x-description']
             })
+          }).finally(f => {
+            this.closeAction()
           })
 
+          // TODO: listen for notification success/fail and refresh
           const fetchData = this.fetchData
           setTimeout(function () {
             fetchData()