component: UI-wide detail view with new layout and info-card

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

ui/src/config/section/storage.js

@@ -8,7 +8,6 @@ export default {
       title: 'Volumes',
       icon: 'hdd',
       permission: [ 'listVolumesMetrics', 'listVolumes' ],
-      viewComponent: () => import('@/views/common/DetailView.vue'),
       columns: ['name', 'state', 'type', 'vmname', 'size', 'physicalsize', 'utilization', 'diskkbsread', 'diskkbswrite', 'diskiopstotal', 'storage', 'account', 'zonename'],
       hidden: ['storage', 'utilization'],
       actions: [

ui/src/views/AutogenView.vue

@@ -168,7 +168,7 @@
 
     <div v-if="dataView">
       <component :is="$route.meta.viewComponent" :resource="resource" v-if="$route.meta.viewComponent"/></component>
-      <data-view :resource="resource" v-else />
+      <detail-view :resource="resource" v-else />
     </div>
     <div class="row-element" v-else>
       <list-view
@@ -205,6 +205,7 @@ import ChartCard from '@/components/chart/ChartCard'
 import DataView from '@/components/widgets/DataView'
 import ListView from '@/components/widgets/ListView'
 import Status from '@/components/widgets/Status'
+import DetailView from '@/views/common/DetailView'
 
 export default {
   name: 'Resource',
@@ -213,6 +214,7 @@ export default {
     CardView,
     ChartCard,
     DataView,
+    DetailView,
     ListView,
     Status
   },

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" resourceType="Volume" />
+          <info-card :resource="resource" />
         </slot>
       </a-col>
       <a-col :md="24" :lg="16">

ui/src/views/common/InfoCard.vue

@@ -88,9 +88,8 @@
       </div>
     </div>
 
-    <a-divider/>
-
-    <div class="account-center-tags" v-if="showTags">
+    <div class="account-center-tags" v-if="resourceType">
+      <a-divider/>
       <div class="tagsTitle">Tags</div>
       <div>
         <template v-for="(tag, index) in tags">
@@ -123,9 +122,8 @@
       </div>
     </div>
 
-    <a-divider :dashed="true"/>
-
     <div class="account-center-team" v-if="showNotes">
+      <a-divider :dashed="true"/>
       <div class="teamTitle">
         Comments ({{ notes.length }})
       </div>
@@ -191,10 +189,6 @@ export default {
       type: String,
       required: true
     },
-    showTags: {
-      type: Boolean,
-      default: true
-    },
     showNotes: {
       type: Boolean,
       default: false