Use new display name property in live query results (#8268)

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;

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;
 }

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;
 }

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;
 

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;
   }

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%;
     }
   }

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"}

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;
   }

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;
 };

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;
 };
 

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",

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",

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 = {

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 ||

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(",");