mirror of
https://github.com/apache/cloudstack.git
synced 2025-11-03 04:12:31 +01:00
src: new resource details settings tab for vm and templates
Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
This commit is contained in:
Rohit Yadav
parent
db7265a1f7
commit
bb9ab291df
@ -29,8 +29,9 @@
|
||||
<a-skeleton active v-if="loading" />
|
||||
<a-tabs
|
||||
v-else
|
||||
:defaultActiveKey="tabs[0].name"
|
||||
style="width: 100%"
|
||||
:animated="false"
|
||||
:defaultActiveKey="tabs[0].name"
|
||||
@change="onTabChange" >
|
||||
<a-tab-pane
|
||||
v-for="tab in tabs"
|
||||
|
||||
88
ui/src/components/view/SettingTable.vue
Normal file
88
ui/src/components/view/SettingTable.vue
Normal file
@ -0,0 +1,88 @@
|
||||
// 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-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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SettingTable',
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
items: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getRowClassName (record, index) {
|
||||
if (index % 2 === 0) {
|
||||
return 'light-row'
|
||||
}
|
||||
return 'dark-row'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/deep/ .ant-table-thead {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
/deep/ .light-row {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/deep/ .dark-row {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
@ -50,7 +50,7 @@ export default {
|
||||
component: () => import('@/views/compute/InstanceHardware.vue')
|
||||
}, {
|
||||
name: 'settings',
|
||||
component: () => import('@/views/setting/ResourceSettingsTab.vue')
|
||||
component: () => import('@/views/compute/InstanceSettings.vue')
|
||||
}],
|
||||
actions: [
|
||||
{
|
||||
|
||||
@ -29,6 +29,16 @@ export default {
|
||||
params: { 'templatefilter': 'executable' },
|
||||
columns: ['name', 'ostypename', 'status', 'hypervisor', 'account', 'domain'],
|
||||
details: ['name', 'id', 'displaytext', 'checksum', 'hypervisor', 'format', 'ostypename', 'size', 'isready', 'passwordenabled', 'directdownload', 'isextractable', 'isdynamicallyscalable', 'ispublic', 'isfeatured', 'crosszones', 'type', 'account', 'domain', 'created'],
|
||||
tabs: [{
|
||||
name: 'details',
|
||||
component: () => import('@/components/view/DetailsTab.vue')
|
||||
}, {
|
||||
name: 'zones',
|
||||
component: () => import('@/views/image/TemplateZones.vue')
|
||||
}, {
|
||||
name: 'settings',
|
||||
component: () => import('@/views/image/TemplateSettings.vue')
|
||||
}],
|
||||
actions: [
|
||||
{
|
||||
api: 'registerTemplate',
|
||||
|
||||
60
ui/src/views/compute/InstanceSettings.vue
Normal file
60
ui/src/views/compute/InstanceSettings.vue
Normal file
@ -0,0 +1,60 @@
|
||||
// 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>
|
||||
<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"
|
||||
>
|
||||
</setting-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SettingTable from '@/components/view/SettingTable'
|
||||
|
||||
export default {
|
||||
name: 'SettingsTab',
|
||||
components: {
|
||||
SettingTable
|
||||
},
|
||||
props: {
|
||||
resource: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
60
ui/src/views/image/TemplateSettings.vue
Normal file
60
ui/src/views/image/TemplateSettings.vue
Normal file
@ -0,0 +1,60 @@
|
||||
// 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>
|
||||
<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"
|
||||
>
|
||||
</setting-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SettingTable from '@/components/view/SettingTable'
|
||||
|
||||
export default {
|
||||
name: 'SettingsTab',
|
||||
components: {
|
||||
SettingTable
|
||||
},
|
||||
props: {
|
||||
resource: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
41
ui/src/views/image/TemplateZones.vue
Normal file
41
ui/src/views/image/TemplateZones.vue
Normal file
@ -0,0 +1,41 @@
|
||||
// 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>
|
||||
<div>
|
||||
TODO: list of zones and the zone specific status?
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'TemplateZones',
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
resource: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user