From e90b39df73c08348a94ad34bb0b6ea37b41e177a Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 15 Jan 2025 14:10:46 -0600
Subject: [PATCH] reorder and fix key

---
 web/src/components/filter/LogLevelFilter.tsx |  2 +-
 web/src/pages/Logs.tsx                       | 88 ++++++++++----------
 2 files changed, 47 insertions(+), 43 deletions(-)

diff --git a/web/src/components/filter/LogLevelFilter.tsx b/web/src/components/filter/LogLevelFilter.tsx
index 9f08c51b5..e5ba474b1 100644
--- a/web/src/components/filter/LogLevelFilter.tsx
+++ b/web/src/components/filter/LogLevelFilter.tsx
@@ -84,7 +84,7 @@ export function GeneralFilterContent({
         <DropdownMenuSeparator />
         <div className="my-2.5 flex flex-col gap-2.5">
           {["debug", "info", "warning", "error"].map((item) => (
-            <div className="flex items-center justify-between">
+            <div className="flex items-center justify-between" key={item}>
               <Label
                 className="mx-2 w-full cursor-pointer capitalize text-primary"
                 htmlFor={item}
diff --git a/web/src/pages/Logs.tsx b/web/src/pages/Logs.tsx
index a7c137cea..bcd3430e4 100644
--- a/web/src/pages/Logs.tsx
+++ b/web/src/pages/Logs.tsx
@@ -52,48 +52,6 @@ function Logs() {
     }
   }, [tabsRef, logService]);
 
-  // handlers
-
-  const handleCopyLogs = useCallback(() => {
-    if (logs.length) {
-      copy(logs.join("\n"));
-      toast.success("Copied logs to clipboard");
-    } else {
-      toast.error("Could not copy logs to clipboard");
-    }
-  }, [logs]);
-
-  const handleDownloadLogs = useCallback(() => {
-    axios
-      .get(`api/logs/${logService}?download=true`)
-      .then((resp) => {
-        const element = document.createElement("a");
-        element.setAttribute(
-          "href",
-          "data:text/plain;charset=utf-8," + encodeURIComponent(resp.data),
-        );
-        element.setAttribute("download", `${logService}-logs.txt`);
-
-        element.style.display = "none";
-        document.body.appendChild(element);
-
-        element.click();
-
-        document.body.removeChild(element);
-      })
-      .catch(() => {});
-  }, [logService]);
-
-  const handleRowClick = useCallback(
-    (rowInfo: { lineNumber: number; rowIndex: number }) => {
-      const clickedLine = parseLogLines(logService, [
-        logs[rowInfo.rowIndex],
-      ])[0];
-      setSelectedLog(clickedLine);
-    },
-    [logs, logService],
-  );
-
   // filter
 
   const filterLines = useCallback(
@@ -213,6 +171,52 @@ function Logs() {
     };
   }, [fetchInitialLogs, fetchLogsStream]);
 
+  // handlers
+
+  const handleCopyLogs = useCallback(() => {
+    if (logs.length) {
+      fetchInitialLogs()
+        .then(() => {
+          copy(logs.join("\n"));
+          toast.success("Copied logs to clipboard");
+        })
+        .catch(() => {
+          toast.error("Could not copy logs to clipboard");
+        });
+    }
+  }, [logs, fetchInitialLogs]);
+
+  const handleDownloadLogs = useCallback(() => {
+    axios
+      .get(`logs/${logService}?download=true`)
+      .then((resp) => {
+        const element = document.createElement("a");
+        element.setAttribute(
+          "href",
+          "data:text/plain;charset=utf-8," + encodeURIComponent(resp.data),
+        );
+        element.setAttribute("download", `${logService}-logs.txt`);
+
+        element.style.display = "none";
+        document.body.appendChild(element);
+
+        element.click();
+
+        document.body.removeChild(element);
+      })
+      .catch(() => {});
+  }, [logService]);
+
+  const handleRowClick = useCallback(
+    (rowInfo: { lineNumber: number; rowIndex: number }) => {
+      const clickedLine = parseLogLines(logService, [
+        logs[rowInfo.rowIndex],
+      ])[0];
+      setSelectedLog(clickedLine);
+    },
+    [logs, logService],
+  );
+
   // keyboard listener
 
   useKeyboardListener(