@rancher/shell 0.2.5 → 0.3.1

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();
@@ -97,10 +98,14 @@ export default {
       fetchOne.clusterToken = this.value.getOrCreateToken();
     }
 
+    // Need to get Norman clusters so that we can check if user has permissions to access the local cluster
+    if ( this.$store.getters['rancher/canList'](NORMAN.CLUSTER) ) {
+      fetchOne.normanClusters = this.$store.dispatch('rancher/findAll', { type: NORMAN.CLUSTER });
+    }
+
     if ( this.value.isRke1 && this.$store.getters['isRancher'] ) {
       fetchOne.etcdBackups = this.$store.dispatch('rancher/findAll', { type: NORMAN.ETCD_BACKUP });
 
-      fetchOne.normanClusters = this.$store.dispatch('rancher/findAll', { type: NORMAN.CLUSTER });
       fetchOne.normanNodePools = this.$store.dispatch('rancher/findAll', { type: NORMAN.NODE_POOL });
     }
 
@@ -113,6 +118,11 @@ export default {
     this.clusterToken = fetchOneRes.clusterToken;
     this.etcdBackups = fetchOneRes.etcdBackups;
 
+    if (fetchOneRes.normanClusters) {
+      // Does the user have access to the local cluster? Need to in order to be able to show the 'Related Resources' tab
+      this.hasLocalAccess = !!fetchOneRes.normanClusters.find(c => c.internal);
+    }
+
     const fetchTwo = {};
 
     const thisClusterMachines = this.allMachineDeployments.filter((deployment) => {
@@ -183,6 +193,7 @@ export default {
       haveDeployments: false,
       haveNodes:       false,
       haveNodePools:   false,
+      hasLocalAccess:  false,
 
       mgmtNodeSchema: this.$store.getters[`management/schemaFor`](MANAGEMENT.NODE),
       machineSchema:  this.$store.getters[`management/schemaFor`](CAPI.MACHINE),
@@ -243,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;
@@ -346,7 +359,7 @@ export default {
           formatterOpts: { reference: 'kubeNodeDetailLocation' },
           dashIfEmpty:   true,
         },
-        IP_ADDRESS,
+        INTERNAL_EXTERNAL_IP,
         MACHINE_NODE_OS,
         ROLES,
         AGE,
@@ -365,7 +378,7 @@ export default {
           formatterOpts: { reference: 'kubeNodeDetailLocation' },
           dashIfEmpty:   true,
         },
-        IP_ADDRESS,
+        INTERNAL_EXTERNAL_IP,
         MANAGEMENT_NODE_OS,
         ROLES,
         AGE
@@ -490,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();
@@ -615,6 +646,7 @@ export default {
     <ResourceTabs
       v-model="value"
       :default-tab="defaultTab"
+      :need-related="hasLocalAccess"
     >
       <Tab
         v-if="showMachines"
@@ -668,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>
@@ -761,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/secret.vue

@@ -26,7 +26,7 @@ export default {
 
   mixins: [CreateEditView],
 
-  props:      {
+  props: {
     value: {
       type:    Object,
       default: () => {
@@ -103,7 +103,7 @@ export default {
     };
   },
 
-  computed:   {
+  computed: {
     isCertificate() {
       return this.value._type === TYPES.TLS;
     },

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

@@ -105,7 +105,7 @@ export default {
     };
   },
 
-  computed:   {
+  computed: {
     ...mapGetters(['currentCluster']),
 
     isActive() {
@@ -373,7 +373,6 @@ export default {
     </div>
     <ResourceTabs
       :value="value"
-      :always-show-events="true"
     >
       <Tab
         v-if="isCronJob"

package/dialog/AddClusterMemberDialog.vue

@@ -8,10 +8,10 @@ export default {
     ClusterPermissionsEditor
   },
 
-  props:      {
-    resources: {
-      type:     Array,
-      required: true
+  props: {
+    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/AddCustomBadgeDialog.vue

@@ -66,10 +66,10 @@ export default {
         isLocal:         this.currentCluster.isLocal,
         providerNavLogo: this.currentCluster.providerNavLogo,
         badge:           {
-          text:        this.badgeDescription,
-          color:       this.badgeBgColor,
-          textColor:   textColor(parseColor(this.badgeBgColor)),
-          iconText:    this.badgeAsIcon ? this.letter.toUpperCase() : '',
+          text:      this.badgeDescription,
+          color:     this.badgeBgColor,
+          textColor: textColor(parseColor(this.badgeBgColor)),
+          iconText:  this.badgeAsIcon ? this.letter.toUpperCase() : '',
         }
       };
     },

package/dialog/AddProjectMemberDialog.vue

@@ -1,38 +1,53 @@
 <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:      {
+  props: {
     resources: {
       type:     Array,
       required: true
+    },
+
+    onAdd: {
+      type:    Function,
+      default: () => {}
+    },
+
+    projectId: {
+      type:    String,
+      default: null
+    },
+
+    saveInModal: {
+      type:    Boolean,
+      default: false
     }
   },
 
   data() {
     return {
-      member:       {
+      member: {
         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,49 +81,78 @@ 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);
+        });
     }
   }
 };
 </script>
 
 <template>
-  <Card
-    class="prompt-rotate"
-    :show-highlight-border="false"
-    :sticky="true"
+  <Card
+    class="prompt-rotate"
+    :show-highlight-border="false"
+    :sticky="true"
   >
-    <h4
-      slot="title"
-      class="text-default-text"
-      v-html="t('addProjectMemberDialog.title')"
+    <h4
+      slot="title"
+      class="text-default-text"
+      v-html="t('addProjectMemberDialog.title')"
     />
 
-    <div
-      slot="body"
-      class="pl-10 pr-10"
+    <div
+      slot="body"
+      class="pl-10 pr-10"
     >
-      <ProjectMemberEditor
-        v-model="member"
-        :use-two-columns-for-custom="true"
+      <Banner
+        v-if="error"
+        color="error"
+      >
+        {{ error }}
+      </Banner>
+      <ProjectMemberEditor
+        v-model="member"
+        :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>
 
+      <AsyncButton
+        v-if="saveInModal"
+        mode="create"
+        @click="cb=>saveBindings(cb)"
+      />
+
       <button
+        v-else
         class="btn role-primary"
         @click="apply"
       >
@@ -127,3 +171,10 @@ export default {
     width: 100%;
   }
 </style>
+
+<style lang="scss">
+  .card-container {
+    border: 1px solid var(--border);
+    box-shadow: none;
+  }
+</style>

package/dialog/AddonConfigConfirmationDialog.vue

@@ -7,7 +7,7 @@ export default {
     Card,
     AsyncButton,
   },
-  props:      {
+  props: {
     resources: {
       type:     Array,
       required: true

package/dialog/DiagnosticTimingsDialog.vue

@@ -12,9 +12,13 @@ export default {
     Banner,
   },
 
-  props:      {
-    resources: {
-      type:     Array,
+  props: {
+    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>