@rancher/shell 0.5.2 → 1.2.0

package/babel.config.js

@@ -10,13 +10,7 @@ module.exports = function(api) {
       { targets: { node: 'current' } }
     ]
   ];
-  const env = {
-    test: {
-      presets: [[
-        '@babel/env', { targets: { node: 'current' } }
-      ]]
-    }
-  };
+  const env = { test: { presets: [['@babel/env', { targets: { node: 'current' } }]] } };
 
   const plugins = [];
 

package/chart/gatekeeper.vue

@@ -1,11 +1,14 @@
 <script>
 import UnitInput from '@shell/components/form/UnitInput';
+import ChartPsp from '@shell/components/ChartPsp';
 import { Checkbox } from '@components/Form/Checkbox';
 import { mapGetters } from 'vuex';
 
 export default {
-  components: { UnitInput, Checkbox },
-  props:      {
+  components: {
+    UnitInput, ChartPsp, Checkbox
+  },
+  props: {
     value: {
       type:    Object,
       default: () => {
@@ -57,6 +60,12 @@ export default {
       </div>
     </div>
 
+    <!-- Conditionally display PSP checkbox -->
+    <ChartPsp
+      :value="value"
+      :cluster="currentCluster"
+    />
+
     <template v-if="crdValues">
       <!-- gatekeeper versions <1.0.2 do not have this option -->
       <Checkbox

package/chart/istio.vue

@@ -6,6 +6,7 @@ import YamlEditor from '@shell/components/YamlEditor';
 import { mapGetters } from 'vuex';
 import FileSelector from '@shell/components/form/FileSelector';
 import { Banner } from '@components/Banner';
+import ChartPsp from '@shell/components/ChartPsp';
 
 const defaultOverlayFile = `#apiVersion: install.istio.io/v1alpha1
 #kind: IstioOperator
@@ -53,7 +54,8 @@ export default {
     Checkbox,
     FileSelector,
     YamlEditor,
-    Banner
+    Banner,
+    ChartPsp
   },
 
   props: {
@@ -138,6 +140,13 @@ export default {
 
 <template>
   <div>
+    <!-- Conditionally display PSP checkbox -->
+    <ChartPsp
+      :value="value"
+      :title="t('catalog.chart.global')"
+      :cluster="currentCluster"
+    />
+
     <h3>
       {{ t('istio.titles.components') }}
     </h3>

package/chart/logging/index.vue

@@ -2,10 +2,13 @@
 import { mapGetters } from 'vuex';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { Checkbox } from '@components/Form/Checkbox';
+import ChartPsp from '@shell/components/ChartPsp';
 
 export default {
-  components: { Checkbox, LabeledInput },
-  props:      {
+  components: {
+    Checkbox, LabeledInput, ChartPsp
+  },
+  props: {
     value: {
       type:    Object,
       default: () => {
@@ -80,5 +83,11 @@ export default {
         />
       </div>
     </div>
+
+    <!-- Conditionally display PSP checkbox -->
+    <ChartPsp
+      :value="value"
+      :cluster="currentCluster"
+    />
   </div>
 </template>

package/chart/monitoring/alerting/index.vue

@@ -5,6 +5,8 @@ import { Checkbox } from '@components/Form/Checkbox';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { RadioGroup } from '@components/Form/Radio';
 
+const DEFAULT_MONITORING_NAMESPACE = 'cattle-monitoring-system';
+
 export default {
   components: {
     Checkbox,
@@ -18,7 +20,7 @@ export default {
       default: 'create',
     },
 
-    monitoringSecrets: {
+    secrets: {
       type:    Array,
       default: () => [],
     },
@@ -41,7 +43,12 @@ export default {
 
   computed: {
     allSecrets() {
-      return this.monitoringSecrets
+      const { secrets } = this;
+
+      return secrets
+        .filter(
+          (sec) => sec.metadata.namespace === DEFAULT_MONITORING_NAMESPACE
+        )
         .map((sec) => ({ label: sec.metadata.name, value: sec.metadata.name }));
     },
 
@@ -55,15 +62,22 @@ export default {
     },
 
     existingSecret() {
-      return this.monitoringSecrets
-        .find((sec) => sec?.metadata?.name === 'alertmanager-rancher-monitoring-alertmanager');
+      return this.secrets.find(
+        (sec) => sec?.metadata?.name ===
+            'alertmanager-rancher-monitoring-alertmanager' &&
+          sec?.metadata?.namespace === DEFAULT_MONITORING_NAMESPACE
+      );
     },
 
     filteredSecrets() {
+      const { secrets } = this;
       const filtered = [];
 
-      this.monitoringSecrets.forEach((secret) => {
-        if ( secret.metadata.name ) {
+      secrets.forEach((secret) => {
+        if (
+          secret.metadata.name &&
+          secret.metadata.namespace === DEFAULT_MONITORING_NAMESPACE
+        ) {
           filtered.push(secret.metadata.name);
         }
       });
@@ -79,7 +93,7 @@ export default {
   },
 
   watch: {
-    filteredSecrets(newValue) {
+    filteredSecrets(newValue, oldValue) {
       if (isEmpty(newValue)) {
         this.$set(
           this.value.alertmanager.alertmanagerSpec,

package/chart/monitoring/grafana/index.vue

@@ -87,9 +87,6 @@ export default {
 
       return (storageClasses || []).length >= 1;
     },
-    showGrafanaResourceConfig() {
-      return this.value?.grafana?.resources?.requests && this.value?.grafana?.resources?.limits;
-    }
   },
   watch: {
     persistentStorageType(newType, oldType) {
@@ -139,7 +136,7 @@ export default {
         newValsOut = {
           accessModes:      null,
           storageClassName: null,
-          size:             '10Gi',
+          size:             null,
           subPath:          null,
           type:             'pvc',
           annotations:      null,
@@ -151,7 +148,7 @@ export default {
         newValsOut = {
           accessModes:      null,
           storageClassName: null,
-          size:             '10Gi',
+          size:             null,
           subPath:          null,
           type:             'statefulset',
           enabled:          true,
@@ -175,58 +172,6 @@ export default {
       <h3>{{ t('monitoring.grafana.title') }}</h3>
     </div>
     <div class="grafana-config">
-      <!-- Request and Limits -->
-      <!-- Note, we use the same labels for resource config as Prometheus since they are generic -->
-      <div
-        v-if="showGrafanaResourceConfig"
-        class="row"
-      >
-        <div class="col span-12 mt-5">
-          <h4 class="mb-0">
-            {{ t('monitoring.prometheus.config.resourceLimits') }}
-          </h4>
-        </div>
-      </div>
-      <div
-        v-if="showGrafanaResourceConfig"
-        class="row"
-      >
-        <div class="col span-6">
-          <LabeledInput
-            v-model="value.grafana.resources.requests.cpu"
-            data-testid="input-grafana-requests-cpu"
-            :label="t('monitoring.prometheus.config.requests.cpu')"
-            :mode="mode"
-          />
-        </div>
-        <div class="col span-6">
-          <LabeledInput
-            v-model="value.grafana.resources.requests.memory"
-            data-testid="input-grafana-requests-memory"
-            :label="t('monitoring.prometheus.config.requests.memory')"
-            :mode="mode"
-          />
-        </div>
-      </div>
-      <div class="row">
-        <div class="col span-6">
-          <LabeledInput
-            v-model="value.grafana.resources.limits.cpu"
-            data-testid="input-grafana-limits-cpu"
-            :label="t('monitoring.prometheus.config.limits.cpu')"
-            :mode="mode"
-          />
-        </div>
-        <div class="col span-6">
-          <LabeledInput
-            v-model="value.grafana.resources.limits.memory"
-            data-testid="input-grafana-limits-memory"
-            :label="t('monitoring.prometheus.config.limits.memory')"
-            :mode="mode"
-          />
-        </div>
-      </div>
-
       <div class="row pt-10 pb-10">
         <div class="col span-12 persistent-storage-config">
           <RadioGroup

package/chart/monitoring/index.vue

@@ -12,10 +12,10 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import Loading from '@shell/components/Loading';
 import Prometheus from '@shell/chart/monitoring/prometheus';
 import Tab from '@shell/components/Tabbed/Tab';
+import ChartPsp from '@shell/components/ChartPsp';
 
 import { allHash } from '@shell/utils/promise';
 import { STORAGE_CLASS, PVC, SECRET, WORKLOAD_TYPES } from '@shell/config/types';
-import { CATTLE_MONITORING_NAMESPACE } from '@shell/utils/monitoring';
 
 export default {
   components: {
@@ -26,7 +26,8 @@ export default {
     LabeledInput,
     Loading,
     Prometheus,
-    Tab
+    Tab,
+    ChartPsp
   },
 
   hasTabs: true,
@@ -53,40 +54,17 @@ export default {
   async fetch() {
     const { $store } = this;
 
-    // Fetch all the resources required for all the tabs asyncronously up front
-    const hashPromises = {
-      namespaces:        $store.getters['namespaces'](),
-      pvcs:              $store.dispatch('cluster/findAll', { type: PVC }),
-      // Used in Alerting tab
-      monitoringSecrets: $store.dispatch('cluster/findAll', {
-        type: SECRET,
-        opt:  { namespaced: CATTLE_MONITORING_NAMESPACE }
-      }),
+    const hash = await allHash({
+      namespaces:     $store.getters['namespaces'](),
+      pvcs:           $store.dispatch('cluster/findAll', { type: PVC }),
+      secrets:        $store.dispatch('cluster/findAll', { type: SECRET }),
       storageClasses: $store.dispatch('cluster/findAll', { type: STORAGE_CLASS }),
-    };
-
-    // Are we editing an existing chart?
-    // (ported from shell/chart/monitoring/prometheus/index.vue)
-    const { existing = false } = this.$attrs;
-
-    // If needed, fetch all the workloads that have prometheus operator like containers
-    this.workloadTypes = !existing ? Object.values(WORKLOAD_TYPES) : [];
-
-    this.workloadTypes.forEach((type) => {
-      // We'll use a filter to fetch the results. Atm there's no neat way to differentiate between ALL results and JUST filtered
-      // So to avoid calls to all getting these filtered (and vice-versa) forget type before and after
-      $store.dispatch('cluster/forgetType', type);
-      hashPromises[type] = $store.dispatch('cluster/findAll', {
-        type,
-        opt: {
-          watch:  false,
-          // We're only interested in images with operator like names (note: these will match partial strings)
-          filter: { 'spec.template.spec.containers.image': ['quay.io/coreos/prometheus-operator', 'rancher/coreos-prometheus-operator'] }
-        }
-      });
     });
 
-    const hash = await allHash(hashPromises);
+    await Promise.all(
+      Object.values(WORKLOAD_TYPES).map((type) => this.$store.dispatch('cluster/findAll', { type })
+      )
+    );
 
     this.targetNamespace = hash.namespaces[this.chart.targetNamespace] || false;
 
@@ -98,21 +76,9 @@ export default {
       this.pvcs = hash.pvcs;
     }
 
-    if (!isEmpty(hash.monitoringSecrets)) {
-      this.monitoringSecrets = hash.monitoringSecrets;
+    if (!isEmpty(hash.secrets)) {
+      this.secrets = hash.secrets;
     }
-
-    this.workloadTypes.forEach((type) => {
-      if (hash[type]) {
-        this.filteredWorkloads.push(...hash[type]);
-      }
-    });
-  },
-
-  beforeDestroy() {
-    this.workloadTypes.forEach((type) => {
-      this.$store.dispatch('cluster/forgetType', type);
-    });
   },
 
   data() {
@@ -135,11 +101,9 @@ export default {
       disableAggregateRoles: false,
       prometheusResources:   [],
       pvcs:                  [],
-      monitoringSecrets:     [],
+      secrets:               [],
       storageClasses:        [],
       targetNamespace:       null,
-      filteredWorkloads:     [],
-      workloadTypes:         []
     };
   },
 
@@ -148,6 +112,10 @@ export default {
     provider() {
       return this.currentCluster.status.provider.toLowerCase();
     },
+    workloads() {
+      return Object.values(WORKLOAD_TYPES).flatMap((type) => this.$store.getters['cluster/all'](type)
+      );
+    },
   },
 
   watch: {
@@ -297,6 +265,12 @@ export default {
             />
           </div>
         </div>
+
+        <!-- Conditionally display PSP checkbox -->
+        <ChartPsp
+          :value="value"
+          :cluster="currentCluster"
+        />
       </div>
     </Tab>
     <Tab
@@ -312,7 +286,7 @@ export default {
           :mode="mode"
           :storage-classes="storageClasses"
           :prometheus-pods="prometheusResources"
-          :filteredWorkloads="filteredWorkloads"
+          :workloads="workloads"
         />
       </div>
     </Tab>
@@ -325,7 +299,7 @@ export default {
         <Alerting
           v-model="value"
           :mode="mode"
-          :monitoringSecrets="monitoringSecrets"
+          :secrets="secrets"
         />
       </div>
     </Tab>

package/chart/monitoring/prometheus/index.vue

@@ -1,4 +1,5 @@
 <script>
+import isEmpty from 'lodash/isEmpty';
 import { mapGetters } from 'vuex';
 
 import { Banner } from '@components/Banner';
@@ -50,19 +51,21 @@ export default {
       default: () => ({}),
     },
 
-    filteredWorkloads: {
+    workloads: {
       type:    Array,
       default: () => ([]),
     },
   },
 
   data() {
-    return { enablePersistentStorage: !!this.value?.prometheus?.prometheusSpec?.storageSpec?.volumeClaimTemplate?.spec };
+    return {
+      enablePersistentStorage: !!this.value?.prometheus?.prometheusSpec?.storageSpec?.volumeClaimTemplate?.spec,
+      warnUser:                false,
+    };
   },
 
   computed: {
     ...mapGetters(['currentCluster']),
-
     matchExpressions: {
       get() {
         const selector = this.value?.prometheus?.prometheusSpec?.storageSpec?.volumeClaimTemplate?.spec?.selector;
@@ -77,21 +80,42 @@ export default {
         }
       }
     },
+    filteredWorkloads() {
+      let { workloads } = this;
+      const { existing = false } = this.$attrs;
 
-    mappedFilteredWorkloads() {
-      return this.filteredWorkloads.map((wl) => ({
-        label: wl.id,
-        link:  {
-          name:   'c-cluster-product-resource-namespace-id',
-          params: {
-            cluster:   this.currentCluster.id,
-            product:   'explorer',
-            resource:  wl.type,
-            namespace: wl.metadata.namespace,
-            id:        wl.metadata.name
-          },
-        }
-      }));
+      if (!existing) {
+        workloads = workloads.filter((workload) => {
+          if (
+            !isEmpty(workload?.spec?.template?.spec?.containers) &&
+            (workload.spec.template.spec.containers.find((c) => c.image.includes('quay.io/coreos/prometheus-operator') ||
+              c.image.includes('rancher/coreos-prometheus-operator'))
+            )
+          ) {
+            if (!this.warnUser) {
+              this.warnUser = true;
+            }
+
+            return workload;
+          }
+        });
+      }
+
+      return workloads.map((wl) => {
+        return {
+          label: wl.id,
+          link:  {
+            name:   'c-cluster-product-resource-namespace-id',
+            params: {
+              cluster:   this.currentCluster.id,
+              product:   'explorer',
+              resource:  wl.type,
+              namespace: wl.metadata.namespace,
+              id:        wl.metadata.name
+            },
+          }
+        };
+      });
     },
 
     podsAndNamespaces() {
@@ -155,23 +179,6 @@ export default {
 
       this.$set(storageSpec.selector, 'matchLabels', matchLabels);
       this.$set(storageSpec.selector, 'matchExpressions', matchExpressions);
-
-      // Remove an empty selector object if present
-      // User can add a selector and then remove the selector - this will leave an empty structure as above
-      // We want to ensure we remove .selector.matchExpressions, .selector.matchLabels, and .selector if empty
-      // See: https://github.com/rancher/dashboard/issues/10016
-
-      if (storageSpec.selector.matchExpressions?.length === 0) {
-        delete storageSpec.selector.matchExpressions;
-      }
-
-      if (storageSpec.selector.matchLabels && Object.keys(storageSpec.selector.matchLabels).length === 0) {
-        delete storageSpec.selector.matchLabels;
-      }
-
-      if (Object.keys(storageSpec.selector).length === 0) {
-        delete storageSpec.selector;
-      }
     },
   },
 };
@@ -182,9 +189,8 @@ export default {
     <div class="title">
       <h3>{{ t('monitoring.prometheus.title') }}</h3>
     </div>
-    <!-- https://github.com/rancher/dashboard/issues/1167 -->
     <Banner
-      v-if="mappedFilteredWorkloads.length"
+      v-if="filteredWorkloads && warnUser"
       color="warning"
     >
       <template #default>
@@ -193,7 +199,7 @@ export default {
           :raw="true"
         />
         <div
-          v-for="wl in mappedFilteredWorkloads"
+          v-for="wl in filteredWorkloads"
           :key="wl.id"
           class="mt-10"
         >

package/chart/rancher-backup/index.vue

@@ -10,6 +10,7 @@ import { allHash } from '@shell/utils/promise';
 import { STORAGE_CLASS, SECRET, PV } from '@shell/config/types';
 import { mapGetters } from 'vuex';
 import { STORAGE } from '@shell/config/labels-annotations';
+import ChartPsp from '@shell/components/ChartPsp';
 
 export default {
   components: {
@@ -18,7 +19,8 @@ export default {
     S3,
     LabeledInput,
     LabeledSelect,
-    Banner
+    Banner,
+    ChartPsp
   },
 
   hasTabs: true,
@@ -65,7 +67,7 @@ export default {
 
   computed: {
     defaultStorageClass() {
-      return this.storageClasses.filter((sc) => sc.metadata.annotations?.[STORAGE.DEFAULT_STORAGE_CLASS] && sc.metadata.annotations[STORAGE.DEFAULT_STORAGE_CLASS] !== 'false' )[0] || '';
+      return this.storageClasses.filter((sc) => sc.metadata.annotations[STORAGE.DEFAULT_STORAGE_CLASS] && sc.metadata.annotations[STORAGE.DEFAULT_STORAGE_CLASS] !== 'false' )[0] || '';
     },
 
     availablePVs() {
@@ -167,6 +169,12 @@ export default {
       label="Chart Options"
       name="chartOptions"
     >
+      <!-- Conditionally display PSP checkbox -->
+      <ChartPsp
+        :value="value"
+        :cluster="currentCluster"
+      />
+
       <Banner
         color="info"
         :label="t('backupRestoreOperator.deployment.storage.tip')"
@@ -200,7 +208,6 @@ export default {
                 :status="reclaimWarning ? 'warning' : null"
                 :options="storageClasses"
                 :hover-tooltip="true"
-                data-testid="backup-chart-select-existing-storage-class"
               />
             </div>
             <div class="col span-6">

package/cloud-credential/azure.vue

@@ -2,9 +2,11 @@
 import CreateEditView from '@shell/mixins/create-edit-view';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { azureEnvironments } from '@shell/machine-config/azure';
-import { parseAzureError } from '@shell/utils/azure';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 
+const AZURE_ERROR_MSG_REGEX = /^.*Message=\"(.*)\"$/;
+const AZURE_ERROR_JSON_REGEX = /^.*Response body: ({.*})/;
+
 export default {
   components: { LabeledInput, LabeledSelect },
   mixins:     [CreateEditView],
@@ -57,10 +59,21 @@ export default {
         return true;
       } catch (e) {
         if (e.error) {
-          const parsed = parseAzureError(e.error);
+          // Try and parse the response from Azure a couple of ways
+          const msgMatch = e.error.match(AZURE_ERROR_MSG_REGEX);
+
+          if (msgMatch?.length === 2) {
+            return { errors: [msgMatch[1]] };
+          } else {
+            const jsonMatch = e.error.match(AZURE_ERROR_JSON_REGEX);
+
+            if (jsonMatch?.length === 2) {
+              try {
+                const errorObj = JSON.parse(jsonMatch[1]);
 
-          if (parsed) {
-            return { errors: [parsed] };
+                return { errors: [errorObj.error_description] };
+              } catch (e) {}
+            }
           }
         }
 

package/components/AsyncButton.vue

@@ -273,7 +273,6 @@ export default Vue.extend<{ phase: string}, any, any, any>({
     :data-testid="componentTestid + '-async-button'"
     @click="clicked"
   >
-    <span v-if="mode === 'manual-refresh'">{{ t('action.refresh') }}</span>
     <i
       v-if="displayIcon"
       v-clean-tooltip="tooltip"
@@ -286,11 +285,3 @@ export default Vue.extend<{ phase: string}, any, any, any>({
     />
   </button>
 </template>
-
-<style lang="scss" scoped>
-// refresh mode has icon + text. We need to fix the positioning of the icon and sizing
-.manual-refresh i {
-  margin: 0 0 0 8px !important;
-  font-size: 1rem !important;
-}
-</style>

package/components/Carousel.vue

@@ -282,7 +282,6 @@ export default {
   .slide-content {
     display: flex;
     padding: 30px;
-    height: 100%;
 
     .slide-img {
       width: 150px;