diff --git a/src/pages/network/containers/FloatingIp/actions/Edit.jsx b/src/pages/network/containers/FloatingIp/actions/Edit.jsx index ac5bdffa..794ee0d1 100644 --- a/src/pages/network/containers/FloatingIp/actions/Edit.jsx +++ b/src/pages/network/containers/FloatingIp/actions/Edit.jsx @@ -33,7 +33,6 @@ export class Edit extends ModalAction { init() { this.qosPolicyStore = new QoSPolicyStore(); - this.state.qosPolicy = this.item.qos_policy_id; } get defaultValue() { @@ -45,7 +44,7 @@ export class Edit extends ModalAction { selectedRows: item.qos_policy_id ? [ { - key: item.qos_policy_id, + id: item.qos_policy_id, name: item.qos_policy_id, }, ] diff --git a/src/pages/network/containers/QoSPolicy/AdminQoSPolicy.js b/src/pages/network/containers/QoSPolicy/AdminQoSPolicy.js deleted file mode 100644 index 521e92f8..00000000 --- a/src/pages/network/containers/QoSPolicy/AdminQoSPolicy.js +++ /dev/null @@ -1,77 +0,0 @@ -// Copyright 2021 99cloud -// -// Licensed 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. - -import { observer, inject } from 'mobx-react'; -import Base from 'containers/List'; -import { QoSPolicyStore } from 'stores/neutron/qos-policy'; -import { qosPolicyColumns, qosPolicyFilters } from 'resources/qos-policy'; -import actionConfigs from './actions'; - -export class QoSPolicy extends Base { - init() { - this.store = new QoSPolicyStore(); - this.downloadStore = new QoSPolicyStore(); - } - - get policy() { - return 'get_policy'; - } - - get name() { - return t('QoS policies'); - } - - get actionConfigs() { - if (this.isAdminPage) { - return actionConfigs.actionConfigs; - } - return actionConfigs.consoleActions; - } - - get isFilterByBackend() { - return true; - } - - get isSortByBackend() { - return true; - } - - get defaultSortKey() { - return 'name'; - } - - getColumns = () => { - const ret = [...qosPolicyColumns]; - ret[0].linkPrefix = `/network/${this.getUrl('qos-policy')}/detail`; - ret.splice(2, 0, { - title: t('Project ID/Name'), - dataIndex: 'project_name', - sortKey: 'project_id', - }); - return ret; - }; - - get searchFilters() { - const filters = [ - ...qosPolicyFilters, - { - label: t('Project ID'), - name: 'tenant_id', - }, - ]; - return filters; - } -} - -export default inject('rootStore')(observer(QoSPolicy)); diff --git a/src/pages/network/containers/QoSPolicy/ProjectQoSPolicy.js b/src/pages/network/containers/QoSPolicy/ProjectQoSPolicy.js deleted file mode 100644 index 6a0fc6b4..00000000 --- a/src/pages/network/containers/QoSPolicy/ProjectQoSPolicy.js +++ /dev/null @@ -1,82 +0,0 @@ -// Copyright 2021 99cloud -// -// Licensed 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. - -import { observer, inject } from 'mobx-react'; -import Base from 'containers/List'; -import { QoSPolicyStore } from 'stores/neutron/qos-policy'; -import { qosPolicyColumns, qosPolicyFilters } from 'resources/qos-policy'; -import actionConfigs from './actions'; - -export class QoSPolicy extends Base { - init() { - this.store = new QoSPolicyStore(); - this.downloadStore = new QoSPolicyStore(); - } - - get fetchDataByCurrentProject() { - // add project_id to fetch data; - return true; - } - - get policy() { - return 'get_policy'; - } - - get name() { - return t('QoS policies'); - } - - get actionConfigs() { - if (this.isAdminPage) { - return actionConfigs.actionConfigs; - } - return actionConfigs.consoleActions; - } - - get isFilterByBackend() { - return true; - } - - get isSortByBackend() { - return true; - } - - get defaultSortKey() { - return 'name'; - } - - getColumns = () => { - const ret = [...qosPolicyColumns]; - ret[0].linkPrefix = `/network/${this.getUrl('qos-policy')}/detail`; - this.isAdminPage && - ret.splice(2, 0, { - title: t('Project ID/Name'), - dataIndex: 'project_name', - sortKey: 'project_id', - }); - return ret; - }; - - get searchFilters() { - const filters = [...qosPolicyFilters]; - this.isAdminPage && - filters.push({ - label: t('Project ID'), - name: 'tenant_id', - }); - return filters; - } -} - -export default inject('rootStore')(observer(QoSPolicy)); diff --git a/src/pages/network/containers/QoSPolicy/SharedQoSPolicy.js b/src/pages/network/containers/QoSPolicy/QoSPolicy.js similarity index 60% rename from src/pages/network/containers/QoSPolicy/SharedQoSPolicy.js rename to src/pages/network/containers/QoSPolicy/QoSPolicy.js index 9c92520a..a092454e 100644 --- a/src/pages/network/containers/QoSPolicy/SharedQoSPolicy.js +++ b/src/pages/network/containers/QoSPolicy/QoSPolicy.js @@ -15,7 +15,7 @@ import { observer, inject } from 'mobx-react'; import Base from 'containers/List'; import { QoSPolicyStore } from 'stores/neutron/qos-policy'; -import { qosPolicyColumns, qosPolicyFilters } from 'resources/qos-policy'; +import { getQosPolicyColumns, getQosPolicyFilters } from 'resources/qos-policy'; import actionConfigs from './actions'; export class QoSPolicy extends Base { @@ -26,7 +26,7 @@ export class QoSPolicy extends Base { updateFetchParamsByPage = (params) => ({ ...params, - shared: true, + all_projects: this.tabKey === 'allQoSPolicy' || this.isAdminPage, }); get policy() { @@ -56,29 +56,46 @@ export class QoSPolicy extends Base { return 'name'; } - getColumns = () => { - const ret = [...qosPolicyColumns]; - ret[0].linkPrefix = `/network/${this.getUrl('qos-policy')}/detail`; - this.isAdminPage && - ret.splice(2, 0, { - title: t('Project ID/Name'), - dataIndex: 'project_name', - sortKey: 'project_id', - }); - return ret; - }; + get tabKey() { + const { tab } = this.props; + return tab; + } + + getColumnParamsFromTabKey() { + switch (this.tabKey) { + case 'projectQoSPolicy': + return { + self: this, + all: false, + shared: false, + }; + case 'sharedQoSPolicy': + return { + self: this, + all: false, + shared: true, + }; + case 'allQoSPolicy': + return { + self: this, + all: true, + shared: false, + }; + default: + return { + self: this, + all: true, + shared: false, + }; + } + } + + getColumns() { + return getQosPolicyColumns(this.getColumnParamsFromTabKey()); + } get searchFilters() { - const filters = [...qosPolicyFilters]; - // shared tab do not need this filter - const sharedFilterIndex = filters.findIndex((i) => i.name === 'shared'); - filters.splice(sharedFilterIndex, 1); - this.isAdminPage && - filters.push({ - label: t('Project ID'), - name: 'tenant_id', - }); - return filters; + return getQosPolicyFilters(this.getColumnParamsFromTabKey()); } } diff --git a/src/pages/network/containers/QoSPolicy/index.jsx b/src/pages/network/containers/QoSPolicy/index.jsx index 09d2d7d6..b7bbe575 100644 --- a/src/pages/network/containers/QoSPolicy/index.jsx +++ b/src/pages/network/containers/QoSPolicy/index.jsx @@ -14,31 +14,29 @@ import { observer, inject } from 'mobx-react'; import Base from 'containers/TabList'; -import ProjectQoSPolicy from './ProjectQoSPolicy'; -import AdminQoSPolicy from './AdminQoSPolicy'; -import SharedQoSPolicy from './SharedQoSPolicy'; +import QoSPolicyComponent from './QoSPolicy'; @inject('rootStore') @observer -export default class Network extends Base { +export default class QoSPolicy extends Base { get tabs() { const tabs = [ { title: t('Current Project QoS Policy'), key: 'projectQoSPolicy', - component: ProjectQoSPolicy, + component: QoSPolicyComponent, }, { title: t('Shared QoS Policy'), key: 'sharedQoSPolicy', - component: SharedQoSPolicy, + component: QoSPolicyComponent, }, ]; if (this.hasAdminRole) { tabs.push({ title: t('All QoS Policy'), key: 'allQoSPolicy', - component: AdminQoSPolicy, + component: QoSPolicyComponent, }); } return tabs; diff --git a/src/pages/network/containers/VirtualAdapter/actions/Create.jsx b/src/pages/network/containers/VirtualAdapter/actions/Create.jsx index 51bfcad7..a966efdf 100644 --- a/src/pages/network/containers/VirtualAdapter/actions/Create.jsx +++ b/src/pages/network/containers/VirtualAdapter/actions/Create.jsx @@ -317,7 +317,7 @@ export class CreateAction extends ModalAction { name: 'qos_policy_id', label: t('QoS Policy'), type: 'tab-select-table', - tabs: getQoSPolicyTabs.call(this, {}, false), + tabs: getQoSPolicyTabs.call(this), isMulti: false, required: enableQosPolicy, tip: t('Choosing a QoS policy can limit bandwidth and DSCP'), diff --git a/src/pages/network/containers/VirtualAdapter/actions/ModifyQoS.jsx b/src/pages/network/containers/VirtualAdapter/actions/ModifyQoS.jsx index ab1e9b7b..13cb526d 100644 --- a/src/pages/network/containers/VirtualAdapter/actions/ModifyQoS.jsx +++ b/src/pages/network/containers/VirtualAdapter/actions/ModifyQoS.jsx @@ -19,9 +19,7 @@ import { QoSPolicyStore } from 'stores/neutron/qos-policy'; import globalVirtualAdapterStore from 'stores/neutron/virtual-adapter'; import { getQoSPolicyTabs } from 'resources/qos-policy'; -@inject('rootStore') -@observer -export default class ModifyQoS extends ModalAction { +export class ModifyQoS extends ModalAction { static id = 'modify_qos'; static title = t('Modify QoS'); @@ -132,13 +130,9 @@ export default class ModifyQoS extends ModalAction { name: 'qos_policy_id', label: t('QoS Policy'), type: 'tab-select-table', - tabs: getQoSPolicyTabs.call( - this, - { - disabledFunc: (item) => item.id === this.item.qos_policy_id, - }, - false - ), + tabs: getQoSPolicyTabs.call(this, { + disabledFunc: (item) => item.id === this.item.qos_policy_id, + }), isMulti: false, required: true, tip: t('Choosing a QoS policy can limit bandwidth and DSCP'), @@ -147,3 +141,5 @@ export default class ModifyQoS extends ModalAction { ]; } } + +export default inject('rootStore')(observer(ModifyQoS)); diff --git a/src/pages/network/routes/index.js b/src/pages/network/routes/index.js index 14fd74e6..262539e9 100644 --- a/src/pages/network/routes/index.js +++ b/src/pages/network/routes/index.js @@ -26,7 +26,7 @@ import PortDetail from '../containers/Router/Port/Detail'; import VirtualAdapter from '../containers/VirtualAdapter'; import VirtualAdapterDetail from '../containers/VirtualAdapter/Detail'; import QoSPolicy from '../containers/QoSPolicy'; -import AdminQoSPolicy from '../containers/QoSPolicy/AdminQoSPolicy'; +import AdminQoSPolicy from '../containers/QoSPolicy/QoSPolicy'; import QoSPolicyDetail from '../containers/QoSPolicy/Detail'; import LoadBalancers from '../containers/LoadBalancers/LoadBalancerInstance'; import StepCreateLoadBalancer from '../containers/LoadBalancers/LoadBalancerInstance/actions/StepCreate'; diff --git a/src/resources/qos-policy.jsx b/src/resources/qos-policy.jsx index 8f809e07..7dd6bb44 100644 --- a/src/resources/qos-policy.jsx +++ b/src/resources/qos-policy.jsx @@ -30,76 +30,98 @@ const getRuleValue = (rule) => { : `${t('DSCP Marking')}: ${rule.dscp_mark}`; }; -export const qosPolicyColumns = [ - { - title: t('ID/Name'), - dataIndex: 'name', - }, - { - title: t('Description'), - dataIndex: 'description', - sorter: false, - }, - { - title: t('Rules Number'), - dataIndex: 'rulesNumber', - render: (value, record) => record.rules.length, - isHideable: true, - sorter: false, - }, - { - title: t('Rules'), - dataIndex: 'rules', - render: (rules) => ( - - {rules.map((rule) => ( - - {getRuleValue(rule)} - - ))} - - ), - stringify: (rules) => rules.map((rule) => getRuleValue(rule)).join('\n'), - }, - { - title: t('Shared'), - dataIndex: 'shared', - valueRender: 'yesNo', - width: 80, - sorter: false, - }, - { - title: t('Default Policy'), - dataIndex: 'is_default', - valueRender: 'yesNo', - isHideable: true, - width: 100, - sorter: false, - }, - { - title: t('Created At'), - dataIndex: 'created_at', - valueRender: 'toLocalTime', - isHideable: true, - sorter: false, - }, -]; +export const getQosPolicyColumns = ({ self, all = false }) => { + const ret = [ + { + title: t('ID/Name'), + dataIndex: 'name', + linkPrefix: `/network/${self.getUrl('qos-policy')}/detail`, + }, + { + title: t('Description'), + dataIndex: 'description', + sorter: false, + }, + { + title: t('Rules Number'), + dataIndex: 'rulesNumber', + render: (value, record) => record.rules.length, + isHideable: true, + sorter: false, + }, + { + title: t('Rules'), + dataIndex: 'rules', + render: (rules) => ( + + {rules.map((rule) => ( + + {getRuleValue(rule)} + + ))} + + ), + stringify: (rules) => rules.map((rule) => getRuleValue(rule)).join('\n'), + }, + { + title: t('Shared'), + dataIndex: 'shared', + valueRender: 'yesNo', + width: 80, + sorter: false, + }, + { + title: t('Default Policy'), + dataIndex: 'is_default', + valueRender: 'yesNo', + isHideable: true, + width: 100, + sorter: false, + }, + { + title: t('Created At'), + dataIndex: 'created_at', + valueRender: 'toLocalTime', + isHideable: true, + sorter: false, + }, + ]; + if (all) { + ret.splice(2, 0, { + title: t('Project ID/Name'), + dataIndex: 'project_name', + sortKey: 'project_id', + }); + } + return ret; +}; -export const qosPolicyFilters = [ - { - label: t('Name'), - name: 'name', - }, - { - label: t('Description'), - name: 'description', - }, - { - label: t('Shared'), - name: 'shared', - options: yesNoOptions, - }, -]; +export const getQosPolicyFilters = ({ self, shared = false }) => { + const ret = [ + { + label: t('Name'), + name: 'name', + }, + { + label: t('Description'), + name: 'description', + }, + ]; + if (!shared) { + ret.push({ + label: t('Shared'), + name: 'shared', + options: yesNoOptions, + }); + } + if (self.hasAdminRole) { + ret.push({ + label: t('Project ID'), + name: 'tenant_id', + }); + } + return ret; +}; export const qosPolicySortProps = { isSortByBack: true, @@ -107,32 +129,26 @@ export const qosPolicySortProps = { defaultSortOrder: 'descend', }; -export const qosPolicySelectTableProps = { +export const getQosPolicySelectTableProps = ({ self, all, shared }) => ({ ...qosPolicySortProps, - columns: qosPolicyColumns, - filterParams: qosPolicyFilters, -}; + columns: getQosPolicyColumns({ self, all }), + filterParams: getQosPolicyFilters({ self, shared }), +}); /** - * * getQosPolicyTabs in component, should used by call/apply to make ‘this' point to component - * @param {*} extraProps - * @returns {[{title: *, key: string, props: *}, {title: *, key: string, props: *}]} + * getQosPolicyTabs in component, should used by call/apply to make ‘this' point to component */ -export function getQoSPolicyTabs(extraProps) { +export function getQoSPolicyTabs(extraProps = {}) { const baseProps = { - ...qosPolicySelectTableProps, backendPageStore: this.qosPolicyStore, ...extraProps, }; - // make ID/Name column show id - baseProps.columns[0].linkPrefix = `/network/${this.getUrl( - 'qos-policy' - )}/detail`; const ret = [ { title: t('Current Project QoS Policy'), key: 'project', props: merge({}, baseProps, { + ...getQosPolicySelectTableProps({ self: this }), extraParams: { project_id: this.currentProjectId, }, @@ -142,6 +158,7 @@ export function getQoSPolicyTabs(extraProps) { title: t('Shared QoS Policy'), key: 'shared', props: merge({}, baseProps, { + ...getQosPolicySelectTableProps({ shared: true, self: this }), extraParams: { shared: true, }, @@ -149,28 +166,18 @@ export function getQoSPolicyTabs(extraProps) { }, ]; - // shared tab do not need shared filter - const sharedFilterIndex = ret[1].props.filterParams.findIndex( - (i) => i.name === 'shared' - ); - ret[1].props.filterParams.splice(sharedFilterIndex, 1); - if (this.hasAdminRole) { - const adminBaseProps = merge({}, baseProps, { - extraParams: { - all_projects: true, - }, - }); - adminBaseProps.columns.splice(1, 0, { - title: t('Project ID/Name'), - dataIndex: 'project_name', - sortKey: 'project_id', - }); ret.push({ title: t('All QoS Policy'), key: 'all', - props: adminBaseProps, + props: merge({}, baseProps, { + ...getQosPolicySelectTableProps({ all: true, self: this }), + extraParams: { + all_projects: true, + }, + }), }); } + return ret; }