fix: Fix styles in Form & renderBadge & external network

1. Fix the footer of Form component with flex layout to get better showing
2. Add initial value in renderBadeg to hide Badge
3. Use isExternalNetwork function to judge network to prevent unknown bug

Change-Id: Ib2a4e341b8cfe9432c406f5dd33b9bffd2304f33

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' }}>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <div className={styles['number-input']}>
             <span>{t('Count')}</span>
             <InputNumber
               {...configs}
               value={count}
               className={classnames(styles.input, 'instance-count')}
             />
+          </div>
+        </div>
         {this.renderBadge()}
       </div>
     );

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

@@ -2,3 +2,6 @@
   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' }}>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <div className={styles['number-input']}>
             <span>{t('Count')}</span>
             <InputNumber
               {...configs}
               value={count}
               className={classnames(styles.input, 'instance-count')}
             />
+          </div>
+        </div>
         {this.renderBadge()}
       </div>
     );

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

@@ -2,3 +2,6 @@
   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;