feat: Add error message when create instance quota exceeded

Show error message when create instance with quota exceeded:
1. change the instance number
2. change the volume type
3. change the volume size
the above situations may trigger a prompt

Update error message style in the footer

Change-Id: I038bb1919d05d78fc8a78b3ab1a6e72cf327f2ce
This commit is contained in:
Jingwei.Zhang 2022-06-08 14:18:11 +08:00
parent c88cc53580
commit 8c979780a0

View File

@ -15,7 +15,7 @@
import React from 'react'; import React from 'react';
import { inject, observer } from 'mobx-react'; import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx'; import { toJS } from 'mobx';
import { InputNumber, Badge } from 'antd'; import { InputNumber, Badge, message as $message } from 'antd';
import { StepAction } from 'containers/Action'; import { StepAction } from 'containers/Action';
import globalServerStore from 'stores/nova/instance'; import globalServerStore from 'stores/nova/instance';
import globalProjectStore from 'stores/keystone/project'; import globalProjectStore from 'stores/keystone/project';
@ -334,6 +334,10 @@ export class StepCreate extends StepAction {
return msg; return msg;
} }
get badgeStyle() {
return { marginTop: 8, marginBottom: 8, marginLeft: 10, maxWidth: 600 };
}
renderBadge() { renderBadge() {
const { status = 'success' } = this.state; const { status = 'success' } = this.state;
const volumeMsg = this.checkVolumeQuota(); const volumeMsg = this.checkVolumeQuota();
@ -344,9 +348,12 @@ export class StepCreate extends StepAction {
} }
this.status = 'error'; this.status = 'error';
const msg = status === 'error' ? this.msg : volumeMsg; const msg = status === 'error' ? this.msg : volumeMsg;
if (this.errorMsg !== msg) {
$message.error(msg);
}
this.errorMsg = msg; this.errorMsg = msg;
return ( return (
<div style={{ marginTop: 8, marginBottom: 8 }}> <div style={this.badgeStyle}>
<Badge status="error" text={msg} /> <Badge status="error" text={msg} />
</div> </div>
); );
@ -372,7 +379,7 @@ export class StepCreate extends StepAction {
formatter: (value) => `$ ${value}`.replace(/\D/g, ''), formatter: (value) => `$ ${value}`.replace(/\D/g, ''),
}; };
return ( return (
<div style={{ display: 'flex', flexDirection: 'column' }}> <div style={{ display: 'flex' }}>
<div style={{ display: 'flex', alignItems: 'center' }}> <div style={{ display: 'flex', alignItems: 'center' }}>
<div className={styles['number-input']}> <div className={styles['number-input']}>
<span>{t('Count')}</span> <span>{t('Count')}</span>