[Explore] Update timechart onIntervalChange to execute data table queries (#11035)

* Update timechart onIntervalChange to execute data table queries

Signed-off-by: Sean Li <[email protected]>

* Changeset file for PR #11035 created/updated

* Updating tests to include executeDataTableQuery mock

Signed-off-by: Sean Li <[email protected]>

---------

Signed-off-by: Sean Li <[email protected]>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

Author: sejli

changelogs/fragments/11035.yml

@@ -0,0 +1,2 @@
+fix:
+- Update timechart onIntervalChange to execute data table queries ([#11035](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/11035))

src/plugins/explore/public/components/chart/explore_logs_chart.test.tsx

@@ -28,6 +28,7 @@ jest.mock('../../services/usage_collector', () => ({
 jest.mock('../../application/utils/state_management/actions/query_actions', () => ({
   executeQueries: jest.fn(() => ({ type: 'mock/executeQueries' })),
   executeHistogramQuery: jest.fn(() => ({ type: 'mock/executeHistogramQuery' })),
+  executeDataTableQuery: jest.fn(() => ({ type: 'mock/executeDataTableQuery' })),
   defaultPrepareQueryString: jest.fn((query) => `${query.language}:${query.query}`),
   prepareHistogramCacheKey: jest.fn((query) => `histogram:${query.language}:${query.query}`),
 }));
@@ -148,6 +149,7 @@ describe('DiscoverChart', () => {
         summaryAgentIsAvailable: false,
         queryExecutionButtonStatus: 'REFRESH',
         isQueryEditorDirty: false,
+        hasUserInitiatedQuery: false,
       },
       results: {},
       tab: {
@@ -291,7 +293,7 @@ describe('DiscoverChart', () => {
     fireEvent.click(changeIntervalButton);
 
     // Should dispatch setInterval, clearResultsByKey, clearQueryStatusMapByKey, and executeHistogramQuery
-    expect(dispatchSpy).toHaveBeenCalledTimes(4);
+    expect(dispatchSpy).toHaveBeenCalledTimes(5);
     expect(dispatchSpy).toHaveBeenCalledWith(
       expect.objectContaining({ type: 'legacy/setInterval' })
     );

src/plugins/explore/public/components/chart/explore_logs_chart.tsx

@@ -32,6 +32,7 @@ import {
   executeHistogramQuery,
   prepareHistogramCacheKey,
   defaultPrepareQueryString,
+  executeDataTableQuery,
 } from '../../application/utils/state_management/actions/query_actions';
 import { ResultsSummary } from '../results_summary/results_summary';
 import { selectSummaryAgentIsAvailable } from '../../application/utils/state_management/selectors';
@@ -69,19 +70,27 @@ export const ExploreLogsChart = ({
   const query = useSelector((state: RootState) => state.query);
   const breakdownField = useSelector((state: RootState) => state.queryEditor.breakdownField);
   const dispatch = useDispatch();
-  const cacheKey = prepareHistogramCacheKey(query, !!breakdownField);
+  const histogramCacheKey = prepareHistogramCacheKey(query, !!breakdownField);
+  const dataTableCacheKey = defaultPrepareQueryString(query);
   const onChangeInterval = (newInterval: string) => {
     dispatch(setInterval(newInterval));
-    dispatch(clearResultsByKey(cacheKey));
-    dispatch(clearQueryStatusMapByKey(cacheKey));
+    dispatch(clearResultsByKey(histogramCacheKey));
+    dispatch(clearQueryStatusMapByKey(histogramCacheKey));
     dispatch(
       executeHistogramQuery({
         services,
-        cacheKey,
+        cacheKey: histogramCacheKey,
         interval: newInterval,
         queryString: defaultPrepareQueryString(query),
       })
     );
+    dispatch(
+      executeDataTableQuery({
+        services,
+        cacheKey: dataTableCacheKey,
+        queryString: dataTableCacheKey,
+      })
+    );
   };
   const timefilterUpdateHandler = useCallback(
     (ranges: { from: number; to: number }) => {