fix: Fix issues

1. render empty tip in crd objects table 2. show kubernetes version in single cluster mode 3. add link for service components in cluster overview 4. add enter project in cluster project detail page
kubesphere · Jun 8, 2020 · f6c5717 · f6c5717
1 parent 0f3c8da
commit f6c5717
Show file tree

Hide file tree

Showing 14 changed files with 126 additions and 72 deletions.
diff --git a/src/components/Modals/RoleCreate/index.jsx b/src/components/Modals/RoleCreate/index.jsx
@@ -131,12 +131,6 @@ export default class CreateModal extends React.Component {
         okText={t('Edit Authorization')}
         visible={visible}
       >
-        <Form.Item
-          label={t(`${t('Role Name')}(${t('Alias')})`)}
-          desc={t('ALIAS_DESC')}
-        >
-          <Input name="metadata.annotations['kubesphere.io/alias-name']" />
-        </Form.Item>
         <Form.Item
           label={t('Role Identifier')}
           desc={t('NAME_DESC')}
@@ -152,6 +146,12 @@ export default class CreateModal extends React.Component {
         >
           <Input name="metadata.name" />
         </Form.Item>
+        <Form.Item
+          label={t(`${t('Role Name')}(${t('Alias')})`)}
+          desc={t('ALIAS_DESC')}
+        >
+          <Input name="metadata.annotations['kubesphere.io/alias-name']" />
+        </Form.Item>
         <Form.Item label={t('Description')}>
           <TextArea name="metadata.annotations['kubesphere.io/description']" />
         </Form.Item>

diff --git a/src/components/Tables/Base/Empty/index.jsx b/src/components/Tables/Base/Empty/index.jsx
@@ -19,6 +19,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import { isUndefined } from 'lodash'
 
 import { Icon } from '@pitrix/lego-ui'
 
@@ -42,17 +43,17 @@ export default class EmptyTable extends React.PureComponent {
   }
 
   render() {
-    const { module, name, desc, action, className } = this.props
-    const _desc =
-      desc ||
-      t.html(
-        `${name
-          .split(' ')
-          .join('_')
-          .toUpperCase()}_CREATE_DESC`
-      )
+    const { module, icon, name, desc, action, className } = this.props
+    const _desc = !isUndefined(desc)
+      ? desc
+      : t.html(
+          `${name
+            .split(' ')
+            .join('_')
+            .toUpperCase()}_CREATE_DESC`
+        )
 
-    const _icon = ICON_TYPES[module] || 'appcenter'
+    const _icon = icon || ICON_TYPES[module] || 'appcenter'
 
     return (
       <div className={classnames(styles.wrapper, className)}>

diff --git a/src/locales/zh/cluster.js b/src/locales/zh/cluster.js
@@ -101,6 +101,8 @@ export default {
 
   'All Projects': '全部项目',
 
+  'Enter the project': '进入项目',
+
   NO_CLUSTER_TIP: '请添加至少 1 个集群',
   NO_CLUSTER_TIP_DESC:
     '集群是一组运行着 Kubernetes 的节点（物理或者虚拟机）, Kubesphere 的功能也依托于集群中的节点来运行',

diff --git a/src/pages/clusters/containers/BaseInfo/index.jsx b/src/pages/clusters/containers/BaseInfo/index.jsx
@@ -79,6 +79,7 @@ export default class Overview extends React.Component {
   }
 
   fetchData = () => {
+    this.store.fetchVersion({ cluster: this.store.detail.name })
     this.monitorStore.fetchMetrics({
       cluster: this.store.detail.name,
       metrics: Object.values(MetricTypes),
@@ -165,7 +166,7 @@ export default class Overview extends React.Component {
             />
             {provider && <Text title={provider} description={t('Provider')} />}
             <Text
-              title={kubernetesVersion}
+              title={kubernetesVersion || this.store.version}
               description={t('Kubernetes Version')}
             />
             {actions.includes('edit') && globals.app.isMultiCluster && (

diff --git a/src/pages/clusters/containers/CustomResources/Detail/ResourceStatus/index.jsx b/src/pages/clusters/containers/CustomResources/Detail/ResourceStatus/index.jsx
@@ -117,6 +117,15 @@ export default class ResourceStatus extends React.Component {
     ]
   }
 
+  get emptyProps() {
+    const { kind } = this.props.detailStore.detail
+    return {
+      icon: 'select',
+      desc: '',
+      name: ` ${kind} ${t('resources')}`,
+    }
+  }
+
   render() {
     const { data, page, total, limit, isLoading } = this.store.list
     const pagination = { page, total, limit }
@@ -131,6 +140,7 @@ export default class ResourceStatus extends React.Component {
           itemActions={this.itemActions}
           enabledActions={this.enabledActions}
           pagination={pagination}
+          emptyProps={this.emptyProps}
           searchType="name"
           hideCustom
         />

diff --git a/src/pages/clusters/containers/CustomResources/index.jsx b/src/pages/clusters/containers/CustomResources/index.jsx
@@ -38,21 +38,21 @@ export default class CustomResources extends React.Component {
     const { getSortOrder } = this.props
     return [
       {
-        title: t('Name'),
-        dataIndex: 'name',
+        title: t('Kind'),
+        dataIndex: 'kind',
         search: true,
-        render: (name, record) => (
+        render: (kind, record) => (
           <Avatar
-            to={`/clusters/${cluster}/customresources/${name}`}
-            title={name}
+            to={`/clusters/${cluster}/customresources/${record.name}`}
+            title={kind}
             desc={`${record.group}/${record.latestVersion}`}
           />
         ),
       },
       {
-        title: t('Kind'),
-        key: 'kind',
-        dataIndex: 'kind',
+        title: t('Name'),
+        key: 'name',
+        dataIndex: 'name',
       },
       {
         title: t('Scope'),

diff --git a/src/pages/clusters/containers/Nodes/index.jsx b/src/pages/clusters/containers/Nodes/index.jsx
@@ -315,7 +315,7 @@ export default class Nodes extends React.Component {
             <Text
               title={
                 <Tooltip
-                  content={this.renderCPUTooltip(record)}
+                  content={this.renderMemoryTooltip(record)}
                   placement="right"
                 >
                   <div className={styles.resource}>

diff --git a/src/pages/clusters/containers/Overview/Dashboard/ClusterInfo/index.jsx b/src/pages/clusters/containers/Overview/Dashboard/ClusterInfo/index.jsx
@@ -23,13 +23,13 @@ import styles from './index.scss'
 
 export default class ClusterInfo extends Component {
   render() {
-    const { cluster } = this.props
+    const { cluster, version } = this.props
     return (
       <Panel title={t('Cluster Info')}>
         <div className={styles.level}>
           <Text title={cluster.provider} description={t('Provider')} />
           <Text
-            title={cluster.kubernetesVersion}
+            title={cluster.kubernetesVersion || version}
             description={t('Kubernetes Version')}
           />
         </div>

diff --git a/src/pages/clusters/containers/Overview/Dashboard/ServiceComponents/index.jsx b/src/pages/clusters/containers/Overview/Dashboard/ServiceComponents/index.jsx
@@ -19,6 +19,7 @@
 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'
 import { Panel } from 'components/Base'
 import { COMPONENT_ICON_MAP } from 'utils/constants'
@@ -37,13 +38,16 @@ export default class ServiceComponents extends Component {
   }
 
   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}>
-              <Icon name={COMPONENT_ICON_MAP[item]} size={44} clickable />
+              <Link to={`/clusters/${cluster}/components?type=${item}`}>
+                <Icon name={COMPONENT_ICON_MAP[item]} size={44} clickable />
+              </Link>
             </span>
           ))}
         </div>

diff --git a/src/pages/clusters/containers/Overview/Dashboard/ServiceComponents/index.scss b/src/pages/clusters/containers/Overview/Dashboard/ServiceComponents/index.scss
@@ -3,9 +3,7 @@
 .icons {
   :global {
     .icon {
-      background-color: $light-color01;
-
-
+      background-color: $light-color01; 
     }
   }
 

diff --git a/src/pages/clusters/containers/Overview/Dashboard/index.jsx b/src/pages/clusters/containers/Overview/Dashboard/index.jsx
@@ -32,6 +32,10 @@ import ServiceComponents from './ServiceComponents'
 @inject('clusterStore')
 @observer
 export default class Dashboard extends React.Component {
+  componentDidMount() {
+    this.cluster.fetchVersion(this.props.match.params)
+  }
+
   get cluster() {
     return this.props.clusterStore
   }
@@ -50,7 +54,9 @@ export default class Dashboard extends React.Component {
         />
         <Columns>
           <Column>
-            {globals.app.isMultiCluster && <ClusterInfo cluster={detail} />}
+            {globals.app.isMultiCluster && (
+              <ClusterInfo cluster={detail} version={this.cluster.version} />
+            )}
             <ServiceComponents cluster={match.params.cluster} />
             <ResourcesUsage cluster={match.params.cluster} />
             <Tools cluster={match.params.cluster} />

diff --git a/src/pages/clusters/containers/Projects/Detail/index.jsx b/src/pages/clusters/containers/Projects/Detail/index.jsx
@@ -54,48 +54,65 @@ export default class ProjectDetail extends React.Component {
     return `/clusters/${cluster}/projects`
   }
 
+  get routing() {
+    return this.props.rootStore.routing
+  }
+
   fetchData = () => {
     this.store.fetchDetail(this.props.match.params)
   }
 
-  getOperations = () => [
-    {
-      key: 'edit',
-      icon: 'pen',
-      text: t('Edit Info'),
-      action: 'edit',
-      onClick: () =>
-        this.trigger('resource.baseinfo.edit', {
-          type: t(this.name),
-          detail: toJS(this.store.detail),
-          success: this.fetchData,
-        }),
-    },
-    {
-      key: 'editQuota',
-      icon: 'pen',
-      text: t('Edit Quota'),
-      action: 'edit',
-      onClick: () =>
-        this.trigger('project.quota.edit', {
-          type: t(this.name),
-          detail: toJS(this.store.detail),
-        }),
-    },
-    {
-      key: 'delete',
-      icon: 'trash',
-      text: t('Delete'),
-      action: 'delete',
-      type: 'danger',
-      show: this.store.detail.workspace !== globals.config.systemWorkspace,
-      onClick: () =>
-        this.trigger('resource.delete', {
-          type: t(this.name),
-          detail: this.store.detail,
-        }),
-    },
-  ]
+  getOperations = () => {
+    const { workspace, cluster, name } = this.store.detail
+    return [
+      {
+        key: 'enter',
+        text: t('Enter the project'),
+        action: 'view',
+        type: 'control',
+        onClick: () =>
+          this.routing.push(
+            `/${workspace}/clusters/${cluster}/projects/${name}`
+          ),
+      },
+      {
+        key: 'edit',
+        icon: 'pen',
+        text: t('Edit Info'),
+        action: 'edit',
+        onClick: () =>
+          this.trigger('resource.baseinfo.edit', {
+            type: t(this.name),
+            detail: toJS(this.store.detail),
+            success: this.fetchData,
+          }),
+      },
+      {
+        key: 'editQuota',
+        icon: 'pen',
+        text: t('Edit Quota'),
+        action: 'edit',
+        onClick: () =>
+          this.trigger('project.quota.edit', {
+            type: t(this.name),
+            detail: toJS(this.store.detail),
+          }),
+      },
+      {
+        key: 'delete',
+        icon: 'trash',
+        text: t('Delete'),
+        action: 'delete',
+        type: 'danger',
+        show: this.store.detail.workspace !== globals.config.systemWorkspace,
+        onClick: () =>
+          this.trigger('resource.delete', {
+            type: t(this.name),
+            detail: this.store.detail,
+          }),
+      },
+    ]
+  }
 
   getAttrs = () => {
     const detail = toJS(this.store.detail)

diff --git a/src/pages/clusters/containers/ServiceComponents/index.jsx b/src/pages/clusters/containers/ServiceComponents/index.jsx
@@ -21,6 +21,7 @@ import { observer, inject } from 'mobx-react'
 import { isEmpty } from 'lodash'
 import { RadioGroup, RadioButton, Tag, Loading } from '@pitrix/lego-ui'
 import Banner from 'components/Cards/Banner'
+import { parse } from 'qs'
 
 import ComponentStore from 'stores/component'
 
@@ -34,8 +35,10 @@ export default class ServiceComponents extends React.Component {
   constructor(props) {
     super(props)
 
+    const { type } = parse(location.search.slice(1)) || {}
+
     this.state = {
-      type: 'kubesphere',
+      type: type || 'kubesphere',
     }
 
     this.configs = this.getConfigs()

diff --git a/src/stores/cluster/index.js b/src/stores/cluster/index.js
@@ -37,6 +37,9 @@ export default class ClusterStore extends Base {
   @observable
   isValidating = false
 
+  @observable
+  version = ''
+
   module = 'clusters'
 
   @observable
@@ -181,4 +184,13 @@ export default class ClusterStore extends Base {
       ...(this.projects.silent ? {} : { selectedRowKeys: [] }),
     })
   }
+
+  @action
+  async fetchVersion({ cluster }) {
+    const result = await request.get(
+      `kapis/clusters/${cluster}/version`.replace('/clusters/default', '')
+    )
+
+    this.version = get(result, 'kubernetes.gitVersion')
+  }
 }