initial

ts_web/elements/upladmin-incident-update/upladmin-incident-update.demo.ts

@@ -0,0 +1,91 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import type { IIncidentDetails } from '../../interfaces/index.js';
+import './upladmin-incident-update.js';
+
+export const demoFunc = () => html`
+  <style>
+    ${css`
+      .demo-container {
+        display: flex;
+        flex-direction: column;
+        gap: 32px;
+        padding: 24px;
+        max-width: 800px;
+        margin: 0 auto;
+        background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+        min-height: 100vh;
+      }
+
+      .demo-section {
+        margin-bottom: 24px;
+      }
+
+      .demo-section h3 {
+        margin: 0 0 16px 0;
+        font-size: 14px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+    `}
+  </style>
+
+  <div class="demo-container">
+    <div class="demo-section">
+      <h3>Update Active Incident (Critical)</h3>
+      <upladmin-incident-update
+        .incident=${{
+          id: 'inc-1',
+          title: 'Database Connection Pool Exhaustion',
+          status: 'investigating',
+          severity: 'critical',
+          affectedServices: ['db', 'api', 'web'],
+          startTime: Date.now() - 30 * 60 * 1000,
+          impact: 'All database-dependent services are experiencing failures.',
+          updates: [
+            { id: 'u1', timestamp: Date.now() - 30 * 60 * 1000, status: 'investigating', message: 'We are investigating reports of service failures.' },
+          ],
+        } as IIncidentDetails}
+      ></upladmin-incident-update>
+    </div>
+
+    <div class="demo-section">
+      <h3>Update Active Incident (Minor)</h3>
+      <upladmin-incident-update
+        .incident=${{
+          id: 'inc-2',
+          title: 'Elevated API Response Times',
+          status: 'identified',
+          severity: 'minor',
+          affectedServices: ['api'],
+          startTime: Date.now() - 2 * 60 * 60 * 1000,
+          impact: 'API responses may be slower than usual.',
+          updates: [
+            { id: 'u2', timestamp: Date.now() - 1 * 60 * 60 * 1000, status: 'identified', message: 'Issue identified as increased traffic from a specific client.' },
+            { id: 'u3', timestamp: Date.now() - 2 * 60 * 60 * 1000, status: 'investigating', message: 'We are investigating elevated response times.' },
+          ],
+        } as IIncidentDetails}
+      ></upladmin-incident-update>
+    </div>
+
+    <div class="demo-section">
+      <h3>Update Maintenance Window</h3>
+      <upladmin-incident-update
+        .incident=${{
+          id: 'inc-3',
+          title: 'Scheduled Infrastructure Upgrade',
+          status: 'monitoring',
+          severity: 'maintenance',
+          affectedServices: ['api', 'web', 'cdn'],
+          startTime: Date.now() - 45 * 60 * 1000,
+          impact: 'Brief interruptions may occur during the upgrade.',
+          updates: [
+            { id: 'u4', timestamp: Date.now() - 30 * 60 * 1000, status: 'monitoring', message: 'Upgrade complete. Monitoring for any issues.' },
+            { id: 'u5', timestamp: Date.now() - 45 * 60 * 1000, status: 'investigating', message: 'Starting scheduled infrastructure upgrade.' },
+          ],
+        } as IIncidentDetails}
+      ></upladmin-incident-update>
+    </div>
+  </div>
+`;