[web-app]dashboard and monitor list i18n

This commit is contained in:
tomsun28
2022-04-10 22:14:20 +08:00
parent a7658624ab
commit f685298741
5 changed files with 162 additions and 82 deletions

View File

@@ -10,19 +10,19 @@
</div>
<div nz-col nzSpan="14" class="p-md text-white">
<nz-tag class="mb-xs">
<span>{{ 'dashboard.status.available' | i18n }} </span
<span>{{ 'monitor.status.available' | i18n }} </span
><span style="font-weight: bolder">{{ appCountService.availableSize }}</span>
</nz-tag>
<nz-tag class="mb-xs">
<span>{{ 'dashboard.status.unavailable' | i18n }} </span
<span>{{ 'monitor.status.unavailable' | i18n }} </span
><span style="font-weight: bolder">{{ appCountService.unAvailableSize }}</span>
</nz-tag>
<nz-tag class="mb-xs">
<span>{{ 'dashboard.status.unreachable' | i18n }} </span
<span>{{ 'monitor.status.unreachable' | i18n }} </span
><span style="font-weight: bolder">{{ appCountService.unReachableSize }}</span>
</nz-tag>
<nz-tag class="mb-xs">
<span>{{ 'dashboard.status.un-manage' | i18n }} </span><span style="font-weight: bolder">{{ appCountService.unManageSize }}</span>
<span>{{ 'monitor.status.un-manage' | i18n }} </span><span style="font-weight: bolder">{{ appCountService.unManageSize }}</span>
</nz-tag>
</div>
</div>
@@ -38,16 +38,16 @@
</div>
<div nz-col nzSpan="14">
<nz-tag class="mb-xs">
<span>正常 </span><span style="font-weight: bolder">{{ appCountDb.availableSize }}</span>
<span>{{ 'monitor.status.available' | i18n }} </span><span style="font-weight: bolder">{{ appCountDb.availableSize }}</span>
</nz-tag>
<nz-tag class="mb-xs">
<span>不可用 </span><span style="font-weight: bolder">{{ appCountDb.unAvailableSize }}</span>
<span>{{ 'monitor.status.unavailable' | i18n }} </span><span style="font-weight: bolder">{{ appCountDb.unAvailableSize }}</span>
</nz-tag>
<nz-tag class="mb-xs">
<span>不可达 </span><span style="font-weight: bolder">{{ appCountDb.unReachableSize }}</span>
<span>{{ 'monitor.status.unreachable' | i18n }} </span><span style="font-weight: bolder">{{ appCountDb.unReachableSize }}</span>
</nz-tag>
<nz-tag class="mb-xs">
<span>未监控 </span><span style="font-weight: bolder">{{ appCountDb.unManageSize }}</span>
<span>{{ 'monitor.status.un-manage' | i18n }} </span><span style="font-weight: bolder">{{ appCountDb.unManageSize }}</span>
</nz-tag>
</div>
</div>
@@ -63,16 +63,16 @@
</div>
<div nz-col nzSpan="14">
<nz-tag class="mb-xs">
<span>正常 </span><span style="font-weight: bolder">{{ appCountOs.availableSize }}</span>
<span>{{ 'monitor.status.available' | i18n }} </span><span style="font-weight: bolder">{{ appCountOs.availableSize }}</span>
</nz-tag>
<nz-tag class="mb-xs">
<span>不可用 </span><span style="font-weight: bolder">{{ appCountOs.unAvailableSize }}</span>
<span>{{ 'monitor.status.unavailable' | i18n }} </span><span style="font-weight: bolder">{{ appCountOs.unAvailableSize }}</span>
</nz-tag>
<nz-tag class="mb-xs">
<span>不可达 </span><span style="font-weight: bolder">{{ appCountOs.unReachableSize }}</span>
<span>{{ 'monitor.status.unreachable' | i18n }} </span><span style="font-weight: bolder">{{ appCountOs.unReachableSize }}</span>
</nz-tag>
<nz-tag class="mb-xs">
<span>未监控 </span><span style="font-weight: bolder">{{ appCountOs.unManageSize }}</span>
<span>{{ 'monitor.status.un-manage' | i18n }} </span><span style="font-weight: bolder">{{ appCountOs.unManageSize }}</span>
</nz-tag>
</div>
</div>
@@ -88,16 +88,16 @@
</div>
<div nz-col nzSpan="14">
<nz-tag class="mb-xs">
<span>正常 </span><span style="font-weight: bolder">{{ appCountCustom.availableSize }}</span>
<span>{{ 'monitor.status.available' | i18n }} </span><span style="font-weight: bolder">{{ appCountCustom.availableSize }}</span>
</nz-tag>
<nz-tag class="mb-xs">
<span>不可用 </span><span style="font-weight: bolder">{{ appCountCustom.unAvailableSize }}</span>
<span>{{ 'monitor.status.unavailable' | i18n }} </span><span style="font-weight: bolder">{{ appCountCustom.unAvailableSize }}</span>
</nz-tag>
<nz-tag class="mb-xs">
<span>不可达 </span><span style="font-weight: bolder">{{ appCountCustom.unReachableSize }}</span>
<span>{{ 'monitor.status.unreachable' | i18n }} </span><span style="font-weight: bolder">{{ appCountCustom.unReachableSize }}</span>
</nz-tag>
<nz-tag class="mb-xs">
<span>未监控 </span><span style="font-weight: bolder">{{ appCountCustom.unManageSize }}</span>
<span>{{ 'monitor.status.un-manage' | i18n }} </span><span style="font-weight: bolder">{{ appCountCustom.unManageSize }}</span>
</nz-tag>
</div>
</div>
@@ -117,21 +117,21 @@
<div nz-row nzGutter="16" style="margin-top: 10px">
<div nz-col nzXs="24" nzSm="24" nzMd="12" class="mb-md">
<nz-card nzHoverable nzTitle="最近告警列表" [nzExtra]="extraTemplate">
<nz-card nzHoverable [nzTitle]="'dashboard.alerts.title' | i18n" [nzExtra]="extraTemplate">
<nz-timeline nzMode="left">
<nz-timeline-item *ngFor="let alert of alerts; let i = index" [nzLabel]="(alert.gmtCreate | date: 'YYYY-MM-dd HH:mm:ss')?.trim()">
<p style="font-weight: 400">
<nz-tag *ngIf="alert.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="alert.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="alert.priority == 2" nzColor="yellow">
<i nz-icon nzType="bell" nzTheme="outline"></i>
<span>警告告警</span>
<span>{{ 'alert.priority.2' | i18n }}</span>
</nz-tag>
<span>[{{ alert.monitorName }}] </span>
{{ alert.content }}
@@ -165,5 +165,5 @@
</div>
<ng-template #extraTemplate>
<a [routerLink]="['/alert/center']">进入告警中心</a>
<a [routerLink]="['/alert/center']">{{ 'dashboard.alerts.enter' | i18n }}</a>
</ng-template>

