foreman_openscap 12.1.2 → 13.0.1

data/webpack/components/LineChart/index.js

@@ -0,0 +1,324 @@
+import React, {
+  useMemo,
+  useRef,
+  useEffect,
+  useLayoutEffect,
+  useState,
+  useCallback,
+} from 'react';
+import PropTypes from 'prop-types';
+import {
+  Chart,
+  ChartAxis,
+  ChartGroup,
+  ChartLine,
+  ChartLegend,
+  ChartLegendTooltip,
+  ChartThemeColor,
+  createContainer,
+} from '@patternfly/react-charts';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  formatAxisTick,
+  formatTooltipTitle,
+  formatYAxisTick,
+  getLegendEvents,
+  getSeriesOpacity,
+  getXAxisTickValues,
+  InteractiveLegendLabel,
+  InteractiveLegendSymbol,
+  XAxisTickLabel,
+} from 'foremanReact/components/common/charts/helpers/LegendHelpers';
+import EmptyState from '../EmptyState';
+
+import {
+  processChartData,
+  hasChartData,
+  getYTickValues,
+  sanitizeChartDimension,
+  clampChartPadding,
+  getTimeseriesXDomain,
+  buildLineChartLegendData,
+  formatTooltipValue,
+} from './LineChartHelpers';
+import './LineChart.scss';
+
+const DEFAULT_HEIGHT = 350;
+const DEFAULT_WIDTH = 1000;
+
+/** Match AreaChart padding so angled x-axis tick labels are not clipped. */
+const CHART_PADDING_BASE = { bottom: 125, right: 170, top: 50 };
+
+const getDataClickEvents = onclick => {
+  if (!onclick) return null;
+
+  return {
+    target: 'data',
+    eventHandlers: {
+      onClick: () => [
+        {
+          target: 'data',
+          mutation: props => {
+            if (props.datum?.name) {
+              onclick({ id: props.datum.name });
+            }
+            return null;
+          },
+        },
+      ],
+    },
+  };
+};
+
+const LineChart = ({
+  data,
+  config,
+  noDataMsg,
+  xAxisDataLabel,
+  onclick,
+  id,
+  size,
+  title: _title,
+  unloadData: _unloadData,
+  axisOpts: _axisOpts,
+}) => {
+  const chartData = useMemo(
+    () => processChartData(data, xAxisDataLabel, config),
+    [data, xAxisDataLabel, config]
+  );
+
+  const CursorVoronoiContainer = useMemo(
+    () => createContainer('voronoi', 'cursor'),
+    []
+  );
+
+  const [hiddenSeries, setHiddenSeries] = useState(() => new Set());
+  const [hoveredSeries, setHoveredSeries] = useState(null);
+  const toggleSeries = useCallback(name => {
+    setHiddenSeries(prev => {
+      const next = new Set(prev);
+      if (next.has(name)) next.delete(name);
+      else next.add(name);
+      return next;
+    });
+  }, []);
+
+  const containerRef = useRef(null);
+  const [observedSize, setObservedSize] = useState(null);
+
+  const updateObservedSize = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const { width, height } = el.getBoundingClientRect();
+    if (width > 0 && height > 0) {
+      setObservedSize({ width, height });
+    }
+  }, []);
+
+  useLayoutEffect(() => {
+    updateObservedSize();
+  }, [updateObservedSize]);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el || typeof ResizeObserver === 'undefined') return undefined;
+
+    const observer = new ResizeObserver(() => {
+      updateObservedSize();
+    });
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [updateObservedSize]);
+
+  const legendData = useMemo(
+    () => (chartData ? buildLineChartLegendData(chartData, hiddenSeries) : []),
+    [chartData, hiddenSeries]
+  );
+
+  const visibleSeries = useMemo(
+    () => chartData?.filter(series => !hiddenSeries.has(series.name)) ?? [],
+    [chartData, hiddenSeries]
+  );
+
+  const tickValues = useMemo(() => getXAxisTickValues(chartData, 6), [
+    chartData,
+  ]);
+  const yTickValues = useMemo(() => getYTickValues(chartData, hiddenSeries), [
+    chartData,
+    hiddenSeries,
+  ]);
+  const timeseriesXDomain = useMemo(
+    () =>
+      config === 'timeseries' ? getTimeseriesXDomain(chartData) : undefined,
+    [chartData, config]
+  );
+
+  if (!hasChartData(data, xAxisDataLabel) || !chartData) {
+    return (
+      <EmptyState
+        ouiaEmptyStateTitleId="openscap-line-chart-empty-state-title"
+        title={noDataMsg}
+      />
+    );
+  }
+
+  const hasExplicitSize = size?.width > 0 && size?.height > 0;
+  if (!hasExplicitSize && !observedSize) {
+    return <div ref={containerRef} className="line-chart-container" />;
+  }
+
+  const maxTickLabelLen =
+    yTickValues?.length > 0
+      ? Math.max(...yTickValues.map(t => formatYAxisTick(t).length))
+      : formatYAxisTick(0).length;
+  const dynamicLeft = maxTickLabelLen * 8 + 50;
+  const chartHeight = sanitizeChartDimension(
+    size?.height ?? observedSize?.height,
+    DEFAULT_HEIGHT
+  );
+  const chartWidth = sanitizeChartDimension(
+    size?.width ?? observedSize?.width,
+    DEFAULT_WIDTH
+  );
+  const padding = clampChartPadding(
+    {
+      ...CHART_PADDING_BASE,
+      left: dynamicLeft,
+    },
+    chartWidth,
+    chartHeight
+  );
+  const chartName = id || 'line-chart';
+  const legendEvents = getLegendEvents(chartName, toggleSeries);
+  const events = [getDataClickEvents(onclick), legendEvents].filter(Boolean);
+
+  return (
+    <div ref={containerRef} className="line-chart-container">
+      <Chart
+        name={chartName}
+        ariaDesc={__('Line chart')}
+        themeColor={ChartThemeColor.multi}
+        animate={false}
+        domainPadding={{ x: [20, 20], y: [10, 10] }}
+        scale={config === 'timeseries' ? { x: 'time' } : undefined}
+        containerComponent={
+          <CursorVoronoiContainer
+            cursorDimension="x"
+            labels={({ datum }) => formatTooltipValue(datum.y)}
+            labelComponent={
+              <ChartLegendTooltip
+                legendData={legendData}
+                title={formatTooltipTitle}
+              />
+            }
+            mouseFollowTooltips
+            voronoiDimension="x"
+            voronoiPadding={padding}
+            constrainToVisibleArea
+          />
+        }
+        height={chartHeight}
+        width={chartWidth}
+        padding={padding}
+        legendData={legendData}
+        legendOrientation="vertical"
+        legendPosition="right"
+        legendComponent={
+          <ChartLegend
+            dataComponent={
+              <InteractiveLegendSymbol
+                setHoveredSeries={setHoveredSeries}
+                toggleSeries={toggleSeries}
+              />
+            }
+            labelComponent={
+              <InteractiveLegendLabel
+                hiddenSeries={hiddenSeries}
+                hoveredSeries={hoveredSeries}
+                setHoveredSeries={setHoveredSeries}
+                toggleSeries={toggleSeries}
+              />
+            }
+          />
+        }
+        events={events}
+      >
+        <ChartAxis
+          tickValues={config === 'timeseries' ? tickValues : undefined}
+          tickFormat={config === 'timeseries' ? formatAxisTick : undefined}
+          domain={timeseriesXDomain}
+          tickLabelComponent={
+            config === 'timeseries' ? (
+              <XAxisTickLabel yAxisLabelOffset={-12} />
+            ) : (
+              undefined
+            )
+          }
+          style={
+            config === 'timeseries'
+              ? { tickLabels: { angle: -45, verticalAnchor: 'end' } }
+              : undefined
+          }
+        />
+        <ChartAxis
+          dependentAxis
+          showGrid
+          tickValues={yTickValues}
+          tickFormat={formatYAxisTick}
+        />
+        <ChartGroup>
+          {visibleSeries.map(series => (
+            <ChartLine
+              key={series.name}
+              name={series.name}
+              data={series.data}
+              style={{
+                data: {
+                  ...(series.color && { stroke: series.color }),
+                  opacity: getSeriesOpacity(
+                    hoveredSeries && hoveredSeries !== series.name
+                  ),
+                },
+              }}
+            />
+          ))}
+        </ChartGroup>
+      </Chart>
+    </div>
+  );
+};
+
+LineChart.propTypes = {
+  data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  config: PropTypes.oneOf(['regular', 'timeseries']),
+  noDataMsg: PropTypes.string,
+  xAxisDataLabel: PropTypes.string,
+  onclick: PropTypes.func,
+  id: PropTypes.string,
+  size: PropTypes.shape({
+    height: PropTypes.number,
+    width: PropTypes.number,
+  }),
+  // Accepted for compatibility with the legacy Foreman wrapper; unused in PF5.
+  title: PropTypes.object,
+  unloadData: PropTypes.bool,
+  axisOpts: PropTypes.object,
+};
+
+LineChart.defaultProps = {
+  data: undefined,
+  config: 'regular',
+  noDataMsg: __('No data available'),
+  xAxisDataLabel: '',
+  onclick: undefined,
+  id: undefined,
+  size: undefined,
+  title: { type: 'percent' },
+  unloadData: false,
+  axisOpts: {},
+};
+
+export default LineChart;

