chore: Developer portal (#691)

openpitrix · Jan 22, 2019 · 5dcd475 · 5dcd475
1 parent 40baf85
commit 5dcd475
Show file tree

Hide file tree

Showing 12 changed files with 74 additions and 65 deletions.
diff --git a/src/components/Layout/SideNav/navMap.js b/src/components/Layout/SideNav/navMap.js
@@ -264,17 +264,17 @@ export const getDevSubNavs = appId => [
     items: [
       {
         name: 'Version',
-        link: `/dashboard/app/${appId}/versions`,
+        link: toRoute(routes.portal._dev.versions, { appId }),
         active: 'versions'
       },
       {
         name: 'App information',
-        link: `/dashboard/app/${appId}/info`,
+        link: toRoute(routes.portal.appDetail, { appId }),
         active: 'info'
       },
       {
         name: 'Record',
-        link: `/dashboard/app/${appId}/audits`,
+        link: toRoute(routes.portal._dev.appAudits, { appId }),
         active: 'audits'
       }
     ]
@@ -291,7 +291,7 @@ export const getDevSubNavs = appId => [
     items: [
       {
         name: 'Instance',
-        link: `/dashboard/app/${appId}/user-instances`,
+        link: toRoute(routes.portal._dev.userInstances, { appId }),
         active: 'user-instances'
       }
     ]
@@ -301,7 +301,7 @@ export const getDevSubNavs = appId => [
     items: [
       {
         name: 'Instance',
-        link: `/dashboard/app/${appId}/sandbox-instances`,
+        link: toRoute(routes.portal._dev.sandboxInstances, { appId }),
         active: 'sandbox-instances'
       }
     ]

diff --git a/src/pages/Dashboard/Apps/Add/index.jsx b/src/pages/Dashboard/Apps/Add/index.jsx
@@ -12,6 +12,7 @@ import { versionTypes } from 'config/version-types';
 import CheckFiles from 'components/CheckFiles';
 import UploadShow from 'components/UploadShow';
 import { getUrlParam } from 'utils';
+import routes, { toRoute } from 'routes';
 import Card from './Card';
 
 import styles from './index.scss';
@@ -213,7 +214,11 @@ export default class AppAdd extends Component {
             <Button
               type="primary"
               onClick={() => {
-                history.push(`/dashboard/apps/${appDetail.app_id}/deploy`);
+                history.push(
+                  toRoute(routes.portal.deploy, {
+                    appId: appDetail.app_id
+                  })
+                );
               }}
             >
               {t('Deploy Test')}
@@ -222,9 +227,7 @@ export default class AppAdd extends Component {
               <Button
                 onClick={() => {
                   if (isCreateApp) {
-                    history.replace(
-                      `/dashboard/app/${appDetail.app_id}/create-version`
-                    );
+                    history.replace(toRoute(routes.portal._dev.appCreate));
                   } else {
                     appCreateStore.reload({ isCreateApp, appId });
                   }

diff --git a/src/pages/Dashboard/Apps/Card/index.jsx b/src/pages/Dashboard/Apps/Card/index.jsx
@@ -7,6 +7,7 @@ import { Image } from 'components/Base';
 import Status from 'components/Status';
 import { getPastTime } from 'src/utils';
 import { getVersionTypesName } from 'config/version-types';
+import routes, { toRoute } from 'routes';
 
 import styles from './index.scss';
 
@@ -32,7 +33,11 @@ export class AppCard extends Component {
       <div
         className={classnames(styles.container, className)}
         onClick={() => {
-          this.props.history.push(`/dashboard/app/${app_id}/versions`);
+          this.props.history.push(
+            toRoute(routes.portal._dev.versions, {
+              appId: app_id
+            })
+          );
         }}
       >
         <div className={styles.title}>

diff --git a/src/pages/Dashboard/Apps/Deploy/index.jsx b/src/pages/Dashboard/Apps/Deploy/index.jsx
@@ -14,6 +14,7 @@ import Loading from 'components/Loading';
 import VMParser from 'lib/config-parser/vm';
 import { getFormData } from 'utils';
 import { getVersionTypesName } from 'config/version-types';
+import routes, { toRoute, getPortalFromPath } from 'routes';
 
 import styles from './index.scss';
 
@@ -169,18 +170,12 @@ export default class AppDeploy extends Component {
       runtime_id: runtimeId,
       conf: conf.replace(/>>>>>>/g, '.')
     });
-    console.log({
-      app_id: appId,
-      version_id: versionId,
-      runtime_id: runtimeId,
-      conf: conf.replace(/>>>>>>/g, '.')
-    });
 
     if (res && _.get(res, 'cluster_id')) {
       appDeployStore.success(t('Deploy app successfully'));
-      const path = user.isDev
-        ? `/dashboard/app/${appId}/sandbox-instances`
-        : '/dashboard/clusters';
+      const path = getPortalFromPath() === 'dev'
+        ? toRoute(routes.portal._dev.sandboxInstances, { appId })
+        : toRoute(routes.portal._user.clusters);
       setTimeout(() => history.push(path), 1000);
     }
   };
@@ -323,7 +318,7 @@ export default class AppDeploy extends Component {
             </Select.Option>
           ))}
         </Select>
-        <Link to={`/dashboard/runtime/create${createK8S}`}>
+        <Link to={`${toRoute(routes.portal.runtimeCreate)}${createK8S}`}>
           {t('Create Runtime')}
         </Link>
       </Card>

diff --git a/src/pages/Dashboard/Apps/Info/index.jsx b/src/pages/Dashboard/Apps/Info/index.jsx
@@ -11,6 +11,7 @@ import {
 } from 'components/Base';
 import Layout, { Card } from 'components/Layout';
 import DetailTabs from 'components/DetailTabs';
+import routes, { toRoute } from 'routes';
 
 import styles from './index.scss';
 
@@ -411,7 +412,7 @@ export default class Info extends Component {
           <div className={styles.auditNote}>
             <Icon name="exclamation" size={20} className={styles.icon} />
             {t('UNDER_REVIEW_TIPS')}
-            <Link to={`/dashboard/app/${appId}/versions`}>
+            <Link to={toRoute(routes.portal._dev.versions, { appId })}>
               {t('View version record')} →
             </Link>
           </div>

diff --git a/src/pages/Dashboard/Apps/MyApps/Empty/index.jsx b/src/pages/Dashboard/Apps/MyApps/Empty/index.jsx
@@ -3,6 +3,8 @@ import { Link } from 'react-router-dom';
 import { translate } from 'react-i18next';
 
 import { Button } from 'components/Base';
+import routes, { toRoute } from 'routes';
+
 import styles from './index.scss';
 
 @translate()
@@ -16,7 +18,7 @@ export default class Loading extends PureComponent {
           <div className={styles.title}>{t('APPS_EMPTY_TITLE')}</div>
           <div className={styles.description}>{t('APPS_EMPTY_DESCRIBER')}</div>
           <div className={styles.btn}>
-            <Link to={'/dashboard/app/create'}>
+            <Link to={toRoute(routes.portal._dev.appCreate)}>
               <Button type="primary">{t('Create the first app')}</Button>
             </Link>
           </div>

diff --git a/src/pages/Dashboard/Apps/MyApps/index.jsx b/src/pages/Dashboard/Apps/MyApps/index.jsx
@@ -2,14 +2,14 @@ import React, { Component } from 'react';
 import { observer, inject } from 'mobx-react';
 import classnames from 'classnames';
 import { translate } from 'react-i18next';
-
-import Loading from 'components/Loading';
-import Card from 'pages/Dashboard/Apps/Card';
-
-import InfiniteScroll from 'components/InfiniteScroll';
 import { Link } from 'react-router-dom';
+
 import { Icon, Button, Input } from 'components/Base';
 import Layout from 'components/Layout';
+import Loading from 'components/Loading';
+import InfiniteScroll from 'components/InfiniteScroll';
+import Card from 'pages/Dashboard/Apps/Card';
+import routes, { toRoute } from 'routes';
 import Empty from './Empty';
 
 import styles from './index.scss';
@@ -53,7 +53,6 @@ export default class Apps extends Component {
   renderHeader() {
     const { t, appStore } = this.props;
     const name = t('My Apps');
-    const lintTo = '/dashboard/app/create';
     const { onSearch, onClear, searchWord } = appStore;
 
     return (
@@ -66,7 +65,7 @@ export default class Apps extends Component {
           onSearch={onSearch}
           onClear={onClear}
         />
-        <Link to={lintTo}>
+        <Link to={toRoute(routes.portal._dev.appCreate)}>
           <Button className={styles.btnCreate} type="primary">
             <Icon name="add" size={20} type="white" />
             <span className={styles.btnText}>{t('Create')} </span>

diff --git a/src/pages/Dashboard/Versions/Detail/index.jsx b/src/pages/Dashboard/Versions/Detail/index.jsx
@@ -20,8 +20,9 @@ import DetailTabs from 'components/DetailTabs';
 import CheckFiles from 'components/CheckFiles';
 import UploadShow from 'components/UploadShow';
 import { versionTypes } from 'config/version-types';
-import { formatTime } from 'utils';
 import AppDetail from 'pages/AppDetail';
+import { formatTime, sleep } from 'utils';
+import routes, { toRoute } from 'routes';
 import Info from '../../Apps/Info';
 import VersionEdit from '../VersionEdit';
 
@@ -152,7 +153,12 @@ export default class VersionDetail extends Component {
     const result = await appVersionStore.handle('delete', versionId);
 
     if (!(result && result.err)) {
-      setTimeout(() => history.push(`/dashboard/app/${appId}/versions`), 1000);
+      await sleep(1000);
+      history.push(
+        toRoute(routes.portal._dev.versions, {
+          appId
+        })
+      );
     }
     appVersionStore.hideModal();
   };
@@ -167,7 +173,12 @@ export default class VersionDetail extends Component {
 
     return (
       <div className="operate-menu">
-        <Link to={`/dashboard/apps/${appId}/deploy/${versionId}`}>
+        <Link
+          to={toRoute(routes.portal.deploy, {
+            appId,
+            versionId
+          })}
+        >
           <Icon name="stateful-set" type="dark" />
           {t('Deploy App')}
         </Link>

diff --git a/src/pages/Dashboard/Versions/index.jsx b/src/pages/Dashboard/Versions/index.jsx
@@ -10,6 +10,7 @@ import { Icon, Button } from 'components/Base';
 import Layout from 'components/Layout';
 import Status from 'components/Status';
 import { formatTime } from 'utils';
+import routes, { toRoute } from 'routes';
 
 import styles from './index.scss';
 
@@ -55,6 +56,9 @@ export default class Versions extends Component {
     const notAddedTypes = versionTypes.filter(
       item => !types.includes(item.value)
     );
+    const createUrl = toRoute(routes.portal._dev.versionCreate, {
+      appId: appDetail.app_id
+    });
 
     return (
       <div>
@@ -73,11 +77,7 @@ export default class Versions extends Component {
             />
             <div className={styles.name}>{t(item.name)}</div>
             <div className={styles.description}>{t(item.intro)}</div>
-            <Link
-              to={`/dashboard/app/${appDetail.app_id}/create-version?type=${
-                item.value
-              }`}
-            >
+            <Link to={`${createUrl}?type=${item.value}`}>
               <Button className={styles.button} type="primary">
                 <Icon name="add" type="white" className={styles.addIcon} />
                 {t('New version')}
@@ -122,9 +122,10 @@ export default class Versions extends Component {
             {historyVersions.map(item => (
               <li key={item.version_id}>
                 <Link
-                  to={`/dashboard/app/${appDetail.app_id}/version/${
-                    item.version_id
-                  }`}
+                  to={toRoute(routes.portal._dev.versionDetail, {
+                    appId: appDetail.app_id,
+                    versionId: item.version_id
+                  })}
                 >
                   <Status
                     type={item.status}
@@ -166,9 +167,10 @@ export default class Versions extends Component {
             <Link
               key={item.version_id}
               className={classnames(styles.version, [styles[item.status]])}
-              to={`/dashboard/app/${appDetail.app_id}/version/${
-                item.version_id
-              }`}
+              to={toRoute(routes.portal._dev.versionDetail, {
+                appId: appDetail.app_id,
+                versionId: item.version_id
+              })}
             >
               <Status
                 type={item.status}
@@ -192,6 +194,10 @@ export default class Versions extends Component {
     const { appDetail } = appStore;
     const types = typeVersions.map(item => item.type);
 
+    const createUrl = toRoute(routes.portal._dev.versionCreate, {
+      appId: appDetail.app_id
+    });
+
     // this judge for app detail page online versions tab show
     if (!match) {
       return (
@@ -223,11 +229,7 @@ export default class Versions extends Component {
           <div key={item.type} className={styles.addedVersion}>
             <div className={styles.title}>
               {(_.find(versionTypes, { value: item.type }) || {}).name}
-              <Link
-                to={`/dashboard/app/${appDetail.app_id}/create-version?type=${
-                  item.type
-                }`}
-              >
+              <Link to={`${createUrl}?type=${item.type}`}>
                 <Button className={styles.button} type="default">
                   <Icon name="add" type="dark" className={styles.addIcon} />
                   {t('New version')}

diff --git a/src/portals/dev/Layout/index.jsx b/src/portals/dev/Layout/index.jsx
diff --git a/src/portals/dev/Layout/index.scss b/src/portals/dev/Layout/index.scss
diff --git a/src/routes/portals/dev.jsx b/src/routes/portals/dev.jsx
@@ -10,6 +10,7 @@ import {
   AppAdd,
   Versions,
   VersionDetail,
+  Deploy,
   Audits,
   AppInfo,
   Clusters,
@@ -24,8 +25,6 @@ export default ({ prefix }) => (
 
     <WrapRoute path={`${prefix}/apps`} component={MyApps} />
     <WrapRoute path={`${prefix}/apps/create`} component={AppAdd} />
-    <WrapRoute path={`${prefix}/apps/:appId`} component={AppInfo} />
-    <WrapRoute path={`${prefix}/apps/:appId/audits`} component={Audits} />
 
     <WrapRoute path={`${prefix}/apps/:appId/versions`} component={Versions} />
     <WrapRoute
@@ -36,6 +35,13 @@ export default ({ prefix }) => (
       path={`${prefix}/apps/:appId/versions/:versionId`}
       component={VersionDetail}
     />
+    <WrapRoute
+      path={`${prefix}/apps/:appId/deploy/:versionId？`}
+      component={Deploy}
+    />
+
+    <WrapRoute path={`${prefix}/apps/:appId`} component={AppInfo} />
+    <WrapRoute path={`${prefix}/apps/:appId/audits`} component={Audits} />
 
     <WrapRoute path={`${prefix}/apps/:appId/instances`} component={Clusters} />
     <WrapRoute