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>
    <a href="https://tancloud.cn/docs/help/alert_email" 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>

<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: '100%', y: '100%' }"
    >
      <thead>
        <tr>
          <th nzAlign="center" nzWidth="10%">接收人</th>
          <th nzAlign="center" nzWidth="20%">通知方式</th>
          <th nzAlign="center" nzWidth="20%">配置</th>
          <th nzAlign="center" nzWidth="20%">最新修改时间</th>
          <th nzAlign="center" nzWidth="30%">操作</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>
            <nz-tag *ngIf="data.type == 4" nzColor="orange">
              <i nz-icon nzType="notification" nzTheme="outline"></i>
              <span>企业微信机器人</span>
            </nz-tag>
            <nz-tag *ngIf="data.type == 5" nzColor="orange">
              <i nz-icon nzType="notification" nzTheme="outline"></i>
              <span>钉钉机器人</span>
            </nz-tag>
            <nz-tag *ngIf="data.type == 6" 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>
            <span *ngIf="data.type == 4">{{ data.wechatId }}</span>
            <span *ngIf="data.type == 5">{{ data.accessToken }}</span>
            <span *ngIf="data.type == 6">{{ data.wechatId }}</span>
          </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)="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: '100%', y: '100%' }"
    >
      <thead>
        <tr>
          <th nzAlign="center" nzWidth="15%">策略名称</th>
          <th nzAlign="center" nzWidth="12%">接收人</th>
          <th nzAlign="center" nzWidth="12%">转发所有</th>
          <th nzAlign="center" nzWidth="15%">是否启用</th>
          <th nzAlign="center" nzWidth="15%">最新修改时间</th>
          <th nzAlign="center" nzWidth="25%">操作</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) | date: 'YYYY-MM-dd HH:mm:ss' }}</td>
          <td nzAlign="center">
            <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="40%"
  [nzOkLoading]="isManageReceiverModalOkLoading"
>
  <div *nzModalContent class="-inner-content">
    <form nz-form #receiverForm="ngForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="name" nzRequired="true">接收人名称</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <input [(ngModel)]="receiver.name" nz-input required 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="12" [nzErrorTip]="'validation.required' | i18n">
          <nz-select [(ngModel)]="receiver.type" nzPlaceHolder="Choose" required 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-option [nzValue]="4" nzLabel="企业微信机器人"></nz-option>
            <nz-option [nzValue]="5" nzLabel="钉钉机器人"></nz-option>
            <nz-option [nzValue]="6" 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]="12" [nzErrorTip]="'validation.phone.invalid' | i18n">
          <input
            [(ngModel)]="receiver.phone"
            nz-input
            [required]="receiver.type === 0"
            pattern="/^1\d{10}$/"
            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]="12" [nzErrorTip]="'validation.email.invalid' | i18n">
          <input [(ngModel)]="receiver.email" nz-input [required]="receiver.type === 1" email 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]="12" [nzErrorTip]="'validation.required' | i18n">
          <input [(ngModel)]="receiver.hookUrl" nz-input [required]="receiver.type === 2" 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]="12" [nzErrorTip]="'validation.required' | i18n">
          <input [(ngModel)]="receiver.wechatId" nz-input [required]="receiver.type === 3" name="wechatId" type="text" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 4">
        <nz-form-label [nzSpan]="7" nzFor="wechatId" [nzRequired]="receiver.type === 4">企业微信机器人KEY</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <input [(ngModel)]="receiver.wechatId" nz-input [required]="receiver.type === 4" name="wechatId" type="text" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 5">
        <nz-form-label [nzSpan]="7" nzFor="accessToken" [nzRequired]="receiver.type === 5">机器人ACCESS_TOKEN</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <input [(ngModel)]="receiver.accessToken" nz-input [required]="receiver.type === 5" name="accessToken" type="text" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="receiver.type === 6">
        <nz-form-label [nzSpan]="7" nzFor="wechatId" [nzRequired]="receiver.type === 6">飞书机器人KEY</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <input [(ngModel)]="receiver.wechatId" nz-input [required]="receiver.type === 6" name="wechatId" type="text" />
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>
</nz-modal>

<!-- 新增或修改通知策略弹出框 -->
<nz-modal
  [(nzVisible)]="isManageRuleModalVisible"
  [nzTitle]="isManageRuleModalAdd ? '新增策略' : '修改策略'"
  (nzOnCancel)="onManageRuleModalCancel()"
  (nzOnOk)="onManageRuleModalOk()"
  nzMaskClosable="false"
  nzWidth="40%"
  [nzOkLoading]="isManageRuleModalOkLoading"
>
  <div *nzModalContent class="-inner-content">
    <form nz-form #ruleForm="ngForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="rule_name" nzRequired="true">策略名称</nz-form-label>
        <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
          <input [(ngModel)]="rule.name" nz-input required 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" [nzErrorTip]="'validation.required' | i18n">
          <nz-select
            [(ngModel)]="rule.receiverId"
            (nzOpenChange)="loadReceiversOption()"
            [nzOptions]="receiversOption"
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="Select a person"
            required
            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>