Tips-Of-Mine/GLPI-Plugin-CVE-Prototype
2
0
Fork 0
mirror of https://github.com/tips-of-mine/GLPI-Plugin-CVE-Prototype.git synced 2025-06-27 14:48:45 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add device vulnerability alerts to Dashboard

Browse Source
This commit is contained in:
tips-of-mine
2025-05-31 10:14:15 +02:00
committed by GitHub
parent 45deec6ac1
commit 0e7bbdb931
3 changed files with 98 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/Dashboard.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { PieChart as ChartPie, ShieldAlert, Clock, FileText } from 'lucide-react';
import { PieChart as ChartPie, ShieldAlert, Clock, FileText, Laptop } from 'lucide-react';
import { mockCVEs } from '../data/mockData';
const severityColors = {
@ -23,6 +23,15 @@ const severityCounts = {
LOW: mockCVEs.filter(cve => cve.severity === 'LOW').length,
};
// Mock data for device alerts
const deviceAlerts = [
{ id: 1, name: 'Windows Server 2019', alerts: 12, criticalAlerts: 3, highAlerts: 6 },
{ id: 2, name: 'Ubuntu 20.04 LTS', alerts: 8, criticalAlerts: 2, highAlerts: 3 },
{ id: 3, name: 'macOS Monterey', alerts: 5, criticalAlerts: 0, highAlerts: 2 },
{ id: 4, name: 'Cisco IOS Router', alerts: 7, criticalAlerts: 4, highAlerts: 2 },
{ id: 5, name: 'Oracle Database Server', alerts: 9, criticalAlerts: 1, highAlerts: 5 }
];
const Dashboard = () => {
return (
<div className="p-6">
@ -93,7 +102,7 @@ const Dashboard = () => {
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
<div className="col-span-2 bg-white rounded-lg shadow">
<div className="p-6 border-b border-gray-200">
<h2 className="text-xl font-semibold">Recent Vulnerabilities</h2>
@ -169,6 +178,72 @@ const Dashboard = () => {
</div>
</div>
</div>
{/* Device Vulnerability Alerts Section */}
<div className="bg-white rounded-lg shadow mb-6">
<div className="p-6 border-b border-gray-200">
<h2 className="text-xl font-semibold flex items-center">
<Laptop className="h-5 w-5 mr-2 text-gray-500" />
Alerts by Device
</h2>
</div>
<div className="p-6">
<div className="overflow-x-auto">
<table className="min-w-full">
<thead>
<tr className="bg-gray-50">
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Device</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Alerts</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Critical</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">High</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"></th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{deviceAlerts.map((device) => (
<tr key={device.id} className="hover:bg-gray-50">
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
{device.name}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{device.alerts}
</td>
<td className="px-6 py-4 whitespace-nowrap">
{device.criticalAlerts > 0 && (
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
{device.criticalAlerts}
</span>
)}
{device.criticalAlerts === 0 && (
<span className="text-sm text-gray-400">0</span>
)}
</td>
<td className="px-6 py-4 whitespace-nowrap">
{device.highAlerts > 0 && (
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
{device.highAlerts}
</span>
)}
{device.highAlerts === 0 && (
<span className="text-sm text-gray-400">0</span>
)}
</td>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<a href="#" className="text-blue-600 hover:text-blue-900">View</a>
</td>
</tr>
))}
</tbody>
</table>
</div>
<div className="mt-4 text-right">
<a href="#" className="text-blue-600 hover:text-blue-900 text-sm font-medium">
View all devices →
</a>
</div>
</div>
</div>
</div>
);
};

14
src/data/mockData.ts
View File

@ -1,4 +1,4 @@
import { CVE, CVESource, CVERule } from '../types/cve';
import { CVE, CVESource, CVERule, DeviceAlert } from '../types/cve';
export const mockCVEs: CVE[] = [
{
@ -178,4 +178,16 @@ export const mockRules: CVERule[] = [
priority: 3,
is_active: true
}
];
// Mock data for device alerts
export const mockDeviceAlerts: DeviceAlert[] = [
{ id: 1, name: 'Windows Server 2019', alerts: 12, criticalAlerts: 3, highAlerts: 6 },
{ id: 2, name: 'Ubuntu 20.04 LTS', alerts: 8, criticalAlerts: 2, highAlerts: 3 },
{ id: 3, name: 'macOS Monterey', alerts: 5, criticalAlerts: 0, highAlerts: 2 },
{ id: 4, name: 'Cisco IOS Router', alerts: 7, criticalAlerts: 4, highAlerts: 2 },
{ id: 5, name: 'Oracle Database Server', alerts: 9, criticalAlerts: 1, highAlerts: 5 },
{ id: 6, name: 'Windows 10 Workstations', alerts: 15, criticalAlerts: 2, highAlerts: 7 },
{ id: 7, name: 'Red Hat Enterprise Linux 8', alerts: 6, criticalAlerts: 1, highAlerts: 2 },
{ id: 8, name: 'VMware ESXi Hosts', alerts: 10, criticalAlerts: 2, highAlerts: 4 }
];

8
src/types/cve.ts
View File

@ -42,4 +42,12 @@ export interface CVETicket {
tickets_id: number;
creation_type: 'AUTO' | 'MANUAL';
date_creation: string;
}
export interface DeviceAlert {
id: number;
name: string;
alerts: number;
criticalAlerts: number;
highAlerts: number;
}