foreman_cve_scanner 0.0.2 → 0.5.0

data/webpack/components/CveDetailsCard.js

@@ -0,0 +1,258 @@
+/* eslint-disable import/no-unresolved */
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Table, Tbody, Tr, Th, Thead, Td } from '@patternfly/react-table';
+import {
+  Text,
+  TextContent,
+  TextVariants,
+  Button,
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateBody,
+  Title,
+} from '@patternfly/react-core';
+import { 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';
+import CardTemplate from 'foremanReact/components/HostDetails/Templates/CardItem/CardTemplate';
+import SkeletonLoader from 'foremanReact/components/common/SkeletonLoader';
+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 {
+  noReportsBody,
+  noReportsTitle,
+  riskLevelFromWorst,
+} 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');
+  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 findings = latest?.findings || [];
+  const sortedFindings = [...findings].sort((a, b) => {
+    const aTime = new Date(a.published || 0).getTime();
+    const bTime = new Date(b.published || 0).getTime();
+    return bTime - aTime;
+  });
+  const worst = latest?.summary?.worst || 'none';
+  const riskLevel = riskLevelFromWorst(worst);
+  const openModal = (scanId, filter) => {
+    setModalScanId(scanId);
+    setModalFilter(filter || 'all');
+    setIsModalOpen(true);
+  };
+  return (
+    <CardTemplate header={__('CVE scan details')} expandable masonryLayout>
+      <SkeletonLoader status={status || latestStatus || STATUS.PENDING}>
+        {!latest ? (
+          <EmptyState>
+            <EmptyStateIcon icon={SearchIcon} />
+            <Title headingLevel="h4" size="md" ouiaId="cve-details-empty-title">
+              {noReportsTitle()}
+            </Title>
+            <EmptyStateBody>{noReportsBody()}</EmptyStateBody>
+          </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"
+              >
+                <span className="cve-count">
+                  {__('low')}
+                  <span className="cve-bubble">{latest.low}</span>
+                </span>
+              </Button>
+            </div>
+
+            {sortedFindings.length === 0 ? (
+              <Text component={TextVariants.small} ouiaId="cve-details-empty">
+                {__('No vulnerabilities reported')}
+              </Text>
+            ) : (
+              <>
+                <TextContent className="cve-section-title">
+                  <Text
+                    component={TextVariants.h5}
+                    ouiaId="cve-details-cves-title"
+                  >
+                    {__('CVEs')}
+                  </Text>
+                </TextContent>
+                <Table
+                  variant="compact"
+                  aria-label="CVE findings table"
+                  ouiaId="cve-details-findings-table"
+                >
+                  <Thead>
+                    <Tr ouiaId="cve-details-findings-header">
+                      <Th>{__('Severity')}</Th>
+                      <Th>{__('Package')}</Th>
+                      <Th>{__('Installed')}</Th>
+                    </Tr>
+                  </Thead>
+                  <Tbody>
+                    {sortedFindings.slice(0, 5).map((finding, index) => (
+                      <Tr
+                        key={finding.id}
+                        ouiaId={`cve-details-finding-row-${index}`}
+                      >
+                        <Td dataLabel={__('Severity')}>
+                          <span className="cve-summary">
+                            <SeverityIcon
+                              severity={finding.severity?.toLowerCase()}
+                            />
+                            <span>{finding.severity}</span>
+                          </span>
+                        </Td>
+                        <Td dataLabel={__('Package')}>{finding.name}</Td>
+                        <Td dataLabel={__('Installed')}>{finding.version}</Td>
+                      </Tr>
+                    ))}
+                  </Tbody>
+                </Table>
+                {sortedFindings.length > 5 && (
+                  <div className="cve-more">
+                    <Button
+                      variant="link"
+                      className="cve-summary-link"
+                      onClick={() => openModal(latest.id, 'all')}
+                      ouiaId="cve-details-more-button"
+                    >
+                      {__('More')}
+                    </Button>
+                  </div>
+                )}
+              </>
+            )}
+
+            {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)}
+        hostId={hostId}
+        scanId={modalScanId}
+        initialFilter={modalFilter}
+      />
+    </CardTemplate>
+  );
+};
+CveDetailsCard.propTypes = {
+  hostDetails: PropTypes.shape({ id: PropTypes.number }),
+};
+CveDetailsCard.defaultProps = {
+  hostDetails: undefined,
+};
+export default CveDetailsCard;

data/webpack/components/CveFindingsModal.js

@@ -0,0 +1,274 @@
+/* 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,
+  FormGroup,
+} 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 SeverityIcon from './SeverityIcon';
+import { compareStrings, formatDateTime, severityRank } 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: 'status', label: __('Status') },
+  { key: 'id', label: __('CVE') },
+  { key: 'title', label: __('Title') },
+];
+
+const CveFindingsModal = ({
+  isOpen,
+  onClose,
+  hostId,
+  scanId,
+  initialFilter,
+}) => {
+  const [filter, setFilter] = useState(initialFilter || 'all');
+  const [sortBy, setSortBy] = useState({
+    direction: SortByDirection.desc,
+    column: 'severity',
+  });
+  const normalizedScanId =
+    scanId !== null && scanId !== undefined && String(scanId).trim() !== ''
+      ? scanId
+      : null;
+  const url = normalizedScanId
+    ? foremanUrl(`/api/v2/hosts/${hostId}/cve_scans/${normalizedScanId}`)
+    : foremanUrl(`/api/v2/hosts/${hostId}/cve_scans/latest`);
+
+  const { response, status } = useAPI(isOpen ? 'get' : null, url, {
+    key: `CVE_SCAN_${normalizedScanId || 'latest'}`,
+  });
+
+  useEffect(() => {
+    if (!isOpen) return;
+    setFilter(initialFilter || 'all');
+  }, [initialFilter, isOpen, scanId]);
+
+  const payload = response || {};
+  const findings = Array.isArray(payload.findings) ? payload.findings : [];
+
+  const normalizedFilter = (filter || 'all').toLowerCase();
+  const filteredFindings = useMemo(() => {
+    if (normalizedFilter === 'all') return findings;
+    return findings.filter(
+      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 sortedFindings = useMemo(() => {
+    const list = [...filteredFindings];
+    const sortKey = sortBy.column || 'severity';
+    const sorter = sorters[sortKey] || sorters.severity;
+    list.sort((a, b) => {
+      const result = sorter(a, b);
+      return sortBy.direction === SortByDirection.asc ? result : -result;
+    });
+    return list;
+  }, [filteredFindings, sortBy, sorters]);
+
+  const onSort = column => {
+    const nextDirection =
+      sortBy.column === column && sortBy.direction === SortByDirection.asc
+        ? SortByDirection.desc
+        : SortByDirection.asc;
+    setSortBy({ column, direction: nextDirection });
+  };
+
+  return (
+    <Modal
+      title={
+        payload?.created_at && typeof payload?.total !== 'undefined'
+          ? `${__('Report from')} ${formatPublished(payload.created_at)} - ${__(
+              'Total'
+            )}: ${payload.total}`
+          : __('CVE findings')
+      }
+      isOpen={isOpen}
+      onClose={onClose}
+      width="70%"
+      maxWidth="70%"
+      ouiaId="cve-findings-modal"
+      actions={[
+        <Button
+          key="close"
+          variant="primary"
+          onClick={onClose}
+          ouiaId="cve-findings-close"
+        >
+          {__('Close')}
+        </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-filter">
+              <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>
+
+          {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')}>
+                      {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>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
+          )}
+        </div>
+      )}
+    </Modal>
+  );
+};
+
+CveFindingsModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  hostId: PropTypes.number.isRequired,
+  scanId: PropTypes.number,
+  initialFilter: PropTypes.string,
+};
+
+CveFindingsModal.defaultProps = {
+  scanId: undefined,
+  initialFilter: 'all',
+};
+
+export default CveFindingsModal;

data/webpack/components/CveHistoryTable.js

@@ -0,0 +1,58 @@
+/* eslint-disable import/no-unresolved */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
+import { Button } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import RelativeDateTime from 'foremanReact/components/common/dates/RelativeDateTime';
+
+const CveHistoryTable = ({ scans, onOpen }) => (
+  <Table
+    variant="compact"
+    aria-label="CVE scan history table"
+    ouiaId="cve-details-history-table"
+  >
+    <Thead>
+      <Tr ouiaId="cve-details-history-header">
+        <Th>{__('Reported at')}</Th>
+        <Th>{__('Scanner')}</Th>
+        <Th>{__('Total')}</Th>
+      </Tr>
+    </Thead>
+    <Tbody>
+      {scans.map((scan, index) => (
+        <Tr key={scan.id} ouiaId={`cve-details-history-row-${index}`}>
+          <Td dataLabel={__('Reported at')}>
+            <Button
+              variant="link"
+              className="cve-summary-link"
+              onClick={() => onOpen(scan.id, 'all')}
+              ouiaId={`cve-details-history-open-${scan.id}`}
+            >
+              <RelativeDateTime
+                date={scan.created_at}
+                defaultValue={__('Unknown time')}
+              />
+            </Button>
+          </Td>
+          <Td dataLabel={__('Scanner')}>{scan.scanner}</Td>
+          <Td dataLabel={__('Total')}>{scan.total}</Td>
+        </Tr>
+      ))}
+    </Tbody>
+  </Table>
+);
+
+CveHistoryTable.propTypes = {
+  scans: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      created_at: PropTypes.string,
+      scanner: PropTypes.string,
+      total: PropTypes.number,
+    })
+  ).isRequired,
+  onOpen: PropTypes.func.isRequired,
+};
+
+export default CveHistoryTable;

