From eda23b3751229309bb48156cf341aef248036390 Mon Sep 17 00:00:00 2001
From: tomsun28 <tomsun28@outlook.com>
Date: Sat, 18 Dec 2021 19:29:12 +0800
Subject: [PATCH] =?UTF-8?q?[web-app]=20=E6=8C=89=E9=92=AE=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BATooltip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../alert-center/alert-center.component.html  |  4 ++--
 .../alert-notice/alert-notice.component.html  | 12 +++++-----
 .../alert-notice/alert-notice.component.ts    | 24 +++++++++++++++++++
 .../alert-setting.component.html              |  8 +++----
 .../monitor-edit/monitor-edit.component.html  | 24 +++++++++++++------
 .../monitor-list/monitor-list.component.html  | 10 ++++----
 .../monitor-new/monitor-new.component.html    | 22 ++++++++++++-----
 7 files changed, 74 insertions(+), 30 deletions(-)

diff --git a/web-app/src/app/routes/alert/alert-center/alert-center.component.html b/web-app/src/app/routes/alert/alert-center/alert-center.component.html
index 69a192b..3d96648 100644
--- a/web-app/src/app/routes/alert/alert-center/alert-center.component.html
+++ b/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>
diff --git a/web-app/src/app/routes/alert/alert-notice/alert-notice.component.html b/web-app/src/app/routes/alert/alert-notice/alert-notice.component.html
index 1335d8c..41c3f7e 100644
--- a/web-app/src/app/routes/alert/alert-notice/alert-notice.component.html
+++ b/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>
diff --git a/web-app/src/app/routes/alert/alert-notice/alert-notice.component.ts b/web-app/src/app/routes/alert/alert-notice/alert-notice.component.ts
index 93b2dc6..47b099f 100644
--- a/web-app/src/app/routes/alert/alert-notice/alert-notice.component.ts
+++ b/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();
diff --git a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
index 79c7d6e..1e2b2f2 100644
--- a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
+++ b/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>
diff --git 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
index 000ca87..a0084da 100644
--- 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
@@ -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>
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 2262de0..739e9e3 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
@@ -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>
diff --git 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
index 20edc80..b71963b 100644
--- 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
@@ -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>