Compression algo

__mocks__/@grafana/ui.tsx

@@ -1,7 +1,7 @@
 import * as ui from '@grafana/ui';
 import React from 'react';
 
-const Select = ({ options, value, onChange, multiple = false, prefix, ...rest }: any) => {
+const Select = ({ options, value, onChange, multiple = false, prefix, id, ...rest }: any) => {
   function handleChange(event) {
     const option = options.find((option) => {
       return String(option.value) === event.currentTarget.value;
@@ -16,9 +16,15 @@ const Select = ({ options, value, onChange, multiple = false, prefix, ...rest }:
   return (
     <div>
       {prefix}
-      <select data-testid={rest['data-testid'] ?? 'select'} value={value} onChange={handleChange} multiple={multiple}>
-        {options.map(({ label, value }) => (
-          <option key={value} value={value}>
+      <select
+        id={id}
+        data-testid={rest['data-testid'] ?? 'select'}
+        value={value?.value ?? value}
+        onChange={handleChange}
+        multiple={multiple}
+      >
+        {options.map(({ label, value }, index) => (
+          <option key={index} value={value}>
             {label}
           </option>
         ))}

src/components/CheckEditor/CheckEditor.test.tsx

@@ -10,6 +10,7 @@ import {
   HttpVersion,
   GlobalSettings,
   AlertSensitivity,
+  HTTPCompressionAlgo,
 } from 'types';
 import { CheckEditor } from './CheckEditor';
 import { getInstanceMock } from '../../datasource/__mocks__/DataSource';
@@ -288,6 +289,7 @@ describe('HTTP', () => {
       settings: {
         http: {
           method: HttpMethod.GET,
+          compression: HTTPCompressionAlgo.gzip,
           headers: ['headerName:headerValue'],
           body: 'requestbody',
           ipVersion: IpVersion.V6,
@@ -329,6 +331,7 @@ describe('HTTP', () => {
     expect(await screen.findByLabelText('Request body', { exact: false })).toHaveValue('requestbody');
     expect(await within(httpSection).findByPlaceholderText('name')).toHaveValue('headerName');
     expect(await within(httpSection).findByPlaceholderText('value')).toHaveValue('headerValue');
+    expect(within(httpSection).getByTestId('http-compression')).toHaveValue('gzip');
 
     await toggleSection('TLS config');
     expect(await screen.findByLabelText('Disable target certificate validation')).toBeChecked();
@@ -391,6 +394,10 @@ describe('HTTP', () => {
     await userEvent.click(await screen.findByRole('button', { name: 'Add header' }));
     await act(async () => await userEvent.type(await screen.findByPlaceholderText('name'), 'headerName'));
     await act(async () => await userEvent.type(await screen.findByPlaceholderText('value'), 'headerValue'));
+    const compression = await screen.findByLabelText('The compression algorithm to expect in the response body', {
+      exact: false,
+    });
+    userEvent.selectOptions(compression, 'deflate');
     await toggleSection('HTTP settings');
 
     // TLS Config
@@ -466,6 +473,7 @@ describe('HTTP', () => {
           method: 'GET',
           headers: ['headerName:headerValue'],
           body: 'requestbody',
+          compression: 'deflate',
           ipVersion: 'V4',
           noFollowRedirects: false,
           tlsConfig: {

src/components/CheckEditor/checkFormTransformations.ts

@@ -29,6 +29,7 @@ import {
   AlertSensitivity,
   TCPQueryResponse,
   TLSConfig,
+  HTTPCompressionAlgo,
 } from 'types';
 
 import {
@@ -39,6 +40,7 @@ import {
   HTTP_REGEX_VALIDATION_OPTIONS,
   fallbackCheck,
   ALERT_SENSITIVITY_OPTIONS,
+  HTTP_COMPRESSION_ALGO_OPTIONS,
 } from 'components/constants';
 import { checkType, fromBase64, toBase64 } from 'utils';
 import isBase64 from 'is-base64';
@@ -58,6 +60,7 @@ export function fallbackSettings(t: CheckType): Settings {
           method: HttpMethod.GET,
           ipVersion: IpVersion.V4,
           noFollowRedirects: false,
+          compression: HTTPCompressionAlgo.None,
         },
       };
     }
@@ -195,6 +198,7 @@ const getHttpSettingsFormValues = (settings: Settings): HttpSettingsFormValues =
     failIfHeaderNotMatchesRegexp,
     noFollowRedirects,
     tlsConfig,
+    compression,
     ...pickedSettings
   } = httpSettings;
 
@@ -218,6 +222,7 @@ const getHttpSettingsFormValues = (settings: Settings): HttpSettingsFormValues =
     ipVersion: selectableValueFrom(httpSettings.ipVersion),
     headers: headersToLabels(httpSettings.headers),
     regexValidations,
+    compression: compression ? selectableValueFrom(compression) : HTTP_COMPRESSION_ALGO_OPTIONS[0],
   };
 };
 
@@ -442,6 +447,8 @@ const getHttpSettings = (
     getValueFromSelectable(settings.sslOptions ?? defaultSettings?.sslOptions) ?? HttpSslOption.Ignore
   );
 
+  const compression = getValueFromSelectable(settings.compression);
+
   const validationRegexes = getHttpRegexValidationsFromFormValue(settings.regexValidations ?? []);
 
   // We need to pick the sslOptions key out of the settings, since the API doesn't expect this key
@@ -461,6 +468,7 @@ const getHttpSettings = (
     ipVersion: getValueFromSelectable(settings?.ipVersion ?? defaultSettings?.ipVersion) ?? fallbackValues.ipVersion,
     validStatusCodes: getValuesFromMultiSelectables(settings?.validStatusCodes ?? defaultSettings?.validStatusCodes),
     validHTTPVersions: getValuesFromMultiSelectables(settings?.validHTTPVersions ?? defaultSettings?.validHTTPVersions),
+    compression,
   };
 };
 

src/components/CheckList.test.tsx

@@ -216,7 +216,7 @@ test('clicking status chiclet adds it to filter', async () => {
   userEvent.click(disabledChiclet[1]);
   const statusFilter = await screen.findByTestId('check-status-filter');
   const checks = await screen.findAllByLabelText('check-card');
-  expect(statusFilter).toHaveValue('0');
+  expect(statusFilter).toHaveValue('2');
   expect(checks.length).toBe(1);
 });
 

src/components/constants.ts

@@ -14,6 +14,7 @@ import {
   CheckSort,
   CheckEnabledStatus,
   CheckListViewType,
+  HTTPCompressionAlgo,
 } from 'types';
 
 export const DNS_RESPONSE_CODES = enumToStringArray(DnsResponseCodes).map((responseCode) => ({
@@ -274,10 +275,19 @@ export const CHECK_LIST_VIEW_TYPE_OPTIONS = [
   { description: 'Card view', value: CheckListViewType.Card, icon: 'check-square' },
   { description: 'List view', value: CheckListViewType.List, icon: 'list-ul' },
 ];
+
 export const PEM_HEADER = '-----BEGIN CERTIFICATE-----';
 
 export const PEM_FOOTER = '-----END CERTIFICATE-----';
 
 export const CHECK_LIST_VIEW_TYPE_LS_KEY = 'grafana.sm.checklist.viewType';
 
 export const INVALID_WEB_URL_MESSAGE = 'Target must be a valid web URL';
+
+export const HTTP_COMPRESSION_ALGO_OPTIONS = [
+  { label: 'none', value: HTTPCompressionAlgo.None },
+  { label: 'identity', value: HTTPCompressionAlgo.identity },
+  { label: 'br', value: HTTPCompressionAlgo.br },
+  { label: 'gzip', value: HTTPCompressionAlgo.gzip },
+  { label: 'deflate', value: HTTPCompressionAlgo.deflate },
+];

src/components/http/HttpSettings.tsx

@@ -19,7 +19,12 @@ import { css } from 'emotion';
 import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
 import { HttpMethod, HttpVersion, CheckType, HttpRegexValidationType } from 'types';
 import { Collapse } from 'components/Collapse';
-import { HTTP_REGEX_VALIDATION_OPTIONS, HTTP_SSL_OPTIONS, IP_OPTIONS } from '../constants';
+import {
+  HTTP_COMPRESSION_ALGO_OPTIONS,
+  HTTP_REGEX_VALIDATION_OPTIONS,
+  HTTP_SSL_OPTIONS,
+  IP_OPTIONS,
+} from '../constants';
 import { LabelField } from 'components/LabelField';
 import { TLSConfig } from 'components/TLSConfig';
 import { NameValueInput } from 'components/NameValueInput';
@@ -234,6 +239,21 @@ export const HttpSettingsForm = ({ isEditor }: Props) => {
             />
           </Field>
         </Container>
+        <HorizontalGroup>
+          <Field
+            label="Compression option"
+            description="The compression algorithm to expect in the response body"
+            disabled={!isEditor}
+          >
+            <Controller
+              id="http-compression"
+              data-testid="http-compression"
+              as={Select}
+              name="settings.http.compression"
+              options={HTTP_COMPRESSION_ALGO_OPTIONS}
+            />
+          </Field>
+        </HorizontalGroup>
       </Collapse>
       <TLSConfig isEditor={isEditor} checkType={CheckType.HTTP} />
       <Collapse

src/types.ts

@@ -162,6 +162,7 @@ export interface HttpSettings {
   ipVersion: IpVersion;
   noFollowRedirects: boolean;
   tlsConfig?: TLSConfig;
+  compression: HTTPCompressionAlgo | undefined;
 
   // Authentication
   bearerToken?: string;
@@ -208,6 +209,7 @@ export interface HttpSettingsFormValues
     | 'failIfHeaderMatchesRegexp'
     | 'failIfHeaderNotMatchesRegexp'
     | 'noFollowRedirects'
+    | 'compression'
   > {
   sslOptions: SelectableValue<HttpSslOption>;
   validStatusCodes: Array<SelectableValue<number>>;
@@ -217,6 +219,7 @@ export interface HttpSettingsFormValues
   headers: HttpHeaderFormValue[];
   regexValidations: HttpRegexValidationFormValue[];
   followRedirects: boolean;
+  compression: SelectableValue<HTTPCompressionAlgo>;
 }
 
 export interface PingSettings {
@@ -444,3 +447,11 @@ export enum CheckListViewType {
   Card,
   List,
 }
+
+export enum HTTPCompressionAlgo {
+  None = '',
+  identity = 'identity',
+  br = 'br',
+  gzip = 'gzip',
+  deflate = 'deflate',
+}

src/validation.test.ts

@@ -7,7 +7,16 @@ import {
   validateLabelName,
   validateLabelValue,
 } from 'validation';
-import { Check, CheckType, HttpMethod, IpVersion, DnsRecordType, DnsProtocol, AlertSensitivity } from 'types';
+import {
+  Check,
+  CheckType,
+  HttpMethod,
+  IpVersion,
+  DnsRecordType,
+  DnsProtocol,
+  AlertSensitivity,
+  HTTPCompressionAlgo,
+} from 'types';
 jest.unmock('utils');
 
 describe('trivial cases', () => {
@@ -24,6 +33,7 @@ describe('trivial cases', () => {
       basicMetricsOnly: true,
       settings: {
         http: {
+          compression: HTTPCompressionAlgo.None,
           method: HttpMethod.GET,
           ipVersion: IpVersion.V4,
           noFollowRedirects: false,