foreman_cve_scanner 0.5.1 → 0.6.0

data/webpack/components/CveCompareModal.js

@@ -0,0 +1,298 @@
+/* eslint-disable import/no-unresolved */
+/* eslint-disable camelcase */
+import React, { useEffect, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Modal,
+  Button,
+  Text,
+  TextVariants,
+  SearchInput,
+} from '@patternfly/react-core';
+import {
+  Table,
+  Tbody,
+  Tr,
+  Th,
+  Thead,
+  Td,
+  SortByDirection,
+} 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 { STATUS } from 'foremanReact/constants';
+import {
+  comparisonDiffEntries,
+  comparisonColumns,
+  comparisonFilters,
+  comparisonMatchesSearch,
+  comparisonSorters,
+  comparisonStatusLabels,
+  formatDateTime,
+  formatScanOrigin,
+  formatScannedAt,
+  normalizeSearchInputValue,
+} from './cve_helpers';
+import './cve_scans.scss';
+
+const CveCompareModal = ({ hostId, isOpen, onClose, scanIds }) => {
+  const [filter, setFilter] = useState('all');
+  const [search, setSearch] = useState('');
+  const [sortBy, setSortBy] = useState({
+    direction: SortByDirection.desc,
+    column: 'status',
+  });
+  const previousScanId = scanIds[0];
+  const currentScanId = scanIds[1];
+  const compareUrl =
+    isOpen && previousScanId && currentScanId
+      ? foremanUrl(
+          `/api/v2/hosts/${hostId}/cve_scans/compare?first_id=${previousScanId}&second_id=${currentScanId}`
+        )
+      : null;
+  const compareRequest = useAPI(isOpen ? 'get' : null, compareUrl, {
+    key: `CVE_COMPARE_${previousScanId}_${currentScanId}`,
+  });
+  useEffect(() => {
+    if (!isOpen) return;
+    setFilter('all');
+    setSearch('');
+    setSortBy({
+      direction: SortByDirection.desc,
+      column: 'status',
+    });
+  }, [currentScanId, isOpen, previousScanId]);
+
+  const comparison = compareRequest.response || {};
+  const previousScan = comparison.previous || {};
+  const currentScan = comparison.current || {};
+  const previousOrigin = formatScanOrigin(
+    previousScan.scanner,
+    previousScan.source
+  );
+  const currentOrigin = formatScanOrigin(
+    currentScan.scanner,
+    currentScan.source
+  );
+  const comparisonRows = useMemo(() => comparison.results || [], [
+    comparison.results,
+  ]);
+  const summary = comparison.summary || {};
+  const normalizedSearch = search.trim().toLowerCase();
+  const filteredRows = useMemo(() => {
+    let rows = comparisonRows;
+    if (filter !== 'all') {
+      rows = rows.filter(row => row.status === filter);
+    }
+    if (!normalizedSearch) return rows;
+    return rows.filter(row => comparisonMatchesSearch(row, normalizedSearch));
+  }, [comparisonRows, filter, normalizedSearch]);
+  const sortedRows = useMemo(() => {
+    const rows = [...filteredRows];
+    const sorter = comparisonSorters[sortBy.column] || comparisonSorters.status;
+    rows.sort((a, b) => {
+      const result = sorter(a, b);
+      return sortBy.direction === SortByDirection.asc ? result : -result;
+    });
+    return rows;
+  }, [filteredRows, sortBy]);
+  const status = compareRequest.status || STATUS.PENDING;
+  const subtitle =
+    previousScan.scanned_at && currentScan.scanned_at
+      ? `${formatScannedAt(previousScan.scanned_at)} -> ${formatScannedAt(
+          currentScan.scanned_at
+        )}`
+      : __('Compare CVE reports');
+
+  const onSort = column => {
+    const nextDirection =
+      sortBy.column === column && sortBy.direction === SortByDirection.asc
+        ? SortByDirection.desc
+        : SortByDirection.asc;
+    setSortBy({ column, direction: nextDirection });
+  };
+  const onSearchChange = (value, event) => {
+    setSearch(normalizeSearchInputValue(value, event));
+  };
+  const renderDiff = diff => {
+    const entries = comparisonDiffEntries(diff);
+    if (entries.length === 0) return '-';
+    return entries.map(entry => (
+      <div key={entry.field} className="cve-compare-diff-entry">
+        <span className="cve-compare-diff-label">{entry.label}:</span>{' '}
+        <span className="cve-compare-diff-values">
+          <span className="cve-compare-diff-old">{entry.oldValue}</span>{' '}
+          <span className="cve-compare-diff-arrow">-&gt;</span>{' '}
+          <span className="cve-compare-diff-new">{entry.newValue}</span>
+        </span>
+      </div>
+    ));
+  };
+
+  return (
+    <Modal
+      title={__('Compare CVE reports')}
+      description={subtitle}
+      isOpen={isOpen}
+      onClose={onClose}
+      width="80%"
+      maxWidth="80%"
+      ouiaId="cve-compare-modal"
+      actions={[
+        <Button
+          key="close"
+          variant="primary"
+          onClick={onClose}
+          ouiaId="cve-compare-close"
+        >
+          {__('Close')}
+        </Button>,
+      ]}
+    >
+      {status === STATUS.PENDING ? (
+        <Text component={TextVariants.small} ouiaId="cve-compare-loading">
+          {__('Loading...')}
+        </Text>
+      ) : (
+        <div className="cve-modal-body cve-compare-body">
+          <div className="cve-compare-summary">
+            <div className="cve-compare-meta">
+              <Text
+                component={TextVariants.small}
+                ouiaId="cve-compare-previous"
+              >
+                {__('Previous')}: {previousOrigin} /{' '}
+                {formatScannedAt(previousScan.scanned_at)}
+              </Text>
+              <Text component={TextVariants.small} ouiaId="cve-compare-current">
+                {__('Current')}: {currentOrigin} /{' '}
+                {formatScannedAt(currentScan.scanned_at)}
+              </Text>
+            </div>
+            <div className="cve-compare-cards">
+              {comparisonFilters
+                .filter(item => item.key !== 'all')
+                .map(item => (
+                  <button
+                    key={item.key}
+                    type="button"
+                    className={
+                      filter === item.key
+                        ? 'cve-compare-card is-active'
+                        : 'cve-compare-card'
+                    }
+                    onClick={() => setFilter(item.key)}
+                  >
+                    <span className="cve-compare-card-label">{item.label}</span>
+                    <span className="cve-compare-card-value">
+                      {summary[item.key]}
+                    </span>
+                  </button>
+                ))}
+            </div>
+          </div>
+          <div className="cve-modal-filters">
+            <SearchInput
+              id="cve-compare-search"
+              value={search}
+              onChange={onSearchChange}
+              onClear={() => setSearch('')}
+              onSearch={onSearchChange}
+              placeholder={__('Search comparison by CVE, package, diff...')}
+              aria-label={__('Search CVE comparison')}
+              className="cve-modal-search"
+            />
+            <div className="cve-modal-quick-filters">
+              <div className="cve-filter-buttons">
+                {comparisonFilters.map(item => (
+                  <button
+                    key={item.key}
+                    type="button"
+                    aria-pressed={filter === item.key}
+                    className={
+                      filter === item.key
+                        ? 'cve-filter-button is-active'
+                        : 'cve-filter-button'
+                    }
+                    onClick={() => setFilter(item.key)}
+                  >
+                    {item.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+          <div className="cve-modal-results">
+            {sortedRows.length === 0 ? (
+              <Text component={TextVariants.small} ouiaId="cve-compare-empty">
+                {__('No CVE differences match the selected filters')}
+              </Text>
+            ) : (
+              <Table
+                variant="compact"
+                aria-label="CVE comparison table"
+                ouiaId="cve-compare-table"
+              >
+                <Thead>
+                  <Tr ouiaId="cve-compare-header">
+                    {comparisonColumns.map(column => (
+                      <Th
+                        key={column.key}
+                        className="cve-sortable"
+                        onClick={() => onSort(column.key)}
+                      >
+                        {column.label}
+                      </Th>
+                    ))}
+                  </Tr>
+                </Thead>
+                <Tbody>
+                  {sortedRows.map((row, index) => (
+                    <Tr key={row.key} ouiaId={`cve-compare-row-${index}`}>
+                      <Td dataLabel={__('Status')}>
+                        {comparisonStatusLabels[row.status]}
+                      </Td>
+                      <Td dataLabel={__('CVE')}>
+                        {row.url ? (
+                          <a href={row.url} target="_blank" rel="noreferrer">
+                            {row.id}
+                          </a>
+                        ) : (
+                          row.id
+                        )}
+                      </Td>
+                      <Td dataLabel={__('Package')}>{row.name}</Td>
+                      <Td dataLabel={__('Severity')}>{row.severity}</Td>
+                      <Td dataLabel={__('Version')}>{row.version}</Td>
+                      <Td dataLabel={__('Fixed')}>{row.fixed}</Td>
+                      <Td dataLabel={__('Scan status')}>{row.scan_status}</Td>
+                      <Td dataLabel={__('Diff')}>{renderDiff(row.diff)}</Td>
+                      <Td dataLabel={__('Published')}>
+                        {formatDateTime(row.published)}
+                      </Td>
+                      <Td dataLabel={__('Title')} title={row.title}>
+                        <span className="cve-truncate">{row.title}</span>
+                      </Td>
+                    </Tr>
+                  ))}
+                </Tbody>
+              </Table>
+            )}
+          </div>
+        </div>
+      )}
+    </Modal>
+  );
+};
+
+CveCompareModal.propTypes = {
+  hostId: PropTypes.number.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  scanIds: PropTypes.arrayOf(PropTypes.number),
+};
+CveCompareModal.defaultProps = {
+  scanIds: [],
+};
+export default CveCompareModal;

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>
   );