Skip to content

Commit e6d6cb2

Browse files
aice030aice030
committed
将告警变更记录的变量从死数据改为了可调用api接口获取数据的变量
1 parent 9fa1365 commit e6d6cb2

File tree

4 files changed

+168
-31
lines changed

4 files changed

+168
-31
lines changed

‎client/src/api/index.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,14 @@ export const apiService = {
9898
if (start) params.start = start
9999
if (limit) params.limit = limit
100100
return api.get('/v1/changelog/deployment', { params })
101+
},
102+
103+
// 获取告警规则变更记录
104+
getAlertRuleChangelog: (start?: string, limit?: number) => {
105+
const params: any = {}
106+
if (start) params.start = start
107+
if (limit) params.limit = limit
108+
return api.get('/v1/changelog/alertrules', { params })
101109
}
102110
}
103111

‎client/src/mock/api.ts‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Mock API服务
2-
import { mockServicesData, mockServiceDetails, mockVersionOptions, mockScheduledReleases, mockServiceActiveVersions, mockServiceMetrics, mockAvailableVersions, mockDeploymentPlans, mockMetricsData, mockDeploymentChangelog, type ServicesResponse, type ServiceDetail, type ServiceActiveVersionsResponse, type ServiceMetricsResponse, type AvailableVersionsResponse, type DeploymentPlansResponse, type MetricsResponse, type DeploymentChangelogResponse } from './services'
2+
import { mockServicesData, mockServiceDetails, mockVersionOptions, mockScheduledReleases, mockServiceActiveVersions, mockServiceMetrics, mockAvailableVersions, mockDeploymentPlans, mockMetricsData, mockDeploymentChangelog, mockAlertRuleChangelog, type ServicesResponse, type ServiceDetail, type ServiceActiveVersionsResponse, type ServiceMetricsResponse, type AvailableVersionsResponse, type DeploymentPlansResponse, type MetricsResponse, type DeploymentChangelogResponse, type AlertRuleChangelogResponse } from './services'
33

44
// 模拟网络延迟
55
const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
@@ -151,6 +151,31 @@ export class MockApiService {
151151
next: items.length > 0 ? items[items.length - 1].startTime : undefined
152152
}
153153
}
154+
155+
// 获取告警规则变更记录 - 新的API接口
156+
static async getAlertRuleChangelog(start?: string, limit?: number): Promise<AlertRuleChangelogResponse> {
157+
await delay(300)
158+
console.log(`Mock API: 获取告警规则变更记录 - start: ${start}, limit: ${limit}`)
159+
160+
// 模拟分页逻辑
161+
let items = [...mockAlertRuleChangelog.items]
162+
163+
// 如果有start参数，模拟从该时间点开始的数据
164+
if (start) {
165+
const startTime = new Date(start)
166+
items = items.filter(item => new Date(item.editTime) <= startTime)
167+
}
168+
169+
// 如果有limit参数，限制返回数量
170+
if (limit && limit > 0) {
171+
items = items.slice(0, limit)
172+
}
173+
174+
return {
175+
items,
176+
next: items.length > 0 ? items[items.length - 1].editTime : undefined
177+
}
178+
}
154179
}
155180

156181
// 导出Mock API实例

‎client/src/mock/services.ts‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,26 @@ export interface DeploymentPlansResponse {
216216
items: DeploymentPlan[]
217217
}
218218

219+
// 告警规则变更记录数据结构
220+
export interface AlertRuleChangeValue {
221+
name: string
222+
old: string
223+
new: string
224+
}
225+
226+
export interface AlertRuleChangeItem {
227+
name: string
228+
editTime: string
229+
scope: string
230+
values: AlertRuleChangeValue[]
231+
reason: string
232+
}
233+
234+
export interface AlertRuleChangelogResponse {
235+
items: AlertRuleChangeItem[]
236+
next?: string
237+
}
238+
219239
// Mock数据 - 发布计划（按服务分组）
220240
export const mockDeploymentPlans: Record<string, DeploymentPlansResponse> = {
221241
"s3": {
@@ -1231,3 +1251,67 @@ export const mockServiceMetrics: Record<string, ServiceMetricsResponse> = {
12311251
]
12321252
}
12331253
}
1254+
1255+
// Mock数据 - 告警规则变更记录
1256+
export const mockAlertRuleChangelog: AlertRuleChangelogResponse = {
1257+
items: [
1258+
{
1259+
name: "p98_latency_too_high",
1260+
editTime: "2024-01-04T12:00:00Z",
1261+
scope: "service:stg",
1262+
values: [
1263+
{
1264+
name: "threshold",
1265+
old: "10",
1266+
new: "15"
1267+
},
1268+
{
1269+
name: "watchTimeDuration",
1270+
old: "3min",
1271+
new: "5min"
1272+
}
1273+
],
1274+
reason: "由于业务增长，系统负载增加，原有10ms的延时阈值过于严格，导致频繁告警。经过AI分析历史数据，建议将阈值调整为15ms，既能及时发现性能问题，又避免误报。"
1275+
},
1276+
{
1277+
name: "saturation_too_high",
1278+
editTime: "2024-01-03T15:00:00Z",
1279+
scope: "service:stg",
1280+
values: [
1281+
{
1282+
name: "threshold",
1283+
old: "50",
1284+
new: "45"
1285+
}
1286+
],
1287+
reason: "监控发现系统在50%饱和度时已出现性能下降，提前预警有助于避免系统过载。调整后可以更早发现资源瓶颈，确保服务稳定性。"
1288+
},
1289+
{
1290+
name: "p98_latency_too_high",
1291+
editTime: "2024-01-03T10:00:00Z",
1292+
scope: "service:mongo",
1293+
values: [
1294+
{
1295+
name: "threshold",
1296+
old: "10",
1297+
new: "5"
1298+
}
1299+
],
1300+
reason: "MongoDB服务经过优化后性能显著提升，原有10ms阈值已不适用。调整为5ms可以更精确地监控数据库性能，及时发现潜在问题。"
1301+
},
1302+
{
1303+
name: "error_rate_too_high",
1304+
editTime: "2024-01-01T15:00:00Z",
1305+
scope: "service:meta",
1306+
values: [
1307+
{
1308+
name: "threshold",
1309+
old: "10",
1310+
new: "5"
1311+
}
1312+
],
1313+
reason: "Meta服务作为核心服务，对错误率要求更加严格。将错误告警阈值从10降低到5，可以更敏感地发现服务异常，确保数据一致性。"
1314+
}
1315+
],
1316+
next: "2024-01-01T15:00:00Z"
1317+
}

‎client/src/views/ChangeLogView.vue‎

Lines changed: 50 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
import { ref, computed, onMounted } from 'vue'
6666
import { useAppStore, type ChangeItem, type AlarmChangeItem } from '@/stores/app'
6767
import { mockApi } from '@/mock/api'
68-
import type { DeploymentChangelogResponse, DeploymentChangelogItem } from '@/mock/services'
68+
import type { DeploymentChangelogResponse, DeploymentChangelogItem, AlertRuleChangelogResponse, AlertRuleChangeItem } from '@/mock/services'
6969
import ChangeCard from '@/components/ChangeCard.vue'
7070
import AlarmChangeCard from '@/components/AlarmChangeCard.vue'
7171
@@ -80,6 +80,10 @@ const error = ref<string | null>(null)
8080
const deploymentChangelog = ref<DeploymentChangelogResponse | null>(null)
8181
const changeItems = ref<ChangeItem[]>([])
8282
83+
// 告警规则变更记录数据
84+
const alertRuleChangelog = ref<AlertRuleChangelogResponse | null>(null)
85+
const alarmChangeItems = ref<AlarmChangeItem[]>([])
86+
8387
// 数据转换函数：将API返回的数据转换为前端需要的格式
8488
const transformDeploymentChangelogToChangeItems = (changelogData: any[]): ChangeItem[] => {
8589
return changelogData.map((item, index) => {
@@ -128,6 +132,30 @@ const transformDeploymentChangelogToChangeItems = (changelogData: any[]): Change
128132
})
129133
}
130134
135+
// 数据转换函数：将告警规则变更记录API返回的数据转换为前端需要的格式
136+
const transformAlertRuleChangelogToAlarmChangeItems = (changelogData: AlertRuleChangeItem[]): AlarmChangeItem[] => {
137+
return changelogData.map((item, index) => {
138+
// 从scope中提取服务名
139+
const serviceName = item.scope ? item.scope.replace('service:', '') + '服务' : '全局服务'
140+
141+
// 构建变更描述
142+
const changeDescription = item.values.map(value => {
143+
return `${value.name}: ${value.old} -> ${value.new}`
144+
}).join(', ')
145+
146+
// 格式化时间
147+
const timestamp = new Date(item.editTime).toLocaleString('zh-CN')
148+
149+
return {
150+
id: `alarm-${index + 1}`,
151+
service: serviceName,
152+
change: `${item.name}: ${changeDescription}`,
153+
timestamp,
154+
details: item.reason
155+
}
156+
})
157+
}
158+
131159
// 加载部署变更记录
132160
const loadDeploymentChangelog = async (start?: string, limit?: number) => {
133161
try {
@@ -149,36 +177,27 @@ const loadDeploymentChangelog = async (start?: string, limit?: number) => {
149177
}
150178
}
151179
152-
const alarmChangeItems = ref<AlarmChangeItem[]>([
153-
{
154-
id: 'alarm-1',
155-
service: 'Stg服务',
156-
change: '延时告警阈值调整: 10ms -> 15ms',
157-
timestamp: '2025/9/4 12:00:00',
158-
details: '由于业务增长，系统负载增加，原有10ms的延时阈值过于严格，导致频繁告警。经过AI分析历史数据，建议将阈值调整为15ms，既能及时发现性能问题，又避免误报。'
159-
},
160-
{
161-
id: 'alarm-2',
162-
service: 'Stg服务',
163-
change: '饱和度告警阈值调整: 50% -> 45%',
164-
timestamp: '2025/9/3 15:00:00',
165-
details: '监控发现系统在50%饱和度时已出现性能下降，提前预警有助于避免系统过载。调整后可以更早发现资源瓶颈，确保服务稳定性。'
166-
},
167-
{
168-
id: 'alarm-3',
169-
service: 'Mongo服务',
170-
change: '延时告警阈值调整: 10ms -> 5ms',
171-
timestamp: '2025/9/3 10:00:00',
172-
details: 'MongoDB服务经过优化后性能显著提升，原有10ms阈值已不适用。调整为5ms可以更精确地监控数据库性能，及时发现潜在问题。'
173-
},
174-
{
175-
id: 'alarm-4',
176-
service: 'Meta服务',
177-
change: '错误告警阈值调整: 10 -> 5',
178-
timestamp: '2025/9/1 15:00:00',
179-
details: 'Meta服务作为核心服务，对错误率要求更加严格。将错误告警阈值从10降低到5，可以更敏感地发现服务异常，确保数据一致性。'
180+
// 加载告警规则变更记录
181+
const loadAlertRuleChangelog = async (start?: string, limit?: number) => {
182+
try {
183+
loading.value = true
184+
error.value = null
185+
186+
const response = await mockApi.getAlertRuleChangelog(start, limit)
187+
alertRuleChangelog.value = response
188+
189+
// 转换数据格式
190+
alarmChangeItems.value = transformAlertRuleChangelogToAlarmChangeItems(response.items)
191+
192+
console.log('告警规则变更记录加载成功:', response)
193+
} catch (err) {
194+
error.value = '加载告警规则变更记录失败'
195+
console.error('加载告警规则变更记录失败:', err)
196+
} finally {
197+
loading.value = false
180198
}
181-
])
199+
}
200+
182201
183202
// 计算属性
184203
const filteredChangeItems = computed(() => {
@@ -200,6 +219,7 @@ const handleSearch = () => {
200219
// 生命周期
201220
onMounted(() => {
202221
loadDeploymentChangelog()
222+
loadAlertRuleChangelog()
203223
})
204224
</script>
205225

0 commit comments

Comments
 (0)