chore: add table for schedule scans

This commit is contained in:
Pablo Lara
2024-10-10 15:24:50 +02:00
parent 5b51653d78
commit d79e1d6c94
4 changed files with 185 additions and 32 deletions
+43 -4
View File
@@ -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}
/>
);
};
@@ -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} />;
},
},
];
+51 -28
View File
@@ -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 }) => {
+1
View File
@@ -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";