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

[web-app]i18n for add edit monitor

Browse Source
This commit is contained in:
tomsun28
2022-04-11 10:13:31 +08:00
parent a3d1f08b39
commit 7fbf112240
6 changed files with 112 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html
View File

@@ -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: monitor.app ? monitor.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="edit"></i>
<span>修改 {{ 'monitor.app.' + monitor.app | i18n }} 监控</span>
<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>帮助&nbsp;</span>
<span>{{ 'common.button.help' | i18n }}&nbsp;</span>
<i nz-icon nzType="question-circle" nzTheme="outline"></i>
</a>
</nz-breadcrumb-item>
@@ -27,17 +27,19 @@
<div class="-inner-content">
<form nz-form #editForm="ngForm">
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor="host" nzRequired="true" nzTooltipTitle="被监控的对端IP或域名"> 监控Host </nz-form-label>
<nz-form-label [nzSpan]="7" nzFor="host" nzRequired="true" [nzTooltipTitle]="'monitor.host.tip' | i18n">
{{ 'monitor.host' | i18n }}
</nz-form-label>
<nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
<input [(ngModel)]="monitor.host" nz-input name="host" type="text" id="host" required placeholder="请输入域名或IP" />
<input [(ngModel)]="monitor.host" nz-input name="host" type="text" id="host" required [placeholder]="'monitor.host.tip' | i18n" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor="name" nzRequired="true" nzTooltipTitle="标识此监控的名称,名称需要保证唯一性">
监控名称
<nz-form-label [nzSpan]="7" nzFor="name" nzRequired="true" [nzTooltipTitle]="'monitor.name.tip' | i18n">
{{ 'monitor.name' | i18n }}
</nz-form-label>
<nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
<input [(ngModel)]="monitor.name" nz-input required name="name" type="text" id="name" placeholder="监控名称需要保证唯一性" />
<input [(ngModel)]="monitor.name" nz-input required name="name" type="text" id="name" [placeholder]="'monitor.name.tip' | i18n" />
</nz-form-control>
</nz-form-item>
@@ -163,7 +165,7 @@
</nz-form-item>
<nz-collapse [nzGhost]="true">
<nz-collapse-panel nzHeader="高级" [nzHeader]="extraColHeader" [nzShowArrow]="false">
<nz-collapse-panel [nzHeader]="extraColHeader" [nzShowArrow]="false">
<nz-form-item *ngFor="let paramDefine of advancedParamDefines; let i = index">
<nz-form-label
*ngIf="paramDefine.field !== 'host' && paramDefine.type === 'text'"
@@ -296,8 +298,8 @@
</nz-collapse-panel>
</nz-collapse>
<ng-template #extraColHeader>
<button style="top: -10px; margin-left: 40%" nz-button nzType="dashed" nz-tooltip nzTooltipTitle="设置高级可选参数">
<span>高级设置</span>
<button style="top: -10px; margin-left: 40%" nz-button nzType="dashed" nz-tooltip [nzTooltipTitle]="'monitors.advanced.tip' | i18n">
<span>{{ 'monitors.advanced' | i18n }}</span>
<i nz-icon nzType="down-circle" nzTheme="outline"></i>
</button>
</ng-template>
@@ -305,7 +307,9 @@
<nz-divider></nz-divider>
<nz-form-item>
<nz-form-label nzSpan="7" nzFor="intervals" nzTooltipTitle="监控周期性采集数据间隔时间,单位秒"> 采集间隔 </nz-form-label>
<nz-form-label nzSpan="7" nzFor="intervals" [nzTooltipTitle]="'monitor.intervals.tip' | i18n">
{{ 'monitor.intervals' | i18n }}
</nz-form-label>
<nz-form-control nzSpan="8">
<nz-input-number [(ngModel)]="monitor.intervals" [nzMin]="10" [nzMax]="604800" [nzStep]="60" name="intervals" id="intervals">
</nz-input-number>
@@ -313,14 +317,18 @@
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="7" nzFor="detect" nzTooltipTitle="新增监控前是否先探测检查监控可用性"> 测试连接 </nz-form-label>
<nz-form-label nzSpan="7" nzFor="detect" [nzTooltipTitle]="'monitors.detect.tip' | i18n">
{{ 'monitors.detect' | i18n }}
</nz-form-label>
<nz-form-control nzSpan="8">
<nz-switch [(ngModel)]="detected" name="detect" id="detect"></nz-switch>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor="description" nzTooltipTitle="更多标识和描述此监控的备注信息"> 描述备注 </nz-form-label>
<nz-form-label [nzSpan]="7" nzFor="description" [nzTooltipTitle]="'monitor.description.tip' | i18n">
{{ 'monitor.description' | i18n }}
</nz-form-label>
<nz-form-control [nzSpan]="8">
<nz-textarea-count [nzMaxCharacterCount]="100">
<textarea [(ngModel)]="monitor.description" rows="3" nz-input name="description" id="description"></textarea>
@@ -330,9 +338,9 @@
<div nz-row>
<div nz-col nzSpan="8" nzOffset="9">
<button nz-button nzType="primary" type="submit" (click)="onDetect(editForm.form)"> 测试 </button>
<button nz-button nzType="primary" type="submit" (click)="onSubmit(editForm.form)"> 确定 </button>
<button nz-button nzType="primary" type="reset" (click)="onCancel()"> 取消 </button>
<button nz-button nzType="primary" type="submit" (click)="onDetect(editForm.form)"> {{ 'common.button.detect' | i18n }} </button>
<button nz-button nzType="primary" type="submit" (click)="onSubmit(editForm.form)"> {{ 'common.button.ok' | i18n }} </button>
<button nz-button nzType="primary" type="reset" (click)="onCancel()"> {{ 'common.button.cancel' | i18n }} </button>
</div>
</div>
</form>

