frontend: hooks: fix useKubeObject to use standard websocket connection instead of multiplexed

sniok · sniok · commit f0d5d105509a · 2025-11-26T14:15:35.000-05:00
diff --git a/frontend/src/components/crd/CustomResourceDetails.stories.tsx b/frontend/src/components/crd/CustomResourceDetails.stories.tsx
@@ -40,8 +40,9 @@ export default {
             'http://localhost:4466/apis/my.phonyresources.io/v1/namespaces/mynamespace/mycustomresources/mycustomresource',
             () => HttpResponse.json(mockCRList[0])
           ),
-          http.get('http://localhost:4466/apis/my.phonyresources.io/v1/mycustomresources', () =>
-            HttpResponse.json({})
+          http.get(
+            'http://localhost:4466/apis/my.phonyresources.io/v1/namespaces/mynamespace/mycustomresources',
+            () => HttpResponse.json({})
           ),
           http.get(
             'http://localhost:4466/apis/my.phonyresources.io/v1/mycustomresources/nonexistentcustomresource',
diff --git a/frontend/src/components/cronjob/CronJobDetails.stories.tsx b/frontend/src/components/cronjob/CronJobDetails.stories.tsx
@@ -28,7 +28,9 @@ export default {
     msw: {
       handlers: {
         storyBase: [
-          http.get('http://localhost:4466/apis/batch/v1/cronjobs', () => HttpResponse.json({})),
+          http.get('http://localhost:4466/apis/batch/v1/namespaces/default/cronjobs', () =>
+            HttpResponse.error()
+          ),
           http.get('http://localhost:4466/api/v1/namespaces/default/events', () =>
             HttpResponse.json({
               kind: 'EventList',
diff --git a/frontend/src/components/endpointSlices/EndpointSliceDetails.stories.tsx b/frontend/src/components/endpointSlices/EndpointSliceDetails.stories.tsx
@@ -27,6 +27,10 @@ export default {
     msw: {
       handlers: {
         storyBase: [
+          http.get(
+            'http://localhost:4466/apis/discovery.k8s.io/v1/namespaces/my-namespace/endpointslices',
+            () => HttpResponse.error()
+          ),
           http.get('http://localhost:4466/apis/discovery.k8s.io/v1/endpointslices', () =>
             HttpResponse.error()
           ),
diff --git a/frontend/src/components/endpoints/EndpointDetails.stories.tsx b/frontend/src/components/endpoints/EndpointDetails.stories.tsx
@@ -27,7 +27,9 @@ export default {
     msw: {
       handlers: {
         storyBase: [
-          http.get('http://localhost:4466/api/v1/endpoints', () => HttpResponse.error()),
+          http.get('http://localhost:4466/api/v1/namespaces/my-namespace/endpoints', () =>
+            HttpResponse.error()
+          ),
           http.get('http://localhost:4466/api/v1/namespaces/my-namespace/events', () =>
             HttpResponse.error()
           ),
diff --git a/frontend/src/components/gateway/BackendTLSPolicyDetails.stories.tsx b/frontend/src/components/gateway/BackendTLSPolicyDetails.stories.tsx
@@ -35,6 +35,10 @@ export default {
       handlers: {
         story: [],
         storyBase: [
+          http.get(
+            'http://localhost:4466/apis/gateway.networking.k8s.io/v1alpha3/namespaces/default/backendtlspolicies',
+            () => HttpResponse.error()
+          ),
           http.get(
             'http://localhost:4466/apis/gateway.networking.k8s.io/v1alpha3/namespaces/default/backendtlspolicies/example-policy',
             () => HttpResponse.json(DEFAULT_BACKEND_TLS_POLICY)
diff --git a/frontend/src/components/gateway/BackendTrafficPolicyDetails.stories.tsx b/frontend/src/components/gateway/BackendTrafficPolicyDetails.stories.tsx
@@ -35,6 +35,10 @@ export default {
       handlers: {
         story: [],
         storyBase: [
+          http.get(
+            'http://localhost:4466/apis/gateway.networking.x-k8s.io/v1alpha1/namespaces/default/xbackendtrafficpolicies',
+            () => HttpResponse.error()
+          ),
           http.get(
             'http://localhost:4466/apis/gateway.networking.x-k8s.io/v1alpha1/namespaces/default/xbackendtrafficpolicies/example-traffic-policy',
             () => HttpResponse.json(DEFAULT_BACKEND_TRAFFIC_POLICY)
diff --git a/frontend/src/components/gateway/ReferenceGrantDetails.stories.tsx b/frontend/src/components/gateway/ReferenceGrantDetails.stories.tsx
@@ -39,7 +39,7 @@ export default {
         story: [],
         storyBase: [
           http.get(
-            'http://localhost:4466/apis/gateway.networking.k8s.io/v1beta1/referencegrants',
+            'http://localhost:4466/apis/gateway.networking.k8s.io/v1beta1/namespaces/default/referencegrants',
             () => HttpResponse.json({})
           ),
           http.get('http://localhost:4466/api/v1/namespaces/default/events', () =>
diff --git a/frontend/src/components/horizontalPodAutoscaler/HPADetails.stories.tsx b/frontend/src/components/horizontalPodAutoscaler/HPADetails.stories.tsx
@@ -134,8 +134,9 @@ export default {
     msw: {
       handlers: {
         storyBase: [
-          http.get('http://localhost:4466/apis/autoscaling/v2/horizontalpodautoscalers', () =>
-            HttpResponse.error()
+          http.get(
+            'http://localhost:4466/apis/autoscaling/v2/namespaces/my-namespace/horizontalpodautoscalers',
+            () => HttpResponse.error()
           ),
           http.get('http://localhost:4466/api/v1/namespaces/default/events', () =>
             HttpResponse.json({
diff --git a/frontend/src/components/networkpolicy/Details.stories.tsx b/frontend/src/components/networkpolicy/Details.stories.tsx
@@ -48,12 +48,14 @@ Default.parameters = {
           'http://localhost:4466/apis/networking.k8s.io/v1/namespaces/default/networkpolicies/allow-frontend-traffic',
           () => HttpResponse.json(NETWORK_POLICY_DETAIL)
         ),
-        http.get('http://localhost:4466/apis/networking.k8s.io/v1/networkpolicies', () =>
-          HttpResponse.json({
-            kind: 'NetworkPolicyList',
-            items: NETWORK_POLICY_ITEMS,
-            metadata: {},
-          })
+        http.get(
+          'http://localhost:4466/apis/networking.k8s.io/v1/namespaces/default/networkpolicies',
+          () =>
+            HttpResponse.json({
+              kind: 'NetworkPolicyList',
+              items: NETWORK_POLICY_ITEMS,
+              metadata: {},
+            })
         ),
         http.get('http://localhost:4466/api/v1/namespaces/default/events', () =>
           HttpResponse.json({
diff --git a/frontend/src/components/pod/PodDetails.stories.tsx b/frontend/src/components/pod/PodDetails.stories.tsx
@@ -109,6 +109,9 @@ Error.parameters = {
     handlers: {
       storyBase: null,
       story: [
+        http.get('http://localhost:4466/api/v1/namespaces/default/pods', () =>
+          HttpResponse.json({})
+        ),
         http.get('http://localhost:4466/api/v1/namespaces/default/pods/terminated', () =>
           HttpResponse.json(podList.find(pod => pod.metadata.name === 'terminated'))
         ),
diff --git a/frontend/src/components/podDisruptionBudget/pdbDetails.stories.tsx b/frontend/src/components/podDisruptionBudget/pdbDetails.stories.tsx
@@ -81,8 +81,9 @@ export default {
     msw: {
       handlers: {
         storyBase: [
-          http.get('http://localhost:4466/apis/policy/v1/poddisruptionbudgets', () =>
-            HttpResponse.error()
+          http.get(
+            'http://localhost:4466/apis/policy/v1/namespaces/my-namespace/poddisruptionbudgets',
+            () => HttpResponse.error()
           ),
         ],
       },
diff --git a/frontend/src/components/resourceQuota/resourceQuotaDetails.stories.tsx b/frontend/src/components/resourceQuota/resourceQuotaDetails.stories.tsx
@@ -69,7 +69,9 @@ export default {
     msw: {
       handlers: {
         storyBase: [
-          http.get('http://localhost:4466/api/v1/resourcequotas', () => HttpResponse.error()),
+          http.get('http://localhost:4466/api/v1/namespaces/my-namespace/resourcequotas', () =>
+            HttpResponse.error()
+          ),
           http.get('http://localhost:4466/api/v1/namespaces/test/events', () =>
             HttpResponse.error()
           ),
diff --git a/frontend/src/components/service/ServiceDetails.stories.tsx b/frontend/src/components/service/ServiceDetails.stories.tsx
@@ -150,6 +150,9 @@ Default.parameters = {
         http.get('http://localhost:4466/api/v1/namespaces/default/events', () =>
           HttpResponse.json({ kind: 'EventList', items: [], metadata: {} })
         ),
+        http.get('http://localhost:4466/api/v1/namespaces/default/services', () =>
+          HttpResponse.error()
+        ),
         http.get('http://localhost:4466/api/v1/namespaces/default/services/example-service', () =>
           HttpResponse.json(serviceMock)
         ),
@@ -182,6 +185,9 @@ ErrorWithEndpoints.parameters = {
         http.get('http://localhost:4466/api/v1/namespaces/default/events', () =>
           HttpResponse.json({ kind: 'EventList', items: [], metadata: {} })
         ),
+        http.get('http://localhost:4466/api/v1/namespaces/default/services', () =>
+          HttpResponse.error()
+        ),
         http.get('http://localhost:4466/api/v1/namespaces/default/services/example-service', () =>
           HttpResponse.json(serviceMock)
         ),
diff --git a/frontend/src/components/statefulset/Details.stories.tsx b/frontend/src/components/statefulset/Details.stories.tsx
@@ -100,6 +100,12 @@ export default {
     msw: {
       handlers: {
         storyBase: [
+          http.get('http://localhost:4466/apis/apps/v1/namespaces/default/statefulsets', () => {
+            return HttpResponse.json({
+              kind: 'StatefulSetList',
+              items: [],
+            });
+          }),
           http.get('http://localhost:4466/api/v1/namespaces/default/pods', () => {
             return HttpResponse.json({
               kind: 'PodList',
diff --git a/frontend/src/components/verticalPodAutoscaler/VPADetails.stories.tsx b/frontend/src/components/verticalPodAutoscaler/VPADetails.stories.tsx
@@ -135,8 +135,9 @@ export default {
     msw: {
       handlers: {
         storyBase: [
-          http.get('http://localhost:4466/apis/autoscaling.k8s.io/v1/verticalpodautoscalers', () =>
-            HttpResponse.error()
+          http.get(
+            'http://localhost:4466/apis/autoscaling.k8s.io/v1/namespaces/default/verticalpodautoscalers',
+            () => HttpResponse.error()
           ),
         ],
       },
diff --git a/frontend/src/lib/k8s/api/v2/hooks.ts b/frontend/src/lib/k8s/api/v2/hooks.ts
@@ -25,6 +25,8 @@ import type { KubeListUpdateEvent } from './KubeList';
 import { KubeObjectEndpoint } from './KubeObjectEndpoint';
 import { makeUrl } from './makeUrl';
 import { useWebSocket } from './multiplexer';
+import { getWebsocketMultiplexerEnabled } from './useKubeObjectList';
+import { useWebSockets } from './webSocket';
 
 export type QueryStatus = 'pending' | 'success' | 'error';
 
@@ -149,21 +151,51 @@ export function useKubeObject<K extends KubeObject>({
 
   const data: Instance | null = query.error ? null : query.data ?? null;
 
-  useWebSocket<KubeListUpdateEvent<K>>({
-    url: () =>
-      makeUrl([KubeObjectEndpoint.toUrl(endpoint!)], {
-        ...cleanedUpQueryParams,
-        watch: 1,
-        fieldSelector: `metadata.name=${name}`,
-      }),
-    enabled: !!endpoint && !!data,
-    cluster,
-    onMessage(update: KubeListUpdateEvent<K>) {
-      if (update.type !== 'ADDED' && update.object) {
-        client.setQueryData(queryKey, new kubeObjectClass(update.object));
-      }
-    },
-  });
+  const connectionsRequests = useMemo(() => {
+    if (!endpoint) return [];
+
+    return [
+      {
+        url: makeUrl([KubeObjectEndpoint.toUrl(endpoint!, namespace)], {
+          ...cleanedUpQueryParams,
+          watch: 1,
+          fieldSelector: `metadata.name=${name}`,
+        }),
+        cluster,
+        onMessage(update: KubeListUpdateEvent<K>) {
+          if (update.type !== 'ADDED' && update.object) {
+            client.setQueryData(queryKey, new kubeObjectClass(update.object));
+          }
+        },
+      },
+    ];
+  }, [endpoint]);
+
+  // Breaking rules of hooks here a little but
+  // getWebsocketMultiplexerEnabled is a feature toggle
+  // and not a variable so this `if` should never change during runtime
+  if (getWebsocketMultiplexerEnabled()) {
+    useWebSocket<KubeListUpdateEvent<K>>({
+      url: () =>
+        makeUrl([KubeObjectEndpoint.toUrl(endpoint!)], {
+          ...cleanedUpQueryParams,
+          watch: 1,
+          fieldSelector: `metadata.name=${name}`,
+        }),
+      enabled: !!endpoint && !!data,
+      cluster,
+      onMessage(update: KubeListUpdateEvent<K>) {
+        if (update.type !== 'ADDED' && update.object) {
+          client.setQueryData(queryKey, new kubeObjectClass(update.object));
+        }
+      },
+    });
+  } else {
+    useWebSockets({
+      enabled: !!endpoint && !!data,
+      connections: connectionsRequests,
+    });
+  }
 
   // @ts-ignore
   return {
