@rancher/shell 1.2.3 → 2.0.1

package/chart/monitoring/prometheus/index.vue

@@ -1,5 +1,4 @@
 <script>
-import isEmpty from 'lodash/isEmpty';
 import { mapGetters } from 'vuex';
 
 import { Banner } from '@components/Banner';
@@ -51,21 +50,19 @@ export default {
       default: () => ({}),
     },
 
-    workloads: {
+    filteredWorkloads: {
       type:    Array,
       default: () => ([]),
     },
   },
 
   data() {
-    return {
-      enablePersistentStorage: !!this.value?.prometheus?.prometheusSpec?.storageSpec?.volumeClaimTemplate?.spec,
-      warnUser:                false,
-    };
+    return { enablePersistentStorage: !!this.value?.prometheus?.prometheusSpec?.storageSpec?.volumeClaimTemplate?.spec };
   },
 
   computed: {
     ...mapGetters(['currentCluster']),
+
     matchExpressions: {
       get() {
         const selector = this.value?.prometheus?.prometheusSpec?.storageSpec?.volumeClaimTemplate?.spec?.selector;
@@ -80,42 +77,21 @@ export default {
         }
       }
     },
-    filteredWorkloads() {
-      let { workloads } = this;
-      const { existing = false } = this.$attrs;
-
-      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
-            },
-          }
-        };
-      });
+    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
+          },
+        }
+      }));
     },
 
     podsAndNamespaces() {
@@ -179,6 +155,23 @@ 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;
+      }
     },
   },
 };
