@rancher/shell 0.3.8 → 0.3.10

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

@@ -0,0 +1,140 @@
+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';
+
+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() {
+      return { throttleTime: 0 };
+    },
+    propsData: {
+      namespace:     mock.defaultNamespace,
+      allNamespaces: mock.allNamespaces,
+      allPods:       mock.allPods,
+      type:          'ingress',
+      mode
+    },
+
+    directives: { cleanHtmlDirective },
+
+    mocks: {
+      $store: {
+        getters: {
+          'i18n/exists': mockExists,
+          'i18n/t':      mockT
+        }
+      }
+    }
+  });
+
+  describe(`${ mode } mode`, () => {
+    it('should display ip-block selector rule', async() => {
+      const ipBlock = mock.selectors.ipBlock;
+
+      await wrapper.setProps({ value: { ipBlock } });
+
+      const selectors = new PolicyRuleTargetSelectors(wrapper);
+
+      // Check rule type selector
+      expect(selectors.ruleType.vm.$data._value.value).toBe('ipBlock');
+
+      expect(selectors.namespace.element).toBeUndefined();
+      expect(selectors.pod.element).toBeUndefined();
+      expect(selectors.namespaceAndPod.namespaceRule.element).toBeUndefined();
+      expect(selectors.namespaceAndPod.podRule.element).toBeUndefined();
+
+      expect(selectors.ipBlock.element._value).toStrictEqual(ipBlock.cidr);
+    });
+
+    it('should display namespace selector rule', async() => {
+      const namespaceSelector = mock.selectors.namespace;
+
+      await wrapper.setProps({ value: { namespaceSelector } });
+
+      const selectors = new PolicyRuleTargetSelectors(wrapper);
+
+      // Check rule type selector
+      expect(selectors.ruleType.vm.$data._value.value).toBe('namespaceSelector');
+
+      // Check the matching namespaces displayed by the banner
+      expect(wrapper.vm.$data.matchingNamespaces.matched).toBe(1);
+
+      // Check if namespace's labels match
+      expect(wrapper.vm.$data.matchingNamespaces.matches).toHaveLength(1);
+      expect(wrapper.vm.$data.matchingNamespaces.matches[0].metadata.name).toBe('default');
+      expect(wrapper.vm.$data.matchingNamespaces.matches[0].metadata.labels['user']).toBe('alice');
+
+      expect(selectors.pod.element).toBeUndefined();
+      expect(selectors.namespaceAndPod.namespaceRule.element).toBeUndefined();
+      expect(selectors.namespaceAndPod.podRule.element).toBeUndefined();
+
+      expect(selectors.namespace.element).toBeDefined();
+    });
+
+    it('should display pod selector rule', async() => {
+      const podSelector = mock.selectors.pod;
+
+      await wrapper.setProps({ value: { podSelector } });
+
+      const selectors = new PolicyRuleTargetSelectors(wrapper);
+
+      // Check rule type selector
+      expect(selectors.ruleType.vm.$data._value.value).toBe('podSelector');
+
+      // Check if namespace's labels match
+      expect(wrapper.vm.$data.matchingPods.matched).toBe(1);
+      expect(wrapper.vm.$data.matchingPods.matches).toHaveLength(1);
+
+      expect(wrapper.vm.$data.matchingPods.matches[0].metadata.name).toBe('test-pod');
+      expect(wrapper.vm.$data.matchingPods.matches[0].metadata.labels['foo']).toBe('bar');
+
+      expect(selectors.namespace.element).toBeUndefined();
+      expect(selectors.namespaceAndPod.namespaceRule.element).toBeUndefined();
+      expect(selectors.namespaceAndPod.podRule.element).toBeUndefined();
+
+      expect(selectors.pod.element).toBeDefined();
+    });
+
+    it('should display namespace/pod selector rule', async() => {
+      const namespaceSelector = mock.selectors.namespaceAndPod.namespace;
+      const podSelector = mock.selectors.namespaceAndPod.pod;
+
+      await wrapper.setProps({
+        value: {
+          namespaceSelector,
+          podSelector,
+        }
+      });
+
+      const selectors = new PolicyRuleTargetSelectors(wrapper);
+
+      // Check rule type selector
+      expect(selectors.ruleType.vm.$data._value.value).toBe('namespaceAndPodSelector');
+
+      // Check the matching pods displayed by the banner
+      expect(wrapper.vm.$data.matchingPods.matched).toBe(1);
+
+      // Check if namespace's labels match
+      expect(wrapper.vm.$data.matchingNamespaces.matches).toHaveLength(1);
+      expect(wrapper.vm.$data.matchingNamespaces.matches[0].metadata.name).toBe('default');
+      expect(wrapper.vm.$data.matchingNamespaces.matches[0].metadata.labels['user']).toBe('alice');
+
+      expect(wrapper.vm.$data.matchingPods.matches[0].metadata.name).toBe('test-pod');
+      expect(wrapper.vm.$data.matchingPods.matches[0].metadata.labels['foo']).toBe('bar');
+
+      expect(selectors.namespace.element).toBeUndefined();
+      expect(selectors.pod.element).toBeUndefined();
+
+      expect(selectors.namespaceAndPod.namespaceRule.element).toBeDefined();
+      expect(selectors.namespaceAndPod.podRule.element).toBeDefined();
+    });
+  });
+});

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

