feat: Refactor network list page

Refactor network list page

Change-Id: Idd5e972e7c63dbc9e7fdd3c2f2e22cfa60fd67c3

src/pages/network/containers/Network/AdminNetwork.jsx

@@ -1,99 +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 { networkColumns } from 'resources/network';
-import { NetworkStore } from 'stores/neutron/network';
-import { yesNoOptions } from 'utils/constants';
-import actionConfigs from './actions';
-
-export class Networks extends Base {
-  init() {
-    this.store = new NetworkStore();
-    this.downloadStore = new NetworkStore();
-  }
-
-  get isFilterByBackend() {
-    return true;
-  }
-
-  get isSortByBackend() {
-    return true;
-  }
-
-  get defaultSortKey() {
-    return 'status';
-  }
-
-  get policy() {
-    return 'get_network';
-  }
-
-  get name() {
-    return t('networks');
-  }
-
-  get actionConfigs() {
-    return actionConfigs;
-  }
-
-  get hasTab() {
-    return !this.isAdminPage;
-  }
-
-  get adminPageHasProjectFilter() {
-    return true;
-  }
-  // renderSubnetDetails(value) {
-  //   return value.length === 0 ? '-' : value.map((it, index) => <div key={`network_subnet_detail${index}`}><b>{it.name}</b>:<br />{it.cidr}</div>);
-  // }
-
-  updateFetchParamsByPage = (params) => ({
-    ...params,
-    all_projects: true,
-  });
-
-  getColumns = () => {
-    const columns = networkColumns(this);
-    columns.splice(1, 0, {
-      title: t('Project ID/Name'),
-      dataIndex: 'project_name',
-      isHideable: true,
-      sortKey: 'project_id',
-    });
-    return columns;
-  };
-
-  get searchFilters() {
-    return [
-      {
-        label: t('Name'),
-        name: 'name',
-      },
-      {
-        label: t('Shared'),
-        name: 'shared',
-        options: yesNoOptions,
-      },
-      {
-        label: t('External'),
-        name: 'router:external',
-        options: yesNoOptions,
-      },
-    ];
-  }
-}
-
-export default inject('rootStore')(observer(Networks));

src/pages/network/containers/Network/ExtNetwork.jsx

@@ -1,90 +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 { networkColumns } from 'resources/network';
-import { NetworkStore } from 'stores/neutron/network';
-import { yesNoOptions } from 'utils/constants';
-import actionConfigs from './actions';
-
-export class ExtNetwork extends Base {
-  init() {
-    this.store = new NetworkStore();
-    this.downloadStore = new NetworkStore();
-  }
-
-  get isFilterByBackend() {
-    return true;
-  }
-
-  get isSortByBackend() {
-    return true;
-  }
-
-  get defaultSortKey() {
-    return 'status';
-  }
-
-  get policy() {
-    return 'get_network';
-  }
-
-  get name() {
-    return t('networks');
-  }
-
-  get actionConfigs() {
-    return actionConfigs;
-  }
-
-  get hasTab() {
-    return true;
-  }
-
-  updateFetchParamsByPage = (params) => ({
-    ...params,
-    'router:external': true,
-  });
-
-  getColumns = () => {
-    const columns = networkColumns(this);
-    return columns.filter((it) => it.dataIndex !== 'router:external');
-  };
-
-  get searchFilters() {
-    const filters = [
-      {
-        label: t('Name'),
-        name: 'name',
-      },
-      {
-        label: t('Shared'),
-        name: 'shared',
-        options: yesNoOptions,
-      },
-      {
-        label: t('Project Range'),
-        name: 'project_id',
-        options: [
-          { label: t('Current Project'), key: this.currentProjectId },
-          { label: t('All'), key: 'all' },
-        ],
-      },
-    ];
-    return filters;
-  }
-}
-
-export default inject('rootStore')(observer(ExtNetwork));

src/pages/network/containers/Network/Network.jsx

