@rancher/shell 0.3.0 → 0.3.1

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);
@@ -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
         }) : {};
@@ -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

@@ -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/index.vue

@@ -156,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/index.vue

@@ -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/longhorn/index.vue

@@ -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/monitoring/alertmanagerconfig/_alertmanagerconfigid/receiver.vue

@@ -156,7 +156,7 @@ export default {
     // being saved. Therefore we take the save from the
     // AlertmanagerConfig resource and pass it into the
     // receiver config form.
-    saveOverride(buttonDone) {
+    async saveOverride(buttonDone) {
       if (this.alertmanagerConfigResource.yamlError) {
         this.alertmanagerConfigResource.errors = this.alertmanagerConfigResource.errors || [];
         this.alertmanagerConfigResource.errors.push(this.alertmanagerConfigResource.yamlError);
@@ -166,8 +166,18 @@ export default {
         return;
       }
 
-      this.alertmanagerConfigResource.save(...arguments);
-      this.redirectToAlertmanagerConfigDetail();
+      try {
+        await this.alertmanagerConfigResource.save(...arguments);
+
+        buttonDone(true);
+
+        this.redirectToAlertmanagerConfigDetail();
+      } catch (e) {
+        const msg = e?.message ? e.message : this.t('monitoring.alertmanagerConfig.error');
+
+        this.$refs.config.setError(msg);
+        buttonDone(false);
+      }
     },
     handleButtonGroupClick(event) {
       if (event === this.yaml) {
@@ -226,7 +236,7 @@ export default {
 
 <template>
   <div>
-    <header class="header-layout header">
+    <header class="header">
       <div class="title">
         <div class="primaryheader">
           <h1>
@@ -271,6 +281,7 @@ export default {
     />
     <ReceiverConfig
       v-if="(currentView === config || currentView === detail) && alertmanagerConfigResource"
+      ref="config"
       :value="receiverValue"
       :mode="mode"
       :alertmanager-config-id="alertmanagerConfigId"

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

@@ -140,7 +140,7 @@ export default {
 
 <template>
   <section>
-    <header class="header-layout row">
+    <header class="row">
       <div class="col span-12">
         <h1>
           <t k="monitoring.overview.title" />

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

@@ -37,7 +37,7 @@ export default {
 
 <template>
   <section>
-    <header class="header-layout row">
+    <header class="row">
       <div class="col span-12">
         <h1>
           <t k="neuvector.overview.title" />

package/pages/c/_cluster/settings/performance.vue

@@ -133,7 +133,7 @@ export default {
           <p>{{ t('performance.manualRefresh.description') }}</p>
           <Banner
             color="error"
-            label-key="performance.manualRefresh.banner"
+            label-key="performance.experimental"
           />
           <Checkbox
             v-model="value.manualRefresh.enabled"
@@ -163,7 +163,7 @@ export default {
           <p>{{ t('performance.gc.description') }}</p>
           <Banner
             color="error"
-            label-key="performance.gc.banner"
+            label-key="performance.experimental"
           />
           <Checkbox
             v-model="value.garbageCollection.enabled"
@@ -237,6 +237,52 @@ export default {
             </div>
           </div>
         </div>
+        <!-- Force NS filter -->
+        <div class="mt-40">
+          <h2>{{ t('performance.nsFiltering.label') }}</h2>
+          <p>{{ t('performance.nsFiltering.description') }}</p>
+          <Banner
+            color="error"
+            label-key="performance.experimental"
+          />
+          <Checkbox
+            v-model="value.forceNsFilter.enabled"
+            :mode="mode"
+            :label="t('performance.nsFiltering.checkboxLabel')"
+            class="mt-10 mb-20"
+            :primary="true"
+          />
+          <div class="ml-20">
+            <p :class="{ 'text-muted': !value.forceNsFilter.enabled }">
+              {{ t('performance.nsFiltering.count.description') }}
+            </p>
+            <LabeledInput
+              v-model="value.forceNsFilter.threshold"
+              :mode="mode"
+              :label="t('performance.nsFiltering.count.inputLabel')"
+              :disabled="!value.forceNsFilter.enabled"
+              class="input"
+              type="number"
+              min="0"
+            />
+          </div>
+        </div>
+        <!-- Advanced Websocket Worker -->
+        <div class="mt-40">
+          <h2>{{ t('performance.advancedWorker.label') }}</h2>
+          <p>{{ t('performance.advancedWorker.description') }}</p>
+          <Banner
+            color="error"
+            label-key="performance.experimental"
+          />
+          <Checkbox
+            v-model="value.advancedWorker.enabled"
+            :mode="mode"
+            :label="t('performance.advancedWorker.checkboxLabel')"
+            class="mt-10 mb-20"
+            :primary="true"
+          />
+        </div>
       </div>
     </div>
     <template v-for="err in errors">

package/pages/c/_cluster/uiplugins/PluginInfoPanel.vue

@@ -1,4 +1,5 @@
 <script>
+import { mapGetters } from 'vuex';
 import ChartReadme from '@shell/components/ChartReadme';
 import { Banner } from '@components/Banner';
 import LazyImage from '@shell/components/LazyImage';
@@ -34,6 +35,18 @@ export default {
     };
   },
 
+  computed: {
+    ...mapGetters({ theme: 'prefs/theme' }),
+
+    applyDarkModeBg() {
+      if (this.theme === 'dark') {
+        return { 'dark-mode': true };
+      }
+
+      return {};
+    },
+  },
+
   methods: {
     show(info) {
       this.info = info;
@@ -111,7 +124,10 @@ export default {
         class="plugin-info-content"
       >
         <div class="plugin-header">
-          <div class="plugin-icon">
+          <div
+            class="plugin-icon"
+            :class="applyDarkModeBg"
+          >
             <LazyImage
               v-if="info.icon"
               :initial-src="defaultIcon"
@@ -254,6 +270,10 @@ export default {
 
       transition: right .5s ease;
 
+      &__header {
+        text-transform: capitalize;
+      }
+
       .plugin-info-content {
         display: flex;
         flex-direction: column;
@@ -285,10 +305,23 @@ export default {
         font-size: 40px;
         margin-right:10px;
         color: #888;
+        width: 44px;
+        height: 44px;
+
+        &.dark-mode {
+          border-radius: calc(2 * var(--border-radius));
+          overflow: hidden;
+          background-color: white;
+        }
 
         .plugin-icon-img {
           height: 40px;
           width: 40px;
+          -o-object-fit: contain;
+          object-fit: contain;
+          position: relative;
+          top: 2px;
+          left: 2px;
         }
       }
 

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

@@ -103,6 +103,15 @@ export default {
 
     ...mapGetters({ uiplugins: 'uiplugins/plugins' }),
     ...mapGetters({ uiErrors: 'uiplugins/errors' }),
+    ...mapGetters({ theme: 'prefs/theme' }),
+
+    applyDarkModeBg() {
+      if (this.theme === 'dark') {
+        return { 'dark-mode': true };
+      }
+
+      return {};
+    },
 
     menuActions() {
       const menuActions = [];
@@ -599,7 +608,10 @@ export default {
             class="plugin"
             @click="showPluginDetail(plugin)"
           >
-            <div class="plugin-icon">
+            <div
+              class="plugin-icon"
+              :class="applyDarkModeBg"
+            >
               <LazyImage
                 v-if="plugin.icon"
                 :initial-src="defaultIcon"
@@ -781,7 +793,7 @@ export default {
 
     > i {
       color: var(--success);
-      font-size: 20px;
+      font-size: 14px;
       font-weight: bold;
     }
 
@@ -841,10 +853,23 @@ export default {
       font-size: 40px;
       margin-right:10px;
       color: #888;
+      width: 44px;
+      height: 44px;
+
+      &.dark-mode {
+        border-radius: calc(2 * var(--border-radius));
+        overflow: hidden;
+        background-color: white;
+      }
 
       .plugin-icon-img {
         height: 40px;
         width: 40px;
+        -o-object-fit: contain;
+        object-fit: contain;
+        position: relative;
+        top: 2px;
+        left: 2px;
       }
     }
 
@@ -875,6 +900,7 @@ export default {
       font-size: 16px;
       font-weight: bold;
       margin-bottom: 5px;
+      text-transform: capitalize;
     }
 
     .plugin-badges {

package/pages/diagnostic.vue

@@ -284,12 +284,13 @@ export default {
     },
 
     promptDownload(btnCb) {
-      const resources = [{ downloadData: this.downloadData, gatherResponseTimes: this.gatherResponseTimes }];
-
       if ( !this.responseTimes ) {
         this.$store.dispatch('management/promptModal', {
-          component: 'DiagnosticTimingsDialog',
-          resources
+          component:      'DiagnosticTimingsDialog',
+          componentProps: {
+            downloadData:        this.downloadData,
+            gatherResponseTimes: this.gatherResponseTimes
+          }
         })
           .then(() => btnCb(true))
           .catch(() => btnCb(false));