kubeshop · xoscar · Feb 13, 2024 · Feb 13, 2024
diff --git a/web/src/components/AnalyzerResult/RuleResult.tsx b/web/src/components/AnalyzerResult/RuleResult.tsx
@@ -27,36 +27,46 @@ const RuleResult = ({index, data: {results, id, errorDescription}, style}: IProp
     dispatch(selectSpan({spanId}));
   }, [dispatch, spanId]);
 
-  return (
-    <div key={`${spanId}-${index}`} style={style}>
-      <S.SpanButton icon={<CaretUpFilled />} onClick={onClick} type="link" $error={!passed}>
-        {trace.flat[spanId].name ?? ''}
-      </S.SpanButton>
+  const getTooltipOverlayFn = useMemo(
+    () =>
+      !passed && !!errors.length
+        ? () => (
+            <>
+              {errors.length > 1 && (
+                <>
+                  <div>
+                    <Typography.Text>{errorDescription}</Typography.Text>
+                  </div>
+                  <S.List>
+                    {errors.map(error => (
+                      <li key={error.value}>
+                        <Typography.Text>{error.value}</Typography.Text>
+                      </li>
+                    ))}
+                  </S.List>
+                </>
+              )}
 
-      {!passed && errors.length > 1 && (
-        <>
-          <div>
-            <Typography.Text>{errorDescription}</Typography.Text>
-          </div>
-          <S.List>
-            {errors.map(error => (
-              <li key={error.value}>
-                <Tooltip title={error.description}>
-                  <Typography.Text>{error.value}</Typography.Text>
-                </Tooltip>
-              </li>
-            ))}
-          </S.List>
-        </>
-      )}
+              {errors.length === 1 && (
+                <div>
+                  <Typography.Text>{errors[0].description}</Typography.Text>
+                </div>
+              )}
 
-      {!passed && errors.length === 1 && (
-        <div>
-          <Typography.Text>{errors[0].description}</Typography.Text>
-        </div>
-      )}
+              <RuleLink id={id} />
+            </>
+          )
+        : null,
+    [passed, errors, errorDescription, id]
+  );
 
-      {!passed && <RuleLink id={id} />}
+  return (
+    <div key={`${spanId}-${index}`} style={style}>
+      <Tooltip overlay={getTooltipOverlayFn}>
+        <S.SpanButton icon={<CaretUpFilled />} onClick={onClick} type="link" $error={!passed}>
+          {trace.flat[spanId].name ?? ''}
+        </S.SpanButton>
+      </Tooltip>
     </div>
   );
 };

diff --git a/web/src/components/ResizablePanels/FillPanel.tsx b/web/src/components/ResizablePanels/FillPanel.tsx
@@ -1,5 +1,5 @@
 import * as Spaces from 'react-spaces';
 
-const FillPanel: React.FC = ({children}) => <Spaces.Fill>{children}</Spaces.Fill>;
+const FillPanel: React.FC = ({children}) => <Spaces.Fill style={{overflow: 'scroll'}}>{children}</Spaces.Fill>;
 
 export default FillPanel;
diff --git a/web/src/components/RunDetailTest/RunDetailTest.styled.ts b/web/src/components/RunDetailTest/RunDetailTest.styled.ts
@@ -1,5 +1,5 @@
 import {Badge} from 'antd';
-import styled from 'styled-components';
+import styled, {css} from 'styled-components';
 
 export const Container = styled.div`
   display: flex;
@@ -11,10 +11,17 @@ export const Section = styled.div`
   flex: 1;
 `;
 
-export const SectionLeft = styled(Section)`
+export const SectionLeft = styled(Section)<{$isTimeline: boolean}>`
   background-color: ${({theme}) => theme.color.background};
   box-shadow: inset 20px 0px 24px -20px rgba(153, 155, 168, 0.18), inset -20px 0 24px -20px rgba(153, 155, 168, 0.18);
   z-index: 1;
+
+  ${({$isTimeline}) =>
+    $isTimeline &&
+    css`
+      max-size: calc(100% - 695px);
+      overflow: scroll;
+    `}
 `;
 
 export const SectionRight = styled(Section)`

diff --git a/web/src/components/RunDetailTest/TestPanel.tsx b/web/src/components/RunDetailTest/TestPanel.tsx
@@ -38,7 +38,7 @@

 const TestPanel = ({run, testId, runEvents}: IProps) => {
  const [query, updateQuery] = useSearchParams();
  const {selectedSpan, onSetFocusedSpan, onSelectSpan} = useSpan();
  const {remove, revert, selectedTestSpec, setSelectedSpec, setSelectorSuggestions, setPrevSelector, specs} =
    useTestSpecs();
  const {isOpen: isTestSpecFormOpen, formProps, onSubmit, open, close, isValid, onIsValid} = useTestSpecForm();
@@ -100,18 +100,10 @@
     [revert]
   );
 
-  const handleSelectSpan = useCallback(
-    (spanId: string) => {
-      onSelectSpan(spanId);
-      onSetFocusedSpan(spanId);
-    },
-    [onSelectSpan, onSetFocusedSpan]
-  );
-
   return (
     <FillPanel>
       <S.Container>
-        <S.SectionLeft>
+        <S.SectionLeft $isTimeline={visualizationType === VisualizationType.Timeline}>
           <S.SwitchContainer>
             {run.state === TestState.FINISHED && (
               <Switch

diff --git a/web/src/components/RunDetailTest/Visualization.tsx b/web/src/components/RunDetailTest/Visualization.tsx
@@ -2,7 +2,7 @@ import {useCallback, useEffect} from 'react';
 
 import {VisualizationType} from 'components/RunDetailTrace/RunDetailTrace';
 import RunEvents from 'components/RunEvents';
-import TimelineV2 from 'components/Visualization/components/Timeline/TimelineV2';
+import Timeline from 'components/Visualization/components/Timeline';
 import {TestRunStage} from 'constants/TestRunEvents.constants';
 import {NodeTypesEnum} from 'constants/Visualization.constants';
 import TestRunEvent from 'models/TestRunEvent.model';
@@ -43,7 +43,7 @@ const Visualization = ({isDAGDisabled, runEvents, runState, trace, trace: {spans
   return type === VisualizationType.Dag && !isDAGDisabled ? (
     <TestDAG trace={trace} onNavigateToSpan={onNavigateToSpan} />
   ) : (
-    <TimelineV2
+    <Timeline
       matchedSpans={matchedSpans}
       nodeType={NodeTypesEnum.TestSpan}
       onNavigate={onNavigateToSpan}

diff --git a/web/src/components/RunDetailTrace/RunDetailTrace.styled.ts b/web/src/components/RunDetailTrace/RunDetailTrace.styled.ts
@@ -2,10 +2,11 @@ import {CloseCircleFilled} from '@ant-design/icons';
 import {Typography} from 'antd';
 import styled from 'styled-components';
 
-export const Container = styled.div`
+export const Container = styled.div<{$isTimeline: boolean}>`
   display: flex;
   height: 100%;
   width: 100%;
+  min-width: ${({$isTimeline}) => $isTimeline && '1000px'};
 `;
 
 export const SearchContainer = styled.div`

diff --git a/web/src/components/RunDetailTrace/RunDetailTrace.tsx b/web/src/components/RunDetailTrace/RunDetailTrace.tsx
@@ -26,7 +26,7 @@ export function getIsDAGDisabled(totalSpans: number = 0): boolean {
 
 const RunDetailTrace = ({run, runEvents, testId, skipTraceCollection}: IProps) => {
   return (
-    <S.Container>
+    <S.Container $isTimeline={false}>
       <SetupAlert />
       <ResizablePanels>
         <SpanDetailsPanel run={run} testId={testId} />

diff --git a/web/src/components/RunDetailTrace/TracePanel.tsx b/web/src/components/RunDetailTrace/TracePanel.tsx
@@ -26,7 +26,7 @@ const TracePanel = ({run, testId, runEvents, skipTraceCollection}: TProps) => {
 
   return (
     <FillPanel>
-      <S.Container>
+      <S.Container $isTimeline={visualizationType === VisualizationType.Timeline}>
         <S.SectionLeft $hasShadow>
           <S.SearchContainer>
             <Search runId={run.id} testId={testId} />

diff --git a/web/src/components/RunDetailTrace/Visualization.tsx b/web/src/components/RunDetailTrace/Visualization.tsx
@@ -9,7 +9,7 @@ import TraceSelectors from 'selectors/Trace.selectors';
 import TestRunService from 'services/TestRun.service';
 import Trace from 'models/Trace.model';
 import {TTestRunState} from 'types/TestRun.types';
-import TimelineV2 from 'components/Visualization/components/Timeline/TimelineV2';
+import TimelineV2 from 'components/Visualization/components/Timeline/Timeline';
 import {VisualizationType} from './RunDetailTrace';
 import TraceDAG from './TraceDAG';
 

diff --git a/web/src/components/Visualization/components/Timeline/BaseSpanNode/BaseSpanNode.tsx b/web/src/components/Visualization/components/Timeline/BaseSpanNode/BaseSpanNode.tsx
@@ -1,75 +1,61 @@
-import {Group} from '@visx/group';
-
-import {AxisOffset, BaseLeftPadding, NodeHeight, NodeOverlayHeight} from 'constants/Timeline.constants';
 import Span from 'models/Span.model';
-import Collapse from './Collapse';
 import Connector from './Connector';
-import Label from './Label';
 import {IPropsComponent} from '../SpanNodeFactory';
+import {useTimeline} from '../Timeline.provider';
 import * as S from '../Timeline.styled';
 
+function toPercent(value: number) {
+  return `${(value * 100).toFixed(1)}%`;
+}
+
+function getHintSide(viewStart: number, viewEnd: number) {
+  return viewStart > 1 - viewEnd ? 'left' : 'right';
+}
+
 interface IProps extends IPropsComponent {
-  className?: string;
-  header?: React.ReactNode;
   span: Span;
 }
 
-const BaseSpanNode = ({
-  className,
-  header,
-  index,
-  indexParent,
-  isCollapsed = false,
-  isMatched = false,
-  isSelected = false,
-  minStartTime,
-  node,
-  onClick,
-  onCollapse,
-  span,
-  xScale,
-}: IProps) => {
-  const isParent = Boolean(node.children);
-  const hasParent = indexParent !== -1;
-  const positionTop = index * NodeHeight;
-  const durationWidth = span.endTime - span.startTime;
-  const durationX = span.startTime - minStartTime;
-  const leftPadding = node.depth * BaseLeftPadding;
+const BaseSpanNode = ({index, node, span, style}: IProps) => {
+  const {collapsedSpans, getScale, matchedSpans, onSpanCollapse, onSpanClick, selectedSpan} = useTimeline();
+  const {start: viewStart, end: viewEnd} = getScale(span.startTime, span.endTime);
+  const hintSide = getHintSide(viewStart, viewEnd);
+  const isSelected = selectedSpan === node.data.id;
+  const isMatched = matchedSpans.includes(node.data.id);
+  const isCollapsed = collapsedSpans.includes(node.data.id);
 
   return (
-    <Group className={className} id={node.data.id} left={0} top={positionTop}>
-      {hasParent && <Connector distance={index - indexParent} leftPadding={leftPadding} />}
-
-      <Group left={0} onClick={() => onClick(node.data.id)} top={0}>
-        <S.RectOverlay height={NodeOverlayHeight} rx={2} x={0} y={0} $isMatched={isMatched} $isSelected={isSelected} />
-      </Group>
-
-      <Group left={leftPadding} top={8}>
-        <Label
-          duration={span.duration}
-          header={header}
-          kind={span.kind}
-          name={span.name}
-          service={span.service}
-          system={span.system}
-          type={span.type}
-        />
-
-        {isParent && (
-          <Collapse id={node.data.id} isCollapsed={isCollapsed} onCollapse={onCollapse} totalChildren={node.children} />
-        )}
-
-        <S.RectDurationGuideline rx={3} x={50} y={46} />
-      </Group>
-
-      <S.RectDuration
-        rx={3}
-        width={Math.ceil(xScale(durationWidth)?.valueOf() ?? 0)}
-        x={Math.ceil(xScale(durationX)?.valueOf() ?? 0) + AxisOffset}
-        y={52}
-        $type={span.type}
-      />
-    </Group>
+    <div style={style}>
+      <S.Row
+        onClick={() => onSpanClick(node.data.id)}
+        $isEven={index % 2 === 0}
+        $isMatched={isMatched}
+        $isSelected={isSelected}
+      >
+        <S.Col>
+          <S.Header>
+            <Connector
+              hasParent={!!node.data.parentId}
+              id={node.data.id}
+              isCollapsed={isCollapsed}
+              nodeDepth={node.depth}
+              onCollapse={onSpanCollapse}
+              totalChildren={node.children}
+            />
+            <S.NameContainer>
+              <S.Title>{span.name}</S.Title>
+            </S.NameContainer>
+          </S.Header>
+          <S.Separator />
+        </S.Col>
+
+        <S.ColDuration>
+          <S.SpanBar $type={span.type} style={{left: toPercent(viewStart), width: toPercent(viewEnd - viewStart)}}>
+            <S.SpanBarLabel $side={hintSide}>{span.duration}</S.SpanBarLabel>
+          </S.SpanBar>
+        </S.ColDuration>
+      </S.Row>
+    </div>
   );
 };
 

diff --git a/web/src/components/Visualization/components/Timeline/BaseSpanNode/BaseSpanNodeV2.tsx b/web/src/components/Visualization/components/Timeline/BaseSpanNode/BaseSpanNodeV2.tsx