fix: pod status color (#176)

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

ui/src/lib/features/k8s/workloads/pods/component.test.ts

@@ -171,7 +171,7 @@ suite('PodTable Component', () => {
     },
     restarts: 1,
     controlled_by: 'DaemonSet',
-    status: 'Running',
+    status: { component: SvelteComponent, props: { status: 'Running' } },
     node: '',
   }
 
@@ -187,6 +187,7 @@ suite('PodTable Component', () => {
     'creationTimestamp',
     'containers.component',
     'metrics.component',
+    'status.component',
   ])
   vi.unstubAllGlobals()
 })

ui/src/lib/features/k8s/workloads/pods/status/component.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  export let status: string
+
+  const statusClasses = {
+    Running: 'text-green-400',
+    Stopped: 'text-red-400',
+    Pending: 'text-orange-300',
+  }
+
+  $: statusClass = statusClasses[status as keyof typeof statusClasses]
+</script>
+
+{#if status}
+  <span class={statusClass}>
+    {status}
+  </span>
+{:else}
+  -
+{/if}

ui/src/lib/features/k8s/workloads/pods/status/component.test.ts

@@ -0,0 +1,17 @@
+import { render } from '@testing-library/svelte'
+import Status from './component.svelte'
+
+describe('Status component', () => {
+  test('renders text-green-400 for Running', () => {
+    const { container } = render(Status, { props: { status: 'Running' } })
+    expect(container.firstChild).toHaveClass('text-green-400')
+  })
+  test('renders text-red-400 for Running', () => {
+    const { container } = render(Status, { props: { status: 'Stopped' } })
+    expect(container.firstChild).toHaveClass('text-red-400')
+  })
+  test('renders text-yellow-500 for Running', () => {
+    const { container } = render(Status, { props: { status: 'Pending' } })
+    expect(container.firstChild).toHaveClass('text-orange-300')
+  })
+})

ui/src/lib/features/k8s/workloads/pods/store.ts

@@ -9,6 +9,7 @@ import { type ColumnWrapper, type CommonRow, type ResourceStoreInterface } from
 import ContainerStatus from './containers/component.svelte'
 import PodMetrics from './metrics/component.svelte'
 import { parseCPU } from './metrics/utils'
+import Status from './status/component.svelte'
 
 interface Row extends CommonRow {
   containers: {
@@ -21,7 +22,7 @@ interface Row extends CommonRow {
   restarts: number
   controlled_by: string
   node: string
-  status: string
+  status: { component: typeof Status; props: { status: string } }
   metrics: {
     component: typeof PodMetrics
     sort: number
@@ -81,7 +82,7 @@ export function createStore(): ResourceStoreInterface<Resource, Row> {
     },
     restarts: r.status?.containerStatuses?.reduce((acc, curr) => acc + curr.restartCount, 0) ?? 0,
     controlled_by: r.metadata?.ownerReferences?.at(0)?.kind ?? '',
-    status: r.status?.phase ?? '',
+    status: { component: Status, props: { status: r.status?.phase ?? '' } },
     // @todo: This will not work due to using the default sparerResource stream
     node: r.spec?.nodeName ?? '',
   }))