mirror of https://github.com/grafana/grafana
Loki: query editor using Monaco (#55391)
* loki: switch to a monaco-based query field, step 1 (#46291) * loki: use monaco-logql (#46318) * loki: use monaco-logql * updated monaco-logql * fix all the tests (#46327) * loki: recommend parser (#46362) * loki: recommend parser * additional improvements * more improvements * type and lint fixes * more improvements * trigger autocomplete on focus * rename * loki: more smart features (#46414) * loki: more smart features * loki: updated syntax-highlight version * better explanation (#46443) * better explanation * improved help-text Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com> Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com> * Fix label * feat(loki-monaco-editor): add monaco-logql as a dependency * feat(loki-monaco-editor): add back range function removed during merge * feat(loki-monaco-editor): sync imports with recent changes * feat(loki-monaco-editor): add missing lang provider functions * feat(loki-monaco-editor): fix imports * feat(loki-monaco-editor): display monaco editor by default Temporarily * Chore: remove commented code * Chore: minor refactor to NeverCaseError * Chore: minor code cleanups * feat(loki-monaco-editor): add history implementation Will see how it behaves and base the history slicing on tangible feedback * feat(loki-monaco-editor): turn completion data provider into a class * Chore: fix missing imports * feat(loki-monaco-editor): refactor data provider methods Move complexity scattered everywhere to the provider * Chore: clean up redundant code * Chore: minor comments cleanup * Chore: simplify override services * Chore: rename callback * feat(loki-monaco-editor): use query hints implementation to parse expression * feat(loki-monaco-editor): improve function name * Chore: remove superfluous variable in favor of destructuring * Chore: remove unused imports * Chore: make method async * feat(loki-monaco-editor): fix deprecations and errors in situation * feat(loki-monaco-editor): comment failing test case * Chore: remove comment from test * Chore: remove duplicated completion item * Chore: fix linting issues * Chore: update language provider test * Chore: update datasource test * feat(loki-monaco-editor): create feature flag * feat(loki-monaco-editor): place the editor under a feature flag * Chore: add completion unit test * Chore: add completion data provider test * Chore: remove unwanted export * Chore: remove unused export * Chore(loki-query-field): destructure all props * chore(loki-completions): remove odd string * fix(loki-completions): remove rate_interval Not supported * fix(loki-completions): remove line filters for after pipe case We shouldn't offer line filters if we are after first pipe. * refactor(loki-datasource): update default parameter * fix(loki-syntax): remove outdated documentation * Update capitalization in pkg/services/featuremgmt/registry.go Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com> * refactor(situation): use node types instead of names * Chore: comment line filters pending implementation It's breaking the build due to a linting error. * Chore: update feature flag test after capitalization change * Revert "fix(loki-completions): remove line filters for after pipe case" This reverts commitpull/56494/head3d003ca4bc. * Revert "Chore: comment line filters pending implementation" This reverts commit84bfe76a6a. Co-authored-by: Gábor Farkas <gabor.farkas@gmail.com> Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com> Co-authored-by: Ivana Huckova <ivana.huckova@gmail.com>
Matias Chomicki
3 years ago
committed by
GitHub
parent
8fd4fcb987
commit
729ce8bb72
@ -0,0 +1,184 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
import React, { useRef, useEffect } from 'react'; |
||||||
|
import { useLatest } from 'react-use'; |
||||||
|
|
||||||
|
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 { Props } from './MonacoQueryFieldProps'; |
||||||
|
import { getOverrideServices } from './getOverrideServices'; |
||||||
|
import { getCompletionProvider, getSuggestOptions } from './monaco-completion-provider'; |
||||||
|
import { CompletionDataProvider } from './monaco-completion-provider/CompletionDataProvider'; |
||||||
|
|
||||||
|
const options: monacoTypes.editor.IStandaloneEditorConstructionOptions = { |
||||||
|
codeLens: false, |
||||||
|
contextmenu: false, |
||||||
|
// we need `fixedOverflowWidgets` because otherwise in grafana-dashboards
|
||||||
|
// the popup is clipped by the panel-visualizations.
|
||||||
|
fixedOverflowWidgets: true, |
||||||
|
folding: false, |
||||||
|
fontSize: 14, |
||||||
|
lineDecorationsWidth: 8, // used as "padding-left"
|
||||||
|
lineNumbers: 'off', |
||||||
|
minimap: { enabled: false }, |
||||||
|
overviewRulerBorder: false, |
||||||
|
overviewRulerLanes: 0, |
||||||
|
padding: { |
||||||
|
// these numbers were picked so that visually this matches the previous version
|
||||||
|
// of the query-editor the best
|
||||||
|
top: 4, |
||||||
|
bottom: 5, |
||||||
|
}, |
||||||
|
renderLineHighlight: 'none', |
||||||
|
scrollbar: { |
||||||
|
vertical: 'hidden', |
||||||
|
verticalScrollbarSize: 8, // used as "padding-right"
|
||||||
|
horizontal: 'hidden', |
||||||
|
horizontalScrollbarSize: 0, |
||||||
|
}, |
||||||
|
scrollBeyondLastLine: false, |
||||||
|
suggest: getSuggestOptions(), |
||||||
|
suggestFontSize: 12, |
||||||
|
wordWrap: 'on', |
||||||
|
}; |
||||||
|
|
||||||
|
// this number was chosen by testing various values. it might be necessary
|
||||||
|
// because of the width of the border, not sure.
|
||||||
|
//it needs to do 2 things:
|
||||||
|
// 1. when the editor is single-line, it should make the editor height be visually correct
|
||||||
|
// 2. when the editor is multi-line, the editor should not be "scrollable" (meaning,
|
||||||
|
// you do a scroll-movement in the editor, and it will scroll the content by a couple pixels
|
||||||
|
// up & down. this we want to avoid)
|
||||||
|
const EDITOR_HEIGHT_OFFSET = 2; |
||||||
|
|
||||||
|
const LANG_ID = 'logql'; |
||||||
|
|
||||||
|
// we must only run the lang-setup code once
|
||||||
|
let LANGUAGE_SETUP_STARTED = false; |
||||||
|
|
||||||
|
function ensureLogQL(monaco: Monaco) { |
||||||
|
if (LANGUAGE_SETUP_STARTED === false) { |
||||||
|
LANGUAGE_SETUP_STARTED = true; |
||||||
|
monaco.languages.register({ id: LANG_ID }); |
||||||
|
|
||||||
|
monaco.languages.setMonarchTokensProvider(LANG_ID, monarchlanguage); |
||||||
|
monaco.languages.setLanguageConfiguration(LANG_ID, languageConfiguration); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const getStyles = (theme: GrafanaTheme2) => { |
||||||
|
return { |
||||||
|
container: css` |
||||||
|
border-radius: ${theme.shape.borderRadius()}; |
||||||
|
border: 1px solid ${theme.components.input.borderColor}; |
||||||
|
`,
|
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
const MonacoQueryField = ({ languageProvider, history, onBlur, onRunQuery, initialValue }: Props) => { |
||||||
|
// we need only one instance of `overrideServices` during the lifetime of the react component
|
||||||
|
const overrideServicesRef = useRef(getOverrideServices()); |
||||||
|
const containerRef = useRef<HTMLDivElement>(null); |
||||||
|
|
||||||
|
const langProviderRef = useLatest(languageProvider); |
||||||
|
const historyRef = useLatest(history); |
||||||
|
const onRunQueryRef = useLatest(onRunQuery); |
||||||
|
const onBlurRef = useLatest(onBlur); |
||||||
|
|
||||||
|
const autocompleteCleanupCallback = useRef<(() => void) | null>(null); |
||||||
|
|
||||||
|
const theme = useTheme2(); |
||||||
|
const styles = getStyles(theme); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
// when we unmount, we unregister the autocomplete-function, if it was registered
|
||||||
|
return () => { |
||||||
|
autocompleteCleanupCallback.current?.(); |
||||||
|
}; |
||||||
|
}, []); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
aria-label={selectors.components.QueryField.container} |
||||||
|
className={styles.container} |
||||||
|
// NOTE: we will be setting inline-style-width/height on this element
|
||||||
|
ref={containerRef} |
||||||
|
> |
||||||
|
<ReactMonacoEditor |
||||||
|
overrideServices={overrideServicesRef.current} |
||||||
|
options={options} |
||||||
|
language={LANG_ID} |
||||||
|
value={initialValue} |
||||||
|
beforeMount={(monaco) => { |
||||||
|
ensureLogQL(monaco); |
||||||
|
}} |
||||||
|
onMount={(editor, monaco) => { |
||||||
|
// we setup on-blur
|
||||||
|
editor.onDidBlurEditorWidget(() => { |
||||||
|
onBlurRef.current(editor.getValue()); |
||||||
|
}); |
||||||
|
const dataProvider = new CompletionDataProvider(langProviderRef.current, historyRef.current); |
||||||
|
const completionProvider = getCompletionProvider(monaco, dataProvider); |
||||||
|
|
||||||
|
// completion-providers in monaco are not registered directly to editor-instances,
|
||||||
|
// they are registered to languages. this makes it hard for us to have
|
||||||
|
// separate completion-providers for every query-field-instance
|
||||||
|
// (but we need that, because they might connect to different datasources).
|
||||||
|
// the trick we do is, we wrap the callback in a "proxy",
|
||||||
|
// and in the proxy, the first thing is, we check if we are called from
|
||||||
|
// "our editor instance", and if not, we just return nothing. if yes,
|
||||||
|
// we call the completion-provider.
|
||||||
|
const filteringCompletionProvider: monacoTypes.languages.CompletionItemProvider = { |
||||||
|
...completionProvider, |
||||||
|
provideCompletionItems: (model, position, context, token) => { |
||||||
|
// if the model-id does not match, then this call is from a different editor-instance,
|
||||||
|
// not "our instance", so return nothing
|
||||||
|
if (editor.getModel()?.id !== model.id) { |
||||||
|
return { suggestions: [] }; |
||||||
|
} |
||||||
|
return completionProvider.provideCompletionItems(model, position, context, token); |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
const { dispose } = monaco.languages.registerCompletionItemProvider(LANG_ID, filteringCompletionProvider); |
||||||
|
|
||||||
|
autocompleteCleanupCallback.current = dispose; |
||||||
|
// this code makes the editor resize itself so that the content fits
|
||||||
|
// (it will grow taller when necessary)
|
||||||
|
// FIXME: maybe move this functionality into CodeEditor, like:
|
||||||
|
// <CodeEditor resizingMode="single-line"/>
|
||||||
|
const updateElementHeight = () => { |
||||||
|
const containerDiv = containerRef.current; |
||||||
|
if (containerDiv !== null) { |
||||||
|
const pixelHeight = editor.getContentHeight(); |
||||||
|
containerDiv.style.height = `${pixelHeight + EDITOR_HEIGHT_OFFSET}px`; |
||||||
|
containerDiv.style.width = '100%'; |
||||||
|
const pixelWidth = containerDiv.clientWidth; |
||||||
|
editor.layout({ width: pixelWidth, height: pixelHeight }); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
editor.onDidContentSizeChange(updateElementHeight); |
||||||
|
updateElementHeight(); |
||||||
|
|
||||||
|
// handle: shift + enter
|
||||||
|
// FIXME: maybe move this functionality into CodeEditor?
|
||||||
|
editor.addCommand(monaco.KeyMod.Shift | monaco.KeyCode.Enter, () => { |
||||||
|
onRunQueryRef.current(editor.getValue()); |
||||||
|
}); |
||||||
|
|
||||||
|
editor.onDidFocusEditorText(() => { |
||||||
|
if (editor.getValue().trim() === '') { |
||||||
|
editor.trigger('', 'editor.action.triggerSuggest', {}); |
||||||
|
} |
||||||
|
}); |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
// Default export for lazy load.
|
||||||
|
export default MonacoQueryField; |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
import React, { Suspense } from 'react'; |
||||||
|
|
||||||
|
import { Props } from './MonacoQueryFieldProps'; |
||||||
|
|
||||||
|
const Field = React.lazy(() => import(/* webpackChunkName: "loki-query-field" */ './MonacoQueryField')); |
||||||
|
|
||||||
|
export const MonacoQueryFieldLazy = (props: Props) => { |
||||||
|
return ( |
||||||
|
<Suspense fallback={null}> |
||||||
|
<Field {...props} /> |
||||||
|
</Suspense> |
||||||
|
); |
||||||
|
}; |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
import { HistoryItem } from '@grafana/data'; |
||||||
|
|
||||||
|
import type LanguageProvider from '../../LanguageProvider'; |
||||||
|
import { LokiQuery } from '../../types'; |
||||||
|
|
||||||
|
// we need to store this in a separate file,
|
||||||
|
// because we have an async-wrapper around,
|
||||||
|
// the react-component, and it needs the same
|
||||||
|
// props as the sync-component.
|
||||||
|
export type Props = { |
||||||
|
initialValue: string; |
||||||
|
languageProvider: LanguageProvider; |
||||||
|
history: Array<HistoryItem<LokiQuery>>; |
||||||
|
onRunQuery: (value: string) => void; |
||||||
|
onBlur: (value: string) => void; |
||||||
|
}; |
||||||
@ -0,0 +1,34 @@ |
|||||||
|
import React, { useRef } from 'react'; |
||||||
|
|
||||||
|
import { MonacoQueryFieldLazy } from './MonacoQueryFieldLazy'; |
||||||
|
import { Props as MonacoProps } from './MonacoQueryFieldProps'; |
||||||
|
|
||||||
|
type Props = Omit<MonacoProps, 'onRunQuery' | 'onBlur'> & { |
||||||
|
onChange: (query: string) => void; |
||||||
|
onRunQuery: () => void; |
||||||
|
runQueryOnBlur: boolean; |
||||||
|
}; |
||||||
|
|
||||||
|
export const MonacoQueryFieldWrapper = (props: Props) => { |
||||||
|
const lastRunValueRef = useRef<string | null>(null); |
||||||
|
const { runQueryOnBlur, onRunQuery, onChange, ...rest } = props; |
||||||
|
|
||||||
|
const handleRunQuery = (value: string) => { |
||||||
|
lastRunValueRef.current = value; |
||||||
|
onChange(value); |
||||||
|
onRunQuery(); |
||||||
|
}; |
||||||
|
|
||||||
|
const handleBlur = (value: string) => { |
||||||
|
if (runQueryOnBlur) { |
||||||
|
// run handleRunQuery only if the current value is different from the last-time-executed value
|
||||||
|
if (value !== lastRunValueRef.current) { |
||||||
|
handleRunQuery(value); |
||||||
|
} |
||||||
|
} else { |
||||||
|
onChange(value); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
return <MonacoQueryFieldLazy onRunQuery={handleRunQuery} onBlur={handleBlur} {...rest} />; |
||||||
|
}; |
||||||
@ -0,0 +1,112 @@ |
|||||||
|
import { monacoTypes } from '@grafana/ui'; |
||||||
|
|
||||||
|
// this thing here is a workaround in a way.
|
||||||
|
// what we want to achieve, is that when the autocomplete-window
|
||||||
|
// opens, the "second, extra popup" with the extra help,
|
||||||
|
// also opens automatically.
|
||||||
|
// but there is no API to achieve it.
|
||||||
|
// the way to do it is to implement the `storageService`
|
||||||
|
// interface, and provide our custom implementation,
|
||||||
|
// which will default to `true` for the correct string-key.
|
||||||
|
// unfortunately, while the typescript-interface exists,
|
||||||
|
// it is not exported from monaco-editor,
|
||||||
|
// so we cannot rely on typescript to make sure
|
||||||
|
// we do it right. all we can do is to manually
|
||||||
|
// lookup the interface, and make sure we code our code right.
|
||||||
|
// our code is a "best effort" approach,
|
||||||
|
// i am not 100% how the `scope` and `target` things work,
|
||||||
|
// but so far it seems to work ok.
|
||||||
|
// i would use an another approach, if there was one available.
|
||||||
|
|
||||||
|
function makeStorageService() { |
||||||
|
// we need to return an object that fulfills this interface:
|
||||||
|
// https://github.com/microsoft/vscode/blob/ff1e16eebb93af79fd6d7af1356c4003a120c563/src/vs/platform/storage/common/storage.ts#L37
|
||||||
|
// unfortunately it is not export from monaco-editor
|
||||||
|
|
||||||
|
const strings = new Map<string, string>(); |
||||||
|
|
||||||
|
// we want this to be true by default
|
||||||
|
strings.set('expandSuggestionDocs', true.toString()); |
||||||
|
|
||||||
|
return { |
||||||
|
// we do not implement the on* handlers
|
||||||
|
onDidChangeValue: (data: unknown): void => undefined, |
||||||
|
onDidChangeTarget: (data: unknown): void => undefined, |
||||||
|
onWillSaveState: (data: unknown): void => undefined, |
||||||
|
|
||||||
|
get: (key: string, scope: unknown, fallbackValue?: string): string | undefined => { |
||||||
|
return strings.get(key) ?? fallbackValue; |
||||||
|
}, |
||||||
|
|
||||||
|
getBoolean: (key: string, scope: unknown, fallbackValue?: boolean): boolean | undefined => { |
||||||
|
const val = strings.get(key); |
||||||
|
if (val !== undefined) { |
||||||
|
// the interface docs say the value will be converted
|
||||||
|
// to a boolean but do not specify how, so we improvise
|
||||||
|
return val === 'true'; |
||||||
|
} else { |
||||||
|
return fallbackValue; |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
getNumber: (key: string, scope: unknown, fallbackValue?: number): number | undefined => { |
||||||
|
const val = strings.get(key); |
||||||
|
if (val !== undefined) { |
||||||
|
return parseInt(val, 10); |
||||||
|
} else { |
||||||
|
return fallbackValue; |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
store: ( |
||||||
|
key: string, |
||||||
|
value: string | boolean | number | undefined | null, |
||||||
|
scope: unknown, |
||||||
|
target: unknown |
||||||
|
): void => { |
||||||
|
// the interface docs say if the value is nullish, it should act as delete
|
||||||
|
if (value === null || value === undefined) { |
||||||
|
strings.delete(key); |
||||||
|
} else { |
||||||
|
strings.set(key, value.toString()); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
remove: (key: string, scope: unknown): void => { |
||||||
|
strings.delete(key); |
||||||
|
}, |
||||||
|
|
||||||
|
keys: (scope: unknown, target: unknown): string[] => { |
||||||
|
return Array.from(strings.keys()); |
||||||
|
}, |
||||||
|
|
||||||
|
logStorage: (): void => { |
||||||
|
console.log('logStorage: not implemented'); |
||||||
|
}, |
||||||
|
|
||||||
|
migrate: (): Promise<void> => { |
||||||
|
// we do not implement this
|
||||||
|
return Promise.resolve(undefined); |
||||||
|
}, |
||||||
|
|
||||||
|
isNew: (scope: unknown): boolean => { |
||||||
|
// we create a new storage for every session, we do not persist it,
|
||||||
|
// so we return `true`.
|
||||||
|
return true; |
||||||
|
}, |
||||||
|
|
||||||
|
flush: (reason?: unknown): Promise<void> => { |
||||||
|
// we do not implement this
|
||||||
|
return Promise.resolve(undefined); |
||||||
|
}, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
let overrideServices: monacoTypes.editor.IEditorOverrideServices = { |
||||||
|
storageService: makeStorageService(), |
||||||
|
}; |
||||||
|
|
||||||
|
export function getOverrideServices(): monacoTypes.editor.IEditorOverrideServices { |
||||||
|
// One instance of this for every query editor
|
||||||
|
return overrideServices; |
||||||
|
} |
||||||
@ -0,0 +1,90 @@ |
|||||||
|
import { HistoryItem } from '@grafana/data'; |
||||||
|
|
||||||
|
import LokiLanguageProvider from '../../../LanguageProvider'; |
||||||
|
import { LokiDatasource } from '../../../datasource'; |
||||||
|
import { createLokiDatasource } from '../../../mocks'; |
||||||
|
import { LokiQuery } from '../../../types'; |
||||||
|
|
||||||
|
import { CompletionDataProvider } from './CompletionDataProvider'; |
||||||
|
import { Label } from './situation'; |
||||||
|
|
||||||
|
const history = [ |
||||||
|
{ |
||||||
|
ts: 12345678, |
||||||
|
query: { |
||||||
|
refId: 'test-1', |
||||||
|
expr: '{test: unit}', |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
ts: 87654321, |
||||||
|
query: { |
||||||
|
refId: 'test-1', |
||||||
|
expr: '{unit: test}', |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
ts: 0, |
||||||
|
query: { |
||||||
|
refId: 'test-0', |
||||||
|
}, |
||||||
|
}, |
||||||
|
]; |
||||||
|
const labelKeys = ['place', 'source']; |
||||||
|
const labelValues = ['moon', 'luna']; |
||||||
|
const otherLabels: Label[] = [ |
||||||
|
{ |
||||||
|
name: 'place', |
||||||
|
value: 'luna', |
||||||
|
op: '=', |
||||||
|
}, |
||||||
|
]; |
||||||
|
const seriesLabels = { place: ['series', 'labels'], source: [], other: [] }; |
||||||
|
const parserAndLabelKeys = { |
||||||
|
extractedLabelKeys: ['extracted', 'label', 'keys'], |
||||||
|
hasJSON: true, |
||||||
|
hasLogfmt: false, |
||||||
|
}; |
||||||
|
|
||||||
|
describe('CompletionDataProvider', () => { |
||||||
|
let completionProvider: CompletionDataProvider, languageProvider: LokiLanguageProvider, datasource: LokiDatasource; |
||||||
|
beforeEach(() => { |
||||||
|
datasource = createLokiDatasource(); |
||||||
|
languageProvider = new LokiLanguageProvider(datasource); |
||||||
|
completionProvider = new CompletionDataProvider(languageProvider, history as Array<HistoryItem<LokiQuery>>); |
||||||
|
|
||||||
|
jest.spyOn(languageProvider, 'getLabelKeys').mockReturnValue(labelKeys); |
||||||
|
jest.spyOn(languageProvider, 'getLabelValues').mockResolvedValue(labelValues); |
||||||
|
jest.spyOn(languageProvider, 'getSeriesLabels').mockResolvedValue(seriesLabels); |
||||||
|
jest.spyOn(languageProvider, 'getParserAndLabelKeys').mockResolvedValue(parserAndLabelKeys); |
||||||
|
}); |
||||||
|
|
||||||
|
test('Returns the expected history entries', () => { |
||||||
|
expect(completionProvider.getHistory()).toEqual(['{test: unit}', '{unit: test}']); |
||||||
|
}); |
||||||
|
|
||||||
|
test('Returns the expected label names with no other labels', async () => { |
||||||
|
expect(await completionProvider.getLabelNames([])).toEqual(labelKeys); |
||||||
|
}); |
||||||
|
|
||||||
|
test('Returns the expected label names with other labels', async () => { |
||||||
|
expect(await completionProvider.getLabelNames(otherLabels)).toEqual(['source', 'other']); |
||||||
|
}); |
||||||
|
|
||||||
|
test('Returns the expected label values with no other labels', async () => { |
||||||
|
expect(await completionProvider.getLabelValues('label', [])).toEqual(labelValues); |
||||||
|
}); |
||||||
|
|
||||||
|
test('Returns the expected label values with other labels', async () => { |
||||||
|
expect(await completionProvider.getLabelValues('place', otherLabels)).toEqual(['series', 'labels']); |
||||||
|
expect(await completionProvider.getLabelValues('other label', otherLabels)).toEqual([]); |
||||||
|
}); |
||||||
|
|
||||||
|
test('Returns the expected parser and label keys', async () => { |
||||||
|
expect(await completionProvider.getParserAndLabelKeys([])).toEqual(parserAndLabelKeys); |
||||||
|
}); |
||||||
|
|
||||||
|
test('Returns the expected series labels', async () => { |
||||||
|
expect(await completionProvider.getSeriesLabels([])).toEqual(seriesLabels); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,52 @@ |
|||||||
|
import { HistoryItem } from '@grafana/data'; |
||||||
|
import { escapeLabelValueInExactSelector } from 'app/plugins/datasource/prometheus/language_utils'; |
||||||
|
|
||||||
|
import LanguageProvider from '../../../LanguageProvider'; |
||||||
|
import { LokiQuery } from '../../../types'; |
||||||
|
|
||||||
|
import { Label } from './situation'; |
||||||
|
|
||||||
|
export class CompletionDataProvider { |
||||||
|
constructor(private languageProvider: LanguageProvider, private history: Array<HistoryItem<LokiQuery>> = []) {} |
||||||
|
|
||||||
|
private buildSelector(labels: Label[]): string { |
||||||
|
const allLabelTexts = labels.map( |
||||||
|
(label) => `${label.name}${label.op}"${escapeLabelValueInExactSelector(label.value)}"` |
||||||
|
); |
||||||
|
|
||||||
|
return `{${allLabelTexts.join(',')}}`; |
||||||
|
} |
||||||
|
|
||||||
|
getHistory() { |
||||||
|
return this.history.map((entry) => entry.query.expr).filter((expr) => expr !== undefined); |
||||||
|
} |
||||||
|
|
||||||
|
async getLabelNames(otherLabels: Label[] = []) { |
||||||
|
if (otherLabels.length === 0) { |
||||||
|
// if there is no filtering, we have to use a special endpoint
|
||||||
|
return this.languageProvider.getLabelKeys(); |
||||||
|
} |
||||||
|
const data = await this.getSeriesLabels(otherLabels); |
||||||
|
const possibleLabelNames = Object.keys(data); // all names from datasource
|
||||||
|
const usedLabelNames = new Set(otherLabels.map((l) => l.name)); // names used in the query
|
||||||
|
return possibleLabelNames.filter((label) => !usedLabelNames.has(label)); |
||||||
|
} |
||||||
|
|
||||||
|
async getLabelValues(labelName: string, otherLabels: Label[]) { |
||||||
|
if (otherLabels.length === 0) { |
||||||
|
// if there is no filtering, we have to use a special endpoint
|
||||||
|
return await this.languageProvider.getLabelValues(labelName); |
||||||
|
} |
||||||
|
|
||||||
|
const data = await this.getSeriesLabels(otherLabels); |
||||||
|
return data[labelName] ?? []; |
||||||
|
} |
||||||
|
|
||||||
|
async getParserAndLabelKeys(labels: Label[]) { |
||||||
|
return await this.languageProvider.getParserAndLabelKeys(this.buildSelector(labels)); |
||||||
|
} |
||||||
|
|
||||||
|
async getSeriesLabels(labels: Label[]) { |
||||||
|
return await this.languageProvider.getSeriesLabels(this.buildSelector(labels)).then((data) => data ?? {}); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
// This helper class is used to make typescript warn you when you miss a case-block in a switch statement.
|
||||||
|
// For example:
|
||||||
|
//
|
||||||
|
// const x:'A'|'B'|'C' = 'A';
|
||||||
|
//
|
||||||
|
// switch(x) {
|
||||||
|
// case 'A':
|
||||||
|
// // something
|
||||||
|
// case 'B':
|
||||||
|
// // something
|
||||||
|
// default:
|
||||||
|
// throw new NeverCaseError(x);
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// TypeScript detect the missing case and display an error.
|
||||||
|
|
||||||
|
export class NeverCaseError extends Error { |
||||||
|
constructor(value: never) { |
||||||
|
super(`Unexpected case in switch statement: ${JSON.stringify(value)}`); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,297 @@ |
|||||||
|
import LokiLanguageProvider from '../../../LanguageProvider'; |
||||||
|
import { LokiDatasource } from '../../../datasource'; |
||||||
|
import { createLokiDatasource } from '../../../mocks'; |
||||||
|
|
||||||
|
import { CompletionDataProvider } from './CompletionDataProvider'; |
||||||
|
import { getCompletions } from './completions'; |
||||||
|
import { Label, Situation } from './situation'; |
||||||
|
|
||||||
|
const history = [ |
||||||
|
{ |
||||||
|
ts: 12345678, |
||||||
|
query: { |
||||||
|
refId: 'test-1', |
||||||
|
expr: '{test: unit}', |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
ts: 87654321, |
||||||
|
query: { |
||||||
|
refId: 'test-1', |
||||||
|
expr: '{test: unit}', |
||||||
|
}, |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
const labelNames = ['place', 'source']; |
||||||
|
const labelValues = ['moon', 'luna']; |
||||||
|
const extractedLabelKeys = ['extracted', 'label']; |
||||||
|
const otherLabels: Label[] = [ |
||||||
|
{ |
||||||
|
name: 'place', |
||||||
|
value: 'luna', |
||||||
|
op: '=', |
||||||
|
}, |
||||||
|
]; |
||||||
|
const afterSelectorCompletions = [ |
||||||
|
{ |
||||||
|
insertText: '|= "$0"', |
||||||
|
isSnippet: true, |
||||||
|
label: '|= ""', |
||||||
|
type: 'LINE_FILTER', |
||||||
|
}, |
||||||
|
{ |
||||||
|
insertText: '!= "$0"', |
||||||
|
isSnippet: true, |
||||||
|
label: '!= ""', |
||||||
|
type: 'LINE_FILTER', |
||||||
|
}, |
||||||
|
{ |
||||||
|
insertText: '|~ "$0"', |
||||||
|
isSnippet: true, |
||||||
|
label: '|~ ""', |
||||||
|
type: 'LINE_FILTER', |
||||||
|
}, |
||||||
|
{ |
||||||
|
insertText: '!~ "$0"', |
||||||
|
isSnippet: true, |
||||||
|
label: '!~ ""', |
||||||
|
type: 'LINE_FILTER', |
||||||
|
}, |
||||||
|
{ |
||||||
|
insertText: '', |
||||||
|
label: '// Placeholder for the detected parser', |
||||||
|
type: 'DETECTED_PARSER_PLACEHOLDER', |
||||||
|
}, |
||||||
|
{ |
||||||
|
insertText: '', |
||||||
|
label: '// Placeholder for logfmt or json', |
||||||
|
type: 'OPPOSITE_PARSER_PLACEHOLDER', |
||||||
|
}, |
||||||
|
{ |
||||||
|
insertText: 'pattern', |
||||||
|
label: 'pattern', |
||||||
|
type: 'PARSER', |
||||||
|
}, |
||||||
|
{ |
||||||
|
insertText: 'regexp', |
||||||
|
label: 'regexp', |
||||||
|
type: 'PARSER', |
||||||
|
}, |
||||||
|
{ |
||||||
|
insertText: 'unpack', |
||||||
|
label: 'unpack', |
||||||
|
type: 'PARSER', |
||||||
|
}, |
||||||
|
{ |
||||||
|
insertText: 'unwrap extracted', |
||||||
|
label: 'unwrap extracted (detected)', |
||||||
|
type: 'LINE_FILTER', |
||||||
|
}, |
||||||
|
{ |
||||||
|
insertText: 'unwrap label', |
||||||
|
label: 'unwrap label (detected)', |
||||||
|
type: 'LINE_FILTER', |
||||||
|
}, |
||||||
|
{ |
||||||
|
insertText: 'unwrap', |
||||||
|
label: 'unwrap', |
||||||
|
type: 'LINE_FILTER', |
||||||
|
}, |
||||||
|
{ |
||||||
|
insertText: 'line_format "{{.$0}}"', |
||||||
|
isSnippet: true, |
||||||
|
label: 'line_format', |
||||||
|
type: 'LINE_FORMAT', |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
function buildAfterSelectorCompletions( |
||||||
|
detectedParser: string, |
||||||
|
detectedParserType: string, |
||||||
|
otherParser: string, |
||||||
|
explanation = '(detected)' |
||||||
|
) { |
||||||
|
return afterSelectorCompletions.map((completion) => { |
||||||
|
if (completion.type === 'DETECTED_PARSER_PLACEHOLDER') { |
||||||
|
return { |
||||||
|
...completion, |
||||||
|
type: detectedParserType, |
||||||
|
label: `${detectedParser} ${explanation}`, |
||||||
|
insertText: detectedParser, |
||||||
|
}; |
||||||
|
} else if (completion.type === 'OPPOSITE_PARSER_PLACEHOLDER') { |
||||||
|
return { |
||||||
|
...completion, |
||||||
|
type: 'PARSER', |
||||||
|
label: otherParser, |
||||||
|
insertText: otherParser, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
return { ...completion }; |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
describe('getCompletions', () => { |
||||||
|
let completionProvider: CompletionDataProvider, languageProvider: LokiLanguageProvider, datasource: LokiDatasource; |
||||||
|
beforeEach(() => { |
||||||
|
datasource = createLokiDatasource(); |
||||||
|
languageProvider = new LokiLanguageProvider(datasource); |
||||||
|
completionProvider = new CompletionDataProvider(languageProvider, history); |
||||||
|
|
||||||
|
jest.spyOn(completionProvider, 'getLabelNames').mockResolvedValue(labelNames); |
||||||
|
jest.spyOn(completionProvider, 'getLabelValues').mockResolvedValue(labelValues); |
||||||
|
jest.spyOn(completionProvider, 'getParserAndLabelKeys').mockResolvedValue({ |
||||||
|
extractedLabelKeys, |
||||||
|
hasJSON: false, |
||||||
|
hasLogfmt: false, |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
test.each(['EMPTY', 'AT_ROOT'])(`Returns completion options when the situation is %s`, async (type) => { |
||||||
|
const situation = { type } as Situation; |
||||||
|
const completions = await getCompletions(situation, completionProvider); |
||||||
|
|
||||||
|
expect(completions).toHaveLength(25); |
||||||
|
}); |
||||||
|
|
||||||
|
test('Returns completion options when the situation is IN_DURATION', async () => { |
||||||
|
const situation: Situation = { type: 'IN_DURATION' }; |
||||||
|
const completions = await getCompletions(situation, completionProvider); |
||||||
|
|
||||||
|
expect(completions).toEqual([ |
||||||
|
{ insertText: '$__interval', label: '$__interval', type: 'DURATION' }, |
||||||
|
{ insertText: '$__range', label: '$__range', type: 'DURATION' }, |
||||||
|
{ insertText: '1m', label: '1m', type: 'DURATION' }, |
||||||
|
{ insertText: '5m', label: '5m', type: 'DURATION' }, |
||||||
|
{ insertText: '10m', label: '10m', type: 'DURATION' }, |
||||||
|
{ insertText: '30m', label: '30m', type: 'DURATION' }, |
||||||
|
{ insertText: '1h', label: '1h', type: 'DURATION' }, |
||||||
|
{ insertText: '1d', label: '1d', type: 'DURATION' }, |
||||||
|
]); |
||||||
|
}); |
||||||
|
|
||||||
|
test('Returns completion options when the situation is IN_GROUPING', async () => { |
||||||
|
const situation: Situation = { type: 'IN_GROUPING', otherLabels }; |
||||||
|
const completions = await getCompletions(situation, completionProvider); |
||||||
|
|
||||||
|
expect(completions).toEqual([ |
||||||
|
{ |
||||||
|
insertText: 'place', |
||||||
|
label: 'place', |
||||||
|
triggerOnInsert: false, |
||||||
|
type: 'LABEL_NAME', |
||||||
|
}, |
||||||
|
{ |
||||||
|
insertText: 'source', |
||||||
|
label: 'source', |
||||||
|
triggerOnInsert: false, |
||||||
|
type: 'LABEL_NAME', |
||||||
|
}, |
||||||
|
{ |
||||||
|
insertText: 'extracted', |
||||||
|
label: 'extracted (parsed)', |
||||||
|
triggerOnInsert: false, |
||||||
|
type: 'LABEL_NAME', |
||||||
|
}, |
||||||
|
{ |
||||||
|
insertText: 'label', |
||||||
|
label: 'label (parsed)', |
||||||
|
triggerOnInsert: false, |
||||||
|
type: 'LABEL_NAME', |
||||||
|
}, |
||||||
|
]); |
||||||
|
}); |
||||||
|
|
||||||
|
test('Returns completion options when the situation is IN_LABEL_SELECTOR_NO_LABEL_NAME', async () => { |
||||||
|
const situation: Situation = { type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME', otherLabels }; |
||||||
|
const completions = await getCompletions(situation, completionProvider); |
||||||
|
|
||||||
|
expect(completions).toEqual([ |
||||||
|
{ |
||||||
|
insertText: 'place=', |
||||||
|
label: 'place', |
||||||
|
triggerOnInsert: true, |
||||||
|
type: 'LABEL_NAME', |
||||||
|
}, |
||||||
|
{ |
||||||
|
insertText: 'source=', |
||||||
|
label: 'source', |
||||||
|
triggerOnInsert: true, |
||||||
|
type: 'LABEL_NAME', |
||||||
|
}, |
||||||
|
]); |
||||||
|
}); |
||||||
|
|
||||||
|
test('Returns completion options when the situation is IN_LABEL_SELECTOR_WITH_LABEL_NAME', async () => { |
||||||
|
const situation: Situation = { |
||||||
|
type: 'IN_LABEL_SELECTOR_WITH_LABEL_NAME', |
||||||
|
otherLabels, |
||||||
|
labelName: '', |
||||||
|
betweenQuotes: false, |
||||||
|
}; |
||||||
|
let completions = await getCompletions(situation, completionProvider); |
||||||
|
|
||||||
|
expect(completions).toEqual([ |
||||||
|
{ |
||||||
|
insertText: '"moon"', |
||||||
|
label: 'moon', |
||||||
|
type: 'LABEL_VALUE', |
||||||
|
}, |
||||||
|
{ |
||||||
|
insertText: '"luna"', |
||||||
|
label: 'luna', |
||||||
|
type: 'LABEL_VALUE', |
||||||
|
}, |
||||||
|
]); |
||||||
|
|
||||||
|
completions = await getCompletions({ ...situation, betweenQuotes: true }, completionProvider); |
||||||
|
|
||||||
|
expect(completions).toEqual([ |
||||||
|
{ |
||||||
|
insertText: 'moon', |
||||||
|
label: 'moon', |
||||||
|
type: 'LABEL_VALUE', |
||||||
|
}, |
||||||
|
{ |
||||||
|
insertText: 'luna', |
||||||
|
label: 'luna', |
||||||
|
type: 'LABEL_VALUE', |
||||||
|
}, |
||||||
|
]); |
||||||
|
}); |
||||||
|
|
||||||
|
test('Returns completion options when the situation is AFTER_SELECTOR and JSON parser', async () => { |
||||||
|
jest.spyOn(completionProvider, 'getParserAndLabelKeys').mockResolvedValue({ |
||||||
|
extractedLabelKeys, |
||||||
|
hasJSON: true, |
||||||
|
hasLogfmt: false, |
||||||
|
}); |
||||||
|
const situation: Situation = { type: 'AFTER_SELECTOR', labels: [], afterPipe: true }; |
||||||
|
const completions = await getCompletions(situation, completionProvider); |
||||||
|
|
||||||
|
const expected = buildAfterSelectorCompletions('json', 'PARSER', 'logfmt'); |
||||||
|
expect(completions).toEqual(expected); |
||||||
|
}); |
||||||
|
|
||||||
|
test('Returns completion options when the situation is AFTER_SELECTOR and Logfmt parser', async () => { |
||||||
|
jest.spyOn(completionProvider, 'getParserAndLabelKeys').mockResolvedValue({ |
||||||
|
extractedLabelKeys, |
||||||
|
hasJSON: false, |
||||||
|
hasLogfmt: true, |
||||||
|
}); |
||||||
|
const situation: Situation = { type: 'AFTER_SELECTOR', labels: [], afterPipe: true }; |
||||||
|
const completions = await getCompletions(situation, completionProvider); |
||||||
|
|
||||||
|
const expected = buildAfterSelectorCompletions('logfmt', 'DURATION', 'json'); |
||||||
|
expect(completions).toEqual(expected); |
||||||
|
}); |
||||||
|
|
||||||
|
test('Returns completion options when the situation is IN_AGGREGATION', async () => { |
||||||
|
const situation: Situation = { type: 'IN_AGGREGATION' }; |
||||||
|
const completions = await getCompletions(situation, completionProvider); |
||||||
|
|
||||||
|
expect(completions).toHaveLength(22); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,233 @@ |
|||||||
|
import { AGGREGATION_OPERATORS, RANGE_VEC_FUNCTIONS } from '../../../syntax'; |
||||||
|
|
||||||
|
import { CompletionDataProvider } from './CompletionDataProvider'; |
||||||
|
import { NeverCaseError } from './NeverCaseError'; |
||||||
|
import type { Situation, Label } from './situation'; |
||||||
|
|
||||||
|
export type CompletionType = |
||||||
|
| 'HISTORY' |
||||||
|
| 'FUNCTION' |
||||||
|
| 'DURATION' |
||||||
|
| 'LABEL_NAME' |
||||||
|
| 'LABEL_VALUE' |
||||||
|
| 'PATTERN' |
||||||
|
| 'PARSER' |
||||||
|
| 'LINE_FILTER' |
||||||
|
| 'LINE_FORMAT'; |
||||||
|
|
||||||
|
type Completion = { |
||||||
|
type: CompletionType; |
||||||
|
label: string; |
||||||
|
insertText: string; |
||||||
|
detail?: string; |
||||||
|
documentation?: string; |
||||||
|
triggerOnInsert?: boolean; |
||||||
|
isSnippet?: boolean; |
||||||
|
}; |
||||||
|
|
||||||
|
const LOG_COMPLETIONS: Completion[] = [ |
||||||
|
{ |
||||||
|
type: 'PATTERN', |
||||||
|
label: '{}', |
||||||
|
insertText: '{$0}', |
||||||
|
isSnippet: true, |
||||||
|
triggerOnInsert: true, |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
const AGGREGATION_COMPLETIONS: Completion[] = AGGREGATION_OPERATORS.map((f) => ({ |
||||||
|
type: 'FUNCTION', |
||||||
|
label: f.label, |
||||||
|
insertText: `${f.insertText ?? ''}($0)`, // i don't know what to do when this is nullish. it should not be.
|
||||||
|
isSnippet: true, |
||||||
|
triggerOnInsert: true, |
||||||
|
detail: f.detail, |
||||||
|
documentation: f.documentation, |
||||||
|
})); |
||||||
|
|
||||||
|
const FUNCTION_COMPLETIONS: Completion[] = RANGE_VEC_FUNCTIONS.map((f) => ({ |
||||||
|
type: 'FUNCTION', |
||||||
|
label: f.label, |
||||||
|
insertText: `${f.insertText ?? ''}({$0}[\\$__interval])`, // i don't know what to do when this is nullish. it should not be.
|
||||||
|
isSnippet: true, |
||||||
|
triggerOnInsert: true, |
||||||
|
detail: f.detail, |
||||||
|
documentation: f.documentation, |
||||||
|
})); |
||||||
|
|
||||||
|
const DURATION_COMPLETIONS: Completion[] = ['$__interval', '$__range', '1m', '5m', '10m', '30m', '1h', '1d'].map( |
||||||
|
(text) => ({ |
||||||
|
type: 'DURATION', |
||||||
|
label: text, |
||||||
|
insertText: text, |
||||||
|
}) |
||||||
|
); |
||||||
|
|
||||||
|
const LINE_FILTER_COMPLETIONS: Completion[] = ['|=', '!=', '|~', '!~'].map((item) => ({ |
||||||
|
type: 'LINE_FILTER', |
||||||
|
label: `${item} ""`, |
||||||
|
insertText: `${item} "$0"`, |
||||||
|
isSnippet: true, |
||||||
|
})); |
||||||
|
|
||||||
|
async function getAllHistoryCompletions(dataProvider: CompletionDataProvider): Promise<Completion[]> { |
||||||
|
const history = await dataProvider.getHistory(); |
||||||
|
|
||||||
|
return history.map((expr) => ({ |
||||||
|
type: 'HISTORY', |
||||||
|
label: expr, |
||||||
|
insertText: expr, |
||||||
|
})); |
||||||
|
} |
||||||
|
|
||||||
|
async function getLabelNamesForCompletions( |
||||||
|
suffix: string, |
||||||
|
triggerOnInsert: boolean, |
||||||
|
addExtractedLabels: boolean, |
||||||
|
otherLabels: Label[], |
||||||
|
dataProvider: CompletionDataProvider |
||||||
|
): Promise<Completion[]> { |
||||||
|
const labelNames = await dataProvider.getLabelNames(otherLabels); |
||||||
|
const result: Completion[] = labelNames.map((text) => ({ |
||||||
|
type: 'LABEL_NAME', |
||||||
|
label: text, |
||||||
|
insertText: `${text}${suffix}`, |
||||||
|
triggerOnInsert, |
||||||
|
})); |
||||||
|
|
||||||
|
if (addExtractedLabels) { |
||||||
|
const { extractedLabelKeys } = await dataProvider.getParserAndLabelKeys(otherLabels); |
||||||
|
extractedLabelKeys.forEach((key) => { |
||||||
|
result.push({ |
||||||
|
type: 'LABEL_NAME', |
||||||
|
label: `${key} (parsed)`, |
||||||
|
insertText: `${key}${suffix}`, |
||||||
|
triggerOnInsert, |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
return result; |
||||||
|
} |
||||||
|
|
||||||
|
async function getLabelNamesForSelectorCompletions( |
||||||
|
otherLabels: Label[], |
||||||
|
dataProvider: CompletionDataProvider |
||||||
|
): Promise<Completion[]> { |
||||||
|
return getLabelNamesForCompletions('=', true, false, otherLabels, dataProvider); |
||||||
|
} |
||||||
|
|
||||||
|
async function getInGroupingCompletions( |
||||||
|
otherLabels: Label[], |
||||||
|
dataProvider: CompletionDataProvider |
||||||
|
): Promise<Completion[]> { |
||||||
|
return getLabelNamesForCompletions('', false, true, otherLabels, dataProvider); |
||||||
|
} |
||||||
|
|
||||||
|
async function getAfterSelectorCompletions( |
||||||
|
labels: Label[], |
||||||
|
afterPipe: boolean, |
||||||
|
dataProvider: CompletionDataProvider |
||||||
|
): Promise<Completion[]> { |
||||||
|
const { extractedLabelKeys, hasJSON, hasLogfmt } = await dataProvider.getParserAndLabelKeys(labels); |
||||||
|
const allParsers = new Set(['json', 'logfmt', 'pattern', 'regexp', 'unpack']); |
||||||
|
const completions: Completion[] = []; |
||||||
|
const prefix = afterPipe ? '' : '| '; |
||||||
|
const hasLevelInExtractedLabels = extractedLabelKeys.some((key) => key === 'level'); |
||||||
|
if (hasJSON) { |
||||||
|
allParsers.delete('json'); |
||||||
|
const explanation = hasLevelInExtractedLabels ? 'use to get log-levels in the histogram' : 'detected'; |
||||||
|
completions.push({ |
||||||
|
type: 'PARSER', |
||||||
|
label: `json (${explanation})`, |
||||||
|
insertText: `${prefix}json`, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
if (hasLogfmt) { |
||||||
|
allParsers.delete('logfmt'); |
||||||
|
const explanation = hasLevelInExtractedLabels ? 'get detected levels in the histogram' : 'detected'; |
||||||
|
completions.push({ |
||||||
|
type: 'DURATION', |
||||||
|
label: `logfmt (${explanation})`, |
||||||
|
insertText: `${prefix}logfmt`, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
const remainingParsers = Array.from(allParsers).sort(); |
||||||
|
remainingParsers.forEach((parser) => { |
||||||
|
completions.push({ |
||||||
|
type: 'PARSER', |
||||||
|
label: parser, |
||||||
|
insertText: `${prefix}${parser}`, |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
extractedLabelKeys.forEach((key) => { |
||||||
|
completions.push({ |
||||||
|
type: 'LINE_FILTER', |
||||||
|
label: `unwrap ${key} (detected)`, |
||||||
|
insertText: `${prefix}unwrap ${key}`, |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
completions.push({ |
||||||
|
type: 'LINE_FILTER', |
||||||
|
label: 'unwrap', |
||||||
|
insertText: `${prefix}unwrap`, |
||||||
|
}); |
||||||
|
|
||||||
|
completions.push({ |
||||||
|
type: 'LINE_FORMAT', |
||||||
|
label: 'line_format', |
||||||
|
insertText: `${prefix}line_format "{{.$0}}"`, |
||||||
|
isSnippet: true, |
||||||
|
}); |
||||||
|
|
||||||
|
return [...LINE_FILTER_COMPLETIONS, ...completions]; |
||||||
|
} |
||||||
|
|
||||||
|
async function getLabelValuesForMetricCompletions( |
||||||
|
labelName: string, |
||||||
|
betweenQuotes: boolean, |
||||||
|
otherLabels: Label[], |
||||||
|
dataProvider: CompletionDataProvider |
||||||
|
): Promise<Completion[]> { |
||||||
|
const values = await dataProvider.getLabelValues(labelName, otherLabels); |
||||||
|
return values.map((text) => ({ |
||||||
|
type: 'LABEL_VALUE', |
||||||
|
label: text, |
||||||
|
insertText: betweenQuotes ? text : `"${text}"`, |
||||||
|
})); |
||||||
|
} |
||||||
|
|
||||||
|
export async function getCompletions( |
||||||
|
situation: Situation, |
||||||
|
dataProvider: CompletionDataProvider |
||||||
|
): Promise<Completion[]> { |
||||||
|
switch (situation.type) { |
||||||
|
case 'EMPTY': |
||||||
|
case 'AT_ROOT': |
||||||
|
const historyCompletions = await getAllHistoryCompletions(dataProvider); |
||||||
|
return [...historyCompletions, ...LOG_COMPLETIONS, ...AGGREGATION_COMPLETIONS, ...FUNCTION_COMPLETIONS]; |
||||||
|
case 'IN_DURATION': |
||||||
|
return DURATION_COMPLETIONS; |
||||||
|
case 'IN_GROUPING': |
||||||
|
return getInGroupingCompletions(situation.otherLabels, dataProvider); |
||||||
|
case 'IN_LABEL_SELECTOR_NO_LABEL_NAME': |
||||||
|
return getLabelNamesForSelectorCompletions(situation.otherLabels, dataProvider); |
||||||
|
case 'IN_LABEL_SELECTOR_WITH_LABEL_NAME': |
||||||
|
return getLabelValuesForMetricCompletions( |
||||||
|
situation.labelName, |
||||||
|
situation.betweenQuotes, |
||||||
|
situation.otherLabels, |
||||||
|
dataProvider |
||||||
|
); |
||||||
|
case 'AFTER_SELECTOR': |
||||||
|
return getAfterSelectorCompletions(situation.labels, situation.afterPipe, dataProvider); |
||||||
|
case 'IN_AGGREGATION': |
||||||
|
return [...FUNCTION_COMPLETIONS, ...AGGREGATION_COMPLETIONS]; |
||||||
|
default: |
||||||
|
throw new NeverCaseError(situation); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,112 @@ |
|||||||
|
import type { Monaco, monacoTypes } from '@grafana/ui'; |
||||||
|
|
||||||
|
import { CompletionDataProvider } from './CompletionDataProvider'; |
||||||
|
import { NeverCaseError } from './NeverCaseError'; |
||||||
|
import { getCompletions, CompletionType } from './completions'; |
||||||
|
import { getSituation } from './situation'; |
||||||
|
|
||||||
|
// from: monacoTypes.languages.CompletionItemInsertTextRule.InsertAsSnippet
|
||||||
|
const INSERT_AS_SNIPPET_ENUM_VALUE = 4; |
||||||
|
|
||||||
|
export function getSuggestOptions(): monacoTypes.editor.ISuggestOptions { |
||||||
|
return { |
||||||
|
// monaco-editor sometimes provides suggestions automatically, i am not
|
||||||
|
// sure based on what, seems to be by analyzing the words already
|
||||||
|
// written.
|
||||||
|
// to try it out:
|
||||||
|
// - enter `go_goroutines{job~`
|
||||||
|
// - have the cursor at the end of the string
|
||||||
|
// - press ctrl-enter
|
||||||
|
// - you will get two suggestions
|
||||||
|
// those were not provided by grafana, they are offered automatically.
|
||||||
|
// i want to remove those. the only way i found is:
|
||||||
|
// - every suggestion-item has a `kind` attribute,
|
||||||
|
// that controls the icon to the left of the suggestion.
|
||||||
|
// - items auto-generated by monaco have `kind` set to `text`.
|
||||||
|
// - we make sure grafana-provided suggestions do not have `kind` set to `text`.
|
||||||
|
// - and then we tell monaco not to show suggestions of kind `text`
|
||||||
|
showWords: false, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
function getMonacoCompletionItemKind(type: CompletionType, monaco: Monaco): monacoTypes.languages.CompletionItemKind { |
||||||
|
switch (type) { |
||||||
|
case 'DURATION': |
||||||
|
return monaco.languages.CompletionItemKind.Unit; |
||||||
|
case 'FUNCTION': |
||||||
|
return monaco.languages.CompletionItemKind.Variable; |
||||||
|
case 'HISTORY': |
||||||
|
return monaco.languages.CompletionItemKind.Snippet; |
||||||
|
case 'LABEL_NAME': |
||||||
|
return monaco.languages.CompletionItemKind.Enum; |
||||||
|
case 'LABEL_VALUE': |
||||||
|
return monaco.languages.CompletionItemKind.EnumMember; |
||||||
|
case 'PATTERN': |
||||||
|
return monaco.languages.CompletionItemKind.Constructor; |
||||||
|
case 'PARSER': |
||||||
|
return monaco.languages.CompletionItemKind.Class; |
||||||
|
case 'LINE_FILTER': |
||||||
|
return monaco.languages.CompletionItemKind.TypeParameter; |
||||||
|
case 'LINE_FORMAT': |
||||||
|
return monaco.languages.CompletionItemKind.Event; |
||||||
|
default: |
||||||
|
throw new NeverCaseError(type); |
||||||
|
} |
||||||
|
} |
||||||
|
export function getCompletionProvider( |
||||||
|
monaco: Monaco, |
||||||
|
dataProvider: CompletionDataProvider |
||||||
|
): monacoTypes.languages.CompletionItemProvider { |
||||||
|
const provideCompletionItems = ( |
||||||
|
model: monacoTypes.editor.ITextModel, |
||||||
|
position: monacoTypes.Position |
||||||
|
): monacoTypes.languages.ProviderResult<monacoTypes.languages.CompletionList> => { |
||||||
|
const word = model.getWordAtPosition(position); |
||||||
|
const range = |
||||||
|
word != null |
||||||
|
? monaco.Range.lift({ |
||||||
|
startLineNumber: position.lineNumber, |
||||||
|
endLineNumber: position.lineNumber, |
||||||
|
startColumn: word.startColumn, |
||||||
|
endColumn: word.endColumn, |
||||||
|
}) |
||||||
|
: monaco.Range.fromPositions(position); |
||||||
|
// documentation says `position` will be "adjusted" in `getOffsetAt`
|
||||||
|
// i don't know what that means, to be sure i clone it
|
||||||
|
const positionClone = { |
||||||
|
column: position.column, |
||||||
|
lineNumber: position.lineNumber, |
||||||
|
}; |
||||||
|
const offset = model.getOffsetAt(positionClone); |
||||||
|
const situation = getSituation(model.getValue(), offset); |
||||||
|
const completionsPromise = situation != null ? getCompletions(situation, dataProvider) : Promise.resolve([]); |
||||||
|
return completionsPromise.then((items) => { |
||||||
|
// monaco by default alphabetically orders the items.
|
||||||
|
// to stop it, we use a number-as-string sortkey,
|
||||||
|
// so that monaco keeps the order we use
|
||||||
|
const maxIndexDigits = items.length.toString().length; |
||||||
|
const suggestions: monacoTypes.languages.CompletionItem[] = items.map((item, index) => ({ |
||||||
|
kind: getMonacoCompletionItemKind(item.type, monaco), |
||||||
|
label: item.label, |
||||||
|
insertText: item.insertText, |
||||||
|
insertTextRules: item.isSnippet ? INSERT_AS_SNIPPET_ENUM_VALUE : undefined, |
||||||
|
detail: item.detail, |
||||||
|
documentation: item.documentation, |
||||||
|
sortText: index.toString().padStart(maxIndexDigits, '0'), // to force the order we have
|
||||||
|
range, |
||||||
|
command: item.triggerOnInsert |
||||||
|
? { |
||||||
|
id: 'editor.action.triggerSuggest', |
||||||
|
title: '', |
||||||
|
} |
||||||
|
: undefined, |
||||||
|
})); |
||||||
|
return { suggestions }; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
return { |
||||||
|
triggerCharacters: ['{', ',', '[', '(', '=', '~', ' ', '"', '|'], |
||||||
|
provideCompletionItems, |
||||||
|
}; |
||||||
|
} |
||||||
@ -0,0 +1,195 @@ |
|||||||
|
import { getSituation, Situation } from './situation'; |
||||||
|
|
||||||
|
// we use the `^` character as the cursor-marker in the string.
|
||||||
|
function assertSituation(situation: string, expectedSituation: Situation | null) { |
||||||
|
// first we find the cursor-position
|
||||||
|
const pos = situation.indexOf('^'); |
||||||
|
if (pos === -1) { |
||||||
|
throw new Error('cursor missing'); |
||||||
|
} |
||||||
|
|
||||||
|
// we remove the cursor-marker from the string
|
||||||
|
const text = situation.replace('^', ''); |
||||||
|
|
||||||
|
// sanity check, make sure no more cursor-markers remain
|
||||||
|
if (text.indexOf('^') !== -1) { |
||||||
|
throw new Error('multiple cursors'); |
||||||
|
} |
||||||
|
|
||||||
|
const result = getSituation(text, pos); |
||||||
|
|
||||||
|
if (expectedSituation === null) { |
||||||
|
expect(result).toStrictEqual(null); |
||||||
|
} else { |
||||||
|
expect(result).toMatchObject(expectedSituation); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
describe('situation', () => { |
||||||
|
it('handles things', () => { |
||||||
|
assertSituation('^', { |
||||||
|
type: 'EMPTY', |
||||||
|
}); |
||||||
|
|
||||||
|
assertSituation('s^', { |
||||||
|
type: 'AT_ROOT', |
||||||
|
}); |
||||||
|
|
||||||
|
assertSituation('{level="info"} ^', { |
||||||
|
type: 'AFTER_SELECTOR', |
||||||
|
afterPipe: false, |
||||||
|
labels: [{ name: 'level', value: 'info', op: '=' }], |
||||||
|
}); |
||||||
|
|
||||||
|
// should not trigger AFTER_SELECTOR before the selector
|
||||||
|
assertSituation('^ {level="info"}', null); |
||||||
|
|
||||||
|
// check for an error we had during the implementation
|
||||||
|
assertSituation('{level="info" ^', null); |
||||||
|
|
||||||
|
assertSituation('{level="info"} | json ^', { |
||||||
|
type: 'AFTER_SELECTOR', |
||||||
|
afterPipe: false, |
||||||
|
labels: [{ name: 'level', value: 'info', op: '=' }], |
||||||
|
}); |
||||||
|
|
||||||
|
assertSituation('{level="info"} | json | ^', { |
||||||
|
type: 'AFTER_SELECTOR', |
||||||
|
afterPipe: true, |
||||||
|
labels: [{ name: 'level', value: 'info', op: '=' }], |
||||||
|
}); |
||||||
|
|
||||||
|
assertSituation('count_over_time({level="info"}^[10s])', { |
||||||
|
type: 'AFTER_SELECTOR', |
||||||
|
afterPipe: false, |
||||||
|
labels: [{ name: 'level', value: 'info', op: '=' }], |
||||||
|
}); |
||||||
|
|
||||||
|
// should not trigger AFTER_SELECTOR before the selector
|
||||||
|
assertSituation('count_over_time(^{level="info"}[10s])', null); |
||||||
|
|
||||||
|
// should work even when the query is half-complete
|
||||||
|
assertSituation('count_over_time({level="info"}^)', { |
||||||
|
type: 'AFTER_SELECTOR', |
||||||
|
afterPipe: false, |
||||||
|
labels: [{ name: 'level', value: 'info', op: '=' }], |
||||||
|
}); |
||||||
|
|
||||||
|
/* |
||||||
|
Currently failing, reason unknown |
||||||
|
assertSituation('sum(^)', { |
||||||
|
type: 'IN_AGGREGATION', |
||||||
|
});*/ |
||||||
|
}); |
||||||
|
|
||||||
|
it('handles label names', () => { |
||||||
|
assertSituation('{^}', { |
||||||
|
type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME', |
||||||
|
otherLabels: [], |
||||||
|
}); |
||||||
|
|
||||||
|
assertSituation('sum(count_over_time({level="info"})) by (^)', { |
||||||
|
type: 'IN_GROUPING', |
||||||
|
otherLabels: [{ name: 'level', value: 'info', op: '=' }], |
||||||
|
}); |
||||||
|
|
||||||
|
assertSituation('sum by (^) (count_over_time({level="info"}))', { |
||||||
|
type: 'IN_GROUPING', |
||||||
|
otherLabels: [{ name: 'level', value: 'info', op: '=' }], |
||||||
|
}); |
||||||
|
|
||||||
|
assertSituation('{one="val1",two!="val2",three=~"val3",four!~"val4",^}', { |
||||||
|
type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME', |
||||||
|
otherLabels: [ |
||||||
|
{ name: 'one', value: 'val1', op: '=' }, |
||||||
|
{ name: 'two', value: 'val2', op: '!=' }, |
||||||
|
{ name: 'three', value: 'val3', op: '=~' }, |
||||||
|
{ name: 'four', value: 'val4', op: '!~' }, |
||||||
|
], |
||||||
|
}); |
||||||
|
|
||||||
|
assertSituation('{one="val1",^}', { |
||||||
|
type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME', |
||||||
|
otherLabels: [{ name: 'one', value: 'val1', op: '=' }], |
||||||
|
}); |
||||||
|
|
||||||
|
// double-quoted label-values with escape
|
||||||
|
assertSituation('{one="val\\"1",^}', { |
||||||
|
type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME', |
||||||
|
otherLabels: [{ name: 'one', value: 'val"1', op: '=' }], |
||||||
|
}); |
||||||
|
|
||||||
|
// backticked label-values with escape (the escape should not be interpreted)
|
||||||
|
assertSituation('{one=`val\\"1`,^}', { |
||||||
|
type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME', |
||||||
|
otherLabels: [{ name: 'one', value: 'val\\"1', op: '=' }], |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
it('handles label values', () => { |
||||||
|
assertSituation('{job=^}', { |
||||||
|
type: 'IN_LABEL_SELECTOR_WITH_LABEL_NAME', |
||||||
|
labelName: 'job', |
||||||
|
betweenQuotes: false, |
||||||
|
otherLabels: [], |
||||||
|
}); |
||||||
|
|
||||||
|
assertSituation('{job!=^}', { |
||||||
|
type: 'IN_LABEL_SELECTOR_WITH_LABEL_NAME', |
||||||
|
labelName: 'job', |
||||||
|
betweenQuotes: false, |
||||||
|
otherLabels: [], |
||||||
|
}); |
||||||
|
|
||||||
|
assertSituation('{job=~^}', { |
||||||
|
type: 'IN_LABEL_SELECTOR_WITH_LABEL_NAME', |
||||||
|
labelName: 'job', |
||||||
|
betweenQuotes: false, |
||||||
|
otherLabels: [], |
||||||
|
}); |
||||||
|
|
||||||
|
assertSituation('{job!~^}', { |
||||||
|
type: 'IN_LABEL_SELECTOR_WITH_LABEL_NAME', |
||||||
|
labelName: 'job', |
||||||
|
betweenQuotes: false, |
||||||
|
otherLabels: [], |
||||||
|
}); |
||||||
|
|
||||||
|
assertSituation('{job=^,host="h1"}', { |
||||||
|
type: 'IN_LABEL_SELECTOR_WITH_LABEL_NAME', |
||||||
|
labelName: 'job', |
||||||
|
betweenQuotes: false, |
||||||
|
otherLabels: [{ name: 'host', value: 'h1', op: '=' }], |
||||||
|
}); |
||||||
|
|
||||||
|
assertSituation('{job="j1",host="^"}', { |
||||||
|
type: 'IN_LABEL_SELECTOR_WITH_LABEL_NAME', |
||||||
|
labelName: 'host', |
||||||
|
betweenQuotes: true, |
||||||
|
otherLabels: [{ name: 'job', value: 'j1', op: '=' }], |
||||||
|
}); |
||||||
|
|
||||||
|
assertSituation('{job="j1"^}', null); |
||||||
|
assertSituation('{job="j1" ^ }', null); |
||||||
|
assertSituation('{job="j1" ^ , }', null); |
||||||
|
|
||||||
|
assertSituation('{job=^,host="h1"}', { |
||||||
|
type: 'IN_LABEL_SELECTOR_WITH_LABEL_NAME', |
||||||
|
labelName: 'job', |
||||||
|
betweenQuotes: false, |
||||||
|
otherLabels: [{ name: 'host', value: 'h1', op: '=' }], |
||||||
|
}); |
||||||
|
|
||||||
|
assertSituation('{one="val1",two!="val2",three=^,four=~"val4",five!~"val5"}', { |
||||||
|
type: 'IN_LABEL_SELECTOR_WITH_LABEL_NAME', |
||||||
|
labelName: 'three', |
||||||
|
betweenQuotes: false, |
||||||
|
otherLabels: [ |
||||||
|
{ name: 'one', value: 'val1', op: '=' }, |
||||||
|
{ name: 'two', value: 'val2', op: '!=' }, |
||||||
|
{ name: 'four', value: 'val4', op: '=~' }, |
||||||
|
{ name: 'five', value: 'val5', op: '!~' }, |
||||||
|
], |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,523 @@ |
|||||||
|
import type { Tree, SyntaxNode } from '@lezer/common'; |
||||||
|
|
||||||
|
import { |
||||||
|
parser, |
||||||
|
VectorAggregationExpr, |
||||||
|
String, |
||||||
|
Selector, |
||||||
|
RangeAggregationExpr, |
||||||
|
Range, |
||||||
|
PipelineExpr, |
||||||
|
PipelineStage, |
||||||
|
Matchers, |
||||||
|
Matcher, |
||||||
|
LogQL, |
||||||
|
LogRangeExpr, |
||||||
|
LogExpr, |
||||||
|
Identifier, |
||||||
|
Grouping, |
||||||
|
Expr, |
||||||
|
} from '@grafana/lezer-logql'; |
||||||
|
|
||||||
|
type Direction = 'parent' | 'firstChild' | 'lastChild' | 'nextSibling'; |
||||||
|
type NodeType = number; |
||||||
|
|
||||||
|
type Path = Array<[Direction, NodeType]>; |
||||||
|
|
||||||
|
function move(node: SyntaxNode, direction: Direction): SyntaxNode | null { |
||||||
|
return node[direction]; |
||||||
|
} |
||||||
|
|
||||||
|
function walk(node: SyntaxNode, path: Path): SyntaxNode | null { |
||||||
|
let current: SyntaxNode | null = node; |
||||||
|
for (const [direction, expectedNode] of path) { |
||||||
|
current = move(current, direction); |
||||||
|
if (current === null) { |
||||||
|
// we could not move in the direction, we stop
|
||||||
|
return null; |
||||||
|
} |
||||||
|
if (current.type.id !== expectedNode) { |
||||||
|
// the reached node has wrong type, we stop
|
||||||
|
return null; |
||||||
|
} |
||||||
|
} |
||||||
|
return current; |
||||||
|
} |
||||||
|
|
||||||
|
function getNodeText(node: SyntaxNode, text: string): string { |
||||||
|
return text.slice(node.from, node.to); |
||||||
|
} |
||||||
|
|
||||||
|
function parseStringLiteral(text: string): string { |
||||||
|
// If it is a string-literal, it is inside quotes of some kind
|
||||||
|
const inside = text.slice(1, text.length - 1); |
||||||
|
|
||||||
|
// Very simple un-escaping:
|
||||||
|
|
||||||
|
// Double quotes
|
||||||
|
if (text.startsWith('"') && text.endsWith('"')) { |
||||||
|
// NOTE: this is not 100% perfect, we only unescape the double-quote,
|
||||||
|
// there might be other characters too
|
||||||
|
return inside.replace(/\\"/, '"'); |
||||||
|
} |
||||||
|
|
||||||
|
// Single quotes
|
||||||
|
if (text.startsWith("'") && text.endsWith("'")) { |
||||||
|
// NOTE: this is not 100% perfect, we only unescape the single-quote,
|
||||||
|
// there might be other characters too
|
||||||
|
return inside.replace(/\\'/, "'"); |
||||||
|
} |
||||||
|
|
||||||
|
// Backticks
|
||||||
|
if (text.startsWith('`') && text.endsWith('`')) { |
||||||
|
return inside; |
||||||
|
} |
||||||
|
|
||||||
|
throw new Error(`Invalid string literal: ${text}`); |
||||||
|
} |
||||||
|
|
||||||
|
export type LabelOperator = '=' | '!=' | '=~' | '!~'; |
||||||
|
|
||||||
|
export type Label = { |
||||||
|
name: string; |
||||||
|
value: string; |
||||||
|
op: LabelOperator; |
||||||
|
}; |
||||||
|
|
||||||
|
export type Situation = |
||||||
|
| { |
||||||
|
type: 'EMPTY'; |
||||||
|
} |
||||||
|
| { |
||||||
|
type: 'AT_ROOT'; |
||||||
|
} |
||||||
|
| { |
||||||
|
type: 'IN_DURATION'; |
||||||
|
} |
||||||
|
| { |
||||||
|
type: 'IN_AGGREGATION'; |
||||||
|
} |
||||||
|
| { |
||||||
|
type: 'IN_GROUPING'; |
||||||
|
otherLabels: Label[]; |
||||||
|
} |
||||||
|
| { |
||||||
|
type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME'; |
||||||
|
otherLabels: Label[]; |
||||||
|
} |
||||||
|
| { |
||||||
|
type: 'IN_LABEL_SELECTOR_WITH_LABEL_NAME'; |
||||||
|
labelName: string; |
||||||
|
betweenQuotes: boolean; |
||||||
|
otherLabels: Label[]; |
||||||
|
} |
||||||
|
| { |
||||||
|
type: 'AFTER_SELECTOR'; |
||||||
|
afterPipe: boolean; |
||||||
|
labels: Label[]; |
||||||
|
}; |
||||||
|
|
||||||
|
type Resolver = { |
||||||
|
path: NodeType[]; |
||||||
|
fun: (node: SyntaxNode, text: string, pos: number) => Situation | null; |
||||||
|
}; |
||||||
|
|
||||||
|
function isPathMatch(resolverPath: NodeType[], cursorPath: number[]): boolean { |
||||||
|
return resolverPath.every((item, index) => item === cursorPath[index]); |
||||||
|
} |
||||||
|
|
||||||
|
const ERROR_NODE_ID = 0; |
||||||
|
|
||||||
|
const RESOLVERS: Resolver[] = [ |
||||||
|
{ |
||||||
|
path: [Selector], |
||||||
|
fun: resolveSelector, |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: [LogQL], |
||||||
|
fun: resolveTopLevel, |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: [String, Matcher], |
||||||
|
fun: resolveMatcher, |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: [Grouping], |
||||||
|
fun: resolveLabelsForGrouping, |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: [LogRangeExpr], |
||||||
|
fun: resolveLogRange, |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: [ERROR_NODE_ID, Matcher], |
||||||
|
fun: resolveMatcher, |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: [ERROR_NODE_ID, Range], |
||||||
|
fun: resolveDurations, |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: [ERROR_NODE_ID, LogRangeExpr], |
||||||
|
fun: resolveLogRangeFromError, |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: [ERROR_NODE_ID, VectorAggregationExpr], |
||||||
|
fun: () => ({ type: 'IN_AGGREGATION' }), |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: [ERROR_NODE_ID, PipelineStage, PipelineExpr], |
||||||
|
fun: resolvePipeError, |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
const LABEL_OP_MAP = new Map<string, LabelOperator>([ |
||||||
|
['Eq', '='], |
||||||
|
['Re', '=~'], |
||||||
|
['Neq', '!='], |
||||||
|
['Nre', '!~'], |
||||||
|
]); |
||||||
|
|
||||||
|
function getLabelOp(opNode: SyntaxNode): LabelOperator | null { |
||||||
|
return LABEL_OP_MAP.get(opNode.name) ?? null; |
||||||
|
} |
||||||
|
|
||||||
|
function getLabel(matcherNode: SyntaxNode, text: string): Label | null { |
||||||
|
if (matcherNode.type.id !== Matcher) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const nameNode = walk(matcherNode, [['firstChild', Identifier]]); |
||||||
|
|
||||||
|
if (nameNode === null) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const opNode = nameNode.nextSibling; |
||||||
|
if (opNode === null) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const op = getLabelOp(opNode); |
||||||
|
if (op === null) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const valueNode = walk(matcherNode, [['lastChild', String]]); |
||||||
|
|
||||||
|
if (valueNode === null) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const name = getNodeText(nameNode, text); |
||||||
|
const value = parseStringLiteral(getNodeText(valueNode, text)); |
||||||
|
|
||||||
|
return { name, value, op }; |
||||||
|
} |
||||||
|
|
||||||
|
function getLabels(selectorNode: SyntaxNode, text: string): Label[] { |
||||||
|
if (selectorNode.type.id !== Selector) { |
||||||
|
return []; |
||||||
|
} |
||||||
|
|
||||||
|
let listNode: SyntaxNode | null = walk(selectorNode, [['firstChild', Matchers]]); |
||||||
|
|
||||||
|
const labels: Label[] = []; |
||||||
|
|
||||||
|
while (listNode !== null) { |
||||||
|
const matcherNode = walk(listNode, [['lastChild', Matcher]]); |
||||||
|
if (matcherNode === null) { |
||||||
|
// unexpected, we stop
|
||||||
|
return []; |
||||||
|
} |
||||||
|
|
||||||
|
const label = getLabel(matcherNode, text); |
||||||
|
if (label !== null) { |
||||||
|
labels.push(label); |
||||||
|
} |
||||||
|
|
||||||
|
// there might be more labels
|
||||||
|
listNode = walk(listNode, [['firstChild', Matchers]]); |
||||||
|
} |
||||||
|
|
||||||
|
// our labels-list is last-first, so we reverse it
|
||||||
|
labels.reverse(); |
||||||
|
|
||||||
|
return labels; |
||||||
|
} |
||||||
|
|
||||||
|
function resolvePipeError(node: SyntaxNode, text: string, pos: number): Situation | null { |
||||||
|
// for example `{level="info"} |`
|
||||||
|
const exprNode = walk(node, [ |
||||||
|
['parent', PipelineStage], |
||||||
|
['parent', PipelineExpr], |
||||||
|
]); |
||||||
|
|
||||||
|
if (exprNode === null) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const { parent } = exprNode; |
||||||
|
|
||||||
|
if (parent === null) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
if (parent.type.id === LogExpr || parent.type.id === LogRangeExpr) { |
||||||
|
return resolveLogOrLogRange(parent, text, pos, true); |
||||||
|
} |
||||||
|
|
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
function resolveLabelsForGrouping(node: SyntaxNode, text: string, pos: number): Situation | null { |
||||||
|
const aggrExpNode = walk(node, [['parent', VectorAggregationExpr]]); |
||||||
|
if (aggrExpNode === null) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
const bodyNode = aggrExpNode.getChild('MetricExpr'); |
||||||
|
if (bodyNode === null) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const selectorNode = walk(bodyNode, [ |
||||||
|
['firstChild', RangeAggregationExpr], |
||||||
|
['lastChild', LogRangeExpr], |
||||||
|
['firstChild', Selector], |
||||||
|
]); |
||||||
|
|
||||||
|
if (selectorNode === null) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const otherLabels = getLabels(selectorNode, text); |
||||||
|
|
||||||
|
return { |
||||||
|
type: 'IN_GROUPING', |
||||||
|
otherLabels, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
function resolveMatcher(node: SyntaxNode, text: string, pos: number): Situation | null { |
||||||
|
// we can arrive here for two reasons. `node` is either:
|
||||||
|
// - a StringNode (like in `{job="^"}`)
|
||||||
|
// - or an error node (like in `{job=^}`)
|
||||||
|
const inStringNode = !node.type.isError; |
||||||
|
|
||||||
|
const parent = walk(node, [['parent', Matcher]]); |
||||||
|
if (parent === null) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const labelNameNode = walk(parent, [['firstChild', Identifier]]); |
||||||
|
if (labelNameNode === null) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const labelName = getNodeText(labelNameNode, text); |
||||||
|
|
||||||
|
// now we need to go up, to the parent of Matcher,
|
||||||
|
// there can be one or many `Matchers` parents, we have
|
||||||
|
// to go through all of them
|
||||||
|
|
||||||
|
const firstListNode = walk(parent, [['parent', Matchers]]); |
||||||
|
if (firstListNode === null) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
let listNode = firstListNode; |
||||||
|
|
||||||
|
// we keep going through the parent-nodes as long as they are Matchers.
|
||||||
|
// as soon as we reach Selector, we stop
|
||||||
|
let selectorNode: SyntaxNode | null = null; |
||||||
|
while (selectorNode === null) { |
||||||
|
const parent = listNode.parent; |
||||||
|
if (parent === null) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
switch (parent.type.id) { |
||||||
|
case Matchers: |
||||||
|
//we keep looping
|
||||||
|
listNode = parent; |
||||||
|
continue; |
||||||
|
case Selector: |
||||||
|
// we reached the end, we can stop the loop
|
||||||
|
selectorNode = parent; |
||||||
|
continue; |
||||||
|
default: |
||||||
|
// we reached some other node, we stop
|
||||||
|
return null; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// now we need to find the other names
|
||||||
|
const allLabels = getLabels(selectorNode, text); |
||||||
|
|
||||||
|
// we need to remove "our" label from all-labels, if it is in there
|
||||||
|
const otherLabels = allLabels.filter((label) => label.name !== labelName); |
||||||
|
|
||||||
|
return { |
||||||
|
type: 'IN_LABEL_SELECTOR_WITH_LABEL_NAME', |
||||||
|
labelName, |
||||||
|
betweenQuotes: inStringNode, |
||||||
|
otherLabels, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
function resolveTopLevel(node: SyntaxNode, text: string, pos: number): Situation | null { |
||||||
|
// we try a couply specific paths here.
|
||||||
|
// `{x="y"}` situation, with the cursor at the end
|
||||||
|
|
||||||
|
const logExprNode = walk(node, [ |
||||||
|
['lastChild', Expr], |
||||||
|
['lastChild', LogExpr], |
||||||
|
]); |
||||||
|
|
||||||
|
if (logExprNode != null) { |
||||||
|
return resolveLogOrLogRange(logExprNode, text, pos, false); |
||||||
|
} |
||||||
|
|
||||||
|
// `s` situation, with the cursor at the end.
|
||||||
|
// (basically, user enters a non-special characters as first
|
||||||
|
// character in query field)
|
||||||
|
const idNode = walk(node, [ |
||||||
|
['firstChild', ERROR_NODE_ID], |
||||||
|
['firstChild', Identifier], |
||||||
|
]); |
||||||
|
|
||||||
|
if (idNode != null) { |
||||||
|
return { |
||||||
|
type: 'AT_ROOT', |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
// no patterns match
|
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
function resolveDurations(node: SyntaxNode, text: string, pos: number): Situation { |
||||||
|
return { |
||||||
|
type: 'IN_DURATION', |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
function resolveLogRange(node: SyntaxNode, text: string, pos: number): Situation | null { |
||||||
|
return resolveLogOrLogRange(node, text, pos, false); |
||||||
|
} |
||||||
|
|
||||||
|
function resolveLogRangeFromError(node: SyntaxNode, text: string, pos: number): Situation | null { |
||||||
|
const parent = walk(node, [['parent', LogRangeExpr]]); |
||||||
|
if (parent === null) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
return resolveLogOrLogRange(parent, text, pos, false); |
||||||
|
} |
||||||
|
|
||||||
|
function resolveLogOrLogRange(node: SyntaxNode, text: string, pos: number, afterPipe: boolean): Situation | null { |
||||||
|
// here the `node` is either a LogExpr or a LogRangeExpr
|
||||||
|
// we want to handle the case where we are next to a selector
|
||||||
|
const selectorNode = walk(node, [['firstChild', Selector]]); |
||||||
|
|
||||||
|
// we check that the selector is before the cursor, not after it
|
||||||
|
if (selectorNode != null && selectorNode.to <= pos) { |
||||||
|
const labels = getLabels(selectorNode, text); |
||||||
|
return { |
||||||
|
type: 'AFTER_SELECTOR', |
||||||
|
afterPipe, |
||||||
|
labels, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
function resolveSelector(node: SyntaxNode, text: string, pos: number): Situation | null { |
||||||
|
// for example `{^}`
|
||||||
|
|
||||||
|
// false positive:
|
||||||
|
// `{a="1"^}`
|
||||||
|
const child = walk(node, [['firstChild', Matchers]]); |
||||||
|
if (child !== null) { |
||||||
|
// means the label-matching part contains at least one label already.
|
||||||
|
//
|
||||||
|
// in this case, we will need to have a `,` character at the end,
|
||||||
|
// to be able to suggest adding the next label.
|
||||||
|
// the area between the end-of-the-child-node and the cursor-pos
|
||||||
|
// must contain a `,` in this case.
|
||||||
|
const textToCheck = text.slice(child.to, pos); |
||||||
|
|
||||||
|
if (!textToCheck.includes(',')) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const otherLabels = getLabels(node, text); |
||||||
|
|
||||||
|
return { |
||||||
|
type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME', |
||||||
|
otherLabels, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
// we find the first error-node in the tree that is at the cursor-position.
|
||||||
|
// NOTE: this might be too slow, might need to optimize it
|
||||||
|
// (ideas: we do not need to go into every subtree, based on from/to)
|
||||||
|
// also, only go to places that are in the sub-tree of the node found
|
||||||
|
// by default by lezer. problem is, `next()` will go upward too,
|
||||||
|
// and we do not want to go higher than our node
|
||||||
|
function getErrorNode(tree: Tree, text: string, cursorPos: number): SyntaxNode | null { |
||||||
|
// sometimes the cursor is a couple spaces after the end of the expression.
|
||||||
|
// to account for this situation, we "move" the cursor position back,
|
||||||
|
// so that there are no spaces between the end-of-expression and the cursor
|
||||||
|
const trimRightTextLen = text.trimEnd().length; |
||||||
|
const pos = trimRightTextLen < cursorPos ? trimRightTextLen : cursorPos; |
||||||
|
const cur = tree.cursorAt(pos); |
||||||
|
do { |
||||||
|
if (cur.from === pos && cur.to === pos) { |
||||||
|
const { node } = cur; |
||||||
|
if (node.type.isError) { |
||||||
|
return node; |
||||||
|
} |
||||||
|
} |
||||||
|
} while (cur.next()); |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
export function getSituation(text: string, pos: number): Situation | null { |
||||||
|
// there is a special case when we are at the start of writing text,
|
||||||
|
// so we handle that case first
|
||||||
|
|
||||||
|
if (text === '') { |
||||||
|
return { |
||||||
|
type: 'EMPTY', |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
const tree = parser.parse(text); |
||||||
|
|
||||||
|
// if the tree contains error, it is very probable that
|
||||||
|
// our node is one of those error nodes.
|
||||||
|
// also, if there are errors, the node lezer finds us,
|
||||||
|
// might not be the best node.
|
||||||
|
// so first we check if there is an error node at the cursor position
|
||||||
|
const maybeErrorNode = getErrorNode(tree, text, pos); |
||||||
|
|
||||||
|
const cur = maybeErrorNode != null ? maybeErrorNode.cursor() : tree.cursorAt(pos); |
||||||
|
|
||||||
|
const currentNode = cur.node; |
||||||
|
|
||||||
|
const ids = [cur.type.id]; |
||||||
|
while (cur.parent()) { |
||||||
|
ids.push(cur.type.id); |
||||||
|
} |
||||||
|
|
||||||
|
for (let resolver of RESOLVERS) { |
||||||
|
if (isPathMatch(resolver.path, ids)) { |
||||||
|
return resolver.fun(currentNode, text, pos); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return null; |
||||||
|
} |
||||||
@ -0,0 +1,43 @@ |
|||||||
|
import { escapeLabelValueInExactSelector, escapeLabelValueInRegexSelector } from './languageUtils'; |
||||||
|
|
||||||
|
describe('escapeLabelValueInExactSelector()', () => { |
||||||
|
it('handles newline characters', () => { |
||||||
|
expect(escapeLabelValueInExactSelector('t\nes\nt')).toBe('t\\nes\\nt'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('handles backslash characters', () => { |
||||||
|
expect(escapeLabelValueInExactSelector('t\\es\\t')).toBe('t\\\\es\\\\t'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('handles double-quote characters', () => { |
||||||
|
expect(escapeLabelValueInExactSelector('t"es"t')).toBe('t\\"es\\"t'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('handles all together', () => { |
||||||
|
expect(escapeLabelValueInExactSelector('t\\e"st\nl\nab"e\\l')).toBe('t\\\\e\\"st\\nl\\nab\\"e\\\\l'); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('escapeLabelValueInRegexSelector()', () => { |
||||||
|
it('handles newline characters', () => { |
||||||
|
expect(escapeLabelValueInRegexSelector('t\nes\nt')).toBe('t\\nes\\nt'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('handles backslash characters', () => { |
||||||
|
expect(escapeLabelValueInRegexSelector('t\\es\\t')).toBe('t\\\\\\\\es\\\\\\\\t'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('handles double-quote characters', () => { |
||||||
|
expect(escapeLabelValueInRegexSelector('t"es"t')).toBe('t\\"es\\"t'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('handles regex-meaningful characters', () => { |
||||||
|
expect(escapeLabelValueInRegexSelector('t+es$t')).toBe('t\\\\+es\\\\$t'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('handles all together', () => { |
||||||
|
expect(escapeLabelValueInRegexSelector('t\\e"s+t\nl\n$ab"e\\l')).toBe( |
||||||
|
't\\\\\\\\e\\"s\\\\+t\\nl\\n\\\\$ab\\"e\\\\\\\\l' |
||||||
|
); |
||||||
|
}); |
||||||
|
}); |
||||||
Loading…
Reference in new issue