update

ts_web/pages/statuspage-maintenance.ts

@@ -7,37 +7,15 @@ export const statuspageMaintenance = () => html`
       min-height: 100vh;
       background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
     }
-    
-    .demo-info {
-      padding: 20px;
-      background: #2196F3;
-      color: white;
-      text-align: center;
-      font-family: 'Geist Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      position: relative;
-      z-index: 1;
-    }
-    .demo-info h3 {
-      margin: 0 0 10px 0;
-      font-weight: 600;
-    }
-    .demo-info p {
-      margin: 0;
-      opacity: 0.9;
-      font-size: 14px;
-    }
   </style>
   
   <div class="demo-page-wrapper">
-    <div class="demo-info">
-      <h3>Scheduled Maintenance</h3>
-      <p>This demo shows a status page during a scheduled maintenance window with some services offline.</p>
-    </div>
 
     <dees-demowrapper
     .runAfterRender=${async (wrapperElement: any) => {
       const header = wrapperElement.querySelector('upl-statuspage-header') as any;
       const statusBar = wrapperElement.querySelector('upl-statuspage-statusbar') as any;
+      const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
       const assetsSelector = wrapperElement.querySelector('upl-statuspage-assetsselector') as any;
       const statusDetails = wrapperElement.querySelector('upl-statuspage-statusdetails') as any;
       const statusMonth = wrapperElement.querySelector('upl-statuspage-statusmonth') as any;
@@ -252,6 +230,19 @@ export const statuspageMaintenance = () => html`
       
       assetsSelector.services = services;
       
+      // Configure Stats Grid - Maintenance mode metrics
+      const operationalCount = services.filter(s => s.currentStatus === 'operational').length;
+      const avgResponseTime = services.reduce((sum, s) => sum + (s.responseTime || 0), 0) / services.length;
+      const avgUptime = services.reduce((sum, s) => sum + (s.uptime30d || 0), 0) / services.length;
+      
+      statsGrid.currentStatus = 'maintenance';
+      statsGrid.uptime = avgUptime;
+      statsGrid.avgResponseTime = Math.round(avgResponseTime);
+      statsGrid.totalIncidents = 1; // Just the maintenance
+      statsGrid.affectedServices = services.filter(s => s.currentStatus === 'maintenance').length;
+      statsGrid.totalServices = services.length;
+      statsGrid.timePeriod = '30 days';
+      
       // Configure Status Details - Showing maintenance period
       const generateStatusDetails = (): IStatusHistoryPoint[] => {
         const details: IStatusHistoryPoint[] = [];
@@ -563,6 +554,7 @@ export const statuspageMaintenance = () => html`
   >
     <upl-statuspage-header></upl-statuspage-header>
     <upl-statuspage-statusbar></upl-statuspage-statusbar>
+    <upl-statuspage-statsgrid></upl-statuspage-statsgrid>
     <upl-statuspage-assetsselector></upl-statuspage-assetsselector>
     <upl-statuspage-statusdetails></upl-statuspage-statusdetails>
     <upl-statuspage-statusmonth></upl-statuspage-statusmonth>