From 94aa5b2efa088e8bd39da770354710ec61b30762 Mon Sep 17 00:00:00 2001
From: Nasyarobby Putra <nasyarobby@gmail.com>
Date: Fri, 14 Aug 2026 21:14:07 +0700
Subject: [PATCH] feat(web): enhance LogViewer and EventDetailPage with
 filtering functionality

- Updated LogViewer component to accept filters and a callback for removing filters.
- Modified EventDetailPage to manage step filters, allowing users to filter logs based on selected steps.
- Added UI elements for displaying active filters and a button to toggle filtering for each step.
- Improved log visibility by applying filters dynamically based on user selection.
---
 packages/web/src/components/LogViewer.jsx  | 20 ++++++++-
 packages/web/src/pages/EventDetailPage.jsx | 50 ++++++++++++++++++++--
 2 files changed, 66 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/components/LogViewer.jsx b/packages/web/src/components/LogViewer.jsx
index 85dfb57..ddd8ac5 100644
--- a/packages/web/src/components/LogViewer.jsx
+++ b/packages/web/src/components/LogViewer.jsx
@@ -1,7 +1,8 @@
 import { useState } from "react";
+import { LuX } from "react-icons/lu";
 import { levelName } from "../lib/format.jsx";
 
-export function LogViewer({ logs = [], className = "" }) {
+export function LogViewer({ logs = [], filters = [], onRemoveFilter, className = "" }) {
   const [wordWrap, setWordWrap] = useState(true);
 
   return (
@@ -18,6 +19,23 @@ export function LogViewer({ logs = [], className = "" }) {
           />
         </label>
       </div>
+      {filters.length > 0 ? (
+        <div className="mb-2 flex shrink-0 flex-wrap gap-1">
+          {filters.map((f) => (
+            <span key={f.id} className="badge badge-sm badge-outline gap-1">
+              {f.label}
+              <button
+                type="button"
+                className="btn btn-ghost btn-xs btn-square -mr-1"
+                aria-label={`Remove filter ${f.label}`}
+                onClick={() => onRemoveFilter?.(f.id)}
+              >
+                <LuX className="size-3" />
+              </button>
+            </span>
+          ))}
+        </div>
+      ) : null}
       <div className="mockup-code min-h-0 flex-1 overflow-auto text-xs">
         {logs.length === 0 ? (
           <div className="flex gap-3 px-5 py-0.5 font-mono opacity-50">
diff --git a/packages/web/src/pages/EventDetailPage.jsx b/packages/web/src/pages/EventDetailPage.jsx
index 9b3bd31..1052f68 100644
--- a/packages/web/src/pages/EventDetailPage.jsx
+++ b/packages/web/src/pages/EventDetailPage.jsx
@@ -1,5 +1,6 @@
+import { useMemo, useState } from "react";
 import { Link, useParams } from "react-router-dom";
-import { LuArrowLeft } from "react-icons/lu";
+import { LuArrowLeft, LuFilter } from "react-icons/lu";
 import { useRun } from "../api/hooks.js";
 import { LogViewer } from "../components/LogViewer.jsx";
 import { formatTime, StatusBadge } from "../lib/format.jsx";
@@ -11,6 +12,10 @@ function stepLabel(s) {
   return s.script;
 }
 
+function filterLabel(s) {
+  return `#${s.step_index} ${stepLabel(s)}`;
+}
+
 function isEditableScript(s) {
   return Boolean(s.script) && s.script !== "set";
 }
@@ -18,6 +23,29 @@ function isEditableScript(s) {
 export function EventDetailPage() {
   const { id } = useParams();
   const { data: run, isLoading, error } = useRun(id);
+  const [stepFilters, setStepFilters] = useState([]);
+
+  const steps = run?.steps ?? [];
+  const logs = run?.logs ?? [];
+  const logFilters = useMemo(
+    () =>
+      stepFilters
+        .map((stepId) => steps.find((s) => s.id === stepId))
+        .filter(Boolean)
+        .map((s) => ({ id: s.id, label: filterLabel(s) })),
+    [stepFilters, steps],
+  );
+  const visibleLogs = useMemo(() => {
+    if (stepFilters.length === 0) return logs;
+    const ids = new Set(stepFilters);
+    return logs.filter((l) => ids.has(l.step_id));
+  }, [logs, stepFilters]);
+
+  function toggleStepFilter(stepId) {
+    setStepFilters((prev) =>
+      prev.includes(stepId) ? prev.filter((id) => id !== stepId) : [...prev, stepId],
+    );
+  }
 
   if (isLoading) return <span className="loading loading-spinner loading-lg" />;
   if (error || !run) return <p className="text-error">Event not found</p>;
@@ -71,10 +99,11 @@ export function EventDetailPage() {
                 <th>Status</th>
                 <th>Duration</th>
                 <th>Error</th>
+                <th></th>
               </tr>
             </thead>
             <tbody>
-              {(run.steps ?? []).map((s) => (
+              {steps.map((s) => (
                 <tr key={s.id}>
                   <td>{s.step_index}</td>
                   <td className="font-mono">
@@ -91,6 +120,17 @@ export function EventDetailPage() {
                   </td>
                   <td>{s.duration_ms != null ? `${s.duration_ms}ms` : "—"}</td>
                   <td className="text-error text-xs">{s.error || ""}</td>
+                  <td className="text-right">
+                    <button
+                      type="button"
+                      className={`btn btn-ghost btn-xs btn-square ${stepFilters.includes(s.id) ? "btn-active" : ""}`}
+                      aria-label={`Filter logs for ${filterLabel(s)}`}
+                      aria-pressed={stepFilters.includes(s.id)}
+                      onClick={() => toggleStepFilter(s.id)}
+                    >
+                      <LuFilter className="size-3.5" />
+                    </button>
+                  </td>
                 </tr>
               ))}
             </tbody>
@@ -98,7 +138,11 @@ export function EventDetailPage() {
         </div>
       </section>
 
-      <LogViewer logs={run.logs ?? []} />
+      <LogViewer
+        logs={visibleLogs}
+        filters={logFilters}
+        onRemoveFilter={(stepId) => toggleStepFilter(stepId)}
+      />
     </div>
   );
 }