MDS Support for trace analytics (#1752) [manual backport]

opensearch_dashboards.json

@@ -18,12 +18,6 @@
     "urlForwarding",
     "visualizations"
   ],
-  "optionalPlugins": [
-    "managementOverview",
-    "assistantDashboards",
-    "securityDashboards"
-  ],
-  "configPath": [
-    "observability"
-  ]
-}
+  "optionalPlugins": ["managementOverview", "assistantDashboards", "securityDashboards", "dataSource", "dataSourceManagement"],
+  "configPath": ["observability"]
+}

public/components/app.tsx

@@ -7,29 +7,34 @@
 import { QueryManager } from 'common/query_manager';
 import React from 'react';
 import { Provider } from 'react-redux';
-import { CoreStart } from '../../../../src/core/public';
+import { CoreStart, MountPoint } from '../../../../src/core/public';
+import { DataSourceManagementPluginSetup } from '../../../../src/plugins/data_source_management/public';
 import { observabilityID, observabilityTitle } from '../../common/constants/shared';
 import { store } from '../framework/redux/store';
 import { AppPluginStartDependencies } from '../types';
 import { Home as ApplicationAnalyticsHome } from './application_analytics/home';
-import { Home as IntegrationsHome } from './integrations/home';
 import { MetricsListener } from './common/metrics_listener';
 import { Home as CustomPanelsHome } from './custom_panels/home';
+import { Home as DataConnectionsHome } from './datasources/home';
 import { EventAnalytics } from './event_analytics';
+import { Home as IntegrationsHome } from './integrations/home';
 import { Home as MetricsHome } from './metrics/index';
 import { Main as NotebooksHome } from './notebooks/components/main';
 import { Home as TraceAnalyticsHome } from './trace_analytics/home';
-import { Home as DataConnectionsHome } from './datasources/home';
 
 interface ObservabilityAppDeps {
   CoreStartProp: CoreStart;
   DepsStart: AppPluginStartDependencies;
   pplService: any;
   dslService: any;
   savedObjects: any;
   timestampUtils: any;
   queryManager: QueryManager;
   startPage: string;
+  dataSourceEnabled: boolean;
+  dataSourceManagement: DataSourceManagementPluginSetup;
+  setActionMenu: (menuMount: MountPoint | undefined) => void;
+  savedObjectsMDSClient: CoreStart['savedObjects'];
 }
 
 // for cypress to test redux store
@@ -58,8 +63,12 @@
   queryManager,
   startPage,
   dataSourcePluggables,
