foreman_cve_scanner 0.6.0 → 0.7.0

data/webpack/components/CveFindingsModal.js

@@ -1,64 +1,21 @@
 /* eslint-disable import/no-unresolved */
-/* eslint-disable camelcase */
-import React, { useEffect, useMemo, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  Modal,
-  Button,
-  Text,
-  TextVariants,
-  FormGroup,
-  SearchInput,
-} from '@patternfly/react-core';
-import {
-  Table,
-  Tbody,
-  Tr,
-  Th,
-  Thead,
-  Td,
-  SortByDirection,
-} from '@patternfly/react-table';
+import { Modal, Button } from '@patternfly/react-core';
 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 SeverityIcon from './SeverityIcon';
-import {
-  findingMatchesSearch,
-  formatDateTime,
-  formatScanOrigin,
-  formatScannedAt,
-  findingSorters,
-  normalizeSearchInputValue,
-} from './cve_helpers';
+import CveFindingsView from './CveFindingsView';
 import './cve_scans.scss';
 
-const SEVERITY_OPTIONS = ['all', 'critical', 'high', 'medium', 'low'];
-const COLUMNS = [
-  { key: 'severity', label: __('Severity') },
-  { key: 'published', label: __('Published') },
-  { key: 'name', label: __('Package') },
-  { key: 'version', label: __('Affected version') },
-  { key: 'fixed', label: __('Fixed version') },
-  { key: 'status', label: __('Status') },
-  { key: 'id', label: __('CVE') },
-  { key: 'title', label: __('Title') },
-];
-
 const CveFindingsModal = ({
   isOpen,
   onClose,
   hostId,
+  hostName,
   scanId,
   initialFilter,
 }) => {
-  const [filter, setFilter] = useState(initialFilter || 'all');
-  const [search, setSearch] = useState('');
-  const [sortBy, setSortBy] = useState({
-    direction: SortByDirection.desc,
-    column: 'severity',
-  });
   const normalizedScanId =
     scanId !== null && scanId !== undefined && String(scanId).trim() !== ''
       ? scanId
@@ -68,64 +25,12 @@ const CveFindingsModal = ({
     : foremanUrl(`/api/v2/hosts/${hostId}/cve_scans/latest`);
 
   const { response, status } = useAPI(isOpen ? 'get' : null, url, {
-    key: `CVE_SCAN_${normalizedScanId || 'latest'}`,
+    key: `CVE_SCAN_${hostId}_${normalizedScanId || 'latest'}`,
   });
 
-  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(() => {
-    if (normalizedFilter === 'all') return findings;
-    return findings.filter(
-      f => (f.severity || '').toLowerCase() === normalizedFilter
-    );
-  }, [normalizedFilter, findings]);
-  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 = [...visibleFindings];
-    const sortKey = sortBy.column || '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;
-  }, [visibleFindings, sortBy]);
-
-  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));
-  };
-
   return (
     <Modal
-      title={
-        payload?.scanned_at && typeof payload?.total !== 'undefined'
-          ? `${__('Report from')} ${formatScannedAt(
-              payload.scanned_at
-            )} - ${origin} - ${__('Total')}: ${payload.total}`
-          : __('CVE findings')
-      }
+      title={__('CVE findings')}
       isOpen={isOpen}
       onClose={onClose}
       width="70%"
@@ -142,151 +47,27 @@ const CveFindingsModal = ({
         </Button>,
       ]}
     >
-      {status === STATUS.PENDING ? (
-        <Text component={TextVariants.small} ouiaId="cve-findings-loading">
-          {__('Loading...')}
-        </Text>
-      ) : (
-        <div className="cve-modal-body">
-          <div className="cve-modal-filters">
-            <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
-                    key={opt}
-                    type="button"
-                    aria-pressed={filter === opt}
-                    className={
-                      filter === opt
-                        ? 'cve-filter-button is-active'
-                        : 'cve-filter-button'
-                    }
-                    onClick={() => setFilter(opt)}
-                  >
-                    {__(opt)}
-                  </button>
-                ))}
-              </div>
-            </FormGroup>
-          </div>
-
-          <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)}
-                      >
-                        {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}
-                        >
-                          <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>
-      )}
+      <CveFindingsView
+        scan={response}
+        status={status}
+        initialFilter={initialFilter}
+        hostName={hostName}
+      />
     </Modal>
   );
 };
+
 CveFindingsModal.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
   hostId: PropTypes.number.isRequired,
+  hostName: PropTypes.string,
   scanId: PropTypes.number,
   initialFilter: PropTypes.string,
 };
 
 CveFindingsModal.defaultProps = {
+  hostName: undefined,
   scanId: undefined,
   initialFilter: 'all',
 };

data/webpack/components/CveFindingsView.js

