mirror of https://github.com/apache/cloudstack.git
Change resource settings tab to be type based (#10596)
Co-authored-by: Lucas Martins <lucas.martins@scclouds.com.br>
This commit is contained in:
Lucas Martins
GitHub
parent
8af021c6f6
commit
8d18c1e788
|
|
@ -17,71 +17,27 @@
|
|||
|
||||
<template>
|
||||
<div>
|
||||
<a-input-search
|
||||
style="width: 25vw;float: right;margin-bottom: 10px; z-index: 8;"
|
||||
:placeholder="$t('label.search')"
|
||||
v-model:value="filter"
|
||||
@search="handleSearch" />
|
||||
|
||||
<a-list size="large" class="list" :loading="loading || tabLoading">
|
||||
<a-list-item :key="index" v-for="(item, index) in items" class="item">
|
||||
<a-list-item-meta>
|
||||
<template #title style="word-break: break-all">{{ item.name }}</template>
|
||||
<template #description style="word-break: break-all">{{ item.description }}</template>
|
||||
</a-list-item-meta>
|
||||
|
||||
<div class="item__content">
|
||||
<a-input
|
||||
v-focus="editableValueKey === index"
|
||||
v-if="editableValueKey === index"
|
||||
class="editable-value value"
|
||||
:defaultValue="item.value"
|
||||
v-model:value="editableValue"
|
||||
@keydown.esc="editableValueKey = null"
|
||||
@pressEnter="updateData(item)">
|
||||
</a-input>
|
||||
<span v-else class="value">
|
||||
{{ item.value }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<template #actions class="action">
|
||||
<tooltip-button
|
||||
:tooltip="$t('label.edit')"
|
||||
:disabled="!('updateConfiguration' in $store.getters.apis)"
|
||||
v-if="editableValueKey !== index"
|
||||
icon="edit-outlined"
|
||||
@onClick="setEditableSetting(item, index)" />
|
||||
<tooltip-button
|
||||
:tooltip="$t('label.cancel')"
|
||||
@onClick="editableValueKey = null"
|
||||
v-if="editableValueKey === index"
|
||||
iconType="CloseCircleTwoTone"
|
||||
iconTwoToneColor="#f5222d" />
|
||||
<tooltip-button
|
||||
:tooltip="$t('label.ok')"
|
||||
@onClick="updateData(item)"
|
||||
v-if="editableValueKey === index"
|
||||
iconType="CheckCircleTwoTone"
|
||||
iconTwoToneColor="#52c41a" />
|
||||
<tooltip-button
|
||||
:tooltip="$t('label.reset.config.value')"
|
||||
@onClick="resetConfig(item)"
|
||||
v-if="editableValueKey !== index"
|
||||
icon="reload-outlined"
|
||||
:disabled="!('updateConfiguration' in $store.getters.apis)" />
|
||||
</template>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
<a-col :span="24">
|
||||
<a-input-search
|
||||
style="width: 25vw;float: right;margin-bottom: 10px; z-index: 8;"
|
||||
:placeholder="$t('label.search')"
|
||||
v-model:value="filter"
|
||||
@search="handleSearch" />
|
||||
<ConfigurationTable
|
||||
:columns="columns"
|
||||
:config="items" />
|
||||
</a-col>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import TooltipButton from '@/components/widgets/TooltipButton'
|
||||
import ConfigurationTable from '@/views/setting/ConfigurationTable.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ConfigurationTable,
|
||||
TooltipButton
|
||||
},
|
||||
name: 'SettingsTab',
|
||||
|
|
@ -112,7 +68,20 @@ export default {
|
|||
scope: 'zone',
|
||||
warning: this.$t('message.warn.zone.mtu.update')
|
||||
}
|
||||
}
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: 'name',
|
||||
dataIndex: 'name',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: 'value',
|
||||
dataIndex: 'value',
|
||||
key: 'value',
|
||||
width: '29%'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
|
@ -167,70 +136,9 @@ export default {
|
|||
callback()
|
||||
})
|
||||
},
|
||||
updateData (item) {
|
||||
this.tabLoading = true
|
||||
api('updateConfiguration', {
|
||||
[this.scopeKey]: this.resource.id,
|
||||
name: item.name,
|
||||
value: this.editableValue
|
||||
}).then(() => {
|
||||
var message = `${this.$t('label.setting')} ${item.name} ${this.$t('label.update.to')} ${this.editableValue}`
|
||||
this.handleSuccessMessage(item, this.$route.meta.name, message)
|
||||
}).catch(error => {
|
||||
console.error(error)
|
||||
this.$message.error(this.$t('message.error.save.setting'))
|
||||
this.$notification.error({
|
||||
message: this.$t('label.error'),
|
||||
description: this.$t('message.error.try.save.setting')
|
||||
})
|
||||
}).finally(() => {
|
||||
this.tabLoading = false
|
||||
this.fetchData(() => {
|
||||
this.editableValueKey = null
|
||||
})
|
||||
})
|
||||
},
|
||||
setEditableSetting (item, index) {
|
||||
this.editableValueKey = index
|
||||
this.editableValue = item.value
|
||||
},
|
||||
handleSearch (value) {
|
||||
this.filter = value
|
||||
this.fetchData()
|
||||
},
|
||||
resetConfig (item) {
|
||||
this.tabLoading = true
|
||||
api('resetConfiguration', {
|
||||
[this.scopeKey]: this.resource.id,
|
||||
name: item.name
|
||||
}).then(() => {
|
||||
var message = `${this.$t('label.setting')} ${item.name} ${this.$t('label.reset.config.value')}`
|
||||
this.handleSuccessMessage(item, this.$route.meta.name, message)
|
||||
}).catch(error => {
|
||||
console.error(error)
|
||||
this.$message.error(this.$t('message.error.reset.config'))
|
||||
this.$notification.error({
|
||||
message: this.$t('label.error'),
|
||||
description: this.$t('message.error.reset.config')
|
||||
})
|
||||
}).finally(() => {
|
||||
this.tabLoading = false
|
||||
this.fetchData(() => {
|
||||
this.editableValueKey = null
|
||||
})
|
||||
})
|
||||
},
|
||||
handleSuccessMessage (config, scope, message) {
|
||||
var obj = this.warningMessages[config.name]
|
||||
if (obj && obj.scope === scope) {
|
||||
var content = obj.warning
|
||||
if (config.isdynamic) {
|
||||
content = `this.$t('message.setting.update.delay').\n ${content}`
|
||||
}
|
||||
this.$warning({ title: message, content: content })
|
||||
} else {
|
||||
this.$messageConfigSuccess(message, config)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@
|
|||
</template>
|
||||
</a-table>
|
||||
<a-pagination
|
||||
v-if="this.$route.meta.name === 'globalsetting'"
|
||||
class="config-row-element"
|
||||
style="margin-top: 10px"
|
||||
size="small"
|
||||
|
|
|
|||
|
|
@ -222,12 +222,35 @@ export default {
|
|||
data () {
|
||||
return {
|
||||
valueLoading: this.loading,
|
||||
scopeKey: '',
|
||||
actualValue: null,
|
||||
editableValue: null,
|
||||
editableValueKey: null
|
||||
}
|
||||
},
|
||||
created () {
|
||||
switch (this.$route.meta.name) {
|
||||
case 'account':
|
||||
this.scopeKey = 'accountid'
|
||||
break
|
||||
case 'domain':
|
||||
this.scopeKey = 'domainid'
|
||||
break
|
||||
case 'zone':
|
||||
this.scopeKey = 'zoneid'
|
||||
break
|
||||
case 'cluster':
|
||||
this.scopeKey = 'clusterid'
|
||||
break
|
||||
case 'storagepool':
|
||||
this.scopeKey = 'storageid'
|
||||
break
|
||||
case 'imagestore':
|
||||
this.scopeKey = 'imagestoreuuid'
|
||||
break
|
||||
default:
|
||||
this.scopeKey = ''
|
||||
}
|
||||
this.setConfigData()
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -253,6 +276,7 @@ export default {
|
|||
newValue = newValue.join(' ')
|
||||
}
|
||||
const params = {
|
||||
[this.scopeKey]: this.$route.params?.id,
|
||||
name: configrecord.name,
|
||||
value: newValue
|
||||
}
|
||||
|
|
@ -287,9 +311,11 @@ export default {
|
|||
resetConfigurationValue (configrecord) {
|
||||
this.valueLoading = true
|
||||
this.editableValueKey = null
|
||||
api('resetConfiguration', {
|
||||
const params = {
|
||||
[this.scopeKey]: this.$route.params?.id,
|
||||
name: configrecord.name
|
||||
}).then(json => {
|
||||
}
|
||||
api('resetConfiguration', params).then(json => {
|
||||
this.editableValue = this.getEditableValue(json.resetconfigurationresponse.configuration)
|
||||
this.actualValue = this.editableValue
|
||||
var newValue = this.editableValue
|
||||
|
|
|
|||
Loading…
Reference in New Issue