Chore performance improvements (#3616)

* chore(frontend): indentifying performance improvements * chore(frontend): identify performance improvements * feat(frontend): hide dag view for big traces (#3606) * Chore performance improvements tech debt 1 (#3607) * adding async functionality * chore(frontend): DAG improvements * chore(frontend): DAG improvements * chore(frontend): fixing spinner styles * chore(frontend): fixing spinner styles * feat(frontend): fixing tests * chore(frontend): fixing spinner styles * chore(frontend): FE Improvements for the Test View (#3613) * adding async functionality * chore(frontend): DAG improvements * chore(frontend): DAG improvements * chore(frontend): fixing spinner styles * chore(frontend): fixing spinner styles * feat(frontend): fixing tests * chore(frontend): fixing spinner styles * chore(frontend): FE Improvements for the Test View * chore(frontend): reverting editor changes * chore(frontend): Adding memoization for useComplete hook * chore(frontend): Adding Search Service usage * chore(frontend): cleanup * feat(frontend): implement virtual list for timeline view (#3617) * feat(frontend): implement virtual list for timeline view * remove prop * add header and collapse * feat: add timeline view connectors (#3623) * 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 * Chore performance improvements span search (#3629) * feat(frontend): Implemeting new Timeline for the Test Page * feat(frontend): Implementing span search for analyzer and test views * feat(frontend): read improvements * feat(frontend): adding single line input component * feat(frontend): updating analyzer styles * feat(frontend): Fixing tests * feat(frontend): Fixing tests --------- Co-authored-by: Jorge Padilla <jorge.esteban.padilla@gmail.com>
kubeshop · Feb 13, 2024 · 5350e7a · 5350e7a
1 parent 8adaa72
commit 5350e7a
Show file tree

Hide file tree

Showing 93 changed files with 1,726 additions and 501 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,8 @@
     "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",
     "typescript": "5.0.2"
@@ -81,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"
   },
@@ -122,6 +126,7 @@
     "@types/lodash": "4.14.181",
     "@types/postman-collection": "3.5.7",
     "@types/react-syntax-highlighter": "15.5.7",
+    "@types/react-window": "1.8.8",
     "@types/styled-components": "5.1.21",
     "concurrently": "7.2.1",
     "cypress": "13.2.0",

diff --git a/web/src/components/AnalyzerResult/AnalyzerResult.styled.ts b/web/src/components/AnalyzerResult/AnalyzerResult.styled.ts
@@ -47,27 +47,19 @@ export const GlobalScoreContainer = styled.div`
   justify-content: center;
 `;
 
-export const RuleContainer = styled.div`
-  border-bottom: ${({theme}) => `1px dashed ${theme.color.borderLight}`};
-  padding-bottom: 16px;
-  margin-bottom: 16px;
-  margin-left: 43px;
-`;
-
 export const RuleHeader = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 `;
 
-export const Column = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 8px;
+export const Column = styled(RuleHeader)`
+  width: 95%;
 `;
 
-export const RuleBody = styled(Column)`
+export const RuleBody = styled(Column)<{$resultCount: number}>`
   padding-left: 20px;
+  height: ${({$resultCount}) => ($resultCount > 10 ? '100vh' : `${$resultCount * 32}px`)};
 `;
 
 export const Subtitle = styled(Typography.Title)`

diff --git a/web/src/components/AnalyzerResult/AnalyzerResult.tsx b/web/src/components/AnalyzerResult/AnalyzerResult.tsx
@@ -2,7 +2,6 @@ import BetaBadge from 'components/BetaBadge/BetaBadge';
 import Link from 'components/Link';
 import {COMMUNITY_SLACK_URL, OCTOLIINT_ISSUE_URL} from 'constants/Common.constants';
 import LinterResult from 'models/LinterResult.model';
-import Trace from 'models/Trace.model';
 import {useSettingsValues} from 'providers/SettingsValues/SettingsValues.provider';
 import * as S from './AnalyzerResult.styled';
 import Empty from './Empty';
@@ -11,10 +10,9 @@ import Plugins from './Plugins';
 
 interface IProps {
   result: LinterResult;
-  trace: Trace;
 }
 
-const AnalyzerResult = ({result: {score, minimumScore, plugins = [], passed}, trace}: IProps) => {
+const AnalyzerResult = ({result: {score, minimumScore, plugins = [], passed}}: IProps) => {
   const {linter} = useSettingsValues();
 
   return (
@@ -31,13 +29,13 @@ const AnalyzerResult = ({result: {score, minimumScore, plugins = [], passed}, tr
             It can be globally disabled for all tests in <Link to="/settings?tab=analyzer">the settings page</Link>.{' '}
           </>
         )}
-        We value your feedback on this beta release. Share your thoughts on <a href={COMMUNITY_SLACK_URL}>Slack</a> or add
-        them to this <a href={OCTOLIINT_ISSUE_URL}>Issue</a>.
+        We value your feedback on this beta release. Share your thoughts on <a href={COMMUNITY_SLACK_URL}>Slack</a> or
+        add them to this <a href={OCTOLIINT_ISSUE_URL}>Issue</a>.
       </S.Description>
       {plugins.length ? (
         <>
           <GlobalResult score={score} minimumScore={minimumScore} allRulesPassed={passed} />
-          <Plugins plugins={plugins} trace={trace} />
+          <Plugins plugins={plugins} />
         </>
       ) : (
         <Empty />

diff --git a/web/src/components/AnalyzerResult/Plugins.tsx b/web/src/components/AnalyzerResult/Plugins.tsx
@@ -1,7 +1,8 @@
 import {Space, Switch, Typography} from 'antd';
 import {useState} from 'react';
 import {LinterResultPlugin} from 'models/LinterResult.model';
-import Trace from 'models/Trace.model';
+import {useAppSelector} from 'redux/hooks';
+import TraceSelectors from 'selectors/Trace.selectors';
 import TraceAnalyzerAnalytics from 'services/Analytics/TraceAnalyzer.service';
 import AnalyzerService from 'services/Analyzer.service';
 import * as S from './AnalyzerResult.styled';
@@ -11,12 +12,12 @@ import Collapse, {CollapsePanel} from '../Collapse';
 
 interface IProps {
   plugins: LinterResultPlugin[];
-  trace: Trace;
 }
 
-const Plugins = ({plugins: rawPlugins, trace}: IProps) => {
+const Plugins = ({plugins: rawPlugins}: IProps) => {
   const [onlyErrors, setOnlyErrors] = useState(false);
-  const plugins = AnalyzerService.getPlugins(rawPlugins, onlyErrors);
+  const matchedSpans = useAppSelector(TraceSelectors.selectMatchedSpans);
+  const plugins = AnalyzerService.getPlugins(rawPlugins, onlyErrors, matchedSpans);
 
   return (
     <>
@@ -38,7 +39,7 @@ const Plugins = ({plugins: rawPlugins, trace}: IProps) => {
             key={plugin.name}
           >
             {plugin.rules.map(rule => (
-              <Rule rule={rule} key={rule.name} trace={trace} />
+              <Rule rule={rule} key={rule.name} />
             ))}
           </CollapsePanel>
         ))}