This is an automated email from the ASF dual-hosted git repository.
gongchao pushed a commit to branch alarm-center-ui-update
in repository https://gitbox.apache.org/repos/asf/hertzbeat.git
commit 41c28ce940a7ef573411b51c9d81c61813f3fe17
Author: tomsun28 <tomsu...@outlook.com>
AuthorDate: Sun Jan 5 00:34:33 2025 +0800
[improve] update alarm center
Signed-off-by: tomsun28 <tomsu...@outlook.com>
---
.../alert/notice/impl/DbAlertStoreHandlerImpl.java | 2 +
.../common/entity/alerter/GroupAlert.java | 21 ++++++
.../common/entity/alerter/SingleAlert.java | 21 ++++++
web-app/src/app/pojo/SingleAlert.ts | 2 +-
.../alert/alert-center/alert-center.component.html | 77 +++++++++++-----------
.../alert/alert-center/alert-center.component.less | 21 ++++--
web-app/src/assets/i18n/en-US.json | 1 +
web-app/src/assets/i18n/zh-CN.json | 1 +
web-app/src/assets/i18n/zh-TW.json | 1 +
9 files changed, 100 insertions(+), 47 deletions(-)
diff --git
a/hertzbeat-alerter/src/main/java/org/apache/hertzbeat/alert/notice/impl/DbAlertStoreHandlerImpl.java
b/hertzbeat-alerter/src/main/java/org/apache/hertzbeat/alert/notice/impl/DbAlertStoreHandlerImpl.java
index bf6b1325b..dbb044513 100644
---
a/hertzbeat-alerter/src/main/java/org/apache/hertzbeat/alert/notice/impl/DbAlertStoreHandlerImpl.java
+++
b/hertzbeat-alerter/src/main/java/org/apache/hertzbeat/alert/notice/impl/DbAlertStoreHandlerImpl.java
@@ -65,6 +65,7 @@ final class DbAlertStoreHandlerImpl implements
AlertStoreHandler {
singleAlert.setActiveAt(existAlert.getActiveAt());
}
singleAlert.setTriggerTimes(existAlert.getTriggerTimes() + 1);
+ singleAlert.setGmtCreate(existAlert.getGmtCreate());
}
// Save new/updated alert
alertFingerprints.add(singleAlert.getFingerprint());
@@ -89,6 +90,7 @@ final class DbAlertStoreHandlerImpl implements
AlertStoreHandler {
}
// Update alert group ID
groupAlert.setId(existGroupAlert.getId());
+ groupAlert.setGmtCreate(existGroupAlert.getGmtCreate());
}
// 4. Save alert group
diff --git
a/hertzbeat-common/src/main/java/org/apache/hertzbeat/common/entity/alerter/GroupAlert.java
b/hertzbeat-common/src/main/java/org/apache/hertzbeat/common/entity/alerter/GroupAlert.java
index 9232f3fd9..36ea5d97c 100644
---
a/hertzbeat-common/src/main/java/org/apache/hertzbeat/common/entity/alerter/GroupAlert.java
+++
b/hertzbeat-common/src/main/java/org/apache/hertzbeat/common/entity/alerter/GroupAlert.java
@@ -29,6 +29,7 @@ import jakarta.persistence.Id;
import jakarta.persistence.Index;
import jakarta.persistence.Table;
import jakarta.persistence.Transient;
+import java.time.LocalDateTime;
import java.util.List;
import java.util.Map;
import lombok.AllArgsConstructor;
@@ -36,6 +37,10 @@ import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
import
org.apache.hertzbeat.common.entity.manager.JsonStringListAttributeConverter;
+import org.springframework.data.annotation.CreatedBy;
+import org.springframework.data.annotation.CreatedDate;
+import org.springframework.data.annotation.LastModifiedBy;
+import org.springframework.data.annotation.LastModifiedDate;
import org.springframework.data.jpa.domain.support.AuditingEntityListener;
/**
@@ -82,6 +87,22 @@ public class GroupAlert {
@Column(length = 2048)
private List<String> alertFingerprints;
+ @Schema(title = "The creator of this record", example = "tom")
+ @CreatedBy
+ private String creator;
+
+ @Schema(title = "This record was last modified by", example = "tom")
+ @LastModifiedBy
+ private String modifier;
+
+ @Schema(title = "This record creation time (millisecond timestamp)")
+ @CreatedDate
+ private LocalDateTime gmtCreate;
+
+ @Schema(title = "Record the latest modification time (timestamp in
milliseconds)")
+ @LastModifiedDate
+ private LocalDateTime gmtUpdate;
+
@Transient
private List<SingleAlert> alerts;
}
diff --git
a/hertzbeat-common/src/main/java/org/apache/hertzbeat/common/entity/alerter/SingleAlert.java
b/hertzbeat-common/src/main/java/org/apache/hertzbeat/common/entity/alerter/SingleAlert.java
index a6d64fe73..f7b41b871 100644
---
a/hertzbeat-common/src/main/java/org/apache/hertzbeat/common/entity/alerter/SingleAlert.java
+++
b/hertzbeat-common/src/main/java/org/apache/hertzbeat/common/entity/alerter/SingleAlert.java
@@ -28,12 +28,17 @@ import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import jakarta.persistence.Index;
import jakarta.persistence.Table;
+import java.time.LocalDateTime;
import java.util.Map;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.apache.hertzbeat.common.util.JsonUtil;
+import org.springframework.data.annotation.CreatedBy;
+import org.springframework.data.annotation.CreatedDate;
+import org.springframework.data.annotation.LastModifiedBy;
+import org.springframework.data.annotation.LastModifiedDate;
import org.springframework.data.jpa.domain.support.AuditingEntityListener;
/**
@@ -85,6 +90,22 @@ public class SingleAlert {
@Schema(title = "End At, when status is resolved has", example = "null")
private Long endAt;
+ @Schema(title = "The creator of this record", example = "tom")
+ @CreatedBy
+ private String creator;
+
+ @Schema(title = "This record was last modified by", example = "tom")
+ @LastModifiedBy
+ private String modifier;
+
+ @Schema(title = "This record creation time (millisecond timestamp)")
+ @CreatedDate
+ private LocalDateTime gmtCreate;
+
+ @Schema(title = "Record the latest modification time (timestamp in
milliseconds)")
+ @LastModifiedDate
+ private LocalDateTime gmtUpdate;
+
@Override
public SingleAlert clone() {
// deep clone
diff --git a/web-app/src/app/pojo/SingleAlert.ts
b/web-app/src/app/pojo/SingleAlert.ts
index 62120c680..f5c64b143 100644
--- a/web-app/src/app/pojo/SingleAlert.ts
+++ b/web-app/src/app/pojo/SingleAlert.ts
@@ -27,7 +27,7 @@ export class SingleAlert {
startAt!: number;
endAt!: number;
activeAt!: number;
- triggerTime!: number;
+ triggerTimes!: number;
creator!: string;
modifier!: string;
gmtCreate!: number;
diff --git
a/web-app/src/app/routes/alert/alert-center/alert-center.component.html
b/web-app/src/app/routes/alert/alert-center/alert-center.component.html
index c084edee3..a2e116325 100644
--- a/web-app/src/app/routes/alert/alert-center/alert-center.component.html
+++ b/web-app/src/app/routes/alert/alert-center/alert-center.component.html
@@ -33,18 +33,6 @@
</button>
</ng-template>
<ng-template #right>
- <nz-select
- class="mobile-hide"
- nzAllowClear
- [nzPlaceHolder]="'alert.center.filter-priority' | i18n"
- [(ngModel)]="filterPriority"
- (ngModelChange)="loadAlertsTable()"
- >
- <nz-option [nzLabel]="'alert.severity.all' | i18n"
[nzValue]="9"></nz-option>
- <nz-option [nzLabel]="'alert.severity.2' | i18n"
[nzValue]="2"></nz-option>
- <nz-option [nzLabel]="'alert.severity.1' | i18n"
[nzValue]="1"></nz-option>
- <nz-option [nzLabel]="'alert.severity.0' | i18n"
[nzValue]="0"></nz-option>
- </nz-select>
<nz-select
class="mobile-hide"
nzAllowClear
@@ -80,33 +68,29 @@
<div class="alert-meta-info">
<span class="alert-time">
<i nz-icon nzType="clock-circle" nzTheme="outline"></i>
- {{ group.gmtCreate | date : 'yyyy-MM-dd HH:mm:ss' }}
- </span>
- <span class="alert-count" *ngIf="group?.alerts">
- <i nz-icon nzType="alert" nzTheme="outline"></i>
- {{ 'alert.center.time.tip' | i18n : { times: group?.alerts?.length
} }}
+ {{ group.gmtUpdate | date : 'yyyy-MM-dd HH:mm:ss' }}
</span>
</div>
</div>
<div class="alert-actions">
- <button
- *ngIf="group.status != 'firing'"
- nz-button
- (click)="onMarkReadOneAlert(group.id)"
- nz-tooltip
- [nzTooltipTitle]="'alert.center.deal' | i18n"
- >
- <i nz-icon nzType="down-circle" nzTheme="outline"></i>
- </button>
- <button
- *ngIf="group.status == 'firing'"
- nz-button
- (click)="onMarkUnReadOneAlert(group.id)"
- nz-tooltip
- [nzTooltipTitle]="'alert.center.no-deal' | i18n"
- >
- <i nz-icon nzType="up-circle" nzTheme="outline"></i>
- </button>
+ <!-- <button-->
+ <!-- *ngIf="group.status != 'firing'"-->
+ <!-- nz-button-->
+ <!-- (click)="onMarkReadOneAlert(group.id)"-->
+ <!-- nz-tooltip-->
+ <!-- [nzTooltipTitle]="'alert.center.deal' | i18n"-->
+ <!-- >-->
+ <!-- <i nz-icon nzType="down-circle" nzTheme="outline"></i>-->
+ <!-- </button>-->
+ <!-- <button-->
+ <!-- *ngIf="group.status == 'firing'"-->
+ <!-- nz-button-->
+ <!-- (click)="onMarkUnReadOneAlert(group.id)"-->
+ <!-- nz-tooltip-->
+ <!-- [nzTooltipTitle]="'alert.center.no-deal' | i18n"-->
+ <!-- >-->
+ <!-- <i nz-icon nzType="up-circle" nzTheme="outline"></i>-->
+ <!-- </button>-->
<button nz-button nzDanger (click)="onDeleteOneAlert(group.id)"
nz-tooltip [nzTooltipTitle]="'alert.center.delete' | i18n">
<i nz-icon nzType="delete" nzTheme="outline"></i>
</button>
@@ -117,6 +101,7 @@
<div class="alert-details">
<nz-collapse nzGhost>
<nz-collapse-panel
+ #panel
*ngFor="let item of group.alerts"
[nzHeader]="alertHeader"
[nzExtra]="alertExtra"
@@ -127,12 +112,22 @@
<div class="alert-content">{{ item.content }}</div>
</ng-template>
<ng-template #alertExtra>
- <div class="alert-time">{{ item.activeAt | date : 'yyyy-MM-dd
HH:mm:ss' }}</div>
+ <div class="alert-time">{{
+ item.endAt ? (item.endAt | date : 'yyyy-MM-dd HH:mm:ss') :
(item.activeAt | date : 'yyyy-MM-dd HH:mm:ss')
+ }}</div>
</ng-template>
- <ng-template #expandedIcon let-active>
- <i nz-icon [nzType]="active ? 'caret-down' : 'caret-right'"></i>
+ <ng-template #expandedIcon>
+ <i nz-icon [nzType]="panel.nzActive ? 'caret-down' :
'caret-right'"></i>
</ng-template>
+ <!-- Trigger Times -->
+ <div class="detail-section" *ngIf="item.triggerTimes">
+ <span class="alert-count" *ngIf="group?.alerts">
+ <i style="margin-right: 4px" nz-icon nzType="alert"
nzTheme="outline"></i>
+ {{ 'alert.center.time.tip' | i18n : { times: item.triggerTimes }
}}
+ </span>
+ </div>
+
<!-- Labels -->
<div class="detail-section" *ngIf="item.labels">
<div class="section-title">{{ 'alert.center.labels' | i18n }}</div>
@@ -162,10 +157,14 @@
<span class="time-label">{{ 'alert.center.first-time' | i18n
}}:</span>
<span class="time-value">{{ item.startAt | date : 'yyyy-MM-dd
HH:mm:ss' }}</span>
</div>
- <div class="time-item">
+ <div *ngIf="item.activeAt" class="time-item">
<span class="time-label">{{ 'alert.center.last-time' | i18n
}}:</span>
<span class="time-value">{{ item.activeAt | date : 'yyyy-MM-dd
HH:mm:ss' }}</span>
</div>
+ <div *ngIf="item.endAt" class="time-item">
+ <span class="time-label">{{ 'alert.center.end-time' | i18n
}}:</span>
+ <span class="time-value">{{ item.endAt | date : 'yyyy-MM-dd
HH:mm:ss' }}</span>
+ </div>
</div>
</div>
</nz-collapse-panel>
diff --git
a/web-app/src/app/routes/alert/alert-center/alert-center.component.less
b/web-app/src/app/routes/alert/alert-center/alert-center.component.less
index 089a016a4..5afdf06d2 100644
--- a/web-app/src/app/routes/alert/alert-center/alert-center.component.less
+++ b/web-app/src/app/routes/alert/alert-center/alert-center.component.less
@@ -29,7 +29,7 @@
.alert-info {
flex: 1;
-
+
.alert-labels {
display: flex;
flex-wrap: wrap;
@@ -40,7 +40,7 @@
border-radius: 2px;
}
}
-
+
.alert-meta-info {
display: flex;
gap: 16px;
@@ -52,7 +52,7 @@
margin-right: 4px;
}
- .alert-time, .alert-count {
+ .alert-time {
display: flex;
align-items: center;
}
@@ -97,7 +97,7 @@
padding: 8px 12px;
align-items: center;
cursor: pointer;
-
+
&:hover {
background-color: #fafafa;
}
@@ -121,7 +121,7 @@
.ant-collapse-content {
border-top: 1px solid #f0f0f0;
-
+
.ant-collapse-content-box {
padding: 12px;
}
@@ -143,6 +143,13 @@
margin-bottom: 8px;
font-weight: 500;
}
+
+ .alert-count {
+ display: flex;
+ align-items: center;
+ color: #8c8c8c;
+ font-size: 12px;
+ }
}
.alert-annotations {
@@ -201,11 +208,11 @@
&.status-firing {
border-left-color: #ff4d4f;
}
-
+
&.status-resolved {
border-left-color: #52c41a;
}
-
+
&.status-pending {
border-left-color: #faad14;
}
diff --git a/web-app/src/assets/i18n/en-US.json
b/web-app/src/assets/i18n/en-US.json
index 9535b462b..a035ecfd3 100644
--- a/web-app/src/assets/i18n/en-US.json
+++ b/web-app/src/assets/i18n/en-US.json
@@ -257,6 +257,7 @@
"alert.center.time.tip": "Alerts were triggered {{times}} times during this
alert period",
"alert.center.first-time": "Start Time",
"alert.center.last-time": "Latest Time",
+ "alert.center.end-time": "End Time",
"alert.center.confirm.delete": "Please confirm whether to delete!",
"alert.center.confirm.clear-all": "Please confirm whether to clear all
alerts!",
"alert.center.notify.no-mark": "No items selected for mark!",
diff --git a/web-app/src/assets/i18n/zh-CN.json
b/web-app/src/assets/i18n/zh-CN.json
index 2124edd94..98fb18efe 100644
--- a/web-app/src/assets/i18n/zh-CN.json
+++ b/web-app/src/assets/i18n/zh-CN.json
@@ -258,6 +258,7 @@
"alert.center.time.tip": "此告警期间累计触发 {{times}} 次告警",
"alert.center.first-time": "开始",
"alert.center.last-time": "最新",
+ "alert.center.end-time": "结束",
"alert.center.confirm.delete": "请确认是否删除!",
"alert.center.confirm.clear-all": "请确认是否清空所有告警记录!",
"alert.center.notify.no-mark": "未选中任何待标记项!",
diff --git a/web-app/src/assets/i18n/zh-TW.json
b/web-app/src/assets/i18n/zh-TW.json
index 94ef1c2b2..1c1f030e3 100644
--- a/web-app/src/assets/i18n/zh-TW.json
+++ b/web-app/src/assets/i18n/zh-TW.json
@@ -270,6 +270,7 @@
"alert.center.time.tip": "此告警期間累計觸發 {{times}} 次告警",
"alert.center.first-time": "開始",
"alert.center.last-time": "最新",
+ "alert.center.end-time": "结束",
"alert.center.confirm.delete": "請確認是否刪除!",
"alert.center.confirm.clear-all": "請確認是否清空所有告警記錄!",
"alert.center.notify.no-mark": "未選中任何待標記項!",
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscr...@hertzbeat.apache.org
For additional commands, e-mail: notifications-h...@hertzbeat.apache.org
