foreman_cve_scanner 0.5.0 → 0.6.0

data/webpack/components/CveTrendChart.js

@@ -0,0 +1,264 @@
+/* eslint-disable import/no-unresolved */
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Button,
+  Text,
+  TextContent,
+  TextVariants,
+  Tooltip,
+} from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { formatScannedAt } from './cve_helpers';
+
+const TREND_LIMIT = 10;
+const STACK_ORDER = ['low', 'medium', 'high', 'critical'];
+const TREND_LEGEND = [
+  { key: 'critical', label: __('Critical') },
+  { key: 'high', label: __('High') },
+  { key: 'medium', label: __('Medium') },
+  { key: 'low', label: __('Low') },
+];
+const totalDeltaText = __(
+  'Difference in total CVE count compared to the previous scan.'
+);
+const criticalHighDeltaText = __(
+  'Difference in critical and high CVE count compared to the previous scan.'
+);
+
+const shortDateLabel = value => {
+  const date = new Date(value || 0);
+  if (Number.isNaN(date.getTime())) return '--';
+  return new Intl.DateTimeFormat(undefined, {
+    day: '2-digit',
+    month: 'short',
+  })
+    .format(date)
+    .replace(',', '');
+};
+
+const formatDelta = value => {
+  if (value > 0) return `+${value}`;
+  if (value < 0) return String(value);
+  return '0';
+};
+
+const deltaClassName = value => {
+  if (value > 0) return 'is-up';
+  if (value < 0) return 'is-down';
+  return 'is-flat';
+};
+
+const tooltipContentFor = scan => (
+  <div className="cve-trend-tooltip">
+    <div className="cve-trend-tooltip-line">
+      {formatScannedAt(scan.scanned_at)}
+    </div>
+    <div className="cve-trend-tooltip-line">
+      {`${__('Total')}: ${scan.total}`}
+    </div>
+    <div className="cve-trend-tooltip-line">
+      {`${__('Critical')}: ${scan.critical}`}
+    </div>
+    <div className="cve-trend-tooltip-line">
+      {`${__('High')}: ${scan.high}`}
+    </div>
+    <div className="cve-trend-tooltip-line">
+      {`${__('Medium')}: ${scan.medium}`}
+    </div>
+    <div className="cve-trend-tooltip-line">{`${__('Low')}: ${scan.low}`}</div>
+  </div>
+);
+
+const CveTrendChart = ({
+  scans,
+  onOpen,
+  compareMode,
+  selectedScanIds,
+  onToggleSelection,
+  onToggleCompareMode,
+}) => {
+  const visibleScans = useMemo(
+    () => [...scans].slice(0, TREND_LIMIT).reverse(),
+    [scans]
+  );
+  const latestScan = scans[0];
+  const previousScan = scans[1];
+  const isCompareSelectable = typeof onToggleSelection === 'function';
+  const selectedCount = selectedScanIds.length;
+  const maxTotal = Math.max(...visibleScans.map(scan => scan.total || 0), 1);
+  const criticalHighDelta =
+    (latestScan?.critical || 0) +
+    (latestScan?.high || 0) -
+    ((previousScan?.critical || 0) + (previousScan?.high || 0));
+  const totalDelta = (latestScan?.total || 0) - (previousScan?.total || 0);
+
+  if (!latestScan) return null;
+
+  return (
+    <section className="cve-trend" aria-label="CVE trend chart">
+      <TextContent className="cve-section-title">
+        <Text component={TextVariants.h4} ouiaId="cve-trend-title">
+          {__('Trend')}
+        </Text>
+        <Text component={TextVariants.small} ouiaId="cve-trend-subtitle">
+          {__('Last %s scans').replace('%s', visibleScans.length)}
+        </Text>
+      </TextContent>
+
+      <div className="cve-trend-summary">
+        <div className="cve-trend-card">
+          <span className="cve-trend-card-label">{__('Latest total')}</span>
+          <span className="cve-trend-card-value">{latestScan.total}</span>
+        </div>
+        <div className="cve-trend-card">
+          <Tooltip content={criticalHighDeltaText}>
+            <span className="cve-trend-card-label cve-trend-card-label--help">
+              {__('Critical/high delta')}
+            </span>
+          </Tooltip>
+          <span
+            className={`cve-trend-card-value ${deltaClassName(
+              criticalHighDelta
+            )}`}
+          >
+            {previousScan
+              ? formatDelta(criticalHighDelta)
+              : __('No previous scan')}
+          </span>
+        </div>
+        <div className="cve-trend-card">
+          <Tooltip content={totalDeltaText}>
+            <span className="cve-trend-card-label cve-trend-card-label--help">
+              {__('Total delta')}
+            </span>
+          </Tooltip>
+          <span
+            className={`cve-trend-card-value ${deltaClassName(totalDelta)}`}
+          >
+            {previousScan ? formatDelta(totalDelta) : __('No previous scan')}
+          </span>
+        </div>
+        <div className="cve-trend-card">
+          <span className="cve-trend-card-label">{__('Last scanned')}</span>
+          <span className="cve-trend-card-value cve-trend-card-value--small">
+            {formatScannedAt(latestScan.scanned_at)}
+          </span>
+        </div>
+      </div>
+
+      {isCompareSelectable && (
+        <div className="cve-trend-controls">
+          <div className="cve-trend-actions">
+            <Button
+              variant={compareMode ? 'link' : 'secondary'}
+              onClick={onToggleCompareMode}
+              ouiaId="cve-trend-compare-mode"
+            >
+              {compareMode ? __('Cancel compare') : __('Compare 2 reports')}
+            </Button>
+            {compareMode && (
+              <span className="cve-trend-compare-state">
+                {`${selectedCount}/2 ${__('selected')}`}
+              </span>
+            )}
+          </div>
+        </div>
+      )}
+
+      <div className="cve-trend-legend" aria-label="CVE trend legend">
+        {TREND_LEGEND.map(item => (
+          <span key={item.key} className="cve-trend-legend-item">
+            <span
+              className={`cve-trend-legend-swatch cve-trend-segment--${item.key}`}
+            />
+            <span>{item.label}</span>
+          </span>
+        ))}
+      </div>
+
+      <div className="cve-trend-bars">
+        {visibleScans.map(scan => (
+          <div key={scan.id} className="cve-trend-bar-item">
+            <Tooltip content={tooltipContentFor(scan)}>
+              <button
+                type="button"
+                className={
+                  compareMode && selectedScanIds.includes(scan.id)
+                    ? 'cve-trend-bar-button is-selected'
+                    : 'cve-trend-bar-button'
+                }
+                onClick={() =>
+                  compareMode ? onToggleSelection(scan.id) : onOpen(scan.id)
+                }
+                aria-label={
+                  compareMode
+                    ? __('Select scan from %s for comparison').replace(
+                        '%s',
+                        formatScannedAt(scan.scanned_at)
+                      )
+                    : __('Open scan details for %s').replace(
+                        '%s',
+                        formatScannedAt(scan.scanned_at)
+                      )
+                }
+              >
+                <span
+                  className={
+                    scan.total === 0
+                      ? 'cve-trend-bar-frame cve-trend-bar-frame--clean'
+                      : 'cve-trend-bar-frame'
+                  }
+                >
+                  {STACK_ORDER.map(level => (
+                    <span
+                      key={level}
+                      className={`cve-trend-segment cve-trend-segment--${level}`}
+                      style={{
+                        height: `${((scan[level] || 0) / maxTotal) * 100}%`,
+                      }}
+                    />
+                  ))}
+                </span>
+                <span className="cve-trend-bar-total">{scan.total}</span>
+                <span className="cve-trend-bar-label">
+                  {shortDateLabel(scan.scanned_at)}
+                </span>
+              </button>
+            </Tooltip>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+CveTrendChart.propTypes = {
+  scans: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      scanned_at: PropTypes.string,
+      total: PropTypes.number,
+      critical: PropTypes.number,
+      high: PropTypes.number,
+      medium: PropTypes.number,
+      low: PropTypes.number,
+    })
+  ),
+  onOpen: PropTypes.func,
+  compareMode: PropTypes.bool,
+  selectedScanIds: PropTypes.arrayOf(PropTypes.number),
+  onToggleSelection: PropTypes.func,
+  onToggleCompareMode: PropTypes.func,
+};
+
+CveTrendChart.defaultProps = {
+  scans: [],
+  onOpen: () => {},
+  compareMode: false,
+  selectedScanIds: [],
+  onToggleSelection: undefined,
+  onToggleCompareMode: () => {},
+};
+
+export default CveTrendChart;

data/webpack/components/__tests__/CveCompareModal.test.js

@@ -0,0 +1,104 @@
+/* eslint-disable import/no-unresolved */
+import React from 'react';
+import { mount } from 'enzyme';
+import CveCompareModal from '../CveCompareModal';
+
+jest.mock('foremanReact/common/hooks/API/APIHooks', () => ({
+  useAPI: jest.fn(),
+}));
+
+const { useAPI } = require('foremanReact/common/hooks/API/APIHooks');
+
+describe('CveCompareModal', () => {
+  beforeEach(() => {
+    useAPI.mockReset();
+  });
+
+  it('renders comparison summary and filters rows by status', () => {
+    useAPI.mockReturnValue({
+      response: {
+        previous: {
+          id: 1,
+          scanned_at: '2026-02-20T10:00:00Z',
+          scanner: 'trivy',
+          source: 'rex',
+        },
+        current: {
+          id: 2,
+          scanned_at: '2026-02-21T10:00:00Z',
+          scanner: 'grype',
+          source: 'external',
+        },
+        summary: {
+          new: 1,
+          resolved: 1,
+          updated: 1,
+          unchanged: 0,
+        },
+        results: [
+          {
+            key: 'CVE-1::pkg-a',
+            status: 'updated',
+            id: 'CVE-1',
+            name: 'pkg-a',
+            severity: 'CRITICAL',
+            version: '1.0',
+            fixed: 'open',
+            scan_status: 'affected',
+            diff: {
+              severity: { old: 'HIGH', new: 'CRITICAL' },
+            },
+          },
+          {
+            key: 'CVE-2::pkg-b',
+            status: 'resolved',
+            id: 'CVE-2',
+            name: 'pkg-b',
+            severity: 'LOW',
+            version: '1.0',
+            fixed: 'open',
+            scan_status: 'affected',
+            diff: {},
+          },
+          {
+            key: 'CVE-3::pkg-c',
+            status: 'new',
+            id: 'CVE-3',
+            name: 'pkg-c',
+            severity: 'MEDIUM',
+            version: '1.0',
+            fixed: '2.0',
+            scan_status: 'affected',
+            diff: {},
+          },
+        ],
+      },
+      status: 'RESOLVED',
+    });
+
+    const wrapper = mount(
+      <CveCompareModal
+        hostId={1}
+        isOpen
+        onClose={() => {}}
+        scanIds={[1, 2]}
+      />
+    );
+
+    expect(wrapper.text()).toContain('Compare CVE reports');
+    expect(wrapper.text()).toContain('Updated');
+    expect(wrapper.text()).toContain('Resolved');
+    expect(wrapper.text()).toContain('New');
+    expect(wrapper.text()).toContain('Severity: HIGH -> CRITICAL');
+
+    wrapper
+      .find('button')
+      .filterWhere(node => node.text() === 'Resolved')
+      .last()
+      .simulate('click');
+    wrapper.update();
+
+    expect(wrapper.text()).toContain('CVE-2');
+    expect(wrapper.text()).not.toContain('CVE-3');
+  });
+});

data/webpack/components/__tests__/CveDetailsCard.test.js

@@ -32,15 +32,16 @@ describe('CveDetailsCard', () => {
     const hostDetails = { id: 1 };
     const historyResponse = {
       results: [
-        { id: 1, created_at: '2026-02-20', scanner: 'trivy', total: 10 },
-        { id: 2, created_at: '2026-02-21', scanner: 'trivy', total: 12 },
-        { id: 3, created_at: '2026-02-22', scanner: 'grype', total: 8 },
+        { id: 1, scanned_at: '2026-02-20', scanner: 'trivy', source: 'rex', total: 10 },
+        { id: 2, scanned_at: '2026-02-21', scanner: 'trivy', source: 'rex', total: 12 },
+        { id: 3, scanned_at: '2026-02-22', scanner: 'grype', source: 'external', total: 8 },
       ],
     };
     const latestResponse = {
       id: 3,
-      created_at: '2026-02-22',
+      scanned_at: '2026-02-22',
       scanner: 'grype',
+      source: 'external',
       total: 8,
       summary: { worst: 'high' },
       critical: 1,
@@ -67,39 +68,29 @@ describe('CveDetailsCard', () => {
 
     const wrapper = mount(<CveDetailsCard hostDetails={hostDetails} />);
 
-    expect(wrapper.text()).toContain('Recent scans');
     expect(wrapper.find('table').length).toBeGreaterThan(0);
     expect(wrapper.text()).toContain('CVEs');
     expect(wrapper.text()).toContain('pkg');
   });
 
-  it('falls back to history when latest is empty', () => {
+  it('renders empty state when latest is empty', () => {
     const hostDetails = { id: 1 };
-    const historyResponse = {
-      results: [{ id: 1, created_at: '2026-02-20', scanner: 'trivy', total: 10 }],
-    };
-
-    useAPI.mockImplementation((_method, url) => {
-      if (url && url.includes('/latest')) {
-        return { response: {}, status: 'RESOLVED' };
-      }
-      return { response: historyResponse, status: 'RESOLVED' };
-    });
+    useAPI.mockReturnValue({ response: {}, status: 'RESOLVED' });
 
     const wrapper = mount(<CveDetailsCard hostDetails={hostDetails} />);
-    expect(wrapper.text()).toContain('Report');
-    expect(wrapper.text()).toContain('trivy');
+    expect(wrapper.text()).toContain('No CVE reports for this host');
   });
 
   it('prefers latest when present', () => {
     const hostDetails = { id: 1 };
     const historyResponse = {
-      results: [{ id: 1, created_at: '2026-02-20', scanner: 'trivy', total: 10 }],
+      results: [{ id: 1, scanned_at: '2026-02-20', scanner: 'trivy', source: 'rex', total: 10 }],
     };
     const latestResponse = {
       id: 2,
-      created_at: '2026-02-21',
+      scanned_at: '2026-02-21',
       scanner: 'grype',
+      source: 'external',
       total: 8,
       summary: { worst: 'high' },
       findings: [],
@@ -116,6 +107,76 @@ describe('CveDetailsCard', () => {
     expect(wrapper.text()).toContain('grype');
   });
 
+  it('keeps unknown severities out of the preview when ranked CVEs exist', () => {
+    const hostDetails = { id: 1 };
+    const latestResponse = {
+      id: 2,
+      scanned_at: '2026-02-21',
+      scanner: 'grype',
+      source: 'external',
+      total: 6,
+      summary: { worst: 'critical' },
+      findings: [
+        {
+          id: 'CVE-unknown',
+          name: 'unknown-pkg',
+          version: '1.0',
+          severity: 'UNKNOWN',
+          published: '2026-02-20',
+        },
+        {
+          id: 'CVE-critical',
+          name: 'critical-pkg',
+          version: '1.0',
+          severity: 'CRITICAL',
+          published: '2026-02-10',
+        },
+        {
+          id: 'CVE-high',
+          name: 'high-pkg',
+          version: '1.0',
+          severity: 'HIGH',
+          published: '2026-02-11',
+        },
+        {
+          id: 'CVE-medium',
+          name: 'medium-pkg',
+          version: '1.0',
+          severity: 'MEDIUM',
+          published: '2026-02-12',
+        },
+        {
+          id: 'CVE-low-a',
+          name: 'low-a-pkg',
+          version: '1.0',
+          severity: 'LOW',
+          published: '2026-02-13',
+        },
+        {
+          id: 'CVE-low-b',
+          name: 'low-b-pkg',
+          version: '1.0',
+          severity: 'LOW',
+          published: '2026-02-14',
+        },
+      ],
+    };
+
+    useAPI.mockImplementation((_method, url) => {
+      if (url && url.includes('/latest')) {
+        return { response: latestResponse, status: 'RESOLVED' };
+      }
+      return { response: { results: [] }, status: 'RESOLVED' };
+    });
+
+    const wrapper = mount(<CveDetailsCard hostDetails={hostDetails} />);
+
+    expect(wrapper.text()).toContain('critical-pkg');
+    expect(wrapper.text()).toContain('low-b-pkg');
+    expect(wrapper.text()).not.toContain('unknown-pkg');
+    expect(wrapper.text()).toContain('More');
+  });
+
   it('renders empty state when no scans', () => {
     const hostDetails = { id: 1 };
     useAPI.mockReturnValue({ response: null, status: 'RESOLVED' });
@@ -123,4 +184,29 @@ describe('CveDetailsCard', () => {
     const wrapper = mount(<CveDetailsCard hostDetails={hostDetails} />);
     expect(wrapper.text()).toContain('No CVE reports for this host');
   });
+
+  it('renders success state when latest scan has no findings', () => {
+    const hostDetails = { id: 1 };
+    const latestResponse = {
+      id: 2,
+      scanned_at: '2026-02-21',
+      scanner: 'trivy',
+      source: 'rex',
+      total: 0,
+      summary: { worst: 'none' },
+      critical: 0,
+      high: 0,
+      medium: 0,
+      low: 0,
+      findings: [],
+    };
+
+    useAPI.mockReturnValue({ response: latestResponse, status: 'RESOLVED' });
+
+    const wrapper = mount(<CveDetailsCard hostDetails={hostDetails} />);
+    expect(wrapper.text()).toContain('No CVEs found');
+    expect(wrapper.text()).toContain(
+      'The latest CVE scan found no vulnerabilities for this host.'
+    );
+  });
 });

data/webpack/components/__tests__/CveFindingsModal.test.js

@@ -1,6 +1,7 @@
 /* eslint-disable import/no-unresolved */
 import React from 'react';
 import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import CveFindingsModal from '../CveFindingsModal';
 
 jest.mock('foremanReact/common/hooks/API/APIHooks', () => ({
@@ -18,7 +19,9 @@ describe('CveFindingsModal', () => {
     useAPI.mockReturnValue({
       response: {
         id: 1,
-        created_at: '2026-02-22T10:00:00Z',
+        scanned_at: '2026-02-22T10:00:00Z',
+        scanner: 'trivy',
+        source: 'rex',
         total: 2,
         findings: [
           { id: 'CVE-1', severity: 'HIGH', name: 'a', version: '1' },
@@ -56,7 +59,9 @@ describe('CveFindingsModal', () => {
     useAPI.mockReturnValue({
       response: {
         id: 1,
-        created_at: '2026-02-22T10:00:00Z',
+        scanned_at: '2026-02-22T10:00:00Z',
+        scanner: 'trivy',
+        source: 'rex',
         total: 0,
         findings: [],
       },
@@ -75,4 +80,51 @@ describe('CveFindingsModal', () => {
 
     expect(wrapper.text()).toContain('No findings for selected filter');
   });
+
+  it('filters findings by search text', () => {
+    useAPI.mockReturnValue({
+      response: {
+        id: 1,
+        scanned_at: '2026-02-22T10:00:00Z',
+        scanner: 'trivy',
+        source: 'rex',
+        total: 2,
+        findings: [
+          {
+            id: 'CVE-1',
+            severity: 'HIGH',
+            name: 'openssl',
+            version: '1.1',
+            title: 'OpenSSL issue',
+          },
+          {
+            id: 'CVE-2',
+            severity: 'LOW',
+            name: 'curl',
+            version: '8.0',
+            title: 'Curl issue',
+          },
+        ],
+      },
+      status: 'RESOLVED',
+    });
+
+    const wrapper = mount(
+      <CveFindingsModal
+        isOpen
+        onClose={() => {}}
+        hostId={1}
+        scanId={1}
+        initialFilter="all"
+      />
+    );
+
+    act(() => {
+      wrapper.find('SearchInput').prop('onChange')('openssl');
+    });
+    wrapper.update();
+
+    expect(wrapper.text()).toContain('CVE-1');
+    expect(wrapper.text()).not.toContain('CVE-2');
+  });
 });