feat: Implement Incident Management and Tab Dashboard

2025-05-23 20:37:00 +08:00
parent 4c2f65b432
commit a3727b5dfd
69 changed files with 4457 additions and 0 deletions
@@ -0,0 +1,119 @@
+
+import React, { memo, useState } from 'react';
+import { TableRow, TableCell } from '@/components/ui/table';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Eye } from 'lucide-react';
+import { IncidentStatusDropdown } from '../IncidentStatusDropdown';
+import { IncidentActionsMenu } from '../IncidentActionsMenu';
+import { IncidentItem } from '@/services/incident';
+import { AssignedUserCell } from './IncidentTableUtils';
+
+interface IncidentTableRowProps {
+  item: IncidentItem;
+  formatDate: (date: string | undefined) => string;
+  getAffectedSystemsArray: (systems: string | undefined) => string[];
+  onViewDetails?: (incident: IncidentItem) => void;
+  onEditIncident?: (incident: IncidentItem) => void;
+  onIncidentUpdated: () => void;
+  t: (key: string) => string;
+}
+
+export const IncidentTableRow = memo(({ 
+  item, 
+  formatDate, 
+  getAffectedSystemsArray, 
+  onViewDetails, 
+  onEditIncident,
+  onIncidentUpdated, 
+  t
+}: IncidentTableRowProps) => {
+  // Use local state for optimistic UI updates
+  const [localItem, setLocalItem] = useState(item);
+  
+  // Update local state when props change
+  React.useEffect(() => {
+    setLocalItem(item);
+  }, [item]);
+  
+  // Handle status updates locally
+  const handleStatusUpdated = () => {
+    console.log("Status updated in TableRow, calling onIncidentUpdated");
+    onIncidentUpdated();
+  };
+  
+  return (
+    <TableRow 
+      key={localItem.id} 
+      className="hover:bg-muted/40 cursor-pointer"
+      onClick={() => onViewDetails && onViewDetails(localItem)}
+    >
+      <TableCell className="font-medium max-w-[200px] truncate">
+        {localItem.title || localItem.description || '-'}
+      </TableCell>
+      <TableCell onClick={(e) => e.stopPropagation()}>
+        <IncidentStatusDropdown
+          status={localItem.impact_status || localItem.status || 'investigating'}
+          id={localItem.id}
+          onStatusUpdated={handleStatusUpdated}
+        />
+      </TableCell>
+      <TableCell>
+        <Badge variant={
+          localItem.priority?.toLowerCase() === 'critical' ? 'destructive' :
+          localItem.priority?.toLowerCase() === 'high' ? 'default' :
+          localItem.priority?.toLowerCase() === 'medium' ? 'secondary' : 'outline'
+        }>
+          {t(localItem.priority?.toLowerCase() || 'low')}
+        </Badge>
+      </TableCell>
+      <TableCell>{formatDate(localItem.created)}</TableCell>
+      <TableCell>
+        <div className="flex flex-wrap gap-1">
+          {getAffectedSystemsArray(localItem.affected_systems).map((system, idx) => (
+            <Badge key={`${localItem.id}-system-${idx}`} variant="outline">{system}</Badge>
+          ))}
+          {getAffectedSystemsArray(localItem.affected_systems).length === 0 && '-'}
+        </div>
+      </TableCell>
+      <TableCell>
+        <Badge variant={
+          localItem.impact?.toLowerCase() === 'critical' ? 'destructive' :
+          localItem.impact?.toLowerCase() === 'high' ? 'default' :
+          localItem.impact?.toLowerCase() === 'medium' ? 'secondary' : 'outline'
+        }>
+          {t(localItem.impact?.toLowerCase() || 'low')}
+        </Badge>
+      </TableCell>
+      <TableCell>
+        <AssignedUserCell userId={localItem.assigned_to} />
+      </TableCell>
+      <TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
+        <div className="flex justify-end items-center space-x-2">
+          {onViewDetails && (
+            <Button 
+              variant="ghost" 
+              size="sm" 
+              onClick={(e) => {
+                e.stopPropagation();
+                onViewDetails(localItem);
+              }}
+              className="h-8 w-8 p-0"
+            >
+              <Eye className="h-4 w-4" />
+              <span className="sr-only">{t('view')}</span>
+            </Button>
+          )}
+          <IncidentActionsMenu 
+            item={localItem} 
+            onIncidentUpdated={onIncidentUpdated}
+            onViewDetails={onViewDetails}
+            onEditIncident={onEditIncident}
+          />
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+});
+
+IncidentTableRow.displayName = 'IncidentTableRow';