[webapp] 批量处理eslint格式告警

2021-12-23 15:59:49 +08:00
parent 1469e85443
commit 7e41f64491
72 changed files with 1724 additions and 2170 deletions
--- 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
@@ -30,91 +30,106 @@
    <i nz-icon nzType="sync" nzTheme="outline"></i>
  </button>

-  <button style="margin-right: 25px;float: right;" nz-button nzType="primary" (click)="onFilterSearchAlerts()">
-    搜索
-  </button>
-  <input style="margin-right: 5px;float: right;width:150px;border-radius: 9px;text-align: center;" nz-input
-         type="text" placeholder="搜索告警内容" nzSize="default" [(ngModel)]="filterContent" />
-  <nz-select style="margin-right: 10px;float: right;width: 120px;" nzAllowClear
-             [nzPlaceHolder]="'告警状态过滤'" [(ngModel)]="filterStatus">
+  <button style="margin-right: 25px; float: right" nz-button nzType="primary" (click)="onFilterSearchAlerts()"> 搜索 </button>
+  <input
+    style="margin-right: 5px; float: right; width: 150px; border-radius: 9px; text-align: center"
+    nz-input
+    type="text"
+    placeholder="搜索告警内容"
+    nzSize="default"
+    [(ngModel)]="filterContent"
+  />
+  <nz-select
+    style="margin-right: 10px; float: right; width: 120px"
+    nzAllowClear
+    [nzPlaceHolder]="'告警状态过滤'"
+    [(ngModel)]="filterStatus"
+  >
    <nz-option nzLabel="全部状态" nzValue="9"></nz-option>
    <nz-option nzLabel="未处理" nzValue="0"></nz-option>
    <nz-option nzLabel="已处理" nzValue="3"></nz-option>
  </nz-select>
-  <nz-select style="margin-right: 10px;float: right;width: 120px;" nzAllowClear
-             [nzPlaceHolder]="'告警级别过滤'" [(ngModel)]="filterPriority">
+  <nz-select
+    style="margin-right: 10px; float: right; width: 120px"
+    nzAllowClear
+    [nzPlaceHolder]="'告警级别过滤'"
+    [(ngModel)]="filterPriority"
+  >
    <nz-option nzLabel="全部级别" nzValue="9"></nz-option>
    <nz-option nzLabel="警告级别" nzValue="2"></nz-option>
    <nz-option nzLabel="严重级别" nzValue="1"></nz-option>
    <nz-option nzLabel="紧急级别" nzValue="0"></nz-option>
  </nz-select>
-
 </div>

-<nz-table #fixedTable [nzData]="alerts"
-          [nzPageIndex]="pageIndex" [nzPageSize]="pageSize" [nzTotal]="total"
-          nzFrontPagination ="false"
-          [nzLoading] = "tableLoading"
-          nzShowSizeChanger
-          [nzShowTotal]="rangeTemplate"
-          [nzPageSizeOptions]="[8,15,25]"
-          (nzQueryParams)="onTablePageChange($event)"
-          nzShowPagination = "true" [nzScroll]="{ x: '1150px', y: '1240px' }">
+<nz-table
+  #fixedTable
+  [nzData]="alerts"
+  [nzPageIndex]="pageIndex"
+  [nzPageSize]="pageSize"
+  [nzTotal]="total"
+  nzFrontPagination="false"
+  [nzLoading]="tableLoading"
+  nzShowSizeChanger
+  [nzShowTotal]="rangeTemplate"
+  [nzPageSizeOptions]="[8, 15, 25]"
+  (nzQueryParams)="onTablePageChange($event)"
+  nzShowPagination="true"
+  [nzScroll]="{ x: '1150px', y: '1240px' }"
+>
  <thead>
-  <tr>
-    <th nzAlign="center" nzLeft nzWidth="60px" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
-    <th nzAlign="center">告警指标</th>
-    <th nzAlign="center">所属监控</th>
-    <th nzAlign="center">级别</th>
-    <th nzAlign="center">告警内容</th>
-    <th nzAlign="center">状态</th>
-    <th nzAlign="center">告警时间</th>
-    <th nzAlign="center" nzRight>操作</th>
-  </tr>
+    <tr>
+      <th nzAlign="center" nzLeft nzWidth="60px" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
+      <th nzAlign="center">告警指标</th>
+      <th nzAlign="center">所属监控</th>
+      <th nzAlign="center">级别</th>
+      <th nzAlign="center">告警内容</th>
+      <th nzAlign="center">状态</th>
+      <th nzAlign="center">告警时间</th>
+      <th nzAlign="center" nzRight>操作</th>
+    </tr>
  </thead>
  <tbody>
