235 lines
8.3 KiB
HTML
235 lines
8.3 KiB
HTML
<nz-divider></nz-divider>
|
|
<nz-breadcrumb>
|
|
<nz-breadcrumb-item>
|
|
<a [routerLink]="['/']">
|
|
<i nz-icon nzType="home"></i>
|
|
</a>
|
|
</nz-breadcrumb-item>
|
|
<nz-breadcrumb-item>
|
|
<i nz-icon nzType="alert"></i>
|
|
<span>告警阈值配置</span>
|
|
</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>
|
|
|
|
<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: '1150px', y: '1240px' }">
|
|
<thead>
|
|
<tr>
|
|
<th nzAlign="center" nzLeft nzWidth="60px" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></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>
|
|
<th nzAlign="center" nzRight>操作</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">
|
|
<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="robot" nzTheme="outline"></i>
|
|
<span>紧急告警</span>
|
|
</nz-tag>
|
|
<nz-tag *ngIf="data.priority == 1" nzColor="orange">
|
|
<i nz-icon nzType="smile" nzTheme="outline"></i>
|
|
<span>严重告警</span>
|
|
</nz-tag>
|
|
<nz-tag *ngIf="data.priority == 2" nzColor="yellow">
|
|
<i nz-icon nzType="meh" nzTheme="outline"></i>
|
|
<span>警告告警</span>
|
|
</nz-tag>
|
|
</td>
|
|
<td nzAlign="center">{{ data.duration + 's' }}</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 }}</td>
|
|
<td nzAlign="center" nzRight>
|
|
<button nz-button nzType="primary" (click)="onOpenConnectModal(data.id, data.app)">
|
|
<i nz-icon nzType="link" nzTheme="outline"></i>
|
|
</button>
|
|
<button nz-button nzType="primary" (click)="onEditOneAlertDefine(data.id)">
|
|
<i nz-icon nzType="edit" nzTheme="outline"></i>
|
|
</button>
|
|
<button nz-button nzType="primary" (click)="onDeleteOneAlertDefine(data.id)">
|
|
<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>
|
|
<nz-form-item>
|
|
<nz-form-label [nzSpan]="7" nzFor= 'target' nzRequired="true">指标对象</nz-form-label>
|
|
<nz-form-control [nzSpan]="8">
|
|
<nz-cascader name="target" id="target" [nzOptions]="appHierarchies" [(ngModel)]="cascadeValues">
|
|
</nz-cascader>
|
|
</nz-form-control>
|
|
</nz-form-item >
|
|
<nz-form-item>
|
|
<nz-form-label [nzSpan]="7" nzFor= 'expr' nzRequired="true">阈值触发表达式</nz-form-label>
|
|
<nz-form-control [nzSpan]="8">
|
|
<nz-textarea-count [nzMaxCharacterCount]="100">
|
|
<textarea [(ngModel)]="define.expr" rows="3" nz-input
|
|
name="expr" id="expr" placeholder="请输入阈值判断表达式">
|
|
</textarea>
|
|
</nz-textarea-count>
|
|
</nz-form-control>
|
|
</nz-form-item >
|
|
<nz-form-item>
|
|
<nz-form-label nzSpan="7"
|
|
nzRequired="true"
|
|
nzFor= "priority">告警级别
|
|
</nz-form-label>
|
|
<nz-form-control nzSpan="8">
|
|
<nz-select
|
|
[(ngModel)]="define.priority"
|
|
nzAllowClear
|
|
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">持续时间</nz-form-label>
|
|
<nz-form-control nzSpan="8">
|
|
<nz-input-number [(ngModel)]="define.duration" [nzMin]="10" [nzMax]="10000" [nzStep]="10"
|
|
name="duration" id="duration" nzPlaceHolder="请输入告警的持续时间">
|
|
</nz-input-number>
|
|
</nz-form-control>
|
|
</nz-form-item >
|
|
<nz-form-item>
|
|
<nz-form-label [nzSpan]="7" nzFor= 'template' nzRequired="true">通知模版</nz-form-label>
|
|
<nz-form-control [nzSpan]="8">
|
|
<nz-textarea-count [nzMaxCharacterCount]="100">
|
|
<textarea [(ngModel)]="define.template" rows="3" nz-input
|
|
name="template" id="template" placeholder="请输入告警的通知模版">
|
|
</textarea>
|
|
</nz-textarea-count>
|
|
</nz-form-control>
|
|
</nz-form-item>
|
|
<nz-form-item>
|
|
<nz-form-label nzSpan="7" nzRequired="true" nzFor= "preset">默认预置</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">启用告警</nz-form-label>
|
|
<nz-form-control nzSpan="8">
|
|
<nz-switch [(ngModel)]="define.enable" 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>监控</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>
|