From 7bd84c96ed0dc62f769ac36a3d5f6cf0dea03d76 Mon Sep 17 00:00:00 2001
From: Rohit Yadav <rohit.yadav@shapeblue.com>
Date: Sun, 1 Sep 2019 02:13:07 +0530
Subject: [PATCH] new instance component and several other fixes

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 ui/src/components/CloudMonkey/Resource.vue | 110 +++++++++++----
 ui/src/components/page/GlobalHeader.vue    |   2 +
 ui/src/components/widgets/DataView.vue     |  44 ++++++
 ui/src/components/widgets/InstanceView.vue | 152 +++++++++++++++++++++
 ui/src/config/section/compute.js           |  78 +++++++----
 ui/src/config/section/storage.js           |  35 +++--
 6 files changed, 347 insertions(+), 74 deletions(-)
 create mode 100644 ui/src/components/widgets/DataView.vue
 create mode 100644 ui/src/components/widgets/InstanceView.vue

diff --git a/ui/src/components/CloudMonkey/Resource.vue b/ui/src/components/CloudMonkey/Resource.vue
index 99e53ae83b9..694fea2e1fb 100644
--- a/ui/src/components/CloudMonkey/Resource.vue
+++ b/ui/src/components/CloudMonkey/Resource.vue
@@ -10,7 +10,7 @@
     <font-awesome-icon icon="coffee" />
     -->
 
-    <a-breadcrumb class="breadcrumb" v-if="device === 'mobile'">
+    <a-breadcrumb class="breadcrumb">
       <a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
         <router-link
           v-if="item.name"
@@ -26,7 +26,7 @@
 
     <a-row>
       <a-col :span="16">
-        <a-tooltip placement="bottom" v-for="(action, actionIndex) in actions" :key="actionIndex" v-if="(!dataView && action.listView) || (dataView && action.dataView)">
+        <a-tooltip placement="bottom" v-for="(action, actionIndex) in actions" :key="actionIndex" v-if="(!dataView && (action.listView || action.groupAction && selectedRowKeys.length > 0)) || (dataView && action.dataView)">
           <template slot="title">
             {{ action.label }}
           </template>
@@ -36,26 +36,64 @@
             shape="circle"
             style="margin-right: 5px"
             @click="execAction(action)"
+            :disabled="'hidden' in action ? dataView && action.hidden(resource) : false"
           >
           </a-button>
         </a-tooltip>
-        <a-tooltip placement="bottom">
+        <span v-if="!dataView" style="float: right; padding-right: 8px">
+          <a-tooltip placement="bottom">
+            <template slot="title">
+              {{ "Auto-Refresh" }}
+            </template>
+            <a-switch
+              style="margin: 8px;"
+              :loading="loading"
+              :checked="autoRefresh"
+              @change="toggleAutoRefresh"
+              />
+          </a-tooltip>
+          <a-tooltip placement="bottom">
+            <template slot="title">
+              {{ "Refresh" }}
+            </template>
+            <a-button
+              @click="fetchData()"
+              :loading="loading"
+              shape="circle"
+              icon="reload"
+            />
+          </a-tooltip>
+        </span>
+      </a-col>
+      <a-col :span="8">
+        <a-tooltip placement="bottom" v-if="dataView">
           <template slot="title">
             {{ "Refresh" }}
           </template>
           <a-button
+            style="float: right"
             @click="fetchData()"
             :loading="loading"
             shape="circle"
             icon="reload"
           />
         </a-tooltip>
-      </a-col>
-      <a-col :span="8" v-if="!$route.params || !$route.params.id">
+        <a-tooltip placement="bottom" v-if="dataView">
+          <template slot="title">
+            {{ "Auto-Refresh" }}
+          </template>
+          <a-switch v-if="dataView"
+            style="float: right; margin: 5px;"
+            :loading="loading"
+            :checked="autoRefresh"
+            @change="toggleAutoRefresh"
+            />
+        </a-tooltip>
         <a-input-search
           size="default"
           placeholder="Search"
           @search="onSearch"
+          v-if="!dataView"
         >
           <a-icon slot="prefix" type="search" />
         </a-input-search>
@@ -81,7 +119,9 @@
             v-for="(field, fieldIndex) in currentAction.params"
             :key="fieldIndex"
             :label="field.name"
-            :v-bind="field.name">
+            :v-bind="field.name"
+            v-if="field.name !== 'id'"
+            >
 
             <span v-if="field.type==='boolean'">
               <a-switch
@@ -128,26 +168,8 @@
     </a-modal>
 
     <div v-if="dataView">
-      <a-row :gutter="12">
-        <a-col :xl="12">
-          <chart-card class="info-card" v-if="resource.name">
-            <h4>Name</h4>
-            <template slot="footer"><span>{{ resource.name }}</span></template>
-          </chart-card>
-        </a-col>
-        <a-col :xl="12">
-          <chart-card class="info-card" v-if="resource.id">
-            <h4>ID</h4>
-            <template slot="footer"><span>{{ resource.id }}</span></template>
-          </chart-card>
-        </a-col>
-        <a-col :xl="6" v-for="(value, key) in resource" :key="key">
-          <chart-card class="info-card" v-if="key !== 'id' && key !== 'name'">
-            <h4>{{ key }}</h4>
-            <template slot="footer"><span>{{ value }}</span></template>
-          </chart-card>
-        </a-col>
-      </a-row>
+      <instance-view :vm="resource" v-if="routeName == 'vm'" />
+      <data-view :resource="resource" v-else />
     </div>
     <div style="margin-top: 12px" v-else>
       <a-table
@@ -217,16 +239,21 @@
 import { api } from '@/api'
 import store from '@/store'
 import ChartCard from '@/components/chart/ChartCard'
+import DataView from '@/components/widgets/DataView'
+import InstanceView from '@/components/widgets/InstanceView'
 
 export default {
   name: 'Resource',
   components: {
-    ChartCard
+    ChartCard,
+    DataView,
+    InstanceView
   },
   data () {
     return {
       apiName: '',
       loading: false,
+      autoRefresh: false,
       columns: [],
       items: [],
       resource: {},
@@ -291,6 +318,8 @@ export default {
       } else {
         this.dataView = false
       }
+      console.log(this.$route)
+      console.log(this.routeName)
       if (this.$route && this.$route.meta && this.$route.meta.permission) {
         this.apiName = this.$route.meta.permission[0]
         if (this.$route.meta.columns) {
@@ -366,6 +395,21 @@ export default {
     onSearch (value) {
       this.fetchData(value)
     },
+    toggleAutoRefresh () {
+      this.autoRefresh = !this.autoRefresh
+      this.doRefresh()
+    },
+    doRefresh () {
+      if (!this.autoRefresh) {
+        return
+      }
+      const doRefresh = this.doRefresh
+      const fetchData = this.fetchData
+      setTimeout(function() {
+        fetchData()
+        doRefresh()
+      }, 5000)
+    },
     closeAction () {
       this.currentAction.loading = false
       this.showAction = false
@@ -460,6 +504,10 @@ export default {
             }
           }
 
+          if ('id' in this.resource) {
+            params['id'] = this.resource['id']
+          }
+
           const closeAction = this.closeAction
           const showError = this.$notification['error']
           api(this.currentAction.api, params).then(json => {
@@ -470,8 +518,12 @@ export default {
               message: 'Request Failed',
               description: error.response.headers['x-description']
             })
-          }).then(function () {
           })
+
+          const fetchData = this.fetchData
+          setTimeout(function() {
+            fetchData()
+          }, 2500)
         }
       })
     },
@@ -550,7 +602,7 @@ export default {
 
 .ant-breadcrumb {
   vertical-align: text-bottom;
-  margin-bottom: 6px;
+  margin-bottom: 8px;
 }
 
 .ant-breadcrumb .anticon {
diff --git a/ui/src/components/page/GlobalHeader.vue b/ui/src/components/page/GlobalHeader.vue
index e6002da2974..2bc8c5de072 100644
--- a/ui/src/components/page/GlobalHeader.vue
+++ b/ui/src/components/page/GlobalHeader.vue
@@ -12,6 +12,7 @@
         :type="collapsed ? 'menu-unfold' : 'menu-fold'"
         @click="toggle"/>
 
+      <!--
       <a-breadcrumb class="breadcrumb" v-if="device !== 'mobile'">
         <a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
           <router-link
@@ -25,6 +26,7 @@
           <span v-else>{{ item.meta.title }}</span>
         </a-breadcrumb-item>
       </a-breadcrumb>
+      -->
       <user-menu></user-menu>
     </div>
     <div v-else :class="['top-nav-header-index', theme]">
diff --git a/ui/src/components/widgets/DataView.vue b/ui/src/components/widgets/DataView.vue
new file mode 100644
index 00000000000..a1af7a7acce
--- /dev/null
+++ b/ui/src/components/widgets/DataView.vue
@@ -0,0 +1,44 @@
+<template>
+  <a-row :gutter="12">
+    <a-col :xl="12">
+      <chart-card class="info-card" v-if="resource.name">
+        <h4>Name</h4>
+        <template slot="footer"><span>{{ resource.name }}</span></template>
+      </chart-card>
+    </a-col>
+    <a-col :xl="12">
+      <chart-card class="info-card" v-if="resource.id">
+        <h4>ID</h4>
+        <template slot="footer"><span>{{ resource.id }}</span></template>
+      </chart-card>
+    </a-col>
+    <a-col :xl="6" v-for="(value, key) in resource" :key="key">
+      <chart-card class="info-card" v-if="key !== 'id' && key !== 'name'">
+        <h4>{{ key }}</h4>
+        <template slot="footer"><span>{{ value }}</span></template>
+      </chart-card>
+    </a-col>
+  </a-row>
+</template>
+
+<script>
+
+import ChartCard from '@/components/chart/ChartCard'
+
+export default {
+  name: 'DataView',
+  components: {
+    ChartCard
+  },
+  props: {
+    resource: {
+      type: Object,
+      required: true,
+      default: {}
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/ui/src/components/widgets/InstanceView.vue b/ui/src/components/widgets/InstanceView.vue
new file mode 100644
index 00000000000..016b3b76dbd
--- /dev/null
+++ b/ui/src/components/widgets/InstanceView.vue
@@ -0,0 +1,152 @@
+<template>
+  <div style="padding-top: 12px">
+    <a-row>
+      <a-col :span="24">
+        <h2>{{ vm.displayname }} ({{ vm.name }})</h2>
+      </a-col>
+      <a-col :span="5">
+        <a :href="'/client/console?cmd=access&vm=' + vm.id" target="_blank">
+          <a-avatar shape="square" :size="200"
+            style="color: #fff; backgroundColor: #333; width: 175px; height: 120px;">
+            <span style="text-align: bottom">
+            <a-icon type="right-square"/>
+            {{ vm.instancename }}
+            </span>
+          </a-avatar>
+        </a>
+      </a-col>
+      <a-col :span="15">
+        <p>
+          ID: {{ vm.id }} <br/>
+          State: {{ vm.state }} <br/>
+          Guest OS: {{ vm.ostypeid }} <br/>
+          Guest Template: {{ vm.templatename }} <br/>
+          Compute Offering: {{ vm.serviceofferingname }} <br/>
+          Host: {{ vm.hostname }} ({{ vm.hypervisor }}) <br/>
+          Zone: {{ vm.zonename }} <br/>
+          IP Addresses: <ul>
+            <li v-for="eth in vm.nic">{{ eth.ipaddress }}</li>
+          </ul>
+        </p>
+      </a-col>
+      <a-col :span="4">
+        <p>
+          <font-awesome-icon :icon="['fas', 'microchip']" />
+          CPU: {{ vm.cpunumber }} x {{ vm.cpuspeed }} Mhz <br/>
+          <font-awesome-icon :icon="['fas', 'memory']" />
+          Memory: {{ vm.memory }} MiB <br/>
+          <font-awesome-icon :icon="['fas', 'database']" />
+          Storage: {{ (totalStorage / (1024 * 1024 * 1024.0)).toFixed(2) }} GiB <br/>
+        </p>
+      </a-col>
+
+      <a-col :span="16">
+        <a-card title="VM Hardware">
+          <a-collapse>
+            <a-collapse-panel :header="'CPU: ' + vm.cpunumber">
+              <p>{{ vm.cpunumber }} CPU(s) x {{ vm.cpuspeed }} Mhz</p>
+            </a-collapse-panel>
+            <a-collapse-panel :header="'Memory: ' + vm.memory + ' MB'">
+              <p>Total Memory: {{ vm.memory }} MiB<br/>Free Memory: {{ vm.memoryintfreekbs }} kBs</p>
+            </a-collapse-panel>
+            <a-collapse-panel :header="'Storage: ' + volumes.length" >
+              <a-list
+                itemLayout="horizontal"
+                :dataSource="volumes"
+              >
+                <a-list-item slot="renderItem" slot-scope="item, index">
+                  <a-list-item-meta :description="item.id">
+                    <a slot="title" href="">{{item.name}} ({{ item.type }})</span></a>
+                    <a-avatar slot="avatar">
+                      <font-awesome-icon :icon="['fas', 'database']" />
+                    </a-avatar>
+                  </a-list-item-meta>
+                  <p>
+                    State: {{ item.state }}<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/>
+                    Storage Pool: {{ item.storage }} ({{ item.storagetype }})<br/>
+                  </p>
+                </a-list-item>
+              </a-list>
+
+
+            </a-collapse-panel>
+            <a-collapse-panel :header="'Network Adapter(s): ' + vm.nic.length" >
+              <a-list
+                itemLayout="horizontal"
+                :dataSource="vm.nic"
+              >
+                <a-list-item slot="renderItem" slot-scope="item, index">
+                  <a-list-item-meta :description="item.id">
+                    <a slot="title" href="https://vue.ant.design/">{{item.ipaddress}} <span v-show="item.isdefault">(Default)</span></a>
+                    <a-avatar slot="avatar">
+                      <font-awesome-icon :icon="['fas', 'ethernet']" />
+                    </a-avatar>
+                  </a-list-item-meta>
+                  <p>
+                    Network: {{ item.networkname }}<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>
+                </a-list-item>
+              </a-list>
+            </a-collapse-panel>
+          </a-collapse>
+        </a-card>
+      </a-col>
+
+
+    </a-row>
+
+  </div>
+</template>
+
+<script>
+
+import { api } from '@/api'
+
+export default {
+  name: 'InstanceView',
+  components: {
+  },
+  props: {
+    vm: {
+      type: Object,
+      required: true,
+      default: {}
+    }
+  },
+  data () {
+    return {
+      volumes: [],
+      totalStorage: 0
+    }
+  },
+  watch: {
+    vm: function (newVm, oldVm) {
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchData() {
+      this.listVolumes()
+    },
+    listVolumes() {
+      api('listVolumes', { 'listall': true, 'virtualmachineid': this.vm.id }).then(json => {
+        this.volumes = json.listvolumesresponse.volume
+        for (var volume of this.volumes) {
+          this.totalStorage += volume.size
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/ui/src/config/section/compute.js b/ui/src/config/section/compute.js
index ebb6f3dc47b..ae06a31f197 100644
--- a/ui/src/config/section/compute.js
+++ b/ui/src/config/section/compute.js
@@ -10,7 +10,8 @@ export default {
       permission: [ 'listVirtualMachinesMetrics', 'listVirtualMachines' ],
       component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: [
-        'displayname', 'state', 'instancename', { 'ipaddress': (record) => { return record.nic[0].ipaddress } }, 'account', 'zonename',
+        { 'name': (record) => { return record.displayname } }, 'state', 'instancename',
+        { 'ipaddress': (record) => { return record.nic[0].ipaddress } }, 'account', 'zonename',
         'cpunumber', 'cpuused', 'cputotal', 'memoryintfreekbs', 'memorytotal',
         'networkread', 'networkwrite', 'diskkbsread', 'diskkbswrite', 'diskiopstotal'
       ],
@@ -24,33 +25,56 @@ export default {
           listView: true
         },
         {
-          api: 'startVirtualMachine',
-          icon: 'right-square',
-          label: 'View Console',
+          api: 'updateVirtualMachine',
+          icon: 'edit',
+          label: 'Update VM',
           dataView: true
         },
-
         {
           api: 'startVirtualMachine',
           icon: 'caret-right',
           label: 'Start VM',
-          params: ['name', 'zoneid', 'diskofferingid'],
-          listView: true,
-          dataView: true
+          dataView: true,
+          groupAction: true,
+          hidden: (record) => { return record.state !== 'Stopped' },
+          options: ['podid', 'clusterid', 'hostid']
         },
         {
           api: 'stopVirtualMachine',
           icon: 'stop',
           label: 'Stop VM',
-          params: ['name', 'zoneid', 'diskofferingid'],
-          listView: true,
-          dataView: true
+          dataView: true,
+          groupAction: true,
+          options: ['podid', 'clusterid', 'hostid'],
+          hidden: (record) => { return record.state !== 'Running' }
         },
         {
           api: 'rebootVirtualMachine',
           icon: 'sync',
           label: 'Reboot VM',
-          dataView: true
+          dataView: true,
+          hidden: (record) => { return record.state !== 'Running' },
+        },
+        {
+          api: 'restoreVirtualMachine',
+          icon: 'usb',
+          label: 'Reinstall Instance',
+          dataView: true,
+          params: ['virtualmachineid']
+        },
+        {
+          api: 'updateVMAffinityGroup',
+          icon: 'swap',
+          label: 'Update Affinity Group',
+          dataView: true,
+          params: ['id', 'serviceofferingid']
+        },
+        {
+          api: 'changeServiceForVirtualMachine',
+          icon: 'sliders',
+          label: 'Change Service Offering',
+          dataView: true,
+          params: ['id', 'serviceofferingid']
         },
         {
           api: 'createVMSnapshot',
@@ -58,17 +82,17 @@ export default {
           label: 'Create VM Snapshot',
           dataView: true
         },
-        {
-          api: 'restoreVirtualMachine',
-          icon: 'to-top',
-          label: 'Reinstall Instance',
-          dataView: true,
-          params: ['virtualmachineid']
-        },
         {
           api: 'attachIso',
           icon: 'paper-clip',
-          label: 'Attach ISO to Instance',
+          label: 'Attach ISO',
+          dataView: true,
+          params: ['id', 'virtualmachineid']
+        },
+        {
+          api: 'detachIso',
+          icon: 'link',
+          label: 'Detach ISO',
           dataView: true,
           params: ['id', 'virtualmachineid']
         },
@@ -76,7 +100,8 @@ export default {
           api: 'migrateVirtualMachine',
           icon: 'drag',
           label: 'Migrate VM',
-          dataView: true
+          dataView: true,
+          hidden: (record) => { return record.state !== 'Running' }
         },
         {
           api: 'resetPasswordForVirtualMachine',
@@ -91,20 +116,13 @@ export default {
           label: 'Reset SSH Key',
           dataView: true
         },
-        {
-          api: 'changeServiceForVirtualMachine',
-          icon: 'swap',
-          label: 'Change Service Offering',
-          dataView: true,
-          params: ['id', 'serviceofferingid']
-        },
         {
           api: 'destroyVirtualMachine',
           icon: 'delete',
           label: 'Destroy VM',
           params: ['id'],
-          listView: true,
-          dataView: true
+          dataView: true,
+          groupAction: true
         }
       ]
     },
diff --git a/ui/src/config/section/storage.js b/ui/src/config/section/storage.js
index 06de086a39b..d503484b410 100644
--- a/ui/src/config/section/storage.js
+++ b/ui/src/config/section/storage.js
@@ -33,6 +33,22 @@ export default {
           params: ['@file', 'name', 'zoneid', 'format', 'checksum'],
           listView: true
         },
+        {
+          api: 'attachVolume',
+          icon: 'paper-clip',
+          label: 'Attach Volume',
+          params: ['id', 'virtualmachineid'],
+          dataView: true,
+          hidden: (record) => { return record.virtualmachineid }
+        },
+        {
+          api: 'detachVolume',
+          icon: 'link',
+          label: 'Detach Volume',
+          params: ['id', 'virtualmachineid'],
+          dataView: true,
+          hidden: (record) => { return !record.virtualmachineid }
+        },
         {
           api: 'migrateVolume',
           icon: 'drag',
@@ -47,19 +63,8 @@ export default {
           type: 'main',
           params: ['id', 'virtualmachineid'],
           dataView: true
-        }, {
-          api: 'attachVolume',
-          icon: 'paper-clip',
-          label: 'Attach Volume',
-          params: ['id', 'virtualmachineid'],
-          dataView: true
-        }, {
-          api: 'detachVolume',
-          icon: 'link',
-          label: 'Detach Volume',
-          params: ['id', 'virtualmachineid'],
-          dataView: true
-        }, {
+        },
+        {
           api: 'extractVolume',
           icon: 'cloud-download',
           label: 'Download Volume',
@@ -76,8 +81,8 @@ export default {
           icon: 'delete',
           label: 'Delete Volume',
           params: ['id'],
-          listView: true,
-          dataView: true
+          dataView: true,
+          groupAction: true
         }
       ]
     },