+  dataSourceManagement,
+  setActionMenu,
+  dataSourceEnabled,
+  savedObjectsMDSClient,
 }: ObservabilityAppDeps) => {
   const { chrome, http, notifications, savedObjects: coreSavedObjects } = CoreStartProp;
   const parentBreadcrumb = {
     text: observabilityTitle,
     href: `${observabilityID}#/`,
@@ -89,6 +98,10 @@
             parentBreadcrumbs={[parentBreadcrumb]}
             setBreadcrumbs={chrome.setBreadcrumbs}
             dataSourcePluggables={dataSourcePluggables}
+            dataSourceManagement={dataSourceManagement}
+            dataSourceEnabled={dataSourceEnabled}
+            setActionMenu={setActionMenu}
+            savedObjectsMDSClient={savedObjectsMDSClient}
           />
         </MetricsListener>
       </I18nProvider>

public/components/application_analytics/components/config_components/service_config.tsx

@@ -15,15 +15,14 @@
   EuiText,
 } from '@elastic/eui';
 import DSLService from 'public/services/requests/dsl';
-import React, { useState } from 'react';
-import { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
+import { OptionType } from '../../../../../common/types/application_analytics';
 import { FilterType } from '../../../trace_analytics/components/common/filters/filters';
 import { ServiceObject } from '../../../trace_analytics/components/common/plots/service_map';
 import { ServiceMap } from '../../../trace_analytics/components/services';
 import { handleServiceMapRequest } from '../../../trace_analytics/requests/services_request_handler';
-import { AppAnalyticsComponentDeps } from '../../home';
-import { OptionType } from '../../../../../common/types/application_analytics';
 import { getClearModal } from '../../helpers/modal_containers';
+import { AppAnalyticsComponentDeps } from '../../home';
 
 interface ServiceConfigProps extends AppAnalyticsComponentDeps {
   dslService: DSLService;
@@ -50,7 +49,7 @@
   const [modalLayout, setModalLayout] = useState(<EuiOverlayMask />);
 
   useEffect(() => {
-    handleServiceMapRequest(http, dslService, mode, setServiceMap);
+    handleServiceMapRequest(http, dslService, mode, '', setServiceMap);
   }, []);
 
   useEffect(() => {
@@ -79,7 +78,7 @@
     setFiltersWithStorage(newFilters);
   };
 
   const onServiceChange = (newServices: any) => {
     const serviceFilters = newServices.map((option: OptionType) => {
       return {
         field: 'serviceName',

public/components/application_analytics/components/flyout_components/service_detail_flyout.tsx

@@ -4,7 +4,6 @@
  */
 /* eslint-disable react-hooks/exhaustive-deps */
 
-import _ from 'lodash';
 import {
   EuiFlyout,
   EuiFlyoutBody,
@@ -14,19 +13,20 @@
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
+import _ from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
-import {
-  handleServiceMapRequest,
-  handleServiceViewRequest,
-} from '../../../../../public/components/trace_analytics/requests/services_request_handler';
 import {
   filtersToDsl,
   processTimeStamp,
 } from '../../../../../public/components/trace_analytics/components/common/helper_functions';
-import { ServiceMap } from '../../../../../public/components/trace_analytics/components/services';
 import { ServiceObject } from '../../../../../public/components/trace_analytics/components/common/plots/service_map';
+import { ServiceMap } from '../../../../../public/components/trace_analytics/components/services';
 import { SpanDetailTable } from '../../../../../public/components/trace_analytics/components/traces/span_detail_table';
 import { TraceAnalyticsComponentDeps } from '../../../../../public/components/trace_analytics/home';
+import {
+  handleServiceMapRequest,
+  handleServiceViewRequest,
+} from '../../../../../public/components/trace_analytics/requests/services_request_handler';
 import { getListItem } from '../../helpers/utils';
 
 interface ServiceFlyoutProps extends TraceAnalyticsComponentDeps {
@@ -49,10 +49,10 @@
     openSpanFlyout,
     mode,
   } = props;
   const [fields, setFields] = useState<any>({});
   const [serviceMap, setServiceMap] = useState<ServiceObject>({});
   const [total, setTotal] = useState(0);
   const [DSL, setDSL] = useState<any>({});
   const [serviceMapIdSelected, setServiceMapIdSelected] = useState<
     'latency' | 'error_rate' | 'throughput'
   >('latency');
@@ -131,7 +131,7 @@
       appConfigs
     );
     handleServiceViewRequest(serviceName, http, serviceDSL, setFields, mode);
-    handleServiceMapRequest(http, serviceDSL, mode, setServiceMap, serviceName);
+    handleServiceMapRequest(http, serviceDSL, mode, '', setServiceMap, serviceName);
     const spanDSL = filtersToDsl(mode, filters, query, startTime, endTime, 'app', appConfigs);
     spanDSL.query.bool.must.push({
       term: {

public/components/index.tsx

@@ -3,25 +3,30 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { QueryManager } from 'common/query_manager';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { QueryManager } from 'common/query_manager';
 import { AppMountParameters, CoreStart } from '../../../../src/core/public';
-import { AppPluginStartDependencies, SetupDependencies } from '../types';
+import { DataSourceManagementPluginSetup } from '../../../../src/plugins/data_source_management/public';
+import { AppPluginStartDependencies } from '../types';
 import { App } from './app';
 
 export const Observability = (
   CoreStartProp: CoreStart,
   DepsStart: AppPluginStartDependencies,
   AppMountParametersProp: AppMountParameters,
   pplService: any,
   dslService: any,
   savedObjects: any,
   timestampUtils: any,
   queryManager: QueryManager,
   startPage: string,
-  dataSourcePluggables
+  dataSourcePluggables,
+  dataSourceManagement: DataSourceManagementPluginSetup,
+  savedObjectsMDSClient: CoreStart['savedObjects']
 ) => {
+  const { setHeaderActionMenu } = AppMountParametersProp;
+  const { dataSource } = DepsStart;
   ReactDOM.render(
     <App
       CoreStartProp={CoreStartProp}
@@ -33,6 +38,10 @@
       queryManager={queryManager}
       startPage={startPage}
       dataSourcePluggables={dataSourcePluggables}
+      dataSourceManagement={dataSourceManagement}
+      setActionMenu={setHeaderActionMenu}
+      dataSourceEnabled={!!dataSource}
+      savedObjectsMDSClient={savedObjectsMDSClient}
     />,
     AppMountParametersProp.element
   );

public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap

@@ -149,6 +149,14 @@ exports[`Dashboard component renders dashboard 1`] = `
     }
   }
   dataPrepperIndicesExist={true}
+  dataSourceMDSId={
+    Array [
+      Object {
+        "id": "",
+        "label": "",
+      },
+    ]
+  }
   endTime="now"
   filters={Array []}
   http={[MockFunction]}
@@ -479,6 +487,14 @@ exports[`Dashboard component renders dashboard 1`] = `
       }
     }
     dataPrepperIndicesExist={true}
+    dataSourceMDSId={
+      Array [
+        Object {
+          "id": "",
+          "label": "",
+        },
+      ]
+    }
     endTime="now"
     filters={Array []}
     http={[MockFunction]}
@@ -1261,6 +1277,14 @@ exports[`Dashboard component renders empty dashboard 1`] = `
     }
   }
   dataPrepperIndicesExist={true}
+  dataSourceMDSId={
+    Array [
+      Object {
+        "id": "",
+        "label": "",
+      },
+    ]
+  }
   endTime="now"
   filters={Array []}
   http={[MockFunction]}
@@ -1590,6 +1614,14 @@ exports[`Dashboard component renders empty dashboard 1`] = `
       }
     }
     dataPrepperIndicesExist={true}
+    dataSourceMDSId={
+      Array [
+        Object {
+          "id": "",
+          "label": "",
+        },
+      ]
+    }
     endTime="now"
     filters={Array []}
     http={[MockFunction]}
@@ -2372,6 +2404,14 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
     }
   }
   dataPrepperIndicesExist={false}
+  dataSourceMDSId={
+    Array [
+      Object {
+        "id": "",
+        "label": "",
+      },
+    ]
+  }
   endTime="now"
   filters={Array []}
   http={[MockFunction]}
@@ -2703,6 +2743,14 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
       }
     }
     dataPrepperIndicesExist={false}
+    dataSourceMDSId={
+      Array [
+        Object {
+          "id": "",
+          "label": "",
+        },
+      ]
+    }
     endTime="now"
     filters={Array []}
     http={[MockFunction]}

public/components/trace_analytics/components/dashboard/__tests__/dashboard.test.tsx

@@ -7,8 +7,7 @@
 import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
 import { Dashboard } from '..';
-import { CoreStart } from '../../../../../../../../src/core/public';
 import { coreStartMock } from '../../../../../../test/__mocks__/coreMocks';
 
 describe('Dashboard component', () => {
   configure({ adapter: new Adapter() });
@@ -56,6 +55,7 @@
         mode="data_prepper"
         dataPrepperIndicesExist={true}
         modes={modes}
+        dataSourceMDSId={[{ id: '', label: '' }]}
       />
     );
 
@@ -102,6 +102,7 @@
         dataPrepperIndicesExist={false}
         jaegerIndicesExist={true}
         modes={modes}
+        dataSourceMDSId={[{ id: '', label: '' }]}
       />
     );
 
@@ -147,6 +148,7 @@
         mode="data_prepper"
         dataPrepperIndicesExist={true}
         modes={modes}
+        dataSourceMDSId={[{ id: '', label: '' }]}
       />
     );
 

public/components/trace_analytics/components/dashboard/dashboard.tsx

@@ -6,7 +6,8 @@
 import { EuiBreadcrumb, EuiTitle } from '@elastic/eui';
 import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
 import React from 'react';
-import { TraceAnalyticsComponentDeps, TraceAnalyticsMode } from '../../home';
+import { DataSourceOption } from '../../../../../../../src/plugins/data_source_management/public/components/data_source_menu/types';
+import { TraceAnalyticsComponentDeps } from '../../home';
 import { DashboardContent } from './dashboard_content';
 import { DataSourcePicker } from './mode_picker';
 
@@ -20,6 +21,7 @@ export interface DashboardProps extends TraceAnalyticsComponentDeps {
     text?: React.ReactChild | undefined,
     side?: string | undefined
   ) => void;
+  dataSourceMDSId: DataSourceOption[];
 }
 
 export function Dashboard(props: DashboardProps) {