From 07b381395c2f4f994e021c4f24498ddff4c592a9 Mon Sep 17 00:00:00 2001 From: "Jingwei.Zhang" Date: Fri, 17 Sep 2021 16:16:24 +0800 Subject: [PATCH] feat: Refactor network list page Refactor network list page Change-Id: Idd5e972e7c63dbc9e7fdd3c2f2e22cfa60fd67c3 --- .../containers/Network/AdminNetwork.jsx | 99 ----------- .../network/containers/Network/ExtNetwork.jsx | 90 ---------- .../network/containers/Network/Network.jsx | 168 ++++++++++++++++++ .../containers/Network/ProjectNetwork.jsx | 87 --------- .../containers/Network/SharedNetwork.jsx | 90 ---------- .../network/containers/Network/index.jsx | 13 +- src/pages/network/routes/index.js | 2 +- .../containers/Credentials/actions/Create.jsx | 3 +- .../containers/Credentials/index.jsx | 2 +- 9 files changed, 176 insertions(+), 378 deletions(-) delete mode 100644 src/pages/network/containers/Network/AdminNetwork.jsx delete mode 100644 src/pages/network/containers/Network/ExtNetwork.jsx create mode 100644 src/pages/network/containers/Network/Network.jsx delete mode 100644 src/pages/network/containers/Network/ProjectNetwork.jsx delete mode 100644 src/pages/network/containers/Network/SharedNetwork.jsx diff --git a/src/pages/network/containers/Network/AdminNetwork.jsx b/src/pages/network/containers/Network/AdminNetwork.jsx deleted file mode 100644 index d6c9dc90..00000000 --- a/src/pages/network/containers/Network/AdminNetwork.jsx +++ /dev/null @@ -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) =>
{it.name}:
{it.cidr}
); - // } - - 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)); diff --git a/src/pages/network/containers/Network/ExtNetwork.jsx b/src/pages/network/containers/Network/ExtNetwork.jsx deleted file mode 100644 index 0d847563..00000000 --- a/src/pages/network/containers/Network/ExtNetwork.jsx +++ /dev/null @@ -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)); diff --git a/src/pages/network/containers/Network/Network.jsx b/src/pages/network/containers/Network/Network.jsx new file mode 100644 index 00000000..40e5cba7 --- /dev/null +++ b/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)); diff --git a/src/pages/network/containers/Network/ProjectNetwork.jsx b/src/pages/network/containers/Network/ProjectNetwork.jsx deleted file mode 100644 index 7efd8a90..00000000 --- a/src/pages/network/containers/Network/ProjectNetwork.jsx +++ /dev/null @@ -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)); diff --git a/src/pages/network/containers/Network/SharedNetwork.jsx b/src/pages/network/containers/Network/SharedNetwork.jsx deleted file mode 100644 index 25683d9b..00000000 --- a/src/pages/network/containers/Network/SharedNetwork.jsx +++ /dev/null @@ -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)); diff --git a/src/pages/network/containers/Network/index.jsx b/src/pages/network/containers/Network/index.jsx index 7487456d..fc756e60 100644 --- a/src/pages/network/containers/Network/index.jsx +++ b/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; diff --git a/src/pages/network/routes/index.js b/src/pages/network/routes/index.js index 262539e9..77f59c7d 100644 --- a/src/pages/network/routes/index.js +++ b/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'; diff --git a/src/pages/user-center/containers/Credentials/actions/Create.jsx b/src/pages/user-center/containers/Credentials/actions/Create.jsx index e7b4ea62..8a178333 100644 --- a/src/pages/user-center/containers/Credentials/actions/Create.jsx +++ b/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)) \ No newline at end of file +export default inject('rootStore')(observer(Create)); diff --git a/src/pages/user-center/containers/Credentials/index.jsx b/src/pages/user-center/containers/Credentials/index.jsx index a4d3e5a2..ea4eba33 100644 --- a/src/pages/user-center/containers/Credentials/index.jsx +++ b/src/pages/user-center/containers/Credentials/index.jsx @@ -120,4 +120,4 @@ export class Credentials extends Base { } } -export default inject('rootStore')(observer(Credentials)) \ No newline at end of file +export default inject('rootStore')(observer(Credentials));