Fleet health summary

Overview

Summarize availability and alert distribution across the fleet hierarchy. It converts domain state into an understandable, traceable and accessible interface contract.

When to use

Use HE/Fleet health summary when you need to summarize availability and alert distribution across the fleet hierarchy. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

<div class="he-fleet-health-summary"><article class="he-metric-card"><b>Healthy</b><span class="he-metric-card__value">18</span></article><article class="he-metric-card"><b>Review</b><span class="he-metric-card__value">2</span></article><article class="he-metric-card"><b>Offline</b><span class="he-metric-card__value">1</span></article></div>

Anatomy

Anatomy stays identical in Pasture and Atlantic. A responsive layout may wrap or stack parts, but reading order and focus order remain equivalent.

Variants and states

Accessibility

State totals are written in text and each segment links to the filtered device list.

• Maintain a visible keyboard focus indicator and a logical focus sequence.
• Never rely on colour alone for operational, freshness or severity state.
• Keep touch targets at least 44 × 44 px unless the target is an inline text link.

Cross-platform contract

Related components