GlueOps/autoglue
1
0
Fork 0
mirror of https://github.com/GlueOps/autoglue.git synced 2026-02-13 04:40:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: load balancers ui

Browse Source 
Signed-off-by: allanice001 <allanice001@gmail.com>
This commit is contained in:
allanice001
2025-11-17 15:16:20 +00:00
parent 9853d32b04
commit d163a050d8
25 changed files with 622 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
Makefile
View File

@@ -99,8 +99,8 @@ SDK_PKG_CLEAN := $(call trim,$(SDK_PKG))
validate-spec check-tags doctor diff-swagger
# --- inputs/outputs for swagger (incremental) ---
DOCS_JSON := docs/swagger.json
DOCS_YAML := docs/swagger.yaml
DOCS_JSON := docs/openapi.json
DOCS_YAML := docs/openapi.yaml
# Prefer git for speed; fall back to find. Exclude UI dir.
#GO_SRCS := $(shell (git ls-files '*.go' ':!$(UI_DIR)/**' 2>/dev/null || find . -name '*.go' -not -path './$(UI_DIR)/*' -type f))
GO_SRCS := $(shell ( \
@@ -112,12 +112,14 @@ GO_SRCS := $(shell ( \
$(DOCS_JSON) $(DOCS_YAML): $(GO_SRCS)
@echo ">> Generating Swagger docs..."
@if ! command -v swag >/dev/null 2>&1; then \
echo "Installing swag/v2 CLI @v2.0.0-rc4..."; \
echo "Installing swag/v2 CLI @latest..."; \
$(GOINSTALL) github.com/swaggo/swag/v2/cmd/swag@latest; \
fi
@rm -rf docs/swagger.* docs/docs.go
@swag fmt -d .
@rm -rf docs/openapi.* docs/docs.go
@swag fmt --exclude main.go -d .
@swag init $(SWAG_FLAGS) -g $(MAIN) -o docs
@mv docs/swagger.json $(DOCS_JSON)
@mv docs/swagger.yaml $(DOCS_YAML)
# --- spec validation + tag guard ---
validate-spec: $(DOCS_JSON) ## Validate docs/swagger.json and pin the core OpenAPI Generator version

2
docs/docs.go
View File

File diff suppressed because one or more lines are too long

4
docs/efs.go
View File

@@ -2,8 +2,8 @@ package docs
import _ "embed"
//go:embed swagger.json
//go:embed openapi.json
var SwaggerJSON []byte
//go:embed swagger.yaml
//go:embed openapi.yaml
var SwaggerYAML []byte

2
docs/swagger.json → docs/openapi.json
View File

File diff suppressed because one or more lines are too long

25
docs/swagger.yaml → docs/openapi.yaml
View File

@@ -203,7 +203,8 @@ components:
properties:
kind:
enum:
- glueops|public
- glueops
- public
example: public
type: string
name:
@@ -460,8 +461,6 @@ components:
id:
type: string
kind:
enum:
- glueops|public
type: string
name:
type: string
@@ -758,7 +757,8 @@ components:
properties:
kind:
enum:
- glueops|public
- glueops
- public
example: public
type: string
name:
@@ -1126,7 +1126,22 @@ components:
type: string
type: object
securitySchemes:
"":
ApiKeyAuth:
description: User API key
in: header
name: X-API-KEY
type: apiKey
BearerAuth:
description: Bearer token authentication
in: header
name: Authorization
type: apiKey
OrgKeyAuth:
description: Org-level key/secret authentication
in: header
name: X-ORG-KEY
type: apiKey
OrgSecretAuth:
description: Org-level secret
in: header
name: X-ORG-SECRET

4
internal/api/mount_swagger_routes.go
View File

@@ -12,8 +12,8 @@ import (
func mountSwaggerRoutes(r chi.Router) {
r.Get("/swagger", RapidDocHandler("/swagger/swagger.yaml"))
r.Get("/swagger/index.html", RapidDocHandler("/swagger/swagger.yaml"))
r.Get("/swagger/swagger.json", serveSwaggerFromEmbed(docs.SwaggerJSON, "application/json"))
r.Get("/swagger/swagger.yaml", serveSwaggerFromEmbed(docs.SwaggerYAML, "application/x-yaml"))
r.Get("/swagger/openapi.json", serveSwaggerFromEmbed(docs.SwaggerJSON, "application/json"))
r.Get("/swagger/openapi.yaml", serveSwaggerFromEmbed(docs.SwaggerYAML, "application/x-yaml"))
}
var rapidDocTmpl = template.Must(template.New("redoc").Parse(`<!DOCTYPE html>

6
internal/handlers/dto/load_balancers.go
View File

@@ -10,7 +10,7 @@ type LoadBalancerResponse struct {
ID uuid.UUID `json:"id"`
OrganizationID uuid.UUID `json:"organization_id"`
Name string `json:"name"`
Kind string `json:"kind" enums:"glueops|public"`
Kind string `json:"kind"`
PublicIPAddress string `json:"public_ip_address"`
PrivateIPAddress string `json:"private_ip_address"`
CreatedAt time.Time `json:"created_at"`
@@ -19,14 +19,14 @@ type LoadBalancerResponse struct {
type CreateLoadBalancerRequest struct {
Name string `json:"name" example:"glueops"`
Kind string `json:"kind" example:"public" enums:"glueops|public"`
Kind string `json:"kind" example:"public" enums:"glueops,public"`
PublicIPAddress string `json:"public_ip_address" example:"8.8.8.8"`
PrivateIPAddress string `json:"private_ip_address" example:"192.168.0.2"`
}
type UpdateLoadBalancerRequest struct {
Name *string `json:"name" example:"glue"`
Kind *string `json:"kind" example:"public" enums:"glueops|public"`
Kind *string `json:"kind" example:"public" enums:"glueops,public"`
PublicIPAddress *string `json:"public_ip_address" example:"8.8.8.8"`
PrivateIPAddress *string `json:"private_ip_address" example:"192.168.0.2"`
}

7
internal/handlers/load_balancers.go
View File

@@ -3,6 +3,7 @@ package handlers
import (
"encoding/json"
"errors"
"fmt"
"net/http"
"strings"
@@ -128,7 +129,8 @@ func CreateLoadBalancer(db *gorm.DB) http.HandlerFunc {
return
}
if strings.ToLower(in.Kind) != "glueops" || strings.ToLower(in.Kind) != "public" {
if strings.ToLower(in.Kind) != "glueops" && strings.ToLower(in.Kind) != "public" {
fmt.Println(in.Kind)
utils.WriteError(w, http.StatusBadRequest, "bad_kind", "invalid kind only 'glueops' or 'public'")
return
}
@@ -199,7 +201,8 @@ func UpdateLoadBalancer(db *gorm.DB) http.HandlerFunc {
row.Name = *in.Name
}
if in.Kind != nil {
if strings.ToLower(*in.Kind) != "glueops" || strings.ToLower(*in.Kind) != "public" {
fmt.Println(*in.Kind)
if strings.ToLower(*in.Kind) != "glueops" && strings.ToLower(*in.Kind) != "public" {
utils.WriteError(w, http.StatusBadRequest, "bad_kind", "invalid kind only 'glueops' or 'public'")
return
}

52
main.go
View File

@@ -4,37 +4,37 @@ import (
"github.com/glueops/autoglue/cmd"
)
// @title AutoGlue API
// @version 1.0
// @description API for managing K3s clusters across cloud providers
// @contact.name GlueOps
// @title AutoGlue API
// @version 1.0
// @description API for managing K3s clusters across cloud providers
// @contact.name GlueOps
// @servers.url https://autoglue.onglueops.rocks/api/v1
// @servers.description Production API
// @servers.url https://autoglue.apps.nonprod.earth.onglueops.rocks/api/v1
// @servers.description Staging API
// @servers.url http://localhost:8080/api/v1
// @servers.description Local dev
// @servers.url https://autoglue.onglueops.rocks/api/v1
// @servers.description Production API
// @servers.url https://autoglue.apps.nonprod.earth.onglueops.rocks/api/v1
// @servers.description Staging API
// @servers.url http://localhost:8080/api/v1
// @servers.description Local dev
// @securityDefinitions.apikey BearerAuth
// @in header
// @name Authorization
// @description Bearer token authentication
// @securityDefinitions.apikey BearerAuth
// @in header
// @name Authorization
// @description Bearer token authentication
// @securityDefinitions.apikey ApiKeyAuth
// @in header
// @name X-API-KEY
// @description User API key
// @securityDefinitions.apikey ApiKeyAuth
// @in header
// @name X-API-KEY
// @description User API key
// @securityDefinitions.apikey OrgKeyAuth
// @in header
// @name X-ORG-KEY
// @description Org-level key/secret authentication
// @securityDefinitions.apikey OrgKeyAuth
// @in header
// @name X-ORG-KEY
// @description Org-level key/secret authentication
// @securityDefinitions.apikey OrgSecretAuth
// @in header
// @name X-ORG-SECRET
// @description Org-level secret
// @securityDefinitions.apikey OrgSecretAuth
// @in header
// @name X-ORG-SECRET
// @description Org-level secret
func main() {
cmd.Execute()

2
ui/src/App.tsx
View File

@@ -9,6 +9,7 @@ import { DnsPage } from "@/pages/dns/dns-page.tsx"
import { DocsPage } from "@/pages/docs/docs-page.tsx"
import { JobsPage } from "@/pages/jobs/jobs-page.tsx"
import { LabelsPage } from "@/pages/labels/labels-page.tsx"
import { LoadBalancersPage } from "@/pages/loadbalancers/load-balancers-page"
import { MePage } from "@/pages/me/me-page.tsx"
import { NodePoolsPage } from "@/pages/nodepools/node-pools-page.tsx"
import { OrgApiKeys } from "@/pages/org/api-keys.tsx"
@@ -40,6 +41,7 @@ export default function App() {
<Route path="/node-pools" element={<NodePoolsPage />} />
<Route path="/credentials" element={<CredentialPage />} />
<Route path="/dns" element={<DnsPage />} />
<Route path="/load-balancers" element={<LoadBalancersPage />} />
<Route path="/admin/jobs" element={<JobsPage />} />
</Route>

9
ui/src/api/annotations.ts
View File

@@ -10,7 +10,9 @@ export const annotationsApi = {
}),
createAnnotation: (body: DtoCreateAnnotationRequest) =>
withRefresh(async () => {
return await annotations.createAnnotation({ body })
return await annotations.createAnnotation({
dtoCreateAnnotationRequest: body,
})
}),
getAnnotation: (id: string) =>
withRefresh(async () => {
@@ -22,6 +24,9 @@ export const annotationsApi = {
}),
updateAnnotation: (id: string, body: DtoUpdateAnnotationRequest) =>
withRefresh(async () => {
return await annotations.updateAnnotation({ id, body })
return await annotations.updateAnnotation({
id,
dtoUpdateAnnotationRequest: body,
})
}),
}

2
ui/src/api/archer_admin.ts
View File

@@ -17,7 +17,7 @@ export const archerAdminApi = {
run_at?: string
}) => {
return withRefresh(async () => {
return await archerAdmin.adminEnqueueArcherJob({ body })
return await archerAdmin.adminEnqueueArcherJob({ dtoEnqueueRequest: body })
})
},
retryJob: (id: string) => {

4
ui/src/api/credentials.ts
View File

@@ -11,7 +11,7 @@ export const credentialsApi = {
}),
createCredential: async (body: DtoCreateCredentialRequest) =>
withRefresh(async () => {
return await credentials.createCredential({ body })
return await credentials.createCredential({ dtoCreateCredentialRequest: body })
}),
getCredential: async (id: string) =>
withRefresh(async () => {
@@ -23,7 +23,7 @@ export const credentialsApi = {
}),
updateCredential: async (id: string, body: DtoUpdateCredentialRequest) =>
withRefresh(async () => {
return await credentials.updateCredential({ id, body })
return await credentials.updateCredential({ id, dtoUpdateCredentialRequest: body })
}),
revealCredential: async (id: string) =>
withRefresh(async () => {

8
ui/src/api/dns.ts
View File

@@ -20,11 +20,11 @@ export const dnsApi = {
}),
createDomain: async (body: DtoCreateDomainRequest) =>
withRefresh(async () => {
return await dns.createDomain({ body })
return await dns.createDomain({ dtoCreateDomainRequest: body })
}),
updateDomain: async (id: string, body: DtoUpdateDomainRequest) =>
withRefresh(async () => {
return await dns.updateDomain({ id, body })
return await dns.updateDomain({ id, dtoUpdateDomainRequest: body })
}),
deleteDomain: async (id: string) =>
withRefresh(async () => {
@@ -36,11 +36,11 @@ export const dnsApi = {
}),
createRecordSetsByDomain: async (domainId: string, body: DtoCreateRecordSetRequest) =>
withRefresh(async () => {
return await dns.createRecordSet({ domainId, body })
return await dns.createRecordSet({ domainId, dtoCreateRecordSetRequest: body })
}),
updateRecordSetsByDomain: async (id: string, body: DtoUpdateRecordSetRequest) =>
withRefresh(async () => {
return await dns.updateRecordSet({ id, body })
return await dns.updateRecordSet({ id, dtoUpdateRecordSetRequest: body })
}),
deleteRecordSetsByDomain: async (id: string) =>
withRefresh(async () => {

4
ui/src/api/labels.ts
View File

@@ -11,7 +11,7 @@ export const labelsApi = {
}),
createLabel: (body: DtoCreateLabelRequest) =>
withRefresh(async () => {
return await labels.createLabel({ body })
return await labels.createLabel({ dtoCreateLabelRequest: body })
}),
getLabel: (id: string) =>
withRefresh(async () => {
@@ -23,6 +23,6 @@ export const labelsApi = {
}),
updateLabel: (id: string, body: DtoUpdateLabelRequest) =>
withRefresh(async () => {
return await labels.updateLabel({ id, body })
return await labels.updateLabel({ id, dtoUpdateLabelRequest: body })
}),
}

32
ui/src/api/loadbalancers.ts Normal file
View File

@@ -0,0 +1,32 @@
import { withRefresh } from "@/api/with-refresh"
import type { DtoCreateLoadBalancerRequest, DtoUpdateLoadBalancerRequest } from "@/sdk"
import { makeLoadBalancerApi } from "@/sdkClient"
const loadBalancers = makeLoadBalancerApi()
export const loadBalancersApi = {
listLoadBalancers: () =>
withRefresh(async () => {
return await loadBalancers.listLoadBalancers()
}),
getLoadBalancer: (id: string) =>
withRefresh(async () => {
return await loadBalancers.getLoadBalancers({ id })
}),
createLoadBalancer: (body: DtoCreateLoadBalancerRequest) =>
withRefresh(async () => {
return await loadBalancers.createLoadBalancer({
dtoCreateLoadBalancerRequest: body,
})
}),
updateLoadBalancer: (id: string, body: DtoUpdateLoadBalancerRequest) =>
withRefresh(async () => {
return await loadBalancers.updateLoadBalancer({
id,
dtoUpdateLoadBalancerRequest: body,
})
}),
deleteLoadBalancer: (id: string) =>
withRefresh(async () => {
return await loadBalancers.deleteLoadBalancer({ id })
}),
}

4
ui/src/api/me.ts
View File

@@ -19,7 +19,7 @@ export const meApi = {
updateMe: (body: HandlersUpdateMeRequest) =>
withRefresh(async (): Promise<ModelsUser> => {
return await me.updateMe({ body })
return await me.updateMe({ handlersUpdateMeRequest: body })
}),
listKeys: () =>
@@ -29,7 +29,7 @@ export const meApi = {
createKey: (body: HandlersCreateUserKeyRequest) =>
withRefresh(async (): Promise<HandlersUserAPIKeyOut> => {
return await keys.createUserAPIKey({ body })
return await keys.createUserAPIKey({ handlersCreateUserKeyRequest: body })
}),
deleteKey: (id: string) =>

12
ui/src/api/node_pools.ts
View File

@@ -22,7 +22,7 @@ export const nodePoolsApi = {
}),
createNodePool: (body: DtoCreateNodePoolRequest) =>
withRefresh(async () => {
return await nodePools.createNodePool({ body })
return await nodePools.createNodePool({ dtoCreateNodePoolRequest: body })
}),
getNodePool: (id: string) =>
withRefresh(async () => {
@@ -34,7 +34,7 @@ export const nodePoolsApi = {
}),
updateNodePool: (id: string, body: DtoUpdateNodePoolRequest) =>
withRefresh(async () => {
return await nodePools.updateNodePool({ id, body })
return await nodePools.updateNodePool({ id, dtoUpdateNodePoolRequest: body })
}),
// Servers
listNodePoolServers: (id: string) =>
@@ -43,7 +43,7 @@ export const nodePoolsApi = {
}),
attachNodePoolServer: (id: string, body: DtoAttachServersRequest) =>
withRefresh(async () => {
return await nodePools.attachNodePoolServers({ id, body })
return await nodePools.attachNodePoolServers({ id, dtoAttachServersRequest: body })
}),
detachNodePoolServers: (id: string, serverId: string) =>
withRefresh(async () => {
@@ -56,7 +56,7 @@ export const nodePoolsApi = {
}),
attachNodePoolTaints: (id: string, body: DtoAttachTaintsRequest) =>
withRefresh(async () => {
return await nodePools.attachNodePoolTaints({ id, body })
return await nodePools.attachNodePoolTaints({ id, dtoAttachTaintsRequest: body })
}),
detachNodePoolTaints: (id: string, taintId: string) =>
withRefresh(async () => {
@@ -69,7 +69,7 @@ export const nodePoolsApi = {
}),
attachNodePoolLabels: (id: string, body: DtoAttachLabelsRequest) =>
withRefresh(async () => {
return await nodePools.attachNodePoolLabels({ id, body })
return await nodePools.attachNodePoolLabels({ id, dtoAttachLabelsRequest: body })
}),
detachNodePoolLabels: (id: string, labelId: string) =>
withRefresh(async () => {
@@ -82,7 +82,7 @@ export const nodePoolsApi = {
}),
attachNodePoolAnnotations: (id: string, body: DtoAttachAnnotationsRequest) =>
withRefresh(async () => {
return await nodePools.attachNodePoolAnnotations({ id, body })
return await nodePools.attachNodePoolAnnotations({ id, dtoAttachAnnotationsRequest: body })
}),
detachNodePoolAnnotations: (id: string, annotationId: string) =>
withRefresh(async () => {

4
ui/src/api/servers.ts
View File

@@ -11,7 +11,7 @@ export const serversApi = {
}),
createServer: (body: DtoCreateServerRequest) =>
withRefresh(async () => {
return await servers.createServer({ body })
return await servers.createServer({ dtoCreateServerRequest: body })
}),
getServer: (id: string) =>
withRefresh(async () => {
@@ -19,7 +19,7 @@ export const serversApi = {
}),
updateServer: (id: string, body: DtoUpdateServerRequest) =>
withRefresh(async () => {
return await servers.updateServer({ id, body })
return await servers.updateServer({ id, dtoUpdateServerRequest: body })
}),
deleteServer: (id: string) =>
withRefresh(async () => {

2
ui/src/api/ssh.ts
View File

@@ -33,7 +33,7 @@ export const sshApi = {
createSshKey: (body: DtoCreateSSHRequest) =>
withRefresh(async (): Promise<DtoSshResponse> => {
// SDK expects { body }
return await ssh.createSSHKey({ body })
return await ssh.createSSHKey({ dtoCreateSSHRequest: body })
}),
getSshKeyById: (id: string) =>

4
ui/src/api/taints.ts
View File

@@ -10,7 +10,7 @@ export const taintsApi = {
}),
createTaint: (body: DtoCreateTaintRequest) =>
withRefresh(async () => {
return await taints.createTaint({ body })
return await taints.createTaint({ dtoCreateTaintRequest: body })
}),
getTaint: (id: string) =>
withRefresh(async () => {
@@ -22,6 +22,6 @@ export const taintsApi = {
}),
updateTaint: (id: string, body: DtoUpdateTaintRequest) =>
withRefresh(async () => {
return await taints.updateTaint({ id, body })
return await taints.updateTaint({ id, dtoUpdateTaintRequest: body })
}),
}

2
ui/src/layouts/nav-config.ts
View File

@@ -16,6 +16,7 @@ import { AiOutlineCluster } from "react-icons/ai"
import { GrUserWorker } from "react-icons/gr"
import { MdOutlineDns } from "react-icons/md"
import { SiSwagger } from "react-icons/si"
import { TbLoadBalancer } from "react-icons/tb"
export type NavItem = {
to: string
@@ -26,6 +27,7 @@ export type NavItem = {
export const mainNav: NavItem[] = [
{ to: "/clusters", label: "Clusters", icon: AiOutlineCluster },
{ to: "/load-balancers", label: "Load Balancers", icon: TbLoadBalancer},
{ to: "/dns", label: "DNS", icon: MdOutlineDns },
{ to: "/node-pools", label: "Node Pools", icon: BoxesIcon },
{ to: "/annotations", label: "Annotations", icon: ComponentIcon },

2
ui/src/pages/docs/docs-page.tsx
View File

@@ -152,7 +152,7 @@ export const DocsPage: FC = () => {
<rapi-doc
ref={rdRef}
id="autoglue-docs"
spec-url="/swagger/swagger.json"
spec-url="/swagger/openapi.json"
render-style="read"
show-header="false"
persist-auth="true"

479
ui/src/pages/loadbalancers/load-balancers-page.tsx Normal file
View File

@@ -0,0 +1,479 @@
import { useMemo, useState } from "react"
import { loadBalancersApi } from "@/api/loadbalancers"
import type { DtoLoadBalancerResponse } from "@/sdk"
import { zodResolver } from "@hookform/resolvers/zod"
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
import { CircleSlash2, Network, Pencil, Plus, Search } from "lucide-react"
import { useForm } from "react-hook-form"
import { toast } from "sonner"
import { z } from "zod"
import { truncateMiddle } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"
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 {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table"
// --- schemas ---
const createLoadBalancerSchema = z.object({
name: z.string().trim().min(1, "Name is required").max(120, "Max 120 chars"),
kind: z.enum(["glueops", "public"]).default("public"),
public_ip_address: z
.string()
.trim()
.min(1, "Public IP/hostname is required")
.max(255, "Max 255 chars"),
private_ip_address: z
.string()
.trim()
.min(1, "Private IP/hostname is required")
.max(255, "Max 255 chars"),
})
type CreateLoadBalancerInput = z.input<typeof createLoadBalancerSchema>
const updateLoadBalancerSchema = createLoadBalancerSchema.partial()
type UpdateLoadBalancerValues = z.infer<typeof updateLoadBalancerSchema>
// --- badge ---
function LoadBalancerBadge({
lb,
}: {
lb: Pick<DtoLoadBalancerResponse, "name" | "kind" | "public_ip_address" | "private_ip_address">
}) {
return (
<Badge variant="secondary" className="font-mono text-xs">
<Network className="mr-1 h-3 w-3" />
{lb.name} · {lb.kind} · {lb.public_ip_address} → {lb.private_ip_address}
</Badge>
)
}
export const LoadBalancersPage = () => {
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 lbsQ = useQuery({
queryKey: ["loadBalancers"],
queryFn: () => loadBalancersApi.listLoadBalancers(),
})
// --- Create ---
const createForm = useForm<CreateLoadBalancerInput>({
resolver: zodResolver(createLoadBalancerSchema),
defaultValues: {
name: "",
kind: "public",
public_ip_address: "",
private_ip_address: "",
},
})
const createMut = useMutation({
mutationFn: (values: CreateLoadBalancerInput) => loadBalancersApi.createLoadBalancer(values),
onSuccess: async () => {
await qc.invalidateQueries({ queryKey: ["loadBalancers"] })
createForm.reset()
setCreateOpen(false)
toast.success("Load balancer created successfully.")
},
onError: (err: any) => {
toast.error(err?.message ?? "There was an error while creating the load balancer")
},
})
const onCreateSubmit = (values: CreateLoadBalancerInput) => {
createMut.mutate(values)
}
// --- Update ---
const updateForm = useForm<UpdateLoadBalancerValues>({
resolver: zodResolver(updateLoadBalancerSchema),
defaultValues: {},
})
const updateMut = useMutation({
mutationFn: ({ id, values }: { id: string; values: UpdateLoadBalancerValues }) =>
loadBalancersApi.updateLoadBalancer(id, values),
onSuccess: async () => {
await qc.invalidateQueries({ queryKey: ["loadBalancers"] })
updateForm.reset()
setUpdateOpen(false)
toast.success("Load balancer updated successfully.")
},
onError: (err: any) => {
toast.error(err?.message ?? "There was an error while updating the load balancer")
},
})
const openEdit = (lb: DtoLoadBalancerResponse) => {
setEditingId(lb.id!)
updateForm.reset({
name: lb.name ?? "",
kind: (lb.kind as "public" | "glueops") ?? "public",
public_ip_address: lb.public_ip_address ?? "",
private_ip_address: lb.private_ip_address ?? "",
})
setUpdateOpen(true)
}
// --- Delete ---
const deleteMut = useMutation({
mutationFn: (id: string) => loadBalancersApi.deleteLoadBalancer(id),
onSuccess: async () => {
await qc.invalidateQueries({ queryKey: ["loadBalancers"] })
setDeleteId(null)
toast.success("Load balancer deleted successfully.")
},
onError: (err: any) => {
toast.error(err?.message ?? "There was an error while deleting the load balancer")
},
})
// --- Filter ---
const filtered = useMemo(() => {
const data = lbsQ.data ?? []
const q = filter.trim().toLowerCase()
return q
? data.filter((lb: any) => {
return (
lb.name?.toLowerCase().includes(q) ||
lb.kind?.toLowerCase().includes(q) ||
lb.public_ip_address?.toLowerCase().includes(q) ||
lb.private_ip_address?.toLowerCase().includes(q)
)
})
: data
}, [filter, lbsQ.data])
if (lbsQ.isLoading) return <div className="p-6">Loading load balancers…</div>
if (lbsQ.error) return <div className="p-6 text-red-500">Error loading load balancers.</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">Load Balancers</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 load balancers"
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 Load Balancer
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-lg">
<DialogHeader>
<DialogTitle>Create Load Balancer</DialogTitle>
</DialogHeader>
<Form {...createForm}>
<form className="space-y-4" onSubmit={createForm.handleSubmit(onCreateSubmit)}>
<FormField
control={createForm.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input placeholder="apps-lb-01" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={createForm.control}
name="kind"
render={({ field }) => (
<FormItem>
<FormLabel>Kind</FormLabel>
<FormControl>
<Select onValueChange={field.onChange} value={field.value ?? "public"}>
<SelectTrigger>
<SelectValue placeholder="Select kind" />
</SelectTrigger>
<SelectContent>
<SelectItem value="public">Public</SelectItem>
<SelectItem value="glueops">GlueOps</SelectItem>
</SelectContent>
</Select>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={createForm.control}
name="public_ip_address"
render={({ field }) => (
<FormItem>
<FormLabel>Public IP</FormLabel>
<FormControl>
<Input placeholder="1.2.3.4" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={createForm.control}
name="private_ip_address"
render={({ field }) => (
<FormItem>
<FormLabel>Private IP</FormLabel>
<FormControl>
<Input placeholder="10.0.30.10" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<DialogFooter className="gap-2">
<Button type="button" variant="outline" onClick={() => setCreateOpen(false)}>
Cancel
</Button>
<Button type="submit" disabled={createMut.isPending}>
{createMut.isPending ? "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>Name</TableHead>
<TableHead>Kind</TableHead>
<TableHead>Public IP / Hostname</TableHead>
<TableHead>Private IP / Hostname</TableHead>
<TableHead>Summary</TableHead>
<TableHead className="w-[220px] text-right">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{filtered.map((lb: DtoLoadBalancerResponse) => (
<TableRow key={lb.id}>
<TableCell>{lb.name}</TableCell>
<TableCell>{lb.kind}</TableCell>
<TableCell>{lb.public_ip_address}</TableCell>
<TableCell>{lb.private_ip_address}</TableCell>
<TableCell>
<div className="flex items-center gap-2">
<LoadBalancerBadge lb={lb} />
{lb.id && (
<code className="text-muted-foreground text-xs">
{truncateMiddle(lb.id, 6)}
</code>
)}
</div>
</TableCell>
<TableCell>
<div className="flex justify-end gap-2">
<Button variant="outline" size="sm" onClick={() => openEdit(lb)}>
<Pencil className="mr-2 h-4 w-4" /> Edit
</Button>
<Button
variant="destructive"
size="sm"
onClick={() => setDeleteId(lb.id!)}
disabled={deleteMut.isPending && deleteId === lb.id}
>
{deleteMut.isPending && deleteId === lb.id ? "Deleting…" : "Delete"}
</Button>
</div>
</TableCell>
</TableRow>
))}
{filtered.length === 0 && (
<TableRow>
<TableCell colSpan={6} className="text-muted-foreground py-10 text-center">
<CircleSlash2 className="mx-auto mb-2 h-6 w-6 opacity-60" />
No load balancers 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 Load Balancer</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="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input placeholder="apps-lb-01" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={updateForm.control}
name="kind"
render={({ field }) => (
<FormItem>
<FormLabel>Kind</FormLabel>
<FormControl>
<Select onValueChange={field.onChange} value={field.value ?? "public"}>
<SelectTrigger>
<SelectValue placeholder="Select kind" />
</SelectTrigger>
<SelectContent>
<SelectItem value="public">Public</SelectItem>
<SelectItem value="glueops">GlueOps</SelectItem>
</SelectContent>
</Select>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={updateForm.control}
name="public_ip_address"
render={({ field }) => (
<FormItem>
<FormLabel>Public IP / Hostname</FormLabel>
<FormControl>
<Input placeholder="1.2.3.4 or apps.example.com" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={updateForm.control}
name="private_ip_address"
render={({ field }) => (
<FormItem>
<FormLabel>Private IP / Hostname</FormLabel>
<FormControl>
<Input placeholder="10.0.30.10" {...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 load balancer</DialogTitle>
</DialogHeader>
<p className="text-muted-foreground text-sm">
This action cannot be undone. Are you sure you want to delete this load balancer?
</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>
)
}

10
ui/src/sdkClient.ts
View File

@@ -4,10 +4,12 @@ import {
AnnotationsApi,
ArcherAdminApi,
AuthApi,
ClustersApi,
Configuration,
CredentialsApi,
DNSApi,
LabelsApi,
LoadBalancersApi,
MeApi,
MeAPIKeysApi,
MetaApi,
@@ -122,4 +124,12 @@ export function makeCredentialsApi() {
export function makeDnsApi() {
return makeApiClient(DNSApi)
}
export function makeLoadBalancerApi() {
return makeApiClient(LoadBalancersApi)
}
export function makeClusterApi() {
return makeApiClient(ClustersApi)
}