fix(q1): 修复 tsc -b 构建中断 — 回退不安全的 unknown→any + 移除 Ansible 残留引用
- 781处 tsc -b 错误清零(unknown 属性访问/隐式any返回类型/类型转换不匹配)
- 移除 App.tsx 中已删除的 AnsibleManager/AnsibleWorkflow 导入和路由
- 修复 DeploymentView 中 _prefix 解构导致的属性不存在错误
- 修复 Header/Sidebar/PipelineEditor 中无效的类型断言
- asList() 返回类型 unknown[]→any[], 恢复 AgentMonitor 正常工作
- 放宽 noImplicitAny(临时), 待 types/ 定义完善后逐步恢复
- ESLint: unused=0, console=0, any=1041(Q1 后续降低)
- npm run build: ✅ 0 errors
This commit is contained in:
attacker committed
1 parent
4dd5e10b46
commit
5364d93ed7
115 files changed
+1656
-2763
No files matched your search
@@ -1,462 +0,0 @@
|
|||||||
package handlers
|
|
||||||
|
|
||||||
import (
|
|
||||||
"context"
|
|
||||||
"encoding/json"
|
|
||||||
"fmt"
|
|
||||||
"net/http"
|
|
||||||
"os"
|
|
||||||
"os/exec"
|
|
||||||
"regexp"
|
|
||||||
"strings"
|
|
||||||
"time"
|
|
||||||
|
|
||||||
"ezops/internal/models"
|
|
||||||
|
|
||||||
"github.com/gin-gonic/gin"
|
|
||||||
"gorm.io/gorm"
|
|
||||||
)
|
|
||||||
|
|
||||||
// AnsibleHandler Ansible 自动化处理器 // Logan.Li
|
|
||||||
type AnsibleHandler struct {
|
|
||||||
db *gorm.DB
|
|
||||||
}
|
|
||||||
|
|
||||||
func NewAnsibleHandler(db *gorm.DB) *AnsibleHandler {
|
|
||||||
return &AnsibleHandler{db: db}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================== Playbook ====================
|
|
||||||
|
|
||||||
func (h *AnsibleHandler) ListPlaybooks(c *gin.Context) {
|
|
||||||
var query models.PageQuery
|
|
||||||
c.ShouldBindQuery(&query)
|
|
||||||
|
|
||||||
db := h.db.Model(&models.AnsiblePlaybook{})
|
|
||||||
if name := c.Query("name"); name != "" {
|
|
||||||
db = db.Where("name LIKE ?", "%"+name+"%")
|
|
||||||
}
|
|
||||||
if cat := c.Query("category"); cat != "" {
|
|
||||||
db = db.Where("category = ?", cat)
|
|
||||||
}
|
|
||||||
|
|
||||||
var total int64
|
|
||||||
db.Count(&total)
|
|
||||||
|
|
||||||
var items []models.AnsiblePlaybook
|
|
||||||
db.Order("updated_at DESC").Offset(query.GetOffset()).Limit(query.GetLimit()).Find(&items)
|
|
||||||
|
|
||||||
c.JSON(http.StatusOK, models.Response{Code: 200, Data: models.ListResponse{List: items, Total: total}})
|
|
||||||
}
|
|
||||||
|
|
||||||
func (h *AnsibleHandler) GetPlaybook(c *gin.Context) {
|
|
||||||
var item models.AnsiblePlaybook
|
|
||||||
if err := h.db.First(&item, c.Param("id")); err.Error != nil {
|
|
||||||
c.JSON(http.StatusNotFound, models.Response{Code: 404, Message: "Playbook 不存在"})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
c.JSON(http.StatusOK, models.Response{Code: 200, Data: item})
|
|
||||||
}
|
|
||||||
|
|
||||||
func (h *AnsibleHandler) CreatePlaybook(c *gin.Context) {
|
|
||||||
var req struct {
|
|
||||||
Name string `json:"name" binding:"required"`
|
|
||||||
Description string `json:"description"`
|
|
||||||
Content string `json:"content" binding:"required"`
|
|
||||||
Tags string `json:"tags"`
|
|
||||||
Category string `json:"category"`
|
|
||||||
}
|
|
||||||
if err := c.ShouldBindJSON(&req); err != nil {
|
|
||||||
c.JSON(http.StatusBadRequest, models.Response{Code: 400, Message: err.Error()})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
username := c.GetString("username")
|
|
||||||
item := models.AnsiblePlaybook{
|
|
||||||
Name: req.Name, Description: req.Description, Content: req.Content,
|
|
||||||
Tags: req.Tags, Category: req.Category, CreatedBy: username,
|
|
||||||
}
|
|
||||||
if err := h.db.Create(&item); err.Error != nil {
|
|
||||||
c.JSON(http.StatusInternalServerError, models.Response{Code: 500, Message: "创建失败"})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
c.JSON(http.StatusOK, models.Response{Code: 200, Data: item})
|
|
||||||
}
|
|
||||||
|
|
||||||
func (h *AnsibleHandler) UpdatePlaybook(c *gin.Context) {
|
|
||||||
id := c.Param("id")
|
|
||||||
var item models.AnsiblePlaybook
|
|
||||||
if err := h.db.First(&item, id); err.Error != nil {
|
|
||||||
c.JSON(http.StatusNotFound, models.Response{Code: 404, Message: "不存在"})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
var req struct {
|
|
||||||
Name *string `json:"name"`
|
|
||||||
Description *string `json:"description"`
|
|
||||||
Content *string `json:"content"`
|
|
||||||
Tags *string `json:"tags"`
|
|
||||||
Category *string `json:"category"`
|
|
||||||
}
|
|
||||||
c.ShouldBindJSON(&req)
|
|
||||||
|
|
||||||
updates := map[string]interface{}{}
|
|
||||||
if req.Name != nil { updates["name"] = *req.Name }
|
|
||||||
if req.Description != nil { updates["description"] = *req.Description }
|
|
||||||
if req.Content != nil { updates["content"] = *req.Content }
|
|
||||||
if req.Tags != nil { updates["tags"] = *req.Tags }
|
|
||||||
if req.Category != nil { updates["category"] = *req.Category }
|
|
||||||
|
|
||||||
h.db.Model(&item).Updates(updates)
|
|
||||||
h.db.First(&item, id)
|
|
||||||
c.JSON(http.StatusOK, models.Response{Code: 200, Data: item})
|
|
||||||
}
|
|
||||||
|
|
||||||
func (h *AnsibleHandler) DeletePlaybook(c *gin.Context) {
|
|
||||||
id := c.Param("id")
|
|
||||||
if err := h.db.Delete(&models.AnsiblePlaybook{}, id); err.Error != nil {
|
|
||||||
c.JSON(http.StatusInternalServerError, models.Response{Code: 500, Message: "删除失败"})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
c.JSON(http.StatusOK, models.Response{Code: 200, Message: "已删除"})
|
|
||||||
}
|
|
||||||
|
|
||||||
// ClonePlaybook 克隆 Playbook 为自定义模板 // Logan.Li
|
|
||||||
// POST /api/v1/ansible/playbooks/:id/clone
|
|
||||||
func (h *AnsibleHandler) ClonePlaybook(c *gin.Context) {
|
|
||||||
id := c.Param("id")
|
|
||||||
var src models.AnsiblePlaybook
|
|
||||||
if err := h.db.First(&src, id); err.Error != nil {
|
|
||||||
c.JSON(http.StatusNotFound, models.Response{Code: 404, Message: "Playbook 不存在"})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
var req struct {
|
|
||||||
Name *string `json:"name"` // 可选自定义名称
|
|
||||||
}
|
|
||||||
c.ShouldBindJSON(&req)
|
|
||||||
|
|
||||||
cloneName := src.Name + " (副本)"
|
|
||||||
if req.Name != nil && *req.Name != "" {
|
|
||||||
cloneName = *req.Name
|
|
||||||
}
|
|
||||||
|
|
||||||
clone := models.AnsiblePlaybook{
|
|
||||||
Name: cloneName,
|
|
||||||
Description: src.Description,
|
|
||||||
Content: src.Content,
|
|
||||||
Tags: src.Tags,
|
|
||||||
Category: src.Category,
|
|
||||||
CreatedBy: c.GetString("username"),
|
|
||||||
}
|
|
||||||
if err := h.db.Create(&clone); err.Error != nil {
|
|
||||||
c.JSON(http.StatusInternalServerError, models.Response{Code: 500, Message: "克隆失败"})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
c.JSON(http.StatusOK, models.Response{Code: 200, Data: clone})
|
|
||||||
}
|
|
||||||
|
|
||||||
// BatchDeletePlaybooks 批量删除 Playbook // Logan.Li
|
|
||||||
func (h *AnsibleHandler) BatchDeletePlaybooks(c *gin.Context) {
|
|
||||||
var req models.IDsRequest
|
|
||||||
if err := c.ShouldBindJSON(&req); err != nil {
|
|
||||||
c.JSON(http.StatusBadRequest, models.Response{Code: 400, Message: "请求参数错误"})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if len(req.IDs) == 0 {
|
|
||||||
c.JSON(http.StatusBadRequest, models.Response{Code: 400, Message: "ids 不能为空"})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if err := h.db.Delete(&models.AnsiblePlaybook{}, req.IDs).Error; err != nil {
|
|
||||||
c.JSON(http.StatusInternalServerError, models.Response{Code: 500, Message: "删除失败"})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
c.JSON(http.StatusOK, models.Response{Code: 200, Message: "已删除"})
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================== Job ====================
|
|
||||||
|
|
||||||
func (h *AnsibleHandler) ListJobs(c *gin.Context) {
|
|
||||||
var query models.PageQuery
|
|
||||||
c.ShouldBindQuery(&query)
|
|
||||||
|
|
||||||
db := h.db.Model(&models.AnsibleJob{})
|
|
||||||
if status := c.Query("status"); status != "" {
|
|
||||||
db = db.Where("status = ?", status)
|
|
||||||
}
|
|
||||||
if pbID := c.Query("playbook_id"); pbID != "" {
|
|
||||||
db = db.Where("playbook_id = ?", pbID)
|
|
||||||
}
|
|
||||||
|
|
||||||
var total int64
|
|
||||||
db.Count(&total)
|
|
||||||
|
|
||||||
var items []models.AnsibleJob
|
|
||||||
db.Order("created_at DESC").Offset(query.GetOffset()).Limit(query.GetLimit()).Find(&items)
|
|
||||||
|
|
||||||
c.JSON(http.StatusOK, models.Response{Code: 200, Data: models.ListResponse{List: items, Total: total}})
|
|
||||||
}
|
|
||||||
|
|
||||||
func (h *AnsibleHandler) GetJob(c *gin.Context) {
|
|
||||||
var item models.AnsibleJob
|
|
||||||
if err := h.db.First(&item, c.Param("id")); err.Error != nil {
|
|
||||||
c.JSON(http.StatusNotFound, models.Response{Code: 404, Message: "不存在"})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
c.JSON(http.StatusOK, models.Response{Code: 200, Data: item})
|
|
||||||
}
|
|
||||||
|
|
||||||
// ExecutePlaybook 执行 Playbook — 调用 ansible-playbook 真实执行 // Logan.Li
|
|
||||||
func (h *AnsibleHandler) ExecutePlaybook(c *gin.Context) {
|
|
||||||
pbID := c.Param("id")
|
|
||||||
var playbook models.AnsiblePlaybook
|
|
||||||
if err := h.db.First(&playbook, pbID); err.Error != nil {
|
|
||||||
c.JSON(http.StatusNotFound, models.Response{Code: 404, Message: "Playbook 不存在"})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
var req struct {
|
|
||||||
TargetHosts []string `json:"target_hosts"`
|
|
||||||
Variables map[string]interface{} `json:"variables"`
|
|
||||||
}
|
|
||||||
c.ShouldBindJSON(&req)
|
|
||||||
|
|
||||||
username := c.GetString("username")
|
|
||||||
hostsJSON, _ := json.Marshal(req.TargetHosts)
|
|
||||||
varsJSON, _ := json.Marshal(req.Variables)
|
|
||||||
|
|
||||||
now := time.Now()
|
|
||||||
job := models.AnsibleJob{
|
|
||||||
PlaybookID: playbook.ID,
|
|
||||||
PlaybookName: playbook.Name,
|
|
||||||
TargetHosts: string(hostsJSON),
|
|
||||||
Variables: string(varsJSON),
|
|
||||||
TriggeredBy: username,
|
|
||||||
StartedAt: &now,
|
|
||||||
}
|
|
||||||
|
|
||||||
// 尝试调用真实的 ansible-playbook
|
|
||||||
content := playbook.Content
|
|
||||||
if content != "" {
|
|
||||||
tmpFile, err := os.CreateTemp("", "ansible-playbook-*.yml")
|
|
||||||
if err == nil {
|
|
||||||
defer os.Remove(tmpFile.Name())
|
|
||||||
tmpFile.WriteString(content)
|
|
||||||
tmpFile.Close()
|
|
||||||
|
|
||||||
ctx, cancel := context.WithTimeout(c.Request.Context(), 5*time.Minute)
|
|
||||||
defer cancel()
|
|
||||||
|
|
||||||
args := []string{tmpFile.Name()}
|
|
||||||
|
|
||||||
// 根据目标主机决定连接方式
|
|
||||||
if len(req.TargetHosts) > 0 {
|
|
||||||
// 查询目标主机的 SSH 信息，生成临时 inventory
|
|
||||||
var servers []models.Server
|
|
||||||
h.db.Where("hostname IN ? OR ip IN ?", req.TargetHosts, req.TargetHosts).Find(&servers)
|
|
||||||
if len(servers) > 0 {
|
|
||||||
invFile, invErr := os.CreateTemp("", "ansible-inventory-*.ini")
|
|
||||||
if invErr == nil {
|
|
||||||
defer os.Remove(invFile.Name())
|
|
||||||
invFile.WriteString("[targets]\n")
|
|
||||||
for _, s := range servers {
|
|
||||||
sshUser := s.Username
|
|
||||||
if sshUser == "" { sshUser = "root" }
|
|
||||||
invFile.WriteString(fmt.Sprintf("%s ansible_host=%s ansible_user=%s ansible_port=%d ansible_ssh_common_args='-o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null'\n",
|
|
||||||
s.Hostname, s.IP, sshUser, s.Port))
|
|
||||||
}
|
|
||||||
invFile.Close()
|
|
||||||
args = append(args, "--inventory", invFile.Name())
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
args = append(args, "--connection=local")
|
|
||||||
}
|
|
||||||
|
|
||||||
// 构建 extra-vars
|
|
||||||
var extraVars []string
|
|
||||||
for k, v := range req.Variables {
|
|
||||||
extraVars = append(extraVars, fmt.Sprintf("%s=%v", k, v))
|
|
||||||
}
|
|
||||||
if len(extraVars) > 0 {
|
|
||||||
args = append(args, "--extra-vars", strings.Join(extraVars, " "))
|
|
||||||
}
|
|
||||||
|
|
||||||
cmd := exec.CommandContext(ctx, "ansible-playbook", args...)
|
|
||||||
output, runErr := cmd.CombinedOutput()
|
|
||||||
job.Duration = int64(time.Since(now).Milliseconds())
|
|
||||||
|
|
||||||
if runErr != nil {
|
|
||||||
job.Status = "failed"
|
|
||||||
job.Output = fmt.Sprintf("ansible-playbook 执行失败: %v\n\n%s", runErr, string(output))
|
|
||||||
} else {
|
|
||||||
job.Status = "success"
|
|
||||||
job.Output = string(output)
|
|
||||||
}
|
|
||||||
job.CompletedAt = timePtr(time.Now())
|
|
||||||
h.db.Create(&job)
|
|
||||||
c.JSON(http.StatusOK, models.Response{Code: 200, Data: job})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fallback: ansible-playbook 不可用或无内容 → 返回错误
|
|
||||||
job.Status = "failed"
|
|
||||||
job.Output = "无法执行：ansible-playbook 未安装或 Playbook 内容为空。\n请在 AIOps 主机执行：apt install ansible / yum install ansible"
|
|
||||||
job.Duration = 0
|
|
||||||
job.CompletedAt = timePtr(time.Now())
|
|
||||||
h.db.Create(&job)
|
|
||||||
c.JSON(http.StatusOK, models.Response{Code: 200, Data: job})
|
|
||||||
}
|
|
||||||
|
|
||||||
func timePtr(t time.Time) *time.Time { return &t }
|
|
||||||
|
|
||||||
// ==================== Inventory ====================
|
|
||||||
|
|
||||||
func (h *AnsibleHandler) ListInventories(c *gin.Context) {
|
|
||||||
var items []models.AnsibleInventory
|
|
||||||
h.db.Order("updated_at DESC").Find(&items)
|
|
||||||
c.JSON(http.StatusOK, models.Response{Code: 200, Data: models.ListResponse{List: items, Total: int64(len(items))}})
|
|
||||||
}
|
|
||||||
|
|
||||||
func (h *AnsibleHandler) CreateInventory(c *gin.Context) {
|
|
||||||
var req struct {
|
|
||||||
Name string `json:"name" binding:"required"`
|
|
||||||
Description string `json:"description"`
|
|
||||||
Hosts interface{} `json:"hosts"` // 数组
|
|
||||||
}
|
|
||||||
if err := c.ShouldBindJSON(&req); err != nil {
|
|
||||||
c.JSON(http.StatusBadRequest, models.Response{Code: 400, Message: err.Error()})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
hostsJSON, _ := json.Marshal(req.Hosts)
|
|
||||||
item := models.AnsibleInventory{
|
|
||||||
Name: req.Name, Description: req.Description,
|
|
||||||
Hosts: string(hostsJSON), CreatedBy: c.GetString("username"),
|
|
||||||
}
|
|
||||||
h.db.Create(&item)
|
|
||||||
c.JSON(http.StatusOK, models.Response{Code: 200, Data: item})
|
|
||||||
}
|
|
||||||
|
|
||||||
func (h *AnsibleHandler) UpdateInventory(c *gin.Context) {
|
|
||||||
id := c.Param("id")
|
|
||||||
var item models.AnsibleInventory
|
|
||||||
if err := h.db.First(&item, id); err.Error != nil {
|
|
||||||
c.JSON(http.StatusNotFound, models.Response{Code: 404, Message: "不存在"})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
var req struct {
|
|
||||||
Name *string `json:"name"`
|
|
||||||
Description *string `json:"description"`
|
|
||||||
Hosts interface{} `json:"hosts"`
|
|
||||||
}
|
|
||||||
c.ShouldBindJSON(&req)
|
|
||||||
updates := map[string]interface{}{}
|
|
||||||
if req.Name != nil { updates["name"] = *req.Name }
|
|
||||||
if req.Description != nil { updates["description"] = *req.Description }
|
|
||||||
if req.Hosts != nil {
|
|
||||||
hostsJSON, _ := json.Marshal(req.Hosts)
|
|
||||||
updates["hosts"] = string(hostsJSON)
|
|
||||||
}
|
|
||||||
h.db.Model(&item).Updates(updates)
|
|
||||||
h.db.First(&item, id)
|
|
||||||
c.JSON(http.StatusOK, models.Response{Code: 200, Data: item})
|
|
||||||
}
|
|
||||||
|
|
||||||
func (h *AnsibleHandler) DeleteInventory(c *gin.Context) {
|
|
||||||
if err := h.db.Delete(&models.AnsibleInventory{}, c.Param("id")); err.Error != nil {
|
|
||||||
c.JSON(http.StatusInternalServerError, models.Response{Code: 500, Message: "删除失败"})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
c.JSON(http.StatusOK, models.Response{Code: 200, Message: "已删除"})
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================== 主机匹配 ====================
|
|
||||||
|
|
||||||
// MatchHostsRequest 主机匹配请求
|
|
||||||
type MatchHostsRequest struct {
|
|
||||||
Pattern string `json:"pattern" form:"pattern"` // 匹配模式（正则或前缀）
|
|
||||||
MatchType string `json:"match_type" form:"match_type"` // "regex", "prefix", "contains"
|
|
||||||
Page int `json:"page" form:"page"`
|
|
||||||
PageSize int `json:"page_size" form:"page_size"`
|
|
||||||
}
|
|
||||||
|
|
||||||
// MatchHosts 预览匹配的主机列表（从资产服务器表查询）// Logan.Li
|
|
||||||
// GET /api/v1/ansible/match-hosts?pattern=web*&match_type=prefix
|
|
||||||
func (h *AnsibleHandler) MatchHosts(c *gin.Context) {
|
|
||||||
var req MatchHostsRequest
|
|
||||||
c.ShouldBindQuery(&req)
|
|
||||||
if req.Page <= 0 { req.Page = 1 }
|
|
||||||
if req.PageSize <= 0 || req.PageSize > 200 { req.PageSize = 50 }
|
|
||||||
|
|
||||||
query := h.db.Model(&models.Server{})
|
|
||||||
|
|
||||||
if req.Pattern != "" {
|
|
||||||
switch req.MatchType {
|
|
||||||
case "regex":
|
|
||||||
// 编译正则表达式
|
|
||||||
re, err := regexp.Compile(req.Pattern)
|
|
||||||
if err != nil {
|
|
||||||
c.JSON(http.StatusBadRequest, models.Response{Code: 400, Message: "正则表达式错误: " + err.Error()})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// MySQL 使用 REGEXP 关键字
|
|
||||||
query = query.Where("hostname REGEXP ? OR ip REGEXP ? OR tags REGEXP ?",
|
|
||||||
req.Pattern, req.Pattern, req.Pattern)
|
|
||||||
// 对于复杂的正则，MySQL 可能不支持；先查全部再 Go 过滤
|
|
||||||
if !isMySQLSafeRegex(req.Pattern) {
|
|
||||||
var all []models.Server
|
|
||||||
h.db.Find(&all)
|
|
||||||
var matched []models.Server
|
|
||||||
for _, s := range all {
|
|
||||||
if re.MatchString(s.Hostname) || re.MatchString(s.IP) || re.MatchString(s.Tags) {
|
|
||||||
matched = append(matched, s)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
total := len(matched)
|
|
||||||
start := (req.Page - 1) * req.PageSize
|
|
||||||
end := start + req.PageSize
|
|
||||||
if start > total { start = total }
|
|
||||||
if end > total { end = total }
|
|
||||||
result := matched[start:end]
|
|
||||||
for i := range result {
|
|
||||||
result[i].HasAuth = result[i].Password != "" || result[i].SSHKey != ""
|
|
||||||
}
|
|
||||||
c.JSON(http.StatusOK, models.Response{Code: 200, Data: models.ListResponse{List: result, Total: int64(total)}})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
case "prefix":
|
|
||||||
query = query.Where("hostname LIKE ? OR ip LIKE ?",
|
|
||||||
req.Pattern+"%", req.Pattern+"%")
|
|
||||||
default: // "contains"
|
|
||||||
query = query.Where("hostname LIKE ? OR ip LIKE ? OR tags LIKE ?",
|
|
||||||
"%"+req.Pattern+"%", "%"+req.Pattern+"%", "%"+req.Pattern+"%")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var total int64
|
|
||||||
query.Count(&total)
|
|
||||||
|
|
||||||
var items []models.Server
|
|
||||||
offset := (req.Page - 1) * req.PageSize
|
|
||||||
query.Offset(offset).Limit(req.PageSize).Order("hostname").Find(&items)
|
|
||||||
|
|
||||||
// 补充 HasAuth 字段
|
|
||||||
for i := range items {
|
|
||||||
items[i].HasAuth = items[i].Password != "" || items[i].SSHKey != ""
|
|
||||||
}
|
|
||||||
|
|
||||||
c.JSON(http.StatusOK, models.Response{Code: 200, Data: models.ListResponse{List: items, Total: total}})
|
|
||||||
}
|
|
||||||
|
|
||||||
// isMySQLSafeRegex 判断正则表达式是否可安全用于 MySQL REGEXP
|
|
||||||
func isMySQLSafeRegex(pat string) bool {
|
|
||||||
// MySQL REGEXP 支持基本正则，但如果包含复杂断言或 Unicode 则不适合
|
|
||||||
unsafe := []string{`\b`, `(?=`, `(?!`, `(?<=`, `(?<!`, `\p{`}
|
|
||||||
for _, u := range unsafe {
|
|
||||||
if strings.Contains(pat, u) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
@@ -19,5 +19,22 @@ export default defineConfig([
|
|||||||
ecmaVersion: 2020,
|
ecmaVersion: 2020,
|
||||||
globals: globals.browser,
|
globals: globals.browser,
|
||||||
},
|
},
|
||||||
|
rules: {
|
||||||
|
// 允许下划线前缀的变量/参数不报错（约定: _xxx 表示已知未使用）
|
||||||
|
'@typescript-eslint/no-unused-vars': [
|
||||||
|
'error',
|
||||||
|
{
|
||||||
|
argsIgnorePattern: '^_',
|
||||||
|
varsIgnorePattern: '^_',
|
||||||
|
caughtErrorsIgnorePattern: '^_',
|
||||||
|
destructuredArrayIgnorePattern: '^_',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// catch 子句允许 any（err.message 等访问场景）
|
||||||
|
'@typescript-eslint/no-explicit-any': [
|
||||||
|
'error',
|
||||||
|
{ fixToUnknown: false, ignoreRestArgs: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
},
|
},
|
||||||
])
|
])
|
||||||
@@ -42,15 +42,12 @@ const PipelineRunDetail = lazy(() => import('@/components/deploy/PipelineRunDeta
|
|||||||
const DeployRBAC = lazy(() => import('@/components/deploy/DeployRBAC').then(m => ({ default: m.default })));
|
const DeployRBAC = lazy(() => import('@/components/deploy/DeployRBAC').then(m => ({ default: m.default })));
|
||||||
const UserGroupsManager = lazy(() => import('@/components/deploy/UserGroupsManager').then(m => ({ default: m.default })));
|
const UserGroupsManager = lazy(() => import('@/components/deploy/UserGroupsManager').then(m => ({ default: m.default })));
|
||||||
const CronJobManager = lazy(() => import('@/components/automation/CronJobManager').then(m => ({ default: m.CronJobManager })));
|
const CronJobManager = lazy(() => import('@/components/automation/CronJobManager').then(m => ({ default: m.CronJobManager })));
|
||||||
const AnsibleManager = lazy(() => import('@/components/automation/AnsibleManager').then(m => ({ default: m.default })));
|
|
||||||
const AnsibleWorkflow = lazy(() => import('@/components/automation/AnsibleWorkflow').then(m => ({ default: m.default })));
|
|
||||||
const AIOpsAssistant = lazy(() => import('@/components/aiops/AIOpsAssistant').then(m => ({ default: m.AIOpsAssistant })));
|
const AIOpsAssistant = lazy(() => import('@/components/aiops/AIOpsAssistant').then(m => ({ default: m.AIOpsAssistant })));
|
||||||
const AIAlertAnalyzer = lazy(() => import('@/components/aiops/AIAlertAnalyzer').then(m => ({ default: m.AIAlertAnalyzer })));
|
const AIAlertAnalyzer = lazy(() => import('@/components/aiops/AIAlertAnalyzer').then(m => ({ default: m.AIAlertAnalyzer })));
|
||||||
const AIPredictiveAnalytics = lazy(() => import('@/components/aiops/AIPredictiveAnalytics').then(m => ({ default: m.AIPredictiveAnalytics })));
|
const AIPredictiveAnalytics = lazy(() => import('@/components/aiops/AIPredictiveAnalytics').then(m => ({ default: m.AIPredictiveAnalytics })));
|
||||||
const AlertCenter = lazy(() => import('@/components/monitor/alert-center/AlertCenter').then(m => ({ default: m.default })));
|
const AlertCenter = lazy(() => import('@/components/monitor/alert-center/AlertCenter').then(m => ({ default: m.default })));
|
||||||
const TraceManager = lazy(() => import('@/components/monitor/trace/TraceManager').then(m => ({ default: m.default })));
|
const TraceManager = lazy(() => import('@/components/monitor/trace/TraceManager').then(m => ({ default: m.default })));
|
||||||
const HostMonitor = lazy(() => import('@/pages/HostMonitor').then(m => ({ default: m.HostMonitor })));
|
const HostMonitor = lazy(() => import('@/pages/HostMonitor').then(m => ({ default: m.HostMonitor })));
|
||||||
const HostMonitorDashboard = lazy(() => import('@/components/monitor/dashboard/HostMonitorDashboard').then(m => ({ default: m.default })));
|
|
||||||
const GrafanaDashboard = lazy(() => import('@/components/monitor/dashboard/GrafanaDashboard').then(m => ({ default: m.default })));
|
const GrafanaDashboard = lazy(() => import('@/components/monitor/dashboard/GrafanaDashboard').then(m => ({ default: m.default })));
|
||||||
const MonitorCenter = lazy(() => import('@/pages/MonitorCenter').then(m => ({ default: m.MonitorCenter })));
|
const MonitorCenter = lazy(() => import('@/pages/MonitorCenter').then(m => ({ default: m.MonitorCenter })));
|
||||||
const MetricsExplorer = lazy(() => import('@/pages/MetricsExplorer').then(m => ({ default: m.MetricsExplorer })));
|
const MetricsExplorer = lazy(() => import('@/pages/MetricsExplorer').then(m => ({ default: m.MetricsExplorer })));
|
||||||
@@ -178,8 +175,7 @@ function App() {
|
|||||||
<Route path="approval" element={<LazyPage><ApprovalFlowManager /></LazyPage>} />
|
<Route path="approval" element={<LazyPage><ApprovalFlowManager /></LazyPage>} />
|
||||||
<Route path="cronjobs" element={<LazyPage><CronJobManager /></LazyPage>} />
|
<Route path="cronjobs" element={<LazyPage><CronJobManager /></LazyPage>} />
|
||||||
<Route path="scripts" element={<LazyPage><ScriptManager /></LazyPage>} />
|
<Route path="scripts" element={<LazyPage><ScriptManager /></LazyPage>} />
|
||||||
<Route path="ansible" element={<LazyPage><AnsibleWorkflow /></LazyPage>} />
|
|
||||||
<Route path="ansible/manage" element={<LazyPage><AnsibleManager /></LazyPage>} />
|
|
||||||
|
|
||||||
{/* AIOps */}
|
{/* AIOps */}
|
||||||
<Route path="ai-assistant" element={<LazyPage><AIOpsAssistant /></LazyPage>} />
|
<Route path="ai-assistant" element={<LazyPage><AIOpsAssistant /></LazyPage>} />
|
||||||
|
|||||||
@@ -19,13 +19,7 @@ import {
|
|||||||
DialogHeader,
|
DialogHeader,
|
||||||
DialogTitle,
|
DialogTitle,
|
||||||
} from '@/components/ui/dialog';
|
} from '@/components/ui/dialog';
|
||||||
import {
|
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectItem,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
} from '@/components/ui/select';
|
|
||||||
import {
|
import {
|
||||||
Cpu,
|
Cpu,
|
||||||
MemoryStick,
|
MemoryStick,
|
||||||
@@ -107,7 +101,7 @@ export function AgentMonitor() {
|
|||||||
setCmdSubmitting(true);
|
setCmdSubmitting(true);
|
||||||
setCmdResult(null);
|
setCmdResult(null);
|
||||||
try {
|
try {
|
||||||
const res: any = await agentApi.execCommand({
|
const res: Record<string, any> = await agentApi.execCommand({
|
||||||
hostname: cmdHost,
|
hostname: cmdHost,
|
||||||
command: cmdCommand.trim(),
|
command: cmdCommand.trim(),
|
||||||
timeout: Number(cmdTimeout) || 30,
|
timeout: Number(cmdTimeout) || 30,
|
||||||
@@ -214,7 +208,7 @@ export function AgentMonitor() {
|
|||||||
const cpu = Number(host.cpu_percent ?? host.cpu ?? 0);
|
const cpu = Number(host.cpu_percent ?? host.cpu ?? 0);
|
||||||
const mem = Number(host.mem_percent ?? host.mem ?? 0);
|
const mem = Number(host.mem_percent ?? host.mem ?? 0);
|
||||||
const disk = Number(host.disk_percent ?? host.disk ?? 0);
|
const disk = Number(host.disk_percent ?? host.disk ?? 0);
|
||||||
const ports: any[] = Array.isArray(host.ports) ? host.ports : [];
|
const ports: Record<string, any>[] = Array.isArray(host.ports) ? host.ports : [];
|
||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
key={host.hostname}
|
key={host.hostname}
|
||||||
|
|||||||
@@ -73,7 +73,7 @@ export function AgentRuleDialog({ open, onOpenChange, editingRule, onSuccess }:
|
|||||||
}
|
}
|
||||||
setSaving(true);
|
setSaving(true);
|
||||||
try {
|
try {
|
||||||
const payload: any = {
|
const payload: Record<string, any> = {
|
||||||
name: ruleForm.name.trim(),
|
name: ruleForm.name.trim(),
|
||||||
metric: ruleForm.metric,
|
metric: ruleForm.metric,
|
||||||
operator: ruleForm.operator,
|
operator: ruleForm.operator,
|
||||||
|
|||||||
@@ -166,7 +166,7 @@ export function AgentWizard({ open, onOpenChange, server, onInstalled, onFailed
|
|||||||
ssh_key: sshKey,
|
ssh_key: sshKey,
|
||||||
auth_type: authType,
|
auth_type: authType,
|
||||||
} : undefined;
|
} : undefined;
|
||||||
const res: any = await serverApi.installAgent(server.id, token, creds);
|
const res: Record<string, unknown> = await serverApi.installAgent(server.id, token, creds);
|
||||||
const installed = res?.installed || false;
|
const installed = res?.installed || false;
|
||||||
if (installed) {
|
if (installed) {
|
||||||
toast.success(`${server.hostname} Agent 安装成功`);
|
toast.success(`${server.hostname} Agent 安装成功`);
|
||||||
|
|||||||
@@ -60,7 +60,7 @@ export function HostDetailDialog({
|
|||||||
if (!host) return null;
|
if (!host) return null;
|
||||||
|
|
||||||
const online = isOnline(host.last_report || host.last_reported_at || host.updated_at);
|
const online = isOnline(host.last_report || host.last_reported_at || host.updated_at);
|
||||||
const ports: any[] = Array.isArray(host.ports) ? host.ports : [];
|
const ports: Record<string, any>[] = Array.isArray(host.ports) ? host.ports : [];
|
||||||
|
|
||||||
const chartData = history.map((h) => ({
|
const chartData = history.map((h) => ({
|
||||||
time: new Date(h.timestamp || h.time || h.created_at || Date.now()).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
|
time: new Date(h.timestamp || h.time || h.created_at || Date.now()).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
|
||||||
|
|||||||
@@ -33,7 +33,7 @@ export function getMetricLabel(metric: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 兼容多种列表响应格式（数组 / {list} / {items} / {data}） // Logan.Li
|
// 兼容多种列表响应格式（数组 / {list} / {items} / {data}） // Logan.Li
|
||||||
export function asList(data: any): any[] {
|
export function asList( data: any): unknown[] {
|
||||||
if (!data) return [];
|
if (!data) return [];
|
||||||
if (Array.isArray(data)) return data;
|
if (Array.isArray(data)) return data;
|
||||||
if (Array.isArray(data.list)) return data.list;
|
if (Array.isArray(data.list)) return data.list;
|
||||||
|
|||||||
@@ -21,6 +21,7 @@ export function timeAgo(ts: any): string {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/** 兼容多种列表响应包装：数组 / {list} / {items} / {data} */
|
/** 兼容多种列表响应包装：数组 / {list} / {items} / {data} */
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
export function asList( data: any): any[] {
|
export function asList( data: any): any[] {
|
||||||
if (!data) return [];
|
if (!data) return [];
|
||||||
if (Array.isArray(data)) return data;
|
if (Array.isArray(data)) return data;
|
||||||
|
|||||||
@@ -61,7 +61,7 @@ export function AIAlertAnalyzer() {
|
|||||||
const loadAlerts = async () => {
|
const loadAlerts = async () => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const res: any = await alertApi.getAlerts({ page: 1, page_size: 50 });
|
const res: Record<string, any> = await alertApi.getAlerts({ page: 1, page_size: 50 });
|
||||||
// 列表响应格式：http.ts 已提取 .data，此处仍是 {list, total}
|
// 列表响应格式：http.ts 已提取 .data，此处仍是 {list, total}
|
||||||
const list = res?.list || res || [];
|
const list = res?.list || res || [];
|
||||||
setAlerts(list.map(mapAlertEvent));
|
setAlerts(list.map(mapAlertEvent));
|
||||||
@@ -102,7 +102,7 @@ export function AIAlertAnalyzer() {
|
|||||||
}`;
|
}`;
|
||||||
|
|
||||||
const res = await aiApi.chat([{ role: 'user', content: prompt }]);
|
const res = await aiApi.chat([{ role: 'user', content: prompt }]);
|
||||||
const content = (res as any)?.content || (res as any)?.message?.content || '';
|
const content = (res as Record<string, any>)?.content || (res as Record<string, any>)?.message?.content || '';
|
||||||
if (content) {
|
if (content) {
|
||||||
setAnalysis(parseAIResponse(content, fallback));
|
setAnalysis(parseAIResponse(content, fallback));
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@@ -68,7 +68,7 @@ const defaultConfig: LLMConfigData = {
|
|||||||
// 拉取最近告警事件，格式化为紧凑列表供 LLM 分析
|
// 拉取最近告警事件，格式化为紧凑列表供 LLM 分析
|
||||||
async function loadAlertsContext(): Promise<string> {
|
async function loadAlertsContext(): Promise<string> {
|
||||||
const res = await alertApi.getAlerts({ page: 1, page_size: 20 });
|
const res = await alertApi.getAlerts({ page: 1, page_size: 20 });
|
||||||
const alerts: any[] = (res as any)?.list || [];
|
const alerts: Record<string, any>[] = (res as Record<string, any>)?.list || [];
|
||||||
if (!alerts.length) return '（当前无告警事件）';
|
if (!alerts.length) return '（当前无告警事件）';
|
||||||
const lines = alerts.slice(0, 15).map((a, i) =>
|
const lines = alerts.slice(0, 15).map((a, i) =>
|
||||||
`${i + 1}. [${a.severity || '未知'}|${a.status || '-'}] ${a.rule_name || '告警'} → 目标:${a.target || '-'} 值:${a.value ?? '-'} 时间:${(a.started_at || '').slice(0, 16)}`,
|
`${i + 1}. [${a.severity || '未知'}|${a.status || '-'}] ${a.rule_name || '告警'} → 目标:${a.target || '-'} 值:${a.value ?? '-'} 时间:${(a.started_at || '').slice(0, 16)}`,
|
||||||
@@ -80,7 +80,7 @@ async function loadAlertsContext(): Promise<string> {
|
|||||||
// 拉取 Agent 实时主机指标，识别高负载主机
|
// 拉取 Agent 实时主机指标，识别高负载主机
|
||||||
async function loadMetricsContext(): Promise<string> {
|
async function loadMetricsContext(): Promise<string> {
|
||||||
const res = await agentApi.getLatest();
|
const res = await agentApi.getLatest();
|
||||||
const hosts: any[] = Array.isArray(res) ? res : (res as any)?.list || [];
|
const hosts: Record<string, any>[] = Array.isArray(res) ? res : (res as Record<string, any>)?.list || [];
|
||||||
if (!hosts.length) return '（当前无 Agent 上报数据，可能未部署监控 Agent）';
|
if (!hosts.length) return '（当前无 Agent 上报数据，可能未部署监控 Agent）';
|
||||||
const lines = hosts.slice(0, 20).map((h, i) => {
|
const lines = hosts.slice(0, 20).map((h, i) => {
|
||||||
const cpu = h.cpu_usage ?? '-';
|
const cpu = h.cpu_usage ?? '-';
|
||||||
@@ -101,11 +101,11 @@ async function loadReportContext(): Promise<string> {
|
|||||||
dashboardStatsApi.getAlerts(10).catch(() => null),
|
dashboardStatsApi.getAlerts(10).catch(() => null),
|
||||||
dashboardStatsApi.getReleases(10).catch(() => null),
|
dashboardStatsApi.getReleases(10).catch(() => null),
|
||||||
]);
|
]);
|
||||||
const s: any = stats || {};
|
const s: Record<string, any> = stats || {};
|
||||||
const ss = s.server_stats || {}, ks = s.kubernetes_stats || {}, as = s.alert_stats || {}, ps = s.pipeline_stats || {}, cs = s.cost_stats || {};
|
const ss = s.server_stats || {}, ks = s.kubernetes_stats || {}, as = s.alert_stats || {}, ps = s.pipeline_stats || {}, cs = s.cost_stats || {};
|
||||||
const overview = `服务器:${ss.total ?? 0}(运行${ss.running ?? 0}) | Kubernetes集群:${ks.total ?? 0} 节点:${ks.total_nodes ?? 0} Pod:${ks.total_pods ?? 0} | 告警:${as.total ?? 0}(firing ${as.firing ?? 0}) | 流水线:${ps.total ?? 0}(成功率${ps.success_rate ?? 0}%) | 本月成本:¥${cs.month_cost ?? 0}`;
|
const overview = `服务器:${ss.total ?? 0}(运行${ss.running ?? 0}) | Kubernetes集群:${ks.total ?? 0} 节点:${ks.total_nodes ?? 0} Pod:${ks.total_pods ?? 0} | 告警:${as.total ?? 0}(firing ${as.firing ?? 0}) | 流水线:${ps.total ?? 0}(成功率${ps.success_rate ?? 0}%) | 本月成本:¥${cs.month_cost ?? 0}`;
|
||||||
const alertList: any[] = Array.isArray(alerts) ? alerts : (alerts as any)?.list || [];
|
const alertList: Record<string, any>[] = Array.isArray(alerts) ? alerts : (alerts as Record<string, any>)?.list || [];
|
||||||
const releaseList: any[] = Array.isArray(releases) ? releases : (releases as any)?.list || [];
|
const releaseList: Record<string, any>[] = Array.isArray(releases) ? releases : (releases as Record<string, any>)?.list || [];
|
||||||
const alertLines = alertList.slice(0, 10).map((a, i) => `${i + 1}.[${a.severity || '?'}|${a.status || '?'}] ${a.rule_name || '-'} → ${a.target || '-'}`);
|
const alertLines = alertList.slice(0, 10).map((a, i) => `${i + 1}.[${a.severity || '?'}|${a.status || '?'}] ${a.rule_name || '-'} → ${a.target || '-'}`);
|
||||||
const releaseLines = releaseList.slice(0, 10).map((r, i) => `${i + 1}.${r.app_name || '-'} ${r.version || ''} [${r.environment || '-'}/${r.status || '-'}] by ${r.author || '-'}`);
|
const releaseLines = releaseList.slice(0, 10).map((r, i) => `${i + 1}.${r.app_name || '-'} ${r.version || ''} [${r.environment || '-'}/${r.status || '-'}] by ${r.author || '-'}`);
|
||||||
return `平台概览：${overview}\n\n最近告警：\n${alertLines.join('\n') || '（无）'}\n\n最近发布：\n${releaseLines.join('\n') || '（无）'}`;
|
return `平台概览：${overview}\n\n最近告警：\n${alertLines.join('\n') || '（无）'}\n\n最近发布：\n${releaseLines.join('\n') || '（无）'}`;
|
||||||
@@ -188,7 +188,7 @@ export function AIOpsAssistant() {
|
|||||||
const loadHistory = async () => {
|
const loadHistory = async () => {
|
||||||
try {
|
try {
|
||||||
const res = await aiApi.getHistory(sessionId);
|
const res = await aiApi.getHistory(sessionId);
|
||||||
const items: ChatHistoryItem[] = (res as any)?.list || [];
|
const items: ChatHistoryItem[] = (res as Record<string, any>)?.list || [];
|
||||||
setMessages(
|
setMessages(
|
||||||
items.map((m) => ({
|
items.map((m) => ({
|
||||||
id: String(m.id),
|
id: String(m.id),
|
||||||
@@ -227,7 +227,7 @@ export function AIOpsAssistant() {
|
|||||||
try {
|
try {
|
||||||
const saved = await aiApi.saveConfig(config);
|
const saved = await aiApi.saveConfig(config);
|
||||||
setConfig(saved);
|
setConfig(saved);
|
||||||
setConfigReady(!!(saved.enabled && (saved as any).configured));
|
setConfigReady(!!(saved.enabled && (saved as Record<string, any>).configured));
|
||||||
toast.success('配置已保存');
|
toast.success('配置已保存');
|
||||||
setIsConfigOpen(false);
|
setIsConfigOpen(false);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
|||||||
@@ -66,9 +66,9 @@ export function AIPredictiveAnalytics() {
|
|||||||
]);
|
]);
|
||||||
setRawMetrics(Array.isArray(metricsData) ? metricsData : []);
|
setRawMetrics(Array.isArray(metricsData) ? metricsData : []);
|
||||||
setServerStats(statsResp || {});
|
setServerStats(statsResp || {});
|
||||||
const alertsRaw = (alertsResp as any)?.list || (alertsResp as any) || [];
|
const alertsRaw = (alertsResp as Record<string, any>)?.list || (alertsResp as Record<string, any>) || [];
|
||||||
setAlertEvents(Array.isArray(alertsRaw) ? alertsRaw : []);
|
setAlertEvents(Array.isArray(alertsRaw) ? alertsRaw : []);
|
||||||
const rulesRaw = (rulesResp as any)?.list || (rulesResp as any) || [];
|
const rulesRaw = (rulesResp as Record<string, any>)?.list || (rulesResp as Record<string, any>) || [];
|
||||||
setAlertRules(Array.isArray(rulesRaw) ? rulesRaw : []);
|
setAlertRules(Array.isArray(rulesRaw) ? rulesRaw : []);
|
||||||
} catch {
|
} catch {
|
||||||
// 保持空数据，组件显示空状态
|
// 保持空数据，组件显示空状态
|
||||||
|
|||||||
@@ -123,7 +123,7 @@ export function ApprovalFlow() {
|
|||||||
setActionDialogOpen(false);
|
setActionDialogOpen(false);
|
||||||
loadData();
|
loadData();
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
toast.error('操作失败', { description: error.message });
|
toast.error('操作失败', { description: (error as Record<string, any>).message });
|
||||||
} finally {
|
} finally {
|
||||||
setActionSubmitting(false);
|
setActionSubmitting(false);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -85,12 +85,12 @@ export function Login() {
|
|||||||
setError('');
|
setError('');
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const result = await userApi.login(username, password);
|
const result = await userApi.login(username, password) as { user: any; token: string };
|
||||||
useUserStore.getState().login(result.user, result.token);
|
useUserStore.getState().login(result.user, result.token);
|
||||||
localStorage.setItem('token', result.token);
|
localStorage.setItem('token', result.token);
|
||||||
navigate('/', { replace: true });
|
navigate('/', { replace: true });
|
||||||
} catch (err: unknown) {
|
} catch (err: any) {
|
||||||
const message = err instanceof Error ? err.message : '登录失败，请检查用户名和密码';
|
const message = err instanceof Error ? (err as Record<string, any>).message : '登录失败，请检查用户名和密码';
|
||||||
setError(message);
|
setError(message);
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
|
|||||||
@@ -1,47 +0,0 @@
|
|||||||
// Ansible 查看 Playbook 内容弹窗 // Logan.Li
|
|
||||||
import { FileCode, Edit } from 'lucide-react';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import {
|
|
||||||
Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter,
|
|
||||||
} from '@/components/ui/dialog';
|
|
||||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
||||||
import type { Playbook } from './ansible-helpers';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
open: boolean;
|
|
||||||
onOpenChange: (open: boolean) => void;
|
|
||||||
playbook: Playbook | null;
|
|
||||||
onEdit: (pb: Playbook) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const AnsibleDetailDialog: React.FC<Props> = ({ open, onOpenChange, playbook, onEdit }) => {
|
|
||||||
return (
|
|
||||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
||||||
<DialogContent className="max-w-4xl max-h-[90vh]">
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle className="flex items-center gap-2">
|
|
||||||
<FileCode className="w-5 h-5 text-blue-500" />
|
|
||||||
{playbook?.name}
|
|
||||||
</DialogTitle>
|
|
||||||
<DialogDescription>{playbook?.description}</DialogDescription>
|
|
||||||
</DialogHeader>
|
|
||||||
<ScrollArea className="h-[500px] w-full rounded-md border bg-black">
|
|
||||||
<pre className="p-4 font-mono text-sm text-green-400 whitespace-pre-wrap">
|
|
||||||
{playbook?.content || '（空）'}
|
|
||||||
</pre>
|
|
||||||
</ScrollArea>
|
|
||||||
<DialogFooter>
|
|
||||||
<Button variant="outline" onClick={() => onOpenChange(false)}>关闭</Button>
|
|
||||||
{playbook && (
|
|
||||||
<Button onClick={() => onEdit(playbook)}>
|
|
||||||
<Edit className="w-4 h-4 mr-2" />
|
|
||||||
编辑
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</DialogFooter>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AnsibleDetailDialog;
|
|
||||||
@@ -1,73 +0,0 @@
|
|||||||
// Ansible Playbook 执行记录表格（6 列：#/Playbook/状态/开始时间/耗时/操作） // Logan.Li
|
|
||||||
import React from 'react';
|
|
||||||
import { RotateCcw, Terminal } from 'lucide-react';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import { Card, CardContent } from '@/components/ui/card';
|
|
||||||
import { getStatusBadge, formatDate, type ExecutionRecord } from './ansible-helpers';
|
|
||||||
|
|
||||||
interface AnsibleExecutionsTableProps {
|
|
||||||
executions: ExecutionRecord[];
|
|
||||||
onRefresh: () => void;
|
|
||||||
onViewLogs: (exec: ExecutionRecord) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const AnsibleExecutionsTable: React.FC<AnsibleExecutionsTableProps> = ({
|
|
||||||
executions, onRefresh, onViewLogs,
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="flex justify-end">
|
|
||||||
<Button variant="outline" onClick={onRefresh}>
|
|
||||||
<RotateCcw className="w-4 h-4 mr-2" />
|
|
||||||
刷新
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<Card>
|
|
||||||
<CardContent className="p-0">
|
|
||||||
<div className="overflow-x-auto">
|
|
||||||
<table className="w-full">
|
|
||||||
<thead className="bg-muted/50">
|
|
||||||
<tr>
|
|
||||||
<th className="px-4 py-3 text-left text-sm font-medium">#</th>
|
|
||||||
<th className="px-4 py-3 text-left text-sm font-medium">Playbook</th>
|
|
||||||
<th className="px-4 py-3 text-left text-sm font-medium">状态</th>
|
|
||||||
<th className="px-4 py-3 text-left text-sm font-medium">开始时间</th>
|
|
||||||
<th className="px-4 py-3 text-left text-sm font-medium">耗时</th>
|
|
||||||
<th className="px-4 py-3 text-left text-sm font-medium">操作</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody className="divide-y">
|
|
||||||
{executions.length === 0 ? (
|
|
||||||
<tr>
|
|
||||||
<td colSpan={6} className="px-4 py-8 text-center text-muted-foreground">
|
|
||||||
暂无执行记录
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
) : (
|
|
||||||
executions.map((job) => (
|
|
||||||
<tr key={job.id} className="hover:bg-muted/50">
|
|
||||||
<td className="px-4 py-3 text-sm text-muted-foreground">{job.id}</td>
|
|
||||||
<td className="px-4 py-3 text-sm">{job.task_name}</td>
|
|
||||||
<td className="px-4 py-3">{getStatusBadge(job.status)}</td>
|
|
||||||
<td className="px-4 py-3 text-sm text-muted-foreground">{formatDate(job.started_at)}</td>
|
|
||||||
<td className="px-4 py-3 text-sm">
|
|
||||||
{job.duration ? `${(job.duration / 1000).toFixed(1)}s` : '-'}
|
|
||||||
</td>
|
|
||||||
<td className="px-4 py-3">
|
|
||||||
<Button variant="ghost" size="sm" title="查看日志" onClick={() => onViewLogs(job)}>
|
|
||||||
<Terminal className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AnsibleExecutionsTable;
|
|
||||||
@@ -1,111 +0,0 @@
|
|||||||
// Ansible 新建/编辑 Playbook 弹窗 // Logan.Li
|
|
||||||
import { CheckCircle } from 'lucide-react';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import { Input } from '@/components/ui/input';
|
|
||||||
import {
|
|
||||||
Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter,
|
|
||||||
} from '@/components/ui/dialog';
|
|
||||||
import {
|
|
||||||
Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
|
|
||||||
} from '@/components/ui/select';
|
|
||||||
import { Label } from '@/components/ui/label';
|
|
||||||
import { Textarea } from '@/components/ui/textarea';
|
|
||||||
import { categories } from './ansible-helpers';
|
|
||||||
|
|
||||||
export interface PlaybookFormData {
|
|
||||||
name: string;
|
|
||||||
description: string;
|
|
||||||
content: string;
|
|
||||||
category: string;
|
|
||||||
tags: string;
|
|
||||||
timeout: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
open: boolean;
|
|
||||||
onOpenChange: (open: boolean) => void;
|
|
||||||
editingId: number | null;
|
|
||||||
formData: PlaybookFormData;
|
|
||||||
setFormData: React.Dispatch<React.SetStateAction<PlaybookFormData>>;
|
|
||||||
onSave: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const AnsibleFormDialog: React.FC<Props> = ({ open, onOpenChange, editingId, formData, setFormData, onSave }) => {
|
|
||||||
return (
|
|
||||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
||||||
<DialogContent className="max-w-4xl max-h-[90vh]">
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>{editingId !== null ? '编辑 Playbook' : '新建 Playbook'}</DialogTitle>
|
|
||||||
<DialogDescription>编写 Ansible Playbook 实现自动化运维</DialogDescription>
|
|
||||||
</DialogHeader>
|
|
||||||
<div className="space-y-4 overflow-y-auto max-h-[60vh] pr-1">
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<Label>名称</Label>
|
|
||||||
<Input
|
|
||||||
value={formData.name}
|
|
||||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
|
||||||
placeholder="Playbook 名称"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Label>分类</Label>
|
|
||||||
<Select value={formData.category} onValueChange={(v) => setFormData({ ...formData, category: v })}>
|
|
||||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
{categories.map(c => (
|
|
||||||
<SelectItem key={c.value} value={c.value}>{c.label}</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Label>描述</Label>
|
|
||||||
<Input
|
|
||||||
value={formData.description}
|
|
||||||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
|
||||||
placeholder="Playbook 描述"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<Label>标签（逗号分隔）</Label>
|
|
||||||
<Input
|
|
||||||
value={formData.tags}
|
|
||||||
onChange={(e) => setFormData({ ...formData, tags: e.target.value })}
|
|
||||||
placeholder="如: nginx, web, 部署"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Label>超时（秒）</Label>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
value={formData.timeout}
|
|
||||||
onChange={(e) => setFormData({ ...formData, timeout: Number(e.target.value) })}
|
|
||||||
placeholder="600"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Label>Playbook 内容 (YAML)</Label>
|
|
||||||
<Textarea
|
|
||||||
value={formData.content}
|
|
||||||
onChange={(e) => setFormData({ ...formData, content: e.target.value })}
|
|
||||||
className="min-h-[380px] font-mono text-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<DialogFooter>
|
|
||||||
<Button variant="outline" onClick={() => onOpenChange(false)}>取消</Button>
|
|
||||||
<Button onClick={onSave}>
|
|
||||||
<CheckCircle className="w-4 h-4 mr-2" />
|
|
||||||
{editingId !== null ? '保存' : '创建'}
|
|
||||||
</Button>
|
|
||||||
</DialogFooter>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AnsibleFormDialog;
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
// Ansible 执行日志弹窗 // Logan.Li
|
|
||||||
import {
|
|
||||||
Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter,
|
|
||||||
} from '@/components/ui/dialog';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
||||||
import { getStatusBadge, type ExecutionRecord } from './ansible-helpers';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
open: boolean;
|
|
||||||
onOpenChange: (open: boolean) => void;
|
|
||||||
exec: ExecutionRecord | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const AnsibleLogsDialog: React.FC<Props> = ({ open, onOpenChange, exec }) => {
|
|
||||||
return (
|
|
||||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
||||||
<DialogContent className="max-w-4xl max-h-[90vh]">
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>执行日志</DialogTitle>
|
|
||||||
<DialogDescription>
|
|
||||||
{exec?.task_name} · {getStatusBadge(exec?.status || '')}
|
|
||||||
</DialogDescription>
|
|
||||||
</DialogHeader>
|
|
||||||
<ScrollArea className="h-[480px] w-full rounded-md border bg-black">
|
|
||||||
<pre className="p-4 font-mono text-sm text-green-400 whitespace-pre-wrap">
|
|
||||||
{exec?.output || '暂无日志输出...'}
|
|
||||||
</pre>
|
|
||||||
</ScrollArea>
|
|
||||||
<DialogFooter>
|
|
||||||
<Button variant="outline" onClick={() => onOpenChange(false)}>关闭</Button>
|
|
||||||
</DialogFooter>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AnsibleLogsDialog;
|
|
||||||
@@ -1,414 +0,0 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import {
|
|
||||||
RotateCcw, Plus, Search, Trash2, Loader2,
|
|
||||||
Eye, Pencil, Copy, Play, Tags,
|
|
||||||
} from 'lucide-react';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import { Input } from '@/components/ui/input';
|
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
||||||
import { Checkbox } from '@/components/ui/checkbox';
|
|
||||||
import { Badge } from '@/components/ui/badge';
|
|
||||||
import { toast } from 'sonner';
|
|
||||||
import { useConfirm } from '@/components/ui/confirm-dialog';
|
|
||||||
import { ansibleApi, taskExecutionApi } from '@/services/api';
|
|
||||||
import {
|
|
||||||
mapPlaybook, categories, samplePlaybook, formatDate,
|
|
||||||
type Playbook, type ExecutionRecord,
|
|
||||||
} from './ansible-helpers';
|
|
||||||
import AnsibleFormDialog, { type PlaybookFormData } from './AnsibleFormDialog';
|
|
||||||
import AnsibleDetailDialog from './AnsibleDetailDialog';
|
|
||||||
import AnsibleLogsDialog from './AnsibleLogsDialog';
|
|
||||||
import AnsibleExecutionsTable from './AnsibleExecutionsTable';
|
|
||||||
|
|
||||||
const AnsibleManager: React.FC = () => {
|
|
||||||
const _confirm = useConfirm();
|
|
||||||
const [playbooks, setPlaybooks] = useState<Playbook[]>([]);
|
|
||||||
const [executions, setExecutions] = useState<ExecutionRecord[]>([]);
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [executing, setExecuting] = useState(false);
|
|
||||||
const [searchQuery, setSearchQuery] = useState('');
|
|
||||||
const [categoryFilter, setCategoryFilter] = useState<string>('all');
|
|
||||||
const [activeTab, setActiveTab] = useState('playbooks');
|
|
||||||
const [selectedIds, setSelectedIds] = useState<number[]>([]);
|
|
||||||
|
|
||||||
// 弹窗状态
|
|
||||||
const [editorOpen, setEditorOpen] = useState(false);
|
|
||||||
const [detailOpen, setDetailOpen] = useState(false);
|
|
||||||
const [logsOpen, setLogsOpen] = useState(false);
|
|
||||||
const [editingId, setEditingId] = useState<number | null>(null);
|
|
||||||
const [selectedPlaybook, setSelectedPlaybook] = useState<Playbook | null>(null);
|
|
||||||
const [selectedExec, setSelectedExec] = useState<ExecutionRecord | null>(null);
|
|
||||||
|
|
||||||
const [formData, setFormData] = useState<PlaybookFormData>({
|
|
||||||
name: '', description: '', content: '', category: 'deployment', tags: '', timeout: 600,
|
|
||||||
});
|
|
||||||
|
|
||||||
const fetchPlaybooks = async () => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const res = await ansibleApi.getPlaybooks({ page_size: 200 });
|
|
||||||
const items = (res as any)?.list || [];
|
|
||||||
setPlaybooks(items.map(mapPlaybook));
|
|
||||||
} catch {
|
|
||||||
toast.error('获取 Playbook 列表失败');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchExecutions = async () => {
|
|
||||||
try {
|
|
||||||
const res = await taskExecutionApi.getExecutions({ task_type: 'playbook', page_size: 50 });
|
|
||||||
setExecutions((res as any)?.list || []);
|
|
||||||
} catch {
|
|
||||||
// 静默
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchPlaybooks();
|
|
||||||
fetchExecutions();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// ---- 新建/编辑 ----
|
|
||||||
const openCreate = () => {
|
|
||||||
setEditingId(null);
|
|
||||||
setFormData({ name: '', description: '', content: samplePlaybook, category: 'deployment', tags: '', timeout: 600 });
|
|
||||||
setEditorOpen(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const openEdit = (pb: Playbook) => {
|
|
||||||
setEditingId(pb.id);
|
|
||||||
setFormData({
|
|
||||||
name: pb.name, description: pb.description, content: pb.content,
|
|
||||||
category: pb.category, tags: pb.tags.join(', '), timeout: pb.timeout,
|
|
||||||
});
|
|
||||||
setEditorOpen(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const tagsToJson = (raw: string): string => {
|
|
||||||
const arr = raw.split(',').map(t => t.trim()).filter(Boolean);
|
|
||||||
return JSON.stringify(arr);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSave = async () => {
|
|
||||||
if (!formData.name || !formData.content) {
|
|
||||||
toast.error('请填写名称和 Playbook 内容');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const payload = {
|
|
||||||
name: formData.name, description: formData.description, content: formData.content,
|
|
||||||
category: formData.category, tags: tagsToJson(formData.tags), timeout: Number(formData.timeout) || 600,
|
|
||||||
};
|
|
||||||
try {
|
|
||||||
if (editingId !== null) {
|
|
||||||
await ansibleApi.updatePlaybook(editingId, payload);
|
|
||||||
toast.success('更新成功');
|
|
||||||
} else {
|
|
||||||
await ansibleApi.createPlaybook(payload);
|
|
||||||
toast.success('创建成功');
|
|
||||||
}
|
|
||||||
setEditorOpen(false);
|
|
||||||
fetchPlaybooks();
|
|
||||||
} catch {
|
|
||||||
toast.error(editingId !== null ? '更新失败' : '创建失败');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// ---- 克隆 ----
|
|
||||||
const handleClone = async (pb: Playbook) => {
|
|
||||||
try {
|
|
||||||
await ansibleApi.clonePlaybook(pb.id);
|
|
||||||
toast.success('克隆成功');
|
|
||||||
fetchPlaybooks();
|
|
||||||
} catch {
|
|
||||||
toast.error('克隆失败');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// ---- 单个删除 ----
|
|
||||||
const handleDelete = async (pb: Playbook) => {
|
|
||||||
const ok = await _confirm({
|
|
||||||
title: '删除 Playbook',
|
|
||||||
description: `确定删除「${pb.name}」吗？此操作不可恢复。`,
|
|
||||||
confirmText: '删除',
|
|
||||||
variant: 'destructive',
|
|
||||||
});
|
|
||||||
if (!ok) return;
|
|
||||||
try {
|
|
||||||
await ansibleApi.deletePlaybook(pb.id);
|
|
||||||
toast.success('已删除');
|
|
||||||
fetchPlaybooks();
|
|
||||||
} catch {
|
|
||||||
toast.error('删除失败');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// ---- 批量删除 ----
|
|
||||||
const toggleSelect = (id: number) => {
|
|
||||||
setSelectedIds(prev => prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]);
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleSelectAll = () => {
|
|
||||||
if (selectedIds.length === filtered.length && filtered.length > 0) {
|
|
||||||
setSelectedIds([]);
|
|
||||||
} else {
|
|
||||||
setSelectedIds(filtered.map(p => p.id));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleBatchDelete = async () => {
|
|
||||||
if (selectedIds.length === 0) return;
|
|
||||||
const ok = await _confirm({
|
|
||||||
title: '批量删除',
|
|
||||||
description: `确定删除选中的 ${selectedIds.length} 个 Playbook 吗？`,
|
|
||||||
confirmText: '批量删除',
|
|
||||||
variant: 'destructive',
|
|
||||||
});
|
|
||||||
if (!ok) return;
|
|
||||||
try {
|
|
||||||
await ansibleApi.batchDeletePlaybooks(selectedIds);
|
|
||||||
toast.success(`已删除 ${selectedIds.length} 个`);
|
|
||||||
setSelectedIds([]);
|
|
||||||
fetchPlaybooks();
|
|
||||||
} catch {
|
|
||||||
toast.error('批量删除失败');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// ---- 执行 ----
|
|
||||||
const handleExecute = async (pb: Playbook) => {
|
|
||||||
const ok = await _confirm({
|
|
||||||
title: '执行 Playbook',
|
|
||||||
description: `将在 AIOps 主机本地执行「${pb.name}」（ansible-playbook --connection=local）。`,
|
|
||||||
confirmText: '开始执行',
|
|
||||||
});
|
|
||||||
if (!ok) return;
|
|
||||||
setExecuting(true);
|
|
||||||
try {
|
|
||||||
const res = await ansibleApi.executePlaybook(pb.id);
|
|
||||||
const exec = (res as any)?.data ?? res;
|
|
||||||
if (exec?.status === 'success') {
|
|
||||||
toast.success(`执行成功，耗时 ${exec.duration ?? 0}ms`);
|
|
||||||
} else {
|
|
||||||
toast.error(`执行失败，耗时 ${exec?.duration ?? 0}ms`);
|
|
||||||
}
|
|
||||||
fetchPlaybooks();
|
|
||||||
fetchExecutions();
|
|
||||||
} catch {
|
|
||||||
toast.error('执行请求失败');
|
|
||||||
} finally {
|
|
||||||
setExecuting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// ---- 过滤 ----
|
|
||||||
const filtered = playbooks.filter(pb => {
|
|
||||||
const q = searchQuery.toLowerCase();
|
|
||||||
return pb.name.toLowerCase().includes(q) || pb.description.toLowerCase().includes(q) ||
|
|
||||||
pb.tags.some(t => t.toLowerCase().includes(q));
|
|
||||||
}).filter(pb => categoryFilter === 'all' || pb.category === categoryFilter);
|
|
||||||
|
|
||||||
const catLabel = (v: string) => categories.find(c => c.value === v)?.label || v;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<Tabs value={activeTab} onValueChange={v => { setActiveTab(v); if (v === 'jobs') fetchExecutions(); }}>
|
|
||||||
<TabsList className="grid w-full grid-cols-2 lg:w-[360px]">
|
|
||||||
<TabsTrigger value="playbooks">模板管理</TabsTrigger>
|
|
||||||
<TabsTrigger value="jobs">执行记录</TabsTrigger>
|
|
||||||
</TabsList>
|
|
||||||
|
|
||||||
{/* ============ 模板管理 ============ */}
|
|
||||||
<TabsContent value="playbooks" className="space-y-4">
|
|
||||||
{/* 搜索栏 + 新建按钮 */}
|
|
||||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
||||||
<div className="flex items-center gap-2 flex-1 min-w-[300px]">
|
|
||||||
<div className="relative flex-1">
|
|
||||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
|
||||||
<Input
|
|
||||||
placeholder="搜索名称、描述、标签..."
|
|
||||||
value={searchQuery}
|
|
||||||
onChange={e => setSearchQuery(e.target.value)}
|
|
||||||
className="pl-10"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Select value={categoryFilter} onValueChange={setCategoryFilter}>
|
|
||||||
<SelectTrigger className="w-[130px]">
|
|
||||||
<SelectValue placeholder="分类" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="all">全部分类</SelectItem>
|
|
||||||
{categories.map(c => (
|
|
||||||
<SelectItem key={c.value} value={c.value}>{c.label}</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{selectedIds.length > 0 && (
|
|
||||||
<Button variant="destructive" size="sm" onClick={handleBatchDelete}>
|
|
||||||
<Trash2 className="w-4 h-4 mr-1" />
|
|
||||||
删除 ({selectedIds.length})
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
<Button variant="outline" size="sm" onClick={fetchPlaybooks}>
|
|
||||||
<RotateCcw className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
<Button onClick={openCreate}>
|
|
||||||
<Plus className="w-4 h-4 mr-1" />
|
|
||||||
新建模板
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 表格 */}
|
|
||||||
<div className="rounded-md border">
|
|
||||||
<table className="w-full text-sm">
|
|
||||||
<thead className="bg-muted/50 border-b">
|
|
||||||
<tr>
|
|
||||||
<th className="w-10 px-3 py-3 text-left">
|
|
||||||
<Checkbox
|
|
||||||
checked={selectedIds.length === filtered.length && filtered.length > 0}
|
|
||||||
onCheckedChange={toggleSelectAll}
|
|
||||||
/>
|
|
||||||
</th>
|
|
||||||
<th className="px-3 py-3 text-left font-medium">名称</th>
|
|
||||||
<th className="px-3 py-3 text-left font-medium hidden md:table-cell">分类</th>
|
|
||||||
<th className="px-3 py-3 text-left font-medium hidden lg:table-cell">标签</th>
|
|
||||||
<th className="px-3 py-3 text-left font-medium hidden xl:table-cell">执行次数</th>
|
|
||||||
<th className="px-3 py-3 text-left font-medium hidden xl:table-cell">更新时间</th>
|
|
||||||
<th className="px-3 py-3 text-right font-medium">操作</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{loading ? (
|
|
||||||
<tr>
|
|
||||||
<td colSpan={7} className="text-center py-12 text-muted-foreground">
|
|
||||||
<Loader2 className="w-5 h-5 animate-spin inline mr-2" />
|
|
||||||
加载中...
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
) : filtered.length === 0 ? (
|
|
||||||
<tr>
|
|
||||||
<td colSpan={7} className="text-center py-12 text-muted-foreground">
|
|
||||||
暂无模板，点击"新建模板"创建
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
) : (
|
|
||||||
filtered.map(pb => (
|
|
||||||
<tr key={pb.id} className="border-b hover:bg-muted/30 transition-colors">
|
|
||||||
<td className="px-3 py-3">
|
|
||||||
<Checkbox
|
|
||||||
checked={selectedIds.includes(pb.id)}
|
|
||||||
onCheckedChange={() => toggleSelect(pb.id)}
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
<td className="px-3 py-3">
|
|
||||||
<div className="font-medium truncate max-w-[200px]">{pb.name}</div>
|
|
||||||
{pb.description && (
|
|
||||||
<div className="text-xs text-muted-foreground truncate max-w-[200px]">{pb.description}</div>
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
<td className="px-3 py-3 hidden md:table-cell">
|
|
||||||
<Badge variant="secondary" className="text-xs">{catLabel(pb.category)}</Badge>
|
|
||||||
</td>
|
|
||||||
<td className="px-3 py-3 hidden lg:table-cell">
|
|
||||||
<div className="flex flex-wrap gap-1">
|
|
||||||
{pb.tags.length > 0 ? pb.tags.map(t => (
|
|
||||||
<Badge key={t} variant="outline" className="text-xs"><Tags className="w-3 h-3 mr-0.5" />{t}</Badge>
|
|
||||||
)) : <span className="text-muted-foreground">-</span>}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td className="px-3 py-3 hidden xl:table-cell text-muted-foreground">{pb.run_count}</td>
|
|
||||||
<td className="px-3 py-3 hidden xl:table-cell text-muted-foreground text-xs">
|
|
||||||
{formatDate(pb.updated_at)}
|
|
||||||
</td>
|
|
||||||
<td className="px-3 py-3 text-right">
|
|
||||||
<div className="flex items-center justify-end gap-1">
|
|
||||||
<Button
|
|
||||||
variant="ghost" size="icon" className="h-8 w-8"
|
|
||||||
title="查看内容"
|
|
||||||
onClick={() => { setSelectedPlaybook(pb); setDetailOpen(true); }}
|
|
||||||
>
|
|
||||||
<Eye className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost" size="icon" className="h-8 w-8"
|
|
||||||
title="编辑"
|
|
||||||
onClick={() => openEdit(pb)}
|
|
||||||
>
|
|
||||||
<Pencil className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost" size="icon" className="h-8 w-8"
|
|
||||||
title="克隆"
|
|
||||||
onClick={() => handleClone(pb)}
|
|
||||||
>
|
|
||||||
<Copy className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost" size="icon" className="h-8 w-8 text-green-600"
|
|
||||||
title="执行"
|
|
||||||
disabled={executing}
|
|
||||||
onClick={() => handleExecute(pb)}
|
|
||||||
>
|
|
||||||
<Play className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost" size="icon" className="h-8 w-8 text-destructive"
|
|
||||||
title="删除"
|
|
||||||
onClick={() => handleDelete(pb)}
|
|
||||||
>
|
|
||||||
<Trash2 className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</TabsContent>
|
|
||||||
|
|
||||||
{/* ============ 执行记录 ============ */}
|
|
||||||
<TabsContent value="jobs" className="space-y-4">
|
|
||||||
<AnsibleExecutionsTable
|
|
||||||
executions={executions}
|
|
||||||
onRefresh={fetchExecutions}
|
|
||||||
onViewLogs={exec => { setSelectedExec(exec); setLogsOpen(true); }}
|
|
||||||
/>
|
|
||||||
</TabsContent>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
{/* 新建/编辑对话框 */}
|
|
||||||
<AnsibleFormDialog
|
|
||||||
open={editorOpen}
|
|
||||||
onOpenChange={setEditorOpen}
|
|
||||||
editingId={editingId}
|
|
||||||
formData={formData}
|
|
||||||
setFormData={setFormData}
|
|
||||||
onSave={handleSave}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 查看内容对话框 */}
|
|
||||||
<AnsibleDetailDialog
|
|
||||||
open={detailOpen}
|
|
||||||
onOpenChange={setDetailOpen}
|
|
||||||
playbook={selectedPlaybook}
|
|
||||||
onEdit={pb => { setDetailOpen(false); openEdit(pb); }}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 执行日志对话框 */}
|
|
||||||
<AnsibleLogsDialog
|
|
||||||
open={logsOpen}
|
|
||||||
onOpenChange={setLogsOpen}
|
|
||||||
exec={selectedExec}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AnsibleManager;
|
|
||||||
@@ -1,81 +0,0 @@
|
|||||||
// Ansible Playbook 卡片（复选框 + 名称 + 分类徽章 + 描述 + 标签 + 元信息 + 5 行操作按钮） // Logan.Li
|
|
||||||
import React from 'react';
|
|
||||||
import { FileCode, Eye, Edit, Copy, Trash2, Play, Loader2 } from 'lucide-react';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import { Badge } from '@/components/ui/badge';
|
|
||||||
import { Checkbox } from '@/components/ui/checkbox';
|
|
||||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
|
||||||
import { categories, type Playbook } from './ansible-helpers';
|
|
||||||
|
|
||||||
interface AnsiblePlaybookCardProps {
|
|
||||||
playbook: Playbook;
|
|
||||||
selected: boolean;
|
|
||||||
executing: boolean;
|
|
||||||
onToggleSelect: (id: number) => void;
|
|
||||||
onView: (pb: Playbook) => void;
|
|
||||||
onExecute: (pb: Playbook) => void;
|
|
||||||
onEdit: (pb: Playbook) => void;
|
|
||||||
onClone: (pb: Playbook) => void;
|
|
||||||
onDelete: (pb: Playbook) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const AnsiblePlaybookCard: React.FC<AnsiblePlaybookCardProps> = ({
|
|
||||||
playbook, selected, executing,
|
|
||||||
onToggleSelect, onView, onExecute, onEdit, onClone, onDelete,
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<Card className="hover:shadow-md transition-shadow">
|
|
||||||
<CardHeader className="pb-3">
|
|
||||||
<div className="flex items-start justify-between gap-2">
|
|
||||||
<div className="flex items-center gap-2 min-w-0">
|
|
||||||
<Checkbox
|
|
||||||
checked={selected}
|
|
||||||
onCheckedChange={() => onToggleSelect(playbook.id)}
|
|
||||||
className="shrink-0"
|
|
||||||
/>
|
|
||||||
<FileCode className="w-5 h-5 text-blue-500 shrink-0" />
|
|
||||||
<CardTitle className="text-base truncate">{playbook.name}</CardTitle>
|
|
||||||
</div>
|
|
||||||
<Badge variant="outline" className="shrink-0">
|
|
||||||
{categories.find(c => c.value === playbook.category)?.label || playbook.category}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
<CardDescription className="line-clamp-2">{playbook.description || '暂无描述'}</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="pt-0">
|
|
||||||
{playbook.tags.length > 0 && (
|
|
||||||
<div className="flex flex-wrap gap-1 mb-3">
|
|
||||||
{playbook.tags.map((tag, idx) => (
|
|
||||||
<Badge key={idx} variant="secondary" className="text-xs">{tag}</Badge>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="flex items-center justify-between text-xs text-muted-foreground mb-3">
|
|
||||||
<span>执行 {playbook.run_count} 次</span>
|
|
||||||
<span>超时 {playbook.timeout}s</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<Button variant="ghost" size="sm" title="查看内容" onClick={() => onView(playbook)}>
|
|
||||||
<Eye className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
<Button variant="ghost" size="sm" title="执行" disabled={executing} onClick={() => onExecute(playbook)}>
|
|
||||||
{executing
|
|
||||||
? <Loader2 className="w-4 h-4 animate-spin text-blue-600" />
|
|
||||||
: <Play className="w-4 h-4 text-green-600" />}
|
|
||||||
</Button>
|
|
||||||
<Button variant="ghost" size="sm" title="编辑" onClick={() => onEdit(playbook)}>
|
|
||||||
<Edit className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
<Button variant="ghost" size="sm" title="复制" onClick={() => onClone(playbook)}>
|
|
||||||
<Copy className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
<Button variant="ghost" size="sm" title="删除" onClick={() => onDelete(playbook)}>
|
|
||||||
<Trash2 className="w-4 h-4 text-red-600" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AnsiblePlaybookCard;
|
|
||||||
@@ -1,74 +0,0 @@
|
|||||||
// Ansible Playbook 统计卡片（4 张：总数/执行中/今日成功/今日失败） // Logan.Li
|
|
||||||
import React from 'react';
|
|
||||||
import { FileCode, CheckCircle, XCircle, Loader2 } from 'lucide-react';
|
|
||||||
import { Card, CardContent } from '@/components/ui/card';
|
|
||||||
|
|
||||||
interface AnsibleStatsCardsProps {
|
|
||||||
total: number;
|
|
||||||
running: number;
|
|
||||||
todaySuccess: number;
|
|
||||||
todayFailed: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
const AnsibleStatsCards: React.FC<AnsibleStatsCardsProps> = ({
|
|
||||||
total, running, todaySuccess, todayFailed,
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
||||||
<Card>
|
|
||||||
<CardContent className="p-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-muted-foreground">Playbook 总数</p>
|
|
||||||
<p className="text-2xl font-bold">{total}</p>
|
|
||||||
</div>
|
|
||||||
<div className="p-3 bg-blue-500/10 rounded-lg">
|
|
||||||
<FileCode className="w-5 h-5 text-blue-500" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
<Card>
|
|
||||||
<CardContent className="p-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-muted-foreground">执行中</p>
|
|
||||||
<p className="text-2xl font-bold text-blue-600">{running}</p>
|
|
||||||
</div>
|
|
||||||
<div className="p-3 bg-blue-500/10 rounded-lg">
|
|
||||||
<Loader2 className="w-5 h-5 text-blue-600" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
<Card>
|
|
||||||
<CardContent className="p-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-muted-foreground">今日成功</p>
|
|
||||||
<p className="text-2xl font-bold text-green-600">{todaySuccess}</p>
|
|
||||||
</div>
|
|
||||||
<div className="p-3 bg-green-500/10 rounded-lg">
|
|
||||||
<CheckCircle className="w-5 h-5 text-green-600" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
<Card>
|
|
||||||
<CardContent className="p-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-muted-foreground">今日失败</p>
|
|
||||||
<p className="text-2xl font-bold text-red-600">{todayFailed}</p>
|
|
||||||
</div>
|
|
||||||
<div className="p-3 bg-red-500/10 rounded-lg">
|
|
||||||
<XCircle className="w-5 h-5 text-red-600" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AnsibleStatsCards;
|
|
||||||
@@ -1,886 +0,0 @@
|
|||||||
import { useState, useEffect, useCallback } from 'react';
|
|
||||||
import {
|
|
||||||
Card, CardContent, CardHeader, CardTitle,
|
|
||||||
} from '@/components/ui/card';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import { Input } from '@/components/ui/input';
|
|
||||||
import { Badge } from '@/components/ui/badge';
|
|
||||||
import { Checkbox } from '@/components/ui/checkbox';
|
|
||||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
||||||
import {
|
|
||||||
Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
|
|
||||||
} from '@/components/ui/select';
|
|
||||||
import {
|
|
||||||
Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
|
|
||||||
} from '@/components/ui/table';
|
|
||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
||||||
import { toast } from 'sonner';
|
|
||||||
import { ansibleApi } from '@/services/api';
|
|
||||||
import {
|
|
||||||
Play, Server, ChevronRight, ChevronLeft, CheckCircle, Loader2,
|
|
||||||
Search, RefreshCw, Terminal, Clock, XCircle, FileText, Zap,
|
|
||||||
Boxes, Shield, Database, Activity, Wrench, Network,
|
|
||||||
Copy, Plus, Trash2, Pencil, Eye,
|
|
||||||
} from 'lucide-react';
|
|
||||||
import {
|
|
||||||
mapPlaybook, categories, getStatusBadge, formatDate, samplePlaybook,
|
|
||||||
type Playbook, type ExecutionRecord,
|
|
||||||
} from './ansible-helpers';
|
|
||||||
import { useConfirm } from '@/components/ui/confirm-dialog';
|
|
||||||
import AnsibleFormDialog, { type PlaybookFormData } from './AnsibleFormDialog';
|
|
||||||
|
|
||||||
// ============ Types ============
|
|
||||||
|
|
||||||
interface MatchedHost {
|
|
||||||
id: number;
|
|
||||||
hostname: string;
|
|
||||||
ip: string;
|
|
||||||
os: string;
|
|
||||||
status: string;
|
|
||||||
has_auth: boolean;
|
|
||||||
tags: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
type Step = 'template' | 'hosts' | 'review' | 'execute';
|
|
||||||
|
|
||||||
// ============ Icons per category ============
|
|
||||||
|
|
||||||
const catIcons: Record<string, React.ComponentType<any>> = {
|
|
||||||
deployment: Boxes,
|
|
||||||
configuration: Wrench,
|
|
||||||
maintenance: Activity,
|
|
||||||
security: Shield,
|
|
||||||
backup: Database,
|
|
||||||
monitoring: Network,
|
|
||||||
};
|
|
||||||
|
|
||||||
// ============ Main Component ============
|
|
||||||
|
|
||||||
export default function AnsibleWorkflow() {
|
|
||||||
const _confirm = useConfirm();
|
|
||||||
|
|
||||||
// ---- State ----
|
|
||||||
const [step, setStep] = useState<Step>('template');
|
|
||||||
const [activeTab, setActiveTab] = useState('workflow');
|
|
||||||
|
|
||||||
// Template
|
|
||||||
const [playbooks, setPlaybooks] = useState<Playbook[]>([]);
|
|
||||||
const [loadingPB, setLoadingPB] = useState(false);
|
|
||||||
const [searchPB, setSearchPB] = useState('');
|
|
||||||
const [catFilter, setCatFilter] = useState('all');
|
|
||||||
const [selectedPB, setSelectedPB] = useState<Playbook | null>(null);
|
|
||||||
const [selectedPBs, setSelectedPBs] = useState<Set<number>>(new Set()); // 批量选择
|
|
||||||
|
|
||||||
// 模板编辑弹窗
|
|
||||||
const [editorOpen, setEditorOpen] = useState(false);
|
|
||||||
const [editingId, setEditingId] = useState<number | null>(null);
|
|
||||||
const [formData, setFormData] = useState<PlaybookFormData>({
|
|
||||||
name: '', description: '', content: '', category: 'deployment', tags: '', timeout: 600,
|
|
||||||
});
|
|
||||||
|
|
||||||
// ---- 新建模板 ----
|
|
||||||
const openCreate = () => {
|
|
||||||
setEditingId(null);
|
|
||||||
setFormData({ name: '', description: '', content: samplePlaybook, category: 'deployment', tags: '', timeout: 600 });
|
|
||||||
setEditorOpen(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
// ---- 编辑模板 ----
|
|
||||||
const openEdit = (pb: Playbook) => {
|
|
||||||
setEditingId(pb.id);
|
|
||||||
setFormData({
|
|
||||||
name: pb.name, description: pb.description, content: pb.content,
|
|
||||||
category: pb.category, tags: pb.tags.join(', '), timeout: pb.timeout,
|
|
||||||
});
|
|
||||||
setEditorOpen(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const tagsToJson = (raw: string): string => {
|
|
||||||
const arr = raw.split(',').map(t => t.trim()).filter(Boolean);
|
|
||||||
return JSON.stringify(arr);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSave = async () => {
|
|
||||||
if (!formData.name || !formData.content) {
|
|
||||||
toast.error('请填写名称和 YAML 内容');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const payload = {
|
|
||||||
name: formData.name, description: formData.description, content: formData.content,
|
|
||||||
category: formData.category, tags: tagsToJson(formData.tags), timeout: Number(formData.timeout) || 600,
|
|
||||||
};
|
|
||||||
try {
|
|
||||||
if (editingId !== null) {
|
|
||||||
await ansibleApi.updatePlaybook(editingId, payload);
|
|
||||||
toast.success('更新成功');
|
|
||||||
} else {
|
|
||||||
await ansibleApi.createPlaybook(payload);
|
|
||||||
toast.success('创建成功');
|
|
||||||
}
|
|
||||||
setEditorOpen(false);
|
|
||||||
fetchPlaybooks();
|
|
||||||
} catch {
|
|
||||||
toast.error(editingId !== null ? '更新失败' : '创建失败');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Hosts
|
|
||||||
const [hostPattern, setHostPattern] = useState('');
|
|
||||||
const [matchType, setMatchType] = useState('contains');
|
|
||||||
const [hosts, setHosts] = useState<MatchedHost[]>([]);
|
|
||||||
const [hostsTotal, setHostsTotal] = useState(0);
|
|
||||||
const [loadingHosts, setLoadingHosts] = useState(false);
|
|
||||||
const [selectedHosts, setSelectedHosts] = useState<Set<number>>(new Set());
|
|
||||||
const [hostSearch, setHostSearch] = useState('');
|
|
||||||
|
|
||||||
// Execution
|
|
||||||
const [executing, setExecuting] = useState(false);
|
|
||||||
const [execStatus, setExecStatus] = useState('');
|
|
||||||
const [execOutput, setExecOutput] = useState('');
|
|
||||||
const [execDuration, setExecDuration] = useState(0);
|
|
||||||
const [execJobId, setExecJobId] = useState<number | null>(null);
|
|
||||||
|
|
||||||
// History
|
|
||||||
const [executions, setExecutions] = useState<ExecutionRecord[]>([]);
|
|
||||||
const [loadingExecs, setLoadingExecs] = useState(false);
|
|
||||||
|
|
||||||
// ============ Data Fetching ============
|
|
||||||
|
|
||||||
const fetchPlaybooks = useCallback(async () => {
|
|
||||||
setLoadingPB(true);
|
|
||||||
try {
|
|
||||||
const res = await ansibleApi.getPlaybooks({ page_size: 100 });
|
|
||||||
const items = (res as any)?.list || [];
|
|
||||||
setPlaybooks(items.map(mapPlaybook));
|
|
||||||
} catch { toast.error('获取 Playbook 失败'); }
|
|
||||||
finally { setLoadingPB(false); }
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// 克隆 Playbook 为自定义模板 // Logan.Li
|
|
||||||
const clonePlaybook = async (pb: Playbook, e?: React.MouseEvent) => {
|
|
||||||
e?.stopPropagation();
|
|
||||||
try {
|
|
||||||
const res = await ansibleApi.clonePlaybook(pb.id);
|
|
||||||
const cloned = mapPlaybook((res as any)?.data ?? res);
|
|
||||||
toast.success(`已克隆「${cloned.name}」，可在模板管理中编辑`);
|
|
||||||
await fetchPlaybooks();
|
|
||||||
setSelectedPB(cloned);
|
|
||||||
} catch { toast.error('克隆失败'); }
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchExecutions = useCallback(async () => {
|
|
||||||
setLoadingExecs(true);
|
|
||||||
try {
|
|
||||||
const res = await ansibleApi.getJobs({ page_size: 30 });
|
|
||||||
setExecutions((res as any)?.list || []);
|
|
||||||
} catch { /* silent */ }
|
|
||||||
finally { setLoadingExecs(false); }
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => { fetchPlaybooks(); fetchExecutions(); }, []);
|
|
||||||
|
|
||||||
// ============ Host Matching ============
|
|
||||||
|
|
||||||
const matchHosts = useCallback(async (pattern: string, type: string) => {
|
|
||||||
if (!pattern && type === 'contains') return; // skip empty contains
|
|
||||||
setLoadingHosts(true);
|
|
||||||
try {
|
|
||||||
const res = await ansibleApi.matchHosts({
|
|
||||||
pattern: pattern || undefined,
|
|
||||||
match_type: type,
|
|
||||||
page_size: 100,
|
|
||||||
});
|
|
||||||
const list = (res as any)?.list || [];
|
|
||||||
setHosts(list);
|
|
||||||
setHostsTotal((res as any)?.total || list.length);
|
|
||||||
} catch { toast.error('主机匹配失败'); }
|
|
||||||
finally { setLoadingHosts(false); }
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Auto-match when entering hosts step
|
|
||||||
useEffect(() => {
|
|
||||||
if (step === 'hosts') matchHosts(hostPattern, matchType);
|
|
||||||
}, [step]);
|
|
||||||
|
|
||||||
// ============ Execution ============
|
|
||||||
|
|
||||||
const executePlaybook = async () => {
|
|
||||||
if (!selectedPB) return;
|
|
||||||
const hostList = Array.from(selectedHosts).map(id => {
|
|
||||||
const h = hosts.find(x => x.id === id);
|
|
||||||
return h?.hostname || h?.ip || String(id);
|
|
||||||
});
|
|
||||||
|
|
||||||
const ok = await _confirm({
|
|
||||||
title: '确认执行',
|
|
||||||
description: `将在 ${hostList.length} 台主机上执行「${selectedPB.name}」`,
|
|
||||||
confirmText: '开始执行',
|
|
||||||
});
|
|
||||||
if (!ok) return;
|
|
||||||
|
|
||||||
setStep('execute');
|
|
||||||
setExecuting(true);
|
|
||||||
setExecStatus('running');
|
|
||||||
setExecOutput('正在连接目标主机...\n');
|
|
||||||
const startTime = Date.now();
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await ansibleApi.executePlaybook(
|
|
||||||
selectedPB.id,
|
|
||||||
hostList.length > 0 ? hostList : undefined
|
|
||||||
);
|
|
||||||
const job = (res as any)?.data ?? res;
|
|
||||||
setExecJobId(job?.id);
|
|
||||||
setExecStatus(job?.status || 'completed');
|
|
||||||
setExecOutput(job?.output || '执行完成（无输出）');
|
|
||||||
setExecDuration(job?.duration || (Date.now() - startTime));
|
|
||||||
} catch (e: any) {
|
|
||||||
setExecStatus('failed');
|
|
||||||
setExecOutput(`执行失败: ${e?.message || '未知错误'}`);
|
|
||||||
setExecDuration(Date.now() - startTime);
|
|
||||||
} finally {
|
|
||||||
setExecuting(false);
|
|
||||||
fetchExecutions();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// ============ Render Helpers ============
|
|
||||||
|
|
||||||
const toggleHost = (id: number) => {
|
|
||||||
setSelectedHosts(prev => {
|
|
||||||
const next = new Set(prev);
|
|
||||||
next.has(id) ? next.delete(id) : next.add(id);
|
|
||||||
return next;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleAllHosts = () => {
|
|
||||||
if (selectedHosts.size === filteredHosts.length && filteredHosts.length > 0) {
|
|
||||||
setSelectedHosts(new Set());
|
|
||||||
} else {
|
|
||||||
setSelectedHosts(new Set(filteredHosts.map(h => h.id)));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const filteredHosts = hosts.filter(h =>
|
|
||||||
h.hostname.toLowerCase().includes(hostSearch.toLowerCase()) ||
|
|
||||||
h.ip.includes(hostSearch)
|
|
||||||
);
|
|
||||||
|
|
||||||
const filteredPlaybooks = playbooks.filter(pb => {
|
|
||||||
const q = searchPB.toLowerCase();
|
|
||||||
const match = pb.name.toLowerCase().includes(q) ||
|
|
||||||
pb.description.toLowerCase().includes(q) ||
|
|
||||||
pb.tags.some(t => t.toLowerCase().includes(q));
|
|
||||||
return match && (catFilter === 'all' || pb.category === catFilter);
|
|
||||||
});
|
|
||||||
|
|
||||||
const stepsList: { key: Step; label: string; icon: React.ComponentType<any> }[] = [
|
|
||||||
{ key: 'template', label: '选择模板', icon: FileText },
|
|
||||||
{ key: 'hosts', label: '匹配主机', icon: Server },
|
|
||||||
{ key: 'review', label: '确认执行', icon: CheckCircle },
|
|
||||||
{ key: 'execute', label: '执行监控', icon: Terminal },
|
|
||||||
];
|
|
||||||
|
|
||||||
const currentStepIdx = stepsList.findIndex(s => s.key === step);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<h1 className="text-2xl font-bold text-slate-100">Ansible 自动化部署</h1>
|
|
||||||
<p className="text-sm text-slate-500 mt-1">模板 → 匹配主机 → 执行部署 → 历史记录</p>
|
|
||||||
</div>
|
|
||||||
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
|
||||||
<TabsList className="grid w-[280px] grid-cols-2">
|
|
||||||
<TabsTrigger value="workflow">工作流</TabsTrigger>
|
|
||||||
<TabsTrigger value="history">执行记录</TabsTrigger>
|
|
||||||
</TabsList>
|
|
||||||
</Tabs>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Step Indicator */}
|
|
||||||
{activeTab === 'workflow' && (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{stepsList.map((s, i) => (
|
|
||||||
<div key={s.key} className="flex items-center gap-2">
|
|
||||||
<button
|
|
||||||
onClick={() => i <= currentStepIdx && setStep(s.key)}
|
|
||||||
className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
|
||||||
i === currentStepIdx
|
|
||||||
? 'bg-blue-600 text-white'
|
|
||||||
: i < currentStepIdx
|
|
||||||
? 'bg-emerald-500/20 text-emerald-400 cursor-pointer hover:bg-emerald-500/30'
|
|
||||||
: 'bg-slate-800 text-slate-500'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{i < currentStepIdx ? (
|
|
||||||
<CheckCircle className="h-4 w-4" />
|
|
||||||
) : (
|
|
||||||
<s.icon className="h-4 w-4" />
|
|
||||||
)}
|
|
||||||
{s.label}
|
|
||||||
</button>
|
|
||||||
{i < stepsList.length - 1 && (
|
|
||||||
<ChevronRight className="h-4 w-4 text-slate-600" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* ============ Workflow Content ============ */}
|
|
||||||
{activeTab === 'workflow' && (
|
|
||||||
<>
|
|
||||||
{/* Step 1: Template Selection — 表格列表 */}
|
|
||||||
{step === 'template' && (
|
|
||||||
<Card className="bg-slate-900 border-slate-800">
|
|
||||||
<CardHeader className="pb-2">
|
|
||||||
<CardTitle className="text-slate-100 flex items-center gap-2">
|
|
||||||
<FileText className="h-5 w-5 text-blue-400" />
|
|
||||||
选择 Playbook 模板
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-3">
|
|
||||||
{/* 搜索/过滤栏 */}
|
|
||||||
<div className="flex gap-3">
|
|
||||||
<div className="relative flex-1">
|
|
||||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
|
|
||||||
<Input
|
|
||||||
placeholder="搜索名称、标签…"
|
|
||||||
value={searchPB}
|
|
||||||
onChange={e => setSearchPB(e.target.value)}
|
|
||||||
className="pl-10 bg-slate-800 border-slate-700"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Select value={catFilter} onValueChange={setCatFilter}>
|
|
||||||
<SelectTrigger className="w-36 bg-slate-800 border-slate-700">
|
|
||||||
<SelectValue placeholder="分类" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent className="bg-slate-800 border-slate-700">
|
|
||||||
<SelectItem value="all">全部分类</SelectItem>
|
|
||||||
{categories.map(c => (
|
|
||||||
<SelectItem key={c.value} value={c.value}>{c.label}</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
<Button variant="outline" onClick={fetchPlaybooks} className="border-slate-700">
|
|
||||||
<RefreshCw className="h-4 w-4 mr-2" />刷新
|
|
||||||
</Button>
|
|
||||||
<Button onClick={openCreate} size="sm" className="gap-1">
|
|
||||||
<Plus className="h-4 w-4" />新建模板
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 批量操作栏 */}
|
|
||||||
{selectedPBs.size > 0 && (
|
|
||||||
<div className="flex items-center gap-2 px-3 py-2 rounded bg-slate-800/50 border border-slate-700">
|
|
||||||
<span className="text-sm text-slate-400">
|
|
||||||
已选 {selectedPBs.size} 项
|
|
||||||
</span>
|
|
||||||
<Button
|
|
||||||
variant="destructive"
|
|
||||||
size="sm"
|
|
||||||
onClick={async () => {
|
|
||||||
const ids = Array.from(selectedPBs);
|
|
||||||
const ok = await _confirm({
|
|
||||||
title: '批量删除',
|
|
||||||
description: `确定删除选中的 ${ids.length} 个模板吗？此操作不可恢复。`,
|
|
||||||
confirmText: '批量删除',
|
|
||||||
variant: 'destructive',
|
|
||||||
});
|
|
||||||
if (!ok) return;
|
|
||||||
try {
|
|
||||||
await ansibleApi.batchDeletePlaybooks(ids);
|
|
||||||
toast.success(`已删除 ${ids.length} 个`);
|
|
||||||
setSelectedPBs(new Set());
|
|
||||||
fetchPlaybooks();
|
|
||||||
} catch { toast.error('删除失败'); }
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Trash2 className="h-3.5 w-3.5 mr-1" />批量删除
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 表格 */}
|
|
||||||
{loadingPB ? (
|
|
||||||
<div className="text-center py-12 text-slate-500">
|
|
||||||
<Loader2 className="h-6 w-6 animate-spin mx-auto mb-2" />加载中…
|
|
||||||
</div>
|
|
||||||
) : filteredPlaybooks.length === 0 ? (
|
|
||||||
<div className="text-center py-12 text-slate-500">暂无模板</div>
|
|
||||||
) : (
|
|
||||||
<div className="border border-slate-800 rounded-lg overflow-hidden">
|
|
||||||
<Table>
|
|
||||||
<TableHeader>
|
|
||||||
<TableRow className="border-slate-800 hover:bg-transparent">
|
|
||||||
<TableHead className="w-10 text-slate-500">
|
|
||||||
<Checkbox
|
|
||||||
checked={selectedPBs.size === filteredPlaybooks.length && filteredPlaybooks.length > 0}
|
|
||||||
onCheckedChange={() => {
|
|
||||||
if (selectedPBs.size === filteredPlaybooks.length) {
|
|
||||||
setSelectedPBs(new Set());
|
|
||||||
} else {
|
|
||||||
setSelectedPBs(new Set(filteredPlaybooks.map(p => p.id)));
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</TableHead>
|
|
||||||
<TableHead className="text-slate-400">名称</TableHead>
|
|
||||||
<TableHead className="text-slate-400 hidden md:table-cell">分类</TableHead>
|
|
||||||
<TableHead className="text-slate-400 hidden lg:table-cell">标签</TableHead>
|
|
||||||
<TableHead className="text-slate-400 text-right">操作</TableHead>
|
|
||||||
</TableRow>
|
|
||||||
</TableHeader>
|
|
||||||
<TableBody>
|
|
||||||
{filteredPlaybooks.map(pb => {
|
|
||||||
const selected = selectedPB?.id === pb.id;
|
|
||||||
const batchChecked = selectedPBs.has(pb.id);
|
|
||||||
return (
|
|
||||||
<TableRow
|
|
||||||
key={pb.id}
|
|
||||||
onClick={() => setSelectedPB(selected ? null : pb)}
|
|
||||||
className={`border-slate-800 cursor-pointer transition-colors ${
|
|
||||||
selected
|
|
||||||
? 'bg-blue-500/10 hover:bg-blue-500/15'
|
|
||||||
: 'hover:bg-slate-800/40'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<TableCell onClick={e => e.stopPropagation()}>
|
|
||||||
<Checkbox
|
|
||||||
checked={batchChecked}
|
|
||||||
onCheckedChange={() => {
|
|
||||||
const next = new Set(selectedPBs);
|
|
||||||
batchChecked ? next.delete(pb.id) : next.add(pb.id);
|
|
||||||
setSelectedPBs(next);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
<div className="font-medium text-slate-100 text-sm truncate max-w-[220px]">
|
|
||||||
{pb.name}
|
|
||||||
</div>
|
|
||||||
{pb.description && (
|
|
||||||
<div className="text-xs text-slate-500 truncate max-w-[220px] mt-0.5">
|
|
||||||
{pb.description}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="hidden md:table-cell">
|
|
||||||
<Badge variant="secondary" className="text-xs bg-slate-700/50 text-slate-400">
|
|
||||||
{categories.find(c => c.value === pb.category)?.label || pb.category}
|
|
||||||
</Badge>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="hidden lg:table-cell">
|
|
||||||
<div className="flex flex-wrap gap-1">
|
|
||||||
{pb.tags.slice(0, 3).map(t => (
|
|
||||||
<Badge key={t} variant="outline" className="text-[10px] border-slate-700 text-slate-500 px-1.5 py-0">
|
|
||||||
{t}
|
|
||||||
</Badge>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="text-right">
|
|
||||||
<div className="flex items-center justify-end gap-1" onClick={e => e.stopPropagation()}>
|
|
||||||
<Button
|
|
||||||
variant="ghost" size="icon" className="h-7 w-7 text-slate-400 hover:text-slate-200"
|
|
||||||
title="编辑（修改名称/分类/YAML）"
|
|
||||||
onClick={() => openEdit(pb)}
|
|
||||||
>
|
|
||||||
<Pencil className="h-3.5 w-3.5" />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost" size="icon" className="h-7 w-7 text-slate-400 hover:text-blue-400"
|
|
||||||
title="克隆"
|
|
||||||
onClick={() => clonePlaybook(pb)}
|
|
||||||
>
|
|
||||||
<Copy className="h-3.5 w-3.5" />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost" size="icon" className="h-7 w-7 text-slate-400 hover:text-red-400"
|
|
||||||
title="删除"
|
|
||||||
onClick={async () => {
|
|
||||||
const ok = await _confirm({
|
|
||||||
title: '删除模板',
|
|
||||||
description: `确定删除「${pb.name}」吗？此操作不可恢复。`,
|
|
||||||
confirmText: '删除',
|
|
||||||
variant: 'destructive',
|
|
||||||
});
|
|
||||||
if (!ok) return;
|
|
||||||
try {
|
|
||||||
await ansibleApi.deletePlaybook(pb.id);
|
|
||||||
toast.success('已删除');
|
|
||||||
if (selectedPB?.id === pb.id) setSelectedPB(null);
|
|
||||||
fetchPlaybooks();
|
|
||||||
} catch { toast.error('删除失败'); }
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Trash2 className="h-3.5 w-3.5" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex justify-end">
|
|
||||||
<Button
|
|
||||||
onClick={() => { setStep('hosts'); }}
|
|
||||||
disabled={!selectedPB}
|
|
||||||
className="gap-2"
|
|
||||||
>
|
|
||||||
下一步：匹配主机 <ChevronRight className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Step 2: Host Matching */}
|
|
||||||
{step === 'hosts' && (
|
|
||||||
<Card className="bg-slate-900 border-slate-800">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="text-slate-100 flex items-center gap-2">
|
|
||||||
<Server className="h-5 w-5 text-emerald-400" />
|
|
||||||
匹配目标主机
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-4">
|
|
||||||
<div className="flex gap-3">
|
|
||||||
<div className="relative flex-1">
|
|
||||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
|
|
||||||
<Input
|
|
||||||
placeholder="主机名/IP 匹配（支持正则）：web* / ^k8s-.* / 10.10.10."
|
|
||||||
value={hostPattern}
|
|
||||||
onChange={e => setHostPattern(e.target.value)}
|
|
||||||
onKeyDown={e => e.key === 'Enter' && matchHosts(hostPattern, matchType)}
|
|
||||||
className="pl-10 bg-slate-800 border-slate-700 font-mono text-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Select value={matchType} onValueChange={v => { setMatchType(v); matchHosts(hostPattern, v); }}>
|
|
||||||
<SelectTrigger className="w-28 bg-slate-800 border-slate-700">
|
|
||||||
<SelectValue />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent className="bg-slate-800 border-slate-700">
|
|
||||||
<SelectItem value="prefix">前缀</SelectItem>
|
|
||||||
<SelectItem value="contains">模糊</SelectItem>
|
|
||||||
<SelectItem value="regex">正则</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
<Button onClick={() => matchHosts(hostPattern, matchType)} className="border-slate-700">
|
|
||||||
<Search className="h-4 w-4 mr-2" />匹配
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Host table */}
|
|
||||||
{loadingHosts ? (
|
|
||||||
<div className="text-center py-8 text-slate-500">
|
|
||||||
<Loader2 className="h-6 w-6 animate-spin mx-auto mb-2" />匹配中…
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<span className="text-sm text-slate-400">
|
|
||||||
匹配 <span className="text-slate-200 font-medium">{hostsTotal}</span> 台主机
|
|
||||||
{selectedHosts.size > 0 && (
|
|
||||||
<span className="text-emerald-400 ml-2">（已选 {selectedHosts.size} 台）</span>
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
{filteredHosts.length > 0 && (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Checkbox
|
|
||||||
checked={selectedHosts.size === filteredHosts.length && filteredHosts.length > 0}
|
|
||||||
onCheckedChange={toggleAllHosts}
|
|
||||||
/>
|
|
||||||
<span className="text-xs text-slate-500">全选</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="border border-slate-800 rounded-lg overflow-hidden">
|
|
||||||
<Table>
|
|
||||||
<TableHeader>
|
|
||||||
<TableRow className="border-slate-800 hover:bg-transparent">
|
|
||||||
<TableHead className="w-10 text-slate-500">选</TableHead>
|
|
||||||
<TableHead className="text-slate-400">主机名</TableHead>
|
|
||||||
<TableHead className="text-slate-400">IP</TableHead>
|
|
||||||
<TableHead className="text-slate-400">OS</TableHead>
|
|
||||||
<TableHead className="text-slate-400">状态</TableHead>
|
|
||||||
<TableHead className="text-slate-400">认证</TableHead>
|
|
||||||
</TableRow>
|
|
||||||
</TableHeader>
|
|
||||||
<TableBody>
|
|
||||||
{filteredHosts.length === 0 ? (
|
|
||||||
<TableRow>
|
|
||||||
<TableCell colSpan={6} className="text-center text-slate-500 py-8">
|
|
||||||
输入匹配模式后点击"匹配"预览主机
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
) : (
|
|
||||||
filteredHosts.map(h => (
|
|
||||||
<TableRow
|
|
||||||
key={h.id}
|
|
||||||
className="border-slate-800 hover:bg-slate-800/30 cursor-pointer"
|
|
||||||
onClick={() => toggleHost(h.id)}
|
|
||||||
>
|
|
||||||
<TableCell>
|
|
||||||
<Checkbox checked={selectedHosts.has(h.id)} />
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="font-medium text-slate-200">{h.hostname}</TableCell>
|
|
||||||
<TableCell className="text-slate-400 font-mono text-sm">{h.ip}</TableCell>
|
|
||||||
<TableCell className="text-slate-500 text-sm">{h.os || '-'}</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
<Badge className={h.status === 'running' ? 'bg-emerald-500/20 text-emerald-400' : 'bg-slate-500/20 text-slate-400'}>
|
|
||||||
{h.status === 'running' ? '运行中' : h.status || '未知'}
|
|
||||||
</Badge>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
{h.has_auth ? (
|
|
||||||
<Badge className="bg-emerald-500/20 text-emerald-400">已配置</Badge>
|
|
||||||
) : (
|
|
||||||
<Badge className="bg-yellow-500/20 text-yellow-400">未配置</Badge>
|
|
||||||
)}
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<Button variant="outline" onClick={() => setStep('template')} className="gap-2 border-slate-700">
|
|
||||||
<ChevronLeft className="h-4 w-4" />上一步
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={() => setStep('review')}
|
|
||||||
disabled={selectedHosts.size === 0}
|
|
||||||
className="gap-2"
|
|
||||||
>
|
|
||||||
下一步：确认执行 <ChevronRight className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Step 3: Review & Confirm */}
|
|
||||||
{step === 'review' && selectedPB && (
|
|
||||||
<Card className="bg-slate-900 border-slate-800">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="text-slate-100 flex items-center gap-2">
|
|
||||||
<CheckCircle className="h-5 w-5 text-amber-400" />
|
|
||||||
确认执行
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-4">
|
|
||||||
{/* Playbook summary */}
|
|
||||||
<div className="p-4 rounded-lg bg-slate-800/50 border border-slate-700">
|
|
||||||
<h3 className="text-sm font-medium text-slate-300 mb-2">Playbook</h3>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="p-2 rounded-lg bg-blue-500/20">
|
|
||||||
<FileText className="h-5 w-5 text-blue-400" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-slate-100 font-medium">{selectedPB.name}</p>
|
|
||||||
<p className="text-xs text-slate-500">{selectedPB.description}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Host list summary */}
|
|
||||||
<div className="p-4 rounded-lg bg-slate-800/50 border border-slate-700">
|
|
||||||
<h3 className="text-sm font-medium text-slate-300 mb-2">
|
|
||||||
目标主机 <span className="text-emerald-400">（{selectedHosts.size} 台）</span>
|
|
||||||
</h3>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{Array.from(selectedHosts).map(id => {
|
|
||||||
const h = hosts.find(x => x.id === id);
|
|
||||||
return (
|
|
||||||
<Badge key={id} variant="outline" className="border-slate-600 text-slate-300 py-1 px-3">
|
|
||||||
<Server className="h-3 w-3 mr-1 text-emerald-400" />
|
|
||||||
{h?.hostname || `ID:${id}`}
|
|
||||||
<span className="text-slate-500 ml-1 text-xs">({h?.ip})</span>
|
|
||||||
</Badge>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Playbook content preview */}
|
|
||||||
<details className="p-4 rounded-lg bg-slate-800/50 border border-slate-700">
|
|
||||||
<summary className="text-sm font-medium text-slate-400 cursor-pointer hover:text-slate-300">
|
|
||||||
📄 查看 Playbook YAML 内容
|
|
||||||
</summary>
|
|
||||||
<pre className="mt-3 text-xs text-slate-400 bg-slate-950 p-3 rounded overflow-x-auto max-h-64">
|
|
||||||
{selectedPB.content || '(空)'}
|
|
||||||
</pre>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<Button variant="outline" onClick={() => setStep('hosts')} className="gap-2 border-slate-700">
|
|
||||||
<ChevronLeft className="h-4 w-4" />上一步
|
|
||||||
</Button>
|
|
||||||
<Button onClick={executePlaybook} className="gap-2 bg-emerald-600 hover:bg-emerald-700">
|
|
||||||
<Zap className="h-4 w-4" />开始执行
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Step 4: Execution & Monitor */}
|
|
||||||
{step === 'execute' && (
|
|
||||||
<Card className="bg-slate-900 border-slate-800">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="text-slate-100 flex items-center gap-2">
|
|
||||||
<Terminal className="h-5 w-5 text-cyan-400" />
|
|
||||||
执行监控
|
|
||||||
{executing && <Loader2 className="h-4 w-4 animate-spin text-blue-400" />}
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-4">
|
|
||||||
{/* Status indicator */}
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<div className={`flex items-center gap-2 px-4 py-2 rounded-lg ${
|
|
||||||
execStatus === 'success' ? 'bg-emerald-500/10 border border-emerald-500/30' :
|
|
||||||
execStatus === 'failed' ? 'bg-red-500/10 border border-red-500/30' :
|
|
||||||
'bg-blue-500/10 border border-blue-500/30'
|
|
||||||
}`}>
|
|
||||||
{execStatus === 'success' ? <CheckCircle className="h-5 w-5 text-emerald-400" /> :
|
|
||||||
execStatus === 'failed' ? <XCircle className="h-5 w-5 text-red-400" /> :
|
|
||||||
<Loader2 className="h-5 w-5 animate-spin text-blue-400" />}
|
|
||||||
<span className={`font-medium ${
|
|
||||||
execStatus === 'success' ? 'text-emerald-400' :
|
|
||||||
execStatus === 'failed' ? 'text-red-400' : 'text-blue-400'
|
|
||||||
}`}>
|
|
||||||
{execStatus === 'success' ? '执行成功' :
|
|
||||||
execStatus === 'failed' ? '执行失败' :
|
|
||||||
executing ? '执行中…' : '等待执行'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{execDuration > 0 && (
|
|
||||||
<span className="text-sm text-slate-500 flex items-center gap-1">
|
|
||||||
<Clock className="h-3 w-3" />
|
|
||||||
{execDuration >= 1000
|
|
||||||
? `${(execDuration / 1000).toFixed(1)}s`
|
|
||||||
: `${execDuration}ms`}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Output terminal */}
|
|
||||||
<div className="bg-slate-950 border border-slate-800 rounded-lg p-4 font-mono text-sm text-slate-300 max-h-96 overflow-auto whitespace-pre-wrap">
|
|
||||||
{execOutput || (executing ? '等待输出…' : '无输出')}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => { setStep('template'); setSelectedPB(null); setSelectedHosts(new Set()); setExecOutput(''); setExecStatus(''); }}
|
|
||||||
className="gap-2 border-slate-700"
|
|
||||||
>
|
|
||||||
<Zap className="h-4 w-4" />新任务
|
|
||||||
</Button>
|
|
||||||
{execJobId && (
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => { setActiveTab('history'); }}
|
|
||||||
className="gap-2 border-slate-700"
|
|
||||||
>
|
|
||||||
<Clock className="h-4 w-4" />查看历史
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* ============ History Tab ============ */}
|
|
||||||
{activeTab === 'history' && (
|
|
||||||
<Card className="bg-slate-900 border-slate-800">
|
|
||||||
<CardHeader>
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<CardTitle className="text-slate-100 flex items-center gap-2">
|
|
||||||
<Clock className="h-5 w-5 text-slate-400" />
|
|
||||||
执行记录
|
|
||||||
</CardTitle>
|
|
||||||
<Button variant="outline" size="sm" onClick={fetchExecutions} className="border-slate-700 h-8">
|
|
||||||
<RefreshCw className="h-3 w-3 mr-1" />刷新
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
{loadingExecs ? (
|
|
||||||
<div className="text-center py-8 text-slate-500">
|
|
||||||
<Loader2 className="h-6 w-6 animate-spin mx-auto mb-2" />加载中…
|
|
||||||
</div>
|
|
||||||
) : executions.length === 0 ? (
|
|
||||||
<div className="text-center py-8 text-slate-500">暂无执行记录</div>
|
|
||||||
) : (
|
|
||||||
<Table>
|
|
||||||
<TableHeader>
|
|
||||||
<TableRow className="border-slate-800 hover:bg-transparent">
|
|
||||||
<TableHead className="text-slate-400">Playbook</TableHead>
|
|
||||||
<TableHead className="text-slate-400">状态</TableHead>
|
|
||||||
<TableHead className="text-slate-400">耗时</TableHead>
|
|
||||||
<TableHead className="text-slate-400">执行人</TableHead>
|
|
||||||
<TableHead className="text-slate-400">时间</TableHead>
|
|
||||||
<TableHead className="text-slate-400">输出</TableHead>
|
|
||||||
</TableRow>
|
|
||||||
</TableHeader>
|
|
||||||
<TableBody>
|
|
||||||
{executions.map(e => (
|
|
||||||
<TableRow key={e.id} className="border-slate-800 hover:bg-slate-800/30">
|
|
||||||
<TableCell className="font-medium text-slate-200">{e.task_name}</TableCell>
|
|
||||||
<TableCell>{getStatusBadge(e.status)}</TableCell>
|
|
||||||
<TableCell className="text-slate-400 text-sm">
|
|
||||||
{e.duration >= 1000 ? `${(e.duration / 1000).toFixed(1)}s` : `${e.duration}ms`}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="text-slate-500 text-sm">{e.triggered_by || '-'}</TableCell>
|
|
||||||
<TableCell className="text-slate-500 text-sm">{formatDate(e.created_at)}</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
{e.output ? (
|
|
||||||
<details>
|
|
||||||
<summary className="text-xs text-blue-400 cursor-pointer hover:text-blue-300">
|
|
||||||
查看输出
|
|
||||||
</summary>
|
|
||||||
<pre className="mt-2 text-xs text-slate-400 bg-slate-950 p-2 rounded max-h-32 overflow-auto">
|
|
||||||
{e.output.slice(0, 2000)}
|
|
||||||
</pre>
|
|
||||||
</details>
|
|
||||||
) : (
|
|
||||||
<span className="text-xs text-slate-600">-</span>
|
|
||||||
)}
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 新建/编辑模板弹窗 */}
|
|
||||||
<AnsibleFormDialog
|
|
||||||
open={editorOpen}
|
|
||||||
onOpenChange={setEditorOpen}
|
|
||||||
editingId={editingId}
|
|
||||||
formData={formData}
|
|
||||||
setFormData={setFormData}
|
|
||||||
onSave={handleSave}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -120,7 +120,7 @@ export function CronJobFormDialog({
|
|||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
setSubmitting(true);
|
setSubmitting(true);
|
||||||
const payload: any = {
|
const payload: Record<string, unknown> = {
|
||||||
name: form.name,
|
name: form.name,
|
||||||
description: form.description,
|
description: form.description,
|
||||||
cron_expr: form.cron_expr,
|
cron_expr: form.cron_expr,
|
||||||
|
|||||||
@@ -49,9 +49,9 @@ export function ScriptManager() {
|
|||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const res = await scriptApi.getScripts({ page_size: 100 });
|
const res = await scriptApi.getScripts({ page_size: 100 });
|
||||||
const items = (res as any)?.list || [];
|
const items = (res as Record<string, any>)?.list || [];
|
||||||
setScripts(items.map(mapScript));
|
setScripts(items.map(mapScript));
|
||||||
} catch (error) {
|
} catch {
|
||||||
toast.error('获取脚本列表失败');
|
toast.error('获取脚本列表失败');
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
@@ -61,9 +61,9 @@ export function ScriptManager() {
|
|||||||
const fetchExecutions = async () => {
|
const fetchExecutions = async () => {
|
||||||
try {
|
try {
|
||||||
const res = await taskExecutionApi.getExecutions({ task_type: 'script', page_size: 50 });
|
const res = await taskExecutionApi.getExecutions({ task_type: 'script', page_size: 50 });
|
||||||
const items = (res as any)?.list || [];
|
const items = (res as Record<string, any>)?.list || [];
|
||||||
setExecutions(items);
|
setExecutions(items);
|
||||||
} catch (error) {
|
} catch {
|
||||||
// 静默失败
|
// 静默失败
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -134,7 +134,7 @@ export function ScriptManager() {
|
|||||||
}
|
}
|
||||||
setEditorOpen(false);
|
setEditorOpen(false);
|
||||||
fetchScripts();
|
fetchScripts();
|
||||||
} catch (error) {
|
} catch {
|
||||||
toast.error(editingId !== null ? '更新失败' : '创建失败');
|
toast.error(editingId !== null ? '更新失败' : '创建失败');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -153,7 +153,7 @@ export function ScriptManager() {
|
|||||||
});
|
});
|
||||||
toast.success('复制成功');
|
toast.success('复制成功');
|
||||||
fetchScripts();
|
fetchScripts();
|
||||||
} catch (error) {
|
} catch {
|
||||||
toast.error('复制失败');
|
toast.error('复制失败');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -172,7 +172,7 @@ export function ScriptManager() {
|
|||||||
await scriptApi.deleteScript(sc.id);
|
await scriptApi.deleteScript(sc.id);
|
||||||
toast.success('删除成功');
|
toast.success('删除成功');
|
||||||
fetchScripts();
|
fetchScripts();
|
||||||
} catch (error) {
|
} catch {
|
||||||
toast.error('删除失败');
|
toast.error('删除失败');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -189,7 +189,7 @@ export function ScriptManager() {
|
|||||||
setExecuting(true);
|
setExecuting(true);
|
||||||
try {
|
try {
|
||||||
const res = await scriptApi.executeScript(sc.id);
|
const res = await scriptApi.executeScript(sc.id);
|
||||||
const exec = (res as any)?.data ?? res;
|
const exec = (res as Record<string, any>)?.data ?? res;
|
||||||
if (exec?.status === 'success') {
|
if (exec?.status === 'success') {
|
||||||
toast.success(`执行成功，耗时 ${exec.duration ?? 0}ms`);
|
toast.success(`执行成功，耗时 ${exec.duration ?? 0}ms`);
|
||||||
} else {
|
} else {
|
||||||
@@ -199,7 +199,7 @@ export function ScriptManager() {
|
|||||||
}
|
}
|
||||||
fetchScripts();
|
fetchScripts();
|
||||||
fetchExecutions();
|
fetchExecutions();
|
||||||
} catch (error) {
|
} catch {
|
||||||
toast.error('执行请求失败');
|
toast.error('执行请求失败');
|
||||||
} finally {
|
} finally {
|
||||||
setExecuting(false);
|
setExecuting(false);
|
||||||
@@ -243,7 +243,7 @@ export function ScriptManager() {
|
|||||||
toast.success(`已删除 ${selectedIds.length} 个脚本`);
|
toast.success(`已删除 ${selectedIds.length} 个脚本`);
|
||||||
setSelectedIds([]);
|
setSelectedIds([]);
|
||||||
fetchScripts();
|
fetchScripts();
|
||||||
} catch (error) {
|
} catch {
|
||||||
toast.error('批量删除失败');
|
toast.error('批量删除失败');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,115 +0,0 @@
|
|||||||
// Ansible 模块共享类型与辅助函数 // Logan.Li
|
|
||||||
import { Clock, CheckCircle, XCircle, Loader2 } from 'lucide-react';
|
|
||||||
import { Badge } from '@/components/ui/badge';
|
|
||||||
|
|
||||||
// ---- 类型定义 ----
|
|
||||||
|
|
||||||
export interface Playbook {
|
|
||||||
id: number;
|
|
||||||
name: string;
|
|
||||||
description: string;
|
|
||||||
content: string;
|
|
||||||
category: string;
|
|
||||||
tags: string[];
|
|
||||||
timeout: number;
|
|
||||||
run_count: number;
|
|
||||||
created_at: string;
|
|
||||||
updated_at: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ExecutionRecord {
|
|
||||||
id: number;
|
|
||||||
task_type: string;
|
|
||||||
task_id: number;
|
|
||||||
task_name: string;
|
|
||||||
status: string;
|
|
||||||
output: string;
|
|
||||||
duration: number;
|
|
||||||
triggered_by: string;
|
|
||||||
started_at: string | null;
|
|
||||||
finished_at: string | null;
|
|
||||||
created_at: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 将后端返回的 playbook 原始对象映射为前端结构（解析 tags JSON） // Logan.Li
|
|
||||||
export function mapPlaybook(raw: any): Playbook {
|
|
||||||
let tags: string[] = [];
|
|
||||||
try {
|
|
||||||
if (raw.tags) tags = JSON.parse(raw.tags);
|
|
||||||
} catch {
|
|
||||||
tags = [];
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
id: raw.id,
|
|
||||||
name: raw.name,
|
|
||||||
description: raw.description || '',
|
|
||||||
content: raw.content || '',
|
|
||||||
category: raw.category || 'deployment',
|
|
||||||
tags,
|
|
||||||
timeout: raw.timeout || 600,
|
|
||||||
run_count: raw.run_count || 0,
|
|
||||||
created_at: raw.created_at,
|
|
||||||
updated_at: raw.updated_at,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// Playbook 分类选项 // Logan.Li
|
|
||||||
export const categories = [
|
|
||||||
{ value: 'deployment', label: '应用部署' },
|
|
||||||
{ value: 'configuration', label: '配置管理' },
|
|
||||||
{ value: 'maintenance', label: '系统维护' },
|
|
||||||
{ value: 'security', label: '安全加固' },
|
|
||||||
{ value: 'backup', label: '备份恢复' },
|
|
||||||
{ value: 'monitoring', label: '监控配置' },
|
|
||||||
];
|
|
||||||
|
|
||||||
// 默认 Playbook 模板 // Logan.Li
|
|
||||||
export const samplePlaybook = `---
|
|
||||||
- name: Deploy Application
|
|
||||||
hosts: all
|
|
||||||
become: yes
|
|
||||||
vars:
|
|
||||||
app_name: myapp
|
|
||||||
deploy_path: /opt/{{ app_name }}
|
|
||||||
|
|
||||||
tasks:
|
|
||||||
- name: Install dependencies
|
|
||||||
package:
|
|
||||||
name:
|
|
||||||
- nginx
|
|
||||||
state: present
|
|
||||||
|
|
||||||
- name: Create deploy directory
|
|
||||||
file:
|
|
||||||
path: "{{ deploy_path }}"
|
|
||||||
state: directory
|
|
||||||
mode: '0755'
|
|
||||||
|
|
||||||
handlers:
|
|
||||||
- name: restart app
|
|
||||||
service:
|
|
||||||
name: nginx
|
|
||||||
state: restarted`;
|
|
||||||
|
|
||||||
// 执行状态 Badge 组件 // Logan.Li
|
|
||||||
export function getStatusBadge(status: string) {
|
|
||||||
switch (status) {
|
|
||||||
case 'pending':
|
|
||||||
return <Badge variant="outline" className="gap-1"><Clock className="w-3 h-3" />等待中</Badge>;
|
|
||||||
case 'running':
|
|
||||||
return <Badge variant="default" className="bg-blue-500 gap-1"><Loader2 className="w-3 h-3 animate-spin" />执行中</Badge>;
|
|
||||||
case 'success':
|
|
||||||
return <Badge variant="default" className="bg-green-600 gap-1"><CheckCircle className="w-3 h-3" />成功</Badge>;
|
|
||||||
case 'failed':
|
|
||||||
return <Badge variant="destructive" className="gap-1"><XCircle className="w-3 h-3" />失败</Badge>;
|
|
||||||
default:
|
|
||||||
return <Badge variant="secondary">{status || '未知'}</Badge>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 日期格式化 // Logan.Li
|
|
||||||
export function formatDate(s: string | null): string {
|
|
||||||
if (!s) return '-';
|
|
||||||
const d = new Date(s);
|
|
||||||
return Number.isNaN(d.getTime()) ? '-' : d.toLocaleString('zh-CN', { hour12: false });
|
|
||||||
}
|
|
||||||
@@ -80,7 +80,7 @@ export function BillingRecordDialog({ open, onOpenChange, editingRecord, onSucce
|
|||||||
onSuccess();
|
onSuccess();
|
||||||
toast('保存成功');
|
toast('保存成功');
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
toast.error('保存失败', { description: e.message });
|
toast.error('保存失败', { description: (e as Record<string, any>).message });
|
||||||
} finally {
|
} finally {
|
||||||
setSubmitting(false);
|
setSubmitting(false);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -71,7 +71,7 @@ export function BillingRuleDialog({ open, onOpenChange, editingRule, onSuccess }
|
|||||||
onSuccess();
|
onSuccess();
|
||||||
toast('保存成功');
|
toast('保存成功');
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
toast.error('保存失败', { description: e.message });
|
toast.error('保存失败', { description: (e as Record<string, any>).message });
|
||||||
} finally {
|
} finally {
|
||||||
setSubmitting(false);
|
setSubmitting(false);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -89,7 +89,7 @@ export function CloudAccountManager() {
|
|||||||
if (!formData.name.trim() || !formData.provider.trim()) return;
|
if (!formData.name.trim() || !formData.provider.trim()) return;
|
||||||
try {
|
try {
|
||||||
setSubmitting(true);
|
setSubmitting(true);
|
||||||
const payload: any = {
|
const payload: Record<string, any> = {
|
||||||
name: formData.name.trim(),
|
name: formData.name.trim(),
|
||||||
provider: formData.provider,
|
provider: formData.provider,
|
||||||
access_key: formData.access_key.trim(),
|
access_key: formData.access_key.trim(),
|
||||||
@@ -114,7 +114,7 @@ export function CloudAccountManager() {
|
|||||||
const loadData = async () => {
|
const loadData = async () => {
|
||||||
try {
|
try {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
const res: any = await cloudApi.getAccounts();
|
const res: Record<string, any> = await cloudApi.getAccounts();
|
||||||
setAccounts(res?.list || []);
|
setAccounts(res?.list || []);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('加载云账号列表失败:', e);
|
console.error('加载云账号列表失败:', e);
|
||||||
|
|||||||
@@ -60,7 +60,7 @@ export function CloudBilling() {
|
|||||||
const res = await billingApi.getStats();
|
const res = await billingApi.getStats();
|
||||||
setStats(res);
|
setStats(res);
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
toast.error('加载统计失败', { description: e.message });
|
toast.error('加载统计失败', { description: (e as Record<string, any>).message });
|
||||||
} finally {
|
} finally {
|
||||||
setStatsLoading(false);
|
setStatsLoading(false);
|
||||||
}
|
}
|
||||||
@@ -69,14 +69,14 @@ export function CloudBilling() {
|
|||||||
const loadRecords = useCallback(async () => {
|
const loadRecords = useCallback(async () => {
|
||||||
setRecordsLoading(true);
|
setRecordsLoading(true);
|
||||||
try {
|
try {
|
||||||
const params: any = {};
|
const params: Record<string, any> = {};
|
||||||
if (filterProvider) params.provider = filterProvider;
|
if (filterProvider) params.provider = filterProvider;
|
||||||
if (filterStart) params.start_date = filterStart;
|
if (filterStart) params.start_date = filterStart;
|
||||||
if (filterEnd) params.end_date = filterEnd;
|
if (filterEnd) params.end_date = filterEnd;
|
||||||
const res = await billingApi.list(params);
|
const res = await billingApi.list(params);
|
||||||
setRecords(res.list || []);
|
setRecords(res.list || []);
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
toast.error('加载账单失败', { description: e.message });
|
toast.error('加载账单失败', { description: (e as Record<string, any>).message });
|
||||||
} finally {
|
} finally {
|
||||||
setRecordsLoading(false);
|
setRecordsLoading(false);
|
||||||
}
|
}
|
||||||
@@ -88,7 +88,7 @@ export function CloudBilling() {
|
|||||||
const res = await billingApi.listAlertRules();
|
const res = await billingApi.listAlertRules();
|
||||||
setRules(res.list || []);
|
setRules(res.list || []);
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
toast.error('加载预警规则失败', { description: e.message });
|
toast.error('加载预警规则失败', { description: (e as Record<string, any>).message });
|
||||||
} finally {
|
} finally {
|
||||||
setRulesLoading(false);
|
setRulesLoading(false);
|
||||||
}
|
}
|
||||||
@@ -135,7 +135,7 @@ export function CloudBilling() {
|
|||||||
loadStats();
|
loadStats();
|
||||||
toast('删除成功');
|
toast('删除成功');
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
toast.error('删除失败', { description: e.message });
|
toast.error('删除失败', { description: (e as Record<string, any>).message });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -147,7 +147,7 @@ export function CloudBilling() {
|
|||||||
loadRules();
|
loadRules();
|
||||||
toast('删除成功');
|
toast('删除成功');
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
toast.error('删除失败', { description: e.message });
|
toast.error('删除失败', { description: (e as Record<string, any>).message });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -157,7 +157,7 @@ export function CloudBilling() {
|
|||||||
loadRules();
|
loadRules();
|
||||||
loadStats();
|
loadStats();
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
toast.error('操作失败', { description: e.message });
|
toast.error('操作失败', { description: (e as Record<string, any>).message });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -87,7 +87,7 @@ export function DomainManager() {
|
|||||||
if (!formData.name.trim()) return;
|
if (!formData.name.trim()) return;
|
||||||
try {
|
try {
|
||||||
setSubmitting(true);
|
setSubmitting(true);
|
||||||
const payload: any = {
|
const payload: Record<string, any> = {
|
||||||
name: formData.name.trim(),
|
name: formData.name.trim(),
|
||||||
registrar: formData.registrar.trim(),
|
registrar: formData.registrar.trim(),
|
||||||
status: formData.status,
|
status: formData.status,
|
||||||
@@ -114,7 +114,7 @@ export function DomainManager() {
|
|||||||
const loadData = async () => {
|
const loadData = async () => {
|
||||||
try {
|
try {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
const res: any = await cloudApi.getDomains();
|
const res: Record<string, any> = await cloudApi.getDomains();
|
||||||
setDomains(res?.list || []);
|
setDomains(res?.list || []);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('加载域名列表失败:', e);
|
console.error('加载域名列表失败:', e);
|
||||||
|
|||||||
@@ -60,7 +60,7 @@ export function PlatformManager() {
|
|||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const res = await platformApi.list();
|
const res = await platformApi.list();
|
||||||
const items = (res as any)?.list || [];
|
const items = (res as Record<string, any>)?.list || [];
|
||||||
setPlatforms(items);
|
setPlatforms(items);
|
||||||
} catch {
|
} catch {
|
||||||
setPlatforms([]);
|
setPlatforms([]);
|
||||||
|
|||||||
@@ -76,7 +76,7 @@ export function RegionManager() {
|
|||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const res = await regionApi.list();
|
const res = await regionApi.list();
|
||||||
const items = (res as any)?.list || [];
|
const items = (res as Record<string, any>)?.list || [];
|
||||||
setRegions(items);
|
setRegions(items);
|
||||||
} catch {
|
} catch {
|
||||||
setRegions([]);
|
setRegions([]);
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
|
|||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import { Clock, Server, Cloud, Bell, DollarSign, TrendingUp, TrendingDown, ArrowRight } from 'lucide-react';
|
import { Clock, Server, Cloud, Bell, DollarSign, ArrowRight} from 'lucide-react';
|
||||||
import { dashboardStatsApi, serverApi, kubernetesApi } from '@/services/api';
|
import { dashboardStatsApi, serverApi, kubernetesApi } from '@/services/api';
|
||||||
import { StatCard } from './DashboardStats';
|
import { StatCard } from './DashboardStats';
|
||||||
import { CostOverviewCard, TopResourceUsageCard, ResourceUsageCard, computeMonthChange } from './DashboardCharts';
|
import { CostOverviewCard, TopResourceUsageCard, ResourceUsageCard, computeMonthChange } from './DashboardCharts';
|
||||||
|
|||||||
@@ -106,9 +106,9 @@ function CustomTooltip({ active, payload, label }: any) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function CostOverviewCard({ costStats }: { costStats: any }) {
|
export function CostOverviewCard({ costStats }: { costStats: Record<string, any> }) {
|
||||||
const cloudCosts: any[] = costStats?.cloud_costs ?? [];
|
const cloudCosts: Record<string, any>[] = costStats?.cloud_costs ?? [];
|
||||||
const monthTrend: any[] = costStats?.month_trend ?? [];
|
const monthTrend: Record<string, any>[] = costStats?.month_trend ?? [];
|
||||||
|
|
||||||
const costData = cloudCosts.map((c, i) => ({
|
const costData = cloudCosts.map((c, i) => ({
|
||||||
name: c.cloud,
|
name: c.cloud,
|
||||||
@@ -206,8 +206,7 @@ export function TopResourceUsageCard({ topUsage }: { topUsage: any }) {
|
|||||||
const topMemoryServers = (topUsage?.memory ?? []).slice(0, 5);
|
const topMemoryServers = (topUsage?.memory ?? []).slice(0, 5);
|
||||||
const topDiskServers = (topUsage?.disk ?? []).slice(0, 5);
|
const topDiskServers = (topUsage?.disk ?? []).slice(0, 5);
|
||||||
|
|
||||||
const renderList = (
|
const renderList = ( items: any[],
|
||||||
items: any[],
|
|
||||||
color: string,
|
color: string,
|
||||||
BarColor: string,
|
BarColor: string,
|
||||||
icon: React.ReactNode,
|
icon: React.ReactNode,
|
||||||
|
|||||||
@@ -3,7 +3,6 @@ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/com
|
|||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||||
import { Separator } from '@/components/ui/separator';
|
|
||||||
import {
|
import {
|
||||||
Rocket,
|
Rocket,
|
||||||
AlertTriangle,
|
AlertTriangle,
|
||||||
|
|||||||
@@ -48,7 +48,7 @@ export default function CredentialFormDialog({ open, onOpenChange, type, editId,
|
|||||||
|
|
||||||
const loadCredentials = async () => {
|
const loadCredentials = async () => {
|
||||||
try {
|
try {
|
||||||
const res: any = await http.get('/credentials?page_size=100');
|
const res: Record<string, any> = await http.get('/credentials?page_size=100');
|
||||||
setCredentials(res?.list || []);
|
setCredentials(res?.list || []);
|
||||||
} catch { /* silent */ }
|
} catch { /* silent */ }
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,9 +1,30 @@
|
|||||||
import { useState, useEffect, useCallback } from 'react';
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
import {
|
import {
|
||||||
Plus, Pencil, Trash2, RefreshCw, Key, Shield, Globe, Search,
|
|
||||||
Lock, Eye, EyeOff, Copy, Server, Container, Database, FileText,
|
Plus,
|
||||||
Cloud, Tag, Clock, AlertTriangle, CheckCircle2, XCircle, Zap,
|
Pencil,
|
||||||
|
Trash2,
|
||||||
|
RefreshCw,
|
||||||
|
Key,
|
||||||
|
Shield,
|
||||||
|
Globe,
|
||||||
|
Search,
|
||||||
|
Lock,
|
||||||
|
Eye,
|
||||||
|
EyeOff,
|
||||||
|
Copy,
|
||||||
|
Server,
|
||||||
|
Container,
|
||||||
|
Database,
|
||||||
|
FileText,
|
||||||
|
Cloud,
|
||||||
|
Clock,
|
||||||
|
AlertTriangle,
|
||||||
|
CheckCircle2,
|
||||||
|
XCircle,
|
||||||
|
Zap,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
@@ -254,10 +275,10 @@ function CredFormDialog({ open, onClose, onSaved, editData }: {
|
|||||||
const [tlsKey, setTlsKey] = useState('');
|
const [tlsKey, setTlsKey] = useState('');
|
||||||
const [tlsCa, setTlsCa] = useState('');
|
const [tlsCa, setTlsCa] = useState('');
|
||||||
// AKSK
|
// AKSK
|
||||||
const [akskProvider, setAkskProvider] = useState('');
|
const [, setAkskProvider] = useState('');
|
||||||
const [akskAccessKey, setAkskAccessKey] = useState('');
|
const [akskAccessKey, setAkskAccessKey] = useState('');
|
||||||
const [akskSecretKey, setAkskSecretKey] = useState('');
|
const [akskSecretKey, setAkskSecretKey] = useState('');
|
||||||
const [akskRegion, setAkskRegion] = useState('');
|
const [, setAkskRegion] = useState('');
|
||||||
// Database
|
// Database
|
||||||
const [dbType, setDbType] = useState('mysql');
|
const [dbType, setDbType] = useState('mysql');
|
||||||
const [dbHost, setDbHost] = useState('');
|
const [dbHost, setDbHost] = useState('');
|
||||||
@@ -308,7 +329,7 @@ function CredFormDialog({ open, onClose, onSaved, editData }: {
|
|||||||
if (!name.trim()) { toast.error('请填写凭据名称'); return; }
|
if (!name.trim()) { toast.error('请填写凭据名称'); return; }
|
||||||
setSubmitting(true);
|
setSubmitting(true);
|
||||||
try {
|
try {
|
||||||
const payload: any = {
|
const payload: Record<string, any> = {
|
||||||
name: name.trim(),
|
name: name.trim(),
|
||||||
secret_type: secretType,
|
secret_type: secretType,
|
||||||
description: description.trim(),
|
description: description.trim(),
|
||||||
@@ -626,7 +647,7 @@ export default function CredentialManager() {
|
|||||||
if (filterType) params.set('secret_type', filterType);
|
if (filterType) params.set('secret_type', filterType);
|
||||||
if (filterSearch) params.set('search', filterSearch);
|
if (filterSearch) params.set('search', filterSearch);
|
||||||
params.set('page_size', '100');
|
params.set('page_size', '100');
|
||||||
const res: any = await http.get(`/credentials?${params.toString()}`);
|
const res: Record<string, any> = await http.get(`/credentials?${params.toString()}`);
|
||||||
setCredentials(res?.list || []);
|
setCredentials(res?.list || []);
|
||||||
} catch { toast.error('获取凭证列表失败'); }
|
} catch { toast.error('获取凭证列表失败'); }
|
||||||
finally { setLoading(false); }
|
finally { setLoading(false); }
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import { Plus, Pencil, Trash2, RefreshCw, Loader2, GitBranch, Container, Shield, Globe, Wrench } from 'lucide-react';
|
import { Plus, Pencil, Trash2, RefreshCw, Loader2, GitBranch, Container, Globe, Wrench} from 'lucide-react';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
@@ -110,9 +110,9 @@ export default function DeployCredentials() {
|
|||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const [rR, rReg, rEnv] = await Promise.all([deployApi.getRepos(), deployApi.getRegistries(), deployApi.getEnvironments()]);
|
const [rR, rReg, rEnv] = await Promise.all([deployApi.getRepos(), deployApi.getRegistries(), deployApi.getEnvironments()]);
|
||||||
setRepos((rR as any)?.list || []);
|
setRepos((rR as Record<string, any>)?.list || []);
|
||||||
setRegistries((rReg as any)?.list || []);
|
setRegistries((rReg as Record<string, any>)?.list || []);
|
||||||
setEnvironments((rEnv as any)?.list || []);
|
setEnvironments((rEnv as Record<string, any>)?.list || []);
|
||||||
} catch { toast.error('获取数据失败'); }
|
} catch { toast.error('获取数据失败'); }
|
||||||
finally { setLoading(false); }
|
finally { setLoading(false); }
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { useState, useEffect, useMemo } from 'react';
|
import { useState, useEffect, useMemo } from 'react';
|
||||||
import { Shield, Plus, Trash2, Save, Loader2, Users, Regex, Check, X, GitBranch, UserPlus, Search } from 'lucide-react';
|
import { Shield, Plus, Trash2, Save, Loader2, Users, Regex, Check, X, GitBranch, UserPlus} from 'lucide-react';
|
||||||
import { Card, CardContent } from '@/components/ui/card';
|
import { Card, CardContent } from '@/components/ui/card';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
@@ -60,9 +60,9 @@ export default function DeployRBAC() {
|
|||||||
pipelineApi.getPipelines({ page_size: 200 }),
|
pipelineApi.getPipelines({ page_size: 200 }),
|
||||||
userApi.getUsers({ page_size: 500 }),
|
userApi.getUsers({ page_size: 500 }),
|
||||||
]);
|
]);
|
||||||
setRoles(Array.isArray(rolesRes) ? rolesRes : (rolesRes as any)?.list || (rolesRes as any)?.data || []);
|
setRoles(Array.isArray(rolesRes) ? rolesRes : (rolesRes as Record<string, any>)?.list || (rolesRes as Record<string, any>)?.data || []);
|
||||||
setPipelines(Array.isArray(pipesRes) ? pipesRes : (pipesRes as any)?.list || (pipesRes as any)?.data || []);
|
setPipelines(Array.isArray(pipesRes) ? pipesRes : (pipesRes as Record<string, any>)?.list || (pipesRes as Record<string, any>)?.data || []);
|
||||||
const uList = Array.isArray(usersRes) ? usersRes : (usersRes as any)?.list || (usersRes as any)?.data || [];
|
const uList = Array.isArray(usersRes) ? usersRes : (usersRes as Record<string, any>)?.list || (usersRes as Record<string, any>)?.data || [];
|
||||||
setUsers(uList);
|
setUsers(uList);
|
||||||
} catch { /* */ }
|
} catch { /* */ }
|
||||||
finally { setLoading(false); }
|
finally { setLoading(false); }
|
||||||
@@ -73,7 +73,7 @@ export default function DeployRBAC() {
|
|||||||
const loadAssignments = async () => {
|
const loadAssignments = async () => {
|
||||||
if (!selectedUserId) { setAssignments([]); return; }
|
if (!selectedUserId) { setAssignments([]); return; }
|
||||||
try {
|
try {
|
||||||
const res: any = await deployApi.getUserItemRoles(Number(selectedUserId));
|
const res: Record<string, any> = await deployApi.getUserItemRoles(Number(selectedUserId));
|
||||||
setAssignments(Array.isArray(res) ? res : res?.data || res?.list || []);
|
setAssignments(Array.isArray(res) ? res : res?.data || res?.list || []);
|
||||||
} catch { setAssignments([]); }
|
} catch { setAssignments([]); }
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,11 +1,36 @@
|
|||||||
import { useState, useEffect, useCallback } from 'react';
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
import { useParams } from 'react-router-dom';
|
import { useParams } from 'react-router-dom';
|
||||||
import {
|
import {
|
||||||
Plus, Trash2, ChevronUp, ChevronDown, ChevronRight, Save, Play, Loader2,
|
|
||||||
GitBranch, Wrench, Server, FlaskConical, Zap, Terminal, FileCode, Container,
|
Plus,
|
||||||
Clock, Webhook, Hand, Info, Copy, Check, X, StopCircle, ScrollText,
|
Trash2,
|
||||||
Users, UserPlus, Shield, Eye, FileText,
|
ChevronUp,
|
||||||
|
ChevronDown,
|
||||||
|
ChevronRight,
|
||||||
|
Save,
|
||||||
|
Play,
|
||||||
|
Loader2,
|
||||||
|
GitBranch,
|
||||||
|
Wrench,
|
||||||
|
Server,
|
||||||
|
FlaskConical,
|
||||||
|
Zap,
|
||||||
|
Terminal,
|
||||||
|
FileCode,
|
||||||
|
Container,
|
||||||
|
Clock,
|
||||||
|
Webhook,
|
||||||
|
Hand,
|
||||||
|
Check,
|
||||||
|
X,
|
||||||
|
StopCircle,
|
||||||
|
ScrollText,
|
||||||
|
Users,
|
||||||
|
UserPlus,
|
||||||
|
Shield,
|
||||||
|
FileText,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
import { Card, CardContent } from '@/components/ui/card';
|
import { Card, CardContent } from '@/components/ui/card';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
@@ -68,7 +93,7 @@ function TaskCard({ task, selected, onSelect, onDelete }: { task: Task; selected
|
|||||||
}
|
}
|
||||||
|
|
||||||
// ---- Task Editor Panel ----
|
// ---- Task Editor Panel ----
|
||||||
function TaskEditor({ task, onUpdate, onClose }: { task: Task | null; onUpdate: (t: Task) => void; onClose: () => void }) {
|
function TaskEditor({ task, onUpdate }: { task: Task | null; onUpdate: (t: Task) => void; onClose: () => void }) {
|
||||||
if (!task) return <div className="p-6 text-center text-[var(--dg-text-secondary)] text-sm">选择一个任务开始编辑</div>;
|
if (!task) return <div className="p-6 text-center text-[var(--dg-text-secondary)] text-sm">选择一个任务开始编辑</div>;
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
@@ -169,7 +194,7 @@ export default function PipelineEditor() {
|
|||||||
const loadEnvironments = useCallback(async () => {
|
const loadEnvironments = useCallback(async () => {
|
||||||
try {
|
try {
|
||||||
const res = await deployApi.getEnvironments();
|
const res = await deployApi.getEnvironments();
|
||||||
setEnvironments(Array.isArray(res) ? res : (res as any)?.list || []);
|
setEnvironments(Array.isArray(res) ? res : (res as Record<string, any>)?.list || []);
|
||||||
} catch { /* silent */ }
|
} catch { /* silent */ }
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
@@ -177,7 +202,7 @@ export default function PipelineEditor() {
|
|||||||
setLoadingMembers(true);
|
setLoadingMembers(true);
|
||||||
try {
|
try {
|
||||||
const res = await pipelineApi.getMembers(pipelineCode);
|
const res = await pipelineApi.getMembers(pipelineCode);
|
||||||
setMembers(Array.isArray(res) ? res : (res as any)?.data || []);
|
setMembers(Array.isArray(res) ? res : (res as Record<string, any>)?.data || []);
|
||||||
} catch { setMembers([]); }
|
} catch { setMembers([]); }
|
||||||
finally { setLoadingMembers(false); }
|
finally { setLoadingMembers(false); }
|
||||||
}, [pipelineCode]);
|
}, [pipelineCode]);
|
||||||
@@ -185,7 +210,7 @@ export default function PipelineEditor() {
|
|||||||
const loadRuns = useCallback(async () => {
|
const loadRuns = useCallback(async () => {
|
||||||
try {
|
try {
|
||||||
const res = await pipelineApi.getRuns(pipelineCode);
|
const res = await pipelineApi.getRuns(pipelineCode);
|
||||||
setRuns(Array.isArray(res) ? res : (res as any)?.list || []);
|
setRuns(Array.isArray(res) ? res : (res as Record<string, any>)?.list || []);
|
||||||
} catch { setRuns([]); }
|
} catch { setRuns([]); }
|
||||||
}, [pipelineCode]);
|
}, [pipelineCode]);
|
||||||
|
|
||||||
@@ -193,7 +218,7 @@ export default function PipelineEditor() {
|
|||||||
(async () => {
|
(async () => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const p = await pipelineApi.getPipelineDetail(pipelineCode) as any;
|
const p = await pipelineApi.getPipelineDetail(pipelineCode) as Record<string, any>;
|
||||||
// http.get 已自动解包 json.data，p 即为 pipeline 对象
|
// http.get 已自动解包 json.data，p 即为 pipeline 对象
|
||||||
if (!p || !p.id) { setPipeline(null); setLoading(false); return; }
|
if (!p || !p.id) { setPipeline(null); setLoading(false); return; }
|
||||||
setPipeline(p);
|
setPipeline(p);
|
||||||
@@ -273,7 +298,7 @@ export default function PipelineEditor() {
|
|||||||
setLogRun(run);
|
setLogRun(run);
|
||||||
setLogOpen(true);
|
setLogOpen(true);
|
||||||
try {
|
try {
|
||||||
const data = await pipelineApi.getRunLog(pipelineCode, run.id) as any;
|
const data = await pipelineApi.getRunLog(pipelineCode, run.id) as Record<string, any>;
|
||||||
setLogs(data?.logs || []);
|
setLogs(data?.logs || []);
|
||||||
} catch { setLogs([]); }
|
} catch { setLogs([]); }
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -8,14 +8,38 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/u
|
|||||||
import { Textarea } from '@/components/ui/textarea';
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
||||||
import {
|
import {
|
||||||
Play, Plus, Search, GitBranch, Clock, CheckCircle, XCircle,
|
|
||||||
Loader2, StopCircle, FileText, Trash2, ChevronDown,
|
Play,
|
||||||
ChevronRight, Rocket, Box, Workflow, Code, Container, ShieldCheck, Tag,
|
Plus,
|
||||||
Globe, ArrowRight, RotateCcw, Layers, History, Server, Network,
|
Search,
|
||||||
ChevronRight as ChevronRightSmall, Package,
|
GitBranch,
|
||||||
|
Clock,
|
||||||
|
CheckCircle,
|
||||||
|
XCircle,
|
||||||
|
Loader2,
|
||||||
|
StopCircle,
|
||||||
|
FileText,
|
||||||
|
Trash2,
|
||||||
|
ChevronDown,
|
||||||
|
ChevronRight,
|
||||||
|
Rocket,
|
||||||
|
Box,
|
||||||
|
Workflow,
|
||||||
|
Code,
|
||||||
|
Container,
|
||||||
|
ShieldCheck,
|
||||||
|
Tag,
|
||||||
|
Globe,
|
||||||
|
ArrowRight,
|
||||||
|
Layers,
|
||||||
|
History,
|
||||||
|
Server,
|
||||||
|
Network,
|
||||||
|
ChevronRight as ChevronRightSmall,
|
||||||
|
Package,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
import { pipelineApi, deployApi } from '@/services/api';
|
import { pipelineApi, deployApi } from '@/services/api';
|
||||||
import http from '@/services/http';
|
import http from '@/services/http';
|
||||||
import { useConfirm } from '@/components/ui/confirm-dialog';
|
import { useConfirm } from '@/components/ui/confirm-dialog';
|
||||||
@@ -60,8 +84,8 @@ export function PipelineManager() {
|
|||||||
const [newBranch, setNewBranch] = useState('main');
|
const [newBranch, setNewBranch] = useState('main');
|
||||||
const [newDockerfile, setNewDockerfile] = useState('');
|
const [newDockerfile, setNewDockerfile] = useState('');
|
||||||
const [selectedStages, setSelectedStages] = useState<string[]>(['checkout', 'build', 'image', 'deploy']);
|
const [selectedStages, setSelectedStages] = useState<string[]>(['checkout', 'build', 'image', 'deploy']);
|
||||||
const [newRepoId, setNewRepoId] = useState<number | string>('');
|
const [, setNewRepoId] = useState<number | string>('');
|
||||||
const [newRegistryId, setNewRegistryId] = useState<number | string>('');
|
const [, setNewRegistryId] = useState<number | string>('');
|
||||||
const [newDeployMode, setNewDeployMode] = useState('branch');
|
const [newDeployMode, setNewDeployMode] = useState('branch');
|
||||||
const [newDeployTarget, setNewDeployTarget] = useState('ssh');
|
const [newDeployTarget, setNewDeployTarget] = useState('ssh');
|
||||||
const [newEnvironmentId, setNewEnvironmentId] = useState<number | string>('');
|
const [newEnvironmentId, setNewEnvironmentId] = useState<number | string>('');
|
||||||
@@ -88,11 +112,11 @@ export function PipelineManager() {
|
|||||||
const [newMaxExecutors, setNewMaxExecutors] = useState(2);
|
const [newMaxExecutors, setNewMaxExecutors] = useState(2);
|
||||||
|
|
||||||
// Reference data
|
// Reference data
|
||||||
const [repos, setRepos] = useState<any[]>([]);
|
const [, setRepos] = useState<any[]>([]);
|
||||||
const [registries, setRegistries] = useState<any[]>([]);
|
const [, setRegistries] = useState<any[]>([]);
|
||||||
const [environments, setEnvironments] = useState<any[]>([]);
|
const [environments, setEnvironments] = useState<any[]>([]);
|
||||||
const [servers, setServers] = useState<any[]>([]);
|
const [, _setServers] = useState<any[]>([]);
|
||||||
const [clusters, setClusters] = useState<any[]>([]);
|
const [, _setClusters] = useState<any[]>([]);
|
||||||
|
|
||||||
// Log dialog
|
// Log dialog
|
||||||
const [logOpen, setLogOpen] = useState(false);
|
const [logOpen, setLogOpen] = useState(false);
|
||||||
@@ -118,10 +142,10 @@ export function PipelineManager() {
|
|||||||
deployApi.getEnvironments().catch(() => ({ list: [] })),
|
deployApi.getEnvironments().catch(() => ({ list: [] })),
|
||||||
http.get('/credentials', { page_size: 100 }).catch(() => ({ list: [] })),
|
http.get('/credentials', { page_size: 100 }).catch(() => ({ list: [] })),
|
||||||
] as const);
|
] as const);
|
||||||
setRepos(Array.isArray((rR as any)?.list) ? (rR as any).list : []);
|
setRepos(Array.isArray((rR as Record<string, any>)?.list) ? (rR as Record<string, any>).list : []);
|
||||||
setRegistries(Array.isArray((rReg as any)?.list) ? (rReg as any).list : []);
|
setRegistries(Array.isArray((rReg as Record<string, any>)?.list) ? (rReg as Record<string, any>).list : []);
|
||||||
setEnvironments(Array.isArray((rEnv as any)?.list) ? (rEnv as any).list : []);
|
setEnvironments(Array.isArray((rEnv as Record<string, any>)?.list) ? (rEnv as Record<string, any>).list : []);
|
||||||
const allCreds: any[] = (rCred as any)?.list || [];
|
const allCreds: Record<string, any>[] = (rCred as Record<string, any>)?.list || [];
|
||||||
setGitCredentials(allCreds.filter(( c: any) => c.secret_type === 'api'));
|
setGitCredentials(allCreds.filter(( c: any) => c.secret_type === 'api'));
|
||||||
setDockerCredentials(allCreds.filter(( c: any) => c.secret_type === 'docker'));
|
setDockerCredentials(allCreds.filter(( c: any) => c.secret_type === 'docker'));
|
||||||
} catch { /* silent */ }
|
} catch { /* silent */ }
|
||||||
@@ -152,7 +176,7 @@ export function PipelineManager() {
|
|||||||
|
|
||||||
const loadRuns = async (pipelineId: number, code: string) => {
|
const loadRuns = async (pipelineId: number, code: string) => {
|
||||||
setLoadingRuns(p => ({ ...p, [pipelineId]: true }));
|
setLoadingRuns(p => ({ ...p, [pipelineId]: true }));
|
||||||
try { const res = await pipelineApi.getRuns(code); setRuns(p => ({ ...p, [pipelineId]: (res as any)?.list || [] })); }
|
try { const res = await pipelineApi.getRuns(code); setRuns(p => ({ ...p, [pipelineId]: (res as Record<string, any>)?.list || [] })); }
|
||||||
catch { setRuns(p => ({ ...p, [pipelineId]: [] })); }
|
catch { setRuns(p => ({ ...p, [pipelineId]: [] })); }
|
||||||
finally { setLoadingRuns(p => ({ ...p, [pipelineId]: false })); }
|
finally { setLoadingRuns(p => ({ ...p, [pipelineId]: false })); }
|
||||||
};
|
};
|
||||||
@@ -224,7 +248,7 @@ export function PipelineManager() {
|
|||||||
const runningRun = runningRunMap[pipelineId];
|
const runningRun = runningRunMap[pipelineId];
|
||||||
if (!runningRun) {
|
if (!runningRun) {
|
||||||
try {
|
try {
|
||||||
const res: any = await pipelineApi.getRuns(code);
|
const res: Record<string, any> = await pipelineApi.getRuns(code);
|
||||||
const running = (res?.list || []).find(( r: any) => r.status === 'running' || r.status === 'pending');
|
const running = (res?.list || []).find(( r: any) => r.status === 'running' || r.status === 'pending');
|
||||||
if (running) await handleStop(pipelineId, code, running.id);
|
if (running) await handleStop(pipelineId, code, running.id);
|
||||||
else toast.error('未找到运行中的任务');
|
else toast.error('未找到运行中的任务');
|
||||||
@@ -235,7 +259,7 @@ export function PipelineManager() {
|
|||||||
};
|
};
|
||||||
const handleViewLog = async (code: string, run: any) => {
|
const handleViewLog = async (code: string, run: any) => {
|
||||||
setLogRun(run); setLogOpen(true);
|
setLogRun(run); setLogOpen(true);
|
||||||
try { const data = await pipelineApi.getRunLog(code, run.id) as any; setLogs(data?.logs || []); }
|
try { const data = await pipelineApi.getRunLog(code, run.id) as Record<string, any>; setLogs(data?.logs || []); }
|
||||||
catch { setLogs([]); }
|
catch { setLogs([]); }
|
||||||
};
|
};
|
||||||
const handleDelete = async ( pipeline: any) => {
|
const handleDelete = async ( pipeline: any) => {
|
||||||
@@ -443,7 +467,7 @@ export function PipelineManager() {
|
|||||||
<div className="flex items-center mt-2.5">
|
<div className="flex items-center mt-2.5">
|
||||||
{stages.map(( s: any, i: number) => {
|
{stages.map(( s: any, i: number) => {
|
||||||
const def = STAGE_DEFS.find(d => d.label === s.name);
|
const def = STAGE_DEFS.find(d => d.label === s.name);
|
||||||
const Icon = def?.icon || Tag;
|
const _Icon = def?.icon || Tag;
|
||||||
// 从 last_run_stages 获取最新运行状态 // Logan.Li
|
// 从 last_run_stages 获取最新运行状态 // Logan.Li
|
||||||
let runStatus: string = '';
|
let runStatus: string = '';
|
||||||
if (pipeline.last_run_stages) {
|
if (pipeline.last_run_stages) {
|
||||||
@@ -883,7 +907,7 @@ function PipelineQueuePanel({ pipeline, clusterId: _cid }: { pipeline: any; clus
|
|||||||
if (!code) return;
|
if (!code) return;
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const res: any = await http.get(`/pipelines/${code}/queue`);
|
const res: Record<string, any> = await http.get(`/pipelines/${code}/queue`);
|
||||||
setQueue(res?.data || res);
|
setQueue(res?.data || res);
|
||||||
} catch { setQueue(null); }
|
} catch { setQueue(null); }
|
||||||
finally { setLoading(false); }
|
finally { setLoading(false); }
|
||||||
|
|||||||
@@ -101,8 +101,8 @@ function getRunStageStats(run: PipelineRun | null): Map<string, string> {
|
|||||||
// 如果 run.stages 有数据，直接用
|
// 如果 run.stages 有数据，直接用
|
||||||
const statuses = parseStageStatuses(run.stages);
|
const statuses = parseStageStatuses(run.stages);
|
||||||
statuses.forEach(s => {
|
statuses.forEach(s => {
|
||||||
if (s.name || (s as any).type) {
|
if (s.name || (s as Record<string, any>).type) {
|
||||||
const key = (s as any).type || (STAGE_DEFS.find(d => d.label === s.name)?.key);
|
const key = (s as Record<string, any>).type || (STAGE_DEFS.find(d => d.label === s.name)?.key);
|
||||||
if (key) map.set(key, s.status);
|
if (key) map.set(key, s.status);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -147,7 +147,7 @@ export default function PipelineRunDetail() {
|
|||||||
// 加载流水线详情
|
// 加载流水线详情
|
||||||
const fetchPipeline = useCallback(async () => {
|
const fetchPipeline = useCallback(async () => {
|
||||||
try {
|
try {
|
||||||
const data: any = await http.get(`/pipelines/${pipelineCode}`);
|
const data: Record<string, any> = await http.get(`/pipelines/${pipelineCode}`);
|
||||||
setPipeline(data?.data || data);
|
setPipeline(data?.data || data);
|
||||||
} catch { /* silent, pipeline info optional */ }
|
} catch { /* silent, pipeline info optional */ }
|
||||||
}, [pipelineCode]);
|
}, [pipelineCode]);
|
||||||
@@ -156,7 +156,7 @@ export default function PipelineRunDetail() {
|
|||||||
const fetchRuns = useCallback(async () => {
|
const fetchRuns = useCallback(async () => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const data: any = await http.get(`/pipelines/${pipelineCode}/runs?page_size=${pageSize}`);
|
const data: Record<string, any> = await http.get(`/pipelines/${pipelineCode}/runs?page_size=${pageSize}`);
|
||||||
const list = data?.list || [];
|
const list = data?.list || [];
|
||||||
setRuns(list);
|
setRuns(list);
|
||||||
if (!selectedRun && list.length > 0) {
|
if (!selectedRun && list.length > 0) {
|
||||||
@@ -180,7 +180,7 @@ export default function PipelineRunDetail() {
|
|||||||
// 加载日志
|
// 加载日志
|
||||||
const fetchLogs = useCallback(async (run: PipelineRun) => {
|
const fetchLogs = useCallback(async (run: PipelineRun) => {
|
||||||
try {
|
try {
|
||||||
const data: any = await http.get(`/pipelines/runs/${run.id}/log-stream`);
|
const data: Record<string, any> = await http.get(`/pipelines/runs/${run.id}/log-stream`);
|
||||||
if (data?.logs) {
|
if (data?.logs) {
|
||||||
const parsed = typeof data.logs === 'string' ? JSON.parse(data.logs) : data.logs;
|
const parsed = typeof data.logs === 'string' ? JSON.parse(data.logs) : data.logs;
|
||||||
setLogs(Array.isArray(parsed) ? parsed : []);
|
setLogs(Array.isArray(parsed) ? parsed : []);
|
||||||
@@ -351,7 +351,7 @@ export default function PipelineRunDetail() {
|
|||||||
const isRunning = status === 'running' || status === 'in_progress';
|
const isRunning = status === 'running' || status === 'in_progress';
|
||||||
const isFailed = status === 'failed' || status === 'error';
|
const isFailed = status === 'failed' || status === 'error';
|
||||||
const isActive = selectedStage === def.key;
|
const isActive = selectedStage === def.key;
|
||||||
const isSelected = selectedStage === def.key;
|
const _isSelected = selectedStage === def.key;
|
||||||
const hasData = stageStats.size > 0;
|
const hasData = stageStats.size > 0;
|
||||||
|
|
||||||
// 颜色: 失败红 / 运行中蓝 / 成功绿 / 未运行灰
|
// 颜色: 失败红 / 运行中蓝 / 成功绿 / 未运行灰
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import { Wrench, RefreshCw, Loader2, Download, CheckCircle, XCircle, Clock, Settings2, ChevronDown } from 'lucide-react';
|
import { RefreshCw, Loader2, Download, CheckCircle, XCircle, Clock, Settings2, ChevronDown} from 'lucide-react';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
@@ -28,10 +28,10 @@ const categoryColor: Record<string, string> = {
|
|||||||
automation: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
|
automation: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
|
||||||
other: 'bg-slate-500/20 text-slate-400 border-slate-500/30',
|
other: 'bg-slate-500/20 text-slate-400 border-slate-500/30',
|
||||||
};
|
};
|
||||||
const methodLabel: Record<string, string> = {
|
const _methodLabel: Record<string, string> = {
|
||||||
preinstall: '预装', lazy: '懒加载', disabled: '禁用',
|
preinstall: '预装', lazy: '懒加载', disabled: '禁用',
|
||||||
};
|
};
|
||||||
const methodColor: Record<string, string> = {
|
const _methodColor: Record<string, string> = {
|
||||||
preinstall: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30',
|
preinstall: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30',
|
||||||
lazy: 'bg-violet-500/20 text-violet-400 border-violet-500/30',
|
lazy: 'bg-violet-500/20 text-violet-400 border-violet-500/30',
|
||||||
disabled: 'bg-slate-500/20 text-slate-400 border-slate-500/30',
|
disabled: 'bg-slate-500/20 text-slate-400 border-slate-500/30',
|
||||||
@@ -55,8 +55,8 @@ export default function ToolConfigTab() {
|
|||||||
const fetchTools = async () => {
|
const fetchTools = async () => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const res: any = await deployApi.getTools();
|
const res: Record<string, any> = await deployApi.getTools();
|
||||||
setTools((res as any)?.list || []);
|
setTools((res as Record<string, any>)?.list || []);
|
||||||
} catch { toast.error('获取工具配置失败'); }
|
} catch { toast.error('获取工具配置失败'); }
|
||||||
finally { setLoading(false); }
|
finally { setLoading(false); }
|
||||||
};
|
};
|
||||||
@@ -65,8 +65,8 @@ export default function ToolConfigTab() {
|
|||||||
|
|
||||||
const openVersionDialog = async (tool: ToolConfig) => {
|
const openVersionDialog = async (tool: ToolConfig) => {
|
||||||
try {
|
try {
|
||||||
const res: any = await deployApi.getToolVersions(tool.id);
|
const res: Record<string, any> = await deployApi.getToolVersions(tool.id);
|
||||||
const versions = (res as any)?.versions || [];
|
const versions = (res as Record<string, any>)?.versions || [];
|
||||||
if (versions.length === 0) {
|
if (versions.length === 0) {
|
||||||
// No versions — install directly
|
// No versions — install directly
|
||||||
handleInstall(tool);
|
handleInstall(tool);
|
||||||
@@ -99,7 +99,7 @@ export default function ToolConfigTab() {
|
|||||||
|
|
||||||
const handleCheckStatus = async (tool: ToolConfig) => {
|
const handleCheckStatus = async (tool: ToolConfig) => {
|
||||||
try {
|
try {
|
||||||
const res: any = await deployApi.checkTool(tool.id);
|
const res: Record<string, any> = await deployApi.checkTool(tool.id);
|
||||||
toast.success(res?.available ? `${tool.display_name} 可用` : `${tool.display_name} 不可用`);
|
toast.success(res?.available ? `${tool.display_name} 可用` : `${tool.display_name} 不可用`);
|
||||||
fetchTools();
|
fetchTools();
|
||||||
} catch { toast.error('检测失败'); }
|
} catch { toast.error('检测失败'); }
|
||||||
@@ -119,9 +119,9 @@ export default function ToolConfigTab() {
|
|||||||
const start = Date.now();
|
const start = Date.now();
|
||||||
try {
|
try {
|
||||||
// Simulate a quick reachability test by fetching the version URL
|
// Simulate a quick reachability test by fetching the version URL
|
||||||
const res: any = await deployApi.getToolVersions(tool.id);
|
const res: Record<string, any> = await deployApi.getToolVersions(tool.id);
|
||||||
const elapsed = ((Date.now() - start) / 1000).toFixed(1);
|
const elapsed = ((Date.now() - start) / 1000).toFixed(1);
|
||||||
const available = (res as any)?.versions?.length > 0;
|
const available = (res as Record<string, any>)?.versions?.length > 0;
|
||||||
if (available) {
|
if (available) {
|
||||||
toast.success(`${tool.display_name} 镜像可访问 (${elapsed}s)`);
|
toast.success(`${tool.display_name} 镜像可访问 (${elapsed}s)`);
|
||||||
} else {
|
} else {
|
||||||
@@ -290,7 +290,7 @@ export default function ToolConfigTab() {
|
|||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
<div className="space-y-4 py-2">
|
<div className="space-y-4 py-2">
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
{versionDialog?.versions.map((v, i) => (
|
{versionDialog?.versions.map((v, _i) => (
|
||||||
<button
|
<button
|
||||||
key={v.version}
|
key={v.version}
|
||||||
onClick={() => setSelectedVersion(v.version)}
|
onClick={() => setSelectedVersion(v.version)}
|
||||||
|
|||||||
@@ -5,7 +5,6 @@ import { Input } from '@/components/ui/input';
|
|||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import { useConfirm } from '@/components/ui/confirm-dialog';
|
import { useConfirm } from '@/components/ui/confirm-dialog';
|
||||||
import { deployApi } from '@/services/api';
|
import { deployApi } from '@/services/api';
|
||||||
@@ -36,7 +35,7 @@ export default function UserGroupsManager() {
|
|||||||
|
|
||||||
const loadGroups = async () => {
|
const loadGroups = async () => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try { const res = await deployApi.getGroups(); setGroups((res as any)?.list || []); }
|
try { const res = await deployApi.getGroups(); setGroups((res as Record<string, any>)?.list || []); }
|
||||||
catch { toast.error('加载失败'); }
|
catch { toast.error('加载失败'); }
|
||||||
finally { setLoading(false); }
|
finally { setLoading(false); }
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -46,7 +46,7 @@ export default function CapacityPage() {
|
|||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const ns = selectedNs === 'all' ? undefined : selectedNs;
|
const ns = selectedNs === 'all' ? undefined : selectedNs;
|
||||||
const res: any = await kubernetesApi.getCapacity(activeCluster, ns);
|
const res: Record<string, any> = await kubernetesApi.getCapacity(activeCluster, ns);
|
||||||
setCapacity(Array.isArray(res) ? res : (res?.list || []));
|
setCapacity(Array.isArray(res) ? res : (res?.list || []));
|
||||||
} catch { setCapacity([]); } finally { setLoading(false); }
|
} catch { setCapacity([]); } finally { setLoading(false); }
|
||||||
}, [activeCluster, selectedNs]);
|
}, [activeCluster, selectedNs]);
|
||||||
|
|||||||
@@ -12,9 +12,21 @@ import {
|
|||||||
PieChart, Pie, Cell,
|
PieChart, Pie, Cell,
|
||||||
} from 'recharts';
|
} from 'recharts';
|
||||||
import {
|
import {
|
||||||
RefreshCw, Cloud, Cpu, Container, Boxes, Activity, Server, Shield,
|
|
||||||
HardDrive, Layers, Network, ChevronRight, TrendingUp,
|
RefreshCw,
|
||||||
|
Cloud,
|
||||||
|
Cpu,
|
||||||
|
Container,
|
||||||
|
Boxes,
|
||||||
|
Activity,
|
||||||
|
Server,
|
||||||
|
HardDrive,
|
||||||
|
Layers,
|
||||||
|
Network,
|
||||||
|
ChevronRight,
|
||||||
|
TrendingUp,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
import { kubernetesApi } from '@/services/api';
|
import { kubernetesApi } from '@/services/api';
|
||||||
|
|
||||||
const CHART_COLORS = ['#3B82F6', '#207060', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#14B8A6', '#F97316'];
|
const CHART_COLORS = ['#3B82F6', '#207060', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#14B8A6', '#F97316'];
|
||||||
@@ -29,7 +41,7 @@ export default function ClusterComparePage() {
|
|||||||
setLoading(true);
|
setLoading(true);
|
||||||
setError('');
|
setError('');
|
||||||
try {
|
try {
|
||||||
const res: any = await kubernetesApi.getMultiClusterComparison();
|
const res: Record<string, any> = await kubernetesApi.getMultiClusterComparison();
|
||||||
setData(res || null);
|
setData(res || null);
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
setError(e?.message || '加载失败');
|
setError(e?.message || '加载失败');
|
||||||
@@ -41,8 +53,8 @@ export default function ClusterComparePage() {
|
|||||||
|
|
||||||
useEffect(() => { loadData(); }, [loadData]);
|
useEffect(() => { loadData(); }, [loadData]);
|
||||||
|
|
||||||
const clusters: any[] = data?.clusters || [];
|
const clusters: Record<string, any>[] = data?.clusters || [];
|
||||||
const totals: any = data?.totals || {};
|
const totals: Record<string, any> = data?.totals || {};
|
||||||
|
|
||||||
// 图表数据准备
|
// 图表数据准备
|
||||||
const resourceBarData = clusters.map(( c: any) => ({
|
const resourceBarData = clusters.map(( c: any) => ({
|
||||||
|
|||||||
@@ -7,9 +7,19 @@ import {
|
|||||||
Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
|
Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
|
||||||
} from '@/components/ui/table';
|
} from '@/components/ui/table';
|
||||||
import {
|
import {
|
||||||
RefreshCw, Loader2, Cpu, Server, Container,
|
|
||||||
ChevronRight, Cloud, Boxes, Network, FileText, Shield, Activity, Clock,
|
RefreshCw,
|
||||||
|
Loader2,
|
||||||
|
Cpu,
|
||||||
|
Server,
|
||||||
|
Container,
|
||||||
|
ChevronRight,
|
||||||
|
Cloud,
|
||||||
|
Boxes,
|
||||||
|
Shield,
|
||||||
|
Activity,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
import { kubernetesApi } from '@/services/api';
|
import { kubernetesApi } from '@/services/api';
|
||||||
import { useToast } from '@/hooks/use-toast';
|
import { useToast } from '@/hooks/use-toast';
|
||||||
|
|
||||||
@@ -25,7 +35,7 @@ export default function ClusterOverviewPage() {
|
|||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { toast } = useToast();
|
const { toast } = useToast();
|
||||||
|
|
||||||
const [clusters, setClusters] = useState<any[]>([]);
|
const [, setClusters] = useState<any[]>([]);
|
||||||
const [nodes, setNodes] = useState<any[]>([]);
|
const [nodes, setNodes] = useState<any[]>([]);
|
||||||
const [namespaces, setNamespaces] = useState<string[]>([]);
|
const [namespaces, setNamespaces] = useState<string[]>([]);
|
||||||
const [clusterInfo, setClusterInfo] = useState<any>(null);
|
const [clusterInfo, setClusterInfo] = useState<any>(null);
|
||||||
@@ -34,7 +44,7 @@ export default function ClusterOverviewPage() {
|
|||||||
// Load cluster list + current cluster info
|
// Load cluster list + current cluster info
|
||||||
const loadClusterInfo = useCallback(async () => {
|
const loadClusterInfo = useCallback(async () => {
|
||||||
try {
|
try {
|
||||||
const res: any = await kubernetesApi.getClusters();
|
const res: Record<string, any> = await kubernetesApi.getClusters();
|
||||||
const list = res?.list || [];
|
const list = res?.list || [];
|
||||||
setClusters(list);
|
setClusters(list);
|
||||||
const current = list.find(( c: any) => (c.code || String(c.id)) === clusterCode);
|
const current = list.find(( c: any) => (c.code || String(c.id)) === clusterCode);
|
||||||
|
|||||||
@@ -1,10 +1,9 @@
|
|||||||
import { useState, useEffect, useCallback } from 'react';
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
import { Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
import { Textarea } from '@/components/ui/textarea';
|
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
import {
|
import {
|
||||||
Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
|
Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
|
||||||
@@ -17,13 +16,25 @@ import {
|
|||||||
SelectValue,
|
SelectValue,
|
||||||
} from '@/components/ui/select';
|
} from '@/components/ui/select';
|
||||||
import {
|
import {
|
||||||
ArrowLeft, Minus, Plus, RotateCw, Upload, FileText, Terminal,
|
|
||||||
Gauge, Clock, Play, Pause, Trash2, RefreshCw, Loader2,
|
ArrowLeft,
|
||||||
CheckCircle, AlertTriangle, XCircle, ExternalLink, FolderOpen,
|
Minus,
|
||||||
|
Plus,
|
||||||
|
RotateCw,
|
||||||
|
Upload,
|
||||||
|
FileText,
|
||||||
|
Terminal,
|
||||||
|
Gauge,
|
||||||
|
Trash2,
|
||||||
|
RefreshCw,
|
||||||
|
Loader2,
|
||||||
|
XCircle,
|
||||||
|
ExternalLink,
|
||||||
|
FolderOpen,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
import { kubernetesApi } from '@/services/api';
|
import { kubernetesApi } from '@/services/api';
|
||||||
import { useToast } from '@/hooks/use-toast';
|
import { useToast } from '@/hooks/use-toast';
|
||||||
import { useUserStore } from '@/store';
|
|
||||||
import { PodExecTerminal } from './PodExecTerminal';
|
import { PodExecTerminal } from './PodExecTerminal';
|
||||||
import { PodLogsViewer } from './PodLogsViewer';
|
import { PodLogsViewer } from './PodLogsViewer';
|
||||||
import { PodFileBrowser } from './PodFileBrowser';
|
import { PodFileBrowser } from './PodFileBrowser';
|
||||||
@@ -45,7 +56,7 @@ export function DeploymentDetail({ clusterCode, namespace, deploymentName, onBac
|
|||||||
const [actionLoading, setActionLoading] = useState('');
|
const [actionLoading, setActionLoading] = useState('');
|
||||||
|
|
||||||
// Scale
|
// Scale
|
||||||
const [scaleValue, setScaleValue] = useState(0);
|
const [, setScaleValue] = useState(0);
|
||||||
// Image update
|
// Image update
|
||||||
const [newImage, setNewImage] = useState('');
|
const [newImage, setNewImage] = useState('');
|
||||||
const [showImageUpdate, setShowImageUpdate] = useState(false);
|
const [showImageUpdate, setShowImageUpdate] = useState(false);
|
||||||
@@ -149,12 +160,12 @@ export function DeploymentDetail({ clusterCode, namespace, deploymentName, onBac
|
|||||||
} finally { setActionLoading(''); }
|
} finally { setActionLoading(''); }
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleLoadLogs = async (podName: string) => {
|
const _handleLoadLogs = async (podName: string) => {
|
||||||
setLogPod(podName);
|
setLogPod(podName);
|
||||||
setShowLogs(true);
|
setShowLogs(true);
|
||||||
setLogs('');
|
setLogs('');
|
||||||
try {
|
try {
|
||||||
const res: any = await kubernetesApi.getPodLogs(clusterCode, namespace, podName, logTail);
|
const res: Record<string, any> = await kubernetesApi.getPodLogs(clusterCode, namespace, podName, logTail);
|
||||||
setLogs(res?.data?.logs || res?.logs || '无日志');
|
setLogs(res?.data?.logs || res?.logs || '无日志');
|
||||||
} catch {
|
} catch {
|
||||||
setLogs('获取日志失败');
|
setLogs('获取日志失败');
|
||||||
|
|||||||
@@ -6,7 +6,6 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
import { Badge } from '@/components/ui/badge';
|
|
||||||
import {
|
import {
|
||||||
Save, Loader2, Settings, RefreshCw, Server, Shield, Clock, Network, Plus, Trash2, Globe, MapPin,
|
Save, Loader2, Settings, RefreshCw, Server, Shield, Clock, Network, Plus, Trash2, Globe, MapPin,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
@@ -120,11 +119,11 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
|
|||||||
if (clusterCode) {
|
if (clusterCode) {
|
||||||
setNodesLoading(true);
|
setNodesLoading(true);
|
||||||
kubernetesApi.getClusterNodes(clusterCode).then(( res: any) => {
|
kubernetesApi.getClusterNodes(clusterCode).then(( res: any) => {
|
||||||
const nodes: any[] = Array.isArray(res) ? res : (res?.items || res?.list || []);
|
const nodes: Record<string, any>[] = Array.isArray(res) ? res : (res?.items || res?.list || []);
|
||||||
const mapped = nodes.map(( n: any) => {
|
const mapped = nodes.map(( n: any) => {
|
||||||
const meta = n.metadata || {};
|
const meta = n.metadata || {};
|
||||||
const status = n.status || {};
|
const status = n.status || {};
|
||||||
const addresses: any[] = Array.isArray(status.addresses) ? status.addresses : [];
|
const addresses: Record<string, any>[] = Array.isArray(status.addresses) ? status.addresses : [];
|
||||||
const internalIP = addresses.find(( a: any) => a.type === 'InternalIP')?.address || '';
|
const internalIP = addresses.find(( a: any) => a.type === 'InternalIP')?.address || '';
|
||||||
return { name: meta.name || '', ip: internalIP, labels: meta.labels || {} };
|
return { name: meta.name || '', ip: internalIP, labels: meta.labels || {} };
|
||||||
});
|
});
|
||||||
@@ -143,7 +142,7 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
|
|||||||
}
|
}
|
||||||
|
|
||||||
// tolerations
|
// tolerations
|
||||||
const tols: any[] = Array.isArray(podSpec.tolerations) ? podSpec.tolerations : [];
|
const tols: Record<string, any>[] = Array.isArray(podSpec.tolerations) ? podSpec.tolerations : [];
|
||||||
setTolerations(tols.map(t => ({
|
setTolerations(tols.map(t => ({
|
||||||
key: t.key || '',
|
key: t.key || '',
|
||||||
operator: t.operator || 'Equal',
|
operator: t.operator || 'Equal',
|
||||||
@@ -172,7 +171,7 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
|
|||||||
setShareProcessNamespace(!!podSpec.shareProcessNamespace);
|
setShareProcessNamespace(!!podSpec.shareProcessNamespace);
|
||||||
|
|
||||||
// hostAliases（M8 补全）
|
// hostAliases（M8 补全）
|
||||||
const ha: any[] = Array.isArray(podSpec.hostAliases) ? podSpec.hostAliases : [];
|
const ha: Record<string, any>[] = Array.isArray(podSpec.hostAliases) ? podSpec.hostAliases : [];
|
||||||
setHostAliases(ha.map(a => ({
|
setHostAliases(ha.map(a => ({
|
||||||
ip: a.ip || '',
|
ip: a.ip || '',
|
||||||
hostnames: Array.isArray(a.hostnames) ? a.hostnames.join(', ') : '',
|
hostnames: Array.isArray(a.hostnames) ? a.hostnames.join(', ') : '',
|
||||||
@@ -182,7 +181,7 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
|
|||||||
const dc = podSpec.dnsConfig || {};
|
const dc = podSpec.dnsConfig || {};
|
||||||
setDnsNameservers(Array.isArray(dc.nameservers) ? dc.nameservers.join('\n') : '');
|
setDnsNameservers(Array.isArray(dc.nameservers) ? dc.nameservers.join('\n') : '');
|
||||||
setDnsSearches(Array.isArray(dc.searches) ? dc.searches.join('\n') : '');
|
setDnsSearches(Array.isArray(dc.searches) ? dc.searches.join('\n') : '');
|
||||||
const opts: any[] = Array.isArray(dc.options) ? dc.options : [];
|
const opts: Record<string, any>[] = Array.isArray(dc.options) ? dc.options : [];
|
||||||
setDnsOptions(opts.map(o => ({ name: o.name || '', value: o.value || '' })));
|
setDnsOptions(opts.map(o => ({ name: o.name || '', value: o.value || '' })));
|
||||||
|
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
@@ -195,9 +194,9 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
|
|||||||
setLabelSelectorKv(prev => prev.map((n, idx) => (idx === i ? { ...n, ...patch } : n)));
|
setLabelSelectorKv(prev => prev.map((n, idx) => (idx === i ? { ...n, ...patch } : n)));
|
||||||
|
|
||||||
// tolerations 操作
|
// tolerations 操作
|
||||||
const addTol = () => setTolerations(prev => [...prev, { key: '', operator: 'Equal', value: '', effect: 'NoSchedule', tolerationSeconds: '' }]);
|
const _addTol = () => setTolerations(prev => [...prev, { key: '', operator: 'Equal', value: '', effect: 'NoSchedule', tolerationSeconds: '' }]);
|
||||||
const removeTol = (i: number) => setTolerations(prev => prev.filter((_, idx) => idx !== i));
|
const _removeTol = (i: number) => setTolerations(prev => prev.filter((_, idx) => idx !== i));
|
||||||
const updateTol = (i: number, patch: Partial<Toleration>) =>
|
const _updateTol = (i: number, patch: Partial<Toleration>) =>
|
||||||
setTolerations(prev => prev.map((t, idx) => (idx === i ? { ...t, ...patch } : t)));
|
setTolerations(prev => prev.map((t, idx) => (idx === i ? { ...t, ...patch } : t)));
|
||||||
|
|
||||||
const save = async () => {
|
const save = async () => {
|
||||||
@@ -235,7 +234,7 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
|
|||||||
if (podSpec.nodeName) delete podSpec.nodeName;
|
if (podSpec.nodeName) delete podSpec.nodeName;
|
||||||
if (podSpec.affinity) delete podSpec.affinity.nodeAffinity;
|
if (podSpec.affinity) delete podSpec.affinity.nodeAffinity;
|
||||||
} else if (scheduleMode === 'nodeAffinity') {
|
} else if (scheduleMode === 'nodeAffinity') {
|
||||||
const matchExpressions: any[] = labelSelectorKv
|
const matchExpressions: Record<string, any>[] = labelSelectorKv
|
||||||
.filter(s => s.key.trim())
|
.filter(s => s.key.trim())
|
||||||
.map(s => ({ key: s.key.trim(), operator: 'In', values: [s.value] }));
|
.map(s => ({ key: s.key.trim(), operator: 'In', values: [s.value] }));
|
||||||
if (matchExpressions.length > 0) {
|
if (matchExpressions.length > 0) {
|
||||||
@@ -256,7 +255,7 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
|
|||||||
const tolsK8s = tolerations
|
const tolsK8s = tolerations
|
||||||
.filter(t => t.key || t.operator === 'Exists')
|
.filter(t => t.key || t.operator === 'Exists')
|
||||||
.map(t => {
|
.map(t => {
|
||||||
const out: any = {};
|
const out: Record<string, any> = {};
|
||||||
if (t.key) out.key = t.key;
|
if (t.key) out.key = t.key;
|
||||||
if (t.operator) out.operator = t.operator;
|
if (t.operator) out.operator = t.operator;
|
||||||
if (t.value && t.operator !== 'Exists') out.value = t.value;
|
if (t.value && t.operator !== 'Exists') out.value = t.value;
|
||||||
@@ -275,7 +274,7 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
|
|||||||
if (serviceAccountName) podSpec.serviceAccountName = serviceAccountName;
|
if (serviceAccountName) podSpec.serviceAccountName = serviceAccountName;
|
||||||
|
|
||||||
// Pod 安全上下文
|
// Pod 安全上下文
|
||||||
const sc: any = {};
|
const sc: Record<string, any> = {};
|
||||||
if (podFsGroup) sc.fsGroup = Number(podFsGroup);
|
if (podFsGroup) sc.fsGroup = Number(podFsGroup);
|
||||||
if (podRunAsUser) sc.runAsUser = Number(podRunAsUser);
|
if (podRunAsUser) sc.runAsUser = Number(podRunAsUser);
|
||||||
if (podRunAsGroup) sc.runAsGroup = Number(podRunAsGroup);
|
if (podRunAsGroup) sc.runAsGroup = Number(podRunAsGroup);
|
||||||
@@ -301,13 +300,13 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
|
|||||||
else delete podSpec.hostAliases;
|
else delete podSpec.hostAliases;
|
||||||
|
|
||||||
// dnsConfig（M8 补全）— 仅 dnsPolicy=None 时 dnsConfig 才有意义，但仍允许编辑
|
// dnsConfig（M8 补全）— 仅 dnsPolicy=None 时 dnsConfig 才有意义，但仍允许编辑
|
||||||
const dcObj: any = {};
|
const dcObj: Record<string, any> = {};
|
||||||
const ns = dnsNameservers.split('\n').map(s => s.trim()).filter(Boolean);
|
const ns = dnsNameservers.split('\n').map(s => s.trim()).filter(Boolean);
|
||||||
if (ns.length > 0) dcObj.nameservers = ns;
|
if (ns.length > 0) dcObj.nameservers = ns;
|
||||||
const sr = dnsSearches.split('\n').map(s => s.trim()).filter(Boolean);
|
const sr = dnsSearches.split('\n').map(s => s.trim()).filter(Boolean);
|
||||||
if (sr.length > 0) dcObj.searches = sr;
|
if (sr.length > 0) dcObj.searches = sr;
|
||||||
const dkOpts = dnsOptions.filter(o => o.name.trim()).map(o => {
|
const dkOpts = dnsOptions.filter(o => o.name.trim()).map(o => {
|
||||||
const out: any = { name: o.name.trim() };
|
const out: Record<string, any> = { name: o.name.trim() };
|
||||||
if (o.value.trim()) out.value = o.value.trim();
|
if (o.value.trim()) out.value = o.value.trim();
|
||||||
return out;
|
return out;
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
// DeploymentEditBasic.tsx — 编辑器「基本信息」Tab
|
// DeploymentEditBasic.tsx — 编辑器「基本信息」Tab
|
||||||
// 编辑内容：replicas / labels / annotations（name/namespace 只读）
|
// 编辑内容：replicas / labels / annotations（name/namespace 只读）
|
||||||
// 作者: Logan <admin@attacker.club>
|
// 作者: Logan <admin@attacker.club>
|
||||||
import { useState, useEffect, useCallback } from 'react';
|
import { useState, useEffect} from 'react';
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
@@ -10,7 +10,6 @@ import { Badge } from '@/components/ui/badge';
|
|||||||
import { Plus, Trash2, Save, Loader2, Tags, FileText, Hash, Lock } from 'lucide-react';
|
import { Plus, Trash2, Save, Loader2, Tags, FileText, Hash, Lock } from 'lucide-react';
|
||||||
import { useToast } from '@/hooks/use-toast';
|
import { useToast } from '@/hooks/use-toast';
|
||||||
import { kubernetesApi } from '@/services/api';
|
import { kubernetesApi } from '@/services/api';
|
||||||
import { cleanYAML } from './k8s-yaml-utils';
|
|
||||||
|
|
||||||
interface DeploymentEditBasicProps {
|
interface DeploymentEditBasicProps {
|
||||||
clusterCode: string;
|
clusterCode: string;
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
// Kuboard 风格容器编辑器：工作容器 + 初始化容器完整编辑
|
// Kuboard 风格容器编辑器：工作容器 + 初始化容器完整编辑
|
||||||
// 编辑字段：镜像/拉取策略/命令/参数/环境变量/资源/端口/健康检查/生命周期/安全上下文/卷挂载
|
// 编辑字段：镜像/拉取策略/命令/参数/环境变量/资源/端口/健康检查/生命周期/安全上下文/卷挂载
|
||||||
// 作者: Logan <admin@attacker.club>
|
// 作者: Logan <admin@attacker.club>
|
||||||
import { useState, useEffect, useMemo } from 'react';
|
import { useState, useEffect} from 'react';
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
@@ -13,14 +13,28 @@ import {
|
|||||||
Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
|
Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
|
||||||
} from '@/components/ui/select';
|
} from '@/components/ui/select';
|
||||||
import { Switch } from '@/components/ui/switch';
|
import { Switch } from '@/components/ui/switch';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Collapsible, CollapsibleContent, CollapsibleTrigger,
|
|
||||||
} from '@/components/ui/collapsible';
|
Plus,
|
||||||
import {
|
Trash2,
|
||||||
Plus, Trash2, Save, Loader2, Container, Cpu, Heart, FolderOpen,
|
Save,
|
||||||
ChevronDown, ChevronRight, Terminal, Shield, Zap, Network, KeyRound,
|
Loader2,
|
||||||
Package, Play, Settings2, RotateCw,
|
Container,
|
||||||
|
Cpu,
|
||||||
|
Heart,
|
||||||
|
FolderOpen,
|
||||||
|
ChevronDown,
|
||||||
|
ChevronRight,
|
||||||
|
Terminal,
|
||||||
|
Shield,
|
||||||
|
Zap,
|
||||||
|
Network,
|
||||||
|
KeyRound,
|
||||||
|
Play,
|
||||||
|
RotateCw,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
import { useToast } from '@/hooks/use-toast';
|
import { useToast } from '@/hooks/use-toast';
|
||||||
import { kubernetesApi } from '@/services/api';
|
import { kubernetesApi } from '@/services/api';
|
||||||
|
|
||||||
@@ -174,7 +188,7 @@ function emptyContainer(name = ''): ContainerForm {
|
|||||||
|
|
||||||
function probeToK8s(p: ProbeDef | null | undefined): any {
|
function probeToK8s(p: ProbeDef | null | undefined): any {
|
||||||
if (!p || p.type === 'none' || !p.type) return undefined;
|
if (!p || p.type === 'none' || !p.type) return undefined;
|
||||||
const out: any = {};
|
const out: Record<string, any> = {};
|
||||||
if (p.type === 'httpGet') {
|
if (p.type === 'httpGet') {
|
||||||
out.httpGet = {};
|
out.httpGet = {};
|
||||||
if (p.httpPath) out.httpGet.path = p.httpPath;
|
if (p.httpPath) out.httpGet.path = p.httpPath;
|
||||||
@@ -202,13 +216,13 @@ function handlerToK8s(h: LifecycleHandler | undefined): any {
|
|||||||
return cmds.length ? { exec: { command: cmds } } : undefined;
|
return cmds.length ? { exec: { command: cmds } } : undefined;
|
||||||
}
|
}
|
||||||
if (h.type === 'httpGet') {
|
if (h.type === 'httpGet') {
|
||||||
const o: any = { httpGet: {} };
|
const o: Record<string, any> = { httpGet: {} };
|
||||||
if (h.httpPath) o.httpGet.path = h.httpPath;
|
if (h.httpPath) o.httpGet.path = h.httpPath;
|
||||||
if (h.httpPort !== '' && h.httpPort != null) o.httpGet.port = Number(h.httpPort);
|
if (h.httpPort !== '' && h.httpPort != null) o.httpGet.port = Number(h.httpPort);
|
||||||
return o;
|
return o;
|
||||||
}
|
}
|
||||||
if (h.type === 'tcpSocket') {
|
if (h.type === 'tcpSocket') {
|
||||||
const o: any = { tcpSocket: {} };
|
const o: Record<string, any> = { tcpSocket: {} };
|
||||||
if (h.tcpPort !== '' && h.tcpPort != null) o.tcpSocket.port = Number(h.tcpPort);
|
if (h.tcpPort !== '' && h.tcpPort != null) o.tcpSocket.port = Number(h.tcpPort);
|
||||||
return o;
|
return o;
|
||||||
}
|
}
|
||||||
@@ -216,7 +230,7 @@ function handlerToK8s(h: LifecycleHandler | undefined): any {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function containerToK8s(c: ContainerForm): any {
|
function containerToK8s(c: ContainerForm): any {
|
||||||
const out: any = { name: c.name };
|
const out: Record<string, any> = { name: c.name };
|
||||||
if (c.image) out.image = c.image;
|
if (c.image) out.image = c.image;
|
||||||
if (c.imagePullPolicy) out.imagePullPolicy = c.imagePullPolicy;
|
if (c.imagePullPolicy) out.imagePullPolicy = c.imagePullPolicy;
|
||||||
if (c.workingDir) out.workingDir = c.workingDir;
|
if (c.workingDir) out.workingDir = c.workingDir;
|
||||||
@@ -224,14 +238,14 @@ function containerToK8s(c: ContainerForm): any {
|
|||||||
if (c.args.length > 0) out.args = c.args;
|
if (c.args.length > 0) out.args = c.args;
|
||||||
if (c.env.length > 0) {
|
if (c.env.length > 0) {
|
||||||
out.env = c.env.filter(e => e.name.trim()).map(e => {
|
out.env = c.env.filter(e => e.name.trim()).map(e => {
|
||||||
const o: any = { name: e.name };
|
const o: Record<string, any> = { name: e.name };
|
||||||
if (e.value != null) o.value = e.value;
|
if (e.value != null) o.value = e.value;
|
||||||
return o;
|
return o;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if (c.ports.length > 0) {
|
if (c.ports.length > 0) {
|
||||||
out.ports = c.ports.filter(p => p.containerPort !== '').map(p => {
|
out.ports = c.ports.filter(p => p.containerPort !== '').map(p => {
|
||||||
const o: any = { containerPort: typeof p.containerPort === 'number' ? p.containerPort : Number(p.containerPort) };
|
const o: Record<string, any> = { containerPort: typeof p.containerPort === 'number' ? p.containerPort : Number(p.containerPort) };
|
||||||
if (p.name) o.name = p.name;
|
if (p.name) o.name = p.name;
|
||||||
if (p.protocol) o.protocol = p.protocol;
|
if (p.protocol) o.protocol = p.protocol;
|
||||||
return o;
|
return o;
|
||||||
@@ -258,14 +272,14 @@ function containerToK8s(c: ContainerForm): any {
|
|||||||
const rp = probeToK8s(c.readinessProbe); if (rp) out.readinessProbe = rp;
|
const rp = probeToK8s(c.readinessProbe); if (rp) out.readinessProbe = rp;
|
||||||
const sp = probeToK8s(c.startupProbe); if (sp) out.startupProbe = sp;
|
const sp = probeToK8s(c.startupProbe); if (sp) out.startupProbe = sp;
|
||||||
if (c.lifecycle) {
|
if (c.lifecycle) {
|
||||||
const lc: any = {};
|
const lc: Record<string, any> = {};
|
||||||
const ps = handlerToK8s(c.lifecycle.postStart); if (ps) lc.postStart = ps;
|
const ps = handlerToK8s(c.lifecycle.postStart); if (ps) lc.postStart = ps;
|
||||||
const pst = handlerToK8s(c.lifecycle.preStop); if (pst) lc.preStop = pst;
|
const pst = handlerToK8s(c.lifecycle.preStop); if (pst) lc.preStop = pst;
|
||||||
if (Object.keys(lc).length > 0) out.lifecycle = lc;
|
if (Object.keys(lc).length > 0) out.lifecycle = lc;
|
||||||
}
|
}
|
||||||
if (c.securityContext) {
|
if (c.securityContext) {
|
||||||
const s = c.securityContext;
|
const s = c.securityContext;
|
||||||
const sc: any = {};
|
const sc: Record<string, any> = {};
|
||||||
if (s.runAsUser !== '' && s.runAsUser != null) sc.runAsUser = Number(s.runAsUser);
|
if (s.runAsUser !== '' && s.runAsUser != null) sc.runAsUser = Number(s.runAsUser);
|
||||||
if (s.runAsGroup !== '' && s.runAsGroup != null) sc.runAsGroup = Number(s.runAsGroup);
|
if (s.runAsGroup !== '' && s.runAsGroup != null) sc.runAsGroup = Number(s.runAsGroup);
|
||||||
if (s.runAsNonRoot != null) sc.runAsNonRoot = s.runAsNonRoot;
|
if (s.runAsNonRoot != null) sc.runAsNonRoot = s.runAsNonRoot;
|
||||||
@@ -283,7 +297,7 @@ function containerToK8s(c: ContainerForm): any {
|
|||||||
}
|
}
|
||||||
if (c.volumeMounts.length > 0) {
|
if (c.volumeMounts.length > 0) {
|
||||||
out.volumeMounts = c.volumeMounts.filter(m => m.name.trim() && m.mountPath.trim()).map(m => {
|
out.volumeMounts = c.volumeMounts.filter(m => m.name.trim() && m.mountPath.trim()).map(m => {
|
||||||
const o: any = { name: m.name, mountPath: m.mountPath };
|
const o: Record<string, any> = { name: m.name, mountPath: m.mountPath };
|
||||||
if (m.subPath) o.subPath = m.subPath;
|
if (m.subPath) o.subPath = m.subPath;
|
||||||
if (m.readOnly) o.readOnly = true;
|
if (m.readOnly) o.readOnly = true;
|
||||||
return o;
|
return o;
|
||||||
@@ -735,7 +749,7 @@ function ContainerEditor({ container, onUpdate }: {
|
|||||||
<ProbeEditor key={pt}
|
<ProbeEditor key={pt}
|
||||||
label={{ livenessProbe: '存活探针 (liveness)', readinessProbe: '就绪探针 (readiness)', startupProbe: '启动探针 (startup)' }[pt]}
|
label={{ livenessProbe: '存活探针 (liveness)', readinessProbe: '就绪探针 (readiness)', startupProbe: '启动探针 (startup)' }[pt]}
|
||||||
probe={c[pt]}
|
probe={c[pt]}
|
||||||
onChange={(p) => onUpdate({ [pt]: p } as any)}
|
onChange={(p) => onUpdate({ [pt]: p } as Record<string, any>)}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -8,11 +8,21 @@ import { Input } from '@/components/ui/input';
|
|||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import {
|
import {
|
||||||
Network, GitBranch, Loader2, RefreshCw, ExternalLink, Plus, Copy,
|
|
||||||
CheckCircle, AlertTriangle, Server, Trash2, Minus, Zap,
|
Network,
|
||||||
|
GitBranch,
|
||||||
|
Loader2,
|
||||||
|
RefreshCw,
|
||||||
|
ExternalLink,
|
||||||
|
Plus,
|
||||||
|
CheckCircle,
|
||||||
|
Server,
|
||||||
|
Trash2,
|
||||||
|
Minus,
|
||||||
|
Zap,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
import { useToast } from '@/hooks/use-toast';
|
import { useToast } from '@/hooks/use-toast';
|
||||||
import { useUserStore } from '@/store';
|
|
||||||
import { kubernetesApi } from '@/services/api';
|
import { kubernetesApi } from '@/services/api';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@@ -39,7 +49,7 @@ interface IngSummary {
|
|||||||
name: string;
|
name: string;
|
||||||
className: string;
|
className: string;
|
||||||
hosts: string[];
|
hosts: string[];
|
||||||
rules: Array<{ host: string; paths: Array<{ path: string; backend: { service: string; port: any } }> }>;
|
rules: Array<{ host: string; paths: Array<{ path: string; backend: { service: string; port: unknown} }> }>;
|
||||||
raw: any;
|
raw: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -50,7 +60,7 @@ const PORT_PRESETS = [
|
|||||||
{ label: 'gRPC', protocol: 'TCP' as const, port: 8002, targetPort: 8002, name: 'grpc' },
|
{ label: 'gRPC', protocol: 'TCP' as const, port: 8002, targetPort: 8002, name: 'grpc' },
|
||||||
];
|
];
|
||||||
|
|
||||||
interface SvcPortForm {
|
interface _SvcPortForm {
|
||||||
name: string;
|
name: string;
|
||||||
port: string;
|
port: string;
|
||||||
targetPort: string;
|
targetPort: string;
|
||||||
@@ -143,7 +153,7 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
|
|||||||
|
|
||||||
const ingSummaries: IngSummary[] = allIngs.map(( i: any) => {
|
const ingSummaries: IngSummary[] = allIngs.map(( i: any) => {
|
||||||
const spec = i.spec || {};
|
const spec = i.spec || {};
|
||||||
const rawRules: any[] = Array.isArray(spec.rules) ? spec.rules : (Array.isArray(i.rules) ? i.rules : []);
|
const rawRules: Record<string, any>[] = Array.isArray(spec.rules) ? spec.rules : (Array.isArray(i.rules) ? i.rules : []);
|
||||||
const rules = rawRules.map(( r: any) => ({
|
const rules = rawRules.map(( r: any) => ({
|
||||||
host: r.host || '',
|
host: r.host || '',
|
||||||
paths: (r.http?.paths || r.paths || []).map(( p: any) => ({
|
paths: (r.http?.paths || r.paths || []).map(( p: any) => ({
|
||||||
@@ -187,7 +197,7 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
|
|||||||
const createService = async () => {
|
const createService = async () => {
|
||||||
const name = svcForm.name.trim() || `${deploymentName}-svc`;
|
const name = svcForm.name.trim() || `${deploymentName}-svc`;
|
||||||
const k8sPorts = svcForm.ports.map(p => {
|
const k8sPorts = svcForm.ports.map(p => {
|
||||||
const sp: any = {
|
const sp: Record<string, any> = {
|
||||||
name: p.name || 'http',
|
name: p.name || 'http',
|
||||||
port: Number(p.port) || 80,
|
port: Number(p.port) || 80,
|
||||||
targetPort: /^\d+$/.test(String(p.targetPort)) ? Number(p.targetPort) : p.targetPort,
|
targetPort: /^\d+$/.test(String(p.targetPort)) ? Number(p.targetPort) : p.targetPort,
|
||||||
@@ -197,7 +207,7 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
|
|||||||
return sp;
|
return sp;
|
||||||
});
|
});
|
||||||
|
|
||||||
const svcManifest: any = {
|
const svcManifest: Record<string, any> = {
|
||||||
apiVersion: 'v1',
|
apiVersion: 'v1',
|
||||||
kind: 'Service',
|
kind: 'Service',
|
||||||
metadata: { name, namespace, labels: { app: deploymentName } },
|
metadata: { name, namespace, labels: { app: deploymentName } },
|
||||||
@@ -223,7 +233,7 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
|
|||||||
const name = ingForm.name.trim() || `${deploymentName}-ingress`;
|
const name = ingForm.name.trim() || `${deploymentName}-ingress`;
|
||||||
const targetSvc = matchedSvcs[0]?.name || `${deploymentName}-svc`;
|
const targetSvc = matchedSvcs[0]?.name || `${deploymentName}-svc`;
|
||||||
const port = Number(ingForm.svcPort) || 80;
|
const port = Number(ingForm.svcPort) || 80;
|
||||||
const manifest: any = {
|
const manifest: Record<string, any> = {
|
||||||
apiVersion: 'networking.k8s.io/v1',
|
apiVersion: 'networking.k8s.io/v1',
|
||||||
kind: 'Ingress',
|
kind: 'Ingress',
|
||||||
metadata: { name, namespace, labels: { app: deploymentName } },
|
metadata: { name, namespace, labels: { app: deploymentName } },
|
||||||
@@ -528,7 +538,7 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
|
|||||||
<code className="text-slate-300">{r.host || '*'}</code>
|
<code className="text-slate-300">{r.host || '*'}</code>
|
||||||
{r.paths.map((p, j) => (
|
{r.paths.map((p, j) => (
|
||||||
<code key={j} className="bg-slate-800/60 px-1.5 py-0.5 rounded text-slate-400">
|
<code key={j} className="bg-slate-800/60 px-1.5 py-0.5 rounded text-slate-400">
|
||||||
{p.path} → {p.backend.service}:{p.backend.port}
|
{p.path} → {(p as any).backend?.service}:{(p as any).backend?.port}
|
||||||
</code>
|
</code>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -5,9 +5,8 @@ import { useState, useEffect } from 'react';
|
|||||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Label } from '@/components/ui/label';
|
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
import { Select, SelectContent, SelectItem, SelectTrigger} from '@/components/ui/select';
|
||||||
import {
|
import {
|
||||||
Plus, Trash2, Save, Loader2, HardDrive, Database, Folder, Lock, File, Disc, Server,
|
Plus, Trash2, Save, Loader2, HardDrive, Database, Folder, Lock, File, Disc, Server,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
@@ -72,10 +71,10 @@ function volumeToForm(v: any): VolumeForm {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function formToVolume(f: VolumeForm): any {
|
function formToVolume(f: VolumeForm): any {
|
||||||
const v: any = { name: f.name.trim() };
|
const v: Record<string, any> = { name: f.name.trim() };
|
||||||
if (!v.name) return null;
|
if (!v.name) return null;
|
||||||
switch (f.type) {
|
switch (f.type) {
|
||||||
case 'emptyDir': { const ed: any = {}; if (f.medium) ed.medium = f.medium; if (f.sizeLimit) ed.sizeLimit = f.sizeLimit; v.emptyDir = ed; break; }
|
case 'emptyDir': { const ed: Record<string, any> = {}; if (f.medium) ed.medium = f.medium; if (f.sizeLimit) ed.sizeLimit = f.sizeLimit; v.emptyDir = ed; break; }
|
||||||
case 'hostPath': v.hostPath = { path: f.path || '', type: f.pathType || 'Directory' }; break;
|
case 'hostPath': v.hostPath = { path: f.path || '', type: f.pathType || 'Directory' }; break;
|
||||||
case 'configMap': { v.configMap = { name: f.configMapName || '' }; if (f.cmItems) try { v.configMap.items = JSON.parse(f.cmItems); } catch {} break; }
|
case 'configMap': { v.configMap = { name: f.configMapName || '' }; if (f.cmItems) try { v.configMap.items = JSON.parse(f.cmItems); } catch {} break; }
|
||||||
case 'secret': { v.secret = { secretName: f.secretName || '' }; if (f.secItems) try { v.secret.items = JSON.parse(f.secItems); } catch {} break; }
|
case 'secret': { v.secret = { secretName: f.secretName || '' }; if (f.secItems) try { v.secret.items = JSON.parse(f.secItems); } catch {} break; }
|
||||||
@@ -101,7 +100,7 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
|
|||||||
const podSpec = m?.spec?.template?.spec || {};
|
const podSpec = m?.spec?.template?.spec || {};
|
||||||
|
|
||||||
// 数据卷
|
// 数据卷
|
||||||
const vols: any[] = Array.isArray(podSpec.volumes) ? podSpec.volumes : [];
|
const vols: Record<string, any>[] = Array.isArray(podSpec.volumes) ? podSpec.volumes : [];
|
||||||
setVolumes(vols.map(volumeToForm));
|
setVolumes(vols.map(volumeToForm));
|
||||||
|
|
||||||
// 容器列表
|
// 容器列表
|
||||||
@@ -116,7 +115,7 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
|
|||||||
const allMounts: MountForm[] = [];
|
const allMounts: MountForm[] = [];
|
||||||
for (const c of allContainers) {
|
for (const c of allContainers) {
|
||||||
const cName = c.name || '(unnamed)';
|
const cName = c.name || '(unnamed)';
|
||||||
const vms: any[] = Array.isArray(c.volumeMounts) ? c.volumeMounts : [];
|
const vms: Record<string, any>[] = Array.isArray(c.volumeMounts) ? c.volumeMounts : [];
|
||||||
for (const vm of vms) {
|
for (const vm of vms) {
|
||||||
allMounts.push({
|
allMounts.push({
|
||||||
containerName: cName,
|
containerName: cName,
|
||||||
@@ -168,7 +167,7 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
|
|||||||
const cMounts = mounts
|
const cMounts = mounts
|
||||||
.filter(m => m.containerName === cName && m.volumeName && m.mountPath)
|
.filter(m => m.containerName === cName && m.volumeName && m.mountPath)
|
||||||
.map(m => {
|
.map(m => {
|
||||||
const vm: any = { name: m.volumeName, mountPath: m.mountPath, readOnly: m.readOnly };
|
const vm: Record<string, any> = { name: m.volumeName, mountPath: m.mountPath, readOnly: m.readOnly };
|
||||||
if (m.subPath) vm.subPath = m.subPath;
|
if (m.subPath) vm.subPath = m.subPath;
|
||||||
return vm;
|
return vm;
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -8,16 +8,28 @@ import {
|
|||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Label } from '@/components/ui/label';
|
|
||||||
import {
|
import {
|
||||||
Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
|
Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
|
||||||
} from '@/components/ui/table';
|
} from '@/components/ui/table';
|
||||||
import {
|
import {
|
||||||
Clock, Cpu, MemoryStick, HardDrive, Network, Activity,
|
|
||||||
RotateCcw, Container, History, ChevronDown, ChevronRight,
|
Clock,
|
||||||
Terminal, FileText, Server, ExternalLink, Minus, Plus,
|
HardDrive,
|
||||||
|
Network,
|
||||||
|
Activity,
|
||||||
|
RotateCcw,
|
||||||
|
Container,
|
||||||
|
History,
|
||||||
|
ChevronDown,
|
||||||
|
ChevronRight,
|
||||||
|
Terminal,
|
||||||
|
FileText,
|
||||||
|
ExternalLink,
|
||||||
|
Minus,
|
||||||
|
Plus,
|
||||||
Loader2,
|
Loader2,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
import { kubernetesApi } from '@/services/api';
|
import { kubernetesApi } from '@/services/api';
|
||||||
import { useToast } from '@/hooks/use-toast';
|
import { useToast } from '@/hooks/use-toast';
|
||||||
import {
|
import {
|
||||||
@@ -49,7 +61,7 @@ interface DeploymentViewProps {
|
|||||||
|
|
||||||
// ─── Helpers ───
|
// ─── Helpers ───
|
||||||
function getPodTimeline(pod: PodItem) {
|
function getPodTimeline(pod: PodItem) {
|
||||||
const cond: any[] = (pod as any).conditions || (pod as any).pod_conditions || [];
|
const cond: Record<string, any>[] = (pod as Record<string, any>).conditions || (pod as Record<string, any>).pod_conditions || [];
|
||||||
const find = (t: string) => cond.find(( c: any) => (c.type || c.Type) === t);
|
const find = (t: string) => cond.find(( c: any) => (c.type || c.Type) === t);
|
||||||
const ts = ( c: any) => c?.lastTransitionTime || c?.LastTransitionTime || c?.last_transition_time;
|
const ts = ( c: any) => c?.lastTransitionTime || c?.LastTransitionTime || c?.last_transition_time;
|
||||||
return {
|
return {
|
||||||
@@ -57,12 +69,12 @@ function getPodTimeline(pod: PodItem) {
|
|||||||
initialized: ts(find('Initialized') || {}),
|
initialized: ts(find('Initialized') || {}),
|
||||||
containersReady: ts(find('ContainersReady') || {}),
|
containersReady: ts(find('ContainersReady') || {}),
|
||||||
ready: ts(find('Ready') || {}),
|
ready: ts(find('Ready') || {}),
|
||||||
startTime: pod.start_time || (pod as any).startTime,
|
startTime: pod.start_time || (pod as Record<string, any>).startTime,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export function DeploymentView(props: DeploymentViewProps) {
|
export function DeploymentView(props: DeploymentViewProps) {
|
||||||
const { clusterCode, namespace, deployment, pods, replicaSets, revisions, onRefresh, onShowPodLogs, onShowPodTerminal, onShowPodYaml, onShowPodFileBrowser } = props;
|
const { clusterCode, namespace, deployment, pods, revisions, onRefresh } = props;
|
||||||
const { toast } = useToast();
|
const { toast } = useToast();
|
||||||
const [tab, setTab] = useState('pods');
|
const [tab, setTab] = useState('pods');
|
||||||
const [expandedPod, setExpandedPod] = useState<string | null>(null);
|
const [expandedPod, setExpandedPod] = useState<string | null>(null);
|
||||||
@@ -348,7 +360,7 @@ function PodConditionsRow({ pod }: { pod: PodItem }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// ═══════════════ TAB: 容器组 ═══════════════
|
// ═══════════════ TAB: 容器组 ═══════════════
|
||||||
function PodsTab({ clusterCode, namespace, pods, onShowPodLogs, onShowPodTerminal, onShowPodYaml, onShowPodFileBrowser, expandedPod, setExpandedPod }: DeploymentViewProps & { expandedPod: string | null; setExpandedPod: (v: string | null) => void }) {
|
function PodsTab({ clusterCode, pods, onShowPodLogs, onShowPodTerminal, onShowPodFileBrowser, expandedPod, setExpandedPod }: DeploymentViewProps & { expandedPod: string | null; setExpandedPod: (v: string | null) => void }) {
|
||||||
if (pods.length === 0) {
|
if (pods.length === 0) {
|
||||||
return <div className="text-center text-[var(--dg-text-muted)] py-12">暂无容器组</div>;
|
return <div className="text-center text-[var(--dg-text-muted)] py-12">暂无容器组</div>;
|
||||||
}
|
}
|
||||||
@@ -394,9 +406,9 @@ function PodsTab({ clusterCode, namespace, pods, onShowPodLogs, onShowPodTermina
|
|||||||
<div className="mt-3 pt-3 border-t border-[var(--dg-border)]">
|
<div className="mt-3 pt-3 border-t border-[var(--dg-border)]">
|
||||||
<PodConditionsRow pod={pod} />
|
<PodConditionsRow pod={pod} />
|
||||||
{/* Container details */}
|
{/* Container details */}
|
||||||
{(pod as any).containers && ((pod as any).containers as any[]).length > 0 && (
|
{(pod as Record<string, any>).containers && ((pod as Record<string, any>).containers as any[]).length > 0 && (
|
||||||
<div className="mt-3 grid grid-cols-1 md:grid-cols-2 gap-2">
|
<div className="mt-3 grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||||
{((pod as any).containers as any[]).map((c: any, idx: number) => (
|
{((pod as Record<string, any>).containers as any[]).map(( c: any, idx: number) => (
|
||||||
<div key={idx} className="p-2 rounded bg-[var(--dg-bg-tertiary)] text-xs">
|
<div key={idx} className="p-2 rounded bg-[var(--dg-bg-tertiary)] text-xs">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<span className="font-medium text-[var(--dg-text-primary)]">{c.name}</span>
|
<span className="font-medium text-[var(--dg-text-primary)]">{c.name}</span>
|
||||||
@@ -424,7 +436,7 @@ function PodsTab({ clusterCode, namespace, pods, onShowPodLogs, onShowPodTermina
|
|||||||
}
|
}
|
||||||
|
|
||||||
// ═══════════════ TAB: 访问方式 ═══════════════
|
// ═══════════════ TAB: 访问方式 ═══════════════
|
||||||
function ServicesTab({ services, ingresses, loading, namespace }: { services: SvcItem[]; ingresses: IngItem[]; loading: string; namespace: string }) {
|
function ServicesTab({ services, ingresses, loading }: { services: SvcItem[]; ingresses: IngItem[]; loading: string; namespace: string }) {
|
||||||
if (loading === 'services') {
|
if (loading === 'services') {
|
||||||
return <div className="flex items-center justify-center py-12"><Loader2 className="h-6 w-6 animate-spin text-[var(--dg-text-muted)]" /></div>;
|
return <div className="flex items-center justify-center py-12"><Loader2 className="h-6 w-6 animate-spin text-[var(--dg-text-muted)]" /></div>;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -9,16 +9,31 @@ import { Button } from '@/components/ui/button';
|
|||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator,
|
|
||||||
} from '@/components/ui/dropdown-menu';
|
ArrowLeft,
|
||||||
import {
|
Image as ImageIcon,
|
||||||
ArrowLeft, Pencil, FileCode, Image as ImageIcon, Minus, Plus, RotateCw,
|
Minus,
|
||||||
Trash2, FileText, Terminal, RefreshCw, Loader2, X,
|
Plus,
|
||||||
ChevronDown, Cpu, Network, GitBranch, Info,
|
RotateCw,
|
||||||
CheckCircle, AlertTriangle, XCircle,
|
Trash2,
|
||||||
Pause, Play, Rocket, Container, Settings, Database, HardDrive,
|
FileText,
|
||||||
|
RefreshCw,
|
||||||
|
Loader2,
|
||||||
|
X,
|
||||||
|
Network,
|
||||||
|
CheckCircle,
|
||||||
|
AlertTriangle,
|
||||||
|
XCircle,
|
||||||
|
Pause,
|
||||||
|
Play,
|
||||||
|
Rocket,
|
||||||
|
Container,
|
||||||
|
Settings,
|
||||||
|
Database,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
import { kubernetesApi } from '@/services/api';
|
import { kubernetesApi } from '@/services/api';
|
||||||
import { useToast } from '@/hooks/use-toast';
|
import { useToast } from '@/hooks/use-toast';
|
||||||
import { useUserStore } from '@/store';
|
import { useUserStore } from '@/store';
|
||||||
@@ -118,11 +133,11 @@ export function DeploymentWorkload({ clusterCode, namespace, deploymentName, mod
|
|||||||
const yamlText = await kubernetesApi.getResourceYaml(clusterCode, namespace, 'deployments', deploymentName);
|
const yamlText = await kubernetesApi.getResourceYaml(clusterCode, namespace, 'deployments', deploymentName);
|
||||||
// 简易 YAML→JSON：交给浏览器原生 JSON.parse 兜底（K8s API 多以 JSON 返回）；
|
// 简易 YAML→JSON：交给浏览器原生 JSON.parse 兜底（K8s API 多以 JSON 返回）；
|
||||||
// 若是纯 YAML，则尝试用 js-yaml（如项目已安装），否则保留为 null 让编辑模式降级。
|
// 若是纯 YAML，则尝试用 js-yaml（如项目已安装），否则保留为 null 让编辑模式降级。
|
||||||
let parsed: any = null;
|
let parsed: Record<string, any> = null;
|
||||||
try { parsed = JSON.parse(yamlText); } catch {
|
try { parsed = JSON.parse(yamlText); } catch {
|
||||||
// 非纯 JSON，尝试动态加载 js-yaml
|
// 非纯 JSON，尝试动态加载 js-yaml
|
||||||
try {
|
try {
|
||||||
const jsyaml: any = await import('js-yaml');
|
const jsyaml: Record<string, any> = await import('js-yaml');
|
||||||
parsed = jsyaml.load(yamlText);
|
parsed = jsyaml.load(yamlText);
|
||||||
} catch {
|
} catch {
|
||||||
parsed = null;
|
parsed = null;
|
||||||
@@ -139,7 +154,7 @@ export function DeploymentWorkload({ clusterCode, namespace, deploymentName, mod
|
|||||||
useEffect(() => { if (mode === 'edit' && !manifest) loadManifest(); }, [mode, manifest, loadManifest]);
|
useEffect(() => { if (mode === 'edit' && !manifest) loadManifest(); }, [mode, manifest, loadManifest]);
|
||||||
|
|
||||||
// ============ 操作 ============
|
// ============ 操作 ============
|
||||||
const handleScale = async (delta: number) => {
|
const _handleScale = async (delta: number) => {
|
||||||
const newReplicas = (deployment?.replicas || 0) + delta;
|
const newReplicas = (deployment?.replicas || 0) + delta;
|
||||||
if (newReplicas < 0) return;
|
if (newReplicas < 0) return;
|
||||||
setActionLoading('scale');
|
setActionLoading('scale');
|
||||||
@@ -196,7 +211,7 @@ export function DeploymentWorkload({ clusterCode, namespace, deploymentName, mod
|
|||||||
|
|
||||||
const handleCICD = () => {
|
const handleCICD = () => {
|
||||||
// 打开 Webhook 弹窗（不跳转流水线）
|
// 打开 Webhook 弹窗（不跳转流水线）
|
||||||
setModal({ kind: 'cicd' as any });
|
setModal({ kind: 'cicd' });
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleUpdateImage = async () => {
|
const handleUpdateImage = async () => {
|
||||||
@@ -266,7 +281,7 @@ export function DeploymentWorkload({ clusterCode, namespace, deploymentName, mod
|
|||||||
const ready = deployment.ready_replicas || deployment.readyReplicas || 0;
|
const ready = deployment.ready_replicas || deployment.readyReplicas || 0;
|
||||||
const total = deployment.replicas || 0;
|
const total = deployment.replicas || 0;
|
||||||
const isHealthy = ready === total && total > 0;
|
const isHealthy = ready === total && total > 0;
|
||||||
const viewBase = `/kubernetes/${clusterCode}/namespace/${namespace}/workload`;
|
const _viewBase = `/kubernetes/${clusterCode}/namespace/${namespace}/workload`;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
@@ -701,7 +716,7 @@ function PodLogsModal({ clusterCode, namespace, podName, containers, onClose }:
|
|||||||
const loadLogs = async () => {
|
const loadLogs = async () => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const res: any = await kubernetesApi.getPodLogs(clusterCode, namespace, podName, tail, container || undefined);
|
const res: Record<string, any> = await kubernetesApi.getPodLogs(clusterCode, namespace, podName, tail, container || undefined);
|
||||||
setLogs(res?.data?.logs || res?.logs || res || '无日志');
|
setLogs(res?.data?.logs || res?.logs || res || '无日志');
|
||||||
} catch {
|
} catch {
|
||||||
setLogs('获取日志失败');
|
setLogs('获取日志失败');
|
||||||
|
|||||||
@@ -64,7 +64,7 @@ export default function EventsPage() {
|
|||||||
try {
|
try {
|
||||||
const ns = selectedNs === 'all' ? undefined : selectedNs;
|
const ns = selectedNs === 'all' ? undefined : selectedNs;
|
||||||
const ft = filterType === 'all' ? undefined : filterType;
|
const ft = filterType === 'all' ? undefined : filterType;
|
||||||
const res: any = await kubernetesApi.getEvents(activeCluster, ns, ft);
|
const res: Record<string, any> = await kubernetesApi.getEvents(activeCluster, ns, ft);
|
||||||
setEvents(Array.isArray(res) ? res : (res?.list || []));
|
setEvents(Array.isArray(res) ? res : (res?.list || []));
|
||||||
} catch { setEvents([]); } finally { setLoading(false); }
|
} catch { setEvents([]); } finally { setLoading(false); }
|
||||||
}, [activeCluster, selectedNs, filterType]);
|
}, [activeCluster, selectedNs, filterType]);
|
||||||
@@ -74,7 +74,7 @@ export default function EventsPage() {
|
|||||||
try {
|
try {
|
||||||
const ns = selectedNs === 'all' ? undefined : selectedNs;
|
const ns = selectedNs === 'all' ? undefined : selectedNs;
|
||||||
const hours = parseInt(timeWindow) || undefined;
|
const hours = parseInt(timeWindow) || undefined;
|
||||||
const res: any = await kubernetesApi.getEventsSummary(activeCluster, ns, hours);
|
const res: Record<string, any> = await kubernetesApi.getEventsSummary(activeCluster, ns, hours);
|
||||||
setSummary(res || null);
|
setSummary(res || null);
|
||||||
} catch { setSummary(null); }
|
} catch { setSummary(null); }
|
||||||
}, [activeCluster, selectedNs, timeWindow]);
|
}, [activeCluster, selectedNs, timeWindow]);
|
||||||
|
|||||||
@@ -5,7 +5,6 @@ import {
|
|||||||
DialogDescription,
|
DialogDescription,
|
||||||
DialogTitle,
|
DialogTitle,
|
||||||
} from '@/components/ui/dialog';
|
} from '@/components/ui/dialog';
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import { Terminal as XTerm } from 'xterm';
|
import { Terminal as XTerm } from 'xterm';
|
||||||
import { FitAddon } from 'xterm-addon-fit';
|
import { FitAddon } from 'xterm-addon-fit';
|
||||||
import 'xterm/css/xterm.css';
|
import 'xterm/css/xterm.css';
|
||||||
|
|||||||
@@ -57,7 +57,7 @@ export function KubernetesClusters() {
|
|||||||
const loadData = async () => {
|
const loadData = async () => {
|
||||||
try {
|
try {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
const res: any = await kubernetesApi.getClusters();
|
const res: Record<string, any> = await kubernetesApi.getClusters();
|
||||||
setClusters(res?.list || []);
|
setClusters(res?.list || []);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('加载集群列表失败:', e);
|
console.error('加载集群列表失败:', e);
|
||||||
@@ -72,14 +72,14 @@ export function KubernetesClusters() {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// 新建后自动同步
|
// 新建后自动同步
|
||||||
const [pendingSyncId, setPendingSyncId] = useState<number | null>(null);
|
const [, _setPendingSyncId] = useState<number | null>(null);
|
||||||
|
|
||||||
const handleSaved = () => {
|
const handleSaved = () => {
|
||||||
loadData().then(() => {
|
loadData().then(() => {
|
||||||
if (!editingCluster) {
|
if (!editingCluster) {
|
||||||
// 新建集群后，等列表刷新完再取最新一条同步
|
// 新建集群后，等列表刷新完再取最新一条同步
|
||||||
setTimeout(async () => {
|
setTimeout(async () => {
|
||||||
const res: any = await kubernetesApi.getClusters();
|
const res: Record<string, any> = await kubernetesApi.getClusters();
|
||||||
const list = res?.list || [];
|
const list = res?.list || [];
|
||||||
if (list.length > 0) {
|
if (list.length > 0) {
|
||||||
handleSync(list[list.length - 1].id, true);
|
handleSync(list[list.length - 1].id, true);
|
||||||
@@ -101,7 +101,7 @@ export function KubernetesClusters() {
|
|||||||
const handleSync = async (id: number | string, silent?: boolean) => {
|
const handleSync = async (id: number | string, silent?: boolean) => {
|
||||||
try {
|
try {
|
||||||
if (!silent) toast.info('正在同步集群资源...');
|
if (!silent) toast.info('正在同步集群资源...');
|
||||||
const res: any = await kubernetesApi.syncCluster(id);
|
const res: Record<string, any> = await kubernetesApi.syncCluster(id);
|
||||||
if (!silent) toast.success(res?.message || '同步完成');
|
if (!silent) toast.success(res?.message || '同步完成');
|
||||||
loadData();
|
loadData();
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ export function KubernetesNodes() {
|
|||||||
|
|
||||||
const loadClusters = useCallback(async () => {
|
const loadClusters = useCallback(async () => {
|
||||||
try {
|
try {
|
||||||
const res: any = await kubernetesApi.getClusters();
|
const res: Record<string, any> = await kubernetesApi.getClusters();
|
||||||
const list = res?.list || [];
|
const list = res?.list || [];
|
||||||
setClusters(list);
|
setClusters(list);
|
||||||
if (list.length > 0 && !selectedCluster) setSelectedCluster(String(list[0].id));
|
if (list.length > 0 && !selectedCluster) setSelectedCluster(String(list[0].id));
|
||||||
@@ -35,7 +35,7 @@ export function KubernetesNodes() {
|
|||||||
if (!selectedCluster) return;
|
if (!selectedCluster) return;
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const res: any = await kubernetesApi.getNodes(selectedCluster);
|
const res: Record<string, any> = await kubernetesApi.getNodes(selectedCluster);
|
||||||
setNodes(Array.isArray(res) ? res : (res?.list || []));
|
setNodes(Array.isArray(res) ? res : (res?.list || []));
|
||||||
} catch { setNodes([]); } finally { setLoading(false); }
|
} catch { setNodes([]); } finally { setLoading(false); }
|
||||||
}, [selectedCluster]);
|
}, [selectedCluster]);
|
||||||
|
|||||||
@@ -11,9 +11,17 @@ import {
|
|||||||
Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
|
Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
|
||||||
} from '@/components/ui/table';
|
} from '@/components/ui/table';
|
||||||
import {
|
import {
|
||||||
RefreshCw, Search, Boxes, Loader2, Container,
|
|
||||||
Plus, Minus, RotateCw, Upload, FileText, Eye,
|
RefreshCw,
|
||||||
|
Search,
|
||||||
|
Boxes,
|
||||||
|
Loader2,
|
||||||
|
Container,
|
||||||
|
Plus,
|
||||||
|
Minus,
|
||||||
|
Eye,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
import { kubernetesApi } from '@/services/api';
|
import { kubernetesApi } from '@/services/api';
|
||||||
import { useToast } from '@/hooks/use-toast';
|
import { useToast } from '@/hooks/use-toast';
|
||||||
import { DeploymentDetail } from './DeploymentDetail';
|
import { DeploymentDetail } from './DeploymentDetail';
|
||||||
@@ -29,14 +37,14 @@ export function KubernetesWorkloads() {
|
|||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [search, setSearch] = useState('');
|
const [search, setSearch] = useState('');
|
||||||
const [activeTab, setActiveTab] = useState('deployments');
|
const [activeTab, setActiveTab] = useState('deployments');
|
||||||
const [actionLoading, setActionLoading] = useState<Record<string, string>>({});
|
const [, setActionLoading] = useState<Record<string, string>>({});
|
||||||
|
|
||||||
// Detail view
|
// Detail view
|
||||||
const [selectedDeployment, setSelectedDeployment] = useState<{ name: string; namespace: string } | null>(null);
|
const [selectedDeployment, setSelectedDeployment] = useState<{ name: string; namespace: string } | null>(null);
|
||||||
|
|
||||||
const loadClusters = useCallback(async () => {
|
const loadClusters = useCallback(async () => {
|
||||||
try {
|
try {
|
||||||
const res: any = await kubernetesApi.getClusters();
|
const res: Record<string, any> = await kubernetesApi.getClusters();
|
||||||
const list = res?.list || [];
|
const list = res?.list || [];
|
||||||
setClusters(list);
|
setClusters(list);
|
||||||
if (list.length > 0 && !selectedCluster) setSelectedCluster(list[0].code || String(list[0].id));
|
if (list.length > 0 && !selectedCluster) setSelectedCluster(list[0].code || String(list[0].id));
|
||||||
@@ -49,7 +57,7 @@ export function KubernetesWorkloads() {
|
|||||||
const loadNamespaces = useCallback(async () => {
|
const loadNamespaces = useCallback(async () => {
|
||||||
if (!selectedCluster) return;
|
if (!selectedCluster) return;
|
||||||
try {
|
try {
|
||||||
const res: any = await kubernetesApi.getNamespaces(selectedCluster);
|
const res: Record<string, any> = await kubernetesApi.getNamespaces(selectedCluster);
|
||||||
const nsList: string[] = Array.isArray(res) ? res : (res?.list || res?.data || []);
|
const nsList: string[] = Array.isArray(res) ? res : (res?.list || res?.data || []);
|
||||||
setNamespaces(nsList);
|
setNamespaces(nsList);
|
||||||
} catch { setNamespaces([]); }
|
} catch { setNamespaces([]); }
|
||||||
|
|||||||
@@ -1,10 +1,18 @@
|
|||||||
import { useState, useEffect, useCallback } from 'react';
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
import { useParams, Link } from 'react-router-dom';
|
import { useParams, Link } from 'react-router-dom';
|
||||||
import { Card, CardContent } from '@/components/ui/card';
|
|
||||||
import {
|
import {
|
||||||
RefreshCw, Loader2, ChevronRight, Cloud,
|
|
||||||
Boxes, Container, Network, FileText, Shield, Activity, Clock,
|
ChevronRight,
|
||||||
|
Cloud,
|
||||||
|
Boxes,
|
||||||
|
Container,
|
||||||
|
Network,
|
||||||
|
FileText,
|
||||||
|
Shield,
|
||||||
|
Activity,
|
||||||
|
Clock,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
import { kubernetesApi } from '@/services/api';
|
import { kubernetesApi } from '@/services/api';
|
||||||
|
|
||||||
const RESOURCE_LINKS = [
|
const RESOURCE_LINKS = [
|
||||||
|
|||||||
@@ -84,9 +84,9 @@ const RESOURCE_CONFIG: Record<ResourceType, {
|
|||||||
<TableCell>
|
<TableCell>
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<Button variant="ghost" size="sm" className="h-7 px-2 text-xs text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/10" title="终端"
|
<Button variant="ghost" size="sm" className="h-7 px-2 text-xs text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/10" title="终端"
|
||||||
onClick={() => (opts as any).onTerminal?.(p)}><Terminal className="h-3.5 w-3.5 mr-1" />终端</Button>
|
onClick={() => (opts as Record<string, any>).onTerminal?.(p)}><Terminal className="h-3.5 w-3.5 mr-1" />终端</Button>
|
||||||
<Button variant="ghost" size="sm" className="h-7 px-2 text-xs text-amber-400 hover:text-amber-300 hover:bg-amber-500/10" title="文件浏览器"
|
<Button variant="ghost" size="sm" className="h-7 px-2 text-xs text-amber-400 hover:text-amber-300 hover:bg-amber-500/10" title="文件浏览器"
|
||||||
onClick={() => (opts as any).onFileBrowser?.(p)}><HardDrive className="h-3.5 w-3.5 mr-1" />文件浏览器</Button>
|
onClick={() => (opts as Record<string, any>).onFileBrowser?.(p)}><HardDrive className="h-3.5 w-3.5 mr-1" />文件浏览器</Button>
|
||||||
<Button variant="ghost" size="sm" className="h-7 px-2 text-xs text-blue-400 hover:text-blue-300 hover:bg-blue-500/10" title="查看YAML"
|
<Button variant="ghost" size="sm" className="h-7 px-2 text-xs text-blue-400 hover:text-blue-300 hover:bg-blue-500/10" title="查看YAML"
|
||||||
onClick={() => opts.onYaml?.(p.name)}><FileCode className="h-3.5 w-3.5 mr-1" />YAML</Button>
|
onClick={() => opts.onYaml?.(p.name)}><FileCode className="h-3.5 w-3.5 mr-1" />YAML</Button>
|
||||||
</div>
|
</div>
|
||||||
@@ -176,7 +176,7 @@ const RESOURCE_CONFIG: Record<ResourceType, {
|
|||||||
hpas: {
|
hpas: {
|
||||||
title: 'HPAs', subtitle: '水平自动伸缩', icon: Activity,
|
title: 'HPAs', subtitle: '水平自动伸缩', icon: Activity,
|
||||||
columns: ['名称', '命名空间', '目标', '最小/最大', 'CPU%', 'Mem%'],
|
columns: ['名称', '命名空间', '目标', '最小/最大', 'CPU%', 'Mem%'],
|
||||||
renderRow: (h, opts) => (
|
renderRow: (h, _opts) => (
|
||||||
<TableRow key={h.name} className="border-slate-800 hover:bg-slate-800/30">
|
<TableRow key={h.name} className="border-slate-800 hover:bg-slate-800/30">
|
||||||
<TableCell className="font-medium text-slate-200">{h.name}</TableCell>
|
<TableCell className="font-medium text-slate-200">{h.name}</TableCell>
|
||||||
<TableCell><Badge variant="outline" className="border-slate-700 text-slate-400">{h.namespace}</Badge></TableCell>
|
<TableCell><Badge variant="outline" className="border-slate-700 text-slate-400">{h.namespace}</Badge></TableCell>
|
||||||
@@ -334,7 +334,7 @@ export default function NamespaceResourcePage() {
|
|||||||
const { clusterCode, namespace } = useParams<{ clusterCode: string; namespace: string }>();
|
const { clusterCode, namespace } = useParams<{ clusterCode: string; namespace: string }>();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { toast } = useToast();
|
const { toast: _toast } = useToast();
|
||||||
const type = useMemo<ResourceType>(() => {
|
const type = useMemo<ResourceType>(() => {
|
||||||
const segments = location.pathname.split('/');
|
const segments = location.pathname.split('/');
|
||||||
const last = segments[segments.length - 1];
|
const last = segments[segments.length - 1];
|
||||||
@@ -383,7 +383,7 @@ export default function NamespaceResourcePage() {
|
|||||||
if (!clusterCode || !namespace) return;
|
if (!clusterCode || !namespace) return;
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
let res: any = [];
|
let res: Record<string, any> = [];
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 'deployments': res = await kubernetesApi.getNamespaceDeployments(clusterCode, namespace).catch(() => []); break;
|
case 'deployments': res = await kubernetesApi.getNamespaceDeployments(clusterCode, namespace).catch(() => []); break;
|
||||||
case 'pods': res = await kubernetesApi.getNamespacePods(clusterCode, namespace).catch(() => []); break;
|
case 'pods': res = await kubernetesApi.getNamespacePods(clusterCode, namespace).catch(() => []); break;
|
||||||
|
|||||||
@@ -7,14 +7,24 @@ import {
|
|||||||
Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
|
Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
|
||||||
} from '@/components/ui/table';
|
} from '@/components/ui/table';
|
||||||
import {
|
import {
|
||||||
RefreshCw, Loader2, Cpu, Server, Clock, HardDrive, Activity,
|
|
||||||
ChevronRight, Container, Network, Info, AlertTriangle, CheckCircle2,
|
RefreshCw,
|
||||||
|
Loader2,
|
||||||
|
Server,
|
||||||
|
Activity,
|
||||||
|
ChevronRight,
|
||||||
|
Container,
|
||||||
|
Network,
|
||||||
|
Info,
|
||||||
|
AlertTriangle,
|
||||||
|
CheckCircle2,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
import { kubernetesApi } from '@/services/api';
|
import { kubernetesApi } from '@/services/api';
|
||||||
|
|
||||||
export default function NodeDetailPage() {
|
export default function NodeDetailPage() {
|
||||||
const { clusterCode, nodeName } = useParams<{ clusterCode: string; nodeName: string }>();
|
const { clusterCode, nodeName } = useParams<{ clusterCode: string; nodeName: string }>();
|
||||||
const navigate = useNavigate();
|
const _navigate = useNavigate();
|
||||||
const [data, setData] = useState<any>(null);
|
const [data, setData] = useState<any>(null);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
@@ -22,14 +32,14 @@ export default function NodeDetailPage() {
|
|||||||
if (!clusterCode || !nodeName) return;
|
if (!clusterCode || !nodeName) return;
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const res: any = await kubernetesApi.getNodeDetail(clusterCode, nodeName);
|
const res: Record<string, unknown> = await kubernetesApi.getNodeDetail(clusterCode, nodeName);
|
||||||
setData(res);
|
setData(res);
|
||||||
} catch { setData(null); } finally { setLoading(false); }
|
} catch { setData(null); } finally { setLoading(false); }
|
||||||
}, [clusterCode, nodeName]);
|
}, [clusterCode, nodeName]);
|
||||||
|
|
||||||
useEffect(() => { loadData(); }, [loadData]);
|
useEffect(() => { loadData(); }, [loadData]);
|
||||||
|
|
||||||
const formatNum = (v: any, suffix = '') => {
|
const _formatNum = ( v: any, suffix = '') => {
|
||||||
if (v === undefined || v === null || v === '') return '-';
|
if (v === undefined || v === null || v === '') return '-';
|
||||||
const n = typeof v === 'number' ? v : parseFloat(v);
|
const n = typeof v === 'number' ? v : parseFloat(v);
|
||||||
return isNaN(n) ? '-' : `${n.toLocaleString()}${suffix}`;
|
return isNaN(n) ? '-' : `${n.toLocaleString()}${suffix}`;
|
||||||
|
|||||||
@@ -78,7 +78,6 @@ export function PodExecTerminal({
|
|||||||
|
|
||||||
// ─── 连接 WebSocket ───
|
// ─── 连接 WebSocket ───
|
||||||
const connect = useCallback(() => {
|
const connect = useCallback(() => {
|
||||||
console.log('[PodExec:connect] START clusterId=', clusterId, 'namespace=', namespace, 'podName=', podName, 'container=', container, 'shell=', shell);
|
|
||||||
|
|
||||||
if (!termRef.current) {
|
if (!termRef.current) {
|
||||||
console.error('[PodExec:connect] ABORT: termRef.current is null');
|
console.error('[PodExec:connect] ABORT: termRef.current is null');
|
||||||
@@ -87,7 +86,6 @@ export function PodExecTerminal({
|
|||||||
const term = termRef.current;
|
const term = termRef.current;
|
||||||
|
|
||||||
if (wsRef.current) {
|
if (wsRef.current) {
|
||||||
console.log('[PodExec:connect] closing previous WS');
|
|
||||||
try { wsRef.current.close(); } catch { /* noop */ }
|
try { wsRef.current.close(); } catch { /* noop */ }
|
||||||
wsRef.current = null;
|
wsRef.current = null;
|
||||||
}
|
}
|
||||||
@@ -97,18 +95,15 @@ export function PodExecTerminal({
|
|||||||
term.writeln(`\x1b[36m[正在连接 ${podName}${container ? '/' + container : ''} shell=${shell} ...]\x1b[0m`);
|
term.writeln(`\x1b[36m[正在连接 ${podName}${container ? '/' + container : ''} shell=${shell} ...]\x1b[0m`);
|
||||||
|
|
||||||
const wsUrl = kubernetesApi.buildPodExecWsUrl(clusterId, namespace, podName, container || undefined, shell);
|
const wsUrl = kubernetesApi.buildPodExecWsUrl(clusterId, namespace, podName, container || undefined, shell);
|
||||||
console.log('[PodExec:connect] WS URL:', wsUrl, '\n location.protocol=', window.location.protocol, '\n location.host=', window.location.host, '\n VITE_API_BASE_URL=', import.meta.env.VITE_API_BASE_URL);
|
|
||||||
|
|
||||||
const ws = new WebSocket(wsUrl);
|
const ws = new WebSocket(wsUrl);
|
||||||
wsRef.current = ws;
|
wsRef.current = ws;
|
||||||
|
|
||||||
ws.onopen = () => {
|
ws.onopen = () => {
|
||||||
console.log('[PodExec:connect] WS onopen — connected, readyState=', ws.readyState);
|
|
||||||
setConnState('connected');
|
setConnState('connected');
|
||||||
term.reset();
|
term.reset();
|
||||||
try {
|
try {
|
||||||
const { cols, rows } = term;
|
const { cols, rows } = term;
|
||||||
console.log('[PodExec:connect] sending resize:', cols, 'x', rows);
|
|
||||||
ws.send(JSON.stringify({ status: 1, cols, rows }));
|
ws.send(JSON.stringify({ status: 1, cols, rows }));
|
||||||
} catch (e) { console.error('[PodExec:connect] resize error:', e); }
|
} catch (e) { console.error('[PodExec:connect] resize error:', e); }
|
||||||
const tryFocus = () => { try { term.focus(); } catch { /* noop */ } };
|
const tryFocus = () => { try { term.focus(); } catch { /* noop */ } };
|
||||||
@@ -134,7 +129,7 @@ export function PodExecTerminal({
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
ws.onclose = (ev) => {
|
ws.onclose = (_ev) => {
|
||||||
setConnState((s) => (s === 'error' ? s : 'closed'));
|
setConnState((s) => (s === 'error' ? s : 'closed'));
|
||||||
if (!errorShownRef.current) {
|
if (!errorShownRef.current) {
|
||||||
term.write('\r\n\x1b[33m[连接已关闭]\x1b[0m\r\n');
|
term.write('\r\n\x1b[33m[连接已关闭]\x1b[0m\r\n');
|
||||||
@@ -149,12 +144,10 @@ export function PodExecTerminal({
|
|||||||
}, [clusterId, namespace, podName, container, shell]);
|
}, [clusterId, namespace, podName, container, shell]);
|
||||||
|
|
||||||
// DEBUG: 组件入口
|
// DEBUG: 组件入口
|
||||||
console.log('[PodExec:render] open=', open, 'clusterId=', clusterId, 'podName=', podName, 'namespace=', namespace, 'containers=', containers.length, 'container=', container, 'shell=', shell, 'connState=', connState);
|
|
||||||
|
|
||||||
// ─── 创建 xterm + 连接（用 rAF 重试等 Dialog 渲染完）───
|
// ─── 创建 xterm + 连接（用 rAF 重试等 Dialog 渲染完）───
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log('[PodExec:initEffect] TRIGGERED open=', open, 'clusterId=', clusterId, 'podName=', podName, 'namespace=', namespace);
|
if (!open) { return; }
|
||||||
if (!open) { console.log('[PodExec:initEffect] ABORT: open=false'); return; }
|
|
||||||
if (!clusterId) { console.error('[PodExec:initEffect] ABORT: clusterId is falsy:', clusterId); return; }
|
if (!clusterId) { console.error('[PodExec:initEffect] ABORT: clusterId is falsy:', clusterId); return; }
|
||||||
if (!podName) { console.error('[PodExec:initEffect] ABORT: podName is falsy:', podName); return; }
|
if (!podName) { console.error('[PodExec:initEffect] ABORT: podName is falsy:', podName); return; }
|
||||||
|
|
||||||
@@ -163,9 +156,8 @@ export function PodExecTerminal({
|
|||||||
const startTime = performance.now();
|
const startTime = performance.now();
|
||||||
|
|
||||||
const tryInit = () => {
|
const tryInit = () => {
|
||||||
if (disposed) { console.log('[PodExec:tryInit] disposed, aborting'); return; }
|
if (disposed) { return; }
|
||||||
const el = containerRef.current;
|
const el = containerRef.current;
|
||||||
console.log('[PodExec:tryInit] retry=', retryCount, 'el=', el ? `DIV ${el.offsetWidth}x${el.offsetHeight}` : 'NULL', 'el.parentElement=', el?.parentElement ? 'YES' : 'NO');
|
|
||||||
if (!el) {
|
if (!el) {
|
||||||
retryCount++;
|
retryCount++;
|
||||||
if (retryCount < 20) {
|
if (retryCount < 20) {
|
||||||
@@ -176,7 +168,6 @@ export function PodExecTerminal({
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log('[PodExec:tryInit] SUCCESS: container ready after', retryCount, 'retries, size:', el.offsetWidth, 'x', el.offsetHeight, 'elapsed:', Math.round(performance.now()-startTime), 'ms');
|
|
||||||
|
|
||||||
const term = new XTerm({
|
const term = new XTerm({
|
||||||
cursorBlink: true,
|
cursorBlink: true,
|
||||||
@@ -202,7 +193,6 @@ export function PodExecTerminal({
|
|||||||
|
|
||||||
term.onData((data: string) => {
|
term.onData((data: string) => {
|
||||||
if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
|
if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
|
||||||
console.debug('[PodExec:term] TX stdin, len=', data.length, 'bytes=', [...data].map(c => c.charCodeAt(0)).slice(0, 10));
|
|
||||||
wsRef.current.send(JSON.stringify({ status: 0, data }));
|
wsRef.current.send(JSON.stringify({ status: 0, data }));
|
||||||
} else {
|
} else {
|
||||||
console.warn('[PodExec:term] TX dropped — WS not open, readyState=', wsRef.current?.readyState);
|
console.warn('[PodExec:term] TX dropped — WS not open, readyState=', wsRef.current?.readyState);
|
||||||
@@ -210,7 +200,6 @@ export function PodExecTerminal({
|
|||||||
});
|
});
|
||||||
|
|
||||||
term.open(el);
|
term.open(el);
|
||||||
console.log('[PodExec:tryInit] xterm.open() done, rows=', term.rows, 'cols=', term.cols);
|
|
||||||
requestAnimationFrame(() => { try { fit.fit(); } catch { /* noop */ } });
|
requestAnimationFrame(() => { try { fit.fit(); } catch { /* noop */ } });
|
||||||
|
|
||||||
mountedRef.current = true;
|
mountedRef.current = true;
|
||||||
@@ -228,7 +217,6 @@ export function PodExecTerminal({
|
|||||||
// ─── cleanup on close ───
|
// ─── cleanup on close ───
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!open) {
|
if (!open) {
|
||||||
console.log('[PodExec:cleanup] dialog closed, cleaning up WS + xterm');
|
|
||||||
try { wsRef.current?.close(); } catch { /* noop */ }
|
try { wsRef.current?.close(); } catch { /* noop */ }
|
||||||
try { termRef.current?.dispose(); } catch { /* noop */ }
|
try { termRef.current?.dispose(); } catch { /* noop */ }
|
||||||
termRef.current = null;
|
termRef.current = null;
|
||||||
@@ -242,10 +230,8 @@ export function PodExecTerminal({
|
|||||||
// ─── 容器/shell 变化时重连 ───
|
// ─── 容器/shell 变化时重连 ───
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (open && termRef.current && mountedRef.current) {
|
if (open && termRef.current && mountedRef.current) {
|
||||||
console.log('[PodExec:reconnect] container=', container, 'shell=', shell, 'mounted=', mountedRef.current);
|
|
||||||
connect();
|
connect();
|
||||||
} else {
|
} else {
|
||||||
console.log('[PodExec:reconnect] SKIP: open=', open, 'hasTerm=', !!termRef.current, 'mounted=', mountedRef.current);
|
|
||||||
}
|
}
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [container, shell]);
|
}, [container, shell]);
|
||||||
|
|||||||
@@ -4,12 +4,21 @@ import { useState, useEffect, useCallback, useRef } from 'react';
|
|||||||
import { kubernetesApi } from '@/services/api';
|
import { kubernetesApi } from '@/services/api';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { Input } from '@/components/ui/input';
|
|
||||||
import {
|
import {
|
||||||
Loader2, X, Folder, File, ChevronRight, ChevronDown,
|
|
||||||
Download, Upload, RefreshCw, ArrowLeft, HardDrive,
|
Loader2,
|
||||||
|
X,
|
||||||
|
Folder,
|
||||||
|
File,
|
||||||
|
ChevronRight,
|
||||||
|
Download,
|
||||||
|
Upload,
|
||||||
|
RefreshCw,
|
||||||
|
ArrowLeft,
|
||||||
|
HardDrive,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
|
|
||||||
export interface PodFileBrowserProps {
|
export interface PodFileBrowserProps {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
onOpenChange: (open: boolean) => void;
|
onOpenChange: (open: boolean) => void;
|
||||||
@@ -45,9 +54,9 @@ export function PodFileBrowser({
|
|||||||
setError('');
|
setError('');
|
||||||
setPreview(null);
|
setPreview(null);
|
||||||
try {
|
try {
|
||||||
const res: any = await kubernetesApi.listPodFiles(clusterCode, namespace, podName, path, container || undefined);
|
const res: Record<string, any> = await kubernetesApi.listPodFiles(clusterCode, namespace, podName, path, container || undefined);
|
||||||
// 兼容后端 {files: [...]} 和 {entries: [...]} 两种返回格式
|
// 兼容后端 {files: [...]} 和 {entries: [...]} 两种返回格式
|
||||||
const raw: any[] = res?.entries || res?.files || res?.data?.entries || res?.data?.files || (Array.isArray(res) ? res : []);
|
const raw: Record<string, any>[] = res?.entries || res?.files || res?.data?.entries || res?.data?.files || (Array.isArray(res) ? res : []);
|
||||||
const list: FileEntry[] = raw.map(( it: any) => ({
|
const list: FileEntry[] = raw.map(( it: any) => ({
|
||||||
name: it.name ?? it.Name ?? '',
|
name: it.name ?? it.Name ?? '',
|
||||||
isDir: Boolean(it.isDir ?? it.is_dir ?? it.IsDir ?? it.dir ?? it.directory),
|
isDir: Boolean(it.isDir ?? it.is_dir ?? it.IsDir ?? it.dir ?? it.directory),
|
||||||
@@ -57,7 +66,7 @@ export function PodFileBrowser({
|
|||||||
setEntries(list);
|
setEntries(list);
|
||||||
setCurrentPath(path);
|
setCurrentPath(path);
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
setError(e.message || '加载文件列表失败');
|
setError((e as Record<string, any>).message || '加载文件列表失败');
|
||||||
setEntries([]);
|
setEntries([]);
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
@@ -74,7 +83,7 @@ export function PodFileBrowser({
|
|||||||
}
|
}
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const res: any = await kubernetesApi.execPod(clusterCode, namespace, podName, ['pwd'], container || undefined);
|
const res: Record<string, any> = await kubernetesApi.execPod(clusterCode, namespace, podName, ['pwd'], container || undefined);
|
||||||
const stdout = (res?.stdout || res?.data?.stdout || '').trim();
|
const stdout = (res?.stdout || res?.data?.stdout || '').trim();
|
||||||
const workdir = stdout && stdout.startsWith('/') ? stdout : '/';
|
const workdir = stdout && stdout.startsWith('/') ? stdout : '/';
|
||||||
workdirDetected.current = true;
|
workdirDetected.current = true;
|
||||||
@@ -107,7 +116,7 @@ export function PodFileBrowser({
|
|||||||
const text = await kubernetesApi.readPodFileText(clusterCode, namespace, podName, filePath, container || undefined);
|
const text = await kubernetesApi.readPodFileText(clusterCode, namespace, podName, filePath, container || undefined);
|
||||||
setPreview({ file: fileName, content: text });
|
setPreview({ file: fileName, content: text });
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
setPreview({ file: fileName, content: `读取失败: ${e.message}` });
|
setPreview({ file: fileName, content: `读取失败: ${(e as Record<string, any>).message}` });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -125,7 +134,7 @@ export function PodFileBrowser({
|
|||||||
await kubernetesApi.uploadPodFile(clusterCode, namespace, podName, currentPath, file, container || undefined);
|
await kubernetesApi.uploadPodFile(clusterCode, namespace, podName, currentPath, file, container || undefined);
|
||||||
loadFiles(currentPath);
|
loadFiles(currentPath);
|
||||||
} catch (err: any) {
|
} catch (err: any) {
|
||||||
setError(`上传失败: ${err.message}`);
|
setError(`上传失败: ${(err as Record<string, any>).message}`);
|
||||||
} finally {
|
} finally {
|
||||||
setUploading(false);
|
setUploading(false);
|
||||||
if (fileInputRef.current) fileInputRef.current.value = '';
|
if (fileInputRef.current) fileInputRef.current.value = '';
|
||||||
|
|||||||
@@ -153,7 +153,7 @@ export function PodLogsViewer({
|
|||||||
linesRef.current = [];
|
linesRef.current = [];
|
||||||
setLines([]);
|
setLines([]);
|
||||||
try {
|
try {
|
||||||
const res: any = await kubernetesApi.getPodLogsEnhanced(clusterCode, namespace, podName, {
|
const res: Record<string, any> = await kubernetesApi.getPodLogsEnhanced(clusterCode, namespace, podName, {
|
||||||
container: container || undefined,
|
container: container || undefined,
|
||||||
tailLines: tailLines,
|
tailLines: tailLines,
|
||||||
previous,
|
previous,
|
||||||
|
|||||||
@@ -3,7 +3,6 @@ import { useParams, useNavigate, Link } from 'react-router-dom';
|
|||||||
import { Card, CardContent } from '@/components/ui/card';
|
import { Card, CardContent } from '@/components/ui/card';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
||||||
import {
|
import {
|
||||||
Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
|
Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
|
||||||
} from '@/components/ui/select';
|
} from '@/components/ui/select';
|
||||||
@@ -47,7 +46,7 @@ export default function PodMetricsPage() {
|
|||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const ns = selectedNs === 'all' ? undefined : selectedNs;
|
const ns = selectedNs === 'all' ? undefined : selectedNs;
|
||||||
const res: any = await kubernetesApi.getPodMetrics(activeCluster, ns);
|
const res: Record<string, any> = await kubernetesApi.getPodMetrics(activeCluster, ns);
|
||||||
setMetrics(Array.isArray(res) ? res : (res?.list || []));
|
setMetrics(Array.isArray(res) ? res : (res?.list || []));
|
||||||
} catch { setMetrics([]); } finally { setLoading(false); }
|
} catch { setMetrics([]); } finally { setLoading(false); }
|
||||||
}, [activeCluster, selectedNs]);
|
}, [activeCluster, selectedNs]);
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
// 替代纯 YAML 编辑，提供表单式交互体验
|
// 替代纯 YAML 编辑，提供表单式交互体验
|
||||||
// 作者: Logan <admin@attacker.club>
|
// 作者: Logan <admin@attacker.club>
|
||||||
import { useState, useEffect, useCallback } from 'react';
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
import { X, Save, RefreshCw, Loader2, Plus, Trash2, FileText, Network, Shield, Database, ChevronRight } from 'lucide-react';
|
import { X, Save, Loader2, Plus, Trash2, FileText, Network, Shield, Database, ChevronRight} from 'lucide-react';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
@@ -61,7 +61,7 @@ export function ResourceVisualEditor({ clusterCode, namespace, resource, name, o
|
|||||||
toast({ title: '可视化编辑不可用', description: '无法解析资源结构，已切换到 YAML 编辑模式' });
|
toast({ title: '可视化编辑不可用', description: '无法解析资源结构，已切换到 YAML 编辑模式' });
|
||||||
}
|
}
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
toast({ title: '加载失败', description: e.message, variant: 'destructive' });
|
toast({ title: '加载失败', description: (e as Record<string, any>).message, variant: 'destructive' });
|
||||||
} finally { setLoading(false); }
|
} finally { setLoading(false); }
|
||||||
}, [clusterCode, namespace, resource, name]);
|
}, [clusterCode, namespace, resource, name]);
|
||||||
|
|
||||||
@@ -77,7 +77,7 @@ export function ResourceVisualEditor({ clusterCode, namespace, resource, name, o
|
|||||||
onSaved?.();
|
onSaved?.();
|
||||||
onClose();
|
onClose();
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
toast({ title: '保存失败', description: e.message, variant: 'destructive' });
|
toast({ title: '保存失败', description: (e as Record<string, any>).message, variant: 'destructive' });
|
||||||
} finally { setSaving(false); }
|
} finally { setSaving(false); }
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -89,7 +89,7 @@ export function ResourceVisualEditor({ clusterCode, namespace, resource, name, o
|
|||||||
onSaved?.();
|
onSaved?.();
|
||||||
onClose();
|
onClose();
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
toast({ title: '保存失败', description: e.message, variant: 'destructive' });
|
toast({ title: '保存失败', description: (e as Record<string, any>).message, variant: 'destructive' });
|
||||||
} finally { setSaving(false); }
|
} finally { setSaving(false); }
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -386,10 +386,10 @@ function ServiceEditor({ manifest, onSave, saving }: { manifest: any; onSave: (m
|
|||||||
const removeSelector = (i: number) => setSelector(selector.filter((_, idx) => idx !== i));
|
const removeSelector = (i: number) => setSelector(selector.filter((_, idx) => idx !== i));
|
||||||
|
|
||||||
const handleSave = () => {
|
const handleSave = () => {
|
||||||
const newSpec: any = { ...spec };
|
const newSpec: Record<string, any> = { ...spec };
|
||||||
newSpec.type = svcType;
|
newSpec.type = svcType;
|
||||||
newSpec.ports = ports.map(p => {
|
newSpec.ports = ports.map(p => {
|
||||||
const port: any = {
|
const port: Record<string, any> = {
|
||||||
port: parseInt(p.port) || 80,
|
port: parseInt(p.port) || 80,
|
||||||
targetPort: parseInt(p.targetPort) || parseInt(p.port) || 80,
|
targetPort: parseInt(p.targetPort) || parseInt(p.port) || 80,
|
||||||
protocol: p.protocol,
|
protocol: p.protocol,
|
||||||
|
|||||||
@@ -42,7 +42,7 @@ export function TopologyView() {
|
|||||||
const [editMode, setEditMode] = useState(false);
|
const [editMode, setEditMode] = useState(false);
|
||||||
const [connectMode, setConnectMode] = useState(false);
|
const [connectMode, setConnectMode] = useState(false);
|
||||||
const [connectSource, setConnectSource] = useState<string | null>(null);
|
const [connectSource, setConnectSource] = useState<string | null>(null);
|
||||||
const [savedLayout, setSavedLayout] = useState<TopologyLayoutData | null>(null);
|
const [, setSavedLayout] = useState<TopologyLayoutData | null>(null);
|
||||||
const [saving, setSaving] = useState(false);
|
const [saving, setSaving] = useState(false);
|
||||||
const [customIdCounter, setCustomIdCounter] = useState(1);
|
const [customIdCounter, setCustomIdCounter] = useState(1);
|
||||||
// 编辑节点 Dialog
|
// 编辑节点 Dialog
|
||||||
@@ -52,7 +52,7 @@ export function TopologyView() {
|
|||||||
|
|
||||||
const loadClusters = useCallback(async () => {
|
const loadClusters = useCallback(async () => {
|
||||||
try {
|
try {
|
||||||
const res: any = await kubernetesApi.getClusters();
|
const res: Record<string, any> = await kubernetesApi.getClusters();
|
||||||
const list = res?.list || [];
|
const list = res?.list || [];
|
||||||
setClusters(list);
|
setClusters(list);
|
||||||
// Auto-select from URL param (clusterCode) if provided, otherwise first cluster
|
// Auto-select from URL param (clusterCode) if provided, otherwise first cluster
|
||||||
@@ -72,8 +72,8 @@ export function TopologyView() {
|
|||||||
// 加载已保存的布局 // Logan.Li
|
// 加载已保存的布局 // Logan.Li
|
||||||
const loadSavedLayout = useCallback(async (clusterId: string) => {
|
const loadSavedLayout = useCallback(async (clusterId: string) => {
|
||||||
try {
|
try {
|
||||||
const res: any = await kubernetesApi.getTopology(clusterId);
|
const res: Record<string, any> = await kubernetesApi.getTopology(clusterId);
|
||||||
const layout = res as any;
|
const layout = res as Record<string, any>;
|
||||||
if (layout?.layout_data) {
|
if (layout?.layout_data) {
|
||||||
const data = JSON.parse(layout.layout_data) as TopologyLayoutData;
|
const data = JSON.parse(layout.layout_data) as TopologyLayoutData;
|
||||||
setSavedLayout(data);
|
setSavedLayout(data);
|
||||||
@@ -196,7 +196,7 @@ export function TopologyView() {
|
|||||||
|
|
||||||
const handleEditNode = (node: TopologyNode) => {
|
const handleEditNode = (node: TopologyNode) => {
|
||||||
setEditingNode(node);
|
setEditingNode(node);
|
||||||
setEditForm({ name: node.name, type: node.type, note: (node.data as any)?.note || '' });
|
setEditForm({ name: node.name, type: node.type, note: (node.data as Record<string, any>)?.note || '' });
|
||||||
setEditDialogOpen(true);
|
setEditDialogOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -83,7 +83,7 @@ export default function WorkloadViewPage() {
|
|||||||
kubernetesApi.getPods(clusterCode).catch(() => []),
|
kubernetesApi.getPods(clusterCode).catch(() => []),
|
||||||
]);
|
]);
|
||||||
// yamlRes is raw YAML text — try to parse as JSON (K8s API accepts JSON as YAML superset)
|
// yamlRes is raw YAML text — try to parse as JSON (K8s API accepts JSON as YAML superset)
|
||||||
let parsed: any = null;
|
let parsed: Record<string, any> = null;
|
||||||
if (yamlRes && typeof yamlRes === 'string') {
|
if (yamlRes && typeof yamlRes === 'string') {
|
||||||
try { parsed = JSON.parse(yamlRes); } catch { parsed = { _raw: yamlRes }; }
|
try { parsed = JSON.parse(yamlRes); } catch { parsed = { _raw: yamlRes }; }
|
||||||
} else if (yamlRes && typeof yamlRes === 'object') {
|
} else if (yamlRes && typeof yamlRes === 'object') {
|
||||||
@@ -144,8 +144,8 @@ export default function WorkloadViewPage() {
|
|||||||
// Parse status from manifest
|
// Parse status from manifest
|
||||||
const spec = manifest?.spec || {};
|
const spec = manifest?.spec || {};
|
||||||
const status = manifest?.status || {};
|
const status = manifest?.status || {};
|
||||||
const containers: any[] = spec?.template?.spec?.containers || [];
|
const containers: Record<string, any>[] = spec?.template?.spec?.containers || [];
|
||||||
const initContainers: any[] = spec?.template?.spec?.initContainers || [];
|
const initContainers: Record<string, any>[] = spec?.template?.spec?.initContainers || [];
|
||||||
|
|
||||||
// For StatefulSet
|
// For StatefulSet
|
||||||
const replicas = spec.replicas ?? 1;
|
const replicas = spec.replicas ?? 1;
|
||||||
@@ -170,7 +170,7 @@ export default function WorkloadViewPage() {
|
|||||||
const strategyType = updateStrategy.type || (isSts ? 'RollingUpdate' : 'RollingUpdate');
|
const strategyType = updateStrategy.type || (isSts ? 'RollingUpdate' : 'RollingUpdate');
|
||||||
|
|
||||||
// VolumeClaimTemplates (StatefulSet only)
|
// VolumeClaimTemplates (StatefulSet only)
|
||||||
const vcts: any[] = spec.volumeClaimTemplates || [];
|
const vcts: Record<string, any>[] = spec.volumeClaimTemplates || [];
|
||||||
|
|
||||||
// Selector
|
// Selector
|
||||||
const selectorLabels = spec.selector?.matchLabels || {};
|
const selectorLabels = spec.selector?.matchLabels || {};
|
||||||
@@ -346,7 +346,7 @@ export default function WorkloadViewPage() {
|
|||||||
<div>
|
<div>
|
||||||
<p className="text-slate-500 mb-1.5">Annotations</p>
|
<p className="text-slate-500 mb-1.5">Annotations</p>
|
||||||
<div className="flex flex-wrap gap-1.5">
|
<div className="flex flex-wrap gap-1.5">
|
||||||
{Object.entries(annotations).slice(0, 8).map(([k, v]) => (
|
{Object.entries(annotations).slice(0, 8).map(([k, _v]) => (
|
||||||
<Badge key={k} variant="outline" className="border-slate-700 text-slate-500 text-[10px] font-mono max-w-[300px] truncate">
|
<Badge key={k} variant="outline" className="border-slate-700 text-slate-500 text-[10px] font-mono max-w-[300px] truncate">
|
||||||
{k}
|
{k}
|
||||||
</Badge>
|
</Badge>
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
// YamlViewer.tsx — YAML 查看/编辑器（CodeMirror 6 语法高亮）
|
// YamlViewer.tsx — YAML 查看/编辑器（CodeMirror 6 语法高亮）
|
||||||
// 支持：语法高亮 + 行号 + 基本校验 + 编辑/保存 + 只读字段清理
|
// 支持：语法高亮 + 行号 + 基本校验 + 编辑/保存 + 只读字段清理
|
||||||
// 作者: Logan <admin@attacker.club>
|
// 作者: Logan <admin@attacker.club>
|
||||||
import { useState, useEffect, useMemo, useCallback } from 'react';
|
import { useState, useEffect, useMemo} from 'react';
|
||||||
import { X, Copy, Check, Save, RefreshCw, Loader2, Sparkles } from 'lucide-react';
|
import { X, Copy, Check, Save, Loader2, Sparkles} from 'lucide-react';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { useToast } from '@/hooks/use-toast';
|
import { useToast } from '@/hooks/use-toast';
|
||||||
import { kubernetesApi } from '@/services/api';
|
import { kubernetesApi } from '@/services/api';
|
||||||
@@ -53,7 +53,7 @@ export function YamlViewer({ clusterCode, namespace, resource, name, onClose, on
|
|||||||
setRawYaml(text);
|
setRawYaml(text);
|
||||||
setEditYaml(effectiveClean ? cleanYAML(text) : text);
|
setEditYaml(effectiveClean ? cleanYAML(text) : text);
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
toast({ title: '获取YAML失败', description: e.message, variant: 'destructive' });
|
toast({ title: '获取YAML失败', description: (e as Record<string, any>).message, variant: 'destructive' });
|
||||||
const err = `# Error: ${e.message}`;
|
const err = `# Error: ${e.message}`;
|
||||||
setRawYaml(err);
|
setRawYaml(err);
|
||||||
setEditYaml(err);
|
setEditYaml(err);
|
||||||
@@ -82,7 +82,7 @@ export function YamlViewer({ clusterCode, namespace, resource, name, onClose, on
|
|||||||
setRawYaml(editYaml);
|
setRawYaml(editYaml);
|
||||||
onSaved?.();
|
onSaved?.();
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
toast({ title: '保存失败', description: e.message, variant: 'destructive' });
|
toast({ title: '保存失败', description: (e as Record<string, any>).message, variant: 'destructive' });
|
||||||
} finally { setSaving(false); }
|
} finally { setSaving(false); }
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -61,8 +61,8 @@ export function cleanYAML(yaml: string): string {
|
|||||||
let inInitContainers = false;
|
let inInitContainers = false;
|
||||||
let inVolumeMounts = false;
|
let inVolumeMounts = false;
|
||||||
let inVolumes = false;
|
let inVolumes = false;
|
||||||
let metadataIndent = 0;
|
let _metadataIndent = 0;
|
||||||
let specIndent = 0;
|
let _specIndent = 0;
|
||||||
let templateSpecIndent = 0;
|
let templateSpecIndent = 0;
|
||||||
|
|
||||||
function getIndent(line: string): number {
|
function getIndent(line: string): number {
|
||||||
@@ -99,7 +99,7 @@ export function cleanYAML(yaml: string): string {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 检查 volumeMount 是否指向系统挂载路径
|
// 检查 volumeMount 是否指向系统挂载路径
|
||||||
function isSystemMountLine(line: string): boolean {
|
function _isSystemMountLine(line: string): boolean {
|
||||||
return SYSTEM_MOUNT_PATHS.some(p => line.includes(`mountPath: ${p}`));
|
return SYSTEM_MOUNT_PATHS.some(p => line.includes(`mountPath: ${p}`));
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -125,7 +125,7 @@ export function cleanYAML(yaml: string): string {
|
|||||||
// === 顶层 metadata: 跟踪作用域 ===
|
// === 顶层 metadata: 跟踪作用域 ===
|
||||||
if (indent === 0 && key === 'metadata') {
|
if (indent === 0 && key === 'metadata') {
|
||||||
inMetadata = true;
|
inMetadata = true;
|
||||||
metadataIndent = 0;
|
_metadataIndent = 0;
|
||||||
out.push(line);
|
out.push(line);
|
||||||
i++;
|
i++;
|
||||||
continue;
|
continue;
|
||||||
@@ -138,7 +138,7 @@ export function cleanYAML(yaml: string): string {
|
|||||||
// === 顶层 spec: 跟踪作用域 ===
|
// === 顶层 spec: 跟踪作用域 ===
|
||||||
if (indent === 0 && key === 'spec') {
|
if (indent === 0 && key === 'spec') {
|
||||||
inSpec = true;
|
inSpec = true;
|
||||||
specIndent = 0;
|
_specIndent = 0;
|
||||||
out.push(line);
|
out.push(line);
|
||||||
i++;
|
i++;
|
||||||
continue;
|
continue;
|
||||||
|
|||||||
@@ -59,12 +59,7 @@ export function getNodeColor(type: string) {
|
|||||||
* buildTopology — 从真实 K8s 资源构建分层拓扑图
|
* buildTopology — 从真实 K8s 资源构建分层拓扑图
|
||||||
* 层级: Cluster → Ingress → Service → Deployment → Node
|
* 层级: Cluster → Ingress → Service → Deployment → Node
|
||||||
*/
|
*/
|
||||||
export function buildTopology(
|
export function buildTopology( cluster: any, ingresses: any[], services: any[], deployments: any[], nodes: any[],
|
||||||
cluster: any,
|
|
||||||
ingresses: any[],
|
|
||||||
services: any[],
|
|
||||||
deployments: any[],
|
|
||||||
nodes: any[],
|
|
||||||
): { nodes: TopologyNode[]; edges: TopologyEdge[] } {
|
): { nodes: TopologyNode[]; edges: TopologyEdge[] } {
|
||||||
const tNodes: TopologyNode[] = [];
|
const tNodes: TopologyNode[] = [];
|
||||||
const tEdges: TopologyEdge[] = [];
|
const tEdges: TopologyEdge[] = [];
|
||||||
@@ -133,7 +128,7 @@ export function buildTopology(
|
|||||||
if (svcCap.length > 0 && depCap.length > 0) {
|
if (svcCap.length > 0 && depCap.length > 0) {
|
||||||
svcCap.forEach((svc) => {
|
svcCap.forEach((svc) => {
|
||||||
const svcNodeId = `service-${svc.id}`;
|
const svcNodeId = `service-${svc.id}`;
|
||||||
let matched: any[] = [];
|
let matched: Record<string, unknown>[] = [];
|
||||||
try {
|
try {
|
||||||
const selector = typeof svc.selector === 'string' ? JSON.parse(svc.selector || '{}') : (svc.selector || {});
|
const selector = typeof svc.selector === 'string' ? JSON.parse(svc.selector || '{}') : (svc.selector || {});
|
||||||
const selectorEntries = Object.entries(selector);
|
const selectorEntries = Object.entries(selector);
|
||||||
|
|||||||
@@ -26,15 +26,13 @@ import {
|
|||||||
CheckCircle,
|
CheckCircle,
|
||||||
Palette,
|
Palette,
|
||||||
Check,
|
Check,
|
||||||
X,
|
|
||||||
Keyboard,
|
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { formatDistanceToNow } from '@/lib/utils';
|
import { formatDistanceToNow } from '@/lib/utils';
|
||||||
import { useTheme, THEME_OPTIONS } from '@/hooks/useTheme';
|
import { useTheme, THEME_OPTIONS } from '@/hooks/useTheme';
|
||||||
|
|
||||||
// Keyboard shortcut handler
|
// Keyboard shortcut handler
|
||||||
function useKeyboardShortcuts() {
|
function useKeyboardShortcuts() {
|
||||||
const navigate = useNavigate();
|
const _navigate = useNavigate();
|
||||||
const [searchOpen, setSearchOpen] = useState(false);
|
const [searchOpen, setSearchOpen] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -67,7 +65,7 @@ export function Header() {
|
|||||||
const [searchValue, setSearchValue] = useState('');
|
const [searchValue, setSearchValue] = useState('');
|
||||||
const [searchFocused, setSearchFocused] = useState(false);
|
const [searchFocused, setSearchFocused] = useState(false);
|
||||||
const searchInputRef = useRef<HTMLInputElement>(null);
|
const searchInputRef = useRef<HTMLInputElement>(null);
|
||||||
const { searchOpen, setSearchOpen } = useKeyboardShortcuts();
|
useKeyboardShortcuts();
|
||||||
|
|
||||||
const handleLogout = () => {
|
const handleLogout = () => {
|
||||||
logout();
|
logout();
|
||||||
|
|||||||
@@ -1,15 +1,42 @@
|
|||||||
import { useState, useEffect } from 'react';
|
import { useEffect} from 'react';
|
||||||
import { NavLink, useLocation } from 'react-router-dom';
|
import { NavLink, useLocation } from 'react-router-dom';
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import { useThemeStore, useMenuStore } from '@/store';
|
import { useThemeStore, useMenuStore } from '@/store';
|
||||||
import {
|
import {
|
||||||
LayoutDashboard, Server, Cloud, Bell, Monitor,
|
|
||||||
CheckSquare, PlayCircle, Settings, ChevronDown, ChevronRight,
|
LayoutDashboard,
|
||||||
Terminal, Cpu, Database, FileCode, Shield, Users,
|
Server,
|
||||||
Menu, Network, CloudCog, Globe, MapPin, Key,
|
Cloud,
|
||||||
Brain, Activity, BarChart3, GitBranch,
|
Bell,
|
||||||
Bot, AlertTriangle, Container, Boxes, Clock, Rocket,
|
Monitor,
|
||||||
|
CheckSquare,
|
||||||
|
PlayCircle,
|
||||||
|
Settings,
|
||||||
|
ChevronDown,
|
||||||
|
Terminal,
|
||||||
|
Cpu,
|
||||||
|
Database,
|
||||||
|
FileCode,
|
||||||
|
Shield,
|
||||||
|
Users,
|
||||||
|
Menu,
|
||||||
|
Network,
|
||||||
|
CloudCog,
|
||||||
|
Globe,
|
||||||
|
MapPin,
|
||||||
|
Key,
|
||||||
|
Brain,
|
||||||
|
Activity,
|
||||||
|
BarChart3,
|
||||||
|
GitBranch,
|
||||||
|
Bot,
|
||||||
|
AlertTriangle,
|
||||||
|
Container,
|
||||||
|
Boxes,
|
||||||
|
Clock,
|
||||||
|
Rocket,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
|
||||||
|
|||||||
@@ -36,9 +36,9 @@ export function AlertManager() {
|
|||||||
alertApi.getRules(),
|
alertApi.getRules(),
|
||||||
alertApi.getNotifyChannels(),
|
alertApi.getNotifyChannels(),
|
||||||
]);
|
]);
|
||||||
setAlerts((alertsData as any)?.list || []);
|
setAlerts((alertsData as Record<string, any>)?.list || []);
|
||||||
setRules((rulesData as any)?.list || (Array.isArray(rulesData) ? rulesData : []));
|
setRules((rulesData as Record<string, any>)?.list || (Array.isArray(rulesData) ? rulesData : []));
|
||||||
setNotifyChannels((channelsData as any)?.list || []);
|
setNotifyChannels((channelsData as Record<string, any>)?.list || []);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Failed to load alert data:', error);
|
console.error('Failed to load alert data:', error);
|
||||||
} finally {
|
} finally {
|
||||||
|
|||||||
@@ -72,7 +72,7 @@ const AlertCenter: React.FC = () => {
|
|||||||
const fetchAlerts = async () => {
|
const fetchAlerts = async () => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const res: any = await alertCenterApi.getAlerts({
|
const res: Record<string, any> = await alertCenterApi.getAlerts({
|
||||||
page,
|
page,
|
||||||
page_size: pageSize,
|
page_size: pageSize,
|
||||||
severity: severityFilter !== 'all' ? severityFilter : undefined,
|
severity: severityFilter !== 'all' ? severityFilter : undefined,
|
||||||
@@ -117,14 +117,14 @@ const AlertCenter: React.FC = () => {
|
|||||||
|
|
||||||
const fetchContacts = async () => {
|
const fetchContacts = async () => {
|
||||||
try {
|
try {
|
||||||
const res: any = await alertApi.getContacts();
|
const res: Record<string, any> = await alertApi.getContacts();
|
||||||
setContacts((res?.data?.list || res?.list || []) as Contact[]);
|
setContacts((res?.data?.list || res?.list || []) as Contact[]);
|
||||||
} catch { /* silent */ }
|
} catch { /* silent */ }
|
||||||
};
|
};
|
||||||
|
|
||||||
const fetchContactGroups = async () => {
|
const fetchContactGroups = async () => {
|
||||||
try {
|
try {
|
||||||
const res: any = await alertApi.getContactGroups();
|
const res: Record<string, any> = await alertApi.getContactGroups();
|
||||||
setContactGroups((res?.data?.list || res?.list || []) as ContactGroup[]);
|
setContactGroups((res?.data?.list || res?.list || []) as ContactGroup[]);
|
||||||
} catch { /* silent */ }
|
} catch { /* silent */ }
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -24,7 +24,7 @@ export const AlertChannelsTab: React.FC<{ refreshKey: number }> = ({ refreshKey
|
|||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const res = await alertApi.getNotifyChannels();
|
const res = await alertApi.getNotifyChannels();
|
||||||
const list = (res as any)?.list || [];
|
const list = (res as Record<string, any>)?.list || [];
|
||||||
setChannels(list);
|
setChannels(list);
|
||||||
} catch {
|
} catch {
|
||||||
toast.error('获取通知渠道失败');
|
toast.error('获取通知渠道失败');
|
||||||
@@ -60,7 +60,7 @@ export const AlertChannelsTab: React.FC<{ refreshKey: number }> = ({ refreshKey
|
|||||||
const handleTest = async (id: number) => {
|
const handleTest = async (id: number) => {
|
||||||
try {
|
try {
|
||||||
const res = await alertApi.testNotifyChannel(id);
|
const res = await alertApi.testNotifyChannel(id);
|
||||||
const status = (res as any)?.status;
|
const status = (res as Record<string, any>)?.status;
|
||||||
if (status === 'success') {
|
if (status === 'success') {
|
||||||
toast.success('测试通知已发送');
|
toast.success('测试通知已发送');
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@@ -1,10 +1,29 @@
|
|||||||
// 监控大屏 — 标签页切换 Agent / Zabbix / Prometheus + 自定义仪表盘 // Logan.Li
|
// 监控大屏 — 标签页切换 Agent / Zabbix / Prometheus + 自定义仪表盘 // Logan.Li
|
||||||
import React, { useState, useEffect, useMemo } from 'react';
|
import React, { useState, useEffect, useMemo } from 'react';
|
||||||
import {
|
import {
|
||||||
Monitor, Plus, RefreshCw, Maximize2, Minimize2, BarChart3, Clock,
|
|
||||||
Server, Activity, Database, Wifi, WifiOff, ArrowUpDown, ArrowUp, ArrowDown,
|
Monitor,
|
||||||
ExternalLink, Download, Rocket, PackageOpen, Loader2, Info, Trash2
|
Plus,
|
||||||
|
RefreshCw,
|
||||||
|
Maximize2,
|
||||||
|
Minimize2,
|
||||||
|
BarChart3,
|
||||||
|
Server,
|
||||||
|
Activity,
|
||||||
|
Database,
|
||||||
|
Wifi,
|
||||||
|
WifiOff,
|
||||||
|
ArrowUpDown,
|
||||||
|
ArrowUp,
|
||||||
|
ArrowDown,
|
||||||
|
ExternalLink,
|
||||||
|
Rocket,
|
||||||
|
PackageOpen,
|
||||||
|
Loader2,
|
||||||
|
Info,
|
||||||
|
Trash2,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
@@ -80,7 +99,7 @@ const AgentTab: React.FC = () => {
|
|||||||
const toggle = (f: SortField) => { if (sf === f) setSd(d => d === 'asc' ? 'desc' : 'asc'); else { setSf(f); setSd('desc'); } };
|
const toggle = (f: SortField) => { if (sf === f) setSd(d => d === 'asc' ? 'desc' : 'asc'); else { setSf(f); setSd('desc'); } };
|
||||||
const sorted = [...hosts].sort((a, b) => {
|
const sorted = [...hosts].sort((a, b) => {
|
||||||
let va: any = (a as any)[sf] ?? '', vb: any = (b as any)[sf] ?? '';
|
let va: any = (a as any)[sf] ?? '', vb: any = (b as any)[sf] ?? '';
|
||||||
if (sf === 'agent_status') { va = a.agent_status || ''; vb = b.agent_status || ''; }
|
if (sf === 'agent_status') { va = (a as any).agent_status || ''; vb = (b as any).agent_status || ''; }
|
||||||
if (typeof va === 'number') return sd === 'asc' ? va - vb : vb - va;
|
if (typeof va === 'number') return sd === 'asc' ? va - vb : vb - va;
|
||||||
return sd === 'asc' ? String(va).localeCompare(String(vb)) : String(vb).localeCompare(String(va));
|
return sd === 'asc' ? String(va).localeCompare(String(vb)) : String(vb).localeCompare(String(va));
|
||||||
});
|
});
|
||||||
@@ -152,7 +171,7 @@ const AgentTab: React.FC = () => {
|
|||||||
<div className="flex-1" />
|
<div className="flex-1" />
|
||||||
<Button size="sm" variant="outline" className="h-7 text-xs gap-1" onClick={() => {
|
<Button size="sm" variant="outline" className="h-7 text-xs gap-1" onClick={() => {
|
||||||
const picked = selAny ? hosts.find(h => selected.has(String(h.server_id))) : null;
|
const picked = selAny ? hosts.find(h => selected.has(String(h.server_id))) : null;
|
||||||
setWizardServer(picked ? { id: picked.server_id, hostname: picked.hostname, ip: picked.ip, has_auth: (picked as any).has_auth } : null);
|
setWizardServer(picked ? { id: picked.server_id, hostname: picked.hostname, ip: picked.ip, has_auth: (picked as Record<string, any>).has_auth } : null);
|
||||||
setWizardOpen(true);
|
setWizardOpen(true);
|
||||||
}}>
|
}}>
|
||||||
<Rocket className="w-3 h-3" />安装 Agent
|
<Rocket className="w-3 h-3" />安装 Agent
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import { TrendingUp } from 'lucide-react';
|
|||||||
import type { Panel } from './GrafanaDashboard';
|
import type { Panel } from './GrafanaDashboard';
|
||||||
|
|
||||||
/** 模拟图表数据 */
|
/** 模拟图表数据 */
|
||||||
function generateChartData(panel: Panel) {
|
function generateChartData(_panel: Panel) {
|
||||||
const dataPoints = 24;
|
const dataPoints = 24;
|
||||||
const data = [];
|
const data = [];
|
||||||
for (let i = 0; i < dataPoints; i++) {
|
for (let i = 0; i < dataPoints; i++) {
|
||||||
|
|||||||
@@ -3,10 +3,24 @@
|
|||||||
import { useState, useEffect, useCallback } from 'react';
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import {
|
import {
|
||||||
Server, Cpu, HardDrive, Activity, Monitor, Bell,
|
|
||||||
ArrowUpDown, ArrowUp, ArrowDown, RefreshCw, Search,
|
Server,
|
||||||
ChevronLeft, ChevronRight, Zap, AlertTriangle, Wifi, WifiOff
|
Cpu,
|
||||||
|
HardDrive,
|
||||||
|
Activity,
|
||||||
|
Monitor,
|
||||||
|
Bell,
|
||||||
|
ArrowUpDown,
|
||||||
|
ArrowUp,
|
||||||
|
ArrowDown,
|
||||||
|
RefreshCw,
|
||||||
|
Search,
|
||||||
|
ChevronLeft,
|
||||||
|
ChevronRight,
|
||||||
|
Wifi,
|
||||||
|
WifiOff,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
@@ -53,16 +67,16 @@ export default function HostMonitorDashboard() {
|
|||||||
if (isRefresh) setRefreshing(true);
|
if (isRefresh) setRefreshing(true);
|
||||||
else setLoading(true);
|
else setLoading(true);
|
||||||
try {
|
try {
|
||||||
const params: any = { page, page_size: pageSize };
|
const params: Record<string, any> = { page, page_size: pageSize };
|
||||||
if (search.trim()) params.keyword = search.trim();
|
if (search.trim()) params.keyword = search.trim();
|
||||||
const res = await serverApi.getServers(params);
|
const res = await serverApi.getServers(params);
|
||||||
const list = (res as any)?.list || [];
|
const list = (res as Record<string, any>)?.list || [];
|
||||||
setHosts(list);
|
setHosts(list);
|
||||||
setTotal((res as any)?.total || 0);
|
setTotal((res as Record<string, any>)?.total || 0);
|
||||||
|
|
||||||
// 统计
|
// 统计
|
||||||
const online = list.filter(( h: any) => h.agent_status === 'online').length;
|
const online = list.filter(( h: any) => h.agent_status === 'online').length;
|
||||||
setStats({ online, offline: list.length - online, total: (res as any)?.total || 0 });
|
setStats({ online, offline: list.length - online, total: (res as Record<string, any>)?.total || 0 });
|
||||||
} catch {
|
} catch {
|
||||||
setHosts([]);
|
setHosts([]);
|
||||||
setTotal(0);
|
setTotal(0);
|
||||||
@@ -76,7 +90,7 @@ export default function HostMonitorDashboard() {
|
|||||||
|
|
||||||
// 排序后的数据
|
// 排序后的数据
|
||||||
const sorted = [...hosts].sort(( a: any, b: any) => {
|
const sorted = [...hosts].sort(( a: any, b: any) => {
|
||||||
let va: any, vb: any;
|
let va: Record<string, any>, vb: any;
|
||||||
if (sortField === 'region') {
|
if (sortField === 'region') {
|
||||||
va = (a.region?.name || a.region?.Name || '').toLowerCase();
|
va = (a.region?.name || a.region?.Name || '').toLowerCase();
|
||||||
vb = (b.region?.name || b.region?.Name || '').toLowerCase();
|
vb = (b.region?.name || b.region?.Name || '').toLowerCase();
|
||||||
|
|||||||
@@ -1,11 +1,10 @@
|
|||||||
// Prometheus 数据源面板 — 接受外部配置 // Logan.Li
|
// Prometheus 数据源面板 — 接受外部配置 // Logan.Li
|
||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import { Server, Loader2, Activity, Cpu, RefreshCw, AlertTriangle, Container, Zap, ExternalLink } from 'lucide-react';
|
import { Server, Loader2, Activity, Cpu, RefreshCw, AlertTriangle, Container, Zap} from 'lucide-react';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
import { toast } from 'sonner';
|
|
||||||
import { http } from '@/services/http';
|
import { http } from '@/services/http';
|
||||||
|
|
||||||
interface Props { dsUrl?: string; }
|
interface Props { dsUrl?: string; }
|
||||||
@@ -38,7 +37,7 @@ const fmtBps = (b: number) => {
|
|||||||
|
|
||||||
function parsePrune( result: any[]): any[] {
|
function parsePrune( result: any[]): any[] {
|
||||||
return (result || []).map(( r: any) => {
|
return (result || []).map(( r: any) => {
|
||||||
const m: any = { ...(r.metric || {}) };
|
const m: Record<string, any> = { ...(r.metric || {}) };
|
||||||
if (r.value) m.value = r.value[1];
|
if (r.value) m.value = r.value[1];
|
||||||
return m;
|
return m;
|
||||||
});
|
});
|
||||||
@@ -46,7 +45,7 @@ function parsePrune(result: any[]): any[] {
|
|||||||
|
|
||||||
const Box = ( p: any) => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>;
|
const Box = ( p: any) => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>;
|
||||||
|
|
||||||
const K8sPanel: React.FC<{ d: any }> = ({ d }) => (
|
const K8sPanel: React.FC<{ d: Record<string, any>}> = ({ d }) => (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div className="grid grid-cols-4 gap-3">
|
<div className="grid grid-cols-4 gap-3">
|
||||||
<Card className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)]"><CardContent className="p-3 text-center"><div className="text-2xl font-bold text-purple-400">{d.podCount?.[0]?.value || 0}</div><div className="text-[10px] text-[var(--dg-text-muted)]">Pods</div></CardContent></Card>
|
<Card className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)]"><CardContent className="p-3 text-center"><div className="text-2xl font-bold text-purple-400">{d.podCount?.[0]?.value || 0}</div><div className="text-[10px] text-[var(--dg-text-muted)]">Pods</div></CardContent></Card>
|
||||||
@@ -64,7 +63,7 @@ const K8sPanel: React.FC<{ d: any }> = ({ d }) => (
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
const NodePanel: React.FC<{ d: any }> = ({ d }) => (
|
const NodePanel: React.FC<{ d: Record<string, any>}> = ({ d }) => (
|
||||||
<div className="overflow-x-auto rounded-lg border border-[var(--dg-border)]">
|
<div className="overflow-x-auto rounded-lg border border-[var(--dg-border)]">
|
||||||
<table className="w-full text-xs">
|
<table className="w-full text-xs">
|
||||||
<thead className="bg-[var(--dg-bg-tertiary)]"><tr><th className="px-3 py-2 text-left">节点</th><th className="px-3 py-2 text-left">状态</th><th className="px-3 py-2 text-left">CPU</th><th className="px-3 py-2 text-left">内存</th><th className="px-3 py-2 text-left">磁盘</th><th className="px-3 py-2 text-left">流入</th><th className="px-3 py-2 text-left">流出</th></tr></thead>
|
<thead className="bg-[var(--dg-bg-tertiary)]"><tr><th className="px-3 py-2 text-left">节点</th><th className="px-3 py-2 text-left">状态</th><th className="px-3 py-2 text-left">CPU</th><th className="px-3 py-2 text-left">内存</th><th className="px-3 py-2 text-left">磁盘</th><th className="px-3 py-2 text-left">流入</th><th className="px-3 py-2 text-left">流出</th></tr></thead>
|
||||||
@@ -92,7 +91,7 @@ const NodePanel: React.FC<{ d: any }> = ({ d }) => (
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
const PodPanel: React.FC<{ d: any }> = ({ d }) => (
|
const PodPanel: React.FC<{ d: Record<string, any>}> = ({ d }) => (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div className="grid grid-cols-4 gap-3">
|
<div className="grid grid-cols-4 gap-3">
|
||||||
<Card className="bg-[var(--dg-bg-primary)]"><CardContent className="p-3 text-center"><div className="text-xl font-bold text-emerald-400">{d.running?.[0]?.value||0}</div><div className="text-[10px] text-[var(--dg-text-muted)]">Running</div></CardContent></Card>
|
<Card className="bg-[var(--dg-bg-primary)]"><CardContent className="p-3 text-center"><div className="text-xl font-bold text-emerald-400">{d.running?.[0]?.value||0}</div><div className="text-[10px] text-[var(--dg-text-muted)]">Running</div></CardContent></Card>
|
||||||
@@ -103,7 +102,7 @@ const PodPanel: React.FC<{ d: any }> = ({ d }) => (
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
const JvmPanel: React.FC<{ d: any }> = ({ d }) => {
|
const JvmPanel: React.FC<{ d: Record<string, any>}> = ({ d }) => {
|
||||||
const h = Number(d.heapUsed?.[0]?.value||0);
|
const h = Number(d.heapUsed?.[0]?.value||0);
|
||||||
const uptime = Number(d.uptime?.[0]?.value||0);
|
const uptime = Number(d.uptime?.[0]?.value||0);
|
||||||
return (
|
return (
|
||||||
@@ -135,20 +134,20 @@ export const PrometheusDashboard: React.FC<Props> = ({ dsUrl }) => {
|
|||||||
const doConnect = async (u: string) => {
|
const doConnect = async (u: string) => {
|
||||||
setLoading(true); setError('');
|
setLoading(true); setError('');
|
||||||
try {
|
try {
|
||||||
const data: any = await http.post('/prometheus/connect', { url: u });
|
const data: Record<string, any> = await http.post('/prometheus/connect', { url: u });
|
||||||
setConnected(true); setTargets(data.targets||0);
|
setConnected(true); setTargets(data.targets||0);
|
||||||
loadAll(u);
|
loadAll(u);
|
||||||
} catch (e: any) { setConnected(false); setError(e.message||'连接失败'); }
|
} catch (e: any) { setConnected(false); setError((e as Record<string, any>).message||'连接失败'); }
|
||||||
finally { setLoading(false); }
|
finally { setLoading(false); }
|
||||||
};
|
};
|
||||||
|
|
||||||
const loadAll = async (u: string) => {
|
const loadAll = async (u: string) => {
|
||||||
for (const t of ['kubernetes','node','pod','jvm']) {
|
for (const t of ['kubernetes','node','pod','jvm']) {
|
||||||
try {
|
try {
|
||||||
const data: any = await http.post('/prometheus/dashboard', { url: u, type: t });
|
const data: Record<string, any> = await http.post('/prometheus/dashboard', { url: u, type: t });
|
||||||
const items: any = {};
|
const items: Record<string, any> = {};
|
||||||
for (const [k, v] of Object.entries(data||{}))
|
for (const [k, v] of Object.entries(data||{}))
|
||||||
items[k] = Array.isArray(v) ? v : ((v as any)?.data?.result ? parsePrune((v as any).data.result) : v);
|
items[k] = Array.isArray(v) ? v : ((v as Record<string, any>)?.data?.result ? parsePrune((v as Record<string, any>).data.result) : v);
|
||||||
if (t==='kubernetes') setK8sD(items); if (t==='node') setNodeD(items);
|
if (t==='kubernetes') setK8sD(items); if (t==='node') setNodeD(items);
|
||||||
if (t==='pod') setPodD(items); if (t==='jvm') setJvmD(items);
|
if (t==='pod') setPodD(items); if (t==='jvm') setJvmD(items);
|
||||||
} catch {}
|
} catch {}
|
||||||
|
|||||||
@@ -1,14 +1,21 @@
|
|||||||
// Zabbix 数据源监控面板 — 接受外部配置 // Logan.Li
|
// Zabbix 数据源监控面板 — 接受外部配置 // Logan.Li
|
||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import {
|
import {
|
||||||
Server, Wifi, WifiOff, Loader2, AlertTriangle, Activity,
|
|
||||||
Cpu, HardDrive, Network, Clock, RefreshCw, Plug, Settings,
|
Server,
|
||||||
ArrowUpDown, ArrowUp, ArrowDown, ExternalLink
|
Wifi,
|
||||||
|
Loader2,
|
||||||
|
AlertTriangle,
|
||||||
|
Activity,
|
||||||
|
RefreshCw,
|
||||||
|
ArrowUpDown,
|
||||||
|
ArrowUp,
|
||||||
|
ArrowDown,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
import { toast } from 'sonner';
|
|
||||||
import { http } from '@/services/http';
|
import { http } from '@/services/http';
|
||||||
|
|
||||||
interface ZabbixHost {
|
interface ZabbixHost {
|
||||||
@@ -38,11 +45,11 @@ export const ZabbixDashboard: React.FC<Props> = ({ dsUrl, dsUsername, dsPassword
|
|||||||
const doConnect = async (u: string, un: string, pw: string) => {
|
const doConnect = async (u: string, un: string, pw: string) => {
|
||||||
setLoading(true); setError('');
|
setLoading(true); setError('');
|
||||||
try {
|
try {
|
||||||
const data: any = await http.post('/zabbix/connect', { url: u, username: un, password: pw });
|
const data: Record<string, any> = await http.post('/zabbix/connect', { url: u, username: un, password: pw });
|
||||||
setHosts(data.hosts || []);
|
setHosts(data.hosts || []);
|
||||||
setVersion(data.version || '');
|
setVersion(data.version || '');
|
||||||
setConnected(true);
|
setConnected(true);
|
||||||
} catch (e: any) { setConnected(false); setError(e.message || '连接失败'); }
|
} catch (e: any) { setConnected(false); setError((e as Record<string, any>).message || '连接失败'); }
|
||||||
finally { setLoading(false); }
|
finally { setLoading(false); }
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -52,7 +59,7 @@ export const ZabbixDashboard: React.FC<Props> = ({ dsUrl, dsUsername, dsPassword
|
|||||||
else { setSortField(f); setSortDir('desc'); }
|
else { setSortField(f); setSortDir('desc'); }
|
||||||
};
|
};
|
||||||
const sorted = [...hosts].sort((a, b) => {
|
const sorted = [...hosts].sort((a, b) => {
|
||||||
const va = (a as any)[sortField] ?? '', vb = (b as any)[sortField] ?? '';
|
const va = (a as Record<string, any>)[sortField] ?? '', vb = (b as Record<string, any>)[sortField] ?? '';
|
||||||
if (typeof va === 'number') return sortDir === 'asc' ? va - vb : vb - va;
|
if (typeof va === 'number') return sortDir === 'asc' ? va - vb : vb - va;
|
||||||
return sortDir === 'asc' ? String(va).localeCompare(String(vb)) : String(vb).localeCompare(String(va));
|
return sortDir === 'asc' ? String(va).localeCompare(String(vb)) : String(vb).localeCompare(String(va));
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,17 +1,34 @@
|
|||||||
// Prometheus 数据源管理 — 参考 Grafana 界面设计 // Logan.Li
|
// Prometheus 数据源管理 — 参考 Grafana 界面设计 // Logan.Li
|
||||||
import { useState, useEffect, useCallback } from 'react';
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
import {
|
import {
|
||||||
Database, Plus, Edit, Trash2, Star, RefreshCw, CheckCircle, XCircle,
|
|
||||||
Shield, Globe, Clock, Wrench, Settings, Key, Link, X, ChevronDown, ChevronUp,
|
Database,
|
||||||
Plug, AlertTriangle
|
Plus,
|
||||||
|
Edit,
|
||||||
|
Trash2,
|
||||||
|
Star,
|
||||||
|
RefreshCw,
|
||||||
|
CheckCircle,
|
||||||
|
XCircle,
|
||||||
|
Shield,
|
||||||
|
Globe,
|
||||||
|
Clock,
|
||||||
|
Wrench,
|
||||||
|
Settings,
|
||||||
|
Key,
|
||||||
|
X,
|
||||||
|
ChevronDown,
|
||||||
|
ChevronUp,
|
||||||
|
Plug,
|
||||||
|
AlertTriangle,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
import { Switch } from '@/components/ui/switch';
|
import { Switch } from '@/components/ui/switch';
|
||||||
import { Separator } from '@/components/ui/separator';
|
|
||||||
import {
|
import {
|
||||||
Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter
|
Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter
|
||||||
} from '@/components/ui/dialog';
|
} from '@/components/ui/dialog';
|
||||||
@@ -89,7 +106,7 @@ export default function PrometheusDatasourceManager() {
|
|||||||
const [headers, setHeaders] = useState<HeaderEntry[]>([]);
|
const [headers, setHeaders] = useState<HeaderEntry[]>([]);
|
||||||
// 折叠面板
|
// 折叠面板
|
||||||
const [showAuth, setShowAuth] = useState(false);
|
const [showAuth, setShowAuth] = useState(false);
|
||||||
const [showTLS, setShowTLS] = useState(false);
|
const [, setShowTLS] = useState(false);
|
||||||
const [showAlerting, setShowAlerting] = useState(false);
|
const [showAlerting, setShowAlerting] = useState(false);
|
||||||
const [showMisc, setShowMisc] = useState(false);
|
const [showMisc, setShowMisc] = useState(false);
|
||||||
|
|
||||||
@@ -99,7 +116,7 @@ export default function PrometheusDatasourceManager() {
|
|||||||
|
|
||||||
const fetchList = useCallback(async () => {
|
const fetchList = useCallback(async () => {
|
||||||
try {
|
try {
|
||||||
const res: any = await promDatasourceApi.list();
|
const res: Record<string, any> = await promDatasourceApi.list();
|
||||||
setSources(res?.data || res || []);
|
setSources(res?.data || res || []);
|
||||||
} catch {
|
} catch {
|
||||||
toast.error('获取数据源列表失败');
|
toast.error('获取数据源列表失败');
|
||||||
@@ -187,7 +204,7 @@ export default function PrometheusDatasourceManager() {
|
|||||||
if (!form.name.trim()) { toast.error('请输入数据源名称'); return; }
|
if (!form.name.trim()) { toast.error('请输入数据源名称'); return; }
|
||||||
if (!form.url.trim()) { toast.error('请输入 Prometheus URL'); return; }
|
if (!form.url.trim()) { toast.error('请输入 Prometheus URL'); return; }
|
||||||
|
|
||||||
const payload: any = {
|
const payload: Record<string, any> = {
|
||||||
name: form.name.trim(),
|
name: form.name.trim(),
|
||||||
url: form.url.trim(),
|
url: form.url.trim(),
|
||||||
access: form.access,
|
access: form.access,
|
||||||
@@ -258,7 +275,7 @@ export default function PrometheusDatasourceManager() {
|
|||||||
setTesting(true);
|
setTesting(true);
|
||||||
setTestResult(null);
|
setTestResult(null);
|
||||||
try {
|
try {
|
||||||
const res: any = await promDatasourceApi.testConnection({
|
const res: Record<string, any> = await promDatasourceApi.testConnection({
|
||||||
url: form.url.trim(),
|
url: form.url.trim(),
|
||||||
basic_auth: form.basic_auth,
|
basic_auth: form.basic_auth,
|
||||||
basic_auth_user: form.basic_auth_user,
|
basic_auth_user: form.basic_auth_user,
|
||||||
@@ -810,7 +827,7 @@ export default function PrometheusDatasourceManager() {
|
|||||||
// 快速测试连接（列表中的测试按钮）
|
// 快速测试连接（列表中的测试按钮）
|
||||||
async function handleTestQuick(ds: PromDS) {
|
async function handleTestQuick(ds: PromDS) {
|
||||||
try {
|
try {
|
||||||
const res: any = await promDatasourceApi.testConnection({
|
const res: Record<string, any> = await promDatasourceApi.testConnection({
|
||||||
url: ds.url,
|
url: ds.url,
|
||||||
basic_auth: ds.basic_auth,
|
basic_auth: ds.basic_auth,
|
||||||
basic_auth_user: ds.basic_auth_user,
|
basic_auth_user: ds.basic_auth_user,
|
||||||
|
|||||||
@@ -1,20 +1,33 @@
|
|||||||
// Zabbix 数据源管理 — 参照 Grafana Zabbix 数据源配置界面 // Logan.Li
|
// Zabbix 数据源管理 — 参照 Grafana Zabbix 数据源配置界面 // Logan.Li
|
||||||
import { useState, useEffect, useCallback } from 'react';
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
import {
|
import {
|
||||||
Database, Plus, Trash2, Star, RefreshCw, Plug,
|
|
||||||
Shield, Globe, Settings, Key, ChevronDown, ChevronUp,
|
Database,
|
||||||
Edit, Clock, CheckCircle2, XCircle
|
Plus,
|
||||||
|
Trash2,
|
||||||
|
Star,
|
||||||
|
RefreshCw,
|
||||||
|
Plug,
|
||||||
|
Shield,
|
||||||
|
Globe,
|
||||||
|
Settings,
|
||||||
|
ChevronDown,
|
||||||
|
ChevronUp,
|
||||||
|
Edit,
|
||||||
|
Clock,
|
||||||
|
CheckCircle2,
|
||||||
|
XCircle,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent} from '@/components/ui/card';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
import { Switch } from '@/components/ui/switch';
|
import { Switch } from '@/components/ui/switch';
|
||||||
import {
|
import {
|
||||||
Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter
|
Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter
|
||||||
} from '@/components/ui/dialog';
|
} from '@/components/ui/dialog';
|
||||||
import { Separator } from '@/components/ui/separator';
|
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import { useConfirm } from '@/components/ui/confirm-dialog';
|
import { useConfirm } from '@/components/ui/confirm-dialog';
|
||||||
import { zabbixDatasourceApi } from '@/services/api';
|
import { zabbixDatasourceApi } from '@/services/api';
|
||||||
@@ -61,7 +74,7 @@ export default function ZabbixDatasourceManager() {
|
|||||||
|
|
||||||
const fetchList = useCallback(async () => {
|
const fetchList = useCallback(async () => {
|
||||||
try {
|
try {
|
||||||
const res: any = await zabbixDatasourceApi.list();
|
const res: Record<string, any> = await zabbixDatasourceApi.list();
|
||||||
setSources(res?.data || res || []);
|
setSources(res?.data || res || []);
|
||||||
} catch {
|
} catch {
|
||||||
toast.error('获取数据源列表失败');
|
toast.error('获取数据源列表失败');
|
||||||
@@ -151,7 +164,7 @@ export default function ZabbixDatasourceManager() {
|
|||||||
setTesting(true);
|
setTesting(true);
|
||||||
setTestResult(null);
|
setTestResult(null);
|
||||||
try {
|
try {
|
||||||
const res: any = await zabbixDatasourceApi.testConnection({
|
const res: Record<string, any> = await zabbixDatasourceApi.testConnection({
|
||||||
url: form.url.trim(),
|
url: form.url.trim(),
|
||||||
username: form.username.trim(),
|
username: form.username.trim(),
|
||||||
password: form.password || '',
|
password: form.password || '',
|
||||||
|
|||||||
@@ -1,14 +1,31 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import {
|
import {
|
||||||
Search, Filter, Clock, Server, ArrowRight, ChevronRight, ChevronDown, Activity,
|
|
||||||
Zap, AlertCircle, CheckCircle, XCircle, BarChart3, PieChart, TrendingUp,
|
Search,
|
||||||
Download, RefreshCw, Eye, Maximize2, Minimize2, Target, Layers, GitBranch,
|
Clock,
|
||||||
Cpu, Database, Globe, Code, Box, Container, Settings, Info
|
Server,
|
||||||
|
ArrowRight,
|
||||||
|
ChevronRight,
|
||||||
|
ChevronDown,
|
||||||
|
Activity,
|
||||||
|
Zap,
|
||||||
|
AlertCircle,
|
||||||
|
CheckCircle,
|
||||||
|
XCircle,
|
||||||
|
BarChart3,
|
||||||
|
TrendingUp,
|
||||||
|
RefreshCw,
|
||||||
|
Eye,
|
||||||
|
Layers,
|
||||||
|
GitBranch,
|
||||||
|
Code,
|
||||||
|
Box,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
import { Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
|
||||||
import {
|
import {
|
||||||
Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription
|
Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription
|
||||||
} from '@/components/ui/dialog';
|
} from '@/components/ui/dialog';
|
||||||
@@ -91,7 +108,7 @@ const TraceManager: React.FC = () => {
|
|||||||
try {
|
try {
|
||||||
const res = await traceApi.getTraces({ timeRange, service: serviceFilter, status: statusFilter });
|
const res = await traceApi.getTraces({ timeRange, service: serviceFilter, status: statusFilter });
|
||||||
setTraces(res.data || []);
|
setTraces(res.data || []);
|
||||||
} catch (error) {
|
} catch {
|
||||||
toast.error('获取链路数据失败');
|
toast.error('获取链路数据失败');
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
@@ -102,7 +119,7 @@ const TraceManager: React.FC = () => {
|
|||||||
try {
|
try {
|
||||||
const res = await traceApi.getServices(timeRange);
|
const res = await traceApi.getServices(timeRange);
|
||||||
setServices(res.data || []);
|
setServices(res.data || []);
|
||||||
} catch (error) {
|
} catch {
|
||||||
toast.error('获取服务数据失败');
|
toast.error('获取服务数据失败');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -111,7 +128,7 @@ const TraceManager: React.FC = () => {
|
|||||||
try {
|
try {
|
||||||
const res = await traceApi.getTraceDetail(traceId);
|
const res = await traceApi.getTraceDetail(traceId);
|
||||||
return res.data;
|
return res.data;
|
||||||
} catch (error) {
|
} catch {
|
||||||
toast.error('获取链路详情失败');
|
toast.error('获取链路详情失败');
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
@@ -192,7 +209,7 @@ const TraceManager: React.FC = () => {
|
|||||||
const SpanTreeNode: React.FC<{ span: Span; level: number; totalDuration: number }> = ({ span, level, totalDuration }) => {
|
const SpanTreeNode: React.FC<{ span: Span; level: number; totalDuration: number }> = ({ span, level, totalDuration }) => {
|
||||||
const [expanded, setExpanded] = useState(true);
|
const [expanded, setExpanded] = useState(true);
|
||||||
const widthPercent = totalDuration > 0 ? (span.duration / totalDuration) * 100 : 0;
|
const widthPercent = totalDuration > 0 ? (span.duration / totalDuration) * 100 : 0;
|
||||||
const offsetPercent = 0; // Simplified
|
const _offsetPercent = 0; // Simplified
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="select-none">
|
<div className="select-none">
|
||||||
@@ -536,7 +553,7 @@ const TraceManager: React.FC = () => {
|
|||||||
<span className="w-20 text-right">耗时</span>
|
<span className="w-20 text-right">耗时</span>
|
||||||
</div>
|
</div>
|
||||||
{/* Span树渲染 */}
|
{/* Span树渲染 */}
|
||||||
{(selectedTrace as any).spans && buildSpanTree((selectedTrace as any).spans).map(span => (
|
{(selectedTrace as Record<string, any>).spans && buildSpanTree((selectedTrace as Record<string, any>).spans).map(span => (
|
||||||
<SpanTreeNode key={span.spanId} span={span} level={0} totalDuration={selectedTrace.duration} />
|
<SpanTreeNode key={span.spanId} span={span} level={0} totalDuration={selectedTrace.duration} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -63,7 +63,7 @@ export function CloudServerImport({ open, onClose }: CloudServerImportProps) {
|
|||||||
|
|
||||||
const loadAccounts = async () => {
|
const loadAccounts = async () => {
|
||||||
try {
|
try {
|
||||||
const res: any = await cloudApi.getAccounts();
|
const res: Record<string, any> = await cloudApi.getAccounts();
|
||||||
setCloudAccounts(res?.list || []);
|
setCloudAccounts(res?.list || []);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('加载云账号失败:', e);
|
console.error('加载云账号失败:', e);
|
||||||
@@ -87,7 +87,7 @@ export function CloudServerImport({ open, onClose }: CloudServerImportProps) {
|
|||||||
// ==================== 区域同步逻辑 ====================
|
// ==================== 区域同步逻辑 ====================
|
||||||
const loadRegions = useCallback(async (accountId: string | number) => {
|
const loadRegions = useCallback(async (accountId: string | number) => {
|
||||||
try {
|
try {
|
||||||
const res: any = await cloudApi.getAccountRegions(accountId);
|
const res: Record<string, any> = await cloudApi.getAccountRegions(accountId);
|
||||||
return res?.list || [];
|
return res?.list || [];
|
||||||
} catch {
|
} catch {
|
||||||
return [];
|
return [];
|
||||||
@@ -132,7 +132,7 @@ export function CloudServerImport({ open, onClose }: CloudServerImportProps) {
|
|||||||
setCloudServers([]);
|
setCloudServers([]);
|
||||||
setSelectedServers([]);
|
setSelectedServers([]);
|
||||||
try {
|
try {
|
||||||
const res: any = await cloudApi.discoverInstances(selectedAccount.id, selectedRegions);
|
const res: Record<string, any> = await cloudApi.discoverInstances(selectedAccount.id, selectedRegions);
|
||||||
setCloudServers(res?.list || []);
|
setCloudServers(res?.list || []);
|
||||||
setDiscoverErrors(res?.errors || []);
|
setDiscoverErrors(res?.errors || []);
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
@@ -149,11 +149,11 @@ export function CloudServerImport({ open, onClose }: CloudServerImportProps) {
|
|||||||
setIsImporting(true);
|
setIsImporting(true);
|
||||||
try {
|
try {
|
||||||
const instancesToImport = cloudServers.filter(s => selectedServers.includes(s.instance_id));
|
const instancesToImport = cloudServers.filter(s => selectedServers.includes(s.instance_id));
|
||||||
const res: any = await cloudApi.importInstances(selectedAccount.id, instancesToImport, {
|
const res: Record<string, any> = await cloudApi.importInstances(selectedAccount.id, instancesToImport, {
|
||||||
default_port: Number(defaultSshPort) || 22,
|
default_port: Number(defaultSshPort) || 22,
|
||||||
credential_id: selectedCredentialId ? Number(selectedCredentialId) : undefined,
|
credential_id: selectedCredentialId ? Number(selectedCredentialId) : undefined,
|
||||||
});
|
});
|
||||||
setImportResult(res || { imported: 0, skipped: 0 });
|
setImportResult((res as any) || { imported: 0, skipped: 0 });
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
console.error('导入失败:', e);
|
console.error('导入失败:', e);
|
||||||
} finally {
|
} finally {
|
||||||
|
|||||||
@@ -109,7 +109,7 @@ function downloadTemplate() {
|
|||||||
export function ExcelServerImport({ open, onClose }: ExcelServerImportProps) {
|
export function ExcelServerImport({ open, onClose }: ExcelServerImportProps) {
|
||||||
const [step, setStep] = useState(1);
|
const [step, setStep] = useState(1);
|
||||||
const [selectedRegion, setSelectedRegion] = useState<string>('');
|
const [selectedRegion, setSelectedRegion] = useState<string>('');
|
||||||
const [connectionMethod, setConnectionMethod] = useState<string>('password');
|
const [, _setConnectionMethod] = useState<string>('password');
|
||||||
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
||||||
const [isUploading, setIsUploading] = useState(false);
|
const [isUploading, setIsUploading] = useState(false);
|
||||||
const [previewData, setPreviewData] = useState<PreviewRow[]>([]);
|
const [previewData, setPreviewData] = useState<PreviewRow[]>([]);
|
||||||
@@ -239,7 +239,7 @@ export function ExcelServerImport({ open, onClose }: ExcelServerImportProps) {
|
|||||||
disk: d.disk,
|
disk: d.disk,
|
||||||
tags: d.tags,
|
tags: d.tags,
|
||||||
}));
|
}));
|
||||||
const resp: any = await serverApi.batchCreate({
|
const resp: Record<string, unknown> = await serverApi.batchCreate({
|
||||||
servers,
|
servers,
|
||||||
region_id: selectedRegion || undefined,
|
region_id: selectedRegion || undefined,
|
||||||
credential_id: selectedCredentialId ? Number(selectedCredentialId) : undefined,
|
credential_id: selectedCredentialId ? Number(selectedCredentialId) : undefined,
|
||||||
|
|||||||
@@ -3,7 +3,6 @@ import { cn } from '@/lib/utils';
|
|||||||
import { Card, CardContent } from '@/components/ui/card';
|
import { Card, CardContent } from '@/components/ui/card';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Badge } from '@/components/ui/badge';
|
|
||||||
import { Checkbox } from '@/components/ui/checkbox';
|
import { Checkbox } from '@/components/ui/checkbox';
|
||||||
import {
|
import {
|
||||||
DropdownMenu,
|
DropdownMenu,
|
||||||
@@ -88,10 +87,10 @@ export function ServerManager() {
|
|||||||
setLoading(true);
|
setLoading(true);
|
||||||
const q = kw ?? searchQuery;
|
const q = kw ?? searchQuery;
|
||||||
const s = st ?? statusFilter;
|
const s = st ?? statusFilter;
|
||||||
const params: any = { page, page_size: pageSize };
|
const params: Record<string, any> = { page, page_size: pageSize };
|
||||||
if (q) params.keyword = q;
|
if (q) params.keyword = q;
|
||||||
if (s && s !== 'all') params.status = s;
|
if (s && s !== 'all') params.status = s;
|
||||||
const res: any = await serverApi.getServers(params);
|
const res: Record<string, any> = await serverApi.getServers(params);
|
||||||
setServers(res?.list || []);
|
setServers(res?.list || []);
|
||||||
setTotal(res?.total || 0);
|
setTotal(res?.total || 0);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
@@ -134,7 +133,7 @@ export function ServerManager() {
|
|||||||
wsRef.current = ws;
|
wsRef.current = ws;
|
||||||
|
|
||||||
ws.onopen = () => {
|
ws.onopen = () => {
|
||||||
console.log('[MetricsWS] 已连接，实时接收指标推送');
|
// WebSocket 已连接，静默接收指标推送
|
||||||
};
|
};
|
||||||
|
|
||||||
ws.onmessage = (event) => {
|
ws.onmessage = (event) => {
|
||||||
@@ -163,13 +162,13 @@ export function ServerManager() {
|
|||||||
})
|
})
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch {
|
||||||
// 忽略非 JSON 消息
|
// 忽略非 JSON 消息
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
ws.onclose = () => {
|
ws.onclose = () => {
|
||||||
console.log('[MetricsWS] 连接断开，3 秒后重连');
|
// 连接断开，3 秒后重连
|
||||||
wsRef.current = null;
|
wsRef.current = null;
|
||||||
reconnectTimerRef.current = setTimeout(connect, 3000);
|
reconnectTimerRef.current = setTimeout(connect, 3000);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -38,8 +38,8 @@ export function ServerTableRow({
|
|||||||
const memGB = server.memory ? Math.round(server.memory / 1024) : 0;
|
const memGB = server.memory ? Math.round(server.memory / 1024) : 0;
|
||||||
const tcpEst = server.tcp_established || 0;
|
const tcpEst = server.tcp_established || 0;
|
||||||
const tcpTw = server.tcp_time_wait || 0;
|
const tcpTw = server.tcp_time_wait || 0;
|
||||||
const rxBps = server.net_rx_bps || 0;
|
const _rxBps = server.net_rx_bps || 0;
|
||||||
const txBps = server.net_tx_bps || 0;
|
const _txBps = server.net_tx_bps || 0;
|
||||||
const readBps = server.disk_read_bps || 0;
|
const readBps = server.disk_read_bps || 0;
|
||||||
const writeBps = server.disk_write_bps || 0;
|
const writeBps = server.disk_write_bps || 0;
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ import { Button } from '@/components/ui/button';
|
|||||||
import { Terminal as XTerm } from 'xterm';
|
import { Terminal as XTerm } from 'xterm';
|
||||||
import { FitAddon } from 'xterm-addon-fit';
|
import { FitAddon } from 'xterm-addon-fit';
|
||||||
import 'xterm/css/xterm.css';
|
import 'xterm/css/xterm.css';
|
||||||
import { Maximize2, Minimize2, X, Key, Shield } from 'lucide-react';
|
import { Maximize2, Minimize2, X, Shield} from 'lucide-react';
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import { useUserStore } from '@/store';
|
import { useUserStore } from '@/store';
|
||||||
import { credentialApi, serverCredentialApi } from '@/services/api';
|
import { credentialApi, serverCredentialApi } from '@/services/api';
|
||||||
|
|||||||
@@ -62,7 +62,7 @@ export function WebShell() {
|
|||||||
|
|
||||||
const loadServers = async () => {
|
const loadServers = async () => {
|
||||||
try {
|
try {
|
||||||
const res: any = await serverApi.getServers();
|
const res: Record<string, any> = await serverApi.getServers();
|
||||||
setServers(res?.list || []);
|
setServers(res?.list || []);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('加载服务器列表失败:', e);
|
console.error('加载服务器列表失败:', e);
|
||||||
|
|||||||
@@ -56,7 +56,7 @@ export function CredentialManager() {
|
|||||||
const fetchList = useCallback(async () => {
|
const fetchList = useCallback(async () => {
|
||||||
try {
|
try {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
const res: any = await credentialApi.list();
|
const res: Record<string, any> = await credentialApi.list();
|
||||||
setCredentials(res?.list || []);
|
setCredentials(res?.list || []);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('加载凭据列表失败:', e);
|
console.error('加载凭据列表失败:', e);
|
||||||
@@ -124,7 +124,7 @@ export function CredentialManager() {
|
|||||||
await credentialApi.delete(id);
|
await credentialApi.delete(id);
|
||||||
toast.success('凭据已删除');
|
toast.success('凭据已删除');
|
||||||
fetchList();
|
fetchList();
|
||||||
} catch (e) {
|
} catch {
|
||||||
toast.error('删除失败');
|
toast.error('删除失败');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -146,7 +146,7 @@ export function SystemManager() {
|
|||||||
const handleSubmit = async () => {
|
const handleSubmit = async () => {
|
||||||
setSaving(true);
|
setSaving(true);
|
||||||
try {
|
try {
|
||||||
const payload: any = {
|
const payload: Record<string, unknown> = {
|
||||||
username: form.username,
|
username: form.username,
|
||||||
nickname: form.nickname,
|
nickname: form.nickname,
|
||||||
email: form.email,
|
email: form.email,
|
||||||
@@ -200,7 +200,7 @@ export function SystemManager() {
|
|||||||
const idxRole = headers.findIndex((h) => h.includes('角色') || h.includes('role'));
|
const idxRole = headers.findIndex((h) => h.includes('角色') || h.includes('role'));
|
||||||
const idxPassword = headers.findIndex((h) => h.includes('密码') || h.includes('password'));
|
const idxPassword = headers.findIndex((h) => h.includes('密码') || h.includes('password'));
|
||||||
|
|
||||||
const parsed: any[] = [];
|
const parsed: Record<string, unknown>[] = [];
|
||||||
for (let i = 1; i < lines.length; i++) {
|
for (let i = 1; i < lines.length; i++) {
|
||||||
const cols = lines[i].split(',').map((c) => c.trim());
|
const cols = lines[i].split(',').map((c) => c.trim());
|
||||||
parsed.push({
|
parsed.push({
|
||||||
|
|||||||
@@ -70,7 +70,7 @@ export function SystemRolesTab({ selectedRole, setSelectedRole }: SystemRolesTab
|
|||||||
const resp = await userApi.getRoles();
|
const resp = await userApi.getRoles();
|
||||||
const list = resp?.list ?? [];
|
const list = resp?.list ?? [];
|
||||||
setRoles(list.map(normalizeRole));
|
setRoles(list.map(normalizeRole));
|
||||||
} catch (err) {
|
} catch {
|
||||||
setRoles([]);
|
setRoles([]);
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
|
|||||||
@@ -24,7 +24,7 @@ export interface LdapFormData {
|
|||||||
|
|
||||||
interface SystemSettingsTabProps {
|
interface SystemSettingsTabProps {
|
||||||
// LDAP config
|
// LDAP config
|
||||||
ldapConfig: any;
|
ldapConfig: unknown;
|
||||||
ldapForm: LdapFormData;
|
ldapForm: LdapFormData;
|
||||||
setLdapForm: React.Dispatch<React.SetStateAction<LdapFormData>>;
|
setLdapForm: React.Dispatch<React.SetStateAction<LdapFormData>>;
|
||||||
ldapSaving: boolean;
|
ldapSaving: boolean;
|
||||||
@@ -35,10 +35,10 @@ interface SystemSettingsTabProps {
|
|||||||
// LDAP management - pass-through to LdapManagementSection
|
// LDAP management - pass-through to LdapManagementSection
|
||||||
ldapMgmtOpen: boolean;
|
ldapMgmtOpen: boolean;
|
||||||
setLdapMgmtOpen: (v: boolean) => void;
|
setLdapMgmtOpen: (v: boolean) => void;
|
||||||
ldapOUs: any[];
|
ldapOUs: unknown[];
|
||||||
selectedOUDN: string;
|
selectedOUDN: string;
|
||||||
setSelectedOUDN: (v: string) => void;
|
setSelectedOUDN: (v: string) => void;
|
||||||
ldapUsers: any[];
|
ldapUsers: unknown[];
|
||||||
selectedLDAPUsers: string[];
|
selectedLDAPUsers: string[];
|
||||||
setSelectedLDAPUsers: (v: string[]) => void;
|
setSelectedLDAPUsers: (v: string[]) => void;
|
||||||
loadLdapOUs: () => void;
|
loadLdapOUs: () => void;
|
||||||
@@ -65,7 +65,7 @@ interface SystemSettingsTabProps {
|
|||||||
ldapTestPass: string;
|
ldapTestPass: string;
|
||||||
setLdapTestPass: (v: string) => void;
|
setLdapTestPass: (v: string) => void;
|
||||||
ldapUserTesting: boolean;
|
ldapUserTesting: boolean;
|
||||||
ldapUserTestResult: any;
|
ldapUserTestResult: unknown;
|
||||||
handleLdapUserTest: () => void;
|
handleLdapUserTest: () => void;
|
||||||
editLdapUser: any | null;
|
editLdapUser: any | null;
|
||||||
setEditLdapUser: (u: any | null) => void;
|
setEditLdapUser: (u: any | null) => void;
|
||||||
|
|||||||
@@ -66,7 +66,7 @@ export function TerminalSessionsTab() {
|
|||||||
const fetchSessions = async () => {
|
const fetchSessions = async () => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const resp = await terminalSessionApi.list({ page: 1, page_size: 100 });
|
const resp = await terminalSessionApi.list({ page: 1, page_size: 100 }) as any;
|
||||||
setSessions(resp?.list ?? []);
|
setSessions(resp?.list ?? []);
|
||||||
} catch {
|
} catch {
|
||||||
setSessions([]);
|
setSessions([]);
|
||||||
|
|||||||
@@ -221,7 +221,7 @@ export function useLdapManagement(onUsersChanged: () => Promise<void> | void) {
|
|||||||
|
|
||||||
/** 执行 LDAP 批量导入 // Logan.Li */
|
/** 执行 LDAP 批量导入 // Logan.Li */
|
||||||
const handleLdapImport = async () => {
|
const handleLdapImport = async () => {
|
||||||
let selected: any[] = [];
|
let selected: Record<string, unknown>[] = [];
|
||||||
if (selectedLDAPUsers.length > 0) {
|
if (selectedLDAPUsers.length > 0) {
|
||||||
selected = ldapUsers.filter((u) => selectedLDAPUsers.includes(u.dn));
|
selected = ldapUsers.filter((u) => selectedLDAPUsers.includes(u.dn));
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@@ -310,8 +310,7 @@ function ChartLegendContent({
|
|||||||
|
|
||||||
// Helper to extract item config from a payload.
|
// Helper to extract item config from a payload.
|
||||||
function getPayloadConfigFromPayload(
|
function getPayloadConfigFromPayload(
|
||||||
config: ChartConfig,
|
config: ChartConfig, payload: any,
|
||||||
payload: unknown,
|
|
||||||
key: string
|
key: string
|
||||||
) {
|
) {
|
||||||
if (typeof payload !== "object" || payload === null) {
|
if (typeof payload !== "object" || payload === null) {
|
||||||
|
|||||||
@@ -249,10 +249,10 @@ export function HostMonitor() {
|
|||||||
}, [history, timeConfig]);
|
}, [history, timeConfig]);
|
||||||
|
|
||||||
const netInfo = parseJSON(latest?.net_info);
|
const netInfo = parseJSON(latest?.net_info);
|
||||||
const portInfo: any[] = Array.isArray(latest?.port_info) ? latest.port_info : (Array.isArray(parseJSON(latest?.port_info)) ? parseJSON(latest?.port_info) : []);
|
const portInfo: Record<string, unknown>[] = Array.isArray(latest?.port_info) ? latest.port_info : (Array.isArray(parseJSON(latest?.port_info)) ? parseJSON(latest?.port_info) : []);
|
||||||
const diskIOInfo = parseJSON(latest?.disk_io_info);
|
const diskIOInfo = parseJSON(latest?.disk_io_info);
|
||||||
const swapInfo = parseJSON(latest?.swap_info);
|
const swapInfo = parseJSON(latest?.swap_info);
|
||||||
const processTop: any[] = Array.isArray(parseJSON(latest?.process_top_info)) ? parseJSON(latest?.process_top_info) : [];
|
const processTop: Record<string, unknown>[] = Array.isArray(parseJSON(latest?.process_top_info)) ? parseJSON(latest?.process_top_info) : [];
|
||||||
const fdInfo = parseJSON(latest?.fd_info);
|
const fdInfo = parseJSON(latest?.fd_info);
|
||||||
const csInfo = parseJSON(latest?.cs_info);
|
const csInfo = parseJSON(latest?.cs_info);
|
||||||
const heartbeatInfo = parseJSON(latest?.heartbeat_info);
|
const heartbeatInfo = parseJSON(latest?.heartbeat_info);
|
||||||
@@ -895,7 +895,7 @@ export function HostMonitor() {
|
|||||||
}
|
}
|
||||||
setProbeDialogOpen(false);
|
setProbeDialogOpen(false);
|
||||||
fetchProbes();
|
fetchProbes();
|
||||||
} catch (e) { alert('保存失败'); }
|
} catch { alert('保存失败'); }
|
||||||
}} disabled={!probeForm.name || !probeForm.hostname}>
|
}} disabled={!probeForm.name || !probeForm.hostname}>
|
||||||
{editingProbe ? '保存' : '创建'}
|
{editingProbe ? '保存' : '创建'}
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
Loaded 100 of 115 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user