autogenview: show spinner on refreshing/loading

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

ui/src/components/view/InfoCard.vue

@@ -16,9 +16,9 @@
 // under the License.
 
 <template>
-  <a-card :bordered="true" :title="title">
-    <a-skeleton active v-if="loading" />
-    <div v-else>
+  <a-spin :spinning="loading">
+    <a-card class="spin-content" :bordered="true" :title="title">
+      <div>
         <div class="resource-details">
           <div class="avatar">
             <slot name="avatar">
@@ -383,6 +383,7 @@
         </a-comment>
       </div>
     </a-card>
+  </a-spin>
 </template>
 
 <script>
@@ -491,7 +492,7 @@ export default {
       })
     },
     getTags () {
-      if (!('listTags' in this.$store.getters.apis)) {
+      if (!('listTags' in this.$store.getters.apis) || !this.resource || !this.resource.id) {
         return
       }
       this.tags = []

ui/src/components/view/ResourceView.vue

@@ -22,13 +22,12 @@
         <info-card :resource="resource" :loading="loading" />
       </slot>
     </div>
-    <div slot="right">
+    <a-spin :spinning="loading" slot="right">
       <a-card
+        class="spin-content"
         :bordered="true"
         style="width:100%">
-        <a-skeleton active v-if="loading" />
         <a-tabs
-          v-else
           style="width: 100%"
           :animated="false"
           :defaultActiveKey="tabs[0].name"
@@ -41,7 +40,7 @@
           </a-tab-pane>
         </a-tabs>
       </a-card>
-    </div>
+    </a-spin>
   </resource-layout>
 </template>
 

ui/src/views/AutogenView.vue

@@ -285,6 +285,7 @@ export default {
       this.actions = []
       this.columns = []
       this.columnKeys = []
+      this.items = []
       var params = { listall: true }
       if (Object.keys(this.$route.query).length > 0) {
         Object.assign(params, this.$route.query)

ui/src/views/compute/InstanceHardware.vue

@@ -144,6 +144,9 @@ export default {
   methods: {
     fetchData () {
       this.volumes = []
+      if (!this.vm || !this.vm.id) {
+        return
+      }
       api('listVolumes', { 'listall': true, 'virtualmachineid': this.vm.id }).then(json => {
         this.volumes = json.listvolumesresponse.volume
         if (this.volumes) {