Tempo: Carry over query from Search tab to TraceQL tab (#79442)

* Carry over query from Search tab to TraceQL tab

* Update tracking

* Update flow

* Updates to logic
This commit is contained in:
Joey 2023-12-15 12:46:32 +00:00 committed by GitHub
parent 9e5826f40f
commit 7451f41967
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 4 deletions

View File

@ -151,7 +151,6 @@ class TempoQueryFieldComponent extends React.PureComponent<Props, State> {
});
this.onClearResults();
onChange({
...query,
queryType: v,
@ -205,6 +204,8 @@ class TempoQueryFieldComponent extends React.PureComponent<Props, State> {
query={query}
onRunQuery={this.props.onRunQuery}
onChange={onChange}
app={app}
onClearResults={this.onClearResults}
/>
)}
</>

View File

@ -1,21 +1,31 @@
import { css } from '@emotion/css';
import { defaults } from 'lodash';
import React from 'react';
import React, { useState } from 'react';
import { QueryEditorProps } from '@grafana/data';
import { InlineLabel, useStyles2 } from '@grafana/ui';
import { config, reportInteraction } from '@grafana/runtime';
import { Button, InlineLabel, useStyles2 } from '@grafana/ui';
import { generateQueryFromFilters } from '../SearchTraceQLEditor/utils';
import { TempoDatasource } from '../datasource';
import { defaultQuery, MyDataSourceOptions, TempoQuery } from '../types';
import { TempoQueryBuilderOptions } from './TempoQueryBuilderOptions';
import { TraceQLEditor } from './TraceQLEditor';
type Props = QueryEditorProps<TempoDatasource, TempoQuery, MyDataSourceOptions>;
type EditorProps = {
onClearResults: () => void;
};
type Props = EditorProps & QueryEditorProps<TempoDatasource, TempoQuery, MyDataSourceOptions>;
export function QueryEditor(props: Props) {
const styles = useStyles2(getStyles);
const query = defaults(props.query, defaultQuery);
const [showCopyFromSearchButton, setShowCopyFromSearchButton] = useState(() => {
const genQuery = generateQueryFromFilters(query.filters || []);
return genQuery === query.query || genQuery === '{}';
});
const onEditorChange = (value: string) => {
props.onChange({ ...query, query: value });
@ -29,6 +39,34 @@ export function QueryEditor(props: Props) {
Documentation
</a>
</InlineLabel>
{!showCopyFromSearchButton && (
<InlineLabel>
<div>
Continue editing the query from the Search tab?
<Button
variant="secondary"
size="sm"
onClick={() => {
reportInteraction('grafana_traces_copy_to_traceql_clicked', {
datasourceType: 'tempo',
app: props.app ?? '',
grafana_version: config.buildInfo.version,
});
props.onClearResults();
props.onChange({
...query,
query: generateQueryFromFilters(query.filters || []),
});
setShowCopyFromSearchButton(true);
}}
style={{ marginLeft: '10px' }}
>
Copy query from Search
</Button>
</div>
</InlineLabel>
)}
<TraceQLEditor
placeholder="Enter a TraceQL query or trace ID (run with Shift+Enter)"
value={query.query || ''}