This is an automated email from the ASF dual-hosted git repository.
rohit pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/cloudstack-primate.git
The following commit(s) were added to refs/heads/master by this push:
new 41aa289 components: Adding quick-view options to list view (#458)
41aa289 is described below
commit 41aa289778aafe0d5d49d31566c78a5c1ea438b3
Author: davidjumani <dj.davidjumani1...@gmail.com>
AuthorDate: Wed Jul 29 16:12:52 2020 +0530
components: Adding quick-view options to list view (#458)
Fixes #449
Signed-off-by: Rohit Yadav <rohit.ya...@shapeblue.com>
---
src/components/view/ActionButton.vue | 8 +++-
src/components/view/ListView.vue | 31 ++++++++++---
src/components/view/QuickView.vue | 85 ++++++++++++++++++++++++++++++++++++
src/config/section/storage.js | 2 +-
src/views/AutogenView.vue | 3 ++
5 files changed, 122 insertions(+), 7 deletions(-)
diff --git a/src/components/view/ActionButton.vue
b/src/components/view/ActionButton.vue
index 6aa57a8..66b88ec 100644
--- a/src/components/view/ActionButton.vue
+++ b/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: {
diff --git a/src/components/view/ListView.vue b/src/components/view/ListView.vue
index fe0740d..4f12eea 100644
--- a/src/components/view/ListView.vue
+++ b/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
diff --git a/src/components/view/QuickView.vue
b/src/components/view/QuickView.vue
new file mode 100644
index 0000000..05ffe3d
--- /dev/null
+++ b/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>
diff --git a/src/config/section/storage.js b/src/config/section/storage.js
index cea2de4..3ff5b26 100644
--- a/src/config/section/storage.js
+++ b/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')
}
diff --git a/src/views/AutogenView.vue b/src/views/AutogenView.vue
index 0cdad0f..c60706c 100644
--- a/src/views/AutogenView.vue
+++ b/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 }
