From db6856256ef927669d3dc1022889c866e222fbf7 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Mon, 6 Mar 2023 13:30:27 -0500
Subject: [PATCH] [8.7] [Defend Workflows] Osquery UI fixes (#152079) (#152736)

# Backport

This will backport the following commits from `main` to `8.7`:
- [[Defend Workflows] Osquery UI fixes
(#152079)](https://github.com/elastic/kibana/pull/152079)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Konrad
Szwarc","email":"konrad.szwarc@elastic.co"},"sourceCommit":{"committedDate":"2023-03-06T16:34:22Z","message":"[Defend
Workflows] Osquery UI fixes
(#152079)","sha":"8216f80f0b46a045338a7cacee63f2f180011066","branchLabelMapping":{"^v8.8.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","Team:Defend
Workflows","Feature:Osquery","v8.7.0","v8.8.0"],"number":152079,"url":"https://github.com/elastic/kibana/pull/152079","mergeCommit":{"message":"[Defend
Workflows] Osquery UI fixes
(#152079)","sha":"8216f80f0b46a045338a7cacee63f2f180011066"}},"sourceBranch":"main","suggestedTargetBranches":["8.7"],"targetPullRequestStates":[{"branch":"8.7","label":"v8.7.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.8.0","labelRegex":"^v8.8.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/152079","number":152079,"mergeCommit":{"message":"[Defend
Workflows] Osquery UI fixes
(#152079)","sha":"8216f80f0b46a045338a7cacee63f2f180011066"}}]}]
BACKPORT-->

Co-authored-by: Konrad Szwarc <konrad.szwarc@elastic.co>
---
 .../form/pack_queries_status_table.tsx        |  2 +-
 .../osquery/public/results/results_table.tsx  | 19 ++++++++++++++-----
 .../osquery_results/index.tsx                 |  2 --
 .../osquery_results/osquery_result.tsx        | 13 +++++++++----
 .../osquery_results/osquery_results.test.tsx  |  5 -----
 .../osquery_results/types.ts                  |  1 -
 .../components/event_details/osquery_tab.tsx  |  8 +-------
 7 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/x-pack/plugins/osquery/public/live_queries/form/pack_queries_status_table.tsx b/x-pack/plugins/osquery/public/live_queries/form/pack_queries_status_table.tsx
index d1e434915c890..35d64512b5ae1 100644
--- a/x-pack/plugins/osquery/public/live_queries/form/pack_queries_status_table.tsx
+++ b/x-pack/plugins/osquery/public/live_queries/form/pack_queries_status_table.tsx
@@ -346,7 +346,7 @@ const PackQueriesStatusTableComponent: React.FC<PackQueriesStatusTableProps> = (
         name: i18n.translate('xpack.osquery.pack.queriesTable.viewResultsColumnTitle', {
           defaultMessage: 'View results',
         }),
-        width: '90px',
+        width: '120px',
         render: renderResultActions,
       },
       {
diff --git a/x-pack/plugins/osquery/public/results/results_table.tsx b/x-pack/plugins/osquery/public/results/results_table.tsx
index 3f1ca20f38eaf..71d383da44bd1 100644
--- a/x-pack/plugins/osquery/public/results/results_table.tsx
+++ b/x-pack/plugins/osquery/public/results/results_table.tsx
@@ -6,6 +6,7 @@
  */
 
 import { get, isEmpty, isArray, isObject, isEqual, keys, map, reduce } from 'lodash/fp';
+import { css } from '@emotion/react';
 import type {
   EuiDataGridSorting,
   EuiDataGridProps,
@@ -391,6 +392,10 @@ const ResultsTableComponent: React.FC<ResultsTableComponentProps> = ({
     ]
   );
 
+  if (isLoading) {
+    return <EuiLoadingContent lines={5} />;
+  }
+
   if (!hasActionResultsPrivileges) {
     return (
       <EuiCallOut
@@ -418,13 +423,17 @@ const ResultsTableComponent: React.FC<ResultsTableComponentProps> = ({
     );
   }
 
-  if (isLoading) {
-    return <EuiLoadingContent lines={5} />;
-  }
-
   return (
     <>
-      {isLive && <EuiProgress color="primary" size="xs" />}
+      {isLive && (
+        <EuiProgress
+          color="primary"
+          size="xs"
+          css={css`
+            margin-top: -2px;
+          `}
+        />
+      )}
 
       {!allResultsData?.edges.length ? (
         <EuiPanel hasShadow={false}>
diff --git a/x-pack/plugins/osquery/public/shared_components/osquery_results/index.tsx b/x-pack/plugins/osquery/public/shared_components/osquery_results/index.tsx
index e7f3bd47a181a..ec55c977a2e62 100644
--- a/x-pack/plugins/osquery/public/shared_components/osquery_results/index.tsx
+++ b/x-pack/plugins/osquery/public/shared_components/osquery_results/index.tsx
@@ -19,7 +19,6 @@ import type { OsqueryActionResultsProps } from './types';
 import { OsqueryResult } from './osquery_result';
 
 const OsqueryActionResultsComponent: React.FC<OsqueryActionResultsProps> = ({
-  agentIds,
   ruleName,
   actionItems,
   ecsData,
@@ -37,7 +36,6 @@ const OsqueryActionResultsComponent: React.FC<OsqueryActionResultsProps> = ({
           queryId={queryId}
           startDate={startDate}
           ruleName={ruleName}
-          agentIds={agentIds}
           ecsData={ecsData}
         />
       );
diff --git a/x-pack/plugins/osquery/public/shared_components/osquery_results/osquery_result.tsx b/x-pack/plugins/osquery/public/shared_components/osquery_results/osquery_result.tsx
index a726f7c9b9070..d89f878bf0142 100644
--- a/x-pack/plugins/osquery/public/shared_components/osquery_results/osquery_result.tsx
+++ b/x-pack/plugins/osquery/public/shared_components/osquery_results/osquery_result.tsx
@@ -6,7 +6,7 @@
  */
 
 import { EuiComment, EuiSpacer } from '@elastic/eui';
-import React from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 import { FormattedRelative } from '@kbn/i18n-react';
 
 import type { OsqueryActionResultsProps } from './types';
@@ -22,11 +22,17 @@ interface OsqueryResultProps extends OsqueryActionResultsProps {
 }
 
 export const OsqueryResult = React.memo<OsqueryResultProps>(
-  ({ actionId, ruleName, agentIds, startDate, ecsData }) => {
+  ({ actionId, ruleName, startDate, ecsData }) => {
+    const [isLive, setIsLive] = useState(false);
     const { data } = useLiveQueryDetails({
       actionId,
+      isLive,
     });
 
+    useLayoutEffect(() => {
+      setIsLive(() => !(data?.status === 'completed'));
+    }, [data?.status]);
+
     return (
       <AlertAttachmentContext.Provider value={ecsData}>
         <EuiSpacer size="s" />
@@ -38,11 +44,10 @@ export const OsqueryResult = React.memo<OsqueryResultProps>(
         >
           <PackQueriesStatusTable
             actionId={actionId}
-            // queryId={queryId}
             data={data?.queries}
             startDate={data?.['@timestamp']}
             expirationDate={data?.expiration}
-            agentIds={agentIds}
+            agentIds={data?.agents}
           />
         </EuiComment>
         <EuiSpacer size="s" />
diff --git a/x-pack/plugins/osquery/public/shared_components/osquery_results/osquery_results.test.tsx b/x-pack/plugins/osquery/public/shared_components/osquery_results/osquery_results.test.tsx
index 5a8ac2a3b9846..3eb34cac08e8d 100644
--- a/x-pack/plugins/osquery/public/shared_components/osquery_results/osquery_results.test.tsx
+++ b/x-pack/plugins/osquery/public/shared_components/osquery_results/osquery_results.test.tsx
@@ -32,7 +32,6 @@ const enablePrivileges = () => {
 };
 
 const defaultProps: OsqueryActionResultsProps = {
-  agentIds: ['agent1'],
   ruleName: ['Test-rule'],
   actionItems: [
     {
@@ -82,10 +81,6 @@ describe('Osquery Results', () => {
       .mockImplementation(() => defaultLiveQueryDetails);
   });
 
-  it('should validate permissions', async () => {
-    const { queryByText } = renderWithContext(<OsqueryActionResults {...defaultProps} />);
-    expect(queryByText(PERMISSION_DENIED)).toBeInTheDocument();
-  });
   it('return results table', async () => {
     enablePrivileges();
     const { getByText, queryByText, getByTestId } = renderWithContext(
diff --git a/x-pack/plugins/osquery/public/shared_components/osquery_results/types.ts b/x-pack/plugins/osquery/public/shared_components/osquery_results/types.ts
index 6cc918f936751..54ae88ddc6c9d 100644
--- a/x-pack/plugins/osquery/public/shared_components/osquery_results/types.ts
+++ b/x-pack/plugins/osquery/public/shared_components/osquery_results/types.ts
@@ -9,7 +9,6 @@ import type { Ecs } from '../../../common/ecs';
 import type { ActionEdges } from '../../../common/search_strategy';
 
 export interface OsqueryActionResultsProps {
-  agentIds?: string[];
   ruleName?: string[];
   ecsData: Ecs;
   actionItems?: ActionEdges;
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/osquery_tab.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/osquery_tab.tsx
index 46656b20cf9b8..919d2881ff909 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/osquery_tab.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/osquery_tab.tsx
@@ -117,7 +117,6 @@ export const useOsqueryTab = ({
   const actionItems = actionsData?.data.items || [];
 
   const ruleName = expandedEventFieldsObject.kibana?.alert?.rule?.name;
-  const agentIds = expandedEventFieldsObject.agent?.id;
 
   return {
     id: EventsViewType.osqueryView,
@@ -135,12 +134,7 @@ export const useOsqueryTab = ({
             emptyPrompt
           ) : (
             <>
-              <OsqueryResults
-                agentIds={agentIds}
-                ruleName={ruleName}
-                actionItems={actionItems}
-                ecsData={ecsData}
-              />
+              <OsqueryResults ruleName={ruleName} actionItems={actionItems} ecsData={ecsData} />
               <EuiSpacer size="s" />
             </>
           )}