add loading state for discover button

Signed-off-by: tygao <[email protected]>
opensearch-project · Sep 30, 2024 · 0da346c · 0da346c
1 parent a974dce
commit 0da346c
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 43 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,12 +3,11 @@
 Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 
 ### Unreleased
-
-- fix: make sure \$schema always added to LLM generated vega json object([252](https://github.com/opensearch-project/dashboards-assistant/pull/252))
+- fix: make sure $schema always added to LLM generated vega json object([252](https://github.com/opensearch-project/dashboards-assistant/pull/252))
 - feat: expose a general function for agent execution([268](https://github.com/opensearch-project/dashboards-assistant/pull/268))
 - Fix CVE-2024-4067 ([#269](https://github.com/opensearch-project/dashboards-assistant/pull/269))
 - feat: add a dashboards-assistant trigger in query editor([265](https://github.com/opensearch-project/dashboards-assistant/pull/265))
-- fix: make sure \$schema always added to LLM generated vega json object([#252](https://github.com/opensearch-project/dashboards-assistant/pull/252))
+- fix: make sure $schema always added to LLM generated vega json object([#252](https://github.com/opensearch-project/dashboards-assistant/pull/252))
 - feat: added a new visualization type visualization-nlq to support creating visualization from natural language([#264](https://github.com/opensearch-project/dashboards-assistant/pull/264))
 - feat: only allow to select supported index patterns in text to visualization and code changes related to prompt updates([#310](https://github.com/opensearch-project/dashboards-assistant/pull/310))
 - feat: exposed an API to check if a give agent config name has configured with agent id([#307](https://github.com/opensearch-project/dashboards-assistant/pull/307))
@@ -46,4 +45,4 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Support insight with RAG in alert analysis assistant and refine the UX ([#266](https://github.com/opensearch-project/dashboards-assistant/pull/266))
 - Add assistant enabled capabilities to control rendering component([#267](https://github.com/opensearch-project/dashboards-assistant/pull/267))
 - Add data to summary API([#295](https://github.com/opensearch-project/dashboards-assistant/pull/295))
-- Refactor popover to add message action bar and add metrics to thumb-up and thumb-down([#304](https://github.com/opensearch-project/dashboards-assistant/pull/304))
+- Refactor popover to add message action bar and add metrics to thumb-up and thumb-down([#304](https://github.com/opensearch-project/dashboards-assistant/pull/304))
diff --git a/public/components/incontext_insight/generate_popover_body.tsx b/public/components/incontext_insight/generate_popover_body.tsx
@@ -44,6 +44,7 @@ export const GeneratePopoverBody: React.FC<{
   const [insight, setInsight] = useState('');
   const [insightAvailable, setInsightAvailable] = useState(false);
   const [showInsight, setShowInsight] = useState(false);
+  const [discoverLoading, setDiscoverLoading] = useState(false);
   const metricAppName = 'alertSummary';
 
   const toasts = getNotifications().toasts;
@@ -180,44 +181,49 @@ export const GeneratePopoverBody: React.FC<{
   };
 
   const handleNavigateToDiscover = async () => {
-    const context = await incontextInsight?.contextProvider?.();
-    const dsl = context?.additionalInfo?.dsl;
-    const indexName = context?.additionalInfo?.index;
-    if (!dsl || !indexName) return;
-    const dslObject = JSON.parse(dsl);
-    const filters = dslObject?.query?.bool?.filter;
-    if (!filters) return;
-    const timeDslIndex = filters?.findIndex((filter: Record<string, string>) => filter?.range);
-    const timeDsl = filters[timeDslIndex]?.range;
-    const timeFieldName = Object.keys(timeDsl)[0];
-    if (!timeFieldName) return;
-    filters?.splice(timeDslIndex, 1);
+    try {
+      setDiscoverLoading(true);
+      const context = await incontextInsight?.contextProvider?.();
+      const dsl = context?.additionalInfo?.dsl;
+      const indexName = context?.additionalInfo?.index;
+      if (!dsl || !indexName) return;
+      const dslObject = JSON.parse(dsl);
+      const filters = dslObject?.query?.bool?.filter;
+      if (!filters) return;
+      const timeDslIndex = filters?.findIndex((filter: Record<string, string>) => filter?.range);
+      const timeDsl = filters[timeDslIndex]?.range;
+      const timeFieldName = Object.keys(timeDsl)[0];
+      if (!timeFieldName) return;
+      filters?.splice(timeDslIndex, 1);
 
-    if (getStartServices) {
-      const [coreStart, startDeps] = await getStartServices();
-      const newDiscoverEnabled = coreStart.uiSettings.get(UI_SETTINGS.QUERY_ENHANCEMENTS_ENABLED);
-      if (!newDiscoverEnabled) {
-        // Only new discover supports DQL with filters.
-        coreStart.uiSettings.set(UI_SETTINGS.QUERY_ENHANCEMENTS_ENABLED, true);
-      }
+      if (getStartServices) {
+        const [coreStart, startDeps] = await getStartServices();
+        const newDiscoverEnabled = coreStart.uiSettings.get(UI_SETTINGS.QUERY_ENHANCEMENTS_ENABLED);
+        if (!newDiscoverEnabled) {
+          // Only new discover supports DQL with filters.
+          coreStart.uiSettings.set(UI_SETTINGS.QUERY_ENHANCEMENTS_ENABLED, true);
+        }
 
-      const indexPattern = await createIndexPatterns(
-        startDeps.data,
-        indexName,
-        timeFieldName,
-        context?.dataSourceId
-      );
-      if (!indexPattern) return;
-      const query = await buildUrlQuery(
-        startDeps.data,
-        coreStart.savedObjects,
-        indexPattern,
-        dslObject,
-        timeDsl[timeFieldName],
-        context?.dataSourceId
-      );
-      // Navigate to new discover with query built to populate
-      coreStart.application.navigateToUrl(`data-explorer/discover#?${query}`);
+        const indexPattern = await createIndexPatterns(
+          startDeps.data,
+          indexName,
+          timeFieldName,
+          context?.dataSourceId
+        );
+        if (!indexPattern) return;
+        const query = await buildUrlQuery(
+          startDeps.data,
+          coreStart.savedObjects,
+          indexPattern,
+          dslObject,
+          timeDsl[timeFieldName],
+          context?.dataSourceId
+        );
+        // Navigate to new discover with query built to populate
+        coreStart.application.navigateToUrl(`data-explorer/discover#?${query}`);
+      }
+    } finally {
+      setDiscoverLoading(false);
     }
   };
 
@@ -317,7 +323,7 @@ export const GeneratePopoverBody: React.FC<{
       {renderInnerTitle()}
       {renderContent()}
       {displayDiscoverButton && (
-        <EuiButton onClick={handleNavigateToDiscover}>
+        <EuiButton onClick={handleNavigateToDiscover} isLoading={discoverLoading}>
           {i18n.translate('assistantDashboards.incontextInsight.discover', {
             defaultMessage: 'Discover details',
           })}

diff --git a/public/utils/alerting.ts b/public/utils/alerting.ts
@@ -10,7 +10,6 @@ import { url } from '../../../../src/plugins/opensearch_dashboards_utils/public'
 import {
   DataPublicPluginStart,
   opensearchFilters,
-  DuplicateIndexPatternError,
   IndexPattern,
 } from '../../../../src/plugins/data/public';
 import { CoreStart } from '../../../../src/core/public';
@@ -91,7 +90,7 @@ export const buildUrlQuery = async (
       const dataSourceObject = await savedObjects.client.get('data-source', dataSourceId);
       const dataSourceTitle = dataSourceObject?.get('title');
       // If index pattern refers to a data source, discover list will display data source name as dataSourceTitle::indexPatternTitle
-      indexPatternTitle = `${dataSourceTitle}::indexPatternTitle`;
+      indexPatternTitle = `${dataSourceTitle}::${indexPatternTitle}`;
     } catch (e) {
       console.error('Get data source object error');
     }