IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Loki: Add step input field validation (#70319)

Browse Source 
* Loki: Add step inpout field validation

* Show invalid step in Options

* Update public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.tsx

Co-authored-by: Matias Chomicki <matyax@gmail.com>

* Update test

---------

Co-authored-by: Matias Chomicki <matyax@gmail.com>
This commit is contained in:
Ivana Huckova 2023-06-20 09:24:01 +02:00 committed by GitHub
parent 39433b5b9a
commit 750630626e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.test.tsx
View File

@ -99,6 +99,25 @@ describe('LokiQueryBuilderOptions', () => {
expect(screen.getByText('Type: Range')).toBeInTheDocument();
expect(screen.getByText('Step: 1m')).toBeInTheDocument();
});
it('shows correct options for metric query with invalid step', async () => {
setup({ expr: 'rate({foo="bar"}[5m]', step: 'abc' });
expect(screen.queryByText('Line limit: 20')).not.toBeInTheDocument();
expect(screen.getByText('Type: Range')).toBeInTheDocument();
expect(screen.getByText('Step: Invalid value')).toBeInTheDocument();
});
it('shows error when invalid value in step', async () => {
setup({ expr: 'rate({foo="bar"}[5m]', step: 'a' });
await userEvent.click(screen.getByTitle('Click to edit options'));
expect(screen.getByText(/Invalid step/)).toBeInTheDocument();
});
it('does not shows error when valid value in step', async () => {
setup({ expr: 'rate({foo="bar"}[5m]', step: '1m' });
await userEvent.click(screen.getByTitle('Click to edit options'));
expect(screen.queryByText(/Invalid step/)).not.toBeInTheDocument();
});
});
function setup(queryOverrides: Partial<LokiQuery> = {}) {

23
public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.tsx
View File

@ -1,5 +1,5 @@
import { trim } from 'lodash';
import React, { useState } from 'react';
import React, { useMemo, useState } from 'react';
import { CoreApp, isValidDuration, SelectableValue } from '@grafana/data';
import { EditorField, EditorRow } from '@grafana/experimental';
@ -70,11 +70,18 @@ export const LokiQueryBuilderOptions = React.memo<Props>(
const queryType = query.queryType ?? (query.instant ? LokiQueryType.Instant : LokiQueryType.Range);
const isLogQuery = isLogsQuery(query.expr);
const isValidStep = useMemo(() => {
if (!query.step || isValidDuration(query.step) || !isNaN(Number(query.step))) {
return true;
}
return false;
}, [query.step]);
return (
<EditorRow>
<QueryOptionGroup
title="Options"
collapsedInfo={getCollapsedInfo(query, queryType, maxLines, isLogQuery)}
collapsedInfo={getCollapsedInfo(query, queryType, maxLines, isLogQuery, isValidStep)}
queryStats={queryStats}
>
<EditorField
@ -109,6 +116,8 @@ export const LokiQueryBuilderOptions = React.memo<Props>(
<EditorField
label="Step"
tooltip="Use the step parameter when making metric queries to Loki. If not filled, Grafana's calculated interval will be used. Example valid values: 1s, 5m, 10h, 1d."
invalid={!isValidStep}
error={'Invalid step. Example valid values: 1s, 5m, 10h, 1d.'}
>
<AutoSizeInput
className="width-6"
@ -153,7 +162,13 @@ export const LokiQueryBuilderOptions = React.memo<Props>(
}
);
function getCollapsedInfo(query: LokiQuery, queryType: LokiQueryType, maxLines: number, isLogQuery: boolean): string[] {
function getCollapsedInfo(
query: LokiQuery,
queryType: LokiQueryType,
maxLines: number,
isLogQuery: boolean,
isValidStep: boolean
): string[] {
const queryTypeLabel = queryTypeOptions.find((x) => x.value === queryType);
const resolutionLabel = RESOLUTION_OPTIONS.find((x) => x.value === (query.resolution ?? 1));
@ -175,7 +190,7 @@ function getCollapsedInfo(query: LokiQuery, queryType: LokiQueryType, maxLines:
if (!isLogQuery) {
if (query.step) {
items.push(`Step: ${query.step}`);
items.push(`Step: ${isValidStep ? query.step : 'Invalid value'}`);
}
if (query.resolution) {