listview: implement quickview equivalent from table

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

ui/src/components/view/InfoCard.vue

@@ -51,6 +51,8 @@
                 {{ $t('isdynamicallyscalable') }}
               </a-tag>
             </slot>
+            <slot name="actions">
+            </slot>
           </div>
         </div>
         <div class="resource-detail-item" style="margin-bottom: 4px" v-if="resource.state || resource.status">

ui/src/components/view/ListView.vue

@@ -17,7 +17,7 @@
 
 <template>
   <a-table
-    size="middle"
+    size="small"
     :loading="loading"
     :columns="columns"
     :dataSource="items"
@@ -25,6 +25,7 @@
     :pagination="false"
     :rowSelection="['vm', 'event', 'alert'].includes($route.name) ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange} : null"
     :rowClassName="getRowClassName"
+    style="overflow-y: auto"
   >
     <template slot="footer">
       <span v-if="hasSelected">
@@ -32,8 +33,35 @@
       </span>
     </template>
 
+    <div slot="expandedRowRender" slot-scope="resource">
+      <info-card :resource="resource" style="margin-right: 50px">
+        <div slot="actions" style="padding-top: 12px">
+          <a-tooltip
+            v-for="(action, actionIndex) in $route.meta.actions"
+            :key="actionIndex"
+            placement="bottom">
+            <template slot="title">
+              {{ $t(action.label) }}
+            </template>
+            <a-button
+              v-if="action.api in $store.getters.apis && action.dataView &&
+                ('show' in action ? action.show(resource) : true)"
+              :icon="action.icon"
+              :type="action.icon === 'delete' ? 'danger' : (action.icon === 'plus' ? 'primary' : 'default')"
+              shape="round"
+              size="small"
+              style="margin-right: 5px; margin-top: 12px"
+              @click="$parent.execAction(action)"
+            >
+              {{ $t(action.label) }}
+            </a-button>
+          </a-tooltip>
+        </div>
+      </info-card>
+    </div>
+
     <a slot="name" slot-scope="text, record" href="javascript:;">
-      <div style="min-width: 150px; padding-left: 5px">
+      <div style="min-width: 120px">
         <span v-if="$route.path.startsWith('/project')" style="margin-right: 5px">
           <a-button type="dashed" size="small" shape="circle" icon="login" @click="changeProject(record)" />
         </span>
@@ -41,20 +69,6 @@
         <router-link :to="{ path: $route.path + '/' + record.id }" v-if="record.id">{{ text }}</router-link>
         <router-link :to="{ path: $route.path + '/' + record.name }" v-else>{{ text }}</router-link>
       </div>
-      <div v-if="$route.meta.related" style="padding-top: 10px; padding-left: 5px; display: inline-flex">
-        <span v-for="item in $route.meta.related" :key="item.path">
-          <router-link
-            v-if="$router.resolve('/' + item.name).route.name !== '404'"
-            :to="{ path: '/' + item.name + '?' + item.param + '=' + (item.param === 'account' ? record.name + '&domainid=' + record.domainid : record.id) }">
-            <a-tooltip placement="bottom">
-              <template slot="title">
-                View {{ $t(item.title) }}
-              </template>
-              <a-button size="small" shape="round" :icon="$router.resolve('/' + item.name).route.meta.icon" />
-            </a-tooltip>
-          </router-link>
-        </span>
-      </div>
     </a>
     <a slot="displayname" slot-scope="text, record" href="javascript:;">
       <router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
@@ -140,12 +154,14 @@
 import { api } from '@/api'
 import Console from '@/components/widgets/Console'
 import Status from '@/components/widgets/Status'
+import InfoCard from '@/components/view/InfoCard'
 
 export default {
   name: 'ListView',
   components: {
     Console,
-    Status
+    Status,
+    InfoCard
   },
   props: {
     columns: {
@@ -223,6 +239,10 @@ export default {
   background-color: #f9f9f9;
 }
 
+/deep/ .ant-table-small > .ant-table-content > .ant-table-body {
+  margin: 0;
+}
+
 /deep/ .light-row {
   background-color: #fff;
 }

ui/src/components/widgets/Status.vue

@@ -52,19 +52,21 @@ export default {
         case 'Ready':
         case 'Up':
         case 'BackedUp':
-        case 'Allocated':
         case 'Implemented':
         case 'Enabled':
         case 'enabled':
         case 'Active':
         case 'Completed':
         case 'Started':
+        case 'Download Complete':
+        case 'Successfully Installed':
           status = 'success'
           break
         case 'Disabled':
         case 'Down':
         case 'Error':
         case 'Stopped':
+        case 'Disconnected':
           status = 'error'
           break
         case 'Migrating':
@@ -74,6 +76,7 @@ export default {
           status = 'processing'
           break
         case 'Alert':
+        case 'Allocated':
         case 'Created':
           status = 'warning'
           break