data/webpack/components/OpenscapRemediationWizard/constants.js

@@ -15,6 +15,9 @@ export const JOB_INVOCATION_API_REQUEST_KEY = 'OPENSCAP_REX_JOB_INVOCATIONS';
 export const SNIPPET_SH = 'urn:xccdf:fix:script:sh';
 export const SNIPPET_ANSIBLE = 'urn:xccdf:fix:script:ansible';
 
+export const TOOLTIP_COPIED_EXIT_DELAY_MS = 1500;
+export const TOOLTIP_DEFAULT_EXIT_DELAY_MS = 600;
+
 export const WIZARD_TITLES = {
   snippetSelect: __('Select snippet'),
   reviewHosts: __('Review hosts'),

data/webpack/components/OpenscapRemediationWizard/steps/Finish.js

@@ -6,7 +6,7 @@ import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 
 import { translate as __ } from 'foremanReact/common/I18n';
 import { foremanUrl } from 'foremanReact/common/helpers';
-import { STATUS } from 'foremanReact/constants';
+import { STATUS, HTTP_STATUS_CODES } from 'foremanReact/constants';
 import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
 import Loading from 'foremanReact/components/Loading';
 import PermissionDenied from 'foremanReact/components/PermissionDenied';
@@ -91,7 +91,7 @@ const Finish = ({ onClose }) => {
     </Button>
   );
   const errorComponent =
-    statusCode === 403 ? (
+    statusCode === HTTP_STATUS_CODES.FORBIDDEN ? (
       <PermissionDenied
         missingPermissions={data?.error?.missing_permissions}
         primaryButton={closeBtn}

data/webpack/components/OpenscapRemediationWizard/steps/ReviewRemediation.js

@@ -24,7 +24,11 @@ import {
 import OpenscapRemediationWizardContext from '../OpenscapRemediationWizardContext';
 import WizardHeader from '../WizardHeader';
 import ViewSelectedHostsLink from '../ViewSelectedHostsLink';
-import { FAIL_RULE_SEARCH } from '../constants';
+import {
+  FAIL_RULE_SEARCH,
+  TOOLTIP_COPIED_EXIT_DELAY_MS,
+  TOOLTIP_DEFAULT_EXIT_DELAY_MS,
+} from '../constants';
 import { findFixBySnippet } from '../helpers';
 
 import './ReviewRemediation.scss';
@@ -78,7 +82,11 @@ const ReviewRemediation = () => {
           textId="code-content"
           aria-label="Copy to clipboard"
           onClick={e => onCopyClick(e, snippetText)}
-          exitDelay={copied ? 1500 : 600}
+          exitDelay={
+            copied
+              ? TOOLTIP_COPIED_EXIT_DELAY_MS
+              : TOOLTIP_DEFAULT_EXIT_DELAY_MS
+          }
           maxWidth="110px"
           variant="plain"
           onTooltipHidden={() => setCopied(false)}

data/webpack/components/OpenscapRemediationWizard/steps/SnippetSelect.js

@@ -18,6 +18,8 @@ import WizardHeader from '../WizardHeader';
 import EmptyState from '../../EmptyState';
 import { errorMsg, supportedRemediationSnippets } from '../helpers';
 
+const URN_TAIL_SEGMENTS = -2;
+
 const SnippetSelect = () => {
   const {
     fixes,
@@ -44,7 +46,7 @@ const SnippetSelect = () => {
     if (mapped) return mapped;
 
     return join(
-      map(slice(split(system, ':'), -2), n => capitalize(n)),
+      map(slice(split(system, ':'), URN_TAIL_SEGMENTS), n => capitalize(n)),
       ' '
     );
   };

data/webpack/global_index.js

@@ -2,9 +2,11 @@ import React from 'react';
 import { addGlobalFill } from 'foremanReact/components/common/Fill/GlobalFill';
 import HostKebabItems from './components/HostExtentions/HostKebabItems';
 
+const OPENSCAP_KEBAB_WEIGHT = 400;
+
 addGlobalFill(
   'host-details-kebab',
   `openscap-kebab-items`,
   <HostKebabItems key="openscap-host-kebab" />,
-  400
+  OPENSCAP_KEBAB_WEIGHT
 );

data/webpack/index.js

@@ -2,10 +2,12 @@ import componentRegistry from 'foremanReact/components/componentRegistry';
 
 import RuleSeverity from './components/RuleSeverity';
 import OpenscapRemediationWizard from './components/OpenscapRemediationWizard';
+import LineChart from './components/LineChart';
 
 const components = [
   { name: 'RuleSeverity', type: RuleSeverity },
   { name: 'OpenscapRemediationWizard', type: OpenscapRemediationWizard },
+  { name: 'OpenscapLineChart', type: LineChart },
 ];
 
 components.forEach(component => {

data/webpack/test_setup.js

@@ -0,0 +1 @@
+import 'foremanJSTestSetup';

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: foreman_openscap
 version: !ruby/object:Gem::Version
-  version: 12.1.2
+  version: 13.0.1
 platform: ruby
 authors:
 - slukasik@redhat.com
@@ -40,7 +40,6 @@ files:
 - app/assets/javascripts/foreman_openscap/policy_dashboard.js
 - app/assets/javascripts/foreman_openscap/policy_edit.js
 - app/assets/javascripts/foreman_openscap/reports.js
-- app/assets/javascripts/foreman_openscap/scap_hosts_show.js
 - app/assets/stylesheets/foreman_openscap/policy.css
 - app/assets/stylesheets/foreman_openscap/policy_dashboard.css
 - app/assets/stylesheets/foreman_openscap/reports.css
@@ -363,15 +362,14 @@ files:
 - test/unit/services/lookup_key_overrider_test.rb
 - test/unit/services/report_dashboard/data_test.rb
 - test/unit/tailoring_file_test.rb
-- webpack/components/ConfirmModal.js
-- webpack/components/ConfirmModal.scss
 - webpack/components/EmptyState.js
 - webpack/components/HostExtentions/HostKebabItems.js
-- webpack/components/IndexLayout.js
 - webpack/components/IndexLayout.scss
-- webpack/components/IndexTable/IndexTableHelper.js
-- webpack/components/IndexTable/index.js
-- webpack/components/LinkButton.js
+- webpack/components/LineChart/LineChart.fixtures.js
+- webpack/components/LineChart/LineChart.scss
+- webpack/components/LineChart/LineChart.test.js
+- webpack/components/LineChart/LineChartHelpers.js
+- webpack/components/LineChart/index.js
 - webpack/components/OpenscapRemediationWizard/Footer.js
 - webpack/components/OpenscapRemediationWizard/OpenscapRemediationSelectors.js
 - webpack/components/OpenscapRemediationWizard/OpenscapRemediationWizardContext.js
@@ -395,18 +393,9 @@ files:
 - webpack/components/RuleSeverity/i_severity-med.svg
 - webpack/components/RuleSeverity/i_unknown.svg
 - webpack/components/RuleSeverity/index.js
-- webpack/components/withDeleteModal.js
-- webpack/components/withLoading.js
 - webpack/global_index.js
-- webpack/helpers/commonHelper.js
-- webpack/helpers/globalIdHelper.js
-- webpack/helpers/mutationHelper.js
-- webpack/helpers/pageParamsHelper.js
-- webpack/helpers/permissionsHelper.js
-- webpack/helpers/tableHelper.js
-- webpack/helpers/toastHelper.js
 - webpack/index.js
-- webpack/testHelper.js
+- webpack/test_setup.js
 homepage: https://github.com/theforeman/foreman_openscap
 licenses:
 - GPL-3.0
@@ -425,7 +414,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.10
+rubygems_version: 4.0.16
 specification_version: 4
 summary: Foreman plug-in for displaying OpenSCAP audit reports
 test_files:

data/app/assets/javascripts/foreman_openscap/scap_hosts_show.js

@@ -1,4 +0,0 @@
-$(function() {
-  // Not sure about this ugly hack.
-  $('.col-md-4 .stats-well').height($('.col-md-8 .stats-well').height());
-});

data/webpack/components/ConfirmModal.js

@@ -1,66 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal, Button, ModalVariant, Spinner } from '@patternfly/react-core';
-
-import { translate as __ } from 'foremanReact/common/I18n';
-
-import './ConfirmModal.scss';
-
-const ConfirmModal = props => {
-  const [callMutation, { loading }] = props.prepareMutation();
-
-  const actions = [
-    <Button
-      ouiaId={`oscap-conf-modal-${props.record?.id}-confirm`}
-      key="confirm"
-      variant="primary"
-      onClick={() => props.onConfirm(callMutation, props.record.id)}
-      isDisabled={loading}
-    >
-      {__('Confirm')}
-    </Button>,
-    <Button
-      ouiaId={`oscap-conf-modal-${props.record?.id}-cancel`}
-      key="cancel"
-      variant="link"
-      onClick={event => props.onClose()}
-      isDisabled={loading}
-    >
-      {__('Cancel')}
-    </Button>,
-  ];
-
-  if (loading) {
-    actions.push(<Spinner key="spinner" size="lg" />);
-  }
-
-  return (
-    <Modal
-      ouiaId={`oscap-conf-modal-${props.record?.id}`}
-      variant={ModalVariant.medium}
-      title={props.title}
-      isOpen={props.isOpen}
-      className="foreman-modal"
-      showClose={false}
-      actions={actions}
-    >
-      {props.text}
-    </Modal>
-  );
-};
-
-ConfirmModal.propTypes = {
-  prepareMutation: PropTypes.func.isRequired,
-  onConfirm: PropTypes.func.isRequired,
-  record: PropTypes.object,
-  onClose: PropTypes.func.isRequired,
-  title: PropTypes.string.isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  text: PropTypes.string.isRequired,
-};
-
-ConfirmModal.defaultProps = {
-  record: null,
-};
-
-export default ConfirmModal;

data/webpack/components/ConfirmModal.scss

@@ -1,3 +0,0 @@
-.pf-v5-c-backdrop {
-  z-index: 1040;
-}

data/webpack/components/IndexLayout.js

@@ -1,44 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Helmet } from 'react-helmet';
-import ToastsList from 'foremanReact/components/ToastsList';
-import {
-  Grid,
-  GridItem,
-  TextContent,
-  Text,
-  TextVariants,
-} from '@patternfly/react-core';
-
-import './IndexLayout.scss';
-
-const IndexLayout = ({ pageTitle, children, contentWidthSpan }) => (
-  <React.Fragment>
-    <Helmet>
-      <title>{pageTitle}</title>
-    </Helmet>
-    <ToastsList />
-    <Grid className="scap-page-grid">
-      <GridItem span={12} className="pf-v5-u-pb-xl">
-        <TextContent>
-          <Text ouiaId="oscap-index-title" component={TextVariants.h1}>
-            {pageTitle}
-          </Text>
-        </TextContent>
-      </GridItem>
-      <GridItem span={contentWidthSpan}>{children}</GridItem>
-    </Grid>
-  </React.Fragment>
-);
-
-IndexLayout.propTypes = {
-  pageTitle: PropTypes.string.isRequired,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.object]).isRequired,
-  contentWidthSpan: PropTypes.number,
-};
-
-IndexLayout.defaultProps = {
-  contentWidthSpan: 12,
-};
-
-export default IndexLayout;

data/webpack/components/IndexTable/IndexTableHelper.js

@@ -1,6 +0,0 @@
-import { addSearch } from '../../helpers/pageParamsHelper';
-
-export const refreshPage = (history, params = {}) => {
-  const url = addSearch(history.location.pathname, params);
-  history.push(url);
-};

data/webpack/components/IndexTable/index.js

@@ -1,73 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  Table,
-  TableHeader,
-  TableBody,
-} from '@patternfly/react-table/deprecated';
-import { Flex, FlexItem } from '@patternfly/react-core';
-import Pagination from 'foremanReact/components/Pagination';
-import { refreshPage } from './IndexTableHelper';
-
-const IndexTable = ({
-  history,
-  pagination,
-  totalCount,
-  toolbarBtns,
-  ariaTableLabel,
-  ouiaTableId,
-  columns,
-  ...rest
-}) => {
-  const handlePerPageSelected = perPage => {
-    refreshPage(history, { page: 1, perPage });
-  };
-
-  const handlePageSelected = page => {
-    refreshPage(history, { ...pagination, page });
-  };
-
-  return (
-    <React.Fragment>
-      <Flex className="pf-v5-u-pt-md">
-        <FlexItem>{toolbarBtns}</FlexItem>
-        <FlexItem align={{ default: 'alignRight' }}>
-          <Pagination
-            itemCount={totalCount}
-            page={pagination.page}
-            perPage={pagination.perPage}
-            onSetPage={handlePageSelected}
-            onPerPageSelect={handlePerPageSelected}
-            variant="top"
-          />
-        </FlexItem>
-      </Flex>
-      <Table
-        ouiaId={ouiaTableId}
-        aria-label={ariaTableLabel}
-        cells={columns}
-        {...rest}
-        variant="compact"
-      >
-        <TableHeader />
-        <TableBody />
-      </Table>
-    </React.Fragment>
-  );
-};
-
-IndexTable.propTypes = {
-  history: PropTypes.object.isRequired,
-  pagination: PropTypes.object.isRequired,
-  toolbarBtns: PropTypes.node,
-  totalCount: PropTypes.number.isRequired,
-  ariaTableLabel: PropTypes.string.isRequired,
-  ouiaTableId: PropTypes.string.isRequired,
-  columns: PropTypes.array.isRequired,
-};
-
-IndexTable.defaultProps = {
-  toolbarBtns: null,
-};
-
-export default IndexTable;