fix: Fix workspace overview page cluster switch

kubesphere · Jul 13, 2020 · 2f6b3c2 · 2f6b3c2
1 parent 590de50
commit 2f6b3c2
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 106 deletions.
diff --git a/src/components/Cards/Monitoring/Controller/index.scss b/src/components/Cards/Monitoring/Controller/index.scss
@@ -19,13 +19,8 @@
 
 .operations {
   position: relative;
-  z-index: 100;
   display: flex;
 
-  &.active {
-    z-index: 102;
-  }
-
   .button {
     padding: 6px;
     margin-left: 12px;

diff --git a/src/components/Modals/Monitoring/ApplicationResource/index.jsx b/src/components/Modals/Monitoring/ApplicationResource/index.jsx
@@ -25,7 +25,6 @@ import { isEmpty, get } from 'lodash'
 import { getLocalTime, getDisplayName } from 'utils'
 import { getSuitableValue, getAreaChartOps } from 'utils/monitoring'
 import ProjectStore from 'stores/project'
-import WorkspaceStore from 'stores/workspace'
 import ClusterMonitorStore from 'stores/monitoring/cluster'
 
 import { Icon, Select, Table } from '@pitrix/lego-ui'
@@ -57,15 +56,15 @@ export default class ResourceMonitorModal extends React.Component {
   constructor(props) {
     super(props)
 
+    this.workspaceStore = props.workspaceStore
+
     this.state = {
-      filter: {
-        cluster: get(props, 'cluster', ''),
-        namespace: get(props.detail, 'namespace', 'all'),
-      },
+      cluster: this.workspaceStore
+        ? this.workspaceStore.cluster
+        : get(props, 'cluster', ''),
+      namespace: get(props.detail, 'namespace', 'all'),
     }
 
-    this.workspaceStore = new WorkspaceStore()
-
     this.projectStore = new ProjectStore()
 
     this.monitorStore = new ClusterMonitorStore()
@@ -85,6 +84,8 @@ export default class ResourceMonitorModal extends React.Component {
     return this.workspaceStore.clusters.data.map(item => ({
       label: item.name,
       value: item.name,
+      cluster: item,
+      disabled: !item.isReady,
     }))
   }
 
@@ -111,34 +112,27 @@ export default class ResourceMonitorModal extends React.Component {
   async componentDidUpdate(prevProps) {
     const { visible } = this.props
     if (visible && visible !== prevProps.visible) {
-      await this.fetchClusters()
-      this.fetchData()
-    }
-  }
-
-  async fetchClusters(params = {}) {
-    if (this.props.workspace) {
-      await this.workspaceStore.fetchClusters({
-        workspace: this.props.workspace,
-        ...params,
-      })
-      const cluster =
-        this.workspaceStore.clusters.data.find(item => item.isReady) || {}
+      const { workspaceStore } = this.props
       this.setState(
-        ({ filter }) => ({
-          filter: { ...filter, cluster: cluster.name },
-        }),
-        this.fetchNamespaces
+        {
+          cluster: workspaceStore
+            ? workspaceStore.cluster
+            : get(this.props, 'cluster', ''),
+        },
+        async () => {
+          await this.fetchNamespaces()
+          await this.fetchData()
+        }
       )
-    } else {
-      this.fetchNamespaces()
     }
   }
 
   fetchNamespaces(params = {}) {
-    if (this.state.filter.cluster) {
+    const { cluster } = this.state
+
+    if (cluster) {
       this.projectStore.fetchList({
-        cluster: this.state.filter.cluster,
+        cluster,
         workspace: this.props.workspace,
         ...params,
       })
@@ -149,37 +143,18 @@ export default class ResourceMonitorModal extends React.Component {
     this.monitorStore.fetchApplicationResourceMetrics({
       metrics: [this.metricType],
       workspace: this.props.workspace,
-      ...this.state.filter,
+      ...this.state,
       ...params,
     })
   }
 
   handleClusterChange = cluster => {
-    this.setState(
-      ({ filter }) => ({
-        filter: { ...filter, cluster },
-      }),
-      this.fetchNamespaces
-    )
-  }
-
-  hanldeClusterScrollBottom = () => {
-    if (
-      !this.workspaceStore.clusters.isLoading &&
-      this.workspaceStore.clusters.data.length <
-        this.workspaceStore.clusters.total
-    ) {
-      this.fetchClusters({
-        page: this.workspaceStore.clusters.page + 1,
-        more: true,
-      })
-    }
+    this.workspaceStore && this.workspaceStore.selectCluster(cluster)
+    this.setState({ cluster }, this.fetchNamespaces)
   }
 
   handleNamespaceChange = namespace => {
-    this.setState(({ filter }) => ({
-      filter: { ...filter, namespace },
-    }))
+    this.setState({ namespace })
   }
 
   hanldeNamespaceScrollBottom = () => {
@@ -196,12 +171,9 @@ export default class ResourceMonitorModal extends React.Component {
 
   handleSubmit = () => {
     const formData = this.formRef.current && this.formRef.current.getData()
-    const filter = {
-      ...formData,
-    }
-    this.setState({ filter }, () => {
+    this.setState(formData, () => {
       this.fetchData({
-        ...filter,
+        ...formData,
         ...MonitorOptions,
       })
     })
@@ -233,9 +205,9 @@ export default class ResourceMonitorModal extends React.Component {
   )
 
   renderFilterForm() {
-    const { cluster, namespace } = this.state.filter
+    const { cluster, namespace } = this.state
     const formData = {
-      ...this.state.filter,
+      ...this.state,
     }
 
     return (
@@ -248,14 +220,8 @@ export default class ResourceMonitorModal extends React.Component {
               defaultValue={cluster}
               options={this.clusters}
               onChange={this.handleClusterChange}
-              onBlurResetsInput={false}
-              onCloseResetsInput={false}
-              openOnClick={true}
-              isLoadingAtBottom
               valueRenderer={this.clusterValueRenderer}
               optionRenderer={this.clusterOptionRenderer}
-              isLoading={this.workspaceStore.clusters.isLoading}
-              onMenuScrollToBottom={this.hanldeClusterScrollBottom}
             />
           </Form.Item>
         )}

diff --git a/src/pages/clusters/containers/Monitor/Resource/Usage/Physical/index.jsx b/src/pages/clusters/containers/Monitor/Resource/Usage/Physical/index.jsx
@@ -179,6 +179,7 @@ class PhysicalResource extends React.Component {
           detail={selectItem}
           cluster={this.cluster}
           workspace={this.workspace}
+          workspaceStore={this.props.workspaceStore}
           onCancel={this.hideModal}
         />
       </div>

diff --git a/src/pages/clusters/containers/Monitor/Resource/Usage/Virtual/index.jsx b/src/pages/clusters/containers/Monitor/Resource/Usage/Virtual/index.jsx
@@ -228,6 +228,7 @@ class VirtualResource extends React.Component {
           detail={selectItem}
           cluster={this.cluster}
           workspace={this.workspace}
+          workspaceStore={this.props.workspaceStore}
           onCancel={this.hideModal}
         />
       </div>

diff --git a/src/pages/workspaces/containers/Overview/ResourceUsage/Physical/index.jsx b/src/pages/workspaces/containers/Overview/ResourceUsage/Physical/index.jsx
@@ -76,14 +76,14 @@ export default class PhysicalResource extends Base {
   })
 
   renderClusters() {
-    const { clusterProps } = this.props
+    const { workspace, cluster, ...clusterProps } = this.props
     if (clusterProps.options.length) {
-      return <Select {...clusterProps} />
+      return <Select value={cluster} {...clusterProps} />
     }
   }
 
   fetchData = params => {
-    this.monitorStore.cluster = this.props.clusterProps.cluster
+    this.monitorStore.cluster = this.props.cluster
 
     this.monitorStore.fetchMetrics({
       workspace: this.workspace,

diff --git a/src/pages/workspaces/containers/Overview/ResourceUsage/Virtual/index.jsx b/src/pages/workspaces/containers/Overview/ResourceUsage/Virtual/index.jsx
@@ -41,6 +41,12 @@ const MetricTypes = {
 @inject('rootStore')
 @observer
 export default class VirtualResource extends Base {
+  componentDidUpdate(prevProps) {
+    if (prevProps.cluster !== this.props.cluster) {
+      this.fetchData()
+    }
+  }
+
   get workspace() {
     return this.props.workspace
   }
@@ -117,14 +123,14 @@ export default class VirtualResource extends Base {
   })
 
   renderClusters() {
-    const { clusterProps } = this.props
+    const { workspace, cluster, ...clusterProps } = this.props
     if (clusterProps.options.length) {
-      return <Select {...clusterProps} />
+      return <Select value={cluster} {...clusterProps} />
     }
   }
 
   fetchData = params => {
-    this.monitorStore.cluster = this.props.clusterProps.cluster
+    this.monitorStore.cluster = this.props.cluster
 
     this.monitorStore.fetchMetrics({
       workspace: this.workspace,

diff --git a/src/pages/workspaces/containers/Overview/ResourceUsage/index.jsx b/src/pages/workspaces/containers/Overview/ResourceUsage/index.jsx
@@ -30,16 +30,14 @@ import styles from './index.scss'
 @inject('rootStore', 'workspaceStore')
 @observer
 class ResourceUsage extends React.Component {
-  state = {
-    cluster: this.defaultCluster,
-  }
+  workspaceStore = this.props.workspaceStore
 
   get workspace() {
     return this.props.match.params.workspace
   }
 
   get clusters() {
-    return this.props.workspaceStore.clusters.data
+    return this.workspaceStore.clusters.data
   }
 
   get clustersOpts() {
@@ -51,19 +49,15 @@ class ResourceUsage extends React.Component {
     }))
   }
 
-  get defaultCluster() {
-    const { name } = this.clusters.find(cluster => cluster.isReady) || {}
-    return name
-  }
-
   get clusterProps() {
     return {
       className: styles.clusterSelector,
-      value: this.state.cluster,
+      cluster: this.workspaceStore.cluster,
       options: this.clustersOpts,
       onChange: this.handleClusterChange,
       valueRenderer: this.valueRenderer,
       optionRenderer: this.optionRenderer,
+      workspaceStore: this.workspaceStore,
     }
   }
 
@@ -81,7 +75,7 @@ class ResourceUsage extends React.Component {
   )
 
   handleClusterChange = cluster => {
-    this.setState({ cluster })
+    this.workspaceStore.selectCluster(cluster)
   }
 
   renderEmpty() {
@@ -104,11 +98,11 @@ class ResourceUsage extends React.Component {
           <>
             <PhysicalResource
               workspace={this.workspace}
-              clusterProps={this.clusterProps}
+              {...this.clusterProps}
             />
             <VirtualResource
               workspace={this.workspace}
-              clusterProps={this.clusterProps}
+              {...this.clusterProps}
             />
           </>
         ) : (

diff --git a/src/pages/workspaces/containers/Overview/UsageRanking/index.jsx b/src/pages/workspaces/containers/Overview/UsageRanking/index.jsx
@@ -46,10 +46,6 @@ class Ranking extends React.Component {
   constructor(props) {
     super(props)
 
-    this.state = {
-      cluster: '',
-    }
-
     this.store = new Store({
       workspace: this.workspace,
       limit: 10,
@@ -89,26 +85,19 @@ class Ranking extends React.Component {
   }
 
   fetchMetrics = () => {
-    if (this.state.cluster) {
-      this.store.cluster = this.state.cluster
+    if (this.workspaceStore.cluster) {
+      this.store.cluster = this.workspaceStore.cluster
       this.store.fetchAll()
     }
   }
 
   componentDidMount() {
-    const cluster =
-      this.workspaceStore.clusters.data.find(item => item.isReady) || {}
-    if (cluster) {
-      this.setState({ cluster: cluster.name }, () => {
-        this.fetchMetrics()
-      })
-    }
+    this.fetchMetrics()
   }
 
   handleClusterChange = cluster => {
-    this.setState({ cluster }, () => {
-      this.fetchMetrics()
-    })
+    this.workspaceStore.selectCluster(cluster)
+    this.fetchMetrics()
   }
 
   render() {
@@ -142,7 +131,7 @@ class Ranking extends React.Component {
         <div className={styles.toolbar_filter}>
           <Select
             options={this.clusters}
-            value={this.state.cluster}
+            value={this.workspaceStore.cluster}
             onChange={this.handleClusterChange}
             valueRenderer={this.valueRenderer}
             optionRenderer={this.optionRenderer}
@@ -174,7 +163,7 @@ class Ranking extends React.Component {
         <div>
           <Table
             store={this.store}
-            cluster={this.state.cluster}
+            cluster={this.workspaceStore.cluster}
             workspace={this.workspace}
           />
           {this.renderPagination()}