[web-app]i18n for monitor detail

2022-04-11 11:15:35 +08:00
parent 7fbf112240
commit 95a062eff4
7 changed files with 104 additions and 52 deletions
--- a/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.ts
+++ b/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.ts
@@ -1,4 +1,6 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Inject, Input, OnInit } from '@angular/core';
+import { I18NService } from '@core';
+import { ALAIN_I18N_TOKEN } from '@delon/theme';
 import { EChartsOption } from 'echarts';
 import { finalize } from 'rxjs/operators';

@@ -32,7 +34,7 @@ export class MonitorDataChartComponent implements OnInit {
  echartsInstance!: any;
  // 查询历史数据时间段 默认最近6小时
  timePeriod: string = '6h';
-  constructor(private monitorSvc: MonitorService) {}
+  constructor(private monitorSvc: MonitorService, @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService) {}

  ngOnInit(): void {
    this.lineHistoryTheme = {
@@ -51,8 +53,8 @@ export class MonitorDataChartComponent implements OnInit {
          dataZoom: {
            yAxisIndex: 'none',
            title: {
-              zoom: '区域缩放',
-              back: '缩放还原'
+              zoom: this.i18nSvc.fanyi('monitors.detail.chart.zoom'),
+              back: this.i18nSvc.fanyi('monitors.detail.chart.back')
            },
            emphasis: {
              iconStyle: {
@@ -61,7 +63,7 @@ export class MonitorDataChartComponent implements OnInit {
            }
          },
          saveAsImage: {
-            title: '保存图片',
+            title: this.i18nSvc.fanyi('monitors.detail.chart.save'),
            emphasis: {
              iconStyle: {
                textPosition: 'left'
@@ -70,7 +72,7 @@ export class MonitorDataChartComponent implements OnInit {
          },
          myPeriod1h: {
            show: true,
-            title: '查询近1小时',
+            title: this.i18nSvc.fanyi('monitors.detail.chart.query-1h'),
            icon: 'path://M827.871087 196.128913C743.498468 111.756293 631.321596 65.290005 512 65.290005c-119.319549 0-231.499491 46.465265-315.871087 130.837884S65.290005 392.680451 65.290005 512s46.465265 231.499491 130.837884 315.871087 196.551538 130.837884 315.871087 130.837884c119.321596 0 231.499491-46.465265 315.871087-130.837884S958.708971 631.319549 958.708971 512 912.243707 280.500509 827.871087 196.128913zM531.556405 917.246651l0-74.145697c0-11.31572-9.174963-20.491707-20.491707-20.491707-11.316743 0-20.491707 9.174963-20.491707 20.491707l0 74.059739C283.276738 906.322857 116.693746 739.164766 106.755396 531.634176l72.351841 0c11.31572 0 20.491707-9.174963 20.491707-20.491707 0-11.31572-9.174963-20.491707-20.491707-20.491707l-72.273047 0c10.769274-206.737528 177.01253-373.005342 383.740848-383.813502l0 72.346725c0 11.316743 9.174963 20.491707 20.491707 20.491707 11.31572 0 20.491707-9.17394 20.491707-20.491707L531.558451 106.752326c207.593012 9.901511 374.807385 176.539762 385.609405 383.89946l-74.142627 0c-11.316743 0-20.491707 9.174963-20.491707 20.491707 0 11.316743 9.174963 20.491707 20.491707 20.491707l74.220399 0C907.275555 739.78796 739.720422 907.317511 531.556405 917.246651z;M532.098757 503.118726 532.098757 258.240529c0-11.316743-9.174963-20.491707-20.491707-20.491707-11.31572 0-20.491707 9.17394-20.491707 20.491707l0 254.66612c0 7.858992 4.429893 14.677281 10.924817 18.114566L693.447539 722.42757c4.002151 4.000104 9.245572 6.001691 14.490016 6.001691s10.487865-2.001587 14.490016-6.001691c8.002254-8.002254 8.002254-20.977777 0-28.980032L532.098757 503.118726z',
            emphasis: {
              iconStyle: {
@@ -83,7 +85,7 @@ export class MonitorDataChartComponent implements OnInit {
          },
          myPeriod6h: {
            show: true,
-            title: '查询近6小时',
+            title: this.i18nSvc.fanyi('monitors.detail.chart.query-6h'),
            icon: 'path://M827.871087 196.128913C743.498468 111.756293 631.321596 65.290005 512 65.290005c-119.319549 0-231.499491 46.465265-315.871087 130.837884S65.290005 392.680451 65.290005 512s46.465265 231.499491 130.837884 315.871087 196.551538 130.837884 315.871087 130.837884c119.321596 0 231.499491-46.465265 315.871087-130.837884S958.708971 631.319549 958.708971 512 912.243707 280.500509 827.871087 196.128913zM531.556405 917.246651l0-74.145697c0-11.31572-9.174963-20.491707-20.491707-20.491707-11.316743 0-20.491707 9.174963-20.491707 20.491707l0 74.059739C283.276738 906.322857 116.693746 739.164766 106.755396 531.634176l72.351841 0c11.31572 0 20.491707-9.174963 20.491707-20.491707 0-11.31572-9.174963-20.491707-20.491707-20.491707l-72.273047 0c10.769274-206.737528 177.01253-373.005342 383.740848-383.813502l0 72.346725c0 11.316743 9.174963 20.491707 20.491707 20.491707 11.31572 0 20.491707-9.17394 20.491707-20.491707L531.558451 106.752326c207.593012 9.901511 374.807385 176.539762 385.609405 383.89946l-74.142627 0c-11.316743 0-20.491707 9.174963-20.491707 20.491707 0 11.316743 9.174963 20.491707 20.491707 20.491707l74.220399 0C907.275555 739.78796 739.720422 907.317511 531.556405 917.246651z;M532.098757 503.118726 532.098757 258.240529c0-11.316743-9.174963-20.491707-20.491707-20.491707-11.31572 0-20.491707 9.17394-20.491707 20.491707l0 254.66612c0 7.858992 4.429893 14.677281 10.924817 18.114566L693.447539 722.42757c4.002151 4.000104 9.245572 6.001691 14.490016 6.001691s10.487865-2.001587 14.490016-6.001691c8.002254-8.002254 8.002254-20.977777 0-28.980032L532.098757 503.118726z',
            emphasis: {
              iconStyle: {
@@ -96,7 +98,7 @@ export class MonitorDataChartComponent implements OnInit {
          },
          myPeriod1d: {
            show: true,
-            title: '查询近1天',
+            title: this.i18nSvc.fanyi('monitors.detail.chart.query-1d'),
            icon: 'path://M827.871087 196.128913C743.498468 111.756293 631.321596 65.290005 512 65.290005c-119.319549 0-231.499491 46.465265-315.871087 130.837884S65.290005 392.680451 65.290005 512s46.465265 231.499491 130.837884 315.871087 196.551538 130.837884 315.871087 130.837884c119.321596 0 231.499491-46.465265 315.871087-130.837884S958.708971 631.319549 958.708971 512 912.243707 280.500509 827.871087 196.128913zM531.556405 917.246651l0-74.145697c0-11.31572-9.174963-20.491707-20.491707-20.491707-11.316743 0-20.491707 9.174963-20.491707 20.491707l0 74.059739C283.276738 906.322857 116.693746 739.164766 106.755396 531.634176l72.351841 0c11.31572 0 20.491707-9.174963 20.491707-20.491707 0-11.31572-9.174963-20.491707-20.491707-20.491707l-72.273047 0c10.769274-206.737528 177.01253-373.005342 383.740848-383.813502l0 72.346725c0 11.316743 9.174963 20.491707 20.491707 20.491707 11.31572 0 20.491707-9.17394 20.491707-20.491707L531.558451 106.752326c207.593012 9.901511 374.807385 176.539762 385.609405 383.89946l-74.142627 0c-11.316743 0-20.491707 9.174963-20.491707 20.491707 0 11.316743 9.174963 20.491707 20.491707 20.491707l74.220399 0C907.275555 739.78796 739.720422 907.317511 531.556405 917.246651z;M532.098757 503.118726 532.098757 258.240529c0-11.316743-9.174963-20.491707-20.491707-20.491707-11.31572 0-20.491707 9.17394-20.491707 20.491707l0 254.66612c0 7.858992 4.429893 14.677281 10.924817 18.114566L693.447539 722.42757c4.002151 4.000104 9.245572 6.001691 14.490016 6.001691s10.487865-2.001587 14.490016-6.001691c8.002254-8.002254 8.002254-20.977777 0-28.980032L532.098757 503.118726z',
            emphasis: {
              iconStyle: {
@@ -109,7 +111,7 @@ export class MonitorDataChartComponent implements OnInit {
          },
          myPeriod1w: {
            show: true,
-            title: '查询近1周',
+            title: this.i18nSvc.fanyi('monitors.detail.chart.query-1w'),
            icon: 'path://M827.871087 196.128913C743.498468 111.756293 631.321596 65.290005 512 65.290005c-119.319549 0-231.499491 46.465265-315.871087 130.837884S65.290005 392.680451 65.290005 512s46.465265 231.499491 130.837884 315.871087 196.551538 130.837884 315.871087 130.837884c119.321596 0 231.499491-46.465265 315.871087-130.837884S958.708971 631.319549 958.708971 512 912.243707 280.500509 827.871087 196.128913zM531.556405 917.246651l0-74.145697c0-11.31572-9.174963-20.491707-20.491707-20.491707-11.316743 0-20.491707 9.174963-20.491707 20.491707l0 74.059739C283.276738 906.322857 116.693746 739.164766 106.755396 531.634176l72.351841 0c11.31572 0 20.491707-9.174963 20.491707-20.491707 0-11.31572-9.174963-20.491707-20.491707-20.491707l-72.273047 0c10.769274-206.737528 177.01253-373.005342 383.740848-383.813502l0 72.346725c0 11.316743 9.174963 20.491707 20.491707 20.491707 11.31572 0 20.491707-9.17394 20.491707-20.491707L531.558451 106.752326c207.593012 9.901511 374.807385 176.539762 385.609405 383.89946l-74.142627 0c-11.316743 0-20.491707 9.174963-20.491707 20.491707 0 11.316743 9.174963 20.491707 20.491707 20.491707l74.220399 0C907.275555 739.78796 739.720422 907.317511 531.556405 917.246651z;M532.098757 503.118726 532.098757 258.240529c0-11.316743-9.174963-20.491707-20.491707-20.491707-11.31572 0-20.491707 9.17394-20.491707 20.491707l0 254.66612c0 7.858992 4.429893 14.677281 10.924817 18.114566L693.447539 722.42757c4.002151 4.000104 9.245572 6.001691 14.490016 6.001691s10.487865-2.001587 14.490016-6.001691c8.002254-8.002254 8.002254-20.977777 0-28.980032L532.098757 503.118726z',
            emphasis: {
              iconStyle: {
@@ -122,7 +124,7 @@ export class MonitorDataChartComponent implements OnInit {
          },
          myPeriod4w: {
            show: true,
-            title: '查询近1月',
+            title: this.i18nSvc.fanyi('monitors.detail.chart.query-1m'),
            icon: 'path://M827.871087 196.128913C743.498468 111.756293 631.321596 65.290005 512 65.290005c-119.319549 0-231.499491 46.465265-315.871087 130.837884S65.290005 392.680451 65.290005 512s46.465265 231.499491 130.837884 315.871087 196.551538 130.837884 315.871087 130.837884c119.321596 0 231.499491-46.465265 315.871087-130.837884S958.708971 631.319549 958.708971 512 912.243707 280.500509 827.871087 196.128913zM531.556405 917.246651l0-74.145697c0-11.31572-9.174963-20.491707-20.491707-20.491707-11.316743 0-20.491707 9.174963-20.491707 20.491707l0 74.059739C283.276738 906.322857 116.693746 739.164766 106.755396 531.634176l72.351841 0c11.31572 0 20.491707-9.174963 20.491707-20.491707 0-11.31572-9.174963-20.491707-20.491707-20.491707l-72.273047 0c10.769274-206.737528 177.01253-373.005342 383.740848-383.813502l0 72.346725c0 11.316743 9.174963 20.491707 20.491707 20.491707 11.31572 0 20.491707-9.17394 20.491707-20.491707L531.558451 106.752326c207.593012 9.901511 374.807385 176.539762 385.609405 383.89946l-74.142627 0c-11.316743 0-20.491707 9.174963-20.491707 20.491707 0 11.316743 9.174963 20.491707 20.491707 20.491707l74.220399 0C907.275555 739.78796 739.720422 907.317511 531.556405 917.246651z;M532.098757 503.118726 532.098757 258.240529c0-11.316743-9.174963-20.491707-20.491707-20.491707-11.31572 0-20.491707 9.17394-20.491707 20.491707l0 254.66612c0 7.858992 4.429893 14.677281 10.924817 18.114566L693.447539 722.42757c4.002151 4.000104 9.245572 6.001691 14.490016 6.001691s10.487865-2.001587 14.490016-6.001691c8.002254-8.002254 8.002254-20.977777 0-28.980032L532.098757 503.118726z',
            emphasis: {
              iconStyle: {
@@ -135,7 +137,7 @@ export class MonitorDataChartComponent implements OnInit {
          },
          myRefresh: {
            show: true,
-            title: '刷新',
+            title: this.i18nSvc.fanyi('common.refresh'),
            icon: 'path://M663.881 339.763l274.021-0.742 0.058-13.271 0.699 0c-0.204-0.48-0.495-0.945-0.699-1.426L938.658 65l-23.776 0.044L914.3 280.41C835.9 151.374 694.321 65 532.342 65c-246.869 0-447 200.132-447 447 0 246.84 200.131 447 447 447 180.343 0 335.657-106.919 406.316-260.75l-33.176 0C836.948 835.027 695.456 929.2 532.342 929.2c-230.048 0-417.2-187.152-417.2-417.2s187.152-417.2 417.2-417.2c158.895 0 297.068 89.487 367.466 220.547l-235.868 0.64L663.881 339.763z',
            emphasis: {
              iconStyle: {
@@ -183,7 +185,7 @@ export class MonitorDataChartComponent implements OnInit {
    };
    if (this.unit != undefined || this.unit != null) {
      // @ts-ignore
-      this.lineHistoryTheme.title?.subtext = `单位 ${this.unit}`;
+      this.lineHistoryTheme.title?.subtext = `${this.i18nSvc.fanyi('monitors.detail.chart.unit')}  ${this.unit}`;
    }
    this.loadData();
  }
@@ -251,7 +253,7 @@ export class MonitorDataChartComponent implements OnInit {
          } else {
            this.eChartOption = this.lineHistoryTheme;
            this.eChartOption.title = {
-              text: `${this.metrics}.${this.metric}` + '\n\n\n' + '暂无数据',
+              text: `${`${this.metrics}.${this.metric}` + '\n\n\n'}${this.i18nSvc.fanyi('monitors.detail.chart.no-data')}`,
              textStyle: {
                fontSize: 16,
                fontFamily: 'monospace',
--- a/web-app/src/app/routes/monitor/monitor-data-table/monitor-data-table.component.html
+++ b/web-app/src/app/routes/monitor/monitor-data-table/monitor-data-table.component.html
@@ -17,8 +17,8 @@
  <nz-table #smallTable nzSize="small" nzNoResult="No Metrics Data" nzFrontPagination="false" [nzData]="valueRows">
    <thead>
      <tr>
-        <th style="text-align: center">属性</th>
-        <th style="text-align: center">值</th>
+        <th style="text-align: center">{{ 'common.name' | i18n }}</th>
+        <th style="text-align: center">{{ 'common.value' | i18n }}</th>
      </tr>
    </thead>
    <tbody>
@@ -33,17 +33,11 @@
 <ng-template #monitor_metrics_card_title>
  <p style="font-size: small; text-align: center; margin-bottom: 3px">{{ metrics }}</p>
  <div>
-    <a nz-popover [nzPopoverContent]="'最近采集时间 ' + (time | _date: 'yyyy-MM-dd HH:mm:ss')">
+    <a nz-popover [nzPopoverContent]="'Last Collect Time ' + (time | _date: 'yyyy-MM-dd HH:mm:ss')">
      <i nz-icon nzType="field-time" nzTheme="outline"></i
    ></a>
-    <i style="font-size: 0.3px; font-weight: normal; color: rgba(112,112,112,0.89)">采集时间:{{ time | _date: 'HH:mm:ss' }}</i>
+    <i style="font-size: 0.3px; font-weight: normal; color: rgba(112, 112, 112, 0.89)">
+      {{ 'monitors.collect.time' | i18n }}:{{ time | _date: 'HH:mm:ss' }}
+    </i>
  </div>
 </ng-template>
-
-<!--<nz-card *ngIf="!isTable" nzHoverable style="height:auto;margin-left: 14px;" [nzBordered]="true"-->
-<!--         [nzTitle]="monitor_metrics_card_title" >-->
-<!--  <div *ngFor="let field of fields;let i = index;" nz-row nzGutter="16">-->
-<!--    <div nz-col nzSpan="10"><p style="text-align: right">{{field.name}}</p></div>-->
-<!--    <div nz-col nzSpan="14"><p style="text-align: left">{{rowValues[i].origin}}</p></div>-->
-<!--  </div>-->
-<!--</nz-card>-->
--- a/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html
+++ b/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html
@@ -3,20 +3,20 @@
  <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>
    <a [routerLink]="['/monitors']" [queryParams]="{ app: app ? app : '' }">
      <i nz-icon nzType="monitor"></i>
-      <span>监控列表</span>
+      <span>{{ 'monitors.list' | i18n }}</span>
    </a>
  </nz-breadcrumb-item>
  <nz-breadcrumb-item>
    <i nz-icon nzType="pie-chart"></i>
-    <span>{{ 'monitor.app.' + app | i18n }} 监控详情</span>
+    <span>{{ 'monitor.app.' + app | i18n }} {{ 'monitors.detail' | i18n }}</span>
    <a [href]="'https://tancloud.cn/docs/help/' + monitor.app" target="_blank" style="float: right; margin-right: 5%">
-      <span>帮助&nbsp;</span>
+      <span>{{ 'common.button.help' | i18n }} </span>
      <i nz-icon nzType="question-circle" nzTheme="outline"></i>
    </a>
  </nz-breadcrumb-item>
@@ -33,7 +33,9 @@
        >
      </div>
      <div nz-row nzGutter="16">
-        <div nz-col nzSpan="8"><p style="text-align: right">名称</p></div>
+        <div nz-col nzSpan="8"
+          ><p style="text-align: right">{{ 'monitors.detail.name' | i18n }}</p></div
+        >
        <div nz-col nzSpan="16"
          ><p style="text-align: left">{{ monitor?.name }}</p></div
        >
@@ -45,58 +47,66 @@
        >
      </div>
      <div nz-row nzGutter="16">
-        <div nz-col nzSpan="8"><p style="text-align: right">端口</p></div>
+        <div nz-col nzSpan="8"
+          ><p style="text-align: right">{{ 'monitors.detail.port' | i18n }}</p></div
+        >
        <div nz-col nzSpan="16"
          ><p style="text-align: left">{{ port }}</p></div
        >
      </div>
      <div nz-row nzGutter="16">
-        <div nz-col nzSpan="8"><p style="text-align: right">描述</p></div>
+        <div nz-col nzSpan="8"
+          ><p style="text-align: right">{{ 'monitors.detail.description' | i18n }}</p></div
+        >
        <div nz-col nzSpan="16"
          ><p style="text-align: left">{{ monitor?.description }}</p></div
        >
      </div>
      <div nz-row nzGutter="16">
-        <div nz-col nzSpan="8"><p style="text-align: right">状态</p></div>
+        <div nz-col nzSpan="8"
+          ><p style="text-align: right">{{ 'monitors.detail.status' | i18n }}</p></div
+        >
        <div nz-col nzSpan="16">
          <nz-tag *ngIf="monitor?.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="monitor?.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="monitor?.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="monitor?.status == 3" nzColor="error">
            <i nz-icon nzType="frown" nzTheme="outline"></i>
-            <span>监控不可达</span>
-          </nz-tag>
-          <nz-tag *ngIf="monitor?.status == 4" nzColor="default">
-            <i nz-icon nzType="sync"></i>
-            <span>监控已挂起</span>
+            <span>{{ 'monitor.status.unreachable' | i18n }}</span>
          </nz-tag>
        </div>
      </div>
      <div nz-row nzGutter="16">
-        <div nz-col nzSpan="8"><p style="text-align: right">采集间隔</p></div>
+        <div nz-col nzSpan="8"
+          ><p style="text-align: right">{{ 'monitor.intervals' | i18n }}</p></div
+        >
        <div nz-col nzSpan="16"
          ><p style="text-align: left">{{ monitor?.intervals }}s</p></div
        >
      </div>
      <div nz-row nzGutter="16">
-        <div nz-col nzSpan="8"><p style="text-align: right">创建时间</p></div>
+        <div nz-col nzSpan="8"
+          ><p style="text-align: right">{{ 'common.new-time' | i18n }}</p></div
+        >
        <div nz-col nzSpan="16"
-          ><p style="text-align: left">{{ monitor?.gmtCreate | date: 'YYYY-MM-dd HH:mm:ss'  }}</p></div
+          ><p style="text-align: left">{{ monitor?.gmtCreate | date: 'YYYY-MM-dd HH:mm:ss' }}</p></div
        >
      </div>
      <div nz-row nzGutter="16">
-        <div nz-col nzSpan="8"><p style="text-align: right">更新时间</p></div>
+        <div nz-col nzSpan="8"
+          ><p style="text-align: right">{{ 'common.edit-time' | i18n }}</p></div
+        >
        <div nz-col nzSpan="16"
-          ><p style="text-align: left">{{ monitor?.gmtUpdate | date: 'YYYY-MM-dd HH:mm:ss'  }}</p></div
+          ><p style="text-align: left">{{ monitor?.gmtUpdate | date: 'YYYY-MM-dd HH:mm:ss' }}</p></div
        >
      </div>
    </nz-card>
@@ -107,7 +117,7 @@
        <nz-tab [nzTitle]="titleTemplate">
          <ng-template #titleTemplate>
            <i nz-icon nzType="pic-right" style="margin-left: 10px"></i>
-            监控实时数据详情
+            {{ 'monitors.detail.realtime' | i18n }}
          </ng-template>
          <div style="display: flex; justify-content: flex-start; flex-wrap: wrap">
            <div *ngFor="let metric of metrics; let i = index">
@@ -118,7 +128,7 @@
        <nz-tab [nzTitle]="title2Template" (nzClick)="initMetricChart()">
          <ng-template #title2Template>
            <i nz-icon nzType="pic-right" style="margin-left: 10px"></i>
-            监控历史图表详情
+            {{ 'monitors.detail.history' | i18n }}
          </ng-template>
          <div style="display: flex; justify-content: flex-start; flex-wrap: wrap">
            <div *ngFor="let item of chartMetrics; let i = index">
@@ -138,5 +148,5 @@
 </nz-layout>

 <ng-template #monitor_basic_card_title>
-  <p style="font-size: small; text-align: left; margin-bottom: 3px">监控基本属性</p>
+  <p style="font-size: small; text-align: left; margin-bottom: 3px">{{ 'monitors.detail.basic' | i18n }}</p>
 </ng-template>
--- a/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html
+++ b/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html
@@ -16,7 +16,7 @@
    <i nz-icon nzType="edit"></i>
    <span>{{ 'monitors.edit' | i18n }} {{ 'monitor.app.' + monitor.app | i18n }} {{ 'monitor' | i18n }}</span>
    <a [href]="'https://tancloud.cn/docs/help/' + monitor.app" target="_blank" style="float: right; margin-right: 5%">
-      <span>{{ 'common.button.help' | i18n }}&nbsp;</span>
+      <span>{{ 'common.button.help' | i18n }} </span>
      <i nz-icon nzType="question-circle" nzTheme="outline"></i>
    </a>
  </nz-breadcrumb-item>
--- a/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html
+++ b/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html
@@ -16,7 +16,7 @@
    <i nz-icon nzType="plus-circle"></i>
    <span>{{ 'monitors.new' | i18n }} {{ 'monitor.app.' + monitor.app | i18n }} {{ 'monitor' | i18n }}</span>
    <a [href]="'https://tancloud.cn/docs/help/' + monitor.app" target="_blank" style="float: right; margin-right: 5%">
-      <span>{{ 'common.button.help' | i18n }}&nbsp;</span>
+      <span>{{ 'common.button.help' | i18n }} </span>
      <i nz-icon nzType="question-circle" nzTheme="outline"></i>
    </a>
  </nz-breadcrumb-item>
--- a/web-app/src/assets/i18n/en-US.json
+++ b/web-app/src/assets/i18n/en-US.json
@@ -124,9 +124,32 @@
  "monitors.detect.success": "Detect Success",
  "monitors.detect.failed": "Detect Failed",
  "monitors.detect.tip": "Detect monitor available before apply",
+  "monitors.detail": "Monitor Detail",
+  "monitors.detail.name": "Name",
+  "monitors.detail.port": "Port",
+  "monitors.detail.description": "Desc",
+  "monitors.detail.status": "Status",
+  "monitors.detail.basic": "Monitor Basic",
+  "monitors.detail.realtime": "Monitor Real-Time Detail",
+  "monitors.detail.history": "Monitor Historical Chart Detail",
+  "monitors.collect.time": "Collect Time",
+  "monitors.collect.time.tip": "Last collect time",
+  "monitors.detail.chart.zoom": "Zoom In",
+  "monitors.detail.chart.back": "Zoom restore",
+  "monitors.detail.chart.save": "Save as Image",
+  "monitors.detail.chart.query-1h": "Query 1 Hour",
+  "monitors.detail.chart.query-6h": "Query 6 Hours",
+  "monitors.detail.chart.query-1d": "Query 1 Day",
+  "monitors.detail.chart.query-1w": "Query 1 Week",
+  "monitors.detail.chart.query-1m": "Query 1 Month",
+  "monitors.detail.chart.no-data": "No Metrics Data",
+  "monitors.detail.chart.unit": "Unit",
+  "common.name": "Name",
+  "common.value": "Value",
  "common.search": "Search",
  "common.refresh": "Refresh",
  "common.edit-time": "Last Update Time",
+  "common.new-time": "Create Time",
  "common.edit": "Operate",
  "common.notify.no-select-edit": "No items selected for editing!",
  "common.notify.one-select-edit": "Only one selection can be edited!",
--- a/web-app/src/assets/i18n/zh-CN.json
+++ b/web-app/src/assets/i18n/zh-CN.json
@@ -124,9 +124,32 @@
  "monitors.detect.success": "测试连接成功",
  "monitors.detect.failed": "测试连接失败",
  "monitors.detect.tip": "新增监控前是否先探测检查监控可用性",
+  "monitors.detail": "监控详情",
+  "monitors.detail.name": "名称",
+  "monitors.detail.port": "端口",
+  "monitors.detail.description": "描述",
+  "monitors.detail.status": "状态",
+  "monitors.detail.basic": "监控基本属性",
+  "monitors.detail.realtime": "监控实时数据详情",
+  "monitors.detail.history": "监控历史图表详情",
+  "monitors.collect.time": "采集时间",
+  "monitors.collect.time.tip": "最近采集时间",
+  "monitors.detail.chart.zoom": "区域缩放",
+  "monitors.detail.chart.back": "缩放还原",
+  "monitors.detail.chart.save": "保存图片",
+  "monitors.detail.chart.query-1h": "查询近1小时",
+  "monitors.detail.chart.query-6h": "查询近6小时",
+  "monitors.detail.chart.query-1d": "查询近1天",
+  "monitors.detail.chart.query-1w": "查询近1周",
+  "monitors.detail.chart.query-1m": "查询近1月",
+  "monitors.detail.chart.no-data": "暂无数据",
+  "monitors.detail.chart.unit": "单位",
+  "common.name": "名称",
+  "common.value": "值",
  "common.search": "搜索",
  "common.refresh": "刷新",
-  "common.edit-time": "最新修改时间",
+  "common.edit-time": "更新时间",
+  "common.new-time": "创建时间",
  "common.edit": "操作",
  "common.notify.no-select-edit": "未选中任何待编辑项!",
  "common.notify.one-select-edit": "只能对一个选中项进行编辑!",