add view for showing the associated gateways

console-extensions.json

@@ -13,5 +13,20 @@
       },
       "component": { "$codeRef": "GatewaySingleOverview" }
     }
+  },
+  {
+    "type": "console.tab/horizontalNav",
+    "properties": {
+      "model": {
+        "group": "gateway.networking.k8s.io",
+        "version": "v1",
+        "kind": "HTTPRoute"
+      },
+      "page": {
+        "name": "Attached",
+        "href": "attached"
+      },
+      "component": { "$codeRef": "HTTPRouteSingleOverview" }
+    }
   }
 ]

package.json

@@ -71,7 +71,8 @@
       "loadType": "Preload"
     },
     "exposedModules": {
-      "GatewaySingleOverview": "./components/GatewaySingleOverview"
+      "GatewaySingleOverview": "./components/GatewaySingleOverview",
+      "HTTPRouteSingleOverview": "./components/HTTPRouteSingleOverview"
     },
     "dependencies": {
       "@console/pluginAPI": "*"

src/components/AttachedResources.tsx

@@ -25,7 +25,10 @@
     HTTPRoute: {
       groupVersionKind: { group: 'gateway.networking.k8s.io', version: 'v1', kind: 'HTTPRoute' },
       isList: true,
-      // Search cluster-wide for HTTPRoutes that might reference this gateway
+    },
+    Gateway: {
+      groupVersionKind: { group: 'gateway.networking.k8s.io', version: 'v1', kind: 'Gateway' },
+      isList: true,
     },
   };
 
@@ -35,87 +38,64 @@
 
   const resourceGroup = resource.apiVersion.includes('/') ? resource.apiVersion.split('/')[0] : '';
 