24
web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.ts
View File

@@ -1,7 +1,8 @@
import { Component, OnInit } from '@angular/core';
import { Component, Inject, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
import { TitleService } from '@delon/theme';
import { I18NService } from '@core';
import { ALAIN_I18N_TOKEN, TitleService } from '@delon/theme';
import { NzNotificationService } from 'ng-zorro-antd/notification';
import { throwError } from 'rxjs';
import { switchMap } from 'rxjs/operators';
@@ -25,7 +26,8 @@ export class MonitorEditComponent implements OnInit {
private route: ActivatedRoute,
private router: Router,
private titleSvc: TitleService,
private notifySvc: NzNotificationService
private notifySvc: NzNotificationService,
@Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService
) {}
paramDefines!: ParamDefine[];
@@ -64,8 +66,8 @@ export class MonitorEditComponent implements OnInit {
this.detected = message.data.detected ? message.data.detected : true;
} else {
console.warn(message.msg);
this.notifySvc.error('查询异常，此监控不存在', message.msg);
return throwError('查询此监控异常');
this.notifySvc.error(this.i18nSvc.fanyi('monitors.not-found'), message.msg);
return throwError(this.i18nSvc.fanyi('monitors.not-found'));
}
return this.appDefineSvc.getAppParamsDefine(this.monitor.app);
})
@@ -168,15 +170,15 @@ export class MonitorEditComponent implements OnInit {
message => {
this.isSpinning = false;
if (message.code === 0) {
this.notifySvc.success('修改监控成功', '');
this.notifySvc.success(this.i18nSvc.fanyi('monitors.edit.success'), '');
this.router.navigateByUrl(`/monitors?app=${this.monitor.app}`);
} else {
this.notifySvc.error('修改监控失败', message.msg);
this.notifySvc.error(this.i18nSvc.fanyi('monitors.edit.failed'), message.msg);
}
},
error => {
this.isSpinning = false;
this.notifySvc.error('修改监控失败', error.error.msg);
this.notifySvc.error(this.i18nSvc.fanyi('monitors.edit.failed'), error.error.msg);
}
);
}
@@ -217,14 +219,14 @@ export class MonitorEditComponent implements OnInit {
message => {
this.isSpinning = false;
if (message.code === 0) {
this.notifySvc.success('探测成功', '');
this.notifySvc.success(this.i18nSvc.fanyi('monitors.detect.success'), '');
} else {
this.notifySvc.error('探测失败', message.msg);
this.notifySvc.error(this.i18nSvc.fanyi('monitors.detect.failed'), message.msg);
}
},
error => {
this.isSpinning = false;
this.notifySvc.error('探测异常', error.error.msg);
this.notifySvc.error(this.i18nSvc.fanyi('monitors.detect.failed'), error.error.msg);
}
);
}

