feat: migrate HTTP dashboard to react-scenes (#1079)

* feat: test scenes react

* fix: revert summary dashboard

I will be migrating HTTP scenes dashboard instead

* feat: migrate HTTP dashboard to scenes react

* fix: add annotations and edit check button

* fix: dashboard layout

* feat: override timepicker in ErrorRate panel

* fix: add timeseries info at panel level

This is used to demo how to use useTimeRange. Queries can be set depending on this value

* feat: add panel menu

* fix: edit button now takes only id as parameter

* fix: update yarn.lock after merging with main

* fix: typing errors after upgrading dependencies

* fix: remove type castings

* fix: mape error rate map not crash when loading

* fix: match scenes and react-scenes version to fix ts errors

* fix: remove old scenes code

---------

Co-authored-by: Chris Bedwell <christopher.bedwell@grafana.com>

Author: VikaCep

package.json

@@ -103,7 +103,8 @@
     "@grafana/data": "11.5.1",
     "@grafana/faro-web-sdk": "1.3.6",
     "@grafana/runtime": "11.5.1",
-    "@grafana/scenes": "5.1.0",
+    "@grafana/scenes": "5.42.0",
+    "@grafana/scenes-react": "5.42.0",
     "@grafana/schema": "11.5.1",
     "@grafana/ui": "11.5.1",
     "@hookform/resolvers": "3.3.4",

src/page/DashboardPage.tsx

@@ -14,7 +14,7 @@ import { useSMDS } from 'hooks/useSMDS';
 import { getBrowserScene } from 'scenes/BROWSER/browserScene';
 import { getDNSScene } from 'scenes/DNS';
 import { getGRPCScene } from 'scenes/GRPC/getGRPCScene';
-import { getHTTPScene } from 'scenes/HTTP';
+import { HttpDashboard } from 'scenes/HTTP/HttpDashboard';
 import { getPingScene } from 'scenes/PING/pingScene';
 import { getScriptedScene } from 'scenes/SCRIPTED';
 import { getTcpScene } from 'scenes/TCP/getTcpScene';
@@ -64,17 +64,6 @@ function DashboardPageContent() {
           ],
         });
       }
-      case CheckType.HTTP: {
-        return new SceneApp({
-          pages: [
-            new SceneAppPage({
-              title: check.job,
-              url,
-              getScene: getHTTPScene(config, check),
-            }),
-          ],
-        });
-      }
       case CheckType.Browser:
         return new SceneApp({
           pages: [
@@ -143,18 +132,26 @@ function DashboardPageContent() {
           ],
         });
       }
+
+      case CheckType.HTTP: {
+        return null;
+      }
     }
   }, [smDS, metricsDS, logsDS, check]);
 
   if (!isLoading && !check) {
     return <CheckNotFound />;
   }
 
-  if (!scene) {
-    return <Spinner />;
+  if (check && getCheckType(check.settings) === CheckType.HTTP) {
+    return <HttpDashboard check={check} />;
+  }
+
+  if (scene) {
+    return <scene.Component model={scene} />;
   }
 
-  return <scene.Component model={scene} />;
+  return <Spinner />;
 }
 
 export function DashboardPage() {

src/scenes/Common/editButton.tsx

@@ -11,7 +11,7 @@ interface Props {
   id: Check['id'];
 }
 
-function EditCheckButton({ id }: Props) {
+export function EditCheckButton({ id }: Props) {
   const { canWriteChecks } = getUserPermissions();
   const url = id ? `${generateRoutePath(ROUTES.EditCheck, { id })}` : undefined;
 

src/scenes/HTTP/ErrorLogs.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { VizConfigBuilders } from '@grafana/scenes';
+import { useQueryRunner, useTimeRange, VizPanel } from '@grafana/scenes-react';
+import { LogsDedupStrategy, LogsSortOrder } from '@grafana/schema';
+
+import { useLogsDS } from 'hooks/useLogsDS';
+
+import { useVizPanelMenu } from './useVizPanelMenu';
+
+export const ErrorLogs = () => {
+  const logsDS = useLogsDS();
+
+  const dataProvider = useQueryRunner({
+    queries: [
+      {
+        expr: '{probe=~"$probe", instance="$instance", job="$job", probe_success="0"}',
+        refId: 'A',
+      },
+    ],
+    datasource: logsDS,
+  });
+
+  const viz = VizConfigBuilders.logs()
+    .setOption('showTime', true)
+    .setOption('showLabels', true)
+    .setOption('showCommonLabels', false)
+    .setOption('wrapLogMessage', true)
+    .setOption('prettifyLogMessage', false)
+    .setOption('enableLogDetails', true)
+    .setOption('dedupStrategy', LogsDedupStrategy.none)
+    .setOption('sortOrder', LogsSortOrder.Descending)
+    .build();
+
+  const data = dataProvider.useState();
+  const [currentTimeRange] = useTimeRange();
+
+  const menu = useVizPanelMenu({
+    data,
+    viz,
+    currentTimeRange,
+    variables: ['job', 'probe', 'instance'],
+  });
+
+  return (
+    <VizPanel
+      title="Logs for failed checks: $probe ⮕ $job / $instance"
+      viz={viz}
+      dataProvider={dataProvider}
+      menu={menu}
+    />
+  );
+};

src/scenes/HTTP/ErrorRateMap.tsx

@@ -0,0 +1,267 @@
+import React from 'react';
+import { LoadingState } from '@grafana/data';
+import { VizConfigBuilders } from '@grafana/scenes';
+import { useDataTransformer, useQueryRunner, useTimeRange, VizPanel } from '@grafana/scenes-react';
+import { FrameGeometrySourceMode, ThresholdsMode } from '@grafana/schema';
+import { LoadingPlaceholder } from '@grafana/ui';
+
+import { useMetricsDS } from 'hooks/useMetricsDS';
+
+import { useVizPanelMenu } from './useVizPanelMenu';
+
+export const ErrorRateMap = ({ minStep }: { minStep: string }) => {
+  const metricsDS = useMetricsDS();
+
+  function getErrorMapQueries(minStep: string) {
+    return [
+      {
+        expr: `sum by (probe, geohash)
+        (
+          rate(probe_all_success_sum{instance="$instance", job="$job", probe=~"$probe"}[$__rate_interval])
+          *
+          on (instance, job, probe, config_version)
+          group_left(geohash)
+          max by (instance, job, probe, config_version, geohash)
+          (
+            sm_check_info{instance="$instance", job="$job"}
+          )
+        )`,
+        format: 'table',
+        interval: minStep,
+        instant: false,
+        legendFormat: 'numerator',
+        refId: 'A',
+        range: true,
+      },
+      {
+        refId: 'B',
+        expr: `sum by (probe, geohash)
+        (
+          rate(probe_all_success_count{instance="$instance", job="$job", probe=~"$probe"}[$__rate_interval])
+            *
+          on (instance, job, probe, config_version)
+          group_left(geohash)
+          max by (instance, job, probe, config_version, geohash)
+          (
+            sm_check_info{instance="$instance", job="$job"}
+          )
+        )`,
+        range: true,
+        interval: minStep,
+        instant: false,
+        hide: false,
+        legendFormat: 'denominator',
+        format: 'table',
+      },
+    ];
+  }
+
+  const dataProvider = useQueryRunner({
+    queries: getErrorMapQueries(minStep),
+    datasource: metricsDS,
+  });
+
+  const dataTransformer = useDataTransformer({
+    transformations: [
+      {
+        id: 'groupBy',
+        options: {
+          fields: {
+            Value: {
+              aggregations: ['sum'],
+              operation: 'aggregate',
+            },
+            'Value #A': {
+              aggregations: ['sum'],
+              operation: 'aggregate',
+            },
+            'Value #B': {
+              aggregations: ['sum'],
+              operation: 'aggregate',
+            },
+            geohash: {
+              aggregations: [],
+              operation: 'groupby',
+            },
+            probe: {
+              aggregations: [],
+              operation: 'groupby',
+            },
+            'probe 1': {
+              aggregations: [],
+              operation: null,
+            },
+            'probe 2': {
+              aggregations: [],
+              operation: null,
+            },
+          },
+        },
+      },
+      {
+        id: 'joinByField',
+        options: {
+          byField: 'probe',
+          mode: 'outerTabular',
+        },
+      },
+      {
+        id: 'calculateField',
+        options: {
+          alias: 'success rate',
+          binary: {
+            left: 'Value #A (sum)',
+            operator: '/',
+            right: 'Value #B (sum)',
+          },
+          mode: 'binary',
+          reduce: {
+            reducer: 'sum',
+          },
+        },
+      },
+      {
+        id: 'calculateField',
+        options: {
+          alias: 'Error rate',
+          binary: {
+            left: '1.00',
+            operator: '-',
+            right: 'success rate',
+          },
+          mode: 'binary',
+          reduce: {
+            reducer: 'sum',
+          },
+        },
+      },
+      {
+        id: 'organize',
+        options: {
+          excludeByName: {
+            'Value #A (sum)': true,
+            'Value #B (sum)': true,
+            geohash: false,
+            'probe 2': true,
+            'success rate': true,
+            'geohash 2': true,
+          },
+          indexByName: {},
+          renameByName: {
+            'error rate': '',
+            geohash: '',
+            'probe 1': 'Probe',
+            'geohash 1': 'geohash',
+          },
+          includeByName: {},
+        },
+      },
+    ],
+    data: dataProvider,
+  });
+
+  const viz = VizConfigBuilders.geomap()
+    .setUnit('percentunit')
+    .setOption('basemap', {
+      name: 'Basemap',
+      type: 'default',
+    })
+    .setOption('controls', {
+      mouseWheelZoom: false,
+      showAttribution: true,
+      showDebug: false,
+      showScale: false,
+      showZoom: true,
+    })
+    .setOption('layers', [
+      {
+        config: {
+          showLegend: false,
+          style: {
+            color: {
+              field: 'Error rate',
+              fixed: 'dark-green',
+            },
+            opacity: 0.4,
+            rotation: {
+              fixed: 0,
+              max: 360,
+              min: -360,
+              mode: 'mod',
+            },
+            size: {
+              field: 'Error rate',
+              fixed: 5,
+              max: 10,
+              min: 4,
+            },
+            symbol: {
+              fixed: 'img/icons/marker/circle.svg',
+              mode: 'fixed',
+            },
+            textConfig: {
+              fontSize: 12,
+              offsetX: 0,
+              offsetY: 0,
+              textAlign: 'center',
+              textBaseline: 'middle',
+            },
+          },
+        },
+        location: {
+          geohash: 'geohash',
+          mode: FrameGeometrySourceMode.Geohash,
+          latitude: 'Value',
+          longitude: 'Value',
+        },
+        name: 'Error rate',
+        type: 'markers',
+      },
+    ])
+    .setOption('view', {
+      id: 'zero',
+      lat: 0,
+      lon: 0,
+      zoom: 1,
+    })
+    .setColor({
+      mode: 'thresholds',
+    })
+    .setDecimals(2)
+    .setMin(0)
+    .setMax(0.1)
+    .setThresholds({
+      mode: ThresholdsMode.Absolute,
+      steps: [
+        {
+          color: 'green',
+          value: 0,
+        },
+        {
+          color: '#EAB839',
+          value: 0.01,
+        },
+        {
+          color: 'red',
+          value: 0.015,
+        },
+      ],
+    })
+    .build();
+
+  const data = dataProvider.useState();
+  const [currentTimeRange] = useTimeRange();
+
+  const menu = useVizPanelMenu({
+    data,
+    viz,
+    currentTimeRange,
+    variables: ['job', 'probe', 'instance'],
+  });
+
+  if (data?.data?.state === LoadingState.Loading) {
+    return <LoadingPlaceholder text="Loading..." />;
+  }
+
+  return <VizPanel menu={menu} title="Error rate by probe" viz={viz} dataProvider={dataTransformer} />;
+};