Add assistant capabilities to control rendering components

CHANGELOG.md

@@ -32,3 +32,4 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Support context aware alert analysis by reusing incontext insight component([#215](https://github.com/opensearch-project/dashboards-assistant/pull/215))
 - Use smaller and compressed variants of buttons and form components ([#250](https://github.com/opensearch-project/dashboards-assistant/pull/250))
 - 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))

public/plugin.tsx

@@ -125,50 +125,63 @@ export class AssistantPlugin
     });
 
     if (this.config.text2viz.enabled) {
-      setupDeps.embeddable.registerEmbeddableFactory(
-        NLQ_VISUALIZATION_EMBEDDABLE_TYPE,
-        new NLQVisualizationEmbeddableFactory()
-      );
+      const checkSubscriptionAndRegisterText2VizButton = async () => {
+        const [coreStart] = await core.getStartServices();
+        const assistantEnabled = coreStart.application.capabilities?.assistant?.enabled === true;
+        if (assistantEnabled) {
+          setupDeps.embeddable.registerEmbeddableFactory(
+            NLQ_VISUALIZATION_EMBEDDABLE_TYPE,
+            new NLQVisualizationEmbeddableFactory()
+          );
 
-      setupDeps.visualizations.registerAlias({
-        name: 'text2viz',
-        aliasPath: '#/',
-        aliasApp: VIS_NLQ_APP_ID,
-        title: i18n.translate('dashboardAssistant.feature.text2viz.title', {
-          defaultMessage: 'Natural language',
-        }),
-        description: i18n.translate('dashboardAssistant.feature.text2viz.description', {
-          defaultMessage: 'Generate visualization with a natural language question.',
-        }),
-        icon: 'chatRight',
-        stage: 'experimental',
-        promotion: {
-          buttonText: i18n.translate('dashboardAssistant.feature.text2viz.promotion.buttonText', {
-            defaultMessage: 'Natural language previewer',
-          }),
-          description: i18n.translate('dashboardAssistant.feature.text2viz.promotion.description', {
-            defaultMessage:
-              'Not sure which visualization to choose? Generate visualization previews with a natural language question.',
-          }),
-        },
-        appExtensions: {
-          visualizations: {
-            docTypes: [VIS_NLQ_SAVED_OBJECT],
-            toListItem: ({ id, attributes, updated_at: updatedAt }) => ({
-              description: attributes?.description,
-              editApp: VIS_NLQ_APP_ID,
-              editUrl: `/edit/${encodeURIComponent(id)}`,
-              icon: 'chatRight',
-              id,
-              savedObjectType: VIS_NLQ_SAVED_OBJECT,
-              title: attributes?.title,
-              typeTitle: 'NLQ',
-              updated_at: updatedAt,
-              stage: 'experimental',
+          setupDeps.visualizations.registerAlias({
+            name: 'text2viz',
+            aliasPath: '#/',
+            aliasApp: VIS_NLQ_APP_ID,
+            title: i18n.translate('dashboardAssistant.feature.text2viz.title', {
+              defaultMessage: 'Natural language',
             }),
-          },
-        },
-      });
+            description: i18n.translate('dashboardAssistant.feature.text2viz.description', {
+              defaultMessage: 'Generate visualization with a natural language question.',
+            }),
+            icon: 'chatRight',
+            stage: 'experimental',
+            promotion: {
+              buttonText: i18n.translate(
+                'dashboardAssistant.feature.text2viz.promotion.buttonText',
+                {
+                  defaultMessage: 'Natural language previewer',
+                }
+              ),
+              description: i18n.translate(
+                'dashboardAssistant.feature.text2viz.promotion.description',
+                {
+                  defaultMessage:
+                    'Not sure which visualization to choose? Generate visualization previews with a natural language question.',
+                }
+              ),
+            },
+            appExtensions: {
+              visualizations: {
+                docTypes: [VIS_NLQ_SAVED_OBJECT],
+                toListItem: ({ id, attributes, updated_at: updatedAt }) => ({
+                  description: attributes?.description,
+                  editApp: VIS_NLQ_APP_ID,
+                  editUrl: `/edit/${encodeURIComponent(id)}`,
+                  icon: 'chatRight',
+                  id,
+                  savedObjectType: VIS_NLQ_SAVED_OBJECT,
+                  title: attributes?.title,
+                  typeTitle: 'NLQ',
+                  updated_at: updatedAt,
+                  stage: 'experimental',
+                }),
+              },
+            },
+          });
+        }
+      };
+      checkSubscriptionAndRegisterText2VizButton();
 
       core.application.register({
         id: TEXT2VIZ_APP_ID,
@@ -178,18 +191,24 @@ export class AssistantPlugin
         navLinkStatus: AppNavLinkStatus.hidden,
         mount: async (params: AppMountParameters) => {
           const [coreStart, pluginsStart] = await core.getStartServices();
-          params.element.classList.add('text2viz-wrapper');
-          const { renderText2VizApp } = await import('./text2viz');
-          const unmount = renderText2VizApp(params, {
-            ...pluginsStart,
-            ...coreStart,
-            setHeaderActionMenu: params.setHeaderActionMenu,
-          });
+          const assistantEnabled = coreStart.application.capabilities?.assistant?.enabled === true;
+          if (assistantEnabled) {
+            params.element.classList.add('text2viz-wrapper');
+            const { renderText2VizApp } = await import('./text2viz');
+            const unmount = renderText2VizApp(params, {
+              ...pluginsStart,
+              ...coreStart,
+              setHeaderActionMenu: params.setHeaderActionMenu,
+            });
 
-          return () => {
-            unmount();
-            params.element.classList.remove('text2viz-wrapper');
-          };
+            return () => {
+              unmount();
+              params.element.classList.remove('text2viz-wrapper');
+            };
+          } else {
+            const { renderAppNotFound } = await import('./text2viz');
+            return renderAppNotFound(params);
+          }
         },
       });
     }

public/text2viz.tsx

@@ -7,6 +7,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, Router, Switch } from 'react-router-dom';
 
+import { EuiEmptyPrompt, EuiPage, EuiPageBody, EuiPageContent, EuiText } from '@elastic/eui';
 import { AppMountParameters } from '../../../src/core/public';
 import { Text2Viz } from './components/visualization/text2viz';
 import { OpenSearchDashboardsContextProvider } from '../../../src/plugins/opensearch_dashboards_react/public';
@@ -30,3 +31,32 @@ export const renderText2VizApp = (params: AppMountParameters, services: StartSer
     ReactDOM.unmountComponentAtNode(params.element);
   };
 };