@@ -0,0 +1,158 @@
+{
+  "defaultNamespace": "default",
+  "selectors": {
+    "ipBlock": {
+      "cidr": "24.06.19.89/0"
+    },
+    "namespace": {
+      "matchLabels": {
+        "user": "alice"
+      },
+      "matchExpressions": [
+        {
+          "key": "user",
+          "operator": "In",
+          "values": "alice"
+        }
+      ]
+    },
+    "pod": {
+      "matchLabels": {
+        "foo": "bar"
+      },
+      "matchExpressions": [
+        {
+          "key": "foo",
+          "operator": "In",
+          "values": "bar"
+        }
+      ]
+    },
+    "namespaceAndPod": {
+      "namespace": {
+        "matchLabels": {
+          "user": "alice"
+        },
+        "matchExpressions": [
+          {
+            "key": "user",
+            "operator": "In",
+            "values": "alice"
+          }
+        ]
+      },
+      "pod": {
+        "matchLabels": {
+          "foo": "bar"
+        },
+        "matchExpressions": [
+          {
+            "key": "foo",
+            "operator": "In",
+            "values": "bar"
+          }
+        ]
+      }
+    }
+  },
+  "allNamespaces": [
+    {
+      "id": "default",
+      "type": "namespace",
+      "kind": "Namespace",
+      "metadata": {
+        "annotations": {
+          "user": "alice"
+        },
+        "name": "default",
+        "creationTimestamp": "2023-01-31T10:24:03Z",
+        "fields": ["default", "Active", "1d"],
+        "labels": {
+          "user": "alice"
+        },
+        "relationships": null,
+        "resourceVersion": "1",
+        "state": {
+          "error": false,
+          "message": "",
+          "name": "active",
+          "transitioning": false
+        }
+      },
+      "spec": { "finalizers": ["kubernetes"] },
+      "status": { "phase": "Active" }
+    },
+    {
+      "id": "not-default",
+      "type": "namespace",
+      "kind": "Namespace",
+      "metadata": {
+        "annotations": {
+          "user": "nicole"
+        },
+        "name": "not-default",
+        "creationTimestamp": "2023-01-31T10:24:03Z",
+        "fields": ["default", "Active", "1d"],
+        "labels": {
+          "user": "nicole"
+        },
+        "relationships": null,
+        "resourceVersion": "1",
+        "state": {
+          "error": false,
+          "message": "",
+          "name": "active",
+          "transitioning": false
+        }
+      },
+      "spec": { "finalizers": ["kubernetes"] },
+      "status": { "phase": "Active" }
+    }
+  ],
+  "allPods": [
+    {
+      "id": "default/test-pod",
+      "type": "pod",
+      "apiVersion": "v1",
+      "kind": "Pod",
+      "metadata": {
+        "creationTimestamp": "2023-02-27T16:10:55Z",
+        "generateName": "test-pod-",
+        "labels": {
+          "foo": "bar"
+        },
+        "name": "test-pod",
+        "namespace": "default",
+        "resourceVersion": "1",
+        "state": {
+          "error": false,
+          "message": "",
+          "name": "completed",
+          "transitioning": false
+        }
+      }
+    },
+    {
+      "id": "default/test-pod-2",
+      "type": "pod",
+      "apiVersion": "v1",
+      "kind": "Pod",
+      "metadata": {
+        "creationTimestamp": "2023-02-27T16:10:55Z",
+        "generateName": "test-pod-2-",
+        "labels": {
+          "foo": "bar"
+        },
+        "name": "test-pod-2",
+        "namespace": "not-default",
+        "resourceVersion": "1",
+        "state": {
+          "error": false,
+          "message": "",
+          "name": "completed",
+          "transitioning": false
+        }
+      }
+    }
+  ]
+}