@@ -0,0 +1,307 @@
+/* eslint-disable import/no-unresolved */
+/* eslint-disable camelcase */
+import React, { useEffect, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateIcon,
+  FormGroup,
+  SearchInput,
+  Text,
+  TextContent,
+  TextVariants,
+  Title,
+} from '@patternfly/react-core';
+import {
+  Table,
+  Tbody,
+  Tr,
+  Th,
+  Thead,
+  Td,
+  SortByDirection,
+} from '@patternfly/react-table';
+import { CheckCircleIcon, SearchIcon } from '@patternfly/react-icons';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { STATUS } from 'foremanReact/constants';
+import SeverityIcon from './SeverityIcon';
+import CveLink from './CveLink';
+import CveKatelloFixLink from './CveKatelloFixLink';
+import useSortBy from './useSortBy';
+import {
+  findingIdentity,
+  findingMatchesSearch,
+  findingSorters,
+  formatDateTime,
+  formatScanOrigin,
+  formatScannedAt,
+  katelloFixTitle,
+  noFindingsBody,
+  noFindingsTitle,
+  noReportsBody,
+  noReportsTitle,
+  normalizeSearchInputValue,
+  shouldShowKatelloFixColumn,
+} from './cve_helpers';
+import './cve_scans.scss';
+
+const SEVERITY_OPTIONS = ['all', 'critical', 'high', 'medium', 'low'];
+const COLUMNS = [
+  { key: 'severity', label: __('Severity') },
+  { key: 'published', label: __('Published') },
+  { key: 'name', label: __('Package') },
+  { key: 'version', label: __('Affected version') },
+  { key: 'fixed', label: __('Fixed version') },
+  { key: 'katello_fix', label: __('Fix availability') },
+  { key: 'status', label: __('Status') },
+  { key: 'id', label: __('CVE') },
+  { key: 'title', label: __('Title') },
+];
+
+const CveFindingsView = ({ scan, status, initialFilter, hostName }) => {
+  const [filter, setFilter] = useState(initialFilter || 'all');
+  const [search, setSearch] = useState('');
+  const scanId = scan?.id;
+  const scanFindings = scan?.findings;
+  const findings = useMemo(
+    () => (Array.isArray(scanFindings) ? scanFindings : []),
+    [scanFindings]
+  );
+  const showKatelloFixColumn = shouldShowKatelloFixColumn(findings);
+  const columns = showKatelloFixColumn
+    ? COLUMNS
+    : COLUMNS.filter(column => column.key !== 'katello_fix');
+  const origin = formatScanOrigin(scan?.scanner, scan?.source);
+  const normalizedFilter = (filter || 'all').toLowerCase();
+  const filteredFindings =
+    normalizedFilter === 'all'
+      ? findings
+      : findings.filter(
+          finding => (finding.severity || '').toLowerCase() === normalizedFilter
+        );
+  const normalizedSearch = search.trim().toLowerCase();
+  const visibleFindings = useMemo(() => {
+    if (!normalizedSearch) return filteredFindings;
+    return filteredFindings.filter(finding =>
+      findingMatchesSearch(finding, normalizedSearch)
+    );
+  }, [filteredFindings, normalizedSearch]);
+  const { sortBy, onSort, sortedItems: sortedFindings } = useSortBy(
+    'severity',
+    findingSorters,
+    visibleFindings
+  );
+
+  useEffect(() => {
+    setFilter(initialFilter || 'all');
+    setSearch('');
+  }, [initialFilter, scanId]);
+
+  if (status === STATUS.PENDING) {
+    return (
+      <Text component={TextVariants.small} ouiaId="cve-findings-loading">
+        {__('Loading...')}
+      </Text>
+    );
+  }
+
+  if (scan?.error) {
+    return (
+      <Text component={TextVariants.small} ouiaId="cve-findings-error">
+        {scan.error.message}
+      </Text>
+    );
+  }
+
+  if (!scan?.id) {
+    return (
+      <EmptyState>
+        <EmptyStateIcon icon={SearchIcon} />
+        <Title headingLevel="h4" size="md" ouiaId="cve-findings-empty-title">
+          {noReportsTitle()}
+        </Title>
+        <EmptyStateBody>{noReportsBody()}</EmptyStateBody>
+      </EmptyState>
+    );
+  }
+
+  const onSearchChange = (value, event) => {
+    setSearch(normalizeSearchInputValue(value, event));
+  };
+
+  return (
+    <div className="cve-modal-body">
+      <TextContent className="cve-findings-meta">
+        <Text component={TextVariants.small} ouiaId="cve-findings-summary">
+          {`${__('Report from')} ${formatScannedAt(
+            scan.scanned_at
+          )} - ${origin} - ${__('Total')}: ${scan.total}`}
+        </Text>
+      </TextContent>
+
+      {findings.length === 0 ? (
+        <EmptyState className="cve-empty-state cve-empty-state--success">
+          <EmptyStateIcon icon={CheckCircleIcon} />
+          <Title headingLevel="h4" size="md" ouiaId="cve-findings-clean-title">
+            {noFindingsTitle()}
+          </Title>
+          <EmptyStateBody>{noFindingsBody()}</EmptyStateBody>
+        </EmptyState>
+      ) : (
+        <>
+          <div className="cve-modal-filters">
+            <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
+                    key={opt}
+                    type="button"
+                    aria-pressed={filter === opt}
+                    className={
+                      filter === opt
+                        ? 'cve-filter-button is-active'
+                        : 'cve-filter-button'
+                    }
+                    onClick={() => setFilter(opt)}
+                  >
+                    {__(opt)}
+                  </button>
+                ))}
+              </div>
+            </FormGroup>
+          </div>
+
+          <div className="cve-modal-results">
+            {sortedFindings.length === 0 ? (
+              <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={findingIdentity(finding)}
+                      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>
+                      {showKatelloFixColumn && (
+                        <Td
+                          dataLabel={__('Fix availability')}
+                          title={katelloFixTitle(finding.katello_fix)}
+                        >
+                          <CveKatelloFixLink
+                            fix={finding.katello_fix}
+                            hostName={hostName}
+                          />
+                        </Td>
+                      )}
+                      <Td dataLabel={__('Status')}>
+                        {finding.status || __('open')}
+                      </Td>
+                      <Td dataLabel={__('CVE')}>
+                        <CveLink id={finding.id} url={finding.url} />
+                      </Td>
+                      <Td dataLabel={__('Title')} title={finding.title}>
+                        <span className="cve-truncate">{finding.title}</span>
+                      </Td>
+                    </Tr>
+                  ))}
+                </Tbody>
+              </Table>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+CveFindingsView.propTypes = {
+  scan: PropTypes.shape({
+    id: PropTypes.number,
+    scanned_at: PropTypes.string,
+    scanner: PropTypes.string,
+    source: PropTypes.string,
+    total: PropTypes.number,
+    findings: PropTypes.arrayOf(PropTypes.object),
+    error: PropTypes.shape({
+      message: PropTypes.string,
+    }),
+  }),
+  status: PropTypes.string,
+  initialFilter: PropTypes.string,
+  hostName: PropTypes.string,
+};
+
+CveFindingsView.defaultProps = {
+  scan: undefined,
+  status: undefined,
+  initialFilter: 'all',
+  hostName: undefined,
+};
+
+export default CveFindingsView;

