From 19fab7e17ffdb8b423357e075ff6cc64f3c34262 Mon Sep 17 00:00:00 2001 From: "Jingwei.Zhang" Date: Wed, 25 Aug 2021 17:25:36 +0800 Subject: [PATCH] fix: Fix refresh data in detail page after finishing action 1. Fix edit metadata success hint 2. Fix manage image metadata success hint 3. Fix create/edit project modal top padding 4. Fix edit user modal top padding 5. Fix create user group modal top padding 6. Fix refresh list page in detail after finishing action in detail page 7. Remove useless fetch in base detail page Change-Id: I80fe346cc0be4bdb8607088578fa2acb446cf084 --- src/containers/BaseDetail/index.jsx | 27 +++++++++---------- src/containers/List/index.jsx | 14 ++++++++++ src/containers/TabDetail/index.jsx | 12 ++++++--- .../BareMetalNode/Detail/BaseDetail.jsx | 5 ---- .../containers/Flavor/Detail/BaseDetail.jsx | 5 ---- .../containers/Image/Detail/BaseDetail.jsx | 5 ---- .../Image/actions/ManageMetadata.jsx | 2 +- .../containers/Keypair/Detail/BaseDetail.jsx | 5 ---- .../containers/Metadata/Detail/BaseDetail.jsx | 5 ---- .../containers/Metadata/actions/Edit.jsx | 4 +++ .../NeutronAgent/Detail/BaseDetail.jsx | 5 ---- .../containers/Stack/Detail/BaseDetail.jsx | 2 -- .../containers/Project/Detail/index.jsx | 4 +++ .../containers/Project/actions/Create.jsx | 4 --- .../containers/Project/actions/Edit.jsx | 4 --- .../identity/containers/User/actions/Edit.jsx | 4 --- .../containers/UserGroup/actions/Create.jsx | 4 --- .../Listener/Detail/BaseDetail.jsx | 4 +++ .../containers/Network/Detail/Detail.jsx | 2 -- .../QoSPolicy/Detail/BaseDetail.jsx | 2 -- .../containers/Router/Detail/BaseDetail.jsx | 5 ---- .../Router/Port/Detail/BaseDetail.jsx | 5 ---- .../Detail/BaseDetail/index.jsx | 2 -- .../containers/Backup/Detail/BaseDetail.jsx | 2 -- .../containers/Snapshot/Detail/BaseDetail.jsx | 2 -- .../containers/Volume/Detail/BaseDetail.jsx | 2 -- .../VolumeType/Detail/BaseDetail.jsx | 5 ---- 27 files changed, 49 insertions(+), 93 deletions(-) diff --git a/src/containers/BaseDetail/index.jsx b/src/containers/BaseDetail/index.jsx index ad00e52b..3121f124 100644 --- a/src/containers/BaseDetail/index.jsx +++ b/src/containers/BaseDetail/index.jsx @@ -16,7 +16,7 @@ import React from 'react'; import classnames from 'classnames'; import Card from 'components/DetailCard'; import { toJS } from 'mobx'; -import { has, isEmpty } from 'lodash'; +import { has } from 'lodash'; import { isAdminPage } from 'utils/index'; import styles from './index.less'; @@ -78,24 +78,23 @@ export default class BaseDetail extends React.Component { return isAdminPage(pathname); } + get shouldFetchDetail() { + return false; + } + getUrl(path, adminStr) { return this.isAdminPage ? `${path}${adminStr || '-admin'}` : path; } - getDetailData = () => { - const { detail } = this.props; - if (!detail || isEmpty(detail)) { - this.fetchData(); - } - }; - fetchData = (params) => { - this.store - .fetchDetail({ - id: this.id, - ...params, - }) - .catch(this.catch); + if (this.shouldFetchDetail && this.store.fetchDetail) { + this.store + .fetchDetail({ + id: this.id, + ...params, + }) + .catch(this.catch); + } }; init() { diff --git a/src/containers/List/index.jsx b/src/containers/List/index.jsx index b90a534d..13977a46 100644 --- a/src/containers/List/index.jsx +++ b/src/containers/List/index.jsx @@ -85,6 +85,20 @@ export default class BaseList extends React.Component { }); } + componentDidUpdate(prevProps) { + if (this.isInDetailPage) { + const { detail: oldDetail } = prevProps; + const { detail: newDetail } = this.props; + if ( + !isEmpty(oldDetail) && + !isEmpty(newDetail) && + !isEqual(oldDetail, newDetail) + ) { + this.handleRefresh(true); + } + } + } + componentWillUnmount() { this.unsubscribe && this.unsubscribe(); this.disposer && this.disposer(); diff --git a/src/containers/TabDetail/index.jsx b/src/containers/TabDetail/index.jsx index 34e593a4..0ed1ddde 100644 --- a/src/containers/TabDetail/index.jsx +++ b/src/containers/TabDetail/index.jsx @@ -170,6 +170,11 @@ export default class DetailBase extends React.Component { return []; } + // After the operation, the refreshed Tab needs to be forced to load + get forceLoadingTabs() { + return []; + } + handleDetailInfo = () => { const { collapsed } = this.state; this.setState( @@ -238,8 +243,8 @@ export default class DetailBase extends React.Component { this.fetchDataWithPolicy(true); }; - refreshDetailByAction = () => { - this.fetchDataWithPolicy(true); + refreshDetailByAction = (silence) => { + this.fetchDataWithPolicy(silence); }; catch = (e) => { @@ -276,7 +281,8 @@ export default class DetailBase extends React.Component { if (success && isDelete) { this.goBack(); } else { - this.refreshDetailByAction(); + const silence = !this.forceLoadingTabs.includes(this.tab.key); + this.refreshDetailByAction(silence); } }; diff --git a/src/pages/compute/containers/BareMetalNode/Detail/BaseDetail.jsx b/src/pages/compute/containers/BareMetalNode/Detail/BaseDetail.jsx index 19184cb1..97917e20 100644 --- a/src/pages/compute/containers/BareMetalNode/Detail/BaseDetail.jsx +++ b/src/pages/compute/containers/BareMetalNode/Detail/BaseDetail.jsx @@ -14,17 +14,12 @@ import React from 'react'; import { inject, observer } from 'mobx-react'; -import { IronicStore } from 'stores/ironic/ironic'; import Base from 'containers/BaseDetail'; import SimpleTable from 'components/Tables/SimpleTable'; @inject('rootStore') @observer export default class BaseDetail extends Base { - init() { - this.store = new IronicStore(); - } - get leftCards() { const cards = [ this.baseInfoCard, diff --git a/src/pages/compute/containers/Flavor/Detail/BaseDetail.jsx b/src/pages/compute/containers/Flavor/Detail/BaseDetail.jsx index 2a3d8e82..ddf7cee4 100644 --- a/src/pages/compute/containers/Flavor/Detail/BaseDetail.jsx +++ b/src/pages/compute/containers/Flavor/Detail/BaseDetail.jsx @@ -14,7 +14,6 @@ import React from 'react'; import { inject, observer } from 'mobx-react'; -import { FlavorStore } from 'stores/nova/flavor'; import Base from 'containers/BaseDetail'; import { categoryHasIOPS, @@ -30,10 +29,6 @@ import { @inject('rootStore') @observer export default class BaseDetail extends Base { - init() { - this.store = new FlavorStore(); - } - get leftCards() { const { category, disk, usbType } = this.detailData; const isGPUType = isGpuCategory(category); diff --git a/src/pages/compute/containers/Image/Detail/BaseDetail.jsx b/src/pages/compute/containers/Image/Detail/BaseDetail.jsx index 84e4965a..4a70ab25 100644 --- a/src/pages/compute/containers/Image/Detail/BaseDetail.jsx +++ b/src/pages/compute/containers/Image/Detail/BaseDetail.jsx @@ -15,7 +15,6 @@ import React from 'react'; import { toJS } from 'mobx'; import { inject, observer } from 'mobx-react'; -import { ImageStore } from 'stores/glance/image'; import { imageProperties, imageVisibility, imageOS } from 'resources/image'; import Base from 'containers/BaseDetail'; import { isObject, isArray } from 'lodash'; @@ -24,10 +23,6 @@ import { Link } from 'react-router-dom'; @inject('rootStore') @observer export default class BaseDetail extends Base { - init() { - this.store = new ImageStore(); - } - get isImageDetail() { const { pathname } = this.props.location; return pathname.indexOf('image') >= 0; diff --git a/src/pages/compute/containers/Image/actions/ManageMetadata.jsx b/src/pages/compute/containers/Image/actions/ManageMetadata.jsx index c4e44b2d..e5641f67 100644 --- a/src/pages/compute/containers/Image/actions/ManageMetadata.jsx +++ b/src/pages/compute/containers/Image/actions/ManageMetadata.jsx @@ -34,7 +34,7 @@ export default class ManageMetadata extends ModalAction { } get name() { - return t('Manage host'); + return t('Manage Metadata'); } static get modalSize() { diff --git a/src/pages/compute/containers/Keypair/Detail/BaseDetail.jsx b/src/pages/compute/containers/Keypair/Detail/BaseDetail.jsx index 324f309f..b93c7e18 100644 --- a/src/pages/compute/containers/Keypair/Detail/BaseDetail.jsx +++ b/src/pages/compute/containers/Keypair/Detail/BaseDetail.jsx @@ -13,16 +13,11 @@ // limitations under the License. import { inject, observer } from 'mobx-react'; -import { KeypairStore } from 'stores/nova/keypair'; import Base from 'containers/BaseDetail'; @inject('rootStore') @observer export default class BaseDetail extends Base { - init() { - this.store = new KeypairStore(); - } - get leftCards() { return [this.keypairInfoCard]; } diff --git a/src/pages/configuration/containers/Metadata/Detail/BaseDetail.jsx b/src/pages/configuration/containers/Metadata/Detail/BaseDetail.jsx index c3a6505f..88d57286 100644 --- a/src/pages/configuration/containers/Metadata/Detail/BaseDetail.jsx +++ b/src/pages/configuration/containers/Metadata/Detail/BaseDetail.jsx @@ -14,17 +14,12 @@ import React from 'react'; import { inject, observer } from 'mobx-react'; -import { MetadataStore } from 'stores/glance/metadata'; import Base from 'containers/BaseDetail'; import styles from './styles.less'; @inject('rootStore') @observer export default class BaseDetail extends Base { - init() { - this.store = new MetadataStore(); - } - get leftCards() { return [this.baseInfoCard, this.resourceCard]; } diff --git a/src/pages/configuration/containers/Metadata/actions/Edit.jsx b/src/pages/configuration/containers/Metadata/actions/Edit.jsx index 60722c11..2d927ddd 100644 --- a/src/pages/configuration/containers/Metadata/actions/Edit.jsx +++ b/src/pages/configuration/containers/Metadata/actions/Edit.jsx @@ -33,6 +33,10 @@ export default class Edit extends ModalAction { return t('Edit metadata'); } + get instanceName() { + return this.item.display_name; + } + static policy = 'modify_metadef_namespace'; static allowed = () => Promise.resolve(true); diff --git a/src/pages/configuration/containers/SystemInfo/NeutronAgent/Detail/BaseDetail.jsx b/src/pages/configuration/containers/SystemInfo/NeutronAgent/Detail/BaseDetail.jsx index 04239041..4e460e4e 100644 --- a/src/pages/configuration/containers/SystemInfo/NeutronAgent/Detail/BaseDetail.jsx +++ b/src/pages/configuration/containers/SystemInfo/NeutronAgent/Detail/BaseDetail.jsx @@ -15,15 +15,10 @@ import React from 'react'; import { inject, observer } from 'mobx-react'; import Base from 'containers/BaseDetail'; -import { NeutronAgentStore } from 'stores/neutron/agent'; @inject('rootStore') @observer export default class BaseDetail extends Base { - init() { - this.store = new NeutronAgentStore(); - } - get leftCards() { return [this.baseCard]; } diff --git a/src/pages/heat/containers/Stack/Detail/BaseDetail.jsx b/src/pages/heat/containers/Stack/Detail/BaseDetail.jsx index 77ef09e4..8aaf7f63 100644 --- a/src/pages/heat/containers/Stack/Detail/BaseDetail.jsx +++ b/src/pages/heat/containers/Stack/Detail/BaseDetail.jsx @@ -20,8 +20,6 @@ import { rollbackTip } from 'resources/stack'; @inject('rootStore') @observer export default class BaseDetail extends Base { - fetchData = () => Promise.resolve(true); - get leftCards() { return [this.startCard, this.outputCard]; } diff --git a/src/pages/identity/containers/Project/Detail/index.jsx b/src/pages/identity/containers/Project/Detail/index.jsx index 8c51b2b0..f8986b67 100644 --- a/src/pages/identity/containers/Project/Detail/index.jsx +++ b/src/pages/identity/containers/Project/Detail/index.jsx @@ -47,6 +47,10 @@ export default class InstanceDetail extends Base { this.store = new ProjectStore(); } + get forceLoadingTabs() { + return ['quota']; + } + get detailInfos() { return [ { diff --git a/src/pages/identity/containers/Project/actions/Create.jsx b/src/pages/identity/containers/Project/actions/Create.jsx index fdaf9f7b..667dc7d6 100644 --- a/src/pages/identity/containers/Project/actions/Create.jsx +++ b/src/pages/identity/containers/Project/actions/Create.jsx @@ -68,10 +68,6 @@ class CreateForm extends ModalAction { return data; } - get listUrl() { - return this.getUrl('/identity/project'); - } - get domainList() { const { rootStore: { baseDomains }, diff --git a/src/pages/identity/containers/Project/actions/Edit.jsx b/src/pages/identity/containers/Project/actions/Edit.jsx index 842f5b81..b76fe8e9 100644 --- a/src/pages/identity/containers/Project/actions/Edit.jsx +++ b/src/pages/identity/containers/Project/actions/Edit.jsx @@ -52,10 +52,6 @@ class EditForm extends ModalAction { return {}; } - get listUrl() { - return this.getUrl('/identity/project'); - } - checkName = (rule, value) => { if (!value) { return Promise.reject(t('Please input')); diff --git a/src/pages/identity/containers/User/actions/Edit.jsx b/src/pages/identity/containers/User/actions/Edit.jsx index e427faf7..92887abd 100644 --- a/src/pages/identity/containers/User/actions/Edit.jsx +++ b/src/pages/identity/containers/User/actions/Edit.jsx @@ -56,10 +56,6 @@ class EditForm extends ModalAction { return Promise.resolve(true); } - get listUrl() { - return this.getUrl('/identity/user'); - } - get domainList() { return (this.userGroupStore.list.data || []).map((it) => ({ label: it.name, diff --git a/src/pages/identity/containers/UserGroup/actions/Create.jsx b/src/pages/identity/containers/UserGroup/actions/Create.jsx index fa5e941b..aebc755e 100644 --- a/src/pages/identity/containers/UserGroup/actions/Create.jsx +++ b/src/pages/identity/containers/UserGroup/actions/Create.jsx @@ -92,10 +92,6 @@ class CreateForm extends ModalAction { return data; } - get listUrl() { - return '/identity/user-group-admin'; - } - get domainList() { const { domains } = this.domainStore; return (domains || []).map((it) => ({ diff --git a/src/pages/network/containers/LoadBalancers/Listener/Detail/BaseDetail.jsx b/src/pages/network/containers/LoadBalancers/Listener/Detail/BaseDetail.jsx index 7d58dab9..58f4bf7a 100644 --- a/src/pages/network/containers/LoadBalancers/Listener/Detail/BaseDetail.jsx +++ b/src/pages/network/containers/LoadBalancers/Listener/Detail/BaseDetail.jsx @@ -28,6 +28,10 @@ export default class BaseDetail extends Base { } } + get shouldFetchDetail() { + return true; + } + init() { this.store = globalListenerStore; this.healthmonitorStore = new HealthMonitorStore(); diff --git a/src/pages/network/containers/Network/Detail/Detail.jsx b/src/pages/network/containers/Network/Detail/Detail.jsx index 99ce1b60..f418a242 100644 --- a/src/pages/network/containers/Network/Detail/Detail.jsx +++ b/src/pages/network/containers/Network/Detail/Detail.jsx @@ -18,8 +18,6 @@ import Base from 'containers/BaseDetail'; @inject('rootStore') @observer export default class BaseDetail extends Base { - fetchData = () => {}; - get leftCards() { const cards = [this.baseInfoCard]; return cards; diff --git a/src/pages/network/containers/QoSPolicy/Detail/BaseDetail.jsx b/src/pages/network/containers/QoSPolicy/Detail/BaseDetail.jsx index 1d155bff..b980b1e6 100644 --- a/src/pages/network/containers/QoSPolicy/Detail/BaseDetail.jsx +++ b/src/pages/network/containers/QoSPolicy/Detail/BaseDetail.jsx @@ -18,8 +18,6 @@ import Base from 'containers/BaseDetail'; @inject('rootStore') @observer export default class BaseDetail extends Base { - fetchData = () => Promise.resolve(true); - get leftCards() { return [...this.BandwidthCard, this.DSCPMarkingCard]; } diff --git a/src/pages/network/containers/Router/Detail/BaseDetail.jsx b/src/pages/network/containers/Router/Detail/BaseDetail.jsx index 6bfd59ad..a3877140 100644 --- a/src/pages/network/containers/Router/Detail/BaseDetail.jsx +++ b/src/pages/network/containers/Router/Detail/BaseDetail.jsx @@ -14,16 +14,11 @@ import React from 'react'; import { inject, observer } from 'mobx-react'; -import { RouterStore } from 'stores/neutron/router'; import Base from 'containers/BaseDetail'; @inject('rootStore') @observer export default class BaseDetail extends Base { - init() { - this.store = new RouterStore(); - } - get leftCards() { const cards = [this.aZoneCard]; return cards; diff --git a/src/pages/network/containers/Router/Port/Detail/BaseDetail.jsx b/src/pages/network/containers/Router/Port/Detail/BaseDetail.jsx index dbfeb7cd..0f6d4850 100644 --- a/src/pages/network/containers/Router/Port/Detail/BaseDetail.jsx +++ b/src/pages/network/containers/Router/Port/Detail/BaseDetail.jsx @@ -14,7 +14,6 @@ import React from 'react'; import { inject, observer } from 'mobx-react'; -import { PortStore } from 'stores/neutron/port'; import Base from 'containers/BaseDetail'; import { bindingTypes } from 'resources/port'; import { isEmpty } from 'lodash'; @@ -22,10 +21,6 @@ import { isEmpty } from 'lodash'; @inject('rootStore') @observer export default class BaseDetail extends Base { - init() { - this.store = new PortStore(); - } - get leftCards() { const cards = [this.portInfo]; const { diff --git a/src/pages/network/containers/VirtualAdapter/Detail/BaseDetail/index.jsx b/src/pages/network/containers/VirtualAdapter/Detail/BaseDetail/index.jsx index 1fab3d85..c73944c1 100644 --- a/src/pages/network/containers/VirtualAdapter/Detail/BaseDetail/index.jsx +++ b/src/pages/network/containers/VirtualAdapter/Detail/BaseDetail/index.jsx @@ -21,8 +21,6 @@ import { bindingTypes } from 'resources/port'; @inject('rootStore') @observer export default class BaseDetail extends Base { - componentDidMount() {} - get leftCards() { return [this.baseInfoCard]; } diff --git a/src/pages/storage/containers/Backup/Detail/BaseDetail.jsx b/src/pages/storage/containers/Backup/Detail/BaseDetail.jsx index 094a0652..cc1d0737 100644 --- a/src/pages/storage/containers/Backup/Detail/BaseDetail.jsx +++ b/src/pages/storage/containers/Backup/Detail/BaseDetail.jsx @@ -20,8 +20,6 @@ import { Link } from 'react-router-dom'; @inject('rootStore') @observer export default class BaseDetail extends Base { - fetchData = () => Promise.resolve(true); - get leftCards() { const cards = [this.volumeCard]; return cards; diff --git a/src/pages/storage/containers/Snapshot/Detail/BaseDetail.jsx b/src/pages/storage/containers/Snapshot/Detail/BaseDetail.jsx index c9538357..4a26e37c 100644 --- a/src/pages/storage/containers/Snapshot/Detail/BaseDetail.jsx +++ b/src/pages/storage/containers/Snapshot/Detail/BaseDetail.jsx @@ -20,8 +20,6 @@ import Base from 'containers/BaseDetail'; @inject('rootStore') @observer export default class BaseDetail extends Base { - fetchData = () => Promise.resolve(true); - get leftCards() { return [this.volumeCard]; } diff --git a/src/pages/storage/containers/Volume/Detail/BaseDetail.jsx b/src/pages/storage/containers/Volume/Detail/BaseDetail.jsx index cbbb9bf6..e9463c73 100644 --- a/src/pages/storage/containers/Volume/Detail/BaseDetail.jsx +++ b/src/pages/storage/containers/Volume/Detail/BaseDetail.jsx @@ -20,8 +20,6 @@ import Base from 'containers/BaseDetail'; @inject('rootStore') @observer export default class BaseDetail extends Base { - fetchData = () => Promise.resolve(true); - get leftCards() { const cards = [this.attachmentsCard]; if (this.detailData.volume_image_metadata) { diff --git a/src/pages/storage/containers/VolumeType/VolumeType/Detail/BaseDetail.jsx b/src/pages/storage/containers/VolumeType/VolumeType/Detail/BaseDetail.jsx index 45226d9d..816a9061 100644 --- a/src/pages/storage/containers/VolumeType/VolumeType/Detail/BaseDetail.jsx +++ b/src/pages/storage/containers/VolumeType/VolumeType/Detail/BaseDetail.jsx @@ -13,17 +13,12 @@ // limitations under the License. import { inject, observer } from 'mobx-react'; -import { VolumeTypeStore } from 'stores/cinder/volume-type'; import Base from 'containers/BaseDetail'; import { controls } from 'resources/volume-type'; @inject('rootStore') @observer export default class BaseDetail extends Base { - init() { - this.store = new VolumeTypeStore(); - } - get leftCards() { return [this.encryptionInfo]; }