Add packages count to sbom table list

trustification · May 14, 2024 · 267f4c2 · 267f4c2
1 parent d8591d2
commit 267f4c2
Show file tree

Hide file tree

Showing 23 changed files with 87 additions and 69 deletions.
diff --git a/client/src/app/api/rest.ts b/client/src/app/api/rest.ts
@@ -137,10 +137,11 @@ export const downloadSBOMById = (id: number | string) => {
   });
 };
 
-export const getPackagesBySbomId = (id: string | number) => {
-  return axios
-    .get<Package[]>(`${SBOMS}/${id}/packages`)
-    .then((response) => response.data);
+export const getPackagesBySbomId = (
+  id: number | string,
+  params: HubRequestParams = {}
+) => {
+  return getHubPaginatedResult<Package>(`${SBOMS}/${id}/packages`, params);
 };
 
 export const getVulnerabilitiesBySbomId = (id: string | number) => {

diff --git a/client/src/app/common/types.ts b/client/src/app/common/types.ts
@@ -5,5 +5,5 @@ export interface Page {
 
 export interface SortBy {
   index: number;
-  direction: 'asc' | 'desc';
+  direction: "asc" | "desc";
 }
diff --git a/client/src/app/hooks/table-controls/active-item/useActiveItemState.ts b/client/src/app/hooks/table-controls/active-item/useActiveItemState.ts
@@ -72,11 +72,11 @@ export const useActiveItemState = <
           deserialize: ({ activeItem }) => parseMaybeNumericString(activeItem),
         }
       : persistTo === "localStorage" || persistTo === "sessionStorage"
-      ? {
-          persistTo,
-          key: "activeItem",
-        }
-      : { persistTo }),
+        ? {
+            persistTo,
+            key: "activeItem",
+          }
+        : { persistTo }),
   });
   return { activeItemId, setActiveItemId };
 };
diff --git a/client/src/app/hooks/table-controls/expansion/useExpansionState.ts b/client/src/app/hooks/table-controls/expansion/useExpansionState.ts
@@ -107,11 +107,11 @@ export const useExpansionState = <
           },
         }
       : persistTo === "localStorage" || persistTo === "sessionStorage"
-      ? {
-          persistTo,
-          key: "expandedCells",
-        }
-      : { persistTo }),
+        ? {
+            persistTo,
+            key: "expandedCells",
+          }
+        : { persistTo }),
   });
   return { expandedCells, setExpandedCells };
 };
diff --git a/client/src/app/hooks/table-controls/filtering/useFilterState.ts b/client/src/app/hooks/table-controls/filtering/useFilterState.ts
@@ -103,8 +103,8 @@ export const useFilterState = <
           deserialize: deserializeFilterUrlParams,
         }
       : persistTo === "localStorage" || persistTo === "sessionStorage"
-      ? { persistTo, key: "filters" }
-      : { persistTo }),
+        ? { persistTo, key: "filters" }
+        : { persistTo }),
   });
   return { filterValues, setFilterValues };
 };
diff --git a/client/src/app/hooks/table-controls/pagination/usePaginationState.ts b/client/src/app/hooks/table-controls/pagination/usePaginationState.ts
@@ -112,11 +112,11 @@ export const usePaginationState = <
           },
         }
       : persistTo === "localStorage" || persistTo === "sessionStorage"
-      ? {
-          persistTo,
-          key: "pagination",
-        }
-      : { persistTo }),
+        ? {
+            persistTo,
+            key: "pagination",
+          }
+        : { persistTo }),
   });
   const { pageNumber, itemsPerPage } = paginationState || defaultValue;
   const setPageNumber = (num: number) =>

diff --git a/client/src/app/hooks/table-controls/sorting/useSortState.ts b/client/src/app/hooks/table-controls/sorting/useSortState.ts
@@ -107,11 +107,11 @@ export const useSortState = <
               : null,
         }
       : persistTo === "localStorage" || persistTo === "sessionStorage"
-      ? {
-          persistTo,
-          key: "sort",
-        }
-      : { persistTo }),
+        ? {
+            persistTo,
+            key: "sort",
+          }
+        : { persistTo }),
   });
   return { activeSort, setActiveSort };
 };
diff --git a/client/src/app/hooks/table-controls/types.ts b/client/src/app/hooks/table-controls/types.ts
@@ -1,5 +1,8 @@
 import { TableProps, TdProps, ThProps, TrProps } from "@patternfly/react-table";
