feat: hide toggle on app detail, left-align toolbar, TPS unit fix

- Move view toggle into compact grid conditional so it only renders
  on the overview page (not app detail /runtime/{slug})
- Left-align the toolbar buttons
- Change TPS format from "x.y/s" to "x.y tps"

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-16 13:59:25 +02:00
parent 9d1cf7577a
commit 911ba591a9
2 changed files with 22 additions and 22 deletions

View File

@@ -369,7 +369,7 @@
.viewToolbar {
display: flex;
align-items: center;
justify-content: flex-end;
justify-content: flex-start;
gap: 8px;
margin-bottom: 12px;
}

View File

@@ -139,7 +139,7 @@ function CompactAppCard({ group, onExpand, onNavigate }: { group: AppGroup; onEx
{group.liveCount}/{group.instances.length} live
</span>
<span className={styles.compactCardTps}>
{group.totalTps.toFixed(1)}/s
{group.totalTps.toFixed(1)} tps
</span>
<span className={isHealthy ? styles.compactCardHeartbeat : styles.compactCardHeartbeatWarn}>
{heartbeat ? timeAgo(heartbeat) : '\u2014'}
@@ -526,26 +526,6 @@ export default function AgentHealth() {
/>
</div>
{/* View toolbar */}
<div className={styles.viewToolbar}>
<div className={styles.viewToggle}>
<button
className={`${styles.viewToggleBtn} ${viewMode === 'compact' ? styles.viewToggleBtnActive : ''}`}
onClick={() => toggleViewMode('compact')}
title="Compact view"
>
<LayoutGrid size={14} />
</button>
<button
className={`${styles.viewToggleBtn} ${viewMode === 'expanded' ? styles.viewToggleBtnActive : ''}`}
onClick={() => toggleViewMode('expanded')}
title="Expanded view"
>
<List size={14} />
</button>
</div>
</div>
{/* Application config bar */}
{appId && appConfig && (
<div className={`${sectionStyles.section} ${styles.configBar}`}>
@@ -714,6 +694,25 @@ export default function AgentHealth() {
))}
</div>
) : (
<>
<div className={styles.viewToolbar}>
<div className={styles.viewToggle}>
<button
className={`${styles.viewToggleBtn} ${viewMode === 'compact' ? styles.viewToggleBtnActive : ''}`}
onClick={() => toggleViewMode('compact')}
title="Compact view"
>
<LayoutGrid size={14} />
</button>
<button
className={`${styles.viewToggleBtn} ${viewMode === 'expanded' ? styles.viewToggleBtnActive : ''}`}
onClick={() => toggleViewMode('expanded')}
title="Expanded view"
>
<List size={14} />
</button>
</div>
</div>
<div className={styles.compactGrid}>
{groups.map((group) => (
<div key={group.appId} className={styles.compactGridCell}>
@@ -810,6 +809,7 @@ export default function AgentHealth() {
</div>
))}
</div>
</>
)}
{/* Log + Timeline side by side */}