From f685298741b4cb92438d54742d1e0c19fcb2e4be Mon Sep 17 00:00:00 2001
From: tomsun28 <tomsun28@outlook.com>
Date: Sun, 10 Apr 2022 22:14:20 +0800
Subject: [PATCH] [web-app]dashboard and monitor list i18n

---
 .../routes/dashboard/dashboard.component.html | 42 ++++-----
 .../routes/dashboard/dashboard.component.ts   | 28 +++---
 .../monitor-list/monitor-list.component.html  | 86 +++++++++++--------
 web-app/src/assets/i18n/en-US.json            | 48 +++++++++--
 web-app/src/assets/i18n/zh-CN.json            | 40 ++++++++-
 5 files changed, 162 insertions(+), 82 deletions(-)

diff --git a/web-app/src/app/routes/dashboard/dashboard.component.html b/web-app/src/app/routes/dashboard/dashboard.component.html
index 5f9f41b..722c568 100644
--- a/web-app/src/app/routes/dashboard/dashboard.component.html
+++ b/web-app/src/app/routes/dashboard/dashboard.component.html
@@ -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>
diff --git a/web-app/src/app/routes/dashboard/dashboard.component.ts b/web-app/src/app/routes/dashboard/dashboard.component.ts
index 626821b..c8c9be8 100644
--- a/web-app/src/app/routes/dashboard/dashboard.component.ts
+++ b/web-app/src/app/routes/dashboard/dashboard.component.ts
@@ -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;
diff --git a/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html b/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html
index 74dd314..b89485b 100644
--- a/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html
+++ b/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html
@@ -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>
diff --git a/web-app/src/assets/i18n/en-US.json b/web-app/src/assets/i18n/en-US.json
index bf1c53d..bb51262 100644
--- a/web-app/src/assets/i18n/en-US.json
+++ b/web-app/src/assets/i18n/en-US.json
@@ -2,7 +2,7 @@
   "menu": {
     "main": "Main",
     "lang": "Language",
-    "dashboard": "Dashboard",
+    "dashboard": "DashBoard",
     "search.placeholder": "Search：Monitor 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",
diff --git a/web-app/src/assets/i18n/zh-CN.json b/web-app/src/assets/i18n/zh-CN.json
index 37603f6..d97c3c8 100644
--- a/web-app/src/assets/i18n/zh-CN.json
+++ b/web-app/src/assets/i18n/zh-CN.json
@@ -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",