TraceViewer: Fix lazy loading (#30700)

* Trace: Fix lazy loading

* Add e2e test for trace view lazy load scrolling

* Remove sensitive information

* Update e2e/suite1/specs/trace-view-scrolling.ts

Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com>

* Address review comments

Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com>

e2e/suite1/specs/trace-view-scrolling.spec.ts

+import { e2e } from '@grafana/e2e';
+
+describe('Trace view', () => {
+  it('Can lazy load big traces', () => {
+    e2e.flows.login('admin', 'admin');
+    e2e().intercept('GET', '/api/datasources/proxy/29/api/traces/long-trace', {
+      fixture: 'long-trace-response.json',
+    });
+
+    e2e.pages.Explore.visit();
+
+    e2e.components.DataSourcePicker.container()
+      .should('be.visible')
+      .within(() => {
+        e2e.components.Select.input().should('be.visible').click();
+
+        e2e().contains('gdev-jaeger').scrollIntoView().should('be.visible').click();
+      });
+
+    e2e.components.QueryField.container().should('be.visible').type('long-trace');
+
+    e2e.components.RefreshPicker.runButton().should('be.visible').click();
+
+    e2e.components.TraceViewer.spanBar().should('have.length', 100);
+    e2e.pages.Explore.General.scrollBar().scrollTo('center');
+
+    // After scrolling we should have 140 spans instead of the first 100
+    e2e.components.TraceViewer.spanBar().should('have.length', 140);
+  });
+});

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -160,6 +160,9 @@ export const Components = {
   TimeZonePicker: {
     container: 'Time zone picker select container',
   },
+  TraceViewer: {
+    spanBar: () => '[data-test-id="SpanBar--wrapper"]',
+  },
   QueryField: { container: 'Query field' },
   ValuePicker: {
     button: 'Value picker add button',

packages/grafana-e2e-selectors/src/selectors/pages.ts

@@ -126,6 +126,7 @@ export const Pages = {
       container: 'Explore',
       graph: 'Explore Graph',
       table: 'Explore Table',
+      scrollBar: () => '.scrollbar-view',
     },
     Toolbar: {
       navBar: () => '.explore-toolbar',

public/app/features/explore/TraceView/TraceView.tsx

@@ -94,7 +94,7 @@ export function TraceView(props: Props) {
     props.splitOpenFn,
     traceToLogsOptions,
   ]);
-  const scrollElement = document.getElementsByClassName('scroll-canvas')[0];
+  const scrollElement = document.getElementsByClassName('scrollbar-view')[0];
 
   if (!traceProp) {
     return null;

public/app/plugins/datasource/jaeger/QueryField.tsx

-import React from 'react';
-import { JaegerDatasource, JaegerQuery } from './datasource';
+import { AppEvents, ExploreQueryFieldProps, TraceData, TraceSpan } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { ButtonCascader, CascaderOption } from '@grafana/ui';
-
-import { AppEvents, ExploreQueryFieldProps, TraceSpan, TraceData } from '@grafana/data';
+import React from 'react';
 import { appEvents } from '../../../core/core';
+import { JaegerDatasource, JaegerQuery } from './datasource';
 
 const ALL_OPERATIONS_KEY = '__ALL__';
 const NO_TRACES_KEY = '__NO_TRACES__';
@@ -203,8 +203,8 @@ export class JaegerQueryField extends React.PureComponent<Props, State> {
             </ButtonCascader>
           </div>
           <div className="gf-form gf-form--grow flex-shrink-1">
-            <div className={'slate-query-field__wrapper'}>
-              <div className="slate-query-field">
+            <div className="slate-query-field__wrapper">
+              <div className="slate-query-field" aria-label={selectors.components.QueryField.container}>
                 <input
                   style={{ width: '100%' }}
                   value={query.query || ''}

public/app/plugins/datasource/tempo/QueryField.tsx

-import React from 'react';
-import { TempoDatasource, TempoQuery } from './datasource';
-
 import { ExploreQueryFieldProps } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { LegacyForms } from '@grafana/ui';
+import React from 'react';
+import { TempoDatasource, TempoQuery } from './datasource';
 
 type Props = ExploreQueryFieldProps<TempoDatasource, TempoQuery>;
 export class TempoQueryField extends React.PureComponent<Props> {
@@ -15,7 +15,7 @@ export class TempoQueryField extends React.PureComponent<Props> {
         labelWidth={4}
         inputEl={
           <div className="slate-query-field__wrapper">
-            <div className="slate-query-field">
+            <div className="slate-query-field" aria-label={selectors.components.QueryField.container}>
               <input
                 style={{ width: '100%' }}
                 value={query.query || ''}

public/app/plugins/datasource/zipkin/QueryField.tsx

-import React, { useCallback, useMemo, useState } from 'react';
-import { ZipkinDatasource, ZipkinQuery } from './datasource';
 import { AppEvents, ExploreQueryFieldProps } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { ButtonCascader, CascaderOption } from '@grafana/ui';
+import { fromPairs } from 'lodash';
+import React, { useCallback, useMemo, useState } from 'react';
 import { useAsyncFn, useMount, useMountedState } from 'react-use';
+import { AsyncState } from 'react-use/lib/useAsyncFn';
 import { appEvents } from '../../../core/core';
 import { apiPrefix } from './constants';
+import { ZipkinDatasource, ZipkinQuery } from './datasource';
 import { ZipkinSpan } from './types';
-import { fromPairs } from 'lodash';
-import { AsyncState } from 'react-use/lib/useAsyncFn';
 
 type Props = ExploreQueryFieldProps<ZipkinDatasource, ZipkinQuery>;
 
@@ -37,8 +38,8 @@ export const QueryField = ({ query, onChange, onRunQuery, datasource }: Props) =
           </ButtonCascader>
         </div>
         <div className="gf-form gf-form--grow flex-shrink-1">
-          <div className={'slate-query-field__wrapper'}>
-            <div className="slate-query-field">
+          <div className="slate-query-field__wrapper">
+            <div className="slate-query-field" aria-label={selectors.components.QueryField.container}>
               <input
                 style={{ width: '100%' }}
                 value={query.query || ''}