initial

ts_web/elements/upladmin-dashboard/upladmin-dashboard.demo.ts

@@ -0,0 +1,57 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import type { IServiceStatus, IIncidentDetails } from '../../interfaces/index.js';
+import './upladmin-dashboard.js';
+
+export const demoFunc = () => html`
+  <style>
+    ${css`
+      .demo-container {
+        padding: 24px;
+        background: ${cssManager.bdTheme('#f4f4f5', '#09090b')};
+        min-height: 100vh;
+      }
+    `}
+  </style>
+
+  <div class="demo-container">
+    <upladmin-dashboard
+      .monitors=${[
+        { id: 'api', name: 'api', displayName: 'API Server', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.98, uptime90d: 99.95, responseTime: 45, category: 'Core' },
+        { id: 'web', name: 'web', displayName: 'Web App', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.99, uptime90d: 99.97, responseTime: 120, category: 'Core' },
+        { id: 'db', name: 'db', displayName: 'Database', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.999, uptime90d: 99.998, responseTime: 5, category: 'Infrastructure' },
+        { id: 'cdn', name: 'cdn', displayName: 'CDN', currentStatus: 'degraded', lastChecked: Date.now(), uptime30d: 99.5, uptime90d: 99.8, responseTime: 200, category: 'Infrastructure' },
+        { id: 'cache', name: 'cache', displayName: 'Redis Cache', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.99, uptime90d: 99.98, responseTime: 2, category: 'Infrastructure' },
+        { id: 'email', name: 'email', displayName: 'Email Service', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.9, uptime90d: 99.85, responseTime: 500, category: 'External' },
+        { id: 'payment', name: 'payment', displayName: 'Payment Gateway', currentStatus: 'maintenance', lastChecked: Date.now(), uptime30d: 99.95, uptime90d: 99.9, responseTime: 350, category: 'External' },
+        { id: 'search', name: 'search', displayName: 'Search Engine', currentStatus: 'partial_outage', lastChecked: Date.now(), uptime30d: 98.5, uptime90d: 99.2, responseTime: 150, category: 'Core' },
+      ] as IServiceStatus[]}
+      .activeIncidents=${[
+        {
+          id: 'inc-1',
+          title: 'CDN Performance Degradation',
+          status: 'identified',
+          severity: 'minor',
+          affectedServices: ['cdn'],
+          startTime: Date.now() - 2 * 60 * 60 * 1000,
+          impact: 'Some users may experience slower page loads',
+          updates: [
+            { id: 'u1', timestamp: Date.now() - 1 * 60 * 60 * 1000, status: 'identified', message: 'Root cause identified as network congestion' },
+            { id: 'u2', timestamp: Date.now() - 2 * 60 * 60 * 1000, status: 'investigating', message: 'We are investigating reports of slow content delivery' },
+          ],
+        },
+        {
+          id: 'inc-2',
+          title: 'Search Cluster Partial Failure',
+          status: 'investigating',
+          severity: 'major',
+          affectedServices: ['search'],
+          startTime: Date.now() - 30 * 60 * 1000,
+          impact: 'Search functionality may return incomplete results',
+          updates: [
+            { id: 'u3', timestamp: Date.now() - 30 * 60 * 1000, status: 'investigating', message: 'We are investigating issues with the search cluster' },
+          ],
+        },
+      ] as IIncidentDetails[]}
+    ></upladmin-dashboard>
+  </div>
+`;