foreman_cve_scanner 0.5.1 → 0.6.0

data/webpack/components/CveFindingsModal.js

@@ -8,6 +8,7 @@ import {
   Text,
   TextVariants,
   FormGroup,
+  SearchInput,
 } from '@patternfly/react-core';
 import {
   Table,
@@ -23,7 +24,14 @@ import { foremanUrl } from 'foremanReact/common/helpers';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { STATUS } from 'foremanReact/constants';
 import SeverityIcon from './SeverityIcon';
-import { compareStrings, formatDateTime, severityRank } from './cve_helpers';
+import {
+  findingMatchesSearch,
+  formatDateTime,
+  formatScanOrigin,
+  formatScannedAt,
+  findingSorters,
+  normalizeSearchInputValue,
+} from './cve_helpers';
 import './cve_scans.scss';
 
 const SEVERITY_OPTIONS = ['all', 'critical', 'high', 'medium', 'low'];
@@ -46,6 +54,7 @@ const CveFindingsModal = ({
   initialFilter,
 }) => {
   const [filter, setFilter] = useState(initialFilter || 'all');
+  const [search, setSearch] = useState('');
   const [sortBy, setSortBy] = useState({
     direction: SortByDirection.desc,
     column: 'severity',
@@ -65,10 +74,12 @@ const CveFindingsModal = ({
   useEffect(() => {
     if (!isOpen) return;
     setFilter(initialFilter || 'all');
+    setSearch('');
   }, [initialFilter, isOpen, scanId]);
 
   const payload = response || {};
   const findings = Array.isArray(payload.findings) ? payload.findings : [];
+  const origin = formatScanOrigin(payload.scanner, payload.source);
 
   const normalizedFilter = (filter || 'all').toLowerCase();
   const filteredFindings = useMemo(() => {
@@ -77,33 +88,23 @@ const CveFindingsModal = ({
       f => (f.severity || '').toLowerCase() === normalizedFilter
     );
   }, [normalizedFilter, findings]);
-
-  const formatPublished = formatDateTime;
-
-  const sorters = useMemo(
-    () => ({
-      published: (a, b) =>
-        new Date(a.published || 0) - new Date(b.published || 0),
-      name: (a, b) => compareStrings(a.name, b.name),
-      version: (a, b) => compareStrings(a.version, b.version),
-      fixed: (a, b) => compareStrings(a.fixed, b.fixed),
-      id: (a, b) => compareStrings(a.id, b.id),
-      status: (a, b) => compareStrings(a.status, b.status),
-      title: (a, b) => compareStrings(a.title, b.title),
-      severity: (a, b) => severityRank(a.severity) - severityRank(b.severity),
-    }),
-    []
-  );
+  const normalizedSearch = search.trim().toLowerCase();
+  const visibleFindings = useMemo(() => {
+    if (!normalizedSearch) return filteredFindings;
+    return filteredFindings.filter(finding =>
+      findingMatchesSearch(finding, normalizedSearch)
+    );
+  }, [filteredFindings, normalizedSearch]);
   const sortedFindings = useMemo(() => {
-    const list = [...filteredFindings];
+    const list = [...visibleFindings];
     const sortKey = sortBy.column || 'severity';
-    const sorter = sorters[sortKey] || sorters.severity;
+    const sorter = findingSorters[sortKey] || findingSorters.severity;
     list.sort((a, b) => {
       const result = sorter(a, b);
       return sortBy.direction === SortByDirection.asc ? result : -result;
     });
     return list;
-  }, [filteredFindings, sortBy, sorters]);
+  }, [visibleFindings, sortBy]);
 
   const onSort = column => {
     const nextDirection =
@@ -112,14 +113,17 @@ const CveFindingsModal = ({
         : SortByDirection.asc;
     setSortBy({ column, direction: nextDirection });
   };
+  const onSearchChange = (value, event) => {
+    setSearch(normalizeSearchInputValue(value, event));
+  };
 
   return (
     <Modal
       title={
-        payload?.created_at && typeof payload?.total !== 'undefined'
-          ? `${__('Report from')} ${formatPublished(payload.created_at)} - ${__(
-              'Total'
-            )}: ${payload.total}`
+        payload?.scanned_at && typeof payload?.total !== 'undefined'
+          ? `${__('Report from')} ${formatScannedAt(
+              payload.scanned_at
+            )} - ${origin} - ${__('Total')}: ${payload.total}`
           : __('CVE findings')
       }
       isOpen={isOpen}
@@ -145,7 +149,18 @@ const CveFindingsModal = ({
       ) : (
         <div className="cve-modal-body">
           <div className="cve-modal-filters">
-            <FormGroup fieldId="cve-filter">
+            <FormGroup fieldId="cve-search" className="cve-modal-search">
+              <SearchInput
+                id="cve-search"
+                value={search}
+                onChange={onSearchChange}
+                onClear={() => setSearch('')}
+                onSearch={onSearchChange}
+                placeholder={__('Search CVE, package, status, title...')}
+                aria-label={__('Search CVE report')}
+              />
+            </FormGroup>
+            <FormGroup fieldId="cve-filter" className="cve-modal-quick-filters">
               <div className="cve-filter-buttons">
                 {SEVERITY_OPTIONS.map(opt => (
                   <button
@@ -166,98 +181,103 @@ const CveFindingsModal = ({
             </FormGroup>
           </div>
 
-          {response?.error && (
-            <Text component={TextVariants.small} ouiaId="cve-findings-error">
-              {response.error.message}
-            </Text>
-          )}
-          {sortedFindings.length === 0 && !response?.error ? (
-            <Text component={TextVariants.small} ouiaId="cve-findings-empty">
-              {__('No findings for selected filter')}
-            </Text>
-          ) : (
-            <Table
-              variant="compact"
-              aria-label="CVE findings table"
-              ouiaId="cve-findings-table"
-            >
-              <Thead>
-                <Tr ouiaId="cve-findings-header">
-                  {COLUMNS.map(col => (
-                    <Th
-                      key={col.key}
-                      className={`cve-col-${col.key} cve-sortable`}
-                      aria-label={
-                        col.key === 'severity' ? __('Severity') : undefined
-                      }
-                      onClick={() => onSort(col.key)}
-                    >
-                      {col.key === 'severity' ? (
-                        <SeverityIcon severity="high" />
-                      ) : (
-                        col.label
-                      )}
-                      {sortBy.column === col.key && (
-                        <span className="cve-sort-indicator">
-                          {sortBy.direction === SortByDirection.asc
-                            ? ' ▲'
-                            : ' ▼'}
-                        </span>
-                      )}
-                    </Th>
-                  ))}
-                </Tr>
-              </Thead>
-              <Tbody>
-                {sortedFindings.map((finding, index) => (
-                  <Tr key={finding.id} ouiaId={`cve-findings-row-${index}`}>
-                    <Td dataLabel={__('Severity')}>
-                      <span
-                        className="cve-summary cve-summary--icon-only"
-                        title={finding.severity}
-                        aria-label={finding.severity}
+          <div className="cve-modal-results">
+            {response?.error && (
+              <Text component={TextVariants.small} ouiaId="cve-findings-error">
+                {response.error.message}
+              </Text>
+            )}
+            {sortedFindings.length === 0 && !response?.error ? (
+              <Text component={TextVariants.small} ouiaId="cve-findings-empty">
+                {__('No findings for selected filter')}
+              </Text>
+            ) : (
+              <Table
+                variant="compact"
+                aria-label="CVE findings table"
+                ouiaId="cve-findings-table"
+              >
+                <Thead>
+                  <Tr ouiaId="cve-findings-header">
+                    {COLUMNS.map(col => (
+                      <Th
+                        key={col.key}
+                        className={`cve-col-${col.key} cve-sortable`}
+                        aria-label={
+                          col.key === 'severity' ? __('Severity') : undefined
+                        }
+                        onClick={() => onSort(col.key)}
                       >
-                        <SeverityIcon
-                          severity={(finding.severity || '').toLowerCase()}
-                        />
-                      </span>
-                    </Td>
-                    <Td dataLabel={__('Published')}>
-                      {formatPublished(finding.published)}
-                    </Td>
-                    <Td dataLabel={__('Package')}>{finding.name}</Td>
-                    <Td dataLabel={__('Affected version')}>
-                      {finding.version}
-                    </Td>
-                    <Td dataLabel={__('Fixed version')} title={finding.fixed}>
-                      <span className="cve-truncate">{finding.fixed}</span>
-                    </Td>
-                    <Td dataLabel={__('Status')}>
-                      {finding.status || __('open')}
-                    </Td>
-                    <Td dataLabel={__('CVE')}>
-                      {finding.url ? (
-                        <a href={finding.url} target="_blank" rel="noreferrer">
-                          {finding.id}
-                        </a>
-                      ) : (
-                        finding.id
-                      )}
-                    </Td>
-                    <Td dataLabel={__('Title')} title={finding.title}>
-                      <span className="cve-truncate">{finding.title}</span>
-                    </Td>
+                        {col.key === 'severity' ? (
+                          <SeverityIcon severity="high" />
+                        ) : (
+                          col.label
+                        )}
+                        {sortBy.column === col.key && (
+                          <span className="cve-sort-indicator">
+                            {sortBy.direction === SortByDirection.asc
+                              ? ' ▲'
+                              : ' ▼'}
+                          </span>
+                        )}
+                      </Th>
+                    ))}
                   </Tr>
-                ))}
-              </Tbody>
-            </Table>
-          )}
+                </Thead>
+                <Tbody>
+                  {sortedFindings.map((finding, index) => (
+                    <Tr key={finding.id} ouiaId={`cve-findings-row-${index}`}>
+                      <Td dataLabel={__('Severity')}>
+                        <span
+                          className="cve-summary cve-summary--icon-only"
+                          title={finding.severity}
+                          aria-label={finding.severity}
+                        >
+                          <SeverityIcon
+                            severity={(finding.severity || '').toLowerCase()}
+                          />
+                        </span>
+                      </Td>
+                      <Td dataLabel={__('Published')}>
+                        {formatDateTime(finding.published)}
+                      </Td>
+                      <Td dataLabel={__('Package')}>{finding.name}</Td>
+                      <Td dataLabel={__('Affected version')}>
+                        {finding.version}
+                      </Td>
+                      <Td dataLabel={__('Fixed version')} title={finding.fixed}>
+                        <span className="cve-truncate">{finding.fixed}</span>
+                      </Td>
+                      <Td dataLabel={__('Status')}>
+                        {finding.status || __('open')}
+                      </Td>
+                      <Td dataLabel={__('CVE')}>
+                        {finding.url ? (
+                          <a
+                            href={finding.url}
+                            target="_blank"
+                            rel="noreferrer"
+                          >
+                            {finding.id}
+                          </a>
+                        ) : (
+                          finding.id
+                        )}
+                      </Td>
+                      <Td dataLabel={__('Title')} title={finding.title}>
+                        <span className="cve-truncate">{finding.title}</span>
+                      </Td>
+                    </Tr>
+                  ))}
+                </Tbody>
+              </Table>
+            )}
+          </div>
         </div>
       )}
     </Modal>
   );
 };
-
 CveFindingsModal.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,

data/webpack/components/CveScansReports.js

@@ -0,0 +1,227 @@
+/* eslint-disable import/no-unresolved */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Checkbox, Pagination, Title } from '@patternfly/react-core';
+import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
+import { translate as __ } from 'foremanReact/common/I18n';
+import RelativeDateTime from 'foremanReact/components/common/dates/RelativeDateTime';
+import { formatScanOrigin } from './cve_helpers';
+
+const CveScansReports = ({
+  scans,
+  itemCount,
+  page,
+  perPage,
+  onSetPage,
+  onPerPageSelect,
+  selectedScanIds,
+  selectedCount,
+  onCompare,
+  onClearSelection,
+  onToggleSelection,
+  onOpenModal,
+  exportUrlFor,
+}) => (
+  <section className="cve-scans-section" aria-label="CVE scan reports">
+    <div className="cve-scans-section-header">
+      <div className="cve-scans-section-title">
+        <Title headingLevel="h3" size="lg" ouiaId="cve-scans-reports-title">
+          {__('Reports')}
+        </Title>
+      </div>
+      <Pagination
+        itemCount={itemCount}
+        perPage={perPage}
+        page={page}
+        onSetPage={onSetPage}
+        onPerPageSelect={onPerPageSelect}
+        variant="top"
+        isCompact
+        ouiaId="cve-scans-pagination"
+      />
+    </div>
+    <div className="cve-scans-toolbar">
+      <div className="cve-scans-actions">
+        <span className="cve-scans-selection">
+          {__('Selected')}: {selectedCount}/2
+        </span>
+        <Button
+          variant="secondary"
+          isDisabled={selectedCount !== 2}
+          onClick={onCompare}
+          ouiaId="cve-scans-compare"
+        >
+          {__('Compare selected')}
+        </Button>
+        <Button
+          variant="link"
+          isDisabled={selectedCount === 0}
+          onClick={onClearSelection}
+          ouiaId="cve-scans-clear-selection"
+        >
+          {__('Clear selection')}
+        </Button>
+      </div>
+    </div>
+    <Table
+      variant="compact"
+      aria-label="CVE scans history"
+      ouiaId="cve-scans-table"
+    >
+      <Thead>
+        <Tr ouiaId="cve-scans-header">
+          <Th>{__('Select')}</Th>
+          <Th>{__('Scanned at')}</Th>
+          <Th>{__('Scanner')}</Th>
+          <Th>{__('Total')}</Th>
+          <Th>{__('Critical')}</Th>
+          <Th>{__('High')}</Th>
+          <Th>{__('Medium')}</Th>
+          <Th>{__('Low')}</Th>
+          <Th>{__('Export')}</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {scans.map((scan, index) => (
+          <Tr key={scan.id} ouiaId={`cve-scans-row-${index}`}>
+            <Td dataLabel={__('Select')}>
+              <Checkbox
+                id={`cve-scan-select-${scan.id}`}
+                isChecked={selectedScanIds.includes(scan.id)}
+                isDisabled={
+                  selectedScanIds.length === 2 &&
+                  !selectedScanIds.includes(scan.id)
+                }
+                onChange={() => onToggleSelection(scan.id)}
+                aria-label={__('Select scan for comparison')}
+                ouiaId={`cve-scan-select-${scan.id}`}
+              />
+            </Td>
+            <Td dataLabel={__('Scanned at')}>
+              <Button
+                variant="link"
+                className="cve-summary-link"
+                onClick={() => onOpenModal(scan.id, 'all')}
+                ouiaId={`cve-scans-open-${scan.id}`}
+              >
+                <RelativeDateTime
+                  date={scan.scanned_at}
+                  defaultValue={__('Unknown time')}
+                />
+              </Button>
+            </Td>
+            <Td dataLabel={__('Scanner')}>
+              {formatScanOrigin(scan.scanner, scan.source)}
+            </Td>
+            <Td dataLabel={__('Total')}>
+              <Button
+                variant="link"
+                className="cve-summary-link"
+                onClick={() => onOpenModal(scan.id, 'all')}
+                ouiaId={`cve-scans-total-${scan.id}`}
+              >
+                {scan.total}
+              </Button>
+            </Td>
+            <Td dataLabel={__('Critical')}>
+              <Button
+                variant="link"
+                className="cve-summary-link"
+                onClick={() => onOpenModal(scan.id, 'critical')}
+                ouiaId={`cve-scans-critical-${scan.id}`}
+              >
+                {scan.critical}
+              </Button>
+            </Td>
+            <Td dataLabel={__('High')}>
+              <Button
+                variant="link"
+                className="cve-summary-link"
+                onClick={() => onOpenModal(scan.id, 'high')}
+                ouiaId={`cve-scans-high-${scan.id}`}
+              >
+                {scan.high}
+              </Button>
+            </Td>
+            <Td dataLabel={__('Medium')}>
+              <Button
+                variant="link"
+                className="cve-summary-link"
+                onClick={() => onOpenModal(scan.id, 'medium')}
+                ouiaId={`cve-scans-medium-${scan.id}`}
+              >
+                {scan.medium}
+              </Button>
+            </Td>
+            <Td dataLabel={__('Low')}>
+              <Button
+                variant="link"
+                className="cve-summary-link"
+                onClick={() => onOpenModal(scan.id, 'low')}
+                ouiaId={`cve-scans-low-${scan.id}`}
+              >
+                {scan.low}
+              </Button>
+            </Td>
+            <Td dataLabel={__('Export')}>
+              <Button
+                component="a"
+                variant="secondary"
+                href={exportUrlFor(scan.id)}
+                ouiaId={`cve-scans-export-${scan.id}`}
+              >
+                {__('Export CSV')}
+              </Button>
+            </Td>
+          </Tr>
+        ))}
+      </Tbody>
+    </Table>
+  </section>
+);
+
+CveScansReports.propTypes = {
+  scans: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      scanned_at: PropTypes.string,
+      scanner: PropTypes.string,
+      source: PropTypes.string,
+      total: PropTypes.number,
+      critical: PropTypes.number,
+      high: PropTypes.number,
+      medium: PropTypes.number,
+      low: PropTypes.number,
+    })
+  ),
+  itemCount: PropTypes.number,
+  page: PropTypes.number,
+  perPage: PropTypes.number,
+  onSetPage: PropTypes.func,
+  onPerPageSelect: PropTypes.func,
+  selectedScanIds: PropTypes.arrayOf(PropTypes.number),
+  selectedCount: PropTypes.number,
+  onCompare: PropTypes.func,
+  onClearSelection: PropTypes.func,
+  onToggleSelection: PropTypes.func,
+  onOpenModal: PropTypes.func,
+  exportUrlFor: PropTypes.func,
+};
+
+CveScansReports.defaultProps = {
+  scans: [],
+  itemCount: 0,
+  page: 1,
+  perPage: 20,
+  onSetPage: () => {},
+  onPerPageSelect: () => {},
+  selectedScanIds: [],
+  selectedCount: 0,
+  onCompare: () => {},
+  onClearSelection: () => {},
+  onToggleSelection: () => {},
+  onOpenModal: () => {},
+  exportUrlFor: () => '#',
+};
+
+export default CveScansReports;