feat: overlay z-index fix, app name navigation, TPS on compact cards
- Bump overlay z-index to 100 so it renders above the sidebar
- App name in compact card navigates to /runtime/{slug} on click
- Add TPS (msg/s) as third metric on compact cards between live
count and heartbeat
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -106,7 +106,7 @@ const LOG_SOURCE_ITEMS: ButtonGroupItem[] = [
|
||||
{ value: 'container', label: 'Container' },
|
||||
];
|
||||
|
||||
function CompactAppCard({ group, onExpand }: { group: AppGroup; onExpand: () => void }) {
|
||||
function CompactAppCard({ group, onExpand, onNavigate }: { group: AppGroup; onExpand: () => void; onNavigate: () => void }) {
|
||||
const health = appHealth(group);
|
||||
const heartbeat = latestHeartbeat(group);
|
||||
const isHealthy = health === 'success';
|
||||
@@ -125,13 +125,22 @@ function CompactAppCard({ group, onExpand }: { group: AppGroup; onExpand: () =>
|
||||
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onExpand(); }}
|
||||
>
|
||||
<div className={styles.compactCardHeader}>
|
||||
<span className={styles.compactCardName}>{group.appId}</span>
|
||||
<span
|
||||
className={styles.compactCardName}
|
||||
onClick={(e) => { e.stopPropagation(); onNavigate(); }}
|
||||
role="link"
|
||||
>
|
||||
{group.appId}
|
||||
</span>
|
||||
<ChevronRight size={14} className={styles.compactCardChevron} />
|
||||
</div>
|
||||
<div className={styles.compactCardMeta}>
|
||||
<span className={styles.compactCardLive}>
|
||||
{group.liveCount}/{group.instances.length} live
|
||||
</span>
|
||||
<span className={styles.compactCardTps}>
|
||||
{group.totalTps.toFixed(1)}/s
|
||||
</span>
|
||||
<span className={isHealthy ? styles.compactCardHeartbeat : styles.compactCardHeartbeatWarn}>
|
||||
{heartbeat ? timeAgo(heartbeat) : '\u2014'}
|
||||
</span>
|
||||
@@ -711,6 +720,7 @@ export default function AgentHealth() {
|
||||
<CompactAppCard
|
||||
group={group}
|
||||
onExpand={() => animateToggle(group.appId)}
|
||||
onNavigate={() => navigate(`/runtime/${group.appId}`)}
|
||||
/>
|
||||
{expandedApps.has(group.appId) && (
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user