foreman_openscap 12.1.2 → 13.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7d8a562f0b445928773ee7d56fb55865ed3209a6d91b87c1ee8f39d414f1f772
-  data.tar.gz: 3b30bb1362e2ce2cc5105cd54f84cc643f809026c207f17b9118ea5357a73f4b
+  metadata.gz: f58e733e3dd18596f3c7e16c4015103df7729a629577735ccb67ed7912172c3f
+  data.tar.gz: c87d597fcae523beb2f8607bc4a88bb77ee2508ce127b19761f6030d6eefd3e5
 SHA512:
-  metadata.gz: 8dab6bff24fe0a6bf0a757f097f11dbcf598f55fa258bb973f018365ef42c574d579734caa9ec353ced159bb085adf77d49a3a45f1e5bfcfb19e7f219b5d7e00
-  data.tar.gz: 3733b383bd767e0e606f2625904eae09899ec39aea038a6bae0ba4a45b127b71a9e16f25a571f107039db67d3e7cb67402cdb7156de9f3cec9a7dfb0eec26d6c
+  metadata.gz: 5a7eb9acc11cac66fc65081c49bb6bfb4cbe58fbc5accadf5896ba19af130d9237a8825215c6a866d68252dc51f5cdd28516b072494f8c969960b47e63221e1f
+  data.tar.gz: c68a53b00952b47560b977ebb6a661c24a3ab7a064f8ddfc05ba4a1c26e97882796db01556bd57fa705a6637a1df4073ff083716ff7909a9c11d1a333a9ac735

data/app/assets/stylesheets/foreman_openscap/scap_breakdown_chart.css