package/edit/networking.k8s.io.networkpolicy/__tests__/utils/selectors.ts

@@ -0,0 +1,45 @@
+export class PolicyRuleTargetSelectors {
+  private wrapper;
+
+  constructor(wrapper: any) {
+    this.wrapper = wrapper;
+  }
+
+  get ipBlock() {
+    return this.wrapper.find('[data-testid=labeled-input-ip-block-selector]');
+  }
+
+  /**
+   * Namespace selector element; matches policies in OR condition, in conjunction with the other rules
+   */
+  get namespace() {
+    return this.wrapper.find(
+      '[data-testid=match-expression-namespace-selector]'
+    );
+  }
+
+  /**
+   * Pod selector element; matches policies in OR condition, in conjunction with the other rules
+   */
+  get pod() {
+    return this.wrapper.find('[data-testid=match-expression-pod-selector]');
+  }
+
+  /**
+   * Namespace and pod selector elements, matching policies in AND condition, within the same rule
+   */
+  get namespaceAndPod() {
+    return {
+      namespaceRule: this.wrapper.find(
+        '[data-testid=match-expression-namespace-and-pod-selector-ns-rule]'
+      ),
+      podRule: this.wrapper.find(
+        '[data-testid=match-expression-namespace-and-pod-selector-pod-rule]'
+      ),
+    };
+  }
+
+  get ruleType() {
+    return this.wrapper.find('[data-testid=labeled-select-type-selector]');
+  }
+}

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