@@ -189,8 +182,9 @@ export default {
     <div class="title">
       <h3>{{ t('monitoring.prometheus.title') }}</h3>
     </div>
+    <!-- https://github.com/rancher/dashboard/issues/1167 -->
     <Banner
-      v-if="filteredWorkloads && warnUser"
+      v-if="mappedFilteredWorkloads.length"
       color="warning"
     >
       <template #default>
@@ -199,16 +193,16 @@ export default {
           :raw="true"
         />
         <div
-          v-for="wl in filteredWorkloads"
+          v-for="wl in mappedFilteredWorkloads"
           :key="wl.id"
           class="mt-10"
         >
-          <nuxt-link
+          <router-link
             :to="wl.link"
             class="btn role-tertiary"
           >
             {{ wl.label }}
-          </nuxt-link>
+          </router-link>
         </div>
       </template>
     </Banner>

package/chart/rancher-backup/S3.vue

@@ -2,15 +2,16 @@
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { Checkbox } from '@components/Form/Checkbox';
 import FileSelector from '@shell/components/form/FileSelector';
-import LabeledSelect from '@shell/components/form/LabeledSelect';
+import ResourceLabeledSelect from '@shell/components/form/ResourceLabeledSelect';
 import { mapGetters } from 'vuex';
+import { SECRET } from '@shell/config/types';
 
 export default {
   components: {
     LabeledInput,
     Checkbox,
     FileSelector,
-    LabeledSelect,
+    ResourceLabeledSelect,
   },
 
   props: {
@@ -25,10 +26,10 @@ export default {
       default: 'create'
     },
 
-    secrets: {
-      type:    Array,
-      default: () => []
-    }
+  },
+
+  data() {
+    return { SECRET };
   },
 
   mounted() {
@@ -44,6 +45,7 @@ export default {
       this.$emit('valid', this.valid);
     }
   },
+
   computed: {
     credentialSecret: {
       get() {
@@ -75,7 +77,7 @@ export default {
         // eslint-disable-next-line no-console
         console.warn(e);
       }
-    }
+    },
   },
 
   created() {
@@ -92,13 +94,13 @@ export default {
   <div>
     <div class="row mb-10">
       <div class="col span-6">
-        <LabeledSelect
+        <ResourceLabeledSelect
           v-model="credentialSecret"
           :get-option-label="opt=>opt.metadata.name || ''"
           option-key="id"
           :mode="mode"
-          :options="secrets"
           :label="t('backupRestoreOperator.s3.credentialSecretName')"
+          :resource-type="SECRET"
         />
       </div>
       <div class="col span-6">

package/chart/rancher-backup/index.vue

@@ -7,10 +7,9 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import { Banner } from '@components/Banner';
 import { get } from '@shell/utils/object';
 import { allHash } from '@shell/utils/promise';
-import { STORAGE_CLASS, SECRET, PV } from '@shell/config/types';
+import { STORAGE_CLASS, 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: {
@@ -19,8 +18,7 @@ export default {
     S3,
     LabeledInput,
     LabeledSelect,
-    Banner,
-    ChartPsp
+    Banner
   },
 
   hasTabs: true,
@@ -43,10 +41,8 @@ export default {
     const hash = await allHash({
       storageClasses:    this.$store.dispatch('cluster/findAll', { type: STORAGE_CLASS }),
       persistentVolumes: this.$store.dispatch('cluster/findAll', { type: PV }),
-      secrets:           this.$store.dispatch('cluster/findAll', { type: SECRET }),
     });
 
-    this.secrets = hash.secrets;
     this.storageClasses = hash.storageClasses;
     this.persistentVolumes = hash.persistentVolumes;
 
@@ -67,7 +63,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() {
@@ -91,10 +87,23 @@ export default {
 
   watch: {
     storageSource(neu) {
+      if (!this.value.persistence) {
+        this.value.persistence = {};
+      }
+      if (!this.value.s3) {
+        this.value.s3 = {};
+      }
       switch (neu) {
       case 'pickSC':
         this.value.persistence.enabled = true;
         this.value.s3.enabled = false;
+        if (this.value.persistence.storageClass) {
+          const matchedStorageClass = this.storageClasses.find((sc) => sc.id === this.value.persistence.storageClass);
+
+          if (matchedStorageClass) {
+            this.storageClass = matchedStorageClass;
+          }
+        }
         if (this.defaultStorageClass && (!this.value.persistence.storageClass || this.value.persistence.storageClass === '-' )) {
           this.value.persistence.storageClass = this.defaultStorageClass.id;
           this.storageClass = this.defaultStorageClass;
@@ -157,7 +166,7 @@ export default {
     },
     updatePageValid(update) {
       this.$emit('valid', update);
-    }
+    },
   },
   get
 };
@@ -169,12 +178,6 @@ 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')"
@@ -190,7 +193,6 @@ export default {
       <S3
         v-if="storageSource==='s3'"
         :value="value.s3"
-        :secrets="secrets"
         :mode="mode"
         @valid="updatePageValid($event)"
       />
@@ -208,6 +210,7 @@ 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/__tests__/harvester.test.ts

@@ -0,0 +1,18 @@
+import { mount } from '@vue/test-utils';
+import HarvesterCloudCreds from '@shell/cloud-credential/harvester.vue';
+
+const mockStore = { getters: { 'i18n/t': jest.fn() } };
+
+describe('cloud credentials: Harvester', () => {
+  const wrapper = mount(HarvesterCloudCreds, {
+    propsData: { value: {} },
+    mocks:     { $store: mockStore }
+  });
+
+  it('should display the warning banner for token expiration', async() => {
+    const warningBanner = wrapper.find('[data-testid="harvester-token-expiration-warning-banner"]');
+
+    expect(warningBanner.exists()).toBe(true);
+    expect(warningBanner.isVisible()).toBe(true);
+  });
+});

package/cloud-credential/azure.vue

@@ -2,11 +2,9 @@
 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],
@@ -59,21 +57,10 @@ export default {
         return true;
       } catch (e) {
         if (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]);
+          const parsed = parseAzureError(e.error);
 
-                return { errors: [errorObj.error_description] };
-              } catch (e) {}
-            }
+          if (parsed) {
+            return { errors: [parsed] };
           }
         }
 

package/cloud-credential/generic.vue

@@ -3,10 +3,13 @@ import CreateEditView from '@shell/mixins/create-edit-view';
 import KeyValue from '@shell/components/form/KeyValue';
 import { Banner } from '@components/Banner';
 import { simplify, iffyFields, likelyFields } from '@shell/store/plugins';
+import Loading from '@shell/components/Loading';
 
 export default {
-  components: { KeyValue, Banner },
-  mixins:     [CreateEditView],
+  components: {
+    KeyValue, Banner, Loading
+  },
+  mixins: [CreateEditView],
 
   props: {
     driverName: {
@@ -15,19 +18,19 @@ export default {
     }
   },
 
-  data() {
+  async fetch() {
     let keyOptions = [];
 
-    const normanType = this.$store.getters['plugins/credentialFieldForDriver'](this.driverName);
-    const normanSchema = this.$store.getters['rancher/schemaFor'](`${ normanType }credentialconfig`);
+    const { normanSchema } = this;
 
     if ( normanSchema?.resourceFields ) {
       keyOptions = Object.keys(normanSchema.resourceFields);
     } else {
-      keyOptions = this.$store.getters['plugins/fieldNamesForDriver'](this.driverName);
+      keyOptions = await this.$store.getters['plugins/fieldNamesForDriver'](this.driverName);
     }
 
-    // Prepopulate empty values for keys that sound like they're cloud-credential-ey
+    this.keyOptions = keyOptions;
+
     const keys = [];
 
     for ( const k of keyOptions ) {
@@ -43,11 +46,16 @@ export default {
         this.value.setData(k, '');
       }
     }
+  },
+
+  data() {
+    const normanType = this.$store.getters['plugins/credentialFieldForDriver'](this.driverName);
+    const normanSchema = this.$store.getters['rancher/schemaFor'](`${ normanType }credentialconfig`);
 
     return {
       hasSupport: !!normanSchema,
-      keyOptions,
       errors:     null,
+      normanSchema,
     };
   },
 
@@ -67,7 +75,8 @@ export default {
 </script>
 
 <template>
-  <div>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
     <Banner
       v-if="!hasSupport"
       color="info"

package/cloud-credential/harvester.vue

@@ -1,12 +1,13 @@
 <script>
 import CreateEditView from '@shell/mixins/create-edit-view';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { Banner } from '@components/Banner';
 
 import { get, set } from '@shell/utils/object';
 import { MANAGEMENT, VIRTUAL_HARVESTER_PROVIDER } from '@shell/config/types';
 
 export default {
-  components: { LabeledSelect },
+  components: { LabeledSelect, Banner },
   mixins:     [CreateEditView],
 
   async fetch() {
@@ -47,11 +48,11 @@ export default {
 
       const currentCluster = this.$store.getters['management/all'](MANAGEMENT.CLUSTER).find((x) => x.id === neu);
 
-      this.$nuxt.$loading.start();
+      window.$globalApp.$loading.start();
 
       const kubeconfigContent = await currentCluster.generateKubeConfig();
 
-      this.$nuxt.$loading.finish();
+      window.$globalApp.$loading.finish();
 
       this.value.setData('kubeconfigContent', kubeconfigContent);
     },
@@ -97,6 +98,13 @@ export default {
 
 <template>
   <div>
+    <div class="row mb-10">
+      <Banner
+        color="warning"
+        label-key="cluster.credential.harvester.tokenExpirationWarning"
+        data-testid="harvester-token-expiration-warning-banner"
+      />
+    </div>
     <div class="row mb-10">
       <div
         class="col span-6"

package/components/AlertTable.vue

@@ -49,6 +49,7 @@ export default {
     ];
 
     return {
+      inStore:            this.$store.getters['currentProduct'].inStore,
       alertManagerPoller: new Poller(
         this.loadAlertManagerEvents,
         ALERTMANAGER_POLL_RATE_MS,
@@ -69,15 +70,24 @@ export default {
   },
 
   methods: {
-    async loadAlertManagerEvents() {
-      const inStore = this.$store.getters['currentProduct'].inStore;
-      const alertsEvents = await this.$store.dispatch(
-        `${ inStore }/request`,
-        { url: `/k8s/clusters/${ this.currentCluster.id }/api/v1/namespaces/${ this.monitoringNamespace }/services/http:${ this.alertServiceEndpoint }:9093/proxy/api/v1/alerts` }
+    async fetchAlertManagerEvents(version) {
+      return await this.$store.dispatch(
+        `${ this.inStore }/request`,
+        { url: `/k8s/clusters/${ this.currentCluster.id }/api/v1/namespaces/${ this.monitoringNamespace }/services/http:${ this.alertServiceEndpoint }:9093/proxy/api/${ version }/alerts` }
       );
+    },
+
+    async loadAlertManagerEvents() {
+      let alertEvents;
+
+      try {
+        alertEvents = await this.fetchAlertManagerEvents('v2');
+      } catch (err) {
+        alertEvents = await this.fetchAlertManagerEvents('v1').then((res) => res?.data);
+      }
 
-      if (alertsEvents.data) {
-        this.allAlerts = alertsEvents.data;
+      if (alertEvents) {
+        this.allAlerts = alertEvents;
       }
     },
 

package/components/AppModal.vue

@@ -0,0 +1,167 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name:         'AppModal',
+  inheritAttrs: false,
+  props:        {
+    /**
+     * If set to false, it will not be possible to close modal by clicking on
+     * the background or by pressing Esc key.
+     */
+    clickToClose: {
+      type:    Boolean,
+      default: true,
+    },
+    /**
+     * Width in pixels or percents (50, "50px", "50%").
+     *
+     * Supported string values are <number>% and <number>px
+     */
+    width: {
+      type:    [Number, String],
+      default: 600,
+      validator(value) {
+        if (typeof value === 'number') {
+          return value > 0;
+        }
+
+        if (typeof value === 'string') {
+          return /^(0*(?:[1-9][0-9]*|0)\.?\d*)+(px|%)$/.test(value);
+        }
+
+        return false;
+      }
+    },
+    /**
+     * List of class that will be applied to the modal window
+     */
+    customClass: {
+      type:    String,
+      default: '',
+    },
+    /**
+     * Style that will be applied to the modal window
+     */
+    styles: {
+      type:    String,
+      default: '',
+    },
+    /**
+     * Name of the modal
+     */
+    name: {
+      type:    String,
+      default: '',
+    }
+  },
+  computed: {
+    modalWidth(): string {
+      const uom = typeof (this.width) === 'number' ? 'px' : '';
+
+      return `${ this.width }${ uom }`;
+    },
+    stylesPropToObj(): object {
+      return this.styles.split(';')
+        .map((line) => line.trim().split(':'))
+        .reduce((lines, [key, val]) => {
+          return {
+            ...lines,
+            [key]: val
+          };
+        }, { });
+    },
+    modalStyles(): object {
+      return {
+        width: this.modalWidth,
+        ...this.stylesPropToObj,
+      };
+    }
+  },
+  mounted() {
+    document.addEventListener('keydown', this.handleEscapeKey);
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.handleEscapeKey);
+  },
+  methods: {
+    handleClickOutside(event: MouseEvent) {
+      if (
+        this.clickToClose &&
+        this.$refs.modalRef &&
+        !(this.$refs.modalRef as HTMLElement).contains(event.target as Node)
+      ) {
+        this.$emit('close');
+      }
+    },
+    handleEscapeKey(event: KeyboardEvent) {
+      if (this.clickToClose && event.key === 'Escape') {
+        this.$emit('close');
+      }
+    }
+  }
+});
+</script>
+
+<template>
+  <mounting-portal
+    mountTo="#modals"
+    name="source"
+    append
+  >
+    <transition
+      name="modal-fade"
+      appear
+    >
+      <div
+        class="modal-overlay"
+        :data-modal="name"
+        @click="handleClickOutside"
+      >
+        <div
+          v-bind="$attrs"
+          ref="modalRef"
+          :class="customClass"
+          class="modal-container"
+          :style="modalStyles"
+          @click.stop
+        >
+          <slot><!--Empty content--></slot>
+        </div>
+      </div>
+    </transition>
+  </mounting-portal>
+</template>
+
+<style lang="scss">
+  .modal-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--overlay-bg);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 20;
+
+    .modal-container {
+      background-color: var(--modal-bg);
+      border-radius: var(--border-radius);
+      max-height: 95vh;
+      overflow: auto;
+      border: 2px solid var(--modal-border);
+    }
+  }
+
+  .modal-fade-enter-active,
+  .modal-fade-leave-active {
+    transition: opacity 200ms;
+  }
+
+  .modal-fade-enter,
+  .modal-fade-leave-to {
+    opacity: 0;
+  }
+</style>