View File

@@ -48,13 +48,13 @@ export class DashboardComponent implements OnInit, OnDestroy {
ngOnInit(): void {
this.appsCountTheme = {
title: {
text: '监控总览',
subtext: '监控类型纳管数量分布',
text: this.i18nSvc.fanyi('dashboard.monitors.title'),
subtext: this.i18nSvc.fanyi('dashboard.monitors.sub-title'),
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}个监控 占比({d}%)'
formatter: `{a} <br/>{b} : {c}${this.i18nSvc.fanyi('dashboard.monitors.formatter')}({d}%)`
},
legend: {
show: false,
@@ -66,7 +66,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
calculable: true,
series: [
{
name: '总量',
name: this.i18nSvc.fanyi('dashboard.monitors.total'),
type: 'pie',
selectedMode: 'single',
color: '#722ED1',
@@ -81,10 +81,10 @@ export class DashboardComponent implements OnInit, OnDestroy {
labelLine: {
show: false
},
data: [{ value: 0, name: '监控总量' }]
data: [{ value: 0, name: this.i18nSvc.fanyi('dashboard.monitors.total') }]
},
{
name: '纳管数量分布',
name: this.i18nSvc.fanyi('dashboard.monitors.distribute'),
type: 'pie',
radius: ['45%', '65%'],
labelLine: {
@@ -127,7 +127,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
};
this.alertsTheme = {
title: {
subtext: '告警分布',
subtext: this.i18nSvc.fanyi('dashboard.alerts.distribute'),
left: 'center'
},
tooltip: {
@@ -138,14 +138,14 @@ export class DashboardComponent implements OnInit, OnDestroy {
},
xAxis: {
type: 'category',
data: ['警告告警', '严重告警', '紧急告警']
data: [this.i18nSvc.fanyi('alert.priority.2'), this.i18nSvc.fanyi('alert.priority.1'), this.i18nSvc.fanyi('alert.priority.0')]
},
yAxis: {
type: 'value'
},
series: [
{
name: '告警数量',
name: this.i18nSvc.fanyi('dashboard.alerts.num'),
type: 'bar',
data: [
{
@@ -176,7 +176,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
};
this.alertsDealTheme = {
title: {
subtext: '告警处理',
subtext: this.i18nSvc.fanyi('dashboard.alerts.deal'),
left: 'center'
},
tooltip: {
@@ -184,7 +184,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
},
series: [
{
name: '告警处理率',
name: this.i18nSvc.fanyi('dashboard.alerts.deal-percent'),
type: 'gauge',
progress: {
show: true
@@ -196,7 +196,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
data: [
{
value: 100,
name: '告警处理率'
name: this.i18nSvc.fanyi('dashboard.alerts.deal-percent')
}
]
}
@@ -279,7 +279,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
}
});
// @ts-ignore
this.appsCountTheme.series[0].data = [{ value: total, name: '监控总量' }];
this.appsCountTheme.series[0].data = [{ value: total, name: this.i18nSvc.fanyi('dashboard.monitors.total') }];
// @ts-ignore
this.appsCountTheme.series[1].data = this.appsCountTableData;
this.appsCountEChartOption = this.appsCountTheme;
@@ -397,7 +397,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
this.alertsDealTheme.series[0].data = [
{
value: summary.rate,
name: '告警处理率'
name: this.i18nSvc.fanyi('dashboard.alerts.deal-percent')
}
];
this.alertsEChartOption = this.alertsTheme;

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="monitor"></i>
<span>{{ 'monitor.app.' + app | i18n }} 监控列表</span>
<span>{{ 'monitor.app.' + app | i18n }} {{ 'monitors.list' | i18n }}</span>
</nz-breadcrumb-item>
</nz-breadcrumb>
<nz-divider></nz-divider>
@@ -17,35 +17,37 @@
<button nz-button nzType="primary">
<a routerLink="/monitors/new" [queryParams]="{ app: app }">
<i nz-icon nzType="appstore-add" nzTheme="outline"></i>
新增 {{ 'monitor.app.' + app | i18n }}
{{ 'monitors.new' | i18n }} {{ 'monitor.app.' + app | i18n }}
</a>
</button>
<button nz-button nzType="primary" (click)="onEditMonitor()">
<i nz-icon nzType="edit" nzTheme="outline"></i>
编辑
{{ 'monitors.edit' | i18n }}
</button>
<button nz-button nzType="primary" (click)="onDeleteMonitors()">
<i nz-icon nzType="delete" nzTheme="outline"></i>
删除
{{ 'monitors.delete' | i18n }}
</button>
<button nz-button nzType="primary" (click)="onEnableManageMonitors()">
<i nz-icon nzType="up-circle" nzTheme="outline"></i>
启用监控
{{ 'monitors.enable' | i18n }}
</button>
<button nz-button nzType="primary" (click)="onCancelManageMonitors()">
<i nz-icon nzType="down-circle" nzTheme="outline"></i>
取消监控
{{ 'monitors.cancel' | 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)="onFilterSearchMonitors()"> 搜索 </button>
<button style="margin-right: 25px; float: right" nz-button nzType="primary" (click)="onFilterSearchMonitors()">
{{ '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]="'monitors.search.placeholder' | i18n"
nzSize="default"
(keyup.enter)="onFilterSearchMonitors()"
[(ngModel)]="filterContent"
@@ -53,14 +55,14 @@
<nz-select
style="margin-right: 10px; float: right; width: 120px"
nzAllowClear
[nzPlaceHolder]="'监控状态过滤'"
[nzPlaceHolder]="'monitors.search.filter' | i18n"
[(ngModel)]="filterStatus"
>
<nz-option nzLabel="全部状态" nzValue="9"></nz-option>
<nz-option nzLabel="监控正常" nzValue="1"></nz-option>
<nz-option nzLabel="不可用" nzValue="2"></nz-option>
<nz-option nzLabel="不可达" nzValue="3"></nz-option>
<nz-option nzLabel="未监控" nzValue="0"></nz-option>
<nz-option [nzLabel]="'monitor.status.all' | i18n" nzValue="9"></nz-option>
<nz-option [nzLabel]="'monitor.status.available' | i18n" nzValue="1"></nz-option>
<nz-option [nzLabel]="'monitor.status.unavailable' | i18n" nzValue="2"></nz-option>
<nz-option [nzLabel]="'monitor.status.unreachable' | i18n" nzValue="3"></nz-option>
<nz-option [nzLabel]="'monitor.status.un-manage' | i18n" nzValue="0"></nz-option>
</nz-select>
</div>
@@ -82,12 +84,12 @@
<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">监控Host</th>
<th nzAlign="center">监控类型</th>
<th nzAlign="center">最新修改时间</th>
<th nzAlign="center">操作</th>
<th nzAlign="center" nzLeft>{{ 'monitor.name' | i18n }}</th>
<th nzAlign="center">{{ 'monitor.status' | i18n }}</th>
<th nzAlign="center">{{ 'monitor.host' | i18n }}</th>
<th nzAlign="center">{{ 'monitor.app' | i18n }}</th>
<th nzAlign="center">{{ 'common.edit-time' | i18n }}</th>
<th nzAlign="center">{{ 'common.edit' | i18n }}</th>
</tr>
</thead>
<tbody>
@@ -101,23 +103,19 @@
<td nzAlign="center">
<nz-tag *ngIf="data.status == 0" nzColor="default">
<i nz-icon nzType="robot" nzTheme="outline"></i>
<span>未监控</span>
<span>{{ 'monitor.status.un-manage' | i18n }}</span>
</nz-tag>
<nz-tag *ngIf="data.status == 1" nzColor="success">
<i nz-icon nzType="smile" nzTheme="outline"></i>
<span>正常监控</span>
<span>{{ 'monitor.status.available' | i18n }}</span>
</nz-tag>
<nz-tag *ngIf="data.status == 2" nzColor="warning">
<i nz-icon nzType="meh" nzTheme="outline"></i>
<span>监控不可用</span>
<span>{{ 'monitor.status.unavailable' | i18n }}</span>
</nz-tag>
<nz-tag *ngIf="data.status == 3" nzColor="error">
<i nz-icon nzType="frown" nzTheme="outline"></i>
<span>监控不可达</span>
</nz-tag>
<nz-tag *ngIf="data.status == 4" nzColor="default">
<i nz-icon nzType="sync"></i>
<span>监控已挂起</span>
<span>{{ 'monitor.status.unreachable' | i18n }}</span>
</nz-tag>
</td>
<td nzAlign="center">{{ data.host }}</td>
@@ -129,16 +127,34 @@
</td>
<td nzAlign="center">{{ (data.gmtUpdate ? data.gmtUpdate : data.gmtCreate) | date: 'YYYY-MM-dd HH:mm:ss' }}</td>
<td nzAlign="center">
<button nz-button nzType="primary" (click)="onEditOneMonitor(data.id)" nz-tooltip nzTooltipTitle="修改监控">
<button nz-button nzType="primary" (click)="onEditOneMonitor(data.id)" nz-tooltip [nzTooltipTitle]="'monitors.edit-monitor' | i18n">
<i nz-icon nzType="edit" nzTheme="outline"></i>
</button>
<button nz-button nzType="primary" (click)="onDeleteOneMonitor(data.id)" nz-tooltip nzTooltipTitle="删除监控">
<button
nz-button
nzType="primary"
(click)="onDeleteOneMonitor(data.id)"
nz-tooltip
[nzTooltipTitle]="'monitors.delete-monitor' | i18n"
>
<i nz-icon nzType="delete" nzTheme="outline"></i>
</button>
<button nz-button nzType="primary" (click)="onEnableManageOneMonitor(data.id)" nz-tooltip nzTooltipTitle="启用监控">
<button
nz-button
nzType="primary"
(click)="onEnableManageOneMonitor(data.id)"
nz-tooltip
[nzTooltipTitle]="'monitors.enable' | i18n"
>
<i nz-icon nzType="up-circle" nzTheme="outline"></i>
</button>
<button nz-button nzType="primary" (click)="onCancelManageOneMonitor(data.id)" nz-tooltip nzTooltipTitle="取消监控">
<button
nz-button
nzType="primary"
(click)="onCancelManageOneMonitor(data.id)"
nz-tooltip
[nzTooltipTitle]="'monitors.cancel' | i18n"
>
<i nz-icon nzType="down-circle" nzTheme="outline"></i>
</button>
</td>
@@ -146,4 +162,4 @@
</tbody>
</nz-table>
<ng-template #rangeTemplate> 总量 {{ total }} </ng-template>
<ng-template #rangeTemplate> {{ 'monitors.total' | i18n }} {{ total }} </ng-template>

View File

@@ -2,7 +2,7 @@
"menu": {
"main": "Main",
"lang": "Language",
"dashboard": "Dashboard",
"dashboard": "DashBoard",
"search.placeholder": "SearchMonitor Name、IP",
"fullscreen": "Full Screen",
"fullscreen.exit": "Exit",
@@ -39,6 +39,8 @@
},
"monitor": {
"": "Monitor",
"name": "Monitor Name",
"host": "Monitor Host",
"category": {
"": "Category",
"service": "Service",
@@ -58,6 +60,14 @@
"oracle": "Oracle",
"redis": "Redis",
"fullsite": "SiteMap Monitor"
},
"status": {
"": "Monitor Status",
"all": "All Status",
"available": "Available",
"unavailable": "UnAvailable",
"unreachable": "UnReachable",
"un-manage": "UnManaged"
}
},
"alert": {
@@ -70,15 +80,37 @@
},
"priority": {
"": "Alarm Level",
"0": "Emergency Alert",
"1": "Serious Alert",
"2": "Warning Alert"
"0": "Emergency",
"1": "Critical",
"2": "Warning"
}
},
"dashboard.status.available": "Available",
"dashboard.status.unavailable": "Unavailable",
"dashboard.status.unreachable": "Unreachable",
"dashboard.status.un-manage": "UnManaged",
"dashboard.alerts.title": "Recently Alerts List",
"dashboard.alerts.enter": "Go Alert Center",
"dashboard.alerts.distribute": "The Distribution Of Alerts",
"dashboard.alerts.num": "Alerts Num",
"dashboard.alerts.deal": "Alerts Dealing",
"dashboard.alerts.deal-percent": "Dealing Rate",
"dashboard.monitors.total": "Monitor Total",
"dashboard.monitors.title": "Monitoring Overview",
"dashboard.monitors.sub-title": "The Distribution Of Monitors",
"dashboard.monitors.formatter": " Monitors ",
"dashboard.monitors.distribute": "Monitor Distribution",
"monitors.list": "Monitor List",
"monitors.new": "New",
"monitors.edit": "Edit",
"monitors.delete": "Delete",
"monitors.edit-monitor": "Edit Monitor",
"monitors.delete-monitor": "Delete Monitor",
"monitors.enable": "Enable Monitor",
"monitors.cancel": "Cancel Monitor",
"monitors.search.placeholder": "Search Monitor",
"monitors.search.filter": "Filter Monitor Status",
"monitors.total": "Total",
"common.search": "Search",
"common.refresh": "Refresh",
"common.edit-time": "Last Update Time",
"common.edit": "Operate",
"app.login.message-need-identifier": "Please enter your email or mobile number",
"app.login.message-need-credential": "Please enter password",
"app.password.forgot": "Forgot password",

View File

@@ -39,6 +39,8 @@
},
"monitor": {
"": "监控",
"name": "监控名称",
"host": "监控Host",
"category": {
"": "监控类别",
"service": "应用服务",
@@ -58,6 +60,14 @@
"oracle": "Oracle",
"redis": "Redis",
"fullsite": "全站监控"
},
"status": {
"": "监控状态",
"all": "全部状态",
"available": "正常监控",
"unavailable": "不可用",
"unreachable": "不可达",
"un-manage": "未管理"
}
},
"alert": {
@@ -75,10 +85,32 @@
"2": "警告告警"
}
},
"dashboard.status.available": "正常",
"dashboard.status.unavailable": "不可用",
"dashboard.status.unreachable": "不可达",
"dashboard.status.un-manage": "未管理",
"dashboard.alerts.title": "最近告警列表",
"dashboard.alerts.enter": "进入告警中心",
"dashboard.alerts.distribute": "告警分布",
"dashboard.alerts.num": "告警数量",
"dashboard.alerts.deal": "告警处理",
"dashboard.alerts.deal-percent": "告警处理率",
"dashboard.monitors.total": "监控总量",
"dashboard.monitors.title": "监控总览",
"dashboard.monitors.sub-title": "监控类型纳管数量分布",
"dashboard.monitors.formatter": "个监控 占比",
"dashboard.monitors.distribute": "纳管数量分布",
"monitors.list": "监控列表",
"monitors.new": "新增",
"monitors.edit": "编辑",
"monitors.delete": "删除",
"monitors.edit-monitor": "编辑监控",
"monitors.delete-monitor": "删除监控",
"monitors.enable": "启用监控",
"monitors.cancel": "取消监控",
"monitors.search.placeholder": "搜索监控",
"monitors.search.filter": "监控状态过滤",
"monitors.total": "总量",
"common.search": "搜索",
"common.refresh": "刷新",
"common.edit-time": "最新修改时间",
"common.edit": "操作",
"app.lock": "锁屏",
"app.passport.desc": "TanCloud-易用友好的高性能监控云服务",
"app.passport.welcome": "欢迎使用TanCloud探云-监控云服务-tancloud.cn",