hertzbeat/web-app/src/app/routes/alert/alert-notice/alert-notice.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>

<nz-tabset nzSize="large">
  <nz-tab nzTitle="告警接收人">
    <button nz-button nzType="primary" (click)="onNewNoticeReceiver()">
      <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
      新增接收人
    </button>
    <button nz-button nzType="primary" (click)="syncReceiver()" nz-tooltip nzTooltipTitle="刷新">
      <i nz-icon nzType="sync" nzTheme="outline"></i>
    </button>
    <nz-table #fixedTable [nzData]="receivers"
              nzFrontPagination ="false"
              [nzLoading] = "receiverTableLoading"
              [nzScroll]="{ x: '1150px', y: '1240px' }">
      <thead>
      <tr>
        <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">
          <span>{{ data.name}}</span>
        </td>
        <td nzAlign="center">
          <nz-tag *ngIf="data.type == 0" nzColor="orange">
            <i nz-icon nzType="notification" nzTheme="outline"></i>
            <span>短信</span>
          </nz-tag>
          <nz-tag *ngIf="data.type == 1" nzColor="orange">
            <i nz-icon nzType="notification" nzTheme="outline"></i>
            <span>邮件</span>
          </nz-tag>
          <nz-tag *ngIf="data.type == 2" nzColor="orange">
            <i nz-icon nzType="notification" nzTheme="outline"></i>
            <span>WebHook</span>
          </nz-tag>
          <nz-tag *ngIf="data.type == 3" nzColor="orange">
            <i nz-icon nzType="notification" nzTheme="outline"></i>
            <span>微信公众号</span>
          </nz-tag>
        </td>
        <td nzAlign="center">
          <span *ngIf="data.type == 0">{{data.phone}}</span>
          <span *ngIf="data.type == 1">{{data.email}}</span>
          <span *ngIf="data.type == 2">{{data.hookUrl}}</span>
          <span *ngIf="data.type == 3">{{data.wechatId}}</span>
        </td>
        <td nzAlign="center">{{ data.gmtUpdate? data.gmtUpdate : data.gmtCreate }}</td>
        <td nzAlign="center" nzRight>
          <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)" nz-tooltip nzTooltipTitle="删除接收人">
            <i nz-icon nzType="delete" nzTheme="outline"></i>
          </button>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </nz-tab>
  <nz-tab nzTitle="告警通知策略">
    <button nz-button nzType="primary" (click)="onNewNoticeRule()">
      <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
      新增通知策略
    </button>
    <button nz-button nzType="primary" (click)="syncRule()" nz-tooltip nzTooltipTitle="刷新">
      <i nz-icon nzType="sync" nzTheme="outline"></i>
    </button>
    <nz-table #ruleFixedTable [nzData]="rules"
              nzFrontPagination ="false"
              [nzLoading] = "ruleTableLoading"
              [nzScroll]="{ x: '1150px', y: '1240px' }">
      <thead>
      <tr>
        <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 ruleFixedTable.data">
        <td nzAlign="center">
          <span>{{ data.name}}</span>
        </td>
        <td nzAlign="center">
          <span>{{ data.receiverName}}</span>
        </td>
        <td nzAlign="center">
          <nz-tag *ngIf="data.filterAll" nzColor="green">
            <span>是</span>
          </nz-tag>
          <nz-tag *ngIf="!data.filterAll" nzColor="orange">
            <span>否</span>
          </nz-tag>
        </td>
        <td nzAlign="center">
          <nz-tag *ngIf="data.enable" nzColor="green">
            <span>开启</span>
          </nz-tag>
          <nz-tag *ngIf="!data.enable" 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)="onEditOneNoticeRule(data)" nz-tooltip nzTooltipTitle="修改告警策略">
            <i nz-icon nzType="edit" nzTheme="outline"></i>
          </button>
          <button nz-button nzType="primary" (click)="onDeleteOneNoticeRule(data.id)" nz-tooltip nzTooltipTitle="删除告警策略">
            <i nz-icon nzType="delete" nzTheme="outline"></i>
          </button>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </nz-tab>
</nz-tabset>


<!-- 新增或修改通知接收人弹出框 -->
<nz-modal
  [(nzVisible)]="isManageReceiverModalVisible"
  [nzTitle]="isManageReceiverModalAdd?'新增接收人' : '修改接收人'"
  (nzOnCancel)="onManageReceiverModalCancel()"
  (nzOnOk)="onManageReceiverModalOk()"
  nzMaskClosable="false"
  nzWidth="60%"
  [nzOkLoading]="isManageReceiverModalOkLoading"
