From 78cb48506813896788b904148146516226e95577 Mon Sep 17 00:00:00 2001 From: "Jingwei.Zhang" Date: Tue, 28 Jun 2022 14:13:48 +0800 Subject: [PATCH] feat: support backup quota info when volume create backup 1. Add backups and backup gigabytes quota when volume create backup 2. Disable click submit button when left backups quota is zero or left backup gigabytes quota is not enough 3. Refactor create backup, extract common function 4. Update Form right extra info span size, support small span for large modal, also support custom span size Change-Id: Ib76e6de287f8f84eecc36471dee3b8cce456b17b --- src/components/Form/index.jsx | 12 ++- src/containers/Action/ModalAction/index.jsx | 11 +++ .../containers/Backup/actions/Create.jsx | 73 +++---------------- .../Volume/actions/CreateBackup.jsx | 27 ++++++- src/resources/cinder/backup.jsx | 65 +++++++++++++++++ 5 files changed, 124 insertions(+), 64 deletions(-) diff --git a/src/components/Form/index.jsx b/src/components/Form/index.jsx index 99144218..3b78fcc6 100644 --- a/src/components/Form/index.jsx +++ b/src/components/Form/index.jsx @@ -268,6 +268,13 @@ export default class BaseForm extends React.Component { return null; } + getRightExtraSpan() { + return { + left: 18, + right: 6, + }; + } + getSubmitData(data) { return { ...data }; } @@ -709,11 +716,12 @@ export default class BaseForm extends React.Component { ); const onlyForm = !this.isModal || (this.isModal && !this.showQuota); + const { left, right } = this.getRightExtraSpan(); const modalInner = this.isModal && !onlyForm ? ( - {formDiv} - {this.renderModalRightExtra()} + {formDiv} + {this.renderModalRightExtra()} ) : null; return ( diff --git a/src/containers/Action/ModalAction/index.jsx b/src/containers/Action/ModalAction/index.jsx index 5e817d05..5589fbba 100644 --- a/src/containers/Action/ModalAction/index.jsx +++ b/src/containers/Action/ModalAction/index.jsx @@ -42,6 +42,17 @@ export default class ModalAction extends BaseForm { return 'small'; } + getRightExtraSpan() { + const size = this.getModalSize(); + const isLargeSize = size === 'large'; + const left = isLargeSize ? 20 : 18; + const right = isLargeSize ? 4 : 6; + return { + left, + right, + }; + } + static get showQuota() { return false; } diff --git a/src/pages/storage/containers/Backup/actions/Create.jsx b/src/pages/storage/containers/Backup/actions/Create.jsx index a504d73e..b0ec713f 100644 --- a/src/pages/storage/containers/Backup/actions/Create.jsx +++ b/src/pages/storage/containers/Backup/actions/Create.jsx @@ -16,34 +16,20 @@ import { inject, observer } from 'mobx-react'; import { ModalAction } from 'containers/Action'; import globalVolumeStore from 'stores/cinder/volume'; import globalBackupStore from 'stores/cinder/backup'; -import { createTip, backupModeList, modeTip } from 'resources/cinder/backup'; +import { + createTip, + backupModeList, + modeTip, + fetchQuota, + getQuota, + getQuotaInfo, + checkQuotaDisable, +} from 'resources/cinder/backup'; import { isAvailableOrInUse, isInUse, volumeSelectTablePropsBackend, } from 'resources/cinder/volume'; -import globalProjectStore from 'stores/keystone/project'; - -export const getQuota = (cinderQuota) => { - const { backups = {}, backup_gigabytes: gigabytes = {} } = cinderQuota || {}; - return { - backups, - gigabytes, - }; -}; - -export const getAdd = (cinderQuota) => { - const { backups, gigabytes } = getQuota(cinderQuota); - const { left = 0 } = backups || {}; - const { left: sizeLeft = 0, limit } = gigabytes || {}; - const { currentVolumeSize = 0 } = globalBackupStore; - const add = - left !== 0 && (limit === -1 || sizeLeft >= currentVolumeSize) ? 1 : 0; - return { - add, - addSize: add === 1 ? currentVolumeSize : 0, - }; -}; export class Create extends ModalAction { static id = 'create'; @@ -66,10 +52,7 @@ export class Create extends ModalAction { globalBackupStore.setCurrentVolume({}); this.store = globalBackupStore; this.volumeStore = globalVolumeStore; - this.state.quota = {}; - this.state.quotaLoading = true; - this.projectStore = globalProjectStore; - this.getQuota(); + fetchQuota(this); } get tips() { @@ -87,9 +70,7 @@ export class Create extends ModalAction { static allowed = () => Promise.resolve(true); static get disableSubmit() { - const { cinderQuota = {} } = globalProjectStore; - const { add } = getAdd(cinderQuota); - return add === 0; + return checkQuotaDisable(); } static get showQuota() { @@ -100,38 +81,8 @@ export class Create extends ModalAction { return true; } - async getQuota() { - this.setState({ - quotaLoading: true, - }); - const result = await this.projectStore.fetchProjectCinderQuota(); - this.setState({ - quota: result, - quotaLoading: false, - }); - } - get quotaInfo() { - const { quota = {}, quotaLoading } = this.state; - if (quotaLoading) { - return []; - } - const { backups = {}, gigabytes = {} } = getQuota(quota); - const { add, addSize } = getAdd(quota); - const backupData = { - ...backups, - add, - name: 'backup', - title: t('Backup'), - }; - const sizeData = { - ...gigabytes, - add: addSize, - name: 'gigabytes', - title: t('Backup gigabytes (GiB)'), - type: 'line', - }; - return [backupData, sizeData]; + return getQuotaInfo(this); } onVolumeChange = (value) => { diff --git a/src/pages/storage/containers/Volume/actions/CreateBackup.jsx b/src/pages/storage/containers/Volume/actions/CreateBackup.jsx index 902861e4..7a6671e4 100644 --- a/src/pages/storage/containers/Volume/actions/CreateBackup.jsx +++ b/src/pages/storage/containers/Volume/actions/CreateBackup.jsx @@ -16,7 +16,14 @@ import { inject, observer } from 'mobx-react'; import { ModalAction } from 'containers/Action'; import globalBackupStore from 'stores/cinder/backup'; import { isAvailableOrInUse, isInUse } from 'resources/cinder/volume'; -import { createTip, backupModeList, modeTip } from 'resources/cinder/backup'; +import { + createTip, + backupModeList, + modeTip, + getQuotaInfo, + checkQuotaDisable, + fetchQuota, +} from 'resources/cinder/backup'; export class CreateBackup extends ModalAction { static id = 'create-backup'; @@ -70,6 +77,24 @@ export class CreateBackup extends ModalAction { init() { this.store = globalBackupStore; + globalBackupStore.setCurrentVolume(this.item); + fetchQuota(this); + } + + static get disableSubmit() { + return checkQuotaDisable(); + } + + static get showQuota() { + return true; + } + + get showQuota() { + return true; + } + + get quotaInfo() { + return getQuotaInfo(this); } onSubmit = (values) => { diff --git a/src/resources/cinder/backup.jsx b/src/resources/cinder/backup.jsx index 4fab844d..0d10d1bb 100644 --- a/src/resources/cinder/backup.jsx +++ b/src/resources/cinder/backup.jsx @@ -15,6 +15,8 @@ import React from 'react'; import { getOptions } from 'utils/index'; import { FolderOutlined, FolderAddOutlined } from '@ant-design/icons'; +import globalProjectStore from 'stores/keystone/project'; +import globalBackupStore from 'stores/cinder/backup'; export const backupStatus = { available: t('Available'), @@ -140,3 +142,66 @@ export const restoreTip = (

); + +// deal with quota +export async function fetchQuota(self) { + self.setState({ + quota: {}, + quotaLoading: true, + }); + const result = await globalProjectStore.fetchProjectCinderQuota(); + self.setState({ + quota: result, + quotaLoading: false, + }); +} + +export const getQuota = (cinderQuota) => { + const { backups = {}, backup_gigabytes: gigabytes = {} } = cinderQuota || {}; + return { + backups, + gigabytes, + }; +}; + +export const getAdd = (cinderQuota) => { + const { backups, gigabytes } = getQuota(cinderQuota); + const { left = 0 } = backups || {}; + const { left: sizeLeft = 0, limit } = gigabytes || {}; + const { currentVolumeSize = 0 } = globalBackupStore; + const add = + left !== 0 && (limit === -1 || sizeLeft >= currentVolumeSize) ? 1 : 0; + return { + add, + addSize: add === 1 ? currentVolumeSize : 0, + }; +}; + +export const getQuotaInfo = (self) => { + const { quota = {}, quotaLoading } = self.state; + if (quotaLoading) { + return []; + } + const { backups = {}, gigabytes = {} } = getQuota(quota); + const { add, addSize } = getAdd(quota); + const backupData = { + ...backups, + add, + name: 'backup', + title: t('Backup'), + }; + const sizeData = { + ...gigabytes, + add: addSize, + name: 'gigabytes', + title: t('Backup gigabytes (GiB)'), + type: 'line', + }; + return [backupData, sizeData]; +}; + +export const checkQuotaDisable = () => { + const { cinderQuota = {} } = globalProjectStore; + const { add } = getAdd(cinderQuota); + return add === 0; +};