From 970cb97f7393766ee2c20bce1d11518ca4ed02c5 Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Thu, 10 Oct 2024 08:52:36 +0200
Subject: [PATCH] chore: table for launch scan is added to scan page

---
 app/(prowler)/scans/page.tsx                 |  14 +--
 components/providers/index.ts                |   1 +
 components/providers/provider-info-short.tsx |  51 ++++++++
 components/providers/snippet-id-provider.tsx |   3 +
 components/scans/table/column-scans.tsx      | 116 ++++---------------
 components/ui/table/data-table.tsx           |   8 +-
 6 files changed, 90 insertions(+), 103 deletions(-)
 create mode 100644 components/providers/provider-info-short.tsx

diff --git a/app/(prowler)/scans/page.tsx b/app/(prowler)/scans/page.tsx
index c0cc62a0af..3ce355a465 100644
--- a/app/(prowler)/scans/page.tsx
+++ b/app/(prowler)/scans/page.tsx
@@ -2,11 +2,7 @@ import { Spacer } from "@nextui-org/react";
 import { Suspense } from "react";
 
 import { getProviders } from "@/actions/providers";
-import {
-  FilterControls,
-  filterProviders,
-  filterScans,
-} from "@/components/filters";
+import { FilterControls, filterScans } from "@/components/filters";
 import { ColumnScans, SkeletonTableScans } from "@/components/scans/table";
 import { Header } from "@/components/ui";
 import { DataTable } from "@/components/ui/table";
@@ -27,13 +23,13 @@ export default async function Scans({
       <FilterControls search date providers />
       <Spacer y={4} />
 
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-        <div className="w-full">
+      <div className="grid grid-cols-12 items-end gap-4">
+        <div className="col-span-12 lg:col-span-4">
           <Suspense key={searchParamsKey} fallback={<SkeletonTableScans />}>
             <SSRDataTableProviders searchParams={searchParams} />
           </Suspense>
         </div>
-        <div className="w-full">
+        <div className="col-span-12 lg:col-span-8">
           <Suspense key={searchParamsKey} fallback={<SkeletonTableScans />}>
             <SSRDataTableScans searchParams={searchParams} />
           </Suspense>
@@ -66,7 +62,7 @@ const SSRDataTableProviders = async ({
       columns={ColumnScans}
       data={providersData?.data || []}
       metadata={providersData?.meta}
-      customFilters={filterProviders}
+      // customFilters={filterProviders}
     />
   );
 };
diff --git a/components/providers/index.ts b/components/providers/index.ts
index 9f2aed9e3a..0751b3587c 100644
--- a/components/providers/index.ts
+++ b/components/providers/index.ts
@@ -3,6 +3,7 @@ export * from "./CheckConnectionProvider";
 export * from "./date-with-time";
 export * from "./forms/delete-form";
 export * from "./provider-info";
+export * from "./provider-info-short";
 export * from "./radio-group-provider";
 export * from "./scan-status";
 export * from "./snippet-id-provider";
diff --git a/components/providers/provider-info-short.tsx b/components/providers/provider-info-short.tsx
new file mode 100644
index 0000000000..5f32cbeefc
--- /dev/null
+++ b/components/providers/provider-info-short.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+
+import {
+  AWSProviderBadge,
+  AzureProviderBadge,
+  GCPProviderBadge,
+  KS8ProviderBadge,
+} from "../icons/providers-badge";
+import { SnippetIdProvider } from "./snippet-id-provider";
+
+interface ProviderInfoProps {
+  connected: boolean | null;
+  provider: "aws" | "azure" | "gcp" | "kubernetes";
+  providerAlias: string;
+  providerId: string;
+}
+
+export const ProviderInfoShort: React.FC<ProviderInfoProps> = ({
+  provider,
+  providerAlias,
+  providerId,
+}) => {
+  const getProviderLogo = () => {
+    switch (provider) {
+      case "aws":
+        return <AWSProviderBadge width={35} height={35} />;
+      case "azure":
+        return <AzureProviderBadge width={35} height={35} />;
+      case "gcp":
+        return <GCPProviderBadge width={35} height={35} />;
+      case "kubernetes":
+        return <KS8ProviderBadge width={35} height={35} />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="max-w-full">
+      <div className="flex items-center justify-between space-x-4">
+        <div className="flex items-center space-x-4">
+          <div className="flex-shrink-0">{getProviderLogo()}</div>
+          <div className="flex flex-col">
+            <span className="text-md font-semibold">{providerAlias}</span>
+            <SnippetIdProvider className="h-5" providerId={providerId} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/components/providers/snippet-id-provider.tsx b/components/providers/snippet-id-provider.tsx
index 820b08bd6d..0bcc0951c7 100644
--- a/components/providers/snippet-id-provider.tsx
+++ b/components/providers/snippet-id-provider.tsx
@@ -5,9 +5,11 @@ import { CopyIcon, DoneIcon, IdIcon } from "../icons";
 
 interface SnippetIdProviderProps {
   providerId: string;
+  [key: string]: any;
 }
 export const SnippetIdProvider: React.FC<SnippetIdProviderProps> = ({
   providerId,
+  ...props
 }) => {
   return (
     <Snippet
@@ -19,6 +21,7 @@ export const SnippetIdProvider: React.FC<SnippetIdProviderProps> = ({
       hideSymbol
       copyIcon={<CopyIcon size={16} />}
       checkIcon={<DoneIcon size={16} />}
+      {...props}
     >
       <p className="flex items-center space-x-2">
         <IdIcon size={16} />
diff --git a/components/scans/table/column-scans.tsx b/components/scans/table/column-scans.tsx
index 401f02aa14..624d2bdc40 100644
--- a/components/scans/table/column-scans.tsx
+++ b/components/scans/table/column-scans.tsx
@@ -1,122 +1,56 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { add } from "date-fns";
 
-import {
-  DateWithTime,
-  ProviderInfo,
-  SnippetIdProvider,
-} from "@/components/providers";
-import { DataTableColumnHeader, StatusBadge } from "@/components/ui/table";
+import { AddIcon } from "@/components/icons/Icons";
+import { ProviderInfoShort } from "@/components/providers";
+import { CustomButton } from "@/components/ui/custom";
 import { ProviderProps } from "@/types";
 
-import { DataTableRowActions } from "./data-table-row-actions";
-
 const getProviderData = (row: { original: ProviderProps }) => {
   return row.original;
 };
 
 export const ColumnScans: ColumnDef<ProviderProps>[] = [
   {
-    header: " ",
-    cell: ({ row }) => <p className="text-medium">{row.index + 1}</p>,
-  },
-  {
-    accessorKey: "account",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title={"Account"} param="alias" />
-    ),
+    accessorKey: "provider",
+    header: "Provider",
     cell: ({ row }) => {
       const {
-        attributes: { connection, provider, alias },
+        attributes: { connection, provider, alias, uid },
       } = getProviderData(row);
       return (
-        <ProviderInfo
+        <ProviderInfoShort
           connected={connection.connected}
           provider={provider}
           providerAlias={alias}
+          providerId={uid}
         />
       );
     },
   },
   {
-    accessorKey: "uid",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title={"Id"} param="uid" />
-    ),
+    accessorKey: "launchScan",
+    header: "Launch Scan",
     cell: ({ row }) => {
       const {
         attributes: { uid },
       } = getProviderData(row);
-      return <SnippetIdProvider providerId={uid} />;
-    },
-  },
-  {
-    accessorKey: "status",
-    header: "Scan Status",
-    cell: () => {
-      // Temporarily overwriting the value until the API is functional.
-      return <StatusBadge status={"completed"} />;
-    },
-  },
-  {
-    accessorKey: "lastScan",
-    header: ({ column }) => (
-      <DataTableColumnHeader
-        column={column}
-        title={"Last Scan"}
-        param="updated_at"
-      />
-    ),
-    cell: ({ row }) => {
-      const {
-        attributes: { updated_at },
-      } = getProviderData(row);
-      return <DateWithTime dateTime={updated_at} />;
-    },
-  },
-  {
-    accessorKey: "nextScan",
-    header: "Next Scan",
-    cell: ({ row }) => {
-      const {
-        attributes: { updated_at },
-      } = getProviderData(row);
-      const nextDay = add(new Date(updated_at), {
-        hours: 24,
-      });
-      return <DateWithTime dateTime={nextDay.toISOString()} />;
-    },
-  },
-  {
-    accessorKey: "resources",
-    header: "Resources",
-    cell: () => {
-      // Temporarily overwriting the value until the API is functional.
-      return <p className="font-medium">{288}</p>;
-    },
-  },
-  {
-    accessorKey: "added",
-    header: ({ column }) => (
-      <DataTableColumnHeader
-        column={column}
-        title={"Added"}
-        param="inserted_at"
-      />
-    ),
-    cell: ({ row }) => {
-      const {
-        attributes: { inserted_at },
-      } = getProviderData(row);
-      return <DateWithTime dateTime={inserted_at} showTime={false} />;
-    },
-  },
-  {
-    id: "actions",
-    cell: ({ row }) => {
-      return <DataTableRowActions row={row} />;
+      return (
+        <CustomButton
+          className="w-full"
+          ariaLabel="Start Scan"
+          variant="solid"
+          color="action"
+          size="md"
+          endContent={<AddIcon size={20} />}
+          onPress={() => {
+            console.log(uid);
+          }}
+        >
+          Start
+        </CustomButton>
+      );
     },
   },
 ];
diff --git a/components/ui/table/data-table.tsx b/components/ui/table/data-table.tsx
index 30593a7cf9..ecec4422a3 100644
--- a/components/ui/table/data-table.tsx
+++ b/components/ui/table/data-table.tsx
@@ -58,9 +58,11 @@ export function DataTable<TData, TValue>({
 
   return (
     <>
-      <div className="mb-6">
-        <DataTableFilterCustom filters={customFilters || []} />
-      </div>
+      {customFilters && (
+        <div className="mb-6">
+          <DataTableFilterCustom filters={customFilters || []} />
+        </div>
+      )}
       <div className="relative z-0 flex w-full flex-col justify-between gap-4 overflow-auto rounded-large bg-content1 p-4 shadow-small">
         <Table>
           <TableHeader>