+
+export const renderAppNotFound = (params: AppMountParameters) => {
+  ReactDOM.render(
+    <EuiPage style={{ minHeight: '100%' }} data-test-subj="appNotFoundPageContent">
+      <EuiPageBody component="main">
+        <EuiPageContent verticalPosition="center" horizontalPosition="center">
+          <EuiEmptyPrompt
+            iconType="alert"
+            iconColor="danger"
+            title={<h2>Application Not Found</h2>}
+            body={
+              <EuiText size="s">
+                <p>
+                  No application was found at this URL. Please check your app status to enable this
+                  feature.
+                </p>
+              </EuiText>
+            }
+          />
+        </EuiPageContent>
+      </EuiPageBody>
+    </EuiPage>,
+
+    params.element
+  );
+  return () => {
+    ReactDOM.unmountComponentAtNode(params.element);
+  };
+};

server/capabilities.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const capabilitiesProvider = () => ({
+  observability: {
+    show: true,
+  },
+  assistant: {
+    enabled: true,
+  },
+});

server/plugin.ts

@@ -20,8 +20,9 @@ import { registerText2VizRoutes } from './routes/text2viz_routes';
 import { AssistantService } from './services/assistant_service';
 import { registerAgentRoutes } from './routes/agent_routes';
 import { registerSummaryAssistantRoutes } from './routes/summary_routes';
-import { capabilitiesProvider } from './vis_type_nlq/capabilities_provider';
+import { capabilitiesProvider as visNLQCapabilitiesProvider } from './vis_type_nlq/capabilities_provider';
 import { visNLQSavedObjectType } from './vis_type_nlq/saved_object_type';
+import { capabilitiesProvider } from './capabilities';
 
 export class AssistantPlugin implements Plugin<AssistantPluginSetup, AssistantPluginStart> {
   private readonly logger: Logger;
@@ -61,16 +62,16 @@ export class AssistantPlugin implements Plugin<AssistantPluginSetup, AssistantPl
     // Register router for text to visualization
     if (config.text2viz.enabled) {
       registerText2VizRoutes(router, assistantServiceSetup);
-      registerSummaryAssistantRoutes(router, assistantServiceSetup);
-      core.capabilities.registerProvider(capabilitiesProvider);
+      core.capabilities.registerProvider(visNLQCapabilitiesProvider);
       core.savedObjects.registerType(visNLQSavedObjectType);
     }
 
-    core.capabilities.registerProvider(() => ({
-      observability: {
-        show: true,
-      },
-    }));
+    // Register router for alert insight
+    if (config.alertInsight.enabled) {
+      registerSummaryAssistantRoutes(router, assistantServiceSetup);
+    }
+
+    core.capabilities.registerProvider(capabilitiesProvider);
 
     const registerMessageParser = (messageParser: MessageParser) => {
       const findItem = this.messageParsers.find((item) => item.id === messageParser.id);