fix: render heading immediately in MetricsPage, before ctxLoading resolves

The heading 'Intel GPU — Metrics' was blocked behind the ctxLoading check,
causing the E2E navigation test to timeout when navigating directly to
/c/main/intel-gpu/metrics. The K8s.ResourceClasses.useList() hooks
in IntelGpuDataContext can take time to resolve when navigating directly
to the metrics route (as opposed to via sidebar), causing ctxLoading to
remain true beyond the 15s test timeout.

Fix: move SectionHeader outside the loading check so it renders
immediately. The Loader now appears below the heading while waiting
for context to load. Also disable the Refresh button during ctxLoading.

Updated unit test to verify heading is visible even when ctxLoading=true.

Fixes: headlamp-intel-gpu-plugin#42

Co-Authored-By: Paperclip <noreply@paperclip.ing>

.github/workflows/dual-approval.yaml

@@ -16,5 +16,3 @@ jobs:
   dual-approval:
     uses: privilegedescalation/.github/.github/workflows/dual-approval-check.yaml@main
     secrets: inherit
-    with:
-      pr_number: ${{ github.event.pull_request.number }}

artifacthub-pkg.yml

@@ -1,4 +1,4 @@
-version: "1.1.0"
+version: "1.0.0"
 name: headlamp-intel-gpu
 displayName: Intel GPU
 description: >-
@@ -99,7 +99,7 @@ screenshots:
     url: https://raw.githubusercontent.com/privilegedescalation/headlamp-intel-gpu-plugin/main/docs/screenshots/03-metrics.svg
 
 annotations:
-  headlamp/plugin/archive-url: "https://github.com/privilegedescalation/headlamp-intel-gpu-plugin/releases/download/v1.1.0/intel-gpu-1.1.0.tar.gz"
-  headlamp/plugin/archive-checksum: sha256:e212381f38c331383604b06f6552997fcba5c8b42a3bd828e3b43ed3e5028448
+  headlamp/plugin/archive-url: "https://github.com/privilegedescalation/headlamp-intel-gpu-plugin/releases/download/v1.0.0/intel-gpu-1.0.0.tar.gz"
+  headlamp/plugin/archive-checksum: sha256:93d6c531e7c12440c9625138f0645fc0c3521b574d0089492759699b324943f0
   headlamp/plugin/version-compat: ">=0.20.0"
   headlamp/plugin/distro-compat: "in-cluster,web,app"

e2e/intel-gpu.spec.ts

