[MDS] TSVB Support

CHANGELOG.md

@@ -81,6 +81,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Workspace] Add permission control logic ([#6052](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6052))
 - [Multiple Datasource] Add default icon for selectable component and make sure the default datasource shows automatically ([#6327](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6327))
 - [Multiple Datasource] Pass selected data sources to plugin consumers when the multi-select component initially loads ([#6333](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6333))
+- [Mulitple Datasource] Add multi data source support to TSVB ([#6298](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6298))
 - [Multiple Datasource] Add installedPlugins list to data source saved object ([#6348](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6348))
 - [Multiple Datasource] Add default icon in multi-selectable picker ([#6357](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6357))
 - [Workspace] Add APIs to support plugin state in request ([#6303](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6303))

src/plugins/data_source/server/index.ts

@@ -25,3 +25,5 @@ export {
   DataSourcePluginStart,
   DataSourcePluginRequestContext,
 } from './types';
+
+export { decideLegacyClient } from './util/decide_client';

src/plugins/data_source/server/util/decide_client.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { RequestHandlerContext } from 'src/core/server';
+
+export const decideLegacyClient = (
+  requestContext: RequestHandlerContext,
+  dataSourceId: string | null
+) => {
+  return !!dataSourceId && !!requestContext.dataSource
+    ? requestContext.dataSource.opensearch.legacy.getClient(dataSourceId).callAPI
+    : requestContext.core.opensearch.legacy.client.callAsCurrentUser;
+};

src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.tsx

@@ -31,6 +31,7 @@ export interface DataSourceSelectorProps {
   dataSourceFilter?: (dataSource: SavedObject<DataSourceAttributes>) => boolean;
   compressed?: boolean;
   uiSettings?: IUiSettingsClient;
+  isClearable?: boolean;
 }
 
 interface DataSourceSelectorState {
@@ -204,6 +205,7 @@ export class DataSourceSelector extends React.Component<
 
     return (
       <EuiComboBox
+        isClearable={this.props.isClearable}
         aria-label={
           placeholderText
             ? i18n.translate('dataSourceSelectorComboBoxAriaLabel', {

src/plugins/data_source_management/public/components/data_source_selector/index.ts

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { DataSourceSelector } from './data_source_selector';
+export { DataSourceSelector, DataSourceOption } from './data_source_selector';

src/plugins/data_source_management/public/index.ts

@@ -12,7 +12,7 @@ export function plugin() {
 }
 
 export { DataSourceManagementPluginStart } from './types';
-export { DataSourceSelector } from './components/data_source_selector';
+export { DataSourceSelector, DataSourceOption } from './components/data_source_selector';
 export { DataSourceMenu } from './components/data_source_menu';
 export { DataSourceManagementPlugin, DataSourceManagementPluginSetup } from './plugin';
 export {

src/plugins/vis_type_timeseries/common/constants.ts

@@ -30,3 +30,4 @@
 
 export const MAX_BUCKETS_SETTING = 'metrics:max_buckets';
 export const INDEXES_SEPARATOR = ',';
+export const DATA_SOURCE_ID_KEY = 'data_source_id';

src/plugins/vis_type_timeseries/common/vis_schema.ts

@@ -238,6 +238,7 @@ export const panel = schema.object({
   ignore_global_filters: numberOptional,
   ignore_global_filter: numberOptional,
   index_pattern: stringRequired,
+  data_source_id: stringOptionalNullable,
   interval: stringRequired,
   isModelInvalid: schema.maybe(schema.boolean()),
   legend_position: stringOptionalNullable,

src/plugins/vis_type_timeseries/opensearch_dashboards.json

@@ -5,6 +5,6 @@
   "server": true,
   "ui": true,
   "requiredPlugins": ["charts", "data", "expressions", "visualizations"],
-  "optionalPlugins": ["usageCollection"],
+  "optionalPlugins": ["usageCollection", "dataSourceManagement", "dataSource"],
   "requiredBundles": ["opensearchDashboardsUtils", "opensearchDashboardsReact"]
 }

src/plugins/vis_type_timeseries/public/application/components/annotations_editor.js

@@ -55,6 +55,7 @@ import {
   EuiText,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
+import { i18n } from '@osd/i18n';
 
 function newAnnotation() {
   return {
@@ -131,9 +132,13 @@ export class AnnotationsEditor extends Component {
                   label={
                     <FormattedMessage
                       id="visTypeTimeseries.annotationsEditor.indexPatternLabel"
-                      defaultMessage="Index pattern (required)"
+                      defaultMessage="Index name (required)"
                     />
                   }
+                  helpText={i18n.translate('visTypeTimeseries.indexPattern.searchByIndex', {
+                    defaultMessage:
+                      'Use an asterisk (*) to match multiple indices. Spaces and the characters , /, ?, ", <, >, | are not allowed.',
+                  })}
                   fullWidth
                 >
                   <EuiFieldText

src/plugins/vis_type_timeseries/public/application/components/index_pattern.js

@@ -41,6 +41,13 @@ import {
   EuiText,
 } from '@elastic/eui';
 import { FieldSelect } from './aggs/field_select';
+import { createDataSourcePickerHandler } from './lib/create_data_source_change_handler';
+import {
+  getSavedObjectsClient,
+  getNotifications,
+  getDataSourceManagementSetup,
+  getHideLocalCluster,
+} from '../../services';
 import { createSelectHandler } from './lib/create_select_handler';
 import { createTextHandler } from './lib/create_text_handler';
 import { YesNo } from './yes_no';
@@ -112,6 +119,14 @@ export const IndexPattern = ({ fields, prefix, onChange, disabled, model: _model
   };
 
   const model = { ...defaults, ..._model };
+
+  const dataSourceManagementEnabled =
+    !!getDataSourceManagementSetup().dataSourceManagement || false;
+  const handleDataSourceSelectChange = createDataSourcePickerHandler(onChange);
+  const DataSourceSelector = dataSourceManagementEnabled
+    ? getDataSourceManagementSetup().dataSourceManagement.ui.DataSourceSelector
+    : undefined;
+
   const isDefaultIndexPatternUsed = model.default_index_pattern && !model[indexPatternName];
   const intervalValidation = validateIntervalValue(model[intervalName]);
   const selectedTimeRangeOption = timeRangeOptions.find(
@@ -157,18 +172,46 @@ export const IndexPattern = ({ fields, prefix, onChange, disabled, model: _model
           </EuiFlexItem>
         </EuiFlexGroup>
       )}
+      {!!dataSourceManagementEnabled && (
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiFormRow
+              id={htmlId('dataSource')}
+              label={i18n.translate('visTypeTimeseries.indexPattern.dataSourceLabel', {
+                defaultMessage: 'Data source',
+              })}
+            >
+              <DataSourceSelector
+                savedObjectsClient={getSavedObjectsClient().client}
+                notifications={getNotifications().toasts}
+                onSelectedDataSource={handleDataSourceSelectChange}
+                defaultOption={model.data_source_id ? [{ id: model.data_source_id }] : [{ id: '' }]}
+                disabled={false}
+                fullWidth={false}
+                removePrepend={true}
+                isClearable={false}
+                hideLocalCluster={!!getHideLocalCluster().hideLocalCluster}
+              />
+            </EuiFormRow>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      )}
       <EuiFlexGroup>
         <EuiFlexItem>
           <EuiFormRow
             id={htmlId('indexPattern')}
             label={i18n.translate('visTypeTimeseries.indexPatternLabel', {
-              defaultMessage: 'Index pattern',
+              defaultMessage: 'Index name',
             })}
             helpText={
-              isDefaultIndexPatternUsed &&
-              i18n.translate('visTypeTimeseries.indexPattern.searchByDefaultIndex', {
-                defaultMessage: 'Default index pattern is used. To query all indexes use *',
-              })
+              isDefaultIndexPatternUsed
+                ? i18n.translate('visTypeTimeseries.indexPattern.searchByDefaultIndex', {
+                    defaultMessage: 'Default index pattern is used. To query all indexes use *',
+                  })
+                : i18n.translate('visTypeTimeseries.indexPattern.searchByIndex', {
+                    defaultMessage:
+                      'Use an asterisk (*) to match multiple indices. Spaces and the characters , /, ?, ", <, >, | are not allowed.',
+                  })
             }
           >
             <EuiFieldText

src/plugins/vis_type_timeseries/public/application/components/lib/create_data_source_change_handler.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import _ from 'lodash';
+
+import { PanelSchema } from 'src/plugins/vis_type_timeseries/common/types';
+import { DATA_SOURCE_ID_KEY } from '../../../../common/constants';
+
+export const createDataSourcePickerHandler = (handleChange: (e: PanelSchema) => void) => {
+  return (selectedOptions: []): void => {
+    return handleChange?.({
+      [DATA_SOURCE_ID_KEY]: _.get(selectedOptions, '[0].id', null),
+    } as PanelSchema);
+  };
+};

src/plugins/vis_type_timeseries/public/application/components/vis_editor.js

@@ -41,6 +41,7 @@ import { createBrushHandler } from '../lib/create_brush_handler';
 import { fetchFields } from '../lib/fetch_fields';
 import { extractIndexPatterns } from '../../../../../plugins/vis_type_timeseries/common/extract_index_patterns';
 import { getSavedObjectsClient, getUISettings, getDataStart, getCoreStart } from '../../services';
+import { DATA_SOURCE_ID_KEY } from '../../../common/constants';
 
 import { CoreStartContextProvider } from '../contexts/query_input_bar_context';
 import { OpenSearchDashboardsContextProvider } from '../../../../../plugins/opensearch_dashboards_react/public';
@@ -113,9 +114,13 @@ export class VisEditor extends Component {
     }
 
     if (this.props.isEditorMode) {
+      const dataSourceId = nextModel[DATA_SOURCE_ID_KEY] || undefined;
       const extractedIndexPatterns = extractIndexPatterns(nextModel);
-      if (!isEqual(this.state.extractedIndexPatterns, extractedIndexPatterns)) {
-        fetchFields(extractedIndexPatterns).then((visFields) =>
+      if (
+        !isEqual(this.state.extractedIndexPatterns, extractedIndexPatterns) ||
+        !isEqual(this.state.model[DATA_SOURCE_ID_KEY], dataSourceId)
+      ) {
+        fetchFields(extractedIndexPatterns, dataSourceId).then((visFields) =>
           this.setState({
             visFields,
             extractedIndexPatterns,

src/plugins/vis_type_timeseries/public/application/lib/fetch_fields.js

@@ -30,16 +30,18 @@
 
 import { i18n } from '@osd/i18n';
 import { extractIndexPatterns } from '../../../common/extract_index_patterns';
+import { DATA_SOURCE_ID_KEY } from '../../../common/constants';
 import { getCoreStart } from '../../services';
 
-export async function fetchFields(indexPatterns = ['*']) {
+export async function fetchFields(indexPatterns = ['*'], dataSourceId = undefined) {
   const patterns = Array.isArray(indexPatterns) ? indexPatterns : [indexPatterns];
   try {
     const indexFields = await Promise.all(
       patterns.map((pattern) => {
         return getCoreStart().http.get('/api/metrics/fields', {
           query: {
             index: pattern,
+            dataSourceId,
           },
         });
       })
@@ -62,7 +64,8 @@ export async function fetchFields(indexPatterns = ['*']) {
 }
 
 export async function fetchIndexPatternFields({ params, fields = {} }) {
+  const dataSourceId = params[DATA_SOURCE_ID_KEY] || undefined;
   const indexPatterns = extractIndexPatterns(params, fields);
 
-  return await fetchFields(indexPatterns);
+  return await fetchFields(indexPatterns, dataSourceId);
 }

src/plugins/vis_type_timeseries/public/plugin.ts

@@ -36,6 +36,8 @@ import {
   CoreStart,
   Plugin,
 } from 'opensearch-dashboards/public';
+import { DataSourceManagementPluginSetup } from 'src/plugins/data_source_management/public';
+import { DataSourcePluginSetup } from 'src/plugins/data_source/public';
 import { Plugin as ExpressionsPublicPlugin } from '../../expressions/public';
 import { VisualizationsSetup } from '../../visualizations/public';
 
@@ -49,6 +51,9 @@ import {
   setCoreStart,
   setDataStart,
   setChartsSetup,
+  setDataSourceManagementSetup,
+  setNotifications,
+  setHideLocalCluster,
 } from './services';
 import { DataPublicPluginStart } from '../../data/public';
 import { ChartsPluginSetup } from '../../charts/public';
@@ -58,6 +63,8 @@ export interface MetricsPluginSetupDependencies {
   expressions: ReturnType<ExpressionsPublicPlugin['setup']>;
   visualizations: VisualizationsSetup;
   charts: ChartsPluginSetup;
+  dataSourceManagement?: DataSourceManagementPluginSetup;
+  dataSource?: DataSourcePluginSetup;
 }
 
 /** @internal */
@@ -75,12 +82,20 @@ export class MetricsPlugin implements Plugin<Promise<void>, void> {
 
   public async setup(
     core: CoreSetup,
-    { expressions, visualizations, charts }: MetricsPluginSetupDependencies
+    {
+      expressions,
+      visualizations,
+      charts,
+      dataSourceManagement,
+      dataSource,
+    }: MetricsPluginSetupDependencies
   ) {
     expressions.registerFunction(createMetricsFn);
     setUISettings(core.uiSettings);
     setChartsSetup(charts);
     visualizations.createReactVisualization(metricsVisDefinition);
+    setDataSourceManagementSetup({ dataSourceManagement });
+    setHideLocalCluster({ hideLocalCluster: dataSource?.hideLocalCluster });
   }
 
   public start(core: CoreStart, { data }: MetricsPluginStartDependencies) {
@@ -89,5 +104,6 @@ export class MetricsPlugin implements Plugin<Promise<void>, void> {
     setFieldFormats(data.fieldFormats);
     setDataStart(data);
     setCoreStart(core);
+    setNotifications(core.notifications);
   }
 }

src/plugins/vis_type_timeseries/public/services.ts

@@ -28,7 +28,14 @@
  * under the License.
  */
 
-import { I18nStart, SavedObjectsStart, IUiSettingsClient, CoreStart } from 'src/core/public';
+import {
+  I18nStart,
+  SavedObjectsStart,
+  IUiSettingsClient,
+  CoreStart,
+  NotificationsStart,
+} from 'src/core/public';
+import { DataSourceManagementPluginSetup } from 'src/plugins/data_source_management/public';
 import { createGetterSetter } from '../../opensearch_dashboards_utils/public';
 import { ChartsPluginSetup } from '../../charts/public';
 import { DataPublicPluginStart } from '../../data/public';
@@ -52,3 +59,15 @@ export const [getI18n, setI18n] = createGetterSetter<I18nStart>('I18n');
 export const [getChartsSetup, setChartsSetup] = createGetterSetter<ChartsPluginSetup>(
   'ChartsPluginSetup'
 );
+
+export const [getDataSourceManagementSetup, setDataSourceManagementSetup] = createGetterSetter<{
+  dataSourceManagement: DataSourceManagementPluginSetup | undefined;
+}>('DataSourceManagementSetup');
+
+export const [getHideLocalCluster, setHideLocalCluster] = createGetterSetter<{
+  hideLocalCluster: boolean | undefined;
+}>('HideLocalCluster');
+
+export const [getNotifications, setNotifications] = createGetterSetter<NotificationsStart>(
+  'Notifications'
+);

src/plugins/vis_type_timeseries/server/lib/get_fields.ts

@@ -39,26 +39,28 @@ import {
   IndexPatternsFetcher,
 } from '../../../data/server';
 import { ReqFacade } from './search_strategies/strategies/abstract_search_strategy';
+import { decideLegacyClient } from '../../../data_source/server';
 
 export async function getFields(
   requestContext: RequestHandlerContext,
   request: OpenSearchDashboardsRequest,
   framework: Framework,
-  indexPattern: string
+  indexPattern: string,
+  dataSourceId: string | null
 ) {
   // NOTE / TODO: This facade has been put in place to make migrating to the New Platform easier. It
   // removes the need to refactor many layers of dependencies on "req", and instead just augments the top
   // level object passed from here. The layers should be refactored fully at some point, but for now
   // this works and we are still using the New Platform services for these vis data portions.
+  const client = decideLegacyClient(requestContext, dataSourceId);
+
   const reqFacade: ReqFacade = {
     requestContext,
     ...request,
     framework,
     payload: {},
     pre: {
-      indexPatternsService: new IndexPatternsFetcher(
-        requestContext.core.opensearch.legacy.client.callAsCurrentUser
-      ),
+      indexPatternsService: new IndexPatternsFetcher(client),
     },
     getUiSettingsService: () => requestContext.core.uiSettings.client,
     getSavedObjectsClient: () => requestContext.core.savedObjects.client,