302 lines
13 KiB
HTML
302 lines
13 KiB
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>帮助 </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 }}</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 }}</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>
|