@rancher/shell 0.3.29 → 0.5.0

package/chart/monitoring/index.vue

@@ -15,6 +15,7 @@ import Tab from '@shell/components/Tabbed/Tab';
 
 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: {
@@ -52,17 +53,40 @@ export default {
   async fetch() {
     const { $store } = this;
 
-    const hash = await allHash({
-      namespaces:     $store.getters['namespaces'](),
-      pvcs:           $store.dispatch('cluster/findAll', { type: PVC }),
-      secrets:        $store.dispatch('cluster/findAll', { type: SECRET }),
+    // 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 }
+      }),
       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'] }
+        }
+      });
     });
 
-    await Promise.all(
-      Object.values(WORKLOAD_TYPES).map((type) => this.$store.dispatch('cluster/findAll', { type })
-      )
-    );
+    const hash = await allHash(hashPromises);
 
     this.targetNamespace = hash.namespaces[this.chart.targetNamespace] || false;
 
@@ -74,9 +98,21 @@ export default {
       this.pvcs = hash.pvcs;
     }
 
-    if (!isEmpty(hash.secrets)) {
-      this.secrets = hash.secrets;
+    if (!isEmpty(hash.monitoringSecrets)) {
+      this.monitoringSecrets = hash.monitoringSecrets;
     }
+
+    this.workloadTypes.forEach((type) => {
+      if (hash[type]) {
+        this.filteredWorkloads.push(...hash[type]);
+      }
+    });
+  },
+
+  beforeDestroy() {
+    this.workloadTypes.forEach((type) => {
+      this.$store.dispatch('cluster/forgetType', type);
+    });
   },
 
   data() {
@@ -99,9 +135,11 @@ export default {
       disableAggregateRoles: false,
       prometheusResources:   [],
       pvcs:                  [],
-      secrets:               [],
+      monitoringSecrets:     [],
       storageClasses:        [],
       targetNamespace:       null,
+      filteredWorkloads:     [],
+      workloadTypes:         []
     };
   },
 
