@rancher/shell 0.3.0 → 0.3.1

package/creators/pkg/package-lock.json

@@ -0,0 +1,37 @@
+{
+  "name": "@rancher/create-pkg",
+  "version": "0.1.37",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "requires": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.10",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
+    },
+    "jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "requires": {
+        "graceful-fs": "^4.1.6",
+        "universalify": "^2.0.0"
+      }
+    },
+    "universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
+    }
+  }
+}

package/creators/pkg/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rancher/create-pkg",
   "description": "Rancher UI Package generator",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "license": "Apache-2.0",
   "author": "SUSE",
   "private": false,

package/detail/catalog.cattle.io.app.vue

@@ -30,7 +30,7 @@ export default {
   },
 
   async fetch() {
-    await this.$store.dispatch('catalog/load');
+    await this.$store.dispatch('catalog/load', { force: true, reset: true });
 
     this.allOperations = await this.$store.dispatch('cluster/findAll', { type: CATALOG.OPERATION });
   },

package/detail/pod.vue

@@ -98,7 +98,7 @@ export default {
           stateDisplay:     status ? this.value.containerStateDisplay(status) : undefined,
           stateBackground:  status ? this.value.containerStateColor(status).replace('text', 'bg') : undefined,
           nameSort:         sortableNumericSuffix(container.name).toLowerCase(),
-          readyIcon:        status?.ready ? 'icon-checkmark icon-2x text-success ml-5' : 'icon-x icon-2x text-error ml-5',
+          readyIcon:        status?.ready ? 'icon-checkmark text-success ml-5' : 'icon-x text-error ml-5',
           availableActions: this.value.containerActions,
           stateObj:         status, // Required if there's a description
           stateDescription: descriptions.join(' | '), // Required to display the description

package/detail/provisioning.cattle.io.cluster.vue

@@ -9,7 +9,7 @@ import Tab from '@shell/components/Tabbed/Tab';
 import { allHash } from '@shell/utils/promise';
 import { CAPI, MANAGEMENT, NORMAN, SNAPSHOT } from '@shell/config/types';
 import {
-  STATE, NAME as NAME_COL, AGE, AGE_NORMAN, STATE_NORMAN, ROLES, MACHINE_NODE_OS, MANAGEMENT_NODE_OS, NAME, IP_ADDRESS
+  STATE, NAME as NAME_COL, AGE, AGE_NORMAN, INTERNAL_EXTERNAL_IP, STATE_NORMAN, ROLES, MACHINE_NODE_OS, MANAGEMENT_NODE_OS, NAME,
 } from '@shell/config/table-headers';
 import CustomCommand from '@shell/edit/provisioning.cattle.io.cluster/CustomCommand';
 import AsyncButton from '@shell/components/AsyncButton.vue';
@@ -17,7 +17,7 @@ import AnsiUp from 'ansi_up';
 import day from 'dayjs';
 import { addParams } from '@shell/utils/url';
 import { base64Decode } from '@shell/utils/crypto';
-import { DATE_FORMAT, TIME_FORMAT } from '@shell/store/prefs';
+import { DATE_FORMAT, TIME_FORMAT, SCALE_POOL_PROMPT } from '@shell/store/prefs';
 import { escapeHtml } from '@shell/utils/string';
 import MachineSummaryGraph from '@shell/components/formatter/MachineSummaryGraph';
 import Socket, {
@@ -29,6 +29,7 @@ import Socket, {
 } from '@shell/utils/socket';
 import { get } from '@shell/utils/object';
 import CapiMachineDeployment from '@shell/models/cluster.x-k8s.io.machinedeployment';
+import { isAlternate } from '@shell/utils/platform';
 
 let lastId = 1;
 const ansiup = new AnsiUp();
@@ -253,7 +254,9 @@ export default {
       const emptyPools = (this.value.spec.rkeConfig?.machinePools || []).filter((mp) => {
         const machinePrefix = `${ this.value.name }-${ mp.name }`;
         const machines = this.value.machines.filter((machine) => {
-          return machine.spec?.infrastructureRef?.name.startsWith(machinePrefix);
+          const isElementalCluster = machine.spec?.infrastructureRef?.apiVersion.startsWith('elemental.cattle.io');
+
+          return !isElementalCluster ? machine.spec?.infrastructureRef?.name.startsWith(machinePrefix) : machine.spec?.infrastructureRef?.name.includes(machinePrefix);
         });
 
         return machines.length === 0;
@@ -356,7 +359,7 @@ export default {
           formatterOpts: { reference: 'kubeNodeDetailLocation' },
           dashIfEmpty:   true,
         },
-        IP_ADDRESS,
+        INTERNAL_EXTERNAL_IP,
         MACHINE_NODE_OS,
         ROLES,
         AGE,
@@ -375,7 +378,7 @@ export default {
           formatterOpts: { reference: 'kubeNodeDetailLocation' },
           dashIfEmpty:   true,
         },
-        IP_ADDRESS,
+        INTERNAL_EXTERNAL_IP,
         MANAGEMENT_NODE_OS,
         ROLES,
         AGE
@@ -500,6 +503,24 @@ export default {
   },
 
   methods: {
+    toggleScaleDownModal( event, resources ) {
+      // Check if the user held alt key when an action is clicked.
+      const alt = isAlternate(event);
+      const showScalePoolPrompt = this.$store.getters['prefs/get'](SCALE_POOL_PROMPT);
+
+      // Prompt if showScalePoolPrompt pref not store and user did not held alt key
+      if (!alt && !showScalePoolPrompt) {
+        this.$store.dispatch('management/promptModal', {
+          component:  'ScalePoolDownDialog',
+          resources,
+          modalWidth: '450px'
+        });
+      } else {
+        // User held alt key, so don't prompt
+        resources.scalePool(-1);
+      }
+    },
+
     async takeSnapshot(btnCb) {
       try {
         await this.value.takeSnapshot();
@@ -679,16 +700,21 @@ export default {
                 </div>
               </div>
               <div
-                v-if="group.ref"
-                class="right mr-45"
+                v-if="group.ref && poolSummaryInfo[group.ref]"
+                class="right group-header-buttons mr-20"
               >
+                <MachineSummaryGraph
+                  :row="poolSummaryInfo[group.ref]"
+                  :horizontal="true"
+                  class="mr-20"
+                />
                 <template v-if="value.hasLink('update') && group.ref.showScalePool">
                   <button
                     v-tooltip="t('node.list.scaleDown')"
                     :disabled="!group.ref.canScaleDownPool()"
                     type="button"
                     class="btn btn-sm role-secondary"
-                    @click="group.ref.scalePool(-1)"
+                    @click="toggleScaleDownModal($event, group.ref)"
                   >
                     <i class="icon icon-sm icon-minus" />
                   </button>
@@ -772,7 +798,7 @@ export default {
                     :disabled="group.ref.spec.quantity < 2"
                     type="button"
                     class="btn btn-sm role-secondary"
-                    @click="group.ref.scalePool(-1)"
+                    @click="toggleScaleDownModal($event, group.ref)"
                   >
                     <i class="icon icon-sm icon-minus" />
                   </button>

package/detail/service.vue

@@ -11,7 +11,6 @@ import Tab from '@shell/components/Tabbed/Tab';
 import { CATTLE_PUBLIC_ENDPOINTS } from '@shell/config/labels-annotations';
 import { KEY, VALUE } from '@shell/config/table-headers';
 import { POD } from '@shell/config/types';
-import { allHash } from '@shell/utils/promise';
 import { findBy } from '@shell/utils/array';
 
 export default {
@@ -36,13 +35,7 @@ export default {
   },
 
   async fetch() {
-    const hash = { pods: this.value.pods() };
-
-    const res = await allHash(hash);
-
-    for (const k in res) {
-      this[k] = res[k];
-    }
+    await this.value.fetchPods();
   },
 
   data() {
@@ -159,7 +152,7 @@ export default {
       :weight="4"
     >
       <ResourceTable
-        :rows="pods"
+        :rows="value.pods"
         :headers="podTableHeaders"
         key-field="id"
         :table-actions="false"

package/detail/workload/index.vue

@@ -373,7 +373,6 @@ export default {
     </div>
     <ResourceTabs
       :value="value"
-      :always-show-events="true"
     >
       <Tab
         v-if="isCronJob"

package/dialog/AddClusterMemberDialog.vue

@@ -9,9 +9,9 @@ export default {
   },
 
   props: {
-    resources: {
-      type:     Array,
-      required: true
+    onAdd: {
+      type:    Function,
+      default: () => {}
     }
   },
 
@@ -19,12 +19,6 @@ export default {
     return { bindings: [] };
   },
 
-  computed: {
-    onAdd() {
-      return this.resources[0];
-    },
-  },
-
   methods: {
     close() {
       this.$emit('close');
@@ -39,33 +33,33 @@ 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"
-      v-html="t('addClusterMemberDialog.title')"
+    <h4
+      slot="title"
+      class="text-default-text"
+      v-html="t('addClusterMemberDialog.title')"
     />
 
-    <div
-      slot="body"
-      class="pl-10 pr-10"
+    <div
+      slot="body"
+      class="pl-10 pr-10"
     >
-      <ClusterPermissionsEditor
-        v-model="bindings"
-        :use-two-columns-for-custom="true"
+      <ClusterPermissionsEditor
+        v-model="bindings"
+        :use-two-columns-for-custom="true"
       />
     </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/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');