diff --git a/app/(prowler)/findings/page.tsx b/app/(prowler)/findings/page.tsx index 373833f41e..2595124a58 100644 --- a/app/(prowler)/findings/page.tsx +++ b/app/(prowler)/findings/page.tsx @@ -1,13 +1,57 @@ -import React from "react"; +import { Spacer } from "@nextui-org/react"; +import React, { Suspense } from "react"; -import { Header } from "@/components"; +import { + ColumnsFindings, + DataTable, + Header, + SkeletonTableFindings, +} from "@/components"; -export default function Findings() { +export default async function Findings() { return ( <>
- -

Hi hi from Findings page

+ +
+ + }> + + +
); } + +const SSRDataTable = async () => { + return ( + + ); +}; diff --git a/components/findings/ColumnsFindings.tsx b/components/findings/ColumnsFindings.tsx new file mode 100644 index 0000000000..90860b260e --- /dev/null +++ b/components/findings/ColumnsFindings.tsx @@ -0,0 +1,86 @@ +"use client"; + +import { + Button, + Dropdown, + DropdownItem, + DropdownMenu, + DropdownTrigger, +} from "@nextui-org/react"; +import { ColumnDef } from "@tanstack/react-table"; + +import { VerticalDotsIcon } from "@/components/icons"; +import { FindingsProps } from "@/types"; + +const getFindingsAttributes = (row: { original: FindingsProps }) => { + return row.original.attributes; +}; + +export const ColumnsFindings: ColumnDef[] = [ + { + accessorKey: "checkTitle", + header: "Check", + cell: ({ row }) => { + const { CheckTitle } = getFindingsAttributes(row); + return

{CheckTitle}

; + }, + }, + { + accessorKey: "severity", + header: "Severity", + cell: ({ row }) => { + const { severity } = getFindingsAttributes(row); + return

{severity}

; + }, + }, + { + accessorKey: "status", + header: "Status", + cell: ({ row }) => { + const { status } = getFindingsAttributes(row); + return

{status}

; + }, + }, + { + accessorKey: "region", + header: "Region", + cell: ({ row }) => { + const { region } = getFindingsAttributes(row); + return

{region}

; + }, + }, + { + accessorKey: "service", + header: "Service", + cell: ({ row }) => { + const { service } = getFindingsAttributes(row); + return

{service}

; + }, + }, + { + accessorKey: "account", + header: "Account", + cell: ({ row }) => { + const { account } = getFindingsAttributes(row); + return

{account}

; + }, + }, + { + accessorKey: "actions", + header: () => ( +
+ + + + + + Mute Findings for Selected Filters + Configure Muted Findings + + +
+ ), + }, +]; diff --git a/components/findings/SkeletonTableFindings.tsx b/components/findings/SkeletonTableFindings.tsx new file mode 100644 index 0000000000..074405d8a7 --- /dev/null +++ b/components/findings/SkeletonTableFindings.tsx @@ -0,0 +1,65 @@ +import { Card, Skeleton } from "@nextui-org/react"; +import React from "react"; + +export const SkeletonTableFindings = () => { + return ( + + {/* Table headers */} +
+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ +
+ + {/* Table body */} +
+ {[...Array(3)].map((_, index) => ( +
+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ +
+ ))} +
+ + ); +}; diff --git a/components/index.ts b/components/index.ts index 4cad0baacf..9d76952378 100644 --- a/components/index.ts +++ b/components/index.ts @@ -1,3 +1,5 @@ +export * from "./findings/ColumnsFindings"; +export * from "./findings/SkeletonTableFindings"; export * from "./providers/DateWithTime"; export * from "./providers/ProviderInfo"; export * from "./providers/ScanStatus"; diff --git a/types/components.ts b/types/components.ts index 994adf02a2..b7b53724e5 100644 --- a/types/components.ts +++ b/types/components.ts @@ -35,3 +35,15 @@ export interface ProviderProps { }; }; } + +export interface FindingsProps { + id: string; + attributes: { + CheckTitle: string; + severity: string; + status: string; + region: string; + service: string; + account: string; + }; +}