MDS Support

opensearch_dashboards.json

@@ -5,5 +5,6 @@
   "server": true,
   "ui": true,
   "requiredPlugins": ["navigation"],
-  "optionalPlugins": []
+  "optionalPlugins": ["dataSource",
+    "dataSourceManagement"]
 }

public/application.tsx

@@ -9,18 +9,25 @@ import { HashRouter as Router } from 'react-router-dom';
 import { AppMountParameters, CoreStart } from '../../../src/core/public';
 import { QueryInsightsDashboardsApp } from './components/app';
 import { QueryInsightsDashboardsPluginStartDependencies } from './types';
+import { DataSourceManagementPluginSetup } from '../../../src/plugins/data_source_management/public';
 
 export const renderApp = (
   core: CoreStart,
   depsStart: QueryInsightsDashboardsPluginStartDependencies,
-  { element }: AppMountParameters
+  params: AppMountParameters,
+  dataSourceManagement?: DataSourceManagementPluginSetup
 ) => {
   ReactDOM.render(
     <Router>
-      <QueryInsightsDashboardsApp core={core} depsStart={depsStart} />
+      <QueryInsightsDashboardsApp
+        core={core}
+        depsStart={depsStart}
+        params={params}
+        dataSourceManagement={dataSourceManagement}
+      />
     </Router>,
-    element
+    params.element
   );
 
-  return () => ReactDOM.unmountComponentAtNode(element);
+  return () => ReactDOM.unmountComponentAtNode(params.element);
 };

public/components/DataSourcePicker.tsx

@@ -0,0 +1,73 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import {
+  DataSourceManagementPluginSetup,
+  DataSourceOption,
+  DataSourceSelectableConfig,
+} from 'src/plugins/data_source_management/public';
+import { AppMountParameters, CoreStart } from '../../../../src/core/public';
+import { QueryInsightsDashboardsPluginStartDependencies } from '../types';
+
+export interface DataSourceMenuProps {
+  dataSourceManagement: DataSourceManagementPluginSetup;
+  depsStart: QueryInsightsDashboardsPluginStartDependencies;
+  coreStart: CoreStart;
+  params: AppMountParameters;
+  setDataSource: React.Dispatch<React.SetStateAction<DataSourceOption>>;
+  selectedDataSource: DataSourceOption;
+}
+
+export function getDataSourceEnabledUrl(dataSource: DataSourceOption) {
+  const url = new URL(window.location.href);
+  url.searchParams.set('dataSource', JSON.stringify(dataSource));
+  return url;
+}
+
+export function getDataSourceFromUrl(): DataSourceOption {
+  const urlParams = new URLSearchParams(window.location.search);
+  const dataSourceParam = (urlParams && urlParams.get('dataSource')) || '{}';
+  // following block is needed if the dataSource param is set to non-JSON value, say 'undefined'
+  try {
+    return JSON.parse(dataSourceParam);
+  } catch (e) {
+    return JSON.parse('{}'); // Return an empty object or some default value if parsing fails
+  }
+}
+
+export const QueryInsightsDataSourceMenu = React.memo(
+  (props: DataSourceMenuProps) => {
+    const { coreStart, depsStart, dataSourceManagement, params, setDataSource,
+      selectedDataSource } = props;
+    const { setHeaderActionMenu } = params;
+    const DataSourceMenu = dataSourceManagement?.ui.getDataSourceMenu<DataSourceSelectableConfig>();
+
+    const dataSourceEnabled = !!depsStart.dataSource?.dataSourceEnabled;
+
+    const wrapSetDataSourceWithUpdateUrl = (dataSources: DataSourceOption[]) => {
+      window.history.replaceState({}, '', getDataSourceEnabledUrl(dataSources[0]).toString());
+      setDataSource(dataSources[0]);
+    };
+
+    return dataSourceEnabled ? (
+      <DataSourceMenu
+        setMenuMountPoint={setHeaderActionMenu}
+        componentType={'DataSourceSelectable'}
+        componentConfig={{
+          savedObjects: coreStart.savedObjects.client,
+          notifications: coreStart.notifications,
+          activeOption:
+            selectedDataSource.id || selectedDataSource.label ? [selectedDataSource] : undefined,
+          onSelectedDataSources: wrapSetDataSourceWithUpdateUrl,
+          fullWidth: true,
+        }}
+      />
+    ) : null;
+  },
+  (prevProps, newProps) =>
+    prevProps.selectedDataSource.id === newProps.selectedDataSource.id &&
+    // prevProps.dataSourcePickerReadOnly === newProps.dataSourcePickerReadOnly
+)

