fleet/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnOSVersions/SoftwareVulnOSVersions.tsx

/** software/vulnerabilities/:cve > Vulnerable OS section */

import React, { useCallback, useMemo } from "react";

import { InjectedRouter } from "react-router";

import PATHS from "router/paths";
import { IVulnerabilityResponse } from "services/entities/vulnerabilities";
import { buildQueryStringFromParams } from "utilities/url";
import Card from "components/Card";
import TableContainer from "components/TableContainer";
import TableCount from "components/TableContainer/TableCount";

import generateColumnConfigs from "./SwVulnOSTableConfig";

const baseClass = "software-vuln-os-versions";

interface ISoftwareVulnOSVersions {
  osVersions: IVulnerabilityResponse["os_versions"];
  isPremiumTier: boolean;
  router: InjectedRouter;
  teamIdForApi?: number;
}

const SoftwareVulnOSVersions = ({
  osVersions,
  isPremiumTier,
  router,
  teamIdForApi,
}: ISoftwareVulnOSVersions) => {
  const columnConfigs = useMemo(
    () => generateColumnConfigs(isPremiumTier, router, teamIdForApi),
    [isPremiumTier, router, teamIdForApi]
  );

  const onSelectSingleRow = useCallback(
    ({ original: { os_version_id } }: any) => {
      if (!os_version_id) {
        return;
      }

      router.push(
        `${PATHS.MANAGE_HOSTS}?${buildQueryStringFromParams({
          os_version_id,
          team_id: teamIdForApi,
        })}`
      );
    },
    [teamIdForApi, router]
  );

  const renderVulnerableOSCount = useCallback(() => {
    return <TableCount name="items" count={osVersions?.length} />;
  }, [osVersions?.length]);

  const renderVulnerableOSTable = () => {
    return (
      <TableContainer
        columnConfigs={columnConfigs}
        data={osVersions}
        defaultSortHeader="hosts"
        defaultSortDirection="desc"
        isClientSidePagination
        isLoading={false} // not rendered otherwise
        emptyComponent={() => <></>}
        showMarkAllPages={false}
        isAllPagesSelected={false}
        disableMultiRowSelect
        onSelectSingleRow={onSelectSingleRow}
        renderCount={renderVulnerableOSCount}
      />
    );
  };

  return (
    <Card borderRadiusSize="xxlarge" includeShadow className={baseClass}>
      <h2>Vulnerable OS</h2>
      {renderVulnerableOSTable()}
    </Card>
  );
};

export default SoftwareVulnOSVersions;