added sse

package-lock.json

@@ -25,6 +25,7 @@
         "react-router-dom": "^6.10.0",
         "react-scripts": "5.0.1",
         "react-stl-viewer": "^2.2.5",
+        "react-virtuoso": "^4.5.1",
         "react-webcam": "^7.1.1",
         "uuid": "^9.0.0",
         "web-vitals": "^2.1.4"
@@ -15806,6 +15807,18 @@
         "react-dom": ">=16.13"
       }
     },
+    "node_modules/react-virtuoso": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-4.5.1.tgz",
+      "integrity": "sha512-Jdo9M/T5PcDAczvmXAKwvb/BW0MCMr/cb+3j2m9192zlQgQ+syMdJR42i+Sk80ln5aSNaL1fnxleJzdKsCc4lw==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16 || >=17 || >= 18",
+        "react-dom": ">=16 || >=17 || >= 18"
+      }
+    },
     "node_modules/react-webcam": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/react-webcam/-/react-webcam-7.1.1.tgz",

package.json

@@ -20,6 +20,7 @@
     "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",
     "react-stl-viewer": "^2.2.5",
+    "react-virtuoso": "^4.5.1",
     "react-webcam": "^7.1.1",
     "uuid": "^9.0.0",
     "web-vitals": "^2.1.4"

public/locales/de/translation.json

@@ -423,5 +423,10 @@
     "minute_plural": "Vor {{count}} Minuten",
     "second": "Vor {{count}} Sekunde",
     "second_plural": "Vor {{count}} Sekunden"
+  },
+  "consoles": {
+    "noLogTypesFound": "Keine Log-Typen gefunden",
+    "noLogManagerServerSpecified": "Kein Log-Manager-Server angegeben",
+    "couldntReachlogManagerServer": "Verbindung zum Log-Manager-Server konnte nicht hergestellt werden"
   }
 }

public/locales/en/translation.json

@@ -422,5 +422,10 @@
     "minute_plural": "{{count}} minutes ago",
     "second": "{{count}} second ago",
     "second_plural": "{{count}} seconds ago"
+  },
+  "consoles": {
+    "noLogTypesFound": "No log types found",
+    "noLogManagerServerSpecified": "No log manager specified",
+    "couldntReachlogManagerServer": "Connection to log manager server failed"
   }
 }

src/Components/LogCard/index.js

@@ -1,10 +1,16 @@
 import { ReloadOutlined } from "@ant-design/icons";
 import { Card, Checkbox, Select, Space, Spin, Tooltip } from "antd";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Constants, myFetch } from "../../utils";
 import { useTranslation } from "react-i18next";
+import { Virtuoso } from "react-virtuoso";
 
