Scenes: Updating to v6

.config/webpack/webpack.config.ts

@@ -68,7 +68,6 @@ const config = async (env): Promise<Configuration> => {
       'redux',
       'rxjs',
       'react-router',
-      'react-router-dom',
       'd3',
       'angular',
       /^@grafana\/ui/i,

.cprc.json

@@ -1,6 +1,6 @@
 {
   "features": {
     "bundleGrafanaUI": false,
-    "useReactRouterV6": false
+    "useReactRouterV6": true
   }
 }

package.json

@@ -65,7 +65,6 @@
     "@types/jest": "^29.5.0",
     "@types/lodash": "^4.14.194",
     "@types/node": "^20.8.7",
-    "@types/react-router-dom": "^5.2.0",
     "@types/react-scroll-sync": "^0.9.0",
     "@types/react-table": "^7.7.20",
     "@types/testing-library__jest-dom": "5.14.8",
@@ -120,7 +119,7 @@
     "@grafana/data": "^11.6.0",
     "@grafana/lezer-logql": "^0.2.7",
     "@grafana/runtime": "^11.6.0",
-    "@grafana/scenes": "5.41.1",
+    "@grafana/scenes": "^6.9.0",
     "@grafana/ui": "^11.6.0",
     "@hello-pangea/dnd": "^16.6.0",
     "@lezer/common": "^1.2.1",
@@ -129,13 +128,13 @@
     "re2js": "^1.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.22.0",
     "rxjs": "7.8.1",
     "tslib": "2.5.3",
     "uuid": "^10.0.0"
   },
   "resolutions": {
-    "**/fast-loops": "^1.1.4"
+    "react-router-dom": "^6.22.0"
   },
   "packageManager": "[email protected]"
 }

playwright.config.ts

@@ -1,7 +1,7 @@
 import type { PluginOptions } from '@grafana/plugin-e2e';
 import { defineConfig, devices } from '@playwright/test';
 import { dirname } from 'node:path';
-import {E2ESubPath} from "./tests/fixtures/explore";
+import { E2ESubPath } from './tests/fixtures/explore';
 
 const pluginE2eAuth = `${dirname(require.resolve('@grafana/plugin-e2e'))}/auth`;
 
@@ -31,14 +31,12 @@ export default defineConfig<PluginOptions>({
     /* Base URL to use in actions like `await page.goto('/')`. */
     baseURL: `http://localhost:3001${E2ESubPath}`,
 
-
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
-
     // Turn on when debugging local tests
     // video: {
     //   mode: 'on',
-    // }
+    // },
   },
   expect: { timeout: 15000 },
 

src/Components/LogExplorationPage.tsx

@@ -2,15 +2,15 @@ import React, { useEffect } from 'react';
 
 import { SceneApp, useSceneApp } from '@grafana/scenes';
 import { config } from '@grafana/runtime';
-import { Redirect } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
 import { makeIndexPage, makeRedirectPage } from './Pages';
 import { initializeMetadataService } from '../services/metadata';
 
 const getSceneApp = () =>
   new SceneApp({
     pages: [makeIndexPage(), makeRedirectPage()],
     urlSyncOptions: {
-      createBrowserHistorySteps: false,
+      createBrowserHistorySteps: true,
       updateUrlOnInit: true,
     },
   });
@@ -31,7 +31,7 @@ function LogExplorationView() {
   const userPermissions = config.bootData.user.permissions;
   const canUseApp = userPermissions?.['grafana-lokiexplore-app:read'] || userPermissions?.['datasources:explore'];
   if (!canUseApp) {
-    return <Redirect to="/" />;
+    return <Navigate to="/" replace />;
   }
 
   if (!isInitialized) {

src/Components/Pages.tsx

@@ -50,7 +50,7 @@ export function makeIndexPage() {
     url: prefixRoute(PageSlugs.explore),
     layout: PageLayoutType.Custom,
     preserveUrlKeys: SERVICE_URL_KEYS,
-    routePath: prefixRoute(PageSlugs.explore),
+    routePath: `${PageSlugs.explore}/*`,
     getScene: (routeMatch) => getServicesScene(routeMatch),
     drilldowns: [
       {
@@ -122,6 +122,7 @@ export function makeBreakdownPage(
     title: capitalizeFirstLetter(slug),
     layout: PageLayoutType.Custom,
     url: ROUTES[slug](labelValue, labelName),
+    routePath: ROUTE_DEFINITIONS[slug],
     preserveUrlKeys: DRILLDOWN_URL_KEYS,
     getParentPage: () => parent,
     getScene: (routeMatch) => getServicesScene(routeMatch),
@@ -150,6 +151,7 @@ export function makeBreakdownValuePage(
     title: capitalizeFirstLetter(breakdownLabel),
     layout: PageLayoutType.Custom,
     url: SUB_ROUTES[slug](labelValue, labelName, breakdownLabel),
+    routePath: CHILD_ROUTE_DEFINITIONS[slug],
     preserveUrlKeys: DRILLDOWN_URL_KEYS,
     getParentPage: () => parent,
     getScene: (routeMatch) => getServicesScene(routeMatch),

src/Components/ServiceScene/LogsPanelScene.tsx

@@ -307,7 +307,6 @@ export class LogsPanelScene extends SceneObjectBase<LogsPanelSceneState> {
       .setOption('enableInfiniteScrolling', true)
       .setOption('onNewLogsReceived', this.updateVisibleRange)
       .setOption('logRowMenuIconsAfter', [<CopyLinkButton onClick={this.handleShareLogLineClick} key={0} />])
-
       .setHeaderActions(
         new LogOptionsScene({ visualizationType, onChangeVisualizationType: parentModel.setVisualizationType })
       )

src/services/CustomConstantVariable.ts

@@ -2,7 +2,7 @@ import { Observable, of } from 'rxjs';
 import {
   MultiValueVariable,
   MultiValueVariableState,
-  renderSelectForVariable,
+  MultiOrSingleValueSelect,
   SceneComponentProps,
   VariableGetOptionsArgs,
   VariableValueOption,
@@ -29,8 +29,7 @@ export class CustomConstantVariable extends MultiValueVariable<CustomConstantVar
   public getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]> {
     return of(this.state.options);
   }
-
   public static Component = ({ model }: SceneComponentProps<MultiValueVariable>) => {
-    return renderSelectForVariable(model);
+    return MultiOrSingleValueSelect({ model });
   };
 }

src/services/LogsSceneQueryRunner.ts

@@ -13,6 +13,6 @@ export class LogsSceneQueryRunner extends SceneQueryRunner {
 
     // @todo can we make runWithTimeRange protected? (https://github.com/grafana/scenes/pull/866)
     // Hack to call private method
-    this['runWithTimeRange'](timeRange);
+    this['runWithTimeRangeAndScopes'](timeRange);
   }
 }

src/services/logqlMatchers.ts

@@ -108,7 +108,7 @@ function parseLabelFilters(query: string, filter: IndexedLabelFilter[]) {
     if (!identifierPosition || identifierPosition.length === 0) {
       continue;
     }
-    
+
     const valuePosition = getAllPositionsInNodeByType(matcher, String);
     const operator = query.substring(identifierPosition[0].to, valuePosition[0].from);
     const key = identifierPosition[0].getExpression(query);

src/services/routing.ts

@@ -65,16 +65,16 @@ export const SUB_ROUTES = {
 };
 
 export const ROUTE_DEFINITIONS: Record<keyof typeof PageSlugs, string> = {
-  explore: prefixRoute(PageSlugs.explore),
-  logs: prefixRoute(`${PageSlugs.explore}/:labelName/:labelValue/${PageSlugs.logs}`),
-  fields: prefixRoute(`${PageSlugs.explore}/:labelName/:labelValue/${PageSlugs.fields}`),
-  patterns: prefixRoute(`${PageSlugs.explore}/:labelName/:labelValue/${PageSlugs.patterns}`),
-  labels: prefixRoute(`${PageSlugs.explore}/:labelName/:labelValue/${PageSlugs.labels}`),
+  explore: `${PageSlugs.explore}/*`,
+  logs: `:labelName/:labelValue/${PageSlugs.logs}`,
+  fields: `:labelName/:labelValue/${PageSlugs.fields}`,
+  patterns: `:labelName/:labelValue/${PageSlugs.patterns}`,
+  labels: `:labelName/:labelValue/${PageSlugs.labels}`,
 };
 
 export const CHILD_ROUTE_DEFINITIONS: Record<keyof typeof ValueSlugs, string> = {
-  field: prefixRoute(`${PageSlugs.explore}/:labelName/:labelValue/${ValueSlugs.field}/:breakdownLabel`),
-  label: prefixRoute(`${PageSlugs.explore}/:labelName/:labelValue/${ValueSlugs.label}/:breakdownLabel`),
+  field: `:labelName/:labelValue/${ValueSlugs.field}/:breakdownLabel`,
+  label: `:labelName/:labelValue/${ValueSlugs.label}/:breakdownLabel`,
 };
 
 export const EXPLORATIONS_ROUTE = `${PLUGIN_BASE_URL}/${PageSlugs.explore}`;