@@ -0,0 +1,168 @@
+// 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 { networkColumns } from 'resources/network';
+import { NetworkStore } from 'stores/neutron/network';
+import { yesNoOptions } from 'utils/constants';
+import actionConfigs from './actions';
+
+export class Networks extends Base {
+  init() {
+    this.store = new NetworkStore();
+    this.downloadStore = new NetworkStore();
+  }
+
+  get isFilterByBackend() {
+    return true;
+  }
+
+  get isSortByBackend() {
+    return true;
+  }
+
+  get defaultSortKey() {
+    return 'status';
+  }
+
+  get policy() {
+    return 'get_network';
+  }
+
+  get name() {
+    return t('networks');
+  }
+
+  get actionConfigs() {
+    return actionConfigs;
+  }
+
+  get hasTab() {
+    return !this.isAdminPage;
+  }
+
+  get adminPageHasProjectFilter() {
+    return true;
+  }
+
+  get tab() {
+    if (this.isAdminPage) {
+      return null;
+    }
+    const { tab = 'projectNetwork' } = this.props;
+    return tab;
+  }
+
+  get isProjectTab() {
+    return this.tab === 'projectNetwork';
+  }
+
+  get isSharedTab() {
+    return this.tab === 'sharedNetwork';
+  }
+
+  get isExternalTab() {
+    return this.tab === 'externalNetwork';
+  }
+
+  get isAllTab() {
+    return this.tab === 'allNetwork';
+  }
+
+  updateFetchParamsByPage = (params) => {
+    if (this.isAdminPage || this.isAllTab) {
+      return {
+        ...params,
+        all_projects: true,
+      };
+    }
+    if (this.isProjectTab) {
+      return {
+        ...params,
+        project_id: this.currentProjectId,
+      };
+    }
+    if (this.isSharedTab) {
+      return {
+        ...params,
+        shared: true,
+      };
+    }
+    if (this.isExternalTab) {
+      return {
+        ...params,
+        'router:external': true,
+      };
+    }
+    return { ...params };
+  };
+
+  getColumns() {
+    const columns = networkColumns(this);
+    if (this.isAdminPage || this.isAllTab) {
+      columns.splice(1, 0, {
+        title: t('Project ID/Name'),
+        dataIndex: 'project_name',
+        isHideable: true,
+        sortKey: 'project_id',
+      });
+      return columns;
+    }
+    if (this.isProjectTab) {
+      return columns.filter((it) => it.dataIndex !== 'project_id');
+    }
+    if (this.isSharedTab) {
+      return columns.filter((it) => it.dataIndex !== 'shared');
+    }
+    if (this.isExternalTab) {
+      return columns.filter((it) => it.dataIndex !== 'router:external');
+    }
+    return columns;
+  }
+
+  get searchFilters() {
+    const nameFilter = {
+      label: t('Name'),
+      name: 'name',
+    };
+    const sharedFilter = {
+      label: t('Shared'),
+      name: 'shared',
+      options: yesNoOptions,
+    };
+    const externalFilter = {
+      label: t('External'),
+      name: 'router:external',
+      options: yesNoOptions,
+    };
+    const projectFilter = {
+      label: t('Project Range'),
+      name: 'project_id',
+      options: [
+        { label: t('Current Project'), key: this.currentProjectId },
+        { label: t('All'), key: 'all' },
+      ],
+    };
+    if (this.isSharedTab) {
+      return [nameFilter, externalFilter, projectFilter];
+    }
+    if (this.isExternalTab) {
+      return [nameFilter, sharedFilter, projectFilter];
+    }
+    return [nameFilter, sharedFilter, externalFilter];
+  }
+}
+
+export default inject('rootStore')(observer(Networks));

src/pages/network/containers/Network/ProjectNetwork.jsx

@@ -1,87 +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 { networkColumns } from 'resources/network';
-import { NetworkStore } from 'stores/neutron/network';
-import { yesNoOptions } from 'utils/constants';
-import actionConfigs from './actions';
-
-export class ProjectNetwork extends Base {
-  init() {
-    this.store = new NetworkStore();
-    this.downloadStore = new NetworkStore();
-  }
-
-  get isFilterByBackend() {
-    return true;
-  }
-
-  get isSortByBackend() {
-    return true;
-  }
-
-  get defaultSortKey() {
-    return 'status';
-  }
-
-  get policy() {
-    return 'get_network';
-  }
-
-  get name() {
-    return t('networks');
-  }
-
-  get actionConfigs() {
-    return actionConfigs;
-  }
-
-  get hasTab() {
-    return true;
-  }
-
-  updateFetchParamsByPage = (params) => ({
-    ...params,
-    project_id: this.currentProjectId,
-  });
-
-  getColumns = () => {
-    const columns = networkColumns(this);
-    return columns.filter((it) => it.dataIndex !== 'project_id');
-  };
-
-  get searchFilters() {
-    const filters = [
-      {
-        label: t('Name'),
-        name: 'name',
-      },
-      {
-        label: t('Shared'),
-        name: 'shared',
-        options: yesNoOptions,
-      },
-      {
-        label: t('External'),
-        name: 'router:external',
-        options: yesNoOptions,
-      },
-    ];
-    return filters;
-  }
-}
-
-export default inject('rootStore')(observer(ProjectNetwork));

