fix(frontend): improve trace tab ui and behavior (#3575)

kubeshop · Jan 29, 2024 · 2a87652 · 2a87652
1 parent f8aa881
commit 2a87652
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 40 deletions.
diff --git a/web/src/components/ResizablePanels/ResizablePanels.styled.ts b/web/src/components/ResizablePanels/ResizablePanels.styled.ts
@@ -4,8 +4,7 @@ import {withPulseAnimation} from '../PulseButton';
 
 export const GlobalStyle = createGlobalStyle`
   .spaces-resize-handle {
-    background-color: ${({theme}) => theme.color.borderLight};
-    width: 3px !important;
+    border-left: 1px solid ${({theme}) => theme.color.borderLight};
     z-index: 10;
   }
 
@@ -41,7 +40,6 @@ export const SplitterContainer = styled.div``;
 
 export const PanelContainer = styled.div<{$isOpen: boolean}>`
   background-color: ${({theme}) => theme.color.white};
-  box-shadow: 0 20px 24px rgba(153, 155, 168, 0.18);
   height: 100%;
   overflow: visible;
   overflow-y: scroll;

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, {css} from 'styled-components';
+import styled from 'styled-components';
 
 export const Container = styled.div`
   display: flex;
@@ -13,12 +13,12 @@ export const Section = styled.div`
 
 export const SectionLeft = styled(Section)`
   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;
 `;
 
 export const SectionRight = styled(Section)`
   background-color: ${({theme}) => theme.color.white};
-  box-shadow: 0 20px 24px rgba(153, 155, 168, 0.18);
   overflow: hidden;
   position: relative;
   z-index: 2;
@@ -53,25 +53,3 @@ export const CountBadge = styled(Badge)`
     color: ${({theme}) => theme.color.text};
   }
 `;
-
-export const SpanDetailContainer = styled.div<{$isOpen: boolean}>`
-  background-color: ${({theme}) => theme.color.white};
-  box-shadow: 0 20px 24px rgba(153, 155, 168, 0.18);
-  height: 100%;
-  overflow: visible;
-  position: relative;
-
-  > div {
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  ${({$isOpen}) =>
-    $isOpen &&
-    css`
-      > div {
-        opacity: 1;
-        pointer-events: auto;
-      }
-    `}
-`;
diff --git a/web/src/components/RunDetailTrace/RunDetailTrace.styled.ts b/web/src/components/RunDetailTrace/RunDetailTrace.styled.ts
@@ -22,18 +22,14 @@ export const Section = styled.div`
   z-index: 1;
 `;
 
-export const SectionLeft = styled(Section)`
+export const SectionLeft = styled(Section)<{$hasShadow?: boolean}>`
   background-color: ${({theme}) => theme.color.background};
+  box-shadow: ${({$hasShadow}) =>
+    $hasShadow &&
+    `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;
 `;
 
-export const SectionRight = styled(Section)<{$shouldScroll: boolean}>`
-  background-color: ${({theme}) => theme.color.white};
-  box-shadow: 0 20px 24px rgba(153, 155, 168, 0.18);
-  overflow-y: ${({$shouldScroll}) => ($shouldScroll ? 'scroll' : 'hidden')};
-  z-index: 2;
-`;
-
 export const VisualizationContainer = styled.div`
   height: calc(100% - 52px);
   position: relative;

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

diff --git a/web/src/components/RunDetailTrace/Visualization.tsx b/web/src/components/RunDetailTrace/Visualization.tsx
@@ -44,7 +44,8 @@ const Visualization = ({runEvents, runState, spans, type}: IProps) => {
   const onNodesChange = useCallback((changes: NodeChange[]) => dispatch(changeNodes({changes})), [dispatch]);
 
   const onNodeClick = useCallback(
-    (event, {id}: Node) => {
+    (event: React.MouseEvent, {id}: Node) => {
+      event.stopPropagation();
       TraceDiagramAnalyticsService.onClickSpan(id);
       dispatch(selectSpan({spanId: id}));
     },

diff --git a/web/src/components/Visualization/components/DAG/TraceSpanNode/AnalyzerErrors.tsx b/web/src/components/Visualization/components/DAG/TraceSpanNode/AnalyzerErrors.tsx
@@ -1,16 +1,21 @@
-import {useState} from 'react';
+import {useEffect, useState} from 'react';
 import TraceAnalyzerAnalytics from 'services/Analytics/TraceAnalyzer.service';
 import {TAnalyzerError} from 'types/TestRun.types';
 import AnalyzerErrorsPopover from './AnalyzerErrorsPopover';
 import * as S from './AnalyzerErrors.styled';
 
 interface IProps {
   errors: TAnalyzerError[];
+  isSelected: boolean;
 }
 
-const AnalyzerErrors = ({errors}: IProps) => {
+const AnalyzerErrors = ({errors, isSelected}: IProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
+  useEffect(() => {
+    if (isSelected) setIsOpen(true);
+  }, [isSelected]);
+
   return (
     <>
       <S.ErrorIcon

diff --git a/web/src/components/Visualization/components/DAG/TraceSpanNode/TraceSpanNode.tsx b/web/src/components/Visualization/components/DAG/TraceSpanNode/TraceSpanNode.tsx
@@ -13,7 +13,7 @@ const TraceSpanNode = ({data, id, selected}: IProps) => {
   return (
     <BaseSpanNode
       className={data.isMatched ? 'matched' : ''}
-      footer={analyzerErrors && <AnalyzerErrors errors={analyzerErrors} />}
+      footer={analyzerErrors && <AnalyzerErrors errors={analyzerErrors} isSelected={selected} />}
       id={id}
       isMatched={data.isMatched}
       isSelected={selected}