Newer
Older
<div nz-row class="breadcrumbs">
<div nz-col nzSpan="16">
<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">
搜索结果
<div nz-col nzSpan="5">
<nz-input-group nzPrefixIcon="anticon anticon-search">
<input type="text" nz-input [(ngModel)]="searchName" placeholder="输入资源名称">
</nz-input-group>
</div>
<div nz-col nzSpan="3" class="text-right">
<button (click)="search()" nz-button nzType="primary"><i class="anticon anticon-search"></i></button>
<button nz-button nzType="primary"><i class="anticon anticon-sync"></i></button>
<button nz-button nzType="primary"><i class="anticon anticon-arrows-alt"></i></button>
<div nz-col nzSpan="12">
<span>监控设备数：{{deviceNo}}</span>
<span>设备状态：
<span style="margin-right: 8px"> <nz-tag [nzColor]="color.green"></nz-tag>
<i *ngIf="!green && green !=0" class="anticon anticon-spin anticon-loading" style="font-size: 15px;"></i>
{{green}}
</span>
<span style="margin-right: 8px"> <nz-tag [nzColor]="color.yellow"></nz-tag>
<i *ngIf="!yellow && yellow != 0" class="anticon anticon-spin anticon-loading" style="font-size: 15px;"></i>
{{yellow}}
</span>
<span style="margin-right: 8px"> <nz-tag [nzColor]="color.red"></nz-tag>
<i *ngIf="!red && red != 0" class="anticon anticon-spin anticon-loading" style="font-size: 15px;"></i>
{{red}}
</span>
<span> <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"></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"></i>删除资源
</button>
<nz-table #nzTable [nzData]="dataSet" nzSingleSort [nzLoading]="loading" [nzShowPagination]="frontPagination">
<th>名称</th>
<th>告警状态</th>
<th nzWidth="20%">状态</th>
<th>可用性</th>
<ng-container *ngIf="!searchStatus">
<!--设备类型-->
<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 class="cursor" [nzIndentSize]="item.level*20" nzShowExpand [nzExpand]='item.expand'
(nzExpandChange)="getChildrenType(item)">
<span>{{item.equipmentType}}</span>
</td>
</ng-container>
<!--子集-->
<ng-container *ngIf="item.level">
<td nzShowCheckbox [nzIndeterminate]="indeterminate"
(nzCheckedChange)="selectChecked($event,item)" [(nzChecked)]="item.checked"></td>
<td class="cursor" [nzIndentSize]="item.level*20">
<span (click)="goDetail(item)">{{item.name}}</span>
</td>
</ng-container>
<td class="round-tag">
<nz-tag *ngIf="item.maxLevel == 4 || item.maxLevel == 5" [nzColor]="'#fc0d1b'"></nz-tag>
<nz-tag *ngIf="item.maxLevel == 2 || item.maxLevel == 3" [nzColor]="'#fd9827'"></nz-tag>
<span *ngIf="item.maxLevel < 2">正常</span>
</td>
<td>
<span *ngIf="item.status == 0">已监控</span>
<span *ngIf="item.status == 1">未监控</span>
</td>
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<td>
<ng-container *ngIf="item.level">
<ng-container *ngIf="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-tag [nzColor]="'#d44f51'">AGENT</nz-tag>
</ng-container>
<ng-container *ngIf="item.snmp_available == 0">
<nz-tag>SNMP</nz-tag>
</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-tag [nzColor]="'#d44f51'">SNMP</nz-tag>
</ng-container>
<ng-container *ngIf="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-tag [nzColor]="'#d44f51'">JMX</nz-tag>
</ng-container>
<ng-container *ngIf="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-tag [nzColor]="'#d44f51'">IPMI</nz-tag>
</ng-container>
</ng-container>
</td>
<td class="handle">
<ng-container *ngIf="!item.level">
<span (click)="showBasicEditModal(item)">添加资源</span>
</ng-container>
<ng-container *ngIf="item.level">
<span (click)="showBasicCheckModal(item.hostid)">添加监测点</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"></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(item)" nz-menu-item><a>添加告警</a></li>
</ul>
</nz-dropdown>
</ng-container>
</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)">
<!--父级-->
<td class="cursor" [nzIndentSize]="item.level*20" nzShowExpand [nzExpand]='item.expand'
(nzExpandChange)="getChildren(item)">
<span>{{item.name}}</span>
</td>
<td nzShowCheckbox [nzIndeterminate]="indeterminate"
(nzCheckedChange)="selectChecked($event,item)" [(nzChecked)]="item.checked"></td>
<td class="cursor" [nzIndentSize]="item.level*20">
<span (click)="goDetail(item)">{{item.name}}</span>
</td>
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
<td class="round-tag tag-form">
<nz-tag *ngIf="item.maxLevel == 4 || item.maxLevel == 5" [nzColor]="'#fc0d1b'"></nz-tag>
<nz-tag *ngIf="item.maxLevel == 2 || item.maxLevel == 3" [nzColor]="'#fd9827'"></nz-tag>
<span *ngIf="item.maxLevel < 2">正常</span>
</td>
<td>
<span *ngIf="item.status == 0">已监控</span>
<span *ngIf="item.status == 1">未监控</span>
</td>
<td>
<ng-container *ngIf="item.level">
<ng-container *ngIf="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-tag [nzColor]="'#d44f51'">AGENT</nz-tag>
</ng-container>
<ng-container *ngIf="item.snmp_available == 0">
<nz-tag>SNMP</nz-tag>
</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-tag [nzColor]="'#d44f51'">SNMP</nz-tag>
</ng-container>
<ng-container *ngIf="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-tag [nzColor]="'#d44f51'">JMX</nz-tag>
</ng-container>
<ng-container *ngIf="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-tag [nzColor]="'#d44f51'">IPMI</nz-tag>
</ng-container>
</ng-container>
</td>
<td class="handle">
<ng-container *ngIf="!item.level">
<span (click)="showBasicEditModal(item)">添加资源</span>
<span (click)="updateGroup(item)">编辑</span>
<span (click)="showDeleteGroupConfirm(item)">删除</span>
</ng-container>
<ng-container *ngIf="item.level">
<span (click)="showBasicCheckModal(item.hostid)">添加监测点</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"></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>
<li (click)="showAlarm(item)" nz-menu-item><a>添加告警</a></li>
</ul>
</nz-dropdown>
</ng-container>
</td>
</tr>
</ng-template>
<ng-container *ngIf="searchStatus">
<ng-container *ngFor="let item of searchData">
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
<tr>
<td nzShowCheckbox [nzIndeterminate]="indeterminate" (nzCheckedChange)="selectChecked($event,item)"
[(nzChecked)]="item.checked"></td>
<td class="cursor">
<span (click)="goDetail(item)">{{item.name}}</span>
</td>
<td class="round-tag tag-form">
<nz-tag *ngIf="item.maxLevel == 4 || item.maxLevel == 5" [nzColor]="color.red"></nz-tag>
<nz-tag *ngIf="item.maxLevel == 2 || item.maxLevel == 3" [nzColor]="color.yellow"></nz-tag>
<span *ngIf="item.maxLevel < 2">正常</span>
</td>
<td>
<span *ngIf="item.status == 0">已监控</span>
<span *ngIf="item.status == 1">未监控</span>
</td>
<td>
<ng-container *ngIf="item.level">
<ng-container *ngIf="item.available == 0">
<nz-tag>AGENT</nz-tag>
</ng-container>
<ng-container *ngIf="item.available == 1">
<nz-tag [nzColor]="color.green">AGENT</nz-tag>
</ng-container>
<ng-container *ngIf="item.available == 2">
<nz-tag [nzColor]="color.red">AGENT</nz-tag>
</ng-container>
<ng-container *ngIf="item.snmp_available == 0">
<nz-tag>SNMP</nz-tag>
</ng-container>
<ng-container *ngIf="item.snmp_available == 1">
<nz-tag [nzColor]="color.green">SNMP</nz-tag>
</ng-container>
<ng-container *ngIf="item.snmp_available == 2">
<nz-tag [nzColor]="color.red">SNMP</nz-tag>
</ng-container>
<ng-container *ngIf="item.jmx_available == 0">
<nz-tag>JMX</nz-tag>
</ng-container>
<ng-container *ngIf="item.jmx_available == 1">
<nz-tag [nzColor]="color.green">JMX</nz-tag>
</ng-container>
<ng-container *ngIf="item.jmx_available == 2">
<nz-tag [nzColor]="color.red">JMX</nz-tag>
</ng-container>
<ng-container *ngIf="item.ipmi_available == 0">
<nz-tag>IPMI</nz-tag>
</ng-container>
<ng-container *ngIf="item.ipmi_available == 1">
<nz-tag [nzColor]="color.green">IPMI</nz-tag>
</ng-container>
<ng-container *ngIf="item.ipmi_available == 2">
<nz-tag [nzColor]="color.red">IPMI</nz-tag>
</ng-container>
</td>
<td class="handle">
<span (click)="showBasicCheckModal(item.hostid)">添加监测点</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"></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>
<li (click)="showAlarm(item)" nz-menu-item><a>添加告警</a></li>
</ul>
</nz-dropdown>
</td>
</tr>
</nz-table>
<!-- 添加资源-->
<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>