From cb12839c26344fdf6f7d511f2f0a1ffd6ec5c32a Mon Sep 17 00:00:00 2001
From: Joshua Li <joshuali925@gmail.com>
Date: Thu, 14 Mar 2024 00:11:27 +0000
Subject: [PATCH] show loading state for ppl generation

Signed-off-by: Joshua Li <joshuali925@gmail.com>
---
 .../event_analytics/explorer/no_results.tsx           | 11 ++++++++++-
 .../event_analytics/explorer/query_assist/input.tsx   | 11 ++++++-----
 .../slices/query_assistant_summarization_slice.ts     |  9 +++++++++
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/public/components/event_analytics/explorer/no_results.tsx b/public/components/event_analytics/explorer/no_results.tsx
index 7f5ccec6c9..272417f7f2 100644
--- a/public/components/event_analytics/explorer/no_results.tsx
+++ b/public/components/event_analytics/explorer/no_results.tsx
@@ -8,6 +8,7 @@ import {
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiLoadingSpinner,
   EuiPage,
   EuiSpacer,
   EuiText,
@@ -16,18 +17,26 @@ import { FormattedMessage } from '@osd/i18n/react';
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { coreRefs } from '../../../framework/core_refs';
+import { selectQueryAssistantSummarization } from '../redux/slices/query_assistant_summarization_slice';
 import { selectQueries } from '../redux/slices/query_slice';
 
 export const NoResults = ({ tabId }: any) => {
   // get the queries isLoaded, if it exists AND is true = show no res
   const queryInfo = useSelector(selectQueries)[tabId];
+  const summaryData = useSelector(selectQueryAssistantSummarization)[tabId];
+  const queryAssistLoading = summaryData.loading;
 
   return (
     <EuiPage paddingSize="s">
       {coreRefs.queryAssistEnabled ? (
         <>
           {/* check to see if the rawQuery is empty or not */}
-          {queryInfo?.rawQuery ? (
+          {queryAssistLoading ? (
+            <EuiEmptyPrompt
+              title={<EuiLoadingSpinner size="xl" />}
+              body={<p>Loading results...</p>}
+            />
+          ) : queryInfo?.rawQuery ? (
             <EuiFlexGroup justifyContent="center" direction="column">
               <EuiFlexItem grow={false}>
                 <EuiCallOut
diff --git a/public/components/event_analytics/explorer/query_assist/input.tsx b/public/components/event_analytics/explorer/query_assist/input.tsx
index 77bac70059..e6b18df585 100644
--- a/public/components/event_analytics/explorer/query_assist/input.tsx
+++ b/public/components/event_analytics/explorer/query_assist/input.tsx
@@ -32,6 +32,7 @@ import {
   changeSummary,
   resetSummary,
   selectQueryAssistantSummarization,
+  setLoading,
   setResponseForSummaryStatus,
 } from '../../redux/slices/query_assistant_summarization_slice';
 import { reset, selectQueryResult } from '../../redux/slices/query_result_slice';
@@ -115,6 +116,7 @@ export const QueryAssistInput: React.FC<React.PropsWithChildren<Props>> = (props
   const explorerData = useSelector(selectQueryResult)[props.tabId];
   // @ts-ignore
   const summaryData = useSelector(selectQueryAssistantSummarization)[props.tabId];
+  const loading = summaryData.loading;
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -141,7 +143,6 @@ export const QueryAssistInput: React.FC<React.PropsWithChildren<Props>> = (props
   const dispatch = useDispatch();
 
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-  const [loading, setLoading] = useState(false);
   // below is only used for url redirection
   const [autoRun, setAutoRun] = useState(false);
   const [callOut, setCallOut] = useState<React.ReactNode>(null);
@@ -203,7 +204,7 @@ export const QueryAssistInput: React.FC<React.PropsWithChildren<Props>> = (props
       return;
     }
     try {
-      setLoading(true);
+      dispatch(setLoading({ tabId: props.tabId, loading: true }));
       setCallOut(null);
       await request();
     } catch (err) {
@@ -214,7 +215,7 @@ export const QueryAssistInput: React.FC<React.PropsWithChildren<Props>> = (props
       }
       coreRefs.toasts?.addError(error, { title: 'Failed to generate results' });
     } finally {
-      setLoading(false);
+      dispatch(setLoading({ tabId: props.tabId, loading: false }));
     }
   };
   const generateSummary = async (context?: Partial<SummarizationContext>) => {
@@ -294,7 +295,7 @@ export const QueryAssistInput: React.FC<React.PropsWithChildren<Props>> = (props
       return;
     }
     try {
-      setLoading(true);
+      dispatch(setLoading({ tabId: props.tabId, loading: true }));
       setCallOut(null);
       await request();
       await props.handleTimePickerChange([QUERY_ASSIST_START_TIME, 'now']);
@@ -311,7 +312,7 @@ export const QueryAssistInput: React.FC<React.PropsWithChildren<Props>> = (props
         coreRefs.toasts?.addError(error, { title: 'Failed to generate results' });
       }
     } finally {
-      setLoading(false);
+      dispatch(setLoading({ tabId: props.tabId, loading: false }));
     }
   };
 
diff --git a/public/components/event_analytics/redux/slices/query_assistant_summarization_slice.ts b/public/components/event_analytics/redux/slices/query_assistant_summarization_slice.ts
index e25ebab022..fcd69a005e 100644
--- a/public/components/event_analytics/redux/slices/query_assistant_summarization_slice.ts
+++ b/public/components/event_analytics/redux/slices/query_assistant_summarization_slice.ts
@@ -8,6 +8,7 @@ import { initialTabId } from '../../../../framework/redux/store/shared_state';
 
 const initialState = {
   [initialTabId]: {
+    loading: false,
     responseForSummaryStatus: 'false' as 'false' | 'success' | 'failure',
   },
 };
@@ -30,9 +31,16 @@ export const summarizationSlice = createSlice({
     },
     resetSummary: (state, { payload }) => {
       state[payload.tabId] = {
+        ...state[payload.tabId],
         responseForSummaryStatus: initialState[initialTabId].responseForSummaryStatus,
       };
     },
+    setLoading: (state, { payload }) => {
+      state[payload.tabId] = {
+        ...state[payload.tabId],
+        loading: payload.loading,
+      };
+    },
   },
 });
 
@@ -40,6 +48,7 @@ export const {
   setResponseForSummaryStatus,
   changeSummary,
   resetSummary,
+  setLoading,
 } = summarizationSlice.actions;
 
 export const selectQueryAssistantSummarization = createSelector(