public/components/app.tsx

@@ -5,16 +5,32 @@
 
 import React from 'react';
 import { Route } from 'react-router-dom';
+import { DataSourceManagementPluginSetup } from 'src/plugins/data_source_management/public';
 import TopNQueries from '../pages/TopNQueries/TopNQueries';
-import { CoreStart } from '../../../../src/core/public';
+import { AppMountParameters, CoreStart } from '../../../../src/core/public';
 import { QueryInsightsDashboardsPluginStartDependencies } from '../types';
 
 export const QueryInsightsDashboardsApp = ({
   core,
   depsStart,
+  params,
+  dataSourceManagement,
 }: {
   core: CoreStart;
   depsStart: QueryInsightsDashboardsPluginStartDependencies;
+  params: AppMountParameters;
+  dataSourceManagement?: DataSourceManagementPluginSetup;
 }) => {
-  return <Route render={() => <TopNQueries core={core} depsStart={depsStart} />} />;
+  return (
+    <Route
+      render={() => (
+        <TopNQueries
+          core={core}
+          depsStart={depsStart}
+          params={params}
+          dataSourceManagement={dataSourceManagement}
+        />
+      )}
+    />
+  );
 };

public/pages/Configuration/Configuration.test.tsx

@@ -49,6 +49,8 @@ const renderConfiguration = (overrides = {}) =>
         groupBySettings={groupBySettings}
         configInfo={mockConfigInfo}
         core={mockCoreStart}
+        depsStart={{ navigation: {} }}
+        params={{} as any}
       />
     </MemoryRouter>
   );

public/pages/Configuration/Configuration.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback, useState, useEffect } from 'react';
+import React, {useCallback, useState, useEffect, useContext} from 'react';
 import {
   EuiBottomBar,
   EuiButton,
@@ -23,14 +23,17 @@
   EuiTitle,
 } from '@elastic/eui';
 import { useHistory, useLocation } from 'react-router-dom';
-import { CoreStart } from 'opensearch-dashboards/public';
-import { QUERY_INSIGHTS, MetricSettings, GroupBySettings } from '../TopNQueries/TopNQueries';
+import { AppMountParameters, CoreStart } from 'opensearch-dashboards/public';
+import { DataSourceManagementPluginSetup } from 'src/plugins/data_source_management/public';
+import {QUERY_INSIGHTS, MetricSettings, GroupBySettings, DataSourceContext} from '../TopNQueries/TopNQueries';
 import {
   METRIC_TYPES_TEXT,
   TIME_UNITS_TEXT,
   MINUTES_OPTIONS,
   GROUP_BY_OPTIONS,
 } from '../Utils/Constants';
