chore: cleanup and route refactoring

Signed-off-by: allanice001 <allanice001@gmail.com>

ui/src/App.tsx

@@ -5,6 +5,7 @@ import { ProtectedRoute } from "@/components/protected-route.tsx"
 import { AnnotationPage } from "@/pages/annotations/annotation-page.tsx"
 import { Login } from "@/pages/auth/login.tsx"
 import { CredentialPage } from "@/pages/credentials/credential-page.tsx"
+import { DnsPage } from "@/pages/dns/dns-page.tsx"
 import { JobsPage } from "@/pages/jobs/jobs-page.tsx"
 import { LabelsPage } from "@/pages/labels/labels-page.tsx"
 import { MePage } from "@/pages/me/me-page.tsx"
@@ -35,6 +36,7 @@ export default function App() {
           <Route path="/annotations" element={<AnnotationPage />} />
           <Route path="/node-pools" element={<NodePoolsPage />} />
           <Route path="/credentials" element={<CredentialPage />} />
+          <Route path="/dns" element={<DnsPage />} />
 
           <Route path="/admin/jobs" element={<JobsPage />} />
         </Route>

ui/src/api/dns.ts

@@ -0,0 +1,49 @@
+import { withRefresh } from "@/api/with-refresh.ts"
+import type {
+  DtoCreateDomainRequest,
+  DtoCreateRecordSetRequest,
+  DtoUpdateDomainRequest,
+  DtoUpdateRecordSetRequest,
+} from "@/sdk"
+import { makeDnsApi } from "@/sdkClient.ts"
+
+const dns = makeDnsApi()
+
+export const dnsApi = {
+  listDomains: () =>
+    withRefresh(async () => {
+      return await dns.listDomains()
+    }),
+  getDomain: (id: string) =>
+    withRefresh(async () => {
+      return await dns.getDomain({ id })
+    }),
+  createDomain: async (body: DtoCreateDomainRequest) =>
+    withRefresh(async () => {
+      return await dns.createDomain({ body })
+    }),
+  updateDomain: async (id: string, body: DtoUpdateDomainRequest) =>
+    withRefresh(async () => {
+      return await dns.updateDomain({ id, body })
+    }),
+  deleteDomain: async (id: string) =>
+    withRefresh(async () => {
+      return await dns.deleteDomain({ id })
+    }),
+  listRecordSetsByDomain: async (domainId: string) =>
+    withRefresh(async () => {
+      return await dns.listRecordSets({ domainId })
+    }),
+  createRecordSetsByDomain: async (domainId: string, body: DtoCreateRecordSetRequest) =>
+    withRefresh(async () => {
+      return await dns.createRecordSet({ domainId, body })
+    }),
+  updateRecordSetsByDomain: async (id: string, body: DtoUpdateRecordSetRequest) =>
+    withRefresh(async () => {
+      return await dns.updateRecordSet({ id, body })
+    }),
+  deleteRecordSetsByDomain: async (id: string) =>
+    withRefresh(async () => {
+      return await dns.deleteRecordSet({ id })
+    }),
+}

ui/src/layouts/nav-config.ts

@@ -14,6 +14,7 @@ import {
 } from "lucide-react"
 import { AiOutlineCluster } from "react-icons/ai"
 import { GrUserWorker } from "react-icons/gr"
+import { MdOutlineDns } from "react-icons/md"
 
 export type NavItem = {
   to: string
@@ -23,6 +24,7 @@ export type NavItem = {
 
 export const mainNav: NavItem[] = [
   { to: "/clusters", label: "Clusters", icon: AiOutlineCluster },
+  { to: "/dns", label: "DNS", icon: MdOutlineDns },
   { to: "/node-pools", label: "Node Pools", icon: BoxesIcon },
   { to: "/annotations", label: "Annotations", icon: ComponentIcon },
   { to: "/labels", label: "Labels", icon: TagsIcon },

ui/src/pages/credentials/credential-page.tsx

@@ -2,7 +2,16 @@ import { useMemo, useState } from "react"
 import { credentialsApi } from "@/api/credentials"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
-import { AlertTriangle, Eye, Loader2, MoreHorizontal, Pencil, Plus, Search, Trash2, } from "lucide-react"
+import {
+  AlertTriangle,
+  Eye,
+  Loader2,
+  MoreHorizontal,
+  Pencil,
+  Plus,
+  Search,
+  Trash2,
+} from "lucide-react"
 import { Controller, useForm } from "react-hook-form"
 import { toast } from "sonner"
 import { z } from "zod"
@@ -20,16 +29,36 @@ import {
 } from "@/components/ui/alert-dialog"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
 import { Switch } from "@/components/ui/switch"
 import { Textarea } from "@/components/ui/textarea"
 

ui/src/pages/org/settings.tsx

@@ -1,6 +1,8 @@
-import { useEffect } from "react"
+import { useEffect, useMemo } from "react"
+import { credentialsApi } from "@/api/credentials.ts"
 import { withRefresh } from "@/api/with-refresh.ts"
 import { orgStore } from "@/auth/org.ts"
+import type { DtoCredentialOut } from "@/sdk"
 import { makeOrgsApi } from "@/sdkClient.ts"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
@@ -20,6 +22,20 @@ import {
 } from "@/components/ui/form.tsx"
 import { Input } from "@/components/ui/input.tsx"
 
+const isS3 = (c: DtoCredentialOut) =>
+  c.provider === "aws" &&
+  c.scope_kind === "service" &&
+  // scope may be JSON; allow both object and stringified JSON
+  (() => {
+    const s = (c as any).scope
+    try {
+      const obj = typeof s === "string" ? JSON.parse(s) : s || {}
+      return obj?.service === "s3"
+    } catch {
+      return false
+    }
+  })()
+
 const schema = z.object({
   name: z.string().min(1, "Required"),
   domain: z.string().optional(),
@@ -38,6 +54,13 @@ export const OrgSettings = () => {
     queryFn: () => withRefresh(() => api.getOrg({ id: orgId! })),
   })
 
+  const credentialQ = useQuery({
+    queryKey: ["credentials", "s3"],
+    queryFn: () => credentialsApi.listCredentials(), // client-side filter
+  })
+
+  const s3Credentials = useMemo(() => (credentialQ.data ?? []).filter(isS3), [credentialQ.data])
+
   const form = useForm<Values>({
     resolver: zodResolver(schema),
     defaultValues: {

ui/src/sdkClient.ts

@@ -6,6 +6,7 @@ import {
   AuthApi,
   Configuration,
   CredentialsApi,
+  DNSApi,
   LabelsApi,
   MeApi,
   MeAPIKeysApi,
@@ -118,3 +119,7 @@ export function makeMetaApi() {
 export function makeCredentialsApi() {
   return makeApiClient(CredentialsApi)
 }
+
+export function makeDnsApi() {
+  return makeApiClient(DNSApi)
+}