vulnerability-table.tsx

import React from "react";
import { NavLink } from "react-router-dom";

import {
  Table,
  TableText,
  Tbody,
  Td,
  Th,
  Thead,
  Tr,
} from "@patternfly/react-table";

import { extendedSeverityFromSeverity } from "@app/api/models";
import { SeverityShieldAndText } from "@app/components/SeverityShieldAndText";
import { SimplePagination } from "@app/components/SimplePagination";
import {
  ConditionalTableBody,
  TableHeaderContentWithControls,
  TableRowContentWithControls,
} from "@app/components/TableControls";
import { VulnerabilityDescription } from "@app/components/VulnerabilityDescription";
import { formatDate } from "@app/utils/utils";

import { TdWithFocusStatus } from "@app/components/TdWithFocusStatus";
import { SbomsCount } from "./components/SbomsCount";
import { VulnerabilitySearchContext } from "./vulnerability-context";

export const VulnerabilityTable: React.FC = () => {
  const { isFetching, fetchError, totalItemCount, tableControls } =
    React.useContext(VulnerabilitySearchContext);

  const {
    numRenderedColumns,
    currentPageItems,
    propHelpers: {
      paginationProps,
      tableProps,
      getThProps,
      getTrProps,
      getTdProps,
    },
  } = tableControls;

  return (
    <>
      <Table {...tableProps} aria-label="Vulnerability table">
        <Thead>
          <Tr>
            <TableHeaderContentWithControls {...tableControls}>
              <Th {...getThProps({ columnKey: "identifier" })} />
              <Th {...getThProps({ columnKey: "title" })} />
              <Th
                {...getThProps({ columnKey: "severity" })}
                info={{
                  tooltip:
                    "The Common Vulnerability Scoring System measuring the severity of security flaws.",
                }}
              />
              <Th {...getThProps({ columnKey: "published" })} />
              <Th {...getThProps({ columnKey: "sboms" })} />
            </TableHeaderContentWithControls>
          </Tr>
        </Thead>
        <ConditionalTableBody
          isLoading={isFetching}
          isError={!!fetchError}
          isNoData={totalItemCount === 0}
          numRenderedColumns={numRenderedColumns}
        >
          {currentPageItems.map((item, rowIndex) => {
            return (
              <Tbody key={item.identifier}>
                <Tr {...getTrProps({ item })}>
                  <TableRowContentWithControls
                    {...tableControls}
                    item={item}
                    rowIndex={rowIndex}
                  >
                    <Td
                      width={15}
                      modifier="breakWord"
                      {...getTdProps({
                        columnKey: "identifier",
                        item: item,
                        rowIndex,
                      })}
                    >
                      <NavLink to={`/vulnerabilities/${item.identifier}`}>
                        {item.identifier}
                      </NavLink>
                    </Td>
                    <TdWithFocusStatus>
                      {(isFocused, setIsFocused) => (
                        <Td
                          width={45}
                          modifier="truncate"
                          onFocus={() => setIsFocused(true)}
                          onBlur={() => setIsFocused(false)}
                          tabIndex={0}
                          {...getTdProps({ columnKey: "title" })}
                        >
                          <TableText
                            focused={isFocused}
                            wrapModifier="truncate"
                          >
                            <VulnerabilityDescription vulnerability={item} />
                          </TableText>
                        </Td>
                      )}
                    </TdWithFocusStatus>
                    <Td width={10} {...getTdProps({ columnKey: "severity" })}>
                      <SeverityShieldAndText
                        value={extendedSeverityFromSeverity(
                          item.average_severity,
                        )}
                        score={item.average_score}
                        showLabel
                        showScore
                      />
                    </Td>
                    <Td width={10} {...getTdProps({ columnKey: "published" })}>
                      {formatDate(item.published)}
                    </Td>
                    <Td
                      width={10}
                      {...getTdProps({
                        columnKey: "sboms",
                        item: item,
                        rowIndex,
                      })}
                    >
                      <SbomsCount vulnerabilityId={item.identifier} />
                    </Td>
                  </TableRowContentWithControls>
                </Tr>
              </Tbody>
            );
          })}
        </ConditionalTableBody>
      </Table>
      <SimplePagination
        idPrefix="vulnerability-table"
        isTop={false}
        paginationProps={paginationProps}
      />
    </>
  );
};