fix: Fix redirect to pre page after login

1. Fix redirect to pre page after login when visit page first
2. Fix gotoLogin in client request
3. Refactor functions in create instance
4. Refactor functions in instance detail
5. Update module export

Change-Id: If7b166afc70e807c753ebf5901434166d4a7b602

src/client/client/request.js

@@ -29,7 +29,7 @@ export class HttpRequest {
   }
 
   gotoLoginPage(path) {
-    const globalRootStore = require('stores/root').defaullt;
+    const globalRootStore = require('stores/root').default;
     globalRootStore.gotoLoginPage(path);
   }
 

src/containers/List/index.jsx

@@ -619,6 +619,10 @@ export default class BaseList extends React.Component {
     }
   }
 
+  getColumns() {
+    return [];
+  }
+
   fetchListWithTry = async (func) => {
     try {
       func && (await func());
@@ -722,8 +726,6 @@ export default class BaseList extends React.Component {
 
   getFilteredValue = (dataIndex) => this.list.filters[dataIndex];
 
-  getColumns = () => [];
-
   checkIsProjectFilter = (item) => item.name === this.projectFilterKey;
 
   getSearchFilters = () => {

src/core/index.jsx

@@ -44,13 +44,14 @@ const render = (component) => {
 };
 
 const getUser = async (callback) => {
-  if (window.location.pathname.indexOf('/login') < 0) {
+  const currentPath = window.location.pathname;
+  if (currentPath.indexOf('/login') < 0) {
     try {
       await store.getUserProfileAndPolicy();
     } catch (e) {
       // eslint-disable-next-line no-console
       console.log(e);
-      store.gotoLoginPage();
+      store.gotoLoginPage(currentPath);
     } finally {
       callback && callback();
     }

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

@@ -224,6 +224,10 @@ export class BaseDetail extends Base {
     return infos;
   }
 
+  get volumeActions() {
+    return { firstAction: AttachVolume };
+  }
+
   fetchVolumes = async () => {
     const params = {
       serverId: this.id,
@@ -280,6 +284,16 @@ export class BaseDetail extends Base {
     return <Row>{interfaceItem}</Row>;
   }
 
+  renderImageType(osDistro) {
+    return (
+      <ImageType
+        className={styles['info-item-icon']}
+        type={osDistro}
+        title={osDistro}
+      />
+    );
+  }
+
   renderVmRow() {
     const item = toJS(this.detailData.itemInList) || {};
     const { status } = this.detailData;
@@ -291,11 +305,7 @@ export class BaseDetail extends Base {
         </div>
         <div className={styles['vm-info']}>
           <div className={styles['info-item']}>
-            <ImageType
+            {this.renderImageType(image_os_distro)}
-              className={styles['info-item-icon']}
-              type={image_os_distro}
-              title={image_os_distro}
-            />
             <span>{image_name}</span>
           </div>
           <div className={styles['info-item']}>
@@ -370,7 +380,7 @@ export class BaseDetail extends Base {
             <div className={styles['attach-action-line']} />
             {/* <a onClick={this.info}>{t('Attach volume')}</a> */}
             <ItemActionButtons
-              actions={{ firstAction: AttachVolume }}
+              actions={this.volumeActions}
               onFinishAction={this.handleRefreshVolume}
               item={this.detailData}
               containerProps={containerProps}

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

@@ -64,6 +64,10 @@ export class SecurityGroup extends React.Component {
     return isAdminPage(pathname);
   }
 
+  get showActions() {
+    return !this.isAdminPage;
+  }
+
   getUrl(path, adminStr) {
     return this.isAdminPage ? `${path}${adminStr || '-admin'}` : path;
   }
@@ -114,7 +118,7 @@ export class SecurityGroup extends React.Component {
             <Button type="link">{item.name}</Button>
           </Col>
           <Col span={2}>
-            {filterData.length !== 1 && !this.isAdminPage ? (
+            {filterData.length !== 1 && this.showActions ? (
               <ItemActionButtons
                 actions={{ firstAction: Detach }}
                 onFinishAction={this.actionCallback}
@@ -216,7 +220,7 @@ export class SecurityGroup extends React.Component {
               : null}
           </Radio.Group>
         </Spin>
-        {!this.isAdminPage && port_security_enabled && (
+        {this.showActions && port_security_enabled && (
           <div style={{ marginBottom: 20, marginTop: 20 }}>
             <PrimaryActionButtons
               primaryActions={[ManageSecurityGroup]}

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

@@ -221,37 +221,19 @@ export class StepCreate extends StepAction {
     );
   }
 
-  getSubmitData(values) {
+  getVolumeAndImageData(values) {
     const { status } = this.state;
     if (status === 'error') {
       return null;
     }
     /* eslint-disable no-unused-vars */
     const {
-      availableZone,
       bootableVolume,
       dataDisk,
-      host,
       image,
       instanceSnapshot,
-      iso,
-      keypair,
-      loginType,
-      network,
-      networks,
-      password,
-      physicalNode,
-      physicalNodeType,
-      project,
-      resource,
-      securityGroup,
       source,
-      flavor,
       systemDisk,
-      userData = '',
-      serverGroup,
-      name,
-      count = 1,
     } = values;
     let imageRef = null;
     let rootVolume = {};
@@ -295,7 +277,6 @@ export class StepCreate extends StepAction {
           };
         })
       : [];
-    let hasIp = false;
     if (
       sourceValue === 'image' &&
       image.selectedRows[0].disk_format === 'iso' &&
@@ -305,9 +286,35 @@ export class StepCreate extends StepAction {
       dataVolumes[0].device_type = 'disk';
       rootVolume.boot_index = 1;
       rootVolume.device_type = 'cdrom';
-      // rootVolume.disk_bus = 'ide';
-      // dataVolumes[0].disk_bus = 'virtio';
     }
+    return {
+      volumes: [rootVolume, ...dataVolumes],
+      imageRef,
+    };
+  }
+
+  getSubmitData(values) {
+    const { status } = this.state;
+    if (status === 'error') {
+      return null;
+    }
+    const { volumes, imageRef } = this.getVolumeAndImageData(values);
+    const {
+      availableZone,
+      keypair,
+      loginType,
+      networks,
+      password,
+      physicalNode,
+      physicalNodeType,
+      securityGroup,
+      flavor,
+      userData = '',
+      serverGroup,
+      name,
+      count = 1,
+    } = values;
+    let hasIp = false;
     const { selectedRows: securityGroupSelectedRows = [] } =
       securityGroup || {};
     const server = {
@@ -317,7 +324,7 @@ export class StepCreate extends StepAction {
       name,
       flavorRef: flavor.selectedRowKeys[0],
       availability_zone: availableZone.value,
-      block_device_mapping_v2: [rootVolume, ...dataVolumes],
+      block_device_mapping_v2: volumes,
       networks: networks.map((it) => {
         const net = {
           uuid: it.value.network,

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

@@ -126,7 +126,7 @@ export class Instance extends Base {
     };
   }
 
-  getColumns = () => {
+  getColumns() {
     const columns = [
       {
         title: t('ID/Name'),
@@ -227,7 +227,7 @@ export class Instance extends Base {
       return columns.filter((it) => it.dataIndex !== 'host');
     }
     return columns;
-  };
+  }
 
   get actionConfigs() {
     const { batchActions } = this;

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

@@ -24,9 +24,7 @@ import { FileTextOutlined } from '@ant-design/icons';
 import styles from './styles.less';
 import actionConfigs from './actions';
 
-@inject('rootStore')
+export class FloatingIps extends Base {
-@observer
-export default class FloatingIps extends Base {
   init() {
     this.store = new FloatingIpStore();
     this.downloadStore = new FloatingIpStore();
@@ -114,100 +112,102 @@ export default class FloatingIps extends Base {
     return true;
   }
 
-  getColumns = () => [
+  getColumns() {
-    {
+    return [
-      title: t('ID/Floating IP'),
+      {
-      dataIndex: 'floating_ip_address',
+        title: t('ID/Floating IP'),
-      isName: true,
+        dataIndex: 'floating_ip_address',
-      linkPrefix: `/network/${this.getUrl('floatingip')}/detail`,
+        isName: true,
-    },
+        linkPrefix: `/network/${this.getUrl('floatingip')}/detail`,
-    {
-      title: t('QoS Policy'),
-      dataIndex: 'qos_policy_id',
-      render: (value) => (
-        <Link to={`/network/${this.getUrl('qos-policy')}/detail/${value}`}>
-          {value}
-        </Link>
-      ),
-    },
-    {
-      title: t('Project ID/Name'),
-      dataIndex: 'project_name',
-      hidden: !this.isAdminPage,
-      sortKey: 'project_id',
-    },
-    {
-      title: t('Description'),
-      dataIndex: 'description',
-      render: (value) => value || '-',
-      isHideable: true,
-      sorter: false,
-    },
-    {
-      title: t('Associated Resource'),
-      dataIndex: 'resource_name',
-      render: (resource_name, record) => {
-        if (
-          !resource_name &&
-          record.port_forwardings &&
-          record.port_forwardings.length !== 0
-        ) {
-          return (
-            <>
-              {t('{number} port forwarding rules', {
-                number: record.port_forwardings.length,
-              })}
-              &nbsp;
-              <Popover
-                content={
-                  <Row className={styles.popover_row} gutter={[8, 8]}>
-                    {record.port_forwardings
-                      .sort((a, b) => a.external_port - b.external_port)
-                      .map((i, idx) => (
-                        <Col span={24} key={`pfw-${idx}`}>
-                          {`${record.floating_ip_address}:${i.external_port} => ${i.internal_ip_address}:${i.internal_port}`}
-                        </Col>
-                      ))}
-                  </Row>
-                }
-                title={t('Port Forwarding')}
-                destroyTooltipOnHide
-              >
-                <FileTextOutlined />
-              </Popover>
-            </>
-          );
-        }
-        return resource_name || '';
       },
-      stringify: (resource_name, record) => {
+      {
-        if (!resource_name && record.port_forwardings.length !== 0) {
+        title: t('QoS Policy'),
-          const ret = record.port_forwardings
+        dataIndex: 'qos_policy_id',
-            .sort((a, b) => a.external_port - b.external_port)
+        render: (value) => (
-            .map(
+          <Link to={`/network/${this.getUrl('qos-policy')}/detail/${value}`}>
-              (i) =>
+            {value}
-                `${record.floating_ip_address}:${i.external_port} => ${i.internal_ip_address}:${i.internal_port}`
+          </Link>
+        ),
+      },
+      {
+        title: t('Project ID/Name'),
+        dataIndex: 'project_name',
+        hidden: !this.isAdminPage,
+        sortKey: 'project_id',
+      },
+      {
+        title: t('Description'),
+        dataIndex: 'description',
+        render: (value) => value || '-',
+        isHideable: true,
+        sorter: false,
+      },
+      {
+        title: t('Associated Resource'),
+        dataIndex: 'resource_name',
+        render: (resource_name, record) => {
+          if (
+            !resource_name &&
+            record.port_forwardings &&
+            record.port_forwardings.length !== 0
+          ) {
+            return (
+              <>
+                {t('{number} port forwarding rules', {
+                  number: record.port_forwardings.length,
+                })}
+                &nbsp;
+                <Popover
+                  content={
+                    <Row className={styles.popover_row} gutter={[8, 8]}>
+                      {record.port_forwardings
+                        .sort((a, b) => a.external_port - b.external_port)
+                        .map((i, idx) => (
+                          <Col span={24} key={`pfw-${idx}`}>
+                            {`${record.floating_ip_address}:${i.external_port} => ${i.internal_ip_address}:${i.internal_port}`}
+                          </Col>
+                        ))}
+                    </Row>
+                  }
+                  title={t('Port Forwarding')}
+                  destroyTooltipOnHide
+                >
+                  <FileTextOutlined />
+                </Popover>
+              </>
             );
-          return ret.join('\n');
+          }
-        }
+          return resource_name || '';
-        return resource_name;
+        },
+        stringify: (resource_name, record) => {
+          if (!resource_name && record.port_forwardings.length !== 0) {
+            const ret = record.port_forwardings
+              .sort((a, b) => a.external_port - b.external_port)
+              .map(
+                (i) =>
+                  `${record.floating_ip_address}:${i.external_port} => ${i.internal_ip_address}:${i.internal_port}`
+              );
+            return ret.join('\n');
+          }
+          return resource_name;
+        },
+        isHideable: true,
+        sorter: false,
       },
-      isHideable: true,
+      {
-      sorter: false,
+        title: t('Status'),
-    },
+        dataIndex: 'status',
-    {
+        render: (value) => floatingIpStatus[value] || '-',
-      title: t('Status'),
+      },
-      dataIndex: 'status',
+      {
-      render: (value) => floatingIpStatus[value] || '-',
+        title: t('Created At'),
-    },
+        dataIndex: 'created_at',
-    {
+        valueRender: 'toLocalTime',
-      title: t('Created At'),
+        isHideable: true,
-      dataIndex: 'created_at',
+        sorter: false,
-      valueRender: 'toLocalTime',
+      },
-      isHideable: true,
+    ];
-      sorter: false,
+  }
-    },
-  ];
 
   get searchFilters() {
     const filters = [
@@ -227,3 +227,5 @@ export default class FloatingIps extends Base {
     return filters;
   }
 }
+
+export default inject('rootStore')(observer(FloatingIps));

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

@@ -21,9 +21,7 @@ import { portStatus } from 'resources/port';
 import { emptyActionConfig } from 'utils/constants';
 import actionConfigs from './actions';
 
-@inject('rootStore')
+export class VirtualAdapter extends Base {
-@observer
-export default class VirtualAdapter extends Base {
   init() {
     this.store = new VirtualAdapterStore();
     this.downloadStore = new VirtualAdapterStore();
@@ -262,3 +260,5 @@ export default class VirtualAdapter extends Base {
     return ret;
   }
 }
+
+export default inject('rootStore')(observer(VirtualAdapter));