@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/incident-manager/IncidentManager.stories.tsx

@@ -0,0 +1,464 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  IncidentManager,
+  defaultIncidents,
+} from './index'
+import type { Incident, IncidentSeverity, IncidentStatus, IncidentResponder, IncidentEvent } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof IncidentManager> = {
+  title: 'Blocks/IncidentManager',
+  component: IncidentManager,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'An incident management dashboard for tracking and responding to production incidents with severity levels, responder assignments, timeline events, and incident lifecycle management.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof IncidentManager>
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-6">
+      <IncidentManager
+        incidents={defaultIncidents}
+        onCreateIncident={() => console.log('Create incident')}
+        onAcknowledge={(incident) => console.log('Acknowledge:', incident.title)}
+        onResolve={(incident) => console.log('Resolve:', incident.title)}
+        onEscalate={(incident) => console.log('Escalate:', incident.title)}
+      />
+    </div>
+  ),
+}
+
+export const NoActiveIncidents: Story = {
+  render: () => {
+    const resolvedIncidents: Incident[] = [
+      {
+        id: '1',
+        title: 'API latency spike',
+        description: 'Resolved - Root cause was database connection pool exhaustion',
+        severity: 'high',
+        status: 'resolved',
+        service: 'api-gateway',
+        createdAt: new Date(Date.now() - 6 * 3600000),
+        acknowledgedAt: new Date(Date.now() - 5.5 * 3600000),
+        resolvedAt: new Date(Date.now() - 4 * 3600000),
+        responders: [
+          { id: '1', name: 'Alice Chen', role: 'On-Call Engineer', status: 'available' },
+        ],
+        events: [
+          { id: 'e1', type: 'status_change', timestamp: new Date(Date.now() - 4 * 3600000), content: 'Incident resolved' },
+        ],
+      },
+      {
+        id: '2',
+        title: 'Authentication service timeout',
+        severity: 'medium',
+        status: 'closed',
+        service: 'auth-service',
+        createdAt: new Date(Date.now() - 24 * 3600000),
+        resolvedAt: new Date(Date.now() - 20 * 3600000),
+        responders: [],
+        events: [],
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <IncidentManager
+          incidents={resolvedIncidents}
+          onCreateIncident={() => console.log('Create incident')}
+        />
+      </div>
+    )
+  },
+}
+
+export const CriticalIncident: Story = {
+  render: () => {
+    const criticalIncidents: Incident[] = [
+      {
+        id: '1',
+        title: 'Complete service outage - Production down',
+        description: 'All production services are unreachable. Users receiving 503 errors across the board.',
+        severity: 'critical',
+        status: 'investigating',
+        service: 'all-services',
+        createdAt: new Date(Date.now() - 15 * 60000),
+        acknowledgedAt: new Date(Date.now() - 12 * 60000),
+        impact: 'Total outage affecting all 50,000+ active users',
+        affectedUsers: 52000,
+        slackChannel: 'incident-critical-001',
+        runbookUrl: 'https://runbooks.example.com/total-outage',
+        responders: [
+          { id: '1', name: 'John Doe', role: 'Incident Commander', status: 'engaged' },
+          { id: '2', name: 'Jane Smith', role: 'Site Reliability Engineer', status: 'engaged' },
+          { id: '3', name: 'Bob Wilson', role: 'Platform Engineer', status: 'engaged' },
+          { id: '4', name: 'Alice Chen', role: 'Database Admin', status: 'engaged' },
+        ],
+        events: [
+          { id: 'e1', type: 'status_change', timestamp: new Date(Date.now() - 15 * 60000), content: 'Incident triggered by alerting system' },
+          { id: 'e2', type: 'escalation', timestamp: new Date(Date.now() - 14 * 60000), content: 'Escalated to all on-call teams' },
+          { id: 'e3', type: 'assignment', timestamp: new Date(Date.now() - 13 * 60000), content: 'John Doe assigned as Incident Commander' },
+          { id: 'e4', type: 'status_change', timestamp: new Date(Date.now() - 12 * 60000), content: 'Incident acknowledged' },
+          { id: 'e5', type: 'comment', timestamp: new Date(Date.now() - 10 * 60000), content: 'Identified: Cloud provider network issue', user: 'Jane Smith' },
+          { id: 'e6', type: 'runbook', timestamp: new Date(Date.now() - 8 * 60000), content: 'Executing failover runbook' },
+        ],
+      },
+      ...defaultIncidents.slice(1),
+    ]
+
+    return (
+      <div className="p-6">
+        <IncidentManager
+          incidents={criticalIncidents}
+          onAcknowledge={(incident) => console.log('Acknowledge:', incident.title)}
+          onResolve={(incident) => console.log('Resolve:', incident.title)}
+          onEscalate={(incident) => console.log('Escalate:', incident.title)}
+        />
+      </div>
+    )
+  },
+}
+
+export const MultipleActiveIncidents: Story = {
+  render: () => {
+    const manyIncidents: Incident[] = [
+      {
+        id: '1',
+        title: 'Database replication lag exceeds threshold',
+        severity: 'critical',
+        status: 'investigating',
+        service: 'postgres-replica',
+        createdAt: new Date(Date.now() - 30 * 60000),
+        affectedUsers: 8000,
+        responders: [
+          { id: '1', name: 'DBA Team', role: 'Database Admin', status: 'engaged' },
+        ],
+        events: [
+          { id: 'e1', type: 'status_change', timestamp: new Date(Date.now() - 30 * 60000), content: 'Incident triggered' },
+        ],
+      },
+      {
+        id: '2',
+        title: 'Memory leak detected in user-service',
+        severity: 'high',
+        status: 'acknowledged',
+        service: 'user-service',
+        createdAt: new Date(Date.now() - 45 * 60000),
+        affectedUsers: 3500,
+        responders: [
+          { id: '2', name: 'Platform Team', role: 'Platform Engineer', status: 'engaged' },
+        ],
+        events: [],
+      },
+      {
+        id: '3',
+        title: 'CDN cache miss rate spike',
+        severity: 'high',
+        status: 'triggered',
+        service: 'cdn',
+        createdAt: new Date(Date.now() - 10 * 60000),
+        responders: [],
+        events: [],
+      },
+      {
+        id: '4',
+        title: 'Elevated 5xx errors on checkout flow',
+        severity: 'medium',
+        status: 'investigating',
+        service: 'checkout-service',
+        createdAt: new Date(Date.now() - 60 * 60000),
+        affectedUsers: 500,
+        responders: [
+          { id: '3', name: 'Backend Team', role: 'Backend Engineer', status: 'engaged' },
+        ],
+        events: [],
+      },
+      {
+        id: '5',
+        title: 'SSL certificate expiring in 7 days',
+        severity: 'low',
+        status: 'acknowledged',
+        service: 'api-gateway',
+        createdAt: new Date(Date.now() - 2 * 3600000),
+        responders: [],
+        events: [],
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <IncidentManager
+          incidents={manyIncidents}
+          onCreateIncident={() => console.log('Create incident')}
+          onAcknowledge={(incident) => console.log('Acknowledge:', incident.title)}
+          onResolve={(incident) => console.log('Resolve:', incident.title)}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithAllStatuses: Story = {
+  render: () => {
+    const allStatusIncidents: Incident[] = [
+      {
+        id: '1',
+        title: 'New alert: High CPU usage',
+        severity: 'medium',
+        status: 'triggered',
+        service: 'compute-cluster',
+        createdAt: new Date(Date.now() - 2 * 60000),
+        responders: [],
+        events: [],
+      },
+      {
+        id: '2',
+        title: 'API rate limiting activated',
+        severity: 'medium',
+        status: 'acknowledged',
+        service: 'api-gateway',
+        createdAt: new Date(Date.now() - 15 * 60000),
+        acknowledgedAt: new Date(Date.now() - 10 * 60000),
+        responders: [{ id: '1', name: 'On-Call', role: 'Engineer', status: 'engaged' }],
+        events: [],
+      },
+      {
+        id: '3',
+        title: 'Search indexing delays',
+        severity: 'high',
+        status: 'investigating',
+        service: 'search-service',
+        createdAt: new Date(Date.now() - 30 * 60000),
+        responders: [{ id: '2', name: 'Search Team', role: 'Engineer', status: 'engaged' }],
+        events: [],
+      },
+      {
+        id: '4',
+        title: 'Payment gateway timeout',
+        severity: 'critical',
+        status: 'identified',
+        service: 'payment-service',
+        createdAt: new Date(Date.now() - 45 * 60000),
+        impact: 'Third-party provider experiencing issues',
+        responders: [{ id: '3', name: 'Payments Team', role: 'Engineer', status: 'engaged' }],
+        events: [],
+      },
+      {
+        id: '5',
+        title: 'Cache invalidation issue',
+        severity: 'medium',
+        status: 'resolved',
+        service: 'redis-cluster',
+        createdAt: new Date(Date.now() - 3 * 3600000),
+        resolvedAt: new Date(Date.now() - 2 * 3600000),
+        responders: [],
+        events: [],
+      },
+      {
+        id: '6',
+        title: 'DNS resolution delays',
+        severity: 'low',
+        status: 'closed',
+        service: 'dns',
+        createdAt: new Date(Date.now() - 24 * 3600000),
+        resolvedAt: new Date(Date.now() - 20 * 3600000),
+        responders: [],
+        events: [],
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <IncidentManager
+          incidents={allStatusIncidents}
+          onAcknowledge={(incident) => console.log('Acknowledge:', incident.title)}
+          onResolve={(incident) => console.log('Resolve:', incident.title)}
+        />
+      </div>
+    )
+  },
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [incidents, setIncidents] = React.useState<Incident[]>(defaultIncidents)
+
+    const handleAcknowledge = (incident: Incident) => {
+      setIncidents(prev =>
+        prev.map(i =>
+          i.id === incident.id
+            ? {
+                ...i,
+                status: 'acknowledged' as IncidentStatus,
+                acknowledgedAt: new Date(),
+                events: [
+                  ...i.events,
+                  {
+                    id: `e-${Date.now()}`,
+                    type: 'status_change' as const,
+                    timestamp: new Date(),
+                    content: 'Incident acknowledged',
+                  },
+                ],
+              }
+            : i
+        )
+      )
+    }
+
+    const handleResolve = (incident: Incident) => {
+      setIncidents(prev =>
+        prev.map(i =>
+          i.id === incident.id
+            ? {
+                ...i,
+                status: 'resolved' as IncidentStatus,
+                resolvedAt: new Date(),
+                events: [
+                  ...i.events,
+                  {
+                    id: `e-${Date.now()}`,
+                    type: 'status_change' as const,
+                    timestamp: new Date(),
+                    content: 'Incident resolved',
+                  },
+                ],
+              }
+            : i
+        )
+      )
+    }
+
+    const handleCreate = () => {
+      const newIncident: Incident = {
+        id: `inc-${Date.now()}`,
+        title: 'New incident created',
+        severity: 'medium',
+        status: 'triggered',
+        service: 'unknown',
+        createdAt: new Date(),
+        responders: [],
+        events: [
+          {
+            id: `e-${Date.now()}`,
+            type: 'status_change',
+            timestamp: new Date(),
+            content: 'Incident created manually',
+          },
+        ],
+      }
+      setIncidents(prev => [newIncident, ...prev])
+    }
+
+    return (
+      <div className="p-6">
+        <IncidentManager
+          incidents={incidents}
+          onCreateIncident={handleCreate}
+          onAcknowledge={handleAcknowledge}
+          onResolve={handleResolve}
+          onEscalate={(incident) => alert(`Escalating: ${incident.title}`)}
+        />
+      </div>
+    )
+  },
+}
+
+export const OnCallDashboard: Story = {
+  render: () => (
+    <div className="min-h-screen bg-muted/30">
+      <header className="bg-background border-b px-6 py-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="font-bold text-xl">On-Call Dashboard</h1>
+            <p className="text-sm text-muted-foreground">Incident Response & Management</p>
+          </div>
+          <nav className="flex gap-4 text-sm">
+            <a href="#" className="text-foreground font-medium">Active Incidents</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">On-Call Schedule</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Runbooks</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Post-Mortems</a>
+          </nav>
+        </div>
+      </header>
+      <main className="p-6">
+        <IncidentManager
+          incidents={defaultIncidents}
+          onCreateIncident={() => console.log('Create incident')}
+          onAcknowledge={(incident) => console.log('Acknowledge:', incident.title)}
+          onResolve={(incident) => console.log('Resolve:', incident.title)}
+          onEscalate={(incident) => console.log('Escalate:', incident.title)}
+        />
+      </main>
+    </div>
+  ),
+}
+
+export const PostMortemReview: Story = {
+  render: () => {
+    const historicalIncidents: Incident[] = [
+      {
+        id: '1',
+        title: 'Major outage - Payment processing failure',
+        description: 'Complete payment system unavailable for 2 hours due to database failover issue',
+        severity: 'critical',
+        status: 'closed',
+        service: 'payment-service',
+        createdAt: new Date(Date.now() - 7 * 24 * 3600000),
+        acknowledgedAt: new Date(Date.now() - 7 * 24 * 3600000 + 5 * 60000),
+        resolvedAt: new Date(Date.now() - 7 * 24 * 3600000 + 2 * 3600000),
+        impact: '$250,000 in lost transactions',
+        affectedUsers: 45000,
+        responders: [
+          { id: '1', name: 'John Doe', role: 'Incident Commander', status: 'available' },
+          { id: '2', name: 'Jane Smith', role: 'DBA', status: 'available' },
+        ],
+        events: Array.from({ length: 15 }, (_, i) => ({
+          id: `e-${i}`,
+          type: 'comment' as const,
+          timestamp: new Date(Date.now() - 7 * 24 * 3600000 + i * 10 * 60000),
+          content: `Event ${i + 1} during incident response`,
+        })),
+      },
+      {
+        id: '2',
+        title: 'API performance degradation',
+        severity: 'high',
+        status: 'closed',
+        service: 'api-gateway',
+        createdAt: new Date(Date.now() - 14 * 24 * 3600000),
+        resolvedAt: new Date(Date.now() - 14 * 24 * 3600000 + 45 * 60000),
+        affectedUsers: 12000,
+        responders: [],
+        events: [],
+      },
+      {
+        id: '3',
+        title: 'Data sync failure',
+        severity: 'medium',
+        status: 'closed',
+        service: 'sync-service',
+        createdAt: new Date(Date.now() - 21 * 24 * 3600000),
+        resolvedAt: new Date(Date.now() - 21 * 24 * 3600000 + 30 * 60000),
+        responders: [],
+        events: [],
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <IncidentManager incidents={historicalIncidents} />
+      </div>
+    )
+  },
+}

package/src/blocks/index.ts

@@ -23,7 +23,7 @@ export type { LoginProps, LoginConfig, LoginColorConfig, LoginThemeConfig, Login
 
 // Sidebar
 export { WakaSidebar, useSidebar, SidebarLayout } from './sidebar'
-export type { WakaSidebarProps, SidebarMenuItem, SidebarUserConfig, SidebarLogoConfig, SidebarLayoutProps } from './sidebar'
+export type { WakaSidebarProps, SidebarMenuItem, SidebarUserConfig, SidebarLogoConfig, SidebarLayoutProps, LinkComponentProps } from './sidebar'
 
 // Header
 export { WakaHeader } from './header'