@rancher/shell 0.4.0 → 0.5.1

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/Certificates.vue

@@ -0,0 +1,164 @@
+<script lang="ts">
+import Vue from 'vue';
+import { mapGetters } from 'vuex';
+import ResourceTable from '@shell/components/ResourceTable';
+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 Vue.extend<Data, any, any, any>({
+  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() {
+      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/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/EtcdInfoBanner.vue

@@ -11,7 +11,7 @@ export default {
     const inStore = this.$store.getters['currentProduct'].inStore;
     let monitoringVersion = '';
 
-    if (this.$store.getters[`${ inStore }/canList}`](CATALOG.APP)) {
+    if (this.$store.getters[`${ inStore }/canList`](CATALOG.APP)) {
       try {
         const res = await this.$store.dispatch(`${ inStore }/find`, { type: CATALOG.APP, id: 'cattle-monitoring-system/rancher-monitoring' });
 

package/components/ExplorerProjectsNamespaces.vue

@@ -391,7 +391,7 @@ export default {
     />
     <ResourceTable
       ref="table"
-      class="table"
+      class="table project-namespaces-table"
       v-bind="$attrs"
       :schema="schema"
       :headers="headers"
@@ -505,6 +505,10 @@ export default {
 <style lang="scss" scoped>
 .project-namespaces {
   & ::v-deep {
+    .project-namespaces-table table {
+      table-layout: fixed;
+    }
+
     .project-name {
       line-height: 30px;
     }
@@ -514,6 +518,26 @@ export default {
       flex-direction: row;
       justify-content: space-between;
 
+      .group-tab {
+        max-width: calc(100% - 230px);
+      }
+
+      .project-name {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        span:first-child {
+          padding-right: 8px;
+        }
+
+        span:last-child {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+      }
+
       &.has-description {
         .right {
           margin-top: 5px;

package/components/IconOrSvg.vue

@@ -76,7 +76,7 @@ export default {
           for (let x = 0; x < Object.keys(stylesheet.cssRules).length; x++) {
             const cssRules = stylesheet.cssRules[x];
 
-            if (cssRules.selectorText && ((currTheme === 'light' && cssRules.selectorText.includes('body') &&
+            if (cssRules.selectorText && ((currTheme === 'light' && (cssRules.selectorText.includes('body') || cssRules.selectorText.includes('BODY')) &&
               cssRules.selectorText.includes('.theme-light') && cssRules.style.cssText.includes('--link:')) ||
               (currTheme === 'dark' && cssRules.selectorText.includes('.theme-dark')))) {
               // grab the colors to be used on the icon from the css rules

package/components/LandingPagePreference.vue

@@ -15,10 +15,7 @@ export default {
   },
 
   async fetch() {
-    this.clusters = await this.$store.dispatch('management/findAll', {
-      type: MANAGEMENT.CLUSTER,
-      opt:  { url: MANAGEMENT.CLUSTER }
-    });
+    this.clusters = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER });
   },
 
   data() {

package/components/Questions/index.vue

@@ -258,7 +258,7 @@ export default {
       }
 
       if ( this.tabbed === 'multiple' ) {
-        return this.groups.length > 1;
+        return !!this.groups.length;
       }
 
       return true;

package/components/ResourceDetail/Masthead.vue

@@ -422,6 +422,7 @@ export default {
             <span v-if="value.detailPageHeaderActionOverride && value.detailPageHeaderActionOverride(realMode)">{{ value.detailPageHeaderActionOverride(realMode) }}</span>
             <t
               v-else
+              class="mastehead-resource-title"
               :k="'resourceDetail.header.' + realMode"
               :subtype="resourceSubtype"
               :name="displayName"
@@ -544,6 +545,10 @@ export default {
 
   HEADER {
     margin: 0;
+
+    .title {
+      overflow: hidden;
+    }
   }
 
   .primaryheader {
@@ -553,6 +558,17 @@ export default {
 
     h1 {
       margin: 0;
+      overflow: hidden;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .mastehead-resource-title {
+        padding: 0 8px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
     }
   }
 
@@ -575,9 +591,6 @@ export default {
 
   .masthead-state {
     font-size: initial;
-    display: inline-block;
-    position: relative;
-    top: -2px;
   }
 
   .masthead-istio {