diff --git a/frontend/src/api/subsystem.ts b/frontend/src/api/subsystem.ts index 18594b8..ce4ec8b 100644 --- a/frontend/src/api/subsystem.ts +++ b/frontend/src/api/subsystem.ts @@ -12,7 +12,7 @@ export interface Subsystem { url: string domain: string category: string - status: 'integrated' | 'integrating' + status: 'active' | 'integrated' | 'integrating' sso_enabled: boolean } @@ -31,7 +31,7 @@ const mockSubsystems: Subsystem[] = [ url: 'https://wayne.qiniu.com', domain: 'wayne.xinfra.internal', category: '容器管理', - status: 'integrated', + status: 'active', sso_enabled: true, }, { @@ -43,7 +43,7 @@ const mockSubsystems: Subsystem[] = [ url: 'https://clouddm.qiniu.com', domain: 'clouddm.xinfra.internal', category: '数据库', - status: 'integrated', + status: 'active', sso_enabled: true, }, { @@ -79,7 +79,7 @@ const mockSubsystems: Subsystem[] = [ url: 'https://qpass.xinfra.internal', domain: 'qpass.xinfra.internal', category: '内部系统', - status: 'integrated', + status: 'integrating', sso_enabled: true, }, { @@ -91,7 +91,19 @@ const mockSubsystems: Subsystem[] = [ url: 'https://grafana.xinfra.internal', domain: 'grafana.xinfra.internal', category: '可观测性', - status: 'integrated', + status: 'integrating', + sso_enabled: true, + }, + { + id: 7, + name: 'Superset', + label: '日志数据可视化', + description: '日志数据探索与可视化分析平台,支持多数据源接入和丰富的图表展示。', + icon: 'SS', + url: 'https://superset.xinfra.internal', + domain: 'superset.xinfra.internal', + category: '可观测性', + status: 'integrating', sso_enabled: true, }, ] diff --git a/frontend/src/components/Layout/AppSidebar.vue b/frontend/src/components/Layout/AppSidebar.vue index 3e81b33..77224dc 100644 --- a/frontend/src/components/Layout/AppSidebar.vue +++ b/frontend/src/components/Layout/AppSidebar.vue @@ -11,29 +11,29 @@ ▤基础服务 - + ▧任务日志2 - + ▦子系统赋权 @@ -75,7 +75,7 @@ 📋登录审计 - + 📝运维操作审计 @@ -104,6 +104,7 @@ const subsystems = [ { name: 'Apollo', label: '配置中心', icon: 'AP' }, { name: 'qpass', label: '七牛统一运维平台', icon: 'QP' }, { name: 'Grafana', label: '指标可视化平台', icon: 'GF' }, + { name: 'Superset', label: '日志数据可视化', icon: 'SS' }, ] const isPortalActive = computed(() => { @@ -118,6 +119,7 @@ function dotColor(icon: string): string { AP: 'var(--tag-blue-text)', QP: 'var(--tag-amber-text)', GF: 'var(--warn)', + SS: 'var(--tag-cyan-text)', } return colors[icon] || 'var(--text-dim)' } diff --git a/frontend/src/components/SubsystemCard.vue b/frontend/src/components/SubsystemCard.vue index 19c7c87..25719b7 100644 --- a/frontend/src/components/SubsystemCard.vue +++ b/frontend/src/components/SubsystemCard.vue @@ -11,20 +11,23 @@

{{ system.description }}

- - {{ system.status === 'integrated' ? 'LDAP 原生配置接入 · 零代码' : 'LDAP 接入改造中' }} + + {{ system.status === 'active' ? 'LDAP 原生配置接入 · 在线' : 'LDAP 接入改造中' }}
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts index b230f65..4446803 100644 --- a/frontend/src/router/index.ts +++ b/frontend/src/router/index.ts @@ -42,8 +42,8 @@ const router = createRouter({ meta: { title: '子系统详情' }, }, { - path: 'subsystem/authz', - name: 'SubsystemAuthz', + path: 'subsystem/authorization', + name: 'SubsystemAuthorization', component: () => import('@/views/subsystem/Authorization.vue'), meta: { title: '子系统赋权' }, }, @@ -70,8 +70,8 @@ const router = createRouter({ meta: { title: '登录审计' }, }, { - path: 'audit/ops', - name: 'OpsAudit', + path: 'audit/operation', + name: 'OperationAudit', component: () => import('@/views/audit/OpsAudit.vue'), meta: { title: '运维操作审计' }, }, @@ -82,20 +82,20 @@ const router = createRouter({ meta: { title: '资源状态看板' }, }, { - path: 'resource/mgmt', - name: 'ResourceMgmt', + path: 'resource/management', + name: 'ResourceManagement', component: () => import('@/views/resource/Management.vue'), meta: { title: '资源管理' }, }, { - path: 'cluster', - name: 'Cluster', + path: 'infrastructure/cluster', + name: 'InfrastructureCluster', component: () => import('@/views/cluster/ClusterList.vue'), meta: { title: '集群与容器' }, }, { - path: 'tenants', - name: 'Tenants', + path: 'business/quota', + name: 'BusinessQuota', component: () => import('@/views/resource/Tenants.vue'), meta: { title: '业务配额' }, }, @@ -103,19 +103,19 @@ const router = createRouter({ path: 'service/catalog', name: 'ServiceCatalog', component: () => import('@/views/service/Catalog.vue'), - meta: { title: '基础服务目录' }, + meta: { title: '基础服务' }, }, { - path: 'service/mgmt', - name: 'ServiceMgmt', + path: 'service/management', + name: 'ServiceManagement', component: () => import('@/views/service/Management.vue'), meta: { title: '服务管理' }, }, { - path: 'tasks', - name: 'Tasks', + path: 'task/log', + name: 'TaskLog', component: () => import('@/views/task/TaskCenter.vue'), - meta: { title: '任务中心' }, + meta: { title: '任务日志' }, }, { path: 'config', @@ -124,16 +124,16 @@ const router = createRouter({ meta: { title: '配置中心管理' }, }, { - path: 'monitor', - name: 'Monitor', + path: 'observable/monitoring', + name: 'MonitoringDashboard', component: () => import('@/views/monitor/Monitor.vue'), - meta: { title: '监控' }, + meta: { title: '监控看板' }, }, { - path: 'alert', - name: 'Alert', + path: 'observable/alert', + name: 'AlertInformation', component: () => import('@/views/monitor/Alert.vue'), - meta: { title: '告警' }, + meta: { title: '告警信息' }, }, ], }, diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css index 32dc6ed..dc866e2 100644 --- a/frontend/src/styles/global.css +++ b/frontend/src/styles/global.css @@ -89,29 +89,6 @@ button { background: var(--text-dim); } -/* 状态文本 */ -.status-text { - font-size: 12px; - display: flex; - align-items: center; -} - -.status-text.ok { - color: var(--accent); -} - -.status-text.warn { - color: var(--warn); -} - -.status-text.err { - color: var(--err); -} - -.status-text.idle { - color: var(--text-dim); -} - /* 标签 */ .tag { display: inline-flex; @@ -387,8 +364,7 @@ tr.tr-hover.active td { /* ========== 状态文本 ========== */ .status-text { font-size: 12px; - display: flex; - align-items: center; + white-space: nowrap; } .status-text.ok { diff --git a/frontend/src/styles/variables.css b/frontend/src/styles/variables.css index 4eb814e..78d5f31 100644 --- a/frontend/src/styles/variables.css +++ b/frontend/src/styles/variables.css @@ -61,6 +61,11 @@ --tag-green-bg: #E8FFEA; --tag-green-border: #9FD9A8; + /* 标签/徽章颜色 - 青色系 */ + --tag-cyan-text: #0FC6C2; + --tag-cyan-bg: #E8FFFB; + --tag-cyan-border: #87E8DE; + /* 节点单元格颜色 */ --node-empty-bg: #F0F2F5; --node-a-bg: #E8FFEA; @@ -90,6 +95,7 @@ --logo-ap-bg: #E8F3FF; --logo-qp-bg: #FFF7E6; --logo-gf-bg: #F5F7FA; + --logo-ss-bg: #E8FFFB; /* 发光/阴影效果 */ --accent-glow: rgba(0, 180, 42, 0.3); @@ -158,6 +164,11 @@ --tag-green-bg: #0F261D; --tag-green-border: var(--accent-dim); + /* 标签/徽章颜色 - 青色系 */ + --tag-cyan-text: #5CFFFF; + --tag-cyan-bg: #0A2626; + --tag-cyan-border: #1A5C5C; + /* 节点单元格颜色 */ --node-empty-bg: #1E2532; --node-a-bg: #13261F; @@ -187,6 +198,7 @@ --logo-ap-bg: #1C2A3A; --logo-qp-bg: #241B0A; --logo-gf-bg: #1B202B; + --logo-ss-bg: #0A2626; /* 发光/阴影效果 */ --accent-glow: rgba(63, 224, 165, 0.3); diff --git a/frontend/src/views/dashboard/Index.vue b/frontend/src/views/dashboard/Index.vue index fb1764d..e0be28f 100644 --- a/frontend/src/views/dashboard/Index.vue +++ b/frontend/src/views/dashboard/Index.vue @@ -82,7 +82,7 @@

最近任务

- 查看全部 → + 查看全部 →
diff --git a/frontend/src/views/monitor/Alert.vue b/frontend/src/views/monitor/Alert.vue index 49f8b55..159ffa9 100644 --- a/frontend/src/views/monitor/Alert.vue +++ b/frontend/src/views/monitor/Alert.vue @@ -2,63 +2,129 @@
-

告警

-

夜莺(Nightingale)统一告警引擎 · qpass 推送

+

告警信息

+

夜莺(Nightingale)统一告警引擎对接 Zabbix + VictoriaMetrics · qpass 推送

-
-
-
-

当前告警

- 实时 -
-
-
- - - - - - - - - - - - - - -
硬件告警● 2 条
业务告警● 0 条
今日已推送5
-
+
+
+
P0 / Disaster 告警
+
1
+
来自 VictoriaMetrics
+
+
P1 / High 告警
+
5
+
来自 Zabbix · 4 条 / VM · 1 条
+
+
+
今日已推送
+
5
+
qpass 统一告警通道
+
+
-
-
-

告警通道

- qpass -
-
- - - - - - - - - - - -
推送状态● 正常
通道类型企业微信 · 钉钉 · 短信
+
+
+

告警来源接入 · 夜莺统一告警

+ Nightingale ← Zabbix / VictoriaMetrics +
+
+
+
+
Zabbix 物理机 / 硬件层
+
IPMI · 温度 · 电源 · 风扇
+
网络设备 · 存储健康度
+
事件级别:disaster / high / average
+
+
+
VictoriaMetrics 虚机 / 容器 / 业务层
+
K8s / 容器 / 主机指标
+
基础服务可用性探活
+
告警级别:P0 / P1 / P2
+
+
+
夜莺 Nightingale 统一告警引擎
+
按 P0/P1 或 disaster/high/average 过滤聚合
+
去重 · 收敛 · 分级推送
+
下游:qpass 统一告警通道
+
-

告警记录

- 近 24h +

当前告警 · P0/P1(disaster / high / average)

+ 夜莺聚合 · 已去重 +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
级别来源原始级别对象告警内容时间
P0VictoriaMetricsdisastersg-las-overseas-007磁盘只读 / IO 错误,节点不可写07:38:55
P1Zabbixhighyzh-las-014风扇转速低于阈值(FAN_6: 1920 RPM)07:35:12
P1Zabbixhighxs-bm-291电源冗余丢失(PSU2 离线)07:21:40
P1VictoriaMetricshighredis-ads-feature-cluster-02慢查询比例超阈值(>5%,持续5分钟)07:18:03
averageZabbixaverageoverseas-dallas-idc专线延迟抖动超基线(WireGuard ↔ AWS US)07:10:22
averageZabbixaveragejf-bm-118CPU 温度接近阈值(76℃ / 80℃)06:58:47
+
+
+ +
+
+

告警推送记录

+ 近 24h · qpass
@@ -73,13 +139,72 @@ import { ref } from 'vue' const alerts = ref([ - { time: '07:38:55', message: '[Zabbix] yzh-las-014 风扇转速低于阈值(FAN_6: 1920 RPM)', class: '' }, - { time: '07:38:55', message: '[Zabbix] yzh-las-014 风扇转速低于阈值(FAN_5: 1880 RPM)', class: '' }, - { time: '07:30:00', message: '[qpass] 告警已合并推送:1 条硬件告警 + 0 条业务告警', class: '' }, + { time: '07:38:55', message: '[qpass] P0 告警推送:sg-las-overseas-007 磁盘只读 / IO 错误', class: 'err' }, + { time: '07:35:12', message: '[qpass] P1 告警推送:yzh-las-014 风扇转速低于阈值(FAN_6: 1920 RPM)', class: '' }, + { time: '07:21:40', message: '[qpass] P1 告警推送:xs-bm-291 电源冗余丢失(PSU2 离线)', class: '' }, + { time: '07:18:03', message: '[qpass] P1 告警推送:redis-ads-feature-cluster-02 慢查询比例超阈值', class: '' }, + { time: '07:10:22', message: '[qpass] average 告警推送:overseas-dallas-idc 专线延迟抖动超基线', class: '' }, + { time: '06:58:47', message: '[qpass] average 告警推送:jf-bm-118 CPU 温度接近阈值(76℃ / 80℃)', class: '' }, { time: '06:15:22', message: '[Nightingale] sg-las-007 CPU 使用率恢复(当前 42%)', class: 'ok' }, { time: '05:48:10', message: '[Nightingale] sg-las-007 CPU 使用率超过 90% 持续 5 分钟', class: '' }, ]) diff --git a/frontend/src/views/monitor/Monitor.vue b/frontend/src/views/monitor/Monitor.vue index 38480ea..b77ce51 100644 --- a/frontend/src/views/monitor/Monitor.vue +++ b/frontend/src/views/monitor/Monitor.vue @@ -2,71 +2,196 @@
-

监控

-

VictoriaMetrics 指标 · Zabbix 硬件状态

+

监控看板

+

物理机 / 虚机 / 基础服务状态汇总 · 夜莺(Nightingale)统一告警引擎对接 Zabbix + VictoriaMetrics · 最近更新于 18 秒前

+
+ +
+ +
+
+
物理机总数
+
186
+
186 / 186 监控覆盖
+
+
+
虚机总数(LAS)
+
512
+
↑ 14 本周新增
+
+
+
基础组件实例
+
214
+
MySQL 38 · Redis 92 · 其他 84
-
+
-

VictoriaMetrics · 指标概览

- K8s / 容器 / 业务指标 +

物理机状态 · 按机房

+ 数据源:Zabbix
- - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
七机房采集节点数128
活跃时序数量42.6M
Prometheus 接口接入● 正常
Grafana 仪表盘数37
机房总数在线健康率状态
YZH 机房7878 + + 98% + ● 正常
XS 机房6463 + + 91% + ● 1 条告警
JF 机房2222 + + 100% + ● 正常
海外 IDC(4)2221 + + 86% + ● 1 条严重
-

Zabbix · 硬件健康

- IPMI / 温度 / 电源 / 风扇 +

虚机状态 · LAS 资源池

+ 数据源:VictoriaMetrics
- - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
物理机监控覆盖186 / 186
当前告警● 2 条(风扇转速异常)
网络设备健康● 正常
存储健康度● 正常
业务线虚机数CPU 均值状态
Kodo218 + + 64% + ● 正常
LAS164 + + 82% + ● 1 条告警
灵矽96 + + 57% + ● 正常
共享池 / 未分配34 + + 31% + ● 正常
+
+
+

基础服务状态汇总

+ MySQL / Redis / 中间件 · 探活数据源:VictoriaMetrics +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
服务类型实例数异常可用率状态
MySQL380100%● 正常
Redis(CacheCloud)92198.9%● 1 条告警
PostgreSQL120100%● 正常
openresty 网关260100%● 正常
其他中间件460100%● 正常
+
+
+
@@ -74,5 +199,5 @@ diff --git a/frontend/src/views/service/Catalog.vue b/frontend/src/views/service/Catalog.vue index 959574f..a69fc76 100644 --- a/frontend/src/views/service/Catalog.vue +++ b/frontend/src/views/service/Catalog.vue @@ -1,5 +1,6 @@