compute: vm view customisation

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

ui/src/components/widgets/ListView.vue

@@ -33,7 +33,7 @@
       <router-link :to="{ path: '/vm/' + record.virtualmachineid }">{{ text }}</router-link>
     </a>
     <template slot="state" slot-scope="text">
-      <status :text="text ? text : ''" />
+      <status :text="text ? text : ''" displayText />
     </template>
 
     <a slot="account" slot-scope="text, record" href="javascript:;">

ui/src/components/widgets/Status.vue

@@ -47,8 +47,10 @@ export default {
         case 'Started':
           status = 'success'
           break
-        case 'Stopped':
+        case 'Disabled':
+        case 'Down':
         case 'Error':
+        case 'Stopped':
           status = 'error'
           break
         case 'Migrating':

ui/src/config/section/compute.js

@@ -117,6 +117,12 @@ export default {
           label: 'Reset SSH Key',
           dataView: true
         },
+        {
+          api: 'assignVirtualMachine',
+          icon: 'user-add',
+          label: 'Assign Instance to Another Account',
+          dataView: true
+        },
         {
           api: 'destroyVirtualMachine',
           icon: 'delete',

ui/src/views/AutogenView.vue

@@ -3,7 +3,7 @@
     <breadcrumb v-if="device !== 'desktop'" class="mobile-breadcrumb" />
     <a-row>
       <a-col :span="17">
-        <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)">
+        <a-tooltip placement="bottom" v-for="(action, actionIndex) in actions" :key="actionIndex" v-if="action.api in $store.getters.apis && ((!dataView && (action.listView || action.groupAction && selectedRowKeys.length > 0)) || (dataView && action.dataView))">
           <template slot="title">
             {{ action.label }}
           </template>
@@ -322,6 +322,7 @@ export default {
         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
         })

ui/src/views/compute/InstanceView.vue

@@ -3,7 +3,7 @@
     <a-row :gutter="12">
       <a-col :md="24" :lg="7" style="margin-bottom: 12px">
         <a-card :bordered="true">
-          <div class="account-center-avatarHolder">
+          <div class="resource-details">
             <div class="avatar">
               <font-awesome-icon :icon="['fab', osLogo]" size="4x" style="color: #666;" />
             </div>
@@ -21,7 +21,7 @@
               <a-tag :color="vm.isdynamicallyscalable ? 'green': 'red'">Dynamic Scalable</a-tag>
             </div>
           </div>
-          <div class="account-center-detail">
+          <div class="resource-center-detail">
             <p>
               <status :text="vm.state ? vm.state : ''" style="padding-left: 8px; padding-right: 5px"/>{{ vm.state }}
             </p>
@@ -43,26 +43,23 @@
               <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>)<br/>
-              <span style="padding-left: 32px">
+              <div style="margin-left: 45px">
-                <a-tag color="green">Disk Read {{ vm.diskkbsread }} KB</a-tag>
+                <a-tag><a-icon type="download" /> Read {{ vm.diskkbsread }} KB</a-tag>
-                <a-tag color="blue">Disk Write {{ vm.diskkbswrite }} KB</a-tag>
+                <a-tag><a-icon type="upload" /> Write {{ vm.diskkbswrite }} KB</a-tag><br/>
-              </span><br/>
+                <a-tag><a-icon type="download" /> Read (IO) {{ vm.diskioread }}</a-tag>
-              <span style="padding-left: 32px">
+                <a-tag><a-icon type="upload" /> Write (IO) {{ vm.diskiowrite }}</a-tag>
-                <a-tag color="green">Disk Read (IO) {{ vm.diskioread }}</a-tag>
+              </div>
-                <a-tag color="blue">Disk Write (IO) {{ vm.diskiowrite }}</a-tag>
-              </span>
             </p>
             <p>
               <font-awesome-icon :icon="['fas', 'ethernet']" />
-              <span>
+              <span style="margin-left: 5px">
-                {{ vm && vm.nic ? vm.nic.length : 0 }} NIC(s):
+                <a-tag><a-icon type="arrow-down" /> RX {{ vm.networkkbsread }} KB</a-tag>
-                <a-tag color="green"><a-icon type="arrow-down" /> RX {{ vm.networkkbsread }} KB</a-tag>
+                <a-tag><a-icon type="arrow-up" /> TX {{ vm.networkkbswrite }} 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">
+              <div style="margin-left: 45px" v-for="(eth, index) in vm.nic" :key="eth.id">
-                {{ eth.ipaddress }} <router-link :to="{ path: '/guestnetwork/' + eth.networkid }">({{ eth.networkname }})</router-link> <br/>
+                <a-icon type="api"/> eth{{ index }} {{ eth.ipaddress}} (<router-link :to="{ path: '/guestnetwork/' + eth.networkid }">{{ eth.networkname }}</router-link>)
-              </span>
+              </div>
             </p>
             <p v-if="vm.group">
               <a-icon type="team" style="margin-left: 6px; margin-right: 10px" />
@@ -189,7 +186,7 @@
                       <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>
+                      <a-icon type="barcode"/> {{ item.id }}
                     </div>
                     <a-avatar slot="avatar">
                       <font-awesome-icon :icon="['fas', 'database']" />
@@ -382,7 +379,7 @@ export default {
   height: 100%;
   min-height: 100%;
   transition: 0.3s;
-  .account-center-avatarHolder {
+  .resource-details {
     text-align: center;
     margin-bottom: 24px;
     & > .avatar {
@@ -406,10 +403,11 @@ export default {
       margin-bottom: 4px;
     }
   }
-  .account-center-detail {
+  .resource-center-detail {
     p {
       margin-bottom: 8px;
       padding-left: 12px;
+      padding-right: 12px;
       position: relative;
 
       font-awesome-icon, .svg-inline--fa {