feat: added status indicator component

Author: tsypuk

react-admin/src/components/StatusIndicator.css

@@ -0,0 +1,20 @@
+.status-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.status-indicator {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: red; /* Default to red */
+}
+
+.status-indicator.green {
+    background-color: green;
+}
+
+.status-indicator.red {
+    background-color: red;
+}

react-admin/src/components/StatusIndicator.tsx

@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from 'react';
+import './StatusIndicator.css';
+
+const StatusIndicator: React.FC = () => {
+    const [status, setStatus] = useState<'green' | 'red'>('red');
+
+    const checkStatus = async () => {
+        try {
+            const response = await fetch('http://localhost:8080/api/v1/status'); // Replace with your endpoint
+            console.log(response)
+            if (response.status === 200) {
+                setStatus('green');
+            } else {
+                setStatus('red');
+            }
+        } catch (error) {
+            console.error('Error fetching status:', error);
+            setStatus('red'); // Set red if the request fails
+        }
+    };
+
+    useEffect(() => {
+        // Initial check
+        checkStatus();
+
+        // Poll the API every 5 seconds
+        const intervalId = setInterval(() => {
+            checkStatus();
+        }, 5000); // 5 seconds
+
+        // Clean up the interval when the component is unmounted
+        return () => clearInterval(intervalId);
+    }, []);
+
+    return (
+        <div className="status-container">
+            <div className={`status-indicator ${status}`}></div>
+            <p>Status: {status === 'green' ? 'Operational' : 'Down'}</p>
+        </div>
+    );
+};
+
+export default StatusIndicator;