diff --git a/public/app/plugins/datasource/loki/components/LokiQueryField.tsx b/public/app/plugins/datasource/loki/components/LokiQueryField.tsx index f94d3aa03a3..4fb5196f309 100644 --- a/public/app/plugins/datasource/loki/components/LokiQueryField.tsx +++ b/public/app/plugins/datasource/loki/components/LokiQueryField.tsx @@ -66,6 +66,7 @@ export class LokiQueryField extends React.PureComponent @@ -81,6 +82,7 @@ export class LokiQueryField extends React.PureComponent diff --git a/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoFieldWrapper.test.tsx b/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoFieldWrapper.test.tsx index 68455e77d34..48000161d9c 100644 --- a/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoFieldWrapper.test.tsx +++ b/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoFieldWrapper.test.tsx @@ -21,6 +21,7 @@ function renderComponent({ onChange={onChange} onRunQuery={onRunQuery} runQueryOnBlur={runQueryOnBlur} + placeholder="Enter a Loki query (run with Shift+Enter)" /> ); } diff --git a/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.test.tsx b/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.test.tsx index 3c341a4e07c..a910e4112a1 100644 --- a/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.test.tsx +++ b/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.test.tsx @@ -16,6 +16,7 @@ function renderComponent({ initialValue = '', onRunQuery = jest.fn(), onBlur = j history={[]} onRunQuery={onRunQuery} onBlur={onBlur} + placeholder="Enter a Loki query (run with Shift+Enter)" /> ); } diff --git a/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.tsx b/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.tsx index 38464074038..92d35680a7b 100644 --- a/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.tsx +++ b/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.tsx @@ -6,7 +6,7 @@ import { v4 as uuidv4 } from 'uuid'; import { GrafanaTheme2 } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; import { languageConfiguration, monarchlanguage } from '@grafana/monaco-logql'; -import { useTheme2, ReactMonacoEditor, Monaco, monacoTypes } from '@grafana/ui'; +import { useTheme2, ReactMonacoEditor, Monaco, monacoTypes, MonacoEditor } from '@grafana/ui'; import { Props } from './MonacoQueryFieldProps'; import { getOverrideServices } from './getOverrideServices'; @@ -70,17 +70,24 @@ function ensureLogQL(monaco: Monaco) { } } -const getStyles = (theme: GrafanaTheme2) => { +const getStyles = (theme: GrafanaTheme2, placeholder: string) => { return { container: css` border-radius: ${theme.shape.borderRadius()}; border: 1px solid ${theme.components.input.borderColor}; width: 100%; `, + placeholder: css` + ::after { + content: '${placeholder}'; + font-family: ${theme.typography.fontFamilyMonospace}; + opacity: 0.3; + } + `, }; }; -const MonacoQueryField = ({ history, onBlur, onRunQuery, initialValue, datasource }: Props) => { +const MonacoQueryField = ({ history, onBlur, onRunQuery, initialValue, datasource, placeholder }: Props) => { const id = uuidv4(); // we need only one instance of `overrideServices` during the lifetime of the react component const overrideServicesRef = useRef(getOverrideServices()); @@ -94,7 +101,7 @@ const MonacoQueryField = ({ history, onBlur, onRunQuery, initialValue, datasourc const autocompleteCleanupCallback = useRef<(() => void) | null>(null); const theme = useTheme2(); - const styles = getStyles(theme); + const styles = getStyles(theme, placeholder); useEffect(() => { // when we unmount, we unregister the autocomplete-function, if it was registered @@ -103,6 +110,34 @@ const MonacoQueryField = ({ history, onBlur, onRunQuery, initialValue, datasourc }; }, []); + const setPlaceholder = (monaco: Monaco, editor: MonacoEditor) => { + const placeholderDecorators = [ + { + range: new monaco.Range(1, 1, 1, 1), + options: { + className: styles.placeholder, + isWholeLine: true, + }, + }, + ]; + + let decorators: string[] = []; + + const checkDecorators: () => void = () => { + const model = editor.getModel(); + + if (!model) { + return; + } + + const newDecorators = model.getValueLength() === 0 ? placeholderDecorators : []; + decorators = model.deltaDecorations(decorators, newDecorators); + }; + + checkDecorators(); + editor.onDidChangeModelContent(checkDecorators); + }; + return (
diff --git a/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryFieldProps.ts b/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryFieldProps.ts index 997256aeb32..56d310f7ff5 100644 --- a/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryFieldProps.ts +++ b/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryFieldProps.ts @@ -12,5 +12,6 @@ export type Props = { history: Array>; onRunQuery: (value: string) => void; onBlur: (value: string) => void; + placeholder: string; datasource: LokiDatasource; };