openshift · openshift-merge-bot · Apr 22, 2025 · Apr 16, 2025
diff --git a/web/console-extensions.json b/web/console-extensions.json
@@ -1,12 +1,4 @@
 [
-  {
-    "type": "console.page/route",
-    "properties": {
-      "exact": false,
-      "path": "/observe/traces",
-      "component": { "$codeRef": "TracingUI" }
-    }
-  },
   {
     "type": "console.navigation/href",
     "properties": {
@@ -16,5 +8,21 @@
       "perspective": "admin",
       "section": "observe"
     }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": true,
+      "path": "/observe/traces",
+      "component": { "$codeRef": "TracesPage" }
+    }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": true,
+      "path": "/observe/traces/:traceId",
+      "component": { "$codeRef": "TraceDetailPage" }
+    }
   }
 ]
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -46,8 +46,7 @@
     "react-dom": "^17.0.1",
     "react-helmet-async": "^1.0.0",
     "react-i18next": "^11.8.11",
-    "react-router": "5.3.x",
-    "react-router-dom": "5.3.x",
+    "react-router-dom-v5-compat": "^6.30.0",
     "style-loader": "^3.3.1",
     "stylelint": "^15.3.0",
     "stylelint-config-standard": "^31.0.0",
@@ -64,7 +63,8 @@
     "displayName": "Distributed Tracing Plugin",
     "description": "This plugin adds a distributed tracing UI to the Openshift console.",
     "exposedModules": {
-      "TracingUI": "./TracingUI"
+      "TracesPage": "./pages/TracesPage/TracesPage",
+      "TraceDetailPage": "./pages/TraceDetailPage"
     },
     "dependencies": {
       "@console/pluginAPI": "*"

diff --git a/web/src/TracingUI.tsx b/web/src/TracingUI.tsx
diff --git a/web/src/pages/TraceDetailPage.tsx b/web/src/pages/TraceDetailPage.tsx
@@ -11,7 +11,7 @@ import {
 } from '@patternfly/react-core';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
-import { Link, useLocation, useParams } from 'react-router-dom';
+import { Link, useLocation, useParams } from 'react-router-dom-v5-compat';
 import { TracingGanttChart } from '@perses-dev/panels-plugin';
 import {
   PersesDashboardWrapper,
@@ -22,19 +22,15 @@ import {
 import { TraceAttributeValue } from '@perses-dev/core';
 import { useDataQueries } from '@perses-dev/plugin-system';
 import { useTempoInstance } from '../hooks/useTempoInstance';
+import { QueryParamProvider } from 'use-query-params';
+import { ReactRouterAdapter } from '../react_router_adapter';
 
-interface RouteParams {
-  traceId: string;
-}
-
-export function TraceDetailPage() {
+export default function TraceDetailPage() {
   const { t } = useTranslation('plugin__distributed-tracing-console-plugin');
-  const { traceId } = useParams<RouteParams>();
-  const [tempo] = useTempoInstance();
-  const location = useLocation();
+  const { traceId } = useParams();
 
   return (
-    <>
+    <QueryParamProvider adapter={ReactRouterAdapter}>
       <HelmetProvider>
         <Helmet>
           <title>
@@ -43,45 +39,56 @@ export function TraceDetailPage() {
         </Helmet>
       </HelmetProvider>
       <Page>
-        <PageSection variant="light">
-          <Stack>
-            <Breadcrumb>
-              <BreadcrumbItem>
-                <Link to={`/observe/traces${location.search}`}>{t('Traces')}</Link>
-              </BreadcrumbItem>
-              <BreadcrumbItem isActive>{t('Trace details')}</BreadcrumbItem>
-            </Breadcrumb>
-
-            <PersesWrapper>
-              <PersesDashboardWrapper>
-                <PersesTempoDatasourceWrapper
-                  tempo={tempo}
-                  queries={[{ kind: 'TempoTraceQuery', spec: { query: traceId } }]}
-                >
-                  <Title headingLevel="h1">
-                    <TraceTitle />
-                  </Title>
-                  <Divider className="pf-v5-u-my-md" />
-                  <StackItem isFilled>
-                    <TraceQueryPanelWrapper>
-                      <TracingGanttChart.PanelComponent
-                        spec={{ visual: { palette: { mode: 'categorical' } } }}
-                        attributeLinks={attributeLinks}
-                      />
-                    </TraceQueryPanelWrapper>
-                  </StackItem>
-                </PersesTempoDatasourceWrapper>
-              </PersesDashboardWrapper>
-            </PersesWrapper>
-          </Stack>
-        </PageSection>
+        <TraceDetailPageBody />
       </Page>
-    </>
+    </QueryParamProvider>
+  );
+}
+
+function TraceDetailPageBody() {
+  const { t } = useTranslation('plugin__distributed-tracing-console-plugin');
+  const { traceId } = useParams();
+  const [tempo] = useTempoInstance();
+  const location = useLocation();
+
+  return (
+    <PageSection variant="light">
+      <Stack>
+        <Breadcrumb>
+          <BreadcrumbItem>
+            <Link to={`/observe/traces${location.search}`}>{t('Traces')}</Link>
+          </BreadcrumbItem>
+          <BreadcrumbItem isActive>{t('Trace details')}</BreadcrumbItem>
+        </Breadcrumb>
+
+        <PersesWrapper>
+          <PersesDashboardWrapper>
+            <PersesTempoDatasourceWrapper
+              tempo={tempo}
+              queries={[{ kind: 'TempoTraceQuery', spec: { query: traceId } }]}
+            >
+              <Title headingLevel="h1">
+                <TraceTitle />
+              </Title>
+              <Divider className="pf-v5-u-my-md" />
+              <StackItem isFilled>
+                <TraceQueryPanelWrapper>
+                  <TracingGanttChart.PanelComponent
+                    spec={{ visual: { palette: { mode: 'categorical' } } }}
+                    attributeLinks={attributeLinks}
+                  />
+                </TraceQueryPanelWrapper>
+              </StackItem>
+            </PersesTempoDatasourceWrapper>
+          </PersesDashboardWrapper>
+        </PersesWrapper>
+      </Stack>
+    </PageSection>
   );
 }
 
 function TraceTitle() {
-  const { traceId } = useParams<RouteParams>();
+  const { traceId } = useParams();
   const { queryResults } = useDataQueries('TraceQuery');
   const trace = queryResults[0]?.data?.trace;
 

diff --git a/web/src/pages/TracesPage/ScatterPlot.tsx b/web/src/pages/TracesPage/ScatterPlot.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 import {
   Bullseye,
   Button,
@@ -12,21 +12,18 @@ import { TraceQueryPanelWrapper } from '../../components/PersesWrapper';
 import { ScatterChart } from '@perses-dev/panels-plugin';
 import { ExpandIcon, CompressIcon } from '@patternfly/react-icons';
 import { useRefWidth } from '../../components/console/utils/ref-width-hook';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { linkToTraceDetailPage } from '../../links';
 
 export function ScatterPlot() {
   const { t } = useTranslation('plugin__distributed-tracing-console-plugin');
-  const history = useHistory();
+  const navigate = useNavigate();
   const [isVisible, setVisible] = useState(true);
   const [ref, width] = useRefWidth();
 
-  const clickHandler = useCallback(
-    (data: { traceId: string }) => {
-      history.push(linkToTraceDetailPage(data.traceId));
-    },
-    [history],
-  );
+  const clickHandler = (data: { traceId: string }) => {
+    navigate(linkToTraceDetailPage(data.traceId));
+  };
 
   const noResults = (
     <Bullseye>

diff --git a/web/src/pages/TracesPage/TracesPage.tsx b/web/src/pages/TracesPage/TracesPage.tsx
@@ -25,7 +25,9 @@ import { useTempoInstance } from '../../hooks/useTempoInstance';
 import { ErrorAlert } from '../../components/ErrorAlert';
 import { LoadingState } from '../../components/LoadingState';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
+import { QueryParamProvider } from 'use-query-params';
+import { ReactRouterAdapter } from '../../react_router_adapter';
 
 const installOperatorLink =
   '/operatorhub/all-namespaces?keyword=Tempo&details-item=tempo-product-redhat-operators-openshift-marketplace';
@@ -36,11 +38,11 @@ const createTempoMonolithicLink =
 const viewInstallationDocsLink =
   'https://docs.redhat.com/en/documentation/openshift_container_platform/latest/html/distributed_tracing/distributed-tracing-platform-tempo';
 
-export function TracesPage() {
+export default function TracesPage() {
   const { t } = useTranslation('plugin__distributed-tracing-console-plugin');
 
   return (
-    <>
+    <QueryParamProvider adapter={ReactRouterAdapter}>
       <HelmetProvider>
         <Helmet>
           <title>{t('Tracing')}</title>
@@ -49,7 +51,7 @@ export function TracesPage() {
       <Page>
         <TracesPageBody />
       </Page>
-    </>
+    </QueryParamProvider>
   );
 }
 

diff --git a/web/src/react_router_adapter.ts b/web/src/react_router_adapter.ts
@@ -0,0 +1,13 @@
+import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
+import { QueryParamAdapterComponent } from 'use-query-params';
+
+export const ReactRouterAdapter: QueryParamAdapterComponent = ({ children }) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  return children({
+    location,
+    push: ({ search, state }) => navigate({ search }, { state }),
+    replace: ({ search, state }) => navigate({ search }, { replace: true, state }),
+  });
+};