fix: Fix pod link error

kubesphere · Jun 3, 2020 · 1648428 · 1648428
1 parent 9d4b6da
commit 1648428
Show file tree

Hide file tree

Showing 20 changed files with 108 additions and 47 deletions.
diff --git a/src/components/Base/Tag/index.scss b/src/components/Base/Tag/index.scss
@@ -3,12 +3,15 @@
 
 .wrapper {
   display: inline-block;
+  vertical-align: middle;
   height: 20px;
   padding: 0 4px;
   font-size: $size-small;
   line-height: 20px;
   font-weight: 600;
   border-radius: 2px;
+  max-width: 100px;
+  @include ellipsis;
 
   &.default {
     color: $white;

diff --git a/src/components/Base/Text/index.jsx b/src/components/Base/Text/index.jsx
@@ -25,13 +25,21 @@ import styles from './index.scss'
 
 export default class Text extends React.PureComponent {
   render() {
-    const { icon, title, description, className, extra, onClick } = this.props
+    const {
+      icon,
+      title,
+      description,
+      className,
+      ellipsis,
+      extra,
+      onClick,
+    } = this.props
 
     return (
       <div
         className={classNames(
           styles.wrapper,
-          { [styles.clickable]: !!onClick },
+          { [styles.clickable]: !!onClick, [styles.ellipsis]: ellipsis },
           className
         )}
         onClick={onClick}

diff --git a/src/components/Base/Text/index.scss b/src/components/Base/Text/index.scss
@@ -16,6 +16,23 @@
   }
 }
 
+.ellipsis {
+  flex: 1;
+  overflow: hidden;
+
+  .text {
+    flex: 1;
+    overflow: hidden;
+
+    & > div {
+      @include ellipsis;
+    }
+    & > p {
+      @include ellipsis;
+    }
+  }
+}
+
 .icon {
   margin-right: 12px;
 }

diff --git a/src/components/History/Card.jsx b/src/components/History/Card.jsx
@@ -55,6 +55,7 @@ export default class Card extends Component {
           icon={this.getIcon()}
           title={data.name}
           description={data.description || t(data.type)}
+          ellipsis
         />
         {data.isFedManaged && (
           <Tag className={styles.tag}>{t('MULTI_CLUSTER')}</Tag>

diff --git a/src/components/Inputs/SelectInput/index.jsx b/src/components/Inputs/SelectInput/index.jsx
@@ -62,7 +62,10 @@ export default class SelectInput extends React.Component {
     return (
       <Menu onClick={this.handleOptionsClick}>
         {options.map(option => (
-          <Menu.MenuItem key={option.value}>{option.label}</Menu.MenuItem>
+          <Menu.MenuItem key={option.value}>
+            {option.icon && <Icon name={option.icon} type="light" size={20} />}
+            {option.label}
+          </Menu.MenuItem>
         ))}
       </Menu>
     )
@@ -74,7 +77,12 @@ export default class SelectInput extends React.Component {
     return (
       <div className={styles.wrapper}>
         <Input {...rest} />
-        <Icon name="caret-down" clickable onClick={this.toggleOptions} />
+        <Icon
+          className={styles.caret}
+          name="caret-down"
+          clickable
+          onClick={this.toggleOptions}
+        />
         <Dropdown
           visible={this.state.showOptions}
           className="dropdown-default"

diff --git a/src/components/Inputs/SelectInput/index.scss b/src/components/Inputs/SelectInput/index.scss
@@ -6,12 +6,12 @@
   width: 455px;
   height: 32px;
 
+  .caret {
+    @include vertical-center;
+    right: 12px;
+  }
+
   :global {
-    .icon {
-      @include vertical-center;
-      right: 12px;
-    }
-
     .dropdown.dropdown-default .menu {
       width: 455px;
     }
@@ -24,4 +24,4 @@
     top: 0;
     right: 0;
   }
-}
+}
diff --git a/src/pages/clusters/containers/Clusters/AddCluster/BaseInfo/index.jsx b/src/pages/clusters/containers/Clusters/AddCluster/BaseInfo/index.jsx
@@ -28,22 +28,40 @@ export default class BaseInfo extends React.Component {
   get groups() {
     return [
       {
-        label: t('production'),
+        label: 'production',
         value: 'production',
       },
       {
-        label: t('development'),
+        label: 'development',
         value: 'development',
       },
+      {
+        label: 'testing',
+        value: 'testing',
+      },
+      {
+        label: 'demo',
+        value: 'demo',
+      },
     ]
   }
 
   get providers() {
     return [
+      {
+        label: 'ACK',
+        value: 'ACK',
+        icon: 'windows',
+      },
       {
         label: 'AKS',
         value: 'AKS',
-        icon: 'windows',
+        icon: 'aliyun',
+      },
+      {
+        label: 'CCE',
+        value: 'CCE',
+        icon: 'kubernetes',
       },
       {
         label: 'EKS',
@@ -53,13 +71,18 @@ export default class BaseInfo extends React.Component {
       {
         label: 'GEK',
         value: 'GEK',
-        icon: 'google',
+        icon: 'google-plus',
       },
       {
         label: 'QKE',
         value: 'QKE',
         icon: 'qingcloud',
       },
+      {
+        label: 'TKE',
+        value: 'TKE',
+        icon: 'kubernetes',
+      },
     ]
   }
 

diff --git a/src/pages/clusters/containers/Projects/Detail/Pods/index.jsx b/src/pages/clusters/containers/Projects/Detail/Pods/index.jsx
diff --git a/src/pages/projects/components/Cards/ClusterWorkloadStatus/Cluster.jsx b/src/pages/projects/components/Cards/ClusterWorkloadStatus/Cluster.jsx
@@ -118,7 +118,7 @@ export default class Cluster extends Component {
           <Indicator className={styles.indicator} type={clusterDetail.status} />
           <div className={styles.text}>
             <div>{cluster}</div>
-            <p>{clusterDetail.description || '-'}</p>
+            <p>{clusterDetail.description || t('Cluster Name')}</p>
           </div>
           {clusterDetail.group && (
             <Tag className={styles.group} type="info">

diff --git a/src/pages/projects/components/Cards/ClusterWorkloadStatus/index.scss b/src/pages/projects/components/Cards/ClusterWorkloadStatus/index.scss
@@ -25,12 +25,16 @@
 }
 
 .text {
+  flex: 1;
+  overflow: hidden;
   & > div {
     @include TypographyTitleH6(#fff);
+    @include ellipsis;
   }
 
   & > p {
     @include TypographyParagraph(#fff);
+    @include ellipsis;
   }
 }
 

diff --git a/src/pages/projects/containers/Deployments/Detail/ResourceStatus/index.jsx b/src/pages/projects/containers/Deployments/Detail/ResourceStatus/index.jsx
@@ -55,12 +55,12 @@ class ResourceStatus extends React.Component {
 
   get prefix() {
     const path = this.props.match.path
-    const { cluster, namespace } = this.props.match.params
+    const { cluster } = this.props.match.params
     if (path.startsWith('/clusters')) {
-      return `/clusters/${cluster}/projects/${namespace}`
+      return `/clusters/${cluster}`
     }
 
-    return `/cluster/${cluster}/projects/${namespace}`
+    return `/cluster/${cluster}`
   }
 
   get enabledActions() {

diff --git a/src/pages/projects/containers/ImageBuilder/Detail/ResourceStatus/index.jsx b/src/pages/projects/containers/ImageBuilder/Detail/ResourceStatus/index.jsx
@@ -30,14 +30,10 @@ class JobsResourceStatus extends Base {
   }
 
   renderPods() {
-    const { params = {} } = this.props.match
-    const { cluster, namespace } = params
+    const { cluster } = this.props.match.params
 
     return (
-      <PodsCard
-        prefix={`/cluster/${cluster}/projects/${namespace}`}
-        detail={this.store.jobDetail}
-      />
+      <PodsCard prefix={`/cluster/${cluster}`} detail={this.store.jobDetail} />
     )
   }
 

diff --git a/src/pages/projects/containers/Services/Detail/ResourceStatus/index.jsx b/src/pages/projects/containers/Services/Detail/ResourceStatus/index.jsx
@@ -62,12 +62,12 @@ export default class ResourceStatus extends React.Component {
 
   get prefix() {
     const path = this.props.match.path
-    const { cluster, namespace } = this.props.match.params
+    const { cluster } = this.props.match.params
     if (path.startsWith('/clusters')) {
-      return `/clusters/${cluster}/projects/${namespace}`
+      return `/clusters/${cluster}`
     }
 
-    return `/cluster/${cluster}/projects/${namespace}`
+    return `/cluster/${cluster}`
   }
 
   fetchDetail = async () => {

diff --git a/src/pages/projects/containers/Services/Detail/ServiceAccess/ClusterService/index.jsx b/src/pages/projects/containers/Services/Detail/ServiceAccess/ClusterService/index.jsx
@@ -67,7 +67,7 @@ export default class ServicePort extends Component {
             />
             <div className={styles.text}>
               <div>{cluster}</div>
-              <p>{clusterDetail.description || '-'}</p>
+              <p>{clusterDetail.description || t('Cluster Name')}</p>
             </div>
             {clusterDetail.group && (
               <Tag className={styles.group} type="info">

diff --git a/src/pages/projects/containers/Services/Detail/ServiceAccess/ClusterService/index.scss b/src/pages/projects/containers/Services/Detail/ServiceAccess/ClusterService/index.scss
@@ -21,12 +21,16 @@
 }
 
 .text {
+  flex: 1;
+  overflow: hidden;
   & > div {
     @include TypographyTitleH6(#fff);
+    @include ellipsis;
   }
 
   & > p {
     @include TypographyParagraph(#fff);
+    @include ellipsis;
   }
 }
 

diff --git a/src/pages/projects/containers/Services/Detail/ServiceAccess/index.jsx b/src/pages/projects/containers/Services/Detail/ServiceAccess/index.jsx
@@ -44,7 +44,7 @@ export default class ResourceStatus extends React.Component {
 
   renderServiceAccess() {
     const { name, namespace } = this.store.detail
-    const { clusters } = this.fedStore.detail
+    const { clusters = [] } = this.fedStore.detail
     const gateway = this.routerStore.gateway.data
     return (
       <div>

diff --git a/src/pages/projects/containers/Volumes/Detail/ResourceStatus/index.jsx b/src/pages/projects/containers/Volumes/Detail/ResourceStatus/index.jsx
@@ -46,12 +46,12 @@ class ResourceStatus extends React.Component {
 
   get prefix() {
     const path = this.props.match.path
-    const { cluster, namespace } = this.props.match.params
+    const { cluster } = this.props.match.params
     if (path.startsWith('/clusters')) {
-      return `/clusters/${cluster}/projects/${namespace}`
+      return `/clusters/${cluster}`
     }
 
-    return `/cluster/${cluster}/projects/${namespace}`
+    return `/cluster/${cluster}`
   }
 
   constructor(props) {

diff --git a/src/pages/projects/routes/detail.js b/src/pages/projects/routes/detail.js
@@ -38,14 +38,6 @@ import AlertMessagesDetail from '../containers/Alerting/Messages/Detail'
 const PATH = '/cluster/:cluster/projects/:namespace'
 
 export default [
-  {
-    path: `${PATH}/:module/:name/pods/:podName/containers/:containerName`,
-    component: ContainerDetail,
-  },
-  {
-    path: `${PATH}/:module/:name/pods/:podName`,
-    component: PodDetail,
-  },
   {
     path: `${PATH}/deployments/:name`,
     component: DeploymentDetail,
@@ -66,14 +58,14 @@ export default [
     path: `${PATH}/cronjobs/:name`,
     component: CronJobDetail,
   },
-  {
-    path: `${PATH}/pods/:podName`,
-    component: PodDetail,
-  },
   {
     path: `${PATH}/pods/:podName/containers/:containerName`,
     component: ContainerDetail,
   },
+  {
+    path: `${PATH}/pods/:podName`,
+    component: PodDetail,
+  },
   {
     path: `${PATH}/services/:name`,
     component: ServiceDetail,

diff --git a/...ages/workspaces/components/Modals/WorkspaceCreate/ClusterSettings/ClusterSelect/index.jsx b/...ages/workspaces/components/Modals/WorkspaceCreate/ClusterSettings/ClusterSelect/index.jsx
@@ -77,6 +77,7 @@ export default class ClusterSettings extends Component {
               icon={CLUSTER_PROVIDER_ICON[cluster.provider] || 'kubernetes'}
               title={cluster.name}
               description={cluster.description || t('Cluster Name')}
+              ellipsis
             />
             {cluster.group && (
               <Tag className={styles.tag} type="info">

diff --git a/src/utils/constants.js b/src/utils/constants.js
@@ -892,11 +892,15 @@ export const COMPONENT_ICON_MAP = {
 }
 
 export const CLUSTER_PROVIDER_ICON = {
-  Custom: 'kubernetes',
   QingCloud: 'qingcloud',
   Google: 'google-plus',
   Amazon: 'aws',
   Azure: 'windows',
+  ACK: 'windows',
+  AKS: 'aliyun',
+  EKS: 'aws',
+  GEK: 'google-plus',
+  QKE: 'qingcloud',
 }
 
 export const ROLE_QUERY_KEY = {