feat(frontend): Implemeting new Timeline for the Test Page (#3627)

* feat(frontend): Implemeting new Timeline for the Test Page * feat(frontend): Fixing tests * feat(frontend): Fixing tests
kubeshop · Feb 13, 2024 · 1b97c98 · 1b97c98
1 parent 34a21fc
commit 1b97c98
Show file tree

Hide file tree

Showing 25 changed files with 401 additions and 183 deletions.
diff --git a/web/cypress/e2e/TestRunDetail/CreateAssertion.spec.ts b/web/cypress/e2e/TestRunDetail/CreateAssertion.spec.ts
@@ -48,7 +48,6 @@ describe('Create Assertion', () => {
 
     cy.get('[data-cy=assertion-form-submit-button]').click();
 
-    cy.get('[data-cy=test-specs-container]').should('be.visible');
     cy.get('[data-cy=test-spec-container]').should('have.lengthOf', 1);
   });
 
@@ -74,7 +73,6 @@ describe('Create Assertion', () => {
 
     cy.get('[data-cy=assertion-form-submit-button]').click();
 
-    cy.get('[data-cy=test-specs-container]').should('be.visible');
     cy.get('[data-cy=test-spec-container]').should('have.lengthOf', 1);
   });
 
@@ -98,8 +96,6 @@ describe('Create Assertion', () => {
     cy.selectOperator(1);
 
     cy.get('[data-cy=assertion-form-submit-button]').click();
-
-    cy.get('[data-cy=test-specs-container]').should('be.visible');
     cy.get('[data-cy=test-spec-container]').should('have.lengthOf', 1);
   });
 
@@ -124,8 +120,6 @@ describe('Create Assertion', () => {
     cy.selectOperator(1);
 
     cy.get('[data-cy=assertion-form-submit-button]').click();
-
-    cy.get('[data-cy=test-specs-container]').should('be.visible');
     cy.get('[data-cy=test-spec-container]').should('have.lengthOf', 1);
   });
 
@@ -151,9 +145,7 @@ describe('Create Assertion', () => {
 
     cy.get('[data-cy=assertion-form-submit-button]').click();
 
-    cy.get('[data-cy=test-specs-container]').should('exist');
     cy.get('[data-cy=test-spec-container]').should('have.lengthOf', 2);
-
     cy.get('[data-cy=trace-actions-revert-all').click();
     cy.get('[data-cy=test-spec-container]').should('have.lengthOf', 0);
   });

diff --git a/web/cypress/support/commands.ts b/web/cypress/support/commands.ts
@@ -224,7 +224,6 @@ Cypress.Commands.add('createAssertion', () => {
   cy.get('[data-cy=assertion-check-operator]').click({force: true});
 
   cy.get('[data-cy=assertion-form-submit-button]').click();
-  cy.get('[data-cy=test-specs-container]').should('be.visible');
   cy.get('[data-cy=test-spec-container]').should('have.lengthOf', 1);
 });
 

diff --git a/web/docker-compose.yaml b/web/docker-compose.yaml
@@ -0,0 +1,127 @@
+version: '3.2'
+services:
+  tracetest:
+    restart: unless-stopped
+    image: kubeshop/tracetest:${TAG:-latest}
+    extra_hosts:
+      - 'host.docker.internal:host-gateway'
+    build:
+      context: .
+    volumes:
+      - type: bind
+        source: ../local-config/tracetest.config.yaml
+        target: /app/tracetest.yaml
+      - type: bind
+        source: ../local-config/tracetest.provision.yaml
+        target: /app/provisioning.yaml
+    ports:
+      - 11633:11633
+    command: --provisioning-file /app/provisioning.yaml
+    healthcheck:
+      test: ['CMD', 'wget', '--spider', 'localhost:11633']
+      interval: 1s
+      timeout: 3s
+      retries: 60
+    depends_on:
+      postgres:
+        condition: service_healthy
+    environment:
+      TRACETEST_DEV: ${TRACETEST_DEV}
+      TRACETEST_TESTPIPELINES_TRIGGEREXECUTE_ENABLED: ${TRACETEST_TESTPIPELINES_TRIGGEREXECUTE_ENABLED}
+      TRACETEST_TESTPIPELINES_TRACEFETCH_ENABLED: ${TRACETEST_TESTPIPELINES_TRACEFETCH_ENABLED}
+      TRACETEST_DATASTOREPIPELINES_TESTCONNECTION_ENABLED: ${TRACETEST_DATASTOREPIPELINES_TESTCONNECTION_ENABLED}
+
+  postgres:
+    image: postgres:15.2
+    environment:
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_USER: postgres
+    ports:
+      - 5432:5432
+    healthcheck:
+      test: pg_isready -U "$$POSTGRES_USER" -d "$$POSTGRES_DB"
+      interval: 1s
+      timeout: 5s
+      retries: 60
+
+  otel-collector:
+    image: otel/opentelemetry-collector-contrib:0.59.0
+    extra_hosts:
+      - 'host.docker.internal:host-gateway'
+    ports:
+      - '4317:4317'
+    command:
+      - '--config'
+      - '/otel-local-config.yaml'
+    volumes:
+      - ../local-config/collector.config.yaml:/otel-local-config.yaml
+    depends_on:
+      - tracetest
+
+  cache:
+    image: redis:6
+    ports:
+      - 6379:6379
+    healthcheck:
+      test: ['CMD', 'redis-cli', 'ping']
+      interval: 1s
+      timeout: 3s
+      retries: 60
+
+  queue:
+    image: rabbitmq:3.12
+    restart: unless-stopped
+    ports:
+      - 5672:5672
+      - 15672:15672
+    healthcheck:
+      test: rabbitmq-diagnostics -q check_running
+      interval: 1s
+      timeout: 5s
+      retries: 60
+
+  demo-api:
+    image: kubeshop/demo-pokemon-api:latest
+    restart: unless-stopped
+    pull_policy: always
+    environment:
+      REDIS_URL: cache
+      DATABASE_URL: postgresql://postgres:postgres@postgres:5432/postgres?schema=public
+      RABBITMQ_HOST: queue
+      POKE_API_BASE_URL: https://pokeapi.co/api/v2
+      COLLECTOR_ENDPOINT: http://otel-collector:4317
+      NPM_RUN_COMMAND: api
+    healthcheck:
+      test: ['CMD', 'wget', '--spider', 'localhost:8081']
+      interval: 1s
+      timeout: 3s
+      retries: 60
+    ports:
+      - 8081:8081
+    depends_on:
+      postgres:
+        condition: service_healthy
+      cache:
+        condition: service_healthy
+      queue:
+        condition: service_healthy
+
+  worker:
+    image: kubeshop/demo-pokemon-api:latest
+    restart: unless-stopped
+    pull_policy: always
+    environment:
+      REDIS_URL: cache
+      DATABASE_URL: postgresql://postgres:postgres@postgres:5432/postgres?schema=public
+      RABBITMQ_HOST: queue
+      POKE_API_BASE_URL: https://pokeapi.co/api/v2
+      COLLECTOR_ENDPOINT: http://otel-collector:4317
+      NPM_RUN_COMMAND: worker
+    depends_on:
+      postgres:
+        condition: service_healthy
+      cache:
+        condition: service_healthy
+      queue:
+        condition: service_healthy
+
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -56,6 +56,7 @@
     "react-scripts": "5.0.1",
     "react-spaces": "0.3.8",
     "react-syntax-highlighter": "15.5.0",
+    "react-virtualized-auto-sizer": "1.0.22",
     "react-window": "1.8.10",
     "redux-first-history": "5.0.12",
     "styled-components": "5.3.3",
@@ -82,6 +83,8 @@
     "cy:open": "cypress open",
     "cy:run": "cypress run",
     "cy:ci": "cypress run --parallel --record --key $CYPRESS_RECORD_KEY",
+    "cy:local:run": "POKEMON_HTTP_ENDPOINT=http://demo-api:8081 cypress run",
+    "cy:local:open": "POKEMON_HTTP_ENDPOINT=http://demo-api:8081 cypress open",
     "prettier": "prettier --write ./src",
     "less": "lessc --js src/antd-theme/antd-customized.less src/antd-theme/antd-customized.css"
   },

diff --git a/web/src/components/RunDetailTest/TestPanel.tsx b/web/src/components/RunDetailTest/TestPanel.tsx
@@ -224,7 +224,6 @@ const TestPanel = ({run, testId, runEvents}: IProps) => {
             onDelete={handleDelete}
             onEdit={handleEdit}
             onRevert={handleRevert}
-            onSelectSpan={handleSelectSpan}
             selectedSpan={selectedSpan?.id}
             testSpec={selectedTestSpec}
           />

diff --git a/web/src/components/RunDetailTest/Visualization.tsx b/web/src/components/RunDetailTest/Visualization.tsx
@@ -2,13 +2,11 @@ import {useCallback, useEffect} from 'react';
 
 import {VisualizationType} from 'components/RunDetailTrace/RunDetailTrace';
 import RunEvents from 'components/RunEvents';
-import {useTestSpecForm} from 'components/TestSpecForm/TestSpecForm.provider';
-import Timeline from 'components/Visualization/components/Timeline';
+import TimelineV2 from 'components/Visualization/components/Timeline/TimelineV2';
 import {TestRunStage} from 'constants/TestRunEvents.constants';
 import {NodeTypesEnum} from 'constants/Visualization.constants';
 import TestRunEvent from 'models/TestRunEvent.model';
 import {useSpan} from 'providers/Span/Span.provider';
-import TraceAnalyticsService from 'services/Analytics/TestRunAnalytics.service';
 import Trace from 'models/Trace.model';
 import TestRunService from 'services/TestRun.service';
 import {TTestRunState} from 'types/TestRun.types';
@@ -25,21 +23,11 @@ export interface IProps {
 const Visualization = ({isDAGDisabled, runEvents, runState, trace, trace: {spans, rootSpan}, type}: IProps) => {
   const {onSelectSpan, matchedSpans, onSetFocusedSpan, selectedSpan} = useSpan();
 
-  const {isOpen} = useTestSpecForm();
-
   useEffect(() => {
     if (selectedSpan) return;
     onSelectSpan(rootSpan.id);
   }, [onSelectSpan, rootSpan, selectedSpan, spans]);
 
-  const onNodeClickTimeline = useCallback(
-    (spanId: string) => {
-      TraceAnalyticsService.onTimelineSpanClick(spanId);
-      onSelectSpan(spanId);
-    },
-    [onSelectSpan]
-  );
-
   const onNavigateToSpan = useCallback(
     (spanId: string) => {
       onSelectSpan(spanId);
@@ -55,12 +43,11 @@ const Visualization = ({isDAGDisabled, runEvents, runState, trace, trace: {spans
   return type === VisualizationType.Dag && !isDAGDisabled ? (
     <TestDAG trace={trace} onNavigateToSpan={onNavigateToSpan} />
   ) : (
-    <Timeline
-      isMatchedMode={matchedSpans.length > 0 || isOpen}
+    <TimelineV2
       matchedSpans={matchedSpans}
       nodeType={NodeTypesEnum.TestSpan}
-      onNavigateToSpan={onNavigateToSpan}
-      onNodeClick={onNodeClickTimeline}
+      onNavigate={onNavigateToSpan}
+      onClick={onSelectSpan}
       selectedSpan={selectedSpan?.id ?? ''}
       spans={spans}
     />

diff --git a/web/src/components/RunDetailTrace/TraceDAG.tsx b/web/src/components/RunDetailTrace/TraceDAG.tsx
@@ -11,11 +11,11 @@ import LoadingSpinner, {SpinnerContainer} from '../LoadingSpinner';
 interface IProps {
   trace: Trace;
   onNavigateToSpan(spanId: string): void;
+  matchedSpans: string[];
+  selectedSpan: string;
 }
 
-const TraceDAG = ({trace: {spans}, onNavigateToSpan}: IProps) => {
-  const matchedSpans = useAppSelector(TraceSelectors.selectMatchedSpans);
-  const selectedSpan = useAppSelector(TraceSelectors.selectSelectedSpan);
+const TraceDAG = ({trace: {spans}, matchedSpans, selectedSpan, onNavigateToSpan}: IProps) => {
   const nodes = useAppSelector(TraceSelectors.selectNodes);
   const edges = useAppSelector(TraceSelectors.selectEdges);
   const isMatchedMode = Boolean(matchedSpans.length);

diff --git a/web/src/components/RunDetailTrace/Visualization.tsx b/web/src/components/RunDetailTrace/Visualization.tsx
@@ -24,6 +24,7 @@ interface IProps {
 const Visualization = ({isDAGDisabled, runEvents, runState, trace, trace: {spans, rootSpan}, type}: IProps) => {
   const dispatch = useAppDispatch();
   const selectedSpan = useAppSelector(TraceSelectors.selectSelectedSpan);
+  const matchedSpans = useAppSelector(TraceSelectors.selectMatchedSpans);
 
   useEffect(() => {
     if (selectedSpan) return;
@@ -38,14 +39,33 @@ const Visualization = ({isDAGDisabled, runEvents, runState, trace, trace: {spans
     [dispatch]
   );
 
+  const onNodeClickTimeline = useCallback(
+    (spanId: string) => {
+      dispatch(selectSpan({spanId}));
+    },
+    [dispatch]
+  );
+
   if (TestRunService.shouldDisplayTraceEvents(runState, spans.length)) {
     return <RunEvents events={runEvents} stage={TestRunStage.Trace} state={runState} />;
   }
 
   return type === VisualizationType.Dag && !isDAGDisabled ? (
-    <TraceDAG trace={trace} onNavigateToSpan={onNavigateToSpan} />
+    <TraceDAG
+      matchedSpans={matchedSpans}
+      selectedSpan={selectedSpan}
+      trace={trace}
+      onNavigateToSpan={onNavigateToSpan}
+    />
   ) : (
-    <TimelineV2 nodeType={NodeTypesEnum.TraceSpan} spans={spans} />
+    <TimelineV2
+      nodeType={NodeTypesEnum.TraceSpan}
+      spans={spans}
+      onNavigate={onNavigateToSpan}
+      onClick={onNodeClickTimeline}
+      selectedSpan={selectedSpan}
+      matchedSpans={matchedSpans}
+    />
   );
 };
 

diff --git a/web/src/components/TestResults/TestResults.tsx b/web/src/components/TestResults/TestResults.tsx
@@ -31,7 +31,7 @@ const TestResults = ({onDelete, onEdit, onRevert}: IProps) => {
       onSelectSpan(testSpec?.spanIds[0] || '');
       setSelectedSpec(testSpec?.selector);
     },
-    [assertionResults?.resultList, onSelectSpan, onSetFocusedSpan, setSelectedSpec]
+    [assertionResults, onSelectSpan, onSetFocusedSpan, setSelectedSpec]
   );
 
   return (

diff --git a/web/src/components/TestSpec/TestSpec.styled.ts b/web/src/components/TestSpec/TestSpec.styled.ts
@@ -17,6 +17,7 @@ export const Container = styled.div<{$isDeleted: boolean}>`
   display: flex;
   gap: 12px;
   padding: 16px;
+  margin-bottom: 16px;
 
   > div:first-child {
     opacity: ${({$isDeleted}) => ($isDeleted ? 0.5 : 1)};