@rancher/shell 3.0.12-rc.2 → 3.0.12-rc.4

package/components/form/__tests__/Security.test.ts

@@ -79,6 +79,42 @@ describe('component: Security', () => {
       expect(wrapper.emitted('update:value')).toHaveLength(1);
     });
 
+    // Regression: clearing runAsUser must drop the key from the emitted object.
+    // Otherwise the spec is sent with `runAsUser: ""` and the API rejects with
+    // "cannot unmarshal string ... of type int64". See issue #9601.
+    it('should omit runAsUser from the emitted value when the input is cleared', async() => {
+      const wrapper = mount(Security, {
+        props: {
+          mode: _EDIT, formType: FORM_TYPES.CONTAINER, value: { runAsUser: 33 }
+        }
+      });
+      const input = wrapper.find('[data-testid="input-security-runAsUser"]').find('input');
+
+      await input.setValue('');
+
+      const events = wrapper.emitted('update:value') ?? [];
+      const last = events[events.length - 1][0] as Record<string, unknown>;
+
+      expect(Object.prototype.hasOwnProperty.call(last, 'runAsUser')).toBe(false);
+    });
+
+    it('should omit runAsUser from the emitted value when it is undefined', async() => {
+      const wrapper = mount(Security, {
+        props: {
+          mode: _EDIT, formType: FORM_TYPES.CONTAINER, value: {}
+        }
+      });
+
+      const checkbox = wrapper.find('[data-testid="input-security-runasNonRoot"]').find('label');
+
+      await checkbox.trigger('click');
+
+      const events = wrapper.emitted('update:value') ?? [];
+      const last = events[events.length - 1][0] as Record<string, unknown>;
+
+      expect(Object.prototype.hasOwnProperty.call(last, 'runAsUser')).toBe(false);
+    });
+
     it.each([
       'privileged',
       'allowPrivilegeEscalation',
@@ -139,5 +175,45 @@ describe('component: Security', () => {
 
       expect(wrapper.emitted('update:value')).toHaveLength(1);
     });
+
+    it.each([
+      'runAsUser',
+      'fsGroup',
+    ])('should omit %p from the emitted value when it is undefined', async(field) => {
+      const wrapper = mount(Security, {
+        props: {
+          mode: _EDIT, formType: FORM_TYPES.POD, value: {}
+        }
+      });
+
+      const checkbox = wrapper.find('[data-testid="input-security-runasNonRoot"]').find('label');
+
+      await checkbox.trigger('click');
+
+      const events = wrapper.emitted('update:value') ?? [];
+      const last = events[events.length - 1][0] as Record<string, unknown>;
+
+      expect(Object.prototype.hasOwnProperty.call(last, field)).toBe(false);
+    });
+
+    // Regression for #9601 — see equivalent container-level test above.
+    it.each([
+      ['runAsUser', { runAsUser: 33 }],
+      ['fsGroup', { fsGroup: 100 }],
+    ])('should omit %p from the emitted value when the input is cleared', async(field, initial) => {
+      const wrapper = mount(Security, {
+        props: {
+          mode: _EDIT, formType: FORM_TYPES.POD, value: initial
+        }
+      });
+      const input = wrapper.find(`[data-testid="input-security-${ field }"]`).find('input');
+
+      await input.setValue('');
+
+      const events = wrapper.emitted('update:value') ?? [];
+      const last = events[events.length - 1][0] as Record<string, unknown>;
+
+      expect(Object.prototype.hasOwnProperty.call(last, field)).toBe(false);
+    });
   });
 });

package/components/formatter/Autoscaler.vue

@@ -21,8 +21,8 @@ const store = useStore();
 const i18n = useI18n(store);
 
 const checked = computed(() => props.value === true || props.value === 'true');
