diff --git a/app/(prowler)/findings/page.tsx b/app/(prowler)/findings/page.tsx index 33a8746191..fd0ec5bedc 100644 --- a/app/(prowler)/findings/page.tsx +++ b/app/(prowler)/findings/page.tsx @@ -1,8 +1,11 @@ import { Spacer } from "@nextui-org/react"; import React, { Suspense } from "react"; -import { ColumnsFindings, SkeletonTableFindings } from "@/components"; -import { DataTableProvider } from "@/components/providers"; +import { + ColumnsFindings, + DataTableFindings, + SkeletonTableFindings, +} from "@/components/findings"; import { Header } from "@/components/ui"; export default async function Findings() { @@ -10,7 +13,7 @@ export default async function Findings() { <>
-
+
}> @@ -22,7 +25,7 @@ export default async function Findings() { const SSRDataTable = async () => { return ( - { service: "cloudformation", account: "dev (106908755756)", }, + card: { + resourceId: + "StackSet-AWSControlTowerBP-BASELINE-CLOUDWATCH-57c2a54c-9a36-4af9-a910-d1adb424c62a", + resourceLink: + "https://app.prowler.pro/app/findings?date=2024-08-05&search=StackSet-AWSControlTowerBP-BASELINE-CLOUDWATCH-57c2a54c-9a36-4af9-a910-d1adb424c62a", + resourceARN: + "arn:aws:cloudformation:eu-west-1:714274078102:stack/StackSet-AWSControlTowerBP-BASELINE-CLOUDWATCH-57c2a54c-9a36-4af9-a910-d1adb424c62a/9656eda0-909c-11ec-8fb2-06f4f86422d5", + checkId: "cloudformation_stack_outputs_find_secrets", + checkLink: + "https://app.prowler.pro/app/findings?date=2024-08-05&search=cloudformation_stack_outputs_find_secrets", + type: "Not applicable", + scanTime: "2024-08-05 @ 14:22:00 UTC", + findingId: "ba123291-03a5-49a1-b962-6fdb1d2b9c9b", + findingLink: + "https://app.prowler.pro/app/findings?date=2024-08-05&search=ba123291-03a5-49a1-b962-6fdb1d2b9c9b", + details: + "Potential secret found in Stack StackSet-AWSControlTowerBP-BASELINE-CLOUDWATCH-57c2a54c-9a36-4af9-a910-d1adb424c62a Outputs.", + riskLink: + "https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/outputs-section-structure.html", + riskDetails: + "Secrets hardcoded into CloudFormation outputs can be used by malware and bad actors to gain lateral access to other services.", + recommendationLink: + "https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-properties-secretsmanager-secret-generatesecretstring.html", + recommendationDetails: + "Implement automated detective control to scan accounts for passwords and secrets. Use secrets manager service to store and retrieve passwords and secrets.", + referenceInformation: "CLI", + referenceLink: + "https://docs.prowler.com/checks/aws/secrets-policies/bc_aws_secrets_2/#cli-command", + }, }, { id: "67891", @@ -47,6 +79,30 @@ const SSRDataTable = async () => { service: "cloudformation", account: "stg (987654321987)", }, + card: { + resourceId: "", + resourceLink: + "https://app.prowler.pro/app/findings?search=%3Croot_account%3E", + resourceARN: "arn:aws:iam::714274078102:root", + checkId: "iam_root_mfa_enabled", + checkLink: + "https://app.prowler.pro/app/findings?search=iam_root_mfa_enabled", + type: "Software and Configuration Checks, Industry and Regulatory Standards, CIS AWS Foundations Benchmark", + scanTime: "2024-08-05 @ 14:22:00 UTC", + findingId: "bc3a34e0-16f0-4ea1-ac62-f796c8af3448", + findingLink: + "https://app.prowler.pro/app/findings?date=2024-08-05&search=bc3a34e0-16f0-4ea1-ac62-f796c8af3448", + details: "MFA is not enabled for root account.", + riskLink: "", + riskDetails: + "The root account is the most privileged user in an AWS account. MFA adds an extra layer of protection on top of a user name and password. With MFA enabled when a user signs in to an AWS website they will be prompted for their user name and password as well as for an authentication code from their AWS MFA device. When virtual MFA is used for root accounts it is recommended that the device used is NOT a personal device but rather a dedicated mobile device (tablet or phone) that is managed to be kept charged and secured independent of any individual personal devices. (non-personal virtual MFA) This lessens the risks of losing access to the MFA due to device loss / trade-in or if the individual owning the device is no longer employed at the company.", + recommendationLink: + "https://docs.aws.amazon.com/IAM/latest/UserGuide/id_root-user.html#id_root-user_manage_mfa", + recommendationDetails: + "Using IAM console navigate to Dashboard and expand Activate MFA on your root account.", + referenceInformation: "", + referenceLink: "", + }, }, ]} /> diff --git a/components/findings/index.ts b/components/findings/index.ts new file mode 100644 index 0000000000..20c1920f4e --- /dev/null +++ b/components/findings/index.ts @@ -0,0 +1,4 @@ +export * from "./table/ColumnsFindings"; +export * from "./table/DataTableFindings"; +export * from "./table/FindingsCard"; +export * from "./table/SkeletonTableFindings"; diff --git a/components/findings/ColumnsFindings.tsx b/components/findings/table/ColumnsFindings.tsx similarity index 76% rename from components/findings/ColumnsFindings.tsx rename to components/findings/table/ColumnsFindings.tsx index 90860b260e..7c8b6f2396 100644 --- a/components/findings/ColumnsFindings.tsx +++ b/components/findings/table/ColumnsFindings.tsx @@ -10,19 +10,20 @@ import { import { ColumnDef } from "@tanstack/react-table"; import { VerticalDotsIcon } from "@/components/icons"; -import { FindingsProps } from "@/types"; +import { StatusBadge } from "@/components/ui"; +import { FindingProps } from "@/types"; -const getFindingsAttributes = (row: { original: FindingsProps }) => { +const getFindingsAttributes = (row: { original: FindingProps }) => { return row.original.attributes; }; -export const ColumnsFindings: ColumnDef[] = [ +export const ColumnsFindings: ColumnDef[] = [ { accessorKey: "checkTitle", header: "Check", cell: ({ row }) => { const { CheckTitle } = getFindingsAttributes(row); - return

{CheckTitle}

; + return

{CheckTitle}

; }, }, { @@ -30,7 +31,7 @@ export const ColumnsFindings: ColumnDef[] = [ header: "Severity", cell: ({ row }) => { const { severity } = getFindingsAttributes(row); - return

{severity}

; + return

{severity}

; }, }, { @@ -38,7 +39,7 @@ export const ColumnsFindings: ColumnDef[] = [ header: "Status", cell: ({ row }) => { const { status } = getFindingsAttributes(row); - return

{status}

; + return ; }, }, { @@ -46,7 +47,7 @@ export const ColumnsFindings: ColumnDef[] = [ header: "Region", cell: ({ row }) => { const { region } = getFindingsAttributes(row); - return

{region}

; + return

{region}

; }, }, { @@ -54,7 +55,7 @@ export const ColumnsFindings: ColumnDef[] = [ header: "Service", cell: ({ row }) => { const { service } = getFindingsAttributes(row); - return

{service}

; + return

{service}

; }, }, { @@ -62,7 +63,7 @@ export const ColumnsFindings: ColumnDef[] = [ header: "Account", cell: ({ row }) => { const { account } = getFindingsAttributes(row); - return

{account}

; + return

{account}

; }, }, { diff --git a/components/findings/table/DataTableFindings.tsx b/components/findings/table/DataTableFindings.tsx new file mode 100644 index 0000000000..5004dc2e6d --- /dev/null +++ b/components/findings/table/DataTableFindings.tsx @@ -0,0 +1,127 @@ +"use client"; + +import { Button } from "@nextui-org/react"; +import { + ColumnDef, + flexRender, + getCoreRowModel, + getPaginationRowModel, + Row, + useReactTable, +} from "@tanstack/react-table"; + +import { FindingsCard } from "@/components/findings/table/FindingsCard"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table/Table"; +import { FindingProps } from "@/types"; + +interface DataTableFindingsProps { + columns: ColumnDef[]; + data: TData[]; +} + +export function DataTableFindings({ + columns, + data, +}: DataTableFindingsProps) { + const table = useReactTable({ + data, + columns, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + }); + + const selectedRow = table.getSelectedRowModel().rows[0]?.original; + + const onClick = (row: Row) => { + table.resetRowSelection(true); + row.toggleSelected(); + return; + }; + + return ( + <> +
+
+
+ + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext(), + )} + + ); + })} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + onClick(row)} + className={"hover:cursor-pointer"} + > + {row.getVisibleCells().map((cell) => ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext(), + )} + + ))} + + )) + ) : ( + + + No results. + + + )} + +
+
+
+ + +
+
+ +
+ + ); +} diff --git a/components/findings/table/FindingsCard.tsx b/components/findings/table/FindingsCard.tsx new file mode 100644 index 0000000000..22056b29eb --- /dev/null +++ b/components/findings/table/FindingsCard.tsx @@ -0,0 +1,134 @@ +import { Button, Divider, Link } from "@nextui-org/react"; +import React from "react"; + +import { FindingProps } from "@/types"; +interface FindingsCardProps { + selectedRow: FindingProps; +} + +export const FindingsCard: React.FC = ({ selectedRow }) => { + const { attributes, card } = selectedRow || {}; + const { CheckTitle } = attributes || {}; + const { + resourceLink, + resourceId, + resourceARN, + checkLink, + checkId, + type, + scanTime, + findingLink, + findingId, + details, + riskDetails, + riskLink, + recommendationDetails, + recommendationLink, + referenceInformation, + referenceLink, + } = card || {}; + + return ( + <> +
+

{CheckTitle}

+ +
+

Resource ID:

+ + {resourceId} + +

Resource ARN:

+

{resourceARN}

+

Check ID:

+ + {checkId} + +

Type:

+

{type}

+

Scan Time:

+

{scanTime}

+

Prowler Finding ID:

+ + {findingId} + +
+ + {details && ( +
+

Details:

+

{details}

+
+ )} + + {riskDetails && ( +
+

+ Risk: + {riskLink && ( + + )} +

+

{riskDetails}

+
+ )} + + {recommendationDetails && ( +
+
+ Recommendation: + {recommendationLink && ( + + )} +
+

{recommendationDetails}

+
+ )} + + {referenceInformation && ( +
+
+ Reference Information: + {referenceLink && ( + + )} +
+

{referenceInformation}

+
+ )} +
+ + ); +}; diff --git a/components/findings/SkeletonTableFindings.tsx b/components/findings/table/SkeletonTableFindings.tsx similarity index 100% rename from components/findings/SkeletonTableFindings.tsx rename to components/findings/table/SkeletonTableFindings.tsx diff --git a/components/index.ts b/components/index.ts deleted file mode 100644 index df78769815..0000000000 --- a/components/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./findings/ColumnsFindings"; -export * from "./findings/SkeletonTableFindings"; diff --git a/components/providers/table/DataTableProvider.tsx b/components/providers/table/DataTableProvider.tsx index cfbb095e57..172af2d891 100644 --- a/components/providers/table/DataTableProvider.tsx +++ b/components/providers/table/DataTableProvider.tsx @@ -23,7 +23,7 @@ import { MetaDataProps } from "@/types"; import { DataTablePagination } from "./DataTablePagination"; -interface DataTableProps { +interface DataTableProviderProps { columns: ColumnDef[]; data: TData[]; metadata?: MetaDataProps; @@ -33,7 +33,7 @@ export function DataTableProvider({ columns, data, metadata, -}: DataTableProps) { +}: DataTableProviderProps) { const [sorting, setSorting] = useState([]); const table = useReactTable({ data, diff --git a/components/ui/sidebar/SidebarWrap.tsx b/components/ui/sidebar/SidebarWrap.tsx index 325e284f15..27d4a1af11 100644 --- a/components/ui/sidebar/SidebarWrap.tsx +++ b/components/ui/sidebar/SidebarWrap.tsx @@ -35,7 +35,7 @@ export const SidebarWrap = () => { return (
= - { - completed: "success", - pending: "warning", - cancelled: "danger", - }; +export const statusColorMap: Record< + Status, + "success" | "danger" | "warning" | "default" +> = { + completed: "success", + pending: "warning", + cancelled: "danger", + fail: "danger", + success: "success", + muted: "default", +}; export const StatusBadge = ({ status }: { status: Status }) => { return ( diff --git a/requirements.txt b/requirements.txt index e5e44befb9..8bca8ad202 100644 --- a/requirements.txt +++ b/requirements.txt @@ -1,3 +1,3 @@ -Django==5.0.7 +Django==5.0.8 djangorestframework==3.15.2 django-cors-headers==4.3.1 diff --git a/types/components.ts b/types/components.ts index 1d23c712a9..3d8a49393d 100644 --- a/types/components.ts +++ b/types/components.ts @@ -42,16 +42,34 @@ export interface ProviderProps { }; } -export interface FindingsProps { +export interface FindingProps { id: string; attributes: { CheckTitle: string; - severity: string; - status: string; + severity: "critical" | "high" | "medium" | "low"; + status: "fail" | "success" | "muted"; region: string; service: string; account: string; }; + card: { + resourceId: string; + resourceLink: string; + resourceARN: string; + checkId: string; + checkLink: string; + type: string; + scanTime: string; + findingId: string; + findingLink: string; + details: string; + riskLink: string; + riskDetails: string; + recommendationLink: string; + recommendationDetails: string; + referenceInformation: string; + referenceLink: string; + }; } export interface MetaDataProps {