Wizard: Add release lifecycle charts

This adds information about release lifecycle to the Image Output step of the Wizard. Summary is also shown on the Review step.

src/Components/CreateImageWizard/ImageCreator.js

@@ -25,6 +25,7 @@ import {
 import RadioWithPopover from './formComponents/RadioWithPopover';
 import Registration from './formComponents/Registration';
 import RegistrationKeyInformation from './formComponents/RegistrationKeyInformation';
+import ReleaseLifecycle from './formComponents/ReleaseLifecycle';
 import Repositories from './formComponents/Repositories';
 import Review from './formComponents/ReviewStep';
 import TargetEnvironment from './formComponents/TargetEnvironment';
@@ -76,6 +77,7 @@ const ImageCreator = ({
         'gallery-layout': GalleryLayout,
         'oscap-profile-selector': Oscap,
         'image-output-arch-select': ArchSelect,
+        'image-output-release-lifecycle': ReleaseLifecycle,
         registration: Registration,
         ...customComponentMapper,
       }}

src/Components/CreateImageWizard/formComponents/ReleaseLifecycle.tsx

@@ -0,0 +1,168 @@
+import React, { useContext } from 'react';
+
+import { useFormApi } from '@data-driven-forms/react-form-renderer';
+import WizardContext from '@data-driven-forms/react-form-renderer/wizard-context';
+import {
+  Button,
+  ExpandableSection,
+  FormGroup,
+  Panel,
+  PanelMain,
+  Text,
+} from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { Chart, registerables } from 'chart.js';
+import { Bar } from 'react-chartjs-2';
+
+import {
+  RELEASES,
+  RHEL_8,
+  RHEL_8_FULL_SUPPORT,
+  RHEL_8_MAINTENANCE_SUPPORT,
+  RHEL_9,
+  RHEL_9_FULL_SUPPORT,
+  RHEL_9_MAINTENANCE_SUPPORT,
+} from '../../../constants';
+import 'chartjs-adapter-moment';
+import { toMonthAndYear } from '../../../Utilities/time';
+
+Chart.register(...registerables);
+
+export const chartMajorVersionCfg = {
+  data: {
+    labels: ['RHEL 9', 'RHEL 8'],
+    datasets: [
+      {
+        label: 'Full support',
+        backgroundColor: '#0066CC',
+        data: [
+          {
+            x: RHEL_9_FULL_SUPPORT,
+            y: 'RHEL 9',
+          },
+          {
+            x: RHEL_8_FULL_SUPPORT,
+            y: 'RHEL 8',
+          },
+        ],
+      },
+      {
+        label: 'Maintenance support',
+        backgroundColor: '#8BC1F7',
+        data: [
+          {
+            x: RHEL_9_MAINTENANCE_SUPPORT,
+            y: 'RHEL 9',
+          },
+          {
+            x: RHEL_8_MAINTENANCE_SUPPORT,
+            y: 'RHEL 8',
+          },
+        ],
+      },
+    ],
+  },
+  options: {
+    indexAxis: 'y' as const,
+    scales: {
+      x: {
+        type: 'time' as const,
+        time: {
+          unit: 'year' as const,
+        },
+        min: '2019-01-01' as const,
+        max: '2033-01-01' as const,
+      },
+      y: {
+        stacked: true,
+      },
+    },
+    responsive: true,
+    maintainAspectRatio: true,
+    aspectRatio: 1 | 5,
+    plugins: {
+      tooltip: {
+        enabled: false,
+      },
+      legend: {
+        position: 'bottom' as const,
+      },
+    },
+  },
+};
+
+const MajorReleasesLifecyclesChart = () => {
+  return (
+    <Panel>
+      <PanelMain maxHeight="10rem">
+        <Bar
+          data-testid="release-lifecycle-chart"
+          options={chartMajorVersionCfg.options}
+          data={chartMajorVersionCfg.data}
+        />
+      </PanelMain>
+    </Panel>
+  );
+};
+
+const ReleaseLifecycle = () => {
+  const { getState } = useFormApi();
+  const { currentStep } = useContext(WizardContext);
+  const release = getState().values.release;
+  const [isExpanded, setIsExpanded] = React.useState(true);
+
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  if (release === RHEL_8) {
+    if (currentStep.name === 'image-output') {
+      return (
+        <ExpandableSection
+          toggleText={
+            isExpanded
+              ? 'Hide information about release lifecycle'
+              : 'Show information about release lifecycle'
+          }
+          onToggle={onToggle}
+          isExpanded={isExpanded}
+          isIndented
+        >
+          <FormGroup label="Release lifecycle">
+            <MajorReleasesLifecyclesChart />
+          </FormGroup>
+          <br />
+          <Button
+            component="a"
+            target="_blank"
+            variant="link"
+            icon={<ExternalLinkAltIcon />}
+            iconPosition="right"
+            isInline
+            href={'https://access.redhat.com/support/policy/updates/errata'}
+          >
+            View Red Hat Enterprise Linux Life Cycle dates
+          </Button>
+        </ExpandableSection>
+      );
+    } else if (currentStep.name === 'review') {
+      return (
+        <>
+          <Text className="pf-v5-u-font-size-sm">
+            {RELEASES.get(release)} will be supported through{' '}
+            {toMonthAndYear(RHEL_8_FULL_SUPPORT[0])}, with optional ELS support
+            through {toMonthAndYear(RHEL_8_MAINTENANCE_SUPPORT[0])}. Consider
+            building an image with {RELEASES.get(RHEL_9)} to extend the support
+            period.
+          </Text>
+          <FormGroup label="Release lifecycle">
+            <MajorReleasesLifecyclesChart />
+          </FormGroup>
+          <br />
+        </>
+      );
+    }
+  }
+};
+
+export default ReleaseLifecycle;

src/Components/CreateImageWizard/formComponents/ReviewStepTextLists.js

@@ -19,6 +19,7 @@ import PropTypes from 'prop-types';
 
 import ActivationKeyInformation from './ActivationKeyInformation';
 import { AwsAccountId } from './AwsAccountId';
+import ReleaseLifecycle from './ReleaseLifecycle';
 import {
   FSReviewTable,
   PackagesTable,
@@ -44,6 +45,7 @@ export const ImageOutputList = () => {
   const { getState } = useFormApi();
   return (
     <TextContent>
+      <ReleaseLifecycle />
       <TextList component={TextListVariants.dl}>
         <TextListItem
           component={TextListItemVariants.dt}

src/Components/CreateImageWizard/steps/imageOutput.js

@@ -43,6 +43,11 @@ const imageOutputStep = {
         },
       ],
     },
+    {
+      component: 'image-output-release-lifecycle',
+      label: 'Release lifecycle',
+      name: 'release-lifecycle',
+    },
     {
       component: 'image-output-arch-select',
       label: 'Architecture',

src/Utilities/time.js

@@ -38,3 +38,12 @@ export const computeHoursToExpiration = (imageCreatedAt) => {
     return 0;
   }
 };
+
+export const toMonthAndYear = (dateString) => {
+  const options = {
+    year: 'numeric',
+    month: 'long',
+  };
+  const date = new Date(dateString);
+  return date.toLocaleDateString('en-US', options);
+};

src/constants.js

@@ -21,6 +21,11 @@ export const RELEASES = new Map([
   [CENTOS_8, 'CentOS Stream 8'],
 ]);
 
+export const RHEL_9_FULL_SUPPORT = ['2022-05-18', '2027-05-31'];
+export const RHEL_8_FULL_SUPPORT = ['2019-05-07', '2024-05-31'];
+export const RHEL_9_MAINTENANCE_SUPPORT = ['2027-05-31', '2032-05-31'];
+export const RHEL_8_MAINTENANCE_SUPPORT = ['2024-05-31', '2029-05-31'];
+
 export const ARCHS = [X86_64, AARCH64];
 
 export const DEFAULT_AWS_REGION = 'us-east-1';