Fleet UI: Query report (table, buttons, api calls, etc) (#14325)

## Issue Cerra #13472 ## Description - Surface query report on the `/queries/{id}` route - Include table buttons to show query and export query - Include results count - Clientside sorting and filtering for columns - Add mock data to frontend integration mocks and to API mocks for concurrent development - 331 + 351 + 2 = 684 lines of code is just mocking data and not actual changes - If modifying sorting/filter, modify the exported results sorting/filter as well - Last fetched column is sentence cased, sortable by chronological order and not alpha order of the readable string (e.g., "a year ago" should be sorted _after_ "over 1 month ago" if sorted most recent to oldest even though a comes before o in the alphabet) ## Screen recordings (Uses mock data) https://github.com/fleetdm/fleet/assets/71795832/22766f2b-3387-4a95-b505-b530dda582fa https://github.com/fleetdm/fleet/assets/71795832/5c2cd8cc-d00e-4ead-b111-e3b33cb7c955 # Checklist for submitter If some of the following don't apply, delete the relevant line. - TODO for QA: Added/updated E2E tests (consider testing some of the features mentioned in the description) - [x] Manual QA for all new/changed functionality
fleetdm · Oct 9, 2023 · a85f399 · a85f399
1 parent 2adf3ce
commit a85f399
Show file tree

Hide file tree

Showing 16 changed files with 1,075 additions and 40 deletions.
diff --git a/frontend/__mocks__/queryReportMock.ts b/frontend/__mocks__/queryReportMock.ts
@@ -0,0 +1,331 @@
+import { IQueryReport } from "interfaces/query_report";
+
+const DEFAULT_QUERY_REPORT_MOCK: IQueryReport = {
+  query_id: 31,
+  results: [
+    {
+      host_id: 1,
+      host_name: "foo",
+      last_fetched: "2021-01-19T17:08:31Z",
+      columns: {
+        model: "Razer Viper",
+        vendor: "Razer",
+        model_id: "0078",
+      },
+    },
+    {
+      host_id: 1,
+      host_name: "foo",
+      last_fetched: "2021-01-19T17:08:31Z",
+      columns: {
+        model: "USB Keyboard",
+        vendor: "VIA Labs, Inc.",
+      },
+    },
+    {
+      host_id: 2,
+      host_name: "bar",
+      last_fetched: "2021-01-19T17:20:00Z",
+      columns: {
+        model: "USB Reciever",
+        vendor: "Logitech",
+      },
+    },
+    {
+      host_id: 2,
+      host_name: "bar",
+      last_fetched: "2021-01-19T17:20:00Z",
+      columns: {
+        model: "USB Keyboard",
+        vendor: "Logitech",
+      },
+    },
+    {
+      host_id: 2,
+      host_name: "bar",
+      last_fetched: "2021-01-19T17:20:00Z",
+      columns: {
+        model: "YubiKey OTP+FIDO+CCID",
+        vendor: "Yubico",
+      },
+    },
+    {
+      host_id: 2,
+      host_name: "bar",
+      last_fetched: "2021-01-19T17:20:00Z",
+      columns: {
+        model: "Lenovo USB Optical Mouse",
+        vendor: "PixArt",
+      },
+    },
+    {
+      host_id: 2,
+      host_name: "bar",
+      last_fetched: "2021-01-19T17:20:00Z",
+      columns: {
+        model: "Lenovo Traditional USB Keyboard",
+        vendor: "Lenovo",
+      },
+    },
+    {
+      host_id: 2,
+      host_name: "bar",
+      last_fetched: "2021-01-19T17:20:00Z",
+      columns: {
+        model: "Display Audio",
+        vendor: "Bose",
+      },
+    },
+    {
+      host_id: 2,
+      host_name: "bar",
+      last_fetched: "2021-01-19T17:20:00Z",
+      columns: {
+        model: "USB-C Digital AV Multiport Adapter",
+        vendor: "Apple, Inc.",
+        model_id: "1460",
+      },
+    },
+    {
+      host_id: 2,
+      host_name: "bar",
+      last_fetched: "2021-01-19T17:20:00Z",
+      columns: {
+        model: "USB Reciever",
+        vendor: "Logitech",
+      },
+    },
+    {
+      host_id: 2,
+      host_name: "bar",
+      last_fetched: "2021-01-19T17:20:00Z",
+      columns: {
+        model: "USB-C Digital AV Multiport Adapter",
+        vendor: "Apple Inc.",
+        model_id: "1460",
+      },
+    },
+    {
+      host_id: 2,
+      host_name: "bar",
+      last_fetched: "2021-01-19T17:20:00Z",
+      columns: {
+        model: "USB Reciever",
+        vendor: "Logitech",
+      },
+    },
+    {
+      host_id: 3,
+      host_name: "zoo",
+      last_fetched: "2022-04-09T17:20:00Z",
+      columns: {
+        model: "Logitech Webcam C925e",
+        model_id: "085b",
+      },
+    },
+    {
+      host_id: 3,
+      host_name: "zoo",
+      last_fetched: "2022-04-09T17:20:00Z",
+      columns: {
+        model: "Display Audio",
+        vendor: "Apple Inc.",
+      },
+    },
+    {
+      host_id: 3,
+      host_name: "zoo",
+      last_fetched: "2022-04-09T17:20:00Z",
+      columns: {
+        model: "Ambient Light Sensor",
+        vendor: "Apple Inc.",
+      },
+    },
+    {
+      host_id: 3,
+      host_name: "zoo",
+      last_fetched: "2022-04-09T17:20:00Z",
+      columns: {
+        model: "DELL Laser Mouse",
+        model_id: "4d51",
+      },
+    },
+    {
+      host_id: 7,
+      host_name: "Rachel's Magnificent Testing Computer of All Computers",
+      last_fetched: "2023-09-21T19:03:30Z",
+      columns: {
+        model: "AppleUSBVHCIBCE Root Hub Simulation",
+        vendor: "Apple Inc.",
+      },
+    },
+    {
+      host_id: 7,
+      host_name: "Rachel's Magnificent Testing Computer of All Computers",
+      last_fetched: "2023-09-21T19:03:30Z",
+      columns: {
+        model: "QuickFire Rapid keyboard",
+        vendor: "CM Storm",
+        model_id: "0004",
+      },
+    },
+    {
+      host_id: 7,
+      host_name: "Rachel's Magnificent Testing Computer of All Computers",
+      last_fetched: "2023-09-21T19:03:30Z",
+      columns: {
+        model: "Lenovo USB Optical Mouse",
+        vendor: "Lenovo",
+      },
+    },
+    {
+      host_id: 7,
+      host_name: "Rachel's Magnificent Testing Computer of All Computers",
+      last_fetched: "2023-09-21T19:03:30Z",
+      columns: {
+        model: "YubiKey FIDO+CCID",
+        vendor: "Yubico",
+      },
+    },
+    {
+      host_id: 4,
+      host_name: "car",
+      last_fetched: "2023-01-14T12:40:30Z",
+      columns: {
+        model: "USB2.0 Hub",
+        vendor: "Apple Inc.",
+      },
+    },
+    {
+      host_id: 8,
+      host_name: "apple man",
+      last_fetched: "2021-01-19T17:20:00Z",
+      columns: {
+        model: "FaceTime HD Camera (Display)",
+        vendor: "Apple Inc.",
+        model_id: "1112",
+      },
+    },
+    {
+      host_id: 8,
+      host_name: "apple man",
+      last_fetched: "2021-01-19T17:20:00Z",
+      columns: {
+        model: "Apple Internal Keyboard / Trackpad",
+        model_id: "027e",
+        vendor: "Apple Inc.",
+      },
+    },
+    {
+      host_id: 8,
+      host_name: "apple man",
+      last_fetched: "2021-01-19T17:20:00Z",
+      columns: {
+        model: "Apple Thunderbolt Display",
+        vendor: "Apple Inc.",
+        model_id: "9227",
+      },
+    },
+    {
+      host_id: 8,
+      host_name: "apple man",
+      last_fetched: "2021-01-19T17:20:00Z",
+      columns: {
+        model: "AppleUSBXHCI Root Hub Simulation",
+        vendor: "Apple Inc.",
+        model_id: "8007",
+      },
+    },
+    {
+      host_id: 8,
+      host_name: "apple man",
+      last_fetched: "2021-01-19T17:20:00Z",
+      columns: {
+        model: "Apple T2 Controller",
+        vendor: "Apple Inc.",
+        model_id: "8233",
+      },
+    },
+    {
+      host_id: 5,
+      host_name: "choo",
+      last_fetched: "2023-09-03T03:40:30Z",
+      columns: {
+        model: "4-Port USB 2.0 Hub",
+        vendor: "Generic",
+      },
+    },
+    {
+      host_id: 5,
+      host_name: "choo",
+      last_fetched: "2023-09-03T03:40:30Z",
+      columns: {
+        model: "USB 10_100_1000 LAN",
+        vendor: "Realtek",
+      },
+    },
+    {
+      host_id: 5,
+      host_name: "choo",
+      last_fetched: "2023-09-03T03:40:30Z",
+      columns: {
+        model: "Display Audio",
+        vendor: "Apple Inc.",
+      },
+    },
+    {
+      host_id: 5,
+      host_name: "choo",
+      last_fetched: "2023-09-03T03:40:30Z",
+      columns: {
+        model: "USB Mouse",
+        vendor: "Razor",
+      },
+    },
+    {
+      host_id: 5,
+      host_name: "choo",
+      last_fetched: "2023-09-03T03:40:30Z",
+      columns: {
+        model: "USB Audio",
+        vendor: "Apple, Inc.",
+      },
+    },
+    {
+      host_id: 6,
+      host_name: "moo",
+      last_fetched: "2023-09-20T07:02:34Z",
+      columns: {
+        model: "Display Audio",
+        vendor: "Apple Inc.",
+      },
+    },
+    {
+      host_id: 6,
+      host_name: "moo",
+      last_fetched: "2023-09-20T07:02:34Z",
+      columns: {
+        model: "USB Reciever",
+        vendor: "Logitech",
+      },
+    },
+    {
+      host_id: 6,
+      host_name: "moo",
+      last_fetched: "2023-09-20T07:02:34Z",
+      columns: {
+        model: "LG Monitor Controls",
+        vendor: "LG Electronics Inc.",
+        model_id: "9a39",
+      },
+    },
+  ],
+};
+
+const createMockQueryReport = (
+  overrides?: Partial<IQueryReport>
+): IQueryReport => {
+  return { ...DEFAULT_QUERY_REPORT_MOCK, ...overrides };
+};
+
+export default createMockQueryReport;
diff --git a/frontend/interfaces/query_report.ts b/frontend/interfaces/query_report.ts
@@ -0,0 +1,12 @@
+export interface IQueryReportResultRow {
+  host_id: number;
+  host_name: string;
+  last_fetched: string;
+  columns: any;
+}
+
+// Query report
+export interface IQueryReport {
+  query_id: number;
+  results: IQueryReportResultRow[];
+}