[web-app] 按钮提示Tooltip

This commit is contained in:
tomsun28
2021-12-18 19:29:12 +08:00
parent 01b47ca2a0
commit 0a0b0ced79
7 changed files with 74 additions and 30 deletions

View File

@@ -23,15 +23,19 @@
<div class = "-inner-content">
<form nz-form>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor= 'host' nzRequired="true">监控Host</nz-form-label>
<nz-form-label [nzSpan]="7" nzFor= 'host' nzRequired="true" nzTooltipTitle="被监控的对端IP或域名">
监控Host
</nz-form-label>
<nz-form-control [nzSpan]="8">
<input [(ngModel)]="monitor.host" nz-input name="host" type="text" id="host" placeholder="请输入域名或IP">
</nz-form-control>
</nz-form-item >
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor= 'name' nzRequired="true">监控名称</nz-form-label>
<nz-form-label [nzSpan]="7" nzFor= 'name' nzRequired="true" nzTooltipTitle="标识此监控名称,名称需要保证唯一性">
监控名称
</nz-form-label>
<nz-form-control [nzSpan]="8">
<input [(ngModel)]="monitor.name" nz-input name="name" type="text" id="name">
<input [(ngModel)]="monitor.name" nz-input name="name" type="text" id="name" placeholder="监控名称需要保证唯一性">
</nz-form-control>
</nz-form-item >
@@ -116,23 +120,29 @@
<nz-divider></nz-divider>
<nz-form-item>
<nz-form-label nzSpan="7" nzFor= "intervals">采集间隔</nz-form-label>
<nz-form-label nzSpan="7" nzFor= "intervals" nzTooltipTitle="监控周期性采集数据间隔时间,单位秒">
采集间隔
</nz-form-label>
<nz-form-control nzSpan="10">
<nz-input-number [(ngModel)]="monitor.intervals" [nzMin]="10" [nzMax]="10000" [nzStep]="8"
name="intervals" id="intervals" nzPlaceHolder="监控周期性采集间隔时间,单位秒">
name="intervals" id="intervals">
</nz-input-number>
</nz-form-control>
</nz-form-item >
<nz-form-item>
<nz-form-label nzSpan="7" nzFor= "detect">启动探测</nz-form-label>
<nz-form-label nzSpan="7" nzFor= "detect" nzTooltipTitle="新增监控前是否先探测检查监控可用性">
是否探测
</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'>描述备注</nz-form-label>
<nz-form-label [nzSpan]="7" nzFor= 'description' nzTooltipTitle="更多标识和描述此监控的备注信息">
描述备注
</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>

View File

@@ -34,7 +34,7 @@
<i nz-icon nzType="down-circle" nzTheme="outline"></i>
取消纳管
</button>
<button nz-button nzType="primary" (click)="sync()">
<button nz-button nzType="primary" (click)="sync()" nz-tooltip nzTooltipTitle="刷新">
<i nz-icon nzType="sync" nzTheme="outline"></i>
</button>
@@ -97,16 +97,16 @@
</td>
<td nzAlign="center">{{ data.gmtUpdate? data.gmtUpdate : data.gmtCreate }}</td>
<td nzAlign="center" nzRight>
<button nz-button nzType="primary" (click)="onEditOneMonitor(data.id)">
<button nz-button nzType="primary" (click)="onEditOneMonitor(data.id)" nz-tooltip nzTooltipTitle="修改监控">
<i nz-icon nzType="edit" nzTheme="outline"></i>
</button>
<button nz-button nzType="primary" (click)="onDeleteOneMonitor(data.id)">
<button nz-button nzType="primary" (click)="onDeleteOneMonitor(data.id)" nz-tooltip nzTooltipTitle="删除监控">
<i nz-icon nzType="delete" nzTheme="outline"></i>
</button>
<button nz-button nzType="primary" (click)="onEnableManageOneMonitor(data.id)">
<button nz-button nzType="primary" (click)="onEnableManageOneMonitor(data.id)" nz-tooltip nzTooltipTitle="启用纳管">
<i nz-icon nzType="up-circle" nzTheme="outline"></i>
</button>
<button nz-button nzType="primary" (click)="onCancelManageOneMonitor(data.id)">
<button nz-button nzType="primary" (click)="onCancelManageOneMonitor(data.id)" nz-tooltip nzTooltipTitle="取消纳管">
<i nz-icon nzType="down-circle" nzTheme="outline"></i>
</button>
</td>

View File

@@ -23,14 +23,18 @@
<div class = "-inner-content">
<form nz-form>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor= 'host' nzRequired="true">监控Host</nz-form-label>
<nz-form-label [nzSpan]="7" nzFor= 'host' nzRequired="true" nzTooltipTitle="被监控的对端IP或域名">
监控Host
</nz-form-label>
<nz-form-control [nzSpan]="8">
<input [(ngModel)]="monitor.host" nz-input name="host" type="text" id="host"
placeholder="请输入域名或IP" (ngModelChange)="onHostChange($event)">
</nz-form-control>
</nz-form-item >
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor= 'name' nzRequired="true">监控名称</nz-form-label>
<nz-form-label [nzSpan]="7" nzFor= 'name' nzRequired="true" nzTooltipTitle="标识此监控名称,名称需要保证唯一性">
监控名称
</nz-form-label>
<nz-form-control [nzSpan]="8">
<input [(ngModel)]="monitor.name" nz-input name="name" type="text" id="name" placeholder="监控名称需要保证唯一性">
</nz-form-control>
@@ -117,23 +121,29 @@
<nz-divider></nz-divider>
<nz-form-item>
<nz-form-label nzSpan="7" nzFor= "intervals">采集间隔</nz-form-label>
<nz-form-label nzSpan="7" nzFor= "intervals" nzTooltipTitle="监控周期性采集数据间隔时间,单位秒">
采集间隔
</nz-form-label>
<nz-form-control nzSpan="8">
<nz-input-number [(ngModel)]="monitor.intervals" [nzMin]="10" [nzMax]="10000" [nzStep]="10"
name="intervals" id="intervals" nzPlaceHolder="监控周期性采集间隔时间,单位秒">
name="intervals" id="intervals">
</nz-input-number>
</nz-form-control>
</nz-form-item >
<nz-form-item>
<nz-form-label nzSpan="7" nzFor= "detect">启动探测</nz-form-label>
<nz-form-label nzSpan="7" nzFor= "detect" nzTooltipTitle="新增监控前是否先探测检查监控可用性">
是否探测
</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'>描述备注</nz-form-label>
<nz-form-label [nzSpan]="7" nzFor= 'description' nzTooltipTitle="更多标识和描述此监控的备注信息">
描述备注
</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>