@rancher/shell 1.2.0 → 2.0.0

package/edit/monitoring.coreos.com.alertmanagerconfig/index.vue

@@ -13,6 +13,7 @@ import RouteConfig from './routeConfig';
 import ResourceTable from '@shell/components/ResourceTable';
 import ActionMenu from '@shell/components/ActionMenu';
 import { _CREATE, _EDIT, _VIEW, _CONFIG } from '@shell/config/query-params';
+import { fetchAlertManagerConfigSpecs } from '@shell/utils/alertmanagerconfig';
 
 export default {
   components: {
@@ -32,11 +33,16 @@ export default {
     const inStore = this.$store.getters['currentProduct'].inStore;
     const alertmanagerConfigId = this.value.id;
 
+    const { receiverSchema, routeSchema } = await fetchAlertManagerConfigSpecs(this.$store);
+
+    this.receiverSchema = receiverSchema;
+    this.routeSchema = routeSchema;
+
     const alertmanagerConfigResource = await this.$store.dispatch(`${ inStore }/find`, { type: MONITORING.ALERTMANAGERCONFIG, id: alertmanagerConfigId });
 
     this.alertmanagerConfigId = alertmanagerConfigId;
     this.alertmanagerConfigResource = alertmanagerConfigResource;
-    this.alertmanagerConfigDetailRoute = alertmanagerConfigResource._detailLocation;
+    this.alertmanagerConfigDetailRoute = alertmanagerConfigResource?._detailLocation;
 
     const alertmanagerConfigActions = alertmanagerConfigResource.availableActions;
     const receiverActions = alertmanagerConfigResource.getReceiverActions(alertmanagerConfigActions);
@@ -48,8 +54,6 @@ export default {
     this.value.applyDefaults();
 
     const defaultReceiverValues = {};
-    const receiverSchema = this.$store.getters['cluster/schemaFor'](MONITORING.SPOOFED.ALERTMANAGERCONFIG_RECEIVER_SPEC);
-    const routeSchema = this.$store.getters['cluster/schemaFor'](MONITORING.SPOOFED.ALERTMANAGERCONFIG_ROUTE_SPEC);
     const receiverOptions = (this.value?.spec?.receivers || []).map((receiver) => receiver.name);
 
     return {
@@ -82,8 +86,6 @@ export default {
       receiverActions:      [],
       receiverOptions,
       receiverTypes:        RECEIVERS_TYPES,
-      routeSchema,
-      receiverSchema,
       selectedReceiverName: '',
       selectedRowValue:     null,
       view:                 _VIEW,
@@ -224,7 +226,7 @@ export default {
           @clickedActionButton="setActionMenuState"
         >
           <template #header-button>
-            <nuxt-link
+            <router-link
               v-if="createReceiverLink && createReceiverLink.name"
               :to="mode !== create ? createReceiverLink : {}"
             >
@@ -232,6 +234,7 @@ export default {
                 class="btn role-primary"
                 :disabled="mode === create"
                 :tooltip="t('monitoring.alertmanagerConfig.disabledReceiverButton')"
+                data-testid="v2-monitoring-add-receiver"
               >
                 {{ t('monitoring.receiver.addReceiver') }}
                 <i
@@ -240,7 +243,7 @@ export default {
                   class="icon icon-info"
                 />
               </button>
-            </nuxt-link>
+            </router-link>
           </template>
         </ResourceTable>
       </Tab>

package/edit/monitoring.coreos.com.alertmanagerconfig/receiverConfig.vue

@@ -1,5 +1,4 @@
 <script>
-import { MONITORING } from '@shell/config/types';
 import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
 import Loading from '@shell/components/Loading';
 import { Banner } from '@components/Banner';
@@ -13,7 +12,10 @@ import jsyaml from 'js-yaml';
 import ButtonDropdown from '@shell/components/ButtonDropdown';
 import { _CREATE, _VIEW } from '@shell/config/query-params';
 import FormValidation from '@shell/mixins/form-validation';
+import { fetchAlertManagerConfigSpecs } from '@shell/utils/alertmanagerconfig';
 
+// i18n-uses monitoringReceiver.slack.*, monitoringReceiver.email.*, monitoringReceiver.pagerduty.*
+// i18n-uses monitoringReceiver.opsgenie.*, monitoringReceiver.webhook.*, monitoringReceiver.custom.*
 export const RECEIVERS_TYPES = [
   {
     name:  'slack',
@@ -103,16 +105,7 @@ export default {
 
   mixins: [CreateEditView, FormValidation],
 
-  data(props) {
-    const currentReceiver = {};
-    const mode = this.$route.query.mode;
-
-    if (mode === _CREATE) {
-      RECEIVERS_TYPES.forEach((receiverType) => {
-        this.$set(currentReceiver, receiverType.key, currentReceiver[receiverType.key] || []);
-      });
-    }
-
+  async fetch() {
     /**
      * example receiver value:
      * {
@@ -120,14 +113,13 @@ export default {
      *   slackConfigs: [...]
      * }
      */
-    const receiverSchema = this.$store.getters['cluster/schemaFor'](MONITORING.SPOOFED.ALERTMANAGERCONFIG_RECEIVER_SPEC);
+    const { receiverSchema } = await fetchAlertManagerConfigSpecs(this.$store);
 
     if (!receiverSchema) {
-      throw new Error("Can't render the form because the AlertmanagerConfig schema is not loaded yet.");
+      throw new Error("Can't render the form because the AlertmanagerConfig schema, or it's definitions, is not loaded yet.");
     }
 
     const expectedFields = Object.keys(receiverSchema.resourceFields);
-
     const suffix = {};
 
     Object.keys(this.value).forEach((key) => {
@@ -142,13 +134,25 @@ export default {
       suffixYaml = '';
     }
 
+    this.expectedFields = expectedFields;
+    this.suffixYaml = suffixYaml;
+  },
+
+  data(props) {
+    const currentReceiver = {};
+    const mode = this.$route.query.mode;
+
+    if (mode === _CREATE) {
+      RECEIVERS_TYPES.forEach((receiverType) => {
+        this.$set(currentReceiver, receiverType.key, currentReceiver[receiverType.key] || []);
+      });
+    }
+
     return {
       create:         _CREATE,
       EDITOR_MODES,
-      expectedFields,
       fileFound:      false,
       receiverTypes:  RECEIVERS_TYPES,
-      suffixYaml,
       view:           _VIEW,
       yamlError:      '',
       fvFormRuleSets: [
@@ -286,6 +290,7 @@ export default {
           :required="true"
           :mode="mode"
           :rules="fvGetAndReportPathRules('name')"
+          data-testid="v2-monitoring-receiver-name"
         />
       </div>
     </div>

package/edit/monitoring.coreos.com.alertmanagerconfig/types/opsgenie.vue

@@ -190,7 +190,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-12">
         <LabeledInput
-          v-model="value.httpConfig.proxyUrl"
+          v-model="value.httpConfig.proxyURL"
           :mode="mode"
           label="Proxy URL"
           placeholder="e.g. http://my-proxy/"

package/edit/monitoring.coreos.com.alertmanagerconfig/types/pagerduty.vue

@@ -123,7 +123,6 @@ export default {
       }
     }
   }
-
 };
 </script>
 
@@ -185,10 +184,11 @@ export default {
     <div class="row mb-20">
       <div class="col span-12">
         <LabeledInput
-          v-model="value.httpConfig.proxyUrl"
+          v-model="value.httpConfig.proxyURL"
           :mode="mode"
           label="Proxy URL"
           placeholder="e.g. http://my-proxy/"
+          data-testid="v2-monitoring-receiver-pagerduty-proxy-url"
         />
       </div>
     </div>

package/edit/monitoring.coreos.com.alertmanagerconfig/types/slack.vue

@@ -126,7 +126,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.httpConfig.proxyUrl"
+          v-model="value.httpConfig.proxyURL"
           :mode="mode"
           label="Proxy URL"
           placeholder="e.g. http://my-proxy/"

package/edit/monitoring.coreos.com.prometheusrule/AlertingRule.vue

@@ -47,9 +47,18 @@ export default {
       selectedSeverityLabel: null,
       ignoredAnnotations:    IGNORED_ANNOTATIONS,
       severityOptions:       [
-        this.t('prometheusRule.alertingRules.labels.severity.choices.critical'),
-        this.t('prometheusRule.alertingRules.labels.severity.choices.warning'),
-        this.t('prometheusRule.alertingRules.labels.severity.choices.none'),
+        {
+          label: this.t('prometheusRule.alertingRules.labels.severity.choices.critical'),
+          value: 'critical'
+        },
+        {
+          label: this.t('prometheusRule.alertingRules.labels.severity.choices.warning'),
+          value: 'warning'
+        },
+        {
+          label: this.t('prometheusRule.alertingRules.labels.severity.choices.none'),
+          value: 'none'
+        },
       ],
     };
   },
@@ -276,6 +285,7 @@ export default {
           :label="t('prometheusRule.alertingRules.name')"
           :required="true"
           :mode="mode"
+          data-testid="v2-monitoring-alerting-rules-alert-name"
         />
       </div>
       <div class="col span-6">
@@ -305,6 +315,7 @@ export default {
                 foldGutter: false,
                 readOnly: mode === 'view',
               }"
+              data-testid="v2-monitoring-alerting-rules-promql"
               @onInput="queueUpdate"
             />
           </template>
@@ -344,6 +355,7 @@ export default {
             :label="t('prometheusRule.alertingRules.labels.severity.choices.label')"
             :localized-label="false"
             :options="severityOptions"
+            data-testid="v2-monitoring-alerting-rules-severity"
           />
         </div>
       </div>

package/edit/monitoring.coreos.com.prometheusrule/GroupRules.vue

@@ -6,6 +6,7 @@ import { _VIEW } from '@shell/config/query-params';
 import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
 import AlertingRule from './AlertingRule';
 import RecordingRule from './RecordingRule';
+import { clone } from '@shell/utils/object';
 
 export default {
   components: {
@@ -105,7 +106,7 @@ export default {
         });
         break;
       case 'alert':
-        value.push(this.defaultAlert);
+        value.push(clone(this.defaultAlert));
         break;
       default:
         break;
@@ -143,6 +144,7 @@ export default {
             :disabled="disableAddRecord"
             type="button"
             class="btn role-tertiary"
+            data-testid="v2-monitoring-add-record"
             @click="addRule('record')"
           >
             <t k="prometheusRule.recordingRules.addLabel" />
@@ -192,6 +194,7 @@ export default {
             :disabled="disableAddAlert"
             type="button"
             class="btn role-tertiary"
+            data-testid="v2-monitoring-add-alert"
             @click="addRule('alert')"
           >
             <t k="prometheusRule.alertingRules.addLabel" />

package/edit/monitoring.coreos.com.prometheusrule/RecordingRule.vue

@@ -58,6 +58,7 @@ export default {
           v-model="value.record"
           :label="t('prometheusRule.recordingRules.name')"
           :required="true"
+          data-testid="v2-monitoring-prom-rules-recording-name"
         />
       </div>
     </div>
@@ -77,6 +78,7 @@ export default {
                 foldGutter: false,
                 readOnly: mode === 'view',
               }"
+              data-testid="v2-monitoring-prom-rules-recording-promql"
               @onInput="queueUpdate"
             />
           </template>

package/edit/monitoring.coreos.com.prometheusrule/index.vue

@@ -166,6 +166,7 @@ export default {
                 :label="t('prometheusRule.groups.name')"
                 :mode="mode"
                 :required="true"
+                :data-testid="`v2-monitoring-prom-rules-group-name-${idx}`"
               />
             </div>
           </div>
@@ -179,6 +180,7 @@ export default {
                 "
                 :label="t('prometheusRule.groups.groupInterval.label')"
                 :mode="mode"
+                :data-testid="`v2-monitoring-prom-rules-group-interval-${idx}`"
                 @input="(e) => updateGroupInterval(filteredGroups[idx], e)"
               />
             </div>

package/edit/networking.k8s.io.ingress/Rules.vue

@@ -45,7 +45,10 @@ export default {
   },
 
   async fetch() {
-    await Promise.all(Object.values(WORKLOAD_TYPES).map((type) => this.$store.dispatch('cluster/findAll', { type })));
+    if (!this.$store.getters[`cluster/paginationEnabled`]()) {
+      // This is only used by shell/models/networking.k8s.io.ingress.js `targetTo`, where we do some dodgy matching of workloads with name 'ingress-'
+      await Promise.all(Object.values(WORKLOAD_TYPES).map((type) => this.$store.dispatch('cluster/findAll', { type })));
+    }
   },
 
   beforeUpdate() {
@@ -75,8 +78,10 @@ export default {
           name:          'target',
           label:         this.t('ingress.rules.headers.target'),
           formatter:     'Link',
-          formatterOpts: { options: { internal: true }, urlKey: 'targetLink.to' },
-          value:         'targetLink',
+          formatterOpts: {
+            options: { internal: true }, urlKey: 'targetLink.to', labelKey: 'serviceName'
+          },
+          value: 'targetLink',
         },
         {
           name:  'port',

package/edit/networking.k8s.io.ingress/index.vue

@@ -15,6 +15,8 @@ import DefaultBackend from './DefaultBackend';
 import Certificates from './Certificates';
 import Rules from './Rules';
 import IngressClass from './IngressClass';
+import Loading from '@shell/components/Loading';
+import { FilterArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 export default {
   name:       'CRUIngress',
@@ -28,7 +30,8 @@ export default {
     Rules,
     Tab,
     Tabbed,
-    Error
+    Error,
+    Loading,
   },
   mixins: [CreateEditView, FormValidation],
   props:  {
@@ -43,22 +46,37 @@ export default {
       default: 'edit'
     }
   },
+
   async fetch() {
     this.ingressClassSchema = this.$store.getters[`cluster/schemaFor`](INGRESS_CLASS);
-    const hash = await allHash({
-      secrets:        this.$store.dispatch('cluster/findAll', { type: SECRET }),
-      services:       this.$store.dispatch('cluster/findAll', { type: SERVICE }),
-      ingressClasses: this.ingressClassSchema ? this.$store.dispatch('cluster/findAll', { type: INGRESS_CLASS }) : Promise.resolve([]),
-    });
+
+    const promises = {
+      services:              this.$store.dispatch('cluster/findAll', { type: SERVICE }),
+      ingressClasses:        this.ingressClassSchema ? this.$store.dispatch('cluster/findAll', { type: INGRESS_CLASS }) : Promise.resolve([]),
+      ingressResourceFields: this.schema.fetchResourceFields(),
+    };
+
+    this.filterByApi = this.$store.getters[`cluster/paginationEnabled`](SECRET);
+
+    if (this.filterByApi) {
+      promises.filteredSecrets = this.filterSecretsByApi();
+    } else {
+      promises.secrets = this.$store.dispatch('cluster/findAll', { type: SECRET });
+    }
+
+    const hash = await allHash(promises);
 
     this.allServices = hash.services;
     this.allSecrets = hash.secrets;
+    this.filteredSecrets = hash.filteredSecrets;
     this.allIngressClasses = hash.ingressClasses;
   },
   data() {
     return {
+      filterByApi:        null,
       ingressClassSchema: null,
-      allSecrets:         [],
+      allSecrets:         null,
+      filteredSecrets:    null,
       allServices:        [],
       allIngressClasses:  [],
       fvFormRuleSets:     [
@@ -89,6 +107,15 @@ export default {
       fvReportedValidationPaths: ['spec.rules.http.paths.backend.service.port.number', 'spec.rules.http.paths.path', 'spec.rules.http.paths.backend.service.name']
     };
   },
+
+  watch: {
+    async 'value.metadata.namespace'() {
+      if (this.filterByApi) {
+        this.filteredSecrets = await this.filterSecretsByApi();
+      }
+    }
+  },
+
   computed: {
     fvExtraRules() {
       const backEndOrRules = (spec) => {
@@ -144,7 +171,17 @@ export default {
       return this.isView ? this.t('ingress.rulesAndCertificates.title') : this.t('ingress.rules.title');
     },
     certificates() {
-      return this.filterByCurrentResourceNamespace(this.allSecrets.filter((secret) => secret._type === TYPES.TLS)).map((secret) => {
+      let filteredSecrets;
+
+      if (this.filteredSecrets) {
+        filteredSecrets = this.filteredSecrets;
+      } else if (this.allSecrets ) {
+        filteredSecrets = this.filterByCurrentResourceNamespace(this.allSecrets.filter((secret) => secret._type === TYPES.TLS));
+      } else {
+        return [];
+      }
+
+      return filteredSecrets.map((secret) => {
         const { id } = secret;
 
         return id.slice(id.indexOf('/') + 1);
@@ -157,6 +194,7 @@ export default {
       }));
     },
   },
+
   created() {
     this.$set(this.value, 'spec', this.value.spec || {});
     this.$set(this.value.spec, 'rules', this.value.spec.rules || [{}]);
@@ -168,7 +206,22 @@ export default {
 
     this.registerBeforeHook(this.willSave, 'willSave');
   },
+
   methods: {
+    filterSecretsByApi() {
+      const findPageArgs = { // Of type ActionFindPageArgs
+        namespaced: this.value.metadata.namespace,
+        pagination: new FilterArgs({
+          filters: PaginationParamFilter.createSingleField({
+            field: 'metadata.fields.1',
+            value: TYPES.TLS
+          })
+        }),
+      };
+
+      return this.$store.dispatch(`cluster/findPage`, { type: SECRET, opt: findPageArgs });
+    },
+
     filterByCurrentResourceNamespace(resources) {
       // When configuring an Ingress, the options for Secrets and
       // default backend Services are limited to the namespace of the Ingress.
@@ -176,6 +229,7 @@ export default {
         return resource.metadata.namespace === this.value.metadata.namespace;
       });
     },
+
     willSave() {
       const backend = get(this.value.spec, this.value.defaultBackendPath);
       const serviceName = get(backend, this.value.serviceNamePath);
@@ -191,7 +245,9 @@ export default {
 };
 </script>
 <template>
+  <Loading v-if="$fetchState.pending" />
   <CruResource
+    v-else
     :done-route="doneRoute"
     :mode="mode"
     :resource="value"

package/edit/networking.k8s.io.networkpolicy/PolicyRule.vue

@@ -73,6 +73,7 @@ export default {
               :namespace="namespace"
               :all-namespaces="allNamespaces"
               :all-pods="allPods"
+              :data-testid="`policy-rule-target-${props.i}`"
             />
           </template>
         </ArrayListGrouped>

package/edit/networking.k8s.io.networkpolicy/PolicyRuleTarget.vue

@@ -154,6 +154,7 @@ export default {
   },
   watch: {
     namespace:                    'updateMatches',
+    allNamespaces:                'updateMatches',
     'value.podSelector':          'updateMatches',
     'value.namespaceSelector':    'updateMatches',
     'value.ipBlock.cidr':         'validateCIDR',
@@ -214,7 +215,7 @@ export default {
       <div class="col span-6">
         <LabeledSelect
           v-model="targetType"
-          data-testid="labeled-select-type-selector"
+          data-testid="policy-rule-target-type-labeled-select"
           :mode="mode"
           :tooltip="targetType === TARGET_OPTIONS.NAMESPACE_AND_POD_SELECTOR ? t('networkpolicy.selectors.matchingNamespacesAndPods.tooltip') : null"
           :options="selectTargetOptions"
@@ -293,7 +294,10 @@ export default {
       <div class="row">
         <div class="col span-12">
           <Banner color="success">
-            <span v-clean-html="t('networkpolicy.selectors.matchingNamespaces.matchesSome', matchingNamespaces)" />
+            <span
+              v-clean-html="t('networkpolicy.selectors.matchingNamespaces.matchesSome', matchingNamespaces)"
+              data-testid="matching-namespaces-message"
+            />
           </Banner>
         </div>
       </div>

package/edit/networking.k8s.io.networkpolicy/__tests__/{PolicyRuleTarget.spec.ts → PolicyRuleTarget.test.ts}

@@ -1,15 +1,44 @@
 import { mount } from '@vue/test-utils';
 import PolicyRuleTarget from '@shell/edit/networking.k8s.io.networkpolicy/PolicyRuleTarget';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 import mock from '@shell/edit/networking.k8s.io.networkpolicy/__tests__/utils/mock.json';
-import { PolicyRuleTargetSelectors } from '@shell/edit/networking.k8s.io.networkpolicy/__tests__/utils/selectors';
+import { PolicyRuleTargetSelectors } from '@shell/edit/networking.k8s.io.networkpolicy/__tests__/utils/selectors.test.ts';
+
+type MatchData = {
+  matched: number;
+  matches: Array<object>;
+  none: boolean;
+  total: number;
+  sample?: string;
+}
+
+const newNamespace = {
+  id:       'new-namespace',
+  type:     'namespace',
+  kind:     'Namespace',
+  spec:     { finalizers: ['kubernetes'] },
+  status:   { phase: 'Active' },
+  metadata: {
+    annotations:       { user: 'john' },
+    name:              'default',
+    creationTimestamp: '2024-01-31T10:24:03Z',
+    fields:            ['default', 'Active', '1d'],
+    labels:            { user: 'john' },
+    relationships:     null,
+    resourceVersion:   '1',
+    state:             {
+      error:         false,
+      message:       '',
+      name:          'active',
+      transitioning: false
+    }
+  }
+};
 
 describe.each([
   'view',
   'edit',
 ])('component: PolicyRuleTarget', (mode) => {
   const mockExists = jest.fn().mockReturnValue(true);
-  const mockT = jest.fn().mockReturnValue('some-string');
 
   const wrapper = mount(PolicyRuleTarget, {
     data() {
@@ -22,14 +51,11 @@ describe.each([
       type:          'ingress',
       mode
     },
-
-    directives: { cleanHtmlDirective },
-
     mocks: {
       $store: {
         getters: {
           'i18n/exists': mockExists,
-          'i18n/t':      mockT
+          'i18n/t':      (key: string, matchData: MatchData) => matchData ? `${ key }-${ matchData.total }` : key,
         }
       }
     }
@@ -77,6 +103,19 @@ describe.each([
       expect(selectors.namespaceAndPod.podRule.element).toBeUndefined();
 
       expect(selectors.namespace.element).toBeDefined();
+
+      // Updating allNamespace should update the matching namespaces message too
+      await wrapper.setProps({
+        allNamespaces: [
+          ...wrapper.vm.$props.allNamespaces,
+          newNamespace
+        ]
+      });
+
+      const matchingNamespacesMessage = wrapper.find('[data-testid="matching-namespaces-message"]').text();
+      const totalInMessage = matchingNamespacesMessage.split('-')[1];
+
+      expect(totalInMessage).toBe(`${ wrapper.vm.$data.matchingNamespaces.total }`);
     });
 
     it('should display pod selector rule', async() => {

package/edit/networking.k8s.io.networkpolicy/__tests__/utils/{selectors.ts → selectors.test.ts}

@@ -40,6 +40,6 @@ export class PolicyRuleTargetSelectors {
   }
 
   get ruleType() {
-    return this.wrapper.find('[data-testid=labeled-select-type-selector]');
+    return this.wrapper.find('[data-testid="policy-rule-target-type-labeled-select"]');
   }
 }

package/edit/networking.k8s.io.networkpolicy/index.vue

@@ -146,6 +146,7 @@ export default {
 
   methods: {
     updateMatchingPods: throttle(function() {
+      // See https://github.com/rancher/dashboard/issues/10417, all pods bad, need to replace local selector somehow
       const allInNamespace = this.allPods.filter((pod) => pod.metadata.namespace === this.value.metadata.namespace);
       const match = matching(allInNamespace, this.podSelectorExpressions);
       const matched = match.length || 0;
@@ -198,6 +199,7 @@ export default {
               class="mt-20 mb-10"
               :mode="mode"
               :label="t('networkpolicy.ingress.enable')"
+              data-testid="network-policy-ingress-enable-checkbox"
             />
             <PolicyRules
               v-if="hasIngressPolicies"