c8d2b1ed48
* [docs]support en docs * [docs]support en webapp * [web-app]dashboard and monitor list i18n * [web-app]i18n for monitor list * [web-app]i18n for add edit monitor * [web-app]i18n for monitor detail * [web-app]i18n for login * [web-app]i18n for alert center * [web-app]i18n for alert notice * [web-app]i18n for alert setting * [web-app]i18n for notify
334 lines
15 KiB
HTML
334 lines
15 KiB
HTML
<nz-divider></nz-divider>
|
|
<nz-breadcrumb>
|
|
<nz-breadcrumb-item>
|
|
<a [routerLink]="['/']">
|
|
<i nz-icon nzType="home"></i>
|
|
<span>{{ 'menu.dashboard' | i18n }}</span>
|
|
</a>
|
|
</nz-breadcrumb-item>
|
|
<nz-breadcrumb-item>
|
|
<i nz-icon nzType="alert"></i>
|
|
<span>{{ 'menu.alert.dispatch' | i18n }}</span>
|
|
<a href="https://tancloud.cn/docs/help/alert_email" target="_blank" style="float: right; margin-right: 5%">
|
|
<span>{{ 'common.button.help' | i18n }} </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]="'alert.notice.receiver' | i18n">
|
|
<button nz-button nzType="primary" (click)="onNewNoticeReceiver()">
|
|
<i nz-icon nzType="appstore-add" nzTheme="outline"></i>
|
|
{{ 'alert.notice.receiver.new' | i18n }}
|
|
</button>
|
|
<button nz-button nzType="primary" (click)="syncReceiver()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
|
|
<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%">{{ 'alert.notice.receiver.people' | i18n }}</th>
|
|
<th nzAlign="center" nzWidth="20%">{{ 'alert.notice.receiver.type' | i18n }}</th>
|
|
<th nzAlign="center" nzWidth="20%">{{ 'alert.notice.receiver.setting' | i18n }}</th>
|
|
<th nzAlign="center" nzWidth="20%">{{ 'common.edit-time' | i18n }}</th>
|
|
<th nzAlign="center" nzWidth="30%">{{ 'common.edit' | i18n }}</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>{{ 'alert.notice.type.sms' | i18n }}</span>
|
|
</nz-tag>
|
|
<nz-tag *ngIf="data.type == 1" nzColor="orange">
|
|
<i nz-icon nzType="notification" nzTheme="outline"></i>
|
|
<span>{{ 'alert.notice.type.email' | i18n }}</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>{{ 'alert.notice.type.wechat' | i18n }}</span>
|
|
</nz-tag>
|
|
<nz-tag *ngIf="data.type == 4" nzColor="orange">
|
|
<i nz-icon nzType="notification" nzTheme="outline"></i>
|
|
<span>{{ 'alert.notice.type.wework' | i18n }}</span>
|
|
</nz-tag>
|
|
<nz-tag *ngIf="data.type == 5" nzColor="orange">
|
|
<i nz-icon nzType="notification" nzTheme="outline"></i>
|
|
<span>{{ 'alert.notice.type.ding' | i18n }}</span>
|
|
</nz-tag>
|
|
<nz-tag *ngIf="data.type == 6" nzColor="orange">
|
|
<i nz-icon nzType="notification" nzTheme="outline"></i>
|
|
<span>{{ 'alert.notice.type.fei-shu' | i18n }}</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]="'alert.notice.receiver.edit' | i18n"
|
|
>
|
|
<i nz-icon nzType="edit" nzTheme="outline"></i>
|
|
</button>
|
|
<button
|
|
nz-button
|
|
nzType="primary"
|
|
(click)="onDeleteOneNoticeReceiver(data.id)"
|
|
nz-tooltip
|
|
[nzTooltipTitle]="'alert.notice.receiver.delete' | i18n"
|
|
>
|
|
<i nz-icon nzType="delete" nzTheme="outline"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</nz-table>
|
|
</nz-tab>
|
|
<nz-tab [nzTitle]="'alert.notice.rule' | i18n">
|
|
<button nz-button nzType="primary" (click)="onNewNoticeRule()">
|
|
<i nz-icon nzType="appstore-add" nzTheme="outline"></i>
|
|
{{ 'alert.notice.rule.new' | i18n }}
|
|
</button>
|
|
<button nz-button nzType="primary" (click)="syncRule()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
|
|
<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%">{{ 'alert.notice.rule.name' | i18n }}</th>
|
|
<th nzAlign="center" nzWidth="12%">{{ 'alert.notice.receiver.people' | i18n }}</th>
|
|
<th nzAlign="center" nzWidth="12%">{{ 'alert.notice.rule.all' | i18n }}</th>
|
|
<th nzAlign="center" nzWidth="15%">{{ 'alert.notice.rule.enable' | i18n }}</th>
|
|
<th nzAlign="center" nzWidth="15%">{{ 'common.edit-time' | i18n }}</th>
|
|
<th nzAlign="center" nzWidth="25%">{{ 'common.edit' | i18n }}</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>{{ 'common.yes' | i18n }}</span>
|
|
</nz-tag>
|
|
<nz-tag *ngIf="!data.filterAll" nzColor="orange">
|
|
<span>{{ 'common.no' | i18n }}</span>
|
|
</nz-tag>
|
|
</td>
|
|
<td nzAlign="center">
|
|
<nz-tag *ngIf="data.enable" nzColor="green">
|
|
<span>{{ 'common.enable' | i18n }}</span>
|
|
</nz-tag>
|
|
<nz-tag *ngIf="!data.enable" nzColor="orange">
|
|
<span>{{ 'common.disable' | i18n }}</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]="'alert.notice.rule.edit' | i18n"
|
|
>
|
|
<i nz-icon nzType="edit" nzTheme="outline"></i>
|
|
</button>
|
|
<button
|
|
nz-button
|
|
nzType="primary"
|
|
(click)="onDeleteOneNoticeRule(data.id)"
|
|
nz-tooltip
|
|
[nzTooltipTitle]="'alert.notice.rule.delete' | i18n"
|
|
>
|
|
<i nz-icon nzType="delete" nzTheme="outline"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</nz-table>
|
|
</nz-tab>
|
|
</nz-tabset>
|
|
|
|
<!-- 新增或修改通知接收人弹出框 -->
|
|
<nz-modal
|
|
[(nzVisible)]="isManageReceiverModalVisible"
|
|
[nzTitle]="isManageReceiverModalAdd ? ('alert.notice.receiver.new' | i18n) : ('alert.notice.receiver.edit' | i18n)"
|
|
(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">{{ 'alert.notice.receiver.people.name' | i18n }}</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">{{ 'alert.notice.receiver.type' | i18n }} </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]="'alert.notice.type.sms' | i18n"></nz-option>
|
|
<nz-option [nzValue]="1" [nzLabel]="'alert.notice.type.email' | i18n"></nz-option>
|
|
<nz-option [nzValue]="2" nzLabel="WebHook"></nz-option>
|
|
<nz-option [nzValue]="3" nzDisabled [nzLabel]="'alert.notice.type.wechat' | i18n"></nz-option>
|
|
<nz-option [nzValue]="4" [nzLabel]="'alert.notice.type.wework' | i18n"></nz-option>
|
|
<nz-option [nzValue]="5" [nzLabel]="'alert.notice.type.ding' | i18n"></nz-option>
|
|
<nz-option [nzValue]="6" [nzLabel]="'alert.notice.type.fei-shu' | i18n"></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">{{ 'alert.notice.type.phone' | i18n }}</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">{{ 'alert.notice.type.email' | i18n }}</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">{{ 'alert.notice.type.url' | i18n }}</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">{{
|
|
'alert.notice.type.wechat-id' | i18n
|
|
}}</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">{{
|
|
'alert.notice.type.wework-key' | i18n
|
|
}}</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">{{
|
|
'alert.notice.type.access-token' | i18n
|
|
}}</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">{{
|
|
'alert.notice.type.fei-shu-key' | i18n
|
|
}}</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 ? ('alert.notice.rule.new' | i18n) : ('alert.notice.rule.edit' | i18n)"
|
|
(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">{{ 'alert.notice.rule.name' | i18n }}</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">{{ 'alert.notice.rule.all' | i18n }}</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">{{ 'alert.notice.receiver.people' | i18n }}</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">{{ 'alert.notice.rule.enable' | i18n }}</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>
|