Dashboard & Reporting UI
Relevant source files
The following files were used as context for generating this wiki page:
The Dashboard & Reporting UI in Fleet serves as the primary visual interface for monitoring fleet health, compliance, and security posture. It is designed to aggregate complex telemetry data—including host status, software inventory, and vulnerabilities—into actionable, high-level summaries for IT and security teams. The system utilizes a modular architecture to support diverse reporting needs, ranging from real-time host monitoring to long-term website traffic analysis.
Within the core application, the dashboard provides a centralized view of device platforms (macOS, Windows, Linux) and specific fleets. Beyond the primary UI, the ecosystem includes specialized reporting tools such as a standalone Vulnerability Dashboard for tracking CVEs and marketing-focused dashboards for tracking user engagement and website performance.
Architecture and UI Structure
The Fleet frontend is a Single Page Application (SPA) built with React, TypeScript, and Hooks. The dashboard specifically follows a wrapper-component pattern to maintain scalability and legibility as the number of data visualizations grows.
Dashboard Component Hierarchy
The UI is organized into a hierarchical structure that separates data instantiation from visual representation:
- Dashboard Wrapper: A minimal file that instantiates host values, cards, and layouts. It dynamically selects content based on the user's selected fleet and device platform.
- Cards: Individual informational cards (e.g., Activity Feed, Host Status) located in specific directories. Cards are implemented as functions rather than standard JSX components within the wrapper to enhance legibility.
- Layouts: Dynamic arrangements that adjust based on the quantity and type of informational cards being displayed.
Sources: frontend/pages/DashboardPage/README.md:5-20, frontend/README.md:4-5
Data Flow for Reporting
Data for dashboards is primarily sourced through the Fleet REST API. For custom reporting solutions, such as external dashboards built with Flask and Plotly, telemetry is collected via API calls and processed into visual formats like line charts or status indicators.
The diagram shows how both internal React components and external reporting tools consume data from the Fleet REST API.
Sources: frontend/pages/DashboardPage/README.md:10-15, articles/building-an-effective-dashboard-with-fleet-rest-api-flask-and-plotly.md:15-25
Specialized Dashboards
Fleet implements several specialized dashboards to address specific departmental needs, including security vulnerability tracking and marketing analytics.
Vulnerability Dashboard
The Vulnerability Dashboard is a source-available tool (located in the ee/ directory) used to report and track progress on fixing CVEs. It integrates data from NVD, CVSS, EPSS, and CISA KEVs to annotate vulnerabilities detected by osquery.
- Functionality: Tracks thousands of installed CVEs across the fleet.
- Deployment: Can be run locally using Docker, requiring a Fleet Base URL and API Token for data synchronization.
- Technology: Built as a Sails v1 application, utilizing a separate database for report tracking.
Sources: ee/vulnerability-dashboard/README.md:1-25
Website Traffic Dashboard
Used by the marketing department, this dashboard monitors performance, traffic acquisition, and event conversions (e.g., form submissions, swag requests).
| View | Purpose | Key Metrics |
|---|---|---|
| Overview | High-level snapshot of health | Users, Bounce Rate, Session Duration |
| Organic Traffic | SEO health tracking | Organic Search/Video/Social volume |
| Landing Page | Content quality assessment | Total users per page, Bounce rate |
| Key Events | Goal completion tracking | Form submits, Purchase, Swag requests |
Sources: handbook/marketing/README.md:40-90
Reporting Components and Data Models
The UI relies on specific data models and configuration files generated during the build process to populate libraries and schema information.
Static Content Generation
The build-static-content.js script generates metadata that the UI uses to render standard query libraries and policy catalogs. This includes:
- Query Library: Parsed from
docs/queries.yml, including platform-specific queries for macOS, Windows, and Linux. - Policy Library: Parsed from YAML to define compliance checks.
- Osquery Schema: An extended schema that defines the tables and columns available for reporting.
Sources: website/scripts/build-static-content.js:35-150
Key Frontend Directories
| Directory | Responsibility |
|---|---|
frontend/services | CRUD functions that link directly to the Fleet API for reports. |
frontend/context | Global state management (e.g., current user, fleet selection). |
frontend/pages/DashboardPage | Contains dashboard-specific logic and card components. |
Sources: frontend/README.md:50-90
Implementation Example: External Dashboard
For organizations requiring custom reporting, the Fleet REST API can be integrated with external stacks. A common implementation involves using Python, Flask, and Plotly.
# Example: Fetching host data for a custom dashboard
import requests
def get_fleet_data(api_token, base_url):
headers = {'Authorization': f'Bearer {api_token}'}
response = requests.get(f'{base_url}/api/v1/fleet/hosts', headers=headers)
return response.json()
Sources: articles/building-an-effective-dashboard-with-fleet-rest-api-flask-and-plotly.md:50-70
Summary
The Dashboard & Reporting UI is a multi-faceted system designed to provide visibility across all aspects of device management. By combining a modular React-based frontend with a robust REST API, Fleet enables both standard out-of-the-box monitoring and highly customized external reporting. The architecture prioritizes legibility and dynamic layouts, ensuring that as new reporting capabilities (like vulnerability tracking or software inventory) are added, the UI remains performant and user-friendly.