IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-22 08:56:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

Explore: Standardize trace query field styling (#38796)

Browse Source
This commit is contained in:
Connor Lindsey 2021-09-02 07:30:11 -06:00 committed by GitHub
parent ea65e11c44
commit fb17f053d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 36 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/plugins/datasource/jaeger/components/QueryEditor.tsx
View File

@ -35,7 +35,7 @@ export function QueryEditor({ datasource, query, onChange, onRunQuery }: Props)
default:
return (
<InlineFieldRow>
<InlineField label="Trace ID" labelWidth={21} grow>
<InlineField label="Trace ID" labelWidth={14} grow>
<QueryField
query={query.query}
onChange={onChangeQuery}
@ -52,7 +52,7 @@ export function QueryEditor({ datasource, query, onChange, onRunQuery }: Props)
return (
<>
<div className={css({ width: query.queryType === 'upload' ? '100%' : '50%' })}>
<div className={css({ width: '100%' })}>
<InlineFieldRow>
<InlineField label="Query type">
<RadioButtonGroup<JaegerQueryType>

13
public/app/plugins/datasource/jaeger/components/SearchForm.tsx
View File

@ -1,3 +1,4 @@
import { css } from '@emotion/css';
import { SelectableValue } from '@grafana/data';
import { InlineField, InlineFieldRow, Input, Select } from '@grafana/ui';
import React, { useEffect, useState } from 'react';
@ -49,9 +50,9 @@ export function SearchForm({ datasource, query, onChange }: Props) {
}, [datasource, query.service]);
return (
<>
<div className={css({ maxWidth: '500px' })}>
<InlineFieldRow>
<InlineField label="Service" labelWidth={21} grow>
<InlineField label="Service" labelWidth={14} grow>
<Select
menuShouldPortal
options={serviceOptions}
@ -64,11 +65,12 @@ export function SearchForm({ datasource, query, onChange }: Props) {
});
}}
menuPlacement="bottom"
isClearable
/>
</InlineField>
</InlineFieldRow>
<InlineFieldRow>
<InlineField label="Operation" labelWidth={21} grow disabled={!query.service}>
<InlineField label="Operation" labelWidth={14} grow disabled={!query.service}>
<Select
menuShouldPortal
options={operationOptions}
@ -80,11 +82,12 @@ export function SearchForm({ datasource, query, onChange }: Props) {
})
}
menuPlacement="bottom"
isClearable
/>
</InlineField>
</InlineFieldRow>
<InlineFieldRow>
<InlineField label="Tags" labelWidth={21} grow>
<InlineField label="Tags" labelWidth={14} grow>
<Input
value={transformToLogfmt(query.tags)}
placeholder="http.status_code=200 error=true"
@ -98,7 +101,7 @@ export function SearchForm({ datasource, query, onChange }: Props) {
</InlineField>
</InlineFieldRow>
<AdvancedOptions query={query} onChange={onChange} />
</>
</div>
);
}

1
public/app/plugins/datasource/tempo/NativeSearch.tsx
View File

@ -121,6 +121,7 @@ const NativeSearch = ({ datasource, query, onChange, onBlur, onRunQuery }: Props
search: value,
});
}}
placeholder="http.status_code=200 error=true"
cleanText={cleanText}
onRunQuery={onRunQuery}
syntaxLoaded={hasSyntaxLoaded}

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

@ -1,13 +1,12 @@
import { css } from '@emotion/css';
import { DataSourceApi, ExploreQueryFieldProps, SelectableValue } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { config, getDataSourceSrv } from '@grafana/runtime';
import {
FileDropzone,
InlineField,
InlineFieldRow,
InlineLabel,
LegacyForms,
QueryField,
RadioButtonGroup,
Themeable2,
withTheme2,
@ -160,28 +159,25 @@ class TempoQueryFieldComponent extends React.PureComponent<Props, State> {
</div>
)}
{query.queryType === 'traceId' && (
<LegacyForms.FormField
label="Trace ID"
labelWidth={4}
inputEl={
<div className="slate-query-field__wrapper">
<div className="slate-query-field" aria-label={selectors.components.QueryField.container}>
<input
style={{ width: '100%' }}
value={query.query || ''}
onChange={(e) =>
onChange({
...query,
query: e.currentTarget.value,
queryType: 'traceId',
linkedQuery: undefined,
})
}
/>
</div>
</div>
}
/>
<InlineFieldRow>
<InlineField label="Trace ID" labelWidth={14} grow>
<QueryField
query={query.query}
onChange={(val) => {
onChange({
...query,
query: val,
queryType: 'traceId',
linkedQuery: undefined,
});
}}
onBlur={this.props.onBlur}
onRunQuery={this.props.onRunQuery}
placeholder={'Enter a Trace ID (run with Shift+Enter)'}
portalOrigin="tempo"
/>
</InlineField>
</InlineFieldRow>
)}
{query.queryType === 'serviceMap' && <ServiceMapSection graphDatasourceUid={graphDatasourceUid} />}
</>

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

@ -77,12 +77,10 @@ export const ZipkinQueryField = ({ query, onChange, onRunQuery, datasource }: Pr
/>
</div>
) : (
<div className="gf-form-inline gf-form-inline--nowrap">
<div className="gf-form flex-shrink-0">
<ButtonCascader options={cascaderOptions} onChange={onSelectTrace} loadData={onLoadOptions}>
Traces
</ButtonCascader>
</div>
<InlineFieldRow>
<ButtonCascader options={cascaderOptions} onChange={onSelectTrace} loadData={onLoadOptions}>
Traces
</ButtonCascader>
<div className="gf-form gf-form--grow flex-shrink-1 min-width-15">
<QueryField
query={query.query}
@ -92,7 +90,7 @@ export const ZipkinQueryField = ({ query, onChange, onRunQuery, datasource }: Pr
portalOrigin="zipkin"
/>
</div>
</div>
</InlineFieldRow>
)}
</>
);