feat: services view

feat: services view
This commit is contained in:
Pedro De Castro
2024-11-08 12:48:35 +01:00
committed by GitHub
9 changed files with 308 additions and 52 deletions
-39
View File
@@ -1,39 +0,0 @@
"use server";
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
import { parseStringify } from "@/lib";
export const getService = async ({ page = 1 }) => {
if (isNaN(Number(page)) || page < 1) redirect("/services");
const keyServer = process.env.SITE_URL;
try {
const services = await fetch(
`${keyServer}/api/services?page%5Bnumber%5D=${page}`,
);
const data = await services.json();
const parsedData = parseStringify(data);
revalidatePath("/services");
return parsedData;
} catch (error) {
console.error("Error fetching services:", error);
return undefined;
}
};
export const getErrorMessage = (error: unknown): 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;
};
+1
View File
@@ -0,0 +1 @@
export * from "./services";
+101
View File
@@ -0,0 +1,101 @@
"use server";
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
import { auth } from "@/auth.config";
import { getErrorMessage, parseStringify } from "@/lib";
import { parse } from "path";
export const getServices = async ({}) => {
const session = await auth();
const keyServer = process.env.API_BASE_URL;
const servicesToFetch = [
{ id: "accessanalyzer", alias: "IAM Access Analyzer" },
{ id: "account", alias: "AWS Account" },
{ id: "acm", alias: "AWS Certificate Manager" },
{ id: "apigateway", alias: "Amazon API Gateway" },
{ id: "apigatewayv2", alias: "Amazon API Gateway V2" },
{ id: "athena", alias: "Amazon Athena" },
{ id: "autoscaling", alias: "Amazon EC2 Auto Scaling" },
{ id: "awslambda", alias: "AWS Lambda" },
{ id: "backup", alias: "AWS Backup" },
{ id: "cloudformation", alias: "AWS CloudFormation" },
{ id: "cloudfront", alias: "Amazon CloudFront" },
{ id: "cloudtrail", alias: "AWS CloudTrail" },
{ id: "cloudwatch", alias: "Amazon CloudWatch" },
{ id: "codeartifact", alias: "AWS CodeArtifact" },
{ id: "codebuild", alias: "AWS CodeBuild" },
{ id: "config", alias: "AWS Config" },
{ id: "dlm", alias: "Amazon Data Lifecycle Manager" },
{ id: "drs", alias: "AWS Data Replication Service" },
{ id: "dynamodb", alias: "Amazon DynamoDB" },
{ id: "ec2", alias: "Amazon EC2" },
{ id: "ecr", alias: "Amazon ECR" },
{ id: "ecs", alias: "Amazon ECS" },
{ id: "efs", alias: "Amazon EFS" },
{ id: "eks", alias: "Amazon EKS" },
{ id: "elasticache", alias: "Amazon ElastiCache" },
{ id: "elb", alias: "Elastic Load Balancing" },
{ id: "elbv2", alias: "Elastic Load Balancing v2" },
{ id: "emr", alias: "Amazon EMR" },
{ id: "fms", alias: "AWS Firewall Manager" },
{ id: "glacier", alias: "Amazon Glacier" },
{ id: "glue", alias: "AWS Glue" },
{ id: "guardduty", alias: "Amazon GuardDuty" },
{ id: "iam", alias: "AWS IAM" },
{ id: "inspector2", alias: "Amazon Inspector" },
{ id: "kms", alias: "AWS KMS" },
{ id: "macie", alias: "Amazon Macie" },
{ id: "networkfirewall", alias: "AWS Network Firewall" },
{ id: "organizations", alias: "AWS Organizations" },
{ id: "rds", alias: "Amazon RDS" },
{ id: "resourceexplorer2", alias: "AWS Resource Groups" },
{ id: "route53", alias: "Amazon Route 53" },
{ id: "s3", alias: "Amazon S3" },
{ id: "secretsmanager", alias: "AWS Secrets Manager" },
{ id: "securityhub", alias: "AWS Security Hub" },
{ id: "sns", alias: "Amazon SNS" },
{ id: "sqs", alias: "Amazon SQS" },
{ id: "ssm", alias: "AWS Systems Manager" },
{ id: "ssmincidents", alias: "AWS Systems Manager Incident Manager" },
{ id: "trustedadvisor", alias: "AWS Trusted Advisor" },
{ id: "vpc", alias: "Amazon VPC" },
{ id: "wafv2", alias: "AWS WAF" },
{ id: "wellarchitected", alias: "AWS Well-Architected Tool" }
];
const parsedData = [];
for (const service of servicesToFetch) {
const url = new URL(`${keyServer}/findings`);
url.searchParams.append("filter[service]", service.id);
url.searchParams.append("filter[status]", "FAIL");
try {
const response = await fetch(url.toString(), {
headers: {
Accept: "application/vnd.api+json",
Authorization: `Bearer ${session?.accessToken}`,
},
});
const data = await response.json();
const failFindings = data.meta.pagination.count;
parsedData.push({
service_id: service.id,
service_alias: service.alias,
fail_findings: failFindings,
});
} catch (error) {
console.error(`Error fetching data for service ${service.id}:`, error);
}
}
revalidatePath("/services");
return parsedData;
};
+6 -10
View File
@@ -1,8 +1,7 @@
import { Spacer } from "@nextui-org/react";
import { redirect } from "next/navigation";
import { Suspense } from "react";
import { getService } from "@/actions/services";
import { getServices } from "@/actions/services";
import { FilterControls } from "@/components/filters";
import { ServiceCard, ServiceSkeletonGrid } from "@/components/services";
import { Header } from "@/components/ui";
@@ -35,19 +34,16 @@ const SSRServiceGrid = async ({
}: {
searchParams: SearchParamsProps;
}) => {
const page = parseInt(searchParams.page?.toString() || "1", 10);
const servicesData = await getService({ page });
const servicesData = await getServices(searchParams);
const [services] = await Promise.all([servicesData]);
if (services?.errors) redirect("/services");
return (
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{services.services?.data.map((service: any) => (
{services?.map((service: any) => (
<ServiceCard
key={service.id}
fidingsFailed={service.attributes.findings.failed}
serviceAlias={service.attributes.alias}
key={service.service_id}
fidingsFailed={service.fail_findings}
serviceAlias={service.service_alias}
/>
))}
</div>
+18 -1
View File
@@ -4,8 +4,10 @@ import { ColumnDef } from "@tanstack/react-table";
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",
@@ -133,6 +135,21 @@ export const ColumnFindings: ColumnDef<FindingProps>[] = [
);
},
},
{
id: "moreInfo",
header: "Details",
cell: ({ row }) => {
return (
<TriggerSheet
triggerComponent={<PlusIcon />}
title="Scan Details"
description="View the scan details"
>
<DataTableRowDetails entityId={row.original.id} />
</TriggerSheet>
);
},
},
{
id: "actions",
cell: ({ row }) => {
@@ -0,0 +1,37 @@
"use client";
import { useEffect, useState } from "react";
import { getScan } from "@/actions/scans";
import { ScanDetail, SkeletonTableScans } from "@/components/scans/table";
import { ScanProps } from "@/types";
export const DataTableRowDetails = ({ entityId }: { entityId: string }) => {
const [scanDetails, setScanDetails] = useState<ScanProps | null>(null);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const fetchScanDetails = async () => {
try {
const result = await getScan(entityId);
setScanDetails(result?.data);
} catch (error) {
console.error("Error fetching scan details:", error);
} finally {
setIsLoading(false);
}
};
fetchScanDetails();
}, [entityId]);
if (isLoading) {
return <SkeletonTableScans />;
}
if (!scanDetails) {
return <div>No scan details available</div>;
}
return <ScanDetail scanDetails={scanDetails} />;
};
@@ -0,0 +1,142 @@
"use client";
import { Card, CardBody, CardHeader, Divider } from "@nextui-org/react";
import { DateWithTime, SnippetId } from "@/components/ui/entities";
import { StatusBadge } from "@/components/ui/table/status-badge";
import { ScanProps } from "@/types";
export const FindingDetail = ({ findingDetails }: { findingDetails: ScanProps }) => {
const scanOnDemand = findingDetails.attributes;
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<div className="flex flex-col items-baseline md:flex-row md:gap-x-4">
<h2 className="text-lg font-black uppercase">Scan Details - </h2>
<p>{scanOnDemand.name}</p>
</div>
<StatusBadge size="lg" status={scanOnDemand.state} />
</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">
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<div className="space-y-4">
<DetailItem
label="ID"
value={<SnippetId label="Type" entityId={findingDetails.id} />}
/>
<DetailItem label="Trigger" value={scanOnDemand.trigger} />
<DetailItem
label="Resource Count"
value={scanOnDemand.unique_resource_count.toString()}
/>
<DetailItem label="Progress" value={`${scanOnDemand.progress}%`} />
<DetailItem
label="Duration"
value={`${scanOnDemand.duration} seconds`}
/>
</div>
<div className="space-y-4">
<DateItem
label="Started At"
value={
scanOnDemand.started_at ? (
<DateWithTime dateTime={scanOnDemand.started_at.toString()} />
) : (
"Not Started"
)
}
/>
<DateItem
label="Completed At"
value={
scanOnDemand.completed_at ? (
<DateWithTime
dateTime={scanOnDemand.completed_at.toString()}
/>
) : (
"Not Started"
)
}
/>
<DateItem
label="Scheduled At"
value={
scanOnDemand.scheduled_at ? (
<DateWithTime
dateTime={scanOnDemand.scheduled_at.toString()}
/>
) : (
"Not Scheduled"
)
}
/>
<DetailItem
label="Provider ID"
value={
<SnippetId
label="Provider ID"
entityId={findingDetails.relationships.provider.data.id}
/>
}
/>
<DetailItem
label="Task ID"
value={
<SnippetId
label="Task ID"
entityId={findingDetails.relationships.task.data.id}
/>
}
/>
</div>
</div>
</div>
<Card className="relative w-full border-small border-default-100 p-3 shadow-lg">
<CardHeader className="py-2">
<h2 className="text-2xl font-bold">Scan Arguments</h2>
</CardHeader>
<Divider />
<CardBody className="p-4">
<DetailItem
label="Checks"
value={
(scanOnDemand.scanner_args as any)?.checks_to_execute?.join(
", ",
) || "N/A"
}
/>
</CardBody>
</Card>
</div>
);
};
const DateItem = ({
label,
value,
}: {
label: string;
value: React.ReactNode;
}) => (
<div className="flex items-center justify-between">
<span className="font-semibold text-default-500">{label}:</span>
<span className="text-default-700">{value}</span>
</div>
);
const DetailItem = ({
label,
value,
}: {
label: string;
value: React.ReactNode;
}) => (
<div className="flex items-center justify-between">
<span className="font-semibold text-default-500">{label}:</span>
<span className="text-default-700">{value}</span>
</div>
);
+1
View File
@@ -1,3 +1,4 @@
export * from "./column-findings";
export * from "./data-table-row-actions";
export * from "./data-table-row-details";
export * from "./skeleton-table-findings";
+2 -2
View File
@@ -20,7 +20,7 @@ export const ServiceCard: React.FC<CardServiceProps> = ({
<small className="text-default-500">
{fidingsFailed > 0
? `${fidingsFailed} Failed Findings`
: "All findings passed"}
: "No failed findings"}
</small>
</div>
</div>
@@ -39,7 +39,7 @@ export const ServiceCard: React.FC<CardServiceProps> = ({
radius="full"
size="md"
>
{fidingsFailed > 0 ? fidingsFailed : "All passed"}
{fidingsFailed > 0 ? fidingsFailed : ""}
</Chip>
</CardBody>
</Card>