Add new health

src/Managing.WebApp/src/pages/settingsPage/healthchecks/healthChecks.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from 'react'
+import React, {useEffect, useState} from 'react'
 
 import useApiUrlStore from '../../../app/store/apiStore'
-import { Table } from '../../../components/mollecules'
+import {Table} from '../../../components/mollecules'
 
 // Define health check response interface based on the provided example
 interface HealthCheckEntry {
@@ -9,6 +9,7 @@ interface HealthCheckEntry {
   duration: string
   status: string
   tags: string[]
+  description?: string
 }
 
 interface HealthCheckResponse {
@@ -17,6 +18,23 @@ interface HealthCheckResponse {
   entries: Record<string, HealthCheckEntry>
 }
 
+// Interface for candle timeframe check data
+interface CandleTimeframeCheck {
+  CheckedTicker: string
+  CheckedTimeframe: string
+  StartDate: string
+  LatestCandleDate?: string
+  TimeDifference?: string
+  Status: string
+  Message: string
+}
+
+interface Web3ProxyHealthDetail {
+  status: string
+  message: string
+  data?: Record<string, any>
+}
+
 const HealthChecks: React.FC = () => {
   const { apiUrl, workerUrl } = useApiUrlStore()
   const [apiHealth, setApiHealth] = useState<HealthCheckResponse | null>(null)
@@ -42,9 +60,8 @@ const HealthChecks: React.FC = () => {
           setWorkerHealth(data)
         }
 
-        // Fetch Web3Proxy health check - assuming it's accessible via the API
-        // This might need adjustment based on your actual deployment
-        const web3Response = await fetch(`${apiUrl.replace(':5000', ':5002')}/health`)
+        // Fetch Web3Proxy health check - use the dedicated endpoint we created
+        const web3Response = await fetch(`${apiUrl}/health/web3proxy`)
         if (web3Response.ok) {
           const data = await web3Response.json()
           setWeb3ProxyHealth(data)
@@ -72,18 +89,132 @@ const HealthChecks: React.FC = () => {
           status: 'Unreachable',
           duration: 'N/A',
           tags: 'N/A',
+          description: 'Service unreachable',
+          details: null,
         },
       ]
     }
 
     // Convert entries to rows for the table
-    return Object.entries(health.entries).map(([key, entry]) => ({
-      service,
-      component: key,
-      status: entry.status,
-      duration: entry.duration,
-      tags: entry.tags.join(', '),
-    }))
+    const results: any[] = [];
+    
+    Object.entries(health.entries).forEach(([key, entry]) => {
+      // Basic health check entry
+      const baseEntry = {
+        service,
+        component: key,
+        status: entry.status,
+        duration: entry.duration,
+        tags: entry.tags.join(', '),
+        description: entry.description || '',
+        details: null,
+      };
+      
+      // Add the base entry
+      results.push(baseEntry);
+      
+      // Special handling for candle-data to expand timeframe checks
+      if (key === 'candle-data' && entry.data) {
+        // Extract timeframe checks
+        Object.entries(entry.data)
+          .filter(([dataKey]) => dataKey.startsWith('TimeframeCheck_'))
+          .forEach(([dataKey, timeframeData]) => {
+            const tfData = timeframeData as CandleTimeframeCheck;
+            results.push({
+              service,
+              component: `${key} - ${tfData.CheckedTimeframe}`,
+              status: tfData.Status,
+              duration: '',
+              tags: 'candles',
+              description: tfData.Message,
+              details: {
+                Ticker: tfData.CheckedTicker,
+                LatestCandle: tfData.LatestCandleDate,
+                TimeDifference: tfData.TimeDifference,
+              },
+            });
+          });
+      }
+      
+      // Special handling for Web3Proxy components
+      if (key === 'web3proxy' && entry.data) {
+        // Handle Privy check if present
+        if (entry.data.privy) {
+          const privyData = entry.data.privy as Web3ProxyHealthDetail;
+          results.push({
+            service,
+            component: `${key} - Privy`,
+            status: privyData.status,
+            duration: '',
+            tags: 'privy, external',
+            description: privyData.message || '',
+            details: null,
+          });
+        }
+        
+        // Handle GMX check if present
+        if (entry.data.gmx) {
+          const gmxData = entry.data.gmx as Web3ProxyHealthDetail;
+          const marketDetails: Record<string, any> = {};
+          
+          // Add market count and response time if available
+          if (gmxData.data) {
+            if (gmxData.data.marketCount) {
+              marketDetails['Market Count'] = gmxData.data.marketCount;
+            }
+            if (gmxData.data.responseTimeMs) {
+              marketDetails['Response Time'] = `${gmxData.data.responseTimeMs}ms`;
+            }
+            
+            // Add sample markets info (just count for details section)
+            if (gmxData.data.sampleMarkets && Array.isArray(gmxData.data.sampleMarkets)) {
+              marketDetails['Sample Markets'] = gmxData.data.sampleMarkets.length;
+              
+              // If there are sample markets, add the first one's details
+              if (gmxData.data.sampleMarkets.length > 0) {
+                const firstMarket = gmxData.data.sampleMarkets[0];
+                if (firstMarket.indexToken) {
+                  marketDetails['Example Market'] = firstMarket.indexToken;
+                }
+              }
+            }
+          }
+          
+          results.push({
+            service,
+            component: `${key} - GMX`,
+            status: gmxData.status,
+            duration: '',
+            tags: 'gmx, external',
+            description: gmxData.message || '',
+            details: Object.keys(marketDetails).length > 0 ? marketDetails : null,
+          });
+        }
+        
+        // Add version info if available
+        if (entry.data.version) {
+          const versionDetails: Record<string, any> = {
+            Version: entry.data.version
+          };
+          
+          if (entry.data.timestamp) {
+            versionDetails['Last Updated'] = entry.data.timestamp;
+          }
+          
+          results.push({
+            service,
+            component: `${key} - Version`,
+            status: entry.status,
+            duration: '',
+            tags: 'version',
+            description: `Web3Proxy Version: ${entry.data.version}`,
+            details: versionDetails,
+          });
+        }
+      }
+    });
+    
+    return results;
   }
 
   // Combine all health check data for display
@@ -114,19 +245,41 @@ const HealthChecks: React.FC = () => {
         Cell: ({ value }: { value: string }) => (
           <span
             className={`badge ${
-              value === 'Healthy'
+              value === 'Healthy' || value === 'healthy'
                 ? 'badge-success'
-                : value === 'Unreachable'
+                : value === 'Unreachable' || value === 'unhealthy'
                 ? 'badge-error'
                 : 'badge-warning'
             }`}
           >
-            {value}
+            {value.charAt(0).toUpperCase() + value.slice(1)}
           </span>
         ),
         disableSortBy: true,
         disableFilters: true,
       },
+      {
+        Header: 'Description',
+        accessor: 'description',
+        disableSortBy: true,
+        disableFilters: true,
+        Cell: ({ value, row }: any) => (
+          <div>
+            <div>{value}</div>
+            {row.original.details && (
+              <div className="text-xs mt-1 opacity-80">
+                {Object.entries(row.original.details).filter(([_, val]) => val !== undefined).map(
+                  ([key, val]) => (
+                    <div key={key}>
+                      <span className="font-semibold">{key}:</span> {String(val)}
+                    </div>
+                  )
+                )}
+              </div>
+            )}
+          </div>
+        ),
+      },
       {
         Header: 'Duration',
         accessor: 'duration',