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

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,
       },
     ];
   }

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,
       },
       {

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;