From fa121a14b886950a435f5e09bec3b8f5bcd26f31 Mon Sep 17 00:00:00 2001 From: Galen Date: Wed, 26 Jun 2024 17:17:00 -0500 Subject: [PATCH] Revert "chore(routes): refactor to avoid require() of es module not supported error" This reverts commit 4733a35f0a2e83b1095a19e731909ebffce78c3a. --- src/Components/IndexScene/IndexScene.tsx | 2 +- src/Components/LogExplorationPage.tsx | 2 +- src/Components/Pages.tsx | 11 +- src/Components/ServiceScene/ServiceScene.tsx | 3 +- .../SelectServiceButton.tsx | 2 +- src/services/routes.ts | 99 ----------------- src/services/routing.ts | 101 ++++++++++++++++++ src/services/scenes.ts | 4 +- tests/exploreServices.spec.ts | 1 + 9 files changed, 117 insertions(+), 108 deletions(-) delete mode 100644 src/services/routes.ts diff --git a/src/Components/IndexScene/IndexScene.tsx b/src/Components/IndexScene/IndexScene.tsx index 6a82f80e2..e430c9b83 100644 --- a/src/Components/IndexScene/IndexScene.tsx +++ b/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'; diff --git a/src/Components/LogExplorationPage.tsx b/src/Components/LogExplorationPage.tsx index e01fa8882..d3b0891e7 100644 --- a/src/Components/LogExplorationPage.tsx +++ b/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/routes'; +import { SLUGS } from '../services/routing'; const getSceneApp = () => new SceneApp({ diff --git a/src/Components/Pages.tsx b/src/Components/Pages.tsx index 9b8f961eb..5e55a40ff 100644 --- a/src/Components/Pages.tsx +++ b/src/Components/Pages.tsx @@ -6,11 +6,18 @@ import { SceneRouteMatch, SceneTimeRange, } from '@grafana/scenes'; -import { PLUGIN_BASE_URL, prefixRoute } from '../services/routing'; +import { + DRILLDOWN_URL_KEYS, + PLUGIN_BASE_URL, + prefixRoute, + ROUTE_DEFINITIONS, + ROUTES, + SERVICE_URL_KEYS, + SLUGS, +} 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' }; diff --git a/src/Components/ServiceScene/ServiceScene.tsx b/src/Components/ServiceScene/ServiceScene.tsx index 0d15fd560..4d271e98d 100644 --- a/src/Components/ServiceScene/ServiceScene.tsx +++ b/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 { PLUGIN_ID } from 'services/routing'; +import { buildBreakdownUrl, buildServicesUrl, PLUGIN_ID, ROUTES, SLUGS } from 'services/routing'; import { getExplorationFor, getLokiDatasource } from 'services/scenes'; import { ALL_VARIABLE_VALUE, @@ -44,7 +44,6 @@ 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; diff --git a/src/Components/ServiceSelectionScene/SelectServiceButton.tsx b/src/Components/ServiceSelectionScene/SelectServiceButton.tsx index 468cfeb93..70c1f770b 100644 --- a/src/Components/ServiceSelectionScene/SelectServiceButton.tsx +++ b/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/routes'; +import { buildBreakdownUrl, ROUTES } from '../../services/routing'; export interface SelectServiceButtonState extends SceneObjectState { service: string; diff --git a/src/services/routes.ts b/src/services/routes.ts deleted file mode 100644 index 223eac557..000000000 --- a/src/services/routes.ts +++ /dev/null @@ -1,99 +0,0 @@ -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 = { - 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((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((acc, [key, value]) => { - if (SERVICE_URL_KEYS.includes(key)) { - acc[key] = value; - } - - return acc; - }, {}), - ...extraQueryParams, - }; -} diff --git a/src/services/routing.ts b/src/services/routing.ts index a60b1728c..53af49783 100644 --- a/src/services/routing.ts +++ b/src/services/routing.ts @@ -1,9 +1,110 @@ 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 = { + 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((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((acc, [key, value]) => { + if (SERVICE_URL_KEYS.includes(key)) { + acc[key] = value; + } + + return acc; + }, {}), + ...extraQueryParams, + }; +} diff --git a/src/services/scenes.ts b/src/services/scenes.ts index 6a2e7193f..5a3c5e4e5 100644 --- a/src/services/scenes.ts +++ b/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(ROUTES.explore(), values); + return urlUtil.renderUrl(EXPLORATIONS_ROUTE, values); } export function getDataSource(exploration: IndexScene) { diff --git a/tests/exploreServices.spec.ts b/tests/exploreServices.spec.ts index 8189b1c4a..a74e97fc7 100644 --- a/tests/exploreServices.spec.ts +++ b/tests/exploreServices.spec.ts @@ -1,5 +1,6 @@ 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;