Merge "fix: Fix styles in Form & renderBadge & external network"

src/components/Form/index.less

@@ -53,6 +53,9 @@
   height: 48px;
   background-color: #fff;
   box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.09);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .btns {
@@ -102,6 +105,8 @@
   height: 48px;
   float: left;
   margin-left: 16px;
-  padding-top: 8px;
   color: rgb(72, 72, 72);
+  display: flex;
+  align-items: center;
+  justify-content: left;
 }

src/components/StepForm/index.jsx

@@ -335,7 +335,11 @@ export default class BaseStepForm extends React.Component {
     return (
       <div className={styles.footer}>
         <div
-          className={classnames(styles['footer-left'], 'step-form-footer-left')}
+          className={classnames(
+            styles['footer-left'],
+            this.footerStyle,
+            'step-form-footer-left'
+          )}
         >
           {this.renderFooterLeft()}
         </div>

src/components/StepForm/index.less

@@ -41,15 +41,18 @@
   bottom: 0;
   left: 0;
   right: 0;
-  height: 48px;
+  min-height: 48px;
   background-color: #fff;
   box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.09);
   z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 .btns {
   float: right;
   margin-right: 32px;
-  margin-top: 8px;
+  min-width: 200px;
   :global{
     button {
       margin-left: 8px;
@@ -57,9 +60,11 @@
   }
 }
 .footer-left {
-  height: 48px;
+  min-height: 48px;
   float: left;
   margin-left: 16px;
-  padding-top: 8px;
   color: rgb(72, 72, 72);
+  display: flex;
+  align-items: center;
+  justify-items: left;
 }

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

@@ -150,6 +150,9 @@ export default class NetworkStep extends Base {
         this.getSubnets();
       }
     );
+    this.updateContext({
+      networkSelectRows: selectedRows,
+    });
   };
 
   get nameForStateUpdate() {

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

@@ -191,11 +191,15 @@ export default class CreateIronic extends StepAction {
   };
 
   renderBadge() {
-    const { status } = this.state;
+    const { status = 'success' } = this.state;
     if (status === 'success') {
       return null;
     }
-    return <Badge status={status} text={this.msg} />;
+    return (
+      <div style={{ marginTop: 8, marginBottom: 8 }}>
+        <Badge status={status} text={this.msg} />
+      </div>
+    );
   }
 
   renderFooterLeft() {
@@ -209,13 +213,17 @@ export default class CreateIronic extends StepAction {
       formatter: (value) => `$ ${value}`.replace(/\D/g, ''),
     };
     return (
-      <div>
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
-        <span>{t('Count')}</span>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
-        <InputNumber
+          <div className={styles['number-input']}>
-          {...configs}
+            <span>{t('Count')}</span>
-          value={count}
+            <InputNumber
-          className={classnames(styles.input, 'instance-count')}
+              {...configs}
-        />
+              value={count}
+              className={classnames(styles.input, 'instance-count')}
+            />
+          </div>
+        </div>
         {this.renderBadge()}
       </div>
     );

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

@@ -1,4 +1,7 @@
 .input {
   margin-left: 16px;
   margin-right: 32px;
+}
+.number-input {
+  min-width: 165px;
 }

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

@@ -150,6 +150,9 @@ export default class NetworkStep extends Base {
         this.getSubnets();
       }
     );
+    this.updateContext({
+      networkSelectRows: selectedRows,
+    });
   };
 
   get nameForStateUpdate() {

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

@@ -180,11 +180,15 @@ class StepCreate extends StepAction {
   };
 
   renderBadge() {
-    const { status } = this.state;
+    const { status = 'success' } = this.state;
     if (status === 'success') {
       return null;
     }
-    return <Badge status={status} text={this.msg} />;
+    return (
+      <div style={{ marginTop: 8, marginBottom: 8 }}>
+        <Badge status={status} text={this.msg} />
+      </div>
+    );
   }
 
   renderFooterLeft() {
@@ -198,13 +202,17 @@ class StepCreate extends StepAction {
       formatter: (value) => `$ ${value}`.replace(/\D/g, ''),
     };
     return (
-      <div>
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
-        <span>{t('Count')}</span>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
-        <InputNumber
+          <div className={styles['number-input']}>
-          {...configs}
+            <span>{t('Count')}</span>
-          value={count}
+            <InputNumber
-          className={classnames(styles.input, 'instance-count')}
+              {...configs}
-        />
+              value={count}
+              className={classnames(styles.input, 'instance-count')}
+            />
+          </div>
+        </div>
         {this.renderBadge()}
       </div>
     );

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

@@ -1,4 +1,7 @@
 .input {
   margin-left: 16px;
   margin-right: 32px;
+}
+.number-input {
+  min-width: 165px;
 }

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

@@ -32,7 +32,7 @@ import {
 import PrimaryActionButtons from 'components/Tables/Base/PrimaryActionButtons';
 import { ipValidate } from 'utils/validate';
 import { toJS } from 'mobx';
-import { getAnchorData } from 'resources/network';
+import { getAnchorData, isExternalNetwork } from 'resources/network';
 import styles from './index.less';
 import CreateRouter from '../Router/actions/Create';
 import CreateNetwork from '../Network/actions/CreateNetwork';
@@ -219,7 +219,7 @@ export default class Topology extends React.Component {
     const { extendWidth } = this.state;
     data.subnetNodes = [];
     networks.forEach((network) => {
-      if (!network['router:external']) {
+      if (!isExternalNetwork(network)) {
         const networkSubnet = [];
         // const firstSubnetY = 250 + (netIndex * 150);
         const { firstSubnetY } = this.state;