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:
@@ -369,7 +369,7 @@
|
|||||||
.viewToolbar {
|
.viewToolbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: flex-start;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -139,7 +139,7 @@ function CompactAppCard({ group, onExpand, onNavigate }: { group: AppGroup; onEx
|
|||||||
{group.liveCount}/{group.instances.length} live
|
{group.liveCount}/{group.instances.length} live
|
||||||
</span>
|
</span>
|
||||||
<span className={styles.compactCardTps}>
|
<span className={styles.compactCardTps}>
|
||||||
{group.totalTps.toFixed(1)}/s
|
{group.totalTps.toFixed(1)} tps
|
||||||
</span>
|
</span>
|
||||||
<span className={isHealthy ? styles.compactCardHeartbeat : styles.compactCardHeartbeatWarn}>
|
<span className={isHealthy ? styles.compactCardHeartbeat : styles.compactCardHeartbeatWarn}>
|
||||||
{heartbeat ? timeAgo(heartbeat) : '\u2014'}
|
{heartbeat ? timeAgo(heartbeat) : '\u2014'}
|
||||||
@@ -526,26 +526,6 @@ export default function AgentHealth() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</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 */}
|
{/* Application config bar */}
|
||||||
{appId && appConfig && (
|
{appId && appConfig && (
|
||||||
<div className={`${sectionStyles.section} ${styles.configBar}`}>
|
<div className={`${sectionStyles.section} ${styles.configBar}`}>
|
||||||
@@ -714,6 +694,25 @@ export default function AgentHealth() {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</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}>
|
<div className={styles.compactGrid}>
|
||||||
{groups.map((group) => (
|
{groups.map((group) => (
|
||||||
<div key={group.appId} className={styles.compactGridCell}>
|
<div key={group.appId} className={styles.compactGridCell}>
|
||||||
@@ -810,6 +809,7 @@ export default function AgentHealth() {
|
|||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Log + Timeline side by side */}
|
{/* Log + Timeline side by side */}
|
||||||
|
|||||||
Reference in New Issue
Block a user