text: import { Stack, StackItem, Split, SplitItem, TextContent } from '@patternfly/react-core';
  import parseCvssScore from '@redhat-cloud-services/frontend-components-utilities/parseCvssScore';
  import propTypes from 'prop-types';
  import React from 'react';
  import { getImpactDetails } from '../../../Helpers/MiscHelper';
  import CvssVector from '../CvssVector/CvssVector';
  import messages from '../../../Messages';
  import SnippetWithHeaderAndPopover from '../CVEDetailsPageDescription/SnippetWithHeaderAndPopover';
  import { ExclamationTriangleIcon } from '@patternfly/react-icons';
  import { Table, TableBody, TableHeader } from '@patternfly/react-table';
  import { STATUS_OPTIONS } from '../../../Helpers/constants';
  import { injectIntl } from 'react-intl';
  import { Shield } from '@redhat-cloud-services/frontend-components/Shield';
  import Label from '../Snippets/Label';
  
  const CVEDetailsPageSidebar = ({ cveAttributes, intl }) => {
      const cveDetails = getImpactDetails(cveAttributes.impact || 'Unknown');
  
      const {
          business_risk: businessRisk,
          business_risk_justification: businessRiskJustification,
          status,
          status_justification: statusJustification,
          systems_status_detail: systemsStatusDetail,
          systems_status_divergent: systemsStatusDivergent
      } = cveAttributes;
  
      const detailRows =
          systemsStatusDetail &&
          Object.keys(systemsStatusDetail).map(item => [
              STATUS_OPTIONS.find(status => status.value === item.toString()).label,
              systemsStatusDetail[item].toString()
          ]);
  
      const brPopoverContent = (
          <Stack className="pf-u-p-xs">
              <StackItem>
                  <Label className="pf-u-mb-xs">
                      {intl.formatMessage(messages.justificationNote)}
                  </Label>
              </StackItem>
              <StackItem>{businessRiskJustification || '--'}</StackItem>
          </Stack>
      );
  
      const statusPopoverContent = (
          <Stack className="pf-u-p-xs">
              <StackItem>
                  <Label className="pf-u-mb-xs">
                      {intl.formatMessage(messages.cveStatus)}
                  </Label>
                  {status || '--'}
  
                  <Label className="pf-u-mb-xs pf-u-mt-sm">
                      {intl.formatMessage(messages.justificationNote)}
                  </Label>
                  {statusJustification || '--'}
              </StackItem>
              {systemsStatusDivergent > 0 && (
                  <StackItem>
                      <TextContent>
                          <hr className="pf-u-mt-sm pf-u-mb-sm" />
                      </TextContent>
                      <Label isLarge>
                          {intl.formatMessage(messages.cveDetailsPageSystemsWTCves)}
                      </Label>
                      <Table
                          aria-label="Status details"
                          gridBreakPoint=""
                          cells={[intl.formatMessage(messages.statusLabel), intl.formatMessage(messages.count)]}
                          rows={detailRows}
                          className="status-breakdown-table"
                          variant="compact"
                      >
                          <TableHeader />
                          <TableBody />
                      </Table>
                  </StackItem>
              )}
          </Stack>
      );
  
      return (
          <Stack hasGutter>
              <StackItem>
                  <Split hasGutter>
                      <SplitItem>
                          <SnippetWithHeaderAndPopover
                              title={intl.formatMessage(messages.businessRiskLabel)}
                              value={businessRisk}
                              content={brPopoverContent}
                          />
                      </SplitItem>
                      <SplitItem className="pf-u-ml-lg">
                          <SnippetWithHeaderAndPopover
                              title={intl.formatMessage(messages.statusLabel)}
                              content={statusPopoverContent}
                              value={
                                  <span>
                                      {systemsStatusDivergent > 0 && (
                                          <ExclamationTriangleIcon color={'var(--pf-global--primary-color--100)'} />
                                      )}{' '}
                                      {status}
                                  </span>
                              }
                          />
                      </SplitItem>
                  </Split>
              </StackItem>
  
              <StackItem>
                  <Label className="pf-u-mb-xs" isLarge>
                      {intl.formatMessage(messages.impact)}
                  </Label>
                  <span id="severity-shield" style={{ color: cveDetails.color }}>
                      <Shield impact={cveDetails.title} hasLabel/>
                  </span>
              </StackItem>
  
              <StackItem>
                  <CvssVector
                      cvss2_metrics={cveAttributes.cvss2_metrics}
                      cvss3_metrics={cveAttributes.cvss3_metrics}
                      score={parseCvssScore(cveAttributes.cvss2_score, cveAttributes.cvss3_score)}
                  />
              </StackItem>
          </Stack>
      );
  };
  
  CVEDetailsPageSidebar.propTypes = {
      cveAttributes: propTypes.any,
      intl: propTypes.any
  };
  
  export default injectIntl(CVEDetailsPageSidebar);
  