From 4031ac90f56422317f8184848bcf5d78f3a8a3d1 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Fri, 28 Apr 2023 11:48:40 +0200
Subject: [PATCH] change(ui): add more detials to health status

---
 .../components/Header/HealthStatus/HealthStatus.tsx |  2 +-
 .../components/Header/HealthStatus/HealthWidget.tsx |  6 +++++-
 .../app/components/Header/HealthStatus/getHealth.ts | 13 ++++++++++++-
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/Header/HealthStatus/HealthStatus.tsx b/frontend/app/components/Header/HealthStatus/HealthStatus.tsx
index 64e3a8524..3b43cafc9 100644
--- a/frontend/app/components/Header/HealthStatus/HealthStatus.tsx
+++ b/frontend/app/components/Header/HealthStatus/HealthStatus.tsx
@@ -6,7 +6,7 @@ import HealthWidget from "Components/Header/HealthStatus/HealthWidget";
 import { getHealthRequest } from './getHealth'
 
 export interface IServiceStats {
-  name: 'backendServices' | 'databases' | 'ingestionPipeline' | 'ssl';
+  name: 'backendServices' | 'databases' | 'ingestionPipeline' | 'SSL';
   serviceName: string;
   healthOk: boolean;
   subservices: {
diff --git a/frontend/app/components/Header/HealthStatus/HealthWidget.tsx b/frontend/app/components/Header/HealthStatus/HealthWidget.tsx
index de6bcc7e7..9e528691c 100644
--- a/frontend/app/components/Header/HealthStatus/HealthWidget.tsx
+++ b/frontend/app/components/Header/HealthStatus/HealthWidget.tsx
@@ -12,7 +12,7 @@ function HealthWidget({
   setShowModal,
   isError,
 }: {
-  healthResponse: { overallHealth: boolean; healthMap: Record<string, IServiceStats> };
+  healthResponse: { overallHealth: boolean; healthMap: Record<string, IServiceStats>, details: Record<string, any> };
   getHealth: Function;
   isLoading: boolean;
   lastAsked: string | null;
@@ -69,6 +69,10 @@ function HealthWidget({
         </div>
         {isError && <div className={'text-secondary text-sm'}>Error getting service health status</div>}
 
+        <div className={'w-full'}>
+          <div>Sessions: {healthResponse.details?.numberOfEventCaptured.toLocaleString()}</div>
+          <div>Events: {healthResponse.details?.numberOfSessionsCaptured.toLocaleString()}</div>
+        </div>
         <div className={'w-full'}>
           {!isError && !healthOk ? (
             <>
diff --git a/frontend/app/components/Header/HealthStatus/getHealth.ts b/frontend/app/components/Header/HealthStatus/getHealth.ts
index c378b0e8f..fa2050105 100644
--- a/frontend/app/components/Header/HealthStatus/getHealth.ts
+++ b/frontend/app/components/Header/HealthStatus/getHealth.ts
@@ -7,6 +7,17 @@ function mapResponse(resp: Record<string, any>) {
   const services = Object.keys(resp);
   const healthMap: Record<string, IServiceStats> = {};
   services.forEach((service) => {
+    if (service === 'details') return;
+    if (service === 'ssl') {
+      healthMap[service] = {
+        name: categoryKeyNames[service],
+        healthOk: resp[service].health,
+        serviceName: service,
+        // @ts-ignore
+        subservices: { ssl: resp[service] }
+      };
+      return;
+    }
     healthMap[service] = {
       // @ts-ignore
       name: categoryKeyNames[service],
@@ -23,7 +34,7 @@ function mapResponse(resp: Record<string, any>) {
     (service: Record<string, any>) => service.healthOk
   );
 
-  return { overallHealth, healthMap };
+  return { overallHealth, healthMap, details: resp.details };
 }
 
 export async function getHealthRequest(isPublic?: boolean) {