-export default function LogCard({ type, title, customResult }) {
+export default function LogCard({
+  type,
+  title,
+  customResult,
+  logApiAddress = Constants.LOG_API_ADDRESS,
+}) {
   const { t } = useTranslation();
   const [checkboxInfoChecked, setCheckboxInfoChecked] = useState(true);
   const [checkboxErrorChecked, setCheckboxErrorChecked] = useState(true);
@@ -14,18 +20,16 @@ export default function LogCard({ type, title, customResult }) {
   const [selectedDate, setSelectedDate] = useState("");
   const [logs, setLogs] = useState([]);
 
-  useEffect(() => {
-    console.log("useEffect logCard", type);
+  const sseEventSource = useRef(null);
 
+  useEffect(() => {
     if (type === "") return;
 
     // init request to get all available dates
-    myFetch(`${type}`, "GET", null, {}, 0, Constants.LOG_API_ADDRESS)
+    myFetch(`s/${type}`, "GET", null, {}, 0, logApiAddress)
       .then((data) => {
         let dates = [];
 
-        console.log("data", data);
-
         if (data.length === 0) return;
 
         dates = data.map((date) => {
@@ -48,12 +52,10 @@ export default function LogCard({ type, title, customResult }) {
   const loadLogs = (date) => {
     setLoadingSpinner(true);
 
-    console.log("loadLogs", date);
-
     if (date === "") return;
 
     // fetch logs
-    myFetch(`${type}?d=${date}`, "GET", null, {}, 0, Constants.LOG_API_ADDRESS)
+    myFetch(`s/${type}?d=${date}`, "GET", null, {}, 0, logApiAddress)
       .then((data) => {
         setLoadingSpinner(false);
 
@@ -68,9 +70,47 @@ export default function LogCard({ type, title, customResult }) {
       .catch((errStatus) => console.log("error", errStatus));
   };
 
+  useEffect(() => loadLogs(selectedDate), [selectedDate]);
+
   useEffect(() => {
-    loadLogs(selectedDate);
-  }, [selectedDate]);
+    if (type === "" || selectedDate === "") return;
+
+    const currentDate = new Date();
+
+    const today = `${currentDate.getDate()}-${
+      currentDate.getMonth() + 1
+    }-${currentDate.getFullYear()}`;
+
+    if (selectedDate === today) {
+      sseEventSource.current = new EventSource(
+        `${logApiAddress}/sse/${type}/${selectedDate}`
+      );
+
+      sseEventSource.current.onmessage = (event) => {
+        const data = JSON.parse(event.data);
+
+        setLogs((prevLogs) => {
+          const newLogs = [...prevLogs];
+
+          data.forEach((log) => {
+            newLogs.push(log);
+          });
+
+          return newLogs;
+        });
+      };
+
+      sseEventSource.current.onerror = (event) =>
+        console.log("sse error", event);
+
+      sseEventSource.current.onopen = (event) => console.log("sse open", event);
+
+      sseEventSource.current.onclose = (event) =>
+        console.log("sse close", event);
+
+      return () => sseEventSource.current.close();
+    }
+  }, [type, selectedDate]);
 
   return (
     <Card
@@ -112,14 +152,13 @@ export default function LogCard({ type, title, customResult }) {
       {customResult === undefined ? (
         <>
           {!loadingSpinner && type !== "" ? (
-            <div
-              style={{ height: "80vh", overflowY: "scroll", paddingRight: 6 }}
-            >
-              {logs.map((log, i) => (
-                <p key={i} style={{ margin: 0 }}>
-                  {log}
-                </p>
-              ))}
+            <div style={{ height: "80vh", paddingRight: 6 }}>
+              <Virtuoso
+                data={logs}
+                itemContent={(_, log) => (
+                  <div style={{ padding: "2px" }}>{log}</div>
+                )}
+              />
             </div>
           ) : (
             <div

src/Contexts/ConsolesContext.js

@@ -15,10 +15,6 @@ export default function ConsolesProvider({ children }) {
       label: "Stable Server",
       value: "http://127.0.0.1:50120/v1/log",
     },
-    {
-      label: "Test123",
-      value: "test",
-    },
   ]);
 
   return (

src/Pages/Consoles/index.js

@@ -3,8 +3,10 @@ import LogCard from "../../Components/LogCard";
 import { useEffect, useState } from "react";
 import { myFetch } from "../../utils";
 import { useConsolesContext } from "../../Contexts/ConsolesContext";
+import { useTranslation } from "react-i18next";
 
 export default function Consoles() {
+  const { t } = useTranslation();
   const consolesContext = useConsolesContext();
 
   const [selectedLogServer, setSelectedLogServer] = useState(
@@ -17,14 +19,10 @@ export default function Consoles() {
   const [result, setResult] = useState();
 
   useEffect(() => {
-    console.log("selectedLogServer", selectedLogServer);
-
     if (selectedLogServer === "") return;
 
     myFetch("/types", "GET", null, {}, 0, selectedLogServer)
       .then((data) => {
-        console.log("data", data);
-
         let newTypes = [];
 
         if (data.length > 0) {
@@ -37,24 +35,21 @@ export default function Consoles() {
           setResult(
             <Result
               status="404"
-              title="No log types found"
-              subTitle="Contact admin"
+              title={t("consoles.noLogTypesFound")}
+              subTitle={t("common.contactAdmin")}
             />
           );
         }
 
         setAvailableLogTypes(newTypes);
-
         setSelectedLogType(newTypes.length > 0 ? newTypes[0].value : "");
       })
-      .catch((err) => {
-        console.log("err", err);
-
+      .catch(() => {
         setResult(
           <Result
             status="500"
-            title="Couldn't reach log manager server"
-            subTitle="Contact admin"
+            title={t("consoles.couldntReachlogManagerServer")}
+            subTitle={t("common.contactAdmin")}
           />
         );
       });
@@ -63,14 +58,15 @@ export default function Consoles() {
   return (
     <LogCard
       type={selectedLogType}
+      logApiAddress={selectedLogServer}
       customResult={
         consolesContext.logManagerServers.length > 0 ? (
           result
         ) : (
           <Result
             status="500"
-            title="No log manager specified"
-            subTitle="Contact admin"
+            title={t("common.noLogManagerServerSpecified")}
+            subTitle={t("common.contactAdmin")}
           />
         )
       }
@@ -85,8 +81,6 @@ export default function Consoles() {
             placeholder="Select server"
           />
 
-          {console.warn("def", consolesContext.logManagerServers[0])}
-
           <Select
             disabled={
               result !== undefined ||

src/utils.js

@@ -17,7 +17,7 @@ if (window.location.hostname === "localhost") {
   apiAddress = "http://localhost:50050/v1";
   staticContentAddress = "http://localhost:50050/";
   wsAddress = "ws://localhost:50050/ws";
-  logApiAddress = "http://127.0.0.1:50110/v1/logs/";
+  logApiAddress = "http://127.0.0.1:50110/v1/log";
 } else if (window.location.hostname === "192.168.178.93") {
   apiAddress = "http://192.168.178.93:50050/v1";
   staticContentAddress = "http://192.168.178.93:50050/";