From e7a225635c1a9e4a1529ce4430708fda0f242b37 Mon Sep 17 00:00:00 2001 From: "Jingwei.Zhang" Date: Tue, 28 Jun 2022 13:58:32 +0800 Subject: [PATCH] feat: support backup quota info when create backup 1. Update backup mode in list page: Incremental Backup / Full Backup 2. Add size column in backup list page 3. Add backups and backup gigabytes quota when create backup 4. Disable click submit button when left backups quota is zero or left backup gigabytes quota is not enough 5. Disable to select volume when the volume size is bigger then the left backup gigabytes quota 6. Disable to select volume when left backups quota is zero Change-Id: Ib8b0689674e3e96616a97fe55480f789569e6ef1 --- .../containers/Backup/actions/Create.jsx | 102 +++++++++++++++++- src/pages/storage/containers/Backup/index.jsx | 17 +-- src/stores/cinder/backup.js | 11 +- 3 files changed, 121 insertions(+), 9 deletions(-) diff --git a/src/pages/storage/containers/Backup/actions/Create.jsx b/src/pages/storage/containers/Backup/actions/Create.jsx index 5d1e725a..a504d73e 100644 --- a/src/pages/storage/containers/Backup/actions/Create.jsx +++ b/src/pages/storage/containers/Backup/actions/Create.jsx @@ -22,6 +22,28 @@ import { 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'; @@ -41,8 +63,13 @@ export class Create extends ModalAction { } init() { + globalBackupStore.setCurrentVolume({}); this.store = globalBackupStore; this.volumeStore = globalVolumeStore; + this.state.quota = {}; + this.state.quotaLoading = true; + this.projectStore = globalProjectStore; + this.getQuota(); } get tips() { @@ -59,6 +86,78 @@ export class Create extends ModalAction { static allowed = () => Promise.resolve(true); + static get disableSubmit() { + const { cinderQuota = {} } = globalProjectStore; + const { add } = getAdd(cinderQuota); + return add === 0; + } + + static get showQuota() { + return true; + } + + get showQuota() { + 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]; + } + + onVolumeChange = (value) => { + const { selectedRows = [] } = value || {}; + const volume = selectedRows[0] || {}; + this.store.setCurrentVolume(volume); + }; + + disabledVolume = (item) => { + if (!isAvailableOrInUse(item)) { + return true; + } + const { size } = item; + const { + gigabytes: { left: sizeLeft = 0 } = {}, + backups: { left = 0 } = {}, + } = getQuota(this.state.quota); + if (left === 0) { + return true; + } + if (sizeLeft === -1) { + return false; + } + return sizeLeft < size; + }; + get formItems() { return [ { @@ -80,8 +179,9 @@ export class Create extends ModalAction { type: 'select-table', backendPageStore: this.volumeStore, required: true, - disabledFunc: (record) => !isAvailableOrInUse(record), + disabledFunc: this.disabledVolume, ...volumeSelectTablePropsBackend, + onChange: this.onVolumeChange, }, ]; } diff --git a/src/pages/storage/containers/Backup/index.jsx b/src/pages/storage/containers/Backup/index.jsx index 5edc59be..3a6ae076 100644 --- a/src/pages/storage/containers/Backup/index.jsx +++ b/src/pages/storage/containers/Backup/index.jsx @@ -89,13 +89,16 @@ export class Backup extends Base { }, { title: t('Backup Mode'), - dataIndex: 'backup_node', - render: (_, record) => { - const { - metadata: { auto = false }, - } = record; - return auto ? t('Automatic backup') : t('Manual backup'); - }, + dataIndex: 'is_incremental', + isHideable: true, + render: (value) => (value ? t('Incremental Backup') : t('Full Backup')), + sorter: false, + }, + { + title: t('Size'), + dataIndex: 'size', + isHideable: true, + render: (value) => `${value}GiB`, sorter: false, }, { diff --git a/src/stores/cinder/backup.js b/src/stores/cinder/backup.js index 83aa73d7..7818a2a6 100644 --- a/src/stores/cinder/backup.js +++ b/src/stores/cinder/backup.js @@ -12,12 +12,15 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { action } from 'mobx'; +import { action, observable } from 'mobx'; import client from 'client'; import Base from 'stores/base'; import { VolumeStore } from 'stores/cinder/volume'; export class BackupStore extends Base { + @observable + currentVolumeSize = 0; + get client() { return client.cinder.backups; } @@ -58,6 +61,12 @@ export class BackupStore extends Base { const body = { restore: data || {} }; return this.submitting(this.client.restore(id, body)); } + + @action + setCurrentVolume(volume) { + const { size = 0 } = volume || {}; + this.currentVolumeSize = size || 0; + } } const globalBackupStore = new BackupStore(); export default globalBackupStore;