@rancher/shell 0.3.0 → 0.3.2

package/dialog/AddProjectMemberDialog.vue

@@ -1,18 +1,37 @@
 <script>
 import { Card } from '@components/Card';
 import ProjectMemberEditor from '@shell/components/form/ProjectMemberEditor';
+import AsyncButton from '@shell/components/AsyncButton';
+import Banner from '@components/Banner/Banner.vue';
 import { NORMAN } from '@shell/config/types';
 
 export default {
   components: {
     Card,
-    ProjectMemberEditor
+    ProjectMemberEditor,
+    AsyncButton,
+    Banner
   },
 
   props: {
     resources: {
       type:     Array,
       required: true
+    },
+
+    onAdd: {
+      type:    Function,
+      default: () => {}
+    },
+
+    projectId: {
+      type:    String,
+      default: null
+    },
+
+    saveInModal: {
+      type:    Boolean,
+      default: false
     }
   },
 
@@ -22,17 +41,13 @@ export default {
         permissionGroup: 'member',
         custom:          {},
         principalId:     '',
-        projectId:       null,
         roleTemplateIds: []
-      }
+      },
+      error: null
     };
   },
 
   computed: {
-    onAdd() {
-      return this.resources[0];
-    },
-
     principal() {
       const principalId = this.member.principalId.replace(/\//g, '%2F');
 
@@ -66,10 +81,26 @@ export default {
         type:                NORMAN.PROJECT_ROLE_TEMPLATE_BINDING,
         roleTemplateId,
         [principalProperty]: this.member.principalId,
-        projectId:           this.member.projectId,
+        projectId:           this.projectId,
       }));
 
       return Promise.all(promises);
+    },
+
+    saveBindings(btnCB) {
+      this.error = null;
+      this.createBindings()
+        .then((bindings) => {
+          return Promise.all(bindings.map(b => b.save()));
+        })
+        .then(() => {
+          btnCB(true);
+          setTimeout(this.close, 500);
+        })
+        .catch((err) => {
+          this.error = err;
+          btnCB(false);
+        });
     }
   }
 };