@@ -241,7 +241,7 @@ export default {
             <h2>
               {{ t('networkpolicy.selectors.label') }}
               <i
-                v-tooltip="t('networkpolicy.selectors.hint')"
+                v-clean-tooltip="t('networkpolicy.selectors.hint')"
                 class="icon icon-info"
               />
             </h2>

package/edit/provisioning.cattle.io.cluster/AgentConfiguration.vue

@@ -0,0 +1,326 @@
+<script>
+import { Banner } from '@components/Banner';
+import GroupPanel from '@shell/components/GroupPanel';
+import PodAffinity from '@shell/components/form/PodAffinity';
+import NodeAffinity from '@shell/components/form/NodeAffinity';
+import ContainerResourceLimit from '@shell/components/ContainerResourceLimit';
+import Tolerations from '@shell/components/form/Tolerations';
+import { cleanUp } from '@shell/utils/object';
+import { fetchSetting } from '@shell/utils/settings';
+import { RadioGroup } from '@components/Form/Radio';
+
+export function cleanAgentConfiguration(model, key) {
+  if (!model || !model[key]) {
+    return;
+  }
+
+  const v = model[key];
+
+  if (Array.isArray(v) && v.length === 0) {
+    delete model[key];
+  } else if (v && typeof v === 'object') {
+    Object.keys(v).forEach((k) => {
+      // delete these auxiliary props used in podAffinity and nodeAffinity that shouldn't be sent to the server
+      if (k === '_namespaceOption' || k === '_namespaces' || k === '_anti' || k === '_id') {
+        delete v[k];
+      }
+
+      // prevent cleanup of "namespaceSelector" when an empty object because it represents all namespaces in pod/node affinity
+      // https://kubernetes.io/docs/reference/generated/kubernetes-api/v1.25/#podaffinityterm-v1-core
+      if (k !== 'namespaceSelector') {
+        cleanAgentConfiguration(v, k);
+      }
+    });
+
+    if (Object.keys(v).length === 0) {
+      delete model[key];
+    }
+  }
+}
+
+// Affinity radio button choices
+const DEFAULT = 'default';
+const CUSTOM = 'custom';
+
+// This is the form for Agent Configuration
+// Used for both Cluster Agent and Fleet Agent configuration
+export default {
+  components: {
+    Banner,
+    ContainerResourceLimit,
+    GroupPanel,
+    PodAffinity,
+    NodeAffinity,
+    RadioGroup,
+    Tolerations,
+  },
+  props: {
+    value: {
+      type:    Object,
+      default: () => {},
+    },
+
+    mode: {
+      type:     String,
+      required: true,
+    },
+
+    type: {
+      type:     String,
+      required: true,
+    }
+  },
+
+  async fetch() {
+    // Default affinity
+    const settingId = `${ this.type }-agent-default-affinity`;
+    const setting = await fetchSetting(this.$store, settingId);
+
+    if (setting) {
+      try {
+        const parsed = JSON.parse(setting.value || setting.default);
+
+        this.defaultAffinity = parsed || {};
+      } catch (e) {
+        console.error('Could not parse agent default setting', e); // eslint-disable-line no-console
+        this.defaultAffinity = {};
+      }
+    }
+  },
+
+  data() {
+    const nodeAffinity = this.value?.overrideAffinity?.nodeAffinity;
+    const podAffinity = this.value?.overrideAffinity?.podAffinity;
+    const podAntiAffinity = this.value?.overrideAffinity?.podAntiAffinity;
+
+    let hasAffinityPopulated = false;
+
+    if ((nodeAffinity && Object.keys(nodeAffinity).length) ||
+      (podAffinity && Object.keys(podAffinity).length) ||
+      (podAntiAffinity && Object.keys(podAntiAffinity).length)) {
+      hasAffinityPopulated = true;
+    }
+
+    return {
+      defaultAffinity: {},
+      affinitySetting: hasAffinityPopulated ? CUSTOM : DEFAULT,
+      nodeAffinity:    {}
+    };
+  },
+
+  created() {
+    this.ensureValue();
+  },
+
+  computed: {
+    flatResources: {
+      get() {
+        const { limits = {}, requests = {} } = this.value.overrideResourceRequirements || {};
+        const {
+          cpu: limitsCpu,
+          memory: limitsMemory,
+        } = limits;
+        const { cpu: requestsCpu, memory: requestsMemory } = requests;
+
+        return {
+          limitsCpu,
+          limitsMemory,
+          requestsCpu,
+          requestsMemory,
+        };
+      },
+      set(neu) {
+        const {
+          limitsCpu,
+          limitsMemory,
+          requestsCpu,
+          requestsMemory,
+        } = neu;
+
+        const existing = this.value?.overrideResourceRequirements || {};
+
+        delete existing.requests;
+        delete existing.limits;
+
+        const out = {
+          ...existing,
+          requests: {
+            cpu:    requestsCpu,
+            memory: requestsMemory,
+          },
+          limits: {
+            cpu:    limitsCpu,
+            memory: limitsMemory,
+          },
+        };
+
+        this.$set(this.value, 'overrideResourceRequirements', cleanUp(out));
+      },
+    },
+
+    affinityOptions() {
+      return [{
+        label: this.t('cluster.agentConfig.affinity.default'),
+        value: DEFAULT,
+      }, {
+        label: this.t('cluster.agentConfig.affinity.custom'),
+        value: CUSTOM,
+      }];
+    },
+
+    canEditAffinity() {
+      return this.affinitySetting === CUSTOM;
+    }
+  },
+
+  watch: {
+    value() {
+      this.ensureValue();
+    }
+  },
+
+  methods: {
+    ensureValue() {
+      // Ensure we have the model structure needed for the form controls
+      if (this.value) {
+        this.value.overrideAffinity = this.value.overrideAffinity || {};
+        this.value.appendTolerations = this.value.appendTolerations || [];
+        this.value.overrideResourceRequirements = this.value.overrideResourceRequirements || {};
+
+        this.nodeAffinity = this.value?.overrideAffinity?.nodeAffinity || {};
+      }
+    },
+
+    affinitySettingChange() {
+      if (this.affinitySetting === CUSTOM) {
+        const parsedDefaultAffinites = JSON.parse(JSON.stringify(this.defaultAffinity));
+
+        // Copy the default so that the user can edit it
+        // this will cover the pod affinities
+        this.$set(this.value, 'overrideAffinity', parsedDefaultAffinites);
+
+        // in order not to break the node affinity component, let's go for a slightly different way of handling the logic here
+        if (parsedDefaultAffinites.nodeAffinity) {
+          this.nodeAffinity = parsedDefaultAffinites.nodeAffinity;
+        }
+      } else {
+        this.$set(this.value, 'overrideAffinity', {});
+      }
+    },
+    updateNodeAffinity(val) {
+      this.$set(this.value.overrideAffinity, 'nodeAffinity', val);
+    }
+  }
+};
+</script>
+
+<template>
+  <div v-if="value && Object.keys(value).length">
+    <Banner
+      :closable="false"
+      color="info"
+      label-key="cluster.agentConfig.banners.advanced"
+    />
+
+    <GroupPanel
+      label-key="cluster.agentConfig.groups.podRequestsAndLimits"
+      class="mt-20"
+    >
+      <Banner
+        :closable="false"
+        color="info"
+        label-key="cluster.agentConfig.banners.limits"
+      />
+      <ContainerResourceLimit
+        v-model="flatResources"
+        :mode="mode"
+        :show-tip="false"
+        :handle-gpu-limit="false"
+        class="mt-10"
+      />
+    </GroupPanel>
+
+    <GroupPanel
+      label-key="cluster.agentConfig.groups.podTolerations"
+      class="mt-20"
+    >
+      <Banner
+        :closable="false"
+        color="info"
+        label-key="cluster.agentConfig.banners.tolerations"
+      />
+      <Tolerations
+        v-model="value.appendTolerations"
+        :mode="mode"
+        class="mt-10"
+      />
+    </GroupPanel>
+
+    <GroupPanel
+      label-key="cluster.agentConfig.groups.podAffinity"
+      class="mt-20"
+    >
+      <RadioGroup
+        v-model="affinitySetting"
+        name="affinity-override"
+        :mode="mode"
+        :options="affinityOptions"
+        class="mt-10"
+        data-testid="affinity-options"
+        @input="affinitySettingChange"
+      />
+
+      <Banner
+        v-if="canEditAffinity"
+        :closable="false"
+        color="warning"
+      >
+        <p v-clean-html="t('cluster.agentConfig.banners.windowsCompatibility', {}, true)" />
+      </Banner>
+
+      <h4 v-if="canEditAffinity">
+        {{ t('cluster.agentConfig.subGroups.podAffinityAnti') }}
+      </h4>
+
+      <PodAffinity
+        v-if="canEditAffinity"
+        v-model="value"
+        field="overrideAffinity"
+        :mode="mode"
+        class="mt-0 mb-20"
+        :all-namespaces-option-available="true"
+        :force-input-namespace-selection="true"
+        :remove-labeled-input-namespace-label="true"
+        data-testid="pod-affinity"
+      />
+
+      <div
+        v-if="canEditAffinity"
+        class="separator"
+      />
+      <h4
+        v-if="canEditAffinity"
+        class="mt-20"
+      >
+        {{ t('cluster.agentConfig.subGroups.nodeAffinity') }}
+      </h4>
+
+      <NodeAffinity
+        v-if="canEditAffinity"
+        v-model="nodeAffinity"
+        :matching-selector-display="true"
+        :mode="mode"
+        class="mt-0"
+        data-testid="node-affinity"
+        @input="updateNodeAffinity"
+      />
+    </GroupPanel>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.separator {
+  width: 100%;
+  border-top: 1px solid var(--border);
+}
+</style>

package/edit/provisioning.cattle.io.cluster/MachinePool.vue

@@ -268,7 +268,7 @@ export default {
           <h3>
             {{ t('cluster.machinePool.autoReplace.label') }}
             <i
-              v-tooltip="t('cluster.machinePool.autoReplace.toolTip')"
+              v-clean-tooltip="t('cluster.machinePool.autoReplace.toolTip')"
               class="icon icon-info icon-lg"
             />
           </h3>

package/edit/provisioning.cattle.io.cluster/RegistryConfigs.vue

@@ -119,7 +119,7 @@ export default {
     <h3>
       {{ t('registryConfig.header') }}
       <i
-        v-tooltip="t('registryConfig.toolTip')"
+        v-clean-tooltip="t('registryConfig.toolTip')"
         class="icon icon-info"
       />
     </h3>