[Host details > Reports] Frontend changes

[nulmete]

Related issue: Resolves #41533

Checklist for submitter

• Changes file added for user-visible changes in changes/, orbit/changes/ or ee/fleetd-chrome/changes.
  See Changes files for more information.

Testing

• Added/updated automated tests

• QA'd all new/changed functionality manually

Screen.Recording.2026-03-20.at.9.49.58.AM.mov

Below I show the Report clipped and the X additional results not shown states. For that, I manually inserted records in my DB:

-- make "clipped"
  INSERT INTO query_results (query_id, host_id, last_fetched, data)
  SELECT 1, t.n + 1000, NOW(), '{"fake_key": "fake_value"}'
  FROM (
      SELECT a.N + b.N * 10 + c.N * 100 AS n
      FROM (SELECT 0 AS N UNION SELECT 1 UNION SELECT 2 UNION SELECT 3 UNION SELECT 4 UNION SELECT 5 UNION SELECT 6 UNION SELECT 7 UNION SELECT 8 UNION
  SELECT 9) a,
           (SELECT 0 AS N UNION SELECT 1 UNION SELECT 2 UNION SELECT 3 UNION SELECT 4 UNION SELECT 5 UNION SELECT 6 UNION SELECT 7 UNION SELECT 8 UNION
  SELECT 9) b,
           (SELECT 0 AS N UNION SELECT 1 UNION SELECT 2 UNION SELECT 3 UNION SELECT 4 UNION SELECT 5 UNION SELECT 6 UNION SELECT 7 UNION SELECT 8 UNION
  SELECT 9) c
  ) t
  WHERE t.n BETWEEN 1 AND 999;

-- populate extra query results
INSERT INTO query_results (query_id, host_id, last_fetched, data)
  VALUES
    (1, 2, NOW(), '{"pid": "9999", "version": "5.21.0"}'),
    (1, 2, NOW(), '{"pid": "8888", "version": "5.20.0"}');

Screen.Recording.2026-03-20.at.9.51.29.AM.mov

Pagination (manually changed to 3 items per page for testing purposes)

Screen.Recording.2026-03-20.at.9.56.27.AM.mov

[codecov]

Codecov Report

❌ Patch coverage is 15.60694% with 146 lines in your changes missing coverage. Please review.
✅ Project coverage is 66.50%. Comparing base (1d5dfa0) to head (8e9c70f).
⚠️ Report is 21 commits behind head on main.

Files with missing lines	Patch %	Lines
...es/hosts/details/HostReportsTab/HostReportsTab.tsx	8.00%	69 Missing ⚠️
...es/hosts/details/HostReportsTab/HostReportCard.tsx	11.76%	45 Missing ⚠️
frontend/services/entities/host_reports.ts	0.00%	14 Missing ⚠️
.../hosts/details/HostDetailsPage/HostDetailsPage.tsx	9.09%	10 Missing ⚠️
...ages/hosts/details/HostReportsTab/EmptyReports.tsx	33.33%	4 Missing ⚠️
server/service/hosts.go	62.50%	3 Missing ⚠️
frontend/utilities/endpoints.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #42017      +/-   ##
==========================================
- Coverage   66.53%   66.50%   -0.03%     
==========================================
  Files        2521     2526       +5     
  Lines      202206   202467     +261     
  Branches     8969     9017      +48     
==========================================
+ Hits       134530   134654     +124     
- Misses      55534    55663     +129     
- Partials    12142    12150       +8     

Flag	Coverage Δ
backend	68.31% <66.66%> (+0.01%)	⬆️
frontend	54.39% <12.80%> (-0.23%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[nulmete]

added children for more composability (that way we can still pass a string but also a component)

[claude]

Claude Code Review

This repository is configured for manual code reviews. Comment @claude review to trigger a review.

[Copilot]

Pull request overview

Adds a new Reports tab to the Host details page, including a new frontend API client and UI components to list reports and preview the first result for each report.

Changes:

• Added a Host details Reports tab + routing and wiring in HostDetailsPage.
• Implemented host_reports entity service + new endpoint for listing host reports with pagination/sort/search params.
• Introduced new UI components/styles for the Reports tab (cards, empty state), and updated PillBadge to support richer badge content.

Reviewed changes

Copilot reviewed 13 out of 14 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
frontend/utilities/endpoints.ts	Adds HOST_REPORTS API endpoint helper.
frontend/services/entities/host_reports.ts	New API client + types for listing host reports.
frontend/router/index.tsx	Adds /hosts/:host_id/reports route to Host details routing.
frontend/pages/hosts/details/cards/Labels/_styles.scss	Updates labels card list layout to wrap with gaps.
frontend/pages/hosts/details/HostReportsTab/index.ts	Barrel export for the new Reports tab.
frontend/pages/hosts/details/HostReportsTab/_styles.scss	Styles for Reports tab layout, report cards, and empty state.
frontend/pages/hosts/details/HostReportsTab/HostReportsTab.tsx	Main Reports tab: query, sort/search/toggle, pagination, rendering.
frontend/pages/hosts/details/HostReportsTab/HostReportCard.tsx	Report preview card UI (first result grid, banners, actions).
frontend/pages/hosts/details/HostReportsTab/EmptyReports.tsx	Empty/search-empty state for the tab.
frontend/pages/hosts/details/HostDetailsPage/_styles.scss	Adds triple-height card modifier for layout adjustments.
frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx	Adds Reports tab to subnav + renders HostReportsTab; layout tweaks.
frontend/components/PillBadge/_styles.scss	Renames internal element class to match updated PillBadge markup.
frontend/components/PillBadge/PillBadge.tsx	Enhances PillBadge to support children content + optional className; deprecates text.
changes/42017-host-details-reports-tab	Changelog entry for the new Reports tab.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[juan-fdz-hawa]

This doesn't seem to be used

[nulmete]

it's used in both HostReportCard and HostReportsTab

[juan-fdz-hawa]

Looking good! Left a couple of comments to tackle.

[RachelElysia]

Heyo @nulmete just seeing this got merged! Got some QA feedback for ya <3

Can you switch this to use DropdownWrapper not ActionsDropdown for example QueriesTable.tsx uses

   <DropdownWrapper
        name="platform-dropdown"
        value={curTargetedPlatformFilter}
        className={`${baseClass}__platform-dropdown`}
        options={PLATFORM_FILTER_OPTIONS}
        onChange={handlePlatformFilterDropdownChange}
        variant="table-filter"
      />

It'll style things correctly

[RachelElysia]

For clarity since it wasn't communicated well which dropdown I was referring to being incorrectly styled: