mirror of https://github.com/grafana/grafana
Prometheus: Facilitate tree shaking with exports and bundler mode (#105575)
* feat: bundler mode * refactor: simplify singleton modeller * refactor: isolate state * refactor: decouple query rendering from modeller * fix: remove unused var * build: configure declaration files * refactor!: configure exports * fix: remove unused file * fix: use shared utils only * refactor: avoid confusing singleton * fix: avoid ReDoS see https://github.com/grafana/grafana/security/code-scanning/2883 for details * fix: avoid catastrophic backtracking see https://github.com/grafana/grafana/security/code-scanning/2884 for details * fix: circular dep * fix: make rollup happy by restoring declarationDir * fix: import * fix: circular dep * chore: remove superfluous file * fix: remove duplicate modeller code * chore: remove superfluous comment * fix: handle subpaths in exports * fix: add missing ignore * fix: correctly ignore assertion * refactor: improve clarity * refactor: promote clarity, be explicit * refactor: more sensible filter * fix: add missing devDep * fix: circular import * refactor: avoid type assertions where possible * fix: linting * chore: remove subpath exports for now * chore: prefer forthcoming solution for arbitrary exports * chore: undo erroneous change after merge * refactor: prefer snake_case * fix: linting * refactor: simplifypull/106833/head
Nick Richmond
1 month ago
committed by
GitHub
parent
e90134bb6f
commit
c65ef07635
@ -0,0 +1,125 @@ |
||||
import { css } from '@emotion/css'; |
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { Trans } from '@grafana/i18n'; |
||||
import { FieldValidationMessage, TextLink } from '@grafana/ui'; |
||||
|
||||
/** |
||||
* Use this to return a url in a tooltip in a field. Don't forget to make the field interactive to be able to click on the tooltip |
||||
* @param url |
||||
* @returns |
||||
*/ |
||||
export function docsTip(url?: string) { |
||||
const docsUrl = 'https://grafana.com/docs/grafana/latest/datasources/prometheus/configure-prometheus-data-source/'; |
||||
|
||||
return ( |
||||
<TextLink href={url ? url : docsUrl} external> |
||||
<Trans i18nKey="configuration.docs-tip.visit-docs-for-more-details-here">Visit docs for more details here.</Trans> |
||||
</TextLink> |
||||
); |
||||
} |
||||
|
||||
export const validateInput = ( |
||||
input: string, |
||||
pattern: string | RegExp, |
||||
errorMessage?: string |
||||
): boolean | JSX.Element => { |
||||
const defaultErrorMessage = 'Value is not valid'; |
||||
const inputTooLongErrorMessage = 'Input is too long'; |
||||
const validationTimeoutErrorMessage = 'Validation timeout - input too complex'; |
||||
const invalidValidationPatternErrorMessage = 'Invalid validation pattern'; |
||||
const MAX_INPUT_LENGTH = 1000; // Reasonable limit for most validation cases
|
||||
|
||||
// Early return if no input
|
||||
if (!input) { |
||||
return true; |
||||
} |
||||
|
||||
// Check input length
|
||||
if (input.length > MAX_INPUT_LENGTH) { |
||||
return <FieldValidationMessage>{inputTooLongErrorMessage}</FieldValidationMessage>; |
||||
} |
||||
|
||||
try { |
||||
// Convert string pattern to RegExp if needed
|
||||
let regex = typeof pattern === 'string' ? new RegExp(pattern) : pattern; |
||||
|
||||
// Ensure pattern is properly anchored to prevent catastrophic backtracking
|
||||
if (typeof pattern === 'string' && !pattern.startsWith('^') && !pattern.endsWith('$')) { |
||||
regex = new RegExp(`^${pattern}$`); |
||||
} |
||||
|
||||
// Add timeout to prevent ReDoS
|
||||
const timeout = 100; // 100ms timeout
|
||||
const startTime = Date.now(); |
||||
|
||||
const isValid = regex.test(input); |
||||
|
||||
// Check if execution took too long
|
||||
if (Date.now() - startTime > timeout) { |
||||
return <FieldValidationMessage>{validationTimeoutErrorMessage}</FieldValidationMessage>; |
||||
} |
||||
|
||||
if (!isValid) { |
||||
return <FieldValidationMessage>{errorMessage || defaultErrorMessage}</FieldValidationMessage>; |
||||
} |
||||
|
||||
return true; |
||||
} catch (error) { |
||||
return <FieldValidationMessage>{invalidValidationPatternErrorMessage}</FieldValidationMessage>; |
||||
} |
||||
}; |
||||
|
||||
export function overhaulStyles(theme: GrafanaTheme2) { |
||||
return { |
||||
additionalSettings: css({ |
||||
marginBottom: '25px', |
||||
}), |
||||
secondaryGrey: css({ |
||||
color: theme.colors.secondary.text, |
||||
opacity: '65%', |
||||
}), |
||||
inlineError: css({ |
||||
margin: '0px 0px 4px 245px', |
||||
}), |
||||
switchField: css({ |
||||
alignItems: 'center', |
||||
}), |
||||
sectionHeaderPadding: css({ |
||||
paddingTop: '32px', |
||||
}), |
||||
sectionBottomPadding: css({ |
||||
paddingBottom: '28px', |
||||
}), |
||||
subsectionText: css({ |
||||
fontSize: '12px', |
||||
}), |
||||
hrBottomSpace: css({ |
||||
marginBottom: '56px', |
||||
}), |
||||
hrTopSpace: css({ |
||||
marginTop: '50px', |
||||
}), |
||||
textUnderline: css({ |
||||
textDecoration: 'underline', |
||||
}), |
||||
versionMargin: css({ |
||||
marginBottom: '12px', |
||||
}), |
||||
advancedHTTPSettingsMargin: css({ |
||||
margin: '24px 0 8px 0', |
||||
}), |
||||
advancedSettings: css({ |
||||
paddingTop: '32px', |
||||
}), |
||||
alertingTop: css({ |
||||
marginTop: '40px !important', |
||||
}), |
||||
overhaulPageHeading: css({ |
||||
fontWeight: 400, |
||||
}), |
||||
container: css({ |
||||
maxwidth: 578, |
||||
}), |
||||
}; |
||||
} |
||||
@ -0,0 +1,17 @@ |
||||
// Max number of items (metrics, labels, values) that we display as suggestions. Prevents from running out of memory.
|
||||
export const SUGGESTIONS_LIMIT = 10000; |
||||
|
||||
export const PROMETHEUS_QUERY_BUILDER_MAX_RESULTS = 1000; |
||||
|
||||
export const PROM_CONFIG_LABEL_WIDTH = 30; |
||||
|
||||
// single duration input
|
||||
export const DURATION_REGEX = /^$|^\d+(ms|[Mwdhmsy])$/; |
||||
|
||||
// multiple duration input
|
||||
export const MULTIPLE_DURATION_REGEX = /(\d+)(.+)/; |
||||
|
||||
export const NON_NEGATIVE_INTEGER_REGEX = /^(0|[1-9]\d*)(\.\d+)?(e\+?\d+)?$/; // non-negative integers, including scientific notation
|
||||
|
||||
export const durationError = 'Value is not valid, you can use number with time unit specifier: y, M, w, d, h, m, s'; |
||||
export const countError = 'Value is not valid, you can use non-negative integers, including scientific notation'; |
||||
@ -0,0 +1,72 @@ |
||||
// NOTE: these two functions are similar to the escapeLabelValueIn* functions
|
||||
// in language_utils.ts, but they are not exactly the same algorithm, and we found
|
||||
|
||||
import { config } from '@grafana/runtime'; |
||||
|
||||
// no way to reuse one in the another or vice versa.
|
||||
export function prometheusRegularEscape<T>(value: T) { |
||||
if (typeof value !== 'string') { |
||||
return value; |
||||
} |
||||
|
||||
if (config.featureToggles.prometheusSpecialCharsInLabelValues) { |
||||
// if the string looks like a complete label matcher (e.g. 'job="grafana"' or 'job=~"grafana"'),
|
||||
// don't escape the encapsulating quotes
|
||||
if (/^\w+(=|!=|=~|!~)".*"$/.test(value)) { |
||||
return value; |
||||
} |
||||
|
||||
return value |
||||
.replace(/\\/g, '\\\\') // escape backslashes
|
||||
.replace(/"/g, '\\"'); // escape double quotes
|
||||
} |
||||
|
||||
// classic behavior
|
||||
return value |
||||
.replace(/\\/g, '\\\\') // escape backslashes
|
||||
.replace(/'/g, "\\\\'"); // escape single quotes
|
||||
} |
||||
|
||||
export function prometheusSpecialRegexEscape<T>(value: T) { |
||||
if (typeof value !== 'string') { |
||||
return value; |
||||
} |
||||
|
||||
if (config.featureToggles.prometheusSpecialCharsInLabelValues) { |
||||
return value |
||||
.replace(/\\/g, '\\\\\\\\') // escape backslashes
|
||||
.replace(/"/g, '\\\\\\"') // escape double quotes
|
||||
.replace(/[$^*{}\[\]\'+?.()|]/g, '\\\\$&'); // escape regex metacharacters
|
||||
} |
||||
|
||||
// classic behavior
|
||||
return value |
||||
.replace(/\\/g, '\\\\\\\\') // escape backslashes
|
||||
.replace(/[$^*{}\[\]+?.()|]/g, '\\\\$&'); // escape regex metacharacters
|
||||
} |
||||
|
||||
// NOTE: the following 2 exported functions are very similar to the prometheus*Escape
|
||||
// functions in datasource.ts, but they are not exactly the same algorithm, and we found
|
||||
// no way to reuse one in the another or vice versa.
|
||||
|
||||
// Prometheus regular-expressions use the RE2 syntax (https://github.com/google/re2/wiki/Syntax),
|
||||
// so every character that matches something in that list has to be escaped.
|
||||
// the list of metacharacters is: *+?()|\.[]{}^$
|
||||
// we make a javascript regular expression that matches those characters:
|
||||
const RE2_METACHARACTERS = /[*+?()|\\.\[\]{}^$]/g; |
||||
|
||||
function escapePrometheusRegexp(value: string): string { |
||||
return value.replace(RE2_METACHARACTERS, '\\$&'); |
||||
} |
||||
|
||||
// based on the openmetrics-documentation, the 3 symbols we have to handle are:
|
||||
// - \n ... the newline character
|
||||
// - \ ... the backslash character
|
||||
// - " ... the double-quote character
|
||||
export function escapeLabelValueInExactSelector(labelValue: string): string { |
||||
return labelValue.replace(/\\/g, '\\\\').replace(/\n/g, '\\n').replace(/"/g, '\\"'); |
||||
} |
||||
|
||||
export function escapeLabelValueInRegexSelector(labelValue: string): string { |
||||
return escapeLabelValueInExactSelector(escapePrometheusRegexp(labelValue)); |
||||
} |
||||
@ -0,0 +1,52 @@ |
||||
import { ComponentType } from 'react'; |
||||
|
||||
import { promQueryModeller } from '../shared/modeller_instance'; |
||||
import { QueryBuilderOperationParamEditorProps } from '../shared/types'; |
||||
import { PromQueryModellerInterface } from '../types'; |
||||
|
||||
import { LabelParamEditor } from './LabelParamEditor'; |
||||
|
||||
/** |
||||
* Maps string keys to editor components with the modeller instance injected. |
||||
* |
||||
* This wrapper is a key part of avoiding circular dependencies: |
||||
* - Operation definitions reference editors by string key (no import) |
||||
* - The registry maps these keys to editor components |
||||
* - This wrapper injects the modeller instance into those components |
||||
* |
||||
* This creates a clear one-way dependency flow: |
||||
* Operation Definitions -> Registry -> Editor Components <- Wrapper <- Modeller Instance |
||||
* |
||||
* Without this wrapper, we would have a circular dependency: |
||||
* Operation Definitions -> Editors -> Modeller -> Operation Definitions |
||||
*/ |
||||
const editorMap: Record< |
||||
string, |
||||
ComponentType<QueryBuilderOperationParamEditorProps & { queryModeller: PromQueryModellerInterface }> |
||||
> = { |
||||
LabelParamEditor: (props) => <LabelParamEditor {...props} queryModeller={promQueryModeller} />, |
||||
}; |
||||
|
||||
/** |
||||
* Wrapper component that resolves and renders the appropriate editor component. |
||||
* |
||||
* This component: |
||||
* 1. Takes a parameter definition that may specify an editor by string key or direct reference |
||||
* 2. Resolves the editor component from the map if a string key is used |
||||
* 3. Renders the editor with all necessary props, including the modeller instance |
||||
* |
||||
* This separation of concerns allows operation definitions to be simpler while ensuring |
||||
* editors have access to all the dependencies they need, without creating circular dependencies. |
||||
*/ |
||||
export function OperationParamEditorWrapper(props: QueryBuilderOperationParamEditorProps) { |
||||
const { paramDef } = props; |
||||
const EditorComponent = typeof paramDef.editor === 'string' ? editorMap[paramDef.editor] : paramDef.editor; |
||||
|
||||
if (!EditorComponent) { |
||||
return null; |
||||
} |
||||
|
||||
// Type assertion is safe here because we know the editorMap only contains components
|
||||
// that require the modeller instance
|
||||
return <EditorComponent {...props} queryModeller={promQueryModeller} />; |
||||
} |
||||
@ -1 +0,0 @@ |
||||
export * from './MetricsModal'; |
||||
@ -0,0 +1,3 @@ |
||||
import { createAction } from '@reduxjs/toolkit'; |
||||
|
||||
export const setFilteredMetricCount = createAction<number>('metrics-modal/setFilteredMetricCount'); |
||||
@ -0,0 +1,17 @@ |
||||
import { SelectableValue } from '@grafana/data'; |
||||
|
||||
import { MetricsData } from '../types'; |
||||
|
||||
export interface MetricsModalStateModel { |
||||
isLoading: boolean; |
||||
metrics: MetricsData; |
||||
hasMetadata: boolean; |
||||
selectedTypes: Array<SelectableValue<string>>; |
||||
} |
||||
|
||||
export const initialState = (query: unknown): MetricsModalStateModel => ({ |
||||
isLoading: true, |
||||
metrics: [], |
||||
hasMetadata: false, |
||||
selectedTypes: [], |
||||
}); |
||||
@ -0,0 +1,12 @@ |
||||
export const metricsModaltestIds = { |
||||
metricModal: 'metric-modal', |
||||
searchMetric: 'search-metric', |
||||
searchWithMetadata: 'search-with-metadata', |
||||
selectType: 'select-type', |
||||
metricCard: 'metric-card', |
||||
useMetric: 'use-metric', |
||||
searchPage: 'search-page', |
||||
resultsPerPage: 'results-per-page', |
||||
setUseBackend: 'set-use-backend', |
||||
showAdditionalSettings: 'show-additional-settings', |
||||
}; |
||||
@ -0,0 +1,27 @@ |
||||
import { PrometheusDatasource } from '../../../../datasource'; |
||||
import { PromVisualQuery } from '../../../types'; |
||||
|
||||
export interface MetricsModalState { |
||||
useBackend: boolean; |
||||
disableTextWrap: boolean; |
||||
includeNullMetadata: boolean; |
||||
fullMetaSearch: boolean; |
||||
hasMetadata: boolean; |
||||
} |
||||
|
||||
export interface MetricsModalProps { |
||||
datasource: PrometheusDatasource; |
||||
isOpen: boolean; |
||||
query: PromVisualQuery; |
||||
onClose: () => void; |
||||
onChange: (query: PromVisualQuery) => void; |
||||
initialMetrics: string[] | (() => Promise<string[]>); |
||||
} |
||||
|
||||
export interface AdditionalSettingsProps { |
||||
state: MetricsModalState; |
||||
onChangeFullMetaSearch: () => void; |
||||
onChangeIncludeNullMetadata: () => void; |
||||
onChangeDisableTextWrap: () => void; |
||||
onChangeUseBackend: () => void; |
||||
} |
||||
@ -0,0 +1,27 @@ |
||||
import { memo } from 'react'; |
||||
|
||||
import { NestedQueryList } from '../NestedQueryList'; |
||||
|
||||
import { BaseQueryBuilderProps } from './BaseQueryBuilderProps'; |
||||
import { QueryBuilderContent } from './QueryBuilderContent'; |
||||
|
||||
export const BaseQueryBuilder = memo<BaseQueryBuilderProps>((props) => { |
||||
const { query, datasource, onChange, onRunQuery, showExplain } = props; |
||||
|
||||
return ( |
||||
<> |
||||
<QueryBuilderContent {...props} /> |
||||
{query.binaryQueries && query.binaryQueries.length > 0 && ( |
||||
<NestedQueryList |
||||
query={query} |
||||
datasource={datasource} |
||||
onChange={onChange} |
||||
onRunQuery={onRunQuery} |
||||
showExplain={showExplain} |
||||
/> |
||||
)} |
||||
</> |
||||
); |
||||
}); |
||||
|
||||
BaseQueryBuilder.displayName = 'BaseQueryBuilder'; |
||||
@ -0,0 +1,13 @@ |
||||
import { PanelData } from '@grafana/data'; |
||||
|
||||
import { PrometheusDatasource } from '../../../datasource'; |
||||
import { PromVisualQuery } from '../../types'; |
||||
|
||||
export interface BaseQueryBuilderProps { |
||||
query: PromVisualQuery; |
||||
datasource: PrometheusDatasource; |
||||
onChange: (update: PromVisualQuery) => void; |
||||
onRunQuery: () => void; |
||||
data?: PanelData; |
||||
showExplain: boolean; |
||||
} |
||||
@ -0,0 +1,102 @@ |
||||
import { css } from '@emotion/css'; |
||||
import { memo, useState } from 'react'; |
||||
|
||||
import { DataSourceApi, getDefaultTimeRange } from '@grafana/data'; |
||||
import { selectors } from '@grafana/e2e-selectors'; |
||||
import { EditorRow } from '@grafana/plugin-ui'; |
||||
|
||||
import promqlGrammar from '../../../promql'; |
||||
import { getInitHints } from '../../../query_hints'; |
||||
import { buildVisualQueryFromString } from '../../parsing'; |
||||
import { OperationExplainedBox } from '../../shared/OperationExplainedBox'; |
||||
import { OperationList } from '../../shared/OperationList'; |
||||
import { OperationListExplained } from '../../shared/OperationListExplained'; |
||||
import { OperationsEditorRow } from '../../shared/OperationsEditorRow'; |
||||
import { QueryBuilderHints } from '../../shared/QueryBuilderHints'; |
||||
import { RawQuery } from '../../shared/RawQuery'; |
||||
import { promQueryModeller } from '../../shared/modeller_instance'; |
||||
import { QueryBuilderOperation } from '../../shared/types'; |
||||
import { PromVisualQuery } from '../../types'; |
||||
import { MetricsLabelsSection } from '../MetricsLabelsSection'; |
||||
import { EXPLAIN_LABEL_FILTER_CONTENT } from '../PromQueryBuilderExplained'; |
||||
|
||||
import { BaseQueryBuilderProps } from './BaseQueryBuilderProps'; |
||||
|
||||
export const QueryBuilderContent = memo<BaseQueryBuilderProps>((props) => { |
||||
const { datasource, query, onChange, onRunQuery, data, showExplain } = props; |
||||
const [highlightedOp, setHighlightedOp] = useState<QueryBuilderOperation | undefined>(); |
||||
|
||||
const lang = { grammar: promqlGrammar, name: 'promql' }; |
||||
const initHints = getInitHints(datasource); |
||||
|
||||
return ( |
||||
<> |
||||
<EditorRow> |
||||
<MetricsLabelsSection |
||||
query={query} |
||||
onChange={onChange} |
||||
datasource={datasource} |
||||
timeRange={data?.timeRange ?? getDefaultTimeRange()} |
||||
/> |
||||
</EditorRow> |
||||
{initHints.length ? ( |
||||
<div |
||||
className={css({ |
||||
flexBasis: '100%', |
||||
})} |
||||
> |
||||
<div className="text-warning"> |
||||
{initHints[0].label}{' '} |
||||
{initHints[0].fix ? ( |
||||
<button type="button" className={'text-warning'}> |
||||
{initHints[0].fix.label} |
||||
</button> |
||||
) : null} |
||||
</div> |
||||
</div> |
||||
) : null} |
||||
{showExplain && ( |
||||
<OperationExplainedBox |
||||
stepNumber={1} |
||||
title={<RawQuery query={`${promQueryModeller.renderQuery(query)}`} lang={lang} />} |
||||
> |
||||
{EXPLAIN_LABEL_FILTER_CONTENT} |
||||
</OperationExplainedBox> |
||||
)} |
||||
<OperationsEditorRow> |
||||
<OperationList<PromVisualQuery> |
||||
queryModeller={promQueryModeller} |
||||
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
|
||||
datasource={datasource as DataSourceApi} |
||||
query={query} |
||||
onChange={onChange} |
||||
onRunQuery={onRunQuery} |
||||
highlightedOp={highlightedOp} |
||||
timeRange={data?.timeRange ?? getDefaultTimeRange()} |
||||
/> |
||||
<div data-testid={selectors.components.DataSource.Prometheus.queryEditor.builder.hints}> |
||||
<QueryBuilderHints |
||||
datasource={datasource} |
||||
query={query} |
||||
onChange={onChange} |
||||
data={data} |
||||
queryModeller={promQueryModeller} |
||||
buildVisualQueryFromString={buildVisualQueryFromString} |
||||
/> |
||||
</div> |
||||
</OperationsEditorRow> |
||||
{showExplain && ( |
||||
<OperationListExplained<PromVisualQuery> |
||||
lang={lang} |
||||
query={query} |
||||
stepNumber={2} |
||||
queryModeller={promQueryModeller} |
||||
onMouseEnter={(op: QueryBuilderOperation) => setHighlightedOp(op)} |
||||
onMouseLeave={() => setHighlightedOp(undefined)} |
||||
/> |
||||
)} |
||||
</> |
||||
); |
||||
}); |
||||
|
||||
QueryBuilderContent.displayName = 'QueryBuilderContent'; |
||||
@ -0,0 +1,21 @@ |
||||
import { DataSourceApi, PanelData } from '@grafana/data'; |
||||
|
||||
import { PrometheusDatasource } from '../../../datasource'; |
||||
import { PromVisualQuery } from '../../types'; |
||||
|
||||
export interface NestedQueryProps { |
||||
query: PromVisualQuery; |
||||
datasource: DataSourceApi; |
||||
onChange: (query: PromVisualQuery) => void; |
||||
onRunQuery: () => void; |
||||
showExplain: boolean; |
||||
} |
||||
|
||||
export interface QueryBuilderProps { |
||||
query: PromVisualQuery; |
||||
datasource: PrometheusDatasource; |
||||
onChange: (query: PromVisualQuery) => void; |
||||
onRunQuery: () => void; |
||||
data?: PanelData; |
||||
showExplain: boolean; |
||||
} |
||||
@ -0,0 +1,98 @@ |
||||
import { capitalize } from 'lodash'; |
||||
|
||||
import { SelectableValue } from '@grafana/data'; |
||||
|
||||
import { |
||||
functionRendererLeft, |
||||
getOnLabelAddedHandler, |
||||
getAggregationExplainer, |
||||
defaultAddOperationHandler, |
||||
getAggregationByRenderer, |
||||
getLastLabelRemovedHandler, |
||||
} from './operationUtils'; |
||||
import { QueryBuilderOperationDef, QueryBuilderOperationParamDef } from './shared/types'; |
||||
import { PromVisualQueryOperationCategory } from './types'; |
||||
|
||||
export function getRangeVectorParamDef(withRateInterval = false): QueryBuilderOperationParamDef { |
||||
const options: Array<SelectableValue<string>> = [ |
||||
{ |
||||
label: '$__interval', |
||||
value: '$__interval', |
||||
}, |
||||
{ label: '1m', value: '1m' }, |
||||
{ label: '5m', value: '5m' }, |
||||
{ label: '10m', value: '10m' }, |
||||
{ label: '1h', value: '1h' }, |
||||
{ label: '24h', value: '24h' }, |
||||
]; |
||||
|
||||
if (withRateInterval) { |
||||
options.unshift({ |
||||
label: '$__rate_interval', |
||||
value: '$__rate_interval', |
||||
}); |
||||
} |
||||
|
||||
const param: QueryBuilderOperationParamDef = { |
||||
name: 'Range', |
||||
type: 'string', |
||||
options, |
||||
}; |
||||
|
||||
return param; |
||||
} |
||||
|
||||
export function createAggregationOperation( |
||||
name: string, |
||||
overrides: Partial<QueryBuilderOperationDef> = {} |
||||
): QueryBuilderOperationDef[] { |
||||
const operations: QueryBuilderOperationDef[] = [ |
||||
{ |
||||
id: name, |
||||
name: getPromOperationDisplayName(name), |
||||
params: [ |
||||
{ |
||||
name: 'By label', |
||||
type: 'string', |
||||
restParam: true, |
||||
optional: true, |
||||
}, |
||||
], |
||||
defaultParams: [], |
||||
alternativesKey: 'plain aggregations', |
||||
category: PromVisualQueryOperationCategory.Aggregations, |
||||
renderer: functionRendererLeft, |
||||
paramChangedHandler: getOnLabelAddedHandler(`__${name}_by`), |
||||
explainHandler: getAggregationExplainer(name, ''), |
||||
addOperationHandler: defaultAddOperationHandler, |
||||
...overrides, |
||||
}, |
||||
{ |
||||
id: `__${name}_by`, |
||||
name: `${getPromOperationDisplayName(name)} by`, |
||||
params: [ |
||||
{ |
||||
name: 'Label', |
||||
type: 'string', |
||||
restParam: true, |
||||
optional: true, |
||||
}, |
||||
], |
||||
defaultParams: [''], |
||||
alternativesKey: 'aggregations by', |
||||
category: PromVisualQueryOperationCategory.Aggregations, |
||||
renderer: getAggregationByRenderer(name), |
||||
paramChangedHandler: getLastLabelRemovedHandler(name), |
||||
explainHandler: getAggregationExplainer(name, 'by'), |
||||
addOperationHandler: defaultAddOperationHandler, |
||||
hideFromList: true, |
||||
...overrides, |
||||
}, |
||||
]; |
||||
|
||||
return operations; |
||||
} |
||||
|
||||
function getPromOperationDisplayName(funcName: string) { |
||||
return capitalize(funcName.replace(/_/g, ' ')); |
||||
} |
||||
@ -0,0 +1,10 @@ |
||||
import { PromQueryModeller } from '../PromQueryModeller'; |
||||
import { PromQueryModellerInterface } from '../types'; |
||||
|
||||
/** |
||||
* This singleton instance of the Prometheus query modeller is a central point |
||||
* for accessing the query modeller functionality while avoiding circular |
||||
* dependencies in the codebase. |
||||
*/ |
||||
|
||||
export const promQueryModeller: PromQueryModellerInterface = new PromQueryModeller(); |
||||
@ -0,0 +1,3 @@ |
||||
export function getOperationParamId(operationId: string, paramIndex: number) { |
||||
return `operations.${operationId}.param.${paramIndex}`; |
||||
} |
||||
@ -0,0 +1,16 @@ |
||||
import { QueryBuilderLabelFilter } from './types'; |
||||
|
||||
export function buildMetricQuery(metric: string, labels: QueryBuilderLabelFilter[]) { |
||||
let expr = metric; |
||||
if (labels.length > 0) { |
||||
expr = `${metric}{${labels.map(renderLabelFilter).join(',')}}`; |
||||
} |
||||
return expr; |
||||
} |
||||
|
||||
function renderLabelFilter(label: QueryBuilderLabelFilter): string { |
||||
if (label.value === '') { |
||||
return `${label.label}=""`; |
||||
} |
||||
return `${label.label}${label.op}"${label.value}"`; |
||||
} |
||||
@ -0,0 +1,31 @@ |
||||
import { config } from '@grafana/runtime'; |
||||
|
||||
import { prometheusRegularEscape } from '../../../escaping'; |
||||
import { utf8Support } from '../../../utf8_support'; |
||||
import { QueryBuilderLabelFilter } from '../types'; |
||||
|
||||
/** |
||||
* Renders label filters in the format: {label1="value1", label2="value2"} |
||||
*/ |
||||
export function renderLabels(labels: QueryBuilderLabelFilter[]): string { |
||||
if (labels.length === 0) { |
||||
return ''; |
||||
} |
||||
|
||||
let expr = '{'; |
||||
for (const filter of labels) { |
||||
if (expr !== '{') { |
||||
expr += ', '; |
||||
} |
||||
|
||||
let labelValue = filter.value; |
||||
const usingRegexOperator = filter.op === '=~' || filter.op === '!~'; |
||||
|
||||
if (config.featureToggles.prometheusSpecialCharsInLabelValues && !usingRegexOperator) { |
||||
labelValue = prometheusRegularEscape(labelValue); |
||||
} |
||||
expr += `${utf8Support(filter.label)}${filter.op}"${labelValue}"`; |
||||
} |
||||
|
||||
return expr + `}`; |
||||
} |
||||
@ -0,0 +1,37 @@ |
||||
import { PromVisualQueryOperationCategory } from '../../types'; |
||||
import { PromLokiVisualQuery } from '../LokiAndPromQueryModellerBase'; |
||||
import { QueryBuilderOperation, QueryBuilderOperationDef } from '../types'; |
||||
|
||||
/** |
||||
* Renders operations |
||||
*/ |
||||
export function renderOperations( |
||||
queryString: string, |
||||
operations: QueryBuilderOperation[], |
||||
operationsRegistry: Map<string, QueryBuilderOperationDef> |
||||
): string { |
||||
for (const operation of operations) { |
||||
const def = operationsRegistry.get(operation.id); |
||||
if (!def) { |
||||
throw new Error(`Could not find operation ${operation.id} in the registry`); |
||||
} |
||||
queryString = def.renderer(operation, def, queryString); |
||||
} |
||||
|
||||
return queryString; |
||||
} |
||||
|
||||
/** |
||||
* Checks if query has binary operation |
||||
*/ |
||||
export function hasBinaryOp( |
||||
query: PromLokiVisualQuery, |
||||
operationsRegistry: Map<string, QueryBuilderOperationDef> |
||||
): boolean { |
||||
return ( |
||||
query.operations.find((op) => { |
||||
const def = operationsRegistry.get(op.id); |
||||
return def?.category === PromVisualQueryOperationCategory.BinaryOps; |
||||
}) !== undefined |
||||
); |
||||
} |
||||
@ -0,0 +1,141 @@ |
||||
import { isValidLegacyName } from '../../../utf8_support'; |
||||
import { PromLokiVisualQuery, VisualQueryBinary } from '../LokiAndPromQueryModellerBase'; |
||||
import { QueryBuilderOperationDef } from '../types'; |
||||
|
||||
import { renderLabels } from './labels'; |
||||
import { hasBinaryOp, renderOperations } from './operations'; |
||||
|
||||
/** |
||||
* Renders binary queries |
||||
*/ |
||||
export function renderBinaryQueries( |
||||
queryString: string, |
||||
binaryQueries?: Array<VisualQueryBinary<PromLokiVisualQuery>> |
||||
): string { |
||||
if (binaryQueries) { |
||||
for (const binQuery of binaryQueries) { |
||||
queryString = `${renderBinaryQuery(queryString, binQuery)}`; |
||||
} |
||||
} |
||||
return queryString; |
||||
} |
||||
|
||||
/** |
||||
* Renders a binary query |
||||
*/ |
||||
export function renderBinaryQuery(leftOperand: string, binaryQuery: VisualQueryBinary<PromLokiVisualQuery>): string { |
||||
let result = leftOperand + ` ${binaryQuery.operator} `; |
||||
|
||||
if (binaryQuery.vectorMatches) { |
||||
result += `${binaryQuery.vectorMatchesType}(${binaryQuery.vectorMatches}) `; |
||||
} |
||||
|
||||
return result + renderQuery(binaryQuery.query, true); |
||||
} |
||||
|
||||
/** |
||||
* Renders a full query |
||||
*/ |
||||
export function renderQuery( |
||||
query: PromLokiVisualQuery, |
||||
nested?: boolean, |
||||
operationsRegistry?: Map<string, QueryBuilderOperationDef> |
||||
): string { |
||||
// Handle empty query
|
||||
if (!query.metric && query.labels.length === 0 && query.operations.length === 0) { |
||||
return ''; |
||||
} |
||||
|
||||
let queryString = ''; |
||||
const labels = renderLabels(query.labels); |
||||
|
||||
if (query.metric) { |
||||
if (isValidLegacyName(query.metric)) { |
||||
// This is a legacy metric, put outside the curl legacy_query{label="value"}
|
||||
queryString = `${query.metric}${labels}`; |
||||
} else { |
||||
// This is a utf8 metric, put inside the curly and quotes {"utf8.metric", label="value"}
|
||||
queryString = `{"${query.metric}"${labels.length > 0 ? `, ${labels.substring(1)}` : `}`}`; |
||||
} |
||||
} else if (query.labels.length > 0) { |
||||
// No metric just use labels {label="value"}
|
||||
queryString = labels; |
||||
} else if (query.operations.length > 0) { |
||||
// For query patterns, we want the operation to render as e.g. rate([$__rate_interval])
|
||||
queryString = ''; |
||||
} |
||||
|
||||
// If we have operations and an operations registry, render the operations
|
||||
if (query.operations.length > 0) { |
||||
if (operationsRegistry) { |
||||
queryString = renderOperations(queryString, query.operations, operationsRegistry); |
||||
} else { |
||||
// For cases like add_label_to_query, handle operations generically
|
||||
for (const operation of query.operations) { |
||||
// Special case to handle basic operations like multiplication
|
||||
if (operation.id === 'MultiplyBy' && operation.params && operation.params.length > 0) { |
||||
queryString = `${queryString} * ${operation.params[0]}`; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
// Check if this query or child queries need parentheses
|
||||
const hasNesting = Boolean(query.binaryQueries?.length); |
||||
const hasBinaryOperation = operationsRegistry ? hasBinaryOp(query, operationsRegistry) : false; |
||||
|
||||
// Handle nested queries with binary operations
|
||||
if (!nested && hasBinaryOperation && hasNesting) { |
||||
queryString = `(${queryString})`; |
||||
} |
||||
|
||||
// Render any binary queries
|
||||
if (hasNesting) { |
||||
for (const binQuery of query.binaryQueries!) { |
||||
const rightOperand = renderNestedPart(binQuery.query, operationsRegistry); |
||||
|
||||
// Add vector matching if present
|
||||
let vectorMatchingStr = ''; |
||||
if (binQuery.vectorMatches) { |
||||
vectorMatchingStr = `${binQuery.vectorMatchesType}(${binQuery.vectorMatches}) `; |
||||
} |
||||
|
||||
// Combine left and right operands with operator
|
||||
queryString = `${queryString} ${binQuery.operator} ${vectorMatchingStr}${rightOperand}`; |
||||
} |
||||
} |
||||
|
||||
// Add parentheses for nested queries when needed
|
||||
if (nested && (hasBinaryOperation || hasNesting)) { |
||||
queryString = `(${queryString})`; |
||||
} |
||||
|
||||
return queryString; |
||||
} |
||||
|
||||
/** |
||||
* Special helper for rendering a nested part of a binary query |
||||
* This ensures we only add parentheses when needed |
||||
*/ |
||||
function renderNestedPart( |
||||
query: PromLokiVisualQuery, |
||||
operationsRegistry?: Map<string, QueryBuilderOperationDef> |
||||
): string { |
||||
// First render the query itself
|
||||
const renderedQuery = renderQuery(query, false, operationsRegistry); |
||||
|
||||
const hasOps = query.operations.length > 0; |
||||
const hasNestedBinary = Boolean(query.binaryQueries?.length); |
||||
|
||||
// If this is an operation-only query (no metric, no labels, no binaryQueries, at least one operation), do not add parentheses
|
||||
if (hasOps && !hasNestedBinary && !query.metric && (!query.labels || query.labels.length === 0)) { |
||||
return renderedQuery; |
||||
} |
||||
|
||||
// Keep the correct format for test expectations
|
||||
if (hasOps || hasNestedBinary) { |
||||
return `(${renderedQuery})`; |
||||
} |
||||
|
||||
return renderedQuery; |
||||
} |
||||
@ -0,0 +1,13 @@ |
||||
import { QueryBuilderLabelFilter, QueryBuilderOperation } from '../types'; |
||||
|
||||
export interface PromLokiVisualQuery { |
||||
metric?: string; |
||||
labels: QueryBuilderLabelFilter[]; |
||||
operations: QueryBuilderOperation[]; |
||||
} |
||||
|
||||
export interface VisualQueryBinary { |
||||
operator: string; |
||||
vectorMatches?: string; |
||||
query: PromLokiVisualQuery; |
||||
} |
||||
Loading…
Reference in new issue