chore(ui): add status colors for event type in events table (#422)

Co-authored-by: UncleGedd <42304551+UncleGedd@users.noreply.github.com>

ui/src/lib/components/k8s/Event/EventsOverviewWidget.svelte

@@ -3,7 +3,6 @@
 
   import type { KubernetesObject } from '@kubernetes/client-node'
   import { goto } from '$app/navigation'
-  import { getColorAndStatus } from '$features/k8s/helpers'
   import { type ResourceStoreInterface } from '$features/k8s/types'
   import { type Columns } from '$lib/features/k8s/events/store'
   import { ChevronRight, Information, Search } from 'carbon-icons-svelte'
@@ -36,20 +35,6 @@
 
     return () => stop()
   })
-
-  const calculateTypeClass = (key: string, rowData: string): string => {
-    let color: string = ''
-
-    if (key === 'type' && rowData === 'Normal') {
-      color = getColorAndStatus('Logs', 'Normal')
-    }
-
-    if (key === 'type' && rowData === 'Warning') {
-      color = getColorAndStatus('Logs', 'Warning')
-    }
-
-    return color
-  }
 </script>
 
 <div class="events">
@@ -116,9 +101,15 @@
           {#each columns as [key, style]}
             <!-- Check object to avoid issues with `false` values -->
             {@const value = Object.hasOwn(row.table, key) ? row.table[key] : ''}
-            <span class={`${style} ${calculateTypeClass(key, row.table[key])}`}>
-              {value.text || (value === 0 ? '0' : value) || '-'}
-            </span>
+            {#if value.component}
+              <span class={style}>
+                <svelte:component this={value.component} {...value.props} />
+              </span>
+            {:else}
+              <span class={style}>
+                {value.text || (value === 0 ? '0' : value) || '-'}
+              </span>
+            {/if}
           {/each}
         </div>
       {/each}

ui/src/lib/components/k8s/Status/component.svelte

@@ -2,12 +2,12 @@
 <!-- SPDX-FileCopyrightText: 2024-Present The UDS Authors -->
 
 <script lang="ts">
-  import { getColorAndStatus } from '$lib/features/k8s/helpers'
+  import { getColorForStatus } from '$lib/features/k8s/helpers'
 
   export let type
   export let status
 
-  $: statusClass = getColorAndStatus(type, status)
+  $: statusClass = getColorForStatus(type, status)
 </script>
 
 {#if status}

ui/src/lib/features/k8s/events/component.test.ts

@@ -80,7 +80,7 @@ suite('EventTable Component', () => {
       object_kind: 'Pod',
       object_name: 'pepr-uds-core-watcher-8495d97876-xvbml',
       reason: 'Pulling',
-      type: 'Normal',
+      type: { component: {}, props: { type: 'Logs', status: 'Normal' } },
       count: 1,
       message: 'Pulling image "127.0.0.1:31999/defenseunicorns/pepr/controller:v0.32.7-zarf-804409620"',
     },
@@ -90,5 +90,5 @@ suite('EventTable Component', () => {
   const start = store.start as unknown as () => ResourceWithTable<CoreV1Event, any>[]
   expect(store.url).toEqual(`/api/v1/resources/events?dense=true`)
   // ignore creationTimestamp because age is not calculated at this point and added to the table
-  expectEqualIgnoringFields(start()[0].table, expectedTables[0] as unknown, ['creationTimestamp'])
+  expectEqualIgnoringFields(start()[0].table, expectedTables[0] as unknown, ['creationTimestamp', 'type.component'])
 })

ui/src/lib/features/k8s/events/store.ts

@@ -2,16 +2,22 @@
 // SPDX-FileCopyrightText: 2024-Present The UDS Authors
 
 import type { CoreV1Event as Resource } from '@kubernetes/client-node'
+import Status from '$components/k8s/Status/component.svelte'
 import { ResourceStore, transformResource } from '$features/k8s/store'
-import { type ColumnWrapper, type CommonRow, type ResourceStoreInterface } from '$features/k8s/types'
+import {
+  type ColumnWrapper,
+  type CommonRow,
+  type K8StatusMapping,
+  type ResourceStoreInterface,
+} from '$features/k8s/types'
 
 export interface Row extends CommonRow {
   count: number
   message: string
   object_kind: string
   object_name: string
   reason: string
-  type: string
+  type: { component: typeof Status; props: { type: keyof K8StatusMapping; status: string } }
 }
 
 export type Columns = ColumnWrapper<Row>
@@ -26,7 +32,7 @@ export function createStore(): ResourceStoreInterface<Resource, Row> {
     object_kind: r.involvedObject?.kind ?? '',
     object_name: r.involvedObject?.name ?? '',
     reason: r.reason ?? '',
-    type: r.type ?? '',
+    type: { component: Status, props: { type: 'Logs', status: r.type ?? '' } },
     // A bit of a hack, but use the last seen timestamp to track age
     creationTimestamp: new Date(r.metadata.creationTimestamp ?? ''),
   }))

ui/src/lib/features/k8s/helpers.ts

@@ -74,7 +74,7 @@ const k8StatusMapping: K8StatusMapping = {
 }
 
 // Function to get the color and status for a specific type and status
-export const getColorAndStatus = <T extends keyof K8StatusMapping>(type: T, status: keyof K8StatusMapping[T]) => {
+export const getColorForStatus = <T extends keyof K8StatusMapping>(type: T, status: keyof K8StatusMapping[T]) => {
   return (k8StatusMapping[type][status] as { color: string }).color || 'Unknown'
 }
 

ui/src/lib/features/k8s/storage/persistentvolumeclaims/status/component.svelte

@@ -3,11 +3,11 @@
 
 <script lang="ts">
   import { type PVCStatus } from '$features/k8s/types'
-  import { getColorAndStatus } from '$lib/features/k8s/helpers'
+  import { getColorForStatus } from '$lib/features/k8s/helpers'
 
   export let status: PVCStatus
 
-  $: statusClass = getColorAndStatus('PersistentVolumeClaims', status)
+  $: statusClass = getColorForStatus('PersistentVolumeClaims', status)
 </script>
 
 {#if status}