data/webpack/components/CveKatelloFixLink.js

@@ -0,0 +1,59 @@
+/* eslint-disable import/no-unresolved */
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  katelloFixDetailsUrl,
+  katelloFixInstallUrl,
+  katelloFixLabel,
+  katelloFixTitle,
+} from './cve_helpers';
+
+const katelloFixClassName = fix =>
+  `cve-katello-fix cve-katello-fix--${(
+    fix?.status || 'unknown'
+  ).toLowerCase()}`;
+
+const CveKatelloFixLink = ({ fix, hostName }) => {
+  const label = katelloFixLabel(fix);
+  const title = katelloFixTitle(fix);
+  const installUrl = katelloFixInstallUrl({ hostName, fix });
+  const detailsUrl = katelloFixDetailsUrl(fix);
+  const className = katelloFixClassName(fix);
+
+  if (installUrl) {
+    return (
+      <a className={className} href={installUrl} title={title}>
+        {label}
+      </a>
+    );
+  }
+
+  if ((fix?.status || '').toLowerCase() === 'applicable' && detailsUrl) {
+    return (
+      <a className={className} href={detailsUrl} title={title}>
+        {label}
+      </a>
+    );
+  }
+
+  return (
+    <span className={className} title={title}>
+      {label}
+    </span>
+  );
+};
+
+CveKatelloFixLink.propTypes = {
+  fix: PropTypes.shape({
+    status: PropTypes.string,
+    errata: PropTypes.arrayOf(PropTypes.object),
+  }),
+  hostName: PropTypes.string,
+};
+
+CveKatelloFixLink.defaultProps = {
+  fix: undefined,
+  hostName: undefined,
+};
+
+export default CveKatelloFixLink;

data/webpack/components/CveLink.js

@@ -0,0 +1,28 @@
+/* eslint-disable import/no-unresolved */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const SAFE_URL = /^https?:\/\//i;
+
+const CveLink = ({ id, url }) => {
+  if (url && SAFE_URL.test(url)) {
+    return (
+      <a href={url} target="_blank" rel="noreferrer">
+        {id}
+      </a>
+    );
+  }
+
+  return <>{id}</>;
+};
+
+CveLink.propTypes = {
+  id: PropTypes.string.isRequired,
+  url: PropTypes.string,
+};
+
+CveLink.defaultProps = {
+  url: undefined,
+};
+
+export default CveLink;