feat(frontend): hide dag view for big traces (#3606)

kubeshop · Feb 8, 2024 · d713747 · d713747
1 parent b4c358b
commit d713747
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 14 deletions.
diff --git a/web/src/components/RunDetailTest/TestPanel.tsx b/web/src/components/RunDetailTest/TestPanel.tsx
@@ -1,7 +1,7 @@
 import {Tabs} from 'antd';
 import {useCallback, useState} from 'react';
 import {useSearchParams} from 'react-router-dom';
-import {VisualizationType} from 'components/RunDetailTrace/RunDetailTrace';
+import {VisualizationType, getIsDAGDisabled} from 'components/RunDetailTrace/RunDetailTrace';
 import TestOutputs from 'components/TestOutputs';
 import TestOutputForm from 'components/TestOutputForm/TestOutputForm';
 import TestResults from 'components/TestResults';
@@ -56,7 +56,11 @@ const TestPanel = ({run, testId, runEvents}: IProps) => {
   const {
     test: {skipTraceCollection},
   } = useTest();
-  const [visualizationType, setVisualizationType] = useState(VisualizationType.Dag);
+
+  const isDAGDisabled = getIsDAGDisabled(run?.trace?.spans?.length);
+  const [visualizationType, setVisualizationType] = useState(() =>
+    isDAGDisabled ? VisualizationType.Timeline : VisualizationType.Dag
+  );
 
   const handleClose = useCallback(() => {
     onSetFocusedSpan('');
@@ -111,17 +115,20 @@ const TestPanel = ({run, testId, runEvents}: IProps) => {
           <S.SwitchContainer>
             {run.state === TestState.FINISHED && (
               <Switch
+                isDAGDisabled={isDAGDisabled}
                 onChange={type => {
                   TestRunAnalytics.onSwitchDiagramView(type);
                   setVisualizationType(type);
                 }}
                 type={visualizationType}
+                totalSpans={run?.trace?.spans?.length}
               />
             )}
           </S.SwitchContainer>
 
           {skipTraceCollection && <SkipTraceCollectionInfo runId={run.id} testId={testId} />}
           <Visualization
+            isDAGDisabled={isDAGDisabled}
             runEvents={runEvents}
             runState={run.state}
             spans={run?.trace?.spans ?? []}

diff --git a/web/src/components/RunDetailTest/Visualization.tsx b/web/src/components/RunDetailTest/Visualization.tsx
@@ -20,13 +20,14 @@ import TestRunService from 'services/TestRun.service';
 import {TTestRunState} from 'types/TestRun.types';
 
 export interface IProps {
+  isDAGDisabled: boolean;
   runEvents: TestRunEvent[];
   runState: TTestRunState;
   spans: Span[];
   type: VisualizationType;
 }
 
-const Visualization = ({runEvents, runState, spans, type}: IProps) => {
+const Visualization = ({isDAGDisabled, runEvents, runState, spans, type}: IProps) => {
   const dispatch = useAppDispatch();
   const edges = useAppSelector(DAGSelectors.selectEdges);
   const nodes = useAppSelector(DAGSelectors.selectNodes);
@@ -35,8 +36,9 @@ const Visualization = ({runEvents, runState, spans, type}: IProps) => {
   const {isOpen} = useTestSpecForm();
 
   useEffect(() => {
+    if (isDAGDisabled) return;
     dispatch(initNodes({spans}));
-  }, [dispatch, spans]);
+  }, [dispatch, isDAGDisabled, spans]);
 
   useEffect(() => {
     if (selectedSpan) return;

diff --git a/web/src/components/RunDetailTrace/RunDetailTrace.tsx b/web/src/components/RunDetailTrace/RunDetailTrace.tsx
@@ -1,4 +1,5 @@
 import ResizablePanels from 'components/ResizablePanels';
+import {MAX_DAG_NODES} from 'constants/Visualization.constants';
 import TestRun from 'models/TestRun.model';
 import TestRunEvent from 'models/TestRunEvent.model';
 import * as S from './RunDetailTrace.styled';
@@ -19,6 +20,10 @@ export enum VisualizationType {
   Timeline,
 }
 
+export function getIsDAGDisabled(totalSpans: number = 0): boolean {
+  return totalSpans > MAX_DAG_NODES;
+}
+
 const RunDetailTrace = ({run, runEvents, testId, skipTraceCollection}: IProps) => {
   return (
     <S.Container>

diff --git a/web/src/components/RunDetailTrace/TracePanel.tsx b/web/src/components/RunDetailTrace/TracePanel.tsx
@@ -4,7 +4,7 @@ import TraceAnalyticsService from 'services/Analytics/TestRunAnalytics.service';
 import {TestState} from 'constants/TestRun.constants';
 import TestRunEvent from 'models/TestRunEvent.model';
 import Search from './Search';
-import {VisualizationType} from './RunDetailTrace';
+import {VisualizationType, getIsDAGDisabled} from './RunDetailTrace';
 import * as S from './RunDetailTrace.styled';
 import Switch from '../Visualization/components/Switch/Switch';
 import Visualization from './Visualization';
@@ -19,7 +19,10 @@ type TProps = {
 };
 
 const TracePanel = ({run, testId, runEvents, skipTraceCollection}: TProps) => {
-  const [visualizationType, setVisualizationType] = useState(VisualizationType.Dag);
+  const isDAGDisabled = getIsDAGDisabled(run?.trace?.spans?.length);
+  const [visualizationType, setVisualizationType] = useState(() =>
+    isDAGDisabled ? VisualizationType.Timeline : VisualizationType.Dag
+  );
 
   return (
     <FillPanel>
@@ -34,15 +37,18 @@ const TracePanel = ({run, testId, runEvents, skipTraceCollection}: TProps) => {
             <S.SwitchContainer>
               {run.state === TestState.FINISHED && (
                 <Switch
+                  isDAGDisabled={isDAGDisabled}
                   onChange={type => {
                     TraceAnalyticsService.onSwitchDiagramView(type);
                     setVisualizationType(type);
                   }}
                   type={visualizationType}
+                  totalSpans={run?.trace?.spans?.length}
                 />
               )}
             </S.SwitchContainer>
             <Visualization
+              isDAGDisabled={isDAGDisabled}
               runEvents={runEvents}
               runState={run.state}
               spans={run?.trace?.spans ?? []}

diff --git a/web/src/components/RunDetailTrace/Visualization.tsx b/web/src/components/RunDetailTrace/Visualization.tsx
@@ -17,13 +17,14 @@ import Timeline from '../Visualization/components/Timeline';
 import {VisualizationType} from './RunDetailTrace';
 
 interface IProps {
+  isDAGDisabled: boolean;
   runEvents: TestRunEvent[];
   runState: TTestRunState;
   spans: Span[];
   type: VisualizationType;
 }
 
-const Visualization = ({runEvents, runState, spans, type}: IProps) => {
+const Visualization = ({isDAGDisabled, runEvents, runState, spans, type}: IProps) => {
   const dispatch = useAppDispatch();
   const edges = useAppSelector(TraceSelectors.selectEdges);
   const matchedSpans = useAppSelector(TraceSelectors.selectMatchedSpans);
@@ -33,8 +34,9 @@ const Visualization = ({runEvents, runState, spans, type}: IProps) => {
 
   // TODO: Trace will never change, we can calculate this once and then keep using it
   useEffect(() => {
+    if (isDAGDisabled) return;
     dispatch(initNodes({spans}));
-  }, [dispatch, spans]);
+  }, [dispatch, isDAGDisabled, spans]);
 
   useEffect(() => {
     if (selectedSpan) return;

diff --git a/web/src/components/Visualization/components/Switch/Switch.styled.ts b/web/src/components/Visualization/components/Switch/Switch.styled.ts
@@ -11,10 +11,13 @@ export const Container = styled.div`
   padding: 7px;
 `;
 
-export const DAGIcon = styled(ClusterOutlined)<{$isSelected?: boolean}>`
+export const DAGIcon = styled(ClusterOutlined)<{$isDisabled?: boolean; $isSelected?: boolean}>`
   color: ${({$isSelected = false, theme}) => ($isSelected ? theme.color.primary : theme.color.textSecondary)};
-  cursor: pointer;
   font-size: ${({theme}) => theme.size.xl};
+
+  && {
+    cursor: ${({$isDisabled}) => ($isDisabled ? 'not-allowed' : 'pointer')};
+  }
 `;
 
 export const TimelineIcon = styled(BarsOutlined)<{$isSelected?: boolean}>`

diff --git a/web/src/components/Visualization/components/Switch/Switch.tsx b/web/src/components/Visualization/components/Switch/Switch.tsx
@@ -1,17 +1,30 @@
 import {Tooltip} from 'antd';
-
 import {VisualizationType} from 'components/RunDetailTrace/RunDetailTrace';
+import {MAX_DAG_NODES} from 'constants/Visualization.constants';
 import * as S from './Switch.styled';
 
 interface IProps {
+  isDAGDisabled: boolean;
   onChange(type: VisualizationType): void;
   type: VisualizationType;
+  totalSpans?: number;
 }
 
-const Switch = ({onChange, type}: IProps) => (
+const Switch = ({isDAGDisabled, onChange, type, totalSpans = 0}: IProps) => (
   <S.Container>
-    <Tooltip title="Graph view" placement="right">
-      <S.DAGIcon $isSelected={type === VisualizationType.Dag} onClick={() => onChange(VisualizationType.Dag)} />
+    <Tooltip
+      title={
+        isDAGDisabled
+          ? `The Graph view has a limit of ${MAX_DAG_NODES} spans. Your current trace has ${totalSpans} spans.`
+          : 'Graph view'
+      }
+      placement="right"
+    >
+      <S.DAGIcon
+        $isDisabled={isDAGDisabled}
+        $isSelected={type === VisualizationType.Dag}
+        onClick={() => !isDAGDisabled && onChange(VisualizationType.Dag)}
+      />
     </Tooltip>
     <Tooltip title="Timeline view" placement="right">
       <S.TimelineIcon

diff --git a/web/src/constants/Visualization.constants.ts b/web/src/constants/Visualization.constants.ts
@@ -2,3 +2,5 @@ export enum NodeTypesEnum {
   TraceSpan = 'traceSpan',
   TestSpan = 'testSpan',
 }
+
+export const MAX_DAG_NODES = 200;