frontend: Details: Make multi cluster aware

frontend/src/components/common/Resource/Resource.tsx

@@ -17,7 +17,7 @@ import React, { PropsWithChildren, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath, NavLinkProps, useLocation } from 'react-router-dom';
 import YAML from 'yaml';
-import { labelSelectorToQuery, ResourceClasses } from '../../../lib/k8s';
+import { labelSelectorToQuery, ResourceClasses, useClusterFromURLVar } from '../../../lib/k8s';
 import { ApiError } from '../../../lib/k8s/apiProxy';
 import { KubeCondition, KubeContainer, KubeContainerStatus } from '../../../lib/k8s/cluster';
 import { KubeEvent } from '../../../lib/k8s/event';
@@ -89,6 +89,8 @@ export interface DetailsGridProps<T extends KubeObjectClass>
   name: string;
   /** Namespace of the resource. If not provided, it's assumed the resource is not namespaced. */
   namespace?: string;
+  /** Cluster of the resource. If not provided, it's assumed single cluster mode. */
+  cluster?: string;
   /** Sections to show in the details grid (besides the default ones). */
   extraSections?:
     | ((item: InstanceType<T>) => boolean | DetailsViewSection[] | ReactNode[])
@@ -125,13 +127,15 @@ export function DetailsGrid<T extends KubeObjectClass>(props: DetailsGridProps<T
     state => state.detailsViewSection.detailsViewSectionsProcessors
   );
   const dispatchHeadlampEvent = useEventCallback();
+  const clusterFromURLVar = useClusterFromURLVar();
+  const cluster = props.cluster || clusterFromURLVar;
 
   // This component used to have a MainInfoSection with all these props passed to it, so we're
   // using them to accomplish the same behavior.
   const { extraInfo, actions, noDefaultActions, headerStyle, backLink, title, headerSection } =
     otherMainInfoSectionProps;
 
-  const [item, error] = resourceType.useGet(name, namespace) as [
+  const [item, error] = resourceType.useGet(name, namespace, { cluster }) as [
     InstanceType<T> | null,
     ApiError | null
   ];

frontend/src/lib/k8s/KubeObject.ts

@@ -126,7 +126,7 @@ export class KubeObject<T extends KubeObjectInterface | KubeEvent = any> {
       namespace: this.getNamespace(),
       name: this.getName(),
     };
-    const link = createRouteURL(this.detailsRoute, params);
+    const link = createRouteURL(this.detailsRoute, params, { cluster: this.cluster });
     return link;
   }
 

frontend/src/lib/k8s/index.ts

@@ -140,6 +140,17 @@ export function useClusterGroup(): string[] {
   return clusterGroup;
 }
 
+/**
+ * Use the cluster name from the URL query parameters if it's there.
+ *
+ * @returns the cluster name from the URL. If no cluster is defined in the URL, undefined is returned.
+ */
+export function useClusterFromURLVar(): string | undefined {
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
+  return searchParams.get('cluster') || undefined;
+}
+
 export function getVersion(clusterName: string = ''): Promise<StringDict> {
   return clusterRequest('/version', { cluster: clusterName || getCluster() });
 }

frontend/src/lib/router.tsx

@@ -850,7 +850,19 @@ export interface RouteURLProps {
   [prop: string]: any;
 }
 
-export function createRouteURL(routeName: string, params: RouteURLProps = {}) {
+/**
+ * Creates a URL for the given route, params and query parameters.
+ *
+ * @param routeName - The name of the route
+ * @param params - The optional parameters to use in the route.
+ * @param queryParams - The optional query parameters to use in the route.
+ * @returns the URL for the route as a string.
+ */
+export function createRouteURL(
+  routeName: string,
+  params: RouteURLProps = {},
+  queryParams: {} = {}
+): string {
   const storeRoutes = store.getState().routes.routes;
   const route = (storeRoutes && storeRoutes[routeName]) || getRoute(routeName);
 
@@ -880,7 +892,10 @@ export function createRouteURL(routeName: string, params: RouteURLProps = {}) {
   }
 
   const url = getRoutePath(route);
-  return generatePath(url, fullParams);
+  const fullURL = generatePath(url, fullParams);
+
+  const searchParams = new URLSearchParams(queryParams).toString();
+  return searchParams ? `${fullURL}?${searchParams}` : fullURL;
 }
 
 export function getDefaultRoutes() {

frontend/src/plugin/__snapshots__/pluginLib.snapshot

@@ -363,6 +363,7 @@
       "default": [Function],
     },
     "useCluster": [Function],
+    "useClusterFromURLVar": [Function],
     "useClusterGroup": [Function],
     "useClustersConf": [Function],
     "useClustersVersion": [Function],