mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Explore: Query hints for prometheus (#12833)
* Explore: Query hints for prometheus - time series are analyzed on response - hints are shown per query - some hints have fixes - fix rendered as link after hint - click on fix executes the fix action * Added tests for determineQueryHints() * Fix index for rate hints in explore
This commit is contained in:
David
Alexander Zobnin
parent
817179c097
commit
c1b9bbc2cf
@ -19,6 +19,16 @@ import { ensureQueries, generateQueryKey, hasQuery } from './utils/query';
|
||||
|
||||
const MAX_HISTORY_ITEMS = 100;
|
||||
|
||||
function makeHints(hints) {
|
||||
const hintsByIndex = [];
|
||||
hints.forEach(hint => {
|
||||
if (hint) {
|
||||
hintsByIndex[hint.index] = hint;
|
||||
}
|
||||
});
|
||||
return hintsByIndex;
|
||||
}
|
||||
|
||||
function makeTimeSeriesList(dataList, options) {
|
||||
return dataList.map((seriesData, index) => {
|
||||
const datapoints = seriesData.datapoints || [];
|
||||
@ -37,7 +47,7 @@ function makeTimeSeriesList(dataList, options) {
|
||||
});
|
||||
}
|
||||
|
||||
function parseInitialState(initial: string | undefined) {
|
||||
function parseUrlState(initial: string | undefined) {
|
||||
if (initial) {
|
||||
try {
|
||||
const parsed = JSON.parse(decodePathComponent(initial));
|
||||
@ -64,8 +74,9 @@ interface IExploreState {
|
||||
latency: number;
|
||||
loading: any;
|
||||
logsResult: any;
|
||||
queries: any;
|
||||
queryError: any;
|
||||
queries: any[];
|
||||
queryErrors: any[];
|
||||
queryHints: any[];
|
||||
range: any;
|
||||
requestOptions: any;
|
||||
showingGraph: boolean;
|
||||
@ -82,7 +93,8 @@ export class Explore extends React.Component<any, IExploreState> {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const { datasource, queries, range } = parseInitialState(props.routeParams.state);
|
||||
const initialState: IExploreState = props.initialState;
|
||||
const { datasource, queries, range } = parseUrlState(props.routeParams.state);
|
||||
this.state = {
|
||||
datasource: null,
|
||||
datasourceError: null,
|
||||
@ -95,7 +107,8 @@ export class Explore extends React.Component<any, IExploreState> {
|
||||
loading: false,
|
||||
logsResult: null,
|
||||
queries: ensureQueries(queries),
|
||||
queryError: null,
|
||||
queryErrors: [],
|
||||
queryHints: [],
|
||||
range: range || { ...DEFAULT_RANGE },
|
||||
requestOptions: null,
|
||||
showingGraph: true,
|
||||
@ -105,7 +118,7 @@ export class Explore extends React.Component<any, IExploreState> {
|
||||
supportsLogs: null,
|
||||
supportsTable: null,
|
||||
tableResult: null,
|
||||
...props.initialState,
|
||||
...initialState,
|
||||
};
|
||||
}
|
||||
|
||||
@ -191,6 +204,8 @@ export class Explore extends React.Component<any, IExploreState> {
|
||||
datasourceLoading: true,
|
||||
graphResult: null,
|
||||
logsResult: null,
|
||||
queryErrors: [],
|
||||
queryHints: [],
|
||||
tableResult: null,
|
||||
});
|
||||
const datasource = await this.props.datasourceSrv.get(option.value);
|
||||
@ -199,6 +214,7 @@ export class Explore extends React.Component<any, IExploreState> {
|
||||
|
||||
onChangeQuery = (value: string, index: number, override?: boolean) => {
|
||||
const { queries } = this.state;
|
||||
let { queryErrors, queryHints } = this.state;
|
||||
const prevQuery = queries[index];
|
||||
const edited = override ? false : prevQuery.query !== value;
|
||||
const nextQuery = {
|
||||
@ -208,7 +224,18 @@ export class Explore extends React.Component<any, IExploreState> {
|
||||
};
|
||||
const nextQueries = [...queries];
|
||||
nextQueries[index] = nextQuery;
|
||||
this.setState({ queries: nextQueries }, override ? () => this.onSubmit() : undefined);
|
||||
if (override) {
|
||||
queryErrors = [];
|
||||
queryHints = [];
|
||||
}
|
||||
this.setState(
|
||||
{
|
||||
queryErrors,
|
||||
queryHints,
|
||||
queries: nextQueries,
|
||||
},
|
||||
override ? () => this.onSubmit() : undefined
|
||||
);
|
||||
};
|
||||
|
||||
onChangeTime = nextRange => {
|
||||
@ -255,13 +282,32 @@ export class Explore extends React.Component<any, IExploreState> {
|
||||
};
|
||||
|
||||
onClickTableCell = (columnKey: string, rowValue: string) => {
|
||||
this.onModifyQueries({ type: 'ADD_FILTER', key: columnKey, value: rowValue });
|
||||
};
|
||||
|
||||
onModifyQueries = (action: object, index?: number) => {
|
||||
const { datasource, queries } = this.state;
|
||||
if (datasource && datasource.modifyQuery) {
|
||||
const nextQueries = queries.map(q => ({
|
||||
let nextQueries;
|
||||
if (index === undefined) {
|
||||
// Modify all queries
|
||||
nextQueries = queries.map(q => ({
|
||||
...q,
|
||||
edited: false,
|
||||
query: datasource.modifyQuery(q.query, { addFilter: { key: columnKey, value: rowValue } }),
|
||||
query: datasource.modifyQuery(q.query, action),
|
||||
}));
|
||||
} else {
|
||||
// Modify query only at index
|
||||
nextQueries = [
|
||||
...queries.slice(0, index),
|
||||
{
|
||||
...queries[index],
|
||||
edited: false,
|
||||
query: datasource.modifyQuery(queries[index].query, action),
|
||||
},
|
||||
...queries.slice(index + 1),
|
||||
];
|
||||
}
|
||||
this.setState({ queries: nextQueries }, () => this.onSubmit());
|
||||
}
|
||||
};
|
||||
@ -309,7 +355,7 @@ export class Explore extends React.Component<any, IExploreState> {
|
||||
this.setState({ history });
|
||||
}
|
||||
|
||||
buildQueryOptions(targetOptions: { format: string; instant?: boolean }) {
|
||||
buildQueryOptions(targetOptions: { format: string; hinting?: boolean; instant?: boolean }) {
|
||||
const { datasource, queries, range } = this.state;
|
||||
const resolution = this.el.offsetWidth;
|
||||
const absoluteRange = {
|
||||
@ -333,19 +379,20 @@ export class Explore extends React.Component<any, IExploreState> {
|
||||
if (!hasQuery(queries)) {
|
||||
return;
|
||||
}
|
||||
this.setState({ latency: 0, loading: true, graphResult: null, queryError: null });
|
||||
this.setState({ latency: 0, loading: true, graphResult: null, queryErrors: [], queryHints: [] });
|
||||
const now = Date.now();
|
||||
const options = this.buildQueryOptions({ format: 'time_series', instant: false });
|
||||
const options = this.buildQueryOptions({ format: 'time_series', instant: false, hinting: true });
|
||||
try {
|
||||
const res = await datasource.query(options);
|
||||
const result = makeTimeSeriesList(res.data, options);
|
||||
const queryHints = res.hints ? makeHints(res.hints) : [];
|
||||
const latency = Date.now() - now;
|
||||
this.setState({ latency, loading: false, graphResult: result, requestOptions: options });
|
||||
this.setState({ latency, loading: false, graphResult: result, queryHints, requestOptions: options });
|
||||
this.onQuerySuccess(datasource.meta.id, queries);
|
||||
} catch (response) {
|
||||
console.error(response);
|
||||
const queryError = response.data ? response.data.error : response;
|
||||
this.setState({ loading: false, queryError });
|
||||
this.setState({ loading: false, queryErrors: [queryError] });
|
||||
}
|
||||
}
|
||||
|
||||
@ -354,7 +401,7 @@ export class Explore extends React.Component<any, IExploreState> {
|
||||
if (!hasQuery(queries)) {
|
||||
return;
|
||||
}
|
||||
this.setState({ latency: 0, loading: true, queryError: null, tableResult: null });
|
||||
this.setState({ latency: 0, loading: true, queryErrors: [], queryHints: [], tableResult: null });
|
||||
const now = Date.now();
|
||||
const options = this.buildQueryOptions({
|
||||
format: 'table',
|
||||
@ -369,7 +416,7 @@ export class Explore extends React.Component<any, IExploreState> {
|
||||
} catch (response) {
|
||||
console.error(response);
|
||||
const queryError = response.data ? response.data.error : response;
|
||||
this.setState({ loading: false, queryError });
|
||||
this.setState({ loading: false, queryErrors: [queryError] });
|
||||
}
|
||||
}
|
||||
|
||||
@ -378,7 +425,7 @@ export class Explore extends React.Component<any, IExploreState> {
|
||||
if (!hasQuery(queries)) {
|
||||
return;
|
||||
}
|
||||
this.setState({ latency: 0, loading: true, queryError: null, logsResult: null });
|
||||
this.setState({ latency: 0, loading: true, queryErrors: [], queryHints: [], logsResult: null });
|
||||
const now = Date.now();
|
||||
const options = this.buildQueryOptions({
|
||||
format: 'logs',
|
||||
@ -393,7 +440,7 @@ export class Explore extends React.Component<any, IExploreState> {
|
||||
} catch (response) {
|
||||
console.error(response);
|
||||
const queryError = response.data ? response.data.error : response;
|
||||
this.setState({ loading: false, queryError });
|
||||
this.setState({ loading: false, queryErrors: [queryError] });
|
||||
}
|
||||
}
|
||||
|
||||
@ -415,7 +462,8 @@ export class Explore extends React.Component<any, IExploreState> {
|
||||
loading,
|
||||
logsResult,
|
||||
queries,
|
||||
queryError,
|
||||
queryErrors,
|
||||
queryHints,
|
||||
range,
|
||||
requestOptions,
|
||||
showingGraph,
|
||||
@ -504,14 +552,15 @@ export class Explore extends React.Component<any, IExploreState> {
|
||||
<QueryRows
|
||||
history={history}
|
||||
queries={queries}
|
||||
queryErrors={queryErrors}
|
||||
queryHints={queryHints}
|
||||
request={this.request}
|
||||
onAddQueryRow={this.onAddQueryRow}
|
||||
onChangeQuery={this.onChangeQuery}
|
||||
onClickHintFix={this.onModifyQueries}
|
||||
onExecuteQuery={this.onSubmit}
|
||||
onRemoveQueryRow={this.onRemoveQueryRow}
|
||||
/>
|
||||
{queryError && !loading ? <div className="text-warning m-a-2">{queryError}</div> : null}
|
||||
|
||||
<div className="result-options">
|
||||
{supportsGraph ? (
|
||||
<button className={`btn navbar-button ${graphButtonActive}`} onClick={this.onClickGraphButton}>
|
||||
|
||||
@ -105,13 +105,16 @@ interface CascaderOption {
|
||||
}
|
||||
|
||||
interface PromQueryFieldProps {
|
||||
history?: any[];
|
||||
error?: string;
|
||||
hint?: any;
|
||||
histogramMetrics?: string[];
|
||||
history?: any[];
|
||||
initialQuery?: string | null;
|
||||
labelKeys?: { [index: string]: string[] }; // metric -> [labelKey,...]
|
||||
labelValues?: { [index: string]: { [index: string]: string[] } }; // metric -> labelKey -> [labelValue,...]
|
||||
metrics?: string[];
|
||||
metricsByPrefix?: CascaderOption[];
|
||||
onClickHintFix?: (action: any) => void;
|
||||
onPressEnter?: () => void;
|
||||
onQueryChange?: (value: string, override?: boolean) => void;
|
||||
portalPrefix?: string;
|
||||
@ -189,6 +192,13 @@ class PromQueryField extends React.Component<PromQueryFieldProps, PromQueryField
|
||||
}
|
||||
};
|
||||
|
||||
onClickHintFix = () => {
|
||||
const { hint, onClickHintFix } = this.props;
|
||||
if (onClickHintFix && hint && hint.fix) {
|
||||
onClickHintFix(hint.fix.action);
|
||||
}
|
||||
};
|
||||
|
||||
onReceiveMetrics = () => {
|
||||
if (!this.state.metrics) {
|
||||
return;
|
||||
@ -435,6 +445,7 @@ class PromQueryField extends React.Component<PromQueryFieldProps, PromQueryField
|
||||
}
|
||||
|
||||
render() {
|
||||
const { error, hint } = this.props;
|
||||
const { histogramMetrics, metricsByPrefix } = this.state;
|
||||
const histogramOptions = histogramMetrics.map(hm => ({ label: hm, value: hm }));
|
||||
const metricsOptions = [
|
||||
@ -449,6 +460,7 @@ class PromQueryField extends React.Component<PromQueryFieldProps, PromQueryField
|
||||
<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}
|
||||
@ -460,6 +472,18 @@ class PromQueryField extends React.Component<PromQueryFieldProps, PromQueryField
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
|
||||
// TODO make this datasource-plugin-dependent
|
||||
import QueryField from './PromQueryField';
|
||||
|
||||
class QueryRow extends PureComponent<any, {}> {
|
||||
@ -21,6 +22,13 @@ class QueryRow extends PureComponent<any, {}> {
|
||||
this.onChangeQuery('', true);
|
||||
};
|
||||
|
||||
onClickHintFix = action => {
|
||||
const { index, onClickHintFix } = this.props;
|
||||
if (onClickHintFix) {
|
||||
onClickHintFix(action, index);
|
||||
}
|
||||
};
|
||||
|
||||
onClickRemoveButton = () => {
|
||||
const { index, onRemoveQueryRow } = this.props;
|
||||
if (onRemoveQueryRow) {
|
||||
@ -36,14 +44,17 @@ class QueryRow extends PureComponent<any, {}> {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { edited, history, query, request } = this.props;
|
||||
const { edited, history, query, queryError, queryHint, request } = this.props;
|
||||
return (
|
||||
<div className="query-row">
|
||||
<div className="query-row-field">
|
||||
<QueryField
|
||||
error={queryError}
|
||||
hint={queryHint}
|
||||
initialQuery={edited ? null : query}
|
||||
history={history}
|
||||
portalPrefix="explore"
|
||||
onClickHintFix={this.onClickHintFix}
|
||||
onPressEnter={this.onPressEnter}
|
||||
onQueryChange={this.onChangeQuery}
|
||||
request={request}
|
||||
@ -67,11 +78,19 @@ class QueryRow extends PureComponent<any, {}> {
|
||||
|
||||
export default class QueryRows extends PureComponent<any, {}> {
|
||||
render() {
|
||||
const { className = '', queries, ...handlers } = this.props;
|
||||
const { className = '', queries, queryErrors = [], queryHints = [], ...handlers } = this.props;
|
||||
return (
|
||||
<div className={className}>
|
||||
{queries.map((q, index) => (
|
||||
<QueryRow key={q.key} index={index} query={q.query} edited={q.edited} {...handlers} />
|
||||
<QueryRow
|
||||
key={q.key}
|
||||
index={index}
|
||||
query={q.query}
|
||||
queryError={queryErrors[index]}
|
||||
queryHint={queryHints[index]}
|
||||
edited={q.edited}
|
||||
{...handlers}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -82,6 +82,68 @@ export function addLabelToQuery(query: string, key: string, value: string): stri
|
||||
return parts.join('');
|
||||
}
|
||||
|
||||
export function determineQueryHints(series: any[]): any[] {
|
||||
const hints = series.map((s, i) => {
|
||||
const query: string = s.query;
|
||||
const index: number = s.responseIndex;
|
||||
if (query === undefined || index === undefined) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// ..._bucket metric needs a histogram_quantile()
|
||||
const histogramMetric = query.trim().match(/^\w+_bucket$/);
|
||||
if (histogramMetric) {
|
||||
const label = 'Time series has buckets, you probably wanted a histogram.';
|
||||
return {
|
||||
index,
|
||||
label,
|
||||
fix: {
|
||||
label: 'Fix by adding histogram_quantile().',
|
||||
action: {
|
||||
type: 'ADD_HISTOGRAM_QUANTILE',
|
||||
query,
|
||||
index,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// Check for monotony
|
||||
const datapoints: [number, number][] = s.datapoints;
|
||||
const simpleMetric = query.trim().match(/^\w+$/);
|
||||
if (simpleMetric && datapoints.length > 1) {
|
||||
let increasing = false;
|
||||
const monotonic = datapoints.every((dp, index) => {
|
||||
if (index === 0) {
|
||||
return true;
|
||||
}
|
||||
increasing = increasing || dp[0] > datapoints[index - 1][0];
|
||||
// monotonic?
|
||||
return dp[0] >= datapoints[index - 1][0];
|
||||
});
|
||||
if (increasing && monotonic) {
|
||||
const label = 'Time series is monotonously increasing.';
|
||||
return {
|
||||
label,
|
||||
index,
|
||||
fix: {
|
||||
label: 'Fix by adding rate().',
|
||||
action: {
|
||||
type: 'ADD_RATE',
|
||||
query,
|
||||
index,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// No hint found
|
||||
return null;
|
||||
});
|
||||
return hints;
|
||||
}
|
||||
|
||||
export function prometheusRegularEscape(value) {
|
||||
if (typeof value === 'string') {
|
||||
return value.replace(/'/g, "\\\\'");
|
||||
@ -223,10 +285,15 @@ export class PrometheusDatasource {
|
||||
|
||||
return this.$q.all(allQueryPromise).then(responseList => {
|
||||
let result = [];
|
||||
let hints = [];
|
||||
|
||||
_.each(responseList, (response, index) => {
|
||||
if (response.status === 'error') {
|
||||
throw response.error;
|
||||
const error = {
|
||||
index,
|
||||
...response.error,
|
||||
};
|
||||
throw error;
|
||||
}
|
||||
|
||||
// Keeping original start/end for transformers
|
||||
@ -241,16 +308,24 @@ export class PrometheusDatasource {
|
||||
responseIndex: index,
|
||||
refId: activeTargets[index].refId,
|
||||
};
|
||||
this.resultTransformer.transform(result, response, transformerOptions);
|
||||
const series = this.resultTransformer.transform(response, transformerOptions);
|
||||
result = [...result, ...series];
|
||||
|
||||
if (queries[index].hinting) {
|
||||
const queryHints = determineQueryHints(series);
|
||||
hints = [...hints, ...queryHints];
|
||||
}
|
||||
});
|
||||
|
||||
return { data: result };
|
||||
return { data: result, hints };
|
||||
});
|
||||
}
|
||||
|
||||
createQuery(target, options, start, end) {
|
||||
var query: any = {};
|
||||
query.instant = target.instant;
|
||||
const query: any = {
|
||||
hinting: target.hinting,
|
||||
instant: target.instant,
|
||||
};
|
||||
var range = Math.ceil(end - start);
|
||||
|
||||
var interval = kbn.interval_to_seconds(options.interval);
|
||||
@ -450,13 +525,21 @@ export class PrometheusDatasource {
|
||||
return state;
|
||||
}
|
||||
|
||||
modifyQuery(query: string, options: any): string {
|
||||
const { addFilter } = options;
|
||||
if (addFilter) {
|
||||
return addLabelToQuery(query, addFilter.key, addFilter.value);
|
||||
modifyQuery(query: string, action: any): string {
|
||||
switch (action.type) {
|
||||
case 'ADD_FILTER': {
|
||||
return addLabelToQuery(query, action.key, action.value);
|
||||
}
|
||||
case 'ADD_HISTOGRAM_QUANTILE': {
|
||||
return `histogram_quantile(0.95, sum(rate(${query}[5m])) by (le))`;
|
||||
}
|
||||
case 'ADD_RATE': {
|
||||
return `rate(${query}[5m])`;
|
||||
}
|
||||
default:
|
||||
return query;
|
||||
}
|
||||
}
|
||||
|
||||
getPrometheusTime(date, roundUp) {
|
||||
if (_.isString(date)) {
|
||||
|
||||
@ -4,11 +4,11 @@ import TableModel from 'app/core/table_model';
|
||||
export class ResultTransformer {
|
||||
constructor(private templateSrv) {}
|
||||
|
||||
transform(result: any, response: any, options: any) {
|
||||
transform(response: any, options: any): any[] {
|
||||
let prometheusResult = response.data.data.result;
|
||||
|
||||
if (options.format === 'table') {
|
||||
result.push(this.transformMetricDataToTable(prometheusResult, options.responseListLength, options.refId));
|
||||
return [this.transformMetricDataToTable(prometheusResult, options.responseListLength, options.refId)];
|
||||
} else if (options.format === 'heatmap') {
|
||||
let seriesList = [];
|
||||
prometheusResult.sort(sortSeriesByLabel);
|
||||
@ -16,16 +16,19 @@ export class ResultTransformer {
|
||||
seriesList.push(this.transformMetricData(metricData, options, options.start, options.end));
|
||||
}
|
||||
seriesList = this.transformToHistogramOverTime(seriesList);
|
||||
result.push(...seriesList);
|
||||
return seriesList;
|
||||
} else {
|
||||
let seriesList = [];
|
||||
for (let metricData of prometheusResult) {
|
||||
if (response.data.data.resultType === 'matrix') {
|
||||
result.push(this.transformMetricData(metricData, options, options.start, options.end));
|
||||
seriesList.push(this.transformMetricData(metricData, options, options.start, options.end));
|
||||
} else if (response.data.data.resultType === 'vector') {
|
||||
result.push(this.transformInstantMetricData(metricData, options));
|
||||
seriesList.push(this.transformInstantMetricData(metricData, options));
|
||||
}
|
||||
}
|
||||
return seriesList;
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
transformMetricData(metricData, options, start, end) {
|
||||
@ -60,7 +63,12 @@ export class ResultTransformer {
|
||||
dps.push([null, t]);
|
||||
}
|
||||
|
||||
return { target: metricLabel, datapoints: dps };
|
||||
return {
|
||||
datapoints: dps,
|
||||
query: options.query,
|
||||
responseIndex: options.responseIndex,
|
||||
target: metricLabel,
|
||||
};
|
||||
}
|
||||
|
||||
transformMetricDataToTable(md, resultCount: number, refId: string) {
|
||||
@ -124,7 +132,7 @@ export class ResultTransformer {
|
||||
metricLabel = null;
|
||||
metricLabel = this.createMetricLabel(md.metric, options);
|
||||
dps.push([parseFloat(md.value[1]), md.value[0] * 1000]);
|
||||
return { target: metricLabel, datapoints: dps };
|
||||
return { target: metricLabel, datapoints: dps, labels: md.metric };
|
||||
}
|
||||
|
||||
createMetricLabel(labelData, options) {
|
||||
|
||||
@ -3,6 +3,7 @@ import moment from 'moment';
|
||||
import q from 'q';
|
||||
import {
|
||||
alignRange,
|
||||
determineQueryHints,
|
||||
PrometheusDatasource,
|
||||
prometheusSpecialRegexEscape,
|
||||
prometheusRegularEscape,
|
||||
@ -122,7 +123,7 @@ describe('PrometheusDatasource', () => {
|
||||
ctx.ds.performTimeSeriesQuery = jest.fn().mockReturnValue(responseMock);
|
||||
return ctx.ds.query(ctx.query).then(result => {
|
||||
let results = result.data;
|
||||
return expect(results).toEqual(expected);
|
||||
return expect(results).toMatchObject(expected);
|
||||
});
|
||||
});
|
||||
|
||||
@ -180,6 +181,54 @@ describe('PrometheusDatasource', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('determineQueryHints()', () => {
|
||||
it('returns no hints for no series', () => {
|
||||
expect(determineQueryHints([])).toEqual([]);
|
||||
});
|
||||
|
||||
it('returns no hints for empty series', () => {
|
||||
expect(determineQueryHints([{ datapoints: [], query: '' }])).toEqual([null]);
|
||||
});
|
||||
|
||||
it('returns no hint for a monotonously decreasing series', () => {
|
||||
const series = [{ datapoints: [[23, 1000], [22, 1001]], query: 'metric', responseIndex: 0 }];
|
||||
const hints = determineQueryHints(series);
|
||||
expect(hints).toEqual([null]);
|
||||
});
|
||||
|
||||
it('returns a rate hint for a monotonously increasing series', () => {
|
||||
const series = [{ datapoints: [[23, 1000], [24, 1001]], query: 'metric', responseIndex: 0 }];
|
||||
const hints = determineQueryHints(series);
|
||||
expect(hints.length).toBe(1);
|
||||
expect(hints[0]).toMatchObject({
|
||||
label: 'Time series is monotonously increasing.',
|
||||
index: 0,
|
||||
fix: {
|
||||
action: {
|
||||
type: 'ADD_RATE',
|
||||
query: 'metric',
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('returns a histogram hint for a bucket series', () => {
|
||||
const series = [{ datapoints: [[23, 1000]], query: 'metric_bucket', responseIndex: 0 }];
|
||||
const hints = determineQueryHints(series);
|
||||
expect(hints.length).toBe(1);
|
||||
expect(hints[0]).toMatchObject({
|
||||
label: 'Time series has buckets, you probably wanted a histogram.',
|
||||
index: 0,
|
||||
fix: {
|
||||
action: {
|
||||
type: 'ADD_HISTOGRAM_QUANTILE',
|
||||
query: 'metric_bucket',
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Prometheus regular escaping', () => {
|
||||
it('should not escape non-string', () => {
|
||||
expect(prometheusRegularEscape(12)).toEqual(12);
|
||||
|
||||
@ -111,7 +111,6 @@ describe('Prometheus Result Transformer', () => {
|
||||
};
|
||||
|
||||
it('should convert cumulative histogram to regular', () => {
|
||||
let result = [];
|
||||
let options = {
|
||||
format: 'heatmap',
|
||||
start: 1445000010,
|
||||
@ -119,7 +118,7 @@ describe('Prometheus Result Transformer', () => {
|
||||
legendFormat: '{{le}}',
|
||||
};
|
||||
|
||||
ctx.resultTransformer.transform(result, { data: response }, options);
|
||||
const result = ctx.resultTransformer.transform({ data: response }, options);
|
||||
expect(result).toEqual([
|
||||
{ target: '1', datapoints: [[10, 1445000010000], [10, 1445000020000], [0, 1445000030000]] },
|
||||
{ target: '2', datapoints: [[10, 1445000010000], [0, 1445000020000], [30, 1445000030000]] },
|
||||
@ -172,14 +171,13 @@ describe('Prometheus Result Transformer', () => {
|
||||
],
|
||||
},
|
||||
};
|
||||
let result = [];
|
||||
let options = {
|
||||
format: 'timeseries',
|
||||
start: 0,
|
||||
end: 2,
|
||||
};
|
||||
|
||||
ctx.resultTransformer.transform(result, { data: response }, options);
|
||||
const result = ctx.resultTransformer.transform({ data: response }, options);
|
||||
expect(result).toEqual([{ target: 'test{job="testjob"}', datapoints: [[10, 0], [10, 1000], [0, 2000]] }]);
|
||||
});
|
||||
|
||||
@ -196,7 +194,6 @@ describe('Prometheus Result Transformer', () => {
|
||||
],
|
||||
},
|
||||
};
|
||||
let result = [];
|
||||
let options = {
|
||||
format: 'timeseries',
|
||||
step: 1,
|
||||
@ -204,7 +201,7 @@ describe('Prometheus Result Transformer', () => {
|
||||
end: 2,
|
||||
};
|
||||
|
||||
ctx.resultTransformer.transform(result, { data: response }, options);
|
||||
const result = ctx.resultTransformer.transform({ data: response }, options);
|
||||
expect(result).toEqual([{ target: 'test{job="testjob"}', datapoints: [[null, 0], [10, 1000], [0, 2000]] }]);
|
||||
});
|
||||
|
||||
@ -221,7 +218,6 @@ describe('Prometheus Result Transformer', () => {
|
||||
],
|
||||
},
|
||||
};
|
||||
let result = [];
|
||||
let options = {
|
||||
format: 'timeseries',
|
||||
step: 2,
|
||||
@ -229,7 +225,7 @@ describe('Prometheus Result Transformer', () => {
|
||||
end: 8,
|
||||
};
|
||||
|
||||
ctx.resultTransformer.transform(result, { data: response }, options);
|
||||
const result = ctx.resultTransformer.transform({ data: response }, options);
|
||||
expect(result).toEqual([
|
||||
{ target: 'test{job="testjob"}', datapoints: [[null, 0], [null, 2000], [10, 4000], [null, 6000], [10, 8000]] },
|
||||
]);
|
||||
|
||||
@ -158,4 +158,12 @@
|
||||
.prom-query-field {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.prom-query-field-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.prom-query-field-info {
|
||||
margin: 0.25em 0.5em 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user