Add totalMemory in config for trace graph (#1262)

Trace graph has a problem to renders large traces (with ~15K+ spans),
and gives the error "Cannot enlarge memory arrays". Need to give users
flexibility to control the totalMemory of LayoutManager used for
TraceGraph.

<!--
Please delete this comment before posting.

We appreciate your contribution to the Jaeger project! 👋🎉

Before creating a pull request, please make sure:
- Your PR is solving one problem
- You have read the guide for contributing
- See
https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING.md
- You signed all your commits (otherwise we won't be able to merge the
PR)
- See
https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md#certificate-of-origin---sign-your-work
- You added unit tests for the new functionality
- You mention in the PR description which issue it is addressing, e.g.
"Resolves #123"
-->

## Which problem is this PR solving?
- Resolves #1249

## Short description of the changes
Trace graph has a problem to renders large traces (with ~15K+ spans),
and gives the error "Cannot enlarge memory arrays". This can be fixed by
providing a larger number of memory when initializing the
`LayoutManager` in trace graph, like below:
```
// default 16MB
this.layoutManager = new LayoutManager({ totalMemory: 33554432, useDotEdges: true, splines: 'polyline' });
```
But instead of hardcoding the memory value in code, we want to give
users the flexibility to control the totalMemory of LayoutManager for
TraceGraph.

Signed-off-by: Chen Xu <chen.x@uber.com>

packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.tsx

@@ -31,6 +31,7 @@ import { TEv, TSumSpan } from './types';
 import { TDenseSpanMembers } from '../../../model/trace-dag/types';
 import TDagPlexusVertex from '../../../model/trace-dag/types/TDagPlexusVertex';
 import { TNil } from '../../../types';
+import { TraceGraphConfig } from '../../../types/config';
 
 import './TraceGraph.css';
 
@@ -39,6 +40,7 @@ type Props = {
   ev?: TEv | TNil;
   uiFind: string | TNil;
   uiFindVertexKeys: Set<string> | TNil;
+  traceGraphConfig?: TraceGraphConfig;
 };
 type State = {
   showHelp: boolean;
@@ -129,7 +131,11 @@ export default class TraceGraph extends React.PureComponent<Props, State> {
       showHelp: false,
       mode: MODE_SERVICE,
     };
-    this.layoutManager = new LayoutManager({ useDotEdges: true, splines: 'polyline' });
+    this.layoutManager = new LayoutManager({
+      totalMemory: props.traceGraphConfig?.layoutManagerMemory,
+      useDotEdges: true,
+      splines: 'polyline',
+    });
   }
 
   componentWillUnmount() {

packages/jaeger-ui/src/components/TracePage/index.test.js

@@ -793,4 +793,20 @@ describe('mapStateToProps()', () => {
       trace: { data: {}, state: fetchedState.DONE },
     });
   });
+
+  it('propagates layoutManagerMemory correctly', () => {
+    const fakeMemory = 123;
+    state.config.traceGraph = { layoutManagerMemory: fakeMemory };
+    const props = mapStateToProps(state, ownProps);
+    expect(props).toEqual({
+      id: traceID,
+      embedded,
+      archiveEnabled: false,
+      archiveTraceState: undefined,
+      searchUrl: null,
+      uiFind: undefined,
+      trace: { data: {}, state: fetchedState.DONE },
+      traceGraphConfig: { layoutManagerMemory: fakeMemory },
+    });
+  });
 });

packages/jaeger-ui/src/components/TracePage/index.tsx

@@ -58,6 +58,7 @@ import updateUiFind from '../../utils/update-ui-find';
 import TraceStatistics from './TraceStatistics/index';
 import TraceSpanView from './TraceSpanView/index';
 import TraceFlamegraph from './TraceFlamegraph/index';
+import { TraceGraphConfig } from '../../types/config';
 
 import './index.css';
 
@@ -82,6 +83,7 @@ type TReduxProps = {
   searchUrl: null | string;
   trace: FetchedTrace | TNil;
   uiFind: string | TNil;
+  traceGraphConfig?: TraceGraphConfig;
 };
 
 type TProps = TDispatchProps & TOwnProps & TReduxProps;
@@ -326,6 +328,7 @@ export class TracePageImpl extends React.PureComponent<TProps, TState> {
       id,
       uiFind,
       trace,
+      traceGraphConfig,
       location: { state: locationState },
     } = this.props;
     const { slimView, viewType, headerHeight, viewRange } = this.state;
@@ -401,6 +404,7 @@ export class TracePageImpl extends React.PureComponent<TProps, TState> {
           ev={this.traceDagEV}
           uiFind={uiFind}
           uiFindVertexKeys={graphFindMatches}
+          traceGraphConfig={traceGraphConfig}
         />
       );
     } else if (ETraceViewType.TraceStatistics === viewType && headerHeight) {
@@ -435,6 +439,7 @@ export function mapStateToProps(state: ReduxState, ownProps: TOwnProps): TReduxP
   const archiveEnabled = Boolean(config.archiveEnabled);
   const { state: locationState } = router.location;
   const searchUrl = (locationState && locationState.fromSearch) || null;
+  const { traceGraph: traceGraphConfig } = config;
 
   return {
     ...extractUiFindFromState(state),
@@ -444,6 +449,7 @@ export function mapStateToProps(state: ReduxState, ownProps: TOwnProps): TReduxP
     id,
     searchUrl,
     trace,
+    traceGraphConfig,
   };
 }
 

packages/jaeger-ui/src/constants/default-config.tsx

@@ -101,6 +101,11 @@ const defaultConfig: Config = {
     },
     docsLink: 'https://www.jaegertracing.io/docs/latest/spm/',
   },
+
+  traceGraph: {
+    layoutManagerMemory: undefined,
+  },
+
   deepDependencies: {
     menuEnabled: false,
   },

packages/jaeger-ui/src/types/config.tsx

@@ -73,6 +73,15 @@ export type MonitorConfig = {
   docsLink?: string;
 };
 
+export type TraceGraphConfig = {
+  // layoutManagerMemory controls the total memeory available for the GraphViz
+  // Emscripten module instance. The value should be a power of two.
+  // The default of 16MB should be sufficient for most cases — only consider
+  // using a larger number if you run into the error "Cannot enlarge memory arrays".
+  // See https://github.com/jaegertracing/jaeger-ui/issues/1249 for background
+  layoutManagerMemory?: number;
+};
+
 // Default values are provided in packages/jaeger-ui/src/constants/default-config.tsx
 export type Config = {
   // archiveEnabled enables the Archive Trace button in the trace view.
@@ -154,6 +163,9 @@ export type Config = {
   // monitor section controls Service Performance Monitoring tab.
   monitor?: MonitorConfig;
 
+  // traceGraph controls the trace graph under trace page
+  traceGraph?: TraceGraphConfig;
+
   // The following features are experimental / undocumented.
 
   deepDependencies?: {