44
web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html
View File

@@ -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: monitor.app ? monitor.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="plus-circle"></i>
<span>新增 {{ 'monitor.app.' + monitor.app | i18n }} 监控</span>
<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>帮助&nbsp;</span>
<span>{{ 'common.button.help' | i18n }}&nbsp;</span>
<i nz-icon nzType="question-circle" nzTheme="outline"></i>
</a>
</nz-breadcrumb-item>
@@ -27,7 +27,9 @@
<div class="-inner-content">
<form nz-form #newForm="ngForm">
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor="host" nzRequired="true" nzTooltipTitle="被监控的对端IP或域名"> 监控Host </nz-form-label>
<nz-form-label [nzSpan]="7" nzFor="host" nzRequired="true" [nzTooltipTitle]="'monitor.host.tip' | i18n">
{{ 'monitor.host' | i18n }}
</nz-form-label>
<nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
<input
[(ngModel)]="monitor.host"
@@ -36,17 +38,17 @@
type="text"
id="host"
required
placeholder="请输入域名或IP"
[placeholder]="'monitor.host.tip' | i18n"
(ngModelChange)="onHostChange($event)"
/>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor="name" nzRequired="true" nzTooltipTitle="标识此监控的名称,名称需要保证唯一性">
监控名称
<nz-form-label [nzSpan]="7" nzFor="name" nzRequired="true" [nzTooltipTitle]="'monitor.name.tip' | i18n">
{{ 'monitor.name' | i18n }}
</nz-form-label>
<nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
<input [(ngModel)]="monitor.name" nz-input required name="name" type="text" id="name" placeholder="监控名称需要保证唯一性" />
<input [(ngModel)]="monitor.name" nz-input required name="name" type="text" id="name" [placeholder]="'monitor.name.tip' | i18n" />
</nz-form-control>
</nz-form-item>
@@ -172,7 +174,7 @@
</nz-form-item>
<nz-collapse [nzGhost]="true">
<nz-collapse-panel nzHeader="高级" [nzHeader]="extraColHeader" [nzShowArrow]="false">
<nz-collapse-panel [nzHeader]="extraColHeader" [nzShowArrow]="false">
<nz-form-item *ngFor="let paramDefine of advancedParamDefines; let i = index">
<nz-form-label
*ngIf="paramDefine.field !== 'host' && paramDefine.type === 'text'"
@@ -305,8 +307,8 @@
</nz-collapse-panel>
</nz-collapse>
<ng-template #extraColHeader>
<button style="top: -10px; margin-left: 40%" nz-button nzType="dashed" nz-tooltip nzTooltipTitle="设置高级可选参数">
<span>高级设置</span>
<button style="top: -10px; margin-left: 40%" nz-button nzType="dashed" nz-tooltip [nzTooltipTitle]="'monitors.advanced.tip' | i18n">
<span>{{ 'monitors.advanced' | i18n }}</span>
<i nz-icon nzType="down-circle" nzTheme="outline"></i>
</button>
</ng-template>
@@ -314,7 +316,9 @@
<nz-divider></nz-divider>
<nz-form-item>
<nz-form-label nzSpan="7" nzFor="intervals" nzTooltipTitle="监控周期性采集数据间隔时间,单位秒"> 采集间隔 </nz-form-label>
<nz-form-label nzSpan="7" nzFor="intervals" [nzTooltipTitle]="'monitor.intervals.tip' | i18n">
{{ 'monitor.intervals' | i18n }}
</nz-form-label>
<nz-form-control nzSpan="8">
<nz-input-number [(ngModel)]="monitor.intervals" [nzMin]="10" [nzMax]="604800" [nzStep]="60" name="intervals" id="intervals">
</nz-input-number>
@@ -322,14 +326,18 @@
</nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="7" nzFor="detect" nzTooltipTitle="新增监控前是否先探测检查监控可用性"> 测试连接 </nz-form-label>
<nz-form-label nzSpan="7" nzFor="detect" [nzTooltipTitle]="'monitors.detect.tip' | i18n">
{{ 'monitors.detect' | i18n }}
</nz-form-label>
<nz-form-control nzSpan="8">
<nz-switch [(ngModel)]="detected" name="detect" id="detect"></nz-switch>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor="description" nzTooltipTitle="更多标识和描述此监控的备注信息"> 描述备注 </nz-form-label>
<nz-form-label [nzSpan]="7" nzFor="description" [nzTooltipTitle]="'monitor.description.tip' | i18n">
{{ 'monitor.description' | i18n }}
</nz-form-label>
<nz-form-control [nzSpan]="8">
<nz-textarea-count [nzMaxCharacterCount]="100">
<textarea [(ngModel)]="monitor.description" rows="3" nz-input name="description" id="description"></textarea>
@@ -339,9 +347,9 @@
<div nz-row>
<div nz-col nzSpan="8" nzOffset="9">
<button nz-button nzType="primary" type="submit" (click)="onDetect(newForm.form)"> 测试 </button>
<button nz-button nzType="primary" type="submit" (click)="onSubmit(newForm.form)"> 确定 </button>
<button nz-button nzType="primary" type="reset" (click)="onCancel()"> 取消 </button>
<button nz-button nzType="primary" type="submit" (click)="onDetect(newForm.form)"> {{ 'common.button.detect' | i18n }} </button>
<button nz-button nzType="primary" type="submit" (click)="onSubmit(newForm.form)"> {{ 'common.button.ok' | i18n }} </button>
<button nz-button nzType="primary" type="reset" (click)="onCancel()"> {{ 'common.button.cancel' | i18n }} </button>
</div>
</div>
</form>