@@ -1,3 +1,18 @@
+.compliance-host-policy-row {
+  display: flex;
+  flex-wrap: wrap;
+
+  > [class*='col-'] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .stats-well {
+    flex: 1 1 auto;
+    width: 100%;
+  }
+}
+
 .scap-breakdown-chart {
   margin: 25px auto 12px;
   width: 240px;

data/app/models/foreman_openscap/compliance_status.rb

@@ -43,11 +43,11 @@ module ForemanOpenscap
     def relevant?(options = {})
       # May fail host status during migration
       return false unless ForemanOpenscap::Asset.table_exists?
-      host.policies.present?
+      host.combined_policies.present?
     end
 
     def to_status(options = {})
-      latest_reports = host.policies.map { |p| host.last_report_for_policy p }.flatten
+      latest_reports = host.combined_policies.flat_map { |p| host.last_report_for_policy p }
       return INCOMPLIANT if latest_reports.any?(&:failed?)
       return INCONCLUSIVE if latest_reports.any?(&:othered?)
       COMPLIANT

data/app/views/compliance_hosts/show.html.erb

@@ -1,5 +1,7 @@
-<% javascript 'foreman_openscap/scap_hosts_show' %>
 <% stylesheet 'foreman_openscap/scap_breakdown_chart' %>
+<% content_for(:javascripts) do %>
+  <%= webpacked_plugins_js_for :foreman_openscap %>
+<% end %>
 
 <%= breadcrumbs(:resource_url => api_hosts_path,
                 :resource_filter => "is_compliance_host = true",
@@ -8,7 +10,7 @@
 <% title n_("%s compliance report by policy", "%s compliance reports by policy" , @host.combined_policies.length) % @host.to_label %>
 <% @host.combined_policies.each do |policy| %>
   <h2 class="center-block"><%= _('Policy %s') % policy %></h2>
-  <div class="row">
+  <div class="row compliance-host-policy-row">
     <% data = ForemanOpenscap::HostReportDashboard::Data.new(policy, @host) %>
     <% if data.has_data? %>
     <div class="col-md-4">
@@ -26,7 +28,7 @@
     <div class="col-md-8">
       <div class="stats-well">
         <h4 class="ca"><%= _("%s reports over time") % policy %></h4>
-        <%= react_component('LineChart', host_arf_reports_chart_data(policy.id)) %>
+        <%= react_component('OpenscapLineChart', host_arf_reports_chart_data(policy.id)) %>
       </div>
     </div>
     <% else %>

data/lib/foreman_openscap/engine.rb

@@ -40,7 +40,7 @@ module ForemanOpenscap
     initializer 'foreman_openscap.register_plugin', :before => :finisher_hook do |app|
       app.reloader.to_prepare do
         Foreman::Plugin.register :foreman_openscap do
-          requires_foreman '>= 3.17'
+          requires_foreman '>= 5.0'
           register_gettext
 
           apipie_documented_controllers ["#{ForemanOpenscap::Engine.root}/app/controllers/api/v2/compliance/*.rb"]

data/lib/foreman_openscap/version.rb

@@ -1,3 +1,3 @@
 module ForemanOpenscap
-  VERSION = "12.1.2".freeze
+  VERSION = "13.0.0".freeze
 end

data/test/unit/compliance_status_test.rb

@@ -69,4 +69,54 @@ class ComplianceStatusTest < ActiveSupport::TestCase
     status.host = host
     assert_equal 0, status.to_status
   end
+
+  test 'relevant? should be true for host policies' do
+    status = ForemanOpenscap::ComplianceStatus.new
+    host = FactoryBot.create(:compliance_host, :policies => [@policy_a])
+
+    status.host = host
+
+    assert status.relevant?
+  end
+
+  test 'relevant? should be true for hostgroup policies and to_status should use them' do
+    status = ForemanOpenscap::ComplianceStatus.new
+    host = FactoryBot.create(:host, :with_hostgroup)
+    othered_status = { :passed => 0, :failed => 0, :othered => 1 }.with_indifferent_access
+
+    assert_empty host.policies
+    @policy_a.hostgroup_ids = [host.hostgroup.id]
+    assert @policy_a.save
+
+    host.reload
+    assert_includes host.combined_policies, @policy_a
+
+    report = FactoryBot.create(:arf_report, :host_id => host.id, :status => othered_status)
+    FactoryBot.create(:policy_arf_report, :policy_id => @policy_a.id, :arf_report_id => report.id)
+
+    status.host = host
+
+    assert status.relevant?
+    assert_equal ForemanOpenscap::ComplianceStatus::INCONCLUSIVE, status.to_status
+  end
+
+  test 'relevant? should be true for inherited parent hostgroup policies' do
+    status = ForemanOpenscap::ComplianceStatus.new
+    host = FactoryBot.create(:host, :with_hostgroup)
+    hostgroup = host.hostgroup
+
+    hostgroup.parent = FactoryBot.create(:hostgroup)
+    hostgroup.save!
+
+    assert_empty host.policies
+    @policy_a.hostgroup_ids = [hostgroup.parent.id]
+    assert @policy_a.save
+
+    host.reload
+    assert_includes host.combined_policies, @policy_a
+
+    status.host = host
+
+    assert status.relevant?
+  end
 end

data/webpack/components/LineChart/LineChart.fixtures.js

@@ -0,0 +1,28 @@
+export const data = [
+  ['red', [5, 7, 9], '#AA4643'],
+  ['green', [2, 4, 6], '#89A54E'],
+];
+
+const dates = [1557014400000, 1559779200000, 1562457600000];
+
+export const timeseriesData = [
+  ['Passed', [5, 7, 9], '#3f9c35'],
+  ['Failed', [2, 4, 6], '#c9190b'],
+  ['Othered', [1, 0, 2], '#f0ab00'],
+  ['dates', dates, null],
+];
+
+export const emptyTimeseriesData = [
+  ['Passed', [0, 0, 0], '#3f9c35'],
+  ['Failed', [0, 0, 0], '#c9190b'],
+  ['Othered', [0, 0, 0], '#f0ab00'],
+  ['dates', dates, null],
+];
+
+/** Spread-column format used by some Foreman chart fixtures. */
+export const spreadTimeseriesData = [
+  ['Passed', 5, 7, 9, '#3f9c35'],
+  ['Failed', 2, 4, 6, '#c9190b'],
+  ['Othered', 1, 0, 2, '#f0ab00'],
+  ['dates', ...dates, null],
+];

data/webpack/components/LineChart/LineChart.scss

@@ -0,0 +1,7 @@
+.line-chart-container {
+  width: 100%;
+  height: 350px;
+  min-width: 200px;
+  min-height: 200px;
+  overflow: visible;
+}

data/webpack/components/LineChart/LineChart.test.js

@@ -0,0 +1,266 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import {
+  formatAxisTick,
+  formatTooltipTitle,
+  getXAxisTickValues,
+} from 'foremanReact/components/common/charts/helpers/LegendHelpers';
+
+import LineChart from './index';
+import {
+  data,
+  timeseriesData,
+  emptyTimeseriesData,
+  spreadTimeseriesData,
+} from './LineChart.fixtures';
+import {
+  processChartData,
+  hasChartData,
+  sanitizeChartDimension,
+  clampChartPadding,
+  getTimeseriesXDomain,
+  buildLineChartLegendData,
+  formatTooltipValue,
+} from './LineChartHelpers';
+
+jest.unmock('./');
+
+const chartSize = { width: 800, height: 350 };
+
+describe('hasChartData', () => {
+  it('returns false when all series values are zero', () => {
+    expect(hasChartData(emptyTimeseriesData, 'dates')).toBe(false);
+  });
+
+  it('returns true when any series has a non-zero value', () => {
+    expect(hasChartData(timeseriesData, 'dates')).toBe(true);
+  });
+});
+
+describe('chart layout helpers', () => {
+  it('sanitizes invalid chart dimensions', () => {
+    expect(sanitizeChartDimension(Infinity, 350)).toBe(350);
+    expect(sanitizeChartDimension(NaN, 800)).toBe(800);
+    expect(sanitizeChartDimension(500, 800)).toBe(500);
+  });
+
+  it('clamps padding when it exceeds chart size', () => {
+    const padding = clampChartPadding(
+      { top: 50, bottom: 125, left: 300, right: 170 },
+      400,
+      350
+    );
+
+    expect(padding.left + padding.right).toBeLessThan(400);
+    expect(padding.top + padding.bottom).toBeLessThan(350);
+  });
+
+  it('expands degenerate timeseries x domains', () => {
+    const singlePointData = [
+      ['Passed', [5], '#3f9c35'],
+      ['dates', [1557014400000], null],
+    ];
+    const chartData = processChartData(singlePointData, 'dates', 'timeseries');
+    const domain = getTimeseriesXDomain(chartData);
+
+    expect(domain).toHaveLength(2);
+    expect(domain[0].getTime()).toBeLessThan(domain[1].getTime());
+  });
+});
+
+describe('buildLineChartLegendData', () => {
+  it('uses backend series colors for visible legend symbols', () => {
+    const chartData = processChartData(timeseriesData, 'dates', 'timeseries');
+    const legendData = buildLineChartLegendData(chartData, new Set());
+
+    expect(legendData).toEqual([
+      {
+        childName: 'Passed',
+        name: 'Passed',
+        symbol: { type: 'square', fill: '#3f9c35' },
+      },
+      {
+        childName: 'Failed',
+        name: 'Failed',
+        symbol: { type: 'square', fill: '#c9190b' },
+      },
+      {
+        childName: 'Othered',
+        name: 'Othered',
+        symbol: { type: 'square', fill: '#f0ab00' },
+      },
+    ]);
+  });
+
+  it('uses eyeSlash symbol for hidden series', () => {
+    const chartData = processChartData(timeseriesData, 'dates', 'timeseries');
+    const legendData = buildLineChartLegendData(chartData, new Set(['Failed']));
+
+    expect(legendData[1]).toMatchObject({
+      childName: 'Failed',
+      name: 'Failed',
+      symbol: { type: 'eyeSlash' },
+    });
+    expect(legendData[1].symbol.fill).toBeDefined();
+  });
+});
+
+describe('formatTooltipValue', () => {
+  it('formats rule counts as whole numbers', () => {
+    expect(formatTooltipValue(10)).toBe('10');
+    expect(formatTooltipValue(10.0)).toBe('10');
+    expect(formatTooltipValue(0)).toBe('0');
+  });
+
+  it('rounds non-integer values', () => {
+    expect(formatTooltipValue(6.7)).toBe('7');
+  });
+});
+
+describe('LineChart', () => {
+  it('renders chart with regular data', () => {
+    const { container } = render(
+      <LineChart data={data} config="regular" size={chartSize} />
+    );
+
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('renders chart with timeseries data', () => {
+    const { container } = render(
+      <LineChart
+        data={timeseriesData}
+        config="timeseries"
+        xAxisDataLabel="dates"
+        size={chartSize}
+      />
+    );
+
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('renders chart with spread-column timeseries data', () => {
+    const { container } = render(
+      <LineChart
+        data={spreadTimeseriesData}
+        config="timeseries"
+        xAxisDataLabel="dates"
+        size={chartSize}
+      />
+    );
+
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('renders empty state when no data provided', () => {
+    const { container } = render(<LineChart data={null} />);
+
+    expect(screen.getByText('No data available')).toBeInTheDocument();
+    expect(
+      container.querySelector('.line-chart-container')
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders empty state when all values are zero', () => {
+    const { container } = render(
+      <LineChart
+        data={emptyTimeseriesData}
+        config="timeseries"
+        xAxisDataLabel="dates"
+      />
+    );
+
+    expect(screen.getByText('No data available')).toBeInTheDocument();
+    expect(
+      container.querySelector('.line-chart-container')
+    ).not.toBeInTheDocument();
+  });
+
+  it('displays custom noDataMsg', () => {
+    const customMsg = 'Custom no data message';
+    render(<LineChart data={null} noDataMsg={customMsg} />);
+
+    expect(screen.getByText(customMsg)).toBeInTheDocument();
+  });
+
+  it('renders legend items for each series', () => {
+    const { container } = render(
+      <LineChart
+        data={timeseriesData}
+        config="timeseries"
+        xAxisDataLabel="dates"
+        size={chartSize}
+      />
+    );
+
+    expect(container.textContent).toContain('Passed');
+    expect(container.textContent).toContain('Failed');
+    expect(container.textContent).toContain('Othered');
+  });
+
+  it('legend items are interactive (button role for accessibility)', () => {
+    render(
+      <LineChart
+        data={timeseriesData}
+        config="timeseries"
+        xAxisDataLabel="dates"
+        size={chartSize}
+      />
+    );
+
+    expect(
+      screen.getAllByRole('button', { name: 'Passed' }).length
+    ).toBeGreaterThan(0);
+  });
+
+  it('clicking legend toggles series visibility', () => {
+    const { container } = render(
+      <LineChart
+        data={timeseriesData}
+        config="timeseries"
+        xAxisDataLabel="dates"
+        size={chartSize}
+      />
+    );
+
+    const labels = container.querySelectorAll('.chart-legend-label');
+    expect(labels.length).toBeGreaterThan(0);
+
+    const firstLabel = labels[0];
+    expect(firstLabel).toHaveAttribute('data-hidden', 'false');
+
+    fireEvent.click(firstLabel);
+    expect(firstLabel).toHaveAttribute('data-hidden', 'true');
+
+    fireEvent.click(firstLabel);
+    expect(firstLabel).toHaveAttribute('data-hidden', 'false');
+  });
+
+  it('formats tooltip title for timeseries data points', () => {
+    const chartData = processChartData(timeseriesData, 'dates', 'timeseries');
+    const title = formatTooltipTitle(chartData[0].data[0]);
+
+    expect(title).toMatch(/\d/);
+    expect(title).toContain(',');
+  });
+
+  it('does not show duplicate x-axis labels when multiple data points fall within the same minute', () => {
+    const denseData = [
+      ['Passed', [1, 2, 3], '#3f9c35'],
+      ['Failed', [1, 2, 3], '#c9190b'],
+      ['dates', [1614449768000, 1614449769000, 1614451500000], null],
+    ];
+    const chartData = processChartData(denseData, 'dates', 'timeseries');
+    const tickValues = getXAxisTickValues(chartData, 6);
+
+    expect(tickValues).toBeDefined();
+    expect(tickValues.length).toBeGreaterThan(0);
+
+    const formattedLabels = tickValues.map(t => formatAxisTick(t));
+    const uniqueLabels = [...new Set(formattedLabels)];
+
+    expect(formattedLabels).toHaveLength(uniqueLabels.length);
+  });
+});

data/webpack/components/LineChart/LineChartHelpers.js

@@ -0,0 +1,190 @@
+/** Backend sends [label, values, color]; legacy Foreman charts used spread columns. */
+import { chart_color_black_500 as chartColorBlack500 } from '@patternfly/react-tokens';
+
+const getColumnValues = col => {
+  if (Array.isArray(col[1])) return col[1];
+
+  const values = col.slice(1);
+  const last = values[values.length - 1];
+
+  if (
+    values.length > 1 &&
+    (last == null || (typeof last === 'string' && last.startsWith('#')))
+  ) {
+    return values.slice(0, -1);
+  }
+
+  return values;
+};
+
+const getSeriesColor = col => {
+  if (typeof col[2] === 'string' && col[2].startsWith('#')) {
+    return col[2];
+  }
+
+  const last = col[col.length - 1];
+  if (typeof last === 'string' && last.startsWith('#')) {
+    return last;
+  }
+
+  return undefined;
+};
+
+const toMs = val => {
+  const n = Number(val);
+  return n >= 1e12 ? n : n * 1000;
+};
+
+/** Process raw backend data into chart series for PatternFly line charts. */
+export const processChartData = (data, xAxisDataLabel, config) => {
+  if (!data || data.length === 0) return null;
+
+  if (config === 'timeseries') {
+    const timeColumn = data.find(col => col[0] === xAxisDataLabel);
+    if (!timeColumn) return null;
+
+    const xValues = getColumnValues(timeColumn).map(t => toMs(t));
+
+    const series = data
+      .filter(col => col[0] !== xAxisDataLabel)
+      .map(col => {
+        const values = getColumnValues(col);
+        return {
+          name: col[0],
+          color: getSeriesColor(col),
+          data: values.map((value, index) => ({
+            x: new Date(xValues[index]),
+            y: value ?? 0,
+            name: col[0],
+          })),
+        };
+      });
+
+    return series.length > 0 ? series : null;
+  }
+
+  const series = data.map(col => {
+    const values = getColumnValues(col);
+    return {
+      name: col[0],
+      color: getSeriesColor(col),
+      data: values.map((value, index) => ({
+        x: index + 1,
+        y: value ?? 0,
+        name: col[0],
+      })),
+    };
+  });
+
+  return series.some(s => s.data.length > 0) ? series : null;
+};
+
+export const hasChartData = (data, xAxisDataLabel) => {
+  if (!data || data.length === 0) return false;
+
+  return data
+    .filter(col => col[0] !== xAxisDataLabel)
+    .some(col =>
+      getColumnValues(col).some(value => value !== 0 && value != null)
+    );
+};
+
+export const getYTickValues = (chartData, hiddenSeries = new Set()) => {
+  if (!chartData?.length) return undefined;
+
+  let maxY = 0;
+  chartData
+    .filter(chartSeries => !hiddenSeries.has(chartSeries.name))
+    .forEach(chartSeries => {
+      chartSeries.data.forEach(point => {
+        maxY = Math.max(maxY, point.y ?? 0);
+      });
+    });
+
+  if (maxY <= 0) return [0, 0.5, 1.0];
+
+  const step = Math.max(0.1, Math.ceil((maxY / 4) * 10) / 10);
+  return [0, 1, 2, 3, 4, 5].map(i => Math.round(i * step * 10) / 10);
+};
+
+/** Rule counts are whole numbers; avoid decimal formatting in tooltips. */
+export const formatTooltipValue = value => {
+  const num = Number(value);
+  if (!Number.isFinite(num)) return '';
+  if (Math.abs(num) >= 1e21) {
+    return num.toExponential(1);
+  }
+  return String(Math.round(num));
+};
+
+export const sanitizeChartDimension = (value, fallback) => {
+  const n = Number(value);
+  return Number.isFinite(n) && n > 0 ? n : fallback;
+};
+
+/** Prevent padding from exceeding chart size, which breaks Victory scale/range math. */
+export const clampChartPadding = (padding, width, height) => {
+  let { top = 0, bottom = 0, left = 0, right = 0 } = padding;
+
+  const horizontalTotal = left + right;
+  if (horizontalTotal >= width) {
+    const scale = (width * 0.9) / horizontalTotal;
+    left *= scale;
+    right *= scale;
+  }
+
+  const verticalTotal = top + bottom;
+  if (verticalTotal >= height) {
+    const scale = (height * 0.9) / verticalTotal;
+    top *= scale;
+    bottom *= scale;
+  }
+
+  return { top, bottom, left, right };
+};
+
+/** Expand degenerate time domains so Victory can draw valid line paths. */
+export const getTimeseriesXDomain = chartData => {
+  if (!chartData?.[0]?.data?.length) return undefined;
+
+  const times = chartData[0].data.map(point =>
+    point.x instanceof Date ? point.x.getTime() : new Date(point.x).getTime()
+  );
+  const min = Math.min(...times);
+  const max = Math.max(...times);
+
+  if (min === max) {
+    const offset = 12 * 60 * 60 * 1000;
+    return [new Date(min - offset), new Date(max + offset)];
+  }
+
+  return undefined;
+};
+
+/** Legend swatches must use backend series colors, not the default PF theme scale. */
+export const buildLineChartLegendData = (chartData, hiddenSeries) =>
+  chartData.map(series => {
+    const hidden = hiddenSeries.has(series.name);
+
+    if (hidden) {
+      return {
+        childName: series.name,
+        name: series.name,
+        symbol: {
+          type: 'eyeSlash',
+          fill: chartColorBlack500.var,
+        },
+      };
+    }
+
+    return {
+      childName: series.name,
+      name: series.name,
+      ...(series.color && {
+        symbol: {
+          type: 'square',
+          fill: series.color,
+        },
+      }),
+    };
+  });

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/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 => {

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: foreman_openscap
 version: !ruby/object:Gem::Version
-  version: 12.1.2
+  version: 13.0.0
 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
@@ -371,6 +370,11 @@ files:
 - webpack/components/IndexLayout.scss
 - webpack/components/IndexTable/IndexTableHelper.js
 - webpack/components/IndexTable/index.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/LinkButton.js
 - webpack/components/OpenscapRemediationWizard/Footer.js
 - webpack/components/OpenscapRemediationWizard/OpenscapRemediationSelectors.js

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