refactor(masthead): remove stat-tile hover tooltips (#1319)

Drop the cursor-following hover tooltips from the masthead stat tiles: the RUNNING
tile on the Home dashboard (the managed / external / exited breakdown) and the
CONTAINERS tile on the Fleet view (the running / total split). Both revert to plain
stat tiles, matching the CPU and MEM tiles beside them. The dashboard and fleet docs
are updated to match and the orphaned screenshot is removed.
This commit is contained in:
Anso
2026-06-05 21:53:14 -04:00
committed by GitHub
parent 308949282c
commit 28ea610e81
5 changed files with 10 additions and 90 deletions
@@ -1,11 +1,5 @@
import { useEffect, useMemo, useState } from 'react';
import { Bell } from 'lucide-react';
import {
CursorProvider,
Cursor,
CursorContainer,
CursorFollow,
} from '@/components/animate-ui/primitives/animate/cursor';
import type { Stats, SystemStats, NotificationItem, HealthLevel } from './types';
interface HealthStatusBarProps {
@@ -153,43 +147,7 @@ export function HealthStatusBar({
{/* Stats column */}
<div className="hidden items-stretch justify-end gap-0 md:flex">
<CursorProvider>
<CursorContainer>
<StatTile label="RUNNING" value={running} tone="value" />
</CursorContainer>
<Cursor>
<span className="h-2 w-2 rounded-full bg-brand" />
</Cursor>
<CursorFollow
side="bottom"
sideOffset={8}
align="center"
transition={{ stiffness: 400, damping: 40, bounce: 0 }}
>
<div className="rounded-md border border-card-border bg-popover/95 backdrop-blur-[10px] backdrop-saturate-[1.15] px-3 py-2 shadow-md">
<div className="flex items-center gap-3 font-mono text-xs tabular-nums">
<span className="text-stat-value">
{stats.managed}
<span className="ml-1 font-sans text-stat-subtitle">managed</span>
</span>
<span className="text-stat-icon">·</span>
<span className="text-stat-value">
{stats.unmanaged}
<span className="ml-1 font-sans text-stat-subtitle">external</span>
</span>
{stats.exited > 0 ? (
<>
<span className="text-stat-icon">·</span>
<span className="text-destructive">
{stats.exited}
<span className="ml-1 font-sans text-stat-subtitle">exited</span>
</span>
</>
) : null}
</div>
</div>
</CursorFollow>
</CursorProvider>
<StatTile label="RUNNING" value={running} tone="value" />
<StatTile label="CPU" value={cpuLabel} tone={parseFloat(systemStats?.cpu.usage || '0') >= 80 ? 'warn' : 'value'} divider />
<StatTile label="MEM" value={memLabel} tone="value" divider />
</div>
@@ -1,12 +1,5 @@
import { useEffect, useMemo, useState } from 'react';
import { Bell } from 'lucide-react';
import {
CursorProvider,
Cursor,
CursorContainer,
CursorFollow,
} from '@/components/animate-ui/primitives/animate/cursor';
type FleetHealth = 'healthy' | 'degraded' | 'critical';
interface FleetMastheadProps {
@@ -145,40 +138,13 @@ export function FleetMasthead({
tone="value"
divider
/>
<CursorProvider>
<CursorContainer>
<StatTile
label="CONTAINERS"
value={`${activeContainers}`}
sub={`of ${totalContainers} total`}
tone="value"
divider
/>
</CursorContainer>
<Cursor>
<span className="h-2 w-2 rounded-full bg-brand" />
</Cursor>
<CursorFollow
side="bottom"
sideOffset={8}
align="center"
transition={{ stiffness: 400, damping: 40, bounce: 0 }}
>
<div className="rounded-md border border-card-border bg-popover/95 backdrop-blur-[10px] backdrop-saturate-[1.15] px-3 py-2 shadow-md">
<div className="flex items-center gap-3 font-mono text-xs tabular-nums">
<span className="text-stat-value">
{activeContainers}
<span className="ml-1 font-sans text-stat-subtitle">running</span>
</span>
<span className="text-stat-icon">·</span>
<span className="text-stat-value">
{totalContainers}
<span className="ml-1 font-sans text-stat-subtitle">total</span>
</span>
</div>
</div>
</CursorFollow>
</CursorProvider>
<StatTile
label="CONTAINERS"
value={`${activeContainers}`}
sub={`of ${totalContainers} total`}
tone="value"
divider
/>
</div>
<div className="flex items-center gap-2 pl-4">