Feat: increase check timeout to scripted, browser and multihttp checks (#1049)

* fix: define min and max timeout values in constants file

- for multihttp, browser and scripted, the max limit is raised to 90

* fix: add valiadation to make sure frequency is greater than timeout

* chore: add tests

Author: VikaCep

src/components/CheckForm/CheckForm.constants.tsx

@@ -0,0 +1,15 @@
+import { CheckType } from 'types';
+
+const CheckTimeoutValues = {
+  [CheckType.PING]: { min: 1, max: 60 },
+  [CheckType.TCP]: { min: 1, max: 60 },
+  [CheckType.Traceroute]: { min: 30, max: 30 },
+  [CheckType.DNS]: { min: 1, max: 60 },
+  [CheckType.GRPC]: { min: 1, max: 60 },
+  [CheckType.HTTP]: { min: 1, max: 60 },
+  [CheckType.MULTI_HTTP]: { min: 5, max: 90 },
+  [CheckType.Scripted]: { min: 5, max: 90 },
+  [CheckType.Browser]: { min: 5, max: 90 },
+};
+
+export { CheckTimeoutValues };

src/components/CheckForm/FormLayouts/CheckBrowserLayout.tsx

@@ -2,12 +2,14 @@ import React from 'react';
 import { Stack, TextLink } from '@grafana/ui';
 
 import { LayoutSection, Section } from './Layout.types';
-import { CheckFormValuesBrowser } from 'types';
+import { CheckFormValuesBrowser, CheckType } from 'types';
 import { BrowserFields } from 'components/CheckEditor/CheckEditor.types';
 import { BrowserCheckInstance } from 'components/CheckEditor/FormComponents/BrowserCheckInstance';
 import { BrowserCheckScript } from 'components/CheckEditor/FormComponents/BrowserCheckScript';
 import { Timeout } from 'components/CheckEditor/FormComponents/Timeout';
 
+import { CheckTimeoutValues } from '../CheckForm.constants';
+
 export const BROWSER_CHECK_FIELDS: BrowserFields = {
   script: {
     name: `settings.browser.script`,
@@ -37,7 +39,7 @@ export const BrowserCheckLayout: Partial<Record<LayoutSection, Section<CheckForm
             running checks in a k6 script.
           </TextLink>
         </div>
-        <Timeout min={5.0} />
+        <Timeout min={CheckTimeoutValues[CheckType.Browser].min} max={CheckTimeoutValues[CheckType.Browser].max} />
       </Stack>
     ),
   },

src/components/CheckForm/FormLayouts/CheckDNSLayout.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 
 import { LayoutSection, Section } from './Layout.types';
-import { CheckFormValuesDns } from 'types';
+import { CheckFormValuesDns, CheckType } from 'types';
 import { useNestedRequestErrors } from 'hooks/useNestedRequestErrors';
 import { DNSRequestFields } from 'components/CheckEditor/CheckEditor.types';
 import { CheckPublishedAdvanceMetrics } from 'components/CheckEditor/FormComponents/CheckPublishedAdvanceMetrics';
@@ -10,6 +10,7 @@ import { DNSCheckValidResponseCodes } from 'components/CheckEditor/FormComponent
 import { DNSRequest } from 'components/CheckEditor/FormComponents/DNSRequest';
 import { Timeout } from 'components/CheckEditor/FormComponents/Timeout';
 
+import { CheckTimeoutValues } from '../CheckForm.constants';
 import { useCheckFormContext } from '../CheckFormContext/CheckFormContext';
 
 export const DNS_REQUEST_FIELDS: DNSRequestFields = {
@@ -65,7 +66,7 @@ export const DNSCheckLayout: Partial<Record<LayoutSection, Section<CheckFormValu
       <>
         <DNSCheckValidResponseCodes />
         <DNSCheckResponseMatches />
-        <Timeout />
+        <Timeout min={CheckTimeoutValues[CheckType.DNS].min} max={CheckTimeoutValues[CheckType.DNS].max} />
       </>
     ),
   },

src/components/CheckForm/FormLayouts/CheckGrpcLayout.tsx

