IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Tempo: Add query ref in the query editor (#81343)

Browse Source 
* Add query ref

* Fix lint

* Add comment

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

Co-authored-by: Fabrizio <135109076+fabrizio-grafana@users.noreply.github.com>

---------

Co-authored-by: Fabrizio <135109076+fabrizio-grafana@users.noreply.github.com>
This commit is contained in:
Joey 2024-01-31 09:08:06 +00:00 committed by GitHub
parent 0d9886a654
commit b9f5042044
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/app/plugins/datasource/tempo/traceql/QueryEditor.tsx
View File

@ -1,6 +1,6 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { defaults } from 'lodash'; import { defaults } from 'lodash';
import React, { useState } from 'react'; import React, { useRef, useState } from 'react';
import { QueryEditorProps } from '@grafana/data'; import { QueryEditorProps } from '@grafana/data';
import { config, reportInteraction } from '@grafana/runtime'; import { config, reportInteraction } from '@grafana/runtime';
@ -27,8 +27,14 @@ export function QueryEditor(props: Props) {
return genQuery === query.query || genQuery === '{}'; return genQuery === query.query || genQuery === '{}';
}); });
// The Monaco Editor uses the first version of props.onChange in handleOnMount i.e. always has the initial
// value of query because underlying Monaco editor is passed `query` below in the onEditorChange callback.
// handleOnMount is called only once when the editor is mounted and does not get updates to query.
// So we need useRef to get the latest version of query in the onEditorChange callback.
const queryRef = useRef(query);
queryRef.current = query;
const onEditorChange = (value: string) => { const onEditorChange = (value: string) => {
props.onChange({ ...query, query: value }); props.onChange({ ...queryRef.current, query: value });
}; };
return ( return (