Jaeger: support running queries with keyboard shortcut (#37958)

* Jaeger: add QueryField component

* Remove unused imports

* Fix e2e test so that it checks for QueryField component

* Remove comments

* Fix failing e2e test
This commit is contained in:
Olof Bourghardt
2021-08-25 11:30:32 +02:00
committed by GitHub
parent 7c97b9d03f
commit a19ad25eaa
4 changed files with 17 additions and 17 deletions

View File

@ -19,13 +19,13 @@ describe('Trace view', () => {
e2e().contains('gdev-jaeger').scrollIntoView().should('be.visible').click(); e2e().contains('gdev-jaeger').scrollIntoView().should('be.visible').click();
e2e.components.DataSource.Jaeger.traceIDInput().should('be.visible').type('long-trace'); e2e.components.QueryField.container().should('be.visible').type('long-trace');
e2e.components.RefreshPicker.runButton().should('be.visible').click(); e2e.components.RefreshPicker.runButton().should('be.visible').focus();
e2e().wait('@longTrace'); e2e().wait('@longTrace');
e2e.components.TraceViewer.spanBar().should('have.length', 100); e2e.components.TraceViewer.spanBar().should('be.visible');
e2e.pages.Explore.General.scrollBar().scrollTo('center'); e2e.pages.Explore.General.scrollBar().scrollTo('center');

View File

@ -1,7 +1,6 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { QueryEditorProps } from '@grafana/data'; import { QueryEditorProps } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors'; import { FileDropzone, InlineField, InlineFieldRow, QueryField, RadioButtonGroup, useTheme2 } from '@grafana/ui';
import { FileDropzone, InlineField, InlineFieldRow, Input, RadioButtonGroup, useTheme2 } from '@grafana/ui';
import React from 'react'; import React from 'react';
import { JaegerDatasource } from '../datasource'; import { JaegerDatasource } from '../datasource';
import { JaegerQuery, JaegerQueryType } from '../types'; import { JaegerQuery, JaegerQueryType } from '../types';
@ -12,6 +11,11 @@ type Props = QueryEditorProps<JaegerDatasource, JaegerQuery>;
export function QueryEditor({ datasource, query, onChange, onRunQuery }: Props) { export function QueryEditor({ datasource, query, onChange, onRunQuery }: Props) {
const theme = useTheme2(); const theme = useTheme2();
const onChangeQuery = (value: string) => {
const nextQuery: JaegerQuery = { ...query, query: value };
onChange(nextQuery);
};
const renderEditorBody = () => { const renderEditorBody = () => {
switch (query.queryType) { switch (query.queryType) {
case 'search': case 'search':
@ -32,16 +36,12 @@ export function QueryEditor({ datasource, query, onChange, onRunQuery }: Props)
return ( return (
<InlineFieldRow> <InlineFieldRow>
<InlineField label="Trace ID" labelWidth={21} grow> <InlineField label="Trace ID" labelWidth={21} grow>
<Input <QueryField
aria-label={selectors.components.DataSource.Jaeger.traceIDInput} query={query.query}
placeholder="Eg. 4050b8060d659e52" onChange={onChangeQuery}
value={query.query || ''} onRunQuery={onRunQuery}
onChange={(v) => placeholder={'Enter a Trace ID (run with Shift+Enter)'}
onChange({ portalOrigin="jaeger"
...query,
query: v.currentTarget.value,
})
}
/> />
</InlineField> </InlineField>
</InlineFieldRow> </InlineFieldRow>

View File

@ -209,7 +209,7 @@ $btn-active-box-shadow: 0px 0px 4px rgba(255, 120, 10, 0.5);
// Forms // Forms
// ------------------------- // -------------------------
$input-bg: #111217; $input-bg: #111217;
$input-bg-disabled: rgba(204, 204, 220, 0.07); $input-bg-disabled: rgba(204, 204, 220, 0.04);
$input-color: rgb(204, 204, 220); $input-color: rgb(204, 204, 220);
$input-border-color: rgba(204, 204, 220, 0.15); $input-border-color: rgba(204, 204, 220, 0.15);

View File

@ -204,7 +204,7 @@ $btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6);
// Forms // Forms
// ------------------------- // -------------------------
$input-bg: #fff; $input-bg: #fff;
$input-bg-disabled: rgba(36, 41, 46, 0.07); $input-bg-disabled: rgba(36, 41, 46, 0.04);
$input-color: rgba(36, 41, 46, 1); $input-color: rgba(36, 41, 46, 1);
$input-border-color: rgba(36, 41, 46, 0.30); $input-border-color: rgba(36, 41, 46, 0.30);