86 lines
3.3 KiB
TypeScript
86 lines
3.3 KiB
TypeScript
import React, { useState, useMemo } from 'react';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/Components/ui/card";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/Components/ui/select";
|
|
import {SecuritySummaryReportResultType} from "@/types/security-summary";
|
|
import VulnerabilityPieChart from "@/Components/VulnerabilityPieChart";
|
|
|
|
export default function VulnerabilitiesPassiveCard({reportData}: { reportData: SecuritySummaryReportResultType }) {
|
|
const vulnerabilityData = useMemo(() => [
|
|
{ name: 'High', value: reportData.n_vulns.passive.high, fill: 'hsl(var(--chart-4))' },
|
|
{ name: 'Medium', value: reportData.n_vulns.passive.medium, fill: 'hsl(var(--chart-5))' }
|
|
], [reportData]);
|
|
|
|
const [activeMetric, setActiveMetric] = useState(vulnerabilityData[0].name);
|
|
|
|
const activeIndex = useMemo(
|
|
() => vulnerabilityData.findIndex((item) => item.name === activeMetric),
|
|
[activeMetric, vulnerabilityData]
|
|
);
|
|
|
|
const metrics = useMemo(() => vulnerabilityData.map((item) => item.name), [vulnerabilityData]);
|
|
|
|
const chartConfig: any = {
|
|
'High': {
|
|
label: "High",
|
|
color: 'hsl(var(--chart-4))'
|
|
},
|
|
'Medium': {
|
|
label: "Medium",
|
|
color: 'hsl(var(--chart-5))'
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-0">
|
|
<div className="grid gap-1">
|
|
<CardTitle>Passive Vulnerabilities</CardTitle>
|
|
<CardDescription>Number of Passive Vulnerabilities</CardDescription>
|
|
</div>
|
|
<Select value={activeMetric} onValueChange={setActiveMetric}>
|
|
<SelectTrigger
|
|
className="ml-auto h-8 w-[180px] rounded-lg"
|
|
aria-label="Select security metric"
|
|
>
|
|
<SelectValue placeholder="Select metric" />
|
|
</SelectTrigger>
|
|
<SelectContent align="end" className="rounded-lg">
|
|
{metrics.map((metric) => (
|
|
<SelectItem
|
|
key={metric}
|
|
value={metric}
|
|
className="rounded-lg [&_span]:flex"
|
|
>
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<span
|
|
className="h-3 w-3 rounded-sm"
|
|
style={{
|
|
backgroundColor: chartConfig[metric]?.color
|
|
}}
|
|
/>
|
|
{chartConfig[metric].label}
|
|
</div>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-1 justify-center pb-0">
|
|
<VulnerabilityPieChart vulnerabilityData={vulnerabilityData} activeIndex={activeIndex} />
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|