-  <tr *ngFor="let data of fixedTable.data" [ngStyle]="{'background-color':data.status === 0 ? '#E1E7A89B' : 'inherit' }">
-    <td nzAlign="center" nzLeft [nzChecked]="checkedAlertIds.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
-    <td nzAlign="center">{{ data.target }}</td>
-    <td nzAlign="center">
-      <a [routerLink]="['/monitors/' + data.monitorId]">
-        <span>{{ data.monitorName }}</span>
-      </a>
-    </td>
-    <td nzAlign="center">
-      <nz-tag *ngIf="data.priority == 0" nzColor="red">
-        <i nz-icon nzType="bell" nzTheme="outline"></i>
-        <span>紧急告警</span>
-      </nz-tag>
-      <nz-tag *ngIf="data.priority == 1" nzColor="orange">
-        <i nz-icon nzType="bell" nzTheme="outline"></i>
-        <span>严重告警</span>
-      </nz-tag>
-      <nz-tag *ngIf="data.priority == 2" nzColor="yellow">
-        <i nz-icon nzType="bell" nzTheme="outline"></i>
-        <span>警告告警</span>
-      </nz-tag>
-    </td>
-    <td nzAlign="center">{{ data.content }}</td>
-    <td nzAlign="center">
-      {{ data.status === 0 ? '未处理' : '已处理' }}
-    </td>
-    <td nzAlign="center">{{ data.gmtCreate }}</td>
-    <td nzAlign="center" nzRight>
-      <button nz-button nzType="primary" (click)="onDeleteOneAlert(data.id)" nz-tooltip nzTooltipTitle="删除告警">
-        <i nz-icon nzType="delete" nzTheme="outline"></i>
-      </button>
-      <button nz-button nzType="primary" (click)="onMarkReadOneAlert(data.id)" nz-tooltip nzTooltipTitle="标记已处理">
-        <i nz-icon nzType="down-circle" nzTheme="outline"></i>
-      </button>
-      <button nz-button nzType="primary" (click)="onMarkUnReadOneAlert(data.id)" nz-tooltip nzTooltipTitle="标记未处理">
-        <i nz-icon nzType="up-circle" nzTheme="outline"></i>
-      </button>
-    </td>
-  </tr>
+    <tr *ngFor="let data of fixedTable.data" [ngStyle]="{ 'background-color': data.status === 0 ? '#E1E7A89B' : 'inherit' }">
+      <td nzAlign="center" nzLeft [nzChecked]="checkedAlertIds.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
+      <td nzAlign="center">{{ data.target }}</td>
+      <td nzAlign="center">
+        <a [routerLink]="['/monitors/' + data.monitorId]">
+          <span>{{ data.monitorName }}</span>
+        </a>
+      </td>
+      <td nzAlign="center">
+        <nz-tag *ngIf="data.priority == 0" nzColor="red">
+          <i nz-icon nzType="bell" nzTheme="outline"></i>
+          <span>紧急告警</span>
+        </nz-tag>
+        <nz-tag *ngIf="data.priority == 1" nzColor="orange">
+          <i nz-icon nzType="bell" nzTheme="outline"></i>
+          <span>严重告警</span>
+        </nz-tag>
+        <nz-tag *ngIf="data.priority == 2" nzColor="yellow">
+          <i nz-icon nzType="bell" nzTheme="outline"></i>
+          <span>警告告警</span>
+        </nz-tag>
+      </td>
+      <td nzAlign="center">{{ data.content }}</td>
+      <td nzAlign="center">
+        {{ data.status === 0 ? '未处理' : '已处理' }}
+      </td>
+      <td nzAlign="center">{{ data.gmtCreate }}</td>
+      <td nzAlign="center" nzRight>
+        <button nz-button nzType="primary" (click)="onDeleteOneAlert(data.id)" nz-tooltip nzTooltipTitle="删除告警">
+          <i nz-icon nzType="delete" nzTheme="outline"></i>
+        </button>
+        <button nz-button nzType="primary" (click)="onMarkReadOneAlert(data.id)" nz-tooltip nzTooltipTitle="标记已处理">
+          <i nz-icon nzType="down-circle" nzTheme="outline"></i>
+        </button>
+        <button nz-button nzType="primary" (click)="onMarkUnReadOneAlert(data.id)" nz-tooltip nzTooltipTitle="标记未处理">
+          <i nz-icon nzType="up-circle" nzTheme="outline"></i>
+        </button>
+      </td>
+    </tr>
  </tbody>
 </nz-table>

-<ng-template #rangeTemplate>
-  总量 {{ total }}
-</ng-template>
+<ng-template #rangeTemplate> 总量 {{ total }} </ng-template>
--- a/web-app/src/app/routes/alert/alert-center/alert-center.component.spec.ts
+++ b/web-app/src/app/routes/alert/alert-center/alert-center.component.spec.ts
@@ -8,9 +8,8 @@ describe('AlertCenterComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      declarations: [ AlertCenterComponent ]
-    })
-    .compileComponents();
+      declarations: [AlertCenterComponent]
+    }).compileComponents();
  });

  beforeEach(() => {
--- a/web-app/src/app/routes/alert/alert-center/alert-center.component.ts
+++ b/web-app/src/app/routes/alert/alert-center/alert-center.component.ts
@@ -1,21 +1,18 @@
 import { Component, OnInit } from '@angular/core';
-import {NzTableQueryParams} from "ng-zorro-antd/table";
-import {Alert} from "../../../pojo/Alert";
-import {NzNotificationService} from "ng-zorro-antd/notification";
-import {AlertService} from "../../../service/alert.service";
-import {NzModalService} from "ng-zorro-antd/modal";
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { NzNotificationService } from 'ng-zorro-antd/notification';
+import { NzTableQueryParams } from 'ng-zorro-antd/table';
+
+import { Alert } from '../../../pojo/Alert';
+import { AlertService } from '../../../service/alert.service';

@Component({
  selector: 'app-alert-center',
  templateUrl: './alert-center.component.html',
-  styles: [
-  ]
+  styles: []
 })
 export class AlertCenterComponent implements OnInit {
-
-  constructor(private notifySvc: NzNotificationService,
-              private modal: NzModalService,
-              private alertSvc: AlertService) { }
+  constructor(private notifySvc: NzNotificationService, private modal: NzModalService, private alertSvc: AlertService) {}

  pageIndex: number = 1;
  pageSize: number = 8;
@@ -34,27 +31,29 @@ export class AlertCenterComponent implements OnInit {

  onFilterSearchAlerts() {
    this.tableLoading = true;
-    let filterAlerts$ = this.alertSvc.searchAlerts(this.filterStatus, this.filterPriority,
-      this.filterContent, this.pageIndex - 1, this.pageSize)
-      .subscribe(message => {
-        filterAlerts$.unsubscribe();
-        this.tableLoading = false;
-        this.checkedAll = false;
-        this.checkedAlertIds.clear();
-        if (message.code === 0) {
-          let page = message.data;
-          this.alerts = page.content;
-          this.pageIndex = page.number + 1;
-          this.total = page.totalElements;
-        } else {
-          console.warn(message.msg);
+    let filterAlerts$ = this.alertSvc
+      .searchAlerts(this.filterStatus, this.filterPriority, this.filterContent, this.pageIndex - 1, this.pageSize)
+      .subscribe(
+        message => {
+          filterAlerts$.unsubscribe();
+          this.tableLoading = false;
+          this.checkedAll = false;
+          this.checkedAlertIds.clear();
+          if (message.code === 0) {
+            let page = message.data;
+            this.alerts = page.content;
+            this.pageIndex = page.number + 1;
+            this.total = page.totalElements;
+          } else {
+            console.warn(message.msg);
+          }
+        },
+        error => {
+          this.tableLoading = false;
+          filterAlerts$.unsubscribe();
+          console.error(error.msg);
        }
-      }, error => {
-        this.tableLoading = false;
-        filterAlerts$.unsubscribe();
-        console.error(error.msg);
-      });
-
+      );
  }

  sync() {
@@ -63,8 +62,8 @@ export class AlertCenterComponent implements OnInit {

  loadAlertsTable() {
    this.tableLoading = true;
-    let alertsInit$ = this.alertSvc.getAlerts(this.pageIndex - 1, this.pageSize)
-      .subscribe(message => {
+    let alertsInit$ = this.alertSvc.getAlerts(this.pageIndex - 1, this.pageSize).subscribe(
+      message => {
        this.tableLoading = false;
        this.checkedAll = false;
        this.checkedAlertIds.clear();
@@ -77,16 +76,18 @@ export class AlertCenterComponent implements OnInit {
          console.warn(message.msg);
        }
        alertsInit$.unsubscribe();
-      }, error => {
+      },
+      error => {
        this.tableLoading = false;
        alertsInit$.unsubscribe();
        console.error(error.msg);
-      });
+      }
+    );
  }

  onDeleteAlerts() {
    if (this.checkedAlertIds == null || this.checkedAlertIds.size === 0) {
-      this.notifySvc.warning("未选中任何待删除项！","");
+      this.notifySvc.warning('未选中任何待删除项！', '');
      return;
    }
    this.modal.confirm({
@@ -94,14 +95,14 @@ export class AlertCenterComponent implements OnInit {
      nzOkText: '确定',
      nzCancelText: '取消',
      nzOkDanger: true,
-      nzOkType: "primary",
+      nzOkType: 'primary',
      nzOnOk: () => this.deleteAlerts(this.checkedAlertIds)
    });
  }

  onMarkReadAlerts() {
    if (this.checkedAlertIds == null || this.checkedAlertIds.size === 0) {
-      this.notifySvc.warning("未选中任何待标记项！","");
+      this.notifySvc.warning('未选中任何待标记项！', '');
      return;
    }
    this.modal.confirm({
@@ -109,13 +110,13 @@ export class AlertCenterComponent implements OnInit {
      nzOkText: '确定',
      nzCancelText: '取消',
      nzOkDanger: true,
-      nzOkType: "primary",
+      nzOkType: 'primary',
      nzOnOk: () => this.updateAlertsStatus(this.checkedAlertIds, 3)
    });
  }
  onMarkUnReadAlerts() {
    if (this.checkedAlertIds == null || this.checkedAlertIds.size === 0) {
-      this.notifySvc.warning("未选中任何待标记项！","");
+      this.notifySvc.warning('未选中任何待标记项！', '');
      return;
    }
    this.modal.confirm({
@@ -123,7 +124,7 @@ export class AlertCenterComponent implements OnInit {
      nzOkText: '确定',
      nzCancelText: '取消',
      nzOkDanger: true,
-      nzOkType: "primary",
+      nzOkType: 'primary',
      nzOnOk: () => this.updateAlertsStatus(this.checkedAlertIds, 0)
    });
  }
@@ -136,7 +137,7 @@ export class AlertCenterComponent implements OnInit {
      nzOkText: '确定',
      nzCancelText: '取消',
      nzOkDanger: true,
-      nzOkType: "primary",
+      nzOkType: 'primary',
      nzOnOk: () => this.deleteAlerts(alerts)
    });
  }
@@ -149,7 +150,7 @@ export class AlertCenterComponent implements OnInit {
      nzOkText: '确定',
      nzCancelText: '取消',
      nzOkDanger: true,
-      nzOkType: "primary",
+      nzOkType: 'primary',
      nzOnOk: () => this.updateAlertsStatus(alerts, 3)
    });
  }
@@ -162,51 +163,51 @@ export class AlertCenterComponent implements OnInit {
      nzOkText: '确定',
      nzCancelText: '取消',
      nzOkDanger: true,
-      nzOkType: "primary",
+      nzOkType: 'primary',
      nzOnOk: () => this.updateAlertsStatus(alerts, 0)
    });
  }

  deleteAlerts(alertIds: Set<number>) {
    this.tableLoading = true;
-    const deleteAlerts$ = this.alertSvc.deleteAlerts(alertIds)
-      .subscribe(message => {
-          deleteAlerts$.unsubscribe();
-          if (message.code === 0) {
-            this.notifySvc.success("删除成功！", "");
-            this.loadAlertsTable();
-          } else {
-            this.tableLoading = false;
-            this.notifySvc.error("删除失败！", message.msg);
-          }
-        },
-        error => {
+    const deleteAlerts$ = this.alertSvc.deleteAlerts(alertIds).subscribe(
+      message => {
+        deleteAlerts$.unsubscribe();
+        if (message.code === 0) {
+          this.notifySvc.success('删除成功！', '');
+          this.loadAlertsTable();
+        } else {
          this.tableLoading = false;
-          deleteAlerts$.unsubscribe();
-          this.notifySvc.error("删除失败！", error.msg)
+          this.notifySvc.error('删除失败！', message.msg);
        }
-      );
+      },
+      error => {
+        this.tableLoading = false;
+        deleteAlerts$.unsubscribe();
+        this.notifySvc.error('删除失败！', error.msg);
+      }
+    );
  }

  updateAlertsStatus(alertIds: Set<number>, status: number) {
    this.tableLoading = true;
-    const markAlertsStatus$ = this.alertSvc.applyAlertsStatus(alertIds, status)
-      .subscribe(message => {
-          markAlertsStatus$.unsubscribe();
-          if (message.code === 0) {
-            this.notifySvc.success("标记成功！", "");
-            this.loadAlertsTable();
-          } else {
-            this.tableLoading = false;
-            this.notifySvc.error("标记失败！", message.msg);
-          }
-        },
-        error => {
+    const markAlertsStatus$ = this.alertSvc.applyAlertsStatus(alertIds, status).subscribe(
+      message => {
+        markAlertsStatus$.unsubscribe();
+        if (message.code === 0) {
+          this.notifySvc.success('标记成功！', '');
+          this.loadAlertsTable();
+        } else {
          this.tableLoading = false;
-          markAlertsStatus$.unsubscribe();
-          this.notifySvc.error("标记失败！", error.msg)
+          this.notifySvc.error('标记失败！', message.msg);
        }
-      );
+      },
+      error => {
+        this.tableLoading = false;
+        markAlertsStatus$.unsubscribe();
+        this.notifySvc.error('标记失败！', error.msg);
+      }
+    );
  }

  // begin: 列表多选分页逻辑