@@ -1,13 +1,14 @@
 import React, { useCallback } from 'react';
 
 import { LayoutSection, Section } from './Layout.types';
-import { CheckFormValuesGRPC } from 'types';
+import { CheckFormValuesGRPC, CheckType } from 'types';
 import { useNestedRequestErrors } from 'hooks/useNestedRequestErrors';
 import { GRPCRequestFields } from 'components/CheckEditor/CheckEditor.types';
 import { CheckPublishedAdvanceMetrics } from 'components/CheckEditor/FormComponents/CheckPublishedAdvanceMetrics';
 import { GRPCRequest } from 'components/CheckEditor/FormComponents/GRPCRequest';
 import { Timeout } from 'components/CheckEditor/FormComponents/Timeout';
 
+import { CheckTimeoutValues } from '../CheckForm.constants';
 import { useCheckFormContext } from '../CheckFormContext/CheckFormContext';
 
 export const GRPC_REQUEST_FIELDS: GRPCRequestFields = {
@@ -73,7 +74,7 @@ export const GRPCCheckLayout: Partial<Record<LayoutSection, Section<CheckFormVal
     fields: [`timeout`],
     Component: (
       <>
-        <Timeout />
+        <Timeout min={CheckTimeoutValues[CheckType.GRPC].min} max={CheckTimeoutValues[CheckType.GRPC].max} />
       </>
     ),
   },

src/components/CheckForm/FormLayouts/CheckHttpLayout.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 
 import { LayoutSection, Section } from './Layout.types';
-import { CheckFormValues, CheckFormValuesHttp } from 'types';
+import { CheckFormValues, CheckFormValuesHttp, CheckType } from 'types';
 import { useNestedRequestErrors } from 'hooks/useNestedRequestErrors';
 import { HttpRequestFields } from 'components/CheckEditor/CheckEditor.types';
 import { CheckPublishedAdvanceMetrics } from 'components/CheckEditor/FormComponents/CheckPublishedAdvanceMetrics';
@@ -13,6 +13,7 @@ import { HttpCheckValidStatusCodes } from 'components/CheckEditor/FormComponents
 import { HttpRequest } from 'components/CheckEditor/FormComponents/HttpRequest';
 import { Timeout } from 'components/CheckEditor/FormComponents/Timeout';
 
+import { CheckTimeoutValues } from '../CheckForm.constants';
 import { useCheckFormContext } from '../CheckFormContext/CheckFormContext';
 
 export const HTTP_REQUEST_FIELDS: HttpRequestFields<CheckFormValuesHttp> = {
@@ -109,7 +110,7 @@ export const HttpCheckLayout: Partial<Record<LayoutSection, Section<CheckFormVal
         <HttpCheckSSLOptions />
         <HttpCheckRegExValidation />
         <HttpCheckCompressionOption />
-        <Timeout />
+        <Timeout min={CheckTimeoutValues[CheckType.HTTP].min} max={CheckTimeoutValues[CheckType.HTTP].max} />
       </>
     ),
   },

src/components/CheckForm/FormLayouts/CheckMultiHttpLayout.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 
 import { LayoutSection, Section } from './Layout.types';
-import { CheckFormValuesMultiHttp } from 'types';
+import { CheckFormValuesMultiHttp, CheckType } from 'types';
 import { MultiHttpAssertions } from 'components/CheckEditor/FormComponents/MultiHttpAssertions';
 import { MultiHttpCheckRequests } from 'components/CheckEditor/FormComponents/MultiHttpCheckRequests';
 import { Timeout } from 'components/CheckEditor/FormComponents/Timeout';
 
+import { CheckTimeoutValues } from '../CheckForm.constants';
 import { ENTRY_INDEX_CHAR } from '../FormLayout/formlayout.utils';
 
 export const MultiHTTPCheckLayout: Partial<Record<LayoutSection, Section<CheckFormValuesMultiHttp>>> = {
@@ -25,7 +26,10 @@ export const MultiHTTPCheckLayout: Partial<Record<LayoutSection, Section<CheckFo
     Component: (
       <>
         <MultiHttpAssertions />
-        <Timeout min={5.0} />
+        <Timeout
+          min={CheckTimeoutValues[CheckType.MULTI_HTTP].min}
+          max={CheckTimeoutValues[CheckType.MULTI_HTTP].max}
+        />
       </>
     ),
   },

