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

Prometheus: Updating editor value on Monaco's onDidChangeContent performance issues (#60191)

Browse Source 
debounce slow function that is running on each keystroke
This commit is contained in:
Galen Kistler 2022-12-15 14:15:57 -06:00 committed by GitHub
parent 5fd8d515be
commit f7bd85d7f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx
View File

@ -1,4 +1,5 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { debounce } from 'lodash';
import { promLanguageDefinition } from 'monaco-promql'; import { promLanguageDefinition } from 'monaco-promql';
import React, { useRef, useEffect } from 'react'; import React, { useRef, useEffect } from 'react';
import { useLatest } from 'react-use'; import { useLatest } from 'react-use';
@ -215,8 +216,16 @@ const MonacoQueryField = (props: Props) => {
// If you clicked into another field and haven't un-blurred the active field, // If you clicked into another field and haven't un-blurred the active field,
// then the query that is run will be stale, as the reference is only updated // then the query that is run will be stale, as the reference is only updated
// with the value of the last blurred input. // with the value of the last blurred input.
// This can run quite slowly, so we're debouncing this which should accomplish two things
// 1. Should prevent this function from blocking the current call stack by pushing into the web API callback queue
// 2. Should prevent a bunch of duplicates of this function being called as the user is typing
const updateCurrentEditorValue = debounce(() => {
const editorValue = editor.getValue();
onChangeRef.current(editorValue);
}, 300);
editor.getModel()?.onDidChangeContent(() => { editor.getModel()?.onDidChangeContent(() => {
onChangeRef.current(editor.getValue()); updateCurrentEditorValue();
}); });
// handle: shift + enter // handle: shift + enter