fix: empty endpoints are shown as Pending (#158)

defenseunicorns · Aug 7, 2024 · 08b96ad · 08b96ad
1 parent d523a64
commit 08b96ad
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 13 deletions.
diff --git a/ui/src/lib/components/Link/component.svelte b/ui/src/lib/components/Link/component.svelte
@@ -7,12 +7,16 @@
   export let text: string
 </script>
 
-<a
-  {href}
-  {target}
-  on:click|stopPropagation
-  rel="noopener noreferrer"
-  class="font-medium text-blue-600 dark:text-blue-500 hover:underline pr-4"
->
-  {text}
-</a>
+{#if href}
+  <a
+    {href}
+    {target}
+    on:click|stopPropagation
+    rel="noopener noreferrer"
+    class="font-medium text-blue-600 dark:text-blue-500 hover:underline pr-4"
+  >
+    {text}
+  </a>
+{:else}
+  <span class="dark:text-gray-400 mt-4 text-sm">{text}</span>
+{/if}
diff --git a/ui/src/lib/components/k8s/DataTable/component.svelte b/ui/src/lib/components/k8s/DataTable/component.svelte
@@ -250,9 +250,9 @@
                         {/each}
                       </ul>
                     {:else if modifier === 'link-external'}
-                      <Link href={value.href || value} text={value.text || value} target={'_blank'} />
+                      <Link href={value.href || ''} text={value.text || ''} target={'_blank'} />
                     {:else if modifier === 'link-internal'}
-                      <Link href={value.href || value} text={value.text || value} target={''} />
+                      <Link href={value.href || ''} text={value.text || ''} target={''} />
                     {:else if key === 'namespace'}
                       <button
                         on:click|stopPropagation={() => namespace.set(value)}

diff --git a/ui/src/lib/features/k8s/applications/endpoints/component.test.ts b/ui/src/lib/features/k8s/applications/endpoints/component.test.ts
@@ -1,9 +1,17 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: 2024-Present The UDS Authors
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { beforeEach, vi } from 'vitest'
 
-import { testK8sTableWithCustomColumns, testK8sTableWithDefaults } from '$features/k8s/test-helper'
+import type { ZarfPackage } from '$features/k8s/applications/packages/types'
+import {
+  expectEqualIgnoringFields,
+  MockResourceStore,
+  testK8sTableWithCustomColumns,
+  testK8sTableWithDefaults,
+} from '$features/k8s/test-helper'
+import type { ResourceWithTable } from '$features/k8s/types'
 import Component from './component.svelte'
 import { createStore } from './store'
 
@@ -29,4 +37,60 @@ suite('StatefulsetTable Component', () => {
     description,
     disableRowClick: true,
   })
+
+  vi.mock('../../store.ts', async (importOriginal) => {
+    const mockData = [
+      {
+        apiVersion: 'uds.dev/v1alpha1',
+        kind: 'Package',
+        metadata: {
+          creationTimestamp: '2021-09-29T20:00:00Z',
+          name: 'foo',
+          namespace: 'foo',
+        },
+        spec: {
+          network: {
+            expose: [
+              {
+                service: 'foo',
+                selector: {
+                  ' "app.kubernetes.io/name"': 'foo',
+                },
+                gateway: 'tenant',
+                host: 'foo',
+                port: 9898,
+              },
+            ],
+          },
+        },
+        status: {
+          phase: 'Pending',
+        },
+      },
+    ] as unknown as ZarfPackage[]
+
+    const original: Record<string, unknown> = await importOriginal()
+    return {
+      ...original,
+      ResourceStore: vi.fn().mockImplementation((url, transform) => new MockResourceStore(url, transform, mockData)),
+    }
+  })
+
+  const expectedTables = [
+    {
+      name: 'foo',
+      url: {
+        href: '',
+        sort: '',
+        text: 'Pending',
+      },
+      namespace: 'foo',
+      status: 'Pending',
+    },
+  ]
+
+  const store = createStore()
+  const start = store.start as unknown as () => ResourceWithTable<ZarfPackage, any>[]
+  expect(store.url).toEqual('/api/v1/resources/configs/uds-packages?dense=true')
+  expectEqualIgnoringFields(start()[0].table, expectedTables[0] as unknown, ['creationTimestamp'])
 })
diff --git a/ui/src/lib/features/k8s/applications/endpoints/store.ts b/ui/src/lib/features/k8s/applications/endpoints/store.ts
@@ -26,6 +26,9 @@ export function createStore(): ResourceStoreInterface<Resource, Row> {
   const url = `/api/v1/resources/configs/uds-packages?dense=true`
 
   const endpointBuilder = (r: Resource, e: Expose) => {
+    if (r.status?.phase === 'Pending') {
+      return { href: '', sort: '', text: 'Pending' }
+    }
     const url = r.status?.endpoints?.find((ep) => ep.includes(`${e.host}.`)) ?? ''
     return {
       href: `https://${url}`,

diff --git a/ui/src/lib/features/k8s/configs/uds-packages/links/component.svelte b/ui/src/lib/features/k8s/configs/uds-packages/links/component.svelte
@@ -1,3 +1,6 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2024-Present The UDS Authors -->
+
 <script lang="ts">
   import { Link } from '$components'
 

diff --git a/ui/src/lib/features/k8s/test-helper.ts b/ui/src/lib/features/k8s/test-helper.ts
@@ -18,7 +18,7 @@ export function testK8sTableWithDefaults(Component: ComponentType, props: Record
 
     render(Component)
 
-    // Ensure name and ooltip desc aren't empty
+    // Ensure name and tooltip desc aren't empty
     const name: string = props.name as string
     expect(name).toBeTruthy()
     const description: string = props.description as string