From 3247833d5b6832fca3dbe35f9ecb8c795053a9c6 Mon Sep 17 00:00:00 2001 From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com> Date: Fri, 5 Apr 2024 11:47:42 -0700 Subject: [PATCH] UI: Restore missing JavaScript context in HQR config (#18087) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Addresses #18083 ![Screenshot 2024-04-05 at 9 37 20 AM](https://github.com/fleetdm/fleet/assets/61553566/b683d30c-9af2-4cbb-8cea-b4a6e2422464) - [x] Changes file added for user-visible changes in `changes/` - [x] Added/updated tests - [x] Manual QA for all new/changed functionality --------- Co-authored-by: Jacob Shandling --- ...83-no-values-in-host-details-query-reports | 1 + .../HQRTable/HQRTable.tests.tsx | 112 ++++++++++++++++++ .../HostQueryReport/HQRTable/HQRTable.tsx | 2 +- .../HQRTable/HQRTableConfig.tsx | 8 +- 4 files changed, 116 insertions(+), 7 deletions(-) create mode 100644 changes/18083-no-values-in-host-details-query-reports create mode 100644 frontend/pages/hosts/details/HostQueryReport/HQRTable/HQRTable.tests.tsx diff --git a/changes/18083-no-values-in-host-details-query-reports b/changes/18083-no-values-in-host-details-query-reports new file mode 100644 index 000000000000..1c1a19a3673a --- /dev/null +++ b/changes/18083-no-values-in-host-details-query-reports @@ -0,0 +1 @@ +- Fix a bug where values were not being rendered in host-specific query reports. diff --git a/frontend/pages/hosts/details/HostQueryReport/HQRTable/HQRTable.tests.tsx b/frontend/pages/hosts/details/HostQueryReport/HQRTable/HQRTable.tests.tsx new file mode 100644 index 000000000000..e040e521e1e8 --- /dev/null +++ b/frontend/pages/hosts/details/HostQueryReport/HQRTable/HQRTable.tests.tsx @@ -0,0 +1,112 @@ +import React from "react"; + +import { render, screen } from "@testing-library/react"; + +import HQRTable, { IHQRTable } from "./HQRTable"; + +describe("HQRTable component", () => { + it("Renders results normally when they are present", () => { + const testData: IHQRTable[] = [ + { + queryName: "testQuery0", + queryDescription: "testDescription0", + hostName: "testHost0", + rows: [ + { + build_distro: "10.14", + build_platform: "darwin", + config_hash: "111111111111111111111111", + config_valid: "1", + extensions: "active", + instance_id: "2f7a7b8e-8f35-4fa8-9e8b-1111111111111111", + pid: "575", + platform_mask: "21", + start_time: "1711512878", + uuid: "gggggg-4568-5BD9-9F1C-6D2E701FAB5C", + version: "5.11.0", + watcher: "574", + }, + ], + reportClipped: false, + lastFetched: "2021-09-01T00:00:00Z", + onShowQuery: jest.fn(), + isLoading: false, + }, + ]; + + testData.forEach((tableProps) => { + render(); + expect(screen.getByText("1 result")).toBeInTheDocument(); + expect(screen.getByText("Last fetched")).toBeInTheDocument(); + tableProps.rows.forEach((row) => { + Object.entries(row).forEach(([col, val]) => { + expect(screen.getByText(col)).toBeInTheDocument(); + expect(screen.getByText(val)).toBeInTheDocument(); + }); + }); + }); + }); + + it("Renders the 'collecting results' empty state when results have never been collected.", () => { + const testData: IHQRTable[] = [ + { + queryName: "testQuery0", + queryDescription: "testDescription0", + hostName: "testHost0", + rows: [], + reportClipped: false, + lastFetched: null, + onShowQuery: jest.fn(), + isLoading: false, + }, + ]; + + testData.forEach((tableProps) => { + render(); + expect(screen.queryByText("Last fetched")).toBeNull(); + expect(screen.getByText("Collecting results...")).toBeInTheDocument(); + }); + }); + + it("Renders the 'report clipped' empty state when reporting for this query has been paused and there are no existing results.", () => { + const testData: IHQRTable[] = [ + { + queryName: "testQuery0", + queryDescription: "testDescription0", + hostName: "testHost0", + rows: [], + reportClipped: true, + lastFetched: "2021-09-01T00:00:00Z", + onShowQuery: jest.fn(), + isLoading: false, + }, + ]; + + testData.forEach((tableProps) => { + render(); + expect(screen.queryByText("Last fetched")).toBeNull(); + expect(screen.getByText("Report clipped")).toBeInTheDocument(); + }); + }); + + it("Renders the 'nothing to report' empty state when the query has run and there are no results.", () => { + const testData: IHQRTable[] = [ + { + queryName: "testQuery0", + queryDescription: "testDescription0", + hostName: "testHost0", + rows: [], + reportClipped: false, + lastFetched: "2021-09-01T00:00:00Z", + onShowQuery: jest.fn(), + isLoading: false, + }, + ]; + + testData.forEach((tableProps) => { + render(); + expect(screen.queryByText("Last fetched")).toBeNull(); + expect(screen.getByText("Nothing to report")).toBeInTheDocument(); + }); + }); +}); diff --git a/frontend/pages/hosts/details/HostQueryReport/HQRTable/HQRTable.tsx b/frontend/pages/hosts/details/HostQueryReport/HQRTable/HQRTable.tsx index b5367305147f..30969112a129 100644 --- a/frontend/pages/hosts/details/HostQueryReport/HQRTable/HQRTable.tsx +++ b/frontend/pages/hosts/details/HostQueryReport/HQRTable/HQRTable.tsx @@ -15,7 +15,7 @@ import generateColumnConfigs from "./HQRTableConfig"; const baseClass = "hqr-table"; -interface IHQRTable { +export interface IHQRTable { queryName?: string; queryDescription?: string; hostName?: string; diff --git a/frontend/pages/hosts/details/HostQueryReport/HQRTable/HQRTableConfig.tsx b/frontend/pages/hosts/details/HostQueryReport/HQRTable/HQRTableConfig.tsx index c220358b1074..d5252ec5df0f 100644 --- a/frontend/pages/hosts/details/HostQueryReport/HQRTable/HQRTableConfig.tsx +++ b/frontend/pages/hosts/details/HostQueryReport/HQRTable/HQRTableConfig.tsx @@ -1,10 +1,6 @@ import DefaultColumnFilter from "components/TableContainer/DataTable/DefaultColumnFilter"; import HeaderCell from "components/TableContainer/DataTable/HeaderCell"; -import { - IHeaderProps, - IStringCellProps, - IWebSocketData, -} from "interfaces/datatable_config"; +import { IHeaderProps, IWebSocketData } from "interfaces/datatable_config"; import React from "react"; import { CellProps, Column } from "react-table"; @@ -47,7 +43,7 @@ const generateColumnConfigs = (rows: IWebSocketData[]): IHQRTTableColumn[] => const val = cellProps?.cell?.value; return !!val?.length && val.length > 300 ? internallyTruncateText(val) - : <>val ?? null; + : <>{val} ?? null; }, Filter: DefaultColumnFilter, // Component hides filter for last_fetched filterType: "text",