feat: Update import && export

1. Update import with @ to relative path
2. Update decorator export

Change-Id: Ib199a7c5eb54e1f30377af0349bca5959a1e54cc

.eslintrc

@@ -32,7 +32,8 @@
           ["layouts", "./src/layouts"],
           ["client", "./src/client"],
           ["resources", "./src/resources"],
-          ["core", "./src/core"]
+          ["core", "./src/core"],
+          ["asset", "./src/asset"]
         ],
         "extensions": [".js", ".jsx"]
       }
@@ -68,6 +69,7 @@
     "import/no-extraneous-dependencies": "warn",
     "import/prefer-default-export": "warn",
     "no-nested-ternary": "warn",
+    "import/no-named-as-default": "warn"
   },
   "globals": {
     "t": true,

src/client/client/request.js

@@ -30,6 +30,10 @@ export class HttpRequest {
     this.request = {};
   }
 
+  gotoLoginPage(path) {
+    globalRootStore.gotoLoginPage(path);
+  }
+
   /**
    * @param instance instance of axios
    * @param url request url
@@ -93,7 +97,7 @@ export class HttpRequest {
           if (status === 401) {
             const currentPath = window.location.pathname;
             if (currentPath.indexOf('login') < 0) {
-              globalRootStore.gotoLoginPage(currentPath);
+              this.gotoLoginPage(currentPath);
             }
           }
         }

src/components/Cards/NotFound/index.jsx

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from 'react';
-import emptyCard from '@/asset/image/empty-card.svg';
+import emptyCard from 'asset/image/empty-card.svg';
 import { firstUpperCase } from 'utils/index';
 import { Link } from 'react-router-dom';
 import styles from './index.less';

src/components/Notify/index.jsx

@@ -25,7 +25,7 @@ import CodeEditor from 'components/CodeEditor';
 import ModalButton from 'components/ModalButton';
 import globalRootStore from 'stores/root';
 import { unescapeHtml } from 'utils/index';
-import { statusMap } from '@/resources/code';
+import { statusMap } from 'resources/code';
 import { isEmpty, isString } from 'lodash';
 import styles from './index.less';
 

src/core/routes.js

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import BlankLayout from '@/layouts/Blank';
+import BlankLayout from 'layouts/Blank';
 import E404 from 'pages/base/containers/404';
 import { lazy } from 'react';
 

src/pages/auth/routes/index.js

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import AuthLayout from '@/layouts/Auth';
+import AuthLayout from 'layouts/Auth';
 import Login from '../containers/Login';
 import ChangePassword from '../containers/ChangePassword';
 

src/pages/base/containers/AdminOverview/components/PlatformInfo.jsx

@@ -48,8 +48,6 @@ const actions = [
   },
 ];
 
-@inject('rootStore')
-@observer
 class ProjectInfo extends Component {
   componentDidMount() {
     this.props.store.getProjectInfoData();
@@ -101,4 +99,4 @@ ProjectInfo.propTypes = {
   store: PropTypes.object.isRequired,
 };
 
-export default ProjectInfo;
+export default inject('rootStore')(observer(ProjectInfo));

src/pages/base/containers/AdminOverview/components/ResourceOverview.jsx

@@ -81,8 +81,6 @@ const volumeColors = {
   other: { color: '#F6B23D', text: t('Others') },
 };
 
-@inject('rootStore')
-@observer
 class virtualResourceInfo extends Component {
   componentDidMount() {
     this.props.store.getVirtualResource();
@@ -199,4 +197,4 @@ virtualResourceInfo.propTypes = {
   store: PropTypes.object.isRequired,
 };
 
-export default virtualResourceInfo;
+export default inject('rootStore')(observer(virtualResourceInfo));

src/pages/base/containers/AdminOverview/components/VirtualResource.jsx

@@ -36,8 +36,7 @@ export const color = {
   warnColor: '#FE9901',
   dangerColor: '#D93126',
 };
-@inject('rootStore')
-@observer
+
 class ResourceCircle extends Component {
   constructor(props) {
     super(props);
@@ -129,4 +128,4 @@ class ResourceCircle extends Component {
   }
 }
 
-export default ResourceCircle;
+export default inject('rootStore')(observer(ResourceCircle));

src/pages/base/containers/Overview/components/ProjectInfo.jsx

@@ -18,8 +18,6 @@ import { inject, observer } from 'mobx-react';
 import { UpOutlined, DownOutlined } from '@ant-design/icons';
 import styles from '../style.less';
 
-@inject('rootStore')
-@observer
 class ProjectInfo extends Component {
   constructor(props) {
     super(props);
@@ -87,4 +85,4 @@ class ProjectInfo extends Component {
   }
 }
 
-export default ProjectInfo;
+export default inject('rootStore')(observer(ProjectInfo));

src/pages/base/containers/Overview/components/QuotaOverview.jsx

@@ -27,8 +27,6 @@ const colors = {
   full: { color: '#E8684A', text: t('Full') },
 };
 
-@inject('rootStore')
-@observer
 class QuotaOverview extends Component {
   constructor(props) {
     super(props);
@@ -272,4 +270,4 @@ class QuotaOverview extends Component {
   }
 }
 
-export default QuotaOverview;
+export default inject('rootStore')(observer(QuotaOverview));

src/pages/base/routes/index.js

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import BaseLayout from '@/layouts/Basic';
+import BaseLayout from 'layouts/Basic';
 import E404 from '../containers/404';
 import Overview from '../containers/Overview';
 import AdminOverview from '../containers/AdminOverview';

src/pages/compute/containers/Flavor/Arm/index.jsx

@@ -25,9 +25,7 @@ import {
 import { getOptions } from 'utils/index';
 import actionConfigs from './actions';
 
-@inject('rootStore')
-@observer
-export default class Flavor extends Base {
+export class Flavor extends Base {
   init() {
     this.store = new FlavorStore();
   }
@@ -69,3 +67,5 @@ export default class Flavor extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(Flavor));

src/pages/compute/containers/Flavor/BareMetal/index.jsx

@@ -23,9 +23,7 @@ import {
 } from 'resources/flavor';
 import actionConfigs from './actions';
 
-@inject('rootStore')
-@observer
-export default class Flavor extends Base {
+export class Flavor extends Base {
   init() {
     this.store = new FlavorStore();
   }
@@ -70,3 +68,5 @@ export default class Flavor extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(Flavor));

src/pages/compute/containers/Flavor/Heterogeneous/index.jsx

@@ -26,9 +26,7 @@ import {
 import { getOptions } from 'utils/index';
 import actionConfigs from './actions';
 
-@inject('rootStore')
-@observer
-export default class Flavor extends Base {
+export class Flavor extends Base {
   init() {
     this.store = new FlavorStore();
   }
@@ -71,3 +69,5 @@ export default class Flavor extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(Flavor));

src/pages/compute/containers/Flavor/Other/index.jsx

@@ -19,9 +19,7 @@ import { emptyActionConfig } from 'utils/constants';
 import { getBaseColumns, extraColumns } from 'resources/flavor';
 import actionConfigs from './actions';
 
-@inject('rootStore')
-@observer
-export default class Flavor extends Base {
+export class Flavor extends Base {
   init() {
     this.store = new FlavorStore();
   }
@@ -62,3 +60,5 @@ export default class Flavor extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(Flavor));

src/pages/compute/containers/Flavor/X86/index.jsx

@@ -25,9 +25,7 @@ import {
 import { getOptions } from 'utils/index';
 import actionConfigs from './actions';
 
-@inject('rootStore')
-@observer
-export default class Flavor extends Base {
+export class Flavor extends Base {
   init() {
     this.store = new FlavorStore();
   }
@@ -69,3 +67,5 @@ export default class Flavor extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(Flavor));

src/pages/compute/containers/Flavor/actions/StepCreate/ParamSetting.jsx

@@ -37,9 +37,7 @@ import { parse } from 'qs';
 import KeyValueInput from 'components/FormItem/KeyValueInput';
 import { isEmpty } from 'lodash';
 
-@inject('rootStore')
-@observer
-export default class ParamSetting extends Base {
+export class ParamSetting extends Base {
   init() {
     this.settingStore = globalSettingStore;
     this.getSettings();
@@ -520,3 +518,5 @@ export default class ParamSetting extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(ParamSetting));

src/pages/compute/containers/HostAggregate/Aggregate/actions/Create.jsx

@@ -14,7 +14,7 @@
 
 import { inject, observer } from 'mobx-react';
 import globalAggregateStore from 'stores/nova/aggregate';
-import { ModalAction } from '@/containers/Action';
+import { ModalAction } from 'containers/Action';
 import globalAvailabilityZoneStore from 'stores/nova/zone';
 import { getYesNoList } from 'utils/index';
 

src/pages/compute/containers/Hypervisors/Hypervisor/Detail/index.jsx

@@ -17,9 +17,7 @@ import { HypervisorStore } from 'stores/nova/hypervisor';
 import Base from 'containers/TabDetail';
 import Members from 'pages/compute/containers/Instance';
 
-@inject('rootStore')
-@observer
-export default class HypervisorDetail extends Base {
+export class HypervisorDetail extends Base {
   get name() {
     return t('hypervisor');
   }
@@ -71,3 +69,5 @@ export default class HypervisorDetail extends Base {
     this.store = new HypervisorStore();
   }
 }
+
+export default inject('rootStore')(observer(HypervisorDetail));

src/pages/compute/containers/Hypervisors/Hypervisor/index.jsx

@@ -17,9 +17,7 @@ import Base from 'containers/List';
 import globalHypervisorStore from 'stores/nova/hypervisor';
 import { hypervisorColumns, hypervisorFilters } from 'resources/hypervisor';
 
-@inject('rootStore')
-@observer
-export default class Hypervisors extends Base {
+export class Hypervisors extends Base {
   init() {
     this.store = globalHypervisorStore;
   }
@@ -59,3 +57,5 @@ export default class Hypervisors extends Base {
     return hypervisorFilters;
   }
 }
+
+export default inject('rootStore')(observer(Hypervisors));

src/pages/compute/containers/Image/Detail/BaseDetail.jsx

@@ -20,9 +20,7 @@ import Base from 'containers/BaseDetail';
 import { isObject, isArray } from 'lodash';
 import { Link } from 'react-router-dom';
 
-@inject('rootStore')
-@observer
-export default class BaseDetail extends Base {
+export class BaseDetail extends Base {
   get isImageDetail() {
     const { pathname } = this.props.location;
     return pathname.indexOf('image') >= 0;
@@ -197,3 +195,5 @@ export default class BaseDetail extends Base {
     };
   }
 }
+
+export default inject('rootStore')(observer(BaseDetail));

src/pages/compute/containers/Image/Detail/index.jsx

@@ -19,9 +19,7 @@ import Base from 'containers/TabDetail';
 import BaseDetail from './BaseDetail';
 import actionConfigs from '../actions';
 
-@inject('rootStore')
-@observer
-export default class ImageDetail extends Base {
+export class ImageDetail extends Base {
   get name() {
     return this.isImageDetail ? t('image') : t('instance snapshot');
   }
@@ -92,3 +90,5 @@ export default class ImageDetail extends Base {
     this.store = new ImageStore();
   }
 }
+
+export default inject('rootStore')(observer(ImageDetail));

src/pages/compute/containers/Image/actions/Create.jsx

@@ -27,8 +27,6 @@ import { NoSetValue, getOptionsWithNoset, getOptions } from 'utils/index';
 import { ProjectStore } from 'stores/keystone/project';
 import { projectTableOptions } from 'resources/project';
 
-@inject('rootStore')
-@observer
 class CreateForm extends FormAction {
   init() {
     this.store = globalImageStore;
@@ -334,4 +332,4 @@ class CreateForm extends FormAction {
   };
 }
 
-export default CreateForm;
+export default inject('rootStore')(observer(CreateForm));

src/pages/compute/containers/Image/actions/CreateVolume.jsx

@@ -16,9 +16,7 @@ import { inject, observer } from 'mobx-react';
 import { ModalAction } from 'containers/Action';
 import globalVolumeStore from 'stores/cinder/volume';
 
-@inject('rootStore')
-@observer
-export default class CreateVolume extends ModalAction {
+export class CreateVolume extends ModalAction {
   static id = 'create';
 
   static title = t('Create Volume');
@@ -110,3 +108,5 @@ export default class CreateVolume extends ModalAction {
     return globalVolumeStore.create(body);
   };
 }
+
+export default inject('rootStore')(observer(CreateVolume));

src/pages/compute/containers/Instance/Detail/BaseDetail/index.jsx

@@ -37,9 +37,7 @@ import { getSinceTime } from 'utils/time';
 import AttachVolume from 'pages/compute/containers/Instance/actions/AttachVolume';
 import styles from './index.less';
 
-@inject('rootStore')
-@observer
-export default class BaseDetail extends Base {
+export class BaseDetail extends Base {
   componentDidMount() {
     this.fetchVolumes();
     this.fetchInterfaces();
@@ -424,3 +422,5 @@ export default class BaseDetail extends Base {
     };
   }
 }
+
+export default inject('rootStore')(observer(BaseDetail));

src/pages/compute/containers/Instance/Detail/SecurityGroup/index.jsx

@@ -29,7 +29,7 @@ import {
 } from 'antd';
 import PrimaryActionButtons from 'components/Tables/Base/PrimaryActionButtons';
 import classnames from 'classnames';
-import interfaceImg from '@/asset/image/interface.png';
+import interfaceImg from 'asset/image/interface.png';
 import { CaretRightOutlined } from '@ant-design/icons';
 import ItemActionButtons from 'components/Tables/Base/ItemActionButtons';
 import { getSelfColumns } from 'resources/security-group-rule';
@@ -41,9 +41,7 @@ import ManageSecurityGroup from './action/ManageSecurityGroup';
 const { Panel } = Collapse;
 const { TabPane } = Tabs;
 
-@inject('rootStore')
-@observer
-export default class SecurityGroup extends React.Component {
+export class SecurityGroup extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -248,3 +246,5 @@ export default class SecurityGroup extends React.Component {
     );
   }
 }
+
+export default inject('rootStore')(observer(SecurityGroup));

src/pages/compute/containers/Instance/Detail/index.jsx

@@ -30,9 +30,7 @@ import SecurityGroup from './SecurityGroup';
 import ActionLog from './ActionLog';
 import actionConfigs from '../actions';
 
-@inject('rootStore')
-@observer
-export default class InstanceDetail extends Base {
+export class InstanceDetail extends Base {
   get name() {
     return t('instance');
   }
@@ -161,3 +159,5 @@ export default class InstanceDetail extends Base {
     this.store = new ServerStore();
   }
 }
+
+export default inject('rootStore')(observer(InstanceDetail));

src/pages/compute/containers/Instance/actions/AttachIsoVolume.jsx

@@ -24,9 +24,7 @@ import {
 import { multiTip } from 'resources/volume';
 import { get as _get } from 'lodash';
 
-@inject('rootStore')
-@observer
-export default class AttachIsoVolume extends ModalAction {
+export class AttachIsoVolume extends ModalAction {
   static id = 'attach-iso-volume';
 
   static title = t('Attach Iso Volume');
@@ -128,3 +126,5 @@ export default class AttachIsoVolume extends ModalAction {
     return this.store.attachVolume({ id, body });
   };
 }
+
+export default inject('rootStore')(observer(AttachIsoVolume));

src/pages/compute/containers/Instance/actions/AttachVolume.jsx

@@ -24,9 +24,7 @@ import {
 import { multiTip } from 'resources/volume';
 import { get as _get } from 'lodash';
 
-@inject('rootStore')
-@observer
-export default class AttachVolume extends ModalAction {
+export class AttachVolume extends ModalAction {
   static id = 'attach-volume';
 
   static title = t('Attach Volume');
@@ -111,3 +109,5 @@ export default class AttachVolume extends ModalAction {
     return this.store.attachVolume({ id, body });
   };
 }
+
+export default inject('rootStore')(observer(AttachVolume));

src/pages/compute/containers/Instance/actions/CreateIronic/BaseStep/index.jsx

@@ -26,9 +26,7 @@ import {
 import Base from 'components/Form';
 import FlavorSelectTable from '../../../components/FlavorSelectTable';
 
-@inject('rootStore')
-@observer
-export default class BaseStep extends Base {
+export class BaseStep extends Base {
   init() {
     this.imageStore = globalImageStore;
     this.getAvailZones();
@@ -209,3 +207,5 @@ export default class BaseStep extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(BaseStep));

src/pages/compute/containers/Instance/actions/CreateIronic/ConfirmStep/index.jsx

@@ -15,9 +15,7 @@
 import { inject, observer } from 'mobx-react';
 import Base from 'components/Form';
 
-@inject('rootStore')
-@observer
-export default class ConfirmStep extends Base {
+export class ConfirmStep extends Base {
   init() {}
 
   get title() {
@@ -169,3 +167,5 @@ export default class ConfirmStep extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(ConfirmStep));

src/pages/compute/containers/Instance/actions/CreateIronic/NetworkStep/index.jsx

@@ -33,9 +33,7 @@ import {
 // import EditYamlModal from 'components/Modals/EditYaml';
 const { isIPv4, isIpv6 } = ipValidate;
 
-@inject('rootStore')
-@observer
-export default class NetworkStep extends Base {
+export class NetworkStep extends Base {
   init() {
     this.networkStore = new NetworkStore();
     this.subnetStore = new SubnetStore();
@@ -259,3 +257,5 @@ export default class NetworkStep extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(NetworkStep));

src/pages/compute/containers/Instance/actions/CreateIronic/SystemStep/index.jsx

@@ -17,9 +17,7 @@ import globalKeyPairStore from 'stores/nova/keypair';
 import Base from 'components/Form';
 import { getPasswordOtherRule } from 'utils/validate';
 
-@inject('rootStore')
-@observer
-export default class SystemStep extends Base {
+export class SystemStep extends Base {
   init() {
     this.keyPairStore = globalKeyPairStore;
     this.getKeypairs();
@@ -142,3 +140,5 @@ export default class SystemStep extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(SystemStep));

src/pages/compute/containers/Instance/actions/CreateIronic/index.jsx

@@ -30,9 +30,7 @@ import SystemStep from './SystemStep';
 import NetworkStep from './NetworkStep';
 import BaseStep from './BaseStep';
 
-@inject('rootStore')
-@observer
-export default class CreateIronic extends StepAction {
+export class CreateIronic extends StepAction {
   static id = 'ironic-create';
 
   static title = t('Create Ironic Instance');
@@ -344,3 +342,5 @@ export default class CreateIronic extends StepAction {
     );
   };
 }
+
+export default inject('rootStore')(observer(CreateIronic));

src/pages/compute/containers/Instance/actions/CreateSnapshot.jsx

@@ -19,9 +19,7 @@ import { checkStatus, isIronicInstance } from 'resources/instance';
 import globalInstanceVolumeStore from 'stores/nova/instance-volume';
 import globalVolumeTypeStore from 'stores/cinder/volume-type';
 
-@inject('rootStore')
-@observer
-export default class CreateSnapshot extends ModalAction {
+export class CreateSnapshot extends ModalAction {
   static id = 'create-snapshot';
 
   static title = t('Create Snapshot');
@@ -87,3 +85,5 @@ export default class CreateSnapshot extends ModalAction {
     return this.store.createImage({ id, image: snapshot });
   };
 }
+
+export default inject('rootStore')(observer(CreateSnapshot));

src/pages/compute/containers/Instance/actions/DetachIsoVolume.jsx

@@ -24,9 +24,7 @@ import {
   isIronicInstance,
 } from 'resources/instance';
 
-@inject('rootStore')
-@observer
-export default class DetachIsoVolume extends ModalAction {
+export class DetachIsoVolume extends ModalAction {
   static id = 'detach-iso-volume';
 
   static title = t('Detach Iso Volume');
@@ -143,3 +141,5 @@ export default class DetachIsoVolume extends ModalAction {
     return this.store.detachVolume({ id, volumes: selectedRowKeys });
   };
 }
+
+export default inject('rootStore')(observer(DetachIsoVolume));

src/pages/compute/containers/Instance/actions/DetachVolume.jsx

@@ -24,9 +24,7 @@ import {
   isIronicInstance,
 } from 'resources/instance';
 
-@inject('rootStore')
-@observer
-export default class DetachVolume extends ModalAction {
+export class DetachVolume extends ModalAction {
   static id = 'detach-volume';
 
   static title = t('Detach Volume');
@@ -137,3 +135,5 @@ export default class DetachVolume extends ModalAction {
     return this.store.detachVolume({ id, volumes: selectedRowKeys });
   };
 }
+
+export default inject('rootStore')(observer(DetachVolume));

src/pages/compute/containers/Instance/actions/ExtendRootVolume.jsx

@@ -21,9 +21,7 @@ import { ModalAction } from 'containers/Action';
 import { isNotLocked, checkStatus, isIronicInstance } from 'resources/instance';
 import { isOsDisk } from 'resources/volume';
 
-@inject('rootStore')
-@observer
-export default class ExtendRootVolume extends ModalAction {
+export class ExtendRootVolume extends ModalAction {
   static id = 'extend-root-volume';
 
   static title = t('Extend Root Volume');
@@ -118,3 +116,5 @@ export default class ExtendRootVolume extends ModalAction {
     return globalVolumeStore.extendSize(id, body);
   };
 }
+
+export default inject('rootStore')(observer(ExtendRootVolume));

src/pages/compute/containers/Instance/actions/RebuildSelect.jsx

@@ -29,9 +29,7 @@ import {
   canImageCreateInstance,
 } from 'resources/image';
 
-@inject('rootStore')
-@observer
-export default class Rebuild extends ModalAction {
+export class Rebuild extends ModalAction {
   static id = 'rebuild';
 
   static title = t('Rebuild Instance');
@@ -170,3 +168,5 @@ export default class Rebuild extends ModalAction {
     return this.store.rebuild({ id, image: selectedRowKeys[0] });
   };
 }
+
+export default inject('rootStore')(observer(Rebuild));

src/pages/compute/containers/Instance/actions/Resize.jsx

@@ -24,9 +24,7 @@ import {
 } from 'resources/instance';
 import FlavorSelectTable from '../components/FlavorSelectTable';
 
-@inject('rootStore')
-@observer
-export default class Resize extends ModalAction {
+export class Resize extends ModalAction {
   static id = 'resize';
 
   static title = t('Resize');
@@ -142,3 +140,5 @@ export default class Resize extends ModalAction {
     return globalServerStore.resize({ id, flavor });
   };
 }
+
+export default inject('rootStore')(observer(Resize));

src/pages/compute/containers/Instance/actions/ResizeOnline.jsx

@@ -25,9 +25,7 @@ import {
 } from 'resources/instance';
 import FlavorSelectTable from '../components/FlavorSelectTable';
 
-@inject('rootStore')
-@observer
-export default class ResizeOnline extends ModalAction {
+export class ResizeOnline extends ModalAction {
   static id = 'resize-online';
 
   static title = t('Online Resize');
@@ -138,3 +136,5 @@ export default class ResizeOnline extends ModalAction {
     return globalServerStore.liveResize({ id, flavor });
   };
 }
+
+export default inject('rootStore')(observer(ResizeOnline));

src/pages/compute/containers/Instance/actions/StepCreate/BaseStep/index.jsx

@@ -32,9 +32,7 @@ import InstanceVolume from 'components/FormItem/InstanceVolume';
 import { isGpuCategory } from 'resources/flavor';
 import FlavorSelectTable from '../../../components/FlavorSelectTable';
 
-@inject('rootStore')
-@observer
-export default class BaseStep extends Base {
+export class BaseStep extends Base {
   init() {
     this.serverStore = globalServerStore;
     this.imageStore = globalImageStore;
@@ -458,3 +456,5 @@ export default class BaseStep extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(BaseStep));

src/pages/compute/containers/Instance/actions/StepCreate/ConfirmStep/index.jsx

@@ -16,9 +16,7 @@ import { inject, observer } from 'mobx-react';
 import Base from 'components/Form';
 import { physicalNodeTypes } from 'resources/instance';
 
-@inject('rootStore')
-@observer
-export default class ConfirmStep extends Base {
+export class ConfirmStep extends Base {
   init() {}
 
   get title() {
@@ -259,3 +257,5 @@ export default class ConfirmStep extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(ConfirmStep));

src/pages/compute/containers/Instance/actions/StepCreate/NetworkStep/index.jsx

@@ -33,9 +33,7 @@ import {
 // import EditYamlModal from 'components/Modals/EditYaml';
 const { isIPv4, isIpv6 } = ipValidate;
 
-@inject('rootStore')
-@observer
-export default class NetworkStep extends Base {
+export class NetworkStep extends Base {
   init() {
     this.networkStore = new NetworkStore();
     this.subnetStore = new SubnetStore();
@@ -259,3 +257,5 @@ export default class NetworkStep extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(NetworkStep));

src/pages/compute/containers/Instance/actions/StepCreate/SystemStep/index.jsx

@@ -23,9 +23,7 @@ import { getPasswordOtherRule } from 'utils/validate';
 import { hypervisorColumns, hypervisorFilters } from 'resources/hypervisor';
 import { physicalNodeTypes } from 'resources/instance';
 
-@inject('rootStore')
-@observer
-export default class SystemStep extends Base {
+export class SystemStep extends Base {
   init() {
     this.keyPairStore = globalKeyPairStore;
     this.serverStore = globalServerStore;
@@ -340,3 +338,5 @@ export default class SystemStep extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(SystemStep));

src/pages/compute/containers/Instance/actions/StepCreate/index.jsx

@@ -29,8 +29,6 @@ import SystemStep from './SystemStep';
 import NetworkStep from './NetworkStep';
 import BaseStep from './BaseStep';
 
-@inject('rootStore')
-@observer
 class StepCreate extends StepAction {
   static id = 'instance-create';
 
@@ -387,4 +385,4 @@ class StepCreate extends StepAction {
   };
 }
 
-export default StepCreate;
+export default inject('rootStore')(observer(StepCreate));

src/pages/compute/containers/Instance/components/FlavorSelectTable.jsx

@@ -32,9 +32,7 @@ import {
 } from 'resources/flavor';
 import styles from './index.less';
 
-@inject('rootStore')
-@observer
-export default class FlavorSelectTable extends Component {
+export class FlavorSelectTable extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -351,3 +349,5 @@ export default class FlavorSelectTable extends Component {
     return <SelectTable {...props} />;
   }
 }
+
+export default inject('rootStore')(observer(FlavorSelectTable));

src/pages/compute/routes/index.js

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import BaseLayout from '@/layouts/Basic';
+import BaseLayout from 'layouts/Basic';
 import E404 from 'pages/base/containers/404';
 import Instance from '../containers/Instance';
 import InstanceDetail from '../containers/Instance/Detail';

src/pages/configuration/containers/SystemInfo/NeutronAgent/Detail/Network/actions/Add.jsx

@@ -15,7 +15,7 @@
 import { inject, observer } from 'mobx-react';
 import { NetworkStore } from 'stores/neutron/network';
 import globalNeutronAgentNetworkStore from 'stores/neutron/agent-network';
-import { ModalAction } from '@/containers/Action';
+import { ModalAction } from 'containers/Action';
 import { networkColumns, networkSortProps } from 'resources/network';
 import { yesNoOptions } from 'utils/constants';
 import { projectRender } from 'utils/table';

src/pages/configuration/routes/index.js

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import BaseLayout from '@/layouts/Basic';
+import BaseLayout from 'layouts/Basic';
 import E404 from 'pages/base/containers/404';
 import SystemInfo from '../containers/SystemInfo';
 import Setting from '../containers/Setting';

src/pages/heat/containers/Stack/Detail/Resource.jsx

@@ -19,9 +19,7 @@ import { StackResourceStore } from 'stores/heat/resource';
 import { stackStatus } from 'resources/stack';
 import { Link } from 'react-router-dom';
 
-@inject('rootStore')
-@observer
-export default class Resource extends Base {
+export class Resource extends Base {
   init() {
     this.store = new StackResourceStore();
   }
@@ -237,3 +235,5 @@ export default class Resource extends Base {
     },
   ];
 }
+
+export default inject('rootStore')(observer(Resource));

src/pages/heat/containers/Stack/Detail/index.jsx

@@ -22,9 +22,7 @@ import Event from './Event';
 import Template from './Template';
 import actionConfigs from '../actions';
 
-@inject('rootStore')
-@observer
-export default class StackDetail extends Base {
+export class StackDetail extends Base {
   get name() {
     return t('stack');
   }
@@ -99,3 +97,5 @@ export default class StackDetail extends Base {
     return tabs;
   }
 }
+
+export default inject('rootStore')(observer(StackDetail));

src/pages/heat/routes/index.js

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import BaseLayout from '@/layouts/Basic';
+import BaseLayout from 'layouts/Basic';
 import E404 from 'pages/base/containers/404';
 import Stack from '../containers/Stack';
 import StackDetail from '../containers/Stack/Detail';

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

@@ -22,9 +22,7 @@ import User from '../../User';
 import Quota from './Quota';
 import actionConfigs from '../actions';
 
-@inject('rootStore')
-@observer
-export default class InstanceDetail extends Base {
+export class Detail extends Base {
   get name() {
     return t('project');
   }
@@ -114,3 +112,5 @@ export default class InstanceDetail extends Base {
     this.routing.push(`${this.listUrl}/edit/${id}`);
   };
 }
+
+export default inject('rootStore')(observer(Detail));

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

@@ -19,8 +19,6 @@ import globalProjectStore from 'stores/keystone/project';
 import { regex } from 'utils/validate';
 import { statusTypes } from 'utils/constants';
 
-@inject('rootStore')
-@observer
 class CreateForm extends ModalAction {
   constructor(props) {
     super(props);
@@ -156,4 +154,4 @@ class CreateForm extends ModalAction {
   };
 }
 
-export default CreateForm;
+export default inject('rootStore')(observer(CreateForm));

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

@@ -18,8 +18,6 @@ import globalProjectStore from 'stores/keystone/project';
 import { regex } from 'utils/validate';
 import { statusTypes } from 'utils/constants';
 
-@inject('rootStore')
-@observer
 class EditForm extends ModalAction {
   init() {
     this.store = globalProjectStore;
@@ -108,4 +106,4 @@ class EditForm extends ModalAction {
   };
 }
 
-export default EditForm;
+export default inject('rootStore')(observer(EditForm));

src/pages/identity/containers/Project/actions/QuotaManager.jsx

@@ -18,9 +18,7 @@ import React from 'react';
 import { ModalAction } from 'containers/Action';
 import globalVolumeTypeStore from 'stores/cinder/volume-type';
 
-@inject('rootStore')
-@observer
-export default class QuotaManager extends ModalAction {
+export class QuotaManager extends ModalAction {
   static id = 'quota-management';
 
   static title = t('Edit Quota');
@@ -374,3 +372,5 @@ export default class QuotaManager extends ModalAction {
     return results;
   };
 }
+
+export default inject('rootStore')(observer(QuotaManager));

src/pages/identity/containers/Project/actions/UserGroupManager.jsx

@@ -20,9 +20,7 @@ import globalGroupStore from 'stores/keystone/user-group';
 import globalRoleStore from 'stores/keystone/role';
 import { ModalAction } from 'containers/Action';
 
-@inject('rootStore')
-@observer
-export default class UserGroupManager extends ModalAction {
+export class UserGroupManager extends ModalAction {
   constructor(props) {
     super(props);
     this.state = {
@@ -204,3 +202,5 @@ export default class UserGroupManager extends ModalAction {
     return results;
   };
 }
+
+export default inject('rootStore')(observer(UserGroupManager));

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

@@ -21,9 +21,7 @@ import globalRoleStore from 'stores/keystone/role';
 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);
     const projectRole = JSON.stringify(this.item.userMapProjectRoles);
@@ -313,3 +311,5 @@ export default class UserManager extends ModalAction {
     return results;
   };
 }
+
+export default inject('rootStore')(observer(UserManager));

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

@@ -19,9 +19,7 @@ import User from '../../User';
 import Group from '../../UserGroup';
 import impliedRole from './BaseDetail';
 
-@inject('rootStore')
-@observer
-export default class RoleDetail extends Base {
+export class RoleDetail extends Base {
   get name() {
     return t('role');
   }
@@ -72,3 +70,5 @@ export default class RoleDetail extends Base {
     return tabs;
   }
 }
+
+export default inject('rootStore')(observer(RoleDetail));

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

@@ -22,9 +22,7 @@ import UserGroup from '../../UserGroup';
 import Project from '../../Project';
 import actionConfigs from '../actions';
 
-@inject('rootStore')
-@observer
-export default class UserDetail extends Base {
+export class UserDetail extends Base {
   get name() {
     return t('user');
   }
@@ -134,3 +132,5 @@ export default class UserDetail extends Base {
     return tabs;
   }
 }
+
+export default inject('rootStore')(observer(UserDetail));

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

@@ -28,8 +28,6 @@ import {
 } from 'utils/validate';
 import { statusTypes } from 'utils/constants';
 
-@inject('rootStore')
-@observer
 class CreateForm extends FormAction {
   constructor(props) {
     super(props);
@@ -395,4 +393,4 @@ class CreateForm extends FormAction {
   };
 }
 
-export default CreateForm;
+export default inject('rootStore')(observer(CreateForm));

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

@@ -18,8 +18,6 @@ import globalUserStore from 'stores/keystone/user';
 import globalDomainStore from 'stores/keystone/domain';
 import { phoneNumberValidate, emailValidate } from 'utils/validate';
 
-@inject('rootStore')
-@observer
 class EditForm extends ModalAction {
   init() {
     this.store = globalUserStore;
@@ -182,4 +180,4 @@ class EditForm extends ModalAction {
   };
 }
 
-export default EditForm;
+export default inject('rootStore')(observer(EditForm));

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

@@ -21,9 +21,7 @@ import globalRoleStore from 'stores/keystone/role';
 import { ModalAction } from 'containers/Action';
 import globalDomainStore from 'stores/keystone/domain';
 
-@inject('rootStore')
-@observer
-export default class SystemRole extends ModalAction {
+export class SystemRole extends ModalAction {
   constructor(props) {
     super(props);
     const systemRole = JSON.stringify(this.item.projectMapSystemRole);
@@ -318,3 +316,5 @@ export default class SystemRole extends ModalAction {
     return results;
   };
 }
+
+export default inject('rootStore')(observer(SystemRole));

src/pages/identity/containers/User/actionsInDomain/Create.jsx

@@ -22,9 +22,7 @@ import { getPasswordOtherRule } from 'utils/validate';
 import globalDomainStore from 'stores/keystone/domain';
 import { statusTypes } from 'utils/constants';
 
-@inject('rootStore')
-@observer
-export default class CreateForm extends ModalAction {
+export class CreateForm extends ModalAction {
   init() {
     this.store = globalUserStore;
     this.userGroupStore = globalGroupStore;
@@ -233,3 +231,5 @@ export default class CreateForm extends ModalAction {
     return this.store.create(data);
   };
 }
+
+export default inject('rootStore')(observer(CreateForm));

src/pages/identity/containers/User/index.jsx

@@ -21,9 +21,7 @@ import { yesNoOptions, emptyActionConfig } from 'utils/constants';
 import actionConfigs from './actions';
 import actionConfigsInDomain from './actionsInDomain';
 
-@inject('rootStore')
-@observer
-export default class User extends Base {
+export class User extends Base {
   init() {
     this.store = globalUserStore;
     this.getDomains();
@@ -202,3 +200,5 @@ export default class User extends Base {
     this.list.silent = false;
   }
 }
+
+export default inject('rootStore')(observer(User));

src/pages/identity/routes/index.js

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import BaseLayout from '@/layouts/Basic';
+import BaseLayout from 'layouts/Basic';
 import E404 from 'pages/base/containers/404';
 import Domain from '../containers/Domain';
 import DomainCreate from '../containers/Domain/actions/Create';

src/pages/management/routes/index.js

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import BaseLayout from '@/layouts/Basic';
+import BaseLayout from 'layouts/Basic';
 import E404 from 'pages/base/containers/404';
 // import InstanceDetail from 'pages/compute/containers/Instance/Detail';
 // import RecycleBin from '../containers/RecycleBin';

src/pages/network/containers/FloatingIp/Detail/BaseDetail.jsx

@@ -18,9 +18,7 @@ import { FloatingIpStore } from 'stores/neutron/floatingIp';
 import { Link } from 'react-router-dom';
 import Base from 'containers/BaseDetail';
 
-@inject('rootStore')
-@observer
-export default class BaseDetail extends Base {
+export class BaseDetail extends Base {
   init() {
     this.store = new FloatingIpStore();
   }
@@ -86,3 +84,5 @@ export default class BaseDetail extends Base {
     };
   }
 }
+
+export default inject('rootStore')(observer(BaseDetail));

src/pages/network/containers/FloatingIp/actions/Allocate.jsx

@@ -22,9 +22,7 @@ import globalSubnetStore from 'stores/neutron/subnet';
 import { QoSPolicyStore } from 'stores/neutron/qos-policy';
 import { getQoSPolicyTabs } from 'resources/qos-policy';
 
-@inject('rootStore')
-@observer
-export default class Allocate extends ModalAction {
+export class Allocate extends ModalAction {
   static id = 'allocate';
 
   static title = t('Allocate IP');
@@ -227,3 +225,5 @@ export default class Allocate extends ModalAction {
     ];
   }
 }
+
+export default inject('rootStore')(observer(Allocate));

src/pages/network/containers/FloatingIp/actions/Edit.jsx

@@ -18,9 +18,7 @@ import globalFloatingIpsStore from 'stores/neutron/floatingIp';
 import { getQoSPolicyTabs } from 'resources/qos-policy';
 import { QoSPolicyStore } from 'stores/neutron/qos-policy';
 
-@inject('rootStore')
-@observer
-export default class Edit extends ModalAction {
+export class Edit extends ModalAction {
   static id = 'edit-floating-ip';
 
   static policy = 'update_floatingip';
@@ -86,3 +84,5 @@ export default class Edit extends ModalAction {
     ];
   }
 }
+
+export default inject('rootStore')(observer(Edit));

src/pages/network/containers/QoSPolicy/AdminQoSPolicy.js

@@ -18,9 +18,7 @@ import { QoSPolicyStore } from 'stores/neutron/qos-policy';
 import { qosPolicyColumns, qosPolicyFilters } from 'resources/qos-policy';
 import actionConfigs from './actions';
 
-@inject('rootStore')
-@observer
-export default class QoSPolicy extends Base {
+export class QoSPolicy extends Base {
   init() {
     this.store = new QoSPolicyStore();
     this.downloadStore = new QoSPolicyStore();
@@ -75,3 +73,5 @@ export default class QoSPolicy extends Base {
     return filters;
   }
 }
+
+export default inject('rootStore')(observer(QoSPolicy));

src/pages/network/containers/QoSPolicy/ProjectQoSPolicy.js

@@ -18,9 +18,7 @@ import { QoSPolicyStore } from 'stores/neutron/qos-policy';
 import { qosPolicyColumns, qosPolicyFilters } from 'resources/qos-policy';
 import actionConfigs from './actions';
 
-@inject('rootStore')
-@observer
-export default class QoSPolicy extends Base {
+export class QoSPolicy extends Base {
   init() {
     this.store = new QoSPolicyStore();
     this.downloadStore = new QoSPolicyStore();
@@ -80,3 +78,5 @@ export default class QoSPolicy extends Base {
     return filters;
   }
 }
+
+export default inject('rootStore')(observer(QoSPolicy));

src/pages/network/containers/QoSPolicy/SharedQoSPolicy.js

@@ -18,9 +18,7 @@ import { QoSPolicyStore } from 'stores/neutron/qos-policy';
 import { qosPolicyColumns, qosPolicyFilters } from 'resources/qos-policy';
 import actionConfigs from './actions';
 
-@inject('rootStore')
-@observer
-export default class QoSPolicy extends Base {
+export class QoSPolicy extends Base {
   init() {
     this.store = new QoSPolicyStore();
     this.downloadStore = new QoSPolicyStore();
@@ -83,3 +81,5 @@ export default class QoSPolicy extends Base {
     return filters;
   }
 }
+
+export default inject('rootStore')(observer(QoSPolicy));

src/pages/network/containers/Router/Detail/BaseDetail.jsx

@@ -16,9 +16,7 @@ import React from 'react';
 import { inject, observer } from 'mobx-react';
 import Base from 'containers/BaseDetail';
 
-@inject('rootStore')
-@observer
-export default class BaseDetail extends Base {
+export class BaseDetail extends Base {
   get leftCards() {
     const cards = [this.aZoneCard];
     return cards;
@@ -90,3 +88,5 @@ export default class BaseDetail extends Base {
     };
   }
 }
+
+export default inject('rootStore')(observer(BaseDetail));

src/pages/network/containers/Router/Detail/index.jsx

@@ -23,9 +23,7 @@ import StaticRouter from '../StaticRouter';
 import actionConfigs from '../actions';
 // import Snat from '../Snat';
 
-@inject('rootStore')
-@observer
-export default class RouterDetail extends Base {
+export class RouterDetail extends Base {
   get name() {
     return t('router');
   }
@@ -118,3 +116,5 @@ export default class RouterDetail extends Base {
     this.store = new RouterStore();
   }
 }
+
+export default inject('rootStore')(observer(RouterDetail));

src/pages/network/containers/Router/actions/Create.jsx

@@ -24,9 +24,7 @@ import {
   availabilityZoneResource,
 } from 'resources/neutron';
 
-@inject('rootStore')
-@observer
-export default class Create extends ModalAction {
+export class Create extends ModalAction {
   static id = 'create';
 
   static title = t('Create Router');
@@ -183,3 +181,5 @@ export default class Create extends ModalAction {
     ];
   }
 }
+
+export default inject('rootStore')(observer(Create));

src/pages/network/containers/Router/index.jsx

@@ -18,9 +18,7 @@ import { getRouterColumns, routerFitlers } from 'resources/router';
 import { RouterStore } from 'stores/neutron/router';
 import actionConfigs from './actions';
 
-@inject('rootStore')
-@observer
-export default class Routes extends Base {
+export class Routes extends Base {
   init() {
     this.store = new RouterStore();
     this.downloadStore = new RouterStore();
@@ -62,3 +60,5 @@ export default class Routes extends Base {
     return routerFitlers;
   }
 }
+
+export default inject('rootStore')(observer(Routes));

src/pages/network/containers/SecurityGroup/Detail/Rule/actions/Delete.jsx

@@ -64,7 +64,7 @@ export default class DeleteAction extends ConfirmAction {
     }
     const direction = item.direction === 'egress' ? 'to' : 'from';
     if (remote_group_id) {
-      remote = remote_group_id.substr(0, 13);
+      remote = remote_group_id;
     } else {
       remote = remote_ip_prefix || t('ANY');
     }

src/pages/network/containers/SecurityGroup/Detail/index.jsx

@@ -19,9 +19,7 @@ import { isEqual } from 'lodash';
 import members from './Rule';
 import actionConfigs from '../actions';
 
-@inject('rootStore')
-@observer
-export default class SecurityGroupDetail extends Base {
+export class SecurityGroupDetail extends Base {
   get name() {
     return t('security group');
   }
@@ -79,3 +77,5 @@ export default class SecurityGroupDetail extends Base {
     }
   }
 }
+
+export default inject('rootStore')(observer(SecurityGroupDetail));

src/pages/network/containers/Topology/InstanceCard.jsx

@@ -15,7 +15,7 @@
 import React from 'react';
 import { Popover, Avatar } from 'antd';
 import { instanceStatus } from 'resources/instance';
-import instanceImage from '@/asset/image/instance.png';
+import instanceImage from 'asset/image/instance.png';
 import ImageType from 'components/ImageType';
 import { Link } from 'react-router-dom';
 import styles from './index.less';

src/pages/network/containers/Topology/NodeCard.jsx

@@ -18,7 +18,7 @@ import { getLocalTimeStr } from 'utils/time';
 import { routerStatus } from 'resources/router';
 import { Descriptions, Popover, Button, Avatar } from 'antd';
 import { Link } from 'react-router-dom';
-import routerImage from '@/asset/image/router.png';
+import routerImage from 'asset/image/router.png';
 import styles from './index.less';
 
 export default class NodeCard extends React.Component {

src/pages/network/containers/Topology/index.jsx

@@ -20,7 +20,7 @@
 import React from 'react';
 import { Card, Button, Spin, Checkbox } from 'antd';
 import G6 from '@antv/g6';
-import image from '@/asset/image/cloud.png';
+import image from 'asset/image/cloud.png';
 import { RedoOutlined } from '@ant-design/icons';
 import { observer, inject } from 'mobx-react';
 import globalNetworkStore from 'stores/neutron/network';

src/pages/network/containers/VPN/EndpointGroup/actions/Create.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { inject, observer } from 'mobx-react';
-import { ModalAction } from '@/containers/Action';
+import { ModalAction } from 'containers/Action';
 import { ipValidate } from 'utils/validate';
 import { RouterStore } from 'stores/neutron/router';
 import { SubnetStore } from 'stores/neutron/subnet';

src/pages/network/routes/index.js

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import BaseLayout from '@/layouts/Basic';
+import BaseLayout from 'layouts/Basic';
 import E404 from 'pages/base/containers/404';
 import Network from '../containers/Network';
 import AdminNetwork from '../containers/Network/AdminNetwork';

src/pages/storage/containers/Volume/Detail/BaseDetail.jsx

@@ -17,9 +17,7 @@ import { Link } from 'react-router-dom';
 import { inject, observer } from 'mobx-react';
 import Base from 'containers/BaseDetail';
 
-@inject('rootStore')
-@observer
-export default class BaseDetail extends Base {
+export class BaseDetail extends Base {
   get leftCards() {
     const cards = [this.attachmentsCard];
     if (this.detailData.volume_image_metadata) {
@@ -106,3 +104,5 @@ export default class BaseDetail extends Base {
     };
   }
 }
+
+export default inject('rootStore')(observer(BaseDetail));

src/pages/storage/containers/Volume/Detail/index.jsx

@@ -21,9 +21,7 @@ import { volumeStatus } from 'resources/volume';
 import BaseDetail from './BaseDetail';
 import actionConfigs from '../actions';
 
-@inject('rootStore')
-@observer
-export default class VolumeDetail extends Base {
+export class VolumeDetail extends Base {
   get name() {
     return t('volume');
   }
@@ -113,3 +111,5 @@ export default class VolumeDetail extends Base {
     this.store = new VolumeStore();
   }
 }
+
+export default inject('rootStore')(observer(VolumeDetail));

src/pages/storage/containers/Volume/actions/ChangeType.jsx

@@ -18,9 +18,7 @@ import globalVolumeStore from 'stores/cinder/volume';
 import globalVolumeTypeStore from 'stores/cinder/volume-type';
 import { isAvailableOrInUse, isOsDisk } from 'resources/volume';
 
-@inject('rootStore')
-@observer
-export default class ChangeType extends ModalAction {
+export class ChangeType extends ModalAction {
   static id = 'change-type';
 
   static title = t('Change Type');
@@ -99,3 +97,5 @@ export default class ChangeType extends ModalAction {
     return this.store.retype(id, body);
   };
 }
+
+export default inject('rootStore')(observer(ChangeType));

src/pages/storage/containers/Volume/actions/Create/index.jsx

@@ -38,9 +38,7 @@ import { volumeTypeSelectProps } from 'resources/volume-type';
 import { allSettled } from 'utils';
 import styles from './index.less';
 
-@inject('rootStore')
-@observer
-export default class Create extends FormAction {
+export class Create extends FormAction {
   init() {
     this.snapshotStore = globalSnapshotStore;
     this.imageStore = globalImageStore;
@@ -582,3 +580,5 @@ export default class Create extends FormAction {
     );
   };
 }
+
+export default inject('rootStore')(observer(Create));

src/pages/storage/containers/Volume/actions/CreateBackup.jsx

@@ -18,9 +18,7 @@ import globalBackupStore from 'stores/cinder/backup';
 import { isAvailableOrInUse, isInUse } from 'resources/volume';
 import { createTip, backupModeList, modeTip } from 'resources/backup';
 
-@inject('rootStore')
-@observer
-export default class CreateBackup extends ModalAction {
+export class CreateBackup extends ModalAction {
   static id = 'create-backup';
 
   static title = t('Create Backup');
@@ -86,3 +84,5 @@ export default class CreateBackup extends ModalAction {
     return this.store.create(body);
   };
 }
+
+export default inject('rootStore')(observer(CreateBackup));

src/pages/storage/containers/Volume/actions/CreateImage.jsx

@@ -18,9 +18,7 @@ import { imageOS, imageFormats } from 'resources/image';
 import globalVolumeStore from 'stores/cinder/volume';
 import { isAvailable } from 'resources/volume';
 
-@inject('rootStore')
-@observer
-export default class CreateImage extends ModalAction {
+export class CreateImage extends ModalAction {
   static id = 'create-image';
 
   static title = t('Create Image');
@@ -84,3 +82,5 @@ export default class CreateImage extends ModalAction {
     return this.store.uploadImage(id, values);
   };
 }
+
+export default inject('rootStore')(observer(CreateImage));

src/pages/storage/containers/Volume/actions/ExtendVolume.jsx

@@ -17,9 +17,7 @@ import { ModalAction } from 'containers/Action';
 import globalVolumeStore from 'stores/cinder/volume';
 import { isAvailableOrInUse } from 'resources/volume';
 
-@inject('rootStore')
-@observer
-export default class ExtendVolume extends ModalAction {
+export class ExtendVolume extends ModalAction {
   static id = 'extend-snapshot';
 
   static title = t('Extend Volume');
@@ -77,3 +75,5 @@ export default class ExtendVolume extends ModalAction {
     return this.store.extendSize(id, rest);
   };
 }
+
+export default inject('rootStore')(observer(ExtendVolume));

src/pages/storage/routes/index.js

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import BaseLayout from '@/layouts/Basic';
+import BaseLayout from 'layouts/Basic';
 import E404 from 'pages/base/containers/404';
 import Snapshot from '../containers/Snapshot';
 import SnapshotDetail from '../containers/Snapshot/Detail';