@rancher/shell 0.3.0 → 0.3.2

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

@@ -40,6 +40,9 @@ import { isEmpty } from '@shell/utils/object';
 import ConfigBadge from './ConfigBadge';
 import EventsTable from './EventsTable';
 import { fetchClusterResources } from './explorer-utils';
+import SimpleBox from '@shell/components/SimpleBox';
+import { ExtensionPoint, CardLocation } from '@shell/core/types';
+import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 
 export const RESOURCES = [NAMESPACE, INGRESS, PV, WORKLOAD_TYPES.DEPLOYMENT, WORKLOAD_TYPES.STATEFUL_SET, WORKLOAD_TYPES.JOB, WORKLOAD_TYPES.DAEMON_SET, SERVICE];
 
@@ -71,6 +74,7 @@ export default {
     EmberPage,
     ConfigBadge,
     EventsTable,
+    SimpleBox,
   },
 
   mixins: [metricPoller],
@@ -126,6 +130,7 @@ export default {
       ETCD_METRICS_SUMMARY_URL,
       clusterCounts,
       selectedTab:        'cluster-events',
+      extensionCards:     getApplicableExtensionEnhancements(this, ExtensionPoint.CARD, CardLocation.CLUSTER_DASHBOARD_CARD, this.$route),
     };
   },
 
@@ -247,9 +252,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 +316,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 +405,7 @@ export default {
 
 <template>
   <section class="dashboard">
-    <header class="header-layout">
+    <header>
       <div class="title">
         <h1>
           <t k="clusterIndexPage.header" />
@@ -486,6 +497,27 @@ export default {
       />
     </div>
 
+    <!-- extension cards -->
+    <div
+      v-if="extensionCards.length"
+      class="extension-card-container mt-20"
+    >
+      <SimpleBox
+        v-for="item, i in extensionCards"
+        :key="`extensionCards${i}`"
+        class="extension-card"
+        :style="item.style"
+      >
+        <h3>
+          {{ item.label }}
+        </h3>
+        <component
+          :is="item.component"
+          :resource="currentCluster"
+        />
+      </SimpleBox>
+    </div>
+
     <h3
       v-if="!hasV1Monitoring && hasStats"
       class="mt-40"
@@ -504,6 +536,7 @@ export default {
         :name="t('clusterIndexPage.hardwareResourceGauge.cores')"
         :reserved="cpuReserved"
         :used="cpuUsed"
+        :units="cpuReserved.units"
       />
       <HardwareResourceGauge
         :name="t('clusterIndexPage.hardwareResourceGauge.ram')"
@@ -624,6 +657,19 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+.extension-card-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(calc((100%/3) - 40px), 1fr));
+  grid-column-gap: 15px;
+  grid-row-gap: 20px;
+}
+
+@media only screen and (max-width: map-get($breakpoints, "--viewport-9")) {
+  .extension-card-container {
+    grid-template-columns: 1fr !important;
+  }
+}
+
 .cluster-dashboard-glance {
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
@@ -712,7 +758,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/DeveloperInstallDialog.vue

@@ -181,12 +181,14 @@ export default {
         <div class="dialog-buttons mt-20">
           <button
             class="btn role-secondary"
+            data-testid="dev-install-ext-modal-cancel-btn"
             @click="closeDialog()"
           >
             {{ t('generic.cancel') }}
           </button>
           <AsyncButton
             mode="load"
+            data-testid="dev-install-ext-modal-install-btn"
             @click="loadPlugin"
           />
         </div>

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

@@ -243,6 +243,7 @@ export default {
             label-key="plugins.install.version"
             :options="versionOptions"
             class="version-selector mt-10"
+            data-testid="install-ext-modal-select-version"
           />
           <div v-else>
             {{ t('plugins.install.version') }} {{ version }}
@@ -252,12 +253,14 @@ export default {
           <button
             :disabled="busy"
             class="btn role-secondary"
+            data-testid="install-ext-modal-cancel-btn"
             @click="closeDialog(false)"
           >
             {{ t('generic.cancel') }}
           </button>
           <AsyncButton
             :mode="buttonMode"
+            data-testid="install-ext-modal-install-btn"
             @click="install"
           />
         </div>

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;
@@ -100,10 +113,12 @@ export default {
     <div
       v-if="showSlideIn"
       class="glass"
+      data-testid="extension-details-bg"
       @click="hide()"
     />
     <div
       class="slideIn"
+      data-testid="extension-details"
       :class="{'hide': false, 'slideIn__show': showSlideIn}"
     >
       <div
@@ -111,7 +126,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"
@@ -126,7 +144,10 @@ export default {
             >
           </div>
           <div class="plugin-title">
-            <h2 class="slideIn__header">
+            <h2
+              class="slideIn__header"
+              data-testid="extension-details-title"
+            >
               {{ info.name }}
             </h2>
             <p class="plugin-description">
@@ -137,6 +158,7 @@ export default {
             <div class="slideIn__header__buttons">
               <div
                 class="slideIn__header__button"
+                data-testid="extension-details-close"
                 @click="showSlideIn = false"
               >
                 <i class="icon icon-close" />
@@ -220,6 +242,7 @@ export default {
     position: fixed;
     top: 0;
     left: 0;
+    z-index: 1;
 
     $slideout-width: 35%;
     $title-height: 50px;
@@ -254,6 +277,10 @@ export default {
 
       transition: right .5s ease;
 
+      &__header {
+        text-transform: capitalize;
+      }
+
       .plugin-info-content {
         display: flex;
         flex-direction: column;
@@ -285,10 +312,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/RemoveUIPlugins.vue

@@ -107,6 +107,7 @@ export default {
     name="confirm-uiplugins-remove"
     :title="t('plugins.setup.remove.title')"
     mode="disable"
+    data-testid="disable-ext-modal"
     @okay="doRemove"
   >
     <template>
@@ -121,6 +122,7 @@ export default {
           v-model="removeRepo"
           :primary="true"
           label-key="plugins.setup.remove.registry.title"
+          data-testid="disable-ext-modal-remove-repo"
         />
         <div class="checkbox-info">
           {{ t('plugins.setup.remove.registry.prompt') }}

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

@@ -214,6 +214,7 @@ export default {
               :manual="true"
               :current-phase="buttonState"
               class="enable-plugin-support"
+              data-testid="extension-enable-operator"
               @click="enable"
             />
           </div>

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

@@ -84,12 +84,14 @@ export default {
           <button
             :disabled="busy"
             class="btn role-secondary"
+            data-testid="uninstall-ext-modal-cancel-btn"
             @click="closeDialog(false)"
           >
             {{ t('generic.cancel') }}
           </button>
           <AsyncButton
             mode="uninstall"
+            data-testid="uninstall-ext-modal-uninstall-btn"
             @click="uninstall()"
           />
         </div>