@rancher/shell 2.0.0 → 3.0.0-rc.1

package/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) {
@@ -54,17 +73,16 @@ export default {
     :show-highlight-border="false"
     :data-testid="'prompt-deactivate'"
   >
-    <h4
-      slot="title"
-      class="text-default-text"
-    >
-      {{ t('drivers.deactivate.title') }}
-    </h4>
+    <template #title>
+      <h4 class="text-default-text">
+        {{ t('drivers.deactivate.title') }}
+      </h4>
+    </template>
 
     <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"

package/dialog/DiagnosticTimingsDialog.vue

@@ -66,13 +66,14 @@ export default {
     class="prompt-restore"
     :show-highlight-border="false"
   >
-    <h4
-      slot="title"
-      v-clean-html="title"
-      class="text-default-text"
-    />
+    <template #title>
+      <h4
+        v-clean-html="title"
+        class="text-default-text"
+      />
+    </template>
 
-    <template slot="body">
+    <template #body>
       <slot name="body">
         <div
           class="pl-10 pr-10"
@@ -91,31 +92,30 @@ export default {
       </slot>
     </template>
 
-    <div
-      slot="actions"
-      class="bottom"
-    >
-      <Banner
-        v-for="(err, i) in errors"
-        :key="i"
-        color="error"
-        :label="err"
-      />
-      <div class="buttons">
-        <button
-          class="btn role-secondary mr-10"
-          @click="close"
-        >
-          {{ t('generic.cancel') }}
-        </button>
-
-        <AsyncButton
-          :mode="applyMode"
-          data-testid="download-diagnostics-modal-action"
-          @click="apply"
+    <template #actions>
+      <div class="bottom">
+        <Banner
+          v-for="(err, i) in errors"
+          :key="i"
+          color="error"
+          :label="err"
         />
+        <div class="buttons">
+          <button
+            class="btn role-secondary mr-10"
+            @click="close"
+          >
+            {{ t('generic.cancel') }}
+          </button>
+
+          <AsyncButton
+            :mode="applyMode"
+            data-testid="download-diagnostics-modal-action"
+            @click="apply"
+          />
+        </div>
       </div>
-    </div>
+    </template>
   </Card>
 </template>
 <style lang='scss' scoped>

package/dialog/DrainNode.vue

@@ -1,249 +1,245 @@
-<script>
-import Vue from 'vue';
-import AsyncButton from '@shell/components/AsyncButton';
-import { Banner } from '@components/Banner';
-import { Card } from '@components/Card';
-import { RadioGroup } from '@components/Form/Radio';
-import UnitInput from '@shell/components/form/UnitInput';
-import { _EDIT, _VIEW } from '@shell/config/query-params';
-
-import { exceptionToErrorsArray } from '@shell/utils/error';
-
-export default {
-  components: {
-    AsyncButton,
-    Banner,
-    Card,
-    RadioGroup,
-    UnitInput
-  },
-
-  props: {
-    kubeNodes: {
-      type:    Array,
-      default: () => []
-    },
-
-    normanNodeId: {
-      type:    String,
-      default: ''
-    }
-  },
-
-  data() {
-    return {
-      radioOptions: [{
-        label: this.t('generic.yes'),
-        value: true,
-      }, {
-        label: this.t('generic.no'),
-        value: false,
-      }],
-      gracePeriodOptions: [{
-        label: this.t('drainNode.gracePeriod.default'),
-        value: false,
-      }, {
-        label: this.t('drainNode.gracePeriod.custom'),
-        value: true,
-      }],
-      timeoutOptions: [{
-        label: this.t('drainNode.timeout.default'),
-        value: false,
-      }, {
-        label: this.t('drainNode.timeout.custom'),
-        value: true,
-      }],
-
-      gracePeriod: false,
-      timeout:     false,
-
-      body: {
-        deleteLocalData: false,
-        force:           false,
-        gracePeriod:     null,
-        timeout:         null
-      },
-
-      EDIT: _EDIT,
-      VIEW: _VIEW,
-
-      errors: [],
-    };
-  },
-
-  watch: {
-    gracePeriod(neu) {
-      if (neu && !this.body.gracePeriod) {
-        this.body.gracePeriod = 30;
-      }
-    },
-    'body.gracePeriod'(neu) {
-      if (neu && neu < 1) {
-        Vue.set(this.body, 'gracePeriod', 1);
-      }
-    },
-    timeout(neu) {
-      if (neu && !this.body.timeout) {
-        this.body.timeout = 60;
-      }
-    },
-    'body.timeout'(neu) {
-      if (neu) {
-        if (neu < 1) {
-          Vue.set(this.body, 'timeout', 1);
-        } else if (neu > 10800) {
-          Vue.set(this.body, 'timeout', 10800);
-        }
-      }
-    },
-  },
-
-  methods: {
-    close() {
-      this.$emit('close');
-    },
-
-    async apply(buttonDone) {
-      const { gracePeriod, timeout, ...parsedBody } = this.body;
-
-      if (this.gracePeriod) {
-        parsedBody.gracePeriod = gracePeriod;
-      }
-      if (this.timeout) {
-        parsedBody.timeout = timeout;
-      }
-
-      try {
-        await Promise.all(this.kubeNodes.map((node) => node.norman?.doAction('drain', parsedBody)));
-        this.close();
-      } catch (e) {
-        this.errors = exceptionToErrorsArray(e);
-        buttonDone(false);
-      }
-    }
-  }
-};
-</script>
-
-<template>
-  <Card
-    class="prompt-rotate"
-    :show-highlight-border="false"
-  >
-    <h4
-      slot="title"
-      class="text-default-text"
-    >
-      <template v-if="kubeNodes.length > 1">
-        {{ t('drainNode.titleMultiple', { count: kubeNodes.length }) }}
-      </template>
-      <template v-else>
-        {{ t('drainNode.titleOne', { name: kubeNodes[0].name }, true) }}
-      </template>
-    </h4>
-
-    <div
-      slot="body"
-      class="pl-10 pr-10"
-    >
-      <div>
-        <RadioGroup
-          v-model="body.deleteLocalData"
-          name="deleteLocalData"
-          :options="radioOptions"
-          :row="true"
-          class="mb-15"
-        >
-          <template #label>
-            <h5>{{ t('drainNode.deleteLocalData') }}</h5>
-          </template>
-        </RadioGroup>
-        <RadioGroup
-          v-model="body.force"
-          name="force"
-          :options="radioOptions"
-          :row="true"
-          class="mb-15"
-        >
-          <template #label>
-            <h5>{{ t('drainNode.force') }}</h5>
-          </template>
-        </RadioGroup>
-        <RadioGroup
-          v-model="gracePeriod"
-          name="gracePeriod"
-          :options="gracePeriodOptions"
-          class="mb-15"
-        >
-          <template #label>
-            <h5>{{ t('drainNode.gracePeriod.title') }}</h5>
-          </template>
-        </RadioGroup>
-        <UnitInput
-          v-model="body.gracePeriod"
-          :mode="gracePeriod ? EDIT : VIEW"
-          type="number"
-          min="1"
-          :suffix="t('suffix.sec')"
-          :placeholder="t('drainNode.gracePeriod.placeholder')"
-          class="mb-10"
-        />
-        <RadioGroup
-          v-model="timeout"
-          name="timeout"
-          :options="timeoutOptions"
-          class="mb-15"
-        >
-          <template #label>
-            <h5>{{ t('drainNode.timeout.title') }}</h5>
-          </template>
-        </RadioGroup>
-        <UnitInput
-          v-model="body.timeout"
-          :mode="timeout ? EDIT : VIEW"
-          type="number"
-          min="1"
-          max="10800"
-          :suffix="t('suffix.sec')"
-          :placeholder="t('drainNode.timeout.placeholder')"
-        />
-      </div>
-      <Banner
-        v-for="(err, i) in errors"
-        :key="i"
-        color="error"
-        :label="err"
-      />
-    </div>
-
-    <div
-      slot="actions"
-      class="buttons"
-    >
-      <button
-        class="btn role-secondary mr-10"
-        @click="close"
-      >
-        {{ t('generic.cancel') }}
-      </button>
-
-      <AsyncButton
-        mode="drain"
-        @click="apply"
-      />
-    </div>
-  </Card>
-</template>
-<style lang='scss' scoped>
-  .prompt-rotate {
-    margin: 0;
-  }
-  .card-title h4 {
-    margin-bottom: 0;
-  }
-  .buttons {
-    display: flex;
-    justify-content: flex-end;
-    width: 100%;
-  }
-</style>
+<script>
+import AsyncButton from '@shell/components/AsyncButton';
+import { Banner } from '@components/Banner';
+import { Card } from '@components/Card';
+import { RadioGroup } from '@components/Form/Radio';
+import UnitInput from '@shell/components/form/UnitInput';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+
+import { exceptionToErrorsArray } from '@shell/utils/error';
+
+export default {
+  components: {
+    AsyncButton,
+    Banner,
+    Card,
+    RadioGroup,
+    UnitInput
+  },
+
+  props: {
+    kubeNodes: {
+      type:    Array,
+      default: () => []
+    },
+
+    normanNodeId: {
+      type:    String,
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      radioOptions: [{
+        label: this.t('generic.yes'),
+        value: true,
+      }, {
+        label: this.t('generic.no'),
+        value: false,
+      }],
+      gracePeriodOptions: [{
+        label: this.t('drainNode.gracePeriod.default'),
+        value: false,
+      }, {
+        label: this.t('drainNode.gracePeriod.custom'),
+        value: true,
+      }],
+      timeoutOptions: [{
+        label: this.t('drainNode.timeout.default'),
+        value: false,
+      }, {
+        label: this.t('drainNode.timeout.custom'),
+        value: true,
+      }],
+
+      gracePeriod: false,
+      timeout:     false,
+
+      body: {
+        deleteLocalData: false,
+        force:           false,
+        gracePeriod:     null,
+        timeout:         null
+      },
+
+      EDIT: _EDIT,
+      VIEW: _VIEW,
+
+      errors: [],
+    };
+  },
+
+  watch: {
+    gracePeriod(neu) {
+      if (neu && !this.body.gracePeriod) {
+        this.body.gracePeriod = 30;
+      }
+    },
+    'body.gracePeriod'(neu) {
+      if (neu && neu < 1) {
+        this.body['gracePeriod'] = 1;
+      }
+    },
+    timeout(neu) {
+      if (neu && !this.body.timeout) {
+        this.body.timeout = 60;
+      }
+    },
+    'body.timeout'(neu) {
+      if (neu) {
+        if (neu < 1) {
+          this.body['timeout'] = 1;
+        } else if (neu > 10800) {
+          this.body['timeout'] = 10800;
+        }
+      }
+    },
+  },
+
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+
+    async apply(buttonDone) {
+      const { gracePeriod, timeout, ...parsedBody } = this.body;
+
+      if (this.gracePeriod) {
+        parsedBody.gracePeriod = gracePeriod;
+      }
+      if (this.timeout) {
+        parsedBody.timeout = timeout;
+      }
+
+      try {
+        await Promise.all(this.kubeNodes.map((node) => node.norman?.doAction('drain', parsedBody)));
+        this.close();
+      } catch (e) {
+        this.errors = exceptionToErrorsArray(e);
+        buttonDone(false);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <Card
+    class="prompt-rotate"
+    :show-highlight-border="false"
+  >
+    <template #title>
+      <h4 class="text-default-text">
+        <template v-if="kubeNodes.length > 1">
+          {{ t('drainNode.titleMultiple', { count: kubeNodes.length }) }}
+        </template>
+        <template v-else>
+          {{ t('drainNode.titleOne', { name: kubeNodes[0].name }, true) }}
+        </template>
+      </h4>
+    </template>
+
+    <template #body>
+      <div class="pl-10 pr-10">
+        <div>
+          <RadioGroup
+            v-model="body.deleteLocalData"
+            name="deleteLocalData"
+            :options="radioOptions"
+            :row="true"
+            class="mb-15"
+          >
+            <template #label>
+              <h5>{{ t('drainNode.deleteLocalData') }}</h5>
+            </template>
+          </RadioGroup>
+          <RadioGroup
+            v-model="body.force"
+            name="force"
+            :options="radioOptions"
+            :row="true"
+            class="mb-15"
+          >
+            <template #label>
+              <h5>{{ t('drainNode.force') }}</h5>
+            </template>
+          </RadioGroup>
+          <RadioGroup
+            v-model="gracePeriod"
+            name="gracePeriod"
+            :options="gracePeriodOptions"
+            class="mb-15"
+          >
+            <template #label>
+              <h5>{{ t('drainNode.gracePeriod.title') }}</h5>
+            </template>
+          </RadioGroup>
+          <UnitInput
+            v-model="body.gracePeriod"
+            :mode="gracePeriod ? EDIT : VIEW"
+            type="number"
+            min="1"
+            :suffix="t('suffix.sec')"
+            :placeholder="t('drainNode.gracePeriod.placeholder')"
+            class="mb-10"
+          />
+          <RadioGroup
+            v-model="timeout"
+            name="timeout"
+            :options="timeoutOptions"
+            class="mb-15"
+          >
+            <template #label>
+              <h5>{{ t('drainNode.timeout.title') }}</h5>
+            </template>
+          </RadioGroup>
+          <UnitInput
+            v-model="body.timeout"
+            :mode="timeout ? EDIT : VIEW"
+            type="number"
+            min="1"
+            max="10800"
+            :suffix="t('suffix.sec')"
+            :placeholder="t('drainNode.timeout.placeholder')"
+          />
+        </div>
+        <Banner
+          v-for="(err, i) in errors"
+          :key="i"
+          color="error"
+          :label="err"
+        />
+      </div>
+    </template>
+
+    <template #actions>
+      <div class="buttons">
+        <button
+          class="btn role-secondary mr-10"
+          @click="close"
+        >
+          {{ t('generic.cancel') }}
+        </button>
+
+        <AsyncButton
+          mode="drain"
+          @click="apply"
+        />
+      </div>
+    </template>
+  </Card>
+</template>
+<style lang='scss' scoped>
+  .prompt-rotate {
+    margin: 0;
+  }
+  .card-title h4 {
+    margin-bottom: 0;
+  }
+  .buttons {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+  }
+</style>