From 759921ee11504ccf80ad4154704611abf557dd33 Mon Sep 17 00:00:00 2001
From: Rohit Yadav <rohit.yadav@shapeblue.com>
Date: Thu, 16 Jan 2020 15:40:38 +0530
Subject: [PATCH] fixes

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 ui/src/components/view/InfoCard.vue       | 51 +++++++++++++----------
 ui/src/components/widgets/OsLogo.vue      |  2 +-
 ui/src/locales/en.json                    |  8 ++--
 ui/src/views/compute/InstanceHardware.vue | 15 ++++---
 4 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/ui/src/components/view/InfoCard.vue b/ui/src/components/view/InfoCard.vue
index c44131528c0..7ac739bb93e 100644
--- a/ui/src/components/view/InfoCard.vue
+++ b/ui/src/components/view/InfoCard.vue
@@ -25,13 +25,13 @@
               <slot name="avatar">
                 <os-logo v-if="resource.ostypeid || resource.ostypename" :osId="resource.ostypeid" :osName="resource.ostypename" size="4x" />
                 <a-icon v-else style="font-size: 36px" :type="$route.meta.icon" />
-                <console style="margin-left: -15px" :resource="resource" size="default" v-if="resource.id" />
               </slot>
             </div>
             <slot name="name">
               <h4 class="name">
                 {{ resource.displayname || resource.name }}
               </h4>
+              <console style="margin-left: 10px" :resource="resource" size="default" v-if="resource.id" />
             </slot>
           </div>
           <slot name="actions">
@@ -54,6 +54,12 @@
               <a-tag v-if="'isdynamicallyscalable' in resource" :color="resource.isdynamicallyscalable ? 'green': 'red'">
                 {{ $t('isdynamicallyscalable') }}
               </a-tag>
+              <a-tag v-if="resource.scope">
+                {{ resource.scope }}
+              </a-tag>
+              <a-tag v-if="resource.version">
+                {{ resource.version }}
+              </a-tag>
             </div>
           </slot>
         </div>
@@ -65,6 +71,7 @@
           <div class="resource-detail-item__details">
             <status class="status" :text="resource.state || resource.status"/>
             <span>{{ resource.state || resource.status }}</span>
+            <console style="margin-left: 5px" :resource="resource" size="default" v-if="resource.id" />
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.id">
@@ -195,36 +202,34 @@
             <a-icon type="hdd" />
             <span style="width: 100%;" v-if="resource.volumes">{{ (resource.volumes.reduce((total, item) => total += item.size, 0) / (1024 * 1024 * 1024.0)).toFixed(2) }} GB Storage</span>
             <span style="width: 100%;" v-else-if="resource.sizegb">{{ resource.sizegb }}</span>
