This is an automated email from the ASF dual-hosted git repository. gongchao pushed a commit to branch integte-extern-alarm in repository https://gitbox.apache.org/repos/asf/hertzbeat.git
commit 459bfd6b53400d5238d1ebc6492a64f13c3b90b7 Author: tomsun28 <tomsu...@outlook.com> AuthorDate: Fri Jan 10 13:39:21 2025 +0800 [webapp] add alert integration Signed-off-by: tomsun28 <tomsu...@outlook.com> --- .../alert-integration.component.html | 2 +- .../alert-integration.component.ts | 93 ++++++++-------------- .../doc/alert-integration/prometheus.en-US.md | 0 .../doc/alert-integration/prometheus.zh-CN.md | 0 .../doc/alert-integration/prometheus.zh-TW.md | 0 .../assets/doc/alert-integration/tencent.en-US.md | 0 .../assets/doc/alert-integration/tencent.zh-CN.md | 0 .../assets/doc/alert-integration/tencent.zh-TW.md | 0 web-app/src/assets/i18n/zh-CN.json | 4 +- 9 files changed, 37 insertions(+), 62 deletions(-) diff --git a/web-app/src/app/routes/alert/alert-integration/alert-integration.component.html b/web-app/src/app/routes/alert/alert-integration/alert-integration.component.html index 024e55a31d..49541f0427 100644 --- a/web-app/src/app/routes/alert/alert-integration/alert-integration.component.html +++ b/web-app/src/app/routes/alert/alert-integration/alert-integration.component.html @@ -44,7 +44,7 @@ <div class="doc-content"> <ng-container *ngIf="selectedSource"> <h2>{{ selectedSource.name }}</h2> - <markdown [data]="selectedSource.document"></markdown> + <markdown [data]="markdownContent"></markdown> </ng-container> </div> </div> diff --git a/web-app/src/app/routes/alert/alert-integration/alert-integration.component.ts b/web-app/src/app/routes/alert/alert-integration/alert-integration.component.ts index f6c64bbc22..3df9132829 100644 --- a/web-app/src/app/routes/alert/alert-integration/alert-integration.component.ts +++ b/web-app/src/app/routes/alert/alert-integration/alert-integration.component.ts @@ -1,18 +1,20 @@ import { CommonModule } from '@angular/common'; -import { HttpClientModule } from '@angular/common/http'; -import { Component, OnInit } from '@angular/core'; -import { I18nPipe } from '@delon/theme'; +import { HttpClient, HttpClientModule } from '@angular/common/http'; +import { Component, Inject, OnInit } from '@angular/core'; +import { I18NService } from '@core'; +import { ALAIN_I18N_TOKEN, I18nPipe } from '@delon/theme'; +import { SharedModule } from '@shared'; +import { NzDividerComponent } from 'ng-zorro-antd/divider'; import { MarkdownModule } from 'ngx-markdown'; -import {NzDividerComponent} from "ng-zorro-antd/divider"; -import {SharedModule} from "@shared"; interface DataSource { id: string; name: string; icon: string; - document: string; } +const MARKDOWN_DOC_PATH = './assets/doc/alert-integration'; + @Component({ selector: 'app-alert-integration', standalone: true, @@ -24,73 +26,46 @@ export class AlertIntegrationComponent implements OnInit { dataSources: DataSource[] = [ { id: 'prometheus', - name: 'Prometheus', - icon: 'assets/img/integration/prometheus.svg', - document: `# Prometheus - -HertzBeat 完全兼容 Prometheus 的告警数据格式,您可以通过配置 Prometheus 的告警规则将告警数据发送到 HertzBeat。 - -## Prometheus 告警配置 - -在 Prometheus 的配置文件中添加以下配置: - -\`\`\`yaml -alerting: - alertmanagers: - - static_configs: - - targets: - - '<hertzbeat-url>/api/alert/prometheus/webhook' -\`\`\` - -## 告警规则示例 - -\`\`\`yaml -groups: -- name: example - rules: - - alert: HighRequestLatency - expr: job:request_latency_seconds:mean5m{job="myjob"} > 0.5 - for: 10m - labels: - severity: page - annotations: - summary: High request latency -\`\`\` - -更多信息请参考 [Prometheus 官方文档](https://prometheus.io/docs/alerting/latest/configuration/)。 - ` + name: this.i18nSvc.fanyi('alert.integration.source.prometheus'), + icon: 'assets/img/integration/prometheus.svg' }, { - id: 'tencent-cloud', - name: '腾讯云', - icon: 'assets/img/integration/tencent.svg', - document: `# 腾讯云告警接入 - -腾讯云可以通过配置告警回调将告警数据发送到 HertzBeat。 - -## 配置步骤 - -1. 登录腾讯云控制台 -2. 在告警策略中配置回调地址:\`<hertzbeat-url>/api/alert/tencent/webhook\` -3. 选择推送内容模板... - -更多信息请参考腾讯云官方文档。 - ` + id: 'tencent', + name: this.i18nSvc.fanyi('alert.integration.source.tencent'), + icon: 'assets/img/integration/tencent.svg' } ]; selectedSource: DataSource | null = null; + markdownContent: string = ''; - constructor() { - // 在构造函数中设置默认选中的数据源 + constructor(private http: HttpClient, @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService) { this.selectedSource = this.dataSources[0]; } ngOnInit() { - // 不再需要在这里设置默认选中项,因为已经在构造函数中设置了 + if (this.selectedSource) { + this.loadMarkdownContent(this.selectedSource); + } } selectSource(source: DataSource) { this.selectedSource = source; + this.loadMarkdownContent(source); + } + + private loadMarkdownContent(source: DataSource) { + const lang = this.i18nSvc.currentLang; + const path = `${MARKDOWN_DOC_PATH}/${source.id}.${lang}.md`; + + this.http.get(path, { responseType: 'text' }).subscribe({ + next: content => { + this.markdownContent = content; + }, + error: error => { + const enPath = `${MARKDOWN_DOC_PATH}/${source.id}.en-US.md`; + this.http.get(enPath, { responseType: 'text' }).subscribe(content => (this.markdownContent = content)); + } + }); } } diff --git a/web-app/src/assets/doc/alert-integration/prometheus.en-US.md b/web-app/src/assets/doc/alert-integration/prometheus.en-US.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/web-app/src/assets/doc/alert-integration/prometheus.zh-CN.md b/web-app/src/assets/doc/alert-integration/prometheus.zh-CN.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/web-app/src/assets/doc/alert-integration/prometheus.zh-TW.md b/web-app/src/assets/doc/alert-integration/prometheus.zh-TW.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/web-app/src/assets/doc/alert-integration/tencent.en-US.md b/web-app/src/assets/doc/alert-integration/tencent.en-US.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/web-app/src/assets/doc/alert-integration/tencent.zh-CN.md b/web-app/src/assets/doc/alert-integration/tencent.zh-CN.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/web-app/src/assets/doc/alert-integration/tencent.zh-TW.md b/web-app/src/assets/doc/alert-integration/tencent.zh-TW.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/web-app/src/assets/i18n/zh-CN.json b/web-app/src/assets/i18n/zh-CN.json index 0577cbc999..81a32a0a12 100644 --- a/web-app/src/assets/i18n/zh-CN.json +++ b/web-app/src/assets/i18n/zh-CN.json @@ -380,8 +380,8 @@ "alert.export.switch-type": "请选择导出文件格式!", "alert.export.use-type": "以 {{type}} 文件格式导出阈值规则", "alert.integration.source": "集成源", - "alert.integration.source.prometheus": "集成源", - "alert.integration.source.tencent": "集成源", + "alert.integration.source.prometheus": "Prometheus", + "alert.integration.source.tencent": "腾讯云监控", "dashboard.alerts.title": "最近告警列表", "dashboard.alerts.title-no": "最近未处理告警", "dashboard.alerts.no": "暂无未处理告警", --------------------------------------------------------------------- To unsubscribe, e-mail: notifications-unsubscr...@hertzbeat.apache.org For additional commands, e-mail: notifications-h...@hertzbeat.apache.org