This is an automated email from the ASF dual-hosted git repository.
dahn pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/cloudstack.git
The following commit(s) were added to refs/heads/main by this push:
new 8d18c1e7887 Change resource settings tab to be type based (#10596)
8d18c1e7887 is described below
commit 8d18c1e7887ee77195bb5b594806cf327b92aa44
Author: Lucas Martins <56271185+lucas-a-mart...@users.noreply.github.com>
AuthorDate: Fri Mar 28 06:30:58 2025 -0300
Change resource settings tab to be type based (#10596)
Co-authored-by: Lucas Martins <lucas.mart...@scclouds.com.br>
---
ui/src/components/view/SettingsTab.vue | 144 +++++-----------------------
ui/src/views/setting/ConfigurationTable.vue | 1 +
ui/src/views/setting/ConfigurationValue.vue | 30 +++++-
3 files changed, 55 insertions(+), 120 deletions(-)
diff --git a/ui/src/components/view/SettingsTab.vue
b/ui/src/components/view/SettingsTab.vue
index be74e7b32dd..1a57b591a4b 100644
--- a/ui/src/components/view/SettingsTab.vue
+++ b/ui/src/components/view/SettingsTab.vue
@@ -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)
- }
}
}
}
diff --git a/ui/src/views/setting/ConfigurationTable.vue
b/ui/src/views/setting/ConfigurationTable.vue
index 68548526b38..56518d2570b 100644
--- a/ui/src/views/setting/ConfigurationTable.vue
+++ b/ui/src/views/setting/ConfigurationTable.vue
@@ -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"
diff --git a/ui/src/views/setting/ConfigurationValue.vue
b/ui/src/views/setting/ConfigurationValue.vue
index 23580bbfb83..3ed0807520a 100644
--- a/ui/src/views/setting/ConfigurationValue.vue
+++ b/ui/src/views/setting/ConfigurationValue.vue
@@ -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
