[web-app] 按钮提示Tooltip

web-app/src/app/routes/alert/alert-center/alert-center.component.html

@@ -17,7 +17,7 @@
   <i nz-icon nzType="delete" 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>
 
@@ -67,7 +67,7 @@
     <td nzAlign="center">{{ data.content }}</td>
     <td nzAlign="center">{{ data.gmtCreate }}</td>
     <td nzAlign="center" nzRight>
-      <button nz-button nzType="primary" (click)="onDeleteOneAlert(data.id)">
+      <button nz-button nzType="primary" (click)="onDeleteOneAlert(data.id)" nz-tooltip nzTooltipTitle="删除告警">
         <i nz-icon nzType="delete" nzTheme="outline"></i>
       </button>
     </td>

web-app/src/app/routes/alert/alert-notice/alert-notice.component.html

@@ -19,7 +19,7 @@
       <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
       新增接收人
     </button>
-    <button nz-button nzType="primary" (click)="syncReceiver()">
+    <button nz-button nzType="primary" (click)="syncReceiver()" nz-tooltip nzTooltipTitle="刷新">
       <i nz-icon nzType="sync" nzTheme="outline"></i>
     </button>
     <nz-table #fixedTable [nzData]="receivers"
@@ -66,10 +66,10 @@
         </td>
         <td nzAlign="center">{{ data.gmtUpdate? data.gmtUpdate : data.gmtCreate }}</td>
         <td nzAlign="center" nzRight>
-          <button nz-button nzType="primary" (click)="onEditOneNoticeReceiver(data)">
+          <button nz-button nzType="primary" (click)="onEditOneNoticeReceiver(data)" nz-tooltip nzTooltipTitle="修改接收人">
             <i nz-icon nzType="edit" nzTheme="outline"></i>
           </button>
-          <button nz-button nzType="primary" (click)="onDeleteOneNoticeReceiver(data.id)">
+          <button nz-button nzType="primary" (click)="onDeleteOneNoticeReceiver(data.id)" nz-tooltip nzTooltipTitle="删除接收人">
             <i nz-icon nzType="delete" nzTheme="outline"></i>
           </button>
         </td>
@@ -82,7 +82,7 @@
       <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
       新增通知策略
     </button>
-    <button nz-button nzType="primary" (click)="syncRule()">
+    <button nz-button nzType="primary" (click)="syncRule()" nz-tooltip nzTooltipTitle="刷新">
       <i nz-icon nzType="sync" nzTheme="outline"></i>
     </button>
     <nz-table #ruleFixedTable [nzData]="rules"
@@ -125,10 +125,10 @@
         </td>
         <td nzAlign="center">{{ data.gmtUpdate? data.gmtUpdate : data.gmtCreate }}</td>
         <td nzAlign="center" nzRight>
-          <button nz-button nzType="primary" (click)="onEditOneNoticeRule(data)">
+          <button nz-button nzType="primary" (click)="onEditOneNoticeRule(data)" nz-tooltip nzTooltipTitle="修改告警策略">
             <i nz-icon nzType="edit" nzTheme="outline"></i>
           </button>
-          <button nz-button nzType="primary" (click)="onDeleteOneNoticeRule(data.id)">
+          <button nz-button nzType="primary" (click)="onDeleteOneNoticeRule(data.id)" nz-tooltip nzTooltipTitle="删除告警策略">
             <i nz-icon nzType="delete" nzTheme="outline"></i>
           </button>
         </td>

web-app/src/app/routes/alert/alert-notice/alert-notice.component.ts

@@ -5,6 +5,7 @@ import {NoticeRuleService} from "../../../service/notice-rule.service";
 import {NoticeReceiver} from "../../../pojo/NoticeReceiver";
 import {finalize} from "rxjs/operators";
 import {NoticeRule} from "../../../pojo/NoticeRule";
+import {NzModalService} from "ng-zorro-antd/modal";
 
 @Component({
   selector: 'app-alert-notice',
@@ -16,6 +17,7 @@ export class AlertNoticeComponent implements OnInit {
 
   constructor(private notifySvc: NzNotificationService,
               private noticeReceiverSvc: NoticeReceiverService,
+              private modal: NzModalService,
               private noticeRuleSvc : NoticeRuleService) { }
 
   receivers!: NoticeReceiver[];
@@ -70,6 +72,17 @@ export class AlertNoticeComponent implements OnInit {
   }
 
   onDeleteOneNoticeReceiver(receiveId : number) {
+    this.modal.confirm({
+      nzTitle: '请确认是否删除！',
+      nzOkText: '确定',
+      nzCancelText: '取消',
+      nzOkDanger: true,
+      nzOkType: "primary",
+      nzOnOk: () => this.deleteOneNoticeReceiver(receiveId)
+    });
+  }
+
+  deleteOneNoticeReceiver(receiveId : number) {
     const deleteReceiver$ = this.noticeReceiverSvc.deleteReceiver(receiveId)
       .pipe(finalize(() => {
         deleteReceiver$.unsubscribe();
@@ -87,6 +100,17 @@ export class AlertNoticeComponent implements OnInit {
   }
 
   onDeleteOneNoticeRule(ruleId : number) {
+    this.modal.confirm({
+      nzTitle: '请确认是否删除！',
+      nzOkText: '确定',
+      nzCancelText: '取消',
+      nzOkDanger: true,
+      nzOkType: "primary",
+      nzOnOk: () => this.deleteOneNoticeRule(ruleId)
+    });
+  }
+
+  deleteOneNoticeRule(ruleId : number) {
     const deleteRule$ = this.noticeRuleSvc.deleteNoticeRule(ruleId)
       .pipe(finalize(() => {
         deleteRule$.unsubscribe();

web-app/src/app/routes/alert/alert-setting/alert-setting.component.html

@@ -25,7 +25,7 @@
   <i nz-icon nzType="delete" 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>
 
@@ -86,13 +86,13 @@
     </td>
     <td nzAlign="center">{{ data.gmtUpdate? data.gmtUpdate : data.gmtCreate }}</td>
     <td nzAlign="center" nzRight>
-      <button nz-button nzType="primary" (click)="onOpenConnectModal(data.id, data.app)">
+      <button nz-button nzType="primary" (click)="onOpenConnectModal(data.id, data.app)" nz-tooltip nzTooltipTitle="配置关联监控">
         <i nz-icon nzType="link" nzTheme="outline"></i>
       </button>
-      <button nz-button nzType="primary" (click)="onEditOneAlertDefine(data.id)">
+      <button nz-button nzType="primary" (click)="onEditOneAlertDefine(data.id)" nz-tooltip nzTooltipTitle="修改告警配置">
         <i nz-icon nzType="edit" nzTheme="outline"></i>
       </button>
-      <button nz-button nzType="primary" (click)="onDeleteOneAlertDefine(data.id)">
+      <button nz-button nzType="primary" (click)="onDeleteOneAlertDefine(data.id)" nz-tooltip nzTooltipTitle="删除告警配置">
         <i nz-icon nzType="delete" nzTheme="outline"></i>
       </button>
     </td>

web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html

@@ -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>

web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html

@@ -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>

web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html

@@ -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>