Loki: Add step input field validation (#70319)

* 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>

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

@@ -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> = {}) {

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

@@ -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) {