Jaeger: Make search form fields more consistent with Tempo (#54026)

This commit is contained in:
Hamas Shafiq 2022-08-25 09:51:21 +01:00 committed by GitHub
parent 6200c6d70f
commit 5148464c88
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 4 deletions

View File

@ -96,13 +96,14 @@ export function SearchForm({ datasource, query, onChange }: Props) {
return ( return (
<div className={css({ maxWidth: '500px' })}> <div className={css({ maxWidth: '500px' })}>
<InlineFieldRow> <InlineFieldRow>
<InlineField label="Service" labelWidth={14} grow> <InlineField label="Service Name" labelWidth={14} grow>
<Select <Select
inputId="service" inputId="service"
options={serviceOptions} options={serviceOptions}
onOpenMenu={() => loadOptions('/api/services', 'services')} onOpenMenu={() => loadOptions('/api/services', 'services')}
isLoading={isLoading.services} isLoading={isLoading.services}
value={serviceOptions?.find((v) => v?.value === query.service) || undefined} value={serviceOptions?.find((v) => v?.value === query.service) || undefined}
placeholder="Select a service"
onChange={(v) => onChange={(v) =>
onChange({ onChange({
...query, ...query,
@ -118,7 +119,7 @@ export function SearchForm({ datasource, query, onChange }: Props) {
</InlineField> </InlineField>
</InlineFieldRow> </InlineFieldRow>
<InlineFieldRow> <InlineFieldRow>
<InlineField label="Operation" labelWidth={14} grow disabled={!query.service}> <InlineField label="Operation Name" labelWidth={14} grow disabled={!query.service}>
<Select <Select
inputId="operation" inputId="operation"
options={operationOptions} options={operationOptions}
@ -130,6 +131,7 @@ export function SearchForm({ datasource, query, onChange }: Props) {
} }
isLoading={isLoading.operations} isLoading={isLoading.operations}
value={operationOptions?.find((v) => v.value === query.operation) || null} value={operationOptions?.find((v) => v.value === query.operation) || null}
placeholder="Select an operation"
onChange={(v) => onChange={(v) =>
onChange({ onChange({
...query, ...query,
@ -144,7 +146,7 @@ export function SearchForm({ datasource, query, onChange }: Props) {
</InlineField> </InlineField>
</InlineFieldRow> </InlineFieldRow>
<InlineFieldRow> <InlineFieldRow>
<InlineField label="Tags" labelWidth={14} grow> <InlineField label="Tags" labelWidth={14} grow tooltip="Values should be in logfmt.">
<Input <Input
id="tags" id="tags"
value={transformToLogfmt(query.tags)} value={transformToLogfmt(query.tags)}

View File

@ -204,7 +204,7 @@ const NativeSearch = ({ datasource, query, onChange, onBlur, onRunQuery }: Props
</InlineField> </InlineField>
</InlineFieldRow> </InlineFieldRow>
<InlineFieldRow> <InlineFieldRow>
<InlineField label="Tags" labelWidth={14} grow tooltip="Values should be in the logfmt format."> <InlineField label="Tags" labelWidth={14} grow tooltip="Values should be in logfmt.">
<QueryField <QueryField
additionalPlugins={plugins} additionalPlugins={plugins}
query={query.search} query={query.search}