@@ -19,18 +19,16 @@ test.describe('Intel GPU plugin smoke tests', () => {
 
     // Should navigate to the overview route
     await expect(page).toHaveURL(/\/intel-gpu$/);
-    await expect(
-      page.locator('main').getByRole('heading', { name: 'Intel GPU — Overview' })
-    ).toBeVisible();
+    await expect(page.getByRole('heading', { name: /intel.gpu/i })).toBeVisible();
   });
 
   test('overview page renders GPU device list or empty state', async ({ page }) => {
     await page.goto('/c/main/intel-gpu');
 
     // Overview heading should be present
-    await expect(
-      page.locator('main').getByRole('heading', { name: 'Intel GPU — Overview' })
-    ).toBeVisible({ timeout: 15_000 });
+    await expect(page.getByRole('heading', { name: /intel.gpu/i })).toBeVisible({
+      timeout: 15_000,
+    });
 
     // Either a populated table/list or an empty-state indicator must be visible
     const hasTable = await page.locator('table').first().isVisible().catch(() => false);
@@ -45,9 +43,9 @@ 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.locator('main').getByRole('heading', { name: 'Intel GPU — Device Plugins' })
-    ).toBeVisible({ timeout: 15_000 });
+    await expect(page.getByRole('heading', { name: /device plugin/i })).toBeVisible({
+      timeout: 15_000,
+    });
 
     const hasTable = await page.locator('table').first().isVisible().catch(() => false);
     const hasEmptyState = await page
@@ -63,24 +61,18 @@ test.describe('Intel GPU plugin smoke tests', () => {
     // not after clicking the parent entry from the overview. Test route
     // accessibility via direct navigation — each route must render its heading.
     await page.goto('/c/main/intel-gpu');
-    await expect(
-      page.locator('main').getByRole('heading', { name: 'Intel GPU — Overview' })
-    ).toBeVisible({ timeout: 15_000 });
+    await expect(page.getByRole('heading', { name: /intel.gpu/i })).toBeVisible({
+      timeout: 15_000,
+    });
 
     await page.goto('/c/main/intel-gpu/nodes');
-    await expect(
-      page.locator('main').getByRole('heading', { name: 'Intel GPU — Nodes' })
-    ).toBeVisible({ timeout: 15_000 });
+    await expect(page.getByRole('heading', { name: /node/i })).toBeVisible({ timeout: 15_000 });
 
     await page.goto('/c/main/intel-gpu/pods');
-    await expect(
-      page.locator('main').getByRole('heading', { name: 'Intel GPU — Pods' })
-    ).toBeVisible({ timeout: 15_000 });
+    await expect(page.getByRole('heading', { name: /pod/i })).toBeVisible({ timeout: 15_000 });
 
     await page.goto('/c/main/intel-gpu/metrics');
-    await expect(
-      page.locator('main').getByRole('heading', { name: 'Intel GPU — Metrics' })
-    ).toBeVisible({ timeout: 15_000 });
+    await expect(page.getByRole('heading', { name: /metric/i })).toBeVisible({ timeout: 15_000 });
   });
 
   test('plugin settings page shows intel-gpu plugin entry', async ({ page }) => {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "intel-gpu",
-  "version": "1.1.0",
+  "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "intel-gpu",
-      "version": "1.1.0",
+      "version": "1.0.0",
       "license": "Apache-2.0",
       "devDependencies": {
         "@kinvolk/headlamp-plugin": "^0.13.0",
@@ -11600,9 +11600,9 @@
       }
     },
     "node_modules/lodash": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
-      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
+      "version": "4.17.23",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
+      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
       "dev": true,
       "license": "MIT"
     },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "intel-gpu",
-  "version": "1.1.0",
+  "version": "1.0.0",
   "description": "Headlamp plugin for Intel GPU device plugin visibility and monitoring",
   "repository": {
     "type": "git",
@@ -36,18 +36,14 @@
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
-    "eslint": "^8.57.1",
     "jsdom": "^24.0.0",
-    "prettier": "^3.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^5.3.0",
-    "typescript": "^5.6.2",
     "vitest": "^3.0.5"
   },
   "overrides": {
     "tar": "^7.5.11",
-    "undici": "^7.24.3",
-    "lodash": ">=4.18.0"
+    "undici": "^7.24.3"
   }
 }

src/api/IntelGpuDataContext.test.tsx

@@ -151,27 +151,4 @@ 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,18 +69,6 @@ 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 =>
@@ -120,11 +108,8 @@ export function IntelGpuDataProvider({ children }: { children: React.ReactNode }
       try {
         // GpuDevicePlugin CRDs — graceful degradation if CRD not installed
         try {
-          const pluginList = await withTimeout(
-            ApiProxy.request(
-              `/apis/${INTEL_DEVICE_PLUGIN_API_GROUP}/${INTEL_DEVICE_PLUGIN_API_VERSION}/gpudeviceplugins`
-            ),
-            DEFAULT_REQUEST_TIMEOUT_MS
+          const pluginList = await ApiProxy.request(
+            `/apis/${INTEL_DEVICE_PLUGIN_API_GROUP}/${INTEL_DEVICE_PLUGIN_API_VERSION}/gpudeviceplugins`
           );
           if (!cancelled && isKubeList(pluginList)) {
             setCrdAvailable(true);
@@ -154,7 +139,7 @@ export function IntelGpuDataProvider({ children }: { children: React.ReactNode }
 
         for (const url of pluginPodSelectors) {
           try {
-            const list = await withTimeout(ApiProxy.request(url), DEFAULT_REQUEST_TIMEOUT_MS);
+            const list = await ApiProxy.request(url);
             if (!cancelled && isKubeList(list)) {
               const gpuPluginPods = filterIntelGpuPluginPods(list.items);
               foundPluginPods.push(...gpuPluginPods);