This is an automated email from the ASF dual-hosted git repository.
zhaoqingran pushed a commit to branch audio
in repository https://gitbox.apache.org/repos/asf/hertzbeat.git
commit f31e598ea5ccdc94c5bffd560db8fe49dfac5ebd
Author: Logic <zqr10...@126.com>
AuthorDate: Wed Dec 25 23:08:54 2024 +0800
feat(web-app): add alert sound functionality
- Implement AlertSoundService to handle audio playback
- Update NotifyComponent to use AlertSoundService for playing alert sounds
- Add test button for alert sound in NotifyComponent
- Configure audio asset in angular.json
---
web-app/angular.json | 7 ++++-
.../app/layout/basic/widgets/notify.component.ts | 20 +++++++++++++-
web-app/src/app/service/alert-sound.service.ts | 30 +++++++++++++++++++++
web-app/src/assets/audio/default-alert.mp3 | Bin 0 -> 12096 bytes
4 files changed, 55 insertions(+), 2 deletions(-)
diff --git a/web-app/angular.json b/web-app/angular.json
index bca121a42..477dfeb62 100644
--- a/web-app/angular.json
+++ b/web-app/angular.json
@@ -27,8 +27,13 @@
"tsConfig": "tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
- "src/assets",
"src/favicon.ico",
+ "src/assets",
+ {
+ "glob": "**/*",
+ "input": "src/assets/audio",
+ "output": "/assets/audio"
+ },
{
"glob": "**/*",
"input":
"./node_modules/@ant-design/icons-angular/src/inline-svg/",
diff --git a/web-app/src/app/layout/basic/widgets/notify.component.ts
b/web-app/src/app/layout/basic/widgets/notify.component.ts
index 5d8a940ce..614385824 100644
--- a/web-app/src/app/layout/basic/widgets/notify.component.ts
+++ b/web-app/src/app/layout/basic/widgets/notify.component.ts
@@ -6,6 +6,7 @@ import { NzModalService } from 'ng-zorro-antd/modal';
import { NzNotificationService } from 'ng-zorro-antd/notification';
import { finalize } from 'rxjs/operators';
+import { AlertSoundService } from '../../../service/alert-sound.service';
import { AlertService } from '../../../service/alert.service';
@Component({
@@ -49,6 +50,12 @@ import { AlertService } from
'../../../service/alert.service';
<nz-divider nzType="vertical"></nz-divider>
<div class="notice-icon__clear" style="flex: 1; border-top: none;"
(click)="gotoAlertCenter()">{{ data[0].enterText }}</div>
</div>
+ <div style="padding: 8px; text-align: center; border-top: 1px solid
#f0f0f0;">
+ <button nz-button nzType="default" (click)="testAlertSound()">
+ <i nz-icon nzType="sound" nzTheme="outline"></i>
+ 测试告警声音
+ </button>
+ </div>
</nz-dropdown-menu>
}
<ng-template #listTpl>
@@ -110,13 +117,15 @@ export class HeaderNotifyComponent implements OnInit,
OnDestroy {
loading = false;
popoverVisible = false;
refreshInterval: any;
+ private previousCount = 0;
constructor(
private router: Router,
@Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService,
private notifySvc: NzNotificationService,
private alertSvc: AlertService,
private modal: NzModalService,
- private cdr: ChangeDetectorRef
+ private cdr: ChangeDetectorRef,
+ private alertSound: AlertSoundService
) {}
ngOnInit(): void {
@@ -184,6 +193,11 @@ export class HeaderNotifyComponent implements OnInit,
OnDestroy {
list.push(item);
});
this.data = this.updateNoticeData(list);
+
+ if (page.totalElements > this.previousCount) {
+ this.alertSound.playAlertSound();
+ }
+ this.previousCount = page.totalElements;
this.count = page.totalElements;
} else {
console.warn(message.msg);
@@ -259,4 +273,8 @@ export class HeaderNotifyComponent implements OnInit,
OnDestroy {
this.popoverVisible = false;
this.router.navigateByUrl(`/monitors/${monitorId}`);
}
+
+ testAlertSound(): void {
+ this.alertSound.playAlertSound();
+ }
}
diff --git a/web-app/src/app/service/alert-sound.service.ts
b/web-app/src/app/service/alert-sound.service.ts
new file mode 100644
index 000000000..9928e50a8
--- /dev/null
+++ b/web-app/src/app/service/alert-sound.service.ts
@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class AlertSoundService {
+ private audio: HTMLAudioElement;
+ private isPlaying = false;
+
+ constructor() {
+ this.audio = new Audio();
+ this.audio.src = '/assets/audio/default-alert.mp3';
+ this.audio.load();
+ }
+
+ playAlertSound(): void {
+ if (!this.isPlaying) {
+ this.isPlaying = true;
+ this.audio.volume = 1.0;
+ this.audio
+ .play()
+ .catch(error => {
+ console.error('Failed to play sound:', error);
+ })
+ .finally(() => {
+ this.isPlaying = false;
+ });
+ }
+ }
+}
diff --git a/web-app/src/assets/audio/default-alert.mp3
b/web-app/src/assets/audio/default-alert.mp3
new file mode 100644
index 000000000..14ffac5fc
Binary files /dev/null and b/web-app/src/assets/audio/default-alert.mp3 differ
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscr...@hertzbeat.apache.org
For additional commands, e-mail: notifications-h...@hertzbeat.apache.org
