将系统变更日志展示从死数据改为实际的api

Author: aice030

client/src/api/index.ts

@@ -90,6 +90,14 @@ export const apiService = {
   // 回滚部署计划
   rollbackDeployment: (deployID: string) => {
     return api.post(`/v1/deployments/${deployID}/rollback`)
+  },
+  
+  // 获取部署变更记录
+  getDeploymentChangelog: (start?: string, limit?: number) => {
+    const params: any = {}
+    if (start) params.start = start
+    if (limit) params.limit = limit
+    return api.get('/v1/changelog/deployment', { params })
   }
 }
 

client/src/views/ChangeLogView.vue

@@ -62,250 +62,92 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useAppStore, type ChangeItem, type AlarmChangeItem } from '@/stores/app'
+import { mockApi } from '@/mock/api'
+import type { DeploymentChangelogResponse, DeploymentChangelogItem } from '@/mock/services'
 import ChangeCard from '@/components/ChangeCard.vue'
 import AlarmChangeCard from '@/components/AlarmChangeCard.vue'
 
 const appStore = useAppStore()
 
 const activeTab = ref('service')
 const searchKeyword = ref('')
+const loading = ref(false)
+const error = ref<string | null>(null)
 
-// 模拟数据
-const changeItems = ref<ChangeItem[]>([
-  {
-    id: 'chg-1',
-    service: 'Stg',
-    version: 'v1.0.3',
-    state: '发布中',
-    progress: 50,
-    ok: true,
-    batches: [
-      { name: '第一批', status: '正常', start: '2025/9/4 12:00:00', end: '2025/9/4 12:10:00' },
-      { name: '第二批', status: '正常', start: '2025/9/4 12:20:00', end: '2025/9/4 12:35:00' },
+// 部署变更记录数据
+const deploymentChangelog = ref<DeploymentChangelogResponse | null>(null)
+const changeItems = ref<ChangeItem[]>([])
+
+// 数据转换函数：将API返回的数据转换为前端需要的格式
+const transformDeploymentChangelogToChangeItems = (changelogData: any[]): ChangeItem[] => {
+  return changelogData.map((item, index) => {
+    // 根据健康状态确定状态
+    let state: '发布中' | '灰度中' | '已完成'
+    let progress: number | undefined
+    let ok: boolean
+    
+    if (item.endTime) {
+      // 有结束时间，说明已完成
+      state = '已完成'
+      progress = 100
+      ok = item.health === 'Normal'
+    } else if (item.instances < item.totalInstances) {
+      // 实例数小于总数，说明在灰度中
+      state = '灰度中'
+      progress = Math.round((item.instances / item.totalInstances) * 100)
+      ok = item.health === 'Normal'
+    } else {
+      // 实例数等于总数，说明在发布中
+      state = '发布中'
+      progress = 50 // 默认进度
+      ok = item.health === 'Normal'
+    }
+    
+    // 如果有分批次数据，直接使用；否则创建默认批次
+    let batches = item.batches || [
       {
-        name: '第三批',
-        status: '异常',
-        start: '2025/9/4 12:50:00',
-        end: '2025/9/4 13:10:00',
-        anomaly: 'Stg服务指标异常。',
-        moduleRecords: [
-          {
-            id: 'event-1',
-            module: '发布系统',
-            action: '发布到节点',
-            timestamp: '2025/9/4 12:50:00',
-            status: '成功',
-            details: '发布到 bj1-node-002, qn1-node-002 节点'
-          },
-          {
-            id: 'event-2',
-            module: '发布系统',
-            action: '部署新版本',
-            timestamp: '2025/9/4 12:50:15',
-            status: '成功',
-            eventData: {
-              deployment: {
-                service: "Stg服务v1.0.3",
-                environment: "生产环境",
-                healthCheck: "通过",
-                loadBalancer: "已更新路由规则",
-                trafficStatus: "新版本开始接收流量"
-              },
-              deploymentResult: {
-                status: "成功",
-                process: "顺利",
-                readiness: "所有健康检查通过"
-              }
-            }
-          },
-          {
-            id: 'event-3',
-            module: '指标分析',
-            action: '指标检测',
-            timestamp: '2025/9/4 12:50:20',
-            status: '成功',
-            details: '指标检测中...'
-          },
-          {
-            id: 'event-4',
-            module: '指标分析',
-            action: '指标检测',
-            timestamp: '2025/9/4 12:50:25',
-            status: '成功',
-            details: '指标检测无异常'
-          },
-          {
-            id: 'event-5',
-            module: '监控告警系统',
-            action: '灰度发布监控',
-            timestamp: '2025/9/4 12:55:20',
-            status: '告警',
-            eventData: {
-              monitoringAlert: {
-                service: "Stg服务",
-                phase: "灰度过程中",
-                issue: "延迟异常"
-              },
-              metrics: {
-                p95Latency: {
-                  before: "120ms",
-                  after: "450ms",
-                  increase: "275%"
-                },
-                errorRate: {
-                  before: "0.1%",
-                  after: "2.3%",
-                  increase: "2200%"
-                }
-              },
-              analysis: {
-                rootCause: "新版本中的数据库查询优化存在问题",
-                impact: "导致某些复杂查询性能下降"
-              }
-            }
-          },
-          {
-            id: 'event-6',
-            module: '指标分析',
-            action: '指标检测异常',
-            timestamp: '2025/9/4 12:55:35',
-            status: '告警',
-            details: '指标检测出现异常:响应时长高,错误率达 2.3%'
-          },
-          {
-            id: 'event-7',
-            module: '体检中心',
-            action: '请求问题分级',
-            timestamp: '2025/9/4 12:56:00',
-            status: '告警',
-            eventData: {
-              problemClassification: {
-                requestStatus: "正在请求问题分级系统",
-                aiAnalysis: "AI分析异常指标后",
-                classification: "WARNING级别"
-              },
-              assessment: {
-                errorRate: "较高",
-                serviceResponse: "仍可正常响应",
-                coreFunctionImpact: "暂未影响核心功能"
-              },
-              recommendation: {
-                action: "继续观察并准备回滚预案"
-              }
-            }
-          },
-          {
-            id: 'event-8',
-            module: '下钻分析',
-            action: '问题下钻',
-            timestamp: '2025/9/4 12:56:15',
-            status: '告警',
-            details: '正在请求问题下钻模块'
-          },
-          {
-            id: 'event-9',
-            module: '下钻分析',
-            action: '问题下钻分析',
-            timestamp: '2025/9/4 12:56:30',
-            status: '告警',
-            eventData: {
-              analysisResult: {
-                problemScope: "用户查询接口",
-                rootCause: "新版本中的数据库索引优化导致某些复杂查询性能下降",
-                impactDetails: [
-                  "用户列表查询延迟增加300%",
-                  "搜索功能错误率上升",
-                  "数据库连接池使用率接近上限"
-                ],
-                recommendation: "建议立即回滚到稳定版本"
-              },
-              metrics: {
-                queryLatencyIncrease: "300%",
-                errorRateRise: "2.3%",
-                connectionPoolUsage: "95%"
-              },
-              affectedServices: ["用户服务", "搜索服务", "数据库服务"]
-            }
-          },
-          {
-            id: 'event-10',
-            module: '监控告警系统',
-            action: '等待告警确认',
-            timestamp: '2025/9/4 13:00:00',
-            status: '告警',
-            eventData: {
-              alertConfirmation: {
-                waitingTime: "5分钟",
-                monitoringStatus: "持续监控中",
-                alertSystem: "外部告警系统",
-                confirmationProcess: "收集和分析指标数据"
-              },
-              currentMetrics: {
-                responseTime: "450ms",
-                errorRate: "2.3%",
-                serviceStatus: "异常但可响应"
-              },
-              nextActions: [
-                "告警系统确认异常",
-                "触发自动回滚流程",
-                "验证服务健康状态"
-              ]
-            }
-          },
-          {
-            id: 'event-11',
-            module: '发布系统',
-            action: '自动回滚',
-            timestamp: '2025/9/4 13:05:45',
-            status: '回滚',
-            eventData: {
-              rollbackTrigger: {
-                trigger: "AI检测到异常后自动触发回滚流程",
-                aiJudgment: "基于延迟和错误率指标，AI判断当前版本存在严重问题"
-              },
-              rollbackStrategy: [
-                "停止新版本流量",
-                "恢复旧版本配置",
-                "验证服务健康状态"
-              ],
-              rollbackResult: {
-                status: "回滚完成",
-                metrics: "所有指标恢复正常"
-              }
-            }
-          }
-        ]
+        name: '部署批次',
+        status: item.health === 'Normal' ? '正常' : item.health === 'Warning' ? '异常' : '异常',
+        start: new Date(item.startTime).toLocaleString('zh-CN'),
+        end: item.endTime ? new Date(item.endTime).toLocaleString('zh-CN') : '-',
+        anomaly: item.health !== 'Normal' ? `${item.service}服务指标异常` : undefined
       }
     ]
-  },
-  {
-    id: 'chg-2',
-    service: 'Stg',
-    version: 'v1.0.2',
-    state: '灰度中',
-    progress: 30,
-    ok: true,
-    batches: [
-      { name: '第一批', status: '正常', start: '2025/9/3 14:00:00', end: '2025/9/3 14:15:00' },
-      { name: '第二批', status: '正常', start: '2025/9/3 14:15:00', end: '2025/9/3 14:30:00' },
-      { name: '第三批', status: '进行中', start: '2025/9/3 14:30:00', end: '-' }
-    ]
-  },
-  {
-    id: 'chg-3',
-    service: 'Stg',
-    version: 'v1.0.1',
-    state: '已完成',
-    ok: true,
-    batches: [
-      { name: '第一批', status: '正常', start: '2025/9/2 10:00:00', end: '2025/9/2 10:20:00' },
-      { name: '第二批', status: '正常', start: '2025/9/2 10:20:00', end: '2025/9/2 10:40:00' },
-      { name: '第三批', status: '正常', start: '2025/9/2 10:40:00', end: '2025/9/2 11:00:00' }
-    ]
+    
+    return {
+      id: `chg-${index + 1}`,
+      service: item.service,
+      version: item.version,
+      state,
+      progress,
+      ok,
+      batches
+    }
+  })
+}
+
+// 加载部署变更记录
+const loadDeploymentChangelog = async (start?: string, limit?: number) => {
+  try {
+    loading.value = true
+    error.value = null
+    
+    const response = await mockApi.getDeploymentChangelog(start, limit)
+    deploymentChangelog.value = response
+    
+    // 转换数据格式
+    changeItems.value = transformDeploymentChangelogToChangeItems(response.items)
+    
+    console.log('部署变更记录加载成功:', response)
+  } catch (err) {
+    error.value = '加载部署变更记录失败'
+    console.error('加载部署变更记录失败:', err)
+  } finally {
+    loading.value = false
   }
-])
+}
 
 const alarmChangeItems = ref<AlarmChangeItem[]>([
   {
@@ -354,6 +196,11 @@ const filteredChangeItems = computed(() => {
 const handleSearch = () => {
   // 搜索逻辑已在计算属性中处理
 }
+
+// 生命周期
+onMounted(() => {
+  loadDeploymentChangelog()
+})
 </script>
 
 <style scoped>