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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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.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.components.TraceViewer.spanBar().should('have.length', 100);
e2e.components.TraceViewer.spanBar().should('be.visible');
e2e.pages.Explore.General.scrollBar().scrollTo('center');

View File

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

View File

@ -209,7 +209,7 @@ $btn-active-box-shadow: 0px 0px 4px rgba(255, 120, 10, 0.5);
// Forms
// -------------------------
$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-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
// -------------------------
$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-border-color: rgba(36, 41, 46, 0.30);