@@ -110,10 +148,6 @@ export default {
     provider() {
       return this.currentCluster.status.provider.toLowerCase();
     },
-    workloads() {
-      return Object.values(WORKLOAD_TYPES).flatMap((type) => this.$store.getters['cluster/all'](type)
-      );
-    },
   },
 
   watch: {
@@ -278,7 +312,7 @@ export default {
           :mode="mode"
           :storage-classes="storageClasses"
           :prometheus-pods="prometheusResources"
-          :workloads="workloads"
+          :filteredWorkloads="filteredWorkloads"
         />
       </div>
     </Tab>
@@ -291,7 +325,7 @@ export default {
         <Alerting
           v-model="value"
           :mode="mode"
-          :secrets="secrets"
+          :monitoringSecrets="monitoringSecrets"
         />
       </div>
     </Tab>

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,7 +193,7 @@ export default {
           :raw="true"
         />
         <div
-          v-for="wl in filteredWorkloads"
+          v-for="wl in mappedFilteredWorkloads"
           :key="wl.id"
           class="mt-10"
         >

package/chart/rancher-backup/index.vue

@@ -65,7 +65,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() {
@@ -200,6 +200,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/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/components/AsyncButton.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent, PropType, inject } from 'vue';
 import typeHelper from '@shell/utils/type-helpers';
 
 export const ASYNC_BUTTON_STATES = {
@@ -14,7 +14,13 @@ const TOOLTIP = 'tooltip';
 
 export type AsyncButtonCallback = (success: boolean) => void;
 
-export default Vue.extend<{ phase: string}, any, any, any>({
+interface NonReactiveProps {
+  timer: NodeJS.Timeout | undefined;
+}
+
+const provideProps: NonReactiveProps = { timer: undefined };
+
+export default defineComponent({
   props: {
     /**
      * Mode maps to keys in asyncButton.* translations
@@ -37,7 +43,7 @@ export default Vue.extend<{ phase: string}, any, any, any>({
       default: false,
     },
     type: {
-      type:    String,
+      type:    String as PropType<'button' | 'submit' | 'reset' | undefined>,
       default: 'button'
     },
     tabIndex: {
@@ -113,7 +119,13 @@ export default Vue.extend<{ phase: string}, any, any, any>({
 
   },
 
-  data(): { phase: string, timer?: NodeJS.Timeout} {
+  setup() {
+    const timer = inject('timer', provideProps.timer);
+
+    return { timer };
+  },
+
+  data() {
     return { phase: this.currentPhase };
   },
 
@@ -245,7 +257,7 @@ export default Vue.extend<{ phase: string}, any, any, any>({
         this.phase = (success ? ASYNC_BUTTON_STATES.SUCCESS : ASYNC_BUTTON_STATES.ERROR );
         this.timer = setTimeout(() => {
           this.timerDone();
-        }, this.delay );
+        }, this.delay);
       }
     },
 

package/components/Certificates.vue

@@ -0,0 +1,164 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { mapGetters } from 'vuex';
+import ResourceTable from '@shell/components/ResourceTable.vue';
+import { SECRET } from '@shell/config/types';
+import { NAME as NAME_COL, NAMESPACE as NAMESPACE_COL, AGE, STATE } from '@shell/config/table-headers';
+import Secret, { TYPES } from '@shell/models/secret';
+import { Banner } from '@components/Banner';
+import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
+import { BadgeState } from '@components/BadgeState';
+
+interface Data {
+  schema: Object,
+  headers: Object[],
+  certs: Secret[],
+  pagingParams: {
+    pluralLabel: string,
+    singularLabel: string
+  }
+}
+
+export default defineComponent({
+  components: {
+    ResourceTable, Banner, BadgeState
+  },
+
+  async fetch() {
+    // We're fetching secrets with a filter, this will clash with secrets in other contexts
+    this.$store.dispatch('cluster/forgetType', SECRET);
+
+    this.certs = await this.$store.dispatch('cluster/findAll', {
+      type: SECRET,
+      opt:  {
+        watch:  false,
+        // Note - urlOptions handles filter in a weird way
+        filter: { 'metadata.fields.1': TYPES.TLS }
+      }
+    });
+  },
+
+  data(): Data {
+    return {
+      schema:  this.$store.getters['cluster/schemaFor'](SECRET),
+      headers: [
+        {
+          ...STATE,
+          formatter: null,
+          name:      'certState',
+          sort:      ['certState', 'nameSort'],
+          value:     'certState',
+        },
+        NAME_COL,
+        NAMESPACE_COL,
+        {
+          name:     'cn',
+          labelKey: 'secret.certificate.cn',
+          value:    (row: Secret) => {
+            if (!row.cn) {
+              return;
+            }
+
+            return row.cn + (row.unrepeatedSans.length ? ` ${ this.t('secret.certificate.plusMore', { n: row.unrepeatedSans.length }) }` : '');
+          },
+          sort:   ['cn'],
+          search: ['cn'],
+        }, {
+          name:        'cert-expires2',
+          labelKey:    'secret.certificate.expiresDuration',
+          value:       (row: Secret) => row.timeTilExpirationDate,
+          formatter:   'LiveDate',
+          sort:        ['timeTilExpiration'],
+          search:      ['timeTilExpiration'],
+          defaultSort: true,
+          width:       100
+        }, {
+          name:      'cert-expires',
+          labelKey:  'secret.certificate.expiresOn',
+          value:     'cachedCertInfo.notAfter',
+          formatter: 'Date',
+          sort:      ['cachedCertInfo.notAfter'],
+          search:    ['cachedCertInfo.notAfter'],
+        }, {
+          name:     'cert-lifetime',
+          labelKey: 'secret.certificate.lifetime',
+          value:    (row: Secret) => row.certLifetime,
+          sort:     ['certLifetime'],
+          search:   ['certLifetime'],
+        },
+        AGE
+      ],
+      certs:        [],
+      pagingParams: {
+        pluralLabel:   this.t('secret.certificate.certificates'),
+        singularLabel: this.t('secret.certificate.certificate')
+      }
+    };
+  },
+
+  computed: {
+    ...mapGetters(['isAllNamespaces']),
+
+    expiredData(): any {
+      let expiring = 0;
+      let expired = 0;
+
+      for (let i = 0; i < this.certs.length; i++) {
+        const cert = this.certs[i];
+
+        if (cert.certState === STATES_ENUM.EXPIRING) {
+          expiring++;
+        }
+        if (cert.certState === STATES_ENUM.EXPIRED) {
+          expired++;
+        }
+      }
+
+      const filterWarning = !this.isAllNamespaces ? this.t('secret.certificate.warnings.filtered') : '';
+
+      return {
+        expiring: expiring ? this.t('secret.certificate.warnings.expiring', { count: expiring, filtered: !this.isAllNamespaces }) + filterWarning : '',
+        expired:  expired ? this.t('secret.certificate.warnings.expired', { count: expired, filtered: !this.isAllNamespaces }) + filterWarning : '',
+      };
+    }
+  },
+
+  beforeDestroy() {
+    // We're fetching secrets with a filter, clear it so as to not clash with other contexts
+    this.$store.dispatch('cluster/forgetType', SECRET);
+  },
+
+});
+</script>
+
+<template>
+  <div>
+    <Banner
+      v-if="expiredData.expiring"
+      color="warning"
+      :label="expiredData.expiring"
+    />
+    <Banner
+      v-if="expiredData.expired"
+      color="error"
+      :label="expiredData.expired"
+    />
+    <ResourceTable
+      :loading="$fetchState.pending"
+      :schema="schema"
+      :headers="headers"
+      :rows="certs"
+      :paging-label="'secret.certificate.paging'"
+      :paging-params="pagingParams"
+    >
+      <template #col:certState="{row}">
+        <td>
+          <BadgeState
+            :color="row.certStateBackground"
+            :label="row.certStateDisplay"
+          />
+        </td>
+      </template>
+    </ResourceTable>
+  </div>
+</template>

package/components/CodeMirror.vue

@@ -130,28 +130,26 @@ export default {
 </script>
 
 <template>
-  <client-only placeholder=" Loading...">
-    <div
-      class="code-mirror"
-      :class="{['as-text-area']: asTextArea}"
-    >
-      <codemirror
-        v-if="loaded"
-        ref="codeMirrorRef"
-        :value="value"
-        :options="combinedOptions"
-        :disabled="isDisabled"
-        @ready="onReady"
-        @input="onInput"
-        @changes="onChanges"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-      <div v-else>
-        Loading...
-      </div>
+  <div
+    class="code-mirror"
+    :class="{['as-text-area']: asTextArea}"
+  >
+    <codemirror
+      v-if="loaded"
+      ref="codeMirrorRef"
+      :value="value"
+      :options="combinedOptions"
+      :disabled="isDisabled"
+      @ready="onReady"
+      @input="onInput"
+      @changes="onChanges"
+      @focus="onFocus"
+      @blur="onBlur"
+    />
+    <div v-else>
+      Loading...
     </div>
-  </client-only>
+  </div>
 </template>
 
 <style lang="scss">

package/components/CopyCode.vue

@@ -1,5 +1,7 @@
 <script>
 import { isArray } from '@shell/utils/array';
+import { copyTextToClipboard } from '@shell/utils/clipboard';
+import { exceptionToErrorsArray } from '@shell/utils/error';
 
 function flatten(node) {
   if ( node.text ) {
@@ -27,14 +29,16 @@ export default {
 
       const content = flatten(this.$slots.default).trim();
 
-      this.$copyText(content).then(() => {
+      copyTextToClipboard(content).then(() => {
         this.copied = true;
 
         setTimeout(() => {
           this.copied = false;
         }, 2000);
+        this.$emit('copied');
+      }).catch((e) => {
+        this.$emit('error', exceptionToErrorsArray(e));
       });
-      this.$emit('copied');
     },
   },
 

package/components/CopyToClipboard.vue

@@ -1,5 +1,6 @@
 <script>
 import AsyncButton from '@shell/components/AsyncButton';
+import { copyTextToClipboard } from '@shell/utils/clipboard';
 
 export default {
   components: { AsyncButton },
@@ -18,7 +19,7 @@ export default {
 
   methods: {
     clicked(buttonCb) {
-      this.$copyText(this.text).then(() => {
+      copyTextToClipboard(this.text).then(() => {
         buttonCb(true);
       }).catch(() => {
         buttonCb(false);

package/components/CopyToClipboardText.vue

@@ -1,4 +1,6 @@
 <script>
+import { copyTextToClipboard } from '@shell/utils/clipboard';
+import { exceptionToErrorsArray } from '@shell/utils/error';
 export default {
   props: {
     text: {
@@ -20,17 +22,20 @@ export default {
     clicked(event) {
       if (!this.copied) {
         event.preventDefault();
-        this.$copyText(this.text);
-        this.copied = true;
+        copyTextToClipboard(this.text).then(() => {
+          this.copied = true;
 
-        let t = event.target;
+          let t = event.target;
 
-        if (t.tagName === 'I') {
-          t = t.parentElement || t;
-        }
-        setTimeout(() => {
-          this.copied = false;
-        }, 500);
+          if (t.tagName === 'I') {
+            t = t.parentElement || t;
+          }
+          setTimeout(() => {
+            this.copied = false;
+          }, 500);
+        }).catch((e) => {
+          this.$emit('error', exceptionToErrorsArray(e));
+        });
       }
     },
   }

package/components/CruResource.vue

@@ -435,6 +435,7 @@ export default {
           v-for="(err, i) in errors"
           :key="i"
           color="error"
+          :data-testid="`error-banner${i}`"
           :label="stringify(mappedErrors[err].message)"
           :icon="mappedErrors[err].icon"
           :closable="true"

package/components/DraggableZone.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { mapState } from 'vuex';
 import { BOTTOM, CENTER, LEFT, RIGHT } from '@shell/utils/position';
 
@@ -14,7 +14,7 @@ interface Data {
   drag: Drag;
 }
 
-export default Vue.extend({
+export default defineComponent({
   data(): Data {
     return {
       drag: {