src/components/HealthCheck.tsx

import React, { useState, useEffect } from 'react';
import { checkHealth } from '../lib/api/health';
import type { HealthResponse } from '../lib/api/health';

/**

 * Component that displays the system health information

 */
export const HealthCheck: React.FC = () => {
  const [health, setHealth] = useState<HealthResponse | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchHealth = async () => {
      try {
        setLoading(true);
        const healthData = await checkHealth();
        setHealth(healthData);
        setError(null);
      } catch (err) {
        console.error('Error fetching health data:', err);
        setError('Failed to fetch health information');
      } finally {
        setLoading(false);
      }
    };

    fetchHealth();
  }, []);

  if (loading) {
    return <div className="p-4 text-center">Loading health information...</div>;
  }

  if (error) {
    return <div className="p-4 text-red-500">{error}</div>;
  }

  if (!health) {
    return <div className="p-4 text-yellow-500">No health information available</div>;
  }

  const systemHealth = health.entries['System Health'];

  return (
    <div className="p-4 border rounded-lg shadow-sm">

      <h2 className="text-xl font-semibold mb-4">

        System Health: 

        <span className={`ml-2 ${systemHealth.status === 'Healthy' ? 'text-green-500' : 'text-red-500'}`}>

          {systemHealth.status}

        </span>

      </h2>

      

      <div className="text-sm text-gray-600 mb-4">

        {systemHealth.description}

      </div>

      

      <div className="bg-gray-50 p-3 rounded">

        <h3 className="text-md font-medium mb-2">System Metrics</h3>

        

        <div className="grid grid-cols-2 gap-2">

          {Object.entries(systemHealth.data).map(([key, value]) => (

            <div key={key} className="flex justify-between border-b pb-1">

              <span className="font-medium">{key}:</span>

              <span>{String(value)}</span>

            </div>

          ))}

        </div>

      </div>

      

      <div className="mt-4 text-xs text-gray-500">

        Total Duration: {health.totalDuration}

      </div>

    </div>
  );
};

export default HealthCheck;