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

<nz-divider></nz-divider>
<nz-breadcrumb>
  <nz-breadcrumb-item>
    <a [routerLink]="['/']">
      <i nz-icon nzType="home"></i>
      <span>仪表盘</span>
    </a>
  </nz-breadcrumb-item>
  <nz-breadcrumb-item>
    <i nz-icon nzType="alert"></i>
    <span>告警阈值配置</span>
  </nz-breadcrumb-item>
</nz-breadcrumb>
<nz-divider></nz-divider>

<button nz-button nzType="primary" (click)="onNewAlertDefine()">
  <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
  新增阈值
</button>
<button nz-button nzType="primary" (click)="onEditAlertDefine()" >
  <i nz-icon nzType="edit" nzTheme="outline"></i>
  编辑
</button>
<button nz-button nzType="primary" (click)="onDeleteAlertDefines()">
  <i nz-icon nzType="delete" nzTheme="outline"></i>
  删除
</button>
<button nz-button nzType="primary" (click)="sync()">
  <i nz-icon nzType="sync" nzTheme="outline"></i>
</button>

<nz-table #fixedTable [nzData]="defines"
          [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">最新修改时间</th>
    <th nzAlign="center" nzRight>操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of fixedTable.data">
    <td nzAlign="center" nzLeft [nzChecked]="checkedDefineIds.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
    <td nzAlign="center">
        <span>{{ data.app + '.'  + data.metric + '.' + data.field }}</span>
    </td>
    <td nzAlign="center">
      <span>{{ data.expr}}</span>
    </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.times }}</td>
    <td nzAlign="center">{{ data.template }}</td>
    <td nzAlign="center">
      <nz-tag *ngIf="data.preset" nzColor="green">
        <span>是</span>
      </nz-tag>
      <nz-tag *ngIf="!data.preset" nzColor="orange">
        <span>否</span>
      </nz-tag>
    </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>
      <button nz-button nzType="primary" (click)="onDeleteOneAlertDefine(data.id)">
        <i nz-icon nzType="delete" nzTheme="outline"></i>
      </button>
    </td>
  </tr>
  </tbody>
</nz-table>

<ng-template #rangeTemplate>
  总量 {{ total }}
</ng-template>

<!-- 新增或修改告警定义弹出框 -->
<nz-modal
  [(nzVisible)]="isManageModalVisible"
  [nzTitle]="isManageModalAdd?'新增告警阈值' : '修改告警阈值'"
  (nzOnCancel)="onManageModalCancel()"
  (nzOnOk)="onManageModalOk()"
  nzMaskClosable="false"
  nzWidth="60%"
  [nzOkLoading]="isManageModalOkLoading"
>
  <div *nzModalContent class = "-inner-content">
    <form nz-form>
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor= 'target' nzRequired="true">指标对象</nz-form-label>
        <nz-form-control [nzSpan]="8">
          <nz-cascader name="target" id="target" [nzOptions]="appHierarchies" [(ngModel)]="cascadeValues">
          </nz-cascader>
        </nz-form-control>
      </nz-form-item >
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor= 'expr' nzRequired="true">阈值触发表达式</nz-form-label>
        <nz-form-control [nzSpan]="8">
          <nz-textarea-count [nzMaxCharacterCount]="100">
            <textarea [(ngModel)]="define.expr" rows="3" nz-input
                      name="expr" id="expr"  placeholder="请输入阈值判断表达式">
            </textarea>
          </nz-textarea-count>
        </nz-form-control>
      </nz-form-item >
      <nz-form-item>
        <nz-form-label nzSpan="7"
                       nzRequired="true"
                       nzFor= "priority">告警级别
        </nz-form-label>
        <nz-form-control nzSpan="8">
          <nz-select
            [(ngModel)]="define.priority"
            nzAllowClear
            nzPlaceHolder="Choose"
            name="priority" id="priority"
          >
            <nz-option [nzValue]="0" nzLabel="紧急告警"></nz-option>
            <nz-option [nzValue]="1" nzLabel="严重告警"></nz-option>
            <nz-option [nzValue]="2" nzLabel="警告告警"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="7" nzRequired="true" nzFor= "duration">触发次数</nz-form-label>
        <nz-form-control nzSpan="8">
          <nz-input-number [(ngModel)]="define.times" [nzMin]="1" [nzMax]="10" [nzStep]="1"
                           name="duration" id="duration" nzPlaceHolder="触发几次后告警">
          </nz-input-number>
        </nz-form-control>
      </nz-form-item >
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor= 'template' nzRequired="true">通知模版</nz-form-label>
        <nz-form-control [nzSpan]="8">
          <nz-textarea-count [nzMaxCharacterCount]="100">
            <textarea [(ngModel)]="define.template" rows="3" nz-input
                      name="template" id="template"  placeholder="请输入告警的通知模版">
            </textarea>
          </nz-textarea-count>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="7" nzRequired="true" nzFor= "preset">全局默认</nz-form-label>
        <nz-form-control nzSpan="8">
          <nz-switch [(ngModel)]="define.preset" name="preset" id="preset"></nz-switch>
        </nz-form-control>
      </nz-form-item >
      <nz-form-item>
        <nz-form-label nzSpan="7" nzRequired="true" nzFor= "enable">启用告警</nz-form-label>
        <nz-form-control nzSpan="8">
          <nz-switch [(ngModel)]="define.enable" name="enable" id="enable"></nz-switch>
        </nz-form-control>
      </nz-form-item >
    </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>