18
web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts
View File

@@ -1,8 +1,8 @@
import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
import { I18NService } from '@core';
import { TitleService } from '@delon/theme';
import { ALAIN_I18N_TOKEN, TitleService } from '@delon/theme';
import { NzNotificationService } from 'ng-zorro-antd/notification';
import { switchMap } from 'rxjs/operators';
@@ -34,7 +34,7 @@ export class MonitorNewComponent implements OnInit {
private router: Router,
private notifySvc: NzNotificationService,
private cdr: ChangeDetectorRef,
private i18n: I18NService,
@Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService,
private titleSvc: TitleService,
private formBuilder: FormBuilder
) {
@@ -150,15 +150,15 @@ export class MonitorNewComponent implements OnInit {
message => {
this.isSpinning = false;
if (message.code === 0) {
this.notifySvc.success('新增监控成功', '');
this.notifySvc.success(this.i18nSvc.fanyi('monitors.new.success'), '');
this.router.navigateByUrl(`/monitors?app=${this.monitor.app}`);
} else {
this.notifySvc.error('新增监控失败', message.msg);
this.notifySvc.error(this.i18nSvc.fanyi('monitors.new.failed'), message.msg);
}
},
error => {
this.isSpinning = false;
this.notifySvc.error('新增监控失败', error.error.msg);
this.notifySvc.error(this.i18nSvc.fanyi('monitors.new.failed'), error.error.msg);
}
);
}
@@ -199,14 +199,14 @@ export class MonitorNewComponent implements OnInit {
message => {
this.isSpinning = false;
if (message.code === 0) {
this.notifySvc.success('探测成功', '');
this.notifySvc.success(this.i18nSvc.fanyi('monitors.detect.success'), '');
} else {
this.notifySvc.error('探测失败', message.msg);
this.notifySvc.error(this.i18nSvc.fanyi('monitors.detect.failed'), message.msg);
}
},
error => {
this.isSpinning = false;
this.notifySvc.error('探测异常', error.error.msg);
this.notifySvc.error(this.i18nSvc.fanyi('monitors.detect.failed'), error.error.msg);
}
);
}

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

