fix: My apps query status param error

src/components/MenuLayer/index.scss

@@ -73,6 +73,7 @@
       .devIconOuter {
         display: inline-block;
         position: relative;
+        top: -1px;
         margin-left: 4px;
         width: 12px;
         height: 12px;

src/pages/Dashboard/Apps/AppInfo/index.jsx

@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import { observer, inject } from 'mobx-react';
+import { withTranslation } from 'react-i18next';
+import _ from 'lodash';
+
+import Layout from 'components/Layout';
+import NoteLink from 'components/NoteLink';
+import routes, { toRoute } from 'routes';
+import Info from '../Info';
+
+import styles from './index.scss';
+
+@withTranslation()
+@inject(({ rootStore }) => ({
+  rootStore,
+  appVersionStore: rootStore.appVersionStore,
+  appStore: rootStore.appStore,
+  categoryStore: rootStore.categoryStore
+}))
+@observer
+export default class AppInfo extends Component {
+  async componentDidMount() {
+    const {
+      appStore, appVersionStore, categoryStore, match
+    } = this.props;
+    const { appId } = match.params;
+
+    // query this version relatived app info
+    await appVersionStore.fetchAll({ app_id: appId });
+
+    // query categories data for category select
+    await categoryStore.fetchAll();
+
+    // judge you can edit app info
+    const { versions } = appVersionStore;
+    const { appDetail } = appStore;
+    appStore.isEdit = !_.find(versions, { status: 'in-review' })
+      && appDetail.status !== 'deleted';
+  }
+
+  componentWillUnmount() {
+    const { appVersionStore } = this.props;
+    appVersionStore.reset();
+  }
+
+  render() {
+    const { appStore, match, t } = this.props;
+    const { isEdit } = appStore;
+    const { appId } = match.params;
+
+    return (
+      <Layout className={styles.appInfo} pageTitle={t('App Info')} isCenterPage>
+        {isEdit ? (
+          <div className={styles.note}>
+            <label>{t('Note')}</label>
+            {t('MODIFY_VERSION_TIPS')}
+          </div>
+        ) : (
+          <NoteLink
+            className={styles.auditNote}
+            noteWord="UNDER_REVIEW_TIPS"
+            linkWord="View version record"
+            link={toRoute(routes.portal._dev.versions, { appId })}
+          />
+        )}
+        <Info />
+      </Layout>
+    );
+  }
+}

src/pages/Dashboard/Apps/AppInfo/index.scss

@@ -0,0 +1,26 @@
+@import '~scss/vars';
+
+.appInfo {
+  .note {
+    margin-bottom: 20px;
+    line-height: 20px;
+    font-size: 12px;
+    color: $N75;
+
+    label {
+      float: left;
+      display: inline-block;
+      box-sizing: border-box;
+      margin-right: 4px;
+      height: 20px;
+      padding: 4px;
+      line-height: 12px;
+      background: $N30;
+      vertical-align: middle;
+    }
+  }
+
+  .auditNote {
+    margin-bottom: 8px;
+  }
+}

src/pages/Dashboard/Apps/Audits/index.scss

@@ -56,7 +56,7 @@
 
     .icon {
       float: left;
-      margin-top: 3px;
+      margin-top: 6px;
       margin-right: 4px;
       svg {
         --primary-color: #{$N300};

src/pages/Dashboard/Apps/Detail/index.jsx

@@ -53,7 +53,10 @@ export default class AppDetail extends Component {
       noLimit: true
     });
 
-    clusterStore.appId = appId;
+    Object.assign(clusterStore, {
+      onlyView: true,
+      appId
+    });
     // get month deploy total
     await clusterStore.fetchAll({
       app_id: appId,

src/pages/Dashboard/Apps/Info/index.jsx

@@ -9,10 +9,8 @@ import _ from 'lodash';
 import {
   Input, Select, Icon, Button, Upload, Image
 } from 'components/Base';
-import Layout, { Card } from 'components/Layout';
+import { Card } from 'components/Layout';
 import DetailTabs from 'components/DetailTabs';
-import NoteLink from 'components/NoteLink';
-import routes, { toRoute } from 'routes';
 import externalLink from 'config/external-link';
 
 import styles from './index.scss';
@@ -40,32 +38,6 @@ export default class Info extends Component {
     isCheckInfo: false
   };
 
-  async componentDidMount() {
-    const {
-      appStore, appVersionStore, categoryStore, match
-    } = this.props;
-    const appId = _.get(match, 'params.appId', '');
-
-    if (appId) {
-      // query this version relatived app info
-      await appVersionStore.fetchAll({ app_id: appId });
-
-      // query categories data for category select
-      await categoryStore.fetchAll();
-
-      // judge you can edit app info
-      const { versions } = appVersionStore;
-      const { appDetail } = appStore;
-      appStore.isEdit = !_.find(versions, { status: 'in-review' })
-        && appDetail.status !== 'deleted';
-    }
-  }
-
-  componentWillUnmount() {
-    const { appVersionStore } = this.props;
-    appVersionStore.reset();
-  }
-
   changeTab = tab => {
     const { appStore } = this.props;
     appStore.detailTab = tab;
@@ -405,50 +377,17 @@ export default class Info extends Component {
     );
   }
 
-  renderContent() {
-    const { detailTab } = this.props.appStore;
-
-    return (
-      <Fragment>
-        <Card>
-          <DetailTabs tabs={tabs} changeTab={this.changeTab} isCardTab />
-          {detailTab === 'baseInfo' && this.renderBaseInfo()}
-          {detailTab === 'readme' && this.renderInstructions()}
-          {detailTab === 'service' && this.renderService()}
-        </Card>
-      </Fragment>
-    );
-  }
-
   render() {
-    const {
-      appStore, isCheckInfo, match, t
-    } = this.props;
-    const { isEdit } = appStore;
-    const appId = _.get(match, 'params.appId', '');
-
-    if (isCheckInfo) {
-      return this.renderContent();
-    }
+    const { appStore } = this.props;
+    const { detailTab } = appStore;
 
     return (
-      <Layout className={styles.appInfo} pageTitle={t('App Info')} isCenterPage>
-        {isEdit ? (
-          <div className={styles.note}>
-            <label>{t('Note')}</label>
-            {t('MODIFY_VERSION_TIPS')}
-          </div>
-        ) : (
-          <NoteLink
-            className={styles.auditNote}
-            noteWord="UNDER_REVIEW_TIPS"
-            linkWord="View version record"
-            link={toRoute(routes.portal._dev.versions, { appId })}
-          />
-        )}
-
-        {this.renderContent()}
-      </Layout>
+      <Card>
+        <DetailTabs tabs={tabs} changeTab={this.changeTab} isCardTab />
+        {detailTab === 'baseInfo' && this.renderBaseInfo()}
+        {detailTab === 'readme' && this.renderInstructions()}
+        {detailTab === 'service' && this.renderService()}
+      </Card>
     );
   }
 }

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

@@ -45,7 +45,7 @@ export default ({
       <TdName
         name={cl.name}
         description={cl.cluster_id}
-        linkUrl={isAgent ? '' : getDetailLink(cl.cluster_id)}
+        linkUrl={isAgent ? '' : getDetailLink(cl.cluster_id, cl.app_id)}
         noIcon
       />
     )

src/pages/Dashboard/Clusters/index.jsx

@@ -127,15 +127,15 @@ export default class Clusters extends Component {
     }
   };
 
-  getDetailLink = clusterId => {
-    const { match } = this.props;
-    const { appId } = match.params;
+  getDetailLink = (clusterId, appId) => {
+    const { clusterStore, user } = this.props;
+    const { onlyView } = clusterStore;
 
     let route;
-    if (match.path.endsWith('/:appId/instances')) {
-      route = routes.portal._dev.userInstanceDetail;
-    } else if (match.path.endsWith('/:appId/sandbox-instances')) {
-      route = routes.portal._dev.sandboxInstanceDetail;
+    if (user.isDevPortal || user.isISVPortal) {
+      route = onlyView
+        ? routes.portal._dev.userInstanceDetail
+        : routes.portal._dev.sandboxInstanceDetail;
     } else {
       route = routes.portal.clusterDetail;
     }
@@ -238,7 +238,7 @@ export default class Clusters extends Component {
             <Image src={app.icon} iconLetter={app.name} iconSize={20} />
           </label>
           <Link
-            to={toRoute(routes.appDetail, { appId: app.app_id })}
+            to={toRoute(routes.portal.appDetail, { appId: app.app_id })}
             className={styles.appName}
           >
             {app.name}
@@ -277,7 +277,7 @@ export default class Clusters extends Component {
 
   renderToolbar() {
     const {
-      clusterStore, user, appId, match, t
+      clusterStore, user, appId, runtimeId, match, t
     } = this.props;
     const {
       searchWord,
@@ -288,7 +288,7 @@ export default class Clusters extends Component {
       onlyView,
       isAgent
     } = clusterStore;
-    const hasDeployButton = (user.isDevPortal && !onlyView) || appId;
+    const hasDeployButton = (user.isDevPortal && !onlyView && !runtimeId) || appId;
     const app_id = appId || _.get(match, 'params.appId', '');
 
     if (!(onlyView || isAgent) && clusterIds.length) {

src/pages/Dashboard/Versions/Detail/index.scss

@@ -297,7 +297,7 @@
 }
 
 .checkInfo {
-  width: 900px;
+  width: 920px;
   margin: 0 auto;
 }
 

src/pages/Dashboard/index.js

@@ -6,7 +6,7 @@ export MyApps from './Apps/MyApps';
 export Audits from './Apps/Audits';
 export Versions from './Versions';
 export VersionDetail from './Versions/Detail';
-export AppInfo from './Apps/Info';
+export AppInfo from './Apps/AppInfo';
 
 export Reviews from './Reviews';
 export ReviewDetail from './Reviews/Detail';

src/stores/app/index.js

@@ -273,11 +273,11 @@ class AppStore extends Store {
     // query app deploy total
     if (this.attchDeployTotal && apps.length > 0) {
       const clusterStore = this.clusterStore;
+      clusterStore.onlyView = true;
       this.apps = [];
       for (let i = 0; i < apps.length; i++) {
         const app = apps[i];
         await clusterStore.fetchAll({
-          onlyView: true,
           app_id: app.app_id,
           display_columns: ['']
         });
@@ -616,6 +616,7 @@ class AppStore extends Store {
   reset = () => {
     this.attchUser = false;
     this.attchDeployTotal = false;
+    this.defaultStatus = defaultStatus;
   };
 
   @action

src/stores/cluster/index.js

@@ -51,7 +51,7 @@ export default class ClusterStore extends Store {
 
       this.versionId = '';
 
-      this.onlyView = false; // user-instances only view, can't operate
+      this.onlyView = false; // user-instances only view and query user data
 
       this.cluster_type = CLUSTER_TYPE.instance;
 

src/stores/key_pair/index.js

@@ -136,4 +136,11 @@ export default class KeyPairStore extends Store {
   changeDescription = e => {
     this.description = e.target.value;
   };
+
+  @action
+  resetKeyPair = () => {
+    this.name = '';
+    this.pub_key = '';
+    this.description = '';
+  };
 }