fleet/frontend/components/ProbabilityOfExploit/ProbabilityOfExploit.tsx

import React from "react";

import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
import { formatFloatAsPercentage } from "utilities/helpers";

import Icon from "components/Icon";
import TooltipWrapper from "components/TooltipWrapper";

const baseClass = "probability-of-exploit";

interface IProbabilityOfExploit {
  probabilityOfExploit?: number | null;
  cisaKnownExploit?: boolean | null;
  tooltipPosition?: "top" | "bottom" | "left" | "right";
}

const ProbabilityOfExploit = ({
  probabilityOfExploit,
  cisaKnownExploit,
  tooltipPosition = "top",
}: IProbabilityOfExploit): JSX.Element => {
  // Grey out if API returns null or undefined (but not 0)
  if (typeof probabilityOfExploit !== "number") {
    return (
      <span className={`${baseClass}__unknown`}>
        {DEFAULT_EMPTY_CELL_VALUE}
      </span>
    );
  }

  const renderExploitedIcon = () => {
    return (
      <TooltipWrapper
        tipContent={
          <span className="tooltip__tooltip-text">
            The vulnerability has been actively exploited in the <br />
            wild. This data is reported by the Cybersecurity <br />
            and Infrastructure Security Agency (CISA).
          </span>
        }
        position={tooltipPosition}
        underline={false}
        showArrow
        tipOffset={8}
      >
        <span className={`${baseClass} tooltip tooltip__tooltip-icon`}>
          <Icon name="error" size="small" color="status-error" />
        </span>
      </TooltipWrapper>
    );
  };

  return (
    <span className={baseClass}>
      {formatFloatAsPercentage(probabilityOfExploit)}
      {cisaKnownExploit && renderExploitedIcon()}
    </span>
  );
};

export default ProbabilityOfExploit;