Build-for-network-ops

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Clock, User, AlertTriangle, CheckCircle, Play, Pause } from 'lucide-react'; import { useState } from 'react';

const IncidentTracker = () => { const [incidents, setIncidents] = useState([ { id: 'INC-2024-001', title: 'High CPU Usage - Access Point AP087', severity: 'critical', status: 'in-progress', assignee: 'John Smith', created: '2024-01-15 14:23', category: 'Performance', description: 'CPU usage consistently above 90% causing connectivity issues', affectedDevices: ['AP087'], estimatedResolution: '30 minutes' }, { id: 'INC-2024-002', title: 'Bandwidth Threshold Exceeded - SW015', severity: 'warning', status: 'investigating', assignee: 'Sarah Johnson', created: '2024-01-15 14:18', category: 'Capacity', description: 'Switch bandwidth utilization exceeded 85% threshold', affectedDevices: ['SW015'], estimatedResolution: '1 hour' }, { id: 'INC-2024-003', title: 'DNS Resolution Latency', severity: 'warning', status: 'resolved', assignee: 'Mike Davis', created: '2024-01-15 13:45', category: 'DNS', description: 'Increased DNS resolution time affecting user experience', affectedDevices: ['DNS-01', 'DNS-02'], estimatedResolution: 'Resolved', resolutionTime: '45 minutes' }, { id: 'INC-2024-004', title: 'Configuration Drift - Core Router', severity: 'medium', status: 'new', assignee: 'Unassigned', created: '2024-01-15 12:30', category: 'Configuration', description: 'Detected unauthorized configuration changes on core router', affectedDevices: ['R001'], estimatedResolution: 'Pending' } ]);

const getPriorityColor = (severity: string) => { switch (severity) { case 'critical': return 'destructive'; case 'warning': return 'outline'; case 'medium': return 'secondary'; default: return 'outline'; } };

const getStatusColor = (status: string) => { switch (status) { case 'resolved': return 'text-green-400'; case 'in-progress': return 'text-blue-400'; case 'investigating': return 'text-yellow-400'; case 'new': return 'text-orange-400'; default: return 'text-gray-400'; } };

const getStatusIcon = (status: string) => { switch (status) { case 'resolved': return ; case 'in-progress': return ; case 'investigating': return ; case 'new': return ; default: return ; } };

return (

{/* Filters and Actions */} Incident Management Track and manage network incidents with detailed analysis

All Status New Investigating In Progress Resolved All Severity Critical Warning Medium Create Incident

  {/* Incidents List */}
  <div className="space-y-4">
    {incidents.map((incident) => (
      <Card key={incident.id} className="bg-slate-800 border-slate-700">
        <CardContent className="p-6">
          <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
            <div className="flex-1">
              <div className="flex items-center gap-3 mb-2">
                {getStatusIcon(incident.status)}
                <h3 className="text-lg font-semibold text-white">{incident.title}</h3>
                <Badge variant={getPriorityColor(incident.severity)}>
                  {incident.severity}
                </Badge>
              </div>
              
              <p className="text-slate-400 mb-3">{incident.description}</p>
              
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                <div>
                  <span className="text-slate-400">ID: </span>
                  <span className="text-blue-400 font-mono">{incident.id}</span>
                </div>
                <div>
                  <span className="text-slate-400">Category: </span>
                  <span className="text-white">{incident.category}</span>
                </div>
                <div>
                  <span className="text-slate-400">Created: </span>
                  <span className="text-white">{incident.created}</span>
                </div>
                <div>
                  <span className="text-slate-400">Assignee: </span>
                  <span className="text-white">{incident.assignee}</span>
                </div>
                <div>
                  <span className="text-slate-400">Status: </span>
                  <span className={getStatusColor(incident.status) + " capitalize"}>
                    {incident.status.replace('-', ' ')}
                  </span>
                </div>
                <div>
                  <span className="text-slate-400">ETA: </span>
                  <span className="text-white">{incident.estimatedResolution}</span>
                </div>
              </div>
              
              <div className="mt-3">
                <span className="text-slate-400">Affected Devices: </span>
                {incident.affectedDevices.map((device, index) => (
                  <Badge key={index} variant="outline" className="ml-1">
                    {device}
                  </Badge>
                ))}
              </div>
            </div>
            
            <div className="flex flex-col gap-2">
              <Button size="sm" variant="outline" className="bg-slate-900 border-slate-600 hover:bg-slate-700">
                View Details
              </Button>
              <Button size="sm" variant="outline" className="bg-slate-900 border-slate-600 hover:bg-slate-700">
                Start RCA
              </Button>
              {incident.status !== 'resolved' && (
                <Button size="sm" className="bg-green-600 hover:bg-green-700">
                  Resolve
                </Button>
              )}
            </div>
          </div>
        </CardContent>
      </Card>
    ))}
  </div>
</div>

); };

export default IncidentTracker;