diff --git a/frontend/pages/queries/details/components/QueryReport/QueryReport.tsx b/frontend/pages/queries/details/components/QueryReport/QueryReport.tsx index 3c186246a568..9f57f9e84172 100644 --- 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([]); - // 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) => { 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 index ac3003efcf69..860259f8c4d1 100644 --- 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 index 8ee514ef93ee..f7fdb9a6430f 100644 --- 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[],