settings: simplify instance/template settings tab component
Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
diff --git a/src/components/view/SettingTable.vue b/src/components/view/SettingTable.vue
index f1d48da..315c889 100644
--- a/src/components/view/SettingTable.vue
+++ b/src/components/view/SettingTable.vue
@@ -16,39 +16,33 @@
// under the License.
<template>
- <a-table
- size="small"
- :scroll="{ x: 'true' }"
- :loading="loading"
- :columns="columns"
- :dataSource="items"
- :rowKey="record => record.id || record.name || record.key"
- :pagination="false"
- :rowClassName="getRowClassName"
- bordered
- >
- <template slot="value" slot-scope="text, record">
- <span style="float: left; margin-right: 5px" v-if="record">
- <a-button size="small" shape="circle">
- <a-icon type="close" />
- </a-button>
- <a-button size="small" shape="circle">
- <a-icon type="edit" />
- </a-button>
- </span>
- <span>{{ text }}</span>
- </template>
- </a-table>
+ <div>
+ <a-button type="dashed" style="width: 100%" icon="plus" @click="addSettingForm()">Add Setting</a-button>
+ <a-list size="large">
+ <a-list-item :key="index" v-for="(item, index) in items">
+ <a-list-item-meta>
+ <span slot="title">{{ item.name }}</span>
+ <span slot="description" style="word-break: break-all">{{ item.value }}</span>
+ </a-list-item-meta>
+ <div slot="actions">
+ <a-button size="small" shape="circle">
+ <a-icon type="edit" />
+ </a-button>
+ </div>
+ <div slot="actions">
+ <a-button size="small" shape="circle">
+ <a-icon type="close" />
+ </a-button>
+ </div>
+ </a-list-item>
+ </a-list>
+ </div>
</template>
<script>
export default {
name: 'SettingTable',
props: {
- columns: {
- type: Array,
- required: true
- },
items: {
type: Array,
required: true
@@ -63,26 +57,12 @@
}
},
methods: {
- getRowClassName (record, index) {
- if (index % 2 === 0) {
- return 'light-row'
- }
- return 'dark-row'
+ addSettingForm () {
+ console.log('Add setting button clicked')
}
}
}
</script>
<style scoped>
-/deep/ .ant-table-thead {
- background-color: #f9f9f9;
-}
-
-/deep/ .light-row {
- background-color: #fff;
-}
-
-/deep/ .dark-row {
- background-color: #f9f9f9;
-}
</style>
diff --git a/src/views/compute/InstanceSettings.vue b/src/views/compute/InstanceSettings.vue
index 1790a84..9587e3a 100644
--- a/src/views/compute/InstanceSettings.vue
+++ b/src/views/compute/InstanceSettings.vue
@@ -17,22 +17,9 @@
<template>
<div>
- <a-button style="margin-bottom: 15px; float: right">
- Add Setting
- </a-button>
<setting-table
- :columns="[{
- title: $t('name'),
- dataIndex: 'name',
- width: '40%'
- },{
- title: $t('value'),
- dataIndex: 'value',
- width: '40%',
- scopedSlots: { customRender: 'value' }
- }]"
- :items="Object.keys(resource.details).map(k => { return { name: k, value: resource.details[k] } })"
:loading="loading"
+ :items="Object.keys(resource.details).map(k => { return { name: k, value: resource.details[k] } })"
>
</setting-table>
</div>
