ben.carrasco/prowler
1
0
Fork 0
mirror of https://github.com/prowler-cloud/prowler.git synced 2026-07-23 12:31:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Scan on demand can be executed now from the UI

Browse Source
This commit is contained in:
Pablo Lara
2024-10-11 15:33:03 +02:00
parent 69a1468c18
commit f29e87f45b
11 changed files with 383 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
actions/providers/providers.ts
+1 -16
View File
@@ -4,7 +4,7 @@ import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
import { auth } from "@/auth.config";
import { parseStringify } from "@/lib";
import { getErrorMessage, parseStringify } from "@/lib";
export const getProviders = async ({
page = 1,
@@ -198,18 +198,3 @@ export const deleteProvider = async (formData: FormData) => {
};
}
};
export const getErrorMessage = async (error: unknown): Promise<string> => {
let message: string;
if (error instanceof Error) {
message = error.message;
} else if (error && typeof error === "object" && "message" in error) {
message = String(error.message);
} else if (typeof error === "string") {
message = error;
} else {
message = "Oops! Something went wrong.";
}
return message;
};
actions/scans/scans.ts
+49 -1
View File
@@ -4,7 +4,7 @@ import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
import { auth } from "@/auth.config";
import { parseStringify } from "@/lib";
import { getErrorMessage, parseStringify } from "@/lib";
export const getScans = async ({
page = 1,
@@ -46,3 +46,51 @@ export const getScans = async ({
return undefined;
}
};
export const scanOnDemand = async (formData: FormData) => {
const session = await auth();
const keyServer = process.env.API_BASE_URL;
const providerId = formData.get("providerId");
const scanName = formData.get("scanName");
const url = new URL(`${keyServer}/scans`);
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: "Scan",
attributes: {
name: scanName,
scanner_args: {
checks_to_execute: ["accessanalyzer_enabled"],
},
},
relationships: {
provider: {
data: {
type: "Provider",
id: providerId,
},
},
},
},
}),
});
const data = await response.json();
revalidatePath("/scans");
return parseStringify(data);
} catch (error) {
console.error(error);
return {
error: getErrorMessage(error),
};
}
};
components/providers/table/data-table-row-actions.tsx
-3
View File
@@ -77,7 +77,6 @@ export function DataTableRowActions<ProviderProps>({
<DropdownItem
key="new"
description="Check the connection to the provider"
shortcut="⌘N"
textValue="Check Connection"
startContent={<AddNoteBulkIcon className={iconClasses} />}
>
@@ -86,7 +85,6 @@ export function DataTableRowActions<ProviderProps>({
<DropdownItem
key="edit"
description="Allows you to edit the provider"
shortcut="⌘⇧E"
textValue="Edit Provider"
startContent={<EditDocumentBulkIcon className={iconClasses} />}
onClick={() => setIsEditOpen(true)}
@@ -101,7 +99,6 @@ export function DataTableRowActions<ProviderProps>({
color="danger"
description="Delete the provider permanently"
textValue="Delete Provider"
shortcut="⌘⇧D"
startContent={
<DeleteDocumentBulkIcon
className={clsx(iconClasses, "!text-danger")}
components/scans/forms/index.ts
+2
View File
@@ -0,0 +1,2 @@
export * from "./scan-on-demand-form";
export * from "./schedule-form";
components/scans/forms/scan-on-demand-form.tsx
+126
View File
@@ -0,0 +1,126 @@
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { RocketIcon } from "lucide-react";
import { Dispatch, SetStateAction } from "react";
import { useForm } from "react-hook-form";
import * as z from "zod";
import { scanOnDemand } from "@/actions/scans";
import { useToast } from "@/components/ui";
import { CustomButton, CustomInput } from "@/components/ui/custom";
import { Form } from "@/components/ui/form";
import { onDemandScanFormSchema } from "@/types";
export const ScanOnDemandForm = ({
providerId,
scanName,
scannerArgs,
setIsOpen,
}: {
providerId: string;
scanName?: string;
scannerArgs?: { checksToExecute: string[] };
setIsOpen: Dispatch<SetStateAction<boolean>>;
}) => {
const formSchema = onDemandScanFormSchema();
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
providerId: providerId,
scanName: scanName,
scannerArgs: scannerArgs,
},
});
const { toast } = useToast();
const isLoading = form.formState.isSubmitting;
const onSubmitClient = async (values: z.infer<typeof formSchema>) => {
const formData = new FormData();
// Loop through form values and add to formData, converting objects to JSON strings
Object.entries(values).forEach(
([key, value]) =>
value !== undefined &&
formData.append(
key,
typeof value === "object" ? JSON.stringify(value) : value,
),
);
const data = await scanOnDemand(formData);
if (data?.errors && data.errors.length > 0) {
const error = data.errors[0];
const errorMessage = `${error.detail}`;
// show error
toast({
variant: "destructive",
title: "Oops! Something went wrong",
description: errorMessage,
});
} else {
toast({
title: "Success!",
description: "The scan was launched successfully.",
});
setIsOpen(false);
}
};
return (
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmitClient)}
className="flex flex-col space-y-4"
>
<input type="hidden" name="providerId" value={providerId} />
<div>
<CustomInput
control={form.control}
name="scanName"
type="text"
label="Scan Name"
labelPlacement="outside"
placeholder={scanName}
variant="bordered"
isRequired={false}
isInvalid={!!form.formState.errors.scanName}
/>
</div>
<div className="flex w-full justify-center sm:space-x-6">
<CustomButton
type="button"
ariaLabel="Cancel"
className="w-full bg-transparent"
variant="faded"
size="lg"
radius="lg"
onPress={() => setIsOpen(false)}
disabled={isLoading}
>
<span>Cancel</span>
</CustomButton>
<CustomButton
type="submit"
ariaLabel="Save"
className="w-full"
variant="solid"
color="action"
size="lg"
isLoading={isLoading}
startContent={!isLoading && <RocketIcon size={24} />}
>
{isLoading ? <>Loading</> : <span>Start now</span>}
</CustomButton>
</div>
</form>
</Form>
);
};
components/scans/forms/schedule-form.tsx
+112
View File
@@ -0,0 +1,112 @@
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { Dispatch, SetStateAction } from "react";
import { useForm } from "react-hook-form";
import * as z from "zod";
import { updateProvider } from "@/actions/providers";
import { SaveIcon } from "@/components/icons";
import { useToast } from "@/components/ui";
import { CustomButton, CustomInput } from "@/components/ui/custom";
import { Form } from "@/components/ui/form";
import { scheduleScanFormSchema } from "@/types";
export const ScheduleForm = ({
providerId,
scheduleDate,
setIsOpen,
}: {
providerId: string;
scheduleDate: string;
setIsOpen: Dispatch<SetStateAction<boolean>>;
}) => {
const formSchema = scheduleScanFormSchema();
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
providerId: providerId,
scheduleDate: scheduleDate,
},
});
const { toast } = useToast();
const isLoading = form.formState.isSubmitting;
const onSubmitClient = async (values: z.infer<typeof formSchema>) => {
const formData = new FormData();
Object.entries(values).forEach(
([key, value]) => value !== undefined && formData.append(key, value),
);
const data = await updateProvider(formData);
if (data?.errors && data.errors.length > 0) {
const error = data.errors[0];
const errorMessage = `${error.detail}`;
// show error
toast({
variant: "destructive",
title: "Oops! Something went wrong",
description: errorMessage,
});
} else {
toast({
title: "Success!",
description: "The scan was scheduled successfully.",
});
setIsOpen(false); // Close the modal on success
}
};
return (
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmitClient)}
className="flex flex-col space-y-4"
>
<input type="hidden" name="providerId" value={providerId} />
<CustomInput
control={form.control}
name="scheduleDate"
type="date"
label="Schedule Date"
labelPlacement="inside"
variant="bordered"
isRequired={false}
isInvalid={!!form.formState.errors.scheduleDate}
/>
<div className="flex w-full justify-center sm:space-x-6">
<CustomButton
type="button"
ariaLabel="Cancel"
className="w-full bg-transparent"
variant="faded"
size="lg"
radius="lg"
onPress={() => setIsOpen(false)}
disabled={isLoading}
>
<span>Cancel</span>
</CustomButton>
<CustomButton
type="submit"
ariaLabel="Save"
className="w-full"
variant="solid"
color="action"
size="lg"
isLoading={isLoading}
startContent={!isLoading && <SaveIcon size={24} />}
>
{isLoading ? <>Loading</> : <span>Schedule</span>}
</CustomButton>
</div>
</form>
</Form>
);
};
components/scans/table/data-table-row-actions.tsx
-3
View File
@@ -78,7 +78,6 @@ export function DataTableRowActions<ProviderProps>({
<DropdownItem
key="new"
description="Check the connection to the provider"
shortcut="⌘N"
textValue="Check Connection"
startContent={<AddNoteBulkIcon className={iconClasses} />}
>
@@ -88,7 +87,6 @@ export function DataTableRowActions<ProviderProps>({
<DropdownItem
key="edit"
description="Allows you to edit the provider"
shortcut="⌘⇧E"
textValue="Edit Provider"
startContent={<EditDocumentBulkIcon className={iconClasses} />}
onClick={() => setIsEditOpen(true)}
@@ -103,7 +101,6 @@ export function DataTableRowActions<ProviderProps>({
color="danger"
description="Delete the provider permanently"
textValue="Delete Provider"
shortcut="⌘⇧D"
startContent={
<DeleteDocumentBulkIcon
className={clsx(iconClasses, "!text-danger")}
components/scans/table/provider-scans/data-table-row-actions.tsx
+45 -63
View File
@@ -1,27 +1,20 @@
"use client";
import {
Button,
Dropdown,
DropdownItem,
DropdownMenu,
DropdownSection,
DropdownTrigger,
} from "@nextui-org/react";
import {
AddNoteBulkIcon,
DeleteDocumentBulkIcon,
EditDocumentBulkIcon,
} from "@nextui-org/shared-icons";
import { Row } from "@tanstack/react-table";
import clsx from "clsx";
import { CalendarClockIcon, RocketIcon } from "lucide-react";
import { useState } from "react";
import { AddIcon } from "@/components/icons";
import { CustomAlertModal, CustomButton } from "@/components/ui/custom";
// import { EditForm } from "../forms";
// import { DeleteForm } from "../forms/delete-form";
import { ScanOnDemandForm, ScheduleForm } from "../../forms";
interface DataTableRowActionsProps<ProviderProps> {
row: Row<ProviderProps>;
@@ -32,34 +25,41 @@ const iconClasses =
export function DataTableRowActions<ProviderProps>({
row,
}: DataTableRowActionsProps<ProviderProps>) {
const [isEditOpen, setIsEditOpen] = useState(false);
const [isDeleteOpen, setIsDeleteOpen] = useState(false);
const [isScanOnDemandOpen, setIsScanOnDemandOpen] = useState(false);
const [isScanScheduleOpen, setIsScanScheduleOpen] = useState(false);
const providerId = (row.original as { id: string }).id;
const scanName = (row.original as any).attributes?.name;
return (
<>
{/* <CustomAlertModal
isOpen={isEditOpen}
onOpenChange={setIsEditOpen}
title="Edit Provider"
description={"Edit the provider details"}
<CustomAlertModal
isOpen={isScanOnDemandOpen}
onOpenChange={setIsScanOnDemandOpen}
title="Start Scan On Demand"
description={"Start a scan on demand for this provider"}
>
<EditForm
<ScanOnDemandForm
providerId={providerId}
providerAlias={providerAlias}
setIsOpen={setIsEditOpen}
scanName={scanName}
setIsOpen={setIsScanOnDemandOpen}
/>
</CustomAlertModal> */}
{/* <CustomAlertModal
isOpen={isDeleteOpen}
onOpenChange={setIsDeleteOpen}
title="Are you absolutely sure?"
description="This action cannot be undone. This will permanently delete your provider account and remove your data from the server."
</CustomAlertModal>
<CustomAlertModal
isOpen={isScanScheduleOpen}
onOpenChange={setIsScanScheduleOpen}
title="Schedule Scan"
description={"Schedule a scan for this provider"}
>
<DeleteForm providerId={providerId} setIsOpen={setIsDeleteOpen} />
</CustomAlertModal> */}
<ScheduleForm
providerId={providerId}
scheduleDate={""}
setIsOpen={setIsScanScheduleOpen}
/>
</CustomAlertModal>
<div className="relative flex items-center justify-end gap-2">
<Dropdown className="shadow-xl" placement="bottom">
<Dropdown className="shadow-xl" placement="bottom-start">
<DropdownTrigger>
<CustomButton
className="w-full"
@@ -71,53 +71,35 @@ export function DataTableRowActions<ProviderProps>({
>
Start
</CustomButton>
{/* <Button radius="full" size="sm" variant="light">
bueno
</Button> */}
</DropdownTrigger>
<DropdownMenu
closeOnSelect
aria-label="Actions"
aria-label="Launch Scan"
color="default"
variant="flat"
>
<DropdownSection title="Actions">
<DropdownSection title="Start Scan On Demand">
<DropdownItem
key="new"
description="Check the connection to the provider"
shortcut="⌘N"
textValue="Check Connection"
startContent={<AddNoteBulkIcon className={iconClasses} />}
key="scanNow"
color="primary"
description="Allows you to start a scan on demand"
textValue="Start now"
startContent={<RocketIcon className={iconClasses} />}
onClick={() => setIsScanOnDemandOpen(true)}
>
{/* <CheckConnectionProvider id={providerId} /> */}
</DropdownItem>
<DropdownItem
key="edit"
description="Allows you to edit the provider"
shortcut="⌘⇧E"
textValue="Edit Provider"
startContent={<EditDocumentBulkIcon className={iconClasses} />}
onClick={() => setIsEditOpen(true)}
>
Edit Provider
Start now
</DropdownItem>
</DropdownSection>
<DropdownSection title="Danger zone">
<DropdownSection title="Schedule Scan">
<DropdownItem
key="delete"
className="text-danger"
color="danger"
description="Delete the provider permanently"
textValue="Delete Provider"
shortcut="⌘⇧D"
startContent={
<DeleteDocumentBulkIcon
className={clsx(iconClasses, "!text-danger")}
/>
}
onClick={() => setIsDeleteOpen(true)}
key="schedule"
color="primary"
description="Schedule a scan for this provider"
textValue="Schedule Scan"
startContent={<CalendarClockIcon className={iconClasses} />}
onClick={() => setIsScanScheduleOpen(true)}
>
Delete Provider
Schedule Scan
</DropdownItem>
</DropdownSection>
</DropdownMenu>
components/ui/entities/snippet-label.tsx
+16 -14
View File
@@ -12,19 +12,21 @@ export const SnippetLabel: React.FC<SnippetLabelProps> = ({
...props
}) => {
return (
<Snippet
className="m-0 flex items-center bg-transparent py-0"
color="default"
size="sm"
radius="lg"
hideSymbol
copyIcon={<CopyIcon size={16} />}
checkIcon={<DoneIcon size={16} />}
{...props}
>
<p className="no-scrollbar text-md mb-1 w-32 overflow-hidden overflow-x-scroll text-ellipsis whitespace-nowrap text-sm font-semibold">
{label}
</p>
</Snippet>
label !== "" && (
<Snippet
className="m-0 flex items-center bg-transparent py-0"
color="default"
size="sm"
radius="lg"
hideSymbol
copyIcon={<CopyIcon size={16} />}
checkIcon={<DoneIcon size={16} />}
{...props}
>
<p className="no-scrollbar text-md mb-1 w-32 overflow-hidden overflow-x-scroll text-ellipsis whitespace-nowrap text-sm font-semibold">
{label}
</p>
</Snippet>
)
);
};
lib/custom.ts
+15
View File
@@ -19,3 +19,18 @@ export function encryptKey(passkey: string) {
export function decryptKey(passkey: string) {
return atob(passkey);
}
export const getErrorMessage = async (error: unknown): Promise<string> => {
let message: string;
if (error instanceof Error) {
message = error.message;
} else if (error && typeof error === "object" && "message" in error) {
message = String(error.message);
} else if (typeof error === "string") {
message = error;
} else {
message = "Oops! Something went wrong.";
}
return message;
};
types/formSchemas.ts
+17
View File
@@ -1,5 +1,22 @@
import { z } from "zod";
export const onDemandScanFormSchema = () =>
z.object({
providerId: z.string(),
scanName: z.string().optional(),
scannerArgs: z
.object({
checksToExecute: z.array(z.string()),
})
.optional(),
});
export const scheduleScanFormSchema = () =>
z.object({
providerId: z.string(),
scheduleDate: z.string(),
});
export const addProviderFormSchema = z.object({
providerType: z.string(),
providerAlias: z.string(),