diff --git a/ui/src/pages/AgentHealth/AgentHealth.module.css b/ui/src/pages/AgentHealth/AgentHealth.module.css index 401fcd22..744f577f 100644 --- a/ui/src/pages/AgentHealth/AgentHealth.module.css +++ b/ui/src/pages/AgentHealth/AgentHealth.module.css @@ -98,6 +98,24 @@ color: var(--text-primary); } +.inspectLink { + background: transparent; + border: none; + color: var(--text-faint); + opacity: 0.75; + cursor: pointer; + font-size: 13px; + padding: 2px 4px; + border-radius: var(--radius-sm); + line-height: 1; + display: inline-flex; +} + +.inspectLink:hover { + color: var(--text-primary); + opacity: 1; +} + .instanceMeta { color: var(--text-muted); white-space: nowrap; diff --git a/ui/src/pages/AgentHealth/AgentHealth.tsx b/ui/src/pages/AgentHealth/AgentHealth.tsx index 7427cd78..1bafae5f 100644 --- a/ui/src/pages/AgentHealth/AgentHealth.tsx +++ b/ui/src/pages/AgentHealth/AgentHealth.tsx @@ -1,5 +1,5 @@ import { useState, useMemo } from 'react'; -import { useParams } from 'react-router'; +import { useParams, useNavigate } from 'react-router'; import { StatCard, StatusDot, Badge, MonoText, ProgressBar, GroupCard, DataTable, LineChart, EventFeed, DetailPanel, @@ -240,6 +240,7 @@ function mapLogLevel(level: string): LogEntry['level'] { export default function AgentHealth() { const { appId } = useParams(); + const navigate = useNavigate(); const { data: agents } = useAgents(undefined, appId); const [eventSortAsc, setEventSortAsc] = useState(false); const [eventRefreshTo, setEventRefreshTo] = useState(); @@ -307,6 +308,23 @@ export default function AgentHealth() { width: '12px', render: (_val, row) => , }, + { + key: '_inspect', + header: '', + width: '36px', + render: (_val, row) => ( + + ), + }, { key: 'name', header: 'Instance',