Add scripted checks (#647)

* chore: add a scripted checks page * chore: add new check routing * chore: stub in the code editor * chore: update type defs * chore: add script editor * chore: fix up types * chore: add probe options * chore: wip for switching context * chore: submit editor scripts * chore: fix some imports, adjust jest config * chore: fix jset config * chore: move check fetching to a top level context * chore: update tests to handle checks context
grafana · Nov 15, 2023 · 4017ad2 · 4017ad2
1 parent 4130e44
commit 4017ad2
Show file tree

Hide file tree

Showing 52 changed files with 2,055 additions and 187 deletions.
diff --git a/dev/custom.ini b/dev/custom.ini
@@ -799,6 +799,7 @@ homepage=true
 topnav=true
 multi-http=true
 synthetics-scenes=true
+scripted-checks=true
 
 [navigation.app_standalone_pages]
 # WORKS

diff --git a/jest.config.js b/jest.config.js
@@ -10,10 +10,26 @@ module.exports = {
   setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect', ...(config.setupFilesAfterEnv || [])],
   moduleNameMapper: {
     ...config.moduleNameMapper,
+    '^lodash-es$': 'lodash',
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|md)$':
       '<rootDir>/src/test/fileMock.js',
+    '^!raw-loader!*': '<rootDir>/src/test/rawLoaderMock.js',
   },
   // testTimeout: 30000,
   // Inform jest to only transform specific node_module packages.
-  transformIgnorePatterns: [nodeModulesToTransform([...grafanaESModules, 'yaml', '@grafana/schema'])],
+  transform: {
+    ...config.transform,
+    '^.+\\.mjs$': ['@swc/jest'],
+  },
+  transformIgnorePatterns: [
+    nodeModulesToTransform([
+      ...grafanaESModules,
+      'yaml',
+      '@grafana/schema',
+      'har-to-k6',
+      'nanoid',
+      'prettier/esm',
+      'constrained-editor-plugin',
+    ]),
+  ],
 };
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
     "@types/ip-address": "^7.0.0",
     "@types/is-base64": "^1.1.0",
     "@types/jest": "^29.5.0",
+    "@types/k6": "^0.47.1",
     "@types/lodash": "^4.14.194",
     "@types/node": "^18.15.11",
     "@types/react-router-dom": "^5.3.3",
@@ -74,11 +75,13 @@
     "jest-environment-jsdom-fifteen": "^1.0.2",
     "pa11y": "^6.1.1",
     "prettier": "^2.8.7",
+    "raw-loader": "^4.0.2",
     "release-it": "^14.8.0",
     "replace-in-file-webpack-plugin": "^1.0.6",
     "sass": "1.63.2",
     "sass-loader": "13.3.1",
     "style-loader": "3.3.3",
+    "styled-components": "^6.1.0",
     "swc-loader": "^0.2.3",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.2.0",
@@ -93,11 +96,13 @@
     "@emotion/css": "^11.1.3",
     "@grafana/data": "10.1.4",
     "@grafana/faro-web-sdk": "1.2.1",
+    "@grafana/k6-test-builder": "^0.8.6",
     "@grafana/runtime": "10.1.4",
     "@grafana/scenes": "1.21.0",
     "@grafana/schema": "10.1.4",
     "@grafana/ui": "10.1.4",
     "@popperjs/core": "^2.9.2",
+    "constrained-editor-plugin": "^1.3.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "ip-address": "^7.1.0",
     "is-base64": "^1.1.0",
@@ -109,6 +114,7 @@
     "react-popper": "^2.2.5",
     "react-router-dom": "^5.2.0",
     "react-simple-maps": "^2.3.0",
+    "sortablejs": "^1.15.0",
     "valid-url": "^1.0.9",
     "yaml": "^2.2.2"
   },

diff --git a/src/__mocks__/raw-loader.js b/src/__mocks__/raw-loader.js
@@ -0,0 +1,3 @@
+module.exports = {
+  process: (content) => 'module.exports = ' + JSON.stringify(content),
+};
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -7,6 +7,7 @@ import { InstanceProvider } from 'components/InstanceProvider';
 import { Routing } from 'components/Routing';
 
 import { CheckInfoContextProvider } from './CheckInfoContextProvider';
+import { ChecksContextProvider } from './ChecksContextProvider';
 import { FeatureFlagProvider } from './FeatureFlagProvider';
 
 export class App extends PureComponent<AppRootProps<GlobalSettings>> {
@@ -19,10 +20,12 @@ export class App extends PureComponent<AppRootProps<GlobalSettings>> {
           logsInstanceName={meta.jsonData?.logs?.grafanaName}
           meta={meta}
         >
-          <CheckInfoContextProvider>
-            <Routing {...this.props} />
-            <DashboardUpdateModal />
-          </CheckInfoContextProvider>
+          <ChecksContextProvider>
+            <CheckInfoContextProvider>
+              <Routing {...this.props} />
+              <DashboardUpdateModal />
+            </CheckInfoContextProvider>
+          </ChecksContextProvider>
         </InstanceProvider>
       </FeatureFlagProvider>
     );

diff --git a/src/components/BulkEditModal/BulkEditModal.test.tsx b/src/components/BulkEditModal/BulkEditModal.test.tsx
@@ -90,7 +90,7 @@ const renderBulkEditModal = (action: 'add' | 'remove' | null, selectedChecks: ()
   const instance = createInstance();
 
   return render(
-    <SuccessRateContextProvider checks={[]}>
+    <SuccessRateContextProvider>
       <BulkEditModal
         onDismiss={onDismiss}
         onSuccess={onSuccess}

diff --git a/src/components/CheckEditor/CheckEditor.tsx b/src/components/CheckEditor/CheckEditor.tsx
@@ -39,7 +39,7 @@ import { CheckSettings } from './CheckSettings';
 import { ProbeOptions } from './ProbeOptions';
 
 interface Props {
-  checks?: Check[];
+  checks: Check[];
   onReturn: (reload: boolean) => void;
 }
 
@@ -52,7 +52,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
   `,
 });
 
-export const CheckEditor = ({ checks, onReturn }: Props) => {
+export const CheckEditor = ({ onReturn, checks }: Props) => {
   const {
     instance: { api },
   } = useContext(InstanceContext);
@@ -169,7 +169,6 @@ export const CheckEditor = ({ checks, onReturn }: Props) => {
               checkType={checkType}
               timeout={check?.timeout ?? fallbackCheck(checkType).timeout}
               frequency={check?.frequency ?? fallbackCheck(checkType).frequency}
-              probes={check?.probes ?? fallbackCheck(checkType).probes}
             />
             <HorizontalCheckboxField
               name="publishAdvancedMetrics"

diff --git a/src/components/CheckEditor/CheckEditorExisting.test.tsx b/src/components/CheckEditor/CheckEditorExisting.test.tsx
@@ -31,12 +31,13 @@ beforeEach(() => jest.resetAllMocks());
 const onReturn = jest.fn();
 
 const renderExistingCheckEditor = async (route: string) => {
-  const res = render(<CheckEditor onReturn={onReturn} checks={BASIC_CHECK_LIST} />, {
-    route: `${PLUGIN_URL_PATH}${ROUTES.Checks}/edit/:id`,
-    path: `${PLUGIN_URL_PATH}${ROUTES.Checks}${route}`,
-  });
+  const res = waitFor(() =>
+    render(<CheckEditor onReturn={onReturn} checks={BASIC_CHECK_LIST} />, {
+      route: `${PLUGIN_URL_PATH}${ROUTES.Checks}/edit/:id`,
+      path: `${PLUGIN_URL_PATH}${ROUTES.Checks}${route}`,
+    })
+  );
 
-  await waitFor(() => expect(screen.getByText('Probe options')).toBeInTheDocument());
   return res;
 };
 

diff --git a/src/components/CheckEditor/CheckEditorNew.test.tsx b/src/components/CheckEditor/CheckEditorNew.test.tsx
@@ -24,7 +24,7 @@ beforeEach(() => jest.resetAllMocks());
 const onReturn = jest.fn();
 
 const renderNewCheckEditor = async (checkType?: CheckType) => {
-  const res = render(<CheckEditor onReturn={onReturn} />, {
+  const res = render(<CheckEditor onReturn={onReturn} checks={[]} />, {
     route: `${PLUGIN_URL_PATH}${ROUTES.Checks}/new/:checkType`,
     path: `${PLUGIN_URL_PATH}${ROUTES.Checks}/new/${checkType}`,
   });

diff --git a/src/components/CheckEditor/CheckSettings.tsx b/src/components/CheckEditor/CheckSettings.tsx
@@ -31,5 +31,8 @@ export const CheckSettings: FC<Props> = ({ isEditor, typeOfCheck }) => {
     case CheckType.MULTI_HTTP: {
       throw new Error('Invalid check type for this location');
     }
+    case CheckType.K6: {
+      throw new Error('Invalid check type for this location');
+    }
   }
 };
diff --git a/src/components/CheckEditor/ProbeOptions.tsx b/src/components/CheckEditor/ProbeOptions.tsx
@@ -14,7 +14,6 @@ interface Props {
   isEditor: boolean;
   timeout: number;
   frequency: number;
-  probes: number[];
   checkType: CheckType;
 }
 
@@ -58,7 +57,7 @@ function getTimeoutBounds(checkType: CheckType) {
   };
 }
 
-export const ProbeOptions = ({ frequency, timeout, isEditor, probes, checkType }: Props) => {
+export const ProbeOptions = ({ frequency, timeout, isEditor, checkType }: Props) => {
   const [availableProbes, setAvailableProbes] = useState<Probe[]>([]);
   const {
     control,
@@ -94,7 +93,7 @@ export const ProbeOptions = ({ frequency, timeout, isEditor, probes, checkType }
         render={({ field }) => (
           <CheckProbes
             {...field}
-            probes={probes}
+            probes={field.value}
             availableProbes={availableProbes}
             isEditor={isEditor}
             invalid={errors.probes}
@@ -109,7 +108,7 @@ export const ProbeOptions = ({ frequency, timeout, isEditor, probes, checkType }
         invalid={Boolean(errors.frequency)}
         error={errors.frequency?.message}
       >
-        {checkType === CheckType.Traceroute ? (
+        {checkType === CheckType.Traceroute || checkType === CheckType.K6 ? (
           // This is just a placeholder for now, the frequency for traceroute checks is hardcoded in the submit
           <Input value={120} prefix="Every" suffix="seconds" width={20} />
         ) : (