feat: Integrated uptime results into status page

Author: Lissy93

src/app/pages/advanced/status.page.html

@@ -23,20 +23,32 @@ <h1 class="mb-4">Service Statuses</h1>
   <!-- Current Status -->
   <div class="p-card px-4 py-3">
     <h2 class="mb-4">Current Service Status</h2>
-<!--     
-    <div *ngIf="statusInfo$ | async">
+    
+    <div *ngIf="internalStatusInfo$ | async as internal">
       <p-divider class="my-4" />
-      <h3>Domain Locker Internal</h3>
+      <h3>Web Application</h3>
       <ul class="list-none p-0 mt-2">
-        <li *ngFor="let s of dlServicesToSetup" class="flex">
-          <span class="font-medium flex-shrink-0 w-56 flex items-center space-x-2">{{s}}</span>
-          <span class="flex items-center"><i class="pi pi-check-circle text-green-400 mr-1"></i> Operational</span>
+        <li *ngFor="let s of currentStatuses" class="flex">
+          <details>
+            <summary class="flex cursor-pointer hover:bg-surface-100 rounded pr-2">
+              <span class="font-medium flex-shrink-0 w-56 flex items-center space-x-2">{{s.name}}</span>
+              <span *ngIf="s.status; else notOperational" class="flex items-center"><i class="pi pi-check-circle text-green-400 mr-1"></i> Operational</span>
+              <ng-template #notOperational>
+                <span class="flex items-center"><i class="pi pi-times-circle text-red-400 mr-1"></i> Unavailable</span>
+              </ng-template>
+            </summary>
+            <p *ngIf="s.extraInfo" class="mt-0 text-sm opacity-70 italic">
+                Historical uptime is {{ s.extraInfo.uptimePercent }}% with an average ping of {{ s.extraInfo.averagePing }}ms
+                (latency range is {{s.extraInfo.minPing}} to {{s.extraInfo.maxPing}}ms).
+            </p>
+          </details>
         </li>
       </ul>
-    </div> -->
-    
+    </div>
+
+
     <div *ngIf="internalStatusInfo$ | async as internal">
-      <!-- <p-divider class="my-4" /> -->
+      <p-divider class="my-4" />
       <h3>Database</h3>
       <ul class="list-none p-0 mt-2">
         <li class="flex">
@@ -125,6 +137,12 @@ <h3>Third-Party Services</h3>
     </div>
   </div>
 
+  <!-- App response and uptime chart -->
+  <div *ngIf="uptimeChartUrl" class="p-card px-4 py-3">
+    <h2 class="mt-4">Recent Response Time History</h2>
+    <img [src]="uptimeChartUrl" alt="Uptime response time chart" class="w-full max-w-[48rem] mx-auto flex" />
+  </div>
+
   <!-- Recent Incidents -->
   <div class="p-card px-4 py-3" *ngIf="statusInfo$ | async as statusInfo; else loading" >
     <h2 class="mb-4">Third-Party Disruptions</h2>

src/app/pages/advanced/status.page.ts

@@ -39,6 +39,21 @@ export interface InternalStatus {
   database: any;
 }
 
+interface HeartBeat {
+  status: number,
+  time: string,
+  msg?: string,
+  ping: number,
+}
+
+interface StatusMetrics {
+  uptimePercent: number;
+  averagePing: number;
+  minPing: number;
+  maxPing: number;
+}
+
+
 @Component({
   standalone: true,
   imports: [CommonModule, PrimeNgModule, DomainFaviconComponent],
@@ -56,6 +71,17 @@ export default class StatusPage {
 
   public dlServicesToSetup: string[] = ['App', 'API', 'Database', 'Auth', 'Scheduler'];
 
+  readonly uptimeServiceMap: Record<string, string> = {
+    '5': 'Landing',
+    '6': 'Main App',
+    '7': 'Docs',
+  };
+
+  // public uptimeExtraInfo
+
+  public uptimeChartUrl: string = '';
+  public currentStatuses: { id: string; name: string; status: boolean; latestPing?: number, extraInfo?: any }[] = [];
+
   constructor(
     private http: HttpClient,
     private errorHandler: ErrorHandlerService,
@@ -67,13 +93,15 @@ export default class StatusPage {
       const servicePieConfig = this.generatePieChartConfig(data, 'service',  { title: 'Issues per Service' });
       this.pieChartUrl = 'https://quickchart.io/chart?c=' + encodeURIComponent(JSON.stringify(servicePieConfig));
     });
+
+    this.internalStatusInfo$.subscribe(this.uptimeDataProcess.bind(this));
   }
 
   private fetchInternalStatusData(): Observable<any> {
     return this.http.get<any>('/api/internal-status-info').pipe(
       map(data => ({
         scheduled: data.scheduledCrons || [],
-        supabase: data.supabaseStatus?.healthy || { healthy: false, undetermined: true },
+        supabase: data.supabaseStatus || { healthy: false, undetermined: true },
         uptime: data.uptimeStatus || {},
         database: data.databaseStatus || {},
       })),
@@ -126,6 +154,22 @@ export default class StatusPage {
     return /^#([0-9A-F]{3}){1,2}$/i.test(value) ? value : fallback;
   }
 
+  private calculateStatusMetrics(heartbeats: HeartBeat[] | undefined): StatusMetrics | null {
+    if (!heartbeats || heartbeats.length === 0) return null;
+
+    const successful = heartbeats.filter(h => h.status === 1);
+    const pings = successful.map(h => h.ping).filter(p => typeof p === 'number');
+
+    if (pings.length === 0) return null;
+
+    const uptimePercent = Math.round((successful.length / heartbeats.length) * 100);
+    const averagePing = Math.round(pings.reduce((a, b) => a + b, 0) / pings.length);
+    const minPing = Math.min(...pings);
+    const maxPing = Math.max(...pings);
+
+    return { uptimePercent, averagePing, minPing, maxPing };
+  }
+
   /**
    * Generates a Chart.js configuration object for a stacked bar chart.
    *
@@ -387,4 +431,87 @@ export default class StatusPage {
     return {};
   }
 
+private uptimeDataProcess(internal: InternalStatus): void {
+  const rawHeartbeats = internal.uptime?.heartbeatList || {};
+  const statusData: typeof this.currentStatuses = [];
+
+  const chartColors = [
+    '--purple-400', '--teal-400', '--pink-400', '--blue-400', '--yellow-400', '--green-400',
+  ];
+
+  const datasets = Object.entries(rawHeartbeats).map(([id, heartbeats], i) => {
+    const serviceName = this.uptimeServiceMap[id] || `Service ${id}`;
+    const latest = (heartbeats as HeartBeat[]).at(-1);
+
+    statusData.push({
+      id,
+      name: serviceName,
+      status: latest?.status === 1,
+      latestPing: latest?.ping,
+      extraInfo: this.calculateStatusMetrics(heartbeats as HeartBeat[]),
+    });
+
+    return {
+      label: serviceName,
+      data: (heartbeats as HeartBeat[]).map(h => ({
+        x: h.time.replace(' ', 'T') + 'Z',
+        y: h.ping
+      })),
+      borderColor: this.getCssVariableColor(chartColors[i % chartColors.length], '#36A2EB'),
+      fill: false,
+      spanGaps: false,
+      tension: 0.4,
+    };
+  });
+
+  this.currentStatuses = statusData;
+
+  // Just using the first dataset's timestamps to generate HH:mm labels
+  const firstDataset = datasets[0]?.data || [];
+  const labels = firstDataset.map((point: any) => {
+    const date = new Date(point.x);
+    return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
+  });
+
+  const chartConfig = {
+    type: 'line',
+    data: {
+      labels,
+      datasets
+    },
+    options: {
+      title: {
+        display: true,
+        text: 'Domain Locker Uptime',
+        color: this.getCssVariableColor('--text-color', '#333'),
+      },
+      responsive: true,
+      plugins: {
+        title: {
+          display: true,
+          text: 'Service Response Time',
+          color: this.getCssVariableColor('--text-color', '#333'),
+        }
+      },
+      scales: {
+        x: {
+          title: {
+            display: true,
+            text: 'Time'
+          }
+        },
+        y: {
+          title: {
+            display: true,
+            text: 'Ping (ms)'
+          }
+        }
+      }
+    }
+  };
+
+  this.uptimeChartUrl = `https://quickchart.io/chart?c=${encodeURIComponent(JSON.stringify(chartConfig))}`;
+}
+
+
 }

src/server/routes/internal-status-info.ts

@@ -16,7 +16,7 @@ export default defineEventHandler(async (event) => {
     fetchSupabaseHealth(),
     fetchUptimeStatus(),
   ]);
-  
+
   return { scheduledCrons, databaseStatus, supabaseStatus, uptimeStatus };
 });
 
@@ -53,13 +53,13 @@ async function fetchDatabaseHealth(authHeader?: string): Promise<any> {
 
 
 async function fetchSupabaseHealth(): Promise<{ healthy?: boolean } | undefined> {
-  const apiKey = import.meta.env['SUPABASE_ANON_KEY'];
-  if (!apiKey) return {};
+  const anonKey = import.meta.env['SUPABASE_ANON_KEY'];
+  if (!anonKey) return {};
   try {
     const res = await fetch(`${import.meta.env['SUPABASE_URL']}/health`, {
       headers: {
-        apikey: apiKey,
-        Authorization: `Bearer ${apiKey}`,
+        apikey: anonKey,
+        Authorization: `Bearer ${anonKey}`,
       },
       signal: AbortSignal.timeout(timeout),
     });