feat(ocme): cycle count implemeneted

frontend/src/components/ocme/CycleCountLog.tsx

@@ -1,8 +1,30 @@
+import {useEffect, useState} from "react";
 import {LstCard} from "../extendedUI/LstCard";
 import {CardContent, CardHeader} from "../ui/card";
 import {Skeleton} from "../ui/skeleton";
+import {Button} from "../ui/button";
 
 export default function CycleCountLog() {
+    const [logs, setLogs] = useState([]);
+    const [streaming, setStreaming] = useState(false); // Track if streaming is active
+
+    useEffect(() => {
+        // Start streaming when the button is clicked
+        let es;
+
+        es = new EventSource("http://localhost:4000/api/logger/logs/stream?service=ocme-count&level=info");
+        es.onopen = () => console.log(">>> Connection opened!");
+        es.onerror = (e) => console.log("ERROR!", e);
+        es.onmessage = (e) => {
+            console.log(">>>", JSON.stringify(e));
+        };
+
+        return () => es.close();
+    }, []); // Effect runs when `streaming` state changes
+
+    const handleStartStreaming = () => {
+        setStreaming(true); // Start streaming when button is clicked
+    };
     return (
         <LstCard className="w-48">
             <CardHeader className="flex justify-center">
@@ -17,6 +39,7 @@ export default function CycleCountLog() {
                     </div>
                 ))}
             </CardContent>
+            <Button onClick={handleStartStreaming}>Start Stream</Button>
         </LstCard>
     );
 }