@rancher/shell 0.2.1 → 0.2.3

package/components/Carousel.vue

@@ -1,6 +1,9 @@
 <script>
 import { get } from '@shell/utils/object';
 import { BadgeState } from '@components/BadgeState';
+import { mapGetters } from 'vuex';
+
+const carouselSeenStorageKey = `carousel-seen`;
 
 export default {
   components: { BadgeState },
@@ -31,16 +34,18 @@ export default {
       default: 'noopener noreferrer nofollow'
     },
   },
+
   data() {
     return {
-      slider:          this.sliders,
-      activeItemId:    0,
-      autoScroll:      true
+      slider:                  this.sliders,
+      activeItemId:            0,
+      autoScroll:              true,
+      autoScrollSlideInterval: null,
     };
   },
 
   computed: {
-
+    ...mapGetters(['clusterId']),
     trackStyle() {
       const sliderItem = this.activeItemId * 100 / this.slider.length;
       const width = 60 * this.slider.length;
@@ -77,9 +82,6 @@ export default {
       this.slidePosition();
     },
 
-    timer() {
-      setInterval(this.autoScrollSlide, 2000);
-    },
     autoScrollSlide() {
       if (this.activeItemId < this.slider.length && this.autoScroll ) {
         this.activeItemId++;
@@ -103,9 +105,23 @@ export default {
     }
   },
 
+  beforeDestroy() {
+    if (this.autoScrollSlideInterval) {
+      clearInterval(this.autoScrollSlideInterval);
+    }
+  },
+
   mounted() {
-    this.timer();
-  }
+    const lastSeenCluster = sessionStorage.getItem(carouselSeenStorageKey);
+
+    if (lastSeenCluster !== this.clusterId) {
+      // Session storage lasts until tab/window closed (retained on refresh)
+      sessionStorage.setItem(carouselSeenStorageKey, this.clusterId);
+
+      this.autoScrollSlideInterval = setInterval(this.autoScrollSlide, 5000);
+    }
+  },
+
 };
 
 </script>

package/components/Import.vue

@@ -27,6 +27,13 @@ export default {
     SortableTable
   },
 
+  props: {
+    defaultNamespace: {
+      type:    String,
+      default: 'default'
+    },
+  },
+
   async fetch() {
     this.allNamespaces = await this.$store.dispatch('cluster/findAll', { type: NAMESPACE, opt: { url: 'namespaces' } });
   },
@@ -34,7 +41,6 @@ export default {
   data() {
     return {
       currentYaml:      '',
-      defaultNamespace: 'default',
       allNamespaces:    null,
       errors:           null,
       rows:             null,

package/components/SortableTable/index.vue

@@ -716,7 +716,11 @@ export default {
       }
 
       if (isLabel) {
-        return row.metadata.labels[col.label];
+        if (row.metadata?.labels && row.metadata?.labels[col.label]) {
+          return row.metadata?.labels[col.label];
+        }
+
+        return '';
       }
 
       // Use to debug table columns using expensive value getters
@@ -1181,6 +1185,8 @@ export default {
             :full-colspan="fullColspan"
             :row="row.row"
             :sub-matches="subMatches"
+            :onRowMouseEnter="onRowMouseEnter"
+            :onRowMouseLeave="onRowMouseLeave"
           >
             <tr
               v-if="row.row.stateDescription"

package/components/form/MatchExpressions.vue

@@ -5,9 +5,10 @@ import { mapGetters } from 'vuex';
 import { isArray, removeObject } from '@shell/utils/array';
 import { clone } from '@shell/utils/object';
 import { convert, simplify } from '@shell/utils/selector';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
 
 export default {
-  components: { Select },
+  components: { Select, LabeledSelect },
   props:      {
     // Array of actual match expressions
     // or k8s selector Object of {matchExpressions, matchLabels}
@@ -38,6 +39,12 @@ export default {
     showRemove: {
       type:    Boolean,
       default: true
+    },
+
+    // if options are passed for keys, then the key's input will become a select
+    keysSelectOptions: {
+      type:    Array,
+      default: () => []
     }
   },
 
@@ -108,6 +115,10 @@ export default {
       return POD;
     },
 
+    hasKeySelectOptions() {
+      return !!this.keysSelectOptions?.length;
+    },
+
     ...mapGetters({ t: 'i18n/t' })
   },
 
@@ -194,11 +205,12 @@ export default {
         <div v-if="isView">
           {{ row.key }}
         </div>
-        <input
+        <input v-else-if="!hasKeySelectOptions" v-model="row.key" :mode="mode" @input="update" />
+        <LabeledSelect
           v-else
           v-model="row.key"
           :mode="mode"
-          @input="update"
+          :options="keysSelectOptions"
         />
       </div>
       <div

package/components/nav/Header.vue

@@ -109,6 +109,19 @@ export default {
       return !this.featureRancherDesktop;
     },
 
+    showFilter() {
+      // Some products won't have a current cluster
+      const validClusterOrProduct = this.currentCluster ||
+                 (this.currentProduct && this.currentProduct.customNamespaceFilter) ||
+                 (this.currentProduct && this.currentProduct.showWorkspaceSwitcher);
+      // Don't show if the header is in 'simple' mode
+      const notSimple = !this.simple;
+      // One of these must be enabled, otherwise t here's no component to show
+      const validFilterSettings = this.currentProduct.showNamespaceFilter || this.currentProduct.showWorkspaceSwitcher;
+
+      return validClusterOrProduct && notSimple && validFilterSettings;
+    },
+
     featureRancherDesktop() {
       return this.$config.rancherEnv === 'desktop';
     },
@@ -332,7 +345,7 @@ export default {
       <component :is="navHeaderRight" />
 
       <div
-        v-if="(currentCluster || (currentProduct && currentProduct.customNamespaceFilter)) && !simple && (currentProduct.showNamespaceFilter || currentProduct.showWorkspaceSwitcher)"
+        v-if="showFilter"
         class="top"
       >
         <NamespaceFilter v-if="clusterReady && currentProduct && (currentProduct.showNamespaceFilter || isExplorer)" />

package/detail/cis.cattle.io.clusterscan.vue

@@ -290,8 +290,12 @@ export default {
         :headers="reportCheckHeaders"
         key-field="id"
       >
-        <template #sub-row="{row, fullColspan}">
-          <tr class="sub-row">
+        <template #sub-row="{row, fullColspan, onRowMouseEnter, onRowMouseLeave}">
+          <tr
+            class="sub-row"
+            @mouseenter="onRowMouseEnter"
+            @mouseleave="onRowMouseLeave"
+          >
             <td :colspan="fullColspan">
               <Banner v-if="(row.state==='fail' || row.state==='warn')&& row.remediation" class="sub-banner" :label="remediationDisplay(row)" color="warning" />
               <SortableTable

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

@@ -631,11 +631,11 @@ export default {
                 </div>
               </div>
               <div v-if="group.ref" class="right mr-45">
-                <template v-if="value.hasLink('update')">
+                <template v-if="value.hasLink('update') && group.ref.showScalePool">
                   <button v-tooltip="t('node.list.scaleDown')" :disabled="!group.ref.canScaleDownPool()" type="button" class="btn btn-sm role-secondary" @click="group.ref.scalePool(-1)">
                     <i class="icon icon-sm icon-minus" />
                   </button>
-                  <button v-tooltip="t('node.list.scaleUp')" type="button" class="btn btn-sm role-secondary ml-10" @click="group.ref.scalePool(1)">
+                  <button v-tooltip="t('node.list.scaleUp')" :disabled="!group.ref.canScaleUpPool()" type="button" class="btn btn-sm role-secondary ml-10" @click="group.ref.scalePool(1)">
                     <i class="icon icon-sm icon-plus" />
                   </button>
                 </template>

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

@@ -4,7 +4,6 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import FileSelector, { createOnSelected } from '@shell/components/form/FileSelector';
 import { set } from '@shell/utils/object';
 import isEmpty from 'lodash/isEmpty';
-import { _CREATE } from '@shell/config/query-params';
 
 export default {
   components: {
@@ -24,7 +23,7 @@ export default {
   },
 
   data() {
-    if ( isEmpty(this.value?.spec?.localClusterAuthEndpoint) && this.mode === _CREATE ) {
+    if ( isEmpty(this.value?.spec?.localClusterAuthEndpoint) ) {
       set(this.value, 'spec.localClusterAuthEndpoint', {
         enabled: false,
         caCerts: '',

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

@@ -35,9 +35,10 @@ export default {
       default: () => ({})
     },
 
+    // no credentials are required for elemental machine pools
     credentialId: {
-      type:     String,
-      required: true,
+      type:    String,
+      default: null
     },
 
     mode: {
@@ -219,7 +220,8 @@ export default {
       :machine-pools="machinePools"
       @error="e=>errors = e"
     />
-    <Banner v-else color="info" label="You do not have access to see this machine pool's configuration." />
+    <Banner v-else-if="value.configMissing" color="error" label-key="cluster.machinePool.configNotFound" />
+    <Banner v-else color="info" label-key="cluster.machinePool.noAccessBanner" />
 
     <AdvancedSection :mode="mode" class="advanced">
       <portal-target :name="'advanced-' + uuid" multiple />

package/list/node.vue

@@ -153,8 +153,13 @@ export default {
       :loading="loading"
       v-on="$listeners"
     >
-      <template #sub-row="{fullColspan, row}">
-        <tr class="taints sub-row" :class="{'empty-taints': !row.spec.taints || !row.spec.taints.length}">
+      <template #sub-row="{fullColspan, row, onRowMouseEnter, onRowMouseLeave}">
+        <tr
+          class="taints sub-row"
+          :class="{'empty-taints': !row.spec.taints || !row.spec.taints.length}"
+          @mouseenter="onRowMouseEnter"
+          @mouseleave="onRowMouseLeave"
+        >
           <template v-if="row.spec.taints && row.spec.taints.length">
             <td>&nbsp;</td>
             <td>&nbsp;</td>

package/mixins/resource-manager.js

@@ -74,6 +74,11 @@ export default {
                 // - id param = this.$store.getters['cluster/keyFieldForType'](type)
                 // - id value = new dashboard-store getter, overwritten by steve store getter
                 requestData.forEach((item) => {
+                  // if there's already a prop type, don't overwrite it without storing it first...
+                  // only do this operation once in multiple apply's because the requestData is the same!
+                  if (item.type && !item._type) {
+                    item._type = item.type;
+                  }
                   item.type = type;
                   item.id = `${ item.metadata.namespace }/${ item.metadata.name }`;
                 });

package/models/cluster.x-k8s.io.machinedeployment.js

@@ -159,6 +159,14 @@ export default class CapiMachineDeployment extends SteveModel {
     return notOnlyOfRole(this, this.cluster.machines);
   }
 
+  canScaleUpPool() {
+    return true;
+  }
+
+  get showScalePool() {
+    return this.canScaleDownPool() || this.canScaleUpPool();
+  }
+
   get stateParts() {
     const out = [
       {

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

@@ -432,7 +432,12 @@ export default class MgmtCluster extends HybridModel {
   }
 
   get provClusterId() {
-    const verb = this.isLocal ? 'to' : 'from';
+    const isRKE1 = !!this.spec?.rancherKubernetesEngineConfig;
+    // Note: RKE1 provisioning cluster IDs are in a different format. For example,
+    // RKE2 cluster IDs include the name - fleet-default/cluster-name - whereas an RKE1
+    // cluster has the less human readable management cluster ID in it: fleet-default/c-khk48
+
+    const verb = this.isLocal || isRKE1 ? 'to' : 'from';
     const from = `${ verb }Type`;
     const id = `${ verb }Id`;
 

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.2.1",
+  "version": "0.2.3",
   "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)"