feat: add sort toggle and refresh buttons to log/timeline panels

Remove auto-scroll override hack. Add sort order toggle (asc/desc by time) and manual refresh button to both the application log and agent events timeline panels on AgentInstance and AgentHealth pages. Default is descending (newest first); toggling reverses the array. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-25 19:53:33 +01:00
parent cd30c2d9b5
commit 9b63443842
4 changed files with 124 additions and 75 deletions
--- a/ui/src/pages/AgentHealth/AgentHealth.module.css
+++ b/ui/src/pages/AgentHealth/AgentHealth.module.css
@@ -224,3 +224,27 @@
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
 }
+
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.sortBtn,
+.refreshBtn {
+  background: none;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 13px;
+  padding: 2px 6px;
+  line-height: 1;
+}
+
+.sortBtn:hover,
+.refreshBtn:hover {
+  color: var(--text-primary);
+  border-color: var(--amber);
+}
--- a/ui/src/pages/AgentHealth/AgentHealth.tsx
+++ b/ui/src/pages/AgentHealth/AgentHealth.tsx
@@ -1,4 +1,4 @@
-import { useState, useMemo, useRef, useEffect } from 'react';
+import { useState, useMemo } from 'react';
 import { useParams, Link } from 'react-router';
 import {
  StatCard, StatusDot, Badge, MonoText, ProgressBar,
@@ -223,19 +223,8 @@ function AgentPerformanceContent({ agent }: { agent: AgentInstance }) {
 export default function AgentHealth() {
  const { appId } = useParams();
  const { data: agents } = useAgents(undefined, appId);
-  const { data: events } = useAgentEvents(appId);
-  const timelineRef = useRef<HTMLDivElement>(null);
-
-  // Override EventFeed's auto-scroll-to-bottom so newest (DESC) events stay visible at top
-  useEffect(() => {
-    const el = timelineRef.current;
-    if (!el) return;
-    const timer = requestAnimationFrame(() => {
-      const list = el.querySelector('[aria-label="Event feed"]') as HTMLElement | null;
-      if (list) list.scrollTop = 0;
-    });
-    return () => cancelAnimationFrame(timer);
-  }, [events]);
+  const { data: events, refetch: refetchEvents } = useAgentEvents(appId);
+  const [eventSortAsc, setEventSortAsc] = useState(false);

  const [selectedInstance, setSelectedInstance] = useState<AgentInstance | null>(null);
  const [panelOpen, setPanelOpen] = useState(false);
@@ -254,22 +243,22 @@ export default function AgentHealth() {
  const totalRoutes = agentList.reduce((s, a) => s + (a.totalRoutes ?? 0), 0);

  // Map events to FeedEvent
-  const feedEvents: FeedEvent[] = useMemo(
-    () =>
-      (events ?? []).map((e: { id: number; agentId: string; eventType: string; detail: string; timestamp: string }) => ({
-        id: String(e.id),
-        severity:
-          e.eventType === 'WENT_DEAD'
-            ? ('error' as const)
-            : e.eventType === 'WENT_STALE'
-              ? ('warning' as const)
-              : e.eventType === 'RECOVERED'
-                ? ('success' as const)
-                : ('running' as const),
-        message: `${e.agentId}: ${e.eventType}${e.detail ? ' \u2014 ' + e.detail : ''}`,
-        timestamp: new Date(e.timestamp),
-      })),
-    [events],
+  const feedEvents: FeedEvent[] = useMemo(() => {
+    const mapped = (events ?? []).map((e: { id: number; agentId: string; eventType: string; detail: string; timestamp: string }) => ({
+      id: String(e.id),
+      severity:
+        e.eventType === 'WENT_DEAD'
+          ? ('error' as const)
+          : e.eventType === 'WENT_STALE'
+            ? ('warning' as const)
+            : e.eventType === 'RECOVERED'
+              ? ('success' as const)
+              : ('running' as const),
+      message: `${e.agentId}: ${e.eventType}${e.detail ? ' \u2014 ' + e.detail : ''}`,
+      timestamp: new Date(e.timestamp),
+    }));
+    return eventSortAsc ? mapped.toReversed() : mapped;
+  }, [events, eventSortAsc],
  );

  // Column definitions for the instance DataTable
@@ -512,10 +501,18 @@ export default function AgentHealth() {

      {/* EventFeed */}
      {feedEvents.length > 0 && (
-        <div className={styles.eventCard} ref={timelineRef}>
+        <div className={styles.eventCard}>
          <div className={styles.eventCardHeader}>
            <span className={styles.sectionTitle}>Timeline</span>
-            <span className={styles.sectionMeta}>{feedEvents.length} events</span>
+            <div className={styles.headerActions}>
+              <span className={styles.sectionMeta}>{feedEvents.length} events</span>
+              <button className={styles.sortBtn} onClick={() => setEventSortAsc((v) => !v)} title={eventSortAsc ? 'Oldest first' : 'Newest first'}>
+                {eventSortAsc ? '\u2191' : '\u2193'}
+              </button>
+              <button className={styles.refreshBtn} onClick={() => refetchEvents()} title="Refresh">
+                &#x21bb;
+              </button>
+            </div>
          </div>
          <EventFeed events={feedEvents} maxItems={100} />
        </div>
--- a/ui/src/pages/AgentInstance/AgentInstance.module.css
+++ b/ui/src/pages/AgentInstance/AgentInstance.module.css
@@ -145,6 +145,30 @@
  border-bottom: 1px solid var(--border-subtle);
 }

+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.sortBtn,
+.refreshBtn {
+  background: none;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 13px;
+  padding: 2px 6px;
+  line-height: 1;
+}
+
+.sortBtn:hover,
+.refreshBtn:hover {
+  color: var(--text-primary);
+  border-color: var(--amber);
+}
+
 .logToolbar {
  display: flex;
  align-items: center;
--- a/ui/src/pages/AgentInstance/AgentInstance.tsx
+++ b/ui/src/pages/AgentInstance/AgentInstance.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState, useRef, useEffect } from 'react';
+import { useMemo, useState } from 'react';
 import { useParams, Link } from 'react-router';
 import {
  StatCard, StatusDot, Badge, LineChart, AreaChart, BarChart,
@@ -33,26 +33,15 @@ export default function AgentInstance() {
  const { timeRange } = useGlobalFilters();
  const [logSearch, setLogSearch] = useState('');
  const [logLevels, setLogLevels] = useState<Set<string>>(new Set());
+  const [logSortAsc, setLogSortAsc] = useState(false);
+  const [eventSortAsc, setEventSortAsc] = useState(false);
  const timeFrom = timeRange.start.toISOString();
  const timeTo = timeRange.end.toISOString();

-  const timelineRef = useRef<HTMLDivElement>(null);
-
  const { data: agents, isLoading } = useAgents(undefined, appId);
-  const { data: events } = useAgentEvents(appId, instanceId);
+  const { data: events, refetch: refetchEvents } = useAgentEvents(appId, instanceId);
  const { data: timeseries } = useStatsTimeseries(timeFrom, timeTo, undefined, appId);

-  // Override EventFeed's auto-scroll-to-bottom so newest (DESC) events stay visible at top
-  useEffect(() => {
-    const el = timelineRef.current;
-    if (!el) return;
-    const timer = requestAnimationFrame(() => {
-      const list = el.querySelector('[aria-label="Event feed"]') as HTMLElement | null;
-      if (list) list.scrollTop = 0;
-    });
-    return () => cancelAnimationFrame(timer);
-  }, [events]);
-
  const agent = useMemo(
    () => (agents || []).find((a: any) => a.id === instanceId) as any,
    [agents, instanceId],
@@ -87,25 +76,24 @@ export default function AgentInstance() {
    [timeseries],
  );

-  const feedEvents = useMemo<FeedEvent[]>(
-    () =>
-      (events || [])
-        .filter((e: any) => !instanceId || e.agentId === instanceId)
-        .map((e: any) => ({
-          id: String(e.id),
-          severity:
-            e.eventType === 'WENT_DEAD'
-              ? ('error' as const)
-              : e.eventType === 'WENT_STALE'
-                ? ('warning' as const)
-                : e.eventType === 'RECOVERED'
-                  ? ('success' as const)
-                  : ('running' as const),
-          message: `${e.eventType}${e.detail ? ' \u2014 ' + e.detail : ''}`,
-          timestamp: new Date(e.timestamp),
-        })),
-    [events, instanceId],
-  );
+  const feedEvents = useMemo<FeedEvent[]>(() => {
+    const mapped = (events || [])
+      .filter((e: any) => !instanceId || e.agentId === instanceId)
+      .map((e: any) => ({
+        id: String(e.id),
+        severity:
+          e.eventType === 'WENT_DEAD'
+            ? ('error' as const)
+            : e.eventType === 'WENT_STALE'
+              ? ('warning' as const)
+              : e.eventType === 'RECOVERED'
+                ? ('success' as const)
+                : ('running' as const),
+        message: `${e.eventType}${e.detail ? ' \u2014 ' + e.detail : ''}`,
+        timestamp: new Date(e.timestamp),
+      }));
+    return eventSortAsc ? mapped.toReversed() : mapped;
+  }, [events, instanceId, eventSortAsc]);

  // JVM chart series helpers
  const cpuSeries = useMemo(() => {
@@ -149,15 +137,15 @@ export default function AgentInstance() {
  );

  // Application logs from OpenSearch
-  const { data: rawLogs } = useApplicationLogs(appId, instanceId);
-  const logEntries = useMemo<LogEntry[]>(
-    () => (rawLogs || []).map((l) => ({
+  const { data: rawLogs, refetch: refetchLogs } = useApplicationLogs(appId, instanceId);
+  const logEntries = useMemo<LogEntry[]>(() => {
+    const mapped = (rawLogs || []).map((l) => ({
      timestamp: l.timestamp ?? '',
      level: mapLogLevel(l.level),
      message: l.message ?? '',
-    })),
-    [rawLogs],
-  );
+    }));
+    return logSortAsc ? mapped.toReversed() : mapped;
+  }, [rawLogs, logSortAsc]);
  const searchLower = logSearch.toLowerCase();
  const filteredLogs = logEntries
    .filter((l) => logLevels.size === 0 || logLevels.has(l.level))
@@ -409,7 +397,15 @@ export default function AgentInstance() {
        <div className={styles.logCard}>
          <div className={styles.logHeader}>
            <SectionHeader>Application Log</SectionHeader>
-            <span className={styles.chartMeta}>{logEntries.length} entries</span>
+            <div className={styles.headerActions}>
+              <span className={styles.chartMeta}>{logEntries.length} entries</span>
+              <button className={styles.sortBtn} onClick={() => setLogSortAsc((v) => !v)} title={logSortAsc ? 'Oldest first' : 'Newest first'}>
+                {logSortAsc ? '\u2191' : '\u2193'}
+              </button>
+              <button className={styles.refreshBtn} onClick={() => refetchLogs()} title="Refresh">
+                &#x21bb;
+              </button>
+            </div>
          </div>
          <div className={styles.logToolbar}>
            <div className={styles.logSearchWrap}>
@@ -448,10 +444,18 @@ export default function AgentInstance() {
          )}
        </div>

-        <div className={styles.timelineCard} ref={timelineRef}>
+        <div className={styles.timelineCard}>
          <div className={styles.timelineHeader}>
            <span className={styles.chartTitle}>Timeline</span>
-            <span className={styles.chartMeta}>{feedEvents.length} events</span>
+            <div className={styles.headerActions}>
+              <span className={styles.chartMeta}>{feedEvents.length} events</span>
+              <button className={styles.sortBtn} onClick={() => setEventSortAsc((v) => !v)} title={eventSortAsc ? 'Oldest first' : 'Newest first'}>
+                {eventSortAsc ? '\u2191' : '\u2193'}
+              </button>
+              <button className={styles.refreshBtn} onClick={() => refetchEvents()} title="Refresh">
+                &#x21bb;
+              </button>
+            </div>
          </div>
          {feedEvents.length > 0 ? (
            <EventFeed events={feedEvents} maxItems={50} />