OpenSource/hertzbeat
Public Access
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[web-app]i18n for alert center

Browse Source
This commit is contained in:
tomsun28
2022-04-11 13:21:22 +08:00
parent 2de1aa4069
commit b78f463ed1
5 changed files with 130 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
web-app/src/app/routes/alert/alert-center/alert-center.component.html
View File

@@ -3,12 +3,12 @@
<nz-breadcrumb-item>
<a [routerLink]="['/']">
<i nz-icon nzType="home"></i>
<span>仪表盘</span>
<span>{{ 'menu.dashboard' | i18n }}</span>
</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item>
<i nz-icon nzType="alert"></i>
<span>告警中心</span>
<span>{{ 'menu.alert.center' | i18n }}</span>
</nz-breadcrumb-item>
</nz-breadcrumb>
<nz-divider></nz-divider>
@@ -16,26 +16,28 @@
<div>
<button nz-button nzType="primary" (click)="onDeleteAlerts()">
<i nz-icon nzType="delete" nzTheme="outline"></i>
删除告警
{{ 'alert.center.delete' | i18n }}
</button>
<button nz-button nzType="primary" (click)="onMarkReadAlerts()">
<i nz-icon nzType="down-circle" nzTheme="outline"></i>
标记已处理
{{ 'alert.center.deal' | i18n }}
</button>
<button nz-button nzType="primary" (click)="onMarkUnReadAlerts()">
<i nz-icon nzType="up-circle" nzTheme="outline"></i>
标记未处理
{{ 'alert.center.no-deal' | i18n }}
</button>
<button nz-button nzType="primary" (click)="sync()" nz-tooltip nzTooltipTitle="刷新">
<button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
<i nz-icon nzType="sync" nzTheme="outline"></i>
</button>
<button style="margin-right: 25px; float: right" nz-button nzType="primary" (click)="onFilterSearchAlerts()"> 搜索 </button>
<button style="margin-right: 25px; float: right" nz-button nzType="primary" (click)="onFilterSearchAlerts()">
{{ 'common.search' | i18n }}
</button>
<input
style="margin-right: 5px; float: right; width: 150px; border-radius: 9px; text-align: center"
nz-input
type="text"
placeholder="搜索告警内容"
[placeholder]="'alert.center.search' | i18n"
nzSize="default"
(keyup.enter)="onFilterSearchAlerts()"
[(ngModel)]="filterContent"
@@ -43,23 +45,24 @@
<nz-select
style="margin-right: 10px; float: right; width: 120px"
nzAllowClear
[nzPlaceHolder]="'告警状态过滤'"
[nzPlaceHolder]="'alert.center.filter-status' | i18n"
[(ngModel)]="filterStatus"
>
<nz-option nzLabel="全部状态" nzValue="9"></nz-option>
<nz-option nzLabel="未处理" nzValue="0"></nz-option>
<nz-option nzLabel="已处理" nzValue="3"></nz-option>
<nz-option [nzLabel]="'alert.status.all' | i18n" nzValue="9"></nz-option>
<nz-option [nzLabel]="'alert.status.0' | i18n" nzValue="0"></nz-option>
<nz-option [nzLabel]="'alert.status.2' | i18n" nzValue="2"></nz-option>
<nz-option [nzLabel]="'alert.status.3' | i18n" nzValue="3"></nz-option>
</nz-select>
<nz-select
style="margin-right: 10px; float: right; width: 120px"
nzAllowClear
[nzPlaceHolder]="'告警级别过滤'"
[nzPlaceHolder]="'alert.center.filter-priority' | i18n"
[(ngModel)]="filterPriority"
>
<nz-option nzLabel="全部级别" nzValue="9"></nz-option>
<nz-option nzLabel="警告级别" nzValue="2"></nz-option>
<nz-option nzLabel="严重级别" nzValue="1"></nz-option>
<nz-option nzLabel="紧急级别" nzValue="0"></nz-option>
<nz-option [nzLabel]="'alert.priority.all' | i18n" nzValue="9"></nz-option>
<nz-option [nzLabel]="'alert.priority.2' | i18n" nzValue="2"></nz-option>
<nz-option [nzLabel]="'alert.priority.1' | i18n" nzValue="1"></nz-option>
<nz-option [nzLabel]="'alert.priority.0' | i18n" nzValue="0"></nz-option>
</nz-select>
</div>
@@ -81,13 +84,13 @@
<thead>
<tr>
<th nzAlign="center" nzLeft nzWidth="4%" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
<th nzAlign="center" nzLeft>告警指标</th>
<th nzAlign="center">所属监控</th>
<th nzAlign="center">级别</th>
<th nzAlign="center">告警内容</th>
<th nzAlign="center">状态</th>
<th nzAlign="center">告警时间</th>
<th nzAlign="center">操作</th>
<th nzAlign="center" nzLeft>{{ 'alert.center.target' | i18n }}</th>
<th nzAlign="center">{{ 'alert.center.monitor' | i18n }}</th>
<th nzAlign="center">{{ 'alert.center.priority' | i18n }}</th>
<th nzAlign="center">{{ 'alert.center.content' | i18n }}</th>
<th nzAlign="center">{{ 'alert.center.status' | i18n }}</th>
<th nzAlign="center">{{ 'alert.center.time' | i18n }}</th>
<th nzAlign="center">{{ 'common.edit' | i18n }}</th>
</tr>
</thead>
<tbody>
@@ -102,30 +105,36 @@
<td nzAlign="center">
<nz-tag *ngIf="data.priority == 0" nzColor="red">
<i nz-icon nzType="bell" nzTheme="outline"></i>
<span>紧急告警</span>
<span>{{ 'alert.priority.0' | i18n }}</span>
</nz-tag>
<nz-tag *ngIf="data.priority == 1" nzColor="orange">
<i nz-icon nzType="bell" nzTheme="outline"></i>
<span>严重告警</span>
<span>{{ 'alert.priority.1' | i18n }}</span>
</nz-tag>
<nz-tag *ngIf="data.priority == 2" nzColor="yellow">
<i nz-icon nzType="bell" nzTheme="outline"></i>
<span>警告告警</span>
<span>{{ 'alert.priority.2' | i18n }}</span>
</nz-tag>
</td>
<td nzAlign="center">{{ data.content }}</td>
<td nzAlign="center">
{{ data.status === 0 ? '未处理' : '已处理' }}
{{ 'alert.status.' + data.status | i18n }}
</td>
<td nzAlign="center">{{ data.gmtCreate | date: 'YYYY-MM-dd HH:mm:ss' }}</td>
<td nzAlign="center">
<button nz-button nzType="primary" (click)="onDeleteOneAlert(data.id)" nz-tooltip nzTooltipTitle="删除告警">
<button nz-button nzType="primary" (click)="onDeleteOneAlert(data.id)" nz-tooltip [nzTooltipTitle]="'alert.center.delete' | i18n">
<i nz-icon nzType="delete" nzTheme="outline"></i>
</button>
<button nz-button nzType="primary" (click)="onMarkReadOneAlert(data.id)" nz-tooltip nzTooltipTitle="标记已处理">
<button nz-button nzType="primary" (click)="onMarkReadOneAlert(data.id)" nz-tooltip [nzTooltipTitle]="'alert.center.deal' | i18n">
<i nz-icon nzType="down-circle" nzTheme="outline"></i>
</button>
<button nz-button nzType="primary" (click)="onMarkUnReadOneAlert(data.id)" nz-tooltip nzTooltipTitle="标记未处理">
<button
nz-button
nzType="primary"
(click)="onMarkUnReadOneAlert(data.id)"
nz-tooltip
[nzTooltipTitle]="'alert.center.no-deal' | i18n"
>
<i nz-icon nzType="up-circle" nzTheme="outline"></i>
</button>
</td>
@@ -133,4 +142,4 @@
</tbody>
</nz-table>
<ng-template #rangeTemplate> 总量 {{ total }} </ng-template>
<ng-template #rangeTemplate> {{ 'common.total' | i18n }} {{ total }} </ng-template>

65
web-app/src/app/routes/alert/alert-center/alert-center.component.ts
View File

@@ -1,4 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { Component, Inject, OnInit } from '@angular/core';
import { I18NService } from '@core';
import { ALAIN_I18N_TOKEN } from '@delon/theme';
import { NzModalService } from 'ng-zorro-antd/modal';
import { NzNotificationService } from 'ng-zorro-antd/notification';
import { NzTableQueryParams } from 'ng-zorro-antd/table';
@@ -12,7 +14,12 @@ import { AlertService } from '../../../service/alert.service';
styles: []
})
export class AlertCenterComponent implements OnInit {
constructor(private notifySvc: NzNotificationService, private modal: NzModalService, private alertSvc: AlertService) {}
constructor(
private notifySvc: NzNotificationService,
private modal: NzModalService,
private alertSvc: AlertService,
@Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService
) {}
pageIndex: number = 1;
pageSize: number = 8;
@@ -87,13 +94,13 @@ export class AlertCenterComponent implements OnInit {
onDeleteAlerts() {
if (this.checkedAlertIds == null || this.checkedAlertIds.size === 0) {
this.notifySvc.warning('未选中任何待删除项！', '');
this.notifySvc.warning(this.i18nSvc.fanyi('alert.center.notify.no-delete'), '');
return;
}
this.modal.confirm({
nzTitle: '请确认是否批量删除！',
nzOkText: '确定',
nzCancelText: '取消',
nzTitle: this.i18nSvc.fanyi('alert.center.confirm.delete-batch'),
nzOkText: this.i18nSvc.fanyi('common.button.ok'),
nzCancelText: this.i18nSvc.fanyi('common.button.cancel'),
nzOkDanger: true,
nzOkType: 'primary',
nzOnOk: () => this.deleteAlerts(this.checkedAlertIds)
@@ -102,13 +109,13 @@ export class AlertCenterComponent implements OnInit {
onMarkReadAlerts() {
if (this.checkedAlertIds == null || this.checkedAlertIds.size === 0) {
this.notifySvc.warning('未选中任何待标记项！', '');
this.notifySvc.warning(this.i18nSvc.fanyi('alert.center.notify.no-mark'), '');
return;
}
this.modal.confirm({
nzTitle: '请确认是否批量标记已处理！',
nzOkText: '确定',
nzCancelText: '取消',
nzTitle: this.i18nSvc.fanyi('alert.center.confirm.mark-done-batch'),
nzOkText: this.i18nSvc.fanyi('common.button.ok'),
nzCancelText: this.i18nSvc.fanyi('common.button.cancel'),
nzOkDanger: true,
nzOkType: 'primary',
nzOnOk: () => this.updateAlertsStatus(this.checkedAlertIds, 3)
@@ -116,13 +123,13 @@ export class AlertCenterComponent implements OnInit {
}
onMarkUnReadAlerts() {
if (this.checkedAlertIds == null || this.checkedAlertIds.size === 0) {
this.notifySvc.warning('未选中任何待标记项！', '');
this.notifySvc.warning(this.i18nSvc.fanyi('alert.center.notify.no-mark'), '');
return;
}
this.modal.confirm({
nzTitle: '请确认是否批量标记未处理！',
nzOkText: '确定',
nzCancelText: '取消',
nzTitle: this.i18nSvc.fanyi('alert.center.confirm.mark-no-batch'),
nzOkText: this.i18nSvc.fanyi('common.button.ok'),
nzCancelText: this.i18nSvc.fanyi('common.button.cancel'),
nzOkDanger: true,
nzOkType: 'primary',
nzOnOk: () => this.updateAlertsStatus(this.checkedAlertIds, 0)
@@ -133,9 +140,9 @@ export class AlertCenterComponent implements OnInit {
let alerts = new Set<number>();
alerts.add(alertId);
this.modal.confirm({
nzTitle: '请确认是否删除！',
nzOkText: '确定',
nzCancelText: '取消',
nzTitle: this.i18nSvc.fanyi('common.confirm.delete'),
nzOkText: this.i18nSvc.fanyi('common.button.ok'),
nzCancelText: this.i18nSvc.fanyi('common.button.cancel'),
nzOkDanger: true,
nzOkType: 'primary',
nzOnOk: () => this.deleteAlerts(alerts)
@@ -146,9 +153,9 @@ export class AlertCenterComponent implements OnInit {
let alerts = new Set<number>();
alerts.add(alertId);
this.modal.confirm({
nzTitle: '请确认是否标记已处理！',
nzOkText: '确定',
nzCancelText: '取消',
nzTitle: this.i18nSvc.fanyi('alert.center.confirm.mark-done'),
nzOkText: this.i18nSvc.fanyi('common.button.ok'),
nzCancelText: this.i18nSvc.fanyi('common.button.cancel'),
nzOkDanger: true,
nzOkType: 'primary',
nzOnOk: () => this.updateAlertsStatus(alerts, 3)
@@ -159,9 +166,9 @@ export class AlertCenterComponent implements OnInit {
let alerts = new Set<number>();
alerts.add(alertId);
this.modal.confirm({
nzTitle: '请确认是否标记未处理！',
nzOkText: '确定',
nzCancelText: '取消',
nzTitle: this.i18nSvc.fanyi('alert.center.confirm.mark-no'),
nzOkText: this.i18nSvc.fanyi('common.button.ok'),
nzCancelText: this.i18nSvc.fanyi('common.button.cancel'),
nzOkDanger: true,
nzOkType: 'primary',
nzOnOk: () => this.updateAlertsStatus(alerts, 0)
@@ -174,17 +181,17 @@ export class AlertCenterComponent implements OnInit {
message => {
deleteAlerts$.unsubscribe();
if (message.code === 0) {
this.notifySvc.success('删除成功！', '');
this.notifySvc.success(this.i18nSvc.fanyi('common.notify.delete-success'), '');
this.loadAlertsTable();
} else {
this.tableLoading = false;
this.notifySvc.error('删除失败！', message.msg);
this.notifySvc.error(this.i18nSvc.fanyi('common.notify.delete-fail'), message.msg);
}
},
error => {
this.tableLoading = false;
deleteAlerts$.unsubscribe();
this.notifySvc.error('删除失败！', error.msg);
this.notifySvc.error(this.i18nSvc.fanyi('common.notify.delete-fail'), error.msg);
}
);
}
@@ -195,17 +202,17 @@ export class AlertCenterComponent implements OnInit {
message => {
markAlertsStatus$.unsubscribe();
if (message.code === 0) {
this.notifySvc.success('标记成功！', '');
this.notifySvc.success(this.i18nSvc.fanyi('common.notify.mark-success'), '');
this.loadAlertsTable();
} else {
this.tableLoading = false;
this.notifySvc.error('标记失败！', message.msg);
this.notifySvc.error(this.i18nSvc.fanyi('common.notify.mark-fail'), message.msg);
}
},
error => {
this.tableLoading = false;
markAlertsStatus$.unsubscribe();
this.notifySvc.error('标记失败！', error.msg);
this.notifySvc.error(this.i18nSvc.fanyi('common.notify.mark-fail'), error.msg);
}
);
}

2
web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html
View File

@@ -162,4 +162,4 @@
</tbody>
</nz-table>
<ng-template #rangeTemplate> {{ 'monitors.total' | i18n }} {{ total }} </ng-template>
<ng-template #rangeTemplate> {{ 'common.total' | i18n }} {{ total }} </ng-template>

27
web-app/src/assets/i18n/en-US.json
View File

@@ -80,17 +80,39 @@
"": "Alert",
"status": {
"": "Alert Status",
"all": "All Status",
"0": "Pending",
"2": "Restored",
"3": "Processed"
},
"priority": {
"": "Alarm Level",
"": "Alarm Priority",
"all": "All Priority",
"0": "Emergency",
"1": "Critical",
"2": "Warning"
}
},
"alert.center.delete": "Delete Alerts",
"alert.center.deal": "Mark Processed",
"alert.center.no-deal": "Mark Pending",
"alert.center.search": "Search Alert Content",
"alert.center.filter-status": "Filter Alert Status",
"alert.center.filter-priority": "Filter Alert Priority",
"alert.center.target": "Metric Target",
"alert.center.monitor": "Belong Monitor",
"alert.center.priority": "Priority",
"alert.center.content": "Alert Content",
"alert.center.status": "Status",
"alert.center.time": "Alert Time",
"alert.center.notify.no-delete": "No items selected for deletion!",
"alert.center.confirm.delete": "Please confirm whether to delete!",
"alert.center.confirm.delete-batch": "Please confirm whether to delete in batch!",
"alert.center.notify.no-mark": "No items selected for mark!",
"alert.center.confirm.mark-done-batch": "Please confirm whether to mark processed in batch!",
"alert.center.confirm.mark-done": "Please confirm whether to mark processed!",
"alert.center.confirm.mark-no-batch": "Please confirm whether to mark Pending in batch!",
"alert.center.confirm.mark-no": "Please confirm whether to mark Pending!",
"dashboard.alerts.title": "Recently Alerts List",
"dashboard.alerts.enter": "Go Alert Center",
"dashboard.alerts.distribute": "The Distribution Of Alerts",
@@ -151,6 +173,7 @@
"common.edit-time": "Last Update Time",
"common.new-time": "Create Time",
"common.edit": "Operate",
"common.total": "Total",
"common.notify.no-select-edit": "No items selected for editing!",
"common.notify.one-select-edit": "Only one selection can be edited!",
"common.confirm.delete": "Please confirm whether to delete!",
@@ -163,6 +186,8 @@
"common.confirm.cancel": "Please confirm whether to cancel monitor!",
"common.notify.cancel-success": "Cancel Success!",
"common.notify.cancel-fail": "Cancel Failed!",
"common.notify.mark-success": "Mark Success!",
"common.notify.mark-fail": "Mark Failed!",
"common.notify.no-select-enable": "No items selected for enable!",
"common.confirm.enable-batch": "Please confirm whether to enable monitor in batches!",
"common.confirm.enable": "Please confirm whether to enable monitor!",

27
web-app/src/assets/i18n/zh-CN.json
View File

@@ -80,17 +80,39 @@
"": "告警",
"status": {
"": "告警状态",
"0": "待处理",
"all": "全部状态",
"0": "未处理",
"2": "已恢复",
"3": "已处理"
},
"priority": {
"": "告警级别",
"all": "全部级别",
"0": "紧急告警",
"1": "严重告警",
"2": "警告告警"
}
},
"alert.center.delete": "删除告警",
"alert.center.deal": "标记已处理",
"alert.center.no-deal": "标记未处理",
"alert.center.search": "搜索告警内容",
"alert.center.filter-status": "告警状态过滤",
"alert.center.filter-priority": "告警级别过滤",
"alert.center.target": "告警指标",
"alert.center.monitor": "所属监控",
"alert.center.priority": "级别",
"alert.center.content": "告警内容",
"alert.center.status": "状态",
"alert.center.time": "告警时间",
"alert.center.notify.no-delete": "未选中任何待删除项!",
"alert.center.confirm.delete": "请确认是否删除!",
"alert.center.confirm.delete-batch": "请确认是否批量删除!",
"alert.center.notify.no-mark": "未选中任何待标记项!",
"alert.center.confirm.mark-done-batch": "请确认是否批量标记已处理!",
"alert.center.confirm.mark-done": "请确认是否标记已处理!",
"alert.center.confirm.mark-no-batch": "请确认是否批量标记未处理!",
"alert.center.confirm.mark-no": "请确认是否标记未处理!",
"dashboard.alerts.title": "最近告警列表",
"dashboard.alerts.enter": "进入告警中心",
"dashboard.alerts.distribute": "告警分布",
@@ -151,6 +173,7 @@
"common.edit-time": "更新时间",
"common.new-time": "创建时间",
"common.edit": "操作",
"common.total": "总量",
"common.notify.no-select-edit": "未选中任何待编辑项!",
"common.notify.one-select-edit": "只能对一个选中项进行编辑!",
"common.confirm.delete": "请确认是否删除!",
@@ -158,6 +181,8 @@
"common.confirm.delete-batch": "请确认是否批量删除!",
"common.notify.delete-success": "删除成功!",
"common.notify.delete-fail": "删除失败!",
"common.notify.mark-success": "标记成功!",
"common.notify.mark-fail": "标记失败!",
"common.notify.no-select-cancel": "未选中任何待取消项!",
"common.confirm.cancel-batch": "请确认是否批量取消监控!",
"common.confirm.cancel": "请确认是否取消监控!",