Export report working

fleetdm · Oct 6, 2023 · 8f1bb1c · 8f1bb1c
1 parent 71e1868
commit 8f1bb1c
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 27 deletions.
diff --git a/frontend/pages/queries/details/components/QueryReport/QueryReport.tsx b/frontend/pages/queries/details/components/QueryReport/QueryReport.tsx
@@ -7,7 +7,7 @@ import { QueryContext } from "context/query";
 
 import {
   generateCSVFilename,
-  generateCSVQueryResults,
+  generateCSVQueryReport,
 } from "utilities/generate_csv";
 import { IQueryReport } from "interfaces/query_report";
 import { humanLastSeen } from "utilities/helpers";
@@ -26,34 +26,14 @@ interface IQueryReportProps {
 const baseClass = "query-report";
 const CSV_TITLE = "Query";
 
-/*
-I want to return 
-
-[
-  {
-    host_name: "foo",
-    last_fetched: "2021-01-19T17:08:31Z",
-    model: "USB 2.0 Hub",
-    vendor: "VIA Labs, Inc.",
-  },
-  {
-    host_name: "foo",
-    last_fetched: "2021-01-19T17:08:31Z",
-    model: "USB Keyboard",
-    vendor: "VIA Labs, Inc.",
-  },
-]
-*/
 const tableResults = (results: any) => {
   return results.map((result: any) => {
     const hostInfo = {
-      // host_id: result.host_id,
-      Host: result.host_name,
+      host_display_name: result.host_name,
       last_fetched: humanLastSeen(result.last_fetched),
     };
 
     const tableData = { ...hostInfo, ...result.columns };
-    console.log("tableData", tableData);
     return tableData;
   });
 };
@@ -66,9 +46,6 @@ const QueryReport = ({ queryReport }: IQueryReportProps): JSX.Element => {
     tableResults(queryReport?.results)
   );
   const [tableHeaders, setTableHeaders] = useState<any>([]);
-  // const [queryResultsForTableRender, setQueryResultsForTableRender] = useState(
-  //   queryReport?.results
-  // );
 
   useEffect(() => {
     if (queryReport && queryReport.results && queryReport.results.length > 0) {
@@ -85,9 +62,11 @@ const QueryReport = ({ queryReport }: IQueryReportProps): JSX.Element => {
   const onExportQueryResults = (evt: React.MouseEvent<HTMLButtonElement>) => {
     evt.preventDefault();
     FileSaver.saveAs(
-      generateCSVQueryResults(
+      generateCSVQueryReport(
         filteredResults,
-        generateCSVFilename(`${lastEditedQueryName || CSV_TITLE} - Results`),
+        generateCSVFilename(
+          `${lastEditedQueryName || CSV_TITLE} - Query Report`
+        ),
         tableHeaders
       )
     );

diff --git a/frontend/services/mock_service/mocks/responses.ts b/frontend/services/mock_service/mocks/responses.ts
@@ -917,6 +917,34 @@ const queryReport = {
         model_id: "9a39",
       },
     },
+    {
+      host_id: 9,
+      host_name: "moo moo",
+      last_fetched: "2023-09-28T02:02:34Z",
+      columns: {
+        model: "Display Audio",
+        vendor: "Apple Inc.",
+      },
+    },
+    {
+      host_id: 9,
+      host_name: "moo moo",
+      last_fetched: "2023-09-28T02:02:34Z",
+      columns: {
+        model: "USB Reciever",
+        vendor: "Logitech",
+      },
+    },
+    {
+      host_id: 9,
+      host_name: "moo moo",
+      last_fetched: "2023-09-28T02:02:34Z",
+      columns: {
+        model: "LG Monitor Controls",
+        vendor: "LG Electronics Inc.",
+        model_id: "9a39",
+      },
+    },
   ],
 };
 

diff --git a/frontend/utilities/generate_csv/index.ts b/frontend/utilities/generate_csv/index.ts
@@ -4,6 +4,7 @@ import { ICampaignError } from "interfaces/campaign";
 import { format } from "date-fns";
 
 const reorderCSVFields = (tableHeaders: string[]) => {
+  console.log("tableHeaders", tableHeaders);
   const result = tableHeaders.filter((field) => field !== "host_display_name");
   result.unshift("host_display_name");
 
@@ -14,6 +15,27 @@ export const generateCSVFilename = (descriptor: string) => {
   return `${descriptor} (${format(new Date(), "MM-dd-yy hh-mm-ss")}).csv`;
 };
 
+// Query report
+export const generateCSVQueryReport = (
+  rows: Row[],
+  filename: string,
+  tableHeaders: Column[] | string[]
+) => {
+  return new global.window.File(
+    [
+      convertToCSV({
+        objArray: rows,
+        fieldSortFunc: reorderCSVFields,
+        tableHeaders,
+      }),
+    ],
+    filename,
+    {
+      type: "text/csv",
+    }
+  );
+};
+
 // Query results and query errors
 export const generateCSVQueryResults = (
   rows: Row[],