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 ffa2f49 listview: implement quickview equivalent from table
ffa2f49 is described below
commit ffa2f49d9e8f208a5184aae4194f0470ec15d752
Author: Rohit Yadav <rohit.ya...@shapeblue.com>
AuthorDate: Fri Dec 20 11:23:56 2019 +0530
listview: implement quickview equivalent from table
Signed-off-by: Rohit Yadav <rohit.ya...@shapeblue.com>
---
src/components/view/InfoCard.vue | 2 ++
src/components/view/ListView.vue | 54 +++++++++++++++++++++++++++------------
src/components/widgets/Status.vue | 5 +++-
3 files changed, 43 insertions(+), 18 deletions(-)
diff --git a/src/components/view/InfoCard.vue b/src/components/view/InfoCard.vue
index b8f4ab5..7b9e404 100644
--- a/src/components/view/InfoCard.vue
+++ b/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">
diff --git a/src/components/view/ListView.vue b/src/components/view/ListView.vue
index 337e132..781cfa5 100644
--- a/src/components/view/ListView.vue
+++ b/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;
}
diff --git a/src/components/widgets/Status.vue
b/src/components/widgets/Status.vue
index 54dcc5f..faa7dc2 100644
--- a/src/components/widgets/Status.vue
+++ b/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
