feat: add inspect column to agent instance data table
Add a dedicated inspect button column (↗) to navigate to the agent instance page, consistent with the exchange inspect pattern on the Dashboard. Row click still opens the detail slide-in panel. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -98,6 +98,24 @@
|
|||||||
color: var(--text-primary);
|
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 {
|
.instanceMeta {
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { useState, useMemo } from 'react';
|
import { useState, useMemo } from 'react';
|
||||||
import { useParams } from 'react-router';
|
import { useParams, useNavigate } from 'react-router';
|
||||||
import {
|
import {
|
||||||
StatCard, StatusDot, Badge, MonoText, ProgressBar,
|
StatCard, StatusDot, Badge, MonoText, ProgressBar,
|
||||||
GroupCard, DataTable, LineChart, EventFeed, DetailPanel,
|
GroupCard, DataTable, LineChart, EventFeed, DetailPanel,
|
||||||
@@ -240,6 +240,7 @@ function mapLogLevel(level: string): LogEntry['level'] {
|
|||||||
|
|
||||||
export default function AgentHealth() {
|
export default function AgentHealth() {
|
||||||
const { appId } = useParams();
|
const { appId } = useParams();
|
||||||
|
const navigate = useNavigate();
|
||||||
const { data: agents } = useAgents(undefined, appId);
|
const { data: agents } = useAgents(undefined, appId);
|
||||||
const [eventSortAsc, setEventSortAsc] = useState(false);
|
const [eventSortAsc, setEventSortAsc] = useState(false);
|
||||||
const [eventRefreshTo, setEventRefreshTo] = useState<string | undefined>();
|
const [eventRefreshTo, setEventRefreshTo] = useState<string | undefined>();
|
||||||
@@ -307,6 +308,23 @@ export default function AgentHealth() {
|
|||||||
width: '12px',
|
width: '12px',
|
||||||
render: (_val, row) => <StatusDot variant={normalizeStatus(row.status)} />,
|
render: (_val, row) => <StatusDot variant={normalizeStatus(row.status)} />,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
key: '_inspect',
|
||||||
|
header: '',
|
||||||
|
width: '36px',
|
||||||
|
render: (_val, row) => (
|
||||||
|
<button
|
||||||
|
className={styles.inspectLink}
|
||||||
|
title="Open instance page"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
navigate(`/agents/${row.application}/${row.id}`);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
↗
|
||||||
|
</button>
|
||||||
|
),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
key: 'name',
|
key: 'name',
|
||||||
header: 'Instance',
|
header: 'Instance',
|
||||||
|
|||||||
Reference in New Issue
Block a user