mirror of
https://github.com/GlueOps/autoglue.git
synced 2026-02-13 12:50:05 +01:00
feat: load balancers ui
Signed-off-by: allanice001 <allanice001@gmail.com>
This commit is contained in:
12
Makefile
12
Makefile
@@ -99,8 +99,8 @@ SDK_PKG_CLEAN := $(call trim,$(SDK_PKG))
|
|||||||
validate-spec check-tags doctor diff-swagger
|
validate-spec check-tags doctor diff-swagger
|
||||||
|
|
||||||
# --- inputs/outputs for swagger (incremental) ---
|
# --- inputs/outputs for swagger (incremental) ---
|
||||||
DOCS_JSON := docs/swagger.json
|
DOCS_JSON := docs/openapi.json
|
||||||
DOCS_YAML := docs/swagger.yaml
|
DOCS_YAML := docs/openapi.yaml
|
||||||
# Prefer git for speed; fall back to find. Exclude UI dir.
|
# 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 (git ls-files '*.go' ':!$(UI_DIR)/**' 2>/dev/null || find . -name '*.go' -not -path './$(UI_DIR)/*' -type f))
|
||||||
GO_SRCS := $(shell ( \
|
GO_SRCS := $(shell ( \
|
||||||
@@ -112,12 +112,14 @@ GO_SRCS := $(shell ( \
|
|||||||
$(DOCS_JSON) $(DOCS_YAML): $(GO_SRCS)
|
$(DOCS_JSON) $(DOCS_YAML): $(GO_SRCS)
|
||||||
@echo ">> Generating Swagger docs..."
|
@echo ">> Generating Swagger docs..."
|
||||||
@if ! command -v swag >/dev/null 2>&1; then \
|
@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; \
|
$(GOINSTALL) github.com/swaggo/swag/v2/cmd/swag@latest; \
|
||||||
fi
|
fi
|
||||||
@rm -rf docs/swagger.* docs/docs.go
|
@rm -rf docs/openapi.* docs/docs.go
|
||||||
@swag fmt -d .
|
@swag fmt --exclude main.go -d .
|
||||||
@swag init $(SWAG_FLAGS) -g $(MAIN) -o docs
|
@swag init $(SWAG_FLAGS) -g $(MAIN) -o docs
|
||||||
|
@mv docs/swagger.json $(DOCS_JSON)
|
||||||
|
@mv docs/swagger.yaml $(DOCS_YAML)
|
||||||
|
|
||||||
# --- spec validation + tag guard ---
|
# --- spec validation + tag guard ---
|
||||||
validate-spec: $(DOCS_JSON) ## Validate docs/swagger.json and pin the core OpenAPI Generator version
|
validate-spec: $(DOCS_JSON) ## Validate docs/swagger.json and pin the core OpenAPI Generator version
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@@ -2,8 +2,8 @@ package docs
|
|||||||
|
|
||||||
import _ "embed"
|
import _ "embed"
|
||||||
|
|
||||||
//go:embed swagger.json
|
//go:embed openapi.json
|
||||||
var SwaggerJSON []byte
|
var SwaggerJSON []byte
|
||||||
|
|
||||||
//go:embed swagger.yaml
|
//go:embed openapi.yaml
|
||||||
var SwaggerYAML []byte
|
var SwaggerYAML []byte
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@@ -203,7 +203,8 @@ components:
|
|||||||
properties:
|
properties:
|
||||||
kind:
|
kind:
|
||||||
enum:
|
enum:
|
||||||
- glueops|public
|
- glueops
|
||||||
|
- public
|
||||||
example: public
|
example: public
|
||||||
type: string
|
type: string
|
||||||
name:
|
name:
|
||||||
@@ -460,8 +461,6 @@ components:
|
|||||||
id:
|
id:
|
||||||
type: string
|
type: string
|
||||||
kind:
|
kind:
|
||||||
enum:
|
|
||||||
- glueops|public
|
|
||||||
type: string
|
type: string
|
||||||
name:
|
name:
|
||||||
type: string
|
type: string
|
||||||
@@ -758,7 +757,8 @@ components:
|
|||||||
properties:
|
properties:
|
||||||
kind:
|
kind:
|
||||||
enum:
|
enum:
|
||||||
- glueops|public
|
- glueops
|
||||||
|
- public
|
||||||
example: public
|
example: public
|
||||||
type: string
|
type: string
|
||||||
name:
|
name:
|
||||||
@@ -1126,7 +1126,22 @@ components:
|
|||||||
type: string
|
type: string
|
||||||
type: object
|
type: object
|
||||||
securitySchemes:
|
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
|
description: Org-level secret
|
||||||
in: header
|
in: header
|
||||||
name: X-ORG-SECRET
|
name: X-ORG-SECRET
|
||||||
@@ -12,8 +12,8 @@ import (
|
|||||||
func mountSwaggerRoutes(r chi.Router) {
|
func mountSwaggerRoutes(r chi.Router) {
|
||||||
r.Get("/swagger", RapidDocHandler("/swagger/swagger.yaml"))
|
r.Get("/swagger", RapidDocHandler("/swagger/swagger.yaml"))
|
||||||
r.Get("/swagger/index.html", 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/openapi.json", serveSwaggerFromEmbed(docs.SwaggerJSON, "application/json"))
|
||||||
r.Get("/swagger/swagger.yaml", serveSwaggerFromEmbed(docs.SwaggerYAML, "application/x-yaml"))
|
r.Get("/swagger/openapi.yaml", serveSwaggerFromEmbed(docs.SwaggerYAML, "application/x-yaml"))
|
||||||
}
|
}
|
||||||
|
|
||||||
var rapidDocTmpl = template.Must(template.New("redoc").Parse(`<!DOCTYPE html>
|
var rapidDocTmpl = template.Must(template.New("redoc").Parse(`<!DOCTYPE html>
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ type LoadBalancerResponse struct {
|
|||||||
ID uuid.UUID `json:"id"`
|
ID uuid.UUID `json:"id"`
|
||||||
OrganizationID uuid.UUID `json:"organization_id"`
|
OrganizationID uuid.UUID `json:"organization_id"`
|
||||||
Name string `json:"name"`
|
Name string `json:"name"`
|
||||||
Kind string `json:"kind" enums:"glueops|public"`
|
Kind string `json:"kind"`
|
||||||
PublicIPAddress string `json:"public_ip_address"`
|
PublicIPAddress string `json:"public_ip_address"`
|
||||||
PrivateIPAddress string `json:"private_ip_address"`
|
PrivateIPAddress string `json:"private_ip_address"`
|
||||||
CreatedAt time.Time `json:"created_at"`
|
CreatedAt time.Time `json:"created_at"`
|
||||||
@@ -19,14 +19,14 @@ type LoadBalancerResponse struct {
|
|||||||
|
|
||||||
type CreateLoadBalancerRequest struct {
|
type CreateLoadBalancerRequest struct {
|
||||||
Name string `json:"name" example:"glueops"`
|
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"`
|
PublicIPAddress string `json:"public_ip_address" example:"8.8.8.8"`
|
||||||
PrivateIPAddress string `json:"private_ip_address" example:"192.168.0.2"`
|
PrivateIPAddress string `json:"private_ip_address" example:"192.168.0.2"`
|
||||||
}
|
}
|
||||||
|
|
||||||
type UpdateLoadBalancerRequest struct {
|
type UpdateLoadBalancerRequest struct {
|
||||||
Name *string `json:"name" example:"glue"`
|
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"`
|
PublicIPAddress *string `json:"public_ip_address" example:"8.8.8.8"`
|
||||||
PrivateIPAddress *string `json:"private_ip_address" example:"192.168.0.2"`
|
PrivateIPAddress *string `json:"private_ip_address" example:"192.168.0.2"`
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ package handlers
|
|||||||
import (
|
import (
|
||||||
"encoding/json"
|
"encoding/json"
|
||||||
"errors"
|
"errors"
|
||||||
|
"fmt"
|
||||||
"net/http"
|
"net/http"
|
||||||
"strings"
|
"strings"
|
||||||
|
|
||||||
@@ -128,7 +129,8 @@ func CreateLoadBalancer(db *gorm.DB) http.HandlerFunc {
|
|||||||
return
|
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'")
|
utils.WriteError(w, http.StatusBadRequest, "bad_kind", "invalid kind only 'glueops' or 'public'")
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@@ -199,7 +201,8 @@ func UpdateLoadBalancer(db *gorm.DB) http.HandlerFunc {
|
|||||||
row.Name = *in.Name
|
row.Name = *in.Name
|
||||||
}
|
}
|
||||||
if in.Kind != nil {
|
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'")
|
utils.WriteError(w, http.StatusBadRequest, "bad_kind", "invalid kind only 'glueops' or 'public'")
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|||||||
52
main.go
52
main.go
@@ -4,37 +4,37 @@ import (
|
|||||||
"github.com/glueops/autoglue/cmd"
|
"github.com/glueops/autoglue/cmd"
|
||||||
)
|
)
|
||||||
|
|
||||||
// @title AutoGlue API
|
// @title AutoGlue API
|
||||||
// @version 1.0
|
// @version 1.0
|
||||||
// @description API for managing K3s clusters across cloud providers
|
// @description API for managing K3s clusters across cloud providers
|
||||||
// @contact.name GlueOps
|
// @contact.name GlueOps
|
||||||
|
|
||||||
// @servers.url https://autoglue.onglueops.rocks/api/v1
|
// @servers.url https://autoglue.onglueops.rocks/api/v1
|
||||||
// @servers.description Production API
|
// @servers.description Production API
|
||||||
// @servers.url https://autoglue.apps.nonprod.earth.onglueops.rocks/api/v1
|
// @servers.url https://autoglue.apps.nonprod.earth.onglueops.rocks/api/v1
|
||||||
// @servers.description Staging API
|
// @servers.description Staging API
|
||||||
// @servers.url http://localhost:8080/api/v1
|
// @servers.url http://localhost:8080/api/v1
|
||||||
// @servers.description Local dev
|
// @servers.description Local dev
|
||||||
|
|
||||||
// @securityDefinitions.apikey BearerAuth
|
// @securityDefinitions.apikey BearerAuth
|
||||||
// @in header
|
// @in header
|
||||||
// @name Authorization
|
// @name Authorization
|
||||||
// @description Bearer token authentication
|
// @description Bearer token authentication
|
||||||
|
|
||||||
// @securityDefinitions.apikey ApiKeyAuth
|
// @securityDefinitions.apikey ApiKeyAuth
|
||||||
// @in header
|
// @in header
|
||||||
// @name X-API-KEY
|
// @name X-API-KEY
|
||||||
// @description User API key
|
// @description User API key
|
||||||
|
|
||||||
// @securityDefinitions.apikey OrgKeyAuth
|
// @securityDefinitions.apikey OrgKeyAuth
|
||||||
// @in header
|
// @in header
|
||||||
// @name X-ORG-KEY
|
// @name X-ORG-KEY
|
||||||
// @description Org-level key/secret authentication
|
// @description Org-level key/secret authentication
|
||||||
|
|
||||||
// @securityDefinitions.apikey OrgSecretAuth
|
// @securityDefinitions.apikey OrgSecretAuth
|
||||||
// @in header
|
// @in header
|
||||||
// @name X-ORG-SECRET
|
// @name X-ORG-SECRET
|
||||||
// @description Org-level secret
|
// @description Org-level secret
|
||||||
|
|
||||||
func main() {
|
func main() {
|
||||||
cmd.Execute()
|
cmd.Execute()
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ import { DnsPage } from "@/pages/dns/dns-page.tsx"
|
|||||||
import { DocsPage } from "@/pages/docs/docs-page.tsx"
|
import { DocsPage } from "@/pages/docs/docs-page.tsx"
|
||||||
import { JobsPage } from "@/pages/jobs/jobs-page.tsx"
|
import { JobsPage } from "@/pages/jobs/jobs-page.tsx"
|
||||||
import { LabelsPage } from "@/pages/labels/labels-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 { MePage } from "@/pages/me/me-page.tsx"
|
||||||
import { NodePoolsPage } from "@/pages/nodepools/node-pools-page.tsx"
|
import { NodePoolsPage } from "@/pages/nodepools/node-pools-page.tsx"
|
||||||
import { OrgApiKeys } from "@/pages/org/api-keys.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="/node-pools" element={<NodePoolsPage />} />
|
||||||
<Route path="/credentials" element={<CredentialPage />} />
|
<Route path="/credentials" element={<CredentialPage />} />
|
||||||
<Route path="/dns" element={<DnsPage />} />
|
<Route path="/dns" element={<DnsPage />} />
|
||||||
|
<Route path="/load-balancers" element={<LoadBalancersPage />} />
|
||||||
|
|
||||||
<Route path="/admin/jobs" element={<JobsPage />} />
|
<Route path="/admin/jobs" element={<JobsPage />} />
|
||||||
</Route>
|
</Route>
|
||||||
|
|||||||
@@ -10,7 +10,9 @@ export const annotationsApi = {
|
|||||||
}),
|
}),
|
||||||
createAnnotation: (body: DtoCreateAnnotationRequest) =>
|
createAnnotation: (body: DtoCreateAnnotationRequest) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
return await annotations.createAnnotation({ body })
|
return await annotations.createAnnotation({
|
||||||
|
dtoCreateAnnotationRequest: body,
|
||||||
|
})
|
||||||
}),
|
}),
|
||||||
getAnnotation: (id: string) =>
|
getAnnotation: (id: string) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
@@ -22,6 +24,9 @@ export const annotationsApi = {
|
|||||||
}),
|
}),
|
||||||
updateAnnotation: (id: string, body: DtoUpdateAnnotationRequest) =>
|
updateAnnotation: (id: string, body: DtoUpdateAnnotationRequest) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
return await annotations.updateAnnotation({ id, body })
|
return await annotations.updateAnnotation({
|
||||||
|
id,
|
||||||
|
dtoUpdateAnnotationRequest: body,
|
||||||
|
})
|
||||||
}),
|
}),
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ export const archerAdminApi = {
|
|||||||
run_at?: string
|
run_at?: string
|
||||||
}) => {
|
}) => {
|
||||||
return withRefresh(async () => {
|
return withRefresh(async () => {
|
||||||
return await archerAdmin.adminEnqueueArcherJob({ body })
|
return await archerAdmin.adminEnqueueArcherJob({ dtoEnqueueRequest: body })
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
retryJob: (id: string) => {
|
retryJob: (id: string) => {
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ export const credentialsApi = {
|
|||||||
}),
|
}),
|
||||||
createCredential: async (body: DtoCreateCredentialRequest) =>
|
createCredential: async (body: DtoCreateCredentialRequest) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
return await credentials.createCredential({ body })
|
return await credentials.createCredential({ dtoCreateCredentialRequest: body })
|
||||||
}),
|
}),
|
||||||
getCredential: async (id: string) =>
|
getCredential: async (id: string) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
@@ -23,7 +23,7 @@ export const credentialsApi = {
|
|||||||
}),
|
}),
|
||||||
updateCredential: async (id: string, body: DtoUpdateCredentialRequest) =>
|
updateCredential: async (id: string, body: DtoUpdateCredentialRequest) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
return await credentials.updateCredential({ id, body })
|
return await credentials.updateCredential({ id, dtoUpdateCredentialRequest: body })
|
||||||
}),
|
}),
|
||||||
revealCredential: async (id: string) =>
|
revealCredential: async (id: string) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
|
|||||||
@@ -20,11 +20,11 @@ export const dnsApi = {
|
|||||||
}),
|
}),
|
||||||
createDomain: async (body: DtoCreateDomainRequest) =>
|
createDomain: async (body: DtoCreateDomainRequest) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
return await dns.createDomain({ body })
|
return await dns.createDomain({ dtoCreateDomainRequest: body })
|
||||||
}),
|
}),
|
||||||
updateDomain: async (id: string, body: DtoUpdateDomainRequest) =>
|
updateDomain: async (id: string, body: DtoUpdateDomainRequest) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
return await dns.updateDomain({ id, body })
|
return await dns.updateDomain({ id, dtoUpdateDomainRequest: body })
|
||||||
}),
|
}),
|
||||||
deleteDomain: async (id: string) =>
|
deleteDomain: async (id: string) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
@@ -36,11 +36,11 @@ export const dnsApi = {
|
|||||||
}),
|
}),
|
||||||
createRecordSetsByDomain: async (domainId: string, body: DtoCreateRecordSetRequest) =>
|
createRecordSetsByDomain: async (domainId: string, body: DtoCreateRecordSetRequest) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
return await dns.createRecordSet({ domainId, body })
|
return await dns.createRecordSet({ domainId, dtoCreateRecordSetRequest: body })
|
||||||
}),
|
}),
|
||||||
updateRecordSetsByDomain: async (id: string, body: DtoUpdateRecordSetRequest) =>
|
updateRecordSetsByDomain: async (id: string, body: DtoUpdateRecordSetRequest) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
return await dns.updateRecordSet({ id, body })
|
return await dns.updateRecordSet({ id, dtoUpdateRecordSetRequest: body })
|
||||||
}),
|
}),
|
||||||
deleteRecordSetsByDomain: async (id: string) =>
|
deleteRecordSetsByDomain: async (id: string) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ export const labelsApi = {
|
|||||||
}),
|
}),
|
||||||
createLabel: (body: DtoCreateLabelRequest) =>
|
createLabel: (body: DtoCreateLabelRequest) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
return await labels.createLabel({ body })
|
return await labels.createLabel({ dtoCreateLabelRequest: body })
|
||||||
}),
|
}),
|
||||||
getLabel: (id: string) =>
|
getLabel: (id: string) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
@@ -23,6 +23,6 @@ export const labelsApi = {
|
|||||||
}),
|
}),
|
||||||
updateLabel: (id: string, body: DtoUpdateLabelRequest) =>
|
updateLabel: (id: string, body: DtoUpdateLabelRequest) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
return await labels.updateLabel({ id, body })
|
return await labels.updateLabel({ id, dtoUpdateLabelRequest: body })
|
||||||
}),
|
}),
|
||||||
}
|
}
|
||||||
|
|||||||
32
ui/src/api/loadbalancers.ts
Normal file
32
ui/src/api/loadbalancers.ts
Normal 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 })
|
||||||
|
}),
|
||||||
|
}
|
||||||
@@ -19,7 +19,7 @@ export const meApi = {
|
|||||||
|
|
||||||
updateMe: (body: HandlersUpdateMeRequest) =>
|
updateMe: (body: HandlersUpdateMeRequest) =>
|
||||||
withRefresh(async (): Promise<ModelsUser> => {
|
withRefresh(async (): Promise<ModelsUser> => {
|
||||||
return await me.updateMe({ body })
|
return await me.updateMe({ handlersUpdateMeRequest: body })
|
||||||
}),
|
}),
|
||||||
|
|
||||||
listKeys: () =>
|
listKeys: () =>
|
||||||
@@ -29,7 +29,7 @@ export const meApi = {
|
|||||||
|
|
||||||
createKey: (body: HandlersCreateUserKeyRequest) =>
|
createKey: (body: HandlersCreateUserKeyRequest) =>
|
||||||
withRefresh(async (): Promise<HandlersUserAPIKeyOut> => {
|
withRefresh(async (): Promise<HandlersUserAPIKeyOut> => {
|
||||||
return await keys.createUserAPIKey({ body })
|
return await keys.createUserAPIKey({ handlersCreateUserKeyRequest: body })
|
||||||
}),
|
}),
|
||||||
|
|
||||||
deleteKey: (id: string) =>
|
deleteKey: (id: string) =>
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ export const nodePoolsApi = {
|
|||||||
}),
|
}),
|
||||||
createNodePool: (body: DtoCreateNodePoolRequest) =>
|
createNodePool: (body: DtoCreateNodePoolRequest) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
return await nodePools.createNodePool({ body })
|
return await nodePools.createNodePool({ dtoCreateNodePoolRequest: body })
|
||||||
}),
|
}),
|
||||||
getNodePool: (id: string) =>
|
getNodePool: (id: string) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
@@ -34,7 +34,7 @@ export const nodePoolsApi = {
|
|||||||
}),
|
}),
|
||||||
updateNodePool: (id: string, body: DtoUpdateNodePoolRequest) =>
|
updateNodePool: (id: string, body: DtoUpdateNodePoolRequest) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
return await nodePools.updateNodePool({ id, body })
|
return await nodePools.updateNodePool({ id, dtoUpdateNodePoolRequest: body })
|
||||||
}),
|
}),
|
||||||
// Servers
|
// Servers
|
||||||
listNodePoolServers: (id: string) =>
|
listNodePoolServers: (id: string) =>
|
||||||
@@ -43,7 +43,7 @@ export const nodePoolsApi = {
|
|||||||
}),
|
}),
|
||||||
attachNodePoolServer: (id: string, body: DtoAttachServersRequest) =>
|
attachNodePoolServer: (id: string, body: DtoAttachServersRequest) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
return await nodePools.attachNodePoolServers({ id, body })
|
return await nodePools.attachNodePoolServers({ id, dtoAttachServersRequest: body })
|
||||||
}),
|
}),
|
||||||
detachNodePoolServers: (id: string, serverId: string) =>
|
detachNodePoolServers: (id: string, serverId: string) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
@@ -56,7 +56,7 @@ export const nodePoolsApi = {
|
|||||||
}),
|
}),
|
||||||
attachNodePoolTaints: (id: string, body: DtoAttachTaintsRequest) =>
|
attachNodePoolTaints: (id: string, body: DtoAttachTaintsRequest) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
return await nodePools.attachNodePoolTaints({ id, body })
|
return await nodePools.attachNodePoolTaints({ id, dtoAttachTaintsRequest: body })
|
||||||
}),
|
}),
|
||||||
detachNodePoolTaints: (id: string, taintId: string) =>
|
detachNodePoolTaints: (id: string, taintId: string) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
@@ -69,7 +69,7 @@ export const nodePoolsApi = {
|
|||||||
}),
|
}),
|
||||||
attachNodePoolLabels: (id: string, body: DtoAttachLabelsRequest) =>
|
attachNodePoolLabels: (id: string, body: DtoAttachLabelsRequest) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
return await nodePools.attachNodePoolLabels({ id, body })
|
return await nodePools.attachNodePoolLabels({ id, dtoAttachLabelsRequest: body })
|
||||||
}),
|
}),
|
||||||
detachNodePoolLabels: (id: string, labelId: string) =>
|
detachNodePoolLabels: (id: string, labelId: string) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
@@ -82,7 +82,7 @@ export const nodePoolsApi = {
|
|||||||
}),
|
}),
|
||||||
attachNodePoolAnnotations: (id: string, body: DtoAttachAnnotationsRequest) =>
|
attachNodePoolAnnotations: (id: string, body: DtoAttachAnnotationsRequest) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
return await nodePools.attachNodePoolAnnotations({ id, body })
|
return await nodePools.attachNodePoolAnnotations({ id, dtoAttachAnnotationsRequest: body })
|
||||||
}),
|
}),
|
||||||
detachNodePoolAnnotations: (id: string, annotationId: string) =>
|
detachNodePoolAnnotations: (id: string, annotationId: string) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ export const serversApi = {
|
|||||||
}),
|
}),
|
||||||
createServer: (body: DtoCreateServerRequest) =>
|
createServer: (body: DtoCreateServerRequest) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
return await servers.createServer({ body })
|
return await servers.createServer({ dtoCreateServerRequest: body })
|
||||||
}),
|
}),
|
||||||
getServer: (id: string) =>
|
getServer: (id: string) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
@@ -19,7 +19,7 @@ export const serversApi = {
|
|||||||
}),
|
}),
|
||||||
updateServer: (id: string, body: DtoUpdateServerRequest) =>
|
updateServer: (id: string, body: DtoUpdateServerRequest) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
return await servers.updateServer({ id, body })
|
return await servers.updateServer({ id, dtoUpdateServerRequest: body })
|
||||||
}),
|
}),
|
||||||
deleteServer: (id: string) =>
|
deleteServer: (id: string) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
|
|||||||
@@ -33,7 +33,7 @@ export const sshApi = {
|
|||||||
createSshKey: (body: DtoCreateSSHRequest) =>
|
createSshKey: (body: DtoCreateSSHRequest) =>
|
||||||
withRefresh(async (): Promise<DtoSshResponse> => {
|
withRefresh(async (): Promise<DtoSshResponse> => {
|
||||||
// SDK expects { body }
|
// SDK expects { body }
|
||||||
return await ssh.createSSHKey({ body })
|
return await ssh.createSSHKey({ dtoCreateSSHRequest: body })
|
||||||
}),
|
}),
|
||||||
|
|
||||||
getSshKeyById: (id: string) =>
|
getSshKeyById: (id: string) =>
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ export const taintsApi = {
|
|||||||
}),
|
}),
|
||||||
createTaint: (body: DtoCreateTaintRequest) =>
|
createTaint: (body: DtoCreateTaintRequest) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
return await taints.createTaint({ body })
|
return await taints.createTaint({ dtoCreateTaintRequest: body })
|
||||||
}),
|
}),
|
||||||
getTaint: (id: string) =>
|
getTaint: (id: string) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
@@ -22,6 +22,6 @@ export const taintsApi = {
|
|||||||
}),
|
}),
|
||||||
updateTaint: (id: string, body: DtoUpdateTaintRequest) =>
|
updateTaint: (id: string, body: DtoUpdateTaintRequest) =>
|
||||||
withRefresh(async () => {
|
withRefresh(async () => {
|
||||||
return await taints.updateTaint({ id, body })
|
return await taints.updateTaint({ id, dtoUpdateTaintRequest: body })
|
||||||
}),
|
}),
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -16,6 +16,7 @@ import { AiOutlineCluster } from "react-icons/ai"
|
|||||||
import { GrUserWorker } from "react-icons/gr"
|
import { GrUserWorker } from "react-icons/gr"
|
||||||
import { MdOutlineDns } from "react-icons/md"
|
import { MdOutlineDns } from "react-icons/md"
|
||||||
import { SiSwagger } from "react-icons/si"
|
import { SiSwagger } from "react-icons/si"
|
||||||
|
import { TbLoadBalancer } from "react-icons/tb"
|
||||||
|
|
||||||
export type NavItem = {
|
export type NavItem = {
|
||||||
to: string
|
to: string
|
||||||
@@ -26,6 +27,7 @@ export type NavItem = {
|
|||||||
|
|
||||||
export const mainNav: NavItem[] = [
|
export const mainNav: NavItem[] = [
|
||||||
{ to: "/clusters", label: "Clusters", icon: AiOutlineCluster },
|
{ to: "/clusters", label: "Clusters", icon: AiOutlineCluster },
|
||||||
|
{ to: "/load-balancers", label: "Load Balancers", icon: TbLoadBalancer},
|
||||||
{ to: "/dns", label: "DNS", icon: MdOutlineDns },
|
{ to: "/dns", label: "DNS", icon: MdOutlineDns },
|
||||||
{ to: "/node-pools", label: "Node Pools", icon: BoxesIcon },
|
{ to: "/node-pools", label: "Node Pools", icon: BoxesIcon },
|
||||||
{ to: "/annotations", label: "Annotations", icon: ComponentIcon },
|
{ to: "/annotations", label: "Annotations", icon: ComponentIcon },
|
||||||
|
|||||||
@@ -152,7 +152,7 @@ export const DocsPage: FC = () => {
|
|||||||
<rapi-doc
|
<rapi-doc
|
||||||
ref={rdRef}
|
ref={rdRef}
|
||||||
id="autoglue-docs"
|
id="autoglue-docs"
|
||||||
spec-url="/swagger/swagger.json"
|
spec-url="/swagger/openapi.json"
|
||||||
render-style="read"
|
render-style="read"
|
||||||
show-header="false"
|
show-header="false"
|
||||||
persist-auth="true"
|
persist-auth="true"
|
||||||
|
|||||||
479
ui/src/pages/loadbalancers/load-balancers-page.tsx
Normal file
479
ui/src/pages/loadbalancers/load-balancers-page.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -4,10 +4,12 @@ import {
|
|||||||
AnnotationsApi,
|
AnnotationsApi,
|
||||||
ArcherAdminApi,
|
ArcherAdminApi,
|
||||||
AuthApi,
|
AuthApi,
|
||||||
|
ClustersApi,
|
||||||
Configuration,
|
Configuration,
|
||||||
CredentialsApi,
|
CredentialsApi,
|
||||||
DNSApi,
|
DNSApi,
|
||||||
LabelsApi,
|
LabelsApi,
|
||||||
|
LoadBalancersApi,
|
||||||
MeApi,
|
MeApi,
|
||||||
MeAPIKeysApi,
|
MeAPIKeysApi,
|
||||||
MetaApi,
|
MetaApi,
|
||||||
@@ -123,3 +125,11 @@ export function makeCredentialsApi() {
|
|||||||
export function makeDnsApi() {
|
export function makeDnsApi() {
|
||||||
return makeApiClient(DNSApi)
|
return makeApiClient(DNSApi)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function makeLoadBalancerApi() {
|
||||||
|
return makeApiClient(LoadBalancersApi)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function makeClusterApi() {
|
||||||
|
return makeApiClient(ClustersApi)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user