From 59f360c68c4e2d2077fc96ef113da034461df8c6 Mon Sep 17 00:00:00 2001
From: Chris Bedwell <christopher.bedwell@grafana.com>
Date: Tue, 10 Oct 2023 18:16:45 +0100
Subject: [PATCH 1/4] fix: update provisioning examples to match readme (#618)

---
 dev/provisioning/datasources/example.yaml | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/dev/provisioning/datasources/example.yaml b/dev/provisioning/datasources/example.yaml
index d17be313f..05509a9ab 100644
--- a/dev/provisioning/datasources/example.yaml
+++ b/dev/provisioning/datasources/example.yaml
@@ -5,18 +5,19 @@
 #     access: proxy
 #     url: https://logs-prod-us-central1.grafana.net
 #     basicAuth: true
-#     basicAuthUser: <instanceID>
-#     basicAuthPassword: <grafana.com api key>
+#     basicAuthUser: <Grafana Cloud Loki instance ID>
 #     jsonData:
 #       maxLines: 1000
+#     secureJsonData:
+#       basicAuthPassword: <viewer token from grafana.com>
 
 #   - name: grafanacloud-<orgslug>-prom
 #     type: prometheus
 #     access: proxy
 #     url: https://prometheus-us-central1.grafana.net/api/prom
 #     basicAuth: true
-#     basicAuthUser: <instanceID>
+#     basicAuthUser: <Grafana Cloud Prom instance ID>
 #     jsonData:
 #       timeInterval: 1s
 #     secureJsonData:
-#       basicAuthPassword: <grafana.com api key>
+#       basicAuthPassword: <viewer token from grafana.com>

From 7eedad953f0bbad426ffa02906b2d7ae916801d1 Mon Sep 17 00:00:00 2001
From: Russ <8377044+rdubrock@users.noreply.github.com>
Date: Tue, 10 Oct 2023 10:41:31 -0800
Subject: [PATCH 2/4] feat: add test button to multihttp checks (#619)

* feat: add test button to multihttp checks

* chore: remove logs

* chore: improve error handling
---
 src/components/CheckTestButton.tsx            | 22 +++++++++++++++++--
 src/components/CheckTestResultsModal.tsx      | 11 +++++++---
 .../MultiHttp/MultiHttpSettingsForm.tsx       |  2 ++
 src/datasource/DataSource.ts                  |  4 ----
 src/hooks/useAlerts.ts                        |  2 --
 src/page/WelcomePage.tsx                      |  1 -
 6 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/components/CheckTestButton.tsx b/src/components/CheckTestButton.tsx
index 84b64d5a4..ff0476d95 100644
--- a/src/components/CheckTestButton.tsx
+++ b/src/components/CheckTestButton.tsx
@@ -1,5 +1,5 @@
 import React, { useContext, useMemo, useState } from 'react';
-import { Button, Spinner } from '@grafana/ui';
+import { Alert, Button, Modal, Spinner } from '@grafana/ui';
 import { CheckTestResultsModal } from './CheckTestResultsModal';
 import { AdHocCheckResponse, Check, CheckFormValues, CheckType } from 'types';
 import { useFormContext } from 'react-hook-form';
@@ -14,6 +14,8 @@ interface Props {
 
 export function CheckTestButton({ check }: Props) {
   const [isTestModalOpen, setTestModalOpen] = useState(false);
+  const [isErrorModalOpen, setErrorModalOpen] = useState(false);
+  const [error, setError] = useState('');
   const [testResponse, setTestResponse] = useState<AdHocCheckResponse>();
   const [testRequestInFlight, setTestRequestInFlight] = useState(false);
   const defaultValues = useMemo(() => getDefaultValuesFromCheck(check), [check]);
@@ -25,7 +27,7 @@ export function CheckTestButton({ check }: Props) {
       <Button
         type="button"
         variant="secondary"
-        disabled={testRequestInFlight || checkType === CheckType.Traceroute || !formMethods.formState.isValid}
+        disabled={testRequestInFlight || checkType === CheckType.Traceroute}
         onClick={() => {
           const values = formMethods.getValues() as CheckFormValues;
           const check = getCheckFromFormValues(values, defaultValues, checkType);
@@ -37,6 +39,10 @@ export function CheckTestButton({ check }: Props) {
               setTestModalOpen(true);
               setTestResponse(resp);
             })
+            .catch((err) => {
+              setErrorModalOpen(true);
+              setError(err?.data?.err ?? err?.data?.msg);
+            })
             .finally(() => {
               setTestRequestInFlight(false);
             });
@@ -52,6 +58,18 @@ export function CheckTestButton({ check }: Props) {
         }}
         testResponse={testResponse}
       />
+      <Modal
+        isOpen={isErrorModalOpen}
+        title="Error testing check"
+        onDismiss={() => {
+          setErrorModalOpen(false);
+          setError('');
+        }}
+      >
+        <Alert severity="error" title="Something went wrong running the check">
+          {error}
+        </Alert>
+      </Modal>
     </>
   );
 }
diff --git a/src/components/CheckTestResultsModal.tsx b/src/components/CheckTestResultsModal.tsx
index e1d309551..c92e2ce74 100644
--- a/src/components/CheckTestResultsModal.tsx
+++ b/src/components/CheckTestResultsModal.tsx
@@ -13,7 +13,7 @@ interface Props {
 }
 
 function buildLogsDf(logs: Array<Record<string, any>>) {
-  const tsValues = new Array(logs.length).fill(Date.now());
+  const tsValues = new Array(logs?.length).fill(Date.now());
   const fields: Record<string, any> = {
     // a timestamp is required for the panel to render. we don't care about/have a timestamp so we just fill with the time for right now
     ts: {
@@ -119,7 +119,12 @@ export function CheckTestResultsModal({ testResponse, isOpen, onDismiss }: Props
       const logsStr = item.values?.[0]?.[1];
       try {
         const info = JSON.parse(logsStr);
-        const df = buildLogsDf(info.logs);
+        let df;
+        if (!info.logs) {
+          df = buildLogsDf([{ level: 'error', msg: 'There was an error running the test' }]);
+        } else {
+          df = buildLogsDf(info.logs);
+        }
         info.logs = df;
         if (!resultsByProbe[`${info.probe}${testResponse.id}`] && info.id === testResponse.id) {
           setResultsByProbe({ ...resultsByProbe, [`${info.probe}${testResponse.id}`]: info });
@@ -140,7 +145,7 @@ export function CheckTestResultsModal({ testResponse, isOpen, onDismiss }: Props
       }}
     >
       <p>Tests will run on up to 5 randomly selected probes</p>
-      {testResponse?.probes.map((testProbe) => {
+      {testResponse?.probes?.map((testProbe) => {
         const probe = probes?.find((probe) => probe.id === testProbe);
         const resultKey = `${probe?.name}${testResponse.id}`;
         const result = resultsByProbe[resultKey];
diff --git a/src/components/MultiHttp/MultiHttpSettingsForm.tsx b/src/components/MultiHttp/MultiHttpSettingsForm.tsx
index 945a181cd..616945775 100644
--- a/src/components/MultiHttp/MultiHttpSettingsForm.tsx
+++ b/src/components/MultiHttp/MultiHttpSettingsForm.tsx
@@ -35,6 +35,7 @@ import { FaroEvent, reportEvent, reportError } from 'faro';
 import { CheckFormAlert } from 'components/CheckFormAlert';
 import { HorizontalCheckboxField } from 'components/HorizonalCheckboxField';
 import { CheckUsage } from 'components/CheckUsage';
+import { CheckTestButton } from 'components/CheckTestButton';
 
 interface Props {
   checks?: Check[];
@@ -292,6 +293,7 @@ export const MultiHttpSettingsForm = ({ checks, onReturn }: Props) => {
                   <Button type="submit" disabled={formMethods.formState.isSubmitting || submitting}>
                     Save
                   </Button>
+                  <CheckTestButton check={check} />
                   {check?.id && (
                     <Button
                       variant="destructive"
diff --git a/src/datasource/DataSource.ts b/src/datasource/DataSource.ts
index 0fd661f8b..21d841fab 100644
--- a/src/datasource/DataSource.ts
+++ b/src/datasource/DataSource.ts
@@ -280,10 +280,6 @@ export class SMDataSource extends DataSourceApi<SMQuery, SMOptions> {
   }
 
   async testCheck(check: Check): Promise<any> {
-    if (check.timeout > 2500) {
-      check.timeout = 2500;
-    }
-
     const randomSelection = getRandomProbes(check.probes, 5);
     check.probes = randomSelection;
 
diff --git a/src/hooks/useAlerts.ts b/src/hooks/useAlerts.ts
index 70c8a1b03..50b1bb532 100644
--- a/src/hooks/useAlerts.ts
+++ b/src/hooks/useAlerts.ts
@@ -209,7 +209,6 @@ export function useAlerts(checkId?: number) {
       legacyFetchSMRules(alertRulerUrl).then(({ rules, error }) => {
         setAlertRules(rules);
         if (error) {
-          console.log('hello', error);
           setAlertError(error);
         }
       });
@@ -218,7 +217,6 @@ export function useAlerts(checkId?: number) {
       fetchSMRules(metricsIdentifier).then(({ rules, error }) => {
         setAlertRules(rules);
         if (error) {
-          console.log('goodbye', error);
           setAlertError(error);
         }
       });
diff --git a/src/page/WelcomePage.tsx b/src/page/WelcomePage.tsx
index 15889c948..1c3659122 100644
--- a/src/page/WelcomePage.tsx
+++ b/src/page/WelcomePage.tsx
@@ -182,7 +182,6 @@ export const WelcomePage: FC<Props> = () => {
       const metricsStatus = ensureNameAndUidMatch(metricsByName, metricsByUid);
       const logsStatus = ensureNameAndUidMatch(logsByName, logsByUid);
 
-      console.log({ metricsStatus, logsStatus });
       if (metricsStatus === DatasourceStatus.NotFound) {
         throw new Error('Invalid plugin configuration. Could not find a metrics datasource');
       }

From fa286bc89512e9eb36fe09524f7bb544e7667f1b Mon Sep 17 00:00:00 2001
From: Russ <8377044+rdubrock@users.noreply.github.com>
Date: Tue, 10 Oct 2023 15:13:46 -0800
Subject: [PATCH 3/4] fix: persist filters in local storage (#620)

* fix: persist filters in local storage

* chore: add some tests
---
 src/components/CheckFilters.tsx               | 12 +++
 src/components/CheckList/CheckFilterGroup.tsx | 26 +++++-
 src/components/CheckList/CheckList.test.tsx   | 86 +++++++++++++++++++
 src/components/CheckList/CheckList.tsx        | 18 ++--
 src/components/CheckList/checkFilters.ts      | 10 ++-
 5 files changed, 142 insertions(+), 10 deletions(-)

diff --git a/src/components/CheckFilters.tsx b/src/components/CheckFilters.tsx
index c8f43d833..5f4f7374f 100644
--- a/src/components/CheckFilters.tsx
+++ b/src/components/CheckFilters.tsx
@@ -41,6 +41,18 @@ export const defaultFilters: CheckFiltersType = {
   probes: [],
 };
 
+export const getDefaultFilters = (): CheckFiltersType => {
+  const storedFilters = localStorage.getItem('checkFilters');
+  if (storedFilters) {
+    try {
+      return JSON.parse(storedFilters) as CheckFiltersType;
+    } catch (e) {
+      return defaultFilters;
+    }
+  }
+  return defaultFilters;
+};
+
 export function CheckFilters({
   handleResetFilters,
   onChange,
diff --git a/src/components/CheckList/CheckFilterGroup.tsx b/src/components/CheckList/CheckFilterGroup.tsx
index a9b03d65a..ecb0ad2e8 100644
--- a/src/components/CheckList/CheckFilterGroup.tsx
+++ b/src/components/CheckList/CheckFilterGroup.tsx
@@ -4,7 +4,6 @@ import { Button, Icon, useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
 import { GrafanaTheme2 } from '@grafana/data';
 import { CheckFiltersType } from 'types';
-import { defaultFilters } from 'components/CheckFilters';
 
 const groupStyles = (theme: GrafanaTheme2) => ({
   container: css`
@@ -58,8 +57,29 @@ const CheckFilterGroup = ({ children, onReset, filters }: Props) => {
     // Count which filters have been applied
     Object.keys(filters).forEach((key) => {
       // Search filter is handled separately
-      if (key !== 'search' && filters[key] !== defaultFilters[key]) {
-        active += 1;
+      switch (key) {
+        case 'labels':
+          if (filters.labels.length > 0) {
+            active += 1;
+          }
+          break;
+        case 'search':
+          break;
+        case 'status':
+          if (filters.status.value !== 0) {
+            active += 1;
+          }
+          break;
+        case 'probes':
+          if (filters.probes.length > 0) {
+            active += 1;
+          }
+          break;
+        case 'type':
+          if (filters.type !== 'all') {
+            active += 1;
+          }
+          break;
       }
     });
     setActiveFilters(active);
diff --git a/src/components/CheckList/CheckList.test.tsx b/src/components/CheckList/CheckList.test.tsx
index b4283c7ab..3c1ebaa1e 100644
--- a/src/components/CheckList/CheckList.test.tsx
+++ b/src/components/CheckList/CheckList.test.tsx
@@ -140,6 +140,10 @@ const renderCheckList = ({ checks = defaultChecks } = {} as RenderChecklist) =>
   return instance;
 };
 
+beforeEach(() => {
+  localStorage.clear();
+});
+
 test('renders empty state', async () => {
   renderCheckList({ checks: [] });
   const emptyWarning = await screen.findByText('This account does not currently have any checks configured', {
@@ -260,6 +264,88 @@ test('filters by probe', async () => {
   expect(checks.length).toBe(2);
 });
 
+test('loads search from localStorage', async () => {
+  localStorage.setItem(
+    'checkFilters',
+    JSON.stringify({
+      search: 'chimichurri',
+      labels: [],
+      type: 'all',
+      status: { label: 'All', value: 0 },
+      probes: [],
+    })
+  );
+  renderCheckList();
+  const searchInput = await screen.findByPlaceholderText('Search by job name, endpoint, or label');
+  expect(searchInput).toHaveValue('chimichurri');
+
+  const checks = await screen.findAllByTestId('check-card');
+  expect(checks.length).toBe(1);
+});
+
+test('loads status filter from localStorage', async () => {
+  localStorage.setItem(
+    'checkFilters',
+    JSON.stringify({
+      search: '',
+      labels: [],
+      type: 'all',
+      status: { label: 'Disabled', value: 2 },
+      probes: [],
+    })
+  );
+  renderCheckList();
+  const additionalFilters = await screen.findByRole('button', { name: 'Additional Filters (1 active)', exact: false });
+  userEvent.click(additionalFilters);
+  const statusFilter = await screen.findByTestId('check-status-filter');
+  expect(statusFilter).toHaveValue('2');
+
+  const checks = await screen.findAllByTestId('check-card');
+  expect(checks.length).toBe(1);
+});
+
+test('loads type filter from localStorage', async () => {
+  localStorage.setItem(
+    'checkFilters',
+    JSON.stringify({
+      search: '',
+      labels: [],
+      type: 'http',
+      status: { label: 'All', value: 0 },
+      probes: [],
+    })
+  );
+  renderCheckList();
+  const additionalFilters = await screen.findByRole('button', { name: 'Additional Filters (1 active)', exact: false });
+  userEvent.click(additionalFilters);
+  const typeFilter = await screen.findByTestId('check-type-filter');
+  expect(typeFilter).toHaveValue('http');
+
+  const checks = await screen.findAllByTestId('check-card');
+  expect(checks.length).toBe(1);
+});
+
+test('loads labels from localStorage', async () => {
+  localStorage.setItem(
+    'checkFilters',
+    JSON.stringify({
+      search: '',
+      labels: ['agreat: label'],
+      type: 'all',
+      status: { label: 'All', value: 0 },
+      probes: [],
+    })
+  );
+  renderCheckList();
+  const additionalFilters = await screen.findByRole('button', { name: 'Additional Filters (1 active)', exact: false });
+  userEvent.click(additionalFilters);
+  const filterInput = await screen.findByTestId('check-label-filter');
+  expect(filterInput).toHaveValue(['agreat: label']);
+
+  const checks = await screen.findAllByTestId('check-card');
+  expect(checks.length).toBe(1);
+});
+
 test('clicking type chiclet adds it to filter', async () => {
   renderCheckList();
   const additionalFilters = await screen.findByRole('button', { name: 'Additional Filters', exact: false });
diff --git a/src/components/CheckList/CheckList.tsx b/src/components/CheckList/CheckList.tsx
index daac36691..a6f1247a4 100644
--- a/src/components/CheckList/CheckList.tsx
+++ b/src/components/CheckList/CheckList.tsx
@@ -7,7 +7,7 @@ import { AppEvents, GrafanaTheme2, OrgRole, SelectableValue } from '@grafana/dat
 import { config } from '@grafana/runtime';
 import { Button, ButtonCascader, Checkbox, Icon, InlineSwitch, Pagination, Select, useStyles2 } from '@grafana/ui';
 import { BulkEditModal } from 'components/BulkEditModal';
-import { CheckFilters, defaultFilters } from 'components/CheckFilters';
+import { CheckFilters, defaultFilters, getDefaultFilters } from 'components/CheckFilters';
 import { ChecksContextProvider } from 'components/ChecksContextProvider';
 import { PluginPage } from 'components/PluginPage';
 import { SuccessRateContext, SuccessRateTypes } from 'contexts/SuccessRateContext';
@@ -113,7 +113,7 @@ interface Props {
 }
 
 export const CheckList = ({ instance, checks, onCheckUpdate }: Props) => {
-  const [checkFilters, setCheckFilters] = useState<CheckFiltersType>(defaultFilters);
+  const [checkFilters, setCheckFilters] = useState<CheckFiltersType>(getDefaultFilters());
   const [filteredChecks, setFilteredChecks] = useState<FilteredCheck[] | []>([]);
 
   const [currentPage, setCurrentPage] = useState(1);
@@ -177,21 +177,26 @@ export const CheckList = ({ instance, checks, onCheckUpdate }: Props) => {
 
   const handleResetFilters = () => {
     setCheckFilters(defaultFilters);
+    localStorage.removeItem('checkFilters');
   };
 
   const handleLabelSelect = (label: Label) => {
     setCheckFilters((cf) => {
-      return {
+      const updated = {
         ...cf,
         labels: [...cf.labels, `${label.name}: ${label.value}`],
       };
+      localStorage.setItem('checkFilters', JSON.stringify(updated));
+      return updated;
     });
     setCurrentPage(1);
   };
 
   const handleTypeSelect = (checkType: CheckType) => {
     setCheckFilters((cf) => {
-      return { ...cf, type: checkType };
+      const updated = { ...cf, type: checkType };
+      localStorage.setItem('checkFilters', JSON.stringify(updated));
+      return updated;
     });
     setCurrentPage(1);
   };
@@ -201,10 +206,12 @@ export const CheckList = ({ instance, checks, onCheckUpdate }: Props) => {
     const option = CHECK_LIST_STATUS_OPTIONS.find(({ value }) => value === status);
     if (option) {
       setCheckFilters((cf) => {
-        return {
+        const updated = {
           ...cf,
           status: option,
         };
+        localStorage.setItem('checkFilters', JSON.stringify(updated));
+        return updated;
       });
       setCurrentPage(1);
     }
@@ -318,6 +325,7 @@ export const CheckList = ({ instance, checks, onCheckUpdate }: Props) => {
                 checkFilters={checkFilters}
                 onChange={(filters: CheckFiltersType) => {
                   setCheckFilters(filters);
+                  localStorage.setItem('checkFilters', JSON.stringify(filters));
                 }}
               />
               {hasRole(OrgRole.Editor) && (
diff --git a/src/components/CheckList/checkFilters.ts b/src/components/CheckList/checkFilters.ts
index b2c0d1dec..e9cfa1a7a 100644
--- a/src/components/CheckList/checkFilters.ts
+++ b/src/components/CheckList/checkFilters.ts
@@ -33,10 +33,16 @@ const matchesSearchFilter = ({ target, job, labels }: Check, searchFilter: strin
 };
 
 const matchesLabelFilter = ({ labels }: Check, labelFilters: string[]) => {
-  if (labelFilters.length === 0) {
+  if (!labelFilters || labelFilters.length === 0) {
     return true;
   }
-  return labels.some(({ name, value }) => labelFilters.some((filter) => filter === `${name}: ${value}`));
+  const result = labels?.some(({ name, value }) => {
+    const filtersResult = labelFilters.some((filter) => {
+      return filter === `${name}: ${value}`;
+    });
+    return filtersResult;
+  });
+  return result;
 };
 
 const matchesStatusFilter = ({ enabled }: Check, { value }: SelectableValue) => {

From 0fa01de55353ebf964b1db347086624d37d3e31d Mon Sep 17 00:00:00 2001
From: Russ <8377044+rdubrock@users.noreply.github.com>
Date: Wed, 11 Oct 2023 08:00:14 -0800
Subject: [PATCH 4/4] chore: remove deprecated query options

---
 src/components/CheckList/CheckList.test.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/CheckList/CheckList.test.tsx b/src/components/CheckList/CheckList.test.tsx
index 9ead7cc45..ed4c7648f 100644
--- a/src/components/CheckList/CheckList.test.tsx
+++ b/src/components/CheckList/CheckList.test.tsx
@@ -285,9 +285,9 @@ test('loads status filter from localStorage', async () => {
       probes: [],
     })
   );
-  renderCheckList();
-  const additionalFilters = await screen.findByRole('button', { name: 'Additional Filters (1 active)', exact: false });
-  userEvent.click(additionalFilters);
+  const { user } = renderCheckList();
+  const additionalFilters = await screen.findByRole('button', { name: /Additional Filters \(1 active\)/i });
+  await user.click(additionalFilters);
   const statusFilter = await screen.findByTestId('check-status-filter');
   expect(statusFilter).toHaveValue('2');
 
@@ -306,9 +306,9 @@ test('loads type filter from localStorage', async () => {
       probes: [],
     })
   );
-  renderCheckList();
-  const additionalFilters = await screen.findByRole('button', { name: 'Additional Filters (1 active)', exact: false });
-  userEvent.click(additionalFilters);
+  const { user } = renderCheckList();
+  const additionalFilters = await screen.findByRole('button', { name: /Additional Filters \(1 active\)/i });
+  await user.click(additionalFilters);
   const typeFilter = await screen.findByTestId('check-type-filter');
   expect(typeFilter).toHaveValue('http');
 
@@ -327,9 +327,9 @@ test('loads labels from localStorage', async () => {
       probes: [],
     })
   );
-  renderCheckList();
-  const additionalFilters = await screen.findByRole('button', { name: 'Additional Filters (1 active)', exact: false });
-  userEvent.click(additionalFilters);
+  const { user } = renderCheckList();
+  const additionalFilters = await screen.findByRole('button', { name: /Additional Filters \(1 active\)/i });
+  await user.click(additionalFilters);
   const filterInput = await screen.findByTestId('check-label-filter');
   expect(filterInput).toHaveValue(['agreat: label']);