foreman_cve_scanner 0.5.1 → 0.6.0

data/webpack/components/CveScansTab.js

@@ -1,34 +1,42 @@
 /* eslint-disable import/no-unresolved */
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import {
-  Button,
-  Pagination,
   EmptyState,
   EmptyStateIcon,
   EmptyStateBody,
+  Tab,
+  TabTitleText,
+  Tabs,
   Title,
 } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons';
-import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
 import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
 import { foremanUrl } from 'foremanReact/common/helpers';
 import { translate as __ } from 'foremanReact/common/I18n';
 import SkeletonLoader from 'foremanReact/components/common/SkeletonLoader';
 import { STATUS } from 'foremanReact/constants';
-import RelativeDateTime from 'foremanReact/components/common/dates/RelativeDateTime';
+import CveTrendChart from './CveTrendChart';
+import CveScansReports from './CveScansReports';
 import CveFindingsModal from './CveFindingsModal';
+import CveCompareModal from './CveCompareModal';
+import useModalScan from './useModalScan';
 import { noReportsBody, noReportsTitle } from './cve_helpers';
+import './cve_scans.scss';
 
 const DEFAULT_PER_PAGE = 20;
+const OVERVIEW_TAB = 0;
+const REPORTS_TAB = 1;
 
 const CveScansTab = ({ response }) => {
   const hostId = response?.id;
   const [page, setPage] = useState(1);
   const [perPage, setPerPage] = useState(DEFAULT_PER_PAGE);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [modalScanId, setModalScanId] = useState(null);
-  const [modalFilter, setModalFilter] = useState('all');
+  const [isCompareOpen, setIsCompareOpen] = useState(false);
+  const [selectedScanIds, setSelectedScanIds] = useState([]);
+  const [isTrendCompareMode, setIsTrendCompareMode] = useState(false);
+  const [activeTabKey, setActiveTabKey] = useState(OVERVIEW_TAB);
+  const { isOpen, scanId, filter, openModal, closeModal } = useModalScan();
 
   const historyUrl = hostId
     ? foremanUrl(
@@ -40,23 +48,64 @@ const CveScansTab = ({ response }) => {
   });
 
   const scans = useMemo(() => apiResponse?.results || [], [apiResponse]);
+  const selectedScans = useMemo(
+    () => scans.filter(scan => selectedScanIds.includes(scan.id)),
+    [scans, selectedScanIds]
+  );
+  const orderedCompareIds = useMemo(
+    () =>
+      [...selectedScans]
+        .sort(
+          (a, b) =>
+            new Date(a.scanned_at || 0).getTime() -
+            new Date(b.scanned_at || 0).getTime()
+        )
+        .map(scan => scan.id),
+    [selectedScans]
+  );
   const itemCount = apiResponse?.total ?? scans.length;
-  if (!hostId) return null;
+  const exportUrlFor = reportId =>
+    foremanUrl(`/api/v2/hosts/${hostId}/cve_scans/${reportId}/export`);
 
-  const openModal = (scanId, filter) => {
-    setModalScanId(scanId);
-    setModalFilter(filter || 'all');
-    setIsModalOpen(true);
+  const onSetPage = (_event, newPage) => {
+    setPage(newPage);
+    setSelectedScanIds([]);
+    setIsTrendCompareMode(false);
   };
-
-  const onSetPage = (_event, newPage) => setPage(newPage);
   const onPerPageSelect = (_event, newPerPage) => {
     setPerPage(newPerPage);
     setPage(1);
+    setSelectedScanIds([]);
+    setIsTrendCompareMode(false);
+  };
+  const toggleScanSelection = reportId => {
+    setSelectedScanIds(currentSelection => {
+      if (currentSelection.includes(reportId)) {
+        return currentSelection.filter(id => id !== reportId);
+      }
+      if (currentSelection.length >= 2) return currentSelection;
+      return [...currentSelection, reportId];
+    });
+  };
+  const clearSelection = () => {
+    setSelectedScanIds([]);
+    setIsTrendCompareMode(false);
+  };
+  const toggleTrendCompareMode = () => {
+    setIsTrendCompareMode(current => !current);
+    setSelectedScanIds([]);
   };
 
+  useEffect(() => {
+    if (!isTrendCompareMode || selectedScanIds.length !== 2) return;
+    setIsCompareOpen(true);
+    setIsTrendCompareMode(false);
+  }, [isTrendCompareMode, selectedScanIds]);
+
+  if (!hostId) return null;
+
   return (
-    <>
+    <div className="cve-scans-tab">
       <SkeletonLoader status={status || STATUS.PENDING}>
         {scans.length === 0 ? (
           <EmptyState>
@@ -67,115 +116,69 @@ const CveScansTab = ({ response }) => {
             <EmptyStateBody>{noReportsBody()}</EmptyStateBody>
           </EmptyState>
         ) : (
-          <>
-            <Pagination
-              itemCount={itemCount}
-              perPage={perPage}
-              page={page}
-              onSetPage={onSetPage}
-              onPerPageSelect={onPerPageSelect}
-              variant="top"
-              isCompact
-              ouiaId="cve-scans-pagination"
-            />
-            <Table
-              variant="compact"
-              aria-label="CVE scans history"
-              ouiaId="cve-scans-table"
+          <Tabs
+            activeKey={activeTabKey}
+            onSelect={(_event, tabIndex) => setActiveTabKey(tabIndex)}
+            className="cve-scans-subtabs"
+            ouiaId="cve-scans-subtabs"
+          >
+            <Tab
+              eventKey={OVERVIEW_TAB}
+              title={<TabTitleText>{__('Overview')}</TabTitleText>}
+              ouiaId="cve-scans-overview-tab"
             >
-              <Thead>
-                <Tr ouiaId="cve-scans-header">
-                  <Th>{__('Reported at')}</Th>
-                  <Th>{__('Scanner')}</Th>
-                  <Th>{__('Total')}</Th>
-                  <Th>{__('Critical')}</Th>
-                  <Th>{__('High')}</Th>
-                  <Th>{__('Medium')}</Th>
-                  <Th>{__('Low')}</Th>
-                </Tr>
-              </Thead>
-              <Tbody>
-                {scans.map((scan, index) => (
-                  <Tr key={scan.id} ouiaId={`cve-scans-row-${index}`}>
-                    <Td dataLabel={__('Reported at')}>
-                      <Button
-                        variant="link"
-                        className="cve-summary-link"
-                        onClick={() => openModal(scan.id, 'all')}
-                        ouiaId={`cve-scans-open-${scan.id}`}
-                      >
-                        <RelativeDateTime
-                          date={scan.created_at}
-                          defaultValue={__('Unknown time')}
-                        />
-                      </Button>
-                    </Td>
-                    <Td dataLabel={__('Scanner')}>{scan.scanner}</Td>
-                    <Td dataLabel={__('Total')}>
-                      <Button
-                        variant="link"
-                        className="cve-summary-link"
-                        onClick={() => openModal(scan.id, 'all')}
-                        ouiaId={`cve-scans-total-${scan.id}`}
-                      >
-                        {scan.total}
-                      </Button>
-                    </Td>
-                    <Td dataLabel={__('Critical')}>
-                      <Button
-                        variant="link"
-                        className="cve-summary-link"
-                        onClick={() => openModal(scan.id, 'critical')}
-                        ouiaId={`cve-scans-critical-${scan.id}`}
-                      >
-                        {scan.critical}
-                      </Button>
-                    </Td>
-                    <Td dataLabel={__('High')}>
-                      <Button
-                        variant="link"
-                        className="cve-summary-link"
-                        onClick={() => openModal(scan.id, 'high')}
-                        ouiaId={`cve-scans-high-${scan.id}`}
-                      >
-                        {scan.high}
-                      </Button>
-                    </Td>
-                    <Td dataLabel={__('Medium')}>
-                      <Button
-                        variant="link"
-                        className="cve-summary-link"
-                        onClick={() => openModal(scan.id, 'medium')}
-                        ouiaId={`cve-scans-medium-${scan.id}`}
-                      >
-                        {scan.medium}
-                      </Button>
-                    </Td>
-                    <Td dataLabel={__('Low')}>
-                      <Button
-                        variant="link"
-                        className="cve-summary-link"
-                        onClick={() => openModal(scan.id, 'low')}
-                        ouiaId={`cve-scans-low-${scan.id}`}
-                      >
-                        {scan.low}
-                      </Button>
-                    </Td>
-                  </Tr>
-                ))}
-              </Tbody>
-            </Table>
-          </>
+              <section
+                className="cve-scans-section"
+                aria-label="CVE scan overview"
+              >
+                <CveTrendChart
+                  scans={scans}
+                  onOpen={reportId => openModal(reportId, 'all')}
+                  compareMode={isTrendCompareMode}
+                  selectedScanIds={selectedScanIds}
+                  onToggleSelection={toggleScanSelection}
+                  onToggleCompareMode={toggleTrendCompareMode}
+                />
+              </section>
+            </Tab>
+            <Tab
+              eventKey={REPORTS_TAB}
+              title={<TabTitleText>{__('Reports')}</TabTitleText>}
+              ouiaId="cve-scans-reports-tab"
+            >
+              <CveScansReports
+                scans={scans}
+                itemCount={itemCount}
+                page={page}
+                perPage={perPage}
+                onSetPage={onSetPage}
+                onPerPageSelect={onPerPageSelect}
+                selectedScanIds={selectedScanIds}
+                selectedCount={selectedScans.length}
+                onCompare={() => setIsCompareOpen(true)}
+                onClearSelection={clearSelection}
+                onToggleSelection={toggleScanSelection}
+                onOpenModal={openModal}
+                exportUrlFor={exportUrlFor}
+              />
+            </Tab>
+          </Tabs>
         )}
       </SkeletonLoader>
       <CveFindingsModal
-        isOpen={isModalOpen}
-        onClose={() => setIsModalOpen(false)}
+        isOpen={isOpen}
+        onClose={closeModal}
+        hostId={hostId}
+        scanId={scanId}
+        initialFilter={filter}
+      />
+      <CveCompareModal
+        isOpen={isCompareOpen}
+        onClose={() => setIsCompareOpen(false)}
         hostId={hostId}
-        scanId={modalScanId}
-        initialFilter={modalFilter}
+        scanIds={orderedCompareIds}
       />
-    </>
+    </div>
   );
 };
 

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');
+  });
+});