From bccaa57d8ba3de37d165ce5c27c14a0bda3fbfe0 Mon Sep 17 00:00:00 2001
From: Rohit Yadav <rohit.yadav@shapeblue.com>
Date: Wed, 9 Oct 2019 14:05:20 +0530
Subject: [PATCH] compute: enhancements and tweaks in custom vm component

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 ui/src/components/widgets/FormView.vue |   2 +-
 ui/src/config/section/compute.js       |   5 +-
 ui/src/locales/en.json                 |   2 +-
 ui/src/views/AutogenView.vue           |   3 +-
 ui/src/views/compute/InstanceView.vue  | 102 ++++++++++++++++---------
 5 files changed, 70 insertions(+), 44 deletions(-)

diff --git a/ui/src/components/widgets/FormView.vue b/ui/src/components/widgets/FormView.vue
index c1fadb1e712..f0fb37634c2 100644
--- a/ui/src/components/widgets/FormView.vue
+++ b/ui/src/components/widgets/FormView.vue
@@ -39,7 +39,7 @@
 
             >
               <a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex">
-                {{ opt.name }}
+                {{ opt.name || opt.description }}
               </a-select-option>
             </a-select>
           </span>
diff --git a/ui/src/config/section/compute.js b/ui/src/config/section/compute.js
index 9e8fb3d6dd4..6c759904ea2 100644
--- a/ui/src/config/section/compute.js
+++ b/ui/src/config/section/compute.js
@@ -28,7 +28,8 @@ export default {
           api: 'updateVirtualMachine',
           icon: 'edit',
           label: 'Update VM',
-          dataView: true
+          dataView: true,
+          args: ['name', 'displayname', 'ostypeid', 'isdynamicallyscalable', 'haenable', 'group']
         },
         {
           api: 'startVirtualMachine',
@@ -37,7 +38,7 @@ export default {
           dataView: true,
           groupAction: true,
           hidden: (record) => { return record.state !== 'Stopped' },
-          options: ['podid', 'clusterid', 'hostid']
+          args: ['podid', 'clusterid', 'hostid']
         },
         {
           api: 'stopVirtualMachine',
diff --git a/ui/src/locales/en.json b/ui/src/locales/en.json
index 0906c2fb345..144ca184603 100644
--- a/ui/src/locales/en.json
+++ b/ui/src/locales/en.json
@@ -621,7 +621,7 @@
     "vSwitchGuestType": "Guest Traffic vSwitch Type",
     "vSwitchPublicName": "Public Traffic vSwitch Name",
     "vSwitchPublicType": "Public Traffic vSwitch Type",
-    "value": "Credits",
+    "value": "Value",
     "vcenter": "VMware datacenter vcenter",
     "vcenterHost": "ESX/ESXi Host",
     "vcsdeviceid": "ID",
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index de459813f62..76ebec2fc03 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -138,10 +138,9 @@
                     rules: [{ required: field.required, message: 'Please select option' }]
                   }]"
                   :placeholder="field.description"
-
                 >
                   <a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex">
-                    {{ opt.name }}
+                    {{ opt.name || opt.description }}
                   </a-select-option>
                 </a-select>
               </span>
diff --git a/ui/src/views/compute/InstanceView.vue b/ui/src/views/compute/InstanceView.vue
index 3654b33cd4c..b1480839e5a 100644
--- a/ui/src/views/compute/InstanceView.vue
+++ b/ui/src/views/compute/InstanceView.vue
@@ -32,19 +32,34 @@
               <font-awesome-icon :icon="['fas', 'microchip']" />
               {{ vm.cpunumber }} CPU x {{ vm.cpuspeed }} Mhz
               (<router-link :to="{ path: '/computeoffering/' + vm.serviceofferingid }">{{ vm.serviceofferingname }}</router-link>)
+              <a-progress style="padding-left: 32px" size="small" :percent="parseFloat(vm.cpuused)" />
             </p>
             <p>
               <font-awesome-icon :icon="['fas', 'memory']" />
               {{ vm.memory }} MB Memory
