From 55548df592df91bdbe05f85f6294932f5fe0bc50 Mon Sep 17 00:00:00 2001
From: Rohit Yadav <rohit.yadav@shapeblue.com>
Date: Fri, 11 Oct 2019 13:38:41 +0530
Subject: [PATCH] views: fix autogen view, use loading and remove old dataview
 component

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 ui/src/components/widgets/DataView.vue | 46 --------------------------
 ui/src/views/AutogenView.vue           |  9 +++--
 ui/src/views/common/DetailView.vue     | 11 ++++--
 ui/src/views/common/InfoCard.vue       |  7 +++-
 4 files changed, 18 insertions(+), 55 deletions(-)
 delete mode 100644 ui/src/components/widgets/DataView.vue

diff --git a/ui/src/components/widgets/DataView.vue b/ui/src/components/widgets/DataView.vue
deleted file mode 100644
index 1dca44ae0d5..00000000000
--- a/ui/src/components/widgets/DataView.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <a-row :gutter="12">
-    <a-col :xl="12">
-      <chart-card class="info-card" v-if="resource.name">
-        <h4>Name</h4>
-        <template slot="footer"><span>{{ resource.name }}</span></template>
-      </chart-card>
-    </a-col>
-    <a-col :xl="12">
-      <chart-card class="info-card" v-if="resource.id">
-        <h4>ID</h4>
-        <template slot="footer"><span>{{ resource.id }}</span></template>
-      </chart-card>
-    </a-col>
-    <a-col :xl="6" v-for="(value, key) in resource" :key="key">
-      <chart-card class="info-card" v-if="key !== 'id' && key !== 'name'">
-        <h4>{{ key }}</h4>
-        <template slot="footer"><span>{{ value }}</span></template>
-      </chart-card>
-    </a-col>
-  </a-row>
-</template>
-
-<script>
-
-import ChartCard from '@/components/chart/ChartCard'
-
-export default {
-  name: 'DataView',
-  components: {
-    ChartCard
-  },
-  props: {
-    resource: {
-      type: Object,
-      required: true
-    }
-  }
-}
-</script>
-
-<style>
-.info-card {
-  margin-top: 12px;
-}
-</style>
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index e7c38216499..a23a111c9c1 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -167,8 +167,8 @@
     </div>
 
     <div v-if="dataView">
-      <component :is="$route.meta.viewComponent" :resource="resource" v-if="$route.meta.viewComponent"/></component>
-      <detail-view :resource="resource" v-else />
+      <component :is="$route.meta.viewComponent" :resource="resource" :loading="loading" v-if="$route.meta.viewComponent"/></component>
+      <detail-view :resource="resource" :loading="loading" v-else />
     </div>
     <div class="row-element" v-else>
       <list-view
@@ -202,10 +202,9 @@ import store from '@/store'
 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 DetailView from '@/views/common/DetailView'
 import ListView from '@/components/widgets/ListView'
 import Status from '@/components/widgets/Status'
-import DetailView from '@/views/common/DetailView'
 
 export default {
   name: 'Resource',
@@ -213,7 +212,6 @@ export default {
     Breadcrumb,
     CardView,
     ChartCard,
-    DataView,
     DetailView,
     ListView,
     Status
@@ -285,6 +283,7 @@ export default {
       }
 
       if (this.$route && this.$route.params && this.$route.params.id) {
+        this.resource = {}
         this.dataView = true
       } else {
         this.dataView = false
diff --git a/ui/src/views/common/DetailView.vue b/ui/src/views/common/DetailView.vue
index 4c24ba794a1..706e6c26dd4 100644
--- a/ui/src/views/common/DetailView.vue
+++ b/ui/src/views/common/DetailView.vue
@@ -3,7 +3,7 @@
     <a-row :gutter="12">
       <a-col :md="24" :lg="8" style="margin-bottom: 12px">
         <slot name="info-card">
-          <info-card :resource="resource" />
+          <info-card :resource="resource" :loading="loading" />
         </slot>
       </a-col>
       <a-col :md="24" :lg="16">
@@ -12,11 +12,12 @@
           title="Details"
           :bordered="true"
         >
+          <a-skeleton active v-if="loading" />
           <a-card-grid
-            style="width:33.33%; textAlign:'center'"
+            style="width:50%; textAlign:'center'"
             :key="key"
             v-for="(value, key) in resource"
-            v-if="key !== 'key' && key !== 'tags'">
+            v-if="!loading && key !== 'key' && key !== 'tags'">
             <strong>{{ $t(key) }}</strong><br/>{{ value }}
           </a-card-grid>
         </a-card>
@@ -52,6 +53,10 @@ export default {
     resource: {
       type: Object,
       required: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
diff --git a/ui/src/views/common/InfoCard.vue b/ui/src/views/common/InfoCard.vue
index 566a9e9202f..ca3def5dccc 100644
--- a/ui/src/views/common/InfoCard.vue
+++ b/ui/src/views/common/InfoCard.vue
@@ -1,6 +1,7 @@
 <template>
   <a-card :bordered="true">
-    <div class="resource-details">
+    <a-skeleton active v-if="loading" />
+    <div v-else class="resource-details">
       <div class="avatar">
         <slot name="avatar">
           <a-icon style="font-size: 36px" :type="$route.meta.icon" />
@@ -185,6 +186,10 @@ export default {
     resource: {
       type: Object,
       required: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   data () {