src/components/CheckForm/FormLayouts/CheckPingLayout.tsx

@@ -1,13 +1,14 @@
 import React, { useCallback } from 'react';
 
 import { LayoutSection, Section } from './Layout.types';
-import { CheckFormValuesPing } from 'types';
+import { CheckFormValuesPing, CheckType } from 'types';
 import { useNestedRequestErrors } from 'hooks/useNestedRequestErrors';
 import { PingRequestFields } from 'components/CheckEditor/CheckEditor.types';
 import { CheckPublishedAdvanceMetrics } from 'components/CheckEditor/FormComponents/CheckPublishedAdvanceMetrics';
 import { PingRequest } from 'components/CheckEditor/FormComponents/PingRequest';
 import { Timeout } from 'components/CheckEditor/FormComponents/Timeout';
 
+import { CheckTimeoutValues } from '../CheckForm.constants';
 import { useCheckFormContext } from '../CheckFormContext/CheckFormContext';
 
 const PING_FIELDS: PingRequestFields = {
@@ -49,7 +50,7 @@ export const PingCheckLayout: Partial<Record<LayoutSection, Section<CheckFormVal
     fields: [`timeout`],
     Component: (
       <>
-        <Timeout />
+        <Timeout min={CheckTimeoutValues[CheckType.PING].min} max={CheckTimeoutValues[CheckType.PING].max} />
       </>
     ),
   },

src/components/CheckForm/FormLayouts/CheckScriptedLayout.tsx

@@ -2,12 +2,14 @@ import React from 'react';
 import { Stack, TextLink } from '@grafana/ui';
 
 import { LayoutSection, Section } from './Layout.types';
-import { CheckFormValuesScripted } from 'types';
+import { CheckFormValuesScripted, CheckType } from 'types';
 import { ScriptedFields } from 'components/CheckEditor/CheckEditor.types';
 import { ScriptedCheckInstance } from 'components/CheckEditor/FormComponents/ScriptedCheckInstance';
 import { ScriptedCheckScript } from 'components/CheckEditor/FormComponents/ScriptedCheckScript';
 import { Timeout } from 'components/CheckEditor/FormComponents/Timeout';
 
+import { CheckTimeoutValues } from '../CheckForm.constants';
+
 export const SCRIPTED_CHECK_FIELDS: ScriptedFields = {
   script: {
     name: `settings.scripted.script`,
@@ -37,7 +39,7 @@ export const ScriptedCheckLayout: Partial<Record<LayoutSection, Section<CheckFor
             running checks in a k6 script.
           </TextLink>
         </div>
-        <Timeout min={5.0} />
+        <Timeout min={CheckTimeoutValues[CheckType.Scripted].min} max={CheckTimeoutValues[CheckType.Scripted].max} />
       </Stack>
     ),
   },

src/components/CheckForm/FormLayouts/CheckTCPLayout.tsx

@@ -1,14 +1,15 @@
 import React, { useCallback } from 'react';
 
 import { LayoutSection, Section } from './Layout.types';
-import { CheckFormValuesTcp } from 'types';
+import { CheckFormValuesTcp, CheckType } from 'types';
 import { useNestedRequestErrors } from 'hooks/useNestedRequestErrors';
 import { TCPRequestFields } from 'components/CheckEditor/CheckEditor.types';
 import { CheckPublishedAdvanceMetrics } from 'components/CheckEditor/FormComponents/CheckPublishedAdvanceMetrics';
 import { TCPCheckQueryAndResponse } from 'components/CheckEditor/FormComponents/TCPCheckQueryAndResponse';
 import { TCPRequest } from 'components/CheckEditor/FormComponents/TCPRequest';
 import { Timeout } from 'components/CheckEditor/FormComponents/Timeout';
 