-            <div style="margin-left: 25px" v-if="resource.diskkbsread && resource.diskkbswrite && resource.diskioread && resource.diskiowrite">
-              <a-tag style="margin-bottom: 5px;">Read {{ toSize(resource.diskkbsread) }}</a-tag>
-              <a-tag style="margin-bottom: 5px;">Write {{ toSize(resource.diskkbswrite) }}</a-tag><br/>
-              <a-tag style="margin-bottom: 5px;">Read (IO) {{ resource.diskioread }}</a-tag>
-              <a-tag>Write (IO) {{ resource.diskiowrite }}</a-tag>
-            </div>
+          </div>
+          <div style="margin-left: 25px; margin-top: 5px" v-if="resource.diskkbsread && resource.diskkbswrite && resource.diskioread && resource.diskiowrite">
+            <a-tag style="margin-bottom: 5px;">Read {{ toSize(resource.diskkbsread) }}</a-tag>
+            <a-tag style="margin-bottom: 5px;">Write {{ toSize(resource.diskkbswrite) }}</a-tag><br/>
+            <a-tag style="margin-bottom: 5px;">Read (IO) {{ resource.diskioread }}</a-tag>
+            <a-tag>Write (IO) {{ resource.diskiowrite }}</a-tag>
           </div>
         </div>
         <div class="resource-detail-item" v-else-if="resource.disksizetotalgb">
           <div class="resource-detail-item__label">{{ $t('disksize') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="database" />{{ resource.disksizetotalgb }}
-            <span
-              v-if="resource.disksizeusedgb"
-              style="display: flex; padding-left: 25px">
-              {{ $t('disksizeusedgb') }}
+          </div>
+          <div>
+            <span v-if="resource.disksizeusedgb">
               <a-progress
                 class="progress-bar"
                 size="small"
                 status="active"
-                :percent="Number(parseFloat(100.0 * parseFloat(resource.disksizeusedgb) / parseFloat(resource.disksizetotalgb)).toFixed(2))" />
+                :percent="Number(parseFloat(100.0 * parseFloat(resource.disksizeusedgb) / parseFloat(resource.disksizetotalgb)).toFixed(2))"
+                :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('disksizeusedgb')" />
             </span>
-            <span
-              v-if="resource.disksizeallocatedgb"
-              style="display: flex; padding-left: 25px">
-              {{ $t('disksizeallocatedgb') }}
+            <span v-if="resource.disksizeallocatedgb">
               <a-progress
                 class="progress-bar"
                 size="small"
-                :percent="Number(parseFloat(100.0 * parseFloat(resource.disksizeallocatedgb) / parseFloat(resource.disksizetotalgb)).toFixed(2))" />
+                :percent="Number(parseFloat(100.0 * parseFloat(resource.disksizeallocatedgb) / parseFloat(resource.disksizetotalgb)).toFixed(2))"
+                :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('disksizeallocatedgb')" />
             </span>
           </div>
         </div>
@@ -314,7 +319,7 @@
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.serviceofferingname && resource.serviceofferingid">
-          <div class="resource-detail-item__label">{{ $t('serviceCapabilities') }}</div>
+          <div class="resource-detail-item__label">{{ $t('serviceofferingname') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="cloud" />
             <router-link :to="{ path: '/computeoffering/' + resource.serviceofferingid }">{{ resource.serviceofferingname || resource.serviceofferingid }} </router-link>
@@ -328,14 +333,14 @@
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.diskofferingname && resource.diskofferingid">
-          <div class="resource-detail-item__label">{{ $t('diskOffering') }}</div>
+          <div class="resource-detail-item__label">{{ $t('diskoffering') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="hdd" />
             <router-link :to="{ path: '/diskoffering/' + resource.diskofferingid }">{{ resource.diskofferingname || resource.diskofferingid }} </router-link>
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.networkofferingid">
-          <div class="resource-detail-item__label">{{ $t('networkofferingdisplaytext') }}</div>
+          <div class="resource-detail-item__label">{{ $t('networkofferingid') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="wifi" />
             <router-link :to="{ path: '/networkoffering/' + resource.networkofferingid }">{{ resource.networkofferingname || resource.networkofferingid }} </router-link>
@@ -349,7 +354,7 @@
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.storageid">
-          <div class="resource-detail-item__label">{{ $t('Storage') }}</div>
+          <div class="resource-detail-item__label">{{ $t('storagePool') }}</div>
           <div class="resource-detail-item__details">
             <a-icon type="database" />
             <router-link :to="{ path: '/storagepool/' + resource.storageid }">{{ resource.storage || resource.storageid }} </router-link>
@@ -873,6 +878,7 @@ export default {
   display: flex;
   flex-wrap: wrap;
   margin-top: 20px;
+  margin-bottom: -10px;
 
   .ant-tag {
     margin-right: 10px;
@@ -883,7 +889,8 @@ export default {
 }
 
 .progress-bar {
-  width: 75%;
+  padding-right: 60px;
+  width: 100%;
 }
 
 .status {
diff --git a/ui/src/components/widgets/OsLogo.vue b/ui/src/components/widgets/OsLogo.vue
index 8739cd169fe..783259a46d5 100644
--- a/ui/src/components/widgets/OsLogo.vue
+++ b/ui/src/components/widgets/OsLogo.vue
@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <a-tooltip placement="right">
+  <a-tooltip placement="bottom">
     <template slot="title">
       {{ name }}
     </template>
diff --git a/ui/src/locales/en.json b/ui/src/locales/en.json
index dac19f0f685..86d1684aca2 100644
--- a/ui/src/locales/en.json
+++ b/ui/src/locales/en.json
@@ -161,7 +161,7 @@
 "diskBytesWriteRate": "Disk Write Rate (BPS)",
 "diskIopsReadRate": "Disk Read Rate (IOPS)",
 "diskIopsWriteRate": "Disk Write Rate (IOPS)",
-"diskOffering": "Disk Offering",
+"diskoffering": "Disk Offering",
 "diskOfferingId": "Disk Offerings",
 "diskSize": "Disk Size (in GB)",
 "diskiopstotal": "IOPS",
@@ -855,10 +855,10 @@
 "service.StaticNat.associatePublicIP": "Associate Public IP",
 "service.StaticNat.elasticIpCheckbox": "Elastic IP",
 "serviceCapabilities": "Service Capabilities",
-"serviceOfferingId": "Compute offering",
+"serviceOfferingId": "Compute Offering",
 "servicelist": "Services",
-"serviceofferingid": "Compute offering",
-"serviceofferingname": "Compute offering",
+"serviceofferingid": "Compute Offering",
+"serviceofferingname": "Compute Offering",
 "settings": "Settings",
 "shareWith": "Share With",
 "shrinkok": "Shrink OK",
diff --git a/ui/src/views/compute/InstanceHardware.vue b/ui/src/views/compute/InstanceHardware.vue
index a2ff3b7b169..14a37d54eb5 100644
--- a/ui/src/views/compute/InstanceHardware.vue
+++ b/ui/src/views/compute/InstanceHardware.vue
@@ -17,8 +17,7 @@
 
 <template>
   <div>
-    <a-collapse v-model="activeKey">
-
+    <a-collapse v-model="activeKey" :bordered="false">
       <a-collapse-panel :header="'ISO: ' + vm.isoname" v-if="vm.isoid" key="1">
         <a-list
           itemLayout="horizontal">
@@ -72,7 +71,7 @@
                 <div class="label">{{ $t('size') }}</div>
                 <div>{{ (item.size / (1024 * 1024 * 1024.0)).toFixed(2) }} GB</div>
               </div>
-              <div class="attribute">
+              <div class="attribute" v-if="item.physicalsize">
                 <div class="label">{{ $t('physicalsize') }}</div>
                 <div>{{ (item.physicalsize / (1024 * 1024 * 1024.0)).toFixed(4) }} GB</div>
               </div>
@@ -117,13 +116,14 @@
                       @confirm="setAsDefault(item)"
                       okText="Yes"
                       cancelText="No"
+                      v-if="!item.isdefault"
                     >
                       <a-button
-                        icon="arrow-right"
+                        icon="check-square"
                         size="small"
                         shape="round" />
                     </a-popconfirm>
-                    <a-tooltip placement="right" v-if="item.type !== 'L2'">
+                    <a-tooltip placement="bottom" v-if="item.type !== 'L2'">
                       <template slot="title">
                         {{ "Change IP Address" }}
                       </template>
@@ -133,7 +133,7 @@
                         shape="round"
                         @click="editIpAddressNic = item.id; showUpdateIpModal = true" />
                     </a-tooltip>
-                    <a-tooltip placement="right" v-if="item.type !== 'L2'">
+                    <a-tooltip placement="bottom" v-if="item.type !== 'L2'">
                       <template slot="title">
                         {{ "Manage Secondary IP Addresses" }}
                       </template>
@@ -184,7 +184,7 @@
                 <div class="label">{{ $t('IP Address') }}</div>
                 <div>{{ item.ipaddress }}</div>
               </div>
-              <div class="attribute" v-if="item.secondaryip && item.type !== 'L2'">
+              <div class="attribute" v-if="item.secondaryip && item.secondaryip.length > 0 && item.type !== 'L2'">
                 <div class="label">{{ $t('Secondary IPs') }}</div>
                 <div>{{ item.secondaryip.map(x => x.ipaddress).join(', ') }}</div>
               </div>
@@ -701,7 +701,6 @@ export default {
     a {
       margin-right: 30px;
       margin-bottom: 10px;
-      font-weight: bold;
     }
 
     .ant-tag {