fix: Deployed app detail page reference clusters

Author: dongrui

src/pages/Dashboard/Clusters/columns/index.js

@@ -24,6 +24,7 @@ export default ({
   onlyView,
   isAgent,
   isRuntimeDetail,
+  isAppDetail,
   t
 }) => [
   {
@@ -51,7 +52,7 @@ export default ({
   },
   {
     title:
-      user.isUserPortal || isRuntimeDetail
+      (user.isUserPortal || isRuntimeDetail) && !isAppDetail
         ? 'App / Delivery type / Version'
         : 'Version',
     key: 'app_id',

src/pages/Dashboard/Clusters/index.jsx

@@ -2,6 +2,7 @@ import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
 import { Link } from 'react-router-dom';
+import classnames from 'classnames';
 import _, { capitalize } from 'lodash';
 import { withTranslation } from 'react-i18next';
 
@@ -19,6 +20,8 @@ import { CLUSTER_TYPE, runtimeTabs } from 'config/runtimes';
 import columns from './columns';
 import styles from './index.scss';
 
+const appTabs = [{ name: 'Agent', value: 1 }];
+
 @withTranslation()
 @inject(({ rootStore }) => ({
   rootStore,
@@ -33,6 +36,7 @@ import styles from './index.scss';
 @observer
 export default class Clusters extends Component {
   static propTypes = {
+    appId: PropTypes.string,
     fetchData: PropTypes.func,
     isK8S: PropTypes.bool,
     runtimeId: PropTypes.string,
@@ -41,6 +45,7 @@ export default class Clusters extends Component {
 
   static defaultProps = {
     runtimeId: '',
+    appId: '',
     isK8S: false,
     title: ''
   };
@@ -52,6 +57,7 @@ export default class Clusters extends Component {
       runtimeStore,
       user,
       runtimeId,
+      appId,
       fetchData
     } = this.props;
 
@@ -62,9 +68,10 @@ export default class Clusters extends Component {
 
       Object.assign(clusterStore, {
         runtimeId,
+        appId,
         attachUsers: !user.isUserPortal,
         attachVersions: cluster_type === CLUSTER_TYPE.instance,
-        attachApps: !user.isDevPortal || runtimeId,
+        attachApps: (!user.isDevPortal || runtimeId) && !appId,
         with_detail: true,
         cluster_type: CLUSTER_TYPE.instance, // default fetch instance
         userId: (user.isUserPortal || user.isAdminPortal) && user.user_id
@@ -219,11 +226,12 @@ export default class Clusters extends Component {
     } = this.props;
     const { apps } = appStore;
     const { versions } = appVersionStore;
+    const isAppDetail = this.props.appId;
 
     const app = _.find(apps, { app_id: appId }) || {};
     const version = _.find(versions, { version_id: versionId }) || {};
 
-    if (user.isUserPortal || user.isAdmin || runtimeId) {
+    if ((user.isUserPortal || user.isAdmin || runtimeId) && !isAppDetail) {
       return (
         <div className={styles.appTdShow}>
           <label className={styles.appImage}>
@@ -269,7 +277,7 @@ export default class Clusters extends Component {
 
   renderToolbar() {
     const {
-      clusterStore, user, match, t
+      clusterStore, user, appId, match, t
     } = this.props;
     const {
       searchWord,
@@ -280,7 +288,8 @@ export default class Clusters extends Component {
       onlyView,
       isAgent
     } = clusterStore;
-    const { appId } = match.params;
+    const hasDeployButton = (user.isDevPortal && !onlyView) || appId;
+    const app_id = appId || _.get(match, 'params.appId', '');
 
     if (!(onlyView || isAgent) && clusterIds.length) {
       return (
@@ -309,9 +318,10 @@ export default class Clusters extends Component {
         onRefresh={onRefresh}
         noRefreshBtn
       >
-        {user.isDevPortal && !onlyView && (
-          <Link to={toRoute(routes.portal.deploy, { appId })}>
+        {hasDeployButton && (
+          <Link to={toRoute(routes.portal.deploy, { appId: app_id })}>
             <Button type="primary" className="pull-right">
+              <Icon name="add" type="white" className={styles.icon} />
               {t('Deploy')}
             </Button>
           </Link>
@@ -322,7 +332,13 @@ export default class Clusters extends Component {
 
   renderMain() {
     const {
-      clusterStore, userStore, user, runtimeId, isK8S, t
+      clusterStore,
+      userStore,
+      user,
+      runtimeId,
+      appId,
+      isK8S,
+      t
     } = this.props;
     const { isLoading, onlyView, isAgent } = clusterStore;
 
@@ -333,8 +349,8 @@ export default class Clusters extends Component {
       <Fragment>
         {!isK8S && (
           <Tabs
-            tabs={runtimeTabs}
-            className={styles.tabs}
+            tabs={appId ? appTabs : runtimeTabs}
+            className={classnames(styles.tabs, { [styles.appTabs]: appId })}
             changeTab={this.handleChangeTab}
             noFirstChange
             isCardTab
@@ -377,6 +393,7 @@ export default class Clusters extends Component {
             renderAppTdShow: this.renderAppTdShow,
             renderHandleMenu: this.renderHandleMenu,
             isRuntimeDetail: Boolean(runtimeId),
+            isAppDetail: Boolean(appId),
             users,
             user,
             runtimes,
@@ -393,10 +410,10 @@ export default class Clusters extends Component {
 
   render() {
     const {
-      user, title, runtimeId, t
+      user, title, runtimeId, appId, t
     } = this.props;
 
-    if (user.isUserPortal || runtimeId) {
+    if (user.isUserPortal || runtimeId || appId) {
       return this.renderMain();
     }
 

src/pages/Dashboard/Clusters/index.scss

@@ -43,6 +43,12 @@
   background: none;
   border: none;
   margin-bottom: 16px;
+
+  &.appTabs {
+    margin-top: -24px;
+    width: auto;
+    border-bottom: 1px solid $N10;
+  }
 }
 
 .runtimeName {