update

2025-06-30 00:17:43 +00:00
parent bff7ec6640
commit df4dd3f539
15 changed files with 1148 additions and 190 deletions
--- a/ts_web/pages/statuspage-allgreen.ts
+++ b/ts_web/pages/statuspage-allgreen.ts
@@ -7,37 +7,15 @@ export const statuspageAllgreen = () => html`
      min-height: 100vh;
      background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
    }
-    
-    .demo-info {
-      padding: 20px;
-      background: #4CAF50;
-      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>All Systems Operational</h3>
-      <p>This demo shows a status page where everything is running perfectly with no issues.</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;
@@ -221,6 +199,15 @@ export const statuspageAllgreen = () => html`
      
      assetsSelector.services = services;
      
+      // Configure Stats Grid - All green metrics
+      statsGrid.currentStatus = 'operational';
+      statsGrid.uptime = 99.98;
+      statsGrid.avgResponseTime = Math.round(services.reduce((sum, s) => sum + (s.responseTime || 0), 0) / services.length);
+      statsGrid.totalIncidents = 0;
+      statsGrid.affectedServices = 0;
+      statsGrid.totalServices = services.length;
+      statsGrid.timePeriod = '30 days';
+      
      // Configure Status Details - All operational for 48 hours
      const generateStatusDetails = (): IStatusHistoryPoint[] => {
        const details: IStatusHistoryPoint[] = [];
@@ -409,6 +396,7 @@ export const statuspageAllgreen = () => 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>
--- a/ts_web/pages/statuspage-demo.ts
+++ b/ts_web/pages/statuspage-demo.ts
@@ -7,37 +7,16 @@ export const statuspageDemo = () => 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, sans-serif;
-    }
-    .demo-info h3 {
-      margin: 0 0 10px 0;
-      font-size: 20px;
-      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>CloudFlow Infrastructure Status Page</h3>
-      <p>This demo shows a comprehensive status page for a cloud infrastructure provider with real-time monitoring.</p>
-    </div>

    <dees-demowrapper
    .runAfterRender=${async (wrapperElement: any) => {
      const header = wrapperElement.querySelector('upl-statuspage-header') as any;
      const pageTitle = wrapperElement.querySelector('upl-statuspage-pagetitle') 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;
@@ -578,6 +557,20 @@ export const statuspageDemo = () => html`
      incidents.currentIncidents = currentIncidents;
      incidents.pastIncidents = pastIncidents;
      
+      // Configure Stats Grid
+      const operationalCount = services.filter(s => s.currentStatus === 'operational').length;
+      const totalIncidents = currentIncidents.length + 3; // Current + recent past
+      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 = 'degraded';
+      statsGrid.uptime = avgUptime;
+      statsGrid.avgResponseTime = Math.round(avgResponseTime);
+      statsGrid.totalIncidents = totalIncidents;
+      statsGrid.affectedServices = services.filter(s => s.currentStatus !== 'operational').length;
+      statsGrid.totalServices = services.length;
+      statsGrid.timePeriod = '30 days';
+      
      // Configure Footer
      footer.companyName = 'CloudFlow Infrastructure';
      footer.legalUrl = 'https://cloudflow.example.com/legal';
@@ -644,6 +637,7 @@ export const statuspageDemo = () => html`
    <upl-statuspage-header></upl-statuspage-header>
    <upl-statuspage-pagetitle></upl-statuspage-pagetitle>
    <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>
--- a/ts_web/pages/statuspage-maintenance.ts
+++ b/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>
--- a/ts_web/pages/statuspage-outage.ts
+++ b/ts_web/pages/statuspage-outage.ts
@@ -7,37 +7,15 @@ export const statuspageOutage = () => html`
      min-height: 100vh;
      background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
    }
-    
-    .demo-info {
-      padding: 20px;
-      background: #F44336;
-      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>Major Outage Scenario</h3>
-      <p>This demo shows a critical situation with multiple services experiencing major outages.</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;
@@ -265,6 +243,19 @@ export const statuspageOutage = () => html`
      
      assetsSelector.services = services;
      
+      // Configure Stats Grid - Major outage 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 = 'major_outage';
+      statsGrid.uptime = avgUptime;
+      statsGrid.avgResponseTime = Math.round(avgResponseTime);
+      statsGrid.totalIncidents = 15; // High number of incidents
+      statsGrid.affectedServices = services.filter(s => s.currentStatus !== 'operational').length;
+      statsGrid.totalServices = services.length;
+      statsGrid.timePeriod = '30 days';
+      
      // Configure Status Details - Showing the outage timeline
      const generateStatusDetails = (): IStatusHistoryPoint[] => {
        const details: IStatusHistoryPoint[] = [];
@@ -561,6 +552,7 @@ export const statuspageOutage = () => 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>