feat(ui): add jobs view

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

@@ -7,6 +7,7 @@ export { default as NamespaceTable } from './namespaces/component.svelte'
 export { default as CronJobTable } from './cronjobs/component.svelte'
 export { default as DaemonSetsTable } from './daemonsets/component.svelte'
 export { default as DeploymentTable } from './deployments/component.svelte'
+export { default as JobTable } from './jobs/component.svelte'
 export { default as PodTable } from './pods/component.svelte'
 export { default as StatefulsetTable } from './statefulsets/component.svelte'
 

ui/src/lib/features/k8s/jobs/component.svelte

@@ -0,0 +1,11 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2024-Present The UDS Authors -->
+
+<script lang="ts">
+  import { DataTable } from '$components'
+  import { createStore, type Columns } from './store'
+
+  export let columns: Columns = [['name', 'emphasize'], ['namespace'], ['completions'], ['durations'], ['age']]
+</script>
+
+<DataTable {columns} {createStore} />

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

@@ -0,0 +1,24 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: 2024-Present The UDS Authors
+
+import '@testing-library/jest-dom'
+
+import { testCustomColumns, testDefaultColumns } from '../test-helper'
+import Component from './component.svelte'
+import { createStore } from './store'
+
+suite('CronjobTable Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  testDefaultColumns(Component, createStore, [
+    ['name', 'emphasize'],
+    ['namespace'],
+    ['completions'],
+    ['durations'],
+    ['age'],
+  ])
+
+  testCustomColumns(Component, createStore)
+})

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

@@ -0,0 +1,32 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: 2024-Present The UDS Authors
+
+import type { V1Job as Resource } from '@kubernetes/client-node'
+
+import { formatDistance } from 'date-fns'
+import { ResourceStore, transformResource } from '../store'
+import { type ColumnWrapper, type CommonRow, type ResourceStoreInterface } from '../types'
+
+interface Row extends CommonRow {
+  completions: string
+  durations: string
+}
+
+export type Columns = ColumnWrapper<Row>
+
+export function createStore(): ResourceStoreInterface<Resource, Row> {
+  const url = `/api/v1/resources/workloads/jobs`
+
+  const transform = transformResource<Resource, Row>((r) => ({
+    completions: `${r.status?.succeeded ?? 0}/${r.spec?.completions ?? 0}`,
+    durations: formatDistance(r.status?.startTime ?? new Date(), r.status?.completionTime ?? new Date()),
+  }))
+
+  const store = new ResourceStore<Resource, Row>('name')
+
+  return {
+    ...store,
+    start: () => store.start(url, transform),
+    sortByKey: store.sortByKey.bind(store),
+  }
+}

ui/src/routes/(resources)/workloads/jobs/+page.svelte

@@ -1,4 +1,8 @@
 <!-- SPDX-License-Identifier: Apache-2.0 -->
 <!-- SPDX-FileCopyrightText: 2024-Present The UDS Authors -->
 
-<h1 class="text-white text-5xl">Jobs</h1>
+<script lang="ts">
+  import { JobTable } from '$features/k8s'
+</script>
+
+<JobTable />