fix: User portal issues (#722)

* Fix User instances styles * Fix status component * Fix table tr style * Fix Runtime list style in user portal
openpitrix · Jan 24, 2019 · f957879 · f957879
1 parent 9f3d33e
commit f957879
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 46 deletions.
diff --git a/src/components/Base/Table/index.scss b/src/components/Base/Table/index.scss
@@ -169,7 +169,7 @@
     }
 
     &-tbody > tr > td {
-      padding: 14px 5px;
+      padding: 6px 5px;
       line-height: 16px;
       box-shadow: inset 0 -1px 0 0 $N10;
       transition: all $transition-speed;
@@ -186,8 +186,7 @@
       }
 
       &:last-child {
-        padding-right: 20px;
-        // text-align: right;
+        //padding-right: 20px;
       }
 
       &.actions {

diff --git a/src/components/Layout/SideNav/navMap.js b/src/components/Layout/SideNav/navMap.js
@@ -4,7 +4,7 @@ import routes, { toRoute } from 'routes';
 export const getNavs = {
   global_admin: [
     {
-      link: toRoute(routes.portal.overviews, { portal: 'admin' }),
+      link: toRoute(routes.portal.overview, { portal: 'admin' }),
       iconName: 'dashboard',
       active: 'dashboard',
       title: 'My dashboard'

diff --git a/src/components/Status/index.jsx b/src/components/Status/index.jsx
@@ -12,20 +12,7 @@ export default class Status extends PureComponent {
     className: PropTypes.string,
     name: PropTypes.string,
     style: PropTypes.string,
-    transition: PropTypes.oneOf([
-      '',
-      'starting',
-      'updating',
-      'stopping',
-      'deleting',
-      'creating',
-      'upgrading',
-      'rollbacking',
-      'recovering',
-      'ceasing',
-      'resizing',
-      'scaling'
-    ]),
+    transMap: PropTypes.object,
     /* type: PropTypes.oneOf([
      *   'draft',
      *   'running',
@@ -44,25 +31,42 @@ export default class Status extends PureComponent {
 
      *   'published'
      * ]), */
+    transition: PropTypes.oneOf([
+      '',
+      'starting',
+      'updating',
+      'stopping',
+      'deleting',
+      'creating',
+      'upgrading',
+      'rollbacking',
+      'recovering',
+      'ceasing',
+      'resizing',
+      'scaling'
+    ]),
     type: PropTypes.string
   };
 
   static defaultProps = {
     type: 'pending',
-    transition: ''
+    transition: '',
+    transMap: {}
   };
 
   render() {
     const {
-      style, className, name, type, transition, t
+      style, className, name, type, transition, transMap, t
     } = this.props;
     const status = String(transition || type).toLowerCase();
-    const normalizeName = t(capitalize(name || status));
+    let transName = name || status;
+    transName = transMap[transName] || transName;
+    const normalizeName = t(capitalize(transName));
 
     return (
       <span className={classnames(styles.status, className)} style={style}>
         <i className={classnames(styles.icon, styles[status])} />
-        {normalizeName}
+        <span className={styles.name}>{normalizeName}</span>
       </span>
     );
   }

diff --git a/src/components/Status/index.scss b/src/components/Status/index.scss
@@ -6,6 +6,10 @@
   flex-direction: row;
   height: 100%;
   align-items: center;
+
+  .name {
+    margin-left: 4px;
+  }
 }
 
 .icon {

diff --git a/src/locales/zh/status.json b/src/locales/zh/status.json
@@ -0,0 +1,3 @@
+{
+  "Normal": "正常"
+}
diff --git a/src/pages/Dashboard/Clusters/index.jsx b/src/pages/Dashboard/Clusters/index.jsx
@@ -14,7 +14,7 @@ import TdName, { ProviderName } from 'components/TdName';
 import TimeShow from 'components/TimeShow';
 import { getObjName } from 'utils';
 import { setPage } from 'mixins';
-import routes, { toRoute } from 'routes';
+import routes, { toRoute, getPortalFromPath } from 'routes';
 
 import styles from './index.scss';
 
@@ -104,19 +104,6 @@ export default class Clusters extends Component {
     }
   };
 
-  // getDetailUrl = clusterId => {
-  //   const { match } = this.props;
-  //   const { appId } = match.params;
-  //   let url = `/dashboard/cluster/${clusterId}`;
-  //   if (appId) {
-  //     const type = match.path.endsWith('sandbox-instances')
-  //       ? `sandbox-instance`
-  //       : 'user-instance';
-  //     url = `/dashboard/app/${appId}/${type}/${clusterId}`;
-  //   }
-  //   return url;
-  // };
-
   getAppTdShow = (appId, apps) => {
     const app = apps.find(item => item.app_id === appId);
 
@@ -264,14 +251,17 @@ export default class Clusters extends Component {
     const { runtimes } = this.props.runtimeStore;
     const { apps } = appStore;
     const { users } = userStore;
+    const transMap = {
+      active: 'normal'
+    };
 
     let columns = [
       {
         title: t('Status'),
         key: 'status',
         width: '90px',
         render: cl => (
-          <Status type={cl.status} transition={cl.transition_status} />
+          <Status type={cl.status} transition={cl.transition_status} transMap={transMap} />
         )
       },
       {
@@ -290,13 +280,13 @@ export default class Clusters extends Component {
         )
       },
       {
-        title: t('Version'),
+        title: user.isUserPortal ? t('App / Delivery type / Version') : t('Version'),
         key: 'app_id',
         width: '120px',
         render: cl => this.getAppTdShow(cl.app_id, apps.toJSON())
       },
       {
-        title: t('Test Runtime'),
+        title: user.isUserPortal ? t('Deploy Runtime') : t('Test Runtime'),
         key: 'runtime_id',
         width: '130px',
         render: cl => (
@@ -318,7 +308,7 @@ export default class Clusters extends Component {
         render: cl => (cl.cluster_node_set && cl.cluster_node_set.length) || 0
       },
       {
-        title: t('Creater'),
+        title: t('Creator'),
         key: 'owner',
         width: '100px',
         render: item => getObjName(users, 'user_id', item.owner, 'username') || item.owner
@@ -344,7 +334,7 @@ export default class Clusters extends Component {
       }
     ];
 
-    if (!user.isAdmin) {
+    if (getPortalFromPath() !== 'admin') {
       columns = columns.filter(item => item.key !== 'owner');
     }
 
@@ -360,7 +350,7 @@ export default class Clusters extends Component {
         key: 'status',
         conditions: [
           { name: t('Pending'), value: 'pending' },
-          { name: t('Active'), value: 'active' },
+          { name: t('Normal'), value: 'active' },
           { name: t('Stopped'), value: 'stopped' },
           { name: t('Suspended'), value: 'suspended' },
           { name: t('Deleted'), value: 'deleted' },

diff --git a/src/portals/user/Layout/index.scss b/src/portals/user/Layout/index.scss
@@ -7,5 +7,6 @@ $offset-top: $header-height + 30 *2 + 52;
   position: relative;
   top: $offset-top;
   width: $page-width;
-  margin: 36px auto 80px auto;
+  margin: 36px auto;
+  padding-bottom: 80px;
 }
diff --git a/src/stores/app/index.js b/src/stores/app/index.js
@@ -223,6 +223,7 @@ class AppStore extends Store {
     this.hasMore = totalCount > apps.length;
 
     if (noMutate) {
+      this.isLoading = false;
       return {
         apps,
         totalCount
@@ -548,16 +549,15 @@ class AppStore extends Store {
   };
 
   reset = () => {
-    this.currentPage = 1;
-    this.selectStatus = '';
-    this.searchWord = '';
     this.categoryId = '';
     this.repoId = '';
     this.userId = '';
 
     this.apps = [];
     this.appDetail = {};
     this.showActiveApps = false;
+
+    this.resetTableParams();
   };
 
   @action