-import { ISelectionStateArgs, useSelectionState } from "@app/hooks/useSelectionState";
+import {
+  ISelectionStateArgs,
+  useSelectionState,
+} from "@app/hooks/useSelectionState";
 import { DisallowCharacters, DiscriminatedArgs } from "@app/utils/type-utils";
 import {
   IFilterStateArgs,

diff --git a/client/src/app/pages/advisory-details/vulnerabilities.tsx b/client/src/app/pages/advisory-details/vulnerabilities.tsx
@@ -16,7 +16,7 @@ import {
   Tr,
 } from "@patternfly/react-table";
 
-import { Severity, VulnerabilityBase } from "@app/api/models";
+import { VulnerabilityBase } from "@app/api/models";
 import { FilterToolbar, FilterType } from "@app/components/FilterToolbar";
 import { SimplePagination } from "@app/components/SimplePagination";
 import {
@@ -25,7 +25,6 @@ import {
   TableRowContentWithControls,
 } from "@app/components/TableControls";
 import { useLocalTableControls } from "@app/hooks/table-controls";
-import { RENDER_DATE_FORMAT } from "@app/Constants";
 import { SeverityShieldAndText } from "@app/components/SeverityShieldAndText";
 
 interface VulnerabilitiesProps {

diff --git a/client/src/app/pages/advisory-list/components/VulnerabilitiesGaleryCount.tsx b/client/src/app/pages/advisory-list/components/VulnerabilitiesGaleryCount.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { VulnerabilityBase, Severity } from "@app/api/models";
+import { Severity } from "@app/api/models";
 import { VulnerabilityGallery } from "@app/components/VulnerabilityGallery";
 
 type SeverityCount = { [key in Severity]: number };

diff --git a/client/src/app/pages/importer-list/components/importer-form.tsx b/client/src/app/pages/importer-list/components/importer-form.tsx
@@ -2,7 +2,7 @@ import React, { useContext } from "react";
 
 import { yupResolver } from "@hookform/resolvers/yup";
 import { AxiosError } from "axios";
-import { Control, Controller, useFieldArray, useForm } from "react-hook-form";
+import { useFieldArray, useForm } from "react-hook-form";
 import { array, boolean, number, object, string } from "yup";
 
 import {
@@ -15,8 +15,6 @@ import {
   FormGroup,
   FormSelect,
   FormSelectOption,
-  Level,
-  LevelItem,
   NumberInput,
   Popover,
   PopoverPosition,
@@ -358,6 +356,7 @@ export const ImporterForm: React.FC<IImporterFormProps> = ({
                   fieldId="periodUnit"
                   renderInput={({ field: { value, onChange, onBlur } }) => (
                     <FormSelect
+                      aria-label="period-unit"
                       isRequired
                       onChange={onChange}
                       onBlur={onBlur}

diff --git a/client/src/app/pages/importer-list/importer-list.tsx b/client/src/app/pages/importer-list/importer-list.tsx
@@ -54,7 +54,7 @@ import { useLocalTableControls } from "@app/hooks/table-controls";
 import { ImporterForm } from "./components/importer-form";
 import { ImporterStatusIcon } from "./components/importer-status-icon";
 import dayjs from "dayjs";
-import { RENDER_DATETIME_FORMAT, RENDER_DATE_FORMAT } from "@app/Constants";
+import { RENDER_DATETIME_FORMAT } from "@app/Constants";
 
 export const ImporterList: React.FC = () => {
   const { pushNotification } = React.useContext(NotificationsContext);
@@ -117,7 +117,6 @@ export const ImporterList: React.FC = () => {
       name: item.name,
     }),
     isPaginationEnabled: true,
-    initialItemsPerPage: 10,
     isExpansionEnabled: true,
     expandableVariant: "single",
     isFilterEnabled: true,

diff --git a/client/src/app/pages/package-details/package-details.tsx b/client/src/app/pages/package-details/package-details.tsx
@@ -15,7 +15,6 @@ import { PathParam, useRouteParams } from "@app/Routes";
 import { useFetchPackageById } from "@app/queries/packages";
 
 import { LoadingWrapper } from "@app/components/LoadingWrapper";
-import { RelatedCVEs } from "./related-cves";
 import { RelatedSBOMs } from "./related-sboms";
 
 export const PackageDetails: React.FC = () => {

diff --git a/client/src/app/pages/package-list/package-list.tsx b/client/src/app/pages/package-list/package-list.tsx
@@ -43,9 +43,9 @@ export const PackageList: React.FC = () => {
       qualifiers: "Qualifiers",
       cve: "CVEs",
     },
+    isPaginationEnabled: true,
     isSortEnabled: true,
     sortableColumns: [],
-    initialItemsPerPage: 10,
     isFilterEnabled: true,
     filterCategories: [
       {

diff --git a/client/src/app/pages/sbom-details/overview.tsx b/client/src/app/pages/sbom-details/overview.tsx
@@ -36,7 +36,9 @@ export const Overview: React.FC<InfoProps> = ({ sbom }) => {
         >
           <DescriptionListGroup>
             <DescriptionListTerm>Name</DescriptionListTerm>
-            <DescriptionListDescription>{sbom.title}</DescriptionListDescription>
+            <DescriptionListDescription>
+              {sbom.title}
+            </DescriptionListDescription>
           </DescriptionListGroup>
           <DescriptionListGroup>
             <DescriptionListTerm>Version</DescriptionListTerm>

diff --git a/client/src/app/pages/sbom-details/packages.tsx b/client/src/app/pages/sbom-details/packages.tsx
@@ -32,7 +32,11 @@ interface PackagesProps {
 }
 
 export const Packages: React.FC<PackagesProps> = ({ sbomId }) => {
-  const { packages, isFetching, fetchError } = useFetchPackagesBySbomId(sbomId);
+  const {
+    result: { data: packages },
+    isFetching,
+    fetchError,
+  } = useFetchPackagesBySbomId(sbomId);
 
   const tableControls = useLocalTableControls({
     tableName: "packages-table",

diff --git a/client/src/app/pages/sbom-list/components/packages-count.tsx b/client/src/app/pages/sbom-list/components/packages-count.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+import { useFetchPackagesBySbomId } from "@app/queries/sboms";
+
+export interface IPackagesCountProps {
+  sbomId: string | number;
+}
+
+export const PackagesCount: React.FC<IPackagesCountProps> = ({ sbomId }) => {
+  const {
+    result: { total },
+  } = useFetchPackagesBySbomId(sbomId, {
+    page: { pageNumber: 1, itemsPerPage: 1 },
+  });
+
+  return <>{total}</>;
+};
diff --git a/client/src/app/pages/sbom-list/sbom-list.tsx b/client/src/app/pages/sbom-list/sbom-list.tsx
@@ -4,7 +4,6 @@ import { NavLink } from "react-router-dom";
 import dayjs from "dayjs";
 
 import {
-  Button,
   PageSection,
   PageSectionVariants,
   Text,
@@ -13,14 +12,12 @@ import {
   ToolbarContent,
   ToolbarItem,
 } from "@patternfly/react-core";
-import DownloadIcon from "@patternfly/react-icons/dist/esm/icons/download-icon";
 import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 
 import {
   RENDER_DATE_FORMAT,
   TablePersistenceKeyPrefixes,
 } from "@app/Constants";
-import { VulnerabilityGallery } from "@app/components/VulnerabilityGallery";
 import { FilterToolbar, FilterType } from "@app/components/FilterToolbar";
 import { SimplePagination } from "@app/components/SimplePagination";
 import {
@@ -35,6 +32,7 @@ import {
 import { useDownload } from "@app/hooks/useDownload";
 import { useSelectionState } from "@app/hooks/useSelectionState";
 import { useFetchSBOMs } from "@app/queries/sboms";
+import { PackagesCount } from "./components/packages-count";
 
 export const SbomList: React.FC = () => {
   const tableControlState = useTableControlState({
@@ -48,6 +46,7 @@ export const SbomList: React.FC = () => {
       packages: "Packages",
       vulnerabilities: "Vulnerabilities",
     },
+    isPaginationEnabled: true,
     isSortEnabled: true,
     sortableColumns: ["published"],
     initialItemsPerPage: 10,
@@ -179,10 +178,12 @@ export const SbomList: React.FC = () => {
                         {dayjs(item.published).format(RENDER_DATE_FORMAT)}
                       </Td>
                       <Td width={10} {...getTdProps({ columnKey: "packages" })}>
-                        {/* {item.related_packages.count} */}
-                        <p style={{ color: "red" }}>Count packages</p>
+                        <PackagesCount sbomId={item.id} />
                       </Td>
-                      <Td width={20} {...getTdProps({ columnKey: "vulnerabilities" })}>
+                      <Td
+                        width={20}
+                        {...getTdProps({ columnKey: "vulnerabilities" })}
+                      >
                         {/* <VulnerabilityGallery severities={item.related_cves} /> */}
                         <p style={{ color: "red" }}>issue-285</p>
                       </Td>

diff --git a/client/src/app/pages/vulnerability-details/related-advisories.tsx b/client/src/app/pages/vulnerability-details/related-advisories.tsx
@@ -6,7 +6,6 @@ import dayjs from "dayjs";
 import { RENDER_DATE_FORMAT } from "@app/Constants";
 import { AdvisoryBase } from "@app/api/models";
 import { FilterToolbar } from "@app/components/FilterToolbar";
-import { SeverityShieldAndText } from "@app/components/SeverityShieldAndText";
 import { SimplePagination } from "@app/components/SimplePagination";
 import {
   ConditionalTableBody,

diff --git a/client/src/app/pages/vulnerability-details/source.tsx b/client/src/app/pages/vulnerability-details/source.tsx
@@ -10,7 +10,8 @@ interface SourceProps {
 }
 
 export const Source: React.FC<SourceProps> = ({ cveId }) => {
-  const { source, isFetching, fetchError } = useFetchVulnerabilitySourceById(cveId);
+  const { source, isFetching, fetchError } =
+    useFetchVulnerabilitySourceById(cveId);
 
   return (
     <>

diff --git a/client/src/app/pages/vulnerability-details/vulnerability-details.tsx b/client/src/app/pages/vulnerability-details/vulnerability-details.tsx
@@ -20,7 +20,6 @@ import {
   Tabs,
   Text,
   TextContent,
-  Truncate,
 } from "@patternfly/react-core";
 import DownloadIcon from "@patternfly/react-icons/dist/esm/icons/download-icon";
 
@@ -30,13 +29,10 @@ import { RENDER_DATE_FORMAT } from "@app/Constants";
 import { PathParam, useRouteParams } from "@app/Routes";
 
 import { LoadingWrapper } from "@app/components/LoadingWrapper";
-import { SeverityShieldAndText } from "@app/components/SeverityShieldAndText";
 import { useDownload } from "@app/hooks/useDownload";
 import { useFetchVulnerabilityById } from "@app/queries/vulnerabilities";
 
 import { RelatedAdvisories } from "./related-advisories";
-import { RelatedSBOMs } from "./related-sboms";
-import { Source } from "./source";
 
 export const CveDetails: React.FC = () => {
   const vulnerabilityId = useRouteParams(PathParam.VULNERABILITY_ID);

diff --git a/client/src/app/pages/vulnerability-list/vulnerability-list.tsx b/client/src/app/pages/vulnerability-list/vulnerability-list.tsx
@@ -1,8 +1,6 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
 
-import dayjs from "dayjs";
-
 import {
   PageSection,
   PageSectionVariants,
@@ -14,12 +12,8 @@ import {
 } from "@patternfly/react-core";
 import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 
-import {
-  RENDER_DATE_FORMAT,
-  TablePersistenceKeyPrefixes,
-} from "@app/Constants";
+import { TablePersistenceKeyPrefixes } from "@app/Constants";
 import { FilterToolbar, FilterType } from "@app/components/FilterToolbar";
-import { SeverityShieldAndText } from "@app/components/SeverityShieldAndText";
 import { SimplePagination } from "@app/components/SimplePagination";
 import {
   ConditionalTableBody,
@@ -30,7 +24,6 @@ import {
   useTableControlProps,
   useTableControlState,
 } from "@app/hooks/table-controls";
-import { useDownload } from "@app/hooks/useDownload";
 import { useSelectionState } from "@app/hooks/useSelectionState";
 import { useFetchVulnerabilities } from "@app/queries/vulnerabilities";
 
@@ -46,9 +39,9 @@ export const VulnerabilityList: React.FC = () => {
       modified: "Modified",
       relatedSBOMs: "Related SBOMs",
     },
+    isPaginationEnabled: true,
     isSortEnabled: true,
     sortableColumns: ["severity", "published", "modified"],
-    initialItemsPerPage: 10,
     isFilterEnabled: true,
     filterCategories: [
       {