show loading state for ppl generation

Signed-off-by: Joshua Li <[email protected]>
opensearch-project · Mar 14, 2024 · dcb9247 · dcb9247
1 parent 1d35ae2
commit dcb9247
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git 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
@@ -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
@@ -8,6 +8,7 @@ import { initialTabId } from '../../../../framework/redux/store/shared_state';
 
 const initialState = {
   [initialTabId]: {
+    loading: false,
     responseForSummaryStatus: 'false' as 'false' | 'success' | 'failure',
   },
 };
@@ -30,16 +31,24 @@ export const summarizationSlice = createSlice({
     },
     resetSummary: (state, { payload }) => {
       state[payload.tabId] = {
+        loading: false,
         responseForSummaryStatus: initialState[initialTabId].responseForSummaryStatus,
       };
     },
+    setLoading: (state, { payload }) => {
+      state[payload.tabId] = {
+        ...state[payload.tabId],
+        loading: payload.loading,
+      };
+    },
   },
 });
 
 export const {
   setResponseForSummaryStatus,
   changeSummary,
   resetSummary,
+  setLoading,
 } = summarizationSlice.actions;
 
 export const selectQueryAssistantSummarization = createSelector(