重构 jtopo

.idea/misc.xml

 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <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" />
   </component>
 </project>
\ No newline at end of file

src/main/webapp/app/analysis/resource-alarm/resource-alarm.component.ts

@@ -104,7 +104,12 @@ export class ResourceAlarmComponent implements OnInit {
                 })
             },
             yAxis: {
-                type: 'value'
+                type: 'value',
+                axisLabel: {
+                    show: true,
+                    interval: 'auto',
+                    formatter: '{value} 个'
+                },
             },
             series: [{
                 data: data.map(e=>{
@@ -168,7 +173,12 @@ export class ResourceAlarmComponent implements OnInit {
             ],
             yAxis: [
                 {
-                    type: 'value'
+                    type: 'value',
+                    axisLabel: {
+                        show: true,
+                        interval: 'auto',
+                        formatter: '{value} 个'
+                    },
                 }
             ],
             series: [

src/main/webapp/app/app.main.module.ts

@@ -98,6 +98,9 @@ import {LookRoleComponent} from './look-role/look-role.component';
 import {ThresholdComponent} from './modal/threshold/threshold.component';
 import {LineComponent} from './netTopology/model/line/line.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({
     imports: [
@@ -197,7 +200,10 @@ import {NodeComponent} from './netTopology/model/node/node.component';
         LookRoleComponent,
         ThresholdComponent,
         LineComponent,
-        NodeComponent
+        NodeComponent,
+        TemplateComponent,
+        DiscoveryComponent,
+        StrategyComponent,
     ],
     providers:[
         OverAllService,

src/main/webapp/app/app.route.ts

@@ -32,6 +32,7 @@ import {OperationWorkComponent} from './analysis/operation-work/operation-work.c
 import {ResourceAlarmComponent} from './analysis/resource-alarm/resource-alarm.component';
 import {PararmsComponent} from './work/pararms/pararms.component';
 import {HomeComponent} from './home/home.component';
+import {TemplateComponent} from './overAll/template/template.component';
 
 export const route: Routes = [
     {path: '', component: JhiMainComponent,canActivate:[LoginGuard]},
@@ -71,6 +72,7 @@ export const route: Routes = [
                     {path: 'operationWork', component: OperationWorkComponent,data: { breadcrumb: '运维工作' },},
                     {path: 'resourceAlarm', component: ResourceAlarmComponent,data: { breadcrumb: '资源告警统计' },},
                     {path: 'params', component: PararmsComponent,data: { breadcrumb: '参数配置' },},
+                    {path: 'template', component: TemplateComponent,data: { breadcrumb: '模版配置' },},
                 ]
             },
         ]

src/main/webapp/app/blocks/interceptor/notification.interceptor.ts

@@ -11,6 +11,7 @@ export class NotificationInterceptor implements HttpInterceptor {
     // tslint:disable-next-line: no-unused-variable
     constructor(private injector: Injector) {
         setTimeout(() => this.alertService = injector.get(JhiAlertService));
+        console.log("2");
     }
 
     intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

src/main/webapp/app/modal/basic-edit/basic-edit.component.html

@@ -170,7 +170,7 @@
                                 <nz-form-item nzFlex>
                                     <nz-form-label [nzSpan]="6" nzFor="ipmi_username_edit">用户名称</nz-form-label>
                                     <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-item>
                             </div>
@@ -197,7 +197,7 @@
                                 <nz-form-item nzFlex>
                                     <nz-form-label [nzSpan]="6" nzFor="ipmi_password_edit">密码</nz-form-label>
                                     <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-item>
                             </div>

src/main/webapp/app/modal/discovery/discovery.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'smart-discovery',
+  templateUrl: './discovery.component.html',
+  styles: []
+})
+export class DiscoveryComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/main/webapp/app/modal/strategy/strategy.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'smart-strategy',
+  templateUrl: './strategy.component.html',
+  styles: []
+})
+export class StrategyComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/main/webapp/app/modal/threshold/threshold.component.ts

@@ -4,9 +4,9 @@ import {FormBuilder} from '@angular/forms';
 import {NzMessageService} from 'ng-zorro-antd';
 
 @Component({
-  selector: 'smart-threshold',
-  templateUrl: './threshold.component.html',
-  styles: []
+    selector: 'smart-threshold',
+    templateUrl: './threshold.component.html',
+    styles: []
 })
 export class ThresholdComponent implements OnInit {
     @Output() done = new EventEmitter<any>();
@@ -17,12 +17,8 @@ export class ThresholdComponent implements OnInit {
     hostName;   //主机name
     itemObj;   //监控项对象
     conditionType = 'commonly';
-    faultConditionList = [
-
-    ];   //故障阈值
-    conditionList = [
-
-    ];    //危险阈值
+    faultConditionList = [];   //故障阈值
+    conditionList = [];    //危险阈值
 
     triggerConditionId;
     triggerFaultConditionId;
@@ -32,26 +28,23 @@ export class ThresholdComponent implements OnInit {
         faultCondition: '',
         itemName: ''
     };
+
     constructor(private overAllSer: OverAllService, private fb: FormBuilder,
                 private message: NzMessageService) {
     }
 
-  ngOnInit() {
-  }
-
-  initForm(){
-      this.faultConditionList = [
-
-      ];   //危险阀值list
-      this.conditionList = [
+    ngOnInit() {
+    }
 
-      ];    //故障list
-      this.triggerObj = {
-          condition: '',
-          faultCondition: '',
-          itemName: ''
-      };
-  }
+    initForm() {
+        this.faultConditionList = [];   //危险阀值list
+        this.conditionList = [];    //故障list
+        this.triggerObj = {
+            condition: '',
+            faultCondition: '',
+            itemName: ''
+        };
+    }
 
     //危险add
     addFault() {
@@ -84,20 +77,20 @@ export class ThresholdComponent implements OnInit {
     }
 
     //新增
-    showAddModal(title,itemId,hostName) {
+    showAddModal(title, itemId, hostName) {
         this.title = title;
         this.itemId = itemId;
         this.isVisiable = true;
         this.hostName = hostName;
         this.overAllSer.findItemDetail(this.itemId).subscribe(
-            (res)=>{
+            (res) => {
                 this.itemObj = res.data[0];
             }
-        )
+        );
     }
 
     //编辑
-    showEditModal(title,itemId,hostId,hostName) {
+    showEditModal(title, itemId, hostId, hostName) {
         this.title = title;
         this.itemId = itemId;
         this.isVisiable = true;
@@ -168,32 +161,34 @@ export class ThresholdComponent implements OnInit {
         };
         if (this.conditionType == 'commonly') {   //常规
             this.conditionList.forEach(res => {
-                if(!res.and){
-                    res.and = "";
+                if (!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 => {
-                if(!res.and){
-                    res.and = "";
+                if (!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 {           //高级
             data.condition = this.triggerObj.condition;
             data.faultCondition = this.triggerObj.faultCondition;
         }
-        if(!this.checkFun()){
-            this.message.error("请输入阈值");
-            return false;
-        }
-        if(this.conditionList.length == 0 && this.faultConditionList.length == 0){
-            this.isVisiable = false;
-            this.initForm();
+        if (!this.checkFun()) {
+            this.message.error('请输入阈值');
             return false;
         }
+
         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 == '编辑阈值') {
             this.updateTrigger(data);
@@ -201,18 +196,18 @@ export class ThresholdComponent implements OnInit {
     }
 
     //校验是否填值
-    checkFun(){
+    checkFun() {
         let error = true;
-        this.conditionList.map(e=>{
-            if(e.value.length > 0){
-            }else{
+        this.conditionList.map(e => {
+            if (e.value.length > 0) {
+            } else {
                 error = false;
             }
         });
-        this.faultConditionList.map(e=>{
-            if(e.value.length > 0){
-                console.log(e.value)
-            }else{
+        this.faultConditionList.map(e => {
+            if (e.value.length > 0) {
+                console.log(e.value);
+            } else {
                 error = false;
             }
         });
@@ -232,6 +227,7 @@ export class ThresholdComponent implements OnInit {
                 if (response.errCode == 10000) {
                     this.message.success('创建阈值成功');
                     this.initForm();
+                    this.done.emit();
                     this.isVisiable = false;
                 } else {
                     this.message.error(response.errMsg);
@@ -258,6 +254,7 @@ export class ThresholdComponent implements OnInit {
             if (res.errCode == 10000) {
                 this.message.success('修改阈值成功');
                 this.initForm();
+                this.done.emit();
                 this.isVisiable = false;
             } else {
                 this.message.error(res.errMsg);
@@ -266,7 +263,7 @@ export class ThresholdComponent implements OnInit {
     }
 
     //取消
-    handleCheckCancel(){
+    handleCheckCancel() {
         this.isVisiable = false;
         this.initForm();
     }

src/main/webapp/app/netTopology/ne-topology/ne-topology.component.ts

@@ -277,6 +277,7 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
         console.log(topologyJson);
         const arr = topologyJson.childs[0].childs;
         const list = [];
+        const hostIds = [];
         arr.forEach(e=>{
             if(e.elementType == 'link' && e.itemId && e.itemId.length > 0){
                 const data = {
@@ -287,6 +288,45 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
                 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){   //有流量监控-->查询流量监控
             const data = {
                 "list" : list
@@ -301,6 +341,8 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
                             }
                         })
                     });
+                    console.log('进口流量')
+                    console.log(topologyJson)
                     editor.loadTopologyByJson(topologyJson, 'img/backimg.png');
                 }
             )

src/main/webapp/app/overAll/overAll.service.ts

@@ -314,4 +314,23 @@ export class OverAllService {
         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');
+    }
 }

src/main/webapp/content/javascript/jtopo/img/icon_elasticsearch.svg

-<?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>