data/webpack/components/CveOverviewCard.js

@@ -0,0 +1,67 @@
+/* eslint-disable import/no-unresolved */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Text, TextContent, TextVariants } 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 CardTemplate from 'foremanReact/components/HostDetails/Templates/CardItem/CardTemplate';
+import SkeletonLoader from 'foremanReact/components/common/SkeletonLoader';
+import { STATUS } from 'foremanReact/constants';
+import SeverityIcon from './SeverityIcon';
+import { noReportsTitle } from './cve_helpers';
+import './cve_scans.scss';
+
+const CveOverviewCard = ({ hostDetails }) => {
+  const hostId = hostDetails?.id;
+  const url = hostId
+    ? foremanUrl(`/api/v2/hosts/${hostId}/cve_scans/latest`)
+    : null;
+  const { response, status } = useAPI('get', url, {
+    key: `CVE_OVERVIEW_${hostId}`,
+  });
+
+  if (!hostId) return null;
+
+  const total = response?.total || 0;
+  const worst = response?.summary?.worst || 'none';
+
+  return (
+    <CardTemplate header={__('CVE findings')}>
+      <SkeletonLoader status={status || STATUS.PENDING}>
+        {!response ? (
+          <TextContent ouiaId="cve-overview-empty">
+            <Text
+              component={TextVariants.small}
+              ouiaId="cve-overview-empty-text"
+            >
+              {noReportsTitle()}
+            </Text>
+          </TextContent>
+        ) : (
+          <div className="cve-overview">
+            <div className="cve-summary">
+              <SeverityIcon severity={worst} />
+              <Text component={TextVariants.h2} ouiaId="cve-overview-total">
+                {total}
+              </Text>
+            </div>
+            <Text component={TextVariants.small} ouiaId="cve-overview-caption">
+              {__('Total findings in latest scan')}
+            </Text>
+          </div>
+        )}
+      </SkeletonLoader>
+    </CardTemplate>
+  );
+};
+
+CveOverviewCard.propTypes = {
+  hostDetails: PropTypes.shape({ id: PropTypes.number }),
+};
+
+CveOverviewCard.defaultProps = {
+  hostDetails: undefined,
+};
+
+export default CveOverviewCard;