Merge pull request #11316 from eva-vashkevich/iss11046

[FIX] Fixed some issues with driver pages
rancher · Jul 3, 2024 · cc2ae29 · cc2ae29
2 parents 2e345ea + 9fdc413
commit cc2ae29
Show file tree

Hide file tree

Showing 9 changed files with 126 additions and 75 deletions.
diff --git a/cypress/e2e/tests/pages/manager/kontainer-drivers.spec.ts b/cypress/e2e/tests/pages/manager/kontainer-drivers.spec.ts
@@ -19,6 +19,7 @@ describe('Kontainer Drivers', { testIsolation: 'off', tags: ['@manager', '@admin
   let driverId = '';
   const oracleDriver = 'Oracle OKE';
   const linodeDriver = 'Linode LKE';
+  const exampleDriver = 'Example';
 
   before(() => {
     cy.login();
@@ -64,12 +65,8 @@ describe('Kontainer Drivers', { testIsolation: 'off', tags: ['@manager', '@admin
       driverId = response?.body.id;
     });
 
-    // Will use the below assertions until this issue is resolved https://github.com/rancher/dashboard/issues/11046.
-    // Using 'downloadUrl' instead of driver name
-    // driversPage.list().details('Example', 1).should('contain', 'Activating');
-    // driversPage.list().details('Example', 1).contains('Active', { timeout: 60000 });
-    driversPage.list().details(downloadUrl, 1).should('contain', 'Activating');
-    driversPage.list().details(downloadUrl, 1).contains('Active', { timeout: 60000 });
+    driversPage.list().details(exampleDriver, 1).should('contain', 'Activating');
+    driversPage.list().details(exampleDriver, 1).contains('Active', { timeout: 60000 });
 
     ClusterManagerListPagePo.navTo();
     clusterList.waitForPage();
@@ -87,15 +84,13 @@ describe('Kontainer Drivers', { testIsolation: 'off', tags: ['@manager', '@admin
 
     KontainerDriversPagePo.navTo();
     driversPage.waitForPage();
-    driversPage.list().details(downloadUrl, 2).find('span').invoke('text')
-      .then((t) => {
-        cy.intercept('POST', `/v3/kontainerDrivers/${ t }?action=deactivate`).as('deactivateDriver');
 
-        driversPage.list().actionMenu(downloadUrl).getMenuItem('Deactivate').click();
-        const deactivateDialog = new DeactivateDriverDialogPo();
+    cy.intercept('POST', `/v3/kontainerDrivers/*?action=deactivate`).as('deactivateDriver');
 
-        deactivateDialog.deactivate();
-      });
+    driversPage.list().actionMenu(downloadUrl).getMenuItem('Deactivate').click();
+    const deactivateDialog = new DeactivateDriverDialogPo();
+
+    deactivateDialog.deactivate();
 
     cy.wait('@deactivateDriver').then(({ request, response }) => {
       expect(response?.statusCode).to.eq(200);
@@ -115,12 +110,11 @@ describe('Kontainer Drivers', { testIsolation: 'off', tags: ['@manager', '@admin
 
     KontainerDriversPagePo.navTo();
     driversPage.waitForPage();
-    driversPage.list().details(downloadUrl, 2).find('span').invoke('text')
-      .then((t) => {
-        cy.intercept('POST', `/v3/kontainerDrivers/${ t }?action=activate`).as('activateDriver');
 
-        driversPage.list().actionMenu(downloadUrl).getMenuItem('Activate').click();
-      });
+    cy.intercept('POST', `/v3/kontainerDrivers/*?action=activate`).as('activateDriver');
+
+    driversPage.list().actionMenu(downloadUrl).getMenuItem('Activate').click();
+
     cy.wait('@activateDriver').then(({ request, response }) => {
       expect(response?.statusCode).to.eq(200);
       expect(isMatch(request.body, requestData)).to.equal(true);
@@ -180,8 +174,7 @@ describe('Kontainer Drivers', { testIsolation: 'off', tags: ['@manager', '@admin
     createCluster.gridElementExistanceByName(linodeDriver, 'exist');
   });
 
-  it.skip('can deactivate drivers in bulk', () => {
-    // Skipping this test until issue is resolved https://github.com/rancher/dashboard/issues/10718
+  it('can deactivate drivers in bulk', () => {
     KontainerDriversPagePo.navTo();
     driversPage.waitForPage();
     driversPage.list().details(oracleDriver, 1).should('contain', 'Active');

diff --git a/cypress/e2e/tests/pages/manager/node-drivers.spec.ts b/cypress/e2e/tests/pages/manager/node-drivers.spec.ts
@@ -112,12 +112,8 @@ describe.skip('Node Drivers', { testIsolation: 'off', tags: ['@manager', '@admin
       expect(isMatch(request.body, requestData)).to.equal(true);
     });
 
-    // Will use the below assertions until this issue is resolved https://github.com/rancher/dashboard/issues/11046.
-    // Using 'downloadUrl' instead of driver name
-    // driversPage.list().details(cloudCaDriver, 1).should('contain', 'Downloading');
-    // driversPage.list().details(cloudCaDriver, 1).contains('Active', { timeout: 15000 });
-    driversPage.list().details(downloadUrl2, 1).should('contain', 'Downloading');
-    driversPage.list().details(downloadUrl2, 1).contains('Active', { timeout: 60000 });
+    driversPage.list().details(cloudCaDriver, 1).should('contain', 'Downloading');
+    driversPage.list().details(cloudCaDriver, 1).contains('Active', { timeout: 15000 });
 
     ClusterManagerListPagePo.navTo();
     clusterList.waitForPage();
@@ -246,8 +242,7 @@ describe.skip('Node Drivers', { testIsolation: 'off', tags: ['@manager', '@admin
     createCluster.gridElementExistanceByName(openStackDriver, 'not.exist');
   });
 
-  it.skip('can delete drivers in bulk', () => {
-    // Skipping this test until issue is resolved https://github.com/rancher/dashboard/issues/10718
+  it('can delete drivers in bulk', () => {
     NodeDriversPagePo.navTo();
     driversPage.waitForPage();
     driversPage.list().resourceTable().sortableTable().rowSelectCtlWithName(oracleDriver)

diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
@@ -2225,7 +2225,22 @@ drivers:
     refresh: Refresh Kubernetes Metadata
   deactivate:
     title: Are you sure?
-    warning: You will no longer be able to edit the configuration of clusters using {name} driver. Resources in the provider will not be automatically removed.
+    andOthers: |-
+      {count, plural,
+      =0 {}
+      =1 { and <b>one other </b>}
+      other { and <b>{count} other </b>}
+      }
+    warningDrivers: |-
+      {count, plural,
+      =1 { You will no longer be able to edit the configuration of clusters using {names} driver.}
+      other { You will no longer be able to edit the configuration of clusters using {names} drivers.}
+      }
+    warning: |-
+      {count, plural,
+      =1 { {warningDrivers} Resources in the corresponding provider will not be automatically removed.}
+      other { {warningDrivers} Resources in the corresponding providers will not be automatically removed.}
+      }
 
 detailText:
   collapse: Hide

diff --git a/shell/dialog/DeactivateDriverDialog.vue b/shell/dialog/DeactivateDriverDialog.vue
@@ -3,6 +3,8 @@ import AsyncButton from '@shell/components/AsyncButton';
 import { Card } from '@components/Card';
 import { Banner } from '@components/Banner';
 import { exceptionToErrorsArray } from '@shell/utils/error';
+import { resourceNames } from '@shell/utils/string';
+import { mapGetters } from 'vuex';
 
 export default {
   components: {
@@ -12,20 +14,35 @@ export default {
   },
 
   props: {
-    url: {
-      type:    String,
-      default: null,
+    drivers: {
+      type:     Array,
+      required: true
     },
-    name: {
-      type:    String,
-      default: null,
+    driverType: {
+      type:     String,
+      required: true
     }
   },
 
   data() {
     return { errors: [] };
   },
+  computed: {
+    formattedText() {
+      const namesSliced = this.drivers.map((obj) => obj.nameDisplay).slice(0, 5);
+      const remaining = this.drivers.length - namesSliced.length;
+
+      const plusMore = this.t('drivers.deactivate.andOthers', { count: remaining });
+      const names = resourceNames(namesSliced, plusMore, this.t);
+      const count = remaining || namesSliced.length;
+      const warningDrivers = this.t('drivers.deactivate.warningDrivers', { names, count });
+
+      return this.t('drivers.deactivate.warning', { warningDrivers, count: namesSliced.length });
+    },
+    ...mapGetters({ t: 'i18n/t' }),
+  },
   methods: {
+    resourceNames,
     close(buttonDone) {
       if (buttonDone && typeof buttonDone === 'function') {
         buttonDone(true);
@@ -34,10 +51,12 @@ export default {
     },
     async apply(buttonDone) {
       try {
-        await this.$store.dispatch('rancher/request', {
-          url:    this.url,
-          method: 'post'
-        });
+        await Promise.all(this.drivers.map(
+          (driver) => this.$store.dispatch('rancher/request', {
+            url:    `v3/${ this.driverType }/${ escape(driver.id) }?action=deactivate`,
+            method: 'POST'
+          })
+        ));
 
         this.close(buttonDone);
       } catch (err) {
@@ -64,7 +83,7 @@ export default {
     <template #body>
       <div class="pl-10 pr-10">
         <div class="text info mb-10 mt-20">
-          <span v-clean-html="t('drivers.deactivate.warning', {name})" />
+          <span v-clean-html="formattedText" />
         </div>
         <Banner
           v-for="(err, i) in errors"

diff --git a/shell/models/driver.js b/shell/models/driver.js
@@ -1,6 +1,7 @@
 import { DESCRIPTION } from '@shell/config/labels-annotations';
 import NormanModel from '@shell/plugins/steve/norman-class';
 import { KONTAINER_TO_DRIVER } from './management.cattle.io.kontainerdriver';
+import capitalize from 'lodash/capitalize';
 
 export default class Driver extends NormanModel {
   get canViewYaml() {
@@ -20,12 +21,12 @@ export default class Driver extends NormanModel {
       }
     }
 
-    return KONTAINER_TO_DRIVER[this.id] || this.id;
+    return KONTAINER_TO_DRIVER[this.id] || this.name || this.id;
   }
 
   get nameDisplay() {
     const path = `cluster.provider.${ this.driverName }`;
-    const label = this.driverName || this.name || this.id;
+    const label = capitalize(this.driverName);
 
     return this.$rootGetters['i18n/withFallback'](path, label);
   }

diff --git a/shell/models/kontainerdriver.js b/shell/models/kontainerdriver.js
@@ -8,19 +8,21 @@ export default class KontainerDriver extends Driver {
   get _availableActions() {
     const out = [
       {
-        action:   'activate',
-        label:    'Activate',
-        icon:     'icon icon-play',
-        bulkable: true,
-        enabled:  !!this.links.update && !this.active
+        action:     'activate',
+        label:      this.t('action.activate'),
+        icon:       'icon icon-play',
+        bulkable:   true,
+        bulkAction: 'activateBulk',
+        enabled:    !!this.links.update && !this.active
       },
       {
-        action:   'deactivate',
-        label:    'Deactivate',
-        icon:     'icon icon-pause',
-        bulkable: true,
-        enabled:  !!this.links.update && !!this.active,
-        weight:   -1
+        action:     'deactivate',
+        label:      this.t('action.deactivate'),
+        icon:       'icon icon-pause',
+        bulkable:   true,
+        bulkAction: 'deactivateBulk',
+        enabled:    !!this.links.update && !!this.active,
+        weight:     -1
       },
       { divider: true },
       {
@@ -52,9 +54,16 @@ export default class KontainerDriver extends Driver {
     return out;
   }
 
-  deactivate() {
+  deactivate(resources = [this]) {
+    this.$dispatch('promptModal', {
+      componentProps: { drivers: resources, driverType: 'kontainerDrivers' },
+      component:      'DeactivateDriverDialog'
+    });
+  }
+
+  deactivateBulk(resources) {
     this.$dispatch('promptModal', {
-      componentProps: { url: `v3/kontainerDrivers/${ escape(this.id) }?action=deactivate`, name: this.nameDisplay },
+      componentProps: { drivers: resources, driverType: 'kontainerDrivers' },
       component:      'DeactivateDriverDialog'
     });
   }
@@ -65,4 +74,12 @@ export default class KontainerDriver extends Driver {
       method: 'post',
     }, { root: true });
   }
+
+  async activateBulk(resources) {
+    await Promise.all(resources.map((resource) => this.$dispatch('rancher/request', {
+      url:    `v3/kontainerDrivers/${ escape(resource.id) }?action=activate`,
+      method: 'post',
+    }, { root: true }
+    )));
+  }
 }
diff --git a/shell/models/nodedriver.js b/shell/models/nodedriver.js
@@ -8,19 +8,21 @@ export default class NodeDriver extends Driver {
   get _availableActions() {
     const out = [
       {
-        action:   'activate',
-        label:    'Activate',
-        icon:     'icon icon-play',
-        bulkable: true,
-        enabled:  !!this.actions.activate && this.state === 'inactive',
+        action:     'activate',
+        label:      this.t('action.activate'),
+        icon:       'icon icon-play',
+        bulkable:   true,
+        bulkAction: 'activateBulk',
+        enabled:    !!this.actions.activate && this.state === 'inactive',
       },
       {
-        action:   'deactivate',
-        label:    'Deactivate',
-        icon:     'icon icon-pause',
-        bulkable: true,
-        enabled:  !!this.actions.deactivate && this.state === 'active',
-        weight:   -1,
+        action:     'deactivate',
+        label:      this.t('action.deactivate'),
+        icon:       'icon icon-pause',
+        bulkable:   true,
+        bulkAction: 'deactivateBulk',
+        enabled:    !!this.actions.deactivate && this.state === 'active',
+        weight:     -1,
       },
       { divider: true },
       {
@@ -52,9 +54,16 @@ export default class NodeDriver extends Driver {
     return out;
   }
 
-  deactivate() {
+  deactivate(resources = [this]) {
+    this.$dispatch('promptModal', {
+      componentProps: { drivers: resources, driverType: 'nodeDrivers' },
+      component:      'DeactivateDriverDialog'
+    });
+  }
+
+  deactivateBulk(resources) {
     this.$dispatch('promptModal', {
-      componentProps: { url: `v3/nodeDrivers/${ escape(this.id) }?action=deactivate`, name: this.nameDisplay },
+      componentProps: { drivers: resources, driverType: 'nodeDrivers' },
       component:      'DeactivateDriverDialog'
     });
   }
@@ -65,4 +74,12 @@ export default class NodeDriver extends Driver {
       method: 'post',
     }, { root: true });
   }
+
+  async activateBulk(resources) {
+    await Promise.all(resources.map((resource) => this.$dispatch('rancher/request', {
+      url:    `v3/nodeDrivers/${ escape(resource.id) }?action=activate`,
+      method: 'post',
+    }, { root: true }
+    )));
+  }
 }
diff --git a/shell/pages/c/_cluster/manager/drivers/kontainerDriver/index.vue b/shell/pages/c/_cluster/manager/drivers/kontainerDriver/index.vue
@@ -44,9 +44,6 @@ export default {
         buttonDone(false);
       }
     }
-  },
-  mounted() {
-    window.c = this;
   }
 };
 </script>

diff --git a/shell/pages/c/_cluster/manager/drivers/nodeDriver/index.vue b/shell/pages/c/_cluster/manager/drivers/nodeDriver/index.vue
@@ -26,10 +26,7 @@ export default {
     rows() {
       return this.allDrivers || [];
     },
-  },
-  mounted() {
-    window.c = this;
-  },
+  }
 };
 </script>