Explore: Standardize trace query field styling (#38796)

public/app/plugins/datasource/jaeger/components/QueryEditor.tsx

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

public/app/plugins/datasource/jaeger/components/SearchForm.tsx

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

public/app/plugins/datasource/tempo/NativeSearch.tsx

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

public/app/plugins/datasource/tempo/QueryField.tsx

@@ -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} />}
       </>

public/app/plugins/datasource/zipkin/QueryField.tsx

@@ -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>
       )}
     </>
   );