fix: Fix service components in cluster overview page

kubesphere · Jun 9, 2020 · 0fcebff · 0fcebff
1 parent 04b5c54
commit 0fcebff
Showing 1 changed file with 51 additions and 9 deletions.
diff --git a/src/pages/clusters/containers/Overview/Dashboard/ServiceComponents/index.jsx b/src/pages/clusters/containers/Overview/Dashboard/ServiceComponents/index.jsx
@@ -17,7 +17,6 @@
  */
 
 import React, { Component } from 'react'
-import { toJS } from 'mobx'
 import { observer } from 'mobx-react'
 import { Link } from 'react-router-dom'
 import { Icon } from '@pitrix/lego-ui'
@@ -32,24 +31,67 @@ import styles from './index.scss'
 export default class ServiceComponents extends Component {
   store = new ComponentStore()
 
+  get configs() {
+    return [
+      {
+        type: 'kubesphere',
+        title: 'KubeSphere',
+      },
+      {
+        type: 'kubernetes',
+        title: 'Kubernetes',
+      },
+      {
+        type: 'openpitrix',
+        title: 'OpenPitrix',
+        disabled: !globals.app.hasKSModule('openpitrix'),
+      },
+      {
+        type: 'istio',
+        title: 'Istio',
+        disabled: !globals.app.hasKSModule('servicemesh'),
+      },
+      {
+        type: 'monitoring',
+        title: 'Monitoring',
+        disabled: !globals.app.hasKSModule('monitoring'),
+      },
+      {
+        type: 'logging',
+        title: 'Logging',
+        disabled: !globals.app.hasKSModule('logging'),
+      },
+      {
+        type: 'devops',
+        title: 'DevOps',
+        disabled: !globals.app.hasKSModule('devops'),
+      },
+    ]
+  }
+
   componentDidMount() {
     const { cluster } = this.props
     this.store.fetchList({ cluster })
   }
 
   render() {
     const { cluster } = this.props
-    const data = toJS(this.store.list.data)
     return (
       <Panel title={t('Service Components')}>
         <div className={styles.icons}>
-          {Object.keys(data).map(item => (
-            <span key={item} data-tooltip={item}>
-              <Link to={`/clusters/${cluster}/components?type=${item}`}>
-                <Icon name={COMPONENT_ICON_MAP[item]} size={44} clickable />
-              </Link>
-            </span>
-          ))}
+          {this.configs
+            .filter(item => !item.disabled)
+            .map(item => (
+              <span key={item.type} data-tooltip={item.title}>
+                <Link to={`/clusters/${cluster}/components?type=${item.type}`}>
+                  <Icon
+                    name={COMPONENT_ICON_MAP[item.type]}
+                    size={44}
+                    clickable
+                  />
+                </Link>
+              </span>
+            ))}
         </div>
       </Panel>
     )