Tempo: Add an options component under the TraceQL query field (#54435)

public/app/plugins/datasource/tempo/traceql/QueryEditor.tsx

@@ -1,25 +1,38 @@
+import { css } from '@emotion/css';
 import { defaults } from 'lodash';
 import React from 'react';
 
 import { QueryEditorProps } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
 
 import { TempoDatasource, TempoQuery } from '../datasource';
 import { defaultQuery, MyDataSourceOptions } from '../types';
 
+import { TempoQueryBuilderOptions } from './TempoQueryBuilderOptions';
 import { TraceQLEditor } from './TraceQLEditor';
 
 type Props = QueryEditorProps<TempoDatasource, TempoQuery, MyDataSourceOptions>;
 
 export function QueryEditor(props: Props) {
-  function onEditorChange(value: string) {
-    props.onChange({ ...props.query, query: value });
-  }
+  const styles = useStyles2(getStyles);
+  const query = defaults(props.query, defaultQuery);
 
-  let query = defaults(props.query, defaultQuery);
+  const onEditorChange = (value: string) => {
+    props.onChange({ ...query, query: value });
+  };
 
   return (
-    <div className="gf-form">
+    <>
       <TraceQLEditor value={query.query} onChange={onEditorChange} datasource={props.datasource} />
-    </div>
+      <div className={styles.optionsContainer}>
+        <TempoQueryBuilderOptions query={query} onChange={props.onChange} />
+      </div>
+    </>
   );
 }
+
+const getStyles = () => ({
+  optionsContainer: css`
+    margin-top: 10px;
+  `,
+});

public/app/plugins/datasource/tempo/traceql/TempoQueryBuilderOptions.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { AutoSizeInput, EditorField, EditorRow } from '@grafana/ui';
+import { QueryOptionGroup } from 'app/plugins/datasource/prometheus/querybuilder/shared/QueryOptionGroup';
+
+import { TempoQuery } from '../datasource';
+
+interface Props {
+  onChange: (value: TempoQuery) => void;
+  query: Partial<TempoQuery> & TempoQuery;
+}
+
+export const TempoQueryBuilderOptions = React.memo<Props>(({ onChange, query }) => {
+  const onLimitChange = (e: React.FormEvent<HTMLInputElement>) => {
+    onChange({ ...query, limit: parseInt(e.currentTarget.value, 10) });
+  };
+
+  return (
+    <>
+      <EditorRow>
+        <QueryOptionGroup title="Options" collapsedInfo={[`Limit: ${query.limit || 10}`]}>
+          <EditorField label="Limit" tooltip="Maximum number of traces to return.">
+            <AutoSizeInput
+              className="width-4"
+              placeholder="auto"
+              type="number"
+              min={1}
+              defaultValue={10}
+              onCommitChange={onLimitChange}
+              value={query.limit}
+            />
+          </EditorField>
+        </QueryOptionGroup>
+      </EditorRow>
+    </>
+  );
+});
+
+TempoQueryBuilderOptions.displayName = 'TempoQueryBuilderOptions';