integrated filter for logs

public/locales/de/translation.json

@@ -228,8 +228,8 @@
     },
     "card": {
       "checkbox": {
-        "autoScroll": "Auto scroll",
         "info": "INFO",
+        "warning": "WARNUNG",
         "error": "FEHLER"
       }
     },

public/locales/en/translation.json

@@ -228,8 +228,8 @@
     },
     "card": {
       "checkbox": {
-        "autoScroll": "Auto scroll",
         "info": "INFO",
+        "warning": "WARNING",
         "error": "ERROR"
       }
     },

src/Components/LogCard/index.js

@@ -14,6 +14,7 @@ export default function LogCard({
   // const [checkboxAutoScrollChecked, setCheckboxAutoScrollChecked] =
   // useState(true);
   const [checkboxInfoChecked, setCheckboxInfoChecked] = useState(true);
+  const [checkboxWarningChecked, setCheckboxWarningChecked] = useState(true);
   const [checkboxErrorChecked, setCheckboxErrorChecked] = useState(true);
   const virtuosoRef = useRef();
 
@@ -146,6 +147,16 @@ export default function LogCard({
   </Col> 
   */
 
+  const filteredLogs = logs.filter((log) => {
+    const logType = log.charAt(0);
+
+    return (
+      (checkboxInfoChecked && logType === "I") ||
+      (checkboxWarningChecked && logType === "W") ||
+      (checkboxErrorChecked && logType === "E")
+    );
+  });
+
   return (
     <Card
       title={
@@ -165,6 +176,14 @@ export default function LogCard({
                   {t("logCard.card.checkbox.info")}
                 </Checkbox>
               </Col>
+              <Col>
+                <Checkbox
+                  checked={checkboxWarningChecked}
+                  onChange={(e) => setCheckboxWarningChecked(e.target.checked)}
+                >
+                  {t("logCard.card.checkbox.warning")}
+                </Checkbox>
+              </Col>
               <Col>
                 <Checkbox
                   disabled={customResult !== undefined}
@@ -202,10 +221,26 @@ export default function LogCard({
               <Virtuoso
                 ref={virtuosoRef}
                 initialTopMostItemIndex={logs.length - 1}
-                data={logs}
-                itemContent={(_, log) => (
-                  <div style={{ padding: "1px" }}>{log}</div>
-                )}
+                data={filteredLogs}
+                itemContent={(_, log) => {
+                  const logType = log.charAt(0);
+                  let style = {};
+                  let color = "";
+
+                  if (checkboxInfoChecked && logType === "I") {
+                    color = "#44bd32";
+                  } else if (checkboxWarningChecked && logType === "W") {
+                    color = "#e67e22";
+                  } else if (checkboxErrorChecked && logType === "E") {
+                    color = "#e74c3c";
+                  } else {
+                    color = "#2980b9"; // no match
+                  }
+
+                  style = { padding: "1px", color };
+
+                  return <span style={style}>{log}</span>;
+                }}
                 followOutput={true}
               />
             </div>