@rancher/shell 0.2.5 → 0.3.1

package/pages/c/_cluster/apps/charts/index.vue

@@ -34,7 +34,7 @@ export default {
   },
 
   async fetch() {
-    await this.$store.dispatch('catalog/load');
+    await this.$store.dispatch('catalog/load', { force: true, reset: true });
 
     const query = this.$route.query;
 
@@ -47,17 +47,16 @@ export default {
 
   data() {
     return {
-      allRepos:            null,
-      category:            null,
-      operatingSystem:     null,
-      searchQuery:         null,
-      showDeprecated:      null,
-      showHidden:          null,
-      chartMode:           this.$store.getters['prefs/get'](SHOW_CHART_MODE),
+      allRepos:        null,
+      category:        null,
+      operatingSystem: null,
+      searchQuery:     null,
+      showDeprecated:  null,
+      showHidden:      null,
       chartOptions:    [
         {
-          label:       'Browse',
-          value:       'browse',
+          label: 'Browse',
+          value: 'browse',
         },
         {
           label: 'Featured',
@@ -71,6 +70,8 @@ export default {
     ...mapGetters(['currentCluster']),
     ...mapGetters({ allCharts: 'catalog/charts', loadingErrors: 'catalog/errors' }),
 
+    chartMode: mapPref(SHOW_CHART_MODE),
+
     hideRepos: mapPref(HIDE_REPOS),
 
     repoOptions() {
@@ -164,13 +165,13 @@ export default {
 
       return filterAndArrangeCharts(enabledCharts, {
         clusterProvider,
-        category:         this.category,
-        searchQuery:      this.searchQuery,
-        showDeprecated:   this.showDeprecated,
-        showHidden:       this.showHidden,
-        hideRepos:        this.hideRepos,
-        hideTypes:        [CATALOG._CLUSTER_TPL],
-        showPrerelease:   this.$store.getters['prefs/get'](SHOW_PRE_RELEASE),
+        category:       this.category,
+        searchQuery:    this.searchQuery,
+        showDeprecated: this.showDeprecated,
+        showHidden:     this.showHidden,
+        hideRepos:      this.hideRepos,
+        hideTypes:      [CATALOG._CLUSTER_TPL],
+        showPrerelease: this.$store.getters['prefs/get'](SHOW_PRE_RELEASE),
       });
     },
 
@@ -304,8 +305,8 @@ export default {
       this.$router.push({
         name:   'c-cluster-apps-charts-chart',
         params: {
-          cluster:  this.$route.params.cluster,
-          product:  this.$store.getters['productId'],
+          cluster: this.$route.params.cluster,
+          product: this.$store.getters['productId'],
         },
         query: {
           [REPO_TYPE]: chart.repoType,
@@ -339,7 +340,7 @@ export default {
 <template>
   <Loading v-if="$fetchState.pending" />
   <div v-else>
-    <header class="header-layout">
+    <header>
       <div class="title">
         <h1 class="m-0">
           {{ t('catalog.charts.header') }}

package/pages/c/_cluster/apps/charts/install.vue

@@ -95,9 +95,12 @@ export default {
     this.errors = [];
 
     // If the chart doesn't contain system `systemDefaultRegistry` properties there's no point applying them
-    this.clusterRegistry = await this.getClusterRegistry();
-    this.globalRegistry = await this.getGlobalRegistry();
-    this.defaultRegistrySetting = this.clusterRegistry || this.globalRegistry;
+    if (this.showCustomRegistry) {
+      // Note: Cluster scoped registry is only supported for node driver clusters
+      this.clusterRegistry = await this.getClusterRegistry();
+      this.globalRegistry = await this.getGlobalRegistry();
+      this.defaultRegistrySetting = this.clusterRegistry || this.globalRegistry;
+    }
 
     this.serverUrlSetting = await this.$store.dispatch('management/find', {
       type: MANAGEMENT.SETTING,
@@ -282,13 +285,20 @@ export default {
       */
       this.chartValues = merge(merge({}, this.versionInfo?.values || {}), userValues);
 
-      const existingRegistry = this.chartValues?.global?.systemDefaultRegistry || this.chartValues?.global?.cattle?.systemDefaultRegistry;
+      if (this.showCustomRegistry) {
+        /**
+         * The input to configure the registry should never be
+         * shown for third-party charts, which don't have Rancher
+         * global values.
+         */
+        const existingRegistry = this.chartValues?.global?.systemDefaultRegistry || this.chartValues?.global?.cattle?.systemDefaultRegistry;
 
-      delete this.chartValues?.global?.systemDefaultRegistry;
-      delete this.chartValues?.global?.cattle?.systemDefaultRegistry;
+        delete this.chartValues?.global?.systemDefaultRegistry;
+        delete this.chartValues?.global?.cattle?.systemDefaultRegistry;
 
-      this.customRegistrySetting = existingRegistry || this.defaultRegistrySetting;
-      this.showCustomRegistryInput = !!this.customRegistrySetting;
+        this.customRegistrySetting = existingRegistry || this.defaultRegistrySetting;
+        this.showCustomRegistryInput = !!this.customRegistrySetting;
+      }
 
       /* Serializes an object as a YAML document */
       this.valuesYaml = saferDump(this.chartValues);
@@ -315,13 +325,13 @@ export default {
     /* Helm CLI options that are not persisted on the back end,
     but are used for the final install/upgrade operation. */
     const defaultCmdOpts = {
-      cleanupOnFail:       false,
-      crds:                true,
-      hooks:               true,
-      force:               false,
-      resetValues:         false,
-      openApi:             true,
-      wait:                true,
+      cleanupOnFail: false,
+      crds:          true,
+      hooks:         true,
+      force:         false,
+      resetValues:   false,
+      openApi:       true,
+      wait:          true,
       timeout:       600,
       historyMax:    5,
     };
@@ -522,6 +532,10 @@ export default {
       return this.formYamlOption === VALUES_STATE.YAML || ( !this.valuesComponent && !this.hasQuestions );
     },
 
+    showingYamlDiff() {
+      return this.formYamlOption === VALUES_STATE.DIFF;
+    },
+
     formYamlOptions() {
       const options = [];
 
@@ -660,6 +674,22 @@ export default {
       return null;
     },
 
+    /**
+     * Check if the chart contains `systemDefaultRegistry` properties.
+     * If not we shouldn't apply the setting, because if the option
+     * is exposed for third-party Helm charts, it confuses users because
+     * it shows a private registry setting that is never used
+     * by the chart they are installing. If not hidden, the setting
+     * does nothing, and if the user changes it, it will look like
+     * there is a bug in the UI when it doesn't work, because UI is
+     * exposing a feature that the chart does not have.
+     */
+    showCustomRegistry() {
+      const global = this.versionInfo?.values?.global || {};
+
+      return global.systemDefaultRegistry !== undefined || global.cattle?.systemDefaultRegistry !== undefined;
+    },
+
   },
 
   watch: {
@@ -763,7 +793,7 @@ export default {
 
       if (hasPermissionToSeeProvCluster) {
         const mgmCluster = this.$store.getters['currentCluster'];
-        const provCluster = mgmCluster ? await this.$store.dispatch('management/find', {
+        const provCluster = mgmCluster?.provClusterId ? await this.$store.dispatch('management/find', {
           type: CAPI.RANCHER_CLUSTER,
           id:   mgmCluster.provClusterId
         }) : {};
@@ -856,13 +886,13 @@ export default {
       const withFallBack = this.$store.getters['i18n/withFallback'];
 
       return {
-        name:        customStep.name,
-        label:       withFallBack(loaded?.default?.label, null, customStep.name),
-        subtext:     withFallBack(loaded?.default?.subtext, null, ''),
-        weight:      loaded?.default?.weight,
-        ready:       false,
-        hidden:      true,
-        loading:    true,
+        name:      customStep.name,
+        label:     withFallBack(loaded?.default?.label, null, customStep.name),
+        subtext:   withFallBack(loaded?.default?.subtext, null, ''),
+        weight:    loaded?.default?.weight,
+        ready:     false,
+        hidden:    true,
+        loading:   true,
         component: customStep.component,
       };
     },
@@ -976,8 +1006,11 @@ export default {
 
       setIfNotSet(cattle, 'clusterId', cluster?.id);
       setIfNotSet(cattle, 'clusterName', cluster?.nameDisplay);
-      set(cattle, 'systemDefaultRegistry', this.customRegistrySetting);
-      set(global, 'systemDefaultRegistry', this.customRegistrySetting);
+
+      if (this.showCustomRegistry) {
+        set(cattle, 'systemDefaultRegistry', this.customRegistrySetting);
+        set(global, 'systemDefaultRegistry', this.customRegistrySetting);
+      }
 
       setIfNotSet(global, 'cattle.systemProjectId', systemProjectId);
       setIfNotSet(cattle, 'url', serverUrl);
@@ -1062,7 +1095,7 @@ export default {
 
       const errors = [];
 
-      if ( this.showingYaml ) {
+      if ( this.showingYaml || this.showingYamlDiff ) {
         const { errors: yamlErrors } = this.applyYamlToValues();
 
         errors.push(...yamlErrors);
@@ -1316,13 +1349,15 @@ export default {
             color="info"
             class="description"
           >
-            <span>{{ step1Description }}</span>
-            <span
-              v-if="namespaceNewAllowed"
-              class="mt-10"
-            >
-              {{ t('catalog.install.steps.basics.nsCreationDescription', {}, true) }}
-            </span>
+            <div>
+              <span>{{ step1Description }}</span>
+              <span
+                v-if="namespaceNewAllowed"
+                class="mt-10"
+              >
+                {{ t('catalog.install.steps.basics.nsCreationDescription', {}, true) }}
+              </span>
+            </div>
           </Banner>
           <div
             v-if="requires.length || warnings.length"
@@ -1417,6 +1452,7 @@ export default {
           />
 
           <Checkbox
+            v-if="showCustomRegistry"
             v-model="showCustomRegistryInput"
             class="mb-20"
             :label="t('catalog.chart.registry.custom.checkBoxLabel')"
@@ -1440,10 +1476,11 @@ export default {
 &nbsp;
           </div>
           <Banner
-            v-if="isNamespaceNew"
+            v-if="isNamespaceNew && value.metadata.namespace.length"
             color="info"
-            v-html="t('catalog.install.steps.basics.createNamespace', {namespace: value.metadata.namespace}, true) "
-          />
+          >
+            <div v-html="t('catalog.install.steps.basics.createNamespace', {namespace: value.metadata.namespace}, true) " />
+          </Banner>
         </div>
       </template>
       <template #clusterTplVersion>

package/pages/c/_cluster/auth/config/_id.vue

@@ -4,8 +4,8 @@ import { MANAGEMENT } from '@shell/config/types';
 import { authProvidersInfo } from '@shell/utils/auth';
 
 export default {
-  name:        'AuthConfigDetail',
-  components:  { ResourceDetail },
+  name:       'AuthConfigDetail',
+  components: { ResourceDetail },
   computed:   {
     AUTH_CONFIG() {
       return MANAGEMENT.AUTH_CONFIG;
@@ -19,6 +19,12 @@ export default {
       // Ensure we re-evaluate the redirect in case this auth provider has been disabled
       const authProvs = await authProvidersInfo(this.$store);
 
+      // Nuxt does not remove it's loading indicator - if we are not changing route, then hide it
+      // https://nuxtjs.org/docs/features/loading/
+      if (authProvs.enabledLocation) {
+        this.$nuxt.$loading.finish();
+      }
+
       next(!authProvs.enabledLocation);
     } else {
       next();

package/pages/c/_cluster/auth/config/index.vue

@@ -91,12 +91,14 @@ export default {
       :label="t('authConfig.noneEnabled')"
       color="info"
     >
-      {{ t('authConfig.localEnabled') }}
-      <nuxt-link :to="localUsersRoute">
-        {{ t('authConfig.manageLocal') }}
-      </nuxt-link>
-      <br>
-      {{ t('authConfig.noneEnabled') }}
+      <div>
+        {{ t('authConfig.localEnabled') }}
+        <nuxt-link :to="localUsersRoute">
+          {{ t('authConfig.manageLocal') }}
+        </nuxt-link>
+        <br>
+        {{ t('authConfig.noneEnabled') }}
+      </div>
     </Banner>
     <SelectIconGrid
       :rows="rows"

package/pages/c/_cluster/auth/group.principal/assign-edit.vue

@@ -78,7 +78,7 @@ export default {
   <div>
     <div>
       <div class="masthead">
-        <header class="header-layout">
+        <header>
           <div class="title">
             <h1 class="m-0">
               {{ t('authGroups.assignEdit.assignTitle') }}

package/pages/c/_cluster/auth/roles/_resource/_id.vue

@@ -2,8 +2,8 @@
 import ResourceDetail from '@shell/components/ResourceDetail';
 
 export default {
-  name:        'RolesResourcedId',
-  components:  { ResourceDetail },
+  name:       'RolesResourcedId',
+  components: { ResourceDetail },
 };
 </script>
 

package/pages/c/_cluster/auth/roles/index.vue

@@ -4,7 +4,7 @@ import Tabbed from '@shell/components/Tabbed';
 import { MANAGEMENT } from '@shell/config/types';
 import ResourceTable from '@shell/components/ResourceTable';
 import Loading from '@shell/components/Loading';
-import { SUBTYPE_MAPPING } from '@shell/models/management.cattle.io.roletemplate';
+import { SUBTYPE_MAPPING, CREATE_VERBS } from '@shell/models/management.cattle.io.roletemplate';
 import { NAME } from '@shell/config/product/auth';
 import { BLANK_CLUSTER } from '@shell/store';
 
@@ -27,8 +27,6 @@ const createRoleTemplate = {
   }
 };
 
-const createVerbs = new Set(['PUT', 'blocked-PUT']);
-
 export default {
   name: 'Roles',
 
@@ -57,7 +55,7 @@ export default {
       tabs: {
         [GLOBAL]: {
           canFetch:       globalRoleSchema?.collectionMethods.find(verb => verb === 'GET'),
-          canCreate:      globalRoleSchema?.resourceMethods.find(verb => createVerbs.has(verb)),
+          canCreate:      globalRoleSchema?.resourceMethods.find(verb => CREATE_VERBS.has(verb)),
           weight:         3,
           labelKey:       SUBTYPE_MAPPING.GLOBAL.labelKey,
           schema:         globalRoleSchema,
@@ -68,7 +66,7 @@ export default {
         },
         [CLUSTER]: {
           canFetch:       roleTemplatesSchema?.collectionMethods.find(verb => verb === 'GET'),
-          canCreate:      roleTemplatesSchema?.resourceMethods.find(verb => createVerbs.has(verb)),
+          canCreate:      roleTemplatesSchema?.resourceMethods.find(verb => CREATE_VERBS.has(verb)),
           labelKey:       SUBTYPE_MAPPING.CLUSTER.labelKey,
           weight:         2,
           schema:         roleTemplatesSchema,
@@ -80,7 +78,7 @@ export default {
         },
         [PROJECT]: {
           canFetch:       roleTemplatesSchema?.collectionMethods.find(verb => verb === 'GET'),
-          canCreate:      roleTemplatesSchema?.resourceMethods.find(verb => createVerbs.has(verb)),
+          canCreate:      roleTemplatesSchema?.resourceMethods.find(verb => CREATE_VERBS.has(verb)),
           labelKey:       SUBTYPE_MAPPING.NAMESPACE.labelKey,
           weight:         1,
           schema:         roleTemplatesSchema,
@@ -158,7 +156,7 @@ export default {
 <template>
   <Loading v-if="!globalRoles || !roleTemplates" />
   <div v-else>
-    <header class="header-layout">
+    <header>
       <div class="title">
         <h1 class="m-0">
           {{ t('rbac.roletemplate.label') }}

package/pages/c/_cluster/explorer/EventsTable.vue

@@ -30,14 +30,14 @@ export default {
         canBeVariable: true,
       },
       {
-        name:          'date',
-        label:         'Date',
-        labelKey:      'clusterIndexPage.sections.events.date.label',
-        value:         'timestamp',
-        sort:          'timestamp:desc',
-        formatter:     'Date',
-        width:         220,
-        defaultSort:   true,
+        name:        'date',
+        label:       'Date',
+        labelKey:    'clusterIndexPage.sections.events.date.label',
+        value:       'timestamp',
+        sort:        'timestamp:desc',
+        formatter:   'Date',
+        width:       220,
+        defaultSort: true,
       },
     ];
 

package/pages/c/_cluster/explorer/index.vue

@@ -112,12 +112,12 @@ export default {
 
     return {
       nodeHeaders,
-      constraints:                 [],
-      events:                      [],
-      nodeMetrics:                 [],
-      showClusterMetrics:          false,
-      showK8sMetrics:              false,
-      showEtcdMetrics:             false,
+      constraints:        [],
+      events:             [],
+      nodeMetrics:        [],
+      showClusterMetrics: false,
+      showK8sMetrics:     false,
+      showEtcdMetrics:    false,
       CLUSTER_METRICS_DETAIL_URL,
       CLUSTER_METRICS_SUMMARY_URL,
       K8S_METRICS_DETAIL_URL,
@@ -125,7 +125,7 @@ export default {
       ETCD_METRICS_DETAIL_URL,
       ETCD_METRICS_SUMMARY_URL,
       clusterCounts,
-      selectedTab:                 'cluster-events',
+      selectedTab:        'cluster-events',
     };
   },
 
@@ -213,8 +213,8 @@ export default {
 
       COMPONENT_STATUS.forEach((cs) => {
         status.push({
-          name:      cs,
-          healthy:   this.isComponentStatusHealthy(cs),
+          name:     cs,
+          healthy:  this.isComponentStatusHealthy(cs),
           labelKey: `clusterIndexPage.sections.componentStatus.${ cs }`,
         });
       });
@@ -224,11 +224,11 @@ export default {
 
     totalCountGaugeInput() {
       const totalInput = {
-        name:            this.t('clusterIndexPage.resourceGauge.totalResources'),
-        total:           0,
-        useful:          0,
-        warningCount:    0,
-        errorCount:      0
+        name:         this.t('clusterIndexPage.resourceGauge.totalResources'),
+        total:        0,
+        useful:       0,
+        warningCount: 0,
+        errorCount:   0
       };
 
       this.accessibleResources.forEach((resource) => {
@@ -247,9 +247,12 @@ export default {
     },
 
     cpuReserved() {
+      const total = parseSi(this.currentCluster?.status?.allocatable?.cpu);
+
       return {
-        total:  parseSi(this.currentCluster?.status?.allocatable?.cpu),
-        useful: parseSi(this.currentCluster?.status?.requested?.cpu)
+        total,
+        useful: parseSi(this.currentCluster?.status?.requested?.cpu),
+        units:  this.t('clusterIndexPage.hardwareResourceGauge.units.cores', { count: total })
       };
     },
 
@@ -308,9 +311,12 @@ export default {
     },
 
     cpuUsed() {
+      const total = parseSi(this.currentCluster?.status?.capacity?.cpu);
+
       return {
-        total:  parseSi(this.currentCluster?.status?.capacity?.cpu),
-        useful: this.metricAggregations?.cpu
+        total,
+        useful: this.metricAggregations?.cpu,
+        units:  this.t('clusterIndexPage.hardwareResourceGauge.units.cores', { count: total })
       };
     },
 
@@ -394,7 +400,7 @@ export default {
 
 <template>
   <section class="dashboard">
-    <header class="header-layout">
+    <header>
       <div class="title">
         <h1>
           <t k="clusterIndexPage.header" />
@@ -504,6 +510,7 @@ export default {
         :name="t('clusterIndexPage.hardwareResourceGauge.cores')"
         :reserved="cpuReserved"
         :used="cpuUsed"
+        :units="cpuReserved.units"
       />
       <HardwareResourceGauge
         :name="t('clusterIndexPage.hardwareResourceGauge.ram')"
@@ -712,7 +719,6 @@ export default {
 
   > I {
     text-align: center;
-    font-size: 20px;
     padding: 5px 10px;
     border-right: 1px solid var(--border);
   }

package/pages/c/_cluster/explorer/tools/index.vue

@@ -115,10 +115,10 @@ export default {
 
       let charts = filterAndArrangeCharts(enabledCharts, {
         clusterProvider,
-        showDeprecated:   this.showDeprecated,
-        showHidden:       this.showHidden,
-        showRepos:        [this.rancherCatalog?._key],
-        showTypes:        [CATALOG_ANNOTATIONS._CLUSTER_TOOL],
+        showDeprecated: this.showDeprecated,
+        showHidden:     this.showHidden,
+        showRepos:      [this.rancherCatalog?._key],
+        showTypes:      [CATALOG_ANNOTATIONS._CLUSTER_TOOL],
       });
 
       charts = charts.filter(c => c.sideLabel !== 'Experimental');

package/pages/c/_cluster/fleet/GitRepoGraphConfig.js

@@ -203,7 +203,7 @@ export const gitRepoGraphConfig = {
 
     const moreInfo = [
       {
-        labelKey:  'fleet.fdc.type',
+        labelKey: 'fleet.fdc.type',
         value:    dataType
       },
       {
@@ -230,7 +230,7 @@ export const gitRepoGraphConfig = {
     moreInfo.push({
       type:     'state-badge',
       labelKey: 'fleet.fdc.state',
-      valueObj:    {
+      valueObj: {
         stateColor: data.stateColor,
         stateLabel: data.stateLabel
       }

package/pages/c/_cluster/fleet/index.vue

@@ -51,18 +51,18 @@ export default {
           canBeVariable: true,
         },
         {
-          name:      'clustersReady',
-          labelKey:  'tableHeaders.clustersReady',
-          value:     'status.readyClusters',
-          sort:      'status.readyClusters',
-          search:    false,
+          name:     'clustersReady',
+          labelKey: 'tableHeaders.clustersReady',
+          value:    'status.readyClusters',
+          sort:     'status.readyClusters',
+          search:   false,
         },
         {
-          name:      'bundlesReady',
-          labelKey:  'tableHeaders.bundlesReady',
-          value:     'status.readyClusters',
-          sort:      'status.readyClusters',
-          search:    false,
+          name:     'bundlesReady',
+          labelKey: 'tableHeaders.bundlesReady',
+          value:    'status.readyClusters',
+          sort:     'status.readyClusters',
+          search:   false,
         },
         {
           name:     'resourcesReady',

package/pages/c/_cluster/gatekeeper/index.vue

@@ -18,7 +18,7 @@ export default {
           text: constraint.nameDisplay,
           to:   constraint.detailLocation
         },
-        templateLink:  {
+        templateLink: {
           text: constraint.kind,
           to:   {
             name:   'c-cluster-product-resource-id',

package/pages/c/_cluster/legacy/index.vue

@@ -8,7 +8,7 @@ export default {
       params: {
         ...route.params,
         cluster: 'local',
-        product:  NAME,
+        product: NAME,
         page:    'alerts'
       }
     });

package/pages/c/_cluster/longhorn/index.vue

@@ -27,7 +27,7 @@ export default {
         enabled:     true,
         iconSrc:     this.longhornImgSrc,
         label:       'longhorn.overview.linkedList.longhorn.label',
-        description:   'longhorn.overview.linkedList.longhorn.description',
+        description: 'longhorn.overview.linkedList.longhorn.description',
         link:        `/k8s/clusters/${ this.currentCluster.id }/api/v1/namespaces/longhorn-system/services/http:longhorn-frontend:80/proxy/`
       },
     ];
@@ -39,7 +39,7 @@ export default {
 
 <template>
   <section>
-    <header class="header-layout row">
+    <header class="row">
       <div class="col span-12">
         <h1>
           <t k="longhorn.overview.title" />

package/pages/c/_cluster/mcapps/index.vue

@@ -7,7 +7,7 @@ export default {
       name:   'c-cluster-mcapps-pages-page',
       params: {
         ...route.params,
-        product:  NAME,
+        product: NAME,
         page:    'catalogs'
       }
     });