|
@@ -1,12 +1,16 @@
|
|
|
import _ from 'lodash';
|
|
import _ from 'lodash';
|
|
|
|
|
+import moment from 'moment';
|
|
|
import React from 'react';
|
|
import React from 'react';
|
|
|
|
|
+import { Value } from 'slate';
|
|
|
|
|
+import Cascader from 'rc-cascader';
|
|
|
|
|
|
|
|
// dom also includes Element polyfills
|
|
// dom also includes Element polyfills
|
|
|
import { getNextCharacter, getPreviousCousin } from './utils/dom';
|
|
import { getNextCharacter, getPreviousCousin } from './utils/dom';
|
|
|
import PluginPrism, { setPrismTokens } from './slate-plugins/prism/index';
|
|
import PluginPrism, { setPrismTokens } from './slate-plugins/prism/index';
|
|
|
import PrismPromql, { FUNCTIONS } from './slate-plugins/prism/promql';
|
|
import PrismPromql, { FUNCTIONS } from './slate-plugins/prism/promql';
|
|
|
|
|
+import BracesPlugin from './slate-plugins/braces';
|
|
|
import RunnerPlugin from './slate-plugins/runner';
|
|
import RunnerPlugin from './slate-plugins/runner';
|
|
|
-import { processLabels, RATE_RANGES, cleanText } from './utils/prometheus';
|
|
|
|
|
|
|
+import { processLabels, RATE_RANGES, cleanText, getCleanSelector } from './utils/prometheus';
|
|
|
|
|
|
|
|
import TypeaheadField, {
|
|
import TypeaheadField, {
|
|
|
Suggestion,
|
|
Suggestion,
|
|
@@ -16,16 +20,71 @@ import TypeaheadField, {
|
|
|
TypeaheadOutput,
|
|
TypeaheadOutput,
|
|
|
} from './QueryField';
|
|
} from './QueryField';
|
|
|
|
|
|
|
|
-const EMPTY_METRIC = '';
|
|
|
|
|
|
|
+const DEFAULT_KEYS = ['job', 'instance'];
|
|
|
|
|
+const EMPTY_SELECTOR = '{}';
|
|
|
|
|
+const HISTOGRAM_GROUP = '__histograms__';
|
|
|
|
|
+const HISTOGRAM_SELECTOR = '{le!=""}'; // Returns all timeseries for histograms
|
|
|
|
|
+const HISTORY_ITEM_COUNT = 5;
|
|
|
|
|
+const HISTORY_COUNT_CUTOFF = 1000 * 60 * 60 * 24; // 24h
|
|
|
const METRIC_MARK = 'metric';
|
|
const METRIC_MARK = 'metric';
|
|
|
const PRISM_LANGUAGE = 'promql';
|
|
const PRISM_LANGUAGE = 'promql';
|
|
|
|
|
+export const RECORDING_RULES_GROUP = '__recording_rules__';
|
|
|
|
|
|
|
|
-export const wrapLabel = label => ({ label });
|
|
|
|
|
|
|
+export const wrapLabel = (label: string) => ({ label });
|
|
|
export const setFunctionMove = (suggestion: Suggestion): Suggestion => {
|
|
export const setFunctionMove = (suggestion: Suggestion): Suggestion => {
|
|
|
suggestion.move = -1;
|
|
suggestion.move = -1;
|
|
|
return suggestion;
|
|
return suggestion;
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
|
|
+export function addHistoryMetadata(item: Suggestion, history: any[]): Suggestion {
|
|
|
|
|
+ const cutoffTs = Date.now() - HISTORY_COUNT_CUTOFF;
|
|
|
|
|
+ const historyForItem = history.filter(h => h.ts > cutoffTs && h.query === item.label);
|
|
|
|
|
+ const count = historyForItem.length;
|
|
|
|
|
+ const recent = historyForItem[0];
|
|
|
|
|
+ let hint = `Queried ${count} times in the last 24h.`;
|
|
|
|
|
+ if (recent) {
|
|
|
|
|
+ const lastQueried = moment(recent.ts).fromNow();
|
|
|
|
|
+ hint = `${hint} Last queried ${lastQueried}.`;
|
|
|
|
|
+ }
|
|
|
|
|
+ return {
|
|
|
|
|
+ ...item,
|
|
|
|
|
+ documentation: hint,
|
|
|
|
|
+ };
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+export function groupMetricsByPrefix(metrics: string[], delimiter = '_'): CascaderOption[] {
|
|
|
|
|
+ // Filter out recording rules and insert as first option
|
|
|
|
|
+ const ruleRegex = /:\w+:/;
|
|
|
|
|
+ const ruleNames = metrics.filter(metric => ruleRegex.test(metric));
|
|
|
|
|
+ const rulesOption = {
|
|
|
|
|
+ label: 'Recording rules',
|
|
|
|
|
+ value: RECORDING_RULES_GROUP,
|
|
|
|
|
+ children: ruleNames
|
|
|
|
|
+ .slice()
|
|
|
|
|
+ .sort()
|
|
|
|
|
+ .map(name => ({ label: name, value: name })),
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const options = ruleNames.length > 0 ? [rulesOption] : [];
|
|
|
|
|
+
|
|
|
|
|
+ const metricsOptions = _.chain(metrics)
|
|
|
|
|
+ .filter(metric => !ruleRegex.test(metric))
|
|
|
|
|
+ .groupBy(metric => metric.split(delimiter)[0])
|
|
|
|
|
+ .map((metricsForPrefix: string[], prefix: string): CascaderOption => {
|
|
|
|
|
+ const prefixIsMetric = metricsForPrefix.length === 1 && metricsForPrefix[0] === prefix;
|
|
|
|
|
+ const children = prefixIsMetric ? [] : metricsForPrefix.sort().map(m => ({ label: m, value: m }));
|
|
|
|
|
+ return {
|
|
|
|
|
+ children,
|
|
|
|
|
+ label: prefix,
|
|
|
|
|
+ value: prefix,
|
|
|
|
|
+ };
|
|
|
|
|
+ })
|
|
|
|
|
+ .sortBy('label')
|
|
|
|
|
+ .value();
|
|
|
|
|
+
|
|
|
|
|
+ return [...options, ...metricsOptions];
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
export function willApplySuggestion(
|
|
export function willApplySuggestion(
|
|
|
suggestion: string,
|
|
suggestion: string,
|
|
|
{ typeaheadContext, typeaheadText }: TypeaheadFieldState
|
|
{ typeaheadContext, typeaheadText }: TypeaheadFieldState
|
|
@@ -56,58 +115,105 @@ export function willApplySuggestion(
|
|
|
return suggestion;
|
|
return suggestion;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+interface CascaderOption {
|
|
|
|
|
+ label: string;
|
|
|
|
|
+ value: string;
|
|
|
|
|
+ children?: CascaderOption[];
|
|
|
|
|
+ disabled?: boolean;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
interface PromQueryFieldProps {
|
|
interface PromQueryFieldProps {
|
|
|
|
|
+ error?: string;
|
|
|
|
|
+ hint?: any;
|
|
|
|
|
+ histogramMetrics?: string[];
|
|
|
|
|
+ history?: any[];
|
|
|
initialQuery?: string | null;
|
|
initialQuery?: string | null;
|
|
|
labelKeys?: { [index: string]: string[] }; // metric -> [labelKey,...]
|
|
labelKeys?: { [index: string]: string[] }; // metric -> [labelKey,...]
|
|
|
labelValues?: { [index: string]: { [index: string]: string[] } }; // metric -> labelKey -> [labelValue,...]
|
|
labelValues?: { [index: string]: { [index: string]: string[] } }; // metric -> labelKey -> [labelValue,...]
|
|
|
metrics?: string[];
|
|
metrics?: string[];
|
|
|
|
|
+ metricsByPrefix?: CascaderOption[];
|
|
|
|
|
+ onClickHintFix?: (action: any) => void;
|
|
|
onPressEnter?: () => void;
|
|
onPressEnter?: () => void;
|
|
|
- onQueryChange?: (value: string) => void;
|
|
|
|
|
|
|
+ onQueryChange?: (value: string, override?: boolean) => void;
|
|
|
portalPrefix?: string;
|
|
portalPrefix?: string;
|
|
|
request?: (url: string) => any;
|
|
request?: (url: string) => any;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
interface PromQueryFieldState {
|
|
interface PromQueryFieldState {
|
|
|
|
|
+ histogramMetrics: string[];
|
|
|
labelKeys: { [index: string]: string[] }; // metric -> [labelKey,...]
|
|
labelKeys: { [index: string]: string[] }; // metric -> [labelKey,...]
|
|
|
labelValues: { [index: string]: { [index: string]: string[] } }; // metric -> labelKey -> [labelValue,...]
|
|
labelValues: { [index: string]: { [index: string]: string[] } }; // metric -> labelKey -> [labelValue,...]
|
|
|
metrics: string[];
|
|
metrics: string[];
|
|
|
|
|
+ metricsByPrefix: CascaderOption[];
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
interface PromTypeaheadInput {
|
|
interface PromTypeaheadInput {
|
|
|
text: string;
|
|
text: string;
|
|
|
prefix: string;
|
|
prefix: string;
|
|
|
wrapperClasses: string[];
|
|
wrapperClasses: string[];
|
|
|
- metric?: string;
|
|
|
|
|
labelKey?: string;
|
|
labelKey?: string;
|
|
|
|
|
+ value?: Value;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
class PromQueryField extends React.Component<PromQueryFieldProps, PromQueryFieldState> {
|
|
class PromQueryField extends React.Component<PromQueryFieldProps, PromQueryFieldState> {
|
|
|
plugins: any[];
|
|
plugins: any[];
|
|
|
|
|
|
|
|
- constructor(props, context) {
|
|
|
|
|
|
|
+ constructor(props: PromQueryFieldProps, context) {
|
|
|
super(props, context);
|
|
super(props, context);
|
|
|
|
|
|
|
|
this.plugins = [
|
|
this.plugins = [
|
|
|
|
|
+ BracesPlugin(),
|
|
|
RunnerPlugin({ handler: props.onPressEnter }),
|
|
RunnerPlugin({ handler: props.onPressEnter }),
|
|
|
PluginPrism({ definition: PrismPromql, language: PRISM_LANGUAGE }),
|
|
PluginPrism({ definition: PrismPromql, language: PRISM_LANGUAGE }),
|
|
|
];
|
|
];
|
|
|
|
|
|
|
|
this.state = {
|
|
this.state = {
|
|
|
|
|
+ histogramMetrics: props.histogramMetrics || [],
|
|
|
labelKeys: props.labelKeys || {},
|
|
labelKeys: props.labelKeys || {},
|
|
|
labelValues: props.labelValues || {},
|
|
labelValues: props.labelValues || {},
|
|
|
metrics: props.metrics || [],
|
|
metrics: props.metrics || [],
|
|
|
|
|
+ metricsByPrefix: props.metricsByPrefix || [],
|
|
|
};
|
|
};
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
componentDidMount() {
|
|
|
this.fetchMetricNames();
|
|
this.fetchMetricNames();
|
|
|
|
|
+ this.fetchHistogramMetrics();
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- onChangeQuery = value => {
|
|
|
|
|
|
|
+ onChangeMetrics = (values: string[], selectedOptions: CascaderOption[]) => {
|
|
|
|
|
+ let query;
|
|
|
|
|
+ if (selectedOptions.length === 1) {
|
|
|
|
|
+ if (selectedOptions[0].children.length === 0) {
|
|
|
|
|
+ query = selectedOptions[0].value;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ // Ignore click on group
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ } else {
|
|
|
|
|
+ const prefix = selectedOptions[0].value;
|
|
|
|
|
+ const metric = selectedOptions[1].value;
|
|
|
|
|
+ if (prefix === HISTOGRAM_GROUP) {
|
|
|
|
|
+ query = `histogram_quantile(0.95, sum(rate(${metric}[5m])) by (le))`;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ query = metric;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ this.onChangeQuery(query, true);
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ onChangeQuery = (value: string, override?: boolean) => {
|
|
|
// Send text change to parent
|
|
// Send text change to parent
|
|
|
const { onQueryChange } = this.props;
|
|
const { onQueryChange } = this.props;
|
|
|
if (onQueryChange) {
|
|
if (onQueryChange) {
|
|
|
- onQueryChange(value);
|
|
|
|
|
|
|
+ onQueryChange(value, override);
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ onClickHintFix = () => {
|
|
|
|
|
+ const { hint, onClickHintFix } = this.props;
|
|
|
|
|
+ if (onClickHintFix && hint && hint.fix) {
|
|
|
|
|
+ onClickHintFix(hint.fix.action);
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
|
|
@@ -119,25 +225,23 @@ class PromQueryField extends React.Component<PromQueryFieldProps, PromQueryField
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
onTypeahead = (typeahead: TypeaheadInput): TypeaheadOutput => {
|
|
onTypeahead = (typeahead: TypeaheadInput): TypeaheadOutput => {
|
|
|
- const { editorNode, prefix, text, wrapperNode } = typeahead;
|
|
|
|
|
|
|
+ const { prefix, text, value, wrapperNode } = typeahead;
|
|
|
|
|
|
|
|
// Get DOM-dependent context
|
|
// Get DOM-dependent context
|
|
|
const wrapperClasses = Array.from(wrapperNode.classList);
|
|
const wrapperClasses = Array.from(wrapperNode.classList);
|
|
|
- // Take first metric as lucky guess
|
|
|
|
|
- const metricNode = editorNode.querySelector(`.${METRIC_MARK}`);
|
|
|
|
|
- const metric = metricNode && metricNode.textContent;
|
|
|
|
|
const labelKeyNode = getPreviousCousin(wrapperNode, '.attr-name');
|
|
const labelKeyNode = getPreviousCousin(wrapperNode, '.attr-name');
|
|
|
const labelKey = labelKeyNode && labelKeyNode.textContent;
|
|
const labelKey = labelKeyNode && labelKeyNode.textContent;
|
|
|
|
|
+ const nextChar = getNextCharacter();
|
|
|
|
|
|
|
|
- const result = this.getTypeahead({ text, prefix, wrapperClasses, metric, labelKey });
|
|
|
|
|
|
|
+ const result = this.getTypeahead({ text, value, prefix, wrapperClasses, labelKey });
|
|
|
|
|
|
|
|
- console.log('handleTypeahead', wrapperClasses, text, prefix, result.context);
|
|
|
|
|
|
|
+ console.log('handleTypeahead', wrapperClasses, text, prefix, nextChar, labelKey, result.context);
|
|
|
|
|
|
|
|
return result;
|
|
return result;
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
// Keep this DOM-free for testing
|
|
// Keep this DOM-free for testing
|
|
|
- getTypeahead({ prefix, wrapperClasses, metric, text }: PromTypeaheadInput): TypeaheadOutput {
|
|
|
|
|
|
|
+ getTypeahead({ prefix, wrapperClasses, text }: PromTypeaheadInput): TypeaheadOutput {
|
|
|
// Determine candidates by CSS context
|
|
// Determine candidates by CSS context
|
|
|
if (_.includes(wrapperClasses, 'context-range')) {
|
|
if (_.includes(wrapperClasses, 'context-range')) {
|
|
|
// Suggestions for metric[|]
|
|
// Suggestions for metric[|]
|
|
@@ -145,12 +249,11 @@ class PromQueryField extends React.Component<PromQueryFieldProps, PromQueryField
|
|
|
} else if (_.includes(wrapperClasses, 'context-labels')) {
|
|
} else if (_.includes(wrapperClasses, 'context-labels')) {
|
|
|
// Suggestions for metric{|} and metric{foo=|}, as well as metric-independent label queries like {|}
|
|
// Suggestions for metric{|} and metric{foo=|}, as well as metric-independent label queries like {|}
|
|
|
return this.getLabelTypeahead.apply(this, arguments);
|
|
return this.getLabelTypeahead.apply(this, arguments);
|
|
|
- } else if (metric && _.includes(wrapperClasses, 'context-aggregation')) {
|
|
|
|
|
|
|
+ } else if (_.includes(wrapperClasses, 'context-aggregation')) {
|
|
|
return this.getAggregationTypeahead.apply(this, arguments);
|
|
return this.getAggregationTypeahead.apply(this, arguments);
|
|
|
} else if (
|
|
} else if (
|
|
|
- // Non-empty but not inside known token unless it's a metric
|
|
|
|
|
|
|
+ // Non-empty but not inside known token
|
|
|
(prefix && !_.includes(wrapperClasses, 'token')) ||
|
|
(prefix && !_.includes(wrapperClasses, 'token')) ||
|
|
|
- prefix === metric ||
|
|
|
|
|
(prefix === '' && !text.match(/^[)\s]+$/)) || // Empty context or after ')'
|
|
(prefix === '' && !text.match(/^[)\s]+$/)) || // Empty context or after ')'
|
|
|
text.match(/[+\-*/^%]/) // After binary operator
|
|
text.match(/[+\-*/^%]/) // After binary operator
|
|
|
) {
|
|
) {
|
|
@@ -163,17 +266,37 @@ class PromQueryField extends React.Component<PromQueryFieldProps, PromQueryField
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
getEmptyTypeahead(): TypeaheadOutput {
|
|
getEmptyTypeahead(): TypeaheadOutput {
|
|
|
|
|
+ const { history } = this.props;
|
|
|
|
|
+ const { metrics } = this.state;
|
|
|
const suggestions: SuggestionGroup[] = [];
|
|
const suggestions: SuggestionGroup[] = [];
|
|
|
|
|
+
|
|
|
|
|
+ if (history && history.length > 0) {
|
|
|
|
|
+ const historyItems = _.chain(history)
|
|
|
|
|
+ .uniqBy('query')
|
|
|
|
|
+ .take(HISTORY_ITEM_COUNT)
|
|
|
|
|
+ .map(h => h.query)
|
|
|
|
|
+ .map(wrapLabel)
|
|
|
|
|
+ .map(item => addHistoryMetadata(item, history))
|
|
|
|
|
+ .value();
|
|
|
|
|
+
|
|
|
|
|
+ suggestions.push({
|
|
|
|
|
+ prefixMatch: true,
|
|
|
|
|
+ skipSort: true,
|
|
|
|
|
+ label: 'History',
|
|
|
|
|
+ items: historyItems,
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
suggestions.push({
|
|
suggestions.push({
|
|
|
prefixMatch: true,
|
|
prefixMatch: true,
|
|
|
label: 'Functions',
|
|
label: 'Functions',
|
|
|
items: FUNCTIONS.map(setFunctionMove),
|
|
items: FUNCTIONS.map(setFunctionMove),
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
- if (this.state.metrics) {
|
|
|
|
|
|
|
+ if (metrics) {
|
|
|
suggestions.push({
|
|
suggestions.push({
|
|
|
label: 'Metrics',
|
|
label: 'Metrics',
|
|
|
- items: this.state.metrics.map(wrapLabel),
|
|
|
|
|
|
|
+ items: metrics.map(wrapLabel),
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
return { suggestions };
|
|
return { suggestions };
|
|
@@ -191,14 +314,27 @@ class PromQueryField extends React.Component<PromQueryFieldProps, PromQueryField
|
|
|
};
|
|
};
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- getAggregationTypeahead({ metric }: PromTypeaheadInput): TypeaheadOutput {
|
|
|
|
|
|
|
+ getAggregationTypeahead({ value }: PromTypeaheadInput): TypeaheadOutput {
|
|
|
let refresher: Promise<any> = null;
|
|
let refresher: Promise<any> = null;
|
|
|
const suggestions: SuggestionGroup[] = [];
|
|
const suggestions: SuggestionGroup[] = [];
|
|
|
- const labelKeys = this.state.labelKeys[metric];
|
|
|
|
|
|
|
+
|
|
|
|
|
+ // sum(foo{bar="1"}) by (|)
|
|
|
|
|
+ const line = value.anchorBlock.getText();
|
|
|
|
|
+ const cursorOffset: number = value.anchorOffset;
|
|
|
|
|
+ // sum(foo{bar="1"}) by (
|
|
|
|
|
+ const leftSide = line.slice(0, cursorOffset);
|
|
|
|
|
+ const openParensAggregationIndex = leftSide.lastIndexOf('(');
|
|
|
|
|
+ const openParensSelectorIndex = leftSide.slice(0, openParensAggregationIndex).lastIndexOf('(');
|
|
|
|
|
+ const closeParensSelectorIndex = leftSide.slice(openParensSelectorIndex).indexOf(')') + openParensSelectorIndex;
|
|
|
|
|
+ // foo{bar="1"}
|
|
|
|
|
+ const selectorString = leftSide.slice(openParensSelectorIndex + 1, closeParensSelectorIndex);
|
|
|
|
|
+ const selector = getCleanSelector(selectorString, selectorString.length - 2);
|
|
|
|
|
+
|
|
|
|
|
+ const labelKeys = this.state.labelKeys[selector];
|
|
|
if (labelKeys) {
|
|
if (labelKeys) {
|
|
|
suggestions.push({ label: 'Labels', items: labelKeys.map(wrapLabel) });
|
|
suggestions.push({ label: 'Labels', items: labelKeys.map(wrapLabel) });
|
|
|
} else {
|
|
} else {
|
|
|
- refresher = this.fetchMetricLabels(metric);
|
|
|
|
|
|
|
+ refresher = this.fetchSeriesLabels(selector);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
return {
|
|
@@ -208,59 +344,51 @@ class PromQueryField extends React.Component<PromQueryFieldProps, PromQueryField
|
|
|
};
|
|
};
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- getLabelTypeahead({ metric, text, wrapperClasses, labelKey }: PromTypeaheadInput): TypeaheadOutput {
|
|
|
|
|
|
|
+ getLabelTypeahead({ text, wrapperClasses, labelKey, value }: PromTypeaheadInput): TypeaheadOutput {
|
|
|
let context: string;
|
|
let context: string;
|
|
|
let refresher: Promise<any> = null;
|
|
let refresher: Promise<any> = null;
|
|
|
const suggestions: SuggestionGroup[] = [];
|
|
const suggestions: SuggestionGroup[] = [];
|
|
|
- if (metric) {
|
|
|
|
|
- const labelKeys = this.state.labelKeys[metric];
|
|
|
|
|
- if (labelKeys) {
|
|
|
|
|
- if ((text && text.startsWith('=')) || _.includes(wrapperClasses, 'attr-value')) {
|
|
|
|
|
- // Label values
|
|
|
|
|
- if (labelKey) {
|
|
|
|
|
- const labelValues = this.state.labelValues[metric][labelKey];
|
|
|
|
|
- context = 'context-label-values';
|
|
|
|
|
- suggestions.push({
|
|
|
|
|
- label: 'Label values',
|
|
|
|
|
- items: labelValues.map(wrapLabel),
|
|
|
|
|
- });
|
|
|
|
|
- }
|
|
|
|
|
- } else {
|
|
|
|
|
- // Label keys
|
|
|
|
|
- context = 'context-labels';
|
|
|
|
|
- suggestions.push({ label: 'Labels', items: labelKeys.map(wrapLabel) });
|
|
|
|
|
- }
|
|
|
|
|
- } else {
|
|
|
|
|
- refresher = this.fetchMetricLabels(metric);
|
|
|
|
|
|
|
+ const line = value.anchorBlock.getText();
|
|
|
|
|
+ const cursorOffset: number = value.anchorOffset;
|
|
|
|
|
+
|
|
|
|
|
+ // Get normalized selector
|
|
|
|
|
+ let selector;
|
|
|
|
|
+ try {
|
|
|
|
|
+ selector = getCleanSelector(line, cursorOffset);
|
|
|
|
|
+ } catch {
|
|
|
|
|
+ selector = EMPTY_SELECTOR;
|
|
|
|
|
+ }
|
|
|
|
|
+ const containsMetric = selector.indexOf('__name__=') > -1;
|
|
|
|
|
+
|
|
|
|
|
+ if ((text && text.startsWith('=')) || _.includes(wrapperClasses, 'attr-value')) {
|
|
|
|
|
+ // Label values
|
|
|
|
|
+ if (labelKey && this.state.labelValues[selector] && this.state.labelValues[selector][labelKey]) {
|
|
|
|
|
+ const labelValues = this.state.labelValues[selector][labelKey];
|
|
|
|
|
+ context = 'context-label-values';
|
|
|
|
|
+ suggestions.push({
|
|
|
|
|
+ label: `Label values for "${labelKey}"`,
|
|
|
|
|
+ items: labelValues.map(wrapLabel),
|
|
|
|
|
+ });
|
|
|
}
|
|
}
|
|
|
} else {
|
|
} else {
|
|
|
- // Metric-independent label queries
|
|
|
|
|
- const defaultKeys = ['job', 'instance'];
|
|
|
|
|
- // Munge all keys that we have seen together
|
|
|
|
|
- const labelKeys = Object.keys(this.state.labelKeys).reduce((acc, metric) => {
|
|
|
|
|
- return acc.concat(this.state.labelKeys[metric].filter(key => acc.indexOf(key) === -1));
|
|
|
|
|
- }, defaultKeys);
|
|
|
|
|
- if ((text && text.startsWith('=')) || _.includes(wrapperClasses, 'attr-value')) {
|
|
|
|
|
- // Label values
|
|
|
|
|
- if (labelKey) {
|
|
|
|
|
- if (this.state.labelValues[EMPTY_METRIC]) {
|
|
|
|
|
- const labelValues = this.state.labelValues[EMPTY_METRIC][labelKey];
|
|
|
|
|
- context = 'context-label-values';
|
|
|
|
|
- suggestions.push({
|
|
|
|
|
- label: 'Label values',
|
|
|
|
|
- items: labelValues.map(wrapLabel),
|
|
|
|
|
- });
|
|
|
|
|
- } else {
|
|
|
|
|
- // Can only query label values for now (API to query keys is under development)
|
|
|
|
|
- refresher = this.fetchLabelValues(labelKey);
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- } else {
|
|
|
|
|
- // Label keys
|
|
|
|
|
|
|
+ // Label keys
|
|
|
|
|
+ const labelKeys = this.state.labelKeys[selector] || (containsMetric ? null : DEFAULT_KEYS);
|
|
|
|
|
+ if (labelKeys) {
|
|
|
context = 'context-labels';
|
|
context = 'context-labels';
|
|
|
- suggestions.push({ label: 'Labels', items: labelKeys.map(wrapLabel) });
|
|
|
|
|
|
|
+ suggestions.push({ label: `Labels`, items: labelKeys.map(wrapLabel) });
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // Query labels for selector
|
|
|
|
|
+ if (selector && !this.state.labelValues[selector]) {
|
|
|
|
|
+ if (selector === EMPTY_SELECTOR) {
|
|
|
|
|
+ // Query label values for default labels
|
|
|
|
|
+ refresher = Promise.all(DEFAULT_KEYS.map(key => this.fetchLabelValues(key)));
|
|
|
|
|
+ } else {
|
|
|
|
|
+ refresher = this.fetchSeriesLabels(selector, !containsMetric);
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
return { context, refresher, suggestions };
|
|
return { context, refresher, suggestions };
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -271,19 +399,29 @@ class PromQueryField extends React.Component<PromQueryFieldProps, PromQueryField
|
|
|
return fetch(url);
|
|
return fetch(url);
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
- async fetchLabelValues(key) {
|
|
|
|
|
|
|
+ fetchHistogramMetrics() {
|
|
|
|
|
+ this.fetchSeriesLabels(HISTOGRAM_SELECTOR, true, () => {
|
|
|
|
|
+ const histogramSeries = this.state.labelValues[HISTOGRAM_SELECTOR];
|
|
|
|
|
+ if (histogramSeries && histogramSeries['__name__']) {
|
|
|
|
|
+ const histogramMetrics = histogramSeries['__name__'].slice().sort();
|
|
|
|
|
+ this.setState({ histogramMetrics });
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ async fetchLabelValues(key: string) {
|
|
|
const url = `/api/v1/label/${key}/values`;
|
|
const url = `/api/v1/label/${key}/values`;
|
|
|
try {
|
|
try {
|
|
|
const res = await this.request(url);
|
|
const res = await this.request(url);
|
|
|
const body = await (res.data || res.json());
|
|
const body = await (res.data || res.json());
|
|
|
- const pairs = this.state.labelValues[EMPTY_METRIC];
|
|
|
|
|
|
|
+ const exisingValues = this.state.labelValues[EMPTY_SELECTOR];
|
|
|
const values = {
|
|
const values = {
|
|
|
- ...pairs,
|
|
|
|
|
|
|
+ ...exisingValues,
|
|
|
[key]: body.data,
|
|
[key]: body.data,
|
|
|
};
|
|
};
|
|
|
const labelValues = {
|
|
const labelValues = {
|
|
|
...this.state.labelValues,
|
|
...this.state.labelValues,
|
|
|
- [EMPTY_METRIC]: values,
|
|
|
|
|
|
|
+ [EMPTY_SELECTOR]: values,
|
|
|
};
|
|
};
|
|
|
this.setState({ labelValues });
|
|
this.setState({ labelValues });
|
|
|
} catch (e) {
|
|
} catch (e) {
|
|
@@ -291,12 +429,12 @@ class PromQueryField extends React.Component<PromQueryFieldProps, PromQueryField
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- async fetchMetricLabels(name) {
|
|
|
|
|
|
|
+ async fetchSeriesLabels(name: string, withName?: boolean, callback?: () => void) {
|
|
|
const url = `/api/v1/series?match[]=${name}`;
|
|
const url = `/api/v1/series?match[]=${name}`;
|
|
|
try {
|
|
try {
|
|
|
const res = await this.request(url);
|
|
const res = await this.request(url);
|
|
|
const body = await (res.data || res.json());
|
|
const body = await (res.data || res.json());
|
|
|
- const { keys, values } = processLabels(body.data);
|
|
|
|
|
|
|
+ const { keys, values } = processLabels(body.data, withName);
|
|
|
const labelKeys = {
|
|
const labelKeys = {
|
|
|
...this.state.labelKeys,
|
|
...this.state.labelKeys,
|
|
|
[name]: keys,
|
|
[name]: keys,
|
|
@@ -305,7 +443,7 @@ class PromQueryField extends React.Component<PromQueryFieldProps, PromQueryField
|
|
|
...this.state.labelValues,
|
|
...this.state.labelValues,
|
|
|
[name]: values,
|
|
[name]: values,
|
|
|
};
|
|
};
|
|
|
- this.setState({ labelKeys, labelValues });
|
|
|
|
|
|
|
+ this.setState({ labelKeys, labelValues }, callback);
|
|
|
} catch (e) {
|
|
} catch (e) {
|
|
|
console.error(e);
|
|
console.error(e);
|
|
|
}
|
|
}
|
|
@@ -316,23 +454,55 @@ class PromQueryField extends React.Component<PromQueryFieldProps, PromQueryField
|
|
|
try {
|
|
try {
|
|
|
const res = await this.request(url);
|
|
const res = await this.request(url);
|
|
|
const body = await (res.data || res.json());
|
|
const body = await (res.data || res.json());
|
|
|
- this.setState({ metrics: body.data }, this.onReceiveMetrics);
|
|
|
|
|
|
|
+ const metrics = body.data;
|
|
|
|
|
+ const metricsByPrefix = groupMetricsByPrefix(metrics);
|
|
|
|
|
+ this.setState({ metrics, metricsByPrefix }, this.onReceiveMetrics);
|
|
|
} catch (error) {
|
|
} catch (error) {
|
|
|
console.error(error);
|
|
console.error(error);
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
render() {
|
|
|
|
|
+ const { error, hint } = this.props;
|
|
|
|
|
+ const { histogramMetrics, metricsByPrefix } = this.state;
|
|
|
|
|
+ const histogramOptions = histogramMetrics.map(hm => ({ label: hm, value: hm }));
|
|
|
|
|
+ const metricsOptions = [
|
|
|
|
|
+ { label: 'Histograms', value: HISTOGRAM_GROUP, children: histogramOptions },
|
|
|
|
|
+ ...metricsByPrefix,
|
|
|
|
|
+ ];
|
|
|
|
|
+
|
|
|
return (
|
|
return (
|
|
|
- <TypeaheadField
|
|
|
|
|
- additionalPlugins={this.plugins}
|
|
|
|
|
- cleanText={cleanText}
|
|
|
|
|
- initialValue={this.props.initialQuery}
|
|
|
|
|
- onTypeahead={this.onTypeahead}
|
|
|
|
|
- onWillApplySuggestion={willApplySuggestion}
|
|
|
|
|
- onValueChanged={this.onChangeQuery}
|
|
|
|
|
- placeholder="Enter a PromQL query"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ <div className="prom-query-field">
|
|
|
|
|
+ <div className="prom-query-field-tools">
|
|
|
|
|
+ <Cascader options={metricsOptions} onChange={this.onChangeMetrics}>
|
|
|
|
|
+ <button className="btn navbar-button navbar-button--tight">Metrics</button>
|
|
|
|
|
+ </Cascader>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div className="prom-query-field-wrapper">
|
|
|
|
|
+ <div className="slate-query-field-wrapper">
|
|
|
|
|
+ <TypeaheadField
|
|
|
|
|
+ additionalPlugins={this.plugins}
|
|
|
|
|
+ cleanText={cleanText}
|
|
|
|
|
+ initialValue={this.props.initialQuery}
|
|
|
|
|
+ onTypeahead={this.onTypeahead}
|
|
|
|
|
+ onWillApplySuggestion={willApplySuggestion}
|
|
|
|
|
+ onValueChanged={this.onChangeQuery}
|
|
|
|
|
+ placeholder="Enter a PromQL query"
|
|
|
|
|
+ />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ {error ? <div className="prom-query-field-info text-error">{error}</div> : null}
|
|
|
|
|
+ {hint ? (
|
|
|
|
|
+ <div className="prom-query-field-info text-warning">
|
|
|
|
|
+ {hint.label}{' '}
|
|
|
|
|
+ {hint.fix ? (
|
|
|
|
|
+ <a className="text-link muted" onClick={this.onClickHintFix}>
|
|
|
|
|
+ {hint.fix.label}
|
|
|
|
|
+ </a>
|
|
|
|
|
+ ) : null}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ ) : null}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
);
|
|
);
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|