-  const attachedRoutes = React.useMemo(() => {
-    let routesArray: K8sResourceKind[] = [];
-
-    // Process HTTPRoutes
-    const httpRoutes = watchedResources.HTTPRoute;
-    console.log('HTTPROUTES', httpRoutes);
-
-    if (httpRoutes?.loaded && !httpRoutes.loadError && httpRoutes.data) {
-      console.log('ALL HTTP ROUTES:', httpRoutes.data);
-      const matchingRoutes = (httpRoutes.data as K8sResourceKind[]).filter((route) => {
-        console.log('CHECKING ROUTE:', route.metadata.name);
-        console.log('ROUTE STATUS:', route.status);
-
-        const statusParents = route.status?.parents ?? [];
-        console.log('STATUS PARENTS FOR ROUTE', route.metadata.name, ':', statusParents);
-
-        // Also check spec.parentRefs as fallback for debugging
-        const specParents = route.spec?.parentRefs ?? [];
-        console.log('SPEC PARENTS FOR ROUTE', route.metadata.name, ':', specParents);
-
-        console.log('LOOKING FOR GATEWAY:', {
-          name: resource.metadata.name,
-          namespace: resource.metadata.namespace,
-          kind: resource.kind,
-          group: resourceGroup,
+  const attachedResources = React.useMemo(() => {
+    let results: K8sResourceKind[] = [];
+
+    const checkParentRef = (parentRef: any, targetResource: K8sResourceKind) => {
+      if (!parentRef) return false;
+
+      const refNamespace = parentRef.namespace ?? targetResource.metadata.namespace;
+      const refGroup = parentRef.group ?? 'gateway.networking.k8s.io';
+      const refKind = parentRef.kind ?? 'Gateway';
+
+      return (
+        parentRef.name === targetResource.metadata.name &&
+        refNamespace === targetResource.metadata.namespace &&
+        refGroup === resourceGroup &&
+        refKind === targetResource.kind
+      );
+    };
+
+    if (resource.kind === 'Gateway') {
+      const httpRoutes = watchedResources.HTTPRoute;
+      if (httpRoutes?.loaded && !httpRoutes.loadError && httpRoutes.data) {
+        const matchingRoutes = httpRoutes.data.filter((route) => {
+          const statusParents = route.status?.parents ?? [];
+          const specParents = route.spec?.parentRefs ?? [];
+
+          const statusMatch = statusParents.some((parent: any) =>
+            checkParentRef(parent.parentRef, resource),
+          );
+          const specMatch = specParents.some((parentRef: any) =>
+            checkParentRef(parentRef, resource),
+          );
+
+          return statusMatch || specMatch;
         });
+        results = results.concat(matchingRoutes);
+      }
+    }
 
-        // Check both status.parents and spec.parentRefs for matches
-        const checkParentRef = (parentRef: any) => {
-          if (!parentRef) return false;
-
-          const refNamespace = parentRef.namespace ?? resource.metadata.namespace;
-          const refGroup = parentRef.group ?? 'gateway.networking.k8s.io';
-          const refKind = parentRef.kind ?? 'Gateway';
-
-          const matches =
-            parentRef.name === resource.metadata.name &&
-            refNamespace === resource.metadata.namespace &&
-            refGroup === resourceGroup &&
-            refKind === resource.kind;
-
-          console.log('MATCH CHECK:', {
-            parentRef,
-            expected: {
-              name: resource.metadata.name,
-              namespace: resource.metadata.namespace,
-              group: resourceGroup,
-              kind: resource.kind,
-            },
-            actual: {
-              name: parentRef.name,
-              namespace: refNamespace,
-              group: refGroup,
-              kind: refKind,
-            },
-            matches,
+    if (resource.kind === 'HTTPRoute') {
+      const gateways = watchedResources.Gateway;
+      if (gateways?.loaded && !gateways.loadError && gateways.data) {
+        const matchingGateways = gateways.data.filter((gateway) => {
+          const specParents = resource.spec?.parentRefs ?? [];
+
+          return specParents.some((parentRef: any) => {
+            return (
+              parentRef.name === gateway.metadata.name &&
+              (parentRef.namespace ?? resource.metadata.namespace) === gateway.metadata.namespace &&
+              (parentRef.group ?? 'gateway.networking.k8s.io') === resourceGroup &&
+              (parentRef.kind ?? 'Gateway') === gateway.kind
+            );
           });
-
-          return matches;
-        };
-
-        // First check status.parents
-        const statusMatch = statusParents.some((parent: any) => {
-          console.log('CHECKING STATUS PARENT REF:', parent.parentRef);
-          return checkParentRef(parent.parentRef);
         });
-
-        // Also check spec.parentRefs as fallback
-        const specMatch = specParents.some((parentRef: any) => {
-          console.log('CHECKING SPEC PARENT REF:', parentRef);
-          return checkParentRef(parentRef);
-        });
-
-        return statusMatch || specMatch;
-      });
-      console.log('MATCHING ROUTES:', matchingRoutes);
-
-      routesArray = routesArray.concat(matchingRoutes);
+        results = results.concat(matchingGateways);
+      }
     }
 
-    return routesArray;
+    return results;
   }, [watchedResources, resource, resourceGroup]);
 
   const columns: TableColumn<K8sResourceKind>[] = [
@@ -200,21 +180,21 @@
           </Alert>
         </AlertGroup>
       )}
-      {attachedRoutes.length === 0 && allLoaded ? (
+      {attachedResources.length === 0 && allLoaded ? (
         <EmptyState
           titleText={
             <Title headingLevel="h4" size="lg">
-              {t('No attached routes found')}
+              {t('No attached resources found')}
             </Title>
           }
           icon={SearchIcon}
         >
-          <EmptyStateBody>{t('No route resources matched')}</EmptyStateBody>
+          <EmptyStateBody>{t('No matching resources found')}</EmptyStateBody>
         </EmptyState>
       ) : (
         <VirtualizedTable<K8sResourceKind>
-          data={attachedRoutes}
-          unfilteredData={attachedRoutes}
+          data={attachedResources}
+          unfilteredData={attachedResources}
           loaded={allLoaded}
           loadError={combinedLoadError}
           columns={columns}

src/components/GatewaySingleOverview.tsx

@@ -53,5 +53,4 @@ const GatewayPoliciesPage: React.FC = () => {
   );
 };
 
-
 export default GatewayPoliciesPage;

src/components/HTTPRouteSingleOverview.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router-dom';
+import { PageSection, Title } from '@patternfly/react-core';
+import {
+  useK8sWatchResources,
+  K8sResourceCommon,
+  useActiveNamespace,
+} from '@openshift-console/dynamic-plugin-sdk';
+
+import extractResourceNameFromURL from '../utils/nameFromPath';
+import { Helmet } from 'react-helmet';
+import AttachedResources from './AttachedResources';
+
+const HTTPRouteSingleOverview: React.FC = () => {
+  const { t } = useTranslation('plugin__gateway-api-console-plugin');
+  const [activeNamespace] = useActiveNamespace();
+  const location = useLocation();
+
+  const httpRouteName = extractResourceNameFromURL(location.pathname);
+  const resources = {
+    httpRoute: {
+      groupVersionKind: {
+        group: 'gateway.networking.k8s.io',
+        version: 'v1',
+        kind: 'HTTPRoute',
+      },
+      namespace: activeNamespace,
+      name: httpRouteName,
+      isList: false,
+    },
+  };
+
+  const watchedResources = useK8sWatchResources<{ httpRoute: K8sResourceCommon }>(resources);
+  const { loaded, loadError, data: httpRoute } = watchedResources.httpRoute;
+
+  return (
+    <>
+      <Helmet>
+        <title data-test="example-page-title">{t('Associated Gateways')}</title>
+      </Helmet>
+      <PageSection hasBodyWrapper={false}>
+        <Title headingLevel="h2">{t('Associated Gateways')}</Title>
+        {!loaded ? (
+          <div>Loading...</div>
+        ) : loadError ? (
+          <div>Error loading HTTPRoute: {loadError.message}</div>
+        ) : (
+          <AttachedResources resource={httpRoute} />
+        )}
+      </PageSection>
+    </>
+  );
+};
+export default HTTPRouteSingleOverview;