From 3576ecb258a1247dcf1f763ca9600ea37bc76816 Mon Sep 17 00:00:00 2001 From: alex Date: Mon, 11 Sep 2023 23:04:05 +0200 Subject: [PATCH] added sse --- package-lock.json | 13 +++++ package.json | 1 + public/locales/de/translation.json | 5 ++ public/locales/en/translation.json | 5 ++ src/Components/LogCard/index.js | 79 ++++++++++++++++++++++-------- src/Contexts/ConsolesContext.js | 4 -- src/Pages/Consoles/index.js | 26 ++++------ src/utils.js | 2 +- 8 files changed, 94 insertions(+), 41 deletions(-) diff --git a/package-lock.json b/package-lock.json index 840f15a..d0a41c6 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index e08c66b..e5b6ba5 100644 --- a/package.json +++ b/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" diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json index 77dad7c..b13a50d 100644 --- a/public/locales/de/translation.json +++ b/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" } } diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index db43692..0f555eb 100644 --- a/public/locales/en/translation.json +++ b/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" } } diff --git a/src/Components/LogCard/index.js b/src/Components/LogCard/index.js index 46fec40..45824fa 100644 --- a/src/Components/LogCard/index.js +++ b/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 ( {!loadingSpinner && type !== "" ? ( -
- {logs.map((log, i) => ( -

- {log} -

- ))} +
+ ( +
{log}
+ )} + />
) : (
{ - 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( ); } setAvailableLogTypes(newTypes); - setSelectedLogType(newTypes.length > 0 ? newTypes[0].value : ""); }) - .catch((err) => { - console.log("err", err); - + .catch(() => { setResult( ); }); @@ -63,14 +58,15 @@ export default function Consoles() { return ( 0 ? ( result ) : ( ) } @@ -85,8 +81,6 @@ export default function Consoles() { placeholder="Select server" /> - {console.warn("def", consolesContext.logManagerServers[0])} -