Moving Query Workbench to Dev Tools

opensearch_dashboards.json

@@ -4,6 +4,6 @@
   "opensearchDashboardsVersion": "3.0.0",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["navigation", "opensearchDashboardsReact", "opensearchDashboardsUtils"],
+  "requiredPlugins": ["devTools", "navigation", "opensearchDashboardsReact", "opensearchDashboardsUtils"],
   "optionalPlugins": ["observabilityDashboards", "dataSource", "dataSourceManagement"]
 }

public/application.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
 
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { AppMountParameters, CoreStart } from '../../../src/core/public';
@@ -14,9 +14,10 @@
 export const renderApp = (
   { notifications, http, chrome, savedObjects }: CoreStart,
   { navigation, dataSource }: AppPluginStartDependencies,
-  { appBasePath, element, setHeaderActionMenu }: AppMountParameters,
+  { appBasePath, element, setHeaderActionMenu, dataSourceId }: AppMountParameters,
   dataSourceManagement: DataSourceManagementPluginSetup
 ) => {
+  console.log(dataSourceId);
   ReactDOM.render(
     <WorkbenchApp
       basename={appBasePath}
@@ -28,6 +29,7 @@
       dataSourceEnabled={!!dataSource}
       dataSourceManagement={dataSourceManagement}
       setActionMenu={setHeaderActionMenu}
+      dataSourceMDSId={dataSourceId}
     />,
     element
   );

public/components/Main/main.tsx

@@ -110,6 +110,7 @@ interface MainProps {
   notifications: NotificationsStart;
   dataSourceEnabled: boolean;
   dataSourceManagement: DataSourceManagementPluginSetup;
+  dataSourceMDSId: string;
   setActionMenu: (menuMount: MountPoint | undefined) => void;
 }
 
@@ -286,9 +287,9 @@ export class Main extends React.Component<MainProps, MainState> {
       isCallOutVisible: false,
       cluster: 'Indexes',
       dataSourceOptions: [],
-      selectedMDSDataConnectionId: '',
+      selectedMDSDataConnectionId: this.props.dataSourceMDSId,
       mdsClusterName: '',
-      flintDataConnections: false
+      flintDataConnections: false,
     };
     this.httpClient = this.props.httpClient;
     this.updateSQLQueries = _.debounce(this.updateSQLQueries, 250).bind(this);
@@ -297,19 +298,13 @@ export class Main extends React.Component<MainProps, MainState> {
   }
 
   componentDidMount() {
-    this.props.setBreadcrumbs([
-      {
-        text: 'Query Workbench',
-        href: '#',
-      },
-    ]);
     this.fetchFlintDataSources();
   }
-
+  
   fetchFlintDataSources = () => {
     fetchDataSources(
       this.httpClient,
-      this.state.selectedMDSDataConnectionId,
+      this.props.dataSourceMDSId,
       this.props.urlDataSource,
       (dataOptions) => {
         if (dataOptions.length > 0) {
@@ -431,7 +426,7 @@ export class Main extends React.Component<MainProps, MainState> {
       const endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqlquery' : 'pplquery');
       let query = {};
       if (this.props.dataSourceEnabled) {
-        query = { dataSourceMDSId: this.state.selectedMDSDataConnectionId };
+        query = { dataSourceMDSId: this.props.dataSourceMDSId };
       }
       const responsePromise = Promise.all(
         queries.map((eachQuery: string) =>
@@ -566,7 +561,7 @@ export class Main extends React.Component<MainProps, MainState> {
               });
             }
           },
-          this.state.selectedMDSDataConnectionId,
+          this.props.dataSourceMDSId,
           (errorDetails: string) => {
             this.setState({
               asyncLoading: false,
@@ -595,7 +590,7 @@ export class Main extends React.Component<MainProps, MainState> {
     if (queries.length > 0) {
       let query = {};
       if (this.props.dataSourceEnabled) {
-        query = { dataSourceMDSId: this.state.selectedMDSDataConnectionId };
+        query = { dataSourceMDSId: this.props.dataSourceMDSId };
       }
       const endpoint =
         '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'translatesql' : 'translateppl');
@@ -647,7 +642,7 @@ export class Main extends React.Component<MainProps, MainState> {
     if (queries.length > 0) {
       let query = {};
       if (this.props.dataSourceEnabled) {
-        query = { dataSourceMDSId: this.state.selectedMDSDataConnectionId };
+        query = { dataSourceMDSId: this.props.dataSourceMDSId };
       }
       Promise.all(
         queries.map((eachQuery: string) =>
@@ -684,7 +679,7 @@ export class Main extends React.Component<MainProps, MainState> {
     if (queries.length > 0) {
       let query = {};
       if (this.props.dataSourceEnabled) {
-        query = { dataSourceMDSId: this.state.selectedMDSDataConnectionId };
+        query = { dataSourceMDSId: this.props.dataSourceMDSId };
       }
       const endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqlquery' : 'pplquery');
       Promise.all(
@@ -722,7 +717,7 @@ export class Main extends React.Component<MainProps, MainState> {
     if (queries.length > 0) {
       let query = {};
       if (this.props.dataSourceEnabled) {
-        query = { dataSourceMDSId: this.state.selectedMDSDataConnectionId };
+        query = { dataSourceMDSId: this.props.dataSourceMDSId };
       }
       const endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqlcsv' : 'pplcsv');
       Promise.all(
@@ -760,7 +755,7 @@ export class Main extends React.Component<MainProps, MainState> {
     if (queries.length > 0) {
       let query = {};
       if (this.props.dataSourceEnabled) {
-        query = { dataSourceMDSId: this.state.selectedMDSDataConnectionId };
+        query = { dataSourceMDSId: this.props.dataSourceMDSId };
       }
       const endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqltext' : 'ppltext');
       Promise.all(
@@ -900,7 +895,7 @@ export class Main extends React.Component<MainProps, MainState> {
       mdsClusterName: clusterName,
       cluster: 'Indexes',
       selectedDatasource: [{ label: 'OpenSearch', key: '' }],
-      isAccelerationFlyoutOpened: false
+      isAccelerationFlyoutOpened: false,
     });
     this.fetchFlintDataSources();
   };
@@ -932,7 +927,7 @@ export class Main extends React.Component<MainProps, MainState> {
           openAccelerationFlyout={
             this.props.isAccelerationFlyoutOpen && !this.state.isAccelerationFlyoutOpened
           }
-          dataSourceMDSId={this.state.selectedMDSDataConnectionId}
+          dataSourceMDSId={this.props.dataSourceMDSId}
           setIsAccelerationFlyoutOpened={this.setIsAccelerationFlyoutOpened}
         />
       );
@@ -1018,18 +1013,20 @@ export class Main extends React.Component<MainProps, MainState> {
           />
         )}
         <EuiPage paddingSize="none">
-          <EuiPanel grow={true} style={{marginRight: '10px'}}>
+          <EuiPanel grow={true} style={{ marginRight: '10px' }}>
             <EuiPageSideBar
               style={{
                 maxWidth: '400px',
                 width: '400px',
                 height: 'calc(100vh - 254px)',
               }}
             >
-              <EuiTitle size='xs'>
-                  <p><b>{this.state.mdsClusterName}</b></p>
-                </EuiTitle>
-                <EuiSpacer size='s'/>
+              <EuiTitle size="xs">
+                <p>
+                  <b>{this.state.mdsClusterName}</b>
+                </p>
+              </EuiTitle>
+              <EuiSpacer size="s" />
               {this.state.flintDataConnections && (
                 <EuiFlexGroup direction="row" gutterSize="s">
                   <EuiFlexItem grow={false}>
@@ -1068,7 +1065,7 @@ export class Main extends React.Component<MainProps, MainState> {
                         onSelect={this.handleDataSelect}
                         urlDataSource={this.props.urlDataSource}
                         asyncLoading={this.state.asyncLoading}
-                        dataSourceMDSId={this.state.selectedMDSDataConnectionId}
+                        dataSourceMDSId={this.props.dataSourceMDSId}
                       />
                     </EuiFlexItem>
                     <EuiFlexItem grow={false}>
@@ -1087,7 +1084,7 @@ export class Main extends React.Component<MainProps, MainState> {
                     updateSQLQueries={this.updateSQLQueries}
                     refreshTree={this.state.refreshTree}
                     dataSourceEnabled={this.props.dataSourceEnabled}
-                    dataSourceMDSId={this.state.selectedMDSDataConnectionId}
+                    dataSourceMDSId={this.props.dataSourceMDSId}
                     clusterTab={this.state.cluster}
                     language={this.state.language}
                     updatePPLQueries={this.updatePPLQueries}
@@ -1183,4 +1180,4 @@ export class Main extends React.Component<MainProps, MainState> {
       </>
     );
   }
-}
+}

public/components/app.tsx

@@ -24,6 +24,7 @@ interface WorkbenchAppDeps {
   savedObjects: CoreStart['savedObjects'];
   dataSourceEnabled: boolean;
   dataSourceManagement: DataSourceManagementPluginSetup;
+  dataSourceMDSId: string;
   setActionMenu: (menuMount: MountPoint | undefined) => void;
 }
 
@@ -36,6 +37,7 @@ export const WorkbenchApp = ({
   savedObjects,
   dataSourceEnabled,
   dataSourceManagement,
+  dataSourceMDSId: dataSourceId,
   setActionMenu,
 }: WorkbenchAppDeps) => {
   return (
@@ -59,6 +61,7 @@ export const WorkbenchApp = ({
                       savedObjects={savedObjects}
                       dataSourceEnabled={dataSourceEnabled}
                       dataSourceManagement={dataSourceManagement}
+                      dataSourceMDSId={dataSourceId}
                       setActionMenu={setActionMenu}
                     />
                   )}
@@ -77,6 +80,7 @@ export const WorkbenchApp = ({
                       savedObjects={savedObjects}
                       dataSourceEnabled={dataSourceEnabled}
                       dataSourceManagement={dataSourceManagement}
+                      dataSourceMDSId={dataSourceId}
                       setActionMenu={setActionMenu}
                     />
                   )}
@@ -95,6 +99,7 @@ export const WorkbenchApp = ({
                       savedObjects={savedObjects}
                       dataSourceEnabled={dataSourceEnabled}
                       dataSourceManagement={dataSourceManagement}
+                      dataSourceMDSId={dataSourceId}
                       setActionMenu={setActionMenu}
                     />
                   )}

public/plugin.ts

@@ -4,39 +4,47 @@
  */
 
 import { AppMountParameters, CoreSetup, CoreStart, Plugin } from '../../../src/core/public';
-import { DataSourcePluginSetup, DataSourcePluginStart } from '../../../src/plugins/data_source/public';
+import {
+  DataSourcePluginSetup,
+  DataSourcePluginStart,
+} from '../../../src/plugins/data_source/public';
 import { DataSourceManagementPluginSetup } from '../../../src/plugins/data_source_management/public';
+import { DevToolsSetup } from '../../../src/plugins/dev_tools/public';
 import { PLUGIN_NAME } from '../common/constants';
 import { registerObservabilityDependencies } from './dependencies/register_observability_dependencies';
 import { coreRefs } from './framework/core_refs';
 import { AppPluginStartDependencies, WorkbenchPluginSetup, WorkbenchPluginStart } from './types';
 export interface WorkbenchPluginSetupDependencies {
   dataSource: DataSourcePluginSetup;
-  dataSourceManagement: DataSourceManagementPluginSetup
+  dataSourceManagement: DataSourceManagementPluginSetup;
+  devTools: DevToolsSetup;
 }
 
 export interface WorkbenchPluginStartDependencies {
   dataSource: DataSourcePluginStart;
 }
 export class WorkbenchPlugin implements Plugin<WorkbenchPluginSetup, WorkbenchPluginStart> {
-  public setup(core: CoreSetup, {dataSource, dataSourceManagement} : WorkbenchPluginSetupDependencies): WorkbenchPluginSetup {
-    // Register an application into the side navigation menu
-    core.application.register({
+  public setup(
+    core: CoreSetup,
+    { dataSource, dataSourceManagement, devTools }: WorkbenchPluginSetupDependencies
+  ): WorkbenchPluginSetup {
+    devTools.register({
       id: 'opensearch-query-workbench',
       title: PLUGIN_NAME,
-      category: {
-        id: 'opensearch',
-        label: 'OpenSearch Plugins',
-        order: 2000,
-      },
-      order: 1000,
+      enableRouting: true,
+      order: 2,
       async mount(params: AppMountParameters) {
         // Load application bundle
         const { renderApp } = await import('./application');
         // Get start services as specified in opensearch_dashboards.json
         const [coreStart, depsStart] = await core.getStartServices();
         // Render the application
-        return renderApp(coreStart, depsStart as AppPluginStartDependencies, params, dataSourceManagement);
+        return renderApp(
+          coreStart,
+          depsStart as AppPluginStartDependencies,
+          params,
+          dataSourceManagement,
+        );
       },
     });
 
@@ -58,4 +66,4 @@ export class WorkbenchPlugin implements Plugin<WorkbenchPluginSetup, WorkbenchPl
   }
 
   public stop() {}
-}
+}