feat(ui): adding status color mapping for k8s (#264)

Co-authored-by: Tristan Holaday <40547442+TristanHoladay@users.noreply.github.com>

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

@@ -0,0 +1,75 @@
+import type { K8StatusMapping } from './types'
+
+const statusColors = {
+  success: 'text-green-400',
+  info: 'text-blue-400',
+  warning: 'text-orange-300',
+  error: 'text-red-400',
+  disabled: 'text-grey-400',
+} as const
+
+// Mapping between sections, statuses, and colors
+const k8StatusMapping: K8StatusMapping = {
+  Pod: {
+    Pending: { color: statusColors.warning },
+    Running: { color: statusColors.success },
+    Succeeded: { color: statusColors.success },
+    Failed: { color: statusColors.error },
+    Unknown: { color: statusColors.warning },
+    Completed: { color: statusColors.disabled },
+  },
+  Deployments: {
+    Available: { color: statusColors.success },
+    Progressing: { color: statusColors.info },
+    Unavailable: { color: statusColors.error },
+  },
+  ReplicaSets: {
+    Available: { color: statusColors.success },
+    Progressing: { color: statusColors.info },
+    Unavailable: { color: statusColors.error },
+  },
+  StatefulSets: {
+    Available: { color: statusColors.success },
+    Progressing: { color: statusColors.info },
+    Unavailable: { color: statusColors.error },
+  },
+  Services: {
+    Pending: { color: statusColors.warning },
+    Active: { color: statusColors.success },
+    Terminating: { color: statusColors.warning },
+  },
+  PersistentVolumeClaims: {
+    Pending: { color: statusColors.warning },
+    Bound: { color: statusColors.success },
+    Lost: { color: statusColors.error },
+  },
+  Nodes: {
+    Ready: { color: statusColors.success },
+    NotReady: { color: statusColors.warning },
+    SchedulingDisabled: { color: statusColors.disabled },
+  },
+  Jobs: {
+    Complete: { color: statusColors.success },
+    Failed: { color: statusColors.error },
+    Running: { color: statusColors.success },
+  },
+  CronJobs: {
+    Active: { color: statusColors.success },
+    Suspended: { color: statusColors.disabled },
+  },
+  ConfigMaps: {
+    Active: { color: statusColors.success },
+  },
+  Secrets: {
+    Active: { color: statusColors.success },
+  },
+  Namespaces: {
+    Active: { color: statusColors.success },
+    Terminating: { color: statusColors.warning },
+  },
+}
+
+// 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]) => {
+  return (k8StatusMapping[type][status] as { color: string }).color || 'Unknown'
+}

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

@@ -48,3 +48,33 @@ export interface ResourceStoreInterface<T extends KubernetesObject, U extends Co
   // The url for the EventSource
   url: string
 }
+
+// Define specific status types for each resource
+export type PodStatus = 'Pending' | 'Running' | 'Succeeded' | 'Failed' | 'Unknown' | 'Completed'
+export type DeploymentStatus = 'Available' | 'Progressing' | 'Unavailable'
+export type ServiceStatus = 'Pending' | 'Active' | 'Terminating'
+export type PVCStatus = 'Pending' | 'Bound' | 'Lost'
+export type NodeStatus = 'Ready' | 'NotReady' | 'SchedulingDisabled'
+export type JobStatus = 'Complete' | 'Failed' | 'Running'
+export type CronJobStatus = 'Active' | 'Suspended'
+export type ConfigMapStatus = 'Active'
+export type SecretStatus = 'Active'
+export type NamespaceStatus = 'Active' | 'Terminating'
+
+type K8TypeFields = { color: string }
+
+// Define a type for the k8StatusMapping
+export type K8StatusMapping = {
+  Pod: Record<PodStatus, K8TypeFields>
+  Deployments: Record<DeploymentStatus, K8TypeFields>
+  ReplicaSets: Record<DeploymentStatus, K8TypeFields>
+  StatefulSets: Record<DeploymentStatus, K8TypeFields>
+  Services: Record<ServiceStatus, K8TypeFields>
+  PersistentVolumeClaims: Record<PVCStatus, K8TypeFields>
+  Nodes: Record<NodeStatus, K8TypeFields>
+  Jobs: Record<JobStatus, K8TypeFields>
+  CronJobs: Record<CronJobStatus, K8TypeFields>
+  ConfigMaps: Record<ConfigMapStatus, K8TypeFields>
+  Secrets: Record<SecretStatus, K8TypeFields>
+  Namespaces: Record<NamespaceStatus, K8TypeFields>
+}

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

@@ -1,13 +1,9 @@
 <script lang="ts">
-  export let status: string
+  import { type PodStatus } from '$features/k8s/types'
+  import { getColorAndStatus } from '$lib/features/k8s/helpers'
+  export let status: PodStatus
 
-  const statusClasses = {
-    Running: 'text-green-400',
-    Stopped: 'text-red-400',
-    Pending: 'text-orange-300',
-  }
-
-  $: statusClass = statusClasses[status as keyof typeof statusClasses]
+  $: statusClass = getColorAndStatus('Pod', status)
 </script>
 
 {#if status}

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

@@ -6,11 +6,11 @@ describe('Status component', () => {
     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' } })
+  test('renders text-red-400 for Failed', () => {
+    const { container } = render(Status, { props: { status: 'Failed' } })
     expect(container.firstChild).toHaveClass('text-red-400')
   })
-  test('renders text-yellow-500 for Running', () => {
+  test('renders text-orange-300 for Pending', () => {
     const { container } = render(Status, { props: { status: 'Pending' } })
     expect(container.firstChild).toHaveClass('text-orange-300')
   })