fix: combine E2E infrastructure fixes (selectors + metrics heading + timeout) (#45)

QA + CTO approved. CI + E2E passing. E2E test fix PR — UAT via automated suite. Merged by CEO.

e2e/intel-gpu.spec.ts

@@ -43,7 +43,7 @@ test.describe('Intel GPU plugin smoke tests', () => {
   test('device plugins page renders or shows empty state', async ({ page }) => {
     await page.goto('/c/main/intel-gpu/device-plugins');
 
-    await expect(page.getByRole('heading', { name: /device plugin/i })).toBeVisible({
+    await expect(page.getByRole('heading', { name: /Intel GPU — Device Plugins/i })).toBeVisible({
       timeout: 15_000,
     });
 
@@ -66,13 +66,13 @@ test.describe('Intel GPU plugin smoke tests', () => {
     });
 
     await page.goto('/c/main/intel-gpu/nodes');
-    await expect(page.getByRole('heading', { name: /node/i })).toBeVisible({ timeout: 15_000 });
+    await expect(page.getByRole('heading', { name: /Intel GPU — Nodes/i })).toBeVisible({ timeout: 15_000 });
 
     await page.goto('/c/main/intel-gpu/pods');
-    await expect(page.getByRole('heading', { name: /pod/i })).toBeVisible({ timeout: 15_000 });
+    await expect(page.getByRole('heading', { name: /Intel GPU — Pods/i })).toBeVisible({ timeout: 15_000 });
 
     await page.goto('/c/main/intel-gpu/metrics');
-    await expect(page.getByRole('heading', { name: /metric/i })).toBeVisible({ timeout: 15_000 });
+    await expect(page.getByRole('heading', { name: /Intel GPU — Metrics/i })).toBeVisible({ timeout: 15_000 });
   });
 
   test('plugin settings page shows intel-gpu plugin entry', async ({ page }) => {

src/api/IntelGpuDataContext.test.tsx

@@ -151,4 +151,27 @@ describe('IntelGpuDataProvider', () => {
       expect(callCountAfter).toBeGreaterThan(callCountBefore);
     });
   });
+
+  it('treats a hanging CRD request as unavailable after 2s timeout', async () => {
+    vi.useFakeTimers();
+    const nodeWrapper = { jsonData: {} };
+    vi.mocked(K8s.ResourceClasses.Node.useList).mockReturnValue([[nodeWrapper], null] as any);
+    vi.mocked(K8s.ResourceClasses.Pod.useList).mockReturnValue([[nodeWrapper], null] as any);
+    vi.mocked(ApiProxy.request)
+      .mockReturnValueOnce(new Promise(() => {}))
+      .mockResolvedValueOnce({ items: [] })
+      .mockResolvedValueOnce({ items: [] })
+      .mockResolvedValueOnce({ items: [] });
+
+    const { result } = renderHook(() => useIntelGpuContext(), { wrapper: Wrapper });
+
+    expect(result.current.loading).toBe(true);
+
+    vi.advanceTimersByTime(2000);
+    await act(async () => {});
+    expect(result.current.crdAvailable).toBe(false);
+    expect(result.current.loading).toBe(false);
+
+    vi.useRealTimers();
+  });
 });

src/api/IntelGpuDataContext.tsx

@@ -69,6 +69,18 @@ export function useIntelGpuContext(): IntelGpuContextValue {
 // Helpers
 // ---------------------------------------------------------------------------
 
+const DEFAULT_REQUEST_TIMEOUT_MS = 2_000;
+
+/** Wraps a promise with a timeout, rejecting if it doesn't settle within ms. */
+function withTimeout<T>(promise: Promise<T>, ms: number): Promise<T> {
+  return Promise.race([
+    promise,
+    new Promise<T>((_, reject) =>
+      setTimeout(() => reject(new Error(`Request timed out after ${ms}ms`)), ms)
+    ),
+  ]);
+}
+
 /** Extract raw Kubernetes JSON from Headlamp KubeObject wrappers. */
 const extractJsonData = (items: unknown[]): unknown[] =>
   items.map(item =>
@@ -108,8 +120,11 @@ export function IntelGpuDataProvider({ children }: { children: React.ReactNode }
       try {
         // GpuDevicePlugin CRDs — graceful degradation if CRD not installed
         try {
-          const pluginList = await ApiProxy.request(
-            `/apis/${INTEL_DEVICE_PLUGIN_API_GROUP}/${INTEL_DEVICE_PLUGIN_API_VERSION}/gpudeviceplugins`
+          const pluginList = await withTimeout(
+            ApiProxy.request(
+              `/apis/${INTEL_DEVICE_PLUGIN_API_GROUP}/${INTEL_DEVICE_PLUGIN_API_VERSION}/gpudeviceplugins`
+            ),
+            DEFAULT_REQUEST_TIMEOUT_MS
           );
           if (!cancelled && isKubeList(pluginList)) {
             setCrdAvailable(true);
@@ -139,7 +154,7 @@ export function IntelGpuDataProvider({ children }: { children: React.ReactNode }
 
         for (const url of pluginPodSelectors) {
           try {
-            const list = await ApiProxy.request(url);
+            const list = await withTimeout(ApiProxy.request(url), DEFAULT_REQUEST_TIMEOUT_MS);
             if (!cancelled && isKubeList(list)) {
               const gpuPluginPods = filterIntelGpuPluginPods(list.items);
               foundPluginPods.push(...gpuPluginPods);

src/components/MetricsPage.test.tsx

@@ -106,11 +106,13 @@ describe('MetricsPage', () => {
     vi.clearAllMocks();
   });
 
-  it('shows loader when ctxLoading=true', () => {
+  it('shows loader when ctxLoading=true but heading is visible immediately', () => {
     vi.mocked(useIntelGpuContext).mockReturnValue(makeContext({ loading: true }));
     // fetchGpuMetrics should never be called in loading state
     vi.mocked(fetchGpuMetrics).mockResolvedValue(null);
     render(<MetricsPage />);
+    // Heading renders immediately, loader appears below it while waiting for context
+    expect(screen.getByText('Intel GPU — Metrics')).toBeInTheDocument();
     expect(screen.getByTestId('loader')).toHaveTextContent('Loading Intel GPU data...');
   });
 

src/components/MetricsPage.tsx

@@ -230,10 +230,6 @@ export default function MetricsPage() {
     };
   }, [ctxLoading, fetchSeq]);
 
-  if (ctxLoading) {
-    return <Loader title="Loading Intel GPU data..." />;
-  }
-
   return (
     <>
       <div
@@ -247,7 +243,7 @@ export default function MetricsPage() {
         <SectionHeader title="Intel GPU — Metrics" />
         <button
           onClick={() => void doFetch()}
-          disabled={fetching}
+          disabled={fetching || ctxLoading}
           aria-label="Refresh metrics"
           style={{
             padding: '6px 16px',
@@ -255,15 +251,18 @@ export default function MetricsPage() {
             color: 'var(--mui-palette-primary-main, #0071c5)',
             border: '1px solid var(--mui-palette-primary-main, #0071c5)',
             borderRadius: '4px',
-            cursor: 'pointer',
+            cursor: fetching || ctxLoading ? 'not-allowed' : 'pointer',
             fontSize: '13px',
             fontWeight: 500,
+            opacity: fetching || ctxLoading ? 0.6 : 1,
           }}
         >
           {fetching ? 'Refreshing…' : 'Refresh'}
         </button>
       </div>
 
+      {ctxLoading && <Loader title="Loading Intel GPU data..." />}
+
       <MetricRequirements />
 
       {fetching && !metrics && <Loader title="Querying Prometheus for GPU metrics..." />}