+import { CheckTimeoutValues } from '../CheckForm.constants';
 import { useCheckFormContext } from '../CheckFormContext/CheckFormContext';
 
 const TCP_REQUEST_FIELDS: TCPRequestFields = {
@@ -71,7 +72,7 @@ export const TCPCheckLayout: Partial<Record<LayoutSection, Section<CheckFormValu
     Component: (
       <>
         <TCPCheckQueryAndResponse />
-        <Timeout />
+        <Timeout min={CheckTimeoutValues[CheckType.TCP].min} max={CheckTimeoutValues[CheckType.TCP].max} />
       </>
     ),
   },

src/components/CheckForm/FormLayouts/CheckTracerouteLayout.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 
 import { LayoutSection, Section } from './Layout.types';
-import { CheckFormValuesTraceroute } from 'types';
+import { CheckFormValuesTraceroute, CheckType } from 'types';
 import { useNestedRequestErrors } from 'hooks/useNestedRequestErrors';
 import { TracerouteRequestFields } from 'components/CheckEditor/CheckEditor.types';
 import { CheckPublishedAdvanceMetrics } from 'components/CheckEditor/FormComponents/CheckPublishedAdvanceMetrics';
 import { Timeout } from 'components/CheckEditor/FormComponents/Timeout';
 import { TracerouteRequest } from 'components/CheckEditor/FormComponents/TracerouteRequest';
 
+import { CheckTimeoutValues } from '../CheckForm.constants';
 import { useCheckFormContext } from '../CheckFormContext/CheckFormContext';
 
 const TRACEROUTE_FIELDS: TracerouteRequestFields = {
@@ -47,7 +48,10 @@ export const TracerouteCheckLayout: Partial<Record<LayoutSection, Section<CheckF
     fields: [`timeout`],
     Component: (
       <>
-        <Timeout max={30.0} min={30.0} />
+        <Timeout
+          min={CheckTimeoutValues[CheckType.Traceroute].min}
+          max={CheckTimeoutValues[CheckType.Traceroute].max}
+        />
       </>
     ),
   },

src/components/TimeSlider/styles.ts

@@ -92,7 +92,7 @@ export const getStyles = (theme: GrafanaTheme2, hasMarks = false) => {
     sliderInputField: css({
       marginLeft: theme.spacing(3),
       marginRight: theme.spacing(1),
-      width: '60px',
+      maxWidth: '60px',
       minWidth: '40px',
       input: {
         textAlign: 'center',

src/page/NewCheck/__tests__/BrowserChecks/Scripted/5-execution.payload.test.tsx

@@ -38,4 +38,27 @@ describe(`BrowserCheck - Section 5 (Execution) payload`, () => {
 
     expect(body.frequency).toBe(ONE_MINUTE_IN_MS);
   });
+
+    it(`can add timeout up to 90 seconds`, async () => {
+      const MAX_TIMEOUT_MS = 90000;
+  
+      const { user, read } = await renderNewForm(checkType);
+      await fillMandatoryFields({ user, checkType });
+  
+      await goToSection(user, 2);
+  
+      const timeoutMinutesInput = screen.getByLabelText('timeout minutes input');
+      const timeoutSecondsInput = screen.getByLabelText('timeout seconds input');
+  
+      await user.clear(timeoutMinutesInput);
+      await user.clear(timeoutSecondsInput);
+      await user.type(timeoutMinutesInput, `{backspace}1`);
+      await user.type(timeoutSecondsInput, `30`);
+  
+      await submitForm(user);
+  
+      const { body } = await read();
+  
+      expect(body.timeout).toBe(MAX_TIMEOUT_MS);
+    });
 });

src/page/NewCheck/__tests__/MultiStepChecks/MultiHTTP/5-execution.payload.test.tsx

@@ -38,4 +38,27 @@ describe(`MultiHTTPCheck - Section 5 (Execution) payload`, () => {
 
     expect(body.frequency).toBe(ONE_MINUTE_IN_MS);
   });
+
+    it(`can add timeout up to 90 seconds`, async () => {
+      const MAX_TIMEOUT_MS = 90000;
+  
+      const { user, read } = await renderNewForm(checkType);
+      await fillMandatoryFields({ user, checkType });
+  
+      await goToSection(user, 2);
+  
+      const timeoutMinutesInput = screen.getByLabelText('timeout minutes input');
+      const timeoutSecondsInput = screen.getByLabelText('timeout seconds input');
+  
+      await user.clear(timeoutMinutesInput);
+      await user.clear(timeoutSecondsInput);
+      await user.type(timeoutMinutesInput, `{backspace}1`);
+      await user.type(timeoutSecondsInput, `30`);
+  
+      await submitForm(user);
+  
+      const { body } = await read();
+  
+      expect(body.timeout).toBe(MAX_TIMEOUT_MS);
+    });
 });

