[web-app] 告警配置列表-告警定义关联监控功能

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

@@ -82,6 +82,9 @@
     </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)">
+        <i nz-icon nzType="link" nzTheme="outline"></i>
+      </button>
       <button nz-button nzType="primary" (click)="onEditOneAlertDefine(data.id)">
         <i nz-icon nzType="edit" nzTheme="outline"></i>
       </button>
@@ -97,15 +100,15 @@
   总量 {{ total }}
 </ng-template>
 
-
+<!-- 新增或修改告警定义弹出框 -->
 <nz-modal
-  [(nzVisible)]="isModalVisible"
-  [nzTitle]="isModalAdd?'新增告警阈值' : '修改告警阈值'"
-  (nzOnCancel)="onModalCancel()"
-  (nzOnOk)="onModalOk()"
+  [(nzVisible)]="isManageModalVisible"
+  [nzTitle]="isManageModalAdd?'新增告警阈值' : '修改告警阈值'"
+  (nzOnCancel)="onManageModalCancel()"
+  (nzOnOk)="onManageModalOk()"
   nzMaskClosable="false"
   nzWidth="60%"
-  [nzOkLoading]="isModalOkLoading"
+  [nzOkLoading]="isManageModalOkLoading"
 >
   <div *nzModalContent class = "-inner-content">
     <form nz-form>
@@ -177,3 +180,55 @@
     </form>
   </div>
 </nz-modal>
+
+<!-- 关联告警定义与监控关系弹出框 -->
+
+<nz-modal
+  [(nzVisible)]="isConnectModalVisible"
+  nzTitle="告警定义关联监控"
+  (nzOnCancel)="onConnectModalCancel()"
+  (nzOnOk)="onConnectModalOk()"
+  nzMaskClosable="false"
+  nzWidth="60%"
+  [nzOkLoading]="isConnectModalOkLoading"
+>
+  <nz-transfer
+    *nzModalContent
+    [nzDataSource]="transferData"
+    nzShowSearch="true"
+    nzShowSelectAll="false"
+    [nzRenderList]="[renderList, renderList]"
+    (nzChange)="change($event)"
+  >
+    <ng-template
+      #renderList
+      let-items
+      let-direction="direction"
+      let-stat="stat"
+      let-onItemSelectAll="onItemSelectAll"
+      let-onItemSelect="onItemSelect"
+    >
+      <nz-table #t [nzData]="$asTransferItems(items)" nzSize="small">
+        <thead>
+        <tr>
+          <th
+            [nzChecked]="stat.checkAll"
+            [nzIndeterminate]="stat.checkHalf"
+            (nzCheckedChange)="onItemSelectAll($event)"
+          ></th>
+          <th>监控</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr *ngFor="let data of t.data" (click)="onItemSelect(data)">
+          <td
+            [nzChecked]="!!data.checked"
+            (nzCheckedChange)="onItemSelect(data)"
+          ></td>
+          <td>{{ data.name }}</td>
+        </tr>
+        </tbody>
+      </nz-table>
+    </ng-template>
+  </nz-transfer>
+</nz-modal>