+              <a-progress style="padding-left: 32px" size="small" :percent="parseFloat(100.0 * (vm.memorykbs - vm.memoryintfreekbs) / vm.memorykbs).toFixed(2)" />
             </p>
             <p>
               <font-awesome-icon :icon="['fas', 'database']" />
               {{ (totalStorage / (1024 * 1024 * 1024.0)).toFixed(2) }} GB Storage
-              (<router-link :to="{ path: '/template/' + vm.templateid }">{{ vm.templatename }}</router-link>)
+              (<router-link :to="{ path: '/template/' + vm.templateid }">{{ vm.templatename }}</router-link>)<br/>
+              <span style="padding-left: 32px">
+                <a-tag color="green">Disk Read {{ vm.diskkbsread }} KB</a-tag>
+                <a-tag color="blue">Disk Write {{ vm.diskkbswrite }} KB</a-tag>
+              </span><br/>
+              <span style="padding-left: 32px">
+                <a-tag color="green">Disk Read (IO) {{ vm.diskioread }}</a-tag>
+                <a-tag color="blue">Disk Write (IO) {{ vm.diskiowrite }}</a-tag>
+              </span>
             </p>
             <p>
               <font-awesome-icon :icon="['fas', 'ethernet']" />
-              {{ vm && vm.nic ? vm.nic.length : 0 }} NIC(s): <br/>
+              <span>
+                {{ vm && vm.nic ? vm.nic.length : 0 }} NIC(s):
+                <a-tag color="green"><a-icon type="arrow-down" /> RX {{ vm.networkkbsread }} KB</a-tag>
+                <a-tag color="blue"><a-icon type="arrow-up" /> TX {{ vm.networkkbswrite }} KB</a-tag>
+              </span>
+              <br/>
               <span style="padding-left: 34px" v-for="eth in vm.nic" :key="eth.id">
                 {{ eth.ipaddress }} <router-link :to="{ path: '/guestnetwork/' + eth.networkid }">({{ eth.networkname }})</router-link> <br/>
               </span>
@@ -73,6 +88,9 @@
             <p>
               <a-icon type="calendar" style="margin-left: 6px; margin-right: 8px" /> {{ vm.created }}
             </p>
+            <p>
+              <a-icon type="barcode" style="margin-left: 6px; margin-right: 8px" /> {{ vm.id }}
+            </p>
           </div>
           <a-divider/>
 
@@ -138,14 +156,9 @@
       <a-col :md="24" :lg="17">
         <a-card
           style="width:100%"
+          title="Hardware"
           :bordered="true"
-          :tabList="tabListNoTitle"
-          :activeTabKey="noTitleKey"
-          @tabChange="key => handleTabChange(key, 'noTitleKey')"
         >
-          <span slot="customRender" slot-scope="item">
-            <a-icon type="home"/>{{ item.tab }}
-          </span>
           <a-collapse v-model="activeKey">
             <a-collapse-panel :header="'ISO: ' + vm.isoname" v-if="vm.isoid" key="1">
               <a-list
@@ -165,21 +178,24 @@
 
             <a-collapse-panel :header="'Disks: ' + volumes.length" key="2">
               <a-list
+                size="small"
                 itemLayout="horizontal"
                 :dataSource="volumes"
               >
                 <a-list-item slot="renderItem" slot-scope="item">
-                  <a-list-item-meta :description="item.id">
-                    <a slot="title" href="">
-                      <router-link :to="{ path: '/volume/' + item.id }">{{ item.name }}</router-link>
-                    </a> ({{ item.type }})
+                  <a-list-item-meta>
+                    <div slot="title">
+                      <router-link :to="{ path: '/volume/' + item.id }">{{ item.name }}</router-link> ({{ item.type }}) <br/>
+                      <status :text="item.state" displayText /><br/>
+                    </div>
+                    <div slot="description">
+                      <a-icon type="barcode"/> <router-link :to="{ path: '/volume/' + item.id }"> {{ item.id }}</router-link>
+                    </div>
                     <a-avatar slot="avatar">
                       <font-awesome-icon :icon="['fas', 'database']" />
                     </a-avatar>
                   </a-list-item-meta>
                   <p>