src/page/NewCheck/__tests__/NewCheck.journey.test.tsx

@@ -1,5 +1,6 @@
 import { screen, waitFor } from '@testing-library/react';
 import { DataTestIds } from 'test/dataTestIds';
+import { PUBLIC_PROBE } from 'test/fixtures/probes';
 import { apiRoute } from 'test/handlers';
 import { server } from 'test/server';
 import { runTestAsHGFreeUserOverLimit, runTestWithoutLogsAccess } from 'test/utils';
@@ -213,6 +214,41 @@ describe(`<NewCheck /> journey`, () => {
     expect(submitButton).toBeEnabled();
   });
 
+  it(`should display an error message when the frequency is less than the timeout`, async () => {
+    const { user } = await renderNewForm(CheckType.Scripted);
+
+    await user.type(screen.getByLabelText('Job name', { exact: false }), `Job`);
+    await user.type(screen.getByLabelText(`Instance`, { exact: false }), `Instance`);
+
+    await goToSection(user, 2);
+
+    const timeoutMinutesInput = screen.getByLabelText('timeout minutes input');
+    const timeoutSecondsInput = screen.getByLabelText('timeout seconds input');
+
+    await user.clear(timeoutMinutesInput);
+    await user.clear(timeoutSecondsInput);
+    await user.type(timeoutMinutesInput, '1');
+    await user.type(timeoutSecondsInput, '30');
+
+    await goToSection(user, 5);
+
+    const minutesInput = screen.getByLabelText('frequency minutes input');
+    const secondsInput = screen.getByLabelText('frequency seconds input');
+    await user.clear(minutesInput);
+    await user.clear(secondsInput);
+    await user.type(minutesInput, `{backspace}1`);
+    await user.type(secondsInput, '10');
+
+    const probeCheckbox = await screen.findByLabelText(PUBLIC_PROBE.name);
+    await user.click(probeCheckbox);
+
+    await submitForm(user);
+
+    const errorMsg = await screen.findByRole('alert');
+    expect(errorMsg).toBeInTheDocument();
+    expect(errorMsg).toHaveTextContent(/Frequency must be greater than or equal to timeout \(90 seconds\)/);
+  });
+
   // jsdom doesn't give us back the submitter of the form, so we can't test this
   // https://github.com/jsdom/jsdom/issues/3117
   it.skip(`should show an error message when it fails to test a check`, async () => {});

src/page/NewCheck/__tests__/ScriptedChecks/Scripted/5-execution.payload.test.tsx

@@ -38,4 +38,27 @@ describe(`ScriptedCheck - Section 5 (Execution) payload`, () => {
 
     expect(body.frequency).toBe(ONE_MINUTE_IN_MS);
   });
+
+  it(`can add timeout up to 90 seconds`, async () => {
+    const MAX_TIMEOUT_MS = 90000;
+
+    const { user, read } = await renderNewForm(checkType);
+    await fillMandatoryFields({ user, checkType });
+
+    await goToSection(user, 2);
+
+    const timeoutMinutesInput = screen.getByLabelText('timeout minutes input');
+    const timeoutSecondsInput = screen.getByLabelText('timeout seconds input');
+
+    await user.clear(timeoutMinutesInput);
+    await user.clear(timeoutSecondsInput);
+    await user.type(timeoutMinutesInput, `{backspace}1`);
+    await user.type(timeoutSecondsInput, `30`);
+
+    await submitForm(user);
+
+    const { body } = await read();
+
+    expect(body.timeout).toBe(MAX_TIMEOUT_MS);
+  });
 });