Nico
a265768d20
<!-- Add the related story/sub-task/bug number, like Resolves #123, or remove if NA --> **Related issue:** Resolves #41533 # Checklist for submitter - [x] Changes file added for user-visible changes in `changes/`, `orbit/changes/` or `ee/fleetd-chrome/changes`. See [Changes files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/guides/committing-changes.md#changes-files) for more information. ## Testing - [ ] Added/updated automated tests - [x] QA'd all new/changed functionality manually https://github.com/user-attachments/assets/64a5f726-1e9f-4508-8726-6227813dcc77 Below I show the `Report clipped` and the `X additional results not shown` states. For that, I manually inserted records in my DB: ```sql -- 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"}'); ``` https://github.com/user-attachments/assets/8056ea4c-b042-47cf-a05f-ee9d8621252a Pagination (manually changed to 3 items per page for testing purposes) https://github.com/user-attachments/assets/87a97259-0821-4659-a612-c952e98a158c
26 lines
499 B
SCSS
26 lines
499 B
SCSS
.pill-badge {
|
|
&__element {
|
|
display: flex;
|
|
height: 16px;
|
|
padding: 0 4px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: $pad-small;
|
|
font-weight: $bold;
|
|
font-size: $xxx-small;
|
|
color: $ui-fleet-black-75;
|
|
line-height: 15px;
|
|
border-radius: $border-radius;
|
|
background: $ui-fleet-black-10;
|
|
padding: 2px 4px;
|
|
}
|
|
|
|
@include tooltip5-arrow-styles;
|
|
|
|
.react-tooltip {
|
|
@include tooltip-text;
|
|
font-style: normal;
|
|
text-align: center;
|
|
}
|
|
}
|