views: fix watchers and don't call APIs many times

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

ui/src/views/common/InfoCard.vue

@@ -133,8 +133,8 @@
             :percent="Number(parseFloat(100.0 * (resource.memoryallocated) / resource.memorytotal).toFixed(2))" />
         </span>
       </div>
-      <div class="resource-detail-item" v-if="totalStorage">
-        <a-icon type="hdd" />{{ (totalStorage / (1024 * 1024 * 1024.0)).toFixed(2) }} GB Storage
+      <div class="resource-detail-item" v-if="resource.volumes">
+        <a-icon type="hdd" />{{ (resource.volumes.reduce((total, item) => total += item.size, 0) / (1024 * 1024 * 1024.0)).toFixed(2) }} GB Storage
         <div style="margin-left: 25px" v-if="resource.diskkbsread && resource.diskkbswrite && resource.diskioread && resource.diskiowrite">
           <a-tag>Read {{ toSize(resource.diskkbsread) }}</a-tag>
           <a-tag>Write {{ toSize(resource.diskkbswrite) }}</a-tag><br/>
@@ -397,9 +397,11 @@ export default {
   },
   watch: {
     resource: function (newItem, oldItem) {
-      console.log('reosurce changed in info-card')
-      console.log(newItem)
       this.resource = newItem
+      if (newItem.id === oldItem.id) {
+        return
+      }
+
       this.resourceType = this.$route.meta.resourceType
       this.annotationType = ''
       this.showKeys = false
@@ -434,11 +436,6 @@ export default {
       }
     }
   },
-  computed: {
-    totalStorage: function () {
-      return this.resource.totalStorage
-    }
-  },
   methods: {
     toSize (kb) {
       if (!kb) {

ui/src/views/common/ResourceView.vue

@@ -2,7 +2,7 @@
   <resource-layout>
     <div slot="left">
       <slot name="info-card">
-        <info-card :key="resource.totalStorage || resource.name || resource.id" :resource="resource" :loading="loading" @resourceChange="resourceChange" />
+        <info-card :resource="resource" :loading="loading" />
       </slot>
     </div>
     <div slot="right">
@@ -19,7 +19,7 @@
             v-for="tab in tabs"
             :tab="$t(tab.name)"
             :key="tab.name">
-            <component :is="tab.component" :resource="resource" :loading="loading" @resourceChange="resourceChange" />
+            <component :is="tab.component" :resource="resource" :loading="loading" />
           </a-tab-pane>
         </a-tabs>
       </a-card>
@@ -58,38 +58,9 @@ export default {
       }
     }
   },
-  data () {
-    return {
-      settingsColumns: [
-        {
-          title: this.$t('name'),
-          dataIndex: 'name',
-          sorter: true
-        }, {
-          title: this.$t('value'),
-          dataIndex: 'value'
-        }, {
-          title: this.$t('action'),
-          dataIndex: 'actions'
-        }
-      ],
-      settings: []
-    }
-  },
-  watch: {
-    '$route' (to, from) {
-      console.log(this.resource)
-    },
-    resource: function (newItem, oldItem) {
-      this.resource = newItem
-    }
-  },
   methods: {
     onTabChange (key) {
       this.activeTab = key
-    },
-    resourceChange (newResource) {
-      this.resource = newResource
     }
   }
 }

ui/src/views/compute/InstanceHardware.vue

@@ -122,6 +122,9 @@ export default {
   watch: {
     resource: function (newItem, oldItem) {
       this.vm = newItem
+      if (newItem.id === oldItem.id) {
+        return
+      }
       this.fetchData()
     }
   },
@@ -133,13 +136,7 @@ export default {
         if (this.volumes) {
           this.volumes.sort((a, b) => { return a.deviceid - b.deviceid })
         }
-        this.totalStorage = 0
-        for (var volume of this.volumes) {
-          this.totalStorage += volume.size
-        }
-        this.resource.volumes = this.volumes
-        this.resource.totalStorage = this.totalStorage
-        this.$emit('resourceChange', this.resource)
+        this.$set(this.resource, 'volumes', this.volumes)
       })
     }
   }