Skip to content

Commit

Permalink
Prepare columns
Browse files Browse the repository at this point in the history
  • Loading branch information
@carlosthe19916
carlosthe19916 committed Oct 2, 2024
1 parent 6d137d5 commit 22e5e6a
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 220 deletions.
20 changes: 9 additions & 11 deletions client/src/app/pages/vulnerability-list/vulnerability-context.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,7 @@ import { useFetchVulnerabilities } from "@app/queries/vulnerabilities";
interface IVulnerabilitySearchContext {
tableControls: ITableControls<
VulnerabilitySummary,
"packages" | "identifier" | "title" | "severity" | "sboms" | "advisories",
never,
"" | "average_severity",
"packages" | "name" | "sboms" | "description" | "published" | "cvss", never, "" | "average_severity",
string
>;

Expand All @@ -44,12 +42,12 @@ export const VulnerabilitySearchProvider: React.FunctionComponent<
tableName: "vulnerability",
persistenceKeyPrefix: TablePersistenceKeyPrefixes.vulnerabilities,
columnNames: {
identifier: "Identifier",
title: "Title",
severity: "Severity",
name: "Name",
description: "Description",
cvss: "CVSS",
published: "Published",
packages: "Packages",
sboms: "SBOMs",
advisories: "Advisories",
},
isPaginationEnabled: true,
isSortEnabled: true,
Expand All @@ -64,8 +62,8 @@ export const VulnerabilitySearchProvider: React.FunctionComponent<
},
{
categoryKey: "average_severity",
title: "Severity",
placeholderText: "Severity",
title: "CVSS",
placeholderText: "CVSS",
type: FilterType.multiselect,
selectOptions: [
{ value: "none", label: "None" },
Expand All @@ -76,8 +74,7 @@ export const VulnerabilitySearchProvider: React.FunctionComponent<
],
},
],
isExpansionEnabled: true,
expandableVariant: "compound",
isExpansionEnabled: false,
});

const {
Expand All @@ -90,6 +87,7 @@ export const VulnerabilitySearchProvider: React.FunctionComponent<
hubSortFieldKeys: {
identifier: "identifier",
severity: "average_score",
published: "published",
},
})
);
Expand Down
227 changes: 18 additions & 209 deletions client/src/app/pages/vulnerability-list/vulnerability-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,8 @@ import { NavLink } from "react-router-dom";

import { AxiosError } from "axios";

import {
Card,
CardBody,
CardTitle,
DescriptionList,
DescriptionListDescription,
DescriptionListGroup,
DescriptionListTerm,
Grid,
GridItem,
} from "@patternfly/react-core";
import {
ActionsColumn,
ExpandableRowContent,
Table,
Tbody,
Td,
Expand All @@ -26,7 +14,6 @@ import {
} from "@patternfly/react-table";

import { VulnerabilitySummary } from "@app/client";
import { LoadingWrapper } from "@app/components/LoadingWrapper";
import { NotificationsContext } from "@app/components/NotificationsContext";
import { SeverityShieldAndText } from "@app/components/SeverityShieldAndText";
import { SimplePagination } from "@app/components/SimplePagination";
Expand All @@ -35,15 +22,9 @@ import {
TableHeaderContentWithControls,
TableRowContentWithControls,
} from "@app/components/TableControls";
import {
useDeleteVulnerabilityMutation,
useFetchVulnerabilityById,
} from "@app/queries/vulnerabilities";
import { useDeleteVulnerabilityMutation } from "@app/queries/vulnerabilities";
import { formatDate } from "@app/utils/utils";

import { AdvisoriesByVulnerability } from "../vulnerability-details/advisories-by-vulnerability";
import { PackagesByVulnerability } from "../vulnerability-details/packages-by-vulnerability";
import { SbomsByVulnerability } from "../vulnerability-details/sboms-by-vulnerability";
import { VulnerabilitySearchContext } from "./vulnerability-context";

export const VulnerabilityTable: React.FC = () => {
Expand Down Expand Up @@ -87,16 +68,16 @@ export const VulnerabilityTable: React.FC = () => {

return (
<>
<Table {...tableProps} aria-label="Vulnerability table">
<Table {...tableProps} aria-label="vulnerability-table">
<Thead>
<Tr>
<TableHeaderContentWithControls {...tableControls}>
<Th {...getThProps({ columnKey: "identifier" })} />
<Th {...getThProps({ columnKey: "title" })} />
<Th {...getThProps({ columnKey: "severity" })} />
<Th {...getThProps({ columnKey: "name" })} />
<Th {...getThProps({ columnKey: "description" })} />
<Th {...getThProps({ columnKey: "cvss" })} />
<Th {...getThProps({ columnKey: "published" })} />
<Th {...getThProps({ columnKey: "packages" })} />
<Th {...getThProps({ columnKey: "sboms" })} />
<Th {...getThProps({ columnKey: "advisories" })} />
</TableHeaderContentWithControls>
</Tr>
</Thead>
Expand All @@ -115,193 +96,52 @@ export const VulnerabilityTable: React.FC = () => {
item={item}
rowIndex={rowIndex}
>
<Td
width={15}
{...getTdProps({
columnKey: "identifier",
isCompoundExpandToggle: true,
item: item,
rowIndex,
})}
>
<Td width={15} {...getTdProps({ columnKey: "name" })}>
<NavLink to={`/vulnerabilities/${item.identifier}`}>
{item.identifier}
</NavLink>
</Td>
<Td
width={45}
modifier="truncate"
{...getTdProps({ columnKey: "title" })}
{...getTdProps({ columnKey: "description" })}
>
{item.title || item.description}
</Td>
<Td width={10} {...getTdProps({ columnKey: "severity" })}>
<Td width={10} {...getTdProps({ columnKey: "cvss" })}>
{item.average_severity && (
<SeverityShieldAndText value={item.average_severity} />
)}
</Td>
<Td
width={10}
modifier="truncate"
{...getTdProps({
columnKey: "packages",
isCompoundExpandToggle: true,
item: item,
rowIndex,
})}
{...getTdProps({ columnKey: "published" })}
>
Packages
{formatDate(item?.published)}
</Td>
<Td
width={10}
modifier="truncate"
{...getTdProps({
columnKey: "sboms",
isCompoundExpandToggle: true,
item: item,
rowIndex,
})}
>
SBOMs
</Td>
<Td
width={10}
{...getTdProps({
columnKey: "advisories",
isCompoundExpandToggle: true,
item: item,
rowIndex,
})}
>
Advisories
</Td>
{...getTdProps({ columnKey: "packages" })}
></Td>
<Td width={10} {...getTdProps({ columnKey: "sboms" })}></Td>
<Td isActionCell>
<ActionsColumn
items={[
{
title: "Delete",
onClick: () =>
deleteVulnerabilityByIdMutation.mutate(
onClick: () => {
return deleteVulnerabilityByIdMutation.mutate(
item.identifier
),
);
},
},
]}
/>
</Td>
</TableRowContentWithControls>
</Tr>
{isCellExpanded(item) ? (
<Tr isExpanded>
<Td
{...getExpandedContentTdProps({
item,
})}
>
<ExpandableRowContent>
<div className="pf-v5-u-m-md">
{isCellExpanded(item, "identifier") ? (
<>
<Grid hasGutter>
<GridItem md={8}>
<Card isFullHeight isCompact>
<CardTitle>General view</CardTitle>
<CardBody>
<DescriptionList
columnModifier={{
default: "2Col",
}}
>
<DescriptionListGroup>
<DescriptionListTerm>
Published
</DescriptionListTerm>
<DescriptionListDescription>
{formatDate(item.published)}
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>
Modified
</DescriptionListTerm>
<DescriptionListDescription>
{formatDate(item.modified)}
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>
Released
</DescriptionListTerm>
<DescriptionListDescription>
{formatDate(item.released)}
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>
Withdrawn
</DescriptionListTerm>
<DescriptionListDescription>
{formatDate(item.withdrawn)}
</DescriptionListDescription>
</DescriptionListGroup>
</DescriptionList>
</CardBody>
</Card>
</GridItem>
<GridItem md={4}>
<Card isFullHeight isCompact>
<CardTitle>Additional info</CardTitle>
<CardBody>
<DescriptionList>
<DescriptionListGroup>
<DescriptionListTerm>
CWE
</DescriptionListTerm>
<DescriptionListDescription>
{"item.cwe"}
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>
Non normative
</DescriptionListTerm>
<DescriptionListDescription>
{item.normative ? "Yes" : "No"}
</DescriptionListDescription>
</DescriptionListGroup>
</DescriptionList>
</CardBody>
</Card>
</GridItem>
</Grid>
</>
) : null}
{isCellExpanded(item, "packages") ? (
<>
<PackagesByVulnerabilityWrapper
vulnerabilityId={item.identifier}
/>
</>
) : null}
{isCellExpanded(item, "sboms") ? (
<>
<SbomsByVulnerabilityWrapper
vulnerabilityId={item.identifier}
/>
</>
) : null}
{isCellExpanded(item, "advisories") ? (
<>
<AdvisoriesByVulnerability
variant="compact"
advisories={item.advisories}
/>
</>
) : null}
</div>
</ExpandableRowContent>
</Td>
</Tr>
) : null}
</Tbody>
);
})}
Expand All @@ -316,34 +156,3 @@ export const VulnerabilityTable: React.FC = () => {
</>
);
};

export const PackagesByVulnerabilityWrapper: React.FC<{
vulnerabilityId: string;
}> = ({ vulnerabilityId }) => {
const { vulnerability, isFetching, fetchError } =
useFetchVulnerabilityById(vulnerabilityId);
return (
<LoadingWrapper isFetching={isFetching} fetchError={fetchError}>
<PackagesByVulnerability
variant="compact"
initialItemsPerPage={5}
advisories={vulnerability?.advisories ?? []}
/>
</LoadingWrapper>
);
};

export const SbomsByVulnerabilityWrapper: React.FC<{
vulnerabilityId: string;
}> = ({ vulnerabilityId }) => {
const { vulnerability, isFetching, fetchError } =
useFetchVulnerabilityById(vulnerabilityId);
return (
<LoadingWrapper isFetching={isFetching} fetchError={fetchError}>
<SbomsByVulnerability
variant="compact"
advisories={vulnerability?.advisories ?? []}
/>
</LoadingWrapper>
);
};

0 comments on commit 22e5e6a

Please sign in to comment.