>
  <div *nzModalContent class = "-inner-content">
    <form nz-form>
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor= 'name' nzRequired="true">接收人名称</nz-form-label>
        <nz-form-control [nzSpan]="8">
          <input [(ngModel)]="receiver.name" nz-input name="name" type="text" id="name">
        </nz-form-control>
      </nz-form-item >
      <nz-form-item>
        <nz-form-label nzSpan="7"
                       nzRequired="true"
                       nzFor= "type">通知方式
        </nz-form-label>
        <nz-form-control nzSpan="8">
          <nz-select
            [(ngModel)]="receiver.type"
            nzAllowClear
            nzPlaceHolder="Choose"
            name="type" id="type"
          >
            <nz-option [nzValue]="0" nzDisabled nzLabel="短信"></nz-option>
            <nz-option [nzValue]="1" nzLabel="邮箱"></nz-option>
            <nz-option [nzValue]="2" nzLabel="WebHook"></nz-option>
            <nz-option [nzValue]="3" nzDisabled nzLabel="微信公众号"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 0">
        <nz-form-label [nzSpan]="7" nzFor= 'phone' [nzRequired]="receiver.type === 0">手机号</nz-form-label>
        <nz-form-control [nzSpan]="8">
          <input [(ngModel)]="receiver.phone" nz-input name="phone" type="tel" id="phone">
        </nz-form-control>
      </nz-form-item >
      <nz-form-item *ngIf="receiver.type === 1">
        <nz-form-label [nzSpan]="7" nzFor= 'email' [nzRequired]="receiver.type === 1">邮箱</nz-form-label>
        <nz-form-control [nzSpan]="8">
          <input [(ngModel)]="receiver.email" nz-input name="email" type="email" id="email">
        </nz-form-control>
      </nz-form-item >
      <nz-form-item *ngIf="receiver.type === 2">
        <nz-form-label [nzSpan]="7" nzFor= 'hookUrl' [nzRequired]="receiver.type === 2">URL地址</nz-form-label>
        <nz-form-control [nzSpan]="8">
          <input [(ngModel)]="receiver.hookUrl" nz-input name="hookUrl" type="url" id="hookUrl">
        </nz-form-control>
      </nz-form-item >
      <nz-form-item *ngIf="receiver.type === 3">
        <nz-form-label [nzSpan]="7" nzFor= 'wechatId' [nzRequired]="receiver.type === 3">微信OPENID</nz-form-label>
        <nz-form-control [nzSpan]="8">
          <input [(ngModel)]="receiver.wechatId" nz-input name="wechatId" type="text" id="wechatId">
        </nz-form-control>
      </nz-form-item >
    </form>
  </div>
</nz-modal>

<!-- 新增或修改通知策略弹出框 -->
<nz-modal
  [(nzVisible)]="isManageRuleModalVisible"
  [nzTitle]="isManageRuleModalAdd?'新增策略' : '修改策略'"
  (nzOnCancel)="onManageRuleModalCancel()"
  (nzOnOk)="onManageRuleModalOk()"
  nzMaskClosable="false"
  nzWidth="60%"
  [nzOkLoading]="isManageRuleModalOkLoading"
>
  <div *nzModalContent class = "-inner-content">
    <form nz-form>
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor= 'rule_name' nzRequired="true">策略名称</nz-form-label>
        <nz-form-control [nzSpan]="8">
          <input [(ngModel)]="rule.name" nz-input name="rule_name" type="text" id="rule_name">
        </nz-form-control>
      </nz-form-item >
      <nz-form-item>
        <nz-form-label nzSpan="7" nzRequired="true" nzFor= "filterAll">转发所有</nz-form-label>
        <nz-form-control nzSpan="8">
          <nz-switch [(ngModel)]="rule.filterAll" disabled name="filterAll" id="filterAll"></nz-switch>
        </nz-form-control>
      </nz-form-item >
      <nz-form-item>
        <nz-form-label nzSpan="7" nzRequired="true" nzFor= "receiver">接收人</nz-form-label>
        <nz-form-control nzSpan="8">
          <nz-select
            [(ngModel)]="rule.receiverId"
            (nzOpenChange)="loadReceiversOption()"
            [nzOptions]="receiversOption"
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="Select a person"
            name="receiver" id="receiver"
          >
          </nz-select>
        </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)]="rule.enable" name="enable" id="enable"></nz-switch>
        </nz-form-control>
      </nz-form-item >
    </form>
  </div>
</nz-modal>