feat: update volume action menu

1. Update the volume action menu: classified as 'data protection', 'instance related', 'capacity & type'
2. Update the volume action menu in the volume tab in the  instance detail page
3. Update the volume/snapshot e2e cases according the new action menu

Change-Id: Ib479efcdcd0f72789b1278716c7b9f06f9d87d3b

src/locales/en.json

@@ -293,6 +293,7 @@
   "Cancel Select": "Cancel Select",
   "Cancel Transfer": "Cancel Transfer",
   "Cancel upload successfully.": "Cancel upload successfully.",
+  "Capacity & Type": "Capacity & Type",
   "Capacity (GiB)": "Capacity (GiB)",
   "Cape Verde": "Cape Verde",
   "Capsule Detail": "Capsule Detail",
@@ -588,6 +589,7 @@
   "Danger": "Danger",
   "Data Disk": "Data Disk",
   "Data Disks": "Data Disks",
+  "Data Protection": "Data Protection",
   "Data Source Type": "Data Source Type",
   "Database": "Database",
   "Database Backup Detail": "Database Backup Detail",
@@ -1201,6 +1203,7 @@
   "Instance ID": "Instance ID",
   "Instance IP": "Instance IP",
   "Instance Info": "Instance Info",
+  "Instance Related": "Instance Related",
   "Instance Snapshot": "Instance Snapshot",
   "Instance Snapshot Detail": "Instance Snapshot Detail",
   "Instance Snapshot Name": "Instance Snapshot Name",

src/locales/zh.json

@@ -293,6 +293,7 @@
   "Cancel Select": "取消选择",
   "Cancel Transfer": "取消云硬盘转让",
   "Cancel upload successfully.": "取消上传成功。",
+  "Capacity & Type": "容量和类型",
   "Capacity (GiB)": "容量(GiB)",
   "Cape Verde": "佛得角",
   "Capsule Detail": "集合详情",
@@ -588,6 +589,7 @@
   "Danger": "危险",
   "Data Disk": "数据盘",
   "Data Disks": "块数据盘",
+  "Data Protection": "数据保护",
   "Data Source Type": "数据源类型",
   "Database": "数据库",
   "Database Backup Detail": "数据库备份详情",
@@ -1201,6 +1203,7 @@
   "Instance ID": "实例ID",
   "Instance IP": "云主机IP",
   "Instance Info": "云主机信息",
+  "Instance Related": "云主机相关",
   "Instance Snapshot": "云主机快照",
   "Instance Snapshot Detail": "云主机快照详情",
   "Instance Snapshot Name": "云主机快照名称",

src/pages/storage/containers/Volume/actions/index.jsx

@@ -32,39 +32,30 @@ import CancelTransfer from './CancelTransfer';
 import CreateInstance from './CreateInstance';
 import Bootable from './Bootable';
 
+const dataProtectionActions = {
+  title: t('Data Protection'),
+  actions: [CreateSnapshot, CreateBackup, CreateImage, CloneVolume, Restore],
+};
+
+const instanceRelated = {
+  title: t('Instance Related'),
+  actions: [Bootable, CreateInstance, Attach, Detach],
+};
+
+const capacityAndSize = {
+  title: t('Capacity & Type'),
+  actions: [ExtendVolume, ChangeType],
+};
+
 const actionConfigs = {
   rowActions: {
-    firstAction: CreateSnapshot,
+    firstAction: Edit,
     moreActions: [
+      dataProtectionActions,
+      instanceRelated,
+      capacityAndSize,
       {
-        action: Edit,
+        action: Delete,
-      },
-      {
-        action: Bootable,
-      },
-      {
-        action: CreateInstance,
-      },
-      {
-        action: CreateImage,
-      },
-      {
-        action: CreateBackup,
-      },
-      {
-        action: Attach,
-      },
-      {
-        action: Detach,
-      },
-      {
-        action: ExtendVolume,
-      },
-      {
-        action: ChangeType,
-      },
-      {
-        action: CloneVolume,
       },
       {
         action: CreateTransfer,
@@ -72,12 +63,6 @@ const actionConfigs = {
       {
         action: CancelTransfer,
       },
-      {
-        action: Delete,
-      },
-      {
-        action: Restore,
-      },
     ],
   },
   batchActions: [Delete],
@@ -86,34 +71,13 @@ const actionConfigs = {
 
 const instanceDetailConfig = {
   rowActions: {
-    firstAction: CreateSnapshot,
+    firstAction: Edit,
     moreActions: [
+      dataProtectionActions,
+      instanceRelated,
+      capacityAndSize,
       {
-        action: Edit,
+        action: Delete,
-      },
-      {
-        action: CreateInstance,
-      },
-      {
-        action: CreateImage,
-      },
-      // {
-      //   action: CreateBackup,
-      // },
-      {
-        action: Attach,
-      },
-      {
-        action: Detach,
-      },
-      {
-        action: ExtendVolume,
-      },
-      {
-        action: ChangeType,
-      },
-      {
-        action: CloneVolume,
       },
       {
         action: CreateTransfer,
@@ -121,9 +85,6 @@ const instanceDetailConfig = {
       {
         action: CancelTransfer,
       },
-      {
-        action: Delete,
-      },
     ],
   },
   batchActions: [],

test/e2e/integration/pages/storage/snapshot.spec.js

@@ -36,7 +36,7 @@ describe('The Volume Snapshot Page', () => {
   it('successfully create', () => {
     cy.visitPage(volumeListUrl)
       .tableSearchText(volumeName)
-      .clickFirstActionButton()
+      .clickActionInMoreSub('Create Snapshot', 'Data Protection')
       .formInput('name', name)
       .clickModalActionSubmitButton();
 

test/e2e/integration/pages/storage/volume.spec.js

@@ -89,7 +89,10 @@ describe('The Volume Page', () => {
   });
 
   it('successfully create snapshot', () => {
-    cy.tableSearchText(name).clickFirstActionButton();
+    cy.tableSearchText(name).clickActionInMoreSub(
+      'Create Snapshot',
+      'Data Protection'
+    );
     cy.wait(2000)
       .formInput('name', snapshotName)
       .clickModalActionSubmitButton()
@@ -108,7 +111,7 @@ describe('The Volume Page', () => {
   onlyOn(backupServiceEnabled, () => {
     it('successfully create backup', () => {
       cy.tableSearchText(name)
-        .clickActionInMore('Create Backup')
+        .clickActionInMoreSub('Create Backup', 'Data Protection')
         .formInput('name', backupName)
         .clickModalActionSubmitButton()
         .tableSearchText(name)
@@ -117,7 +120,7 @@ describe('The Volume Page', () => {
 
     it('successfully create backup inc', () => {
       cy.tableSearchText(name)
-        .clickActionInMore('Create Backup')
+        .clickActionInMoreSub('Create Backup', 'Data Protection')
         .formInput('name', backupIncName)
         .formRadioChoose('incremental', 1)
         .clickModalActionSubmitButton()
@@ -130,7 +133,7 @@ describe('The Volume Page', () => {
 
   it('successfully clone volume', () => {
     cy.tableSearchText(name)
-      .clickActionInMore('Clone Volume')
+      .clickActionInMoreSub('Clone Volume', 'Data Protection')
       .wait(10000)
       .formInput('name', cloneVolumeName)
       .clickModalActionSubmitButton();
@@ -138,7 +141,7 @@ describe('The Volume Page', () => {
 
   it('successfully attach', () => {
     cy.tableSearchText(name)
-      .clickActionInMore('Attach')
+      .clickActionInMoreSub('Attach', 'Instance Related')
       .wait(5000)
       .formTableSelectBySearch('instance', instanceName)
       .clickModalActionSubmitButton()
@@ -148,7 +151,7 @@ describe('The Volume Page', () => {
 
   it('successfully detach', () => {
     cy.tableSearchText(name)
-      .clickActionInMore('Detach')
+      .clickActionInMoreSub('Detach', 'Instance Related')
       .wait(5000)
       .formTableSelect('instance')
       .clickModalActionSubmitButton();
@@ -157,7 +160,7 @@ describe('The Volume Page', () => {
 
   it('successfully create image', () => {
     cy.tableSearchText(name)
-      .clickActionInMore('Create Image')
+      .clickActionInMoreSub('Create Image', 'Data Protection')
       .formInput('image_name', imageName)
       .clickModalActionSubmitButton();
     cy.tableSearchText(name).waitStatusActiveByRefresh();
@@ -168,14 +171,14 @@ describe('The Volume Page', () => {
 
   it('successfully extend volume', () => {
     cy.tableSearchText(name)
-      .clickActionInMore('Extend Volume')
+      .clickActionInMoreSub('Extend Volume', 'Capacity & Type')
       .clickModalActionSubmitButton();
     cy.tableSearchText(name).waitStatusActiveByRefresh();
   });
 
   it('successfully change type', () => {
     cy.tableSearchText(name)
-      .clickActionInMore('Change Type')
+      .clickActionInMoreSub('Change Type', 'Capacity & Type')
       .formSelect('new_type')
       .clickModalActionSubmitButton();
     cy.tableSearchText(name).waitStatusActiveByRefresh();
@@ -183,7 +186,7 @@ describe('The Volume Page', () => {
 
   it('successfully edit', () => {
     cy.tableSearchText(name)
-      .clickActionInMore('Edit')
+      .clickFirstActionButton('Edit')
       .formInput('name', newname)
       .clickModalActionSubmitButton();
   });