add max node limit

Signed-off-by: Hariom Gupta <guptahariom03082003@gmail.com>

Author: hari45678

packages/jaeger-ui/src/components/DependencyGraph/DAG.test.js

@@ -17,6 +17,7 @@ import ShallowRenderer from 'react-test-renderer/shallow';
 import { render, screen } from '@testing-library/react';
 import { LayoutManager } from '@jaegertracing/plexus';
 import DAG, { renderNode } from './DAG';
+import { DAG_MAX_NUM_SERVICES } from '../../constants';
 
 // mock canvas API (we don't care about canvas results)
 
@@ -186,6 +187,22 @@ describe('<DAG>', () => {
     expect(element.props.children.props.vertices.length).toBe(0);
     expect(element.props.children.props.edges.length).toBe(0);
   });
+
+  it('shows error message when too many services to render', () => {
+    const serviceCalls = Array.from({ length: DAG_MAX_NUM_SERVICES + 1 }, (_, i) => ({
+      parent: `service-${i}`,
+      child: `service-${i + 1}`,
+      callCount: 1,
+    }));
+
+    renderer.render(<DAG serviceCalls={serviceCalls} selectedLayout="dot" />);
+    const element = renderer.getRenderOutput();
+
+    expect(element.type).toBe('div');
+    expect(element.props.className).toBe('DAG');
+    expect(element.props.children.type).toBe('div');
+    expect(element.props.children.props.className).toBe('DAG--error');
+  });
 });
 
 describe('renderNode', () => {

packages/jaeger-ui/src/components/DependencyGraph/DAG.tsx

@@ -19,6 +19,7 @@ import { TEdge, TVertex } from '@jaegertracing/plexus/lib/types';
 import { TLayoutOptions } from '@jaegertracing/plexus/lib/LayoutManager/types';
 
 import './dag.css';
+import { DAG_MAX_NUM_SERVICES } from '../../constants';
 
 type TServiceCall = {
   parent: string;
@@ -134,6 +135,8 @@ export default function DAG({ serviceCalls = [], selectedLayout, selectedDepth,
     [serviceCalls, selectedService, selectedDepth]
   );
 
+  const forceFocalServiceSelection = data.nodes.length > DAG_MAX_NUM_SERVICES;
+
   const layoutManager = React.useMemo(() => {
     const config: TLayoutOptions =
       selectedLayout === 'dot'
@@ -164,6 +167,16 @@ export default function DAG({ serviceCalls = [], selectedLayout, selectedDepth,
     };
   }, [layoutManager]);
 
+  if (forceFocalServiceSelection) {
+    return (
+      <div className="DAG">
+        <div className="DAG--error">
+          {`Too many services to render (${data.nodes.length}). Please select a focal service or reduce the depth.`}
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="DAG">
       <Digraph<TVertex>

packages/jaeger-ui/src/components/DependencyGraph/dag.css

@@ -50,3 +50,7 @@
   color: #7f7f7f;
   background-color: #fafafa;
 }
+
+.DAG--error {
+  margin: 10px;
+}

packages/jaeger-ui/src/constants/index.tsx

@@ -17,6 +17,9 @@ export const TOP_NAV_HEIGHT = 46;
 // Max number of services that "Hierarchical Layout" with "dot" layout engine can can render
 // Can be configured with "dependencies.dagMaxNumServices"
 export const FALLBACK_DAG_MAX_NUM_SERVICES = 500;
+
+// Max number of services that layouts can render without selecting a focal service
+export const DAG_MAX_NUM_SERVICES = 1200;
 export const FALLBACK_TRACE_NAME = '<trace-without-root-span>';
 
 export const FETCH_DONE = 'FETCH_DONE';