openstack
/
skyline-console
Code Issues Proposed changes

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
This commit is contained in:
xusongfu 2021-08-25 16:39:58 +08:00
parent e915d13e4a
commit a66c8316c8
10 changed files with 68 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Form/index.less
View File

@ -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;
}

6
src/components/StepForm/index.jsx
View File

@ -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>

13
src/components/StepForm/index.less
View File

@ -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;
}

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

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

26
src/pages/compute/containers/Instance/actions/CreateIronic/index.jsx
View File

@ -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>
<span>{t('Count')}</span>
<InputNumber
{...configs}
value={count}
className={classnames(styles.input, 'instance-count')}
/>
<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>
);

3
src/pages/compute/containers/Instance/actions/CreateIronic/index.less
View File

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

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

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

26
src/pages/compute/containers/Instance/actions/StepCreate/index.jsx
View File

@ -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>
<span>{t('Count')}</span>
<InputNumber
{...configs}
value={count}
className={classnames(styles.input, 'instance-count')}
/>
<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>
);

3
src/pages/compute/containers/Instance/actions/StepCreate/index.less
View File

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

4
src/pages/network/containers/Topology/index.jsx
View File

@ -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;