fix: fix route map and component definition

1. Refresh route map when switch project
2. Change the component definition to get better extension functionality

Change-Id: I6a514914ff711d125b7b280d3415a3f27f58628e

src/layouts/Base/index.jsx

@@ -14,7 +14,7 @@
 
 import React, { Component } from 'react';
 import { inject, observer } from 'mobx-react';
-import { toJS } from 'mobx';
+import { toJS, reaction } from 'mobx';
 import i18n from 'core/i18n';
 import { isAdminPage, isUserCenterPage } from 'utils/index';
 import { BellOutlined } from '@ant-design/icons';
@@ -32,6 +32,13 @@ import styles from './index.less';
 const { Header } = Layout;
 
 export class BaseLayout extends Component {
+  autoReaction = reaction(
+    () => (this.props.rootStore.user || {}).keystone_token,
+    () => {
+      setRouteMap(this.menu);
+    }
+  );
+
   constructor(props) {
     super(props);
     this.state = {
@@ -40,6 +47,10 @@ export class BaseLayout extends Component {
     this.init();
   }
 
+  componentWillUnmount() {
+    this.autoReaction();
+  }
+
   get isAdminPage() {
     const { pathname } = this.props.location;
     return isAdminPage(pathname);

src/pages/identity/containers/User/actions/Password.jsx

@@ -17,9 +17,7 @@ import { ModalAction } from 'containers/Action';
 import { getPasswordOtherRule } from 'utils/validate';
 import globalUserStore from 'stores/keystone/user';
 
-@inject('rootStore')
-@observer
-export default class Password extends ModalAction {
+export class Password extends ModalAction {
   static id = 'update-user-password';
 
   static title = t('Update User Password');
@@ -74,3 +72,5 @@ export default class Password extends ModalAction {
     return globalUserStore.changePassword({ id, password });
   };
 }
+
+export default inject('rootStore')(observer(Password));

src/pages/identity/containers/UserGroup/Detail/index.jsx

@@ -24,9 +24,7 @@ import Project from '../../Project';
 import styles from './index.less';
 import actionConfigs from '../actions';
 
-@inject('rootStore')
-@observer
-export default class Detail extends Base {
+export class Detail extends Base {
   get name() {
     return t('user group');
   }
@@ -133,3 +131,5 @@ export default class Detail extends Base {
     );
   }
 }
+
+export default inject('rootStore')(observer(Detail));

src/pages/identity/containers/UserGroup/actions/Create.jsx

@@ -23,9 +23,7 @@ import globalRoleStore from 'stores/keystone/role';
 import globalDomainStore from 'stores/keystone/domain';
 import globalGroupStore from 'stores/keystone/user-group';
 
-@inject('rootStore')
-@observer
-class CreateForm extends ModalAction {
+export class CreateForm extends ModalAction {
   constructor(props) {
     super(props);
     this.state = {
@@ -266,4 +264,4 @@ class CreateForm extends ModalAction {
   };
 }
 
-export default CreateForm;
+export default inject('rootStore')(observer(CreateForm));

src/pages/identity/containers/UserGroup/actions/DomainPermission.jsx

@@ -17,9 +17,7 @@ import { ModalAction } from 'containers/Action';
 import globalGroupStore from 'stores/keystone/user-group';
 import globalRoleStore from 'stores/keystone/role';
 
-@inject('rootStore')
-@observer
-export default class DomainPermission extends ModalAction {
+export class DomainPermission extends ModalAction {
   init() {
     this.store = globalGroupStore;
     this.roleStore = globalRoleStore;
@@ -123,3 +121,5 @@ export default class DomainPermission extends ModalAction {
     return results;
   };
 }
+
+export default inject('rootStore')(observer(DomainPermission));

src/pages/identity/containers/UserGroup/actions/Edit.jsx

@@ -17,9 +17,7 @@ import { ModalAction } from 'containers/Action';
 import globalDomainStore from 'stores/keystone/domain';
 import globalGroupStore from 'stores/keystone/user-group';
 
-@inject('rootStore')
-@observer
-class EditForm extends ModalAction {
+export class EditForm extends ModalAction {
   init() {
     this.store = globalGroupStore;
     this.domainStore = globalDomainStore;
@@ -94,4 +92,4 @@ class EditForm extends ModalAction {
   };
 }
 
-export default EditForm;
+export default inject('rootStore')(observer(EditForm));

src/pages/identity/containers/UserGroup/actions/SystemPermission.jsx

@@ -17,9 +17,7 @@ import { ModalAction } from 'containers/Action';
 import globalGroupStore from 'stores/keystone/user-group';
 import globalRoleStore from 'stores/keystone/role';
 
-@inject('rootStore')
-@observer
-export default class SystemPermission extends ModalAction {
+export class SystemPermission extends ModalAction {
   init() {
     this.store = globalGroupStore;
     this.roleStore = globalRoleStore;
@@ -119,3 +117,5 @@ export default class SystemPermission extends ModalAction {
     return results;
   };
 }
+
+export default inject('rootStore')(observer(SystemPermission));

src/pages/identity/containers/UserGroup/actions/UserManager.jsx

@@ -18,9 +18,7 @@ import globalGroupStore from 'stores/keystone/user-group';
 import { ModalAction } from 'containers/Action';
 import globalDomainStore from 'stores/keystone/domain';
 
-@inject('rootStore')
-@observer
-export default class UserManager extends ModalAction {
+export class UserManager extends ModalAction {
   constructor(props) {
     super(props);
     this.state = {
@@ -180,3 +178,5 @@ export default class UserManager extends ModalAction {
     return results;
   };
 }
+
+export default inject('rootStore')(observer(UserManager));

src/resources/image.jsx

@@ -14,6 +14,7 @@
 
 import React from 'react';
 import ImageType from 'components/ImageType';
+import { formatSize } from 'utils';
 import { get } from 'lodash';
 import globalRootStore from 'stores/root';
 
@@ -194,12 +195,12 @@ export const getImageColumns = (self) => [
   {
     title: t('Min System Disk'),
     dataIndex: 'min_disk',
-    render: (text) => `${text}GB`,
+    render: (text) => formatSize(text * 1024, 2),
   },
   {
     title: t('Min Memory'),
     dataIndex: 'min_ram',
-    render: (text) => `${text / 1024}GB`,
+    render: (text) => formatSize(text, 2),
   },
   {
     title: t('Access Control'),