@@ -89,8 +120,14 @@ export default {
 
     <div
       slot="body"
-      class="pl-10 pr-10 pb-10"
+      class="pl-10 pr-10"
     >
+      <Banner
+        v-if="error"
+        color="error"
+      >
+        {{ error }}
+      </Banner>
       <ProjectMemberEditor
         v-model="member"
         :use-two-columns-for-custom="true"
@@ -108,7 +145,14 @@ export default {
         {{ t('generic.cancel') }}
       </button>
 
+      <AsyncButton
+        v-if="saveInModal"
+        mode="create"
+        @click="cb=>saveBindings(cb)"
+      />
+
       <button
+        v-else
         class="btn role-primary"
         @click="apply"
       >

package/dialog/DiagnosticTimingsDialog.vue

@@ -13,8 +13,12 @@ export default {
   },
 
   props: {
-    resources: {
-      type:     Array,
+    downloadData: {
+      type:     Function,
+      required: true
+    },
+    gatherResponseTimes: {
+      type:     Function,
       required: true
     }
   },
@@ -24,9 +28,6 @@ export default {
   },
 
   computed: {
-    config() {
-      return this.resources[0];
-    },
 
     applyMode() {
       return 'diagnostic';
@@ -48,7 +49,7 @@ export default {
 
     apply(btnCb) {
       try {
-        this.config.downloadData(btnCb);
+        this.downloadData(btnCb);
         this.close();
       } catch (err) {
         console.error(err); // eslint-disable-line
@@ -84,7 +85,7 @@ export default {
           <AsyncButton
             mode="timing"
             class="row mt-20"
-            @click="config.gatherResponseTimes"
+            @click="gatherResponseTimes"
           />
         </div>
       </slot>

package/dialog/DrainNode.vue

@@ -19,9 +19,14 @@ export default {
   },
 
   props: {
-    resources: {
-      type:     Array,
-      required: true
+    kubeNodes: {
+      type:    Array,
+      default: () => []
+    },
+
+    normanNodeId: {
+      type:    String,
+      default: ''
     }
   },
 
@@ -66,15 +71,6 @@ export default {
     };
   },
 
-  computed: {
-    kubeNodes() {
-      return this.resources[0];
-    },
-    normanNodeId() {
-      return this.resources[1];
-    },
-  },
-
   watch: {
     gracePeriod(neu) {
       if (neu && !this.body.gracePeriod) {
@@ -130,13 +126,13 @@ export default {
 </script>
 
 <template>
-  <Card
-    class="prompt-rotate"
-    :show-highlight-border="false"
+  <Card
+    class="prompt-rotate"
+    :show-highlight-border="false"
   >
-    <h4
-      slot="title"
-      class="text-default-text"
+    <h4
+      slot="title"
+      class="text-default-text"
     >
       <template v-if="kubeNodes.length > 1">
         {{ t('drainNode.titleMultiple', { count: kubeNodes.length }) }}
@@ -146,9 +142,9 @@ export default {
       </template>
     </h4>
 
-    <div
-      slot="body"
-      class="pl-10 pr-10"
+    <div
+      slot="body"
+      class="pl-10 pr-10"
     >
       <div>
         <RadioGroup
@@ -162,22 +158,22 @@ export default {
             <h5>{{ t('drainNode.deleteLocalData') }}</h5>
           </template>
         </RadioGroup>
-        <RadioGroup
-          v-model="body.force"
-          name="force"
-          :options="radioOptions"
-          :row="true"
-          class="mb-15"
+        <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"
+        <RadioGroup
+          v-model="gracePeriod"
+          name="gracePeriod"
+          :options="gracePeriodOptions"
+          class="mb-15"
         >
           <template #label>
             <h5>{{ t('drainNode.gracePeriod.title') }}</h5>
@@ -192,11 +188,11 @@ export default {
           :placeholder="t('drainNode.gracePeriod.placeholder')"
           class="mb-10"
         />
-        <RadioGroup
-          v-model="timeout"
-          name="timeout"
-          :options="timeoutOptions"
-          class="mb-15"
+        <RadioGroup
+          v-model="timeout"
+          name="timeout"
+          :options="timeoutOptions"
+          class="mb-15"
         >
           <template #label>
             <h5>{{ t('drainNode.timeout.title') }}</h5>
@@ -212,21 +208,21 @@ export default {
           :placeholder="t('drainNode.timeout.placeholder')"
         />
       </div>
-      <Banner
-        v-for="(err, i) in errors"
-        :key="i"
-        color="error"
-        :label="err"
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
       />
     </div>
 
-    <div
-      slot="actions"
-      class="buttons"
+    <div
+      slot="actions"
+      class="buttons"
     >
-      <button
-        class="btn role-secondary mr-10"
-        @click="close"
+      <button
+        class="btn role-secondary mr-10"
+        @click="close"
       >
         {{ t('generic.cancel') }}
       </button>

package/dialog/ForceMachineRemoveDialog.vue

@@ -16,9 +16,11 @@ export default {
   },
 
   props: {
-    resources: {
-      type:     Array,
-      required: true
+    machine: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
     }
   },
 
@@ -29,10 +31,6 @@ export default {
   computed: {
     ...mapGetters({ t: 'i18n/t' }),
 
-    machine() {
-      return this.resources[0];
-    },
-
     nameToMatch() {
       return this.machine.spec.infrastructureRef.name;
     },

package/dialog/GenericPrompt.vue

@@ -11,32 +11,27 @@ export default {
     Banner,
   },
   props: {
-    resources: {
-      type:     Array,
-      required: true
+    applyAction: {
+      type:    Function,
+      default: () => {}
+    },
+    applyMode: {
+      type:    String,
+      default: 'create'
+    },
+    title: {
+      type:    String,
+      default: ''
+    },
+    body: {
+      type:    String,
+      default: ''
     }
   },
   data() {
     return { errors: [] };
   },
-  computed: {
-    config() {
-      return this.resources[0];
-    },
-    applyAction() {
-      return this.config.applyAction;
-    },
-    applyMode() {
-      return this.config.applyMode || 'create';
-    },
-    title() {
-      return this.config.title;
-    },
-    body() {
-      return this.config.body;
-    },
 
-  },
   methods: {
     close() {
       this.$emit('close');

package/dialog/RollbackWorkloadDialog.vue

@@ -37,8 +37,8 @@ export default {
     YamlEditor,
   },
   props: {
-    resources: {
-      type:     Array,
+    workload: {
+      type:     Object,
       required: true
     }
   },
@@ -55,46 +55,17 @@ export default {
   computed: {
     ...mapGetters({ t: 'i18n/t' }),
     ...mapGetters(['currentCluster']),
-    workload() {
-      return this.resources[0];
-    },
     workloadName() {
       return this.workload.metadata.name;
     },
     workloadNamespace() {
       return this.workload.metadata.namespace;
     },
-    currentRevisionNumber() {
-      return this.workload.metadata.annotations['deployment.kubernetes.io/revision'];
+    workloadType() {
+      return this.workload.kind.toLowerCase();
     },
-    rollbackRequestBody() {
-      if (!this.selectedRevision) {
-        return null;
-      }
-
-      // Build the request body in the same format that kubectl
-      // uses to call the Kubernetes API to roll back a workload.
-      // To see an example request body, run:
-      // kubectl rollout undo deployment/[deployment name] --to-revision=[revision number] -v=8
-      const body = [
-        {
-          op:    'replace',
-          path:  '/spec/template',
-          value: {
-            metadata: {
-              creationTimestamp: null,
-              labels:            { 'workload.user.cattle.io/workloadselector': this.selectedRevision.spec.template.metadata.labels['workload.user.cattle.io/workloadselector'] }
-            },
-            spec: this.selectedRevision.spec.template.spec
-          }
-        }, {
-          op:    'replace',
-          path:  '/metadata/annotations',
-          value: { 'deployment.kubernetes.io/revision': this.selectedRevision.metadata.annotations['deployment.kubernetes.io/revision'] }
-        }
-      ];
-
-      return body;
+    revisionsType() {
+      return this.workloadType === 'deployment' ? WORKLOAD_TYPES.REPLICA_SET : 'apps.controllerrevision';
     },
     selectedRevisionId() {
       return this.selectedRevision.id;
@@ -111,9 +82,9 @@ export default {
   },
   fetch() {
     // Fetch revisions of the current workload
-    this.$store.dispatch('cluster/findAll', { type: WORKLOAD_TYPES.REPLICA_SET })
+    this.$store.dispatch('cluster/findAll', { type: this.revisionsType })
       .then(( response ) => {
-        const allReplicaSets = response;
+        const allRevisions = response;
 
         const hasRelationshipWithCurrentWorkload = ( replicaSet ) => {
           const relationshipsOfReplicaSet = replicaSet.metadata.relationships;
@@ -127,15 +98,13 @@ export default {
           return revisionsOfCurrentWorkload.length > 0;
         };
 
-        const workloadRevisions = allReplicaSets.filter(( replicaSet ) => {
+        const workloadRevisions = allRevisions.filter(( replicaSet ) => {
           return hasRelationshipWithCurrentWorkload( replicaSet );
         });
 
         const revisionOptions = workloadRevisions
           .map( (revision ) => {
-            const isCurrentRevision = this.getRevisionNumber(revision) === this.currentRevisionNumber;
-
-            if (isCurrentRevision) {
+            if (this.isCurrentRevision(revision)) {
               this.currentRevision = revision;
             }
 
@@ -155,18 +124,18 @@ export default {
     },
     async save() {
       try {
-        await this.workload.rollBackWorkload(this.currentCluster, this.workload, this.rollbackRequestBody);
+        await this.workload.rollBack(this.currentCluster, this.workload, this.selectedRevision);
         this.close();
       } catch (err) {
         this.errors = exceptionToErrorsArray(err);
       }
     },
-    getRevisionNumber( revision ) {
-      return revision.metadata.annotations['deployment.kubernetes.io/revision'];
+    isCurrentRevision(revision) {
+      return revision.revisionNumber === this.workload.currentRevisionNumber;
     },
     buildRevisionOption( revision ) {
-      const revisionNumber = this.getRevisionNumber(revision);
-      const isCurrentRevision = revisionNumber === this.currentRevisionNumber;
+      const { revisionNumber } = revision;
+      const isCurrentRevision = this.isCurrentRevision(revision);
       const now = day();
       const createdDate = day(revision.metadata.creationTimestamp);
       const createdDateFormatted = createdDate.format(this.timeFormatStr);

package/dialog/RotateCertificatesDialog.vue

@@ -19,9 +19,11 @@ export default {
   },
 
   props: {
-    resources: {
-      type:     Array,
-      required: true
+    cluster: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
     }
   },
 
@@ -34,10 +36,6 @@ export default {
   },
 
   computed: {
-    cluster() {
-      return this.resources?.[0];
-    },
-
     serviceOptions() {
       if (this.cluster.isRke2) {
         const options = [

package/dialog/RotateEncryptionKeyDialog.vue

@@ -19,9 +19,11 @@ export default {
   },
 
   props: {
-    resources: {
-      type:     Array,
-      required: true
+    cluster: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
     }
   },
 
@@ -51,12 +53,6 @@ export default {
     return { errors: [], latestBackup: null };
   },
 
-  computed: {
-    cluster() {
-      return this.resources?.[0];
-    },
-  },
-
   methods: {
     close(buttonDone) {
       if (buttonDone && typeof buttonDone === 'function') {

package/dialog/SaveAsRKETemplateDialog.vue

@@ -15,25 +15,17 @@ export default {
     LabeledInput,
   },
   props: {
-    resources: {
-      type:     Array,
-      required: true
+    cluster: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
     }
   },
   data() {
     return { errors: [], name: '' };
   },
-  computed: {
-    cluster() {
-      if (this.resources?.length === 1) {
-        const c = this.resources[0];
-
-        return c;
-      }
 
-      return {};
-    },
-  },
   mounted() {
     this.$nextTick(() => {
       this.$refs.templateName.focus();

package/dialog/ScaleMachineDownDialog.vue

@@ -97,7 +97,7 @@ export default {
 
 <template>
   <GenericPrompt
-    :resources="[config]"
+    v-bind="config"
     @close="$emit('close')"
   >
     <template slot="body">