From 9e1a50c3beadfdfed40838869ccb9fdf723c8d65 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 31 Oct 2024 14:48:26 -0500
Subject: [PATCH] Clean up copy output (#14705)

* Remove extra spacing for next/prev carousel buttons

* Clarify ollama genai docs

* Clean up copied gpu info output

* Clean up copied gpu info output

* Better display when manually copying/pasting log data
---
 web/src/components/overlay/GPUInfoDialog.tsx | 10 +--
 web/src/pages/Logs.tsx                       | 86 +++++++++++++++++++-
 web/src/pages/System.tsx                     |  2 +
 3 files changed, 89 insertions(+), 9 deletions(-)

diff --git a/web/src/components/overlay/GPUInfoDialog.tsx b/web/src/components/overlay/GPUInfoDialog.tsx
index 957d1e681..3821579e2 100644
--- a/web/src/components/overlay/GPUInfoDialog.tsx
+++ b/web/src/components/overlay/GPUInfoDialog.tsx
@@ -10,6 +10,7 @@ import ActivityIndicator from "../indicators/activity-indicator";
 import { GpuInfo, Nvinfo, Vainfo } from "@/types/stats";
 import { Button } from "../ui/button";
 import copy from "copy-to-clipboard";
+import { toast } from "sonner";
 
 type GPUInfoDialogProps = {
   showGpuInfo: boolean;
@@ -30,12 +31,11 @@ export default function GPUInfoDialog({
 
   const onCopyInfo = async () => {
     copy(
-      JSON.stringify(gpuType == "vainfo" ? vainfo : nvinfo).replace(
-        /[\\\s]+/gi,
-        "",
-      ),
+      JSON.stringify(gpuType == "vainfo" ? vainfo : nvinfo)
+        .replace(/\\t/g, "\t")
+        .replace(/\\n/g, "\n"),
     );
-    setShowGpuInfo(false);
+    toast.success("Copied GPU info to clipboard.");
   };
 
   if (gpuType == "vainfo") {
diff --git a/web/src/pages/Logs.tsx b/web/src/pages/Logs.tsx
index 8178e9e90..949fffb8a 100644
--- a/web/src/pages/Logs.tsx
+++ b/web/src/pages/Logs.tsx
@@ -300,6 +300,84 @@ function Logs() {
     },
   );
 
+  useEffect(() => {
+    const handleCopy = (e: ClipboardEvent) => {
+      e.preventDefault();
+      if (!contentRef.current) return;
+
+      const selection = window.getSelection();
+      if (!selection) return;
+
+      const range = selection.getRangeAt(0);
+      const fragment = range.cloneContents();
+
+      const extractLogData = (element: Element) => {
+        const severity =
+          element.querySelector(".log-severity")?.textContent?.trim() || "";
+        const dateStamp =
+          element.querySelector(".log-timestamp")?.textContent?.trim() || "";
+        const section =
+          element.querySelector(".log-section")?.textContent?.trim() || "";
+        const content =
+          element.querySelector(".log-content")?.textContent?.trim() || "";
+
+        return { severity, dateStamp, section, content };
+      };
+
+      let copyData: {
+        severity: string;
+        dateStamp: string;
+        section: string;
+        content: string;
+      }[] = [];
+
+      if (fragment.querySelectorAll(".grid").length > 0) {
+        // Multiple grid elements
+        copyData = Array.from(fragment.querySelectorAll(".grid")).map(
+          extractLogData,
+        );
+      } else {
+        // Try to find the closest grid element or use the first child element
+        const gridElement =
+          fragment.querySelector(".grid") || (fragment.firstChild as Element);
+
+        if (gridElement) {
+          const data = extractLogData(gridElement);
+          if (data.severity || data.dateStamp || data.section || data.content) {
+            copyData.push(data);
+          }
+        }
+      }
+
+      if (copyData.length === 0) return; // No valid data to copy
+
+      // Calculate maximum widths for each column
+      const maxWidths = {
+        severity: Math.max(...copyData.map((d) => d.severity.length)),
+        dateStamp: Math.max(...copyData.map((d) => d.dateStamp.length)),
+        section: Math.max(...copyData.map((d) => d.section.length)),
+      };
+
+      const pad = (str: string, length: number) => str.padEnd(length, " ");
+
+      // Create the formatted copy text
+      const copyText = copyData
+        .map(
+          (d) =>
+            `${pad(d.severity, maxWidths.severity)} | ${pad(d.dateStamp, maxWidths.dateStamp)} | ${pad(d.section, maxWidths.section)} | ${d.content}`,
+        )
+        .join("\n");
+
+      e.clipboardData?.setData("text/plain", copyText);
+    };
+
+    const content = contentRef.current;
+    content?.addEventListener("copy", handleCopy);
+    return () => {
+      content?.removeEventListener("copy", handleCopy);
+    };
+  }, []);
+
   return (
     <div className="flex size-full flex-col p-2">
       <Toaster position="top-center" closeButton={true} />
@@ -467,18 +545,18 @@ function LogLineData({
       )}
       onClick={onSelect}
     >
-      <div className="flex h-full items-center gap-2 p-1">
+      <div className="log-severity flex h-full items-center gap-2 p-1">
         <LogChip severity={line.severity} onClickSeverity={onClickSeverity} />
       </div>
-      <div className="col-span-2 flex h-full items-center sm:col-span-1">
+      <div className="log-timestamp col-span-2 flex h-full items-center sm:col-span-1">
         {line.dateStamp}
       </div>
-      <div className="col-span-2 flex size-full items-center pr-2">
+      <div className="log-section col-span-2 flex size-full items-center pr-2">
         <div className="w-full overflow-hidden text-ellipsis whitespace-nowrap">
           {line.section}
         </div>
       </div>
-      <div className="col-span-5 flex size-full items-center justify-between pl-2 pr-2 sm:col-span-4 sm:pl-0 md:col-span-8">
+      <div className="log-content col-span-5 flex size-full items-center justify-between pl-2 pr-2 sm:col-span-4 sm:pl-0 md:col-span-8">
         <div className="w-full overflow-hidden text-ellipsis whitespace-nowrap">
           {line.content}
         </div>
diff --git a/web/src/pages/System.tsx b/web/src/pages/System.tsx
index ab5c86f6a..23d1b7e6a 100644
--- a/web/src/pages/System.tsx
+++ b/web/src/pages/System.tsx
@@ -13,6 +13,7 @@ import useOptimisticState from "@/hooks/use-optimistic-state";
 import CameraMetrics from "@/views/system/CameraMetrics";
 import { useHashState } from "@/hooks/use-overlay-state";
 import { capitalizeFirstLetter } from "@/utils/stringUtil";
+import { Toaster } from "@/components/ui/sonner";
 
 const metrics = ["general", "storage", "cameras"] as const;
 type SystemMetric = (typeof metrics)[number];
@@ -42,6 +43,7 @@ function System() {
 
   return (
     <div className="flex size-full flex-col p-2">
+      <Toaster position="top-center" />
       <div className="relative flex h-11 w-full items-center justify-between">
         {isMobile && (
           <Logo className="absolute inset-x-1/2 h-8 -translate-x-1/2" />