Newer
Older
<nz-breadcrumb class="padding-8-0">
<nz-breadcrumb-item>
首页
</nz-breadcrumb-item>
<nz-breadcrumb-item>
<a>综合监控</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item>
<a (click)="backList()">基础资源监控</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item *ngIf="searchStatus">
搜索结果
<input (keyup.enter)="search()" type="text" nz-input [(ngModel)]="searchName" placeholder="输入资源名称">
<button (click)="search()" nz-button nzType="default"><i class="anticon anticon-search"
<button (click)="ngOnInit()" nz-button nzType="primary"><i class="anticon anticon-sync"></i></button>
<div nz-col nzSpan="12">
<span>监控设备数：{{deviceNo}}</span>
<span>设备状态：
<span [ngClass]="{'select-border': status == '正常'}" (click)="changeStatus('正常')" style="margin-right: 8px"> <nz-tag
class="tag-green" [nzColor]="color.green"></nz-tag>
<i *ngIf="!green && green !=0" class="anticon anticon-spin anticon-loading" style="font-size: 15px;"></i>
<span [ngClass]="{'select-border': status == '告警'}" (click)="changeStatus('告警')" style="margin-right: 8px"> <nz-tag
class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
<i *ngIf="!yellow && yellow != 0" class="anticon anticon-spin anticon-loading" style="font-size: 15px;"></i>
{{yellow}}
</span>
<span [ngClass]="{'select-border': status == '严重'}" (click)="changeStatus('严重')" style="margin-right: 8px"> <nz-tag
class="tag-red" [nzColor]="color.red"></nz-tag>
<i *ngIf="!red && red != 0" class="anticon anticon-spin anticon-loading" style="font-size: 15px;"></i>
{{red}}
</span>
<span [ngClass]="{'select-border': status == '禁用'}" (click)="changeStatus('禁用')"> <nz-tag
[nzColor]="color.gray"></nz-tag>
<i *ngIf="!gray && gray!=0" class="anticon anticon-spin anticon-loading" style="font-size: 15px;"></i>
{{gray}}
</span>
<nz-select style="width: 200px;" nzPlaceHolder="按组分开" [(ngModel)]="selectedValue"
(ngModelChange)="select()">
<nz-option nzLabel="按设备类型展开" nzValue="type"></nz-option>
<nz-option nzLabel="按资源分组展开" nzValue="group"></nz-option>
</nz-select>
</div>
<div nz-col nzSpan="12" class="text-right">
<button nz-button nzType="default" (click)="showGroupModal()" *ngIf="selectedValue == 'group'">
<i class="anticon anticon-plus-circle-o"></i>添加分组
</button>
<button (click)="openBatchHost(1,'停止')" nz-button nzType="default"><i
class="anticon anticon-pause-circle-o"></i>停止监控
</button>
<button (click)="openBatchHost(0,'开启')" nz-button nzType="default"><i class="anticon anticon-play-circle-o"></i>开启监控
</button>
<button (click)="batchDeleteConfirm()" nz-button nzType="default"><i class="anticon anticon-close-circle-o"></i>删除资源
<nz-table #nzTable [nzData]="dataSet" [nzLoading]="loading" [nzFrontPagination]="true" [nzShowPagination]="true">
<thead>
<tr>
<th [nzChecked]="allChecked"></th>
<th>名称</th>
<th>状态</th>
<th>关联资产</th>
<!--设备类型-->
<ng-container *ngIf="selectedValue == 'type'">
<ng-template ngFor let-data [ngForOf]="nzTable.data">
<ng-template ngFor let-item [ngForOf]="expandDataCache[data.host]">
<tr *ngIf="(item.parent&&item.parent.expand)||!(item.parent)">
<!--父级-->
<ng-container *ngIf="!item.level">
<td></td>
<td [nzIndentSize]="item.level*20" nzShowExpand [nzExpand]='item.expand'
(nzExpandChange)="getChildrenType(item)">
<span>{{item.equipmentType}}</span>
</td>
</ng-container>
<!--子集-->
<ng-container *ngIf="item.level">
(nzCheckedChange)="selectChecked($event,item)" [(nzChecked)]="item.checked"></td>
<td class="cursor main-color" [nzIndentSize]="item.level*20">
<span (click)="goDetail(item)">{{item.name}}</span>
</td>
</ng-container>
<td class="round-tag tag-form">
<ng-container *ngIf="item.waringName == '正常'">
<nz-tag class="tag-green" [nzColor]="color.green"></nz-tag>
<ng-container *ngIf="item.waringName == '禁用'">
<nz-tag class="tag-gray" [nzColor]="color.gray"></nz-tag>
<ng-container *ngIf="item.waringName == '告警'">
<nz-tag class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
</ng-container>
<ng-container *ngIf="item.waringName == '严重'">
<nz-tag class="tag-red" [nzColor]="color.red"></nz-tag>
</ng-container>
</td>
<td class="cursor">
<span (click)="goTOInventory(item?.inventory?.id)">{{item?.inventory?.name}}</span>
</td>
<span class="main-color" (click)="goEquip(item)">{{item?.equipmentType}}</span>
<td class="default">
<ng-container *ngIf="item.level">
<ng-container *ngIf="!item.available || item.available == 0">
<nz-tag>AGENT</nz-tag>
<ng-container *ngIf="item.available == 1">
<nz-tag [nzColor]="'#3bae6a'">AGENT</nz-tag>
<ng-container *ngIf="item.available == 2">
<nz-tooltip [nzTitle]="item.error">
<nz-tag nz-tooltip [nzColor]="'#d44f51'">AGENT</nz-tag>
</nz-tooltip>
<ng-container *ngIf=" !item.snmp_available || item.snmp_available == 0">
<nz-tooltip [nzTitle]="item?.snmp_error">
<nz-tag>SNMP</nz-tag>
</nz-tooltip>
</ng-container>
<ng-container *ngIf="item.snmp_available == 1">
<nz-tag [nzColor]="'#3bae6a'">SNMP</nz-tag>
</ng-container>
<ng-container *ngIf="item.snmp_available == 2">
<nz-tooltip [nzTitle]="item.snmp_error">
<nz-tag nz-tooltip [nzColor]="'#d44f51'">SNMP</nz-tag>
</nz-tooltip>
</ng-container>
<ng-container *ngIf="!item.jmx_available || item.jmx_available == 0">
<nz-tag>JMX</nz-tag>
</ng-container>
<ng-container *ngIf="item.jmx_available == 1">
<nz-tag [nzColor]="'#3bae6a'">JMX</nz-tag>
</ng-container>
<ng-container *ngIf="item.jmx_available == 2">
<nz-tooltip [nzTitle]="item.jmx_error">
<nz-tag nz-tooltip [nzColor]="'#d44f51'">JMX</nz-tag>
</nz-tooltip>
<ng-container *ngIf="!item.ipmi_available || item.ipmi_available == 0">
<nz-tag>IPMI</nz-tag>
<ng-container *ngIf="item.ipmi_available == 1">
<nz-tag [nzColor]="'#3bae6a'">IPMI</nz-tag>
<ng-container *ngIf="item.ipmi_available == 2">
<nz-tooltip [nzTitle]="item.ipmi_error">
<nz-tag nz-tooltip [nzColor]="'#d44f51'">IPMI</nz-tag>
</nz-tooltip>
</ng-container>
</ng-container>
</td>
<span (click)="showBasicCheckModal(item.hostid,item.host)">添加监测点</span>
<span (click)="editBasicModal(item)">编辑</span>
<span (click)="showDeleteConfirm(item)">删除</span>
<nz-dropdown [nzTrigger]="'click'" class="table-dropdown main-color">
<a nz-dropdown>更多 <i class="anticon anticon-down"></i>
</a>
<ul nz-menu nzSelectable>
<li (click)="showTempStop(item)" nz-menu-item><a>临时暂停</a></li>
<li (click)="goDetail(item)" nz-menu-item><a>查看监测点</a></li>
<li (click)="showAlarm()" nz-menu-item><a>添加告警</a></li>
<li (click)="showAlarm()" nz-menu-item><a>关联资产</a></li>
</td>
</tr>
</ng-template>
</ng-template>
</ng-container>
<!--资源分组-->
<ng-container *ngIf="selectedValue == 'group'">
<ng-template ngFor let-data [ngForOf]="nzTable.data">
<ng-template ngFor let-item [ngForOf]="expandDataCache[data.host]">
<tr *ngIf="(item.parent&&item.parent.expand)||!(item.parent)">
<!--父级-->
<ng-container *ngIf="!item.level">
<td></td>
<td [nzIndentSize]="item.level*20" nzShowExpand [nzExpand]='item.expand'
(nzExpandChange)="getChildren(item)">
<span>{{item.name}} <span class="host-number">主机数量：{{item.hostcount}}</span> </span>
</td>
</ng-container>
<!--子集-->
<ng-container *ngIf="item.level">
(nzCheckedChange)="selectChecked($event,item)" [(nzChecked)]="item.checked"></td>
<td class="cursor main-color" [nzIndentSize]="item.level*20">
<span (click)="goDetail(item)">{{item.name}}</span>
</td>
</ng-container>
<td class="round-tag tag-form">
<ng-container *ngIf="item.waringName == '正常'">
<nz-tag class="tag-green" [nzColor]="color.green"></nz-tag>
</ng-container>
<ng-container *ngIf="item.waringName == '禁用'">
<nz-tag class="tag-gray" [nzColor]="color.gray"></nz-tag>
</ng-container>
<ng-container *ngIf="item.waringName == '告警'">
<nz-tag class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
</ng-container>
<ng-container *ngIf="item.waringName == '严重'">
<nz-tag class="tag-red" [nzColor]="color.red"></nz-tag>
</ng-container>
</td>
<td class="cursor">
<span (click)="goTOInventory(item?.inventory?.id)">{{item?.inventory?.name}}</span>
</td>
<span class="main-color" (click)="goEquip(item)">{{item?.equipmentType}}</span>
<td class="default">
<ng-container *ngIf="item.level">
<ng-container *ngIf="!item.available || item.available == 0">
<nz-tag>AGENT</nz-tag>
<ng-container *ngIf="item.available == 1">
<nz-tag [nzColor]="'#3bae6a'">AGENT</nz-tag>
<ng-container *ngIf="item.available == 2">
<nz-tooltip [nzTitle]="item.error">
<nz-tag nz-tooltip [nzColor]="'#d44f51'">AGENT</nz-tag>
</nz-tooltip>
<ng-container *ngIf=" !item.snmp_available || item.snmp_available == 0">
<nz-tooltip [nzTitle]="item?.snmp_error">
<nz-tag>SNMP</nz-tag>
</nz-tooltip>
</ng-container>
<ng-container *ngIf="item.snmp_available == 1">
<nz-tag [nzColor]="'#3bae6a'">SNMP</nz-tag>
</ng-container>
<ng-container *ngIf="item.snmp_available == 2">
<nz-tooltip [nzTitle]="item.snmp_error">
<nz-tag nz-tooltip [nzColor]="'#d44f51'">SNMP</nz-tag>
</nz-tooltip>
</ng-container>
<ng-container *ngIf="!item.jmx_available || item.jmx_available == 0">
<nz-tag>JMX</nz-tag>
</ng-container>
<ng-container *ngIf="item.jmx_available == 1">
<nz-tag [nzColor]="'#3bae6a'">JMX</nz-tag>
</ng-container>
<ng-container *ngIf="item.jmx_available == 2">
<nz-tooltip [nzTitle]="item.jmx_error">
<nz-tag nz-tooltip [nzColor]="'#d44f51'">JMX</nz-tag>
</nz-tooltip>
</ng-container>
<ng-container *ngIf="!item.ipmi_available || item.ipmi_available == 0">
<nz-tag>IPMI</nz-tag>
<ng-container *ngIf="item.ipmi_available == 1">
<nz-tag [nzColor]="'#3bae6a'">IPMI</nz-tag>
<ng-container *ngIf="item.ipmi_available == 2">
<nz-tooltip [nzTitle]="item.ipmi_error">
<nz-tag nz-tooltip [nzColor]="'#d44f51'">IPMI</nz-tag>
</nz-tooltip>
</ng-container>
</td>
<td class="handle main-color">
<ng-container *ngIf="!item.level">
<span (click)="updateGroup(item)">编辑</span>
<span (click)="showDeleteGroupConfirm(item)">删除</span>
</ng-container>
<ng-container *ngIf="item.level">
<span (click)="showBasicCheckModal(item.hostid,item.host)">添加监测点</span>
<span (click)="editBasicModal(item)">编辑</span>
<span (click)="showDeleteConfirm(item)">删除</span>
<nz-dropdown [nzTrigger]="'click'" class="table-dropdown">
<a nz-dropdown>更多 <i class="anticon anticon-down main-color"></i>
</a>
<ul nz-menu nzSelectable>
<li *ngIf="!item.monitorTask" (click)="showTempStop(item)" nz-menu-item>
<a>临时暂停</a></li>
<li (click)="openHost(item)" nz-menu-item><a>
<ng-container *ngIf="item.status == 1">开启</ng-container>
<ng-container *ngIf="item.status == 0">停止</ng-container>
监控
</a></li>
<li nz-menu-item (click)="goDetail(item)"><a>查看监测点</a></li>
</ul>
</nz-dropdown>
</ng-container>
</td>
</tr>
<nz-table #nzTable [nzData]="dataSet" [nzLoading]="loading" [nzFrontPagination]="false" [nzShowPagination]="true"
[nzTotal]="totalNum" [nzPageIndex]="pageNum" [nzPageSize]="pageCount"
(nzPageIndexChange)="change($event)">
<thead>
<tr>
<th [nzChecked]="allChecked"></th>
<th>名称</th>
<th>状态</th>
<th>关联资产</th>
[(nzChecked)]="item.checked"></td>
<td class="cursor main-color">
<span (click)="goDetail(item)">{{item.name}}</span>
</td>
<td class="round-tag tag-form">
<ng-container *ngIf="item.waringName == '正常'">
<nz-tag class="tag-green" [nzColor]="color.green"></nz-tag>
</ng-container>
<ng-container *ngIf="item.waringName == '禁用'">
<nz-tag class="tag-gray" [nzColor]="color.gray"></nz-tag>
</ng-container>
<ng-container *ngIf="item.waringName == '告警'">
<nz-tag class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
</ng-container>
<ng-container *ngIf="item.waringName == '严重'">
<nz-tag class="tag-red" [nzColor]="color.red"></nz-tag>
</ng-container>
</td>
<td class="cursor">
<span (click)="goTOInventory(item?.inventory?.id)">{{item?.inventory?.name}}</span>
</td>
<span class="main-color" (click)="goEquip(item)">{{item?.equipmentType}}</span>
<td class="default">
<ng-container *ngIf="!item.available || item.available == 0">
<nz-tag>AGENT</nz-tag>
</ng-container>
<ng-container *ngIf="item.available == 1">
<nz-tag [nzColor]="'#3bae6a'">AGENT</nz-tag>
</ng-container>
<ng-container *ngIf="item.available == 2">
<nz-tooltip [nzTitle]="item.error">
<nz-tag nz-tooltip [nzColor]="'#d44f51'">AGENT</nz-tag>
</nz-tooltip>
</ng-container>
<ng-container *ngIf=" !item.snmp_available || item.snmp_available == 0">
<nz-tooltip [nzTitle]="item?.snmp_error">
<nz-tag>SNMP</nz-tag>
</nz-tooltip>
</ng-container>
<ng-container *ngIf="item.snmp_available == 1">
<nz-tag [nzColor]="'#3bae6a'">SNMP</nz-tag>
</ng-container>
<ng-container *ngIf="item.snmp_available == 2">
<nz-tooltip [nzTitle]="item.snmp_error">
<nz-tag nz-tooltip [nzColor]="'#d44f51'">SNMP</nz-tag>
</nz-tooltip>
</ng-container>
<ng-container *ngIf="!item.jmx_available || item.jmx_available == 0">
<nz-tag>JMX</nz-tag>
</ng-container>
<ng-container *ngIf="item.jmx_available == 1">
<nz-tag [nzColor]="'#3bae6a'">JMX</nz-tag>
</ng-container>
<ng-container *ngIf="item.jmx_available == 2">
<nz-tooltip [nzTitle]="item.jmx_error">
<nz-tag nz-tooltip [nzColor]="'#d44f51'">JMX</nz-tag>
</nz-tooltip>
</ng-container>
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
<ng-container *ngIf="!item.ipmi_available || item.ipmi_available == 0">
<nz-tag>IPMI</nz-tag>
</ng-container>
<ng-container *ngIf="item.ipmi_available == 1">
<nz-tag [nzColor]="'#3bae6a'">IPMI</nz-tag>
</ng-container>
<ng-container *ngIf="item.ipmi_available == 2">
<nz-tooltip [nzTitle]="item.ipmi_error">
<nz-tag nz-tooltip [nzColor]="'#d44f51'">IPMI</nz-tag>
</nz-tooltip>
</ng-container>
</td>
<td class="handle main-color">
<span (click)="showBasicCheckModal(item.hostid,item.host)">添加监测点</span>
<span (click)="editBasicModal(item)">编辑</span>
<span (click)="showDeleteConfirm(item)">删除</span>
<nz-dropdown [nzTrigger]="'click'" class="table-dropdown">
<a nz-dropdown>更多 <i class="anticon anticon-down main-color"></i>
</a>
<ul nz-menu nzSelectable>
<li (click)="showTempStop(item)" nz-menu-item><a>临时暂停</a></li>
<li (click)="openHost(item)" nz-menu-item><a>
<ng-container *ngIf="item.status == 1">开启</ng-container>
<ng-container *ngIf="item.status == 0">停止</ng-container>
监控
</a></li>
<li nz-menu-item (click)="goDetail(item)"><a>查看监测点</a></li>
</ul>
</nz-dropdown>
</td>
</tr>
</ng-container>
<!-- 添加资源-->
<smart-basic-edit #basicEdit (done)="handleOk($event)"></smart-basic-edit>
<!--添加监测点-->
<smart-basi-check #smartCheck></smart-basi-check>
<!--添加分组-->
<smart-create-group #smartCreateGroup (add)="handleOk($event)"></smart-create-group>