From d79e1d6c9443a12cf2466586d2b160e10185d0d7 Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Thu, 10 Oct 2024 15:24:50 +0200
Subject: [PATCH] chore: add table for schedule scans

---
 app/(prowler)/scans/page.tsx                  | 47 +++++++++-
 .../scans/table/column-get-scans-schedule.tsx | 90 +++++++++++++++++++
 components/scans/table/column-get-scans.tsx   | 79 ++++++++++------
 components/scans/table/index.ts               |  1 +
 4 files changed, 185 insertions(+), 32 deletions(-)
 create mode 100644 components/scans/table/column-get-scans-schedule.tsx

diff --git a/app/(prowler)/scans/page.tsx b/app/(prowler)/scans/page.tsx
index bf2c594d8a..811f547412 100644
--- a/app/(prowler)/scans/page.tsx
+++ b/app/(prowler)/scans/page.tsx
@@ -3,9 +3,14 @@ import { Suspense } from "react";
 
 import { getProviders } from "@/actions/providers";
 import { getScans } from "@/actions/scans";
-import { FilterControls, filterScans } from "@/components/filters";
+import {
+  FilterControls,
+  filterProviders,
+  filterScans,
+} from "@/components/filters";
 import {
   ColumnGetScans,
+  ColumnGetScansSchedule,
   ColumnProviderScans,
   SkeletonTableScans,
 } from "@/components/scans/table";
@@ -26,15 +31,20 @@ export default async function Scans({
 
       <Spacer y={4} />
       <FilterControls search date providers />
-      <Spacer y={4} />
+      <Spacer y={8} />
 
-      <div className="grid grid-cols-12 items-start gap-4">
-        <div className="col-span-12 lg:col-span-4 lg:mt-14">
+      <div className="grid grid-cols-12 items-start gap-6">
+        <div className="col-span-12 lg:col-span-4">
           <Suspense key={searchParamsKey} fallback={<SkeletonTableScans />}>
             <SSRDataTableProviders searchParams={searchParams} />
           </Suspense>
         </div>
         <div className="col-span-12 lg:col-span-8">
+          <Suspense key={searchParamsKey} fallback={<SkeletonTableScans />}>
+            <SSRDataTableScansSchedule searchParams={searchParams} />
+          </Suspense>
+        </div>
+        <div className="col-span-12">
           <Suspense key={searchParamsKey} fallback={<SkeletonTableScans />}>
             <SSRDataTableScans searchParams={searchParams} />
           </Suspense>
@@ -67,6 +77,35 @@ const SSRDataTableProviders = async ({
       columns={ColumnProviderScans}
       data={providersData?.data || []}
       metadata={providersData?.meta}
+      customFilters={filterProviders}
+    />
+  );
+};
+
+const SSRDataTableScansSchedule = async ({
+  searchParams,
+}: {
+  searchParams: SearchParamsProps;
+}) => {
+  const page = parseInt(searchParams.page?.toString() || "1", 10);
+  const sort = searchParams.sort?.toString();
+
+  // Extract all filter parameters
+  const filters = Object.fromEntries(
+    Object.entries(searchParams).filter(([key]) => key.startsWith("filter[")),
+  );
+
+  // Extract query from filters
+  const query = (filters["filter[search]"] as string) || "";
+
+  const scansData = await getScans({ query, page, sort, filters });
+
+  return (
+    <DataTable
+      columns={ColumnGetScansSchedule}
+      data={scansData?.data || []}
+      metadata={scansData?.meta}
+      customFilters={filterScans}
     />
   );
 };
diff --git a/components/scans/table/column-get-scans-schedule.tsx b/components/scans/table/column-get-scans-schedule.tsx
new file mode 100644
index 0000000000..71b6267791
--- /dev/null
+++ b/components/scans/table/column-get-scans-schedule.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+
+import { DateWithTime, EntityInfoShort } from "@/components/ui/entities";
+import { DataTableColumnHeader, StatusBadge } from "@/components/ui/table";
+import { ScanProps } from "@/types";
+
+import { DataTableRowActions } from "./data-table-row-actions";
+
+const getScanData = (row: { original: ScanProps }) => {
+  return row.original;
+};
+
+export const ColumnGetScansSchedule: ColumnDef<ScanProps>[] = [
+  {
+    accessorKey: "name",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={"Name"} param="name" />
+    ),
+    cell: ({ row }) => {
+      const {
+        attributes: { name },
+      } = getScanData(row);
+      return <EntityInfoShort entityAlias={name} entityId={row.original.id} />;
+    },
+  },
+
+  {
+    accessorKey: "status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={"Status"} param="state" />
+    ),
+    cell: ({ row }) => {
+      const {
+        attributes: { state },
+      } = getScanData(row);
+      return <StatusBadge status={state} />;
+    },
+  },
+  {
+    accessorKey: "started_at",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={"Started at"}
+        param="started_at"
+      />
+    ),
+    cell: ({ row }) => {
+      const {
+        attributes: { started_at },
+      } = getScanData(row);
+      return <DateWithTime dateTime={started_at} />;
+    },
+  },
+  {
+    accessorKey: "lastScan",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={"Completed At"}
+        param="completed_at"
+      />
+    ),
+    cell: ({ row }) => {
+      const {
+        attributes: { completed_at },
+      } = getScanData(row);
+      return <DateWithTime dateTime={completed_at} />;
+    },
+  },
+  {
+    accessorKey: "resources",
+    header: "Resources",
+    cell: ({ row }) => {
+      const {
+        attributes: { unique_resource_count },
+      } = getScanData(row);
+      return <p className="font-medium">{unique_resource_count}</p>;
+    },
+  },
+
+  {
+    id: "actions",
+    cell: ({ row }) => {
+      return <DataTableRowActions row={row} />;
+    },
+  },
+];
diff --git a/components/scans/table/column-get-scans.tsx b/components/scans/table/column-get-scans.tsx
index 670d165c6f..e8acabb434 100644
--- a/components/scans/table/column-get-scans.tsx
+++ b/components/scans/table/column-get-scans.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { add } from "date-fns";
 
 import { DateWithTime, EntityInfoShort } from "@/components/ui/entities";
 import { DataTableColumnHeader, StatusBadge } from "@/components/ui/table";
@@ -26,6 +25,18 @@ export const ColumnGetScans: ColumnDef<ScanProps>[] = [
       return <EntityInfoShort entityAlias={name} entityId={row.original.id} />;
     },
   },
+  {
+    accessorKey: "trigger",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={"Type"} param="trigger" />
+    ),
+    cell: ({ row }) => {
+      const {
+        attributes: { trigger },
+      } = getScanData(row);
+      return <p>{trigger}</p>;
+    },
+  },
 
   {
     accessorKey: "status",
@@ -40,11 +51,43 @@ export const ColumnGetScans: ColumnDef<ScanProps>[] = [
     },
   },
   {
-    accessorKey: "lastScan",
+    accessorKey: "scheduled_at",
     header: ({ column }) => (
       <DataTableColumnHeader
         column={column}
-        title={"Completed At"}
+        title={"Scheduled at"}
+        param="scheduled_at"
+      />
+    ),
+    cell: ({ row }) => {
+      const {
+        attributes: { scheduled_at },
+      } = getScanData(row);
+      return <DateWithTime dateTime={scheduled_at} />;
+    },
+  },
+  {
+    accessorKey: "started_at",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={"Started at"}
+        param="started_at"
+      />
+    ),
+    cell: ({ row }) => {
+      const {
+        attributes: { started_at },
+      } = getScanData(row);
+      return <DateWithTime dateTime={started_at} />;
+    },
+  },
+  {
+    accessorKey: "completed_at",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={"Completed at"}
         param="completed_at"
       />
     ),
@@ -56,18 +99,13 @@ export const ColumnGetScans: ColumnDef<ScanProps>[] = [
     },
   },
   {
-    accessorKey: "nextScan",
-    header: "Next Scan",
+    accessorKey: "scanner_args",
+    header: "Scanner Args",
     cell: ({ row }) => {
       const {
-        attributes: { scheduled_at, completed_at },
+        attributes: { scanner_args },
       } = getScanData(row);
-      const nextDay = add(new Date(completed_at), {
-        hours: 24,
-      });
-      if (scheduled_at === null)
-        return <DateWithTime dateTime={nextDay.toISOString()} />;
-      return <DateWithTime dateTime={scheduled_at} />;
+      return <p className="font-medium">{scanner_args?.only_logs}</p>;
     },
   },
   {
@@ -80,22 +118,7 @@ export const ColumnGetScans: ColumnDef<ScanProps>[] = [
       return <p className="font-medium">{unique_resource_count}</p>;
     },
   },
-  {
-    accessorKey: "started_at",
-    header: ({ column }) => (
-      <DataTableColumnHeader
-        column={column}
-        title={"Started At"}
-        param="started_at"
-      />
-    ),
-    cell: ({ row }) => {
-      const {
-        attributes: { started_at },
-      } = getScanData(row);
-      return <DateWithTime dateTime={started_at} />;
-    },
-  },
+
   {
     id: "actions",
     cell: ({ row }) => {
diff --git a/components/scans/table/index.ts b/components/scans/table/index.ts
index 471e150f9f..9015ed3651 100644
--- a/components/scans/table/index.ts
+++ b/components/scans/table/index.ts
@@ -1,4 +1,5 @@
 export * from "./column-get-scans";
+export * from "./column-get-scans-schedule";
 export * from "./column-provider-scans";
 export * from "./data-table-row-actions";
 export * from "./skeleton-table-scans";