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

package/utils/__tests__/time.test.ts

@@ -1,5 +1,8 @@
+import day from 'dayjs';
 import { DATE_FORMAT, TIME_FORMAT } from '@shell/store/prefs';
-import { dateTimeFormat, isMissingDate } from '@shell/utils/time';
+import {
+  dateTimeFormat, diffFrom, elapsedTime, getSecondsDiff, isMissingDate, safeSetTimeout
+} from '@shell/utils/time';
 import { type Store } from 'vuex';
 import { ZERO_TIME } from '@shell/config/types';
 
@@ -42,3 +45,264 @@ describe('function: dateTimeFormat', () => {
     expect(formattedDate).toBe('');
   });
 });
+
+describe('function: elapsedTime', () => {
+  it.each([
+    {
+      desc:     'returns empty object for 0',
+      seconds:  0,
+      expected: {},
+    },
+    {
+      desc:     'returns empty object for null',
+      seconds:  null,
+      expected: {},
+    },
+    {
+      desc:     'returns empty object for undefined',
+      seconds:  undefined,
+      expected: {},
+    },
+    {
+      desc:     'returns seconds label for 1 second',
+      seconds:  1,
+      expected: { diff: 1, label: '1s' },
+    },
+    {
+      desc:     'returns seconds label for 60 seconds',
+      seconds:  60,
+      expected: { diff: 1, label: '60s' },
+    },
+    {
+      desc:     'returns seconds label for 119 seconds (upper bound)',
+      seconds:  119,
+      expected: { diff: 1, label: '119s' },
+    },
+    {
+      desc:     'returns minutes+seconds label for 120 seconds',
+      seconds:  120,
+      expected: { diff: 1, label: '2m0s' },
+    },
+    {
+      desc:     'returns minutes+seconds label for 599 seconds',
+      seconds:  599,
+      expected: { diff: 1, label: '9m59s' },
+    },
+    {
+      desc:     'returns minutes-only label for 600 seconds',
+      seconds:  600,
+      expected: { diff: 60, label: '10m' },
+    },
+    {
+      desc:     'returns minutes-only label for 10799 seconds (under 3 hours)',
+      seconds:  10799,
+      expected: { diff: 60, label: '179m' },
+    },
+    {
+      desc:     'returns hours+minutes label for 10800 seconds (3 hours)',
+      seconds:  10800,
+      expected: { diff: 60, label: '3h0m' },
+    },
+    {
+      desc:     'returns hours+minutes label for 25200 seconds (7 hours)',
+      seconds:  25200,
+      expected: { diff: 60, label: '7h0m' },
+    },
+    {
+      desc:     'returns hours-only label for 28800 seconds (8 hours)',
+      seconds:  28800,
+      expected: { diff: 60, label: '8h' },
+    },
+    {
+      desc:     'returns hours-only label for 86400 seconds (1 day as hours)',
+      seconds:  86400,
+      expected: { diff: 60, label: '24h' },
+    },
+    {
+      desc:     'returns days+hours label for 172800 seconds (2 days)',
+      seconds:  172800,
+      expected: { diff: 60, label: '2d0h' },
+    },
+    {
+      desc:     'returns days+hours label for 176400 seconds (2 days 1 hour)',
+      seconds:  176400,
+      expected: { diff: 60, label: '2d1h' },
+    },
+  ])('$desc', ({ seconds, expected }) => {
+    expect(elapsedTime(seconds)).toStrictEqual(expected);
+  });
+});
+
+describe('function: safeSetTimeout', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
+  it('invokes the callback after the given delay', () => {
+    const callback = jest.fn();
+
+    safeSetTimeout(100, callback, null);
+    jest.runAllTimers();
+
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it('invokes the callback with the provided context object', () => {
+    let capturedContext: unknown;
+
+    function cb(this: unknown) {
+      capturedContext = this;
+    }
+    const ctx = { id: 'ctx' };
+
+    safeSetTimeout(100, cb, ctx);
+    jest.runAllTimers();
+
+    expect(capturedContext).toStrictEqual(ctx);
+  });
+
+  it('does not schedule a timeout when delay exceeds 32-bit maximum', () => {
+    const callback = jest.fn();
+    const result = safeSetTimeout(2147483648, callback, null);
+
+    jest.runAllTimers();
+
+    expect(result).toBeUndefined();
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('schedules a timeout for delay equal to 32-bit maximum', () => {
+    const callback = jest.fn();
+
+    safeSetTimeout(2147483647, callback, null);
+    jest.runAllTimers();
+
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('function: getSecondsDiff', () => {
+  it.each([
+    {
+      desc:      'returns 0 for identical date strings',
+      startDate: '2024-01-01T00:00:00Z',
+      endDate:   '2024-01-01T00:00:00Z',
+      expected:  0,
+    },
+    {
+      desc:      'returns 60 for dates one minute apart',
+      startDate: '2024-01-01T00:00:00Z',
+      endDate:   '2024-01-01T00:01:00Z',
+      expected:  60,
+    },
+    {
+      desc:      'returns 3600 for dates one hour apart',
+      startDate: '2024-01-01T00:00:00Z',
+      endDate:   '2024-01-01T01:00:00Z',
+      expected:  3600,
+    },
+    {
+      desc:      'returns absolute difference when end is before start',
+      startDate: '2024-01-01T01:00:00Z',
+      endDate:   '2024-01-01T00:00:00Z',
+      expected:  3600,
+    },
+    {
+      desc:      'returns 86400 for dates one day apart',
+      startDate: '2024-01-01T00:00:00Z',
+      endDate:   '2024-01-02T00:00:00Z',
+      expected:  86400,
+    },
+  ])('$desc', ({ startDate, endDate, expected }) => {
+    expect(getSecondsDiff(startDate, endDate)).toStrictEqual(expected);
+  });
+});
+
+describe('function: diffFrom', () => {
+  const from = day('2024-01-01T12:00:00Z');
+
+  it.each([
+    {
+      desc:     '30 seconds reports seconds unit',
+      value:    from.subtract(30, 'second'),
+      expected: {
+        diff:     -30,
+        absDiff:  30,
+        label:    30,
+        unitsKey: 'unit.sec',
+        units:    'sec',
+        next:     1,
+      },
+    },
+    {
+      desc:     '120 seconds reports minutes unit with small label',
+      value:    from.subtract(120, 'second'),
+      expected: {
+        diff:     -120,
+        absDiff:  2,
+        label:    2,
+        unitsKey: 'unit.min',
+        units:    'min',
+        next:     6,
+      },
+    },
+    {
+      desc:     '600 seconds reports minutes unit with integer label',
+      value:    from.subtract(600, 'second'),
+      expected: {
+        diff:     -600,
+        absDiff:  10,
+        label:    10,
+        unitsKey: 'unit.min',
+        units:    'min',
+        next:     6,
+      },
+    },
+    {
+      desc:     '5400 seconds reports hours unit with fractional label',
+      value:    from.subtract(5400, 'second'),
+      expected: {
+        diff:     -5400,
+        absDiff:  1.5,
+        label:    1.5,
+        unitsKey: 'unit.hour',
+        units:    'hour',
+        next:     36,
+      },
+    },
+    {
+      desc:     '172800 seconds reports days unit',
+      value:    from.subtract(172800, 'second'),
+      expected: {
+        diff:     -172800,
+        absDiff:  2,
+        label:    2,
+        unitsKey: 'unit.day',
+        units:    'day',
+        next:     72,
+      },
+    },
+  ])('$desc', ({ value, expected }) => {
+    expect(diffFrom(value, from, null)).toStrictEqual(expected);
+  });
+
+  it('includes string property when t function is provided', () => {
+    const value = from.subtract(30, 'second');
+    const t = (key: string, args: unknown) => `${ key }:${ JSON.stringify(args) }`;
+    const result = diffFrom(value, from, t);
+
+    expect(result.string).toStrictEqual(`30 unit.sec:${ JSON.stringify({ count: 30 }) }`);
+  });
+
+  it('omits string property when t function is not provided', () => {
+    const value = from.subtract(30, 'second');
+    const result = diffFrom(value, from, null);
+
+    expect(result).not.toHaveProperty('string');
+  });
+});

package/utils/__tests__/title.test.ts

@@ -0,0 +1,47 @@
+import { updatePageTitle } from '@shell/utils/title';
+
+describe('updatePageTitle', () => {
+  afterEach(() => {
+    document.title = '';
+  });
+
+  it('sets document.title to a single breadcrumb', () => {
+    updatePageTitle('Home');
+    expect(document.title).toStrictEqual('Home');
+  });
+
+  it('joins multiple breadcrumbs with " - "', () => {
+    updatePageTitle('Rancher', 'Clusters', 'my-cluster');
+    expect(document.title).toStrictEqual('Rancher - Clusters - my-cluster');
+  });
+
+  it('filters out null values', () => {
+    updatePageTitle('Rancher', null, 'Clusters');
+    expect(document.title).toStrictEqual('Rancher - Clusters');
+  });
+
+  it('filters out undefined values', () => {
+    updatePageTitle('Rancher', undefined, 'Clusters');
+    expect(document.title).toStrictEqual('Rancher - Clusters');
+  });
+
+  it('filters out false values', () => {
+    updatePageTitle('Rancher', false, 'Clusters');
+    expect(document.title).toStrictEqual('Rancher - Clusters');
+  });
+
+  it('filters out empty string values', () => {
+    updatePageTitle('Rancher', '', 'Clusters');
+    expect(document.title).toStrictEqual('Rancher - Clusters');
+  });
+
+  it('sets document.title to empty string when all breadcrumbs are falsy', () => {
+    updatePageTitle(null, undefined, false);
+    expect(document.title).toStrictEqual('');
+  });
+
+  it('sets document.title to empty string when called with no arguments', () => {
+    updatePageTitle();
+    expect(document.title).toStrictEqual('');
+  });
+});

package/utils/__tests__/width.test.ts

@@ -0,0 +1,53 @@
+import { setWidth, getWidth } from '@shell/utils/width';
+
+describe('setWidth', () => {
+  it('does nothing when el is null', () => {
+    expect(() => setWidth(null, '100px')).not.toThrow();
+  });
+
+  it('does nothing when el is undefined', () => {
+    expect(() => setWidth(undefined, '100px')).not.toThrow();
+  });
+
+  it('sets style.width to a string value directly', () => {
+    const el = document.createElement('div');
+
+    setWidth(el, '200px');
+    expect(el.style.width).toStrictEqual('200px');
+  });
+
+  it('sets style.width with px suffix for a numeric value', () => {
+    const el = document.createElement('div');
+
+    setWidth(el, 150);
+    expect(el.style.width).toStrictEqual('150px');
+  });
+
+  it('sets style.width using the return value of a function', () => {
+    const el = document.createElement('div');
+
+    setWidth(el, () => '300px');
+    expect(el.style.width).toStrictEqual('300px');
+  });
+
+  it('sets style.width using the numeric return value of a function with px suffix', () => {
+    const el = document.createElement('div');
+
+    setWidth(el, () => 50);
+    expect(el.style.width).toStrictEqual('50px');
+  });
+});
+
+describe('getWidth', () => {
+  it('returns undefined when el is null', () => {
+    expect(getWidth(null)).toBeUndefined();
+  });
+
+  it('returns undefined when el is undefined', () => {
+    expect(getWidth(undefined)).toBeUndefined();
+  });
+
+  it('returns undefined for an empty array-like object with length 0', () => {
+    expect(getWidth({ length: 0 })).toBeUndefined();
+  });
+});

package/utils/__tests__/window.test.ts

@@ -0,0 +1,158 @@
+import { open, Popup, popupWindowOptions } from '@shell/utils/window';
+
+function mockScreen(width: number, height: number) {
+  Object.defineProperty(window, 'screen', {
+    configurable: true,
+    writable:     true,
+    value:        { width, height },
+  });
+}
+
+describe('window utils', () => {
+  describe('popupWindowOptions', () => {
+    afterEach(() => {
+      mockScreen(0, 0);
+    });
+
+    it.each([
+      {
+        desc:         'uses default 1040×768 and centers on a large screen when no size is given',
+        screenWidth:  2560,
+        screenHeight: 1440,
+        width:        undefined as number | undefined,
+        height:       undefined as number | undefined,
+        expected:     'width=1040,height=768,resizable=1,scrollbars=1,left=760,top=336',
+      },
+      {
+        desc:         'uses custom size and centers on a large screen',
+        screenWidth:  2560,
+        screenHeight: 1440,
+        width:        800,
+        height:       600,
+        expected:     'width=800,height=600,resizable=1,scrollbars=1,left=880,top=420',
+      },
+      {
+        desc:         'caps size to screen dimensions when requested size exceeds screen',
+        screenWidth:  2560,
+        screenHeight: 1440,
+        width:        3000,
+        height:       2000,
+        expected:     'width=2560,height=1440,resizable=1,scrollbars=1,left=0,top=0',
+      },
+      {
+        desc:         'caps size to screen dimensions and uses left/top 0 when screen is smaller than defaults',
+        screenWidth:  800,
+        screenHeight: 600,
+        width:        undefined as number | undefined,
+        height:       undefined as number | undefined,
+        expected:     'width=800,height=600,resizable=1,scrollbars=1,left=0,top=0',
+      },
+    ])('$desc', ({
+      screenWidth, screenHeight, width, height, expected
+    }) => {
+      mockScreen(screenWidth, screenHeight);
+      expect(popupWindowOptions(width, height)).toStrictEqual(expected);
+    });
+  });
+
+  describe('open', () => {
+    let mockWindowOpen: jest.SpyInstance;
+
+    beforeEach(() => {
+      mockWindowOpen = jest.spyOn(window, 'open').mockReturnValue(null);
+    });
+
+    afterEach(() => {
+      mockWindowOpen.mockRestore();
+    });
+
+    it('calls window.open with the given url, name, and options', () => {
+      open('https://example.com', '_blank', 'width=800');
+      expect(mockWindowOpen).toHaveBeenCalledWith('https://example.com', '_blank', 'width=800');
+    });
+
+    it('uses default name _blank and empty options when not specified', () => {
+      open('https://example.com');
+      expect(mockWindowOpen).toHaveBeenCalledWith('https://example.com', '_blank', '');
+    });
+  });
+
+  describe('Popup class', () => {
+    const mockPopup = { closed: false };
+    let mockWindowOpen: jest.SpyInstance;
+
+    beforeEach(() => {
+      mockPopup.closed = false;
+      mockWindowOpen = jest
+        .spyOn(window, 'open')
+        .mockReturnValue(mockPopup as unknown as Window);
+    });
+
+    afterEach(() => {
+      mockWindowOpen.mockRestore();
+    });
+
+    it('initialises with null popup reference', () => {
+      const popup = new Popup();
+
+      expect(popup.popup).toBeNull();
+    });
+
+    it('calls onOpen callback when open is called', () => {
+      const onOpen = jest.fn();
+      const popup = new Popup(onOpen);
+
+      popup.open('https://example.com', '_blank', '', true);
+
+      expect(onOpen).toHaveBeenCalledWith();
+    });
+
+    it('sets popup reference to the opened window', () => {
+      const popup = new Popup();
+
+      popup.open('https://example.com', '_blank', '', true);
+
+      expect(popup.popup).toStrictEqual(mockPopup);
+    });
+
+    it('throws when the popup is blocked by the browser', () => {
+      mockWindowOpen.mockReturnValue(null);
+      const popup = new Popup();
+
+      expect(() => popup.open('https://example.com', '_blank', '', true))
+        .toThrow('Please disable your popup blocker for this site');
+    });
+
+    describe('when polling for window closure', () => {
+      beforeEach(() => {
+        jest.useFakeTimers();
+      });
+
+      afterEach(() => {
+        jest.useRealTimers();
+      });
+
+      it('calls onClose callback when the popup window is closed', () => {
+        const onClose = jest.fn();
+        const popup = new Popup(undefined, onClose);
+
+        popup.open('https://example.com', '_blank', '', false);
+        mockPopup.closed = true;
+        jest.advanceTimersByTime(500);
+
+        expect(onClose).toHaveBeenCalledWith();
+      });
+
+      it('does not call onClose when doNotPollForClosure is true', () => {
+        const onClose = jest.fn();
+        const popup = new Popup(undefined, onClose);
+
+        popup.open('https://example.com', '_blank', '', true);
+        mockPopup.closed = true;
+        jest.advanceTimersByTime(1000);
+
+        expect(onClose).not.toHaveBeenCalled();
+      });
+    });
+  });
+});

package/utils/__tests__/xccdf.test.ts

@@ -157,34 +157,154 @@ describe('xccdf util: generateXCCDF', () => {
     expect(xml).toContain('<Group id="not-applicable">');
   });
 
-  it('uses STIG metadata to override rule id, version, severity, fix, check system, and CCI idents', () => {
+  it('applies a per-check decoration verbatim when the decoration key matches the check id exactly', () => {
     const xml = generateXCCDF({
       report: {
         ...baseReport,
         results: [{
-          id:          'g1',
+          id:          '5.1',
           description: 'g',
+          checks:      [{
+            id: '5.1.1', description: 'exact', scored: true, state: 'pass',
+          }],
+        }],
+      },
+      benchmarkVersion: 'cis-1.7',
+      decorations:      {
+        '5.1.1': {
+          ruleId: 'CIS-5.1.1-rule', version: '2024-01', severity: 'high', fixId: 'F-5.1.1', checkId: 'C-5.1.1',
+        },
+      },
+    });
+
+    expect(xml).toContain('id="CIS-5.1.1-rule"');
+    expect(xml).toContain('idref="CIS-5.1.1-rule"');
+    expect(xml).toMatch(/id="CIS-5\.1\.1-rule"[^>]*severity="high"/);
+    expect(xml).toContain('<version>2024-01</version>');
+    expect(xml).toContain('fixref="F-5.1.1"');
+    expect(xml).toContain('<check system="C-5.1.1">');
+  });
+
+  it('applies a group-keyed decoration with a suffix derived from the check id', () => {
+    const xml = generateXCCDF({
+      report: {
+        ...baseReport,
+        results: [{
+          id:          'V-254553',
+          description: 'STIG group',
           checks:      [{
             id: 'V-254553-TLS-apiserver', description: 'STIG check', scored: true, state: 'pass',
           }],
         }],
       },
       benchmarkVersion: 'rke2-stig-1.31',
-      stigChecks:       {
+      decorations:      {
         'V-254553': {
-          ruleId: 'SV-254553r1016525_rule', version: 'SV-254553r1016525_rule', severity: 'high', fixId: 'F-254553', checkId: 'C-254553', cci: ['CCI-000366'],
+          ruleId: 'SV-254553r1016525_rule', version: 'SV-254553r1016525_rule', severity: 'high', fixId: 'F-254553', checkId: 'C-254553',
         },
       },
     });
 
+    expect(xml).toContain('id="SV-254553r1016525_rule_TLS-apiserver"');
     expect(xml).toContain('idref="SV-254553r1016525_rule_TLS-apiserver"');
     expect(xml).toContain('severity="high"');
-    expect(xml).toContain('<ident system="http://cyber.mil/cci">CCI-000366</ident>');
     expect(xml).toContain('fixref="F-254553"');
     expect(xml).toContain('<check system="C-254553">');
   });
 
-  it('preserves the operator-style rule id when there is no STIG metadata', () => {
+  it('falls back to the full check id as suffix when the check id does not start with the group id', () => {
+    const xml = generateXCCDF({
+      report: {
+        ...baseReport,
+        results: [{
+          id:          'group-a',
+          description: 'g',
+          checks:      [{
+            id: 'unrelated-check', description: 'c', scored: true, state: 'pass',
+          }],
+        }],
+      },
+      benchmarkVersion: 'cis-1.7',
+      decorations:      { 'group-a': { ruleId: 'GROUP-A-rule' } },
+    });
+
+    expect(xml).toContain('id="GROUP-A-rule_unrelated-check"');
+    expect(xml).toContain('idref="GROUP-A-rule_unrelated-check"');
+  });
+
+  it('emits generic XCCDF idents from the decoration with their declared system unchanged', () => {
+    const xml = generateXCCDF({
+      report: {
+        ...baseReport,
+        results: [{
+          id:          '5.1.1',
+          description: 'g',
+          checks:      [{
+            id: '5.1.1', description: 'c', scored: true, state: 'pass',
+          }],
+        }],
+      },
+      benchmarkVersion: 'cis-1.7',
+      decorations:      {
+        '5.1.1': {
+          idents: [
+            { system: 'https://www.cisecurity.org/controls/', value: 'CIS-CSC-3' },
+            { system: 'http://cyber.mil/cci', value: 'CCI-000366' },
+          ],
+        },
+      },
+    });
+
+    expect(xml).toContain('<ident system="https://www.cisecurity.org/controls/">CIS-CSC-3</ident>');
+    expect(xml).toContain('<ident system="http://cyber.mil/cci">CCI-000366</ident>');
+  });
+
+  it('emits a not-applicable ident placeholder when the decoration has no idents', () => {
+    const xml = generateXCCDF({
+      report:           baseReport,
+      benchmarkVersion: 'cis-1.7',
+      decorations:      { '5.1.1': { ruleId: 'r-5.1.1' } },
+    });
+
+    expect(xml).toMatch(/id="r-5\.1\.1"[\s\S]*?<ident system="not-applicable">not-applicable<\/ident>/);
+  });
+
+  it('falls back to the operator-style rule id when no decoration matches either the check id or the group id', () => {
+    const xml = generateXCCDF({
+      report:           baseReport,
+      benchmarkVersion: 'cis-1.7',
+      decorations:      { 'no-match': { ruleId: 'should-not-apply' } },
+    });
+
+    expect(xml).toContain('id="xccdf_compliance-operator_rule_5.1.1"');
+    expect(xml).not.toContain('should-not-apply');
+  });
+
+  it('prefers a per-check decoration over a group-keyed decoration when both are present', () => {
+    const xml = generateXCCDF({
+      report: {
+        ...baseReport,
+        results: [{
+          id:          '5.1',
+          description: 'g',
+          checks:      [{
+            id: '5.1.1', description: 'c', scored: true, state: 'pass',
+          }],
+        }],
+      },
+      benchmarkVersion: 'cis-1.7',
+      decorations:      {
+        5.1:     { ruleId: 'group-rule', severity: 'low' },
+        '5.1.1': { ruleId: 'check-rule', severity: 'high' },
+      },
+    });
+
+    expect(xml).toContain('id="check-rule"');
+    expect(xml).not.toContain('id="group-rule_5.1.1"');
+    expect(xml).toMatch(/id="check-rule"[^>]*severity="high"/);
+  });
+
+  it('preserves the operator-style rule id when no decorations are supplied', () => {
     const xml = generateXCCDF({
       report:           baseReport,
       benchmarkVersion: 'cis-1.7',