Commit 86b2b4c5 authored by wangqinghua's avatar wangqinghua

重构 jtopo

parent fa91c547
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<project version="4"> <project version="4">
<component name="ProjectPlainTextFileTypeManager"> <component name="ProjectPlainTextFileTypeManager">
<file url="file://$PROJECT_DIR$/src/main/webapp/content/javascript/jtopo/img/icon_elasticsearch.svg" />
<file url="file://$PROJECT_DIR$/webpack/webpack.common.js" /> <file url="file://$PROJECT_DIR$/webpack/webpack.common.js" />
</component> </component>
</project> </project>
\ No newline at end of file
...@@ -104,7 +104,12 @@ export class ResourceAlarmComponent implements OnInit { ...@@ -104,7 +104,12 @@ export class ResourceAlarmComponent implements OnInit {
}) })
}, },
yAxis: { yAxis: {
type: 'value' type: 'value',
axisLabel: {
show: true,
interval: 'auto',
formatter: '{value} 个'
},
}, },
series: [{ series: [{
data: data.map(e=>{ data: data.map(e=>{
...@@ -168,7 +173,12 @@ export class ResourceAlarmComponent implements OnInit { ...@@ -168,7 +173,12 @@ export class ResourceAlarmComponent implements OnInit {
], ],
yAxis: [ yAxis: [
{ {
type: 'value' type: 'value',
axisLabel: {
show: true,
interval: 'auto',
formatter: '{value} 个'
},
} }
], ],
series: [ series: [
......
...@@ -98,6 +98,9 @@ import {LookRoleComponent} from './look-role/look-role.component'; ...@@ -98,6 +98,9 @@ import {LookRoleComponent} from './look-role/look-role.component';
import {ThresholdComponent} from './modal/threshold/threshold.component'; import {ThresholdComponent} from './modal/threshold/threshold.component';
import {LineComponent} from './netTopology/model/line/line.component'; import {LineComponent} from './netTopology/model/line/line.component';
import {NodeComponent} from './netTopology/model/node/node.component'; import {NodeComponent} from './netTopology/model/node/node.component';
import {TemplateComponent} from './overAll/template/template.component';
import {DiscoveryComponent} from './modal/discovery/discovery.component';
import {StrategyComponent} from './modal/strategy/strategy.component';
@NgModule({ @NgModule({
imports: [ imports: [
...@@ -197,7 +200,10 @@ import {NodeComponent} from './netTopology/model/node/node.component'; ...@@ -197,7 +200,10 @@ import {NodeComponent} from './netTopology/model/node/node.component';
LookRoleComponent, LookRoleComponent,
ThresholdComponent, ThresholdComponent,
LineComponent, LineComponent,
NodeComponent NodeComponent,
TemplateComponent,
DiscoveryComponent,
StrategyComponent,
], ],
providers:[ providers:[
OverAllService, OverAllService,
......
...@@ -32,6 +32,7 @@ import {OperationWorkComponent} from './analysis/operation-work/operation-work.c ...@@ -32,6 +32,7 @@ import {OperationWorkComponent} from './analysis/operation-work/operation-work.c
import {ResourceAlarmComponent} from './analysis/resource-alarm/resource-alarm.component'; import {ResourceAlarmComponent} from './analysis/resource-alarm/resource-alarm.component';
import {PararmsComponent} from './work/pararms/pararms.component'; import {PararmsComponent} from './work/pararms/pararms.component';
import {HomeComponent} from './home/home.component'; import {HomeComponent} from './home/home.component';
import {TemplateComponent} from './overAll/template/template.component';
export const route: Routes = [ export const route: Routes = [
{path: '', component: JhiMainComponent,canActivate:[LoginGuard]}, {path: '', component: JhiMainComponent,canActivate:[LoginGuard]},
...@@ -71,6 +72,7 @@ export const route: Routes = [ ...@@ -71,6 +72,7 @@ export const route: Routes = [
{path: 'operationWork', component: OperationWorkComponent,data: { breadcrumb: '运维工作' },}, {path: 'operationWork', component: OperationWorkComponent,data: { breadcrumb: '运维工作' },},
{path: 'resourceAlarm', component: ResourceAlarmComponent,data: { breadcrumb: '资源告警统计' },}, {path: 'resourceAlarm', component: ResourceAlarmComponent,data: { breadcrumb: '资源告警统计' },},
{path: 'params', component: PararmsComponent,data: { breadcrumb: '参数配置' },}, {path: 'params', component: PararmsComponent,data: { breadcrumb: '参数配置' },},
{path: 'template', component: TemplateComponent,data: { breadcrumb: '模版配置' },},
] ]
}, },
] ]
......
...@@ -11,6 +11,7 @@ export class NotificationInterceptor implements HttpInterceptor { ...@@ -11,6 +11,7 @@ export class NotificationInterceptor implements HttpInterceptor {
// tslint:disable-next-line: no-unused-variable // tslint:disable-next-line: no-unused-variable
constructor(private injector: Injector) { constructor(private injector: Injector) {
setTimeout(() => this.alertService = injector.get(JhiAlertService)); setTimeout(() => this.alertService = injector.get(JhiAlertService));
console.log("2");
} }
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
......
...@@ -170,7 +170,7 @@ ...@@ -170,7 +170,7 @@
<nz-form-item nzFlex> <nz-form-item nzFlex>
<nz-form-label [nzSpan]="6" nzFor="ipmi_username_edit">用户名称</nz-form-label> <nz-form-label [nzSpan]="6" nzFor="ipmi_username_edit">用户名称</nz-form-label>
<nz-form-control [nzSpan]="14"> <nz-form-control [nzSpan]="14">
<input id="ipmi_username_edit" name="ipmi_username_edit" nz-input placeholder="用户名称" [(ngModel)]="validateForm.ipmi_username"> <input name="ipmi_username_edit" nz-input placeholder="用户名称" [(ngModel)]="validateForm.ipmi_username">
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div> </div>
...@@ -197,7 +197,7 @@ ...@@ -197,7 +197,7 @@
<nz-form-item nzFlex> <nz-form-item nzFlex>
<nz-form-label [nzSpan]="6" nzFor="ipmi_password_edit">密码</nz-form-label> <nz-form-label [nzSpan]="6" nzFor="ipmi_password_edit">密码</nz-form-label>
<nz-form-control [nzSpan]="14"> <nz-form-control [nzSpan]="14">
<input id="ipmi_password_edit" name="ipmi_password_edit" nz-input placeholder="密码" [(ngModel)]="validateForm.ipmi_password"> <input name="ipmi_password_edit" nz-input placeholder="密码" [(ngModel)]="validateForm.ipmi_password">
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div> </div>
......
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'smart-discovery',
templateUrl: './discovery.component.html',
styles: []
})
export class DiscoveryComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'smart-strategy',
templateUrl: './strategy.component.html',
styles: []
})
export class StrategyComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
...@@ -4,9 +4,9 @@ import {FormBuilder} from '@angular/forms'; ...@@ -4,9 +4,9 @@ import {FormBuilder} from '@angular/forms';
import {NzMessageService} from 'ng-zorro-antd'; import {NzMessageService} from 'ng-zorro-antd';
@Component({ @Component({
selector: 'smart-threshold', selector: 'smart-threshold',
templateUrl: './threshold.component.html', templateUrl: './threshold.component.html',
styles: [] styles: []
}) })
export class ThresholdComponent implements OnInit { export class ThresholdComponent implements OnInit {
@Output() done = new EventEmitter<any>(); @Output() done = new EventEmitter<any>();
...@@ -17,12 +17,8 @@ export class ThresholdComponent implements OnInit { ...@@ -17,12 +17,8 @@ export class ThresholdComponent implements OnInit {
hostName; //主机name hostName; //主机name
itemObj; //监控项对象 itemObj; //监控项对象
conditionType = 'commonly'; conditionType = 'commonly';
faultConditionList = [ faultConditionList = []; //故障阈值
conditionList = []; //危险阈值
]; //故障阈值
conditionList = [
]; //危险阈值
triggerConditionId; triggerConditionId;
triggerFaultConditionId; triggerFaultConditionId;
...@@ -32,26 +28,23 @@ export class ThresholdComponent implements OnInit { ...@@ -32,26 +28,23 @@ export class ThresholdComponent implements OnInit {
faultCondition: '', faultCondition: '',
itemName: '' itemName: ''
}; };
constructor(private overAllSer: OverAllService, private fb: FormBuilder, constructor(private overAllSer: OverAllService, private fb: FormBuilder,
private message: NzMessageService) { private message: NzMessageService) {
} }
ngOnInit() { ngOnInit() {
} }
initForm(){
this.faultConditionList = [
]; //危险阀值list
this.conditionList = [
]; //故障list initForm() {
this.triggerObj = { this.faultConditionList = []; //危险阀值list
condition: '', this.conditionList = []; //故障list
faultCondition: '', this.triggerObj = {
itemName: '' condition: '',
}; faultCondition: '',
} itemName: ''
};
}
//危险add //危险add
addFault() { addFault() {
...@@ -84,20 +77,20 @@ export class ThresholdComponent implements OnInit { ...@@ -84,20 +77,20 @@ export class ThresholdComponent implements OnInit {
} }
//新增 //新增
showAddModal(title,itemId,hostName) { showAddModal(title, itemId, hostName) {
this.title = title; this.title = title;
this.itemId = itemId; this.itemId = itemId;
this.isVisiable = true; this.isVisiable = true;
this.hostName = hostName; this.hostName = hostName;
this.overAllSer.findItemDetail(this.itemId).subscribe( this.overAllSer.findItemDetail(this.itemId).subscribe(
(res)=>{ (res) => {
this.itemObj = res.data[0]; this.itemObj = res.data[0];
} }
) );
} }
//编辑 //编辑
showEditModal(title,itemId,hostId,hostName) { showEditModal(title, itemId, hostId, hostName) {
this.title = title; this.title = title;
this.itemId = itemId; this.itemId = itemId;
this.isVisiable = true; this.isVisiable = true;
...@@ -168,32 +161,34 @@ export class ThresholdComponent implements OnInit { ...@@ -168,32 +161,34 @@ export class ThresholdComponent implements OnInit {
}; };
if (this.conditionType == 'commonly') { //常规 if (this.conditionType == 'commonly') { //常规
this.conditionList.forEach(res => { this.conditionList.forEach(res => {
if(!res.and){ if (!res.and) {
res.and = ""; res.and = '';
} }
data.condition += res.and + '{' + this.hostName + ':' + this.itemObj.key_ + '.last()}' + res.equal + '' + res.value ; data.condition += res.and + '{' + this.hostName + ':' + this.itemObj.key_ + '.last()}' + res.equal + '' + res.value;
}); });
this.faultConditionList.forEach(res => { this.faultConditionList.forEach(res => {
if(!res.and){ if (!res.and) {
res.and = ""; res.and = '';
} }
data.faultCondition += res.and + '{' + this.hostName + ':' + this.itemObj.key_ + '.last()}' + res.equal + '' + res.value ; data.faultCondition += res.and + '{' + this.hostName + ':' + this.itemObj.key_ + '.last()}' + res.equal + '' + res.value;
}); });
} else { //高级 } else { //高级
data.condition = this.triggerObj.condition; data.condition = this.triggerObj.condition;
data.faultCondition = this.triggerObj.faultCondition; data.faultCondition = this.triggerObj.faultCondition;
} }
if(!this.checkFun()){ if (!this.checkFun()) {
this.message.error("请输入阈值"); this.message.error('请输入阈值');
return false;
}
if(this.conditionList.length == 0 && this.faultConditionList.length == 0){
this.isVisiable = false;
this.initForm();
return false; return false;
} }
if (this.title == '添加阈值') { if (this.title == '添加阈值') {
this.createTrigger(data); if (this.conditionList.length == 0 && this.faultConditionList.length == 0) {
this.isVisiable = false;
this.initForm();
return false;
}else{
this.createTrigger(data);
}
} }
if (this.title == '编辑阈值') { if (this.title == '编辑阈值') {
this.updateTrigger(data); this.updateTrigger(data);
...@@ -201,18 +196,18 @@ export class ThresholdComponent implements OnInit { ...@@ -201,18 +196,18 @@ export class ThresholdComponent implements OnInit {
} }
//校验是否填值 //校验是否填值
checkFun(){ checkFun() {
let error = true; let error = true;
this.conditionList.map(e=>{ this.conditionList.map(e => {
if(e.value.length > 0){ if (e.value.length > 0) {
}else{ } else {
error = false; error = false;
} }
}); });
this.faultConditionList.map(e=>{ this.faultConditionList.map(e => {
if(e.value.length > 0){ if (e.value.length > 0) {
console.log(e.value) console.log(e.value);
}else{ } else {
error = false; error = false;
} }
}); });
...@@ -232,6 +227,7 @@ export class ThresholdComponent implements OnInit { ...@@ -232,6 +227,7 @@ export class ThresholdComponent implements OnInit {
if (response.errCode == 10000) { if (response.errCode == 10000) {
this.message.success('创建阈值成功'); this.message.success('创建阈值成功');
this.initForm(); this.initForm();
this.done.emit();
this.isVisiable = false; this.isVisiable = false;
} else { } else {
this.message.error(response.errMsg); this.message.error(response.errMsg);
...@@ -258,6 +254,7 @@ export class ThresholdComponent implements OnInit { ...@@ -258,6 +254,7 @@ export class ThresholdComponent implements OnInit {
if (res.errCode == 10000) { if (res.errCode == 10000) {
this.message.success('修改阈值成功'); this.message.success('修改阈值成功');
this.initForm(); this.initForm();
this.done.emit();
this.isVisiable = false; this.isVisiable = false;
} else { } else {
this.message.error(res.errMsg); this.message.error(res.errMsg);
...@@ -266,7 +263,7 @@ export class ThresholdComponent implements OnInit { ...@@ -266,7 +263,7 @@ export class ThresholdComponent implements OnInit {
} }
//取消 //取消
handleCheckCancel(){ handleCheckCancel() {
this.isVisiable = false; this.isVisiable = false;
this.initForm(); this.initForm();
} }
......
...@@ -277,6 +277,7 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe ...@@ -277,6 +277,7 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
console.log(topologyJson); console.log(topologyJson);
const arr = topologyJson.childs[0].childs; const arr = topologyJson.childs[0].childs;
const list = []; const list = [];
const hostIds = [];
arr.forEach(e=>{ arr.forEach(e=>{
if(e.elementType == 'link' && e.itemId && e.itemId.length > 0){ if(e.elementType == 'link' && e.itemId && e.itemId.length > 0){
const data = { const data = {
...@@ -287,6 +288,45 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe ...@@ -287,6 +288,45 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
list.push(data); list.push(data);
} }
}); });
arr.forEach(e=>{
if(e.elementType == 'node' && e.hostId){
hostIds.push(e.hostId);
}
});
if(hostIds.length > 0){
const res = {
hostIds : hostIds
};
this.topologySer.findElementStatus(res).subscribe(
(res)=>{
//status -1=未监控, 0=正常, 1=告警, 2=严重, 3=未分类
const resData = res.data;
resData.forEach(e1=>{
arr.forEach(e2=>{
if(e1.elementId == e2.hostId){
if(e1.status == 0){
e2.alarm = "正常";
e2.alarmColor = "50,205,50";
}
if(e1.status == 1){
e2.alarm = "告警";
e2.alarmColor = "255,182,193";
}
if(e1.status == 2){
e2.alarm = "严重";
e2.alarmColor = "220,20,60";
}
}
})
});
console.log('告警')
console.log(topologyJson)
editor.loadTopologyByJson(topologyJson, 'img/backimg.png');
}
)
}
if(list.length > 0){ //有流量监控-->查询流量监控 if(list.length > 0){ //有流量监控-->查询流量监控
const data = { const data = {
"list" : list "list" : list
...@@ -301,6 +341,8 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe ...@@ -301,6 +341,8 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
} }
}) })
}); });
console.log('进口流量')
console.log(topologyJson)
editor.loadTopologyByJson(topologyJson, 'img/backimg.png'); editor.loadTopologyByJson(topologyJson, 'img/backimg.png');
} }
) )
......
...@@ -314,4 +314,23 @@ export class OverAllService { ...@@ -314,4 +314,23 @@ export class OverAllService {
return this.http.get(SERVER_API_URL + '/valuemap/find'); return this.http.get(SERVER_API_URL + '/valuemap/find');
} }
//创建模板
createTemplates(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/templates/create',data);
}
//删除模板(支持批量删除)
deleteTemplates(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/templates/delete',data);
}
//查询模板
findTemplates(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/templates/find',data);
}
//查询模板组
getTemplateGroups(): Observable<any> {
return this.http.get(SERVER_API_URL + '/groups/getTemplateGroups');
}
} }
<div nz-row class="breadcrumbs">
<div nz-col nzSpan="12">
<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">
搜索结果
</nz-breadcrumb-item>
</nz-breadcrumb>
</div>
<div nz-col nzSpan="10" class="search-input text-right">
<input (keyup.enter)="search('')" type="text" nz-input [(ngModel)]="searchName" placeholder="输入资源名称">
<button (click)="search('')" nz-button nzType="default"><i class="anticon anticon-search"
style="color: #6097b7"></i>搜索
</button>
</div>
<div nz-col nzSpan="2" class="text-right">
<button (click)="ngOnInit()" nz-button nzType="primary"><i class="anticon anticon-sync"></i></button>
<smart-full-screen></smart-full-screen>
</div>
</div>
<div nz-row class="search-form tag-form">
<div nz-col nzSpan="12">
</div>
<div nz-col nzSpan="12" class="text-right">
<button nz-button nzType="default" (click)="showGroupModal()">
<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>删除模版
</button>
</div>
</div>
<nz-table #nzTable [nzData]="dataSet" nzSingleSort [nzLoading]="loading" [nzShowPagination]="frontPagination">
<thead>
<tr>
<th [nzChecked]="allChecked"></th>
<th>名称</th>
<th>告警状态</th>
<th>关联资产</th>
<!--<th nzWidth="20%">主机启用状态</th>-->
<th>可用性</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!--正常-->
<ng-container *ngIf="!searchStatus">
<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">
<span (click)="goDetail(item)">{{item.name}}</span>
</td>
</ng-container>
<td class="round-tag tag-form">
<ng-container *ngIf="item.status == 1">
<nz-tag [nzColor]="color.gray"></nz-tag>
</ng-container>
<ng-container *ngIf="item.status == 0">
<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>
<nz-tag *ngIf="item.maxLevel < 2 " [nzColor]="color.green"></nz-tag>
</ng-container>
</td>
<td class="cursor">
<span (click)="goTOInventory(item?.inventory?.id)">{{item?.inventory?.name}}</span>
</td>
<!--<nz-tag *ngIf="item.status == 0" [nzColor]="color.green"></nz-tag>-->
<!--<nz-tag *ngIf="item.status == 1" [nzColor]="color.gray"></nz-tag>-->
<td class="default">
<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 main-color">
<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,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"></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>
<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="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>
<td class="round-tag tag-form default">
<ng-container *ngIf="item.status == 1">
<nz-tag [nzColor]="color.gray"></nz-tag>
</ng-container>
<ng-container *ngIf="item.status == 0">
<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>
<nz-tag *ngIf="item.maxLevel < 2 " [nzColor]="color.green"></nz-tag>
</ng-container>
</td>
<td class="cursor">
<span (click)="goTOInventory(item?.inventory?.id)">{{item?.inventory?.name}}</span>
</td>
<td class="default">
<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>
</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"></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-container>
</ng-container>
</tbody>
</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>
<!--临时暂停-->
<smart-pause #smartPause (done)="handleOk($event)"></smart-pause>
<!--添加告警-->
<smart-alarm-modal #smartAlarmModal></smart-alarm-modal>
<!--自动发现-->
<smart-discovery #smartDiscovery></smart-discovery>
<!--监控策略-->
<smart-strategy #smartStrategy></smart-strategy>
\ No newline at end of file
import {Component, OnInit, ViewChild} from '@angular/core';
import {BasicEditComponent} from '../../modal/basic-edit/basic-edit.component';
import {CreateGroupComponent} from '../../modal/create-group/create-group.component';
import {OverAllService} from '../overAll.service';
import {NzMessageService, NzModalService} from 'ng-zorro-antd';
import {AlarmModalComponent} from '../../modal/alarm-modal/alarm-modal.component';
import {BasiCheckComponent} from '../../modal/basi-check/basi-check.component';
import {JhiMainComponent} from '../../layouts';
import {FormBuilder} from '@angular/forms';
import {color} from '../../app.constants';
import {PauseComponent} from '../../modal/pause/pause.component';
import {TreeNodeInterface} from '../basic/basic.component';
import {Router} from '@angular/router';
import {DiscoveryComponent} from '../../modal/discovery/discovery.component';
import {StrategyComponent} from '../../modal/strategy/strategy.component';
@Component({
selector: 'smart-template',
templateUrl: './template.component.html',
styles: []
})
export class TemplateComponent implements OnInit {
//组件
@ViewChild('basicEdit') basicEdit: BasicEditComponent;
@ViewChild('smartCheck') smartCheck: BasiCheckComponent;
@ViewChild('smartCreateGroup') smartCreateGroup: CreateGroupComponent;
@ViewChild('smartPause') smartPause: PauseComponent;
@ViewChild('smartAlarmModal') smartAlarmModal: AlarmModalComponent;
@ViewChild('smartDiscovery') smartDiscovery: DiscoveryComponent;
@ViewChild('smartStrategy') smartStrategy: StrategyComponent;
color = color;
//表格信息
loading = false;
frontPagination = true;
selectedValue;
isCheck = false;
allChecked = false;
interfaceList: any[];
hostId;
isKey = false;
keyList: any[];
keyType = '1';
//批量删除list
batchDelList = [];
//设备状态
red;
yellow;
green;
gray;
//搜索
searchStatus = false;
searchName;
searchData;
constructor(private fb: FormBuilder, private overAllSer: OverAllService, private router: Router,
private modalService: NzModalService, private message: NzMessageService, private main: JhiMainComponent) {
}
dataSet: any[];
expandDataCache = {};
collapse(array: TreeNodeInterface[], data: TreeNodeInterface, $event: boolean): void {
if ($event === false) {
if (data.children) {
data.children.forEach(d => {
const target = array.find(a => a.host === d.host);
target.expand = false;
this.collapse(array, target, false);
});
} else {
return;
}
}
}
showInFullScreen() {
this.main.fullScreen();
}
convertTreeToList(root: any, groupId: string, index): TreeNodeInterface[] {
const stack = [];
const array = [];
const hashMap = {};
if (root.host == index) {
stack.push({...root, level: 0, expand: true});
} else {
stack.push({...root, level: 0, expand: false});
}
while (stack.length !== 0) {
const node = stack.pop();
this.visitNode(node, hashMap, array);
if (node.list) {
for (let i = node.list.length - 1; i >= 0; i--) {
stack.push({...node.list[i], level: node.level + 1, expand: true, parent: node, gId: groupId, checked: false});
}
}
}
return array;
}
visitNode(node: TreeNodeInterface, hashMap: object, array: TreeNodeInterface[]): void {
if (!hashMap[node.host]) {
hashMap[node.host] = true;
array.push(node);
}
}
ngOnInit(): void {
this.select();
}
//搜索
search(status) {
this.loading = true;
this.searchStatus = true;
this.frontPagination = false;
const data = {
search: {
status: status,
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;
}
//添加资源
showBasicEditModal() {
this.basicEdit.showModal();
}
//编辑资源 name--分组名称,gId-当前分组的id
editBasicModal(item) {
this.basicEdit.editModal(item.hostid, item.name, item.gId);
}
//添加监测点
showBasicCheckModal(hostid, host) {
this.smartCheck.showAddModal(hostid, host);
}
//列表
findList() {
const data = {};
this.overAllSer.find(data).subscribe(
(res) => {
if (res.data) {
this.dataSet = res.data;
} else {
this.message.info(res.errMsg);
}
}
);
}
//选择分组
select() {
this.loading = true;
this.searchStatus = false;
this.frontPagination = true;
if (this.selectedValue == 'group') {
this.overAllSer.getgroups({}).subscribe(
(res) => {
this.loading = false;
if (res.errCode == 10000) {
this.dataSet = res.data;
// this.dataSet = this.dataSet.filter(d => d.list); //过滤无list的
for (let i = 0; i < this.dataSet.length; i++) {
this.dataSet[i].host = i;
this.dataSet[i].checked = false;
}
this.toTree(null);
} else {
this.message.info(res.errMsg);
}
}
);
} else if (this.selectedValue == 'type') {
this.overAllSer.findType().subscribe(
(res) => {
this.loading = false;
if (res.errCode == 10000) {
this.dataSet = res.data;
// this.dataSet = this.dataSet.filter(d => d.list); //过滤无list的
for (let i = 0; i < this.dataSet.length; i++) {
this.dataSet[i].host = i;
this.dataSet[i].checked = false;
}
this.toTree(null);
} else {
this.message.info(res.errMsg);
}
}
);
} else if (this.selectedValue == 'all') {
this.findList();
}
}
toTree(index) {
this.dataSet.forEach(item => {
this.expandDataCache[item.host] = this.convertTreeToList(item, item.id, index);
});
}
//删除单个资源
showDeleteConfirm(item) {
this.modalService.confirm({
nzTitle: '删除',
nzContent: '<b style="color: red;">确认删除该资源吗?</b>',
nzOkText: '确定',
nzOkType: 'danger',
nzOnOk: () => {
const data = {
hostids: []
};
data.hostids.push(item.hostid);
this.overAllSer.deleteHostPost(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.message.info('删除成功');
this.select();
} else {
this.message.info(res.errMsg);
}
}
);
},
nzCancelText: '取消',
nzOnCancel: () => console.log('Cancel')
});
}
//批量删除资源
batchDeleteConfirm() {
if (this.batchDelList.length == 0) {
this.message.info('请选择需要删除的设备');
return false;
}
this.modalService.confirm({
nzTitle: '删除',
nzContent: '<b style="color: red;">确认要删除所选设备吗?</b>',
nzOkText: '确定',
nzOkType: 'danger',
nzOnOk: () => {
const data = {
hostids: this.batchDelList
};
this.overAllSer.deleteHostPost(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.message.info('删除成功');
this.batchDelList = [];
this.select();
} else {
this.message.info(res.errMsg);
}
}
);
},
nzCancelText: '取消',
nzOnCancel: () => console.log('Cancel')
});
}
//添加分组
showGroupModal() {
this.smartCreateGroup.showModal('添加分组');
}
//编辑分组
updateGroup(item) {
this.smartCreateGroup.showEditModal('修改分组', item);
}
//删除分组
showDeleteGroupConfirm(item) {
this.modalService.confirm({
nzTitle: '删除',
nzContent: '<b style="color: red;">确认删除该分组吗?</b>',
nzOkText: '确定',
nzOkType: 'danger',
nzOnOk: () => {
const data = {groupid: []};
data.groupid.push(item.groupid);
this.overAllSer.deleteGroup(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.message.info('删除成功');
this.select();
} else {
this.message.info(res.errMsg);
}
}
);
},
nzCancelText: '取消',
nzOnCancel: () => console.log('Cancel')
});
}
//添加告警
showAlarm() {
this.smartAlarmModal.showAddModal('添加告警');
}
handleOk(e) {
this.select();
}
//获取下级list
getChildren(item) {
if (item.list) {
if (item.expand) {
item.expand = false;
} else {
item.expand = true;
}
return false;
}
this.loading = true;
const data = {
'groupids': [item.groupid],
'hostExtend': {
'superiorHostid': null
}
};
this.overAllSer.findDetail(data).subscribe(
(res) => {
if (res.data) {
this.dataSet[item.host].list = res.data;
this.toTree(item.host);
} else {
this.message.info('该分组下无资源');
}
this.loading = false;
}
);
}
//根据设备类型查询主机资源
getChildrenType(item) {
if (item.list) {
if (item.expand) {
item.expand = false;
} else {
item.expand = true;
}
return false;
}
this.loading = true;
const data = {
type: item.equipmentTypeId
};
this.overAllSer.findHostByType(data).subscribe(
(res) => {
if (res.data) {
this.dataSet[item.host].list = res.data;
this.toTree(item.host);
} else {
this.message.info('该分组下无资源');
}
this.loading = false;
}
);
}
//查看详情
goDetail(item) {
let type = 0;
if (item.hostExtend) {
if (item.hostExtend.equipmentType == '交换机') {
type = 1;
}
}
this.router.navigate(['app/main/basic-detail'], {
queryParams: {
hostId: item.hostid,
type: type,
name: item.name,
hostName: item.host
}
});
}
//临时暂停
showTempStop(item) {
this.smartPause.showModal(item.hostid, '基础资源');
}
//选择
selectChecked(event, item) {
if (event) {
if (item.hostid) {
this.batchDelList.push(item.hostid);
}
} else {
if (item.hostid) {
const index = this.batchDelList.indexOf(item.hostid);
this.batchDelList.splice(index, 1);
}
}
}
//开启or停止监控
openHost(item) {
this.modalService.confirm({
nzTitle: '监控',
nzContent: '确定开启监控设备' + item.name + '?',
nzOkText: '确定',
nzCancelText: '取消',
nzOnOk: () => {
let params1 = 0;
if (item.status == 0) {
params1 = 1;
}
const params2 = item.hostid;
this.overAllSer.stopOrOpen(params1, params2).subscribe(
(res) => {
if (res.errCode == 10000) {
this.message.info('修改成功');
this.select();
} else {
this.message.info(res.errMsg);
}
}
);
},
nzOnCancel: () => console.log('Cancel')
});
}
//批量开启or停止监控
openBatchHost(status, operation) {
if (this.batchDelList.length == 0) {
this.message.info('请选择需要' + operation + '的设备');
return false;
}
this.modalService.confirm({
nzTitle: '监控',
nzContent: '确定批量' + operation + '监控设备?',
nzOkText: '确定',
nzCancelText: '取消',
nzOnOk: () => {
const data = {
status: status,
hostids: this.batchDelList
};
this.overAllSer.batchStopOrOpen(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.message.info('修改成功');
this.batchDelList = [];
this.select();
} else {
this.message.info(res.errMsg);
}
}
);
},
nzOnCancel: () => console.log('Cancel')
});
}
//资产页面
goTOInventory(id) {
this.router.navigate(['app/main/assetsDetail'], {
queryParams: {
invertoryId: id
}
});
}
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
<style type="text/css">
.st0{fill:#BDBCBC;}
.st1{fill:none;}
.st2{fill:#93C90E;}
.st3{fill:#74A300;}
.st4{fill:#00A9E5;}
.st5{fill:#0078A0;}
.st6{fill:#353535;}
.st7{fill:#231F20;}
.st8{fill:#00BFB3;}
.st9{fill:#019B8F;}
.st10{fill:#F9B110;}
.st11{fill:#FED10A;}
.st12{fill:#3EBEB0;}
.st13{fill:#F04E98;}
.st14{fill:#0279A0;}
.st15{fill:#14A7DF;}
.st16{fill:#FFFFFF;}
.st17{fill:#868686;}
.st18{fill:#8C8C8C;}
.st19{opacity:0.3;fill:#231F20;enable-background:new ;}
.st20{fill:#BCBBBC;}
</style>
<g id="Layer_1">
</g>
<g id="XPACK_FULL">
<g>
<path class="st7" d="M15,15c0-2.9-0.8-4.4-0.9-4.5H2c-0.5,1.4-0.7,2.9-0.7,4.5s0.2,3.1,0.7,4.5h12.1C14.6,18.8,15,17.9,15,15z"/>
<g transform="translate(6.375 21)">
<path class="st8" d="M16.9,0H7.1c-0.3,0.7-0.6,1.3-1,1.9c-0.6,0.9-1.2,1.8-2,2.5C3.9,4.7,2.2,6.1,1.6,6.5C4,8.1,6.9,9,10,9
c5.2,0,9.8-2.7,12.5-6.7C21,0.9,19.1,0,16.9,0"/>
</g>
<path class="st9" d="M13.5,21h-11c1.2,2.7,3.1,4.9,5.5,6.5C8,27.5,12.2,25,13.5,21z"/>
<path class="st10" d="M10.5,4.5C10.3,4.3,10,4,9.8,3.8C9.3,3.3,8.7,2.9,8.1,2.5C5.6,4.1,3.7,6.3,2.6,9h11c-0.3-0.7-0.6-1.3-1-1.9
C12,6.2,11.3,5.3,10.5,4.5"/>
<path class="st11" d="M16.3,0.1c-3,0-5.9,0.8-8.3,2.4c0.6,0.4,1.2,0.9,1.7,1.4c0.3,0.2,0.6,0.5,0.8,0.7c0.8,0.8,1.4,1.6,2,2.5
c0.4,0.6,0.7,1.3,1,1.9h9.8c2.1,0,4.1-0.9,5.5-2.3C26.1,2.8,21.5,0.1,16.3,0.1"/>
<path class="st4" d="M22,10.5h-7.9c0,0,0.8,1.7,0.8,4.5s-0.8,4.5-0.8,4.5H22c2.5,0,4.5-2,4.5-4.5C26.4,12.5,24.4,10.5,22,10.5"/>
</g>
<rect x="0" y="0" class="st1" width="30" height="30"/>
</g>
</svg>
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