Feature/v5 tweaks UI v4 (#5982)

prowler-cloud · Dec 1, 2024 · 67f3adb · 67f3adb
1 parent 9b018ff
commit 67f3adb
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 28 deletions.
diff --git a/ui/actions/scans/scans.ts b/ui/actions/scans/scans.ts
@@ -110,6 +110,49 @@ export const scanOnDemand = async (formData: FormData) => {
     revalidatePath("/scans");
     return parseStringify(data);
   } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+    return {
+      error: getErrorMessage(error),
+    };
+  }
+};
+
+export const scheduleDaily = async (formData: FormData) => {
+  const session = await auth();
+  const keyServer = process.env.API_BASE_URL;
+
+  const providerId = formData.get("providerId");
+
+  const url = new URL(`${keyServer}/schedules/daily`);
+
+  try {
+    const response = await fetch(url.toString(), {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/vnd.api+json",
+        Accept: "application/vnd.api+json",
+        Authorization: `Bearer ${session?.accessToken}`,
+      },
+      body: JSON.stringify({
+        data: {
+          type: "daily-schedules",
+          attributes: {
+            provider_id: providerId,
+          },
+        },
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to schedule daily: ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    revalidatePath("/scans");
+    return parseStringify(data);
+  } catch (error) {
+    // eslint-disable-next-line no-console
     console.error(error);
     return {
       error: getErrorMessage(error),
@@ -148,6 +191,7 @@ export const updateScan = async (formData: FormData) => {
     revalidatePath("/scans");
     return parseStringify(data);
   } catch (error) {
+    // eslint-disable-next-line no-console
     console.error(error);
     return {
       error: getErrorMessage(error),

diff --git a/ui/components/overview/findings-by-status-chart/findings-by-status-chart.tsx b/ui/components/overview/findings-by-status-chart/findings-by-status-chart.tsx
@@ -3,6 +3,7 @@
 import { Card, CardBody } from "@nextui-org/react";
 import { Chip } from "@nextui-org/react";
 import { TrendingUp } from "lucide-react";
+import Link from "next/link";
 import React, { useMemo } from "react";
 import { Label, Pie, PieChart } from "recharts";
 
@@ -144,18 +145,23 @@ export const FindingsByStatusChart: React.FC<FindingsByStatusChartProps> = ({
 
           <div className="grid w-full grid-cols-2 justify-items-center gap-6">
             <div className="flex flex-col gap-2">
-              <div className="flex items-center space-x-2">
-                <Chip
-                  className="h-5"
-                  variant="flat"
-                  startContent={<SuccessIcon size={18} />}
-                  color="success"
-                  radius="lg"
-                  size="md"
+              <div className="flex items-center space-x-2 self-end">
+                <Link
+                  href="/findings?filter[status]=PASS"
+                  className="flex items-center space-x-2"
                 >
-                  {chartData[0].number}
-                </Chip>
-                <span>{updatedChartData[0].percent}</span>
+                  <Chip
+                    className="h-5"
+                    variant="flat"
+                    startContent={<SuccessIcon size={18} />}
+                    color="success"
+                    radius="lg"
+                    size="md"
+                  >
+                    {chartData[0].number}
+                  </Chip>
+                  <span>{updatedChartData[0].percent}</span>
+                </Link>
               </div>
               <div className="text-muted-foreground flex items-center gap-1 text-xs font-medium leading-none">
                 {pass_new > 0 ? (
@@ -172,18 +178,23 @@ export const FindingsByStatusChart: React.FC<FindingsByStatusChartProps> = ({
             </div>
 
             <div className="flex flex-col gap-2">
-              <div className="flex items-center space-x-2">
-                <Chip
-                  className="h-5"
-                  variant="flat"
-                  startContent={<NotificationIcon size={18} />}
-                  color="danger"
-                  radius="lg"
-                  size="md"
+              <div className="flex items-center align-middle">
+                <Link
+                  href="/findings?filter[status]=FAIL"
+                  className="flex items-center space-x-2"
                 >
-                  {chartData[1].number}
-                </Chip>
-                <span>{updatedChartData[1].percent}</span>
+                  <Chip
+                    className="h-5"
+                    variant="flat"
+                    startContent={<NotificationIcon size={18} />}
+                    color="danger"
+                    radius="lg"
+                    size="md"
+                  >
+                    {chartData[1].number}
+                  </Chip>
+                  <span>{updatedChartData[1].percent}</span>
+                </Link>
               </div>
               <div className="text-muted-foreground flex items-center gap-1 text-xs font-medium leading-none">
                 +{fail_new} fail findings from last day{" "}

diff --git a/ui/components/providers/workflow/forms/test-connection-form.tsx b/ui/components/providers/workflow/forms/test-connection-form.tsx
@@ -12,7 +12,7 @@ import {
   checkConnectionProvider,
   deleteCredentials,
 } from "@/actions/providers";
-import { scanOnDemand } from "@/actions/scans";
+import { scheduleDaily } from "@/actions/scans";
 import { getTask } from "@/actions/task/tasks";
 import { CheckIcon, RocketIcon } from "@/components/icons";
 import { useToast } from "@/components/ui";
@@ -116,8 +116,7 @@ export const TestConnectionForm = ({
 
         if (connected) {
           try {
-            const data = await scanOnDemand(formData);
-
+            const data = await scheduleDaily(formData);
             if (data.error) {
               setApiErrorMessage(data.error);
               form.setError("providerId", {
@@ -200,7 +199,7 @@ export const TestConnectionForm = ({
 
         {apiErrorMessage && (
           <div className="mt-4 rounded-md bg-red-100 p-3 text-danger">
-            <p>{`Provider ID ${apiErrorMessage.toLowerCase()}. Please check and try again.`}</p>
+            <p>{`Provider ID ${apiErrorMessage?.toLowerCase()}. Please check and try again.`}</p>
           </div>
         )}
 

diff --git a/ui/components/scans/no-providers-added.tsx b/ui/components/scans/no-providers-added.tsx
@@ -7,7 +7,7 @@ import { CustomButton } from "../ui/custom";
 export const NoProvidersAdded = () => {
   return (
     <div className="flex h-screen items-center justify-center">
-      <Card shadow="sm" className="w-full max-w-md">
+      <Card shadow="sm" className="w-full max-w-md dark:bg-prowler-blue-400">
         <CardBody className="space-y-6 p-6 text-center">
           <h2 className="text-xl font-bold">No Cloud Accounts Configured</h2>
           <p className="text-md text-gray-600">

diff --git a/ui/components/scans/no-providers-connected.tsx b/ui/components/scans/no-providers-connected.tsx
@@ -8,7 +8,7 @@ import { CustomButton } from "../ui/custom";
 export const NoProvidersConnected = () => {
   return (
     <div className="flex items-center justify-center">
-      <Card shadow="sm" className="w-full max-w-md">
+      <Card shadow="sm" className="w-full max-w-md dark:bg-prowler-blue-400">
         <CardBody className="space-y-6 p-6 text-center">
           <h2 className="text-xl font-bold">No Cloud Accounts Connected</h2>
           <p className="text-md text-gray-600">