| // 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-row :gutter="12"> | |
| <a-col :md="24"> | |
| <a-card class="breadcrumb-card"> | |
| <a-col :span="12" style="display: inline-flex"> | |
| <breadcrumb style="padding-top: 6px; padding-left: 8px" /> | |
| <a-button | |
| style="margin-left: 12px; margin-top: 4px" | |
| :loading="loading" | |
| size="small" | |
| shape="round" | |
| @click="fetchConfigurationData()" > | |
| <template #icon><ReloadOutlined /></template> | |
| {{ $t('label.refresh') }} | |
| </a-button> | |
| </a-col> | |
| <a-col :span="12" style="float: right"> | |
| <a-input-search | |
| style="width: 25vw; float: right; margin-bottom: 10px; z-index: 8; display: flex" | |
| :placeholder="$t('label.search')" | |
| v-model:value="filter" | |
| @search="changePage()" | |
| v-focus="true" /> | |
| </a-col> | |
| </a-card> | |
| </a-col> | |
| <a-col :span="24"> | |
| <a-card style="margin-left: 10px;"> | |
| <a-spin :spinning="configLoading"> | |
| <a-tabs | |
| tabPosition="left" | |
| :animated="false" | |
| :activeKey="this.group || ''" | |
| @change="changeGroupTab" > | |
| <a-tab-pane | |
| key='' | |
| tab='All Settings' > | |
| <ConfigurationTable | |
| :columns="columns" | |
| :config="config" | |
| :count="count" | |
| :page="page" | |
| :pagesize="pagesize" | |
| @change-page="changePage" /> | |
| </a-tab-pane> | |
| <a-tab-pane | |
| v-for="(group) in groups" | |
| :key="group.name" | |
| :tab="group.name" > | |
| <a-tabs | |
| :activeKey="this.subgroup || ''" | |
| :animated="false" | |
| @change="changeSubgroupTab" > | |
| <a-tab-pane | |
| v-for="(subgroup) in group.subgroup" | |
| :key="subgroup.name" | |
| :tab="subgroup.name" > | |
| <ConfigurationHierarchy | |
| :columns="columns" | |
| :config="config" /> | |
| </a-tab-pane> | |
| </a-tabs> | |
| </a-tab-pane> | |
| </a-tabs> | |
| </a-spin> | |
| </a-card> | |
| </a-col> | |
| </a-row> | |
| </template> | |
| <script> | |
| import { getAPI } from '@/api' | |
| import { mixin, mixinDevice } from '@/utils/mixin.js' | |
| import Breadcrumb from '@/components/widgets/Breadcrumb' | |
| import OsLogo from '@/components/widgets/OsLogo' | |
| import Status from '@/components/widgets/Status' | |
| import ActionButton from '@/components/view/ActionButton' | |
| import InfoCard from '@/components/view/InfoCard' | |
| import QuickView from '@/components/view/QuickView' | |
| import TooltipButton from '@/components/widgets/TooltipButton' | |
| import ConfigurationHierarchy from './ConfigurationHierarchy' | |
| import ConfigurationTable from './ConfigurationTable' | |
| export default { | |
| name: 'ConfigurationTab', | |
| components: { | |
| Breadcrumb, | |
| OsLogo, | |
| Status, | |
| ActionButton, | |
| InfoCard, | |
| QuickView, | |
| TooltipButton, | |
| ConfigurationHierarchy, | |
| ConfigurationTable | |
| }, | |
| mixins: [mixin, mixinDevice], | |
| props: { | |
| loading: { | |
| type: Boolean, | |
| default: false | |
| }, | |
| actions: { | |
| type: Array, | |
| default: () => [] | |
| } | |
| }, | |
| data () { | |
| return { | |
| groups: [], | |
| config: [], | |
| configLoading: true, | |
| page: 1, | |
| pagesize: this.$store.getters.defaultListViewPageSize, | |
| group: '', | |
| subgroup: '', | |
| filter: '', | |
| count: 0, | |
| apiName: 'listConfigurations', | |
| columns: [ | |
| { | |
| title: 'name', | |
| dataIndex: 'name', | |
| key: 'name' | |
| }, | |
| { | |
| title: 'value', | |
| dataIndex: 'value', | |
| key: 'value', | |
| width: '29%' | |
| } | |
| ] | |
| } | |
| }, | |
| watch: { | |
| '$route.fullPath': function () { | |
| this.group = this.$route.query.group || '' | |
| this.subgroup = this.$route.query.subgroup || '' | |
| this.page = parseInt(this.$route.query.page) || 1 | |
| this.pagesize = parseInt(this.$route.query.pagesize) || this.pagesize | |
| this.filter = this.$route.query.filter || '' | |
| }, | |
| resource: { | |
| deep: true, | |
| handler (newItem) { | |
| if (!newItem || !newItem.id) { | |
| return | |
| } | |
| this.fetchConfigurationData() | |
| } | |
| } | |
| }, | |
| created () { | |
| this.fetchConfigurationGroups() | |
| }, | |
| methods: { | |
| fetchConfigurationGroups () { | |
| this.configLoading = true | |
| const params = { | |
| pagesize: -1 | |
| } | |
| getAPI('listConfigurationGroups', params).then(response => { | |
| this.groups = response.listconfigurationgroupsresponse.configurationgroup | |
| }).catch(error => { | |
| console.error(error) | |
| this.$message.error(this.$t('message.error.loading.setting')) | |
| }).finally(() => { | |
| this.group = this.$route.query.group || '' | |
| this.subgroup = this.$route.query.subgroup || '' | |
| this.fetchConfigurationData() | |
| }) | |
| }, | |
| fetchConfigurationData () { | |
| this.configLoading = true | |
| const params = { | |
| listAll: true | |
| } | |
| if (this.group.length > 0) { | |
| params.group = this.group | |
| params.pagesize = -1 | |
| } else { | |
| params.pagesize = this.pagesize || 20 | |
| params.page = this.page || 1 | |
| } | |
| if (this.subgroup.length > 0) { | |
| params.subgroup = this.subgroup | |
| } | |
| if (this.filter) { | |
| params.keyword = this.filter | |
| } | |
| getAPI('listConfigurations', params).then(response => { | |
| this.config = [] | |
| let config = response.listconfigurationsresponse.configuration || [] | |
| this.count = response.listconfigurationsresponse.count || 0 | |
| if (this.group.length > 0) { | |
| config = this.convertConfigToHierarchy(config) | |
| } | |
| this.config = config | |
| window.scrollTo(0, 0) | |
| }).catch(error => { | |
| console.error(error) | |
| this.$message.error(this.$t('message.error.loading.setting')) | |
| }).finally(() => { | |
| this.configLoading = false | |
| }) | |
| }, | |
| convertConfigToHierarchy (config) { | |
| var hierarchy = {} | |
| for (var c of config) { | |
| if (c.parent && c.parent.length !== 0) { | |
| if (hierarchy[c.parent]) { | |
| hierarchy[c.parent].push(c) | |
| } else { | |
| hierarchy[c.parent] = [c] | |
| } | |
| } | |
| } | |
| for (c of config) { | |
| if (hierarchy[c.name]) { | |
| c.children = hierarchy[c.name] | |
| } | |
| } | |
| config = config.filter(c => !c.parent) | |
| return config | |
| }, | |
| changePage (page, pagesize) { | |
| const query = {} | |
| if (page) { | |
| query.page = page | |
| this.page = page | |
| } else { | |
| this.page = 1 | |
| } | |
| if (pagesize) { | |
| query.pagesize = pagesize | |
| this.pagesize = pagesize | |
| } | |
| if (this.filter) { | |
| query.filter = this.filter | |
| } | |
| if (this.group !== '') { | |
| query.group = this.group | |
| } | |
| if (this.subgroup !== '') { | |
| query.subgroup = this.subgroup | |
| } | |
| this.pushToHistory(query) | |
| this.fetchConfigurationData() | |
| }, | |
| pushToHistory (query) { | |
| history.pushState( | |
| {}, | |
| null, | |
| '#' + this.$route.path + '?' + Object.keys(query).map(key => { | |
| return ( | |
| encodeURIComponent(key) + '=' + encodeURIComponent(query[key]) | |
| ) | |
| }).join('&') | |
| ) | |
| }, | |
| changeGroupTab (e) { | |
| this.group = e | |
| if (this.group.length > 0) { | |
| for (const groupIndex in this.groups) { | |
| if (this.groups[groupIndex].name === this.group) { | |
| const group = this.groups[groupIndex] | |
| this.subgroup = group.subgroup[0].name | |
| } | |
| } | |
| } else { | |
| this.group = '' | |
| this.subgroup = '' | |
| this.changePage(1, this.pagesize) | |
| } | |
| if (this.group.length > 0 && this.subgroup.length > 0) { | |
| const query = Object.assign({}, this.$route.query) | |
| delete query.page | |
| delete query.pagesize | |
| query.group = this.group | |
| query.subgroup = this.subgroup | |
| query.filter = this.filter | |
| // this.pagesize = -1 | |
| this.page = 0 | |
| this.pushToHistory(query) | |
| this.fetchConfigurationData() | |
| } | |
| }, | |
| changeSubgroupTab (e) { | |
| this.subgroup = e || this.subgroup | |
| if (this.group.length > 0 && this.subgroup.length > 0) { | |
| const query = Object.assign({}, this.$route.query) | |
| delete query.page | |
| delete query.pagesize | |
| query.group = this.group | |
| query.subgroup = this.subgroup | |
| // this.pagesize = -1 | |
| this.page = 0 | |
| this.pushToHistory(query) | |
| this.fetchConfigurationData() | |
| } else { | |
| history.pushState( | |
| {}, | |
| null, | |
| '#' + this.$route.path | |
| ) | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style scoped lang="scss"> | |
| .breadcrumb-card { | |
| margin-left: -24px; | |
| margin-right: -24px; | |
| margin-top: -16px; | |
| margin-bottom: 12px; | |
| } | |
| .shift-btns { | |
| display: flex; | |
| } | |
| .shift-btn { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 20px; | |
| height: 20px; | |
| font-size: 12px; | |
| &:not(:last-child) { | |
| margin-right: 5px; | |
| } | |
| &--rotated { | |
| font-size: 10px; | |
| transform: rotate(90deg); | |
| } | |
| } | |
| .alert-notification-threshold { | |
| background-color: rgba(255, 231, 175, 0.75); | |
| color: #e87900; | |
| padding: 10%; | |
| } | |
| .alert-disable-threshold { | |
| background-color: rgba(255, 190, 190, 0.75); | |
| color: #f50000; | |
| padding: 10%; | |
| } | |
| </style> |