-                    State: {{ item.state }}<br/>
-                    Type: {{ item.type }}<br/>
                     Size: {{ (item.size / (1024 * 1024 * 1024.0)).toFixed(4) }} GB<br/>
                     Physical Size: {{ (item.physicalsize / (1024 * 1024 * 1024.0)).toFixed(4) }} GB<br/>
                     Provisioning: {{ item.provisioningtype }}<br/>
@@ -191,27 +207,29 @@
             </a-collapse-panel>
             <a-collapse-panel :header="'Network Adapter(s): ' + (vm && vm.nic ? vm.nic.length : 0)" key="3" >
               <a-list
+                size="small"
                 itemLayout="horizontal"
                 :dataSource="vm.nic"
               >
                 <a-list-item slot="renderItem" slot-scope="item">
-                  <a-list-item-meta :description="item.id">
-                    <span slot="title" href="">
+                  <a-list-item-meta>
+                    <div slot="title">
                       <span v-show="item.isdefault">(Default) </span>
-                      <router-link :to="{ path: '/guestnetwork/' + item.networkid }">{{ item.networkname }} </router-link>
-                      {{ item.ipaddress }}
-                    </span>
+                      <router-link :to="{ path: '/guestnetwork/' + item.networkid }">{{ item.networkname }} </router-link><br/>
+                      Mac Address: {{ item.macaddress }}<br/>
+                      <span v-if="item.ipaddress">Address: {{ item.ipaddress }} <br/></span>
+                      Netmask: {{ item.netmask }}<br/>
+                      Gateway: {{ item.gateway }}<br/>
+                    </div>
+                    <div slot="description">
+                      <a-icon type="barcode"/> {{ item.id}}
+                    </div>
                     <a-avatar slot="avatar">
                       <font-awesome-icon :icon="['fas', 'ethernet']" />
                     </a-avatar>
                   </a-list-item-meta>
                   <p>
-                    <span v-if="item.ipaddress">Address: {{ item.ipaddress }} <br/></span>
-                    Network: <router-link :to="{ path: '/guestnetwork/' + item.networkid }">{{ item.networkname }}</router-link> <br/>
                     Type: {{ item.type }}<br/>
-                    Mac Address: {{ item.macaddress }}<br/>
-                    Netmask: {{ item.netmask }}<br/>
-                    Gateway: {{ item.gateway }}<br/>
                     Broadcast URI: {{ item.broadcasturi }}<br/>
                     Isolation URI: {{ item.isolationuri }}<br/>
                   </p>
@@ -219,7 +237,15 @@
               </a-list>
             </a-collapse-panel>
           </a-collapse>
-
+        </a-card>
+        <a-card
+          style="width:100%; margin-top: 12px"
+          title="Settings"
+          :bordered="true"
+        >
+          <list-view
+            :columns="settingsColumns"
+            :items="settings " />
         </a-card>
       </a-col>
     </a-row>
@@ -230,11 +256,13 @@
 <script>
 
 import { api } from '@/api'
+import ListView from '@/components/widgets/ListView'
 import Status from '@/components/widgets/Status'
 
 export default {
   name: 'InstanceView',
   components: {
+    ListView,
     Status
   },
   props: {
@@ -258,22 +286,20 @@ export default {
       tagInputValue: '',
       teams: [],
       teamSpinning: true,
-      tabListNoTitle: [
+      settingsColumns: [
         {
-          key: 'summary',
-          tab: 'Hardware'
-        },
-        {
-          key: 'stats',
-          tab: 'Statistics'
-        },
-        {
-          key: 'settings',
-          tab: 'Settings'
+          title: this.$t('name'),
+          dataIndex: 'name',
+          sorter: true
+        }, {
+          title: this.$t('value'),
+          dataIndex: 'value'
+        }, {
+          title: this.$t('action'),
+          dataIndex: 'actions'
         }
       ],
-      noTitleKey: 'summary'
-
+      settings: []
     }
   },
   created () {