@@ -40,7 +40,13 @@
"monitor": {
"": "Monitor",
"name": "Monitor Name",
"name.tip": "Monitor name, the name needs to be unique",
"host": "Monitor Host",
"host.tip": "The monitored peer IP or domain name",
"description": "Description",
"description.tip": "Description and remarks",
"intervals": "Intervals",
"intervals.tip": "Monitor the interval time of periodic collection of data, second",
"category": {
"": "Category",
"service": "Service",
@@ -98,7 +104,12 @@
"dashboard.monitors.distribute": "Monitor Distribution",
"monitors.list": "Monitor List",
"monitors.new": "New",
"monitors.new.success": "New Monitor Success",
"monitors.new.failed": "New Monitor Failed",
"monitors.edit": "Edit",
"monitors.edit.success": "Update Monitor Success",
"monitors.edit.failed": "Update Monitor Failed",
"monitors.not-found": "This Monitor Not Found",
"monitors.delete": "Delete",
"monitors.edit-monitor": "Edit Monitor",
"monitors.delete-monitor": "Delete Monitor",
@@ -107,6 +118,12 @@
"monitors.search.placeholder": "Search Monitor",
"monitors.search.filter": "Filter Monitor Status",
"monitors.total": "Total",
"monitors.advanced": "Advanced",
"monitors.advanced.tip": "Setting Advanced Param",
"monitors.detect": "Detect",
"monitors.detect.success": "Detect Success",
"monitors.detect.failed": "Detect Failed",
"monitors.detect.tip": "Detect monitor available before apply",
"common.search": "Search",
"common.refresh": "Refresh",
"common.edit-time": "Last Update Time",
@@ -130,6 +147,8 @@
"common.notify.enable-fail": "Enable Failed!",
"common.button.ok": "OK",
"common.button.cancel": "Cancel",
"common.button.help": "Help",
"common.button.detect": "Detect",
"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",

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

@@ -40,7 +40,13 @@
"monitor": {
"": "监控",
"name": "监控名称",
"name.tip": "标识监控的名称,名称需要保证唯一性",
"host": "监控Host",
"host.tip": "被监控的对端IP或域名",
"description": "描述备注",
"description.tip": "更多标识和描述此监控的备注信息",
"intervals": "采集间隔",
"intervals.tip": "监控周期性采集数据间隔时间,单位秒",
"category": {
"": "监控类别",
"service": "应用服务",
@@ -98,7 +104,12 @@
"dashboard.monitors.distribute": "纳管数量分布",
"monitors.list": "监控列表",
"monitors.new": "新增",
"monitors.new.success": "新增监控成功",
"monitors.new.failed": "新增监控失败",
"monitors.edit": "编辑",
"monitors.edit.success": "修改监控成功",
"monitors.edit.failed": "修改监控失败",
"monitors.not-found": "查询异常，此监控不存在",
"monitors.delete": "删除",
"monitors.edit-monitor": "编辑监控",
"monitors.delete-monitor": "删除监控",
@@ -107,6 +118,12 @@
"monitors.search.placeholder": "搜索监控",
"monitors.search.filter": "监控状态过滤",
"monitors.total": "总量",
"monitors.advanced": "高级设置",
"monitors.advanced.tip": "设置高级可选参数",
"monitors.detect": "测试连接",
"monitors.detect.success": "测试连接成功",
"monitors.detect.failed": "测试连接失败",
"monitors.detect.tip": "新增监控前是否先探测检查监控可用性",
"common.search": "搜索",
"common.refresh": "刷新",
"common.edit-time": "最新修改时间",
@@ -129,7 +146,9 @@
"common.notify.enable-success": "启用监控成功!",
"common.notify.enable-fail": "启用监控失败!",
"common.button.ok": "确定",
"common.button.detect": "测试",
"common.button.cancel": "取消",
"common.button.help": "帮助",
"app.lock": "锁屏",
"app.passport.desc": "TanCloud-易用友好的高性能监控云服务",
"app.passport.welcome": "欢迎使用TanCloud探云-监控云服务-tancloud.cn",