-const actionIcon = computed(() => props.row.isAutoscalerPaused ? 'icon-play' : 'icon-pause');
-const actionText = computed(() => props.row.isAutoscalerPaused ? i18n.t('autoscaler.card.resume') : i18n.t('autoscaler.card.pause'));
+const actionIcon = computed(() => props.row.provCluster.isAutoscalerPaused ? 'icon-play' : 'icon-pause');
+const actionText = computed(() => props.row.provCluster.isAutoscalerPaused ? i18n.t('autoscaler.card.resume') : i18n.t('autoscaler.card.pause'));
 const stopPropagation = (event: Event) => {
   // This is to prevent click events from getting to the table row which ends up selecting the row
   event.stopPropagation();
@@ -45,7 +45,7 @@ const stopPropagation = (event: Event) => {
         #heading-action="{close}"
       >
         <RcButton
-          v-if="row.canPauseResumeAutoscaler"
+          v-if="row.provCluster.canPauseResumeAutoscaler"
           variant="secondary"
           size="small"
           class="action"
@@ -56,7 +56,7 @@ const stopPropagation = (event: Event) => {
         </RcButton>
       </template>
       <template #card-body>
-        <AutoscalerCard :value="props.row" />
+        <AutoscalerCard :value="props.row.provCluster" />
       </template>
     </PopoverCard>
   </span>

package/components/formatter/ClusterKubeVersion.vue

@@ -0,0 +1,27 @@
+<script>
+
+export default {
+  name: 'ClusterKubeVersion',
+
+  props: {
+    row: {
+      type:    Object,
+      default: null,
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <span>
+      {{ row.kubernetesVersion }}
+    </span>
+    <div
+      v-clean-tooltip="{content: row.architecture.tooltip, placement: 'left'}"
+      class="text-muted"
+    >
+      {{ row.architecture.label }}
+    </div>
+  </div>
+</template>

package/components/formatter/ClusterLink.vue

@@ -31,7 +31,7 @@ export default {
         return this.getCustomDetailLink(this.row);
       }
 
-      return this.row?.detailLocation;
+      return this.row?.provCluster?.detailLocation;
     },
 
     statusErrorConditions() {
@@ -77,12 +77,6 @@ export default {
       class="conditions-alert-icon icon-alert icon"
       data-testid="unavailable-machines-alert-icon"
     />
-    <i
-      v-if="row.isRke1"
-      v-clean-tooltip="t('cluster.rke1Unsupported')"
-      class="rke1-unsupported-icon icon-warning icon"
-      data-testid="rke1-unsupported-icon"
-    />
     <i
       v-if="row.hasError && statusErrorConditions.length > 0"
       v-clean-tooltip="{ content: `<div>${formattedConditions}</div>`, html: true }"

package/components/formatter/ClusterProvider.vue

@@ -12,26 +12,22 @@ export default {
 <template>
   <div>
     <template v-if="row.machineProvider">
-      <span v-if="row.isHarvester && row.mgmt && row.mgmt.isReady && !row.hasError">
+      <span v-if="row.isHarvester && row.isReady && !row.hasError">
         <a
-          v-if="row.mgmt.isReady && !row.hasError"
           role="button"
           @click="row.goToHarvesterCluster()"
         >
           {{ row.machineProviderDisplay }}
         </a>
       </span>
-      <span v-else>
+      <span v-else-if="row.machineProviderDisplay">
         {{ row.machineProviderDisplay }}
       </span>
     </template>
-    <template v-else-if="row.isImported">
-      {{ t('cluster.provider.imported') }}
-    </template>
-    <template v-else-if="row.isCustom">
-      {{ t('cluster.provider.custom') }}
-    </template>
-    <div class="text-muted">
+    <div
+      v-if="row.machineProviderDisplay !== row.provisionerDisplay"
+      class="text-muted"
+    >
       {{ row.provisionerDisplay }}
     </div>
   </div>

package/components/formatter/FleetSummaryGraph.vue

@@ -26,9 +26,6 @@ export default {
       if (this.clusterId) {
         return this.row.statusResourceCountsForCluster(this.clusterId);
       }
-      if (this.row.statusResourceCountsForCluster) {
-        return this.row.statusResourceCountsForCluster;
-      }
 
       return this.row.status?.resourceCounts || {};
     },

package/components/formatter/InternalExternalIP.vue

@@ -1,5 +1,5 @@
 <script>
-import { isV4Format, isV6Format } from 'ip';
+import ipaddr from 'ipaddr.js';
 import CopyToClipboard from '@shell/components/CopyToClipboard';
 import { mapGetters } from 'vuex';
 import RcStatusBadge from '@components/Pill/RcStatusBadge/RcStatusBadge';
@@ -15,10 +15,16 @@ export default {
   computed: {
     ...mapGetters({ t: 'i18n/t' }),
     filteredExternalIps() {
-      return this.row.externalIps?.filter((ip) => this.isIp(ip)) || [];
+      const ips = this.row.externalIps ||
+        (this.row.externalIp && this.row.externalIp !== this.t('generic.none') ? [this.row.externalIp] : []);
+
+      return ips.filter((ip) => this.isIp(ip));
     },
     filteredInternalIps() {
-      return this.row.internalIps?.filter((ip) => this.isIp(ip)) || [];
+      const ips = this.row.internalIps ||
+        (this.row.internalIp ? [this.row.internalIp] : []);
+
+      return ips.filter((ip) => this.isIp(ip));
     },
     internalSameAsExternal() {
       return this.externalIp && this.internalIp && this.externalIp === this.internalIp;
@@ -59,7 +65,7 @@ export default {
   },
   methods: {
     isIp(ip) {
-      return ip && (isV4Format(ip) || isV6Format(ip));
+      return ip && (ipaddr.IPv4.isValidFourPartDecimal(ip) || ipaddr.IPv6.isValid(ip));
     }
   }
 };

package/components/formatter/MachineSummaryGraph.vue

@@ -18,7 +18,7 @@ export default {
   computed: {
     ready() {
       // Ensure we never show more ready machines than desired
-      // If w can address in backedn, we could revert this in the future
+      // If we can address in backend, we could revert this in the future
       const ready = this.row?.ready || 0;
       const desired = this.row?.desired || 0;
 

package/components/formatter/PodsUsage.vue

@@ -9,8 +9,8 @@ export default {
   },
   computed: {
     podsUsage() {
-      const usedPods = this.row?.mgmt?.status?.requested?.pods;
-      const totalPods = this.row?.mgmt?.status?.allocatable?.pods;
+      const usedPods = this.row?.status?.requested?.pods;
+      const totalPods = this.row?.status?.allocatable?.pods;
 
       if (!this.row?.isReady || !totalPods) {
         return '—';

package/components/formatter/ServiceTargets.vue

@@ -1,6 +1,6 @@
 <script>
 import isEmpty from 'lodash/isEmpty';
-import { CATTLE_PUBLIC_ENDPOINTS } from '@shell/config/labels-annotations';
+import { CATTLE_PUBLIC_ENDPOINTS, SERVICE_LINKS } from '@shell/config/labels-annotations';
 import Endpoints from '@shell/components/formatter/Endpoints';
 import has from 'lodash/has';
 import { isMaybeSecure } from '@shell/utils/url';
@@ -52,6 +52,23 @@ export default {
         return annotations[CATTLE_PUBLIC_ENDPOINTS];
       }
 
+      const serviceLinksAnnotation = annotations[SERVICE_LINKS];
+      const serviceLinksMap = new Map();
+
+      if (serviceLinksAnnotation) {
+        serviceLinksAnnotation.split(',').forEach((entry) => {
+          const [portStr, scheme] = entry.trim().split('/');
+          const port = Number(portStr);
+
+          const validSchemes = ['http', 'https'];
+          const normalizedScheme = scheme?.toLowerCase();
+
+          if (port > 0 && !isNaN(port)) {
+            serviceLinksMap.set(port, validSchemes.includes(normalizedScheme) ? normalizedScheme : null);
+          }
+        });
+      }
+
       // <CLUSTER_IP>:<PORT>/<PROTOCOL> > <TARGET PORT>
       if (isEmpty(ports)) {
         if (!isEmpty(parsedClusterIp)) {
@@ -70,12 +87,14 @@ export default {
 
           const stringPort = p.port.toString();
 
-          if (p?.protocol === 'TCP' && (stringPort.endsWith('80') || stringPort.endsWith('443'))) {
-            if (isMaybeSecure(p.port, p?.protocol)) {
-              proxyUrl = row.proxyUrl('https', p.port);
-            } else {
-              proxyUrl = row.proxyUrl('http', p.port);
-            }
+          const isDefaultPort = stringPort.endsWith('80') || stringPort.endsWith('443');
+          const hasServiceLink = serviceLinksMap.has(p.port);
+
+          if (p?.protocol === 'TCP' && (isDefaultPort || hasServiceLink)) {
+            const explicitScheme = hasServiceLink ? serviceLinksMap.get(p.port) : null;
+            const scheme = explicitScheme || (isMaybeSecure(p.port, p?.protocol) ? 'https' : 'http');
+
+            proxyUrl = row.proxyUrl(scheme, p.port);
           }
 
           const clusterIpAndPort = proxyUrl ? `<a href="${ proxyUrl }" target="_blank" rel="noopener noreferrer nofollow">${ p?.name ? p.name : `${ parsedClusterIp }${ p.port }` }</a>` : `${ parsedClusterIp }${ p.port }`;

package/components/formatter/__tests__/Autoscaler.test.ts

@@ -30,6 +30,10 @@ describe('component: formatter/Autoscaler.vue', () => {
         stubs:   {
           PopoverCard:    PopoverCardStub,
           RcButton:       { template: '<button><slot /></button>' },
+          // RcButton:    {
+          //   template: '<button><i v-if="icon" :class="icon" /><i v-if="leftIcon" :class="leftIcon" /><slot /></button>',
+          //   props:    ['icon', 'leftIcon']
+          // },
           AutoscalerCard: {
             name:     'AutoscalerCard',
             props:    ['value'],
@@ -88,30 +92,26 @@ describe('component: formatter/Autoscaler.vue', () => {
     });
 
     it('should render AutoscalerCard with correct row data', () => {
-      const rowData = { id: 'test-row' };
-      const wrapper = createWrapper({ value: true, row: rowData });
+      const provCluster = { id: 'test-row' };
+      const wrapper = createWrapper({ value: true, row: { provCluster } });
       const card = wrapper.findComponent({ name: 'AutoscalerCard' });
 
       expect(card.exists()).toBe(true);
-      expect(card.props('value')).toStrictEqual(rowData);
+      expect(card.props('value')).toStrictEqual(provCluster);
     });
   });
 
   describe('heading action button', () => {
     it('should NOT render if canExplore is false', () => {
-      const rowData = { canExplore: false };
-      const wrapper = createWrapper({ value: true, row: rowData });
+      const provCluster = { canExplore: false };
+      const wrapper = createWrapper({ value: true, row: { provCluster } });
 
       expect(wrapper.find('button').exists()).toBe(false);
     });
 
     it('should render "Pause" button if autoscaler is running', () => {
-      const rowData = {
-        canExplore: true, isAutoscalerPaused: false, canPauseResumeAutoscaler: true
-      };
-      const wrapper = createWrapper({
-        value: true, row: rowData, canPauseResumeAutoscaler: true
-      });
+      const provCluster = { isAutoscalerPaused: false, canPauseResumeAutoscaler: true };
+      const wrapper = createWrapper({ value: true, row: { canExplore: true, provCluster } });
       const button = wrapper.find('button');
 
       expect(button.exists()).toBe(true);
@@ -120,10 +120,8 @@ describe('component: formatter/Autoscaler.vue', () => {
     });
 
     it('should render "Resume" button if autoscaler is paused', () => {
-      const rowData = {
-        canExplore: true, isAutoscalerPaused: true, canPauseResumeAutoscaler: true
-      };
-      const wrapper = createWrapper({ value: true, row: rowData });
+      const provCluster = { isAutoscalerPaused: true, canPauseResumeAutoscaler: true };
+      const wrapper = createWrapper({ value: true, row: { canExplore: true, provCluster } });
       const button = wrapper.find('button');
 
       expect(button.exists()).toBe(true);
@@ -132,20 +130,19 @@ describe('component: formatter/Autoscaler.vue', () => {
     });
 
     it('should hide "Resume" button if canPauseResumeAutoscaler is false', () => {
-      const rowData = {
-        canExplore: true, isAutoscalerPaused: true, canPauseResumeAutoscaler: false
-      };
-      const wrapper = createWrapper({ value: true, row: rowData });
+      const provCluster = { isAutoscalerPaused: true, canPauseResumeAutoscaler: false };
+      const wrapper = createWrapper({ value: true, row: { canExplore: true, provCluster } });
       const button = wrapper.find('button');
 
       expect(button.exists()).toBe(false);
     });
 
     it('should call toggleAutoscalerRunner and close on click', async() => {
-      const rowData = {
-        canExplore: true, toggleAutoscalerRunner: mockToggleRunner, canPauseResumeAutoscaler: true
+      const provCluster = { canPauseResumeAutoscaler: true };
+      const mgmtCluster = {
+        toggleAutoscalerRunner: mockToggleRunner, canExplore: true, provCluster
       };
-      const wrapper = createWrapper({ value: true, row: rowData });
+      const wrapper = createWrapper({ value: true, row: mgmtCluster });
 
       wrapper.find('button').trigger('click');
 

package/components/formatter/__tests__/FleetSummaryGraph.test.ts

@@ -0,0 +1,216 @@
+import { shallowMount } from '@vue/test-utils';
+import FleetSummaryGraph from '@shell/components/formatter/FleetSummaryGraph.vue';
+import { FLEET } from '@shell/config/types';
+import { ExtendedVue, Vue } from 'vue/types/vue';
+import { DefaultProps } from 'vue/types/options';
+
+const FleetSummaryGraphComponent = FleetSummaryGraph as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>;
+
+function makeRow({
+  type = FLEET.GIT_REPO,
+  resourceCounts = {},
+  targetClusters = [],
+  statusResourceCountsForCluster = undefined,
+}: {
+  type?: string;
+  resourceCounts?: Record<string, number>;
+  targetClusters?: any[];
+  statusResourceCountsForCluster?: any;
+} = {}) {
+  const row: Record<string, any> = {
+    id:     'test-ns/test-row',
+    type,
+    status: { resourceCounts },
+    targetClusters,
+  };
+
+  if (statusResourceCountsForCluster !== undefined) {
+    row.statusResourceCountsForCluster = statusResourceCountsForCluster;
+  }
+
+  return row;
+}
+
+describe('component: FleetSummaryGraph', () => {
+  describe('summary', () => {
+    it('returns status.resourceCounts for GitRepo rows', () => {
+      const resourceCounts = {
+        desiredReady: 7,
+        ready:        7,
+      };
+      const wrapper = shallowMount(FleetSummaryGraphComponent, {
+        propsData: {
+          row: makeRow({
+            resourceCounts,
+            targetClusters: [{ id: 'cluster-1' }],
+          }),
+        },
+      });
+
+      expect((wrapper.vm as any).summary).toStrictEqual(resourceCounts);
+    });
+
+    it('returns status.resourceCounts for HelmOp rows', () => {
+      const resourceCounts = {
+        desiredReady: 3,
+        ready:        2,
+        modified:     1,
+      };
+      const wrapper = shallowMount(FleetSummaryGraphComponent, {
+        propsData: {
+          row: makeRow({
+            type:           FLEET.HELM_OP,
+            resourceCounts,
+            targetClusters: [{ id: 'cluster-1' }],
+          }),
+        },
+      });
+
+      expect((wrapper.vm as any).summary).toStrictEqual(resourceCounts);
+    });
+
+    it('does not return function when row has statusResourceCountsForCluster as a method', () => {
+      const resourceCounts = {
+        desiredReady: 5,
+        ready:        5,
+      };
+      const wrapper = shallowMount(FleetSummaryGraphComponent, {
+        propsData: {
+          row: makeRow({
+            resourceCounts,
+            targetClusters:                 [{ id: 'cluster-1' }],
+            // Simulate a class method — the bug was that a truthy function
+            // caused summary to return the function itself instead of resourceCounts
+            statusResourceCountsForCluster: (clusterId: string) => ({ desiredReady: 0 }),
+          }),
+        },
+      });
+
+      const summary = (wrapper.vm as any).summary;
+
+      expect(typeof summary).not.toBe('function');
+      expect(summary).toStrictEqual(resourceCounts);
+    });
+
+    it('calls statusResourceCountsForCluster with clusterId when clusterId prop is set', () => {
+      const perClusterData = {
+        desiredReady: 2,
+        ready:        1,
+      };
+      const mockFn = jest.fn().mockReturnValue(perClusterData);
+
+      const wrapper = shallowMount(FleetSummaryGraphComponent, {
+        propsData: {
+          row:       makeRow({ statusResourceCountsForCluster: mockFn }),
+          clusterId: 'cluster-1',
+        },
+      });
+
+      expect((wrapper.vm as any).summary).toStrictEqual(perClusterData);
+      expect(mockFn).toHaveBeenCalledWith('cluster-1');
+    });
+
+    it('returns empty object when status.resourceCounts is undefined', () => {
+      const wrapper = shallowMount(FleetSummaryGraphComponent, { propsData: { row: makeRow() } });
+
+      expect((wrapper.vm as any).summary).toStrictEqual({});
+    });
+  });
+
+  describe('show', () => {
+    it('returns true when stateParts exist and row has targetClusters', () => {
+      const wrapper = shallowMount(FleetSummaryGraphComponent, {
+        propsData: {
+          row: makeRow({
+            resourceCounts: {
+              desiredReady: 5,
+              ready:        5,
+            },
+            targetClusters: [{ id: 'cluster-1' }],
+          }),
+        },
+      });
+
+      expect((wrapper.vm as any).show).toBeTruthy();
+    });
+
+    it('returns false when stateParts exist but targetClusters is empty', () => {
+      const wrapper = shallowMount(FleetSummaryGraphComponent, {
+        propsData: {
+          row: makeRow({
+            resourceCounts: {
+              desiredReady: 5,
+              ready:        5,
+            },
+            targetClusters: [],
+          }),
+        },
+      });
+
+      expect((wrapper.vm as any).show).toBeFalsy();
+    });
+
+    it('returns true for FLEET.CLUSTER type even without targetClusters', () => {
+      const wrapper = shallowMount(FleetSummaryGraphComponent, {
+        propsData: {
+          row: makeRow({
+            type:           FLEET.CLUSTER,
+            resourceCounts: {
+              desiredReady: 3,
+              ready:        3,
+            },
+          }),
+        },
+      });
+
+      expect((wrapper.vm as any).show).toBeTruthy();
+    });
+
+    it('returns false when resourceCounts is empty', () => {
+      const wrapper = shallowMount(FleetSummaryGraphComponent, { propsData: { row: makeRow({ targetClusters: [{ id: 'cluster-1' }] }) } });
+
+      expect((wrapper.vm as any).show).toBeFalsy();
+    });
+  });
+
+  describe('stateParts', () => {
+    it('filters out keys starting with "desired"', () => {
+      const wrapper = shallowMount(FleetSummaryGraphComponent, {
+        propsData: {
+          row: makeRow({
+            resourceCounts: {
+              desiredReady: 5,
+              ready:        5,
+            },
+            targetClusters: [{ id: 'cluster-1' }],
+          }),
+        },
+      });
+
+      const parts = (wrapper.vm as any).stateParts;
+
+      expect(parts.every((p: any) => !p.label.startsWith('Desired'))).toBe(true);
+    });
+
+    it('filters out entries with value 0', () => {
+      const wrapper = shallowMount(FleetSummaryGraphComponent, {
+        propsData: {
+          row: makeRow({
+            resourceCounts: {
+              desiredReady: 5,
+              ready:        5,
+              notReady:     0,
+            },
+            targetClusters: [{ id: 'cluster-1' }],
+          }),
+        },
+      });
+
+      const parts = (wrapper.vm as any).stateParts;
+      const labels = parts.map((p: any) => p.label);
+
+      expect(labels).toContain('Ready');
+      expect(labels).not.toContain('NotReady');
+    });
+  });
+});