Tempo: Show search streaming status in query options (#90726)

* Show whether search streaming is enabled in query options

* Fix tests

* Address comments

public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.test.tsx

@@ -64,6 +64,7 @@ describe('TraceQLSearch', () => {
       ],
     },
   } as TempoDatasource;
+  datasource.isStreamingSearchEnabled = () => false;
   datasource.languageProvider = new TempoLanguageProvider(datasource);
   let query: TempoQuery = {
     refId: 'A',
@@ -216,6 +217,7 @@ describe('TraceQLSearch', () => {
         ],
       },
     } as TempoDatasource;
+    datasource.isStreamingSearchEnabled = () => false;
     datasource.languageProvider = new TempoLanguageProvider(datasource);
     await act(async () => {
       const { container } = render(

public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx

@@ -253,7 +253,11 @@ const TraceQLSearch = ({ datasource, query, onChange, onClearResults, app, addVa
             Edit in TraceQL
           </Button>
         </div>
-        <TempoQueryBuilderOptions onChange={onChange} query={query} />
+        <TempoQueryBuilderOptions
+          onChange={onChange}
+          query={query}
+          isStreaming={datasource.isStreamingSearchEnabled() ?? false}
+        />
       </div>
       {error ? (
         <Alert title="Unable to connect to Tempo search" severity="info" className={styles.alert}>

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

@@ -69,7 +69,11 @@ export function QueryEditor(props: Props) {
         onRunQuery={props.onRunQuery}
       />
       <div className={styles.optionsContainer}>
-        <TempoQueryBuilderOptions query={query} onChange={props.onChange} />
+        <TempoQueryBuilderOptions
+          query={query}
+          onChange={props.onChange}
+          isStreaming={props.datasource.isStreamingSearchEnabled() ?? false}
+        />
       </div>
     </>
   );

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

@@ -11,6 +11,7 @@ import { TempoQuery } from '../types';
 interface Props {
   onChange: (value: TempoQuery) => void;
   query: Partial<TempoQuery> & TempoQuery;
+  isStreaming: boolean;
 }
 
 /**
@@ -26,7 +27,7 @@ const parseIntWithFallback = (val: string, fallback: number) => {
   return isNaN(parsed) ? fallback : parsed;
 };
 
-export const TempoQueryBuilderOptions = React.memo<Props>(({ onChange, query }) => {
+export const TempoQueryBuilderOptions = React.memo<Props>(({ onChange, query, isStreaming }) => {
   if (!query.hasOwnProperty('limit')) {
     query.limit = DEFAULT_LIMIT;
   }
@@ -53,6 +54,7 @@ export const TempoQueryBuilderOptions = React.memo<Props>(({ onChange, query })
     `Spans Limit: ${query.spss || DEFAULT_SPSS}`,
     `Table Format: ${query.tableType === SearchTableType.Traces ? 'Traces' : 'Spans'}`,
     `Step: ${query.step || 'auto'}`,
+    `Streaming: ${isStreaming ? 'Enabled' : 'Disabled'}`,
   ];
 
   return (
@@ -104,10 +106,33 @@ export const TempoQueryBuilderOptions = React.memo<Props>(({ onChange, query })
               value={query.step}
             />
           </EditorField>
+          <EditorField label="Streaming" tooltip={<StreamingTooltip />} tooltipInteractive>
+            <div>{isStreaming ? 'Enabled' : 'Disabled'}</div>
+          </EditorField>
         </QueryOptionGroup>
       </EditorRow>
     </>
   );
 });
 
+const StreamingTooltip = () => {
+  return (
+    <div style={{ display: 'flex', gap: '4px' }}>
+      <span>
+        Indicates if streaming is currently enabled. Streaming allows you to view partial query results before the
+        entire query completes.
+      </span>
+      <a
+        href={'https://grafana.com/docs/tempo/latest/traceql/#stream-query-results'}
+        aria-label={'Learn more about streaming query results'}
+        target={'_blank'}
+        rel="noreferrer"
+        style={{ textDecoration: 'underline' }}
+      >
+        Learn more
+      </a>
+    </div>
+  );
+};
+
 TempoQueryBuilderOptions.displayName = 'TempoQueryBuilderOptions';