foreman_cve_scanner 0.5.0 → 0.6.0

data/webpack/components/CveDetailsCard.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-unresolved */
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Table, Tbody, Tr, Th, Thead, Td } from '@patternfly/react-table';
 import {
@@ -16,7 +16,7 @@ import {
   EmptyStateBody,
   Title,
 } from '@patternfly/react-core';
-import { SearchIcon } from '@patternfly/react-icons';
+import { CheckCircleIcon, SearchIcon } from '@patternfly/react-icons';
 import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
 import { foremanUrl } from 'foremanReact/common/helpers';
 import { translate as __ } from 'foremanReact/common/I18n';
@@ -26,56 +26,54 @@ import { STATUS } from 'foremanReact/constants';
 import RelativeDateTime from 'foremanReact/components/common/dates/RelativeDateTime';
 import SeverityIcon from './SeverityIcon';
 import CveFindingsModal from './CveFindingsModal';
-import CveHistoryTable from './CveHistoryTable';
+import useModalScan from './useModalScan';
 import {
+  noFindingsBody,
+  noFindingsTitle,
+  formatScanOrigin,
   noReportsBody,
   noReportsTitle,
   riskLevelFromWorst,
+  severityRank,
 } from './cve_helpers';
 import './cve_scans.scss';
 
 const CveDetailsCard = ({ hostDetails }) => {
   const hostId = hostDetails?.id;
-  const historyUrl = hostId
-    ? foremanUrl(`/api/v2/hosts/${hostId}/cve_scans?per_page=3`)
-    : null;
   const latestUrl = hostId
     ? foremanUrl(`/api/v2/hosts/${hostId}/cve_scans/latest`)
     : null;
-  const { response: historyResponse, status } = useAPI('get', historyUrl, {
-    key: `CVE_DETAILS_${hostId}`,
-  });
   const { response: latestResponse, status: latestStatus } = useAPI(
     'get',
     latestUrl,
     { key: `CVE_DETAILS_LATEST_${hostId}` }
   );
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [modalScanId, setModalScanId] = useState(null);
-  const [modalFilter, setModalFilter] = useState('all');
+  const { isOpen, scanId, filter, openModal, closeModal } = useModalScan();
   if (!hostId) return null;
-  const scans = historyResponse?.results || [];
-  const latest = latestResponse?.id ? latestResponse : scans[0];
-  const historyScans =
-    latest && Array.isArray(scans)
-      ? scans.filter(scan => scan.id !== latest.id)
-      : scans;
+  const latest = latestResponse?.id ? latestResponse : null;
   const findings = latest?.findings || [];
   const sortedFindings = [...findings].sort((a, b) => {
+    const severityDiff = severityRank(b.severity) - severityRank(a.severity);
+    if (severityDiff !== 0) return severityDiff;
     const aTime = new Date(a.published || 0).getTime();
     const bTime = new Date(b.published || 0).getTime();
     return bTime - aTime;
   });
+  // The host details preview should show ranked CVEs first and only fall back
+  // to unknown severities when a scan has no ranked findings at all.
+  const previewFindings = sortedFindings.filter(
+    finding => severityRank(finding.severity) > 0
+  );
+  const visibleFindings =
+    previewFindings.length > 0
+      ? previewFindings.slice(0, 5)
+      : sortedFindings.slice(0, 5);
   const worst = latest?.summary?.worst || 'none';
   const riskLevel = riskLevelFromWorst(worst);
-  const openModal = (scanId, filter) => {
-    setModalScanId(scanId);
-    setModalFilter(filter || 'all');
-    setIsModalOpen(true);
-  };
+  const origin = formatScanOrigin(latest?.scanner, latest?.source);
   return (
     <CardTemplate header={__('CVE scan details')} expandable masonryLayout>
-      <SkeletonLoader status={status || latestStatus || STATUS.PENDING}>
+      <SkeletonLoader status={latestStatus || STATUS.PENDING}>
         {!latest ? (
           <EmptyState>
             <EmptyStateIcon icon={SearchIcon} />
@@ -86,86 +84,122 @@ const CveDetailsCard = ({ hostDetails }) => {
           </EmptyState>
         ) : (
           <>
-            <DescriptionList isCompact isHorizontal>
-              <DescriptionListGroup>
-                <DescriptionListTerm>{__('Report')}</DescriptionListTerm>
-                <DescriptionListDescription>
-                  <RelativeDateTime
-                    date={latest.created_at}
-                    defaultValue={__('Unknown time')}
-                  />
-                </DescriptionListDescription>
-              </DescriptionListGroup>
-              <DescriptionListGroup>
-                <DescriptionListTerm>{__('Total')}</DescriptionListTerm>
-                <DescriptionListDescription>
-                  <Button
-                    variant="link"
-                    className="cve-summary-link"
-                    onClick={() => openModal(latest.id, 'all')}
-                    ouiaId="cve-details-total-button"
-                  >
-                    <span
-                      className={`cve-total-bubble cve-total-bubble--${riskLevel}`}
-                    >
-                      {latest.total}
-                    </span>
-                  </Button>{' '}
-                  {__('CVEs by')} {latest.scanner}
-                </DescriptionListDescription>
-              </DescriptionListGroup>
-            </DescriptionList>
-            <div className="cve-counts cve-counts--compact">
-              <Button
-                variant="link"
-                className="cve-summary-link"
-                onClick={() => openModal(latest.id, 'critical')}
-                ouiaId="cve-details-critical-button"
-              >
-                <span className="cve-count">
-                  {__('critical')}
-                  <span className="cve-bubble">{latest.critical}</span>
-                </span>
-              </Button>
-              <Button
-                variant="link"
-                className="cve-summary-link"
-                onClick={() => openModal(latest.id, 'medium')}
-                ouiaId="cve-details-medium-button"
-              >
-                <span className="cve-count">
-                  {__('medium')}
-                  <span className="cve-bubble">{latest.medium}</span>
-                </span>
-              </Button>
-              <Button
-                variant="link"
-                className="cve-summary-link"
-                onClick={() => openModal(latest.id, 'high')}
-                ouiaId="cve-details-high-button"
-              >
-                <span className="cve-count">
-                  {__('high')}
-                  <span className="cve-bubble">{latest.high}</span>
-                </span>
-              </Button>
-              <Button
-                variant="link"
-                className="cve-summary-link"
-                onClick={() => openModal(latest.id, 'low')}
-                ouiaId="cve-details-low-button"
+            <div className="cve-overview">
+              <DescriptionList
+                isCompact
+                isHorizontal
+                className="cve-overview-meta"
               >
-                <span className="cve-count">
-                  {__('low')}
-                  <span className="cve-bubble">{latest.low}</span>
-                </span>
-              </Button>
+                <DescriptionListGroup>
+                  <DescriptionListTerm>{__('Report')}</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    <RelativeDateTime
+                      date={latest.scanned_at}
+                      defaultValue={__('Unknown time')}
+                    />
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+                <DescriptionListGroup>
+                  <DescriptionListTerm>{__('Total')}</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    <span className="cve-overview-total">
+                      <Button
+                        variant="link"
+                        className="cve-summary-link"
+                        onClick={() => openModal(latest.id, 'all')}
+                        ouiaId="cve-details-total-button"
+                      >
+                        <span
+                          className={`cve-total-bubble cve-total-bubble--${riskLevel}`}
+                        >
+                          {latest.total}
+                        </span>
+                      </Button>
+                      <span className="cve-overview-source">{origin}</span>
+                    </span>
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+              </DescriptionList>
+              <div className="cve-counts cve-counts--compact">
+                <Button
+                  variant="plain"
+                  className="cve-count-card cve-count-card--critical"
+                  onClick={() => openModal(latest.id, 'critical')}
+                  ouiaId="cve-details-critical-button"
+                >
+                  <span className="cve-count">
+                    <span className="cve-count-label">
+                      <SeverityIcon severity="critical" />
+                      <span>{__('critical')}</span>
+                    </span>
+                    <span className="cve-bubble cve-bubble--critical">
+                      {latest.critical}
+                    </span>
+                  </span>
+                </Button>
+                <Button
+                  variant="plain"
+                  className="cve-count-card cve-count-card--medium"
+                  onClick={() => openModal(latest.id, 'medium')}
+                  ouiaId="cve-details-medium-button"
+                >
+                  <span className="cve-count">
+                    <span className="cve-count-label">
+                      <SeverityIcon severity="medium" />
+                      <span>{__('medium')}</span>
+                    </span>
+                    <span className="cve-bubble cve-bubble--medium">
+                      {latest.medium}
+                    </span>
+                  </span>
+                </Button>
+                <Button
+                  variant="plain"
+                  className="cve-count-card cve-count-card--high"
+                  onClick={() => openModal(latest.id, 'high')}
+                  ouiaId="cve-details-high-button"
+                >
+                  <span className="cve-count">
+                    <span className="cve-count-label">
+                      <SeverityIcon severity="high" />
+                      <span>{__('high')}</span>
+                    </span>
+                    <span className="cve-bubble cve-bubble--high">
+                      {latest.high}
+                    </span>
+                  </span>
+                </Button>
+                <Button
+                  variant="plain"
+                  className="cve-count-card cve-count-card--low"
+                  onClick={() => openModal(latest.id, 'low')}
+                  ouiaId="cve-details-low-button"
+                >
+                  <span className="cve-count">
+                    <span className="cve-count-label">
+                      <SeverityIcon severity="low" />
+                      <span>{__('low')}</span>
+                    </span>
+                    <span className="cve-bubble cve-bubble--low">
+                      {latest.low}
+                    </span>
+                  </span>
+                </Button>
+              </div>
             </div>
 
-            {sortedFindings.length === 0 ? (
-              <Text component={TextVariants.small} ouiaId="cve-details-empty">
-                {__('No vulnerabilities reported')}
-              </Text>
+            {visibleFindings.length === 0 ? (
+              <EmptyState className="cve-empty-state cve-empty-state--success">
+                <EmptyStateIcon icon={CheckCircleIcon} />
+                <Title
+                  headingLevel="h4"
+                  size="md"
+                  ouiaId="cve-details-clean-title"
+                >
+                  {noFindingsTitle()}
+                </Title>
+                <EmptyStateBody>{noFindingsBody()}</EmptyStateBody>
+              </EmptyState>
             ) : (
               <>
                 <TextContent className="cve-section-title">
@@ -189,7 +223,7 @@ const CveDetailsCard = ({ hostDetails }) => {
                     </Tr>
                   </Thead>
                   <Tbody>
-                    {sortedFindings.slice(0, 5).map((finding, index) => (
+                    {visibleFindings.map((finding, index) => (
                       <Tr
                         key={finding.id}
                         ouiaId={`cve-details-finding-row-${index}`}
@@ -208,7 +242,7 @@ const CveDetailsCard = ({ hostDetails }) => {
                     ))}
                   </Tbody>
                 </Table>
-                {sortedFindings.length > 5 && (
+                {sortedFindings.length > visibleFindings.length && (
                   <div className="cve-more">
                     <Button
                       variant="link"
@@ -222,29 +256,15 @@ const CveDetailsCard = ({ hostDetails }) => {
                 )}
               </>
             )}
-
-            {historyScans.length > 0 && (
-              <>
-                <TextContent className="cve-section-title">
-                  <Text
-                    component={TextVariants.h4}
-                    ouiaId="cve-details-recent-title"
-                  >
-                    {__('Recent scans')}
-                  </Text>
-                </TextContent>
-                <CveHistoryTable scans={historyScans} onOpen={openModal} />
-              </>
-            )}
           </>
         )}
       </SkeletonLoader>
       <CveFindingsModal
-        isOpen={isModalOpen}
-        onClose={() => setIsModalOpen(false)}
+        isOpen={isOpen}
+        onClose={closeModal}
         hostId={hostId}
-        scanId={modalScanId}
-        initialFilter={modalFilter}
+        scanId={scanId}
+        initialFilter={filter}
       />
     </CardTemplate>
   );

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,