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>
    <a href="https://tancloud.cn/docs/help/alert_threshold" target="_blank" style="float: right; margin-right: 5%">
      <span>帮助&nbsp;</span>
      <i nz-icon nzType="question-circle" nzTheme="outline"></i>
    </a>
  </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()" nz-tooltip nzTooltipTitle="刷新">
  <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: '1240px', y: '1240px' }"
>
  <thead>
    <tr>
      <th nzAlign="center" nzLeft nzWidth="4%" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
      <th nzAlign="center" nzLeft>指标对象</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>
    </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" nzLeft>
        <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) | date: 'YYYY-MM-dd HH:mm:ss' }}</td>
      <td nzAlign="center">
        <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)" nz-tooltip nzTooltipTitle="修改告警配置">
          <i nz-icon nzType="edit" nzTheme="outline"></i>
        </button>
        <button nz-button nzType="primary" (click)="onDeleteOneAlertDefine(data.id)" nz-tooltip nzTooltipTitle="删除告警配置">
          <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 #defineForm="ngForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="target" nzRequired="true">指标对象</nz-form-label>
        <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
          <nz-cascader
            required
            name="target"
            id="target"
            [nzOptions]="appHierarchies"
            [(ngModel)]="cascadeValues"
            (ngModelChange)="cascadeOnChange($event)"
          ></nz-cascader>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-col [nzSpan]="8" nzOffset="7">
          <nz-collapse>
            <nz-collapse-panel [nzActive]="isManageModalAdd" nzHeader="支持的阈值触发表达式环境变量与操作符">
              <nz-list nzSize="small" nzSplit="false">
                <nz-list-item *ngIf="cascadeValues.length == 3">
                  <code>{{ cascadeValues[2] }} : 选中的指标对象</code>
                </nz-list-item>
                <nz-list-item *ngFor="let item of otherMetrics">
                  <code>{{ item }} : 所属行其它指标对象</code>
                </nz-list-item>
                <nz-list-item *ngIf="otherMetrics.length != 0">
                  <code>instance : 所属行实例</code>
                </nz-list-item>
                <nz-list-item>
                  <code>支持操作符函数 : equals(str1,str2), ==, <, <=, >, >=, !=, ( ), +, -, &&, ||</code>
                </nz-list-item>
              </nz-list>
            </nz-collapse-panel>
          </nz-collapse>
        </nz-col>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label
          [nzSpan]="7"
          nzFor="expr"
          nzRequired="true"
          nzTooltipTitle="根据此表达式来计算判断是否触发阈值,表达式环境变量和操作符见上方"
        >
          阈值触发表达式
        </nz-form-label>
        <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
          <nz-textarea-count [nzMaxCharacterCount]="100">
            <textarea
              [(ngModel)]="define.expr"
              required
              rows="3"
              nz-input
              name="expr"
              id="expr"
              placeholder="根据此表达式计算判断是否触发阈值.&#10;示例: responseTime&gt;40"
            >
            </textarea>
          </nz-textarea-count>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label
          nzSpan="7"
          nzRequired="true"
          nzFor="priority"
          nzTooltipTitle="触发阈值的告警级别,从低到高依次为:警告-warning，严重-critical，紧急-emergency"
        >
          告警级别
        </nz-form-label>
        <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
          <nz-select [(ngModel)]="define.priority" 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" nzTooltipTitle="设置触发阈值多少次之后才会发送告警">
          触发次数
        </nz-form-label>
        <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
          <nz-input-number [(ngModel)]="define.times" [nzMin]="1" [nzMax]="10" [nzStep]="1" required name="duration" id="duration">
          </nz-input-number>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-col [nzSpan]="8" nzOffset="7">
          <nz-collapse>
            <nz-collapse-panel [nzActive]="isManageModalAdd" nzHeader="支持的通知模版环境变量">
              <nz-list nzSize="small" nzSplit="false">
                <nz-list-item>
                  <code>&#36;&#123;app&#125; : 监控类型名称</code>
                </nz-list-item>
                <nz-list-item>
                  <code>&#36;&#123;metrics&#125; : 监控指标集合名称</code>
                </nz-list-item>
                <nz-list-item *ngIf="cascadeValues.length == 3">
                  <code>&#36;&#123;metric&#125; : 监控指标名称</code>
                </nz-list-item>
                <nz-list-item *ngIf="cascadeValues.length == 3">
                  <code>&#36;{{ '{' + cascadeValues[2] + '}' }} : 监控指标对象值</code>
                </nz-list-item>
                <nz-list-item *ngFor="let item of otherMetrics">
                  <code>&#36;{{ '{' + item + '}' }} : 所属行其它指标值</code>
                </nz-list-item>
                <nz-list-item>
                  <code>&#36;&#123;instance&#125; : 所属行实例值</code>
                </nz-list-item>
              </nz-list>
            </nz-collapse-panel>
          </nz-collapse>
        </nz-col>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="template" nzRequired="true" nzTooltipTitle="告警触发后发送的通知信息模版,模版环境变量见上方">
          通知模版
        </nz-form-label>
        <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
          <nz-textarea-count [nzMaxCharacterCount]="200">
            <textarea
              [(ngModel)]="define.template"
              rows="3"
              nz-input
              required
              name="template"
              id="template"
              placeholder="请输入告警的通知模版.&#10;示例: ${app}.${metrics}.${metric}'s value is too high"
            >
            </textarea>
          </nz-textarea-count>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzSpan="7" nzFor="preset" nzTooltipTitle="此告警阈值配置是否应用于全局所有此类型监控"> 全局默认 </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" nzTooltipTitle="此告警阈值配置开启生效或关闭"> 启用告警 </nz-form-label>
        <nz-form-control nzSpan="8">
          <nz-switch [(ngModel)]="define.enable" [ngModelOptions]="{ standalone: true }" 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 *ngIf="direction == 'left'">未关联监控</th>
            <th *ngIf="direction == 'right'">已关联监控</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>