feat: adding taints, labels and annotations to terraform provider and ui all implementing the SDK

ui/src/pages/annotations/annotation-page.tsx

@@ -0,0 +1,372 @@
+import { useMemo, useState } from "react"
+import { annotationsApi } from "@/api/annotations.ts"
+import { labelsApi } from "@/api/labels.ts"
+import type { DtoLabelResponse } from "@/sdk"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import { CircleSlash2, Pencil, Plus, Search, Tags } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { z } from "zod"
+
+import { truncateMiddle } from "@/lib/utils.ts"
+import { Badge } from "@/components/ui/badge.tsx"
+import { Button } from "@/components/ui/button.tsx"
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog.tsx"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form.tsx"
+import { Input } from "@/components/ui/input.tsx"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table.tsx"
+
+const createAnnotationSchema = z.object({
+  key: z.string().trim().min(1, "Key is required").max(120, "Max 120 chars"),
+  value: z.string().trim().optional(),
+})
+type CreateAnnotationInput = z.input<typeof createAnnotationSchema>
+
+const updateAnnotationSchema = createAnnotationSchema.partial()
+type UpdateAnnotationValues = z.infer<typeof updateAnnotationSchema>
+
+function AnnotationBadge({ t }: { t: Pick<DtoLabelResponse, "key" | "value"> }) {
+  const label = `${t.key}${t.value ? `=${t.value}` : ""}`
+  return (
+    <Badge variant="secondary" className="font-mono text-xs">
+      <Tags className="mr-1 h-3 w-3" />
+      {label}
+    </Badge>
+  )
+}
+
+export const AnnotationPage = () => {
+  const [filter, setFilter] = useState<string>("")
+  const [createOpen, setCreateOpen] = useState<boolean>(false)
+  const [updateOpen, setUpdateOpen] = useState<boolean>(false)
+  const [deleteId, setDeleteId] = useState<string | null>(null)
+  const [editingId, setEditingId] = useState<string | null>(null)
+
+  const qc = useQueryClient()
+
+  const annotationQ = useQuery({
+    queryKey: ["annotations"],
+    queryFn: () => annotationsApi.listAnnotations(),
+  })
+
+  // --- Create
+
+  const createForm = useForm<CreateAnnotationInput>({
+    resolver: zodResolver(createAnnotationSchema),
+    defaultValues: {
+      key: "",
+      value: "",
+    },
+  })
+
+  const createMut = useMutation({
+    mutationFn: (values: CreateAnnotationInput) => annotationsApi.createAnnotation(values),
+    onSuccess: async () => {
+      await qc.invalidateQueries({ queryKey: ["annotations"] })
+      createForm.reset()
+      setCreateOpen(false)
+      toast.success("Annotation Created Successfully.")
+    },
+    onError: (err) => {
+      toast.error(err.message ?? "There was an error while creating Annotation")
+    },
+  })
+
+  const onCreateSubmit = (values: CreateAnnotationInput) => {
+    createMut.mutate(values)
+  }
+
+  // --- Update
+  const updateForm = useForm<UpdateAnnotationValues>({
+    resolver: zodResolver(updateAnnotationSchema),
+    defaultValues: {},
+  })
+
+  const updateMut = useMutation({
+    mutationFn: ({ id, values }: { id: string; values: UpdateAnnotationValues }) =>
+      annotationsApi.updateAnnotation(id, values),
+    onSuccess: async () => {
+      await qc.invalidateQueries({ queryKey: ["annotations"] })
+      updateForm.reset()
+      setUpdateOpen(false)
+      toast.success("Annotation Updated Successfully.")
+    },
+    onError: (err) => {
+      toast.error(err.message ?? "There was an error while updating Annotation")
+    },
+  })
+
+  const openEdit = (label: any) => {
+    setEditingId(label.id)
+    updateForm.reset({
+      key: label.key,
+      value: label.value,
+    })
+    setUpdateOpen(true)
+  }
+
+  // --- Delete ---
+
+  const deleteMut = useMutation({
+    mutationFn: (id: string) => annotationsApi.deleteAnnotation(id),
+    onSuccess: async () => {
+      await qc.invalidateQueries({ queryKey: ["annotations"] })
+      setDeleteId(null)
+      toast.success("Annotation Deleted Successfully.")
+    },
+    onError: (err) => {
+      toast.error(err.message ?? "There was an error while deleting Annotation")
+    },
+  })
+
+  // --- Filter ---
+  const filtered = useMemo(() => {
+    const data = annotationQ.data ?? []
+    const q = filter.trim().toLowerCase()
+
+    return q
+      ? data.filter((k: any) => {
+          return k.key?.toLowerCase().includes(q) || k.value?.toLowerCase().includes(q)
+        })
+      : data
+  }, [filter, annotationQ.data])
+
+  if (annotationQ.isLoading) return <div className="p-6">Loading annotations…</div>
+  if (annotationQ.error)
+    return (
+      <div className="p-6 text-red-500">
+        Error loading annotations.<pre>{JSON.stringify(annotationQ, null, 2)}</pre>
+      </div>
+    )
+  return (
+    <div className="space-y-4 p-6">
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <h1 className="mb-4 text-2xl font-bold">Annotations</h1>
+
+        <div className="flex flex-wrap items-center gap-2">
+          <div className="relative">
+            <Search className="absolute top-2.5 left-2 h-4 w-4 opacity-60" />
+            <Input
+              value={filter}
+              onChange={(e) => setFilter(e.target.value)}
+              placeholder="Search annotations"
+              className="w-64 pl-8"
+            />
+          </div>
+
+          <Dialog open={createOpen} onOpenChange={setCreateOpen}>
+            <DialogTrigger asChild>
+              <Button onClick={() => setCreateOpen(true)}>
+                <Plus className="mr-2 h-4 w-4" />
+                Create Annotation
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-lg">
+              <DialogHeader>
+                <DialogTitle>Create Label</DialogTitle>
+              </DialogHeader>
+
+              <Form {...createForm}>
+                <form className="space-y-4" onSubmit={createForm.handleSubmit(onCreateSubmit)}>
+                  <FormField
+                    control={createForm.control}
+                    name="key"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Key</FormLabel>
+                        <FormControl>
+                          <Input placeholder="environment" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={createForm.control}
+                    name="value"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Value</FormLabel>
+                        <FormControl>
+                          <Input placeholder="dev" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <DialogFooter className="gap-2">
+                    <Button type="button" variant="outline" onClick={() => setCreateOpen(false)}>
+                      Cancel
+                    </Button>
+                    <Button type="submit" disabled={createForm.formState.isSubmitting}>
+                      {createForm.formState.isSubmitting ? "Creating…" : "Create"}
+                    </Button>
+                  </DialogFooter>
+                </form>
+              </Form>
+            </DialogContent>
+          </Dialog>
+        </div>
+      </div>
+
+      <div className="bg-background overflow-hidden rounded-2xl border shadow-sm">
+        <div className="overflow-x-auto">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Key</TableHead>
+                <TableHead>Value</TableHead>
+                <TableHead>Annotation</TableHead>
+                <TableHead className="w-[180px] text-right">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filtered.map((t) => (
+                <TableRow key={t.id}>
+                  <TableCell>{t.key}</TableCell>
+                  <TableCell>{t.value}</TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      <AnnotationBadge t={t} />
+                      <code className="text-muted-foreground text-xs">
+                        {truncateMiddle(t.id!, 6)}
+                      </code>
+                    </div>
+                  </TableCell>
+
+                  <TableCell>
+                    <div className="flex justify-end gap-2">
+                      <Button variant="outline" size="sm" onClick={() => openEdit(t)}>
+                        <Pencil className="mr-2 h-4 w-4" /> Edit
+                      </Button>
+                      <Button
+                        variant="destructive"
+                        size="sm"
+                        onClick={() => setDeleteId(t.id!)}
+                        disabled={deleteMut.isPending && deleteId === t.id}
+                      >
+                        {deleteMut.isPending && deleteId === t.id ? "Deleting…" : "Delete"}
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+
+              {filtered.length === 0 && (
+                <TableRow>
+                  <TableCell colSpan={4} className="text-muted-foreground py-10 text-center">
+                    <CircleSlash2 className="mx-auto mb-2 h-6 w-6 opacity-60" />
+                    No labels match your search.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+
+      {/* Update dialog */}
+      <Dialog open={updateOpen} onOpenChange={setUpdateOpen}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>Edit Annotation</DialogTitle>
+          </DialogHeader>
+          <Form {...updateForm}>
+            <form
+              className="space-y-4"
+              onSubmit={updateForm.handleSubmit((values) => {
+                if (!editingId) return
+                updateMut.mutate({ id: editingId, values })
+              })}
+            >
+              <FormField
+                control={updateForm.control}
+                name="key"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Key</FormLabel>
+                    <FormControl>
+                      <Input placeholder="dedicated" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={updateForm.control}
+                name="value"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Value (optional)</FormLabel>
+                    <FormControl>
+                      <Input placeholder="gpu" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter className="gap-2">
+                <Button type="button" variant="outline" onClick={() => setUpdateOpen(false)}>
+                  Cancel
+                </Button>
+                <Button type="submit" disabled={updateMut.isPending}>
+                  {updateMut.isPending ? "Saving…" : "Save changes"}
+                </Button>
+              </DialogFooter>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete confirm dialog */}
+      <Dialog open={!!deleteId} onOpenChange={(open) => !open && setDeleteId(null)}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Delete annotation</DialogTitle>
+          </DialogHeader>
+          <p className="text-muted-foreground text-sm">
+            This action cannot be undone. Are you sure you want to delete this annotation?
+          </p>
+          <DialogFooter className="gap-2">
+            <Button variant="outline" onClick={() => setDeleteId(null)}>
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={() => deleteId && deleteMut.mutate(deleteId)}
+              disabled={deleteMut.isPending}
+            >
+              {deleteMut.isPending ? "Deleting…" : "Delete"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

ui/src/pages/jobs/jobs-page.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState, type FC } from "react"
 import { archerAdminApi } from "@/api/archer_admin"
+import type { AdminListArcherJobsRequest } from "@/sdk"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import { Loader2, Plus, RefreshCw, Search, X } from "lucide-react"
 
@@ -125,13 +126,13 @@ export const JobsPage: FC = () => {
     queryKey: key,
     queryFn: () =>
       archerAdminApi.listJobs({
-        status: status || undefined,
+        status: status,
         queue: queue || undefined,
         q: debouncedQ || undefined,
         page,
         pageSize,
-      }) as Promise<DtoPageJob>,
-    keepPreviousData: true,
+      } as AdminListArcherJobsRequest) as Promise<DtoPageJob>,
+    placeholderData: (prev) => prev,
     staleTime: 10_000,
   })
 
@@ -159,7 +160,7 @@ export const JobsPage: FC = () => {
 
   const busy = jobsQ.isFetching
 
-  const data = jobsQ.data
+  const data = jobsQ.data as DtoPageJob
   const totalPages = data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1
 
   return (

ui/src/pages/labels/labels-page.tsx

@@ -287,7 +287,7 @@ export const LabelsPage = () => {
       <Dialog open={updateOpen} onOpenChange={setUpdateOpen}>
         <DialogContent className="sm:max-w-lg">
           <DialogHeader>
-            <DialogTitle>Edit taint</DialogTitle>
+            <DialogTitle>Edit Label</DialogTitle>
           </DialogHeader>
           <Form {...updateForm}>
             <form
@@ -337,7 +337,30 @@ export const LabelsPage = () => {
           </Form>
         </DialogContent>
       </Dialog>
-      <pre>{JSON.stringify(labelsQ.data, null, 2)}</pre>
+
+      {/* Delete confirm dialog */}
+      <Dialog open={!!deleteId} onOpenChange={(open) => !open && setDeleteId(null)}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Delete label</DialogTitle>
+          </DialogHeader>
+          <p className="text-muted-foreground text-sm">
+            This action cannot be undone. Are you sure you want to delete this label?
+          </p>
+          <DialogFooter className="gap-2">
+            <Button variant="outline" onClick={() => setDeleteId(null)}>
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={() => deleteId && deleteMut.mutate(deleteId)}
+              disabled={deleteMut.isPending}
+            >
+              {deleteMut.isPending ? "Deleting…" : "Delete"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   )
 }

ui/src/pages/me/me-page.tsx

@@ -500,7 +500,6 @@ export const MePage = () => {
           </div>
         </DialogContent>
       </Dialog>
-      <pre>{JSON.stringify(meQ.data, null, 2)}</pre>
     </div>
   )
 }

ui/src/pages/servers/server-page.tsx

@@ -819,7 +819,6 @@ export const ServerPage = () => {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-      <pre>{JSON.stringify(serverQ.data, null, 2)}</pre>
     </TooltipProvider>
   )
 }

ui/src/pages/ssh/ssh-page.tsx

@@ -470,7 +470,6 @@ export const SshPage = () => {
           </DialogContent>
         </Dialog>
       </div>
-      <pre>{JSON.stringify(sshQ.data, null, 2)}</pre>
     </TooltipProvider>
   )
 }

ui/src/pages/taints/taints-page.tsx

@@ -422,7 +422,6 @@ export const TaintsPage = () => {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-      <pre>{JSON.stringify(taintsQ.data, null, 2)}</pre>
     </div>
   )
 }