refactor: Refactor QoS Policy code

refactor qos policy code

Change-Id: I22b3655cf879b280a1a30a5516daed1c26a44b32

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,
               },
             ]

src/pages/network/containers/QoSPolicy/AdminQoSPolicy.js

@@ -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));

src/pages/network/containers/QoSPolicy/ProjectQoSPolicy.js

@@ -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));

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 = () => {
+  get tabKey() {
-    const ret = [...qosPolicyColumns];
+    const { tab } = this.props;
-    ret[0].linkPrefix = `/network/${this.getUrl('qos-policy')}/detail`;
+    return tab;
-    this.isAdminPage &&
+  }
-      ret.splice(2, 0, {
+
-        title: t('Project ID/Name'),
+  getColumnParamsFromTabKey() {
-        dataIndex: 'project_name',
+    switch (this.tabKey) {
-        sortKey: 'project_id',
+      case 'projectQoSPolicy':
-      });
+        return {
-    return ret;
+          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];
+    return getQosPolicyFilters(this.getColumnParamsFromTabKey());
-    // 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;
   }
 }
 

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 QoSPolicyComponent from './QoSPolicy';
-import AdminQoSPolicy from './AdminQoSPolicy';
-import SharedQoSPolicy from './SharedQoSPolicy';
 
 @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;

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'),

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')
+export class ModifyQoS extends ModalAction {
-@observer
-export default 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(
+        tabs: getQoSPolicyTabs.call(this, {
-          this,
+          disabledFunc: (item) => item.id === this.item.qos_policy_id,
-          {
+        }),
-            disabledFunc: (item) => item.id === this.item.qos_policy_id,
-          },
-          false
-        ),
         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));

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';

src/resources/qos-policy.jsx

@@ -30,76 +30,98 @@ const getRuleValue = (rule) => {
     : `${t('DSCP Marking')}: ${rule.dscp_mark}`;
 };
 
-export const qosPolicyColumns = [
+export const getQosPolicyColumns = ({ self, all = false }) => {
-  {
+  const ret = [
-    title: t('ID/Name'),
+    {
-    dataIndex: 'name',
+      title: t('ID/Name'),
-  },
+      dataIndex: 'name',
-  {
+      linkPrefix: `/network/${self.getUrl('qos-policy')}/detail`,
-    title: t('Description'),
+    },
-    dataIndex: 'description',
+    {
-    sorter: false,
+      title: t('Description'),
-  },
+      dataIndex: 'description',
-  {
+      sorter: false,
-    title: t('Rules Number'),
+    },
-    dataIndex: 'rulesNumber',
+    {
-    render: (value, record) => record.rules.length,
+      title: t('Rules Number'),
-    isHideable: true,
+      dataIndex: 'rulesNumber',
-    sorter: false,
+      render: (value, record) => record.rules.length,
-  },
+      isHideable: true,
-  {
+      sorter: false,
-    title: t('Rules'),
+    },
-    dataIndex: 'rules',
+    {
-    render: (rules) => (
+      title: t('Rules'),
-      <Row>
+      dataIndex: 'rules',
-        {rules.map((rule) => (
+      render: (rules) => (
-          <Col span={24} key={rule.direction}>
+        <Row>
-            {getRuleValue(rule)}
+          {rules.map((rule) => (
-          </Col>
+            <Col span={24} key={rule.direction}>
-        ))}
+              {getRuleValue(rule)}
-      </Row>
+            </Col>
-    ),
+          ))}
-    stringify: (rules) => rules.map((rule) => getRuleValue(rule)).join('\n'),
+        </Row>
-  },
+      ),
-  {
+      stringify: (rules) => rules.map((rule) => getRuleValue(rule)).join('\n'),
-    title: t('Shared'),
+    },
-    dataIndex: 'shared',
+    {
-    valueRender: 'yesNo',
+      title: t('Shared'),
-    width: 80,
+      dataIndex: 'shared',
-    sorter: false,
+      valueRender: 'yesNo',
-  },
+      width: 80,
-  {
+      sorter: false,
-    title: t('Default Policy'),
+    },
-    dataIndex: 'is_default',
+    {
-    valueRender: 'yesNo',
+      title: t('Default Policy'),
-    isHideable: true,
+      dataIndex: 'is_default',
-    width: 100,
+      valueRender: 'yesNo',
-    sorter: false,
+      isHideable: true,
-  },
+      width: 100,
-  {
+      sorter: false,
-    title: t('Created At'),
+    },
-    dataIndex: 'created_at',
+    {
-    valueRender: 'toLocalTime',
+      title: t('Created At'),
-    isHideable: true,
+      dataIndex: 'created_at',
-    sorter: false,
+      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 = [
+export const getQosPolicyFilters = ({ self, shared = false }) => {
-  {
+  const ret = [
-    label: t('Name'),
+    {
-    name: 'name',
+      label: t('Name'),
-  },
+      name: 'name',
-  {
+    },
-    label: t('Description'),
+    {
-    name: 'description',
+      label: t('Description'),
-  },
+      name: 'description',
-  {
+    },
-    label: t('Shared'),
+  ];
-    name: 'shared',
+  if (!shared) {
-    options: yesNoOptions,
+    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,
+  columns: getQosPolicyColumns({ self, all }),
-  filterParams: qosPolicyFilters,
+  filterParams: getQosPolicyFilters({ self, shared }),
-};
+});
 
 /**
- *  * getQosPolicyTabs in component, should used by call/apply to make ‘this' point to component
+ *  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: *}]}
  */
-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;
 }