dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-logTest.2

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

@@ -4,12 +4,13 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { _EDIT } from '@shell/config/query-params';
 import MatchExpressions from '@shell/components/form/MatchExpressions';
-import { convert, matching, simplify } from '@shell/utils/selector';
-import { POD } from '@shell/config/types';
+import { convert, simplify } from '@shell/utils/selector';
+import { NAMESPACE, POD } from '@shell/config/types';
 import ArrayList from '@shell/components/form/ArrayList';
 import { Banner } from '@components/Banner';
-import throttle from 'lodash/throttle';
+import debounce from 'lodash/debounce';
 import { isValidCIDR } from '@shell/utils/validators/cidr';
+import { matching } from '@shell/utils/selector-typed';
 
 const TARGET_OPTIONS = {
   IP_BLOCK:                   'ipBlock',
@@ -18,6 +19,9 @@ const TARGET_OPTIONS = {
   NAMESPACE_AND_POD_SELECTOR: 'namespaceAndPodSelector',
 };
 
+// Components shown for Network Policy --> Ingress/Egress Rules --> Rule Type are...
+// Edit Network Policy --> `PolicyRules` 1 --> M `PolicyRule` 1 --> M `PolicyRuleTarget`
+
 export default {
   components: {
     ArrayList, Banner, LabeledInput, LabeledSelect, MatchExpressions
@@ -41,18 +45,6 @@ export default {
       type:    String,
       default: ''
     },
-    allPods: {
-      type:    Array,
-      default: () => {
-        return [];
-      },
-    },
-    allNamespaces: {
-      type:    Array,
-      default: () => {
-        return [];
-      },
-    },
   },
   data() {
     if (!this.value[TARGET_OPTIONS.IP_BLOCK] &&
@@ -66,18 +58,26 @@ export default {
     }
 
     return {
-      portOptions:        ['TCP', 'UDP'],
-      matchingPods:       {},
-      matchingNamespaces: {},
-      invalidCidr:        null,
-      invalidCidrs:       [],
+      portOptions:  ['TCP', 'UDP'],
+      matchingPods: {
+        matches: [], matched: 0, total: 0
+      },
+      matchingNamespaces: {
+        matches: [], matched: 0, total: 0
+      },
+      invalidCidr:            null,
+      invalidCidrs:           [],
       POD,
       TARGET_OPTIONS,
-      targetOptions:      Object.values(TARGET_OPTIONS),
-      throttleTime:       250,
+      targetOptions:          Object.values(TARGET_OPTIONS),
+      inStore:                this.$store.getters['currentProduct'].inStore,
+      debouncedUpdateMatches: debounce(this.updateMatches, 500)
     };
   },
   computed: {
+    /**
+     * of type matchExpression aka `KubeLabelSelectorExpression[]`
+     */
     podSelectorExpressions: {
       get() {
         return convert(
@@ -89,6 +89,9 @@ export default {
         this.value[TARGET_OPTIONS.POD_SELECTOR] = simplify(podSelectorExpressions);
       }
     },
+    /**
+     * of type matchExpression aka `KubeLabelSelectorExpression[]`
+     */
     namespaceSelectorExpressions: {
       get() {
         return convert(
@@ -145,39 +148,40 @@ export default {
   },
   watch: {
     namespace: {
-      handler:   'updateMatches',
-      immediate: true
-    },
-    allNamespaces: {
-      handler:   'updateMatches',
+      handler:   'debouncedUpdateMatches',
       immediate: true
     },
     'value.podSelector': {
-      handler:   'updateMatches',
+      handler:   'debouncedUpdateMatches',
       immediate: true
     },
     'value.namespaceSelector': {
-      handler:   'updateMatches',
+      handler:   'debouncedUpdateMatches',
       immediate: true
     },
     'value.ipBlock.cidr':   'validateCIDR',
     'value.ipBlock.except': 'validateCIDR',
     podSelectorExpressions: {
-      handler:   'updateMatches',
+      handler:   'debouncedUpdateMatches',
       immediate: true
     },
     namespaceSelectorExpressions: {
-      handler:   'updateMatches',
+      handler:   'debouncedUpdateMatches',
       immediate: true
     }
   },
+
+  fetch() {
+    this.debouncedUpdateMatches();
+  },
+
   methods: {
-    updateMatches() {
-      throttle(() => {
-        this.matchingNamespaces = this.getMatchingNamespaces();
-        this.matchingPods = this.getMatchingPods();
-      }, this.throttle, { leading: true })();
+    async updateMatches() {
+      // Note - needs to be sequential as getMatchingPods requires matchingNamespaces to be up-to-date
+      this.matchingNamespaces = await this.getMatchingNamespaces();
+      this.matchingPods = await this.getMatchingPods();
     },
+
     validateCIDR() {
       const exceptCidrs = this.value[TARGET_OPTIONS.IP_BLOCK]?.except || [];
 
@@ -191,34 +195,25 @@ export default {
         this.invalidCidr = null;
       }
     },
-    getMatchingPods() {
-      const namespaces = this.targetType === TARGET_OPTIONS.NAMESPACE_AND_POD_SELECTOR ? this.matchingNamespaces.matches : [{ id: this.namespace }];
-      const allInNamespace = this.allPods.filter((pod) => namespaces.some((ns) => ns.id === pod.metadata.namespace));
-      const match = matching(allInNamespace, this.podSelectorExpressions);
-      const matched = match.length || 0;
-      const sample = match[0]?.nameDisplay;
 
-      return {
-        matched,
-        matches: match,
-        none:    matched === 0,
-        sample,
-        total:   allInNamespace.length,
-      };
+    async getMatchingPods() {
+      return await matching({
+        labelSelector: { matchExpressions: this.podSelectorExpressions },
+        type:          POD,
+        $store:        this.$store,
+        inStore:       this.inStore,
+        namespace:     this.targetType === TARGET_OPTIONS.NAMESPACE_AND_POD_SELECTOR ? this.matchingNamespaces.matches.map((ns) => ns.id) : this.namespace,
+        transient:     true,
+      });
     },
-    getMatchingNamespaces() {
-      const allNamespaces = this.allNamespaces;
-      const match = matching(allNamespaces, this.namespaceSelectorExpressions);
-      const matched = match.length || 0;
-      const sample = match[0]?.nameDisplay;
-
-      return {
-        matched,
-        matches: match,
-        none:    matched === 0,
-        sample,
-        total:   allNamespaces.length,
-      };
+    async getMatchingNamespaces() {
+      return await matching({
+        labelSelector: { matchExpressions: this.namespaceSelectorExpressions },
+        type:          NAMESPACE,
+        $store:        this.$store,
+        inStore:       this.inStore,
+        transient:     true,
+      });
     },
   }
 };
@@ -226,8 +221,8 @@ export default {
 
 <template>
   <div class="rule">
-    <div class="row mb-20">
-      <div class="col span-6">
+    <div class="row">
+      <div class="col">
         <LabeledSelect
           v-model:value="targetType"
           data-testid="policy-rule-target-type-labeled-select"
@@ -241,7 +236,7 @@ export default {
     </div>
     <div v-if="targetType === TARGET_OPTIONS.IP_BLOCK">
       <div class="row">
-        <div class="col span-6">
+        <div class="col">
           <LabeledInput
             v-model:value="value[TARGET_OPTIONS.IP_BLOCK].cidr"
             data-testid="labeled-input-ip-block-selector"
@@ -255,14 +250,15 @@ export default {
         v-if="invalidCidr"
         class="row"
       >
-        <div class="col span-12">
+        <div class="col">
           <Banner color="error">
             <t k="networkpolicy.rules.ipBlock.invalidCidr" />
           </Banner>
         </div>
       </div>
-      <div class="row mt-20">
-        <div class="col span-12">
+      <div class="row">
+        <div class="col" style="display: flex;">
+          <div style="min-width: 160px;"></div>
           <ArrayList
             v-model:value="value[TARGET_OPTIONS.IP_BLOCK].except"
             :add-label="t('networkpolicy.rules.ipBlock.addExcept')"
@@ -286,7 +282,7 @@ export default {
     </div>
     <div v-if="targetType === TARGET_OPTIONS.POD_SELECTOR">
       <div class="row">
-        <div class="col span-12">
+        <div class="span-12">
           <Banner color="success">
             <span v-clean-html="t('networkpolicy.selectors.matchingPods.matchesSome', matchingPods)" />
           </Banner>
@@ -307,7 +303,7 @@ export default {
     </div>
     <div v-if="targetType === TARGET_OPTIONS.NAMESPACE_SELECTOR">
       <div class="row">
-        <div class="col span-12">
+        <div class="span-12">
           <Banner color="success">
             <span
               v-clean-html="t('networkpolicy.selectors.matchingNamespaces.matchesSome', matchingNamespaces)"
@@ -331,7 +327,7 @@ export default {
     </div>
     <div v-if="targetType === TARGET_OPTIONS.NAMESPACE_AND_POD_SELECTOR">
       <div class="row">
-        <div class="col span-12">
+        <div class="span-12">
           <Banner color="success">
             <span
               v-if="!namespaceSelectorExpressions.length"
@@ -350,7 +346,7 @@ export default {
             {{ t('networkpolicy.rules.namespace') }}
           </span>
         </div>
-        <div class="col span-11">
+        <div class="col">
           <MatchExpressions
             v-model:value="namespaceSelectorExpressions"
             data-testid="match-expression-namespace-and-pod-selector-ns-rule"
@@ -369,7 +365,7 @@ export default {
             {{ t('networkpolicy.rules.pod') }}
           </span>
         </div>
-        <div class="col span-11">
+        <div class="col">
           <MatchExpressions
             v-model:value="podSelectorExpressions"
             data-testid="match-expression-namespace-and-pod-selector-pod-rule"

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

@@ -6,6 +6,9 @@ import Tab from '@shell/components/Tabbed/Tab';
 import Tabbed from '@shell/components/Tabbed';
 import { removeAt } from '@shell/utils/array';
 
+// Components shown for Network Policy --> Ingress/Egress Rules --> Rule Type are...
+// Edit Network Policy --> `PolicyRules` 1 --> M `PolicyRule` 1 --> M `PolicyRuleTarget`
+
 export default {
   components: {
     PolicyRule, Tabbed, Tab
@@ -24,18 +27,10 @@ export default {
       type:    String,
       default: 'ingress'
     },
-    allPods: {
-      type:    Array,
-      default: () => {
-        return [];
-      },
-    },
-    allNamespaces: {
-      type:    Array,
-      default: () => {
-        return [];
-      },
-    },
+    useTabbedHash: {
+      type:    Boolean,
+      default: undefined
+    }
   },
   data() {
     if (!this.value.spec[this.type]) {
@@ -51,7 +46,7 @@ export default {
     removePolicyRule(idx) {
       removeAt(this.value.spec[this.type], idx);
     },
-    policyRouleLabel(idx) {
+    policyRuleLabel(idx) {
       return this.t('networkpolicy.rules.ruleLabel', { index: idx + 1 });
     }
   }
@@ -65,6 +60,7 @@ export default {
         <Tabbed
           :side-tabs="true"
           :show-tabs-add-remove="mode !== 'view'"
+          :use-hash="useTabbedHash"
           @addTab="addPolicyRule"
           @removeTab="removePolicyRule"
         >
@@ -72,7 +68,7 @@ export default {
             v-for="(policyRule, idx) in value.spec[type]"
             :key="idx"
             :name="'rule-' + type + idx"
-            :label="policyRouleLabel(idx)"
+            :label="policyRuleLabel(idx)"
             :show-header="false"
             class="container-group"
           >
@@ -82,8 +78,6 @@ export default {
               :mode="mode"
               :type="type"
               :namespace="value.metadata.namespace"
-              :all-namespaces="allNamespaces"
-              :all-pods="allPods"
             />
           </Tab>
         </Tabbed>

package/edit/networking.k8s.io.networkpolicy/__tests__/PolicyRuleTarget.test.ts

@@ -2,6 +2,8 @@ import { mount } from '@vue/test-utils';
 import PolicyRuleTarget from '@shell/edit/networking.k8s.io.networkpolicy/PolicyRuleTarget';
 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.test.ts';
+import { nextTick } from 'vue';
+import { COUNT, NAMESPACE, POD } from '@shell/config/types';
 
 type MatchData = {
   matched: number;
@@ -11,29 +13,6 @@ type MatchData = {
   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',
@@ -45,18 +24,60 @@ describe.each([
       return { throttleTime: 0 };
     },
     props: {
-      namespace:     mock.defaultNamespace,
-      allNamespaces: mock.allNamespaces,
-      allPods:       mock.allPods,
-      type:          'ingress',
+      namespace: mock.defaultNamespace,
+      type:      'ingress',
       mode
     },
     global: {
       mocks: {
         $store: {
+          dispatch: (action: string, { type }: { type: string}) => {
+            switch (action) {
+            case 'cluster/findAll':
+              switch (type) {
+              case NAMESPACE:
+                return mock.allNamespaces;
+              case POD:
+                return mock.allPods;
+              default:
+                throw new Error(`unknown type ${ type }`);
+              }
+            default:
+              throw new Error(`unknown action ${ action }`);
+            }
+          },
           getters: {
-            'i18n/exists': mockExists,
-            'i18n/t':      (key: string, matchData: MatchData) => matchData ? `${ key }-${ matchData.total }` : key,
+            'i18n/exists':  mockExists,
+            'i18n/t':       (key: string, matchData: MatchData) => matchData ? `${ key }-${ matchData.total }` : key,
+            currentProduct: { inStore: 'cluster' },
+            'cluster/all':  (type: string) => {
+              switch (type) {
+              case COUNT:
+                return mock.counts;
+              default:
+                throw new Error(`unknown type ${ type }`);
+              }
+            },
+            'cluster/findAll': ({ type }: {type: string}) => {
+              switch (type) {
+              case NAMESPACE:
+                return mock.allNamespaces;
+              case POD:
+                return mock.allPods;
+              default:
+                throw new Error(`unknown type ${ type }`);
+              }
+            },
+            'cluster/schemaFor': (type: string) => {
+              switch (type) {
+              case NAMESPACE:
+                return { attributes: { namespaced: false } };
+              case POD:
+                return { attributes: { namespaced: true } };
+              default:
+                throw new Error(`unknown type ${ type }`);
+              }
+            }
           }
         }
       },
@@ -64,6 +85,20 @@ describe.each([
   });
 
   describe(`${ mode } mode`, () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+      jest.runOnlyPendingTimers();
+      jest.useRealTimers();
+    });
+
+    const waitForUpdatedMatched = async() => {
+      jest.advanceTimersByTime(1000); // Wait for debounced call to fetch updated cluster list
+      await nextTick(); // Wait for changes to cluster list to trigger changes
+    };
+
     it('should display ip-block selector rule', async() => {
       const ipBlock = mock.selectors.ipBlock;
 
@@ -83,6 +118,7 @@ describe.each([
     });
 
     it('should display namespace selector rule', async() => {
+      // This test needs improving - mock data needs to contain more than applicable to selector
       const namespaceSelector = mock.selectors.namespace;
 
       await wrapper.setProps({ value: { namespaceSelector } });
@@ -92,6 +128,12 @@ describe.each([
       // Check rule type selector
       expect(wrapper.vm.targetType).toBe('namespaceSelector');
 
+      // Check the matching namespaces displayed by the banner
+      expect(wrapper.vm.$data.matchingNamespaces.matched).toBe(0);
+
+      await wrapper.vm.updateMatches();
+      await waitForUpdatedMatched();
+
       // Check the matching namespaces displayed by the banner
       expect(wrapper.vm.$data.matchingNamespaces.matched).toBe(1);
 
@@ -105,21 +147,10 @@ describe.each([
       expect(selectors.namespaceAndPod.podRule.exists()).toBe(false);
 
       expect(selectors.namespace.element).toBeDefined();
-
-      // Updating allNamespace should update the matching namespaces message too
-      await wrapper.setProps({
-        allNamespaces: [
-          ...wrapper.vm.$props.allNamespaces,
-          newNamespace
-        ]
-      });
-
-      const expectedTotal = 3;
-
-      expect(wrapper.vm.$data.matchingNamespaces.total).toBe(expectedTotal);
     });
 
     it('should display pod selector rule', async() => {
+      // This test needs improving - mock data needs to contain more than applicable to selector
       const podSelector = mock.selectors.pod;
 
       await wrapper.setProps({ value: { podSelector } });

package/edit/networking.k8s.io.networkpolicy/__tests__/utils/mock.json

@@ -154,5 +154,21 @@
         }
       }
     }
-  ]
+  ],
+  "counts": [{
+    "counts": {
+      "namespace": {
+        "summary": {
+          "count": 1
+        }
+      },
+      "pod": {
+        "namespaces": {
+          "default": {
+            "count": 1
+          }
+        }
+      }
+    }
+  }]
 }

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

@@ -7,14 +7,15 @@ import Tabbed from '@shell/components/Tabbed';
 import CruResource from '@shell/components/CruResource';
 import { Banner } from '@components/Banner';
 import Labels from '@shell/components/form/Labels';
-import { NAMESPACE, POD } from '@shell/config/types';
-import { convert, matching, simplify } from '@shell/utils/selector';
+import { POD } from '@shell/config/types';
+import { convert, simplify } from '@shell/utils/selector';
+import { matching } from '@shell/utils/selector-typed';
+
 import { Checkbox } from '@components/Form/Checkbox';
 import { addObject, removeObject } from '@shell/utils/array';
 import MatchExpressions from '@shell/components/form/MatchExpressions';
 import PolicyRules from '@shell/edit/networking.k8s.io.networkpolicy/PolicyRules';
 import ResourceTable from '@shell/components/ResourceTable';
-import { allHash } from '@shell/utils/promise';
 
 const POLICY_TYPES = {
   INGRESS: 'Ingress',
@@ -42,14 +43,6 @@ export default {
   mixins: [CreateEditView],
 
   async fetch() {
-    const hash = await allHash({
-      allPods:       this.$store.dispatch('cluster/findAll', { type: POD }), // Used in conjunction with `matches/match/label selectors`. Requires https://github.com/rancher/dashboard/issues/10417 to fix
-      allNamespaces: this.$store.dispatch('cluster/findAll', { type: NAMESPACE }), // Used in conjunction with `matches/match/label selectors`. Requires https://github.com/rancher/dashboard/issues/10417 to fix
-    });
-
-    this.allPods = hash.allPods; // Used in matchingPods, and PolicyRules --> PolicyRule --> PolicyRuleTarget
-    this.allNamespaces = hash.allNamespaces; // Used in PolicyRules --> PolicyRule --> PolicyRuleTarget
-
     this.updateMatchingPods();
   },
 
@@ -75,11 +68,10 @@ export default {
     return {
       POD,
       matchingPods,
-      allPods:         [],
-      allNamespaces:   [],
       podTableHeaders: this.$store.getters['type-map/headersFor'](
         this.$store.getters['cluster/schemaFor'](POD)
       ),
+      inStore: this.$store.getters['currentProduct'].inStore,
     };
   },
 
@@ -127,6 +119,9 @@ export default {
         this.value.spec['policyTypes'] = policyTypes;
       }
     },
+    /**
+     * of type matchExpression aka `KubeLabelSelectorExpression[]`
+     */
     podSelectorExpressions: {
       get() {
         return convert(
@@ -146,19 +141,15 @@ export default {
   },
 
   methods: {
-    updateMatchingPods: throttle(function() {
-      const allInNamespace = this.allPods.filter((pod) => pod.metadata.namespace === this.value.metadata.namespace);
-      const match = matching(allInNamespace, this.podSelectorExpressions);
-      const matched = match.length || 0;
-      const sample = match[0]?.nameDisplay;
-
-      this.matchingPods = {
-        matched,
-        matches: match,
-        none:    matched === 0,
-        sample,
-        total:   allInNamespace.length,
-      };
+    updateMatchingPods: throttle(async function() {
+      this.matchingPods = await matching({
+        labelSelector: { matchExpressions: this.podSelectorExpressions },
+        type:          POD,
+        $store:        this.$store,
+        inStore:       this.inStore,
+        namespace:     this.value.metadata.namespace,
+        transient:     true,
+      });
     }, 250, { leading: true }),
   },
 };
@@ -184,7 +175,10 @@ export default {
 
     <div class="row mb-40">
       <div class="col span-12">
-        <Tabbed :side-tabs="true">
+        <Tabbed
+          :side-tabs="true"
+          :use-hash="useTabbedHash"
+        >
           <Tab
             name="ingress"
             label-key="networkpolicy.ingress.label"
@@ -206,8 +200,7 @@ export default {
               :value="value"
               type="ingress"
               :mode="mode"
-              :all-namespaces="allNamespaces"
-              :all-pods="allPods"
+              :use-tabbed-hash="useTabbedHash"
               @update:value="$emit('input', $event)"
             />
           </Tab>
@@ -231,8 +224,7 @@ export default {
               :value="value"
               type="egress"
               :mode="mode"
-              :all-namespaces="allNamespaces"
-              :all-pods="allPods"
+
               @update:value="$emit('input', $event)"
             />
           </Tab>
@@ -260,7 +252,7 @@ export default {
               </div>
             </div>
             <div class="row">
-              <div class="col span-12">
+              <div class="span-12">
                 <Banner color="success">
                   <span v-clean-html="t('networkpolicy.selectors.matchingPods.matchesSome', matchingPods)" />
                 </Banner>

package/edit/node.vue

@@ -50,6 +50,7 @@ export default {
     <ResourceTabs
       :value="value"
       :mode="mode"
+      :use-hash="useTabbedHash"
       @update:value="$emit('input', $event)"
     >
       <Tab