Fleet UI: Fix observer persisting host_id when querying host from host details page

changes/20959-query-host-flow-fix-observer

@@ -0,0 +1 @@
+- Fix UI flow for observers to easily query hosts from the host details page

frontend/pages/queries/details/QueryDetailsPage/QueryDetailsPage.tsx

@@ -49,7 +49,12 @@ interface IQueryDetailsPageProps {
   params: Params;
   location: {
     pathname: string;
-    query: { team_id?: string; order_key?: string; order_direction?: string };
+    query: {
+      team_id?: string;
+      order_key?: string;
+      order_direction?: string;
+      host_id?: string;
+    };
     search: string;
   };
 }
@@ -67,6 +72,12 @@ const QueryDetailsPage = ({
   }
   const queryParams = location.query;
 
+  // Present when observer is redirected from host details > query
+  // since observer does not have access to edit page
+  const hostId = queryParams?.host_id
+    ? parseInt(queryParams.host_id, 10)
+    : undefined;
+
   const { currentTeamId } = useTeamIdParam({
     location,
     router,
@@ -295,7 +306,7 @@ const QueryDetailsPage = ({
                         onClick={() => {
                           queryId &&
                             router.push(
-                              PATHS.LIVE_QUERY(queryId, currentTeamId)
+                              PATHS.LIVE_QUERY(queryId, currentTeamId, hostId)
                             );
                         }}
                         disabled={isLiveQueryDisabled}

frontend/pages/queries/edit/EditQueryPage.tsx

@@ -208,7 +208,14 @@ const EditQueryPage = ({
       queryId > 0 &&
       !canEditExistingQuery
     ) {
-      router.push(PATHS.QUERY_DETAILS(queryId));
+      // Reroute to query report page still maintains query params for live query purposes
+      const baseUrl = PATHS.QUERY_DETAILS(queryId);
+      const queryParams = buildQueryStringFromParams({
+        host_id: location.query.host_id,
+        team_id: location.query.team_id,
+      });
+
+      router.push(queryParams ? `${baseUrl}?${queryParams}` : baseUrl);
     }
   }, [queryId, isTeamMaintainerOrTeamAdmin, isStoredQueryLoading]);
 

frontend/router/paths.ts

@@ -1,3 +1,5 @@
+import { buildQueryStringFromParams } from "utilities/url";
+
 import { IPolicy } from "../interfaces/policy";
 import URL_PREFIX from "./url_prefix";
 
@@ -95,10 +97,17 @@ export default {
       teamId ? `?team_id=${teamId}` : ""
     }`;
   },
-  LIVE_QUERY: (queryId: number | null, teamId?: number): string => {
-    return `${URL_PREFIX}/queries/${queryId || "new"}/live${
-      teamId ? `?team_id=${teamId}` : ""
-    }`;
+  LIVE_QUERY: (
+    queryId: number | null,
+    teamId?: number,
+    hostId?: number
+  ): string => {
+    const baseUrl = `${URL_PREFIX}/queries/${queryId || "new"}/live`;
+    const queryParams = buildQueryStringFromParams({
+      team_id: teamId,
+      host_id: hostId,
+    });
+    return queryParams ? `${baseUrl}?${queryParams}` : baseUrl;
   },
   QUERY_DETAILS: (queryId: number, teamId?: number): string => {
     return `${URL_PREFIX}/queries/${queryId}${