From f957879d0a23acb14aa2dd48c1a6344e28de8b3f Mon Sep 17 00:00:00 2001 From: Xi Wang Date: Thu, 24 Jan 2019 15:45:03 +0800 Subject: [PATCH] fix: User portal issues (#722) * Fix User instances styles * Fix status component * Fix table tr style * Fix Runtime list style in user portal --- src/components/Base/Table/index.scss | 5 ++-- src/components/Layout/SideNav/navMap.js | 2 +- src/components/Status/index.jsx | 40 ++++++++++++++----------- src/components/Status/index.scss | 4 +++ src/locales/zh/status.json | 3 ++ src/pages/Dashboard/Clusters/index.jsx | 30 +++++++------------ src/portals/user/Layout/index.scss | 3 +- src/stores/app/index.js | 6 ++-- 8 files changed, 47 insertions(+), 46 deletions(-) create mode 100644 src/locales/zh/status.json diff --git a/src/components/Base/Table/index.scss b/src/components/Base/Table/index.scss index 8f80e256..2f73daea 100644 --- 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 index 4c34017a..416542f8 100644 --- 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 index 70ed21cb..67ac7e3f 100644 --- 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 ( - {normalizeName} + {normalizeName} ); } diff --git a/src/components/Status/index.scss b/src/components/Status/index.scss index 1052ff80..8c09af65 100644 --- 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 new file mode 100644 index 00000000..c0a70f78 --- /dev/null +++ b/src/locales/zh/status.json @@ -0,0 +1,3 @@ +{ + "Normal": "正常" +} \ No newline at end of file diff --git a/src/pages/Dashboard/Clusters/index.jsx b/src/pages/Dashboard/Clusters/index.jsx index d8163d51..f4aa056b 100644 --- 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,6 +251,9 @@ export default class Clusters extends Component { const { runtimes } = this.props.runtimeStore; const { apps } = appStore; const { users } = userStore; + const transMap = { + active: 'normal' + }; let columns = [ { @@ -271,7 +261,7 @@ export default class Clusters extends Component { key: 'status', width: '90px', render: cl => ( - + ) }, { @@ -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 index d6a46b8c..230b00a4 100644 --- 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 index c1f3ca5b..12fe4850 100644 --- 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,9 +549,6 @@ class AppStore extends Store { }; reset = () => { - this.currentPage = 1; - this.selectStatus = ''; - this.searchWord = ''; this.categoryId = ''; this.repoId = ''; this.userId = ''; @@ -558,6 +556,8 @@ class AppStore extends Store { this.apps = []; this.appDetail = {}; this.showActiveApps = false; + + this.resetTableParams(); }; @action