+import { QueryInsightsDataSourceMenu } from '../../components/DataSourcePicker';
+import { QueryInsightsDashboardsPluginStartDependencies } from '../../types';
 
 const Configuration = ({
   latencySettings,
@@ -39,13 +42,19 @@
   groupBySettings,
   configInfo,
   core,
+  depsStart,
+  params,
+  dataSourceManagement,
 }: {
   latencySettings: MetricSettings;
   cpuSettings: MetricSettings;
   memorySettings: MetricSettings;
   groupBySettings: GroupBySettings;
   configInfo: any;
   core: CoreStart;
+  params: AppMountParameters;
+  dataSourceManagement?: DataSourceManagementPluginSetup;
+  depsStart: QueryInsightsDashboardsPluginStartDependencies;
 }) => {
   const history = useHistory();
   const location = useLocation();
@@ -56,6 +65,7 @@
   const [windowSize, setWindowSize] = useState(latencySettings.currWindowSize);
   const [time, setTime] = useState(latencySettings.currTimeUnit);
   const [groupBy, setGroupBy] = useState(groupBySettings.groupBy);
+  const { dataSource, setDataSource } = useContext(DataSourceContext)!;
 
   const [metricSettingsMap, setMetricSettingsMap] = useState({
     latency: latencySettings,
@@ -170,6 +180,14 @@
 
   return (
     <div>
+      <QueryInsightsDataSourceMenu
+        coreStart={core}
+        depsStart={depsStart}
+        params={params}
+        dataSourceManagement={dataSourceManagement}
+        setDataSource={setDataSource}
+        selectedDataSource={dataSource}
+      />
       <EuiFlexGroup>
         <EuiFlexItem grow={6}>
           <EuiPanel paddingSize="m">

public/pages/QueryDetails/QueryDetails.test.tsx

@@ -49,7 +49,7 @@ describe('QueryDetails component', () => {
         ]}
       >
         <Route path="/query-details">
-          <QueryDetails core={mockCoreStart} />
+          <QueryDetails core={mockCoreStart} depsStart={{ navigation: {} }} params={{} as any} />
         </Route>
       </MemoryRouter>
     );

public/pages/QueryDetails/QueryDetails.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 // @ts-ignore
 import Plotly from 'plotly.js-dist';
 import {
@@ -19,19 +19,25 @@
   EuiTitle,
 } from '@elastic/eui';
 import { useHistory, useLocation } from 'react-router-dom';
-import { CoreStart } from 'opensearch-dashboards/public';
+import { AppMountParameters, CoreStart } from 'opensearch-dashboards/public';
+import { DataSourceManagementPluginSetup } from 'src/plugins/data_source_management/public';
 import QuerySummary from './Components/QuerySummary';
-import { QUERY_INSIGHTS } from '../TopNQueries/TopNQueries';
+import { DataSourceContext, QUERY_INSIGHTS } from '../TopNQueries/TopNQueries';
 import { SearchQueryRecord } from '../../../types/types';
 import { PageHeader } from '../../components/PageHeader';
 import { QueryInsightsDashboardsPluginStartDependencies } from '../../types';
 import { retrieveQueryById } from '../Utils/QueryUtils';
+import { getDataSourceFromUrl, QueryInsightsDataSourceMenu } from '../../components/DataSourcePicker';
 
 const QueryDetails = ({
   core,
   depsStart,
+  params,
+  dataSourceManagement,
 }: {
   core: CoreStart;
+  params: AppMountParameters;
+  dataSourceManagement?: DataSourceManagementPluginSetup;
   depsStart: QueryInsightsDashboardsPluginStartDependencies;
 }) => {
   // Get url parameters
@@ -43,6 +49,7 @@
 
   const [query, setQuery] = useState<SearchQueryRecord | null>(null);
   const history = useHistory();
+  const { dataSource, setDataSource } = useContext(DataSourceContext)!;
 
   // Convert UNIX time to a readable format
   const convertTime = useCallback((unixTime: number) => {
@@ -53,7 +60,7 @@
 
   useEffect(() => {
     const fetchQueryDetails = async () => {
-      const retrievedQuery = await retrieveQueryById(core, from, to, id);
+      const retrievedQuery = await retrieveQueryById(core, getDataSourceFromUrl().id, from, to, id);
       setQuery(retrievedQuery);
     };
 
@@ -134,7 +141,14 @@
           </>
         }
       />
-
+      <QueryInsightsDataSourceMenu
+        coreStart={core}
+        depsStart={depsStart}
+        params={params}
+        dataSourceManagement={dataSourceManagement}
+        setDataSource={setDataSource}
+        selectedDataSource={dataSource}
+      />
       <EuiFlexItem>
         <QuerySummary query={query} />
         <EuiSpacer size="m" />

public/pages/QueryGroupDetails/QueryGroupDetails.test.tsx

@@ -52,7 +52,7 @@ describe('QueryGroupDetails', () => {
         initialEntries={['/query-group-details?id=mockId&from=1632441600000&to=1632528000000']}
       >
         <Route path="/query-group-details">
-          <QueryGroupDetails core={coreMock} />
+          <QueryGroupDetails core={coreMock} depsStart={{ navigation: {} }} params={{} as any} />
         </Route>
       </MemoryRouter>
     );

public/pages/QueryGroupDetails/QueryGroupDetails.tsx

@@ -3,11 +3,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { CoreStart } from 'opensearch-dashboards/public';
+import { AppMountParameters, CoreStart } from 'opensearch-dashboards/public';
+import { DataSourceManagementPluginSetup } from 'src/plugins/data_source_management/public';
 // @ts-ignore
 import Plotly from 'plotly.js-dist';
 import { useHistory, useLocation } from 'react-router-dom';
-import React, { useEffect, useState } from 'react';
+import React, {useContext, useEffect, useState} from 'react';
 import {
   EuiButton,
   EuiCodeBlock,
@@ -21,20 +22,25 @@
   EuiTitle,
   EuiIconTip,
 } from '@elastic/eui';
-import { QUERY_INSIGHTS } from '../TopNQueries/TopNQueries';
+import {DataSourceContext, QUERY_INSIGHTS} from '../TopNQueries/TopNQueries';
 import { QueryGroupAggregateSummary } from './Components/QueryGroupAggregateSummary';
 import { QueryGroupSampleQuerySummary } from './Components/QueryGroupSampleQuerySummary';
 
 import { QueryInsightsDashboardsPluginStartDependencies } from '../../types';
 import { PageHeader } from '../../components/PageHeader';
 import { SearchQueryRecord } from '../../../types/types';
 import { retrieveQueryById } from '../Utils/QueryUtils';
+import { QueryInsightsDataSourceMenu } from '../../components/DataSourcePicker';
 
 export const QueryGroupDetails = ({
   core,
   depsStart,
+  params,
+  dataSourceManagement,
 }: {
   core: CoreStart;
+  params: AppMountParameters;
+  dataSourceManagement?: DataSourceManagementPluginSetup;
   depsStart: QueryInsightsDashboardsPluginStartDependencies;
 }) => {
   // Get url parameters
@@ -45,6 +51,7 @@
   const to = searchParams.get('to');
 
   const [query, setQuery] = useState<SearchQueryRecord | null>(null);
+  const { dataSource, setDataSource } = useContext(DataSourceContext)!;
 
   const convertTime = (unixTime: number) => {
     const date = new Date(unixTime);
@@ -56,7 +63,7 @@
 
   useEffect(() => {
     const fetchQueryDetails = async () => {
-      const retrievedQuery = await retrieveQueryById(core, from, to, id);
+      const retrievedQuery = await retrieveQueryById(core, '738ffbd0-d8de-11ef-9d96-eff1abd421b8', from, to, id);
       setQuery(retrievedQuery);
     };
 
@@ -149,6 +156,14 @@
           </>
         }
       />
+      <QueryInsightsDataSourceMenu
+        coreStart={core}
+        depsStart={depsStart}
+        params={params}
+        dataSourceManagement={dataSourceManagement}
+        setDataSource={setDataSource}
+        selectedDataSource={dataSource}
+      />
       <EuiFlexItem>
         <QueryGroupAggregateSummary query={query} />
       </EuiFlexItem>

public/pages/QueryInsights/QueryInsights.test.tsx

@@ -32,6 +32,8 @@ const renderQueryInsights = () =>
         currEnd="now"
         // @ts-ignore
         core={mockCore}
+        depsStart={{ navigation: {} }}
+        params={{} as any}
       />
     </MemoryRouter>
   );