src/pages/network/containers/Network/SharedNetwork.jsx

@@ -1,90 +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 { networkColumns } from 'resources/network';
-import { NetworkStore } from 'stores/neutron/network';
-import { yesNoOptions } from 'utils/constants';
-import actionConfigs from './actions';
-
-export class SharedNetwork extends Base {
-  init() {
-    this.store = new NetworkStore();
-    this.downloadStore = new NetworkStore();
-  }
-
-  get isFilterByBackend() {
-    return true;
-  }
-
-  get isSortByBackend() {
-    return true;
-  }
-
-  get defaultSortKey() {
-    return 'status';
-  }
-
-  get policy() {
-    return 'get_network';
-  }
-
-  get name() {
-    return t('networks');
-  }
-
-  get actionConfigs() {
-    return actionConfigs;
-  }
-
-  get hasTab() {
-    return true;
-  }
-
-  updateFetchParamsByPage = (params) => ({
-    ...params,
-    shared: true,
-  });
-
-  getColumns = () => {
-    const columns = networkColumns(this);
-    return columns.filter((it) => it.dataIndex !== 'shared');
-  };
-
-  get searchFilters() {
-    const filters = [
-      {
-        label: t('Name'),
-        name: 'name',
-      },
-      {
-        label: t('Project Range'),
-        name: 'project_id',
-        options: [
-          { label: t('Current Project'), key: this.currentProjectId },
-          { label: t('All'), key: 'all' },
-        ],
-      },
-      {
-        label: t('External'),
-        name: 'router:external',
-        options: yesNoOptions,
-      },
-    ];
-    return filters;
-  }
-}
-
-export default inject('rootStore')(observer(SharedNetwork));

src/pages/network/containers/Network/index.jsx

@@ -14,10 +14,7 @@
 
 import { observer, inject } from 'mobx-react';
 import Base from 'containers/TabList';
-import ProjectNetwork from './ProjectNetwork';
-import SharedNetwork from './SharedNetwork';
-import ExtNetwork from './ExtNetwork';
-import AdminNetwork from './AdminNetwork';
+import NetworkTab from './Network';
 
 @inject('rootStore')
 @observer
@@ -27,24 +24,24 @@ export default class Network extends Base {
       {
         title: t('Current Project Network'),
         key: 'projectNetwork',
-        component: ProjectNetwork,
+        component: NetworkTab,
       },
       {
         title: t('Shared Network'),
         key: 'sharedNetwork',
-        component: SharedNetwork,
+        component: NetworkTab,
       },
       {
         title: t('External Network'),
         key: 'externalNetwork',
-        component: ExtNetwork,
+        component: NetworkTab,
       },
     ];
     if (this.hasAdminRole) {
       tabs.push({
         title: t('All Network'),
         key: 'allNetwork',
-        component: AdminNetwork,
+        component: NetworkTab,
       });
     }
     return tabs;

src/pages/network/routes/index.js

@@ -15,7 +15,7 @@
 import BaseLayout from 'layouts/Basic';
 import E404 from 'pages/base/containers/404';
 import Network from '../containers/Network';
-import AdminNetwork from '../containers/Network/AdminNetwork';
+import AdminNetwork from '../containers/Network/Network';
 import NetworkDetail from '../containers/Network/Detail';
 import Router from '../containers/Router';
 import FloatingIp from '../containers/FloatingIp';

src/pages/user-center/containers/Credentials/actions/Create.jsx

@@ -26,7 +26,6 @@ export class Create extends ModalAction {
 
   static title = t('Create Application Credentials');
 
-
   static get modalSize() {
     return 'middle';
   }
@@ -113,4 +112,4 @@ export class Create extends ModalAction {
   }
 }
 
-export default inject('rootStore')(observer(Create))
+export default inject('rootStore')(observer(Create));

src/pages/user-center/containers/Credentials/index.jsx

@@ -120,4 +120,4 @@ export class Credentials extends Base {
   }
 }
 
-export default inject('rootStore')(observer(Credentials))
+export default inject('rootStore')(observer(Credentials));