[Backport 2.x] Trace Analytics support for custom sources (#2112) (#2116

) * Trace Analytics support for custom sources (#2112) * improve traces table Signed-off-by: Joshua Li <[email protected]> (cherry picked from commit 2e052f2) * improve queries Signed-off-by: Joshua Li <[email protected]> (cherry picked from commit d832ea1) * add support for custom trace indices Signed-off-by: Shenoy Pratik <[email protected]> * update mode picker Signed-off-by: Shenoy Pratik <[email protected]> * added services view for custom trace source Signed-off-by: Shenoy Pratik <[email protected]> * updated snapshots Signed-off-by: Shenoy Pratik <[email protected]> * update DSL filter tests Signed-off-by: Shenoy Pratik <[email protected]> * update app analytics snapshots Signed-off-by: Shenoy Pratik <[email protected]> * remove console.log Signed-off-by: Shenoy Pratik <[email protected]> * update service map inputs, remove commented code Signed-off-by: Shenoy Pratik <[email protected]> * remove console.log, update copy and tests Signed-off-by: Shenoy Pratik <[email protected]> --------- Signed-off-by: Shenoy Pratik <[email protected]> Co-authored-by: Joshua Li <[email protected]> (cherry picked from commit ec67ad1) * update snapshots Signed-off-by: Shenoy Pratik <[email protected]> * update snapshots from upstream changes Signed-off-by: Shenoy Pratik <[email protected]> --------- Signed-off-by: Shenoy Pratik <[email protected]>
opensearch-project · Sep 4, 2024 · 5a2bc5a · 5a2bc5a
1 parent 6031c7e
commit 5a2bc5a
Show file tree

Hide file tree

Showing 49 changed files with 4,673 additions and 1,386 deletions.
diff --git a/common/constants/trace_analytics.ts b/common/constants/trace_analytics.ts
@@ -7,14 +7,20 @@ export const JAEGER_INDEX_NAME = '*jaeger-span-*';
 export const JAEGER_SERVICE_INDEX_NAME = '*jaeger-service*';
 export const DATA_PREPPER_INDEX_NAME = 'otel-v1-apm-span-*';
 export const DATA_PREPPER_SERVICE_INDEX_NAME = 'otel-v1-apm-service-map*';
-export const TRACE_ANALYTICS_DATE_FORMAT = 'MM/DD/YYYY HH:mm:ss';
-export const TRACE_ANALYTICS_PLOTS_DATE_FORMAT = 'MMM D, YYYY HH:mm:ss';
+export const TRACE_ANALYTICS_DATE_FORMAT = 'MM/DD/YYYY HH:mm:ss.SSS';
+export const TRACE_ANALYTICS_PLOTS_DATE_FORMAT = 'MMM D, YYYY HH:mm:ss.SSS';
 export const SERVICE_MAP_MAX_NODES = 500;
 // size limit when requesting edge related queries, not necessarily the number of edges
 export const SERVICE_MAP_MAX_EDGES = 1000;
 export const TRACES_MAX_NUM = 3000;
-export const TRACE_ANALYTICS_DOCUMENTATION_LINK = 'https://opensearch.org/docs/latest/observability-plugin/trace/index/';
+export const TRACE_ANALYTICS_DOCUMENTATION_LINK =
+ 'https://opensearch.org/docs/latest/observability-plugin/trace/index/';
 
-export const TRACE_ANALYTICS_JAEGER_INDICES_ROUTE = '/api/observability/trace_analytics/jaeger_indices';
-export const TRACE_ANALYTICS_DATA_PREPPER_INDICES_ROUTE = '/api/observability/trace_analytics/data_prepper_indices';
+export const TRACE_ANALYTICS_JAEGER_INDICES_ROUTE =
+ '/api/observability/trace_analytics/jaeger_indices';
+export const TRACE_ANALYTICS_DATA_PREPPER_INDICES_ROUTE =
+ '/api/observability/trace_analytics/data_prepper_indices';
 export const TRACE_ANALYTICS_DSL_ROUTE = '/api/observability/trace_analytics/query';
+
+export const TRACE_CUSTOM_SPAN_INDEX_SETTING = 'observability:traceAnalyticsSpanIndices';
+export const TRACE_CUSTOM_SERVICE_INDEX_SETTING = 'observability:traceAnalyticsServiceIndices';
diff --git a/common/types/trace_analytics.ts b/common/types/trace_analytics.ts
@@ -52,3 +52,5 @@ export interface GraphVisEdge {
  to: number;
  color: string;
 }
+
+export type TraceAnalyticsMode = 'jaeger' | 'data_prepper' | 'custom_data_prepper';
diff --git a/public/components/.DS_Store b/public/components/.DS_Store
diff --git a/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap
diff --git a/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap
@@ -986,30 +986,16 @@ exports[`Service Config component renders empty service config 1`] = `
  />
  </EuiHorizontalRule>
  <EuiFlexGroup
- alignItems="center"
- gutterSize="s"
+ justifyContent="spaceBetween"
  >
  <div
- className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+ className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
  >
  <EuiFlexItem
- grow={false}
+ grow={7}
  >
  <div
- className="euiFlexItem euiFlexItem--flexGrowZero"
- >
- <EuiText>
- <div
- className="euiText euiText--medium"
- >
- Focus on
- </div>
- </EuiText>
- </div>
- </EuiFlexItem>
- <EuiFlexItem>
- <div
- className="euiFlexItem"
+ className="euiFlexItem euiFlexItem--flexGrow7"
  >
  <EuiCompressedFieldSearch
  compressed={true}
@@ -1021,25 +1007,36 @@ exports[`Service Config component renders empty service config 1`] = `
  onChange={[Function]}
  onSearch={[Function]}
  placeholder="Service name"
+ prepend="Focus on"
  value=""
  >
  <EuiFormControlLayout
  compressed={true}
  fullWidth={false}
  icon="search"
  isLoading={false}
+ prepend="Focus on"
  >
  <div
- className="euiFormControlLayout euiFormControlLayout--compressed"
+ className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
  >
+ <EuiFormLabel
+ className="euiFormControlLayout__prepend"
+ >
+ <label
+ className="euiFormLabel euiFormControlLayout__prepend"
+ >
+ Focus on
+ </label>
+ </EuiFormLabel>
  <div
  className="euiFormControlLayout__childrenWrapper"
  >
  <EuiValidatableControl
  isInvalid={false}
  >
  <input
- className="euiFieldSearch euiFieldSearch--compressed"
+ className="euiFieldSearch euiFieldSearch--compressed euiFieldSearch--inGroup"
  onChange={[Function]}
  onKeyUp={[Function]}
  placeholder="Service name"
@@ -1196,10 +1193,10 @@ exports[`Service Config component renders empty service config 1`] = `
  </div>
  </EuiPanel>
  <EuiSpacer
- size="xl"
+ size="m"
  >
  <div
- className="euiSpacer euiSpacer--xl"
+ className="euiSpacer euiSpacer--m"
  />
  </EuiSpacer>
  </ServiceMap>
@@ -2215,30 +2212,16 @@ exports[`Service Config component renders with one service selected 1`] = `
  />
  </EuiHorizontalRule>
  <EuiFlexGroup
- alignItems="center"
- gutterSize="s"
+ justifyContent="spaceBetween"
  >
  <div
- className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+ className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
  >
  <EuiFlexItem
- grow={false}
+ grow={7}
  >
  <div
- className="euiFlexItem euiFlexItem--flexGrowZero"
- >
- <EuiText>
- <div
- className="euiText euiText--medium"
- >
- Focus on
- </div>
- </EuiText>
- </div>
- </EuiFlexItem>
- <EuiFlexItem>
- <div
- className="euiFlexItem"
+ className="euiFlexItem euiFlexItem--flexGrow7"
  >
  <EuiCompressedFieldSearch
  compressed={true}
@@ -2250,25 +2233,36 @@ exports[`Service Config component renders with one service selected 1`] = `
  onChange={[Function]}
  onSearch={[Function]}
  placeholder="Service name"
+ prepend="Focus on"
  value=""
  >
  <EuiFormControlLayout
  compressed={true}
  fullWidth={false}
  icon="search"
  isLoading={false}
+ prepend="Focus on"
  >
  <div
- className="euiFormControlLayout euiFormControlLayout--compressed"
+ className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
  >
+ <EuiFormLabel
+ className="euiFormControlLayout__prepend"
+ >
+ <label
+ className="euiFormLabel euiFormControlLayout__prepend"
+ >
+ Focus on
+ </label>
+ </EuiFormLabel>
  <div
  className="euiFormControlLayout__childrenWrapper"
  >
  <EuiValidatableControl
  isInvalid={false}
  >
  <input
- className="euiFieldSearch euiFieldSearch--compressed"
+ className="euiFieldSearch euiFieldSearch--compressed euiFieldSearch--inGroup"
  onChange={[Function]}
  onKeyUp={[Function]}
  placeholder="Service name"
@@ -2425,10 +2419,10 @@ exports[`Service Config component renders with one service selected 1`] = `
  </div>
  </EuiPanel>
  <EuiSpacer
- size="xl"
+ size="m"
  >
  <div
- className="euiSpacer euiSpacer--xl"
+ className="euiSpacer euiSpacer--m"
  />
  </EuiSpacer>
  </ServiceMap>

diff --git a/public/components/application_analytics/components/application.tsx b/public/components/application_analytics/components/application.tsx
@@ -314,8 +314,6 @@ export function Application(props: AppDetailProps) {
  setSelectedTab(TAB_TRACE_ID);
  };
 
- const traceIdColumnAction = (item: any) => openTraceFlyout(item);
-
  const getTrace = () => {
  return (
  <>
@@ -325,7 +323,7 @@ export function Application(props: AppDetailProps) {
  page="app"
  parentBreadcrumb={parentBreadcrumbs[0]}
  childBreadcrumbs={childBreadcrumbs}
- traceIdColumnAction={traceIdColumnAction}
+ openTraceFlyout={openTraceFlyout}
  startTime={appStartTime}
  endTime={appEndTime}
  setStartTime={setStartTimeForApp}

diff --git a/...c/components/application_analytics/components/flyout_components/service_detail_flyout.tsx b/...c/components/application_analytics/components/flyout_components/service_detail_flyout.tsx
@@ -133,7 +133,7 @@ export function ServiceDetailFlyout(props: ServiceFlyoutProps) {
  handleServiceViewRequest(serviceName, http, serviceDSL, setFields, mode);
  handleServiceMapRequest(http, serviceDSL, mode, '', setServiceMap, serviceName);
  const spanDSL = filtersToDsl(mode, filters, query, startTime, endTime, 'app', appConfigs);
- spanDSL.query.bool.must.push({
+ spanDSL.query.bool.filter.push({
  term: {
  serviceName,
  },

diff --git a/public/components/application_analytics/components/flyout_components/trace_detail_render.tsx b/public/components/application_analytics/components/flyout_components/trace_detail_render.tsx
@@ -3,27 +3,32 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiText, EuiSpacer, EuiHorizontalRule, EuiCodeBlock } from '@elastic/eui';
+import { EuiCodeBlock, EuiHorizontalRule, EuiSpacer, EuiText } from '@elastic/eui';
 import React, { useEffect, useMemo, useState } from 'react';
+import { HttpStart } from '../../../../../../../src/core/public';
+import { TraceAnalyticsMode } from '../../../../../common/types/trace_analytics';
 import { ServiceBreakdownPanel } from '../../../trace_analytics/components/traces/service_breakdown_panel';
 import { SpanDetailPanel } from '../../../trace_analytics/components/traces/span_detail_panel';
 import {
- handleTraceViewRequest,
- handleServicesPieChartRequest,
  handlePayloadRequest,
+ handleServicesPieChartRequest,
+ handleTraceViewRequest,
 } from '../../../trace_analytics/requests/traces_request_handler';
-import { HttpStart } from '../../../../../../../src/core/public';
 import { getListItem } from '../../helpers/utils';
-import { TraceAnalyticsMode } from '../../../../../public/components/trace_analytics/home';
 
 interface TraceDetailRenderProps {
  traceId: string;
  http: HttpStart;
  openSpanFlyout: (spanId: string) => void;
- mode : TraceAnalyticsMode
+ mode: TraceAnalyticsMode;
 }
 
-export const TraceDetailRender = ({ traceId, http, openSpanFlyout, mode }: TraceDetailRenderProps) => {
+export const TraceDetailRender = ({
+ traceId,
+ http,
+ openSpanFlyout,
+ mode,
+}: TraceDetailRenderProps) => {
  const [fields, setFields] = useState<any>({});
  const [serviceBreakdownData, setServiceBreakdownData] = useState([]);
  const [payloadData, setPayloadData] = useState('');

diff --git a/...onents/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap b/...onents/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap
@@ -1064,4 +1064,4 @@ exports[`Search bar components renders search bar 1`] = `
  </div>
  </EuiFlexGroup>
 </ForwardRef>
-`;
+`;
diff --git a/public/components/trace_analytics/components/common/__tests__/helper_functions.test.tsx b/public/components/trace_analytics/components/common/__tests__/helper_functions.test.tsx
@@ -5,7 +5,6 @@
 
 import { configure, mount, shallow } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
-import { TraceAnalyticsMode } from 'public/components/trace_analytics/home';
 import React from 'react';
 import { TEST_SERVICE_MAP, TEST_SERVICE_MAP_GRAPH } from '../../../../../../test/constants';
 import {
@@ -38,7 +37,9 @@ describe('Helper functions', () => {
 
  it('renders no match and missing configuration messages', () => {
  const noMatchMessage = shallow(<NoMatchMessage size="s" />);
- const missingConfigurationMessage = shallow(<MissingConfigurationMessage mode='data_prepper'/>)
+ const missingConfigurationMessage = shallow(
+ <MissingConfigurationMessage mode="data_prepper" />
+ );
  expect(noMatchMessage).toMatchSnapshot();
  expect(missingConfigurationMessage).toMatchSnapshot();
  });
@@ -137,16 +138,16 @@ describe('Helper functions', () => {
  );
  const existsDSL = getTestDslFromFilters();
  expect(JSON.stringify(existsDSL)).toEqual(
- '{"query":{"bool":{"must":[{"range":{"startTime":{"gte":"now-5m","lte":"now"}}},{"query_string":{"query":"order"}},{"exists":{"field":"traceGroup"}}],"filter":[],"should":[],"must_not":[]}},"custom":{"timeFilter":[{"range":{"startTime":{"gte":"now-5m","lte":"now"}}}],"serviceNames":[],"serviceNamesExclude":[],"traceGroup":[],"traceGroupExclude":[],"percentiles":{"query":{"bool":{"should":[]}}}}}'
+ '{"query":{"bool":{"must":[{"exists":{"field":"traceGroup"}}],"filter":[{"range":{"startTime":{"gte":"now-5m","lte":"now"}}},{"query_string":{"query":"order"}}],"should":[],"must_not":[]}},"custom":{"timeFilter":[{"range":{"startTime":{"gte":"now-5m","lte":"now"}}}],"serviceNames":[],"serviceNamesExclude":[],"traceGroup":[],"traceGroupExclude":[],"percentiles":{"query":{"bool":{"should":[]}}}}}'
  );
 
  const isDSL = getTestDslFromFilters('traceGroup', 'is');
  expect(JSON.stringify(isDSL)).toEqual(
- '{"query":{"bool":{"must":[{"range":{"startTime":{"gte":"now-5m","lte":"now"}}},{"query_string":{"query":"order"}},{"term":{"traceGroup":{"from":"100","to":"∞"}}}],"filter":[],"should":[],"must_not":[]}},"custom":{"timeFilter":[{"range":{"startTime":{"gte":"now-5m","lte":"now"}}}],"serviceNames":[],"serviceNamesExclude":[],"traceGroup":[],"traceGroupExclude":[],"percentiles":{"query":{"bool":{"should":[]}}}}}'
+ '{"query":{"bool":{"must":[{"term":{"traceGroup":{"from":"100","to":"∞"}}}],"filter":[{"range":{"startTime":{"gte":"now-5m","lte":"now"}}},{"query_string":{"query":"order"}}],"should":[],"must_not":[]}},"custom":{"timeFilter":[{"range":{"startTime":{"gte":"now-5m","lte":"now"}}}],"serviceNames":[],"serviceNamesExclude":[],"traceGroup":[],"traceGroupExclude":[],"percentiles":{"query":{"bool":{"should":[]}}}}}'
  );
  const isBetweenDSL = getTestDslFromFilters('durationInNanos', 'is between');
  expect(JSON.stringify(isBetweenDSL)).toEqual(
- `{"query":{"bool":{"must":[{"range":{"startTime":{"gte":"now-5m","lte":"now"}}},{"query_string":{"query":"order"}},{"range":{"durationInNanos":{"gte":"100"}}}],"filter":[],"should":[],"must_not":[]}},"custom":{"timeFilter":[{"range":{"startTime":{"gte":"now-5m","lte":"now"}}}],"serviceNames":[],"serviceNamesExclude":[],"traceGroup":[],"traceGroupExclude":[],"percentiles":{"query":{"bool":{"should":[]}}}}}`
+ '{"query":{"bool":{"must":[{"range":{"durationInNanos":{"gte":"100"}}}],"filter":[{"range":{"startTime":{"gte":"now-5m","lte":"now"}}},{"query_string":{"query":"order"}}],"should":[],"must_not":[]}},"custom":{"timeFilter":[{"range":{"startTime":{"gte":"now-5m","lte":"now"}}}],"serviceNames":[],"serviceNamesExclude":[],"traceGroup":[],"traceGroupExclude":[],"percentiles":{"query":{"bool":{"should":[]}}}}}'
  );
 
  const customDSL = filtersToDsl(
@@ -166,7 +167,7 @@ describe('Helper functions', () => {
  'now'
  );
  expect(JSON.stringify(customDSL)).toEqual(
- `{"query":{"bool":{"must":[{"range":{"startTime":{"gte":"now-5m","lte":"now"}}},{"query_string":{"query":"order"}}],"filter":[],"should":["test"],"must_not":[],"minimum_should_match":1}},"custom":{"timeFilter":[{"range":{"startTime":{"gte":"now-5m","lte":"now"}}}],"serviceNames":[],"serviceNamesExclude":[],"traceGroup":[],"traceGroupExclude":[],"percentiles":{"query":{"bool":{"should":["test"],"minimum_should_match":1}}}}}`
+ '{"query":{"bool":{"must":[],"filter":[{"range":{"startTime":{"gte":"now-5m","lte":"now"}}},{"query_string":{"query":"order"}}],"should":["test"],"must_not":[],"minimum_should_match":1}},"custom":{"timeFilter":[{"range":{"startTime":{"gte":"now-5m","lte":"now"}}}],"serviceNames":[],"serviceNamesExclude":[],"traceGroup":[],"traceGroupExclude":[],"percentiles":{"query":{"bool":{"should":["test"],"minimum_should_match":1}}}}}'
  );
  });
 });