Commit e5dbde52 authored by wangqinghua's avatar wangqinghua

网站监测

parent cddb18b9
......@@ -61,6 +61,7 @@ import {KonwledgeBaseComponent} from './work/konwledge-base/konwledge-base.compo
import {PersonelManageComponent} from './work/personel-manage/personel-manage.component';
import {WorkHandleComponent} from './work/work-handle/work-handle.component';
import {WebsiteComponent} from './modal/website/website.component';
import {NetworkDetailComponent} from './overAll/network-check/network-detail/network-detail.component';
@NgModule({
imports: [
......@@ -123,6 +124,7 @@ import {WebsiteComponent} from './modal/website/website.component';
PersonelManageComponent,
WorkHandleComponent,
WebsiteComponent,
NetworkDetailComponent,
],
providers:[
OverAllService,
......
<nz-modal [(nzVisible)]="isVisible" nzTitle="{{title}}" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
<p>Content one</p>
<p>Content two</p>
<p>Content three</p>
<nz-modal [nzWidth]="1080" [(nzVisible)]="isVisible" nzTitle="{{title}}" (nzOnCancel)="handleCancel()"
(nzOnOk)="handleOk()">
<nz-tabset [nzSelectedIndex]="tabNum" style="padding-bottom: 25px;min-height: 500px">
<nz-tab nzTitle="1.场景">
<div nz-form class="ant-advanced-search-form form-select">
<form nz-form class="ant-advanced-search-form">
<nz-collapse>
<nz-collapse-panel nzHeader="基本属性" [nzActive]="true">
<div nz-row [nzGutter]="24">
<div nz-col [nzSpan]="12">
<nz-form-item nzFlex>
<nz-form-label [nzSpan]="6" nzFor="name">网站名称</nz-form-label>
<nz-form-control [nzSpan]="14">
<input id="name" name="name" nz-input placeholder="默认" [(ngModel)]="validateForm.name">
</nz-form-control>
</nz-form-item>
</div>
<div nz-col [nzSpan]="12">
<nz-form-item nzFlex>
<nz-form-label [nzOffset]="4" [nzSpan]="6" nzFor="delay">更新间隔</nz-form-label>
<nz-form-control [nzSpan]="14">
<input id="delay" name="delay" nz-input placeholder="默认" [(ngModel)]="validateForm.delay">
</nz-form-control>
</nz-form-item>
</div>
</div>
<div nz-row [nzGutter]="24">
<div nz-col [nzSpan]="12">
<nz-form-item nzFlex>
<nz-form-label [nzSpan]="6" nzFor="retries">尝试次数</nz-form-label>
<nz-form-control [nzSpan]="14">
<input id="retries" name="retries" nz-input placeholder="默认" [(ngModel)]="validateForm.retries">
</nz-form-control>
</nz-form-item>
</div>
<div nz-col [nzSpan]="12">
<nz-form-item nzFlex>
<nz-form-label [nzOffset]="4" [nzSpan]="6" nzFor="hostid">客户端
</nz-form-label>
<nz-form-control [nzSpan]="14">
<nz-select name="equipmentType" nzPlaceHolder="选择设备类型" [(ngModel)]="validateForm.hostid">
<nz-option nzValue="是" nzLabel="是"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
</div>
</div>
<div nz-row [nzGutter]="24">
<div nz-col [nzSpan]="24">
<nz-form-item nzFlex>
<nz-form-label [nzSpan]="6" nzFor="http_proxy">Http代理</nz-form-label>
<nz-form-control [nzSpan]="18">
<input id="http_proxy" name="http_proxy" nz-input placeholder="默认"
[(ngModel)]="validateForm.http_proxy">
</nz-form-control>
</nz-form-item>
</div>
</div>
</nz-collapse-panel>
<nz-collapse-panel nzHeader="高级属性" [nzActive]="true">
<div nz-row [nzGutter]="24">
<div nz-col [nzSpan]="2">
变量
</div>
<div nz-col [nzSpan]="10">
<nz-form-item nzFlex>
<nz-form-control [nzSpan]="14">
<input name="ipmi_username" nz-input placeholder="默认">
</nz-form-control>
</nz-form-item>
</div>
<div nz-col [nzSpan]="1">
>=
</div>
<div nz-col [nzSpan]="10">
<nz-form-item nzFlex>
<nz-form-control [nzSpan]="14">
<input name="ipmi_username" nz-input placeholder="默认">
</nz-form-control>
</nz-form-item>
</div>
<div nz-col [nzSpan]="1">
X
</div>
</div>
<div nz-row [nzGutter]="24">
<div nz-col [nzSpan]="2">
头部
</div>
<div nz-col [nzSpan]="10">
<nz-form-item nzFlex>
<nz-form-control [nzSpan]="14">
<input name="ipmi_username" nz-input placeholder="默认">
</nz-form-control>
</nz-form-item>
</div>
<div nz-col [nzSpan]="1">
>=
</div>
<div nz-col [nzSpan]="10">
<nz-form-item nzFlex>
<nz-form-control [nzSpan]="14">
<input name="ipmi_username" nz-input placeholder="默认">
</nz-form-control>
</nz-form-item>
</div>
<div nz-col [nzSpan]="1">
X
</div>
</div>
</nz-collapse-panel>
</nz-collapse>
</form>
</div>
<div class="modal-footer-btn">
<button nz-button (click)="handleCancel()" nzType="primary">取消</button>
<button nz-button (click)="tabsChange(1)" nzType="primary">下一步</button>
</div>
</nz-tab>
<nz-tab nzTitle="2.步骤">
<button nz-button nzType="default">添加步骤</button>
<div >
<div nz-row [nzGutter]="24">
<div nz-col [nzSpan]="1">
No
</div>
<div nz-col [nzSpan]="3">
步骤名称
</div>
<div nz-col [nzSpan]="3">
超时
</div>
<div nz-col [nzSpan]="3">
URL
</div>
<div nz-col [nzSpan]="3">
要求字串
</div>
<div nz-col [nzSpan]="3">
要求状态码
</div>
<div nz-col [nzSpan]="3">
跟随调整
</div>
<div nz-col [nzSpan]="1">
</div>
</div>
<div nz-row [nzGutter]="12">
<div nz-col [nzSpan]="1">
1
</div>
<nz-form-control nz-col [nzSpan]="3">
<input nz-input placeholder="名称">
</nz-form-control>
<nz-form-control nz-col [nzSpan]="3">
<input nz-input placeholder="默认30s">
</nz-form-control>
<nz-form-control nz-col [nzSpan]="3">
<input nz-input placeholder="" >
</nz-form-control>
<nz-form-control nz-col [nzSpan]="3">
<input nz-input placeholder="" >
</nz-form-control>
<nz-form-control nz-col [nzSpan]="3">
<input nz-input placeholder="200" >
</nz-form-control>
<nz-form-control nz-col [nzSpan]="3">
<nz-select name="equipmentType" nzPlaceHolder="选择设备类型">
<nz-option nzValue="是" nzLabel="是"></nz-option>
</nz-select>
</nz-form-control>
<div nz-col [nzSpan]="1">
<span class="cursor">X</span>
</div>
</div>
</div>
<div class="modal-footer-btn">
<button nz-button (click)="handleCancel()" nzType="primary">取消</button>
<button nz-button (click)="tabsChange(0)" nzType="primary">上一步</button>
</div>
</nz-tab>
<nz-tab nzTitle="3.认证">
<form nz-form class="ant-advanced-search-form">
<div nz-row [nzGutter]="24">
<div nz-col [nzSpan]="12">
<nz-form-item nzFlex>
<nz-form-label [nzSpan]="6" nzFor="applicationid">Http认证</nz-form-label>
<nz-form-control [nzSpan]="14">
<nz-select id="applicationid" name="applicationid" nzPlaceHolder="选择设备类型" [(ngModel)]="validateForm.applicationid">
<nz-option nzValue="是" nzLabel="是"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
</div>
<div nz-col [nzSpan]="6">
<label nz-checkbox>
<span>SSL验证对端</span>
</label>
</div>
<div nz-col [nzSpan]="6">
<label nz-checkbox>
<span>SSL验证主机</span>
</label>
</div>
</div>
<div nz-row [nzGutter]="24">
<div nz-col [nzSpan]="12">
<nz-form-item nzFlex>
<nz-form-label [nzSpan]="6" nzFor="ssl_cert_file">SSL证书文件</nz-form-label>
<nz-form-control [nzSpan]="14">
<input id="ssl_cert_file" name="ssl_cert_file" nz-input placeholder="默认"
[(ngModel)]="validateForm.ssl_cert_file">
</nz-form-control>
</nz-form-item>
</div>
<div nz-col [nzSpan]="12">
<nz-form-item nzFlex>
<nz-form-label [nzOffset]="4" [nzSpan]="6" nzFor="ssl_key_file">SSL秘钥文件
</nz-form-label>
<nz-form-control [nzSpan]="14">
<input id="ssl_key_file" name="ssl_key_file" nz-input placeholder="默认"
[(ngModel)]="validateForm.ssl_key_file">
</nz-form-control>
</nz-form-item>
</div>
</div>
<div nz-row [nzGutter]="24">
<div nz-col [nzSpan]="12">
<nz-form-item nzFlex>
<nz-form-label [nzSpan]="6" nzFor="ssl_key_password">SSL秘钥密码</nz-form-label>
<nz-form-control [nzSpan]="14">
<input id="ssl_key_password" name="ssl_key_password" nz-input placeholder="默认"
[(ngModel)]="validateForm.ssl_key_password">
</nz-form-control>
</nz-form-item>
</div>
</div>
</form>
<div class="modal-footer-btn">
<button nz-button (click)="handleCancel()" nzType="primary">取消</button>
<button nz-button (click)="tabsChange(1)" nzType="primary">上一步</button>
<button nz-button (click)="handleOk()" nzType="primary">完成</button>
</div>
</nz-tab>
</nz-tabset>
</nz-modal>
\ No newline at end of file
......@@ -9,11 +9,33 @@ export class WebsiteComponent implements OnInit {
isVisible = false;
title;
tabNum = 0;
validateForm;
steps = [];
constructor() {
}
ngOnInit() {
this.initForm();
}
initForm(){
this.steps = [];
this.validateForm = {
name:'',
hostid:null,
applicationid:null,
delay:'',
retries:null,
variables:'',
http_proxy:'',
ssl_cert_file:'',
ssl_key_file:'',
ssl_key_password:'',
steps:this.steps,
}
}
showAddModal() {
......@@ -32,4 +54,9 @@ export class WebsiteComponent implements OnInit {
handleCancel() {
this.isVisible = false;
}
tabsChange(index){
this.tabNum = index;
}
}
......@@ -741,6 +741,7 @@ export class BasicDetailComponent implements OnInit, AfterViewInit {
handleImageCancel() {
this.isGrapha = false;
this.chartOptionGrapha = null;
}
//监控项分类
......
......@@ -8,18 +8,20 @@
<a>综合监控</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item>
基础资源监控
<a (click)="backList()">基础资源监控</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item *ngIf="searchStatus">
搜索结果
</nz-breadcrumb-item>
</nz-breadcrumb>
</div>
<div nz-col nzSpan="5">
<nz-input-group nzPrefixIcon="anticon anticon-search">
<input type="text" nz-input placeholder="输入资源名称">
<input type="text" nz-input [(ngModel)]="searchName" placeholder="输入资源名称">
</nz-input-group>
</div>
<div nz-col nzSpan="3" class="text-right">
<button nz-button nzType="primary"><i class="anticon anticon-search"></i></button>
<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>
......@@ -34,7 +36,7 @@
<span style="margin-right: 8px"> <nz-tag [nzColor]="'#dd4127'"></nz-tag>{{red}} </span>
<span> <nz-tag [nzColor]="'#aaaaaa'"></nz-tag>{{gray}} </span>
</span>
<nz-select style="width: 200px;" nzShowSearch nzAllowClear nzPlaceHolder="按组分开" [(ngModel)]="selectedValue"
<nz-select style="width: 200px;" nzPlaceHolder="按组分开" [(ngModel)]="selectedValue"
(ngModelChange)="select()">
<nz-option nzLabel="按设备类型展开" nzValue="type"></nz-option>
<nz-option nzLabel="按资源分组展开" nzValue="group"></nz-option>
......@@ -53,7 +55,7 @@
</button>
</div>
</div>
<nz-table #nzTable [nzData]="dataSet" nzSingleSort [nzLoading]="loading">
<nz-table #nzTable [nzData]="dataSet" nzSingleSort [nzLoading]="loading" [nzShowPagination]="frontPagination">
<thead>
<tr>
<th [nzChecked]="allChecked"></th>
......@@ -66,72 +68,164 @@
</thead>
<tbody>
<!--设备类型-->
<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)">
<td nzShowCheckbox [(nzChecked)]="item.checked"></td>
<td class="cursor" [nzIndentSize]="item.level*20" [nzShowExpand]="!!item.list"
[(nzExpand)]="item.expand" (nzExpandChange)="collapse(expandDataCache[data.host],item,$event)">
<span *ngIf="!item.level" (click)="getChildrenType(item)">{{item.equipmentType}}</span>
<span *ngIf="item.level" (click)="goDetail(item)">{{item.name}}</span>
</td>
<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>
<td class="handle">
<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)">
<td nzShowCheckbox [(nzChecked)]="item.checked"></td>
<td class="cursor" [nzIndentSize]="item.level*20" [nzShowExpand]="!!item.list"
[(nzExpand)]="item.expand" (nzExpandChange)="collapse(expandDataCache[data.host],item,$event)">
<span *ngIf="!item.level" (click)="getChildrenType(item)">{{item.equipmentType}}</span>
<span *ngIf="item.level" (click)="goDetail(item)">{{item.name}}</span>
</td>
<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>
<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 nz-menu-item><a>查看监测点</a></li>
<li 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)">
<!--父级-->
<ng-container *ngIf="!item.level">
<span (click)="showBasicEditModal(item)">添加资源</span>
<td></td>
<td class="cursor" [nzIndentSize]="item.level*20" nzShowExpand [nzExpand] ='item.expand'
(nzExpandChange)="getChildren(item)">
<span>{{item.name}}</span>
</td>
</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 nz-menu-item><a>查看监测点</a></li>
<li nz-menu-item><a>添加告警</a></li>
</ul>
</nz-dropdown>
<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>
</tr>
<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-template>
</ng-template>
</ng-container>
</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 class="cursor" [nzIndentSize]="item.level*20" nzShowExpand [nzExpand] ='item.expand'
(nzExpandChange)="getChildren(item)">
<span>{{item.name}}</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">
<ng-container *ngIf="searchStatus">
<ng-container *ngFor="let item of searchData">
<tr>
<td nzShowCheckbox [nzIndeterminate]="indeterminate" (nzCheckedChange)="selectChecked($event,item)" [(nzChecked)]="item.checked"></td>
<td class="cursor">
<span (click)="goDetail(item)">{{item.name}}</span>
</td>
</ng-container>
<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>
......@@ -185,12 +279,6 @@
</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>
......@@ -208,11 +296,9 @@
<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>
</tbody>
</nz-table>
......
......@@ -44,6 +44,7 @@ export class BasicComponent implements OnInit {
//表格信息
loading = false;
frontPagination = true;
selectedValue;
isCheck = false;
......@@ -65,6 +66,11 @@ export class BasicComponent implements OnInit {
green;
gray;
//搜索
searchStatus = false;
searchName;
searchData;
constructor(private fb: FormBuilder, private overAllSer: OverAllService, private router: Router,
private modalService: NzModalService, private message: NzMessageService,
) {
......@@ -125,6 +131,32 @@ export class BasicComponent implements OnInit {
this.findOpStatus();
}
//搜索
search(){
this.loading = true;
this.searchStatus = true;
this.frontPagination = false;
const data = {
search:{
name:this.searchName
}
}
this.overAllSer.find(data).subscribe(
(res)=>{
if(res.errCode == 10000){
this.searchData = res.data;
}
this.loading = false;
}
)
}
//backList
backList(){
this.searchStatus = false;
this.frontPagination = true;
}
//查询设备状态
findOpStatus(){
this.overAllSer.findHostCountByStatus(0).subscribe(
......@@ -194,6 +226,8 @@ export class BasicComponent implements OnInit {
//选择分组
select() {
this.loading = true;
this.searchStatus = false;
this.frontPagination = true;
if (this.selectedValue == 'group') {
this.overAllSer.getgroups({}).subscribe(
(res) => {
......
<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>
网站监测
</nz-breadcrumb-item>
</nz-breadcrumb>
</div>
<div nz-col nzSpan="5">
<nz-input-group nzPrefixIcon="anticon anticon-search">
<input type="text" [(ngModel)]="name" nz-input placeholder="请输入网站名称">
</nz-input-group>
</div>
<div nz-col nzSpan="3" class="text-right">
<button 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>
<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>
网站监测
</nz-breadcrumb-item>
</nz-breadcrumb>
</div>
<div nz-col nzSpan="5">
<nz-input-group nzPrefixIcon="anticon anticon-search">
<input type="text" [(ngModel)]="name" nz-input placeholder="请输入网站名称">
</nz-input-group>
</div>
<div nz-col nzSpan="3" class="text-right">
<button (click)="getwebList()" 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>
</div>
<div nz-row class="search-form tag-form">
<div nz-col nzSpan="12">
<span>网站监测数:{{deviceNo}}</span>
<span>监测状态:
<div nz-col nzSpan="12">
<span>网站监测数:{{deviceNo}}</span>
<span>监测状态:
<span style="margin-right: 8px"> <nz-tag [nzColor]="'#64ad58'"></nz-tag>{{checkStatus.green}} </span>
<span style="margin-right: 8px"> <nz-tag [nzColor]="'#ed9e2e'"></nz-tag>{{checkStatus.yellow}} </span>
<span style="margin-right: 8px"> <nz-tag [nzColor]="'#dd4127'"></nz-tag>{{checkStatus.red}} </span>
<span> <nz-tag [nzColor]="'#aaaaaa'"></nz-tag>{{checkStatus.gray}} </span>
</span>
<nz-select style="width: 200px;" nzShowSearch nzAllowClear 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>
</div>
</div>
<div nz-col nzSpan="12" class="text-right">
<button nz-button nzType="default" (click)="showAddmodal()"><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>
</div>
</div>
<nz-table #nzTable [nzData]="dataSet" nzSingleSort [nzLoading]="loading">
<thead>
<tr>
<th [nzChecked]="allChecked"></th>
<th>网站名称</th>
<th>状态</th>
<th nzWidth="20%">最近检查记录</th>
<th>步骤数量</th>
<th>间隔</th>
<th>尝试次数</th>
<th>认证</th>
<th>Http代理</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!--资源分组-->
<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 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>
<nz-table #nzTable [nzData]="dataSet" nzSingleSort [nzLoading]="loading" [nzTotal]="totalNum" [nzPageIndex]="pageIndex" [nzPageSize]="pageSize" (nzPageIndexChange)="getwebList()" [nzFrontPagination]="false">
<thead>
<tr>
<th [nzChecked]="allChecked"></th>
<th>网站名称</th>
<th>状态</th>
<th nzWidth="20%">最近检查记录</th>
<th>步骤数量</th>
<th>间隔</th>
<th>尝试次数</th>
<th>认证</th>
<th>Http代理</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!--资源分组-->
<ng-container *ngFor="let item of dataSet">
<tr>
<!--子集-->
<td nzShowCheckbox (nzCheckedChange)="selectChecked($event,item)"></td>
<td class="cursor">
<span (click)="goDetail(item)">{{item.name}}</span>
</td>
<td>
<span *ngIf="item.status == 0">启用</span>
<span *ngIf="item.status == 1">禁用</span>
</td>
<td>最近检查记录</td>
<td>{{item.steps.length}}</td>
<td>{{item.delay}}</td>
<td>{{item.retries}}</td>
<td>{{item.authentication}}</td>
<td>{{item.headers}}</td>
<td class="handle">
<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>监控</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>
</ng-container>
<td class="round-tag tag-form"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="handle">
<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>
</ng-template>
</ng-template>
</tbody>
</ng-container>
</tbody>
</nz-table>
<!--添加网站-->
<smart-website #smartWebsite></smart-website>
\ No newline at end of file
import {Component, OnInit} from '@angular/core';
import {Component, OnInit, ViewChild} from '@angular/core';
import {OverAllService} from '../overAll.service';
import {pageSize} from '../../app.constants';
import {WebsiteComponent} from '../../modal/website/website.component';
@Component({
selector: 'smart-network-check',
......@@ -8,13 +9,17 @@ import {pageSize} from '../../app.constants';
styles: []
})
export class NetworkCheckComponent implements OnInit {
@ViewChild('smartWebsite') smartWebsite:WebsiteComponent;
dataSet;
deviceNo;
loading = false;
allChecked;
name;
pageIndex = 1;
pageSize = pageSize;
totalNum;
checkStatus = {
green: '',
......@@ -31,17 +36,21 @@ export class NetworkCheckComponent implements OnInit {
this.getCheckStatus();
}
//网站列表
getwebList() {
this.loading = true;
const data = {
name:'',
name:this.name,
eventPage:this.pageIndex,
pageRecords:this.pageSize
};
this.overAllSer.findWebscenario(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.dataSet = res.data;
this.dataSet = res.data.data;
this.totalNum = res.data.totalNum;
}
this.loading = false;
}
);
}
......@@ -50,4 +59,19 @@ export class NetworkCheckComponent implements OnInit {
getCheckStatus() {
}
//添加网站
showAddmodal(){
this.smartWebsite.showAddModal();
}
//批量开启or关闭
openBatchHost(status,opreation){
}
//批量删除
batchDeleteConfirm(){
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment