chore(routes): refactor to avoid require() of es module not supported…

… error

src/Components/IndexScene/IndexScene.tsx

@@ -34,11 +34,11 @@ import { addLastUsedDataSourceToStorage, getLastUsedDataSourceFromStorage } from
 import { ServiceScene } from '../ServiceScene/ServiceScene';
 import { LayoutScene } from './LayoutScene';
 import { FilterOp } from 'services/filters';
-import { SLUGS } from '../../services/routing';
 import { getSlug } from '../Pages';
 import { ServiceSelectionScene } from '../ServiceSelectionScene/ServiceSelectionScene';
 import { LoadingPlaceholder } from '@grafana/ui';
 import { locationService } from '@grafana/runtime';
+import { SLUGS } from '../../services/routes';
 
 export type LogExplorationMode = 'service_selection' | 'service_details';
 

src/Components/LogExplorationPage.tsx

@@ -4,7 +4,7 @@ import { getUrlSyncManager, SceneApp, useSceneApp } from '@grafana/scenes';
 import { config } from '@grafana/runtime';
 import { Redirect } from 'react-router-dom';
 import { makeIndexPage, makeRedirectPage } from './Pages';
-import { SLUGS } from '../services/routing';
+import { SLUGS } from '../services/routes';
 
 const getSceneApp = () =>
   new SceneApp({

src/Components/Pages.tsx

@@ -6,18 +6,11 @@ import {
   SceneRouteMatch,
   SceneTimeRange,
 } from '@grafana/scenes';
-import {
-  DRILLDOWN_URL_KEYS,
-  PLUGIN_BASE_URL,
-  prefixRoute,
-  ROUTE_DEFINITIONS,
-  ROUTES,
-  SERVICE_URL_KEYS,
-  SLUGS,
-} from '../services/routing';
+import { PLUGIN_BASE_URL, prefixRoute } from '../services/routing';
 import { PageLayoutType } from '@grafana/data';
 import { IndexScene } from './IndexScene/IndexScene';
 import { locationService } from '@grafana/runtime';
+import { DRILLDOWN_URL_KEYS, ROUTE_DEFINITIONS, ROUTES, SERVICE_URL_KEYS, SLUGS } from '../services/routes';
 
 function getServicesScene() {
   const DEFAULT_TIME_RANGE = { from: 'now-15m', to: 'now' };

src/Components/ServiceScene/ServiceScene.tsx

@@ -23,7 +23,7 @@ import { reportAppInteraction, USER_EVENTS_ACTIONS, USER_EVENTS_PAGES } from 'se
 import { DetectedLabelsResponse, extractParserAndFieldsFromDataFrame } from 'services/fields';
 import { getQueryRunner } from 'services/panel';
 import { buildLokiQuery } from 'services/query';
-import { buildBreakdownUrl, buildServicesUrl, PLUGIN_ID, ROUTES, SLUGS } from 'services/routing';
+import { PLUGIN_ID } from 'services/routing';
 import { getExplorationFor, getLokiDatasource } from 'services/scenes';
 import {
   ALL_VARIABLE_VALUE,
@@ -44,6 +44,7 @@ import { testIds } from 'services/testIds';
 import { sortLabelsByCardinality } from 'services/filters';
 import { SERVICE_NAME } from 'Components/ServiceSelectionScene/ServiceSelectionScene';
 import { getSlug } from '../Pages';
+import { buildBreakdownUrl, buildServicesUrl, ROUTES, SLUGS } from '../../services/routes';
 
 export interface LokiPattern {
   pattern: string;

src/Components/ServiceSelectionScene/SelectServiceButton.tsx

@@ -15,7 +15,7 @@ import { SERVICE_NAME } from './ServiceSelectionScene';
 import { reportAppInteraction, USER_EVENTS_ACTIONS, USER_EVENTS_PAGES } from 'services/analytics';
 import { FilterOp } from 'services/filters';
 import { locationService } from '@grafana/runtime';
-import { buildBreakdownUrl, ROUTES } from '../../services/routing';
+import { buildBreakdownUrl, ROUTES } from '../../services/routes';
 
 export interface SelectServiceButtonState extends SceneObjectState {
   service: string;

src/services/routes.ts

@@ -0,0 +1,99 @@
+import { UrlQueryMap, urlUtil } from '@grafana/data';
+import {
+  VAR_DATASOURCE,
+  VAR_FIELD_GROUP_BY,
+  VAR_FIELDS,
+  VAR_FILTERS,
+  VAR_LABEL_GROUP_BY,
+  VAR_LINE_FILTER,
+  VAR_LOGS_FORMAT,
+  VAR_PATTERNS,
+} from './variables';
+import { prefixRoute } from './routing';
+
+export enum SLUGS {
+  explore = 'explore',
+  logs = 'logs',
+  labels = 'labels',
+  patterns = 'patterns',
+  fields = 'fields',
+}
+
+export function encodeParameter(parameter: string): string {
+  return encodeURIComponent(parameter.replace(/\//g, '---'));
+}
+
+export function decodeParameter(parameter: string): string {
+  return decodeURIComponent(parameter).replace(/---/g, '/');
+}
+
+export const ROUTES = {
+  explore: () => prefixRoute(SLUGS.explore),
+  logs: (service: string) => prefixRoute(`${SLUGS.explore}/service/${encodeParameter(service)}/${SLUGS.logs}`),
+  fields: (service: string) => prefixRoute(`${SLUGS.explore}/service/${encodeParameter(service)}/${SLUGS.fields}`),
+  patterns: (service: string) => prefixRoute(`${SLUGS.explore}/service/${encodeParameter(service)}/${SLUGS.patterns}`),
+  labels: (service: string) => prefixRoute(`${SLUGS.explore}/service/${encodeParameter(service)}/${SLUGS.labels}`),
+};
+export const ROUTE_DEFINITIONS: Record<keyof typeof SLUGS, string> = {
+  explore: prefixRoute(SLUGS.explore),
+  logs: prefixRoute(`${SLUGS.explore}/service/:service/${SLUGS.logs}`),
+  fields: prefixRoute(`${SLUGS.explore}/service/:service/${SLUGS.fields}`),
+  patterns: prefixRoute(`${SLUGS.explore}/service/:service/${SLUGS.patterns}`),
+  labels: prefixRoute(`${SLUGS.explore}/service/:service/${SLUGS.labels}`),
+};
+
+// For redirect back to service, we just want to keep datasource, and timerange
+export const SERVICE_URL_KEYS = ['from', 'to', `var-${VAR_DATASOURCE}`];
+//@todo why patterns and var-patterns?
+export const DRILLDOWN_URL_KEYS = [
+  'from',
+  'to',
+  'mode',
+  'urlColumns',
+  'visualizationType',
+  `selectedLine`,
+  VAR_PATTERNS,
+  `var-${VAR_PATTERNS}`,
+  `var-${VAR_DATASOURCE}`,
+  `var-${VAR_FILTERS}`,
+  `var-${VAR_FIELDS}`,
+  `var-${VAR_FIELD_GROUP_BY}`,
+  `var-${VAR_LABEL_GROUP_BY}`,
+  `var-${VAR_DATASOURCE}`,
+  `var-${VAR_LOGS_FORMAT}`,
+  `var-${VAR_LINE_FILTER}`,
+];
+
+export function buildBreakdownUrl(path: string, extraQueryParams?: UrlQueryMap): string {
+  return urlUtil.renderUrl(path, buildBreakdownRoute(extraQueryParams));
+}
+
+export function buildBreakdownRoute(extraQueryParams?: UrlQueryMap): UrlQueryMap {
+  return {
+    ...Object.entries(urlUtil.getUrlSearchParams()).reduce<UrlQueryMap>((acc, [key, value]) => {
+      if (DRILLDOWN_URL_KEYS.includes(key)) {
+        acc[key] = value;
+      }
+
+      return acc;
+    }, {}),
+    ...extraQueryParams,
+  };
+}
+
+export function buildServicesUrl(path: string, extraQueryParams?: UrlQueryMap): string {
+  return urlUtil.renderUrl(path, buildServicesRoute(extraQueryParams));
+}
+
+export function buildServicesRoute(extraQueryParams?: UrlQueryMap): UrlQueryMap {
+  return {
+    ...Object.entries(urlUtil.getUrlSearchParams()).reduce<UrlQueryMap>((acc, [key, value]) => {
+      if (SERVICE_URL_KEYS.includes(key)) {
+        acc[key] = value;
+      }
+
+      return acc;
+    }, {}),
+    ...extraQueryParams,
+  };
+}

src/services/routing.ts

@@ -1,110 +1,9 @@
 import pluginJson from '../plugin.json';
-import { UrlQueryMap, urlUtil } from '@grafana/data';
-import {
-  VAR_DATASOURCE,
-  VAR_FIELD_GROUP_BY,
-  VAR_FIELDS,
-  VAR_FILTERS,
-  VAR_LABEL_GROUP_BY,
-  VAR_LINE_FILTER,
-  VAR_LOGS_FORMAT,
-  VAR_PATTERNS,
-} from './variables';
 
 export const PLUGIN_ID = pluginJson.id;
 export const PLUGIN_BASE_URL = `/a/${PLUGIN_ID}`;
 
-export enum SLUGS {
-  explore = 'explore',
-  logs = 'logs',
-  labels = 'labels',
-  patterns = 'patterns',
-  fields = 'fields',
-}
-
-export function encodeParameter(parameter: string): string {
-  return encodeURIComponent(parameter.replace(/\//g, '---'));
-}
-
-export function decodeParameter(parameter: string): string {
-  return decodeURIComponent(parameter).replace(/---/g, '/');
-}
-
-export const ROUTES = {
-  explore: () => prefixRoute(SLUGS.explore),
-  logs: (service: string) => prefixRoute(`${SLUGS.explore}/service/${encodeParameter(service)}/${SLUGS.logs}`),
-  fields: (service: string) => prefixRoute(`${SLUGS.explore}/service/${encodeParameter(service)}/${SLUGS.fields}`),
-  patterns: (service: string) => prefixRoute(`${SLUGS.explore}/service/${encodeParameter(service)}/${SLUGS.patterns}`),
-  labels: (service: string) => prefixRoute(`${SLUGS.explore}/service/${encodeParameter(service)}/${SLUGS.labels}`),
-};
-
-export const ROUTE_DEFINITIONS: Record<keyof typeof SLUGS, string> = {
-  explore: prefixRoute(SLUGS.explore),
-  logs: prefixRoute(`${SLUGS.explore}/service/:service/${SLUGS.logs}`),
-  fields: prefixRoute(`${SLUGS.explore}/service/:service/${SLUGS.fields}`),
-  patterns: prefixRoute(`${SLUGS.explore}/service/:service/${SLUGS.patterns}`),
-  labels: prefixRoute(`${SLUGS.explore}/service/:service/${SLUGS.labels}`),
-};
-
-export const EXPLORATIONS_ROUTE = `${PLUGIN_BASE_URL}/${SLUGS.explore}`;
-
 // Prefixes the route with the base URL of the plugin
 export function prefixRoute(route: string): string {
   return `${PLUGIN_BASE_URL}/${route}`;
 }
-
-// For redirect back to service, we just want to keep datasource, and timerange
-export const SERVICE_URL_KEYS = ['from', 'to', `var-${VAR_DATASOURCE}`];
-//@todo why patterns and var-patterns?
-export const DRILLDOWN_URL_KEYS = [
-  'from',
-  'to',
-  'mode',
-  'urlColumns',
-  'visualizationType',
-  `selectedLine`,
-  VAR_PATTERNS,
-  `var-${VAR_PATTERNS}`,
-  `var-${VAR_DATASOURCE}`,
-  `var-${VAR_FILTERS}`,
-  `var-${VAR_FIELDS}`,
-  `var-${VAR_FIELD_GROUP_BY}`,
-  `var-${VAR_LABEL_GROUP_BY}`,
-  `var-${VAR_DATASOURCE}`,
-  `var-${VAR_LOGS_FORMAT}`,
-  `var-${VAR_LINE_FILTER}`,
-];
-
-export function buildBreakdownUrl(path: string, extraQueryParams?: UrlQueryMap): string {
-  return urlUtil.renderUrl(path, buildBreakdownRoute(extraQueryParams));
-}
-
-export function buildBreakdownRoute(extraQueryParams?: UrlQueryMap): UrlQueryMap {
-  return {
-    ...Object.entries(urlUtil.getUrlSearchParams()).reduce<UrlQueryMap>((acc, [key, value]) => {
-      if (DRILLDOWN_URL_KEYS.includes(key)) {
-        acc[key] = value;
-      }
-
-      return acc;
-    }, {}),
-    ...extraQueryParams,
-  };
-}
-
-export function buildServicesUrl(path: string, extraQueryParams?: UrlQueryMap): string {
-  return urlUtil.renderUrl(path, buildServicesRoute(extraQueryParams));
-}
-
-export function buildServicesRoute(extraQueryParams?: UrlQueryMap): UrlQueryMap {
-  return {
-    ...Object.entries(urlUtil.getUrlSearchParams()).reduce<UrlQueryMap>((acc, [key, value]) => {
-      if (SERVICE_URL_KEYS.includes(key)) {
-        acc[key] = value;
-      }
-
-      return acc;
-    }, {}),
-    ...extraQueryParams,
-  };
-}

src/services/scenes.ts

@@ -8,8 +8,8 @@ import {
   SceneObjectUrlValues,
 } from '@grafana/scenes';
 import { VAR_DATASOURCE_EXPR, LOG_STREAM_SELECTOR_EXPR } from './variables';
-import { EXPLORATIONS_ROUTE } from './routing';
 import { IndexScene } from 'Components/IndexScene/IndexScene';
+import { ROUTES } from './routes';
 
 export function getExplorationFor(model: SceneObject): IndexScene {
   return sceneGraph.getAncestor(model, IndexScene);
@@ -20,7 +20,7 @@ export function getUrlForExploration(exploration: IndexScene) {
 }
 
 export function getUrlForValues(values: SceneObjectUrlValues) {
-  return urlUtil.renderUrl(EXPLORATIONS_ROUTE, values);
+  return urlUtil.renderUrl(ROUTES.explore(), values);
 }
 
 export function getDataSource(exploration: IndexScene) {

tests/exploreServices.spec.ts

@@ -1,6 +1,5 @@
 import { test, expect } from '@grafana/plugin-e2e';
 import { ExplorePage } from './fixtures/explore';
-import {testIds} from "../src/services/testIds";
 
 test.describe('explore services page', () => {
   let explorePage: ExplorePage;