components: Adding quick-view options to list view (#458)

Fixes #449

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

ui/src/components/view/ActionButton.vue

@@ -17,7 +17,7 @@
 
 <template>
   <span class="row-action-button">
-    <console :resource="resource" size="default" v-if="resource && resource.id && dataView" />
+    <console :resource="resource" :size="size" v-if="resource && resource.id && dataView" />
     <a-tooltip
       v-for="(action, actionIndex) in actions"
       :key="actionIndex"
@@ -40,6 +40,7 @@
           :type="action.icon === 'delete' ? 'danger' : (action.icon === 'plus' ? 'primary' : 'default')"
           :shape="!dataView && action.icon === 'plus' ? 'round' : 'circle'"
           style="margin-left: 5px"
+          :size="size"
           @click="execAction(action)">
           <span v-if="!dataView && action.icon === 'plus'">
             {{ $t(action.label) }}
@@ -56,6 +57,7 @@
         :type="action.icon === 'delete' ? 'danger' : (action.icon === 'plus' ? 'primary' : 'default')"
         :shape="!dataView && action.icon === 'plus' ? 'round' : 'circle'"
         style="margin-left: 5px"
+        :size="size"
         @click="execAction(action)">
         <span v-if="!dataView && action.icon === 'plus'">
           {{ $t(action.label) }}
@@ -108,6 +110,10 @@ export default {
     loading: {
       type: Boolean,
       default: false
+    },
+    size: {
+      type: String,
+      default: 'default'
     }
   },
   watch: {

ui/src/components/view/ListView.vue

@@ -17,9 +17,9 @@
 
 <template>
   <a-table
-    size="small"
+    size="middle"
     :loading="loading"
-    :columns="fetchColumns()"
+    :columns="isOrderUpdatable() ? columns : columns.filter(x => x.dataIndex !== 'order')"
     :dataSource="items"
     :rowKey="record => record.id || record.name || record.usageType"
     :pagination="false"
@@ -61,12 +61,17 @@
     -->
 
     <span slot="name" slot-scope="text, record">
-      <div style="min-width: 120px">
+      <div style="min-width: 120px" >
+        <QuickView
+          style="margin-left: 5px"
+          :actions="actions"
+          :resource="record"
+          :enabled="quickViewEnabled() && actions.length > 0 && columns && columns[0].dataIndex === 'name' "
+          @exec-action="$parent.execAction"/>
         <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>
         <os-logo v-if="record.ostypename" :osName="record.ostypename" size="1x" style="margin-right: 5px" />
-        <console :resource="record" size="small" style="margin-right: 5px" />
 
         <span v-if="$route.path.startsWith('/globalsetting')">{{ text }}</span>
         <span v-if="$route.path.startsWith('/alert')">
@@ -276,6 +281,7 @@ import Console from '@/components/widgets/Console'
 import OsLogo from '@/components/widgets/OsLogo'
 import Status from '@/components/widgets/Status'
 import InfoCard from '@/components/view/InfoCard'
+import QuickView from '@/components/view/QuickView'
 
 export default {
   name: 'ListView',
@@ -283,7 +289,8 @@ export default {
     Console,
     OsLogo,
     Status,
-    InfoCard
+    InfoCard,
+    QuickView
   },
   props: {
     columns: {
@@ -297,6 +304,10 @@ export default {
     loading: {
       type: Boolean,
       default: false
+    },
+    actions: {
+      type: Array,
+      default: () => []
     }
   },
   inject: ['parentFetchData', 'parentToggleLoading', 'parentEditTariffAction'],
@@ -313,6 +324,16 @@ export default {
     }
   },
   methods: {
+    quickViewEnabled () {
+      return new RegExp(['/vm', '/kubernetes', '/ssh', '/vmgroup', '/affinitygroup',
+        '/volume', '/snapshot', '/backup',
+        '/guestnetwork', '/vpc', '/vpncustomergateway',
+        '/template', '/iso',
+        '/project', '/account',
+        '/zone', '/pod', '/cluster', '/host', '/storagepool', '/imagestore', '/systemvm', '/router', '/ilbvm',
+        '/computeoffering', '/systemoffering', '/diskoffering', '/backupoffering', '/networkoffering', '/vpcoffering'].join('|'))
+        .test(this.$route.path)
+    },
     fetchColumns () {
       if (this.isOrderUpdatable()) {
         return this.columns

ui/src/components/view/QuickView.vue

@@ -0,0 +1,85 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <a-popover v-if="enabled && actionsExist" triggers="hover" placement="topLeft">
+    <template slot="content">
+      <action-button
+        :size="size"
+        :actions="actions"
+        :dataView="true"
+        :resource="resource"
+        @exec-action="execAction" />
+    </template>
+    <a-button shape="circle" size="small" icon="more" style="float: right; background-color: transparent; border-color: transparent"/>
+  </a-popover>
+</template>
+
+<script>
+import ActionButton from '@/components/view/ActionButton'
+
+export default {
+  name: 'QuickView',
+  components: {
+    ActionButton
+  },
+  props: {
+    actions: {
+      type: Array,
+      default: () => []
+    },
+    enabled: {
+      type: Boolean,
+      default: true
+    },
+    size: {
+      type: String,
+      default: 'default'
+    },
+    resource: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  watch: {
+    actions (item) {
+      this.actionsExist = this.doActionsExist()
+    }
+  },
+  data () {
+    return {
+      actionsExist: false
+    }
+  },
+  mounted () {
+    this.actionsExist = this.doActionsExist()
+  },
+  methods: {
+    execAction (action) {
+      this.$emit('exec-action', action)
+    },
+    doActionsExist () {
+      return this.actions.filter(x =>
+        x.api in this.$store.getters.apis &&
+        ('show' in x ? x.show(this.resource, this.$store.getters) : true) &&
+        x.dataView).length > 0
+    }
+  }
+}
+</script>

ui/src/config/section/storage.js

@@ -301,7 +301,7 @@ export default {
       permission: ['listVMSnapshot'],
       resourceType: 'VMSnapshot',
       columns: () => {
-        var fields = ['displayname', 'state', 'type', 'current', 'parentName', 'created']
+        var fields = ['name', 'state', 'type', 'current', 'parentName', 'created']
         if (['Admin', 'DomainAdmin'].includes(store.getters.userInfo.roletype)) {
           fields.push('account')
         }

ui/src/views/AutogenView.vue

@@ -296,6 +296,7 @@
         :loading="loading"
         :columns="columns"
         :items="items"
+        :actions="actions"
         ref="listview"
         @selection-change="onRowSelectionChange"
         @refresh="this.fetchData" />
@@ -639,6 +640,8 @@ export default {
       }
       this.currentAction = action
       this.currentAction.params = store.getters.apis[this.currentAction.api].params
+      this.resource = action.resource
+      this.$emit('change-resource', this.resource)
       var paramFields = this.currentAction.params
       paramFields.sort(function (a, b) {
         if (a.name === 'name' && b.name !== 'name') { return -1 }