chore: add a placeholder scripted checks scene (#653)

* chore: move scripted editor into the same flow as the other checks

* chore: add some tests

* chore: default script

* chore: update k6 to scripted in check list

* chore: add a placeholder scripted checks scene

src/scenes/MULTIHTTP/multiHttpScene.ts

@@ -60,12 +60,12 @@ export function getMultiHttpScene({ metrics, logs }: DashboardSceneAppConfig, ch
         {
           refId: 'A',
           expr: `sum by (name) (
-            probe_http_requests_failed_total{job="$job", instance="$instance"}
-          )
-          /
-          sum by (name) (
-            probe_http_requests_total{job="$job", instance="$instance"}
-          )`,
+						probe_http_requests_failed_total{job="$job", instance="$instance"}
+					)
+					/
+					sum by (name) (
+						probe_http_requests_total{job="$job", instance="$instance"}
+					)`,
           range: false,
           instant: true,
           editorMode: 'code',

src/scenes/SCRIPTED/scriptedScene.ts

@@ -1,6 +1,84 @@
-import { CheckType } from 'types';
+import {
+  EmbeddedScene,
+  SceneControlsSpacer,
+  SceneFlexItem,
+  SceneFlexLayout,
+  SceneRefreshPicker,
+  SceneTimePicker,
+  SceneTimeRange,
+  SceneVariableSet,
+  VariableValueSelectors,
+} from '@grafana/scenes';
+
+import { Check, CheckType, DashboardSceneAppConfig } from 'types';
+import { getReachabilityStat, getUptimeStat, getVariables } from 'scenes/Common';
+import { getAllLogs } from 'scenes/Common/allLogs';
+import { getEditButton } from 'scenes/Common/editButton';
 import { getEmptyScene } from 'scenes/Common/emptyScene';
+import { getAssertionLogsPanel } from 'scenes/MULTIHTTP/assertionLogs';
+import { getAssertionTable } from 'scenes/MULTIHTTP/assertionTable';
+import { getDistinctTargets } from 'scenes/MULTIHTTP/distinctTargets';
+import { getProbeDuration } from 'scenes/MULTIHTTP/probeDuration';
+
+export function getScriptedScene({ metrics, logs }: DashboardSceneAppConfig, checks: Check[] = []) {
+  return () => {
+    if (checks.length === 0) {
+      return getEmptyScene(CheckType.K6);
+    }
+    const timeRange = new SceneTimeRange({
+      from: 'now-6h',
+      to: 'now',
+    });
+    const { probe, job, instance } = getVariables(CheckType.K6, metrics, checks);
+    const variables = new SceneVariableSet({
+      variables: [probe, job, instance],
+    });
+
+    const reachability = getReachabilityStat(metrics);
+    const uptime = getUptimeStat(metrics);
 
-export function getScriptedScene() {
-  return getEmptyScene(CheckType.K6);
+    const distinctTargets = getDistinctTargets(metrics);
+    const probeDuration = getProbeDuration(metrics);
+    const editButton = getEditButton({ job, instance });
+    return new EmbeddedScene({
+      $timeRange: timeRange,
+      $variables: variables,
+      controls: [
+        new VariableValueSelectors({}),
+        new SceneControlsSpacer(),
+        editButton,
+        new SceneTimePicker({ isOnCanvas: true }),
+        new SceneRefreshPicker({
+          intervals: ['5s', '1m', '1h'],
+          isOnCanvas: true,
+          refresh: '1m',
+        }),
+      ],
+      body: new SceneFlexLayout({
+        direction: 'column',
+        children: [
+          new SceneFlexLayout({
+            direction: 'row',
+            height: 150,
+            children: [new SceneFlexItem({ body: uptime }), new SceneFlexItem({ body: reachability }), distinctTargets],
+          }),
+          new SceneFlexLayout({
+            direction: 'row',
+            height: 200,
+            children: [probeDuration],
+          }),
+          new SceneFlexLayout({
+            direction: 'row',
+            minHeight: 300,
+            children: [getAssertionTable(logs), getAssertionLogsPanel(logs)],
+          }),
+          new SceneFlexLayout({
+            direction: 'row',
+            minHeight: 300,
+            children: [getAllLogs(logs)],
+          }),
+        ],
+      }),
+    });
+  };
 }

src/scenes/dashboardSceneApp.ts

@@ -19,7 +19,7 @@ export function getDashboardSceneApp(
   includek6 = false,
   checks: Check[]
 ) {
-  const { http, ping, dns, tcp, traceroute, multihttp } = checks.reduce<Record<CheckType, Check[]>>(
+  const { http, ping, dns, tcp, traceroute, multihttp, k6 } = checks.reduce<Record<CheckType, Check[]>>(
     (acc, check) => {
       const type = checkType(check.settings);
       if (check.enabled) {
@@ -84,7 +84,7 @@ export function getDashboardSceneApp(
     const appPage = new SceneAppPage({
       title: 'SCRIPTED',
       url: `${PLUGIN_URL_PATH}${ROUTES.Scene}/k6`,
-      getScene: getScriptedScene,
+      getScene: getScriptedScene(config, k6),
     });
     tabs.push(appPage);
   }