@rancher/shell 0.1.21 → 0.2.2

package/nuxt.config.js

@@ -10,6 +10,29 @@ import { trimWhitespaceSsr as trimWhitespace } from './plugins/trim-whitespace';
 
 const createProxyMiddleware = require('http-proxy-middleware');
 
+// Global variables
+let api = process.env.API || 'http://localhost:8989';
+
+if ( !api.startsWith('http') ) {
+  api = `https://${ api }`;
+}
+
+// needed for proxies
+export const API_PATH = api;
+
+const dev = (process.env.NODE_ENV !== 'production');
+const devPorts = dev || process.env.DEV_PORTS === 'true';
+const version = process.env.VERSION ||
+  process.env.DRONE_TAG ||
+  process.env.DRONE_VERSION ||
+  require('./package.json').version;
+
+const prime = process.env.PRIME;
+
+const pl = process.env.PL || STANDARD;
+const commit = process.env.COMMIT || 'head';
+const perfTest = (process.env.PERF_TEST === 'true'); // Enable performance testing when in dev
+
 // ===============================================================================================
 // Nuxt configuration
 // ===============================================================================================
@@ -195,25 +218,6 @@ export default function(dir, _appConfig) {
   require('events').EventEmitter.defaultMaxListeners = 20;
   require('dotenv').config();
 
-  const version = process.env.VERSION ||
-    process.env.DRONE_TAG ||
-    process.env.DRONE_VERSION ||
-    require('./package.json').version;
-
-  const prime = process.env.PRIME;
-
-  const dev = (process.env.NODE_ENV !== 'production');
-  const devPorts = dev || process.env.DEV_PORTS === 'true';
-  const pl = process.env.PL || STANDARD;
-  const commit = process.env.COMMIT || 'head';
-  const perfTest = (process.env.PERF_TEST === 'true'); // Enable performance testing when in dev
-
-  let api = process.env.API || 'http://localhost:8989';
-
-  if ( !api.startsWith('http') ) {
-    api = `https://${ api }`;
-  }
-
   let routerBasePath = '/';
   let resourceBase = '';
   let outputDir = 'dist';
@@ -587,6 +591,7 @@ export default function(dir, _appConfig) {
 
     // Proxy: https://github.com/nuxt-community/proxy-module#options
     proxy: {
+      ...appConfig.proxies,
       '/k8s':            proxyWsOpts(api), // Straight to a remote cluster (/k8s/clusters/<id>/)
       '/pp':             proxyWsOpts(api), // For (epinio) standalone API
       '/api':            proxyWsOpts(api), // Management k8s API
@@ -637,114 +642,114 @@ export default function(dir, _appConfig) {
   };
 
   return config;
+}
 
-  // ===============================================================================================
-  // Functions for the request proxying used in dev
-  // ===============================================================================================
-
-  function proxyMetaOpts(target) {
-    return {
-      target,
-      followRedirects: true,
-      secure:          !dev,
-      onProxyReq,
-      onProxyReqWs,
-      onError,
-      onProxyRes,
-    };
-  }
-
-  function proxyOpts(target) {
-    return {
-      target,
-      secure: !devPorts,
-      onProxyReq,
-      onProxyReqWs,
-      onError,
-      onProxyRes,
-    };
-  }
+// ===============================================================================================
+// Functions for the request proxying used in dev
+// ===============================================================================================
 
-  // Intercept the /rancherversion API call wnad modify the 'RancherPrime' value
-  // if configured to do so by the environment variable PRIME
-  function proxyPrimeOpts(target) {
-    const opts = proxyOpts(target);
+export function proxyMetaOpts(target) {
+  return {
+    target,
+    followRedirects: true,
+    secure:          !dev,
+    onProxyReq,
+    onProxyReqWs,
+    onError,
+    onProxyRes,
+  };
+}
 
-    // Don't intercept if the PRIME environment variable is not set
-    if (!prime?.length) {
-      return opts;
-    }
+export function proxyOpts(target) {
+  return {
+    target,
+    secure: !devPorts,
+    onProxyReq,
+    onProxyReqWs,
+    onError,
+    onProxyRes,
+  };
+}
 
-    opts.onProxyRes = (proxyRes, req, res) => {
-      const _end = res.end;
-      let body = '';
+// Intercept the /rancherversion API call wnad modify the 'RancherPrime' value
+// if configured to do so by the environment variable PRIME
+export function proxyPrimeOpts(target) {
+  const opts = proxyOpts(target);
 
-      proxyRes.on( 'data', (data) => {
-        data = data.toString('utf-8');
-        body += data;
-      });
+  // Don't intercept if the PRIME environment variable is not set
+  if (!prime?.length) {
+    return opts;
+  }
 
-      res.write = () => {};
+  opts.onProxyRes = (proxyRes, req, res) => {
+    const _end = res.end;
+    let body = '';
 
-      res.end = () => {
-        let output = body;
+    proxyRes.on( 'data', (data) => {
+      data = data.toString('utf-8');
+      body += data;
+    });
 
-        try {
-          const out = JSON.parse(body);
+    res.write = () => {};
 
-          out.RancherPrime = prime;
-          output = JSON.stringify(out);
-        } catch (err) {}
+    res.end = () => {
+      let output = body;
 
-        res.setHeader('content-length', output.length );
-        res.setHeader('content-type', 'application/json' );
-        res.setHeader('transfer-encoding', '');
-        res.setHeader('cache-control', 'no-cache');
-        res.writeHead(proxyRes.statusCode);
-        _end.apply(res, [output]);
-      };
+      try {
+        const out = JSON.parse(body);
+
+        out.RancherPrime = prime;
+        output = JSON.stringify(out);
+      } catch (err) {}
+
+      res.setHeader('content-length', output.length );
+      res.setHeader('content-type', 'application/json' );
+      res.setHeader('transfer-encoding', '');
+      res.setHeader('cache-control', 'no-cache');
+      res.writeHead(proxyRes.statusCode);
+      _end.apply(res, [output]);
     };
+  };
 
-    return opts;
-  }
-
-  function onProxyRes(proxyRes, req, res) {
-    if (devPorts) {
-      proxyRes.headers['X-Frame-Options'] = 'ALLOWALL';
-    }
-  }
+  return opts;
+}
 
-  function proxyWsOpts(target) {
-    return {
-      ...proxyOpts(target),
-      ws:           true,
-      changeOrigin: true,
-    };
+export function onProxyRes(proxyRes, req, res) {
+  if (devPorts) {
+    proxyRes.headers['X-Frame-Options'] = 'ALLOWALL';
   }
+}
 
-  function onProxyReq(proxyReq, req) {
-    if (!(proxyReq._currentRequest && proxyReq._currentRequest._headerSent)) {
-      proxyReq.setHeader('x-api-host', req.headers['host']);
-      proxyReq.setHeader('x-forwarded-proto', 'https');
-      // console.log(proxyReq.getHeaders());
-    }
-  }
+export function proxyWsOpts(target) {
+  return {
+    ...proxyOpts(target),
+    ws:           true,
+    changeOrigin: true,
+  };
+}
 
-  function onProxyReqWs(proxyReq, req, socket, options, head) {
-    req.headers.origin = options.target.href;
-    proxyReq.setHeader('origin', options.target.href);
+export function onProxyReq(proxyReq, req) {
+  if (!(proxyReq._currentRequest && proxyReq._currentRequest._headerSent)) {
     proxyReq.setHeader('x-api-host', req.headers['host']);
     proxyReq.setHeader('x-forwarded-proto', 'https');
     // console.log(proxyReq.getHeaders());
-
-    socket.on('error', (err) => {
-      console.error('Proxy WS Error:', err); // eslint-disable-line no-console
-    });
   }
+}
 
-  function onError(err, req, res) {
-    res.statusCode = 598;
-    console.error('Proxy Error:', err); // eslint-disable-line no-console
-    res.write(JSON.stringify(err));
-  }
+export function onProxyReqWs(proxyReq, req, socket, options, head) {
+  req.headers.origin = options.target.href;
+  proxyReq.setHeader('origin', options.target.href);
+  proxyReq.setHeader('x-api-host', req.headers['host']);
+  proxyReq.setHeader('x-forwarded-proto', 'https');
+  // console.log(proxyReq.getHeaders());
+
+  socket.on('error', (err) => {
+    console.error('Proxy WS Error:', err); // eslint-disable-line no-console
+  });
+}
+
+export function onError(err, req, res) {
+  res.statusCode = 598;
+  console.error('Proxy Error:', err); // eslint-disable-line no-console
+  res.write(JSON.stringify(err));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.1.21",
+  "version": "0.2.2",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",

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

@@ -353,7 +353,7 @@ export default {
       </div>
     </header>
     <div v-if="showCarousel">
-      <h3>Featured Charts</h3>
+      <h3>{{ t('catalog.charts.featuredCharts') }}</h3>
       <Carousel
         :sliders="getFeaturedCharts"
         @clicked="(row) => selectChart(row)"

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

@@ -5,13 +5,13 @@ import isEqual from 'lodash/isEqual';
 import { mapPref, DIFF } from '@shell/store/prefs';
 import { mapFeature, MULTI_CLUSTER, LEGACY } from '@shell/store/features';
 import { mapGetters } from 'vuex';
-
 import { Banner } from '@components/Banner';
 import ButtonGroup from '@shell/components/ButtonGroup';
 import ChartReadme from '@shell/components/ChartReadme';
 import { Checkbox } from '@components/Form/Checkbox';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { LabeledInput } from '@components/Form/LabeledInput';
+import { LabeledTooltip } from '@components/LabeledTooltip';
 import LazyImage from '@shell/components/LazyImage';
 import Loading from '@shell/components/Loading';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
@@ -24,7 +24,7 @@ import Wizard from '@shell/components/Wizard';
 import TypeDescription from '@shell/components/TypeDescription';
 import ChartMixin from '@shell/mixins/chart';
 import ChildHook, { BEFORE_SAVE_HOOKS, AFTER_SAVE_HOOKS } from '@shell/mixins/child-hook';
-import { CATALOG, MANAGEMENT, DEFAULT_WORKSPACE } from '@shell/config/types';
+import { CATALOG, MANAGEMENT, DEFAULT_WORKSPACE, CAPI } from '@shell/config/types';
 import {
   CHART, FROM_CLUSTER, FROM_TOOLS, HIDE_SIDE_NAV, NAMESPACE, REPO, REPO_TYPE, VERSION, _FLAGGED
 } from '@shell/config/query-params';
@@ -61,6 +61,7 @@ export default {
     Checkbox,
     LabeledInput,
     LabeledSelect,
+    LabeledTooltip,
     LazyImage,
     Loading,
     NameNsDescription,
@@ -93,10 +94,10 @@ export default {
 
     this.errors = [];
 
-    this.defaultRegistrySetting = await this.$store.dispatch('management/find', {
-      type: MANAGEMENT.SETTING,
-      id:   'system-default-registry'
-    });
+    // 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;
 
     this.serverUrlSetting = await this.$store.dispatch('management/find', {
       type: MANAGEMENT.SETTING,
@@ -281,6 +282,14 @@ export default {
       */
       this.chartValues = merge(merge({}, this.versionInfo?.values || {}), userValues);
 
+      const existingRegistry = this.chartValues?.global?.systemDefaultRegistry || 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;
+
       /* Serializes an object as a YAML document */
       this.valuesYaml = saferDump(this.chartValues);
 
@@ -292,6 +301,7 @@ export default {
       this.loadedVersionValues = this.versionInfo?.values || {};
       this.loadedVersion = this.version?.key;
     }
+
     /* Check if chart exists and if required values exist */
     this.updateStepOneReady();
 
@@ -317,13 +327,16 @@ export default {
     };
 
     return {
-      defaultRegistrySetting: null,
+      defaultRegistrySetting: '',
+      customRegistrySetting:  '',
       serverUrlSetting:       null,
       chartValues:            null,
+      clusterRegistry:        '',
       originalYamlValues:     null,
       previousYamlValues:     null,
       errors:                 null,
       existing:               null,
+      globalRegistry:         '',
       forceNamespace:         null,
       loadedVersion:          null,
       loadedVersionValues:    null,
@@ -335,22 +348,22 @@ export default {
       valuesYaml:             '',
       project:                null,
       migratedApp:            false,
-
       defaultCmdOpts,
-      customCmdOpts: { ...defaultCmdOpts },
+      customCmdOpts:          { ...defaultCmdOpts },
 
       nameDisabled: false,
 
-      preFormYamlOption:   VALUES_STATE.YAML,
-      formYamlOption:      VALUES_STATE.YAML,
-      showDiff:            false,
-      showValuesComponent: true,
-      showQuestions:       true,
-      showSlideIn:         false,
-      shownReadmeWindows:  [],
-      componentHasTabs:    false,
-      showCommandStep:     false,
-      isNamespaceNew:      false,
+      preFormYamlOption:       VALUES_STATE.YAML,
+      formYamlOption:          VALUES_STATE.YAML,
+      showDiff:                false,
+      showValuesComponent:     true,
+      showQuestions:           true,
+      showSlideIn:             false,
+      shownReadmeWindows:      [],
+      componentHasTabs:        false,
+      showCommandStep:         false,
+      showCustomRegistryInput: false,
+      isNamespaceNew:          false,
 
       stepBasic: {
         name:           'basics',
@@ -645,7 +658,8 @@ export default {
       }
 
       return null;
-    }
+    },
+
   },
 
   watch: {
@@ -744,6 +758,55 @@ export default {
   },
 
   methods: {
+    async getClusterRegistry() {
+      const hasPermissionToSeeProvCluster = this.$store.getters[`management/schemaFor`](CAPI.RANCHER_CLUSTER);
+
+      if (hasPermissionToSeeProvCluster) {
+        const mgmCluster = this.$store.getters['currentCluster'];
+        const provCluster = await this.$store.dispatch('management/find', {
+          type: CAPI.RANCHER_CLUSTER,
+          id:   mgmCluster.provClusterId
+        });
+
+        if (provCluster.isRke2) { // isRke2 returns true for both RKE2 and K3s clusters.
+          const agentConfig = provCluster.spec.rkeConfig.machineSelectorConfig.find(x => !x.machineLabelSelector).config;
+
+          // If a cluster scoped registry exists,
+          // it should be used by default.
+          const clusterRegistry = agentConfig?.['system-default-registry'] || '';
+
+          if (clusterRegistry) {
+            return clusterRegistry;
+          }
+        }
+        if (provCluster.isRke1) {
+          // For RKE1 clusters, the cluster scoped private registry is on the management
+          // cluster, not the provisioning cluster.
+          const rke1Registries = mgmCluster.spec.rancherKubernetesEngineConfig.privateRegistries;
+
+          if (rke1Registries?.length > 0) {
+            const defaultRegistry = rke1Registries.find((registry) => {
+              return registry.isDefault;
+            });
+
+            return defaultRegistry.url;
+          }
+        }
+      }
+    },
+
+    async getGlobalRegistry() {
+      // Use the global registry as a fallback.
+      // If it is an empty string, the container
+      // runtime will pull images from docker.io.
+      const globalRegistry = await this.$store.dispatch('management/find', {
+        type: MANAGEMENT.SETTING,
+        id:   'system-default-registry'
+      });
+
+      return globalRegistry.value;
+    },
+
     updateValue(value) {
       if (this.$refs.yaml) {
         this.$refs.yaml.updateValue(value);
@@ -905,7 +968,7 @@ export default {
       const cluster = this.currentCluster;
       const projects = this.$store.getters['management/all'](MANAGEMENT.PROJECT);
       const systemProjectId = projects.find(p => p.spec?.displayName === 'System')?.id?.split('/')?.[1] || '';
-      const defaultRegistry = this.defaultRegistrySetting?.value || '';
+
       const serverUrl = this.serverUrlSetting?.value || '';
       const isWindows = (cluster.workerOSs || []).includes(WINDOWS);
       const pathPrefix = cluster?.spec?.rancherKubernetesEngineConfig?.prefixPath || '';
@@ -913,8 +976,9 @@ export default {
 
       setIfNotSet(cattle, 'clusterId', cluster?.id);
       setIfNotSet(cattle, 'clusterName', cluster?.nameDisplay);
-      setIfNotSet(cattle, 'systemDefaultRegistry', defaultRegistry);
-      setIfNotSet(global, 'systemDefaultRegistry', defaultRegistry);
+      set(cattle, 'systemDefaultRegistry', this.customRegistrySetting);
+      set(global, 'systemDefaultRegistry', this.customRegistrySetting);
+
       setIfNotSet(global, 'cattle.systemProjectId', systemProjectId);
       setIfNotSet(cattle, 'url', serverUrl);
       setIfNotSet(cattle, 'rkePathPrefix', pathPrefix);
@@ -939,7 +1003,6 @@ export default {
       }
 
       const cluster = this.$store.getters['currentCluster'];
-      const defaultRegistry = this.defaultRegistrySetting?.value || '';
       const serverUrl = this.serverUrlSetting?.value || '';
       const isWindows = (cluster.workerOSs || []).includes(WINDOWS);
       const pathPrefix = cluster?.spec?.rancherKubernetesEngineConfig?.prefixPath || '';
@@ -948,7 +1011,6 @@ export default {
       if ( values.global?.cattle ) {
         deleteIfEqual(values.global.cattle, 'clusterId', cluster?.id);
         deleteIfEqual(values.global.cattle, 'clusterName', cluster?.nameDisplay);
-        deleteIfEqual(values.global.cattle, 'systemDefaultRegistry', defaultRegistry);
         deleteIfEqual(values.global.cattle, 'url', serverUrl);
         deleteIfEqual(values.global.cattle, 'rkePathPrefix', pathPrefix);
         deleteIfEqual(values.global.cattle, 'rkeWindowsPathPrefix', windowsPathPrefix);
@@ -966,10 +1028,6 @@ export default {
         delete values.global.cattle;
       }
 
-      if ( values.global ) {
-        deleteIfEqual(values.global, 'systemDefaultRegistry', defaultRegistry);
-      }
-
       if ( !Object.keys(values.global || {}).length ) {
         delete values.global;
       }
@@ -1289,7 +1347,6 @@ export default {
             </div>
           </div>
           <NameNsDescription
-            v-if="chart"
             v-model="value"
             :description-hidden="true"
             :mode="mode"
@@ -1316,13 +1373,30 @@ export default {
               />
             </template>
           </NameNsDescription>
+          <Checkbox v-model="showCommandStep" class="mb-20" :label="t('catalog.install.steps.helmCli.checkbox', { action, existing: !!existing })" />
+
+          <Checkbox
+            v-model="showCustomRegistryInput"
+            class="mb-20"
+            :label="t('catalog.chart.registry.custom.checkBoxLabel')"
+            :tooltip="t('catalog.chart.registry.tooltip')"
+          />
+          <div class="row">
+            <div class="col span-6">
+              <LabeledInput
+                v-if="showCustomRegistryInput"
+                v-model="customRegistrySetting"
+                label-key="catalog.chart.registry.custom.inputLabel"
+                placeholder-key="catalog.chart.registry.custom.placeholder"
+                :min-height="30"
+              />
+            </div>
+          </div>
           <div class="step__values__controls--spacer" style="flex:1">
 &nbsp;
           </div>
           <Banner v-if="isNamespaceNew" color="info" v-html="t('catalog.install.steps.basics.createNamespace', {namespace: value.metadata.namespace}, true) ">
           </Banner>
-
-          <Checkbox v-model="showCommandStep" class="mb-20" :label="t('catalog.install.steps.helmCli.checkbox', { action, existing: !!existing })" />
         </div>
       </template>
       <template #clusterTplVersion>

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

@@ -95,6 +95,7 @@ export default {
           <p>{{ t('performance.websocketNotification.description') }}</p>
           <Checkbox
             v-model="value.disableWebsocketNotification"
+            :mode="mode"
             :label="t('performance.websocketNotification.checkboxLabel')"
             class="mt-10 mb-20"
             :primary="true"
@@ -106,6 +107,7 @@ export default {
           <p>{{ t('performance.incrementalLoad.description') }}</p>
           <Checkbox
             v-model="value.incrementalLoading.enabled"
+            :mode="mode"
             :label="t('performance.incrementalLoad.checkboxLabel')"
             class="mt-10 mb-20"
             :primary="true"
@@ -116,6 +118,7 @@ export default {
             </p>
             <LabeledInput
               v-model="value.incrementalLoading.threshold"
+              :mode="mode"
               :label="t('performance.incrementalLoad.inputLabel')"
               :disabled="!value.incrementalLoading.enabled"
               class="input"
@@ -131,6 +134,7 @@ export default {
           <Banner color="error" label-key="performance.manualRefresh.banner" />
           <Checkbox
             v-model="value.manualRefresh.enabled"
+            :mode="mode"
             :label="t('performance.manualRefresh.checkboxLabel')"
             class="mt-10 mb-20"
             :primary="true"
@@ -141,6 +145,7 @@ export default {
             </p>
             <LabeledInput
               v-model.number="value.manualRefresh.threshold"
+              :mode="mode"
               :label="t('performance.manualRefresh.inputLabel')"
               :disabled="!value.manualRefresh.enabled"
               class="input"
@@ -156,6 +161,7 @@ export default {
           <Banner color="error" label-key="performance.gc.banner" />
           <Checkbox
             v-model="value.garbageCollection.enabled"
+            :mode="mode"
             :label="t('performance.gc.checkboxLabel')"
             class="mt-10 mb-20"
             :primary="true"
@@ -165,6 +171,7 @@ export default {
             <div class="ml-20 mb-10">
               <Checkbox
                 v-model="value.garbageCollection.enabledInterval"
+                :mode="mode"
                 :class="{ 'text-muted': !value.garbageCollection.enabled }"
                 :label="t('performance.gc.whenRun.intervalCheckBox.label')"
                 class="mt-10 mb-10"
@@ -174,6 +181,7 @@ export default {
               <div class="ml-20">
                 <UnitInput
                   v-model="value.garbageCollection.interval"
+                  :mode="mode"
                   :suffix="t('suffix.seconds', { count: value.garbageCollection.interval })"
                   :label="t('performance.gc.whenRun.interval.inputLabel')"
                   :disabled="!value.garbageCollection.enabled || !value.garbageCollection.enabledInterval"
@@ -183,6 +191,7 @@ export default {
               </div>
               <Checkbox
                 v-model="value.garbageCollection.enabledOnNavigate"
+                :mode="mode"
                 :class="{ 'text-muted': !value.garbageCollection.enabled }"
                 :label="t('performance.gc.whenRun.route.description')"
                 class="mt-20 mb-10"
@@ -197,6 +206,7 @@ export default {
               </p>
               <UnitInput
                 v-model="value.garbageCollection.ageThreshold"
+                :mode="mode"
                 :suffix="t('suffix.seconds', { count: value.garbageCollection.ageThreshold })"
                 :label="t('performance.gc.howRun.age.inputLabel')"
                 :disabled="!value.garbageCollection.enabled"
@@ -208,6 +218,7 @@ export default {
               </p>
               <LabeledInput
                 v-model.number="value.garbageCollection.countThreshold"
+                :mode="mode"
                 :label="t('performance.gc.howRun.count.inputLabel')"
                 :disabled="!value.garbageCollection.enabled"
                 class="input"