(hertzbeat) 13/19: [webapp] add alert integration

[gongchao]

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 79672b46cdb03a6fbcd2721cedf3656b4a08533b
Author: tomsun28 <tomsu...@outlook.com>
AuthorDate: Sat Jan 11 14:24:30 2025 +0800

    [webapp] add alert integration
    
    Signed-off-by: tomsun28 <tomsu...@outlook.com>
---
 .../alert-integration.component.html               | 24 +++++++++++++++++++++-
 .../alert-integration.component.ts                 | 19 +++++++++++++++--
 web-app/src/assets/i18n/zh-CN.json                 |  1 +
 3 files changed, 41 insertions(+), 3 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 49541f0427..ccbb2569c2 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
@@ -43,8 +43,30 @@
   </div>
   <div class="doc-content">
     <ng-container *ngIf="selectedSource">
-      <h2>{{ selectedSource.name }}</h2>
+      <div style="display: flex; justify-content: space-between">
+        <h2>{{ selectedSource.name }}</h2>
+        <button [nzLoading]="generateLoading" nz-button 
(click)="generateToken()" style="margin-right: 16px">{{
+          'alert.integration.new-token' | i18n
+        }}</button>
+      </div>
       <markdown [data]="markdownContent"></markdown>
     </ng-container>
   </div>
 </div>
+
+<nz-modal
+  [(nzVisible)]="isModalVisible"
+  nzMaskClosable="false"
+  nzWidth="40%"
+  nzTitle="API 认证 Token"
+  (nzOnCancel)="handleCancel()"
+  (nzOnOk)="handleOk()"
+  [nzOkText]="null"
+  [nzCancelText]="'common.button.return' | i18n"
+>
+  <div *nzModalContent class="-inner-content">
+    <p>'The token you generated that can be used to access the HertzBeat 
API.'</p>
+    <code>{{ token }}</code>
+    <p>此内容只会展示一次，请妥善保存Token.</p>
+  </div>
+</nz-modal>
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 ba7dfe90d0..070bb1aa89 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
@@ -6,11 +6,11 @@ import { I18NService } from '@core';
 import { ALAIN_I18N_TOKEN, I18nPipe } from '@delon/theme';
 import { SharedModule } from '@shared';
 import { NzDividerComponent } from 'ng-zorro-antd/divider';
+import { NzModalService } from 'ng-zorro-antd/modal';
 import { NzNotificationService } from 'ng-zorro-antd/notification';
 import { MarkdownModule } from 'ngx-markdown';
 
 import { AuthService } from '../../../service/auth.service';
-import {NzModalService} from "ng-zorro-antd/modal";
 
 interface DataSource {
   id: string;
@@ -54,6 +54,8 @@ export class AlertIntegrationComponent implements OnInit {
   selectedSource: DataSource | null = null;
   markdownContent: string = '';
   token: string = '';
+  isModalVisible: boolean = false;
+  generateLoading: boolean = false;
 
   constructor(
     private http: HttpClient,
@@ -97,15 +99,28 @@ export class AlertIntegrationComponent implements OnInit {
   }
 
   public generateToken() {
+    this.generateLoading = true;
     this.authSvc.generateToken().subscribe(message => {
       if (message.code === 0) {
         this.token = message.data?.token;
+        this.isModalVisible = true;
       } else {
-        this.notifySvc.warning('Failed generate token', message.msg);
+        this.notifySvc.warning('Failed to generate token', message.msg);
       }
+      this.generateLoading = false;
     });
   }
 
+  handleCancel(): void {
+    this.isModalVisible = false;
+    this.token = '';
+  }
+
+  handleOk(): void {
+    this.isModalVisible = false;
+    this.token = '';
+  }
+
   private loadMarkdownContent(source: DataSource) {
     const lang = this.i18nSvc.currentLang;
     const path = `${MARKDOWN_DOC_PATH}/${source.id}.${lang}.md`;
diff --git a/web-app/src/assets/i18n/zh-CN.json 
b/web-app/src/assets/i18n/zh-CN.json
index b65bfa25bd..f02620b307 100644
--- a/web-app/src/assets/i18n/zh-CN.json
+++ b/web-app/src/assets/i18n/zh-CN.json
@@ -384,6 +384,7 @@
   "alert.integration.source.prometheus": "Prometheus",
   "alert.integration.source.alertmanager": "Alertmanager",
   "alert.integration.source.tencent": "腾讯云监控",
+  "alert.integration.new-token": "点击生成 Token",
   "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