From 39a6d2e586f7c2fe7e6b55515ba17134bcc197ba Mon Sep 17 00:00:00 2001
From: Nick Richmond <5732000+NWRichmond@users.noreply.github.com>
Date: Wed, 5 Feb 2025 06:09:16 -0500
Subject: [PATCH] ExploreMetrics: Use redirect to route traffic to metrics
 drilldown app (#100098)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: drilldown app redirect

* chore: make copilot review happy, I guess 🤷
---
 .../features/trails/RedirectToDrilldownApp.tsx  | 17 +++++++++++++++++
 public/app/routes/routes.tsx                    |  7 +++++--
 2 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 public/app/features/trails/RedirectToDrilldownApp.tsx

diff --git a/public/app/features/trails/RedirectToDrilldownApp.tsx b/public/app/features/trails/RedirectToDrilldownApp.tsx
new file mode 100644
index 00000000000..0a4ff04e8d7
--- /dev/null
+++ b/public/app/features/trails/RedirectToDrilldownApp.tsx
@@ -0,0 +1,17 @@
+import { Navigate, useLocation, useParams } from 'react-router-dom-v5-compat';
+
+import { getRouteForAppPlugin } from 'app/features/plugins/routes';
+
+/**
+ * Navigate to the drilldown app with the remaining path parameters and search params
+ */
+const RedirectToDrilldownApp = () => {
+  const { '*': remainingPath } = useParams();
+  const location = useLocation();
+  const appPath = getRouteForAppPlugin('grafana-metricsdrilldown-app').path.replaceAll('*', '');
+  const newPath = `${appPath}${remainingPath}${location.search}`;
+
+  return <Navigate replace to={newPath} />;
+};
+
+export default RedirectToDrilldownApp;
diff --git a/public/app/routes/routes.tsx b/public/app/routes/routes.tsx
index ddadc2f40b7..839eb62ad85 100644
--- a/public/app/routes/routes.tsx
+++ b/public/app/routes/routes.tsx
@@ -15,7 +15,7 @@ import { getRoutes as getDataConnectionsRoutes } from 'app/features/connections/
 import { DATASOURCES_ROUTES } from 'app/features/datasources/constants';
 import { ConfigureIRM } from 'app/features/gops/configuration-tracker/components/ConfigureIRM';
 import { getRoutes as getPluginCatalogRoutes } from 'app/features/plugins/admin/routes';
-import { getAppPluginRoutes, getRouteForAppPlugin } from 'app/features/plugins/routes';
+import { getAppPluginRoutes } from 'app/features/plugins/routes';
 import { getProfileRoutes } from 'app/features/profile/routes';
 import { AccessControlAction, DashboardRoutes } from 'app/types';
 
@@ -518,7 +518,10 @@ export function getAppRoutes(): RouteDescriptor[] {
       roles: () => contextSrv.evaluatePermission([AccessControlAction.DataSourcesExplore]),
       ...(config.featureToggles.exploreMetricsUseExternalAppPlugin
         ? {
-            component: getRouteForAppPlugin('grafana-metricsdrilldown-app').component,
+            component: SafeDynamicImport(
+              () =>
+                import(/* webpackChunkName: "MetricsDrilldownRedirect"*/ 'app/features/trails/RedirectToDrilldownApp')
+            ),
           }
         : {
             chromeless: false,