@rancher/shell 0.1.1 → 0.1.2

package/components/form/ResourceTabs/index.vue

@@ -66,22 +66,21 @@ export default {
     }
   },
 
-  async fetch() {
+  data() {
     const inStore = this.$store.getters['currentStore'](EVENT);
 
-    if ( this.$store.getters[`${ inStore }/schemaFor`](EVENT) ) {
-      this.hasEvents = true; // @TODO be smarter about which ones actually ever have events
-      this.allEvents = await this.$store.dispatch(`${ inStore }/findAll`, { type: EVENT });
-    }
-  },
-
-  data() {
     return {
-      hasEvents: null,
-      allEvents: []
+      hasEvents:     this.$store.getters[`${ inStore }/schemaFor`](EVENT), // @TODO be smarter about which resources actually ever have events
+      allEvents:     [],
+      selectedTab:   this.defaultTab,
+      didLoadEvents: false,
     };
   },
 
+  beforeDestroy() {
+    this.$store.dispatch('cluster/forgetType', EVENT);
+  },
+
   computed: {
     showConditions() {
       const inStore = this.$store.getters['currentStore'](this.value.type);
@@ -89,10 +88,10 @@ export default {
       return this.isView && this.needConditions && this.value?.type && this.$store.getters[`${ inStore }/pathExistsInSchema`](this.value.type, 'status.conditions');
     },
     showEvents() {
-      return this.isView && this.needEvents && !this.$fetchState.pending && this.hasEvents && (this.events.length || this.alwaysShowEvents);
+      return this.isView && this.needEvents && this.hasEvents && (this.events.length || this.alwaysShowEvents);
     },
     showRelated() {
-      return this.isView && this.needRelated && !this.$fetchState.pending;
+      return this.isView && this.needRelated;
     },
     eventHeaders() {
       return [
@@ -146,17 +145,26 @@ export default {
     }
   },
 
-  mounted() {
-    // For easy access debugging...
-    if ( typeof window !== 'undefined' ) {
-      window.v = this.value;
+  methods: {
+    // Ensures we only fetch events and show the table when the events tab has been activated
+    tabChange(neu) {
+      this.selectedTab = neu?.selectedName;
+
+      if (!this.didLoadEvents && this.selectedTab === 'events') {
+        const inStore = this.$store.getters['currentStore'](EVENT);
+
+        this.$store.dispatch(`${ inStore }/findAll`, { type: EVENT }).then((events) => {
+          this.allEvents = events;
+          this.didLoadEvents = true;
+        });
+      }
     }
-  },
+  }
 };
 </script>
 
 <template>
-  <Tabbed v-bind="$attrs" :default-tab="defaultTab">
+  <Tabbed v-bind="$attrs" :default-tab="defaultTab" @changed="tabChange">
     <slot />
 
     <Tab v-if="showConditions" label-key="resourceTabs.conditions.tab" name="conditions" :weight="-1" :display-alert-icon="conditionsHaveIssues">
@@ -165,6 +173,7 @@ export default {
 
     <Tab v-if="showEvents" label-key="resourceTabs.events.tab" name="events" :weight="-2">
       <SortableTable
+        v-if="selectedTab === 'events'"
         :rows="events"
         :headers="eventHeaders"
         key-field="id"

package/components/formatter/ClusterLink.vue

@@ -63,6 +63,11 @@ export default {
       {{ value }}
     </n-link>
     <span v-else>{{ value }}</span>
+    <i
+      v-if="row.rkeTemplateUpgrade"
+      v-tooltip="t('cluster.rkeTemplateUpgrade', { name: row.rkeTemplateUpgrade })"
+      class="template-upgrade-icon icon-alert icon"
+    />
     <i
       v-if="clusterHasIssues"
       v-tooltip="{ content: `<div>${formattedConditions}</div>`, html: true }"
@@ -93,4 +98,12 @@ export default {
   .mytooltip ul {
     outline: 1px dashed red;
   }
+  .template-upgrade-icon {
+    border: 1px solid var(--warning);
+    border-radius: 50%;
+    color: var(--warning);
+    margin-left: 4px;
+    font-size: 14px;
+    padding: 2px;
+  }
 </style>

package/components/formatter/PodImages.vue

@@ -1,6 +1,10 @@
 <script>
 import { mapGetters } from 'vuex';
 
+// For the main image hat we show, use these to ignore istio proxy images so that
+// we are more likely to show the important main iamge and not the istio sidecar
+const IGNORE_IMAGES = ['istio/proxy', 'gcr.io/istio-release/proxy', 'mirrored-istio-proxy'];
+
 export default {
   props: {
     value: {
@@ -38,6 +42,12 @@ export default {
       }
 
       return null;
+    },
+    mainImage() {
+      const images = this.images;
+      const filter = images.filter(image => !IGNORE_IMAGES.find(i => image.includes(i)));
+
+      return filter.length > 0 ? filter[0] : images[0];
     }
   }
 
@@ -46,7 +56,7 @@ export default {
 
 <template>
   <span>
-    <span>{{ images[0] }}</span><br>
+    <span>{{ mainImage }}</span><br>
     <span
       v-if="images.length-1>0"
       v-tooltip.bottom="imageLabels"

package/components/formatter/RKETemplateName.vue

@@ -0,0 +1,37 @@
+<script>
+export default {
+  props: {
+    value: {
+      type:     Object,
+      required: true
+    },
+  }
+};
+</script>
+
+<template>
+  <div class="rke-template">
+    <span>{{ value.displayName }}</span>
+    <i
+      v-if="value.upgrade"
+      v-tooltip="t('cluster.rkeTemplateUpgrade', { name: value.upgrade })"
+      class="template-upgrade-icon icon-alert icon"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .rke-template {
+    align-items: center;
+    display: inline-flex;
+
+    .template-upgrade-icon {
+      border: 1px solid var(--warning);
+      border-radius: 50%;
+      color: var(--warning);
+      margin-left: 4px;
+      font-size: 14px;
+      padding: 2px;
+    }
+  }
+</style>

package/config/types.js

@@ -169,7 +169,9 @@ export const MANAGEMENT = {
   POD_SECURITY_POLICY_TEMPLATE:  'management.cattle.io.podsecuritypolicytemplate',
   MANAGED_CHART:                 'management.cattle.io.managedchart',
   USER_NOTIFICATION:             'management.cattle.io.rancherusernotification',
-  GLOBAL_DNS_PROVIDER:           'management.cattle.io.globaldnsprovider'
+  GLOBAL_DNS_PROVIDER:           'management.cattle.io.globaldnsprovider',
+  RKE_TEMPLATE:                  'management.cattle.io.clustertemplate',
+  RKE_TEMPLATE_REVISION:         'management.cattle.io.clustertemplaterevision',
 };
 
 export const CAPI = {

package/creators/app/tsconfig.json

@@ -25,10 +25,15 @@
         "./node_modules/@rancher/shell/*"
       ]
     },
+    "typeRoots": [
+      "./node_modules",
+      "./node_modules/@rancher/shell/types"
+    ],    
     "types": [
       "@types/node",
       "@nuxt/types",
-      "cypress"
+      "cypress",
+      "rancher"
     ]
   },
   "exclude": [

package/creators/pkg/init

@@ -137,6 +137,9 @@ if (!isNodeModulesShell) {
     tsconfig.compilerOptions.paths[p] = updateArray(tsconfig.compilerOptions.paths[p]);
   });
 
+  // Update typeRoots
+  tsconfig.compilerOptions.typeRoots = updateArray(tsconfig.compilerOptions.typeRoots);
+
   fs.writeFileSync(path.join(pkgFolder, 'tsconfig.json'), JSON.stringify(tsconfig, null, 2));
   console.log('  Updated tsconfig.json for shell folder location');
 }

package/creators/pkg/tsconfig.json

@@ -13,9 +13,15 @@
     "sourceMap": true,
     "baseUrl": ".",
     "preserveSymlinks": true,
+    "typeRoots": [
+      "../../node_modules",
+      "../../node_modules/@rancher/shell/types"
+    ],
     "types": [
       "node",
-      "webpack-env"
+      "webpack-env",
+      "@nuxt/types",
+      "rancher"
     ],
     "lib": [
       "esnext",
@@ -39,7 +45,6 @@
     "**/*.ts",
     "**/*.tsx",
     "**/*.vue",
-    "../../node_modules/@rancher/shell/types/*.d.ts",
     "../../node_modules/@rancher/shell/core/types.ts"
   ],
   "exclude": [

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

@@ -146,6 +146,16 @@ export default {
     this.allNodePools = fetchTwoRes.allNodePools || [];
     this.haveNodePools = !!fetchTwoRes.allNodePools;
     this.machineTemplates = fetchTwoRes.mdtt || [];
+
+    // Fetch RKE template revisions so we can show when an updated template is available
+    // This request does not need to be blocking
+    if ( this.$store.getters['management/canList'](MANAGEMENT.RKE_TEMPLATE) ) {
+      this.$store.dispatch('management/findAll', { type: MANAGEMENT.RKE_TEMPLATE });
+    }
+
+    if ( this.$store.getters['management/canList'](MANAGEMENT.RKE_TEMPLATE_REVISION) ) {
+      this.$store.dispatch('management/findAll', { type: MANAGEMENT.RKE_TEMPLATE_REVISION });
+    }
   },
 
   created() {

package/edit/cloudcredential.vue

@@ -260,7 +260,13 @@ export default {
       @select-type="selectType"
       @error="e=>errors = e"
     >
-      <NameNsDescription v-model="value" name-key="_name" :mode="mode" :namespaced="false" />
+      <NameNsDescription
+        v-model="value"
+        name-key="_name"
+        description-key="description"
+        :mode="mode"
+        :namespaced="false"
+      />
       <keep-alive>
         <component
           :is="cloudComponent"

package/edit/networking.k8s.io.ingress/index.vue

@@ -44,10 +44,11 @@ export default {
     }
   },
   async fetch() {
+    const ingressClassSchema = this.$store.getters[`cluster/schemaFor`](INGRESS_CLASS);
     const hash = await allHash({
       secrets:        this.$store.dispatch('cluster/findAll', { type: SECRET }),
       services:       this.$store.dispatch('cluster/findAll', { type: SERVICE }),
-      ingressClasses: this.$store.dispatch('cluster/findAll', { type: INGRESS_CLASS }),
+      ingressClasses: ingressClassSchema ? this.$store.dispatch('cluster/findAll', { type: INGRESS_CLASS }) : Promise.resolve([]),
     });
 
     this.allServices = hash.services;

package/edit/persistentvolumeclaim.vue

@@ -5,6 +5,7 @@ import CruResource from '@shell/components/CruResource';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
 import Tab from '@shell/components/Tabbed/Tab';
 import { RadioGroup } from '@components/Form/Radio';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import UnitInput from '@shell/components/form/UnitInput';
 import uniq from 'lodash/uniq';
@@ -24,6 +25,7 @@ export default {
     Banner,
     Checkbox,
     CruResource,
+    LabeledInput,
     LabeledSelect,
     Labels,
     NameNsDescription,
@@ -38,7 +40,9 @@ export default {
   async fetch() {
     const storageClasses = await this.$store.dispatch('cluster/findAll', { type: STORAGE_CLASS });
 
-    this.persistentVolumes = await this.$store.dispatch('cluster/findAll', { type: PV });
+    if (this.$store.getters['management/canList'](PV)) {
+      this.persistentVolumes = await this.$store.dispatch('cluster/findAll', { type: PV });
+    }
 
     this.storageClassOptions = storageClasses.map(s => s.name).sort();
     this.storageClassOptions.unshift(this.t('persistentVolumeClaim.useDefault'));
@@ -55,6 +59,8 @@ export default {
     this.$set(this.value.spec, 'storageClassName', this.value.spec.storageClassName || this.storageClassOptions[0]);
   },
   data() {
+    const canListPersistentVolumes = this.$store.getters['management/canList'](PV);
+    const canListStorageClasses = this.$store.getters['management/canList'](STORAGE_CLASS);
     const sourceOptions = [
       {
         label: this.t('persistentVolumeClaim.source.options.new'),
@@ -65,6 +71,7 @@ export default {
         value: 'existing'
       }
     ];
+
     const defaultAccessModes = ['ReadWriteOnce'];
 
     this.$set(this.value, 'spec', this.value.spec || {});
@@ -85,6 +92,8 @@ export default {
       persistentVolumes:       [],
       storageClassOptions:     [],
       defaultTab,
+      canListPersistentVolumes,
+      canListStorageClasses,
     };
   },
   computed: {
@@ -216,16 +225,37 @@ export default {
           <div class="col span-6">
             <div class="row">
               <div v-if="source === 'new'" class="col span-12">
-                <LabeledSelect v-model="value.spec.storageClassName" :options="storageClassOptions" :label="t('persistentVolumeClaim.volumeClaim.storageClass')" :mode="immutableMode" />
+                <LabeledSelect
+                  v-if="canListStorageClasses"
+                  v-model="value.spec.storageClassName"
+                  :options="storageClassOptions"
+                  :label="t('persistentVolumeClaim.volumeClaim.storageClass')"
+                  :mode="immutableMode"
+                />
+                <LabeledInput
+                  v-else
+                  v-model="value.spec.storageClassName"
+                  :label="t('persistentVolumeClaim.volumeClaim.storageClass')"
+                  :mode="immutableMode"
+                  :tooltip="t('persistentVolumeClaim.volumeClaim.tooltips.noStorageClass')"
+                />
               </div>
               <div v-else class="col span-12">
                 <LabeledSelect
+                  v-if="canListPersistentVolumes"
                   v-model="persistentVolume"
                   :options="persistentVolumeOptions"
                   :label="t('persistentVolumeClaim.volumeClaim.persistentVolume')"
                   :selectable="isPersistentVolumeSelectable"
                   :mode="immutableMode"
                 />
+                <LabeledInput
+                  v-else
+                  v-model="persistentVolume"
+                  :label="t('persistentVolumeClaim.volumeClaim.persistentVolume')"
+                  :mode="immutableMode"
+                  :tooltip="t('persistentVolumeClaim.volumeClaim.tooltips.noPersistentVolume')"
+                />
               </div>
             </div>
             <div class="row">

package/edit/provisioning.cattle.io.cluster/MachinePool.vue

@@ -210,7 +210,7 @@ export default {
             :mode="mode"
             :output-modifier="true"
             :base-unit="t('cluster.machinePool.autoReplace.unit')"
-            @input="value.pool.unhealthyNodeTimeout = `${unhealthyNodeTimeoutInteger}m`"
+            @input="value.pool.unhealthyNodeTimeout = `${unhealthyNodeTimeoutInteger}s`"
           />
         </div>
         <div class="col span-4">

package/edit/provisioning.cattle.io.cluster/index.vue

@@ -4,7 +4,7 @@ import Loading from '@shell/components/Loading';
 import CruResource from '@shell/components/CruResource';
 import SelectIconGrid from '@shell/components/SelectIconGrid';
 import EmberPage from '@shell/components/EmberPage';
-import ToggleSwitch from '@shell/components/form/ToggleSwitch';
+import { ToggleSwitch } from '@components/Form/ToggleSwitch';
 import {
   CHART, FROM_CLUSTER, SUB_TYPE, _EDIT, _IMPORT, _CONFIG, _VIEW
 } from '@shell/config/query-params';

package/edit/provisioning.cattle.io.cluster/rke2.vue

@@ -249,10 +249,6 @@ export default {
       set(this.value.spec, 'defaultPodSecurityPolicyTemplateName', '');
     }
 
-    if (this.isHarvesterDriver && this.mode === _CREATE && this.agentConfig['cloud-provider-name'] === undefined) {
-      this.agentConfig['cloud-provider-name'] = HARVESTER;
-    }
-
     await this.initAddons();
     await this.initRegistry();
 
@@ -501,11 +497,17 @@ export default {
         // If we have a preferred provider... only show default, preferred and external
         const isPreferred = opt === preferred;
         const isExternal = opt === 'external';
+        let disabled = false;
+
+        if (this.isHarvesterExternalCredential && isPreferred) {
+          disabled = true;
+        }
 
         if (showAllOptions || isPreferred || isExternal) {
           out.push({
             label: this.$store.getters['i18n/withFallback'](`cluster.cloudProvider."${ opt }".label`, null, opt),
             value: opt,
+            disabled,
           });
         }
       }
@@ -843,7 +845,11 @@ export default {
 
     showForm() {
       return !!this.credentialId || !this.needCredential;
-    }
+    },
+
+    isHarvesterExternalCredential() {
+      return this.credential?.harvestercredentialConfig?.clusterType === 'external';
+    },
   },
 
   watch: {
@@ -861,6 +867,7 @@ export default {
     credentialId(val) {
       if ( val ) {
         this.credential = this.$store.getters['rancher/byId'](NORMAN.CLOUD_CREDENTIAL, this.credentialId);
+        this.setHarvesterDefaultCloudProvider();
       } else {
         this.credential = null;
       }
@@ -1552,7 +1559,15 @@ export default {
         }
       });
     },
-    get
+    get,
+
+    setHarvesterDefaultCloudProvider() {
+      if (this.isHarvesterDriver && this.mode === _CREATE && this.agentConfig['cloud-provider-name'] === undefined && !this.isHarvesterExternalCredential) {
+        this.agentConfig['cloud-provider-name'] = HARVESTER;
+      } else {
+        this.agentConfig['cloud-provider-name'] = '';
+      }
+    },
   },
 };
 </script>

package/edit/workload/types/Deployment.vue

@@ -249,7 +249,7 @@ export default {
                       <LabeledInput v-model.number="podTemplateSpec.priority" :mode="mode" :label="t('workload.scheduling.priority.priority')" />
                     </div>
                     <div class="col span-6">
-                      <LabeledInput v-model="podTemplateSpec.priorityClassname" :mode="mode" :label="t('workload.scheduling.priority.className')" />
+                      <LabeledInput v-model="podTemplateSpec.priorityClassName" :mode="mode" :label="t('workload.scheduling.priority.className')" />
                     </div>
                   </div>
                 </div>

package/edit/workload/types/Generic.vue

@@ -196,7 +196,7 @@ export default {
                   <LabeledInput v-model.number="podTemplateSpec.priority" :mode="mode" :label="t('workload.scheduling.priority.priority')" />
                 </div>
                 <div class="col span-6">
-                  <LabeledInput v-model="podTemplateSpec.priorityClassname" :mode="mode" :label="t('workload.scheduling.priority.className')" />
+                  <LabeledInput v-model="podTemplateSpec.priorityClassName" :mode="mode" :label="t('workload.scheduling.priority.className')" />
                 </div>
               </div>
             </div>

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

@@ -41,6 +41,12 @@ export default {
       hash.machineDeployments = this.$store.dispatch('management/findAll', { type: CAPI.MACHINE_DEPLOYMENT });
     }
 
+    // Fetch RKE template revisions so we can show when an updated template is available
+    // This request does not need to be blocking
+    if ( this.$store.getters['management/canList'](MANAGEMENT.RKE_TEMPLATE_REVISION) ) {
+      this.$store.dispatch('management/findAll', { type: MANAGEMENT.RKE_TEMPLATE_REVISION });
+    }
+
     const res = await allHash(hash);
 
     this.mgmtClusters = res.mgmtClusters;

package/mixins/brand.js

@@ -12,16 +12,15 @@ export default {
         this.apps = await this.$store.dispatch('management/findAll', { type: CATALOG.APP });
       }
     } catch (e) {}
+
+    this.globalSettings = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.SETTING });
   },
 
   data() {
-    return { apps: [] };
+    return { apps: [], globalSettings: [] };
   },
 
   computed: {
-    globalSettings() {
-      return this.$store.getters['management/all'](MANAGEMENT.SETTING);
-    },
 
     brand() {
       const setting = findBy(this.globalSettings, 'id', SETTING.BRAND);

package/mixins/create-edit-view/impl.js

@@ -12,14 +12,6 @@ export default {
 
   mixins: [ChildHook],
 
-  mounted() {
-    // For easy access debugging...
-    if ( typeof window !== 'undefined' ) {
-      window.v = this.value;
-      window.c = this;
-    }
-  },
-
   data() {
     // Keep label and annotation filters in data so each resource CRUD page can alter individually
     return { errors: [] };

package/models/chart.js

@@ -10,7 +10,7 @@ export default class Chart extends SteveModel {
     let version;
     const chartVersions = this.versions;
     const currentCluster = this.$rootGetters['currentCluster'];
-    const workerOSs = currentCluster.workerOSs;
+    const workerOSs = currentCluster?.workerOSs;
     const compatibleVersions = compatibleVersionsFor(this, workerOSs);
 
     if (compatibleVersions.length) {

package/models/cluster/node.js

@@ -7,6 +7,7 @@ import { parseSi } from '@shell/utils/units';
 import findLast from 'lodash/findLast';
 
 import SteveModel from '@shell/plugins/steve/steve-class';
+import { LOCAL } from '@shell/config/query-params';
 
 export default class ClusterNode extends SteveModel {
   get _availableActions() {
@@ -254,10 +255,20 @@ export default class ClusterNode extends SteveModel {
     }));
   }
 
+  /**
+   *Find the node's cluster id from it's url
+   */
   get clusterId() {
     const parts = this.links.self.split('/');
 
-    return parts[parts.length - 4];
+    // Local cluster url links omit `/k8s/clusters/<cluster id>`
+    // `/v1/nodes` vs `k8s/clusters/c-m-274kcrc4/v1/nodes`
+    // Be safe when determining this, so work back through the url from a known point
+    if (parts.length > 6 && parts[parts.length - 6] === 'k8s' && parts[parts.length - 5] === 'clusters') {
+      return parts[parts.length - 4];
+    }
+
+    return LOCAL;
   }
 
   get normanNodeId() {

package/models/management.cattle.io.globalrole.js

@@ -14,25 +14,6 @@ const SPECIAL = [BASE, ADMIN, USER];
 const GLOBAL = SUBTYPE_MAPPING.GLOBAL.key;
 
 export default class GlobalRole extends SteveModel {
-  get availableActions() {
-    const out = super._availableActions;
-
-    const toFilter = ['goToEdit', 'promptRemove'];
-    const editActions = out.filter((a) => {
-      if ( toFilter.includes(a.action) ) {
-        return a;
-      }
-    });
-
-    if ( editActions.length > 0 ) {
-      editActions.forEach((a) => {
-        a.enabled = !this.builtin;
-      });
-    }
-
-    return out;
-  }
-
   get customValidationRules() {
     return Role.customValidationRules();
   }

package/models/management.cattle.io.roletemplate.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import { get } from '@shell/utils/object';
 import { DESCRIPTION } from '@shell/config/labels-annotations';
 import { NORMAN } from '@shell/config/types';
-import SteveModel from '@shell/plugins/steve/steve-class';
+import SteveDescriptionModel from '@shell/plugins/steve/steve-description-class';
 import Role from './rbac.authorization.k8s.io.role';
 
 export const CATTLE_API_GROUP = '.cattle.io';
@@ -55,26 +55,7 @@ export const VERBS = [
   'watch',
 ];
 
-export default class RoleTemplate extends SteveModel {
-  get availableActions() {
-    const out = super._availableActions;
-
-    const toFilter = ['goToEdit', 'promptRemove'];
-    const editActions = out.filter((a) => {
-      if ( toFilter.includes(a.action) ) {
-        return a;
-      }
-    });
-
-    if ( editActions.length > 0 ) {
-      editActions.forEach((a) => {
-        a.enabled = !this.builtin;
-      });
-    }
-
-    return out;
-  }
-
+export default class RoleTemplate extends SteveDescriptionModel {
   get customValidationRules() {
     return Role.customValidationRules();
   }