Tempo: Update the query whenever the value of the TraceQL editor changes (#57199)

This commit is contained in:
Hamas Shafiq 2022-10-21 16:01:53 +01:00 committed by GitHub
parent 5d7d54d076
commit 07ac388e8b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 3 deletions

View File

@ -95,7 +95,8 @@ class UnthemedCodeEditor extends PureComponent<Props> {
}; };
handleOnMount = (editor: MonacoEditorType, monaco: Monaco) => { handleOnMount = (editor: MonacoEditorType, monaco: Monaco) => {
const { onEditorDidMount } = this.props; const { onChange, onEditorDidMount } = this.props;
this.getEditorValue = () => editor.getValue(); this.getEditorValue = () => editor.getValue();
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, this.onSave); editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, this.onSave);
@ -103,6 +104,7 @@ class UnthemedCodeEditor extends PureComponent<Props> {
if (onEditorDidMount) { if (onEditorDidMount) {
languagePromise.then(() => onEditorDidMount(editor, monaco)); languagePromise.then(() => onEditorDidMount(editor, monaco));
editor.getModel()?.onDidChangeContent(() => onChange?.(editor.getValue()));
} }
}; };

View File

@ -42,6 +42,9 @@ export interface CodeEditorProps {
/** Handler to be performed when editor is blurred */ /** Handler to be performed when editor is blurred */
onBlur?: CodeEditorChangeHandler; onBlur?: CodeEditorChangeHandler;
/** Handler to be performed whenever the text inside the editor changes */
onChange?: CodeEditorChangeHandler;
/** Handler to be performed when Cmd/Ctrl+S is pressed */ /** Handler to be performed when Cmd/Ctrl+S is pressed */
onSave?: CodeEditorChangeHandler; onSave?: CodeEditorChangeHandler;

View File

@ -22,7 +22,7 @@ interface Props {
} }
export function TraceQLEditor(props: Props) { export function TraceQLEditor(props: Props) {
const { onRunQuery, placeholder } = props; const { onChange, onRunQuery, placeholder } = props;
const setupAutocompleteFn = useAutocomplete(props.datasource); const setupAutocompleteFn = useAutocomplete(props.datasource);
const theme = useTheme2(); const theme = useTheme2();
const styles = getStyles(theme, placeholder); const styles = getStyles(theme, placeholder);
@ -31,7 +31,8 @@ export function TraceQLEditor(props: Props) {
<CodeEditor <CodeEditor
value={props.value} value={props.value}
language={langId} language={langId}
onBlur={props.onChange} onBlur={onChange}
onChange={onChange}
height={'30px'} height={'30px'}
containerStyles={styles.queryField} containerStyles={styles.queryField}
monacoOptions={{ monacoOptions={{