From bc32662a3eecaaaa1c81f1b91cdfdf92166537fd Mon Sep 17 00:00:00 2001 From: Luke Heath Date: Wed, 19 Oct 2022 17:24:42 -0500 Subject: [PATCH] Use new display name property in live query results (#8268) --- .../TableContainer/DataTable/_styles.scss | 1 + frontend/interfaces/campaign.ts | 2 +- frontend/interfaces/host.ts | 2 +- .../pages/hosts/ManageHostsPage/constants.ts | 2 +- .../PolicyQueriesErrorsTableConfig.tsx | 2 +- .../PolicyQueriesErrorsTable/_styles.scss | 2 +- .../PolicyQueriesTable/PolicyQueriesTable.tsx | 2 +- .../PolicyQueriesTableConfig.tsx | 2 +- .../components/QueryResults/QueryResults.tsx | 4 ++-- .../QueryResults/QueryResultsTableConfig.tsx | 16 ++++++++++++---- .../services/mock_service/examples/responses.ts | 1 + .../services/mock_service/mocks/responses.ts | 6 ++++++ frontend/test/stubs.ts | 3 ++- frontend/utilities/campaign_helpers/index.ts | 2 +- frontend/utilities/convert_to_csv/index.ts | 6 ++++++ 15 files changed, 38 insertions(+), 15 deletions(-) diff --git a/frontend/components/TableContainer/DataTable/_styles.scss b/frontend/components/TableContainer/DataTable/_styles.scss index 1997198897..a39fe66434 100644 --- a/frontend/components/TableContainer/DataTable/_styles.scss +++ b/frontend/components/TableContainer/DataTable/_styles.scss @@ -213,6 +213,7 @@ button { color: $core-vibrant-blue; padding: 6px; + font-weight: $bold; .fleeticon-chevronleft { margin-right: $pad-small; diff --git a/frontend/interfaces/campaign.ts b/frontend/interfaces/campaign.ts index 33492be72e..f7b101c0cb 100644 --- a/frontend/interfaces/campaign.ts +++ b/frontend/interfaces/campaign.ts @@ -12,7 +12,7 @@ export default PropTypes.shape({ }); export interface ICampaignError { - host_hostname: string; + host_display_name: string; osquery_version: string; error: string; } diff --git a/frontend/interfaces/host.ts b/frontend/interfaces/host.ts index 42f8749f2e..5e17c7bdab 100644 --- a/frontend/interfaces/host.ts +++ b/frontend/interfaces/host.ts @@ -105,7 +105,7 @@ export interface IPackStats { export interface IHostPolicyQuery { id: number; - hostname: string; + display_name: string; query_results?: unknown[]; status?: string; } diff --git a/frontend/pages/hosts/ManageHostsPage/constants.ts b/frontend/pages/hosts/ManageHostsPage/constants.ts index 8f98c21277..82fa5734a6 100644 --- a/frontend/pages/hosts/ManageHostsPage/constants.ts +++ b/frontend/pages/hosts/ManageHostsPage/constants.ts @@ -1,6 +1,6 @@ export const LABEL_SLUG_PREFIX = "labels/"; -export const DEFAULT_SORT_HEADER = "hostname"; +export const DEFAULT_SORT_HEADER = "display_name"; export const DEFAULT_SORT_DIRECTION = "asc"; export const DEFAULT_PAGE_SIZE = 20; diff --git a/frontend/pages/policies/PolicyPage/components/PolicyQueriesErrorsTable/PolicyQueriesErrorsTableConfig.tsx b/frontend/pages/policies/PolicyPage/components/PolicyQueriesErrorsTable/PolicyQueriesErrorsTableConfig.tsx index 2ca15295d9..0123caf4a7 100644 --- a/frontend/pages/policies/PolicyPage/components/PolicyQueriesErrorsTable/PolicyQueriesErrorsTableConfig.tsx +++ b/frontend/pages/policies/PolicyPage/components/PolicyQueriesErrorsTable/PolicyQueriesErrorsTableConfig.tsx @@ -73,7 +73,7 @@ const generateTableHeaders = (): IDataColumn[] => { const generateDataSet = memoize( (policyHostsErrorsList: ICampaignError[] = []): ICampaignError[] => { policyHostsErrorsList = policyHostsErrorsList.sort((a, b) => - sortUtils.caseInsensitiveAsc(a.host_hostname, b.host_hostname) + sortUtils.caseInsensitiveAsc(a.host_display_name, b.host_display_name) ); return policyHostsErrorsList; } diff --git a/frontend/pages/policies/PolicyPage/components/PolicyQueriesErrorsTable/_styles.scss b/frontend/pages/policies/PolicyPage/components/PolicyQueriesErrorsTable/_styles.scss index bfc8b6e20f..af790412d5 100644 --- a/frontend/pages/policies/PolicyPage/components/PolicyQueriesErrorsTable/_styles.scss +++ b/frontend/pages/policies/PolicyPage/components/PolicyQueriesErrorsTable/_styles.scss @@ -23,7 +23,7 @@ padding: $pad-medium $pad-large; } - .host_hostname__header { + .host_display_name__header { width: 50%; } } diff --git a/frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/PolicyQueriesTable.tsx b/frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/PolicyQueriesTable.tsx index 980dba020f..49d9c7f6c2 100644 --- a/frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/PolicyQueriesTable.tsx +++ b/frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/PolicyQueriesTable.tsx @@ -47,7 +47,7 @@ const PoliciesTable = ({ defaultSortDirection={"asc"} showMarkAllPages={false} isAllPagesSelected={false} - disablePagination + isClientSidePagination primarySelectActionButtonVariant="text-icon" primarySelectActionButtonIcon="delete" primarySelectActionButtonText={"Delete"} diff --git a/frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/PolicyQueriesTableConfig.tsx b/frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/PolicyQueriesTableConfig.tsx index 2773bca526..96baf96d4f 100644 --- a/frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/PolicyQueriesTableConfig.tsx +++ b/frontend/pages/policies/PolicyPage/components/PolicyQueriesTable/PolicyQueriesTableConfig.tsx @@ -89,7 +89,7 @@ const generateTableHeaders = (): IDataColumn[] => { const generateDataSet = memoize( (policyHostsList: IHostPolicyQuery[] = []): IHostPolicyQuery[] => { policyHostsList = policyHostsList.sort((a, b) => - sortUtils.caseInsensitiveAsc(a.hostname, b.hostname) + sortUtils.caseInsensitiveAsc(a.display_name, b.display_name) ); return policyHostsList; } diff --git a/frontend/pages/queries/QueryPage/components/QueryResults/QueryResults.tsx b/frontend/pages/queries/QueryPage/components/QueryResults/QueryResults.tsx index b7fb1f9cba..9041c1831d 100644 --- a/frontend/pages/queries/QueryPage/components/QueryResults/QueryResults.tsx +++ b/frontend/pages/queries/QueryPage/components/QueryResults/QueryResults.tsx @@ -39,8 +39,8 @@ const NAV_TITLES = { }; const reorderCSVFields = (fields: string[]) => { - const result = fields.filter((field) => field !== "host_hostname"); - result.unshift("host_hostname"); + const result = fields.filter((field) => field !== "host_display_name"); + result.unshift("host_display_name"); return result; }; diff --git a/frontend/pages/queries/QueryPage/components/QueryResults/QueryResultsTableConfig.tsx b/frontend/pages/queries/QueryPage/components/QueryResults/QueryResultsTableConfig.tsx index 3d191585c1..bad27b8a74 100644 --- a/frontend/pages/queries/QueryPage/components/QueryResults/QueryResultsTableConfig.tsx +++ b/frontend/pages/queries/QueryPage/components/QueryResults/QueryResultsTableConfig.tsx @@ -29,13 +29,21 @@ interface IDataColumn extends ColumnInterface { const _unshiftHostname = (headers: IDataColumn[]) => { const newHeaders = [...headers]; - const i = headers.findIndex((h) => h.id === "host_hostname"); - if (i >= 0) { + const displayNameIndex = headers.findIndex( + (h) => h.id === "host_display_name" + ); + if (displayNameIndex >= 0) { // remove hostname header from headers - const [hostnameHeader] = newHeaders.splice(i, 1); + const [displayNameHeader] = newHeaders.splice(displayNameIndex, 1); // reformat title and insert at start of headers array - newHeaders.unshift({ ...hostnameHeader, title: "hostname" }); + newHeaders.unshift({ ...displayNameHeader, title: "Host" }); } + // TODO: Remove after v5 when host_hostname is removed rom API response. + const hostNameIndex = headers.findIndex((h) => h.id === "host_hostname"); + if (hostNameIndex >= 0) { + newHeaders.splice(hostNameIndex, 1); + } + // end remove return newHeaders; }; diff --git a/frontend/services/mock_service/examples/responses.ts b/frontend/services/mock_service/examples/responses.ts index c42fe49d08..1f2ea5c201 100644 --- a/frontend/services/mock_service/examples/responses.ts +++ b/frontend/services/mock_service/examples/responses.ts @@ -17,6 +17,7 @@ const HOST_ID = { seen_time: "2021-03-31T00:00:00ZZ", refetch_requested: false, hostname: "myf1337d3v1c3", + display_name: "myf1337d3v1c3", uuid: "13371337-0000-0000-1337-133713371337", platform: "rhel", osquery_version: "5.1.0", diff --git a/frontend/services/mock_service/mocks/responses.ts b/frontend/services/mock_service/mocks/responses.ts index 00b51d476b..39ccc7f329 100644 --- a/frontend/services/mock_service/mocks/responses.ts +++ b/frontend/services/mock_service/mocks/responses.ts @@ -24,6 +24,7 @@ const hosts = { seen_time: "2022-04-06T02:11:41Z", refetch_requested: false, hostname: "9b20fc72a247", + display_name: "9b20fc72a247", uuid: "09b244f8-0000-0000-b5cc-791a15f11073", platform: "ubuntu", osquery_version: "4.9.0", @@ -72,6 +73,7 @@ const hosts = { seen_time: "2022-04-06T02:11:41Z", refetch_requested: false, hostname: "deea0b65655e", + display_name: "deea0b65655e", uuid: "09b244f8-0000-0000-b5cc-791a15f11073", platform: "rhel", osquery_version: "4.9.0", @@ -120,6 +122,7 @@ const hosts = { seen_time: "2022-04-06T02:11:41Z", refetch_requested: false, hostname: "32a9e72af157", + display_name: "32a9e72af157", uuid: "09b244f8-0000-0000-b5cc-791a15f11073", platform: "ubuntu", osquery_version: "4.9.0", @@ -168,6 +171,7 @@ const hosts = { seen_time: "2022-04-06T02:11:41Z", refetch_requested: false, hostname: "2cce6480edef", + display_name: "2cce6480edef", uuid: "09b244f8-0000-0000-b5cc-791a15f11073", platform: "rhel", osquery_version: "4.9.0", @@ -216,6 +220,7 @@ const hosts = { seen_time: "2022-04-06T02:10:56Z", refetch_requested: false, hostname: "9846bcd4aea5", + display_name: "9846bcd4aea5", uuid: "09b244f8-0000-0000-b5cc-791a15f11073", platform: "ubuntu", osquery_version: "4.9.0", @@ -264,6 +269,7 @@ const hosts = { seen_time: "2022-04-06T02:11:41Z", refetch_requested: false, hostname: "a6ab9437a891", + display_name: "a6ab9437a891", uuid: "09b244f8-0000-0000-b5cc-791a15f11073", platform: "rhel", osquery_version: "4.9.0", diff --git a/frontend/test/stubs.ts b/frontend/test/stubs.ts index 58a3011c4f..dceeb54370 100644 --- a/frontend/test/stubs.ts +++ b/frontend/test/stubs.ts @@ -82,6 +82,7 @@ export const hostStub = { detail_updated_at: "2017-01-10T20:01:48Z", seen_time: "2017-01-10T20:13:54Z", hostname: "52883a0ba916", + display_name: "52883a0ba916", uuid: "FD87130B-09A9-683D-9095-D92CD20728CA", platform: "ubuntu", osquery_version: "2.1.2", @@ -229,7 +230,7 @@ const queryResultStub = { gid: "0", gid_signed: "0", groupname: "root", - host_hostname: hostStub.hostname, + host_display_name: hostStub.display_name, }; export const campaignStub = { diff --git a/frontend/utilities/campaign_helpers/index.ts b/frontend/utilities/campaign_helpers/index.ts index 9e45c66513..228e4e0597 100644 --- a/frontend/utilities/campaign_helpers/index.ts +++ b/frontend/utilities/campaign_helpers/index.ts @@ -62,7 +62,7 @@ const updateCampaignStateFromResults = ( newErrors = errors.concat([ { - host_hostname: host?.hostname, + host_display_name: host?.display_name, osquery_version: host?.osquery_version, error: error || diff --git a/frontend/utilities/convert_to_csv/index.ts b/frontend/utilities/convert_to_csv/index.ts index 6704f65e4b..cd0a9ce5e3 100644 --- a/frontend/utilities/convert_to_csv/index.ts +++ b/frontend/utilities/convert_to_csv/index.ts @@ -7,6 +7,12 @@ const convertToCSV = ( fieldSortFunc = defaultFieldSortFunc ) => { const fields = fieldSortFunc(keys(objArray[0])); + // TODO: Remove after v5 when host_hostname is removed rom API response. + const hostNameIndex = fields.indexOf("host_hostname"); + if (hostNameIndex >= 0) { + fields.splice(hostNameIndex, 1); + } + // Remove end const jsonFields = fields.map((field) => JSON.stringify(field)); const rows = objArray.map((row) => { return fields.map((field) => JSON.stringify(row[field])).join(",");