fix: 飞书告警改用交互卡片展示 + 通知渠道与联系人合并为通知管理Tab
- 飞书: sendFeishuCard 改用 msg_type=interactive 卡片格式(header+template+fields+note) - 飞书: splitLines 处理 \n 转义 → 卡片字段逐行渲染 lark_md - 飞书: header.template 按级别着色(red/orange/green/blue) - 飞书: 测试通知改为卡片格式: 测试时间/来源/状态 - UI: 合并通知渠道+报警联系人为一个「通知管理」Tab(4列Tab栏) - UI: 通知管理下分【渠道配置】+【报警联系人】两个区域
This commit is contained in:
attacker committed
1 parent
e1cfbaf45e
commit
e1f75f0bc4
2 files changed
+124
-67
No files matched your search
@@ -10,6 +10,7 @@ import (
|
||||
"io"
|
||||
"net/http"
|
||||
"strconv"
|
||||
"strings"
|
||||
"time"
|
||||
|
||||
"ezops/internal/models"
|
||||
@@ -236,7 +237,7 @@ func sendFeishuTest(configJSON string) error {
|
||||
}
|
||||
|
||||
title := "✅ AIOps 告警测试通知"
|
||||
content := fmt.Sprintf("通知渠道连通性测试成功\\n测试时间：%s\\n来源：AIOps 智能运维平台", time.Now().Format("2006-01-02 15:04:05"))
|
||||
content := fmt.Sprintf("**测试时间**：%s\\n**来源**：AIOps 智能运维平台\\n**状态**：连通性测试成功 🎉", time.Now().Format("2006-01-02 15:04:05"))
|
||||
|
||||
return sendFeishuCard(cfg.URL, cfg.Secret, title, content, "green")
|
||||
}
|
||||
@@ -283,16 +284,70 @@ func sendFeishuRecovery(configJSON, title, content string) error {
|
||||
return sendFeishuCard(cfg.URL, cfg.Secret, title, content, "green")
|
||||
}
|
||||
|
||||
// sendFeishuCard 发送飞书消息（优先使用卡片格式，出错回退到文本）
|
||||
// sendFeishuCard 发送飞书交互卡片消息
|
||||
func sendFeishuCard(webhookURL, secret, title, content, color string) error {
|
||||
// 先尝试文本格式（最可靠）
|
||||
textMsg := map[string]interface{}{
|
||||
"msg_type": "text",
|
||||
"content": map[string]interface{}{
|
||||
"text": title + "\n\n" + content,
|
||||
// 解析 content 中的字段（格式: 多行 key: value）
|
||||
lines := splitLines(content)
|
||||
var fields []map[string]interface{}
|
||||
for _, line := range lines {
|
||||
line = strings.TrimSpace(line)
|
||||
if line == "" {
|
||||
continue
|
||||
}
|
||||
fields = append(fields, map[string]interface{}{
|
||||
"is_short": false,
|
||||
"text": map[string]interface{}{
|
||||
"tag": "lark_md",
|
||||
"content": line,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
template := color
|
||||
if template == "red" {
|
||||
template = "red"
|
||||
} else if template == "orange" || template == "warning" {
|
||||
template = "orange"
|
||||
} else if template == "green" {
|
||||
template = "green"
|
||||
} else if template == "blue" || template == "info" {
|
||||
template = "blue"
|
||||
} else {
|
||||
template = "red"
|
||||
}
|
||||
|
||||
card := map[string]interface{}{
|
||||
"msg_type": "interactive",
|
||||
"card": map[string]interface{}{
|
||||
"header": map[string]interface{}{
|
||||
"title": map[string]interface{}{
|
||||
"tag": "plain_text",
|
||||
"content": title,
|
||||
},
|
||||
"template": template,
|
||||
},
|
||||
"elements": []map[string]interface{}{
|
||||
{
|
||||
"tag": "div",
|
||||
"fields": fields,
|
||||
},
|
||||
{
|
||||
"tag": "hr",
|
||||
},
|
||||
{
|
||||
"tag": "note",
|
||||
"elements": []map[string]interface{}{
|
||||
{
|
||||
"tag": "plain_text",
|
||||
"content": fmt.Sprintf("⏰ %s ｜ AIOps 智能运维平台", time.Now().Format("2006-01-02 15:04:05")),
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
body, _ := json.Marshal(textMsg)
|
||||
|
||||
body, _ := json.Marshal(card)
|
||||
|
||||
req, err := http.NewRequest("POST", webhookURL, bytes.NewReader(body))
|
||||
if err != nil {
|
||||
@@ -300,7 +355,7 @@ func sendFeishuCard(webhookURL, secret, title, content, color string) error {
|
||||
}
|
||||
req.Header.Set("Content-Type", "application/json")
|
||||
|
||||
// 如果有 secret，生成签名
|
||||
// 如果有 secret，追加签名到 URL query
|
||||
if secret != "" {
|
||||
timestamp := time.Now().Unix()
|
||||
sign := genFeishuSign(timestamp, secret)
|
||||
@@ -322,7 +377,6 @@ func sendFeishuCard(webhookURL, secret, title, content, color string) error {
|
||||
return fmt.Errorf("飞书返回错误 (HTTP %d): %s", resp.StatusCode, string(respBody))
|
||||
}
|
||||
|
||||
// 检查飞书业务返回码
|
||||
var result struct {
|
||||
Code int `json:"code"`
|
||||
Msg string `json:"msg"`
|
||||
@@ -335,6 +389,13 @@ func sendFeishuCard(webhookURL, secret, title, content, color string) error {
|
||||
return nil
|
||||
}
|
||||
|
||||
// splitLines splits a string by newlines, handling both actual \n and escaped \\n
|
||||
func splitLines(s string) []string {
|
||||
// First replace literal \n (from Go format strings) with actual newlines
|
||||
s = strings.ReplaceAll(s, "\\n", "\n")
|
||||
return strings.Split(s, "\n")
|
||||
}
|
||||
|
||||
// buildFeishuCard 构建飞书卡片消息体（保留备用，当前使用文本格式）
|
||||
func buildFeishuCard(title, content, color string) models.FeishuCardMessage {
|
||||
return models.FeishuCardMessage{
|
||||
|
||||
@@ -262,11 +262,10 @@ const AlertCenter: React.FC = () => {
|
||||
</div>
|
||||
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
||||
<TabsList className="grid w-full grid-cols-5 lg:w-[600px] h-9">
|
||||
<TabsList className="grid w-full grid-cols-4 lg:w-[480px] h-9">
|
||||
<TabsTrigger value="alerts" className="text-xs">告警列表</TabsTrigger>
|
||||
<TabsTrigger value="rules" className="text-xs">告警规则</TabsTrigger>
|
||||
<TabsTrigger value="channels" className="text-xs">通知渠道</TabsTrigger>
|
||||
<TabsTrigger value="contacts" className="text-xs">报警联系人</TabsTrigger>
|
||||
<TabsTrigger value="contacts" className="text-xs">通知管理</TabsTrigger>
|
||||
<TabsTrigger value="groups" className="text-xs">报警联系组</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
@@ -502,62 +501,59 @@ const AlertCenter: React.FC = () => {
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
{/* 通知渠道 Tab — 自包含子组件 */}
|
||||
<TabsContent value="channels">
|
||||
<AlertChannelsTab refreshKey={0} />
|
||||
</TabsContent>
|
||||
|
||||
{/* 报警联系人 Tab */}
|
||||
{/* 通知管理 Tab — 渠道 + 联系人合并 */}
|
||||
<TabsContent value="contacts" className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<Button variant="outline" onClick={fetchContacts}>
|
||||
<RefreshCw className="w-4 h-4 mr-2" />
|
||||
刷新
|
||||
</Button>
|
||||
<Button onClick={() => { setEditingContact(null); setContactDialogOpen(true); }}>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
添加联系人
|
||||
</Button>
|
||||
<AlertChannelsTab refreshKey={0} />
|
||||
<div className="border-t border-border pt-4 mt-1">
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<h3 className="text-sm font-medium">报警联系人</h3>
|
||||
<Button size="sm" onClick={() => { setEditingContact(null); setContactDialogOpen(true); }}>
|
||||
<Plus className="w-4 h-4 mr-1" />
|
||||
添加联系人
|
||||
</Button>
|
||||
</div>
|
||||
{contacts.length === 0 ? (
|
||||
<div className="text-center py-8 text-muted-foreground border border-dashed rounded-lg text-xs">
|
||||
暂无报警联系人，点击「添加联系人」创建
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{contacts.map((c) => (
|
||||
<Card key={c.id} className="hover:border-primary/50 transition-colors">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-start justify-between">
|
||||
<CardTitle className="text-sm">{c.name}</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0 space-y-1 text-xs text-muted-foreground">
|
||||
{c.phone && <div>📱 {c.phone}</div>}
|
||||
{c.email && <div>📧 {c.email}</div>}
|
||||
<div className="flex gap-1 flex-wrap">
|
||||
{c.dingtalk && <Badge variant="outline" className="text-[10px]">钉钉</Badge>}
|
||||
{c.feishu && <Badge variant="outline" className="text-[10px]">飞书</Badge>}
|
||||
{c.wechat && <Badge variant="outline" className="text-[10px]">企微</Badge>}
|
||||
</div>
|
||||
<div className="flex gap-1.5 pt-1.5">
|
||||
<Button variant="outline" size="sm" className="h-7 text-xs flex-1"
|
||||
onClick={() => { setEditingContact(c); setContactDialogOpen(true); }}>
|
||||
编辑
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" className="h-7 text-xs"
|
||||
onClick={async () => {
|
||||
const ok = await _confirm({ title: '删除联系人', description: `确定删除「${c.name}」？`, confirmText: '删除', variant: 'destructive' });
|
||||
if (!ok) return;
|
||||
try { await alertApi.deleteContact(c.id); toast.success('已删除'); fetchContacts(); }
|
||||
catch { toast.error('删除失败'); }
|
||||
}}>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{contacts.length === 0 ? (
|
||||
<div className="text-center py-16 text-muted-foreground border border-dashed rounded-lg">
|
||||
暂无报警联系人，点击「添加联系人」创建
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{contacts.map((c) => (
|
||||
<Card key={c.id} className="hover:border-primary/50 transition-colors">
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<CardTitle className="text-base">{c.name}</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0 space-y-1 text-sm text-muted-foreground">
|
||||
{c.phone && <div>📱 {c.phone}</div>}
|
||||
{c.email && <div>📧 {c.email}</div>}
|
||||
{c.dingtalk && <div>🔷 钉钉已配置</div>}
|
||||
{c.feishu && <div>🟢 飞书已配置</div>}
|
||||
{c.wechat && <div>💚 企业微信已配置</div>}
|
||||
<div className="flex gap-2 pt-2">
|
||||
<Button variant="outline" size="sm" className="flex-1"
|
||||
onClick={() => { setEditingContact(c); setContactDialogOpen(true); }}>
|
||||
编辑
|
||||
</Button>
|
||||
<Button variant="outline" size="sm"
|
||||
onClick={async () => {
|
||||
const ok = await _confirm({ title: '删除联系人', description: `确定删除联系人「${c.name}」？`, confirmText: '删除', variant: 'destructive' });
|
||||
if (!ok) return;
|
||||
try { await alertApi.deleteContact(c.id); toast.success('已删除'); fetchContacts(); }
|
||||
catch { toast.error('删除失败'); }
|
||||
}}>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
{/* 报警联系组 Tab */}
|
||||
|
||||
Reference in new issue
Block a user