Host Management UI
Relevant source files
The following files were used as context for generating this wiki page:
The Host Management UI is a primary interface within the Fleet frontend application designed to provide visibility and administrative control over enrolled endpoints (hosts). It encompasses high-level fleet-wide management, such as listing, filtering, and bulk actions, as well as granular inspection of individual host details including software inventory, policy compliance, and hardware specifications.
Built using React, TypeScript, and the standard Fleet component library, this system leverages a Single Page Application (SPA) architecture to provide real-time data access. It integrates directly with Fleet's REST API to perform actions like host wiping, locking, and script execution, while maintaining a consistent "Mister Rogers" neighborly tone in its user-facing copy.
Architecture and Components
The UI is structured into two main high-level views: the Manage Hosts Page for aggregate data and the Host Details Page for specific host inspection.
Manage Hosts View
The ManageHostsPage serves as the central hub for the fleet. It utilizes a DataTable component to render large sets of host data efficiently. Key capabilities include:
- Filtering and Search: Users can filter by platform, status (online/offline), and labels.
- Bulk Actions: Enabling operations across multiple hosts simultaneously.
- Data Presentation: Displaying host vitals like OS version, CPU, and memory.
Host Details View
The HostDetailsPage provides a deep dive into a single entity. It aggregates information from multiple API endpoints to present a comprehensive view of:
- Device Status: Current connectivity and last seen timestamps.
- Software Inventory: A list of installed packages and their versions.
- Compliance: Results of failing and passing policies.
- Administrative Actions: Buttons for Wiping, Locking, and Unlocking devices.
Data Flow Diagram
The following diagram illustrates how data flows from the Fleet server through the service layer to the UI components.
Core Components and Logic
DataTable Implementation
The DataTable is a foundational component used in ManageHostsPage to handle complex datasets. It supports sorting, pagination, and selection logic.
| Feature | Description | File Reference |
|---|---|---|
| Sorting | Allows toggling sort order on specific columns like "Host Name" or "Last Seen". | DataTable.tsx |
| Selection | Supports individual and "select all" row selection for bulk actions. | DataTable.tsx |
| Pagination | Manages server-side or client-side data paging to maintain performance. | DataTable.tsx |
Sources: frontend/components/TableContainer/DataTable/DataTable.tsx
Host Action Logic
The UI provides triggers for critical security actions. These actions are often protected by confirmation modals to prevent accidental execution.
Design Principles and UI Standards
The Host Management UI follows specific Fleet brand and writing guidelines to ensure a consistent experience. This includes using "Sentence case" for headings (e.g., "Host details" instead of "Host Details") and active voice in descriptions.
Visual Identity
- Typography: The primary typeface is Inter for standard UI elements and Roboto Mono for code blocks or technical data.
- Color Palette: Uses "Fleet Black 100" (#192147) for headings and "Fleet Green" (#009A7D) for primary calls to action (CTAs).
- Component Spacing: Adheres to a 1.5 line height for body text to maximize readability on screen.
Sources: handbook/marketing/fleet-ai-writing-instructions.md, handbook/company/brand.md
Technical Configuration and Data Sources
The UI is populated using static and dynamic content. While host data is dynamic, parts of the UI, such as the Standard Query Library or Policy Templates, are generated via static build scripts.
Build-Time Generation
The build-static-content.js script generates partials that inform UI elements:
- Queries Library: Parses
docs/queries.ymlto provide templates for the "Schedule a query" feature in the Host UI. - Policy Templates: Parses
standard-query-library.ymlto populate compliance check options. - Schema Overrides: Merges osquery schema with Fleet-specific overrides to show users what data they can collect from hosts.
Sources: website/scripts/build-static-content.js:33-150, website/scripts/build-static-content.js:585-650
Conclusion
The Host Management UI acts as the primary operational surface for Fleet users. By combining powerful data-grid components with detailed inspection views and strict adherence to design guidelines, it enables security and IT teams to manage large fleets of diverse operating systems (macOS, Windows, Linux) with technical precision and administrative ease.