From 882861250e2a12db1fe9f784d4e544e6671ae004 Mon Sep 17 00:00:00 2001
From: Rohit Yadav <rohit.yadav@shapeblue.com>
Date: Tue, 24 Sep 2019 17:49:01 +0530
Subject: [PATCH] refactor: framework changes to allow custom action component

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 ui/src/components/widgets/Status.vue          |  2 +-
 ui/src/config/router.js                       | 28 +++++++++++++++++--
 ui/src/config/section/compute.js              |  8 ++----
 ui/src/config/section/config.js               |  3 --
 ui/src/config/section/iam.js                  |  4 ---
 ui/src/config/section/image.js                |  2 --
 ui/src/config/section/infra.js                | 10 -------
 ui/src/config/section/monitor.js              |  2 --
 ui/src/config/section/network.js              |  5 ----
 ui/src/config/section/offering.js             |  5 ----
 ui/src/config/section/plugin.js               |  6 ++--
 ui/src/config/section/project.js              |  1 -
 ui/src/config/section/storage.js              |  3 --
 .../Resource.vue => views/AutogenView.vue}    | 17 +++++++----
 ui/src/views/compute/DeployVM.vue             | 28 +++++++++++++++++++
 ui/src/views/compute/Instance.vue             | 23 ---------------
 .../compute}/InstanceView.vue                 | 19 +++++++------
 17 files changed, 81 insertions(+), 85 deletions(-)
 rename ui/src/{components/CloudMonkey/Resource.vue => views/AutogenView.vue} (97%)
 create mode 100644 ui/src/views/compute/DeployVM.vue
 delete mode 100644 ui/src/views/compute/Instance.vue
 rename ui/src/{components/widgets => views/compute}/InstanceView.vue (97%)

diff --git a/ui/src/components/widgets/Status.vue b/ui/src/components/widgets/Status.vue
index a3078110101..cf3065cc99f 100644
--- a/ui/src/components/widgets/Status.vue
+++ b/ui/src/components/widgets/Status.vue
@@ -69,7 +69,7 @@ export default {
 </script>
 
 <style scoped>
-.ant-badge-status-dot {
+/deep/ .ant-badge-status-dot {
   width: 14px;
   height: 14px;
 }
diff --git a/ui/src/config/router.js b/ui/src/config/router.js
index b8f56e4ef23..ae1f7545c13 100644
--- a/ui/src/config/router.js
+++ b/ui/src/config/router.js
@@ -1,5 +1,6 @@
 // eslint-disable-next-line
 import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } from '@/layouts'
+import AutogenView from '@/views/AutogenView.vue'
 
 import compute from '@/config/section/compute'
 import storage from '@/config/section/storage'
@@ -26,6 +27,7 @@ export function generateRouterMap (section) {
     map.meta.permission = section.children[0].permission
     map.children = []
     for (const child of section.children) {
+      var component = child.component ? child.component : AutogenView
       var route = {
         name: child.name,
         path: '/' + child.name,
@@ -38,7 +40,7 @@ export function generateRouterMap (section) {
           columns: child.columns,
           actions: child.actions
         },
-        component: child.component,
+        component: component,
         hideChildrenInMenu: true,
         children: [
           {
@@ -49,12 +51,32 @@ export function generateRouterMap (section) {
               icon: child.icon,
               permission: child.permission,
               params: child.params ? child.params : {},
-              actions: child.actions ? child.actions : []
+              actions: child.actions ? child.actions : [],
+              viewComponent: child.viewComponent
             },
-            component: child.viewComponent ? child.viewComponent : child.component
+            component: component
           }
         ]
       }
+      if (child.actions) {
+        child.actions.forEach(function (action) {
+          if (!action.component || !action.api) {
+            return
+          }
+          map.children.push({
+            name: action.api,
+            icon: child.icon,
+            path: '/action/' + action.api,
+            meta: {
+              title: child.title,
+              keepAlive: true,
+              permission: [ action.api ]
+            },
+            component: action.component,
+            hidden: true
+          })
+        })
+      }
       map.children.push(route)
     }
   } else {
diff --git a/ui/src/config/section/compute.js b/ui/src/config/section/compute.js
index 20a795d9d10..9e8fb3d6dd4 100644
--- a/ui/src/config/section/compute.js
+++ b/ui/src/config/section/compute.js
@@ -8,7 +8,7 @@ export default {
       title: 'Instances',
       icon: 'desktop',
       permission: [ 'listVirtualMachinesMetrics', 'listVirtualMachines' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
+      viewComponent: () => import('@/views/compute/InstanceView.vue'),
       columns: [
         { 'name': (record) => { return record.displayname } }, 'state', 'instancename',
         { 'ipaddress': (record) => { return record.nic[0].ipaddress } }, 'account', 'zonename',
@@ -21,8 +21,8 @@ export default {
           api: 'deployVirtualMachine',
           icon: 'plus',
           label: 'Deploy VM',
-          args: ['name', 'zoneid', 'templateid', 'serviceofferingid', 'rootdisksize'],
-          listView: true
+          listView: true,
+          component: () => import('@/views/compute/DeployVM.vue')
         },
         {
           api: 'updateVirtualMachine',
@@ -140,7 +140,6 @@ export default {
       title: 'SSH Key Pairs',
       icon: 'key',
       permission: [ 'listSSHKeyPairs' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: ['name', 'fingerprint', 'account', 'domain'],
       actions: [
         {
@@ -162,7 +161,6 @@ export default {
       title: 'Affinity Groups',
       icon: 'swap',
       permission: [ 'listAffinityGroups' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: ['name', 'type', 'description', 'account', 'domain'],
       actions: [
         {
diff --git a/ui/src/config/section/config.js b/ui/src/config/section/config.js
index f39be2621b9..9abbd1a926c 100644
--- a/ui/src/config/section/config.js
+++ b/ui/src/config/section/config.js
@@ -9,7 +9,6 @@ export default {
       title: 'Global Settings',
       icon: 'global',
       permission: [ 'listConfigurations' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: [ 'name', 'description', 'category', 'value' ]
     },
     {
@@ -17,7 +16,6 @@ export default {
       title: 'LDAP Configuration',
       icon: 'team',
       permission: [ 'listLdapConfigurations' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: [ 'hostname', 'port' ]
     },
     {
@@ -25,7 +23,6 @@ export default {
       title: 'Hypervisor Capabilities',
       icon: 'database',
       permission: [ 'listHypervisorCapabilities' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: [ 'hypervisor', 'hypervisorversion', 'maxguestlimit', 'maxdatavolumeslimit', 'maxhostspercluster' ]
     }
   ]
diff --git a/ui/src/config/section/iam.js b/ui/src/config/section/iam.js
index 8e6bbf006ad..907c153459b 100644
--- a/ui/src/config/section/iam.js
+++ b/ui/src/config/section/iam.js
@@ -9,7 +9,6 @@ export default {
       title: 'Users',
       icon: 'user',
       permission: [ 'listUsers' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: ['username', 'state', 'firstname', 'lastname', 'email', 'account', 'domain']
     },
     {
@@ -17,7 +16,6 @@ export default {
       title: 'Accounts',
       icon: 'team',
       permission: [ 'listAccounts' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: ['name', 'state', 'firstname', 'lastname', 'rolename', 'roletype', 'domain']
     },
     {
@@ -25,7 +23,6 @@ export default {
       title: 'Domains',
       icon: 'block',
       permission: [ 'listDomains' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: ['name', 'state', 'path', 'parentdomainname', 'level']
     },
     {
@@ -33,7 +30,6 @@ export default {
       title: 'Roles',
       icon: 'idcard',
       permission: [ 'listRoles' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: ['name', 'type', 'description']
     }
   ]
diff --git a/ui/src/config/section/image.js b/ui/src/config/section/image.js
index 25d3e269ef3..2d00f463c45 100644
--- a/ui/src/config/section/image.js
+++ b/ui/src/config/section/image.js
@@ -9,7 +9,6 @@ export default {
       icon: 'save',
       permission: [ 'listTemplates' ],
       params: { 'templatefilter': 'executable' },
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: ['name', 'ostypename', 'status', 'hypervisor', 'account', 'domain'],
       actions: [
         {
@@ -26,7 +25,6 @@ export default {
       title: 'ISOs',
       icon: 'usb',
       permission: [ 'listIsos' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: ['name', 'ostypename', 'account', 'domain']
     }
   ]
diff --git a/ui/src/config/section/infra.js b/ui/src/config/section/infra.js
index b78c1fc6dff..727018c0e95 100644
--- a/ui/src/config/section/infra.js
+++ b/ui/src/config/section/infra.js
@@ -9,7 +9,6 @@ export default {
       title: 'Zones',
       icon: 'global',
       permission: [ 'listZones', 'listZonesMetrics' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: [ 'name', 'allocationstate', 'networktype', 'guestcidraddress' ],
       actions: [
         {
@@ -26,7 +25,6 @@ export default {
       title: 'Pods',
       icon: 'appstore',
       permission: [ 'listPods' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: [ 'name', 'allocationstate', 'gateway', 'netmask', 'zonename' ]
     },
     {
@@ -34,7 +32,6 @@ export default {
       title: 'Clusters',
       icon: 'cluster',
       permission: [ 'listClusters', 'listClustersMetrics' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: [ 'name', 'allocationstate', 'clustertype', 'hypervisortype', 'podname', 'zonename' ]
     },
     {
@@ -43,7 +40,6 @@ export default {
       icon: 'desktop',
       permission: [ 'listHosts', 'listHostsMetrics' ],
       params: { 'type': 'routing' },
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: [ 'name', 'state', 'resourcestate', 'ipaddress', 'hypervisor', 'hypervisorversion', 'clustername', 'zonename' ]
     },
     {
@@ -51,7 +47,6 @@ export default {
       title: 'Primary Storage',
       icon: 'database',
       permission: [ 'listStoragePools', 'listStoragePoolsMetrics' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: [ 'name', 'state', 'ipaddress', 'type', 'path', 'scope', 'clustername', 'zonename' ]
     },
     {
@@ -59,7 +54,6 @@ export default {
       title: 'Secondary Storages',
       icon: 'picture',
       permission: [ 'listImageStores' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: [ 'name', 'url', 'protocol', 'scope', 'zonename' ]
     },
     {
@@ -67,7 +61,6 @@ export default {
       title: 'System VMs',
       icon: 'thunderbolt',
       permission: [ 'listSystemVms' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: [ 'name', 'state', 'agentstate', 'systemvmtype', 'publicip', 'privateip', 'hostname', 'zonename' ]
     },
     {
@@ -75,7 +68,6 @@ export default {
       title: 'Virtual Routers',
       icon: 'fork',
       permission: [ 'listRouters' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: [ 'name', 'state', 'publicip', 'guestnetworkname', 'vpcname', 'redundantstate', 'version', 'hostname', 'account', 'zonename', 'requiresupgrade' ]
     },
     {
@@ -84,7 +76,6 @@ export default {
       icon: 'api',
       permission: [ 'listHosts' ],
       params: { 'type': 'routing' },
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: [ 'hypervisor', 'hosts', 'cpusockets' ]
     },
     {
@@ -92,7 +83,6 @@ export default {
       title: 'Management Servers',
       icon: 'rocket',
       permission: [ 'listManagementServers' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: [ 'name', 'state', 'version' ]
     }
   ]
diff --git a/ui/src/config/section/monitor.js b/ui/src/config/section/monitor.js
index d71705bd068..ead57f6999f 100644
--- a/ui/src/config/section/monitor.js
+++ b/ui/src/config/section/monitor.js
@@ -9,7 +9,6 @@ export default {
       title: 'Events',
       icon: 'schedule',
       permission: [ 'listEvents' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: ['description', 'state', 'level', 'type', 'account', 'domain', 'created']
     },
     {
@@ -17,7 +16,6 @@ export default {
       title: 'Alerts',
       icon: 'flag',
       permission: [ 'listAlerts' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: ['description', 'type', 'sent']
     }
   ]
diff --git a/ui/src/config/section/network.js b/ui/src/config/section/network.js
index 6419d471baa..59f79ab5c22 100644
--- a/ui/src/config/section/network.js
+++ b/ui/src/config/section/network.js
@@ -8,7 +8,6 @@ export default {
       title: 'Guest Networks',
       icon: 'gateway',
       permission: [ 'listNetworks' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: ['name', 'state', 'type', 'cidr', 'ip6cidr', 'broadcasturi', 'account', 'zonename'],
       actions: [
         {
@@ -26,7 +25,6 @@ export default {
       title: 'VPC',
       icon: 'deployment-unit',
       permission: [ 'listVPCs' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: ['name', 'state', 'displaytext', 'cidr', 'account', 'zonename']
     },
     {
@@ -34,7 +32,6 @@ export default {
       title: 'Security Groups',
       icon: 'fire',
       permission: [ 'listSecurityGroups' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: ['name', 'description', 'account', 'domain']
     },
     {
@@ -42,7 +39,6 @@ export default {
       title: 'Public IP Addresses',
       icon: 'environment',
       permission: [ 'listPublicIpAddresses' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: ['ipaddress', 'state', 'associatednetworkname', 'virtualmachinename', 'allocated', 'account', 'zonename']
     },
     {
@@ -50,7 +46,6 @@ export default {
       title: 'VPN Gateway',
       icon: 'lock',
       permission: [ 'listVpnCustomerGateways' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: ['name', 'ipaddress', 'gateway', 'cidrlist', 'ipsecpsk', 'account', 'domain']
     }
   ]
diff --git a/ui/src/config/section/offering.js b/ui/src/config/section/offering.js
index 50bf1f46162..75f8aa447c6 100644
--- a/ui/src/config/section/offering.js
+++ b/ui/src/config/section/offering.js
@@ -9,7 +9,6 @@ export default {
       title: 'Compute Offerings',
       icon: 'cloud',
       permission: [ 'listServiceOfferings' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: [ 'name', 'displaytext', 'cpunumber', 'cpuspeed', 'memory', 'tags', 'domain', 'zone' ]
     },
     {
@@ -17,7 +16,6 @@ export default {
       title: 'Disk Offerings',
       icon: 'hdd',
       permission: [ 'listDiskOfferings' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: [ 'name', 'displaytext', 'disksize', 'tags', 'domain', 'zone' ]
     },
     {
@@ -25,7 +23,6 @@ export default {
       title: 'Network Offerings',
       icon: 'wifi',
       permission: [ 'listNetworkOfferings' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: [ 'name', 'state', 'guestiptype', 'traffictype', 'networkrate', 'tags', 'domain', 'zone' ]
     },
     {
@@ -33,7 +30,6 @@ export default {
       title: 'VPC Offerings',
       icon: 'deployment-unit',
       permission: [ 'listVPCOfferings' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: [ 'name', 'state', 'displaytext', 'domain', 'zone' ]
     },
     {
@@ -42,7 +38,6 @@ export default {
       icon: 'setting',
       permission: [ 'listServiceOfferings' ],
       params: { 'issystem': 'true' },
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: [ 'name', 'systemvmtype', 'cpunumber', 'cpuspeed', 'memory', 'storagetype', 'tags' ]
     }
   ]
diff --git a/ui/src/config/section/plugin.js b/ui/src/config/section/plugin.js
index d552e9d1b76..2bb4b9f63c2 100644
--- a/ui/src/config/section/plugin.js
+++ b/ui/src/config/section/plugin.js
@@ -8,15 +8,13 @@ export default {
       name: 'quota',
       title: 'Quota',
       icon: 'pie-chart',
-      permission: [ 'quotaSummary', 'quotaIsEnabled' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue')
+      permission: [ 'quotaSummary', 'quotaIsEnabled' ]
     },
     {
       name: 'cloudian',
       title: 'Cloudian Storage',
       icon: 'cloud-download',
-      permission: [ 'cloudianSsoLogin', 'cloudianIsEnabled' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue')
+      permission: [ 'cloudianSsoLogin', 'cloudianIsEnabled' ]
     }
   ]
 }
diff --git a/ui/src/config/section/project.js b/ui/src/config/section/project.js
index 07647881131..504a3174c77 100644
--- a/ui/src/config/section/project.js
+++ b/ui/src/config/section/project.js
@@ -3,6 +3,5 @@ export default {
   title: 'Projects',
   icon: 'project',
   permission: [ 'listProjects' ],
-  component: () => import('@/components/CloudMonkey/Resource.vue'),
   columns: ['name', 'state', 'displaytext', 'account', 'domain']
 }
diff --git a/ui/src/config/section/storage.js b/ui/src/config/section/storage.js
index 0a65aa253a2..1683621b668 100644
--- a/ui/src/config/section/storage.js
+++ b/ui/src/config/section/storage.js
@@ -8,7 +8,6 @@ export default {
       title: 'Volumes',
       icon: 'hdd',
       permission: [ 'listVolumesMetrics', 'listVolumes' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: ['name', 'state', 'type', 'vmname', 'size', 'physicalsize', 'utilization', 'diskkbsread', 'diskkbswrite', 'diskiopstotal', 'storage', 'account', 'zonename'],
       hidden: ['storage', 'utilization'],
       actions: [
@@ -91,7 +90,6 @@ export default {
       title: 'Snapshots',
       icon: 'build',
       permission: [ 'listSnapshots' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: ['name', 'state', 'volumename', 'intervaltype', 'created', 'account']
     },
     {
@@ -99,7 +97,6 @@ export default {
       title: 'VM Snapshots',
       icon: 'camera',
       permission: [ 'listVMSnapshot' ],
-      component: () => import('@/components/CloudMonkey/Resource.vue'),
       columns: ['name', 'state', 'type', 'current', 'parent', 'created', 'account']
     }
   ]
diff --git a/ui/src/components/CloudMonkey/Resource.vue b/ui/src/views/AutogenView.vue
similarity index 97%
rename from ui/src/components/CloudMonkey/Resource.vue
rename to ui/src/views/AutogenView.vue
index 726566c424a..61ec6e5a17a 100644
--- a/ui/src/components/CloudMonkey/Resource.vue
+++ b/ui/src/views/AutogenView.vue
@@ -167,7 +167,7 @@
     </div>
 
     <div v-if="dataView">
-      <instance-view :vm="resource" v-if="routeName == 'vm'" />
+      <component :is="$route.meta.viewComponent" :resource="resource" v-if="$route.meta.viewComponent"/></component>
       <data-view :resource="resource" v-else />
     </div>
     <div style="margin-top: 12px" v-else>
@@ -193,7 +193,6 @@ import Breadcrumb from '@/components/widgets/Breadcrumb'
 import CardView from '@/components/widgets/CardView'
 import ChartCard from '@/components/chart/ChartCard'
 import DataView from '@/components/widgets/DataView'
-import InstanceView from '@/components/widgets/InstanceView'
 import ListView from '@/components/widgets/ListView'
 import Status from '@/components/widgets/Status'
 
@@ -204,7 +203,6 @@ export default {
     CardView,
     ChartCard,
     DataView,
-    InstanceView,
     ListView,
     Status
   },
@@ -235,7 +233,7 @@ export default {
   },
   watch: {
     '$route' (to, from) {
-      if (to.fullPath !== from.fullPath) {
+      if (to.fullPath !== from.fullPath && !to.fullPath.includes('action/')) {
         this.fetchData()
       }
     },
@@ -264,14 +262,17 @@ export default {
       } else if (this.$route.meta.params) {
         Object.assign(params, this.$route.meta.params)
       }
+
       if (search !== '') {
         params['keyword'] = search
       }
+
       if (this.$route && this.$route.params && this.$route.params.id) {
         this.dataView = true
       } else {
         this.dataView = false
       }
+
       if (this.$route && this.$route.meta && this.$route.meta.permission) {
         this.apiName = this.$route.meta.permission[0]
         if (this.$route.meta.columns) {
@@ -281,9 +282,11 @@ export default {
           this.actions = this.$route.meta.actions
         }
       }
+
       if (this.apiName === '' || this.apiName === undefined) {
         return
       }
+
       if (!this.columnKeys || this.columnKeys.length === 0) {
         for (const field of store.getters.apis[this.apiName]['response']) {
           this.columnKeys.push(field.name)
@@ -297,7 +300,6 @@ export default {
         })
       }
 
-      var counter = 0
       for (var key of this.columnKeys) {
         if (typeof key === 'object') {
           key = Object.keys(key)[0]
@@ -305,7 +307,6 @@ export default {
         this.columns.push({
           title: this.$t(key),
           dataIndex: key,
-          key: counter++,
           scopedSlots: { customRender: key },
           sorter: (a, b) => String(a[key]).length - String(b[key]).length
         })
@@ -368,6 +369,10 @@ export default {
       this.currentAction = {}
     },
     execAction (action) {
+      if (action.component && action.api) {
+        this.$router.push({ name: action.api })
+        return
+      }
       this.currentAction = action
       var params = store.getters.apis[this.currentAction.api]['params']
       params.sort(function (a, b) {
diff --git a/ui/src/views/compute/DeployVM.vue b/ui/src/views/compute/DeployVM.vue
new file mode 100644
index 00000000000..0b8c7e111ff
--- /dev/null
+++ b/ui/src/views/compute/DeployVM.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    Finish this component
+    <a-steps direction="vertical" :current="1">
+      <a-step title="Finished" description="This is a description." />
+      <a-step title="In Progress" description="This is a description." />
+      <a-step title="Waiting" description="This is a description." />
+    </a-steps>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'DeployVM',
+  components: {
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/ui/src/views/compute/Instance.vue b/ui/src/views/compute/Instance.vue
deleted file mode 100644
index 7a611b87077..00000000000
--- a/ui/src/views/compute/Instance.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <div>
-
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: '',
-  components: {
-  },
-  data () {
-    return {
-    }
-  },
-  methods: {
-  }
-}
-</script>
-
-<style scoped>
-</style>
diff --git a/ui/src/components/widgets/InstanceView.vue b/ui/src/views/compute/InstanceView.vue
similarity index 97%
rename from ui/src/components/widgets/InstanceView.vue
rename to ui/src/views/compute/InstanceView.vue
index 8c8dd19e739..3654b33cd4c 100644
--- a/ui/src/components/widgets/InstanceView.vue
+++ b/ui/src/views/compute/InstanceView.vue
@@ -23,7 +23,7 @@
           </div>
           <div class="account-center-detail">
             <p>
-              <status :text="vm.state" style="padding-left: 8px; padding-right: 5px"/>{{ vm.state }}
+              <status :text="vm.state ? vm.state : ''" style="padding-left: 8px; padding-right: 5px"/>{{ vm.state }}
             </p>
             <p>
               <font-awesome-icon :icon="['fab', osLogo]" size="lg"/> {{ guestOsName }} <br/>
@@ -44,7 +44,7 @@
             </p>
             <p>
               <font-awesome-icon :icon="['fas', 'ethernet']" />
-              {{ vm.nic.length }} NIC(s): <br/>
+              {{ vm && vm.nic ? vm.nic.length : 0 }} NIC(s): <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>
@@ -119,13 +119,11 @@
               />
               <div slot="content">
                 <a-form-item>
-                  <a-textarea :rows="4" @change="handleChange" :value="value" ></a-textarea>
+                  <a-textarea :rows="4" ></a-textarea>
                 </a-form-item>
                 <a-form-item>
                   <a-button
                     htmlType="submit"
-                    :loading="submitting"
-                    @click="handleSubmit"
                     type="primary"
                   >
                     Add Note
@@ -191,7 +189,7 @@
               </a-list>
 
             </a-collapse-panel>
-            <a-collapse-panel :header="'Network Adapter(s): ' + vm.nic.length" key="3" >
+            <a-collapse-panel :header="'Network Adapter(s): ' + (vm && vm.nic ? vm.nic.length : 0)" key="3" >
               <a-list
                 itemLayout="horizontal"
                 :dataSource="vm.nic"
@@ -240,13 +238,14 @@ export default {
     Status
   },
   props: {
-    vm: {
+    resource: {
       type: Object,
       required: true
     }
   },
   data () {
     return {
+      vm: {},
       volumes: [],
       totalStorage: 0,
       guestOsName: '',
@@ -277,8 +276,12 @@ export default {
 
     }
   },
+  created () {
+    this.vm = this.resource
+  },
   watch: {
-    vm: function (newVm, oldVm) {
+    resource: function (newItem, oldItem) {
+      this.vm = newItem
       this.fetchData()
     }
   },