mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-07-28 12:49:03 +00:00
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
@@ -23,13 +23,9 @@ It carries:
|
||||
- A **pulsing dot** that mirrors the state color: green when nominal, amber when degraded, rose when critical. The dot is solid (no pulse) when Healthy.
|
||||
- A **meta line** in uppercase mono tracking with the active node's name, the number of nodes registered to this Sencho instance, and the time since the last successful poll, for example `LOCAL · 4 NODES · LAST SYNC 1S`.
|
||||
- A **reasons line** that names exactly which signals moved the state away from Healthy, for example `RAM 95% · 18 unread errors`. When the state is Healthy the reasons line reads `All systems nominal`.
|
||||
- Three quick stat tiles on the right edge of the bar: **RUNNING** (`active/total`), **CPU**, and **MEM**. Hover the **RUNNING** tile to expand a managed / external (and exited, when present) breakdown in a cursor-following tooltip.
|
||||
- Three quick stat tiles on the right edge of the bar: **RUNNING** (`active/total`), **CPU**, and **MEM**.
|
||||
- An alerts counter pinned to the far right, showing the number of unread notifications next to a bell icon. The icon and count tint amber while at least one alert is unread.
|
||||
|
||||
<Frame>
|
||||
<img src="/images/dashboard/running-tile-hover.png" alt="Status masthead with the RUNNING tile hovered, the cursor-following tooltip showing '15 managed · 1 external' under the masthead values." />
|
||||
</Frame>
|
||||
|
||||
The masthead's CPU stat tile tints amber once host CPU crosses 80% and stays amber even at 90% or higher. The MEM and RUNNING values stay neutral; the reasons line and the gauge strip below are where you read severity.
|
||||
|
||||
## Resource gauges
|
||||
|
||||
@@ -32,7 +32,7 @@ A single rail summarises the state of every registered node so you can read the
|
||||
|------|---------------|
|
||||
| **CPU** | Average CPU across online nodes, with a sub-line that names the peak node (`peak <name> <percent>%`). The value tints amber once average CPU is at or above 80%. |
|
||||
| **MEM** | Total RAM used across online nodes, with `of <total> · <percent>%` underneath. |
|
||||
| **CONTAINERS** | Active running container count across online nodes, with `of <total> total` underneath. Hover the tile to surface a cursor-following tooltip with the running / total split. |
|
||||
| **CONTAINERS** | Active running container count across online nodes, with `of <total> total` underneath. |
|
||||
|
||||
- An **alerts indicator** pinned to the far right: a bell icon next to the current critical-node count, with an `alert` / `alerts` mono label. The icon and number tint destructive while the count is above zero.
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user