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

Reply via email to