Merge pull request #89 from prowler-cloud/PRWLR-5141-Prowler-V-release-tweaks-scan-page-v3

Tweaks scan page v3

.github/workflows/checks.yml

@@ -25,3 +25,5 @@ jobs:
         run: npm install
       - name: Run Healthcheck
         run: npm run healthcheck
+      - name: Build the application
+        run: npm run build

actions/auth/auth.ts

@@ -67,7 +67,6 @@ export const createNewUser = async (
       },
     },
   };
-  
 
   try {
     const response = await fetch(url.toString(), {

actions/scans/scans.ts

@@ -94,9 +94,6 @@ export const scanOnDemand = async (formData: FormData) => {
           type: "Scan",
           attributes: {
             name: scanName,
-            scanner_args: {
-              checks_to_execute: ["accessanalyzer_enabled"],
-            },
           },
           relationships: {
             provider: {

actions/services/services.ts

@@ -2,10 +2,10 @@
 
 import { revalidatePath } from "next/cache";
 import { redirect } from "next/navigation";
+import { parse } from "path";
 
 import { auth } from "@/auth.config";
 import { getErrorMessage, parseStringify } from "@/lib";
-import { parse } from "path";
 
 export const getServices = async ({}) => {
   const session = await auth();
@@ -63,10 +63,8 @@ export const getServices = async ({}) => {
     { id: "trustedadvisor", alias: "AWS Trusted Advisor" },
     { id: "vpc", alias: "Amazon VPC" },
     { id: "wafv2", alias: "AWS WAF" },
-    { id: "wellarchitected", alias: "AWS Well-Architected Tool" }
+    { id: "wellarchitected", alias: "AWS Well-Architected Tool" },
   ];
-  
-  
 
   const parsedData = [];
 

app/(prowler)/findings/page.tsx

@@ -58,17 +58,20 @@ const SSRDataTable = async ({
   const providerDict = createDict("Provider", findingsData);
 
   // Expand each finding with its corresponding resource, scan, and provider
-  const expandedFindings = findingsData.data.map((finding: FindingProps) => {
-    const scan = scanDict[finding.relationships?.scan?.data?.id];
-    const resource =
-      resourceDict[finding.relationships?.resources?.data?.[0]?.id];
-    const provider = providerDict[resource?.relationships?.provider?.data?.id];
+  const expandedFindings = findingsData?.data
+    ? findingsData.data.map((finding: FindingProps) => {
+        const scan = scanDict[finding.relationships?.scan?.data?.id];
+        const resource =
+          resourceDict[finding.relationships?.resources?.data?.[0]?.id];
+        const provider =
+          providerDict[resource?.relationships?.provider?.data?.id];
 
-    return {
-      ...finding,
-      relationships: { scan, resource, provider },
-    };
-  });
+        return {
+          ...finding,
+          relationships: { scan, resource, provider },
+        };
+      })
+    : [];
 
   // Create the new object while maintaining the original structure
   const expandedResponse = {

components/findings/table/column-findings.tsx

@@ -2,12 +2,13 @@
 
 import { ColumnDef } from "@tanstack/react-table";
 
+import { DataTableRowDetails } from "@/components/findings/table";
+import { PlusIcon } from "@/components/icons";
+import { TriggerSheet } from "@/components/ui/sheet";
 import { SeverityBadge, Status, StatusBadge } from "@/components/ui/table";
 import { FindingProps } from "@/types";
-import { TriggerSheet } from "@/components/ui/sheet";
+
 import { DataTableRowActions } from "./data-table-row-actions";
-import { PlusIcon } from "@/components/icons";
-import { DataTableRowDetails } from "@/components/findings/table";
 
 const statusMap: Record<"PASS" | "FAIL" | "MANUAL" | "MUTED", Status> = {
   PASS: "completed",

components/findings/table/data-table-row-details.tsx

@@ -1,11 +1,8 @@
 "use client";
 
-import { useEffect, useState } from "react";
-
 import { FindingDetail } from "@/components/findings/table";
 import { FindingProps } from "@/types";
 
 export const DataTableRowDetails = ({ finding }: { finding: FindingProps }) => {
-  console.log(finding);
   return <FindingDetail findingDetails={finding} />;
 };

components/findings/table/finding-detail.tsx

@@ -1,97 +1,125 @@
 "use client";
 
-import { Card, CardBody, CardHeader, Divider } from "@nextui-org/react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+} from "@nextui-org/react";
 
-import { DateWithTime, SnippetId } from "@/components/ui/entities";
-import { StatusBadge } from "@/components/ui/table/status-badge";
 import { FindingProps } from "@/types";
-import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react";
 
-export const FindingDetail = ({ findingDetails }: { findingDetails: FindingProps }) => {
+export const FindingDetail = ({
+  findingDetails,
+}: {
+  findingDetails: FindingProps;
+}) => {
   const finding = findingDetails;
-  console.log(finding)
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
-
         <Table aria-label="Example static collection table">
-      <TableHeader>
-        <TableColumn>Name </TableColumn>
-        <TableColumn>Value</TableColumn>
-      </TableHeader>
-      <TableBody>
-        <TableRow key="1">
-          <TableCell>Resource ID</TableCell>
-          <TableCell>{finding.relationships.resource.id}</TableCell>
-        </TableRow>
-        <TableRow key="2">
-          <TableCell>Resource ARN</TableCell>
-          <TableCell>{finding.relationships.resource.attributes.uid}</TableCell>
-        </TableRow>
-        <TableRow key="3">
-          <TableCell>Check ID</TableCell>
-          <TableCell>{finding.attributes.check_id}</TableCell>
-        </TableRow>
-        <TableRow key="4">
-          <TableCell>Types</TableCell>
-          <TableCell>{finding.attributes.check_metadata.checktype}</TableCell>
-        </TableRow>
-        <TableRow key="5">
-          <TableCell>Scan time</TableCell>
-          <TableCell>{finding.attributes.inserted_at}</TableCell>
-        </TableRow>
-        <TableRow key="6">
-          <TableCell>Prowler Finding ID</TableCell>
-          <TableCell>{finding.relationships.resource.attributes.uid}</TableCell>
-        </TableRow>
-        <TableRow key="7">
-          <TableCell>Severity</TableCell>
-          <TableCell>{finding.id}</TableCell>
-        </TableRow>
-        <TableRow key="8">
-          <TableCell>Status</TableCell>
-          <TableCell>{finding.attributes.status}</TableCell>
-        </TableRow>
-        <TableRow key="9">
-          <TableCell>Region</TableCell>
-          <TableCell>{finding.relationships.resource.attributes.region}</TableCell>
-        </TableRow>
-        <TableRow key="10">
-          <TableCell>Service</TableCell>
-          <TableCell>{finding.relationships.resource.attributes.service}</TableCell>
-        </TableRow>
-        <TableRow key="11">
-          <TableCell>Account</TableCell>
-          <TableCell>{finding.relationships.provider.attributes.uid}</TableCell>
-        </TableRow>
-        <TableRow key="12">
-          <TableCell>Details</TableCell>
-          <TableCell>{finding.attributes.status_extended}</TableCell>
-        </TableRow>
-        <TableRow key="13">
-          <TableCell>Risk</TableCell>
-          <TableCell>{finding.attributes.check_metadata.risk}</TableCell>
-        </TableRow>
-        <TableRow key="14">
-          <TableCell>Recommendation</TableCell>
-          <TableCell>{finding.attributes.check_metadata.remediation.recommendation.text}</TableCell>
-        </TableRow>
-        <TableRow key="15">
-          <TableCell>CLI</TableCell>
-          <TableCell>{finding.attributes.check_metadata.remediation.code.cli}</TableCell>
-        </TableRow>
-        <TableRow key="16">
-          <TableCell>Other</TableCell>
-          <TableCell>{finding.attributes.check_metadata.remediation.code.other}</TableCell>
-        </TableRow>
-        <TableRow key="17">
-          <TableCell>Terraform</TableCell>
-          <TableCell>{finding.attributes.check_metadata.remediation.code.terraform}</TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-       
-    </div>
+          <TableHeader>
+            <TableColumn>Name </TableColumn>
+            <TableColumn>Value</TableColumn>
+          </TableHeader>
+          <TableBody>
+            <TableRow key="1">
+              <TableCell>Resource ID</TableCell>
+              <TableCell>{finding.relationships.resource.id}</TableCell>
+            </TableRow>
+            <TableRow key="2">
+              <TableCell>Resource ARN</TableCell>
+              <TableCell>
+                {finding.relationships.resource.attributes.uid}
+              </TableCell>
+            </TableRow>
+            <TableRow key="3">
+              <TableCell>Check ID</TableCell>
+              <TableCell>{finding.attributes.check_id}</TableCell>
+            </TableRow>
+            <TableRow key="4">
+              <TableCell>Types</TableCell>
+              <TableCell>
+                {finding.attributes.check_metadata.checktype}
+              </TableCell>
+            </TableRow>
+            <TableRow key="5">
+              <TableCell>Scan time</TableCell>
+              <TableCell>{finding.attributes.inserted_at}</TableCell>
+            </TableRow>
+            <TableRow key="6">
+              <TableCell>Prowler Finding ID</TableCell>
+              <TableCell>
+                {finding.relationships.resource.attributes.uid}
+              </TableCell>
+            </TableRow>
+            <TableRow key="7">
+              <TableCell>Severity</TableCell>
+              <TableCell>{finding.id}</TableCell>
+            </TableRow>
+            <TableRow key="8">
+              <TableCell>Status</TableCell>
+              <TableCell>{finding.attributes.status}</TableCell>
+            </TableRow>
+            <TableRow key="9">
+              <TableCell>Region</TableCell>
+              <TableCell>
+                {finding.relationships.resource.attributes.region}
+              </TableCell>
+            </TableRow>
+            <TableRow key="10">
+              <TableCell>Service</TableCell>
+              <TableCell>
+                {finding.relationships.resource.attributes.service}
+              </TableCell>
+            </TableRow>
+            <TableRow key="11">
+              <TableCell>Account</TableCell>
+              <TableCell>
+                {finding.relationships.provider.attributes.uid}
+              </TableCell>
+            </TableRow>
+            <TableRow key="12">
+              <TableCell>Details</TableCell>
+              <TableCell>{finding.attributes.status_extended}</TableCell>
+            </TableRow>
+            <TableRow key="13">
+              <TableCell>Risk</TableCell>
+              <TableCell>{finding.attributes.check_metadata.risk}</TableCell>
+            </TableRow>
+            <TableRow key="14">
+              <TableCell>Recommendation</TableCell>
+              <TableCell>
+                {
+                  finding.attributes.check_metadata.remediation.recommendation
+                    .text
+                }
+              </TableCell>
+            </TableRow>
+            <TableRow key="15">
+              <TableCell>CLI</TableCell>
+              <TableCell>
+                {finding.attributes.check_metadata.remediation.code.cli}
+              </TableCell>
+            </TableRow>
+            <TableRow key="16">
+              <TableCell>Other</TableCell>
+              <TableCell>
+                {finding.attributes.check_metadata.remediation.code.other}
+              </TableCell>
+            </TableRow>
+            <TableRow key="17">
+              <TableCell>Terraform</TableCell>
+              <TableCell>
+                {finding.attributes.check_metadata.remediation.code.terraform}
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
     </div>
   );
 };

components/findings/table/index.ts

@@ -1,5 +1,5 @@
 export * from "./column-findings";
 export * from "./data-table-row-actions";
 export * from "./data-table-row-details";
-export * from "./skeleton-table-findings";
 export * from "./finding-detail";
+export * from "./skeleton-table-findings";

components/scans/launch-workflow/index.ts

@@ -1,2 +1,2 @@
-export * from "./launch-scan-workflow";
+export * from "./launch-scan-workflow-form";
 export * from "./select-scan-provider";

components/scans/launch-workflow/launch-scan-workflow-form.tsx

@@ -39,11 +39,12 @@ export const LaunchScanWorkflow = ({
   const isLoading = form.formState.isSubmitting;
 
   const onSubmitClient = async (values: z.infer<typeof formSchema>) => {
+    const formValues = { ...values };
+
     const formData = new FormData();
-    console.log(values);
 
     // Loop through form values and add to formData
-    Object.entries(values).forEach(
+    Object.entries(formValues).forEach(
       ([key, value]) =>
         value !== undefined &&
         formData.append(

components/scans/table/scan-detail.tsx

@@ -23,7 +23,11 @@ export const ScanDetail = ({ scanDetails }: ScanDetailsProps) => {
           <h2 className="text-2xl font-bold">Scan Details</h2>
         </div>
 
-        <StatusBadge size="lg" status={scanOnDemand.state} />
+        <StatusBadge
+          size="lg"
+          status={scanOnDemand.state}
+          loadingProgress={scanOnDemand.progress}
+        />
       </div>
       <Divider />
       <div className="relative z-0 flex w-full flex-col justify-between gap-4 overflow-auto rounded-large bg-content1 p-4 shadow-small">
@@ -156,7 +160,7 @@ export const ScanDetail = ({ scanDetails }: ScanDetailsProps) => {
 
               <DetailItem
                 label="Checks to Execute"
-                value={taskDetails.attributes.task_args.checks_to_execute.join(
+                value={taskDetails.attributes.task_args.checks_to_execute?.join(
                   ", ",
                 )}
               />

components/scans/table/scans/column-get-scans.tsx

@@ -4,7 +4,7 @@ import { ColumnDef } from "@tanstack/react-table";
 import { useSearchParams } from "next/navigation";
 
 import { InfoIcon } from "@/components/icons";
-import { DateWithTime, EntityInfoShort } from "@/components/ui/entities";
+import { DateWithTime, SnippetId } from "@/components/ui/entities";
 import { TriggerSheet } from "@/components/ui/sheet";
 import { DataTableColumnHeader, StatusBadge } from "@/components/ui/table";
 import { ScanProps } from "@/types";
@@ -18,30 +18,16 @@ const getScanData = (row: { original: ScanProps }) => {
 
 export const ColumnGetScans: ColumnDef<ScanProps>[] = [
   {
-    accessorKey: "name",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title={"Name"} param="name" />
-    ),
+    accessorKey: "started_at",
+    header: () => <p className="pr-8">Started at</p>,
     cell: ({ row }) => {
       const {
-        attributes: { name },
+        attributes: { started_at },
       } = getScanData(row);
-      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>;
-    },
-  },
 
+      return <DateWithTime dateTime={started_at} />;
+    },
+  },
   {
     accessorKey: "status",
     header: ({ column }) => (
@@ -51,7 +37,32 @@ export const ColumnGetScans: ColumnDef<ScanProps>[] = [
       const {
         attributes: { state },
       } = getScanData(row);
-      return <StatusBadge status={state} />;
+      return (
+        <StatusBadge
+          status={state}
+          loadingProgress={row.original.attributes.progress}
+        />
+      );
+    },
+  },
+  // {
+  //   accessorKey: "scanner_args",
+  //   header: "Scanner Args",
+  //   cell: ({ row }) => {
+  //     const {
+  //       attributes: { scanner_args },
+  //     } = getScanData(row);
+  //     return <p className="font-medium">{scanner_args?.only_logs}</p>;
+  //   },
+  // },
+  {
+    accessorKey: "resources",
+    header: "Resources",
+    cell: ({ row }) => {
+      const {
+        attributes: { unique_resource_count },
+      } = getScanData(row);
+      return <p className="font-medium">{unique_resource_count}</p>;
     },
   },
   {
@@ -70,29 +81,14 @@ export const ColumnGetScans: ColumnDef<ScanProps>[] = [
       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"
+        param="updated_at"
       />
     ),
     cell: ({ row }) => {
@@ -103,23 +99,38 @@ export const ColumnGetScans: ColumnDef<ScanProps>[] = [
     },
   },
   {
-    accessorKey: "scanner_args",
-    header: "Scanner Args",
+    accessorKey: "trigger",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={"Type"} param="trigger" />
+    ),
     cell: ({ row }) => {
       const {
-        attributes: { scanner_args },
+        attributes: { trigger },
       } = getScanData(row);
-      return <p className="font-medium">{scanner_args?.only_logs}</p>;
+      return <p>{trigger}</p>;
+    },
+  },
+
+  {
+    accessorKey: "id",
+    header: () => <span>ID</span>,
+    cell: ({ row }) => {
+      return <SnippetId entityId={row.original.id} />;
     },
   },
   {
-    accessorKey: "resources",
-    header: "Resources",
+    accessorKey: "name",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={"Name"} param="name" />
+    ),
     cell: ({ row }) => {
       const {
-        attributes: { unique_resource_count },
+        attributes: { name },
       } = getScanData(row);
-      return <p className="font-medium">{unique_resource_count}</p>;
+      if (name.length === 0) {
+        return <span className="font-medium">-</span>;
+      }
+      return <span className="font-medium">{name}</span>;
     },
   },
   {

components/ui/table/status-badge.tsx

@@ -1,4 +1,4 @@
-import { Chip } from "@nextui-org/react";
+import { Chip, CircularProgress } from "@nextui-org/react";
 import React from "react";
 
 export type Status =
@@ -24,22 +24,41 @@ const statusColorMap: Record<
 export const StatusBadge = ({
   status,
   size = "sm",
+  loadingProgress,
   ...props
 }: {
   status: Status;
   size?: "sm" | "md" | "lg";
+  loadingProgress?: number;
 }) => {
   const color = statusColorMap[status as keyof typeof statusColorMap];
 
   return (
     <Chip
-      className="gap-1 border-none capitalize text-default-600"
+      className="gap-1 border-none px-2 py-4 capitalize text-default-600"
       size={size}
       variant="flat"
       color={color}
       {...props}
     >
-      {status}
+      {status === "executing" ? (
+        <div className="flex items-center gap-1">
+          <CircularProgress
+            size="md"
+            classNames={{
+              svg: "h-7 w-7 drop-shadow-md text-prowler-theme-green",
+              indicator: "stroke-prowler-theme-green",
+              track: "stroke-prowler-theme-green/10",
+            }}
+            aria-label="Loading..."
+            value={loadingProgress}
+            showValueLabel={true}
+          />
+          executing
+        </div>
+      ) : (
+        status
+      )}
     </Chip>
   );
 };

lib/helper.ts

@@ -30,7 +30,6 @@ export async function checkTaskStatus(
         await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY));
         break;
       default:
-        console.warn(`Unexpected task state: ${state}`);
         return { completed: false, error: "Unexpected task state" };
     }
   }