IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

TraceViewer: Fix lazy loading (#30700)

Browse Source 
* 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>
This commit is contained in:
Zoltán Bedi 2021-02-02 10:17:38 +01:00 committed by GitHub
parent ffc6eda351
commit 76d02048fa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 7644 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
e2e/suite1/specs/trace-view-scrolling.spec.ts Normal file
View File

@ -0,0 +1,30 @@
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);
});
});

3
packages/grafana-e2e-selectors/src/selectors/components.ts
View File

@ -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',

1
packages/grafana-e2e-selectors/src/selectors/pages.ts
View File

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

7592
packages/grafana-e2e/cypress/fixtures/long-trace-response.json Normal file
View File

File diff suppressed because it is too large Load Diff

2
public/app/features/explore/TraceView/TraceView.tsx
View File

@ -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;

12
public/app/plugins/datasource/jaeger/QueryField.tsx
View File

@ -1,9 +1,9 @@
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 || ''}

8
public/app/plugins/datasource/tempo/QueryField.tsx
View File

@ -1,9 +1,9 @@
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';
import { ExploreQueryFieldProps } from '@grafana/data';
import { LegacyForms } from '@grafana/ui';
type Props = ExploreQueryFieldProps<TempoDatasource, TempoQuery>;
export class TempoQueryField extends React.PureComponent<Props> {
render() {
@ -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 || ''}

13
public/app/plugins/datasource/zipkin/QueryField.tsx
View File

@ -1,13 +1,14 @@
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 || ''}