From ee80382f7574fa459808da8e7f9ad410b5e8de22 Mon Sep 17 00:00:00 2001 From: zhangab Date: Mon, 5 Nov 2018 16:29:07 +0800 Subject: Fix VNF Alarm Query Bugs Change-Id: I70c8d6761bd940b1e07983ef123b98a1cd79dccd Issue-ID: USECASEUI-166 Signed-off-by: zhangab --- .../src/app/alarm/alarm.component.html | 28 +- usecaseui-portal/src/app/alarm/alarm.component.ts | 331 ++++++++++++--------- .../app/components/details/details.component.html | 48 +-- .../app/components/details/details.component.ts | 39 ++- usecaseui-portal/src/app/myhttp.service.ts | 59 ++-- 5 files changed, 282 insertions(+), 223 deletions(-) (limited to 'usecaseui-portal') diff --git a/usecaseui-portal/src/app/alarm/alarm.component.html b/usecaseui-portal/src/app/alarm/alarm.component.html index 378cebc2..7fbbc039 100644 --- a/usecaseui-portal/src/app/alarm/alarm.component.html +++ b/usecaseui-portal/src/app/alarm/alarm.component.html @@ -51,24 +51,32 @@ Report Time: - - +
    -
  • All

    {{alarmList.all }}

    • -
  • Closed

    {{alarmList.closed }}

    • -
  • Active

    {{alarmList.activeNum }}

    • +
  • +
    All
    +

    {{alarmList.all }}

    +
    • +
  • +
    Closed
    +

    {{alarmList.closed }}

    +
    • +
  • +
    Active
    +

    {{alarmList.activeNum }}

    +

Alarm Chart

- - - + + +
@@ -96,12 +104,12 @@ {{item.specificProblem}} {{item.sequence}} {{item.status}} - +
- +
\ No newline at end of file diff --git a/usecaseui-portal/src/app/alarm/alarm.component.ts b/usecaseui-portal/src/app/alarm/alarm.component.ts index d4372113..3f563b6e 100644 --- a/usecaseui-portal/src/app/alarm/alarm.component.ts +++ b/usecaseui-portal/src/app/alarm/alarm.component.ts @@ -13,108 +13,188 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core'; +import { Component, OnInit, Input, Output, EventEmitter, HostBinding, Pipe, PipeTransform } from '@angular/core'; import { MyhttpService } from '../myhttp.service'; -import * as addDays from 'date-fns/add_days'; import { showHideAnimate, slideToRight } from '../animates'; - +import { DatePipe } from "@angular/common" @Component({ selector: 'app-alarm', templateUrl: './alarm.component.html', styleUrls: ['./alarm.component.less'], animations: [ showHideAnimate, slideToRight - ] + ], + providers: [DatePipe] }) export class AlarmComponent implements OnInit { size = 'day'; @HostBinding('@routerAnimate') routerAnimateState; //Routing animation - public currentPage:number=1; - public pageSize:number=5; - public sourceName:string=''; - public priority:string =''; - public startTime:string =''; - public endTime:string =''; - public vfStatus:string =''; + public currentPage: number = 1; + public pageSize: number = 5; + public sourceName: string = ''; + public priority: string = ''; + public startTime: string = ''; + public endTime: string = ''; + public vfStatus: string = ''; + public sourceNameList:Array =['---auto---']; list: any; - sourcenames:any; + sourcenames: any; constructor( - private myhttp:MyhttpService) { } - ngOnInit() { - // this.getAlarmFormData(); - // this. getSourceNames(); - // this.getstatuscount(); - } + private datePipe: DatePipe, + private myhttp: MyhttpService) { } + ngOnInit() { + this.getAlarmFormData(); + this.getSourceNames(); + // this.getstatuscount(); + } // Filter box - sourceNameList = []; - sourceNameSelected = this.sourceNameList; + sourceNameSelected = this.sourceNameList[0]; - priorityList = ['---auto---','Critical','Major','Minor','Warning']; + priorityList = ['---auto---', 'Critical', 'Major', 'Minor', 'Warning']; prioritySelected = this.priorityList[0]; - - statusList = ['---auto---','active','Close']; + + statusList = ['---auto---', 'active', 'Close']; statusSelected = this.statusList[0]; - - choseSourceName(item){ - console.log(item,'item1'); + + choseSourceName(item) { + if(item == "---auto---"){ + this.sourceName = ''; + }else{ + this.sourceName = item; + } this.sourceNameSelected = item; - return this.sourceName = item; + } - chosePriority(item){ - console.log(item); + chosePriority(item) { this.prioritySelected = item; - return this.priority = item; + if(item == "---auto---"){ + this.priority = ''; + }else{ + this.priority = item; + } } - choseStatus(item){ - console.log(item); + choseStatus(item) { this.statusSelected = item; - return this.vfStatus = item; + if(item == "---auto---"){ + this.vfStatus = ''; + }else{ + this.vfStatus = item; + } + } + getSourceNames() { + this.myhttp.getSourceNames().subscribe((data) => { + for(let i=0;i{ - // this.sourceNameList=data; - // console.log(data,'datass'); - // }) - // } // Date screening - dateRange = [ addDays(new Date(), -30), new Date() ]; + dateRange = [(new Date(), -30), new Date()]; onChange(result: Date): void { - console.log('onChange: ', result); + this.startTime = this.datePipe.transform(result[0], 'yyyy-MM-dd-HH:mm:ss'); + this.endTime = this.datePipe.transform(result[1], 'yyyy-MM-dd-HH:mm:ss'); } - sort(e){ + + sort(e) { } // total alarmList = { - all:200, - closed:0, - activeNum:0 + all: 200, + closed: 0, + activeNum: 0 } // total data - // getstatuscount(){ - // this.myhttp.getstatuscount().subscribe((data)=>{ - // this.alarmList.activeNum = data[0]; - // this.alarmList.closed = data[1]; - - // }) - // } + getstatuscount(){ + this.myhttp.getstatuscount().subscribe((data)=>{ + this.alarmList.activeNum = data[0]; + this.alarmList.closed = data[1]; + }) + } + getAlarmFormData() { + + this.myhttp.getAlarmFormData(this.currentPage, this.pageSize, this.sourceName, this.priority, this.startTime, this.endTime, this.vfStatus).subscribe((data) => { + this.list = data.alarms; + }) + this.getAlarmChartData(event); + } + getAlarmChartData(event) { + let paramsObj = { + alarmSourceName: this.sourceName, + startTime: this.startTime, + endTime: this.endTime + } + this.myhttp.getHomePerformanceChartData(paramsObj) + .subscribe((data) => { + this.alarmChartData = { + series: [ + { data: data.CPU }, + { data: data.CPU }, + { data: data.Memory } + ] + } + }, (err) => { + console.log(err); + }) + } + // day alarmchartdata + day() { + let paramsObj = { + alarmSourceName: this.sourceName, + day:"day" + } + this.myhttp.getHomePerformanceChartData(paramsObj) + .subscribe((data) => { + this.alarmChartData = { + series: [ + { data: data.CPU }, + { data: data.CPU }, + { data: data.Memory } + ] + } + }, (err) => { + console.log(err); + }) + } + month() { + let paramsObj = { + alarmSourceName: this.sourceName, + day:"month" + } + this.myhttp.getHomePerformanceChartData(paramsObj) + .subscribe((data) => { + this.alarmChartData = { + series: [ + { data: data.CPU }, + { data: data.CPU }, + { data: data.Memory } + ] + } + }, (err) => { + console.log(err); + }) + } //Line chart alarmShow = false; - alarmChartData:Object; - alarmChartInit:Object = { - height:380, - option:{ + alarmChartData: Object; + alarmChartInit: Object = { + height: 380, + option: { legend: { bottom: '0px', data: ['All', 'Active', 'Closed'] }, + tooltip: { + trigger: 'axis', + }, dataZoom: [ { type: 'slider', @@ -124,91 +204,78 @@ export class AlarmComponent implements OnInit { height: 10, end: 40 } - ], + ], series: [ { - name: 'All', - type: 'line', - smooth: true, - showSymbol: false, - areaStyle: { - opacity: 0.8 - }, - //timeframe_one - data: [40, 45, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 45, 76, 88, 56, 33, 76, 45, 65,38, 52, 64, 58, 69, 87, 76, 33, 64, 87,40, 45, 38, 52, 64, 58, 69, 87, 76,40, 45, 38, 52, 64, 58, 69, 87, 76], - itemStyle: { - color: "#526b75" - }, - lineStyle: { - width: 1, - opacity: 0.5 - } + name: 'All', + type: 'line', + smooth: true, + showSymbol: false, + areaStyle: { + opacity: 0.8 + }, + //timeframe_one + data: [40, 45, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 45, 76, 88, 56, 33, 76, 45, 65, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 40, 45, 38, 52, 64, 58, 69, 87, 76, 40, 45, 38, 52, 64, 58, 69, 87, 76], + itemStyle: { + color: "#526b75" + }, + lineStyle: { + width: 1, + opacity: 0.5 + } }, { - name: 'Active', - type: 'line', - smooth: true, - showSymbol: false, - areaStyle: { - opacity: 0.8 - }, - //timeframe_two - data: [32, 43, 23, 45, 63, 24, 54, 22, 32, 42, 42, 22, 23, 43, 32, 34, 42, 33, 42, 12,32, 43, 23, 45, 63, 24, 54, 22, 32, 42, 42, 22, 23, 43, 32, 34, 42, 33, 42, 12,32, 43, 23, 45, 63, 24, 54, 22], - itemStyle: { - color: "#fb6e6e" - }, - lineStyle: { - width: 1, - opacity: 0.5 - } + name: 'Active', + type: 'line', + smooth: true,//将图变得平缓 + showSymbol: false, + areaStyle: { + opacity: 0.8 + }, + //timeframe_two + data: [32, 43, 23, 45, 63, 24, 54, 22, 32, 42, 42, 22, 23, 43, 32, 34, 42, 33, 42, 12, 32, 43, 23, 45, 63, 24, 54, 22, 32, 42, 42, 22, 23, 43, 32, 34, 42, 33, 42, 12, 32, 43, 23, 45, 63, 24, 54, 22], + itemStyle: { + color: "#fb6e6e" + }, + lineStyle: { + width: 1, + opacity: 0.5 + } }, { - name: 'Closed', - type: 'line', - smooth: true,// - showSymbol: false, - areaStyle: { - opacity: 0.8 - }, - //timeframe_two - data: [12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5,12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5,12, 23, 13, 25, 33, 14, 34, 12, 125], - itemStyle: { - color: "#3fa8eb" - }, - lineStyle: { - width: 1, - opacity: 0.5 - } + name: 'Closed', + type: 'line', + smooth: true,// + showSymbol: false, + areaStyle: { + opacity: 0.8 + }, + //timeframe_two + data: [12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5, 12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5, 12, 23, 13, 25, 33, 14, 34, 12, 125], + itemStyle: { + color: "#3fa8eb" + }, + lineStyle: { + width: 1, + opacity: 0.5 + } } ] } }; - getAlarmChartData(){ - let paramsObj = { - alarmSourceName:this.sourceNameSelected - } - this.myhttp.getHomePerformanceChartData(paramsObj) - .subscribe((data)=>{ - this.alarmChartData = { - series:[ - {data:data.CPU}, - {data:data.CPU}, - {data:data.Memory} - ] - } - },(err)=>{ - console.log(err); - }) - } + //Detail page title display detailshow = false; // Show hidden animation state = "show"; state2 = "hide"; - detailShow() { + detailId: number; + detailShow(item) { this.state = 'hide'; this.state2 = 'show'; this.detailshow = true; + // console.log(item); + this.detailId = item.eventId; } detailHide() { this.state = 'show'; @@ -216,22 +283,4 @@ export class AlarmComponent implements OnInit { this.detailshow = false; } - - - getSelects:Object = { - countAll:0, - countClose:0, - countActive:0, - eventNameList:[], - sourceIdList:[], - reportingEntityNameList:[], - sourceNameList:[], -}; - // getAlarmFormData(){ - // this.myhttp.getAlarmFormData(this.currentPage,this.pageSize,this.sourceName,this.priority,this.startTime,this.endTime,this.vfStatus).subscribe((data)=>{ - // this.list = data.alarms; - // // console.log(data,'data'); - // }) - // } - } diff --git a/usecaseui-portal/src/app/components/details/details.component.html b/usecaseui-portal/src/app/components/details/details.component.html index b5c576c7..1f431760 100644 --- a/usecaseui-portal/src/app/components/details/details.component.html +++ b/usecaseui-portal/src/app/components/details/details.component.html @@ -19,30 +19,30 @@
-

Version :

-

Domain :

-

Event Name : Fault_IMSSBC_Backup MPU is down

-

Event Id : 15105642034

-

EventType :

-

NfcNamingCode :

-

NfNamingCode :

-

SourceName :

-

SourceId :

-

ReportingEntityName :

-

ReportingEntityId :

+

Version :{{datailheaderdata.version}}

+

Domain :{{datailheaderdata.domain}}

+

Event Name :{{datailheaderdata.eventName}}

+

Event Id :{{datailheaderdata.eventId}}

+

EventType :{{datailheaderdata.eventType}}

+

NfcNamingCode :{{datailheaderdata.nfcNamingCode}}

+

NfNamingCode :{{datailheaderdata.nfNamingCode}}

+

SourceName :{{datailheaderdata.sourceName}}

+

SourceId :{{datailheaderdata.sourceId}}

+

ReportingEntityName :{{datailheaderdata.reportingEntityName}}

+

ReportingEntityId :{{datailheaderdata.reportingEntityId}}

-

Priority : Normal

-

ReportTime :

-

ClearTime :

-

FaultFieldsVersion :

-

Event Servrity :

-

EventSourceType :

-

EventCategory :

-

AlarmCondition :

-

SpecificProblem :

-

Status :

-

AlarmInterfaceA :

+

Priority :{{datailheaderdata.priority}}

+

ReportTime :{{datailheaderdata.reportTime}}

+

ClearTime :{{datailheaderdata.clearTime}}

+

FaultFieldsVersion :{{datailheaderdata.faultFieldsVersion}}

+

Event Servrity :{{datailheaderdata.eventServrity}}

+

EventSourceType :{{datailheaderdata.eventSourceType}}

+

EventCategory :{{datailheaderdata.eventCategory}}

+

AlarmCondition :{{datailheaderdata.alarmCondition}}

+

SpecificProblem :{{datailheaderdata.specificProblem}}

+

Status : {{datailheaderdata.status}}

+

AlarmInterfaceA :{{datailheaderdata.alarmInterfaceA}}

@@ -50,7 +50,7 @@

DETAIL INFORMATION

- + Item Name @@ -58,7 +58,7 @@ - + {{data.name}} {{data.value}} diff --git a/usecaseui-portal/src/app/components/details/details.component.ts b/usecaseui-portal/src/app/components/details/details.component.ts index f9e6474b..4965ed70 100644 --- a/usecaseui-portal/src/app/components/details/details.component.ts +++ b/usecaseui-portal/src/app/components/details/details.component.ts @@ -1,5 +1,21 @@ +/* + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ import { Component, OnInit, Input } from '@angular/core'; import { slideUpDown } from '../../animates'; +import { MyhttpService } from '../../myhttp.service'; @Component({ selector: 'app-details', @@ -9,25 +25,28 @@ import { slideUpDown } from '../../animates'; }) export class DetailsComponent implements OnInit { - constructor() { } + constructor(private myhttp:MyhttpService) { } ngOnInit() { } ngOnChanges(changes){ - console.log(changes); + this.getAlarmDetailData(this.detailId); + } + + datailheaderdata: any = {}; + dataillistdata: any = []; + getAlarmDetailData(id){ + this.myhttp.getAlarmDetailData(id).subscribe((data)=>{ + // console.log(data) + this.datailheaderdata = data.alarmsHeader; + this.dataillistdata = data.list; + }) } // 详情显示 moredetailShow = false; @Input() detailId; - detailData = [ - {name:"DNS.AttDnsQuery",value:"0"}, - {name:"DNS.SuccDnsQuery",value:"0"}, - {name:"DNS.SuccDnsQuery",value:"0"}, - {name:"DNS.SuccDnsQuery",value:"0"}, - {name:"DNS.SuccDnsQuery",value:"0"}, - {name:"sssssss",value:"1111"}, - ] + state = 'up' slideUpDown(){ this.moredetailShow = !this.moredetailShow; diff --git a/usecaseui-portal/src/app/myhttp.service.ts b/usecaseui-portal/src/app/myhttp.service.ts index 5cdc67f6..53a25cec 100644 --- a/usecaseui-portal/src/app/myhttp.service.ts +++ b/usecaseui-portal/src/app/myhttp.service.ts @@ -1,3 +1,18 @@ +/* + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http'; import { Observable } from 'rxjs/Observable'; @@ -84,9 +99,6 @@ export class MyhttpService { pnfDetail:this.baseUrl + "/uui-sotn/getPnfInfo/", connectivity:this.baseUrl + "/uui-sotn/getConnectivityInfo/", vpnBinding:this.baseUrl + "/uui-sotn/getPinterfaceByVpnId/", - alarmFormData:this.baseUrl + "/alarm/{currentPage}/{pageSize}/{sourceName}/{priority}/{startTime}/{endTime}/{vfStatus}", - alarmFormDetailData:this.baseUrl + "/alarm/getAlarmsHeaderDetail/{id}", - alarmsourcename:'/alarm/getSourceNames/' } // home @@ -280,49 +292,20 @@ export class MyhttpService { return formattime; } - // Alarm table data - // getAlarmFormData(currentPage:number,pageSize:number,sourceName?:string,priority?:string,startTime?:string,endTime?:string,vfStatus?:string){ - // return this.http.post(this.url.alarmFormData,{ - // currentPage:currentPage, - // pageSize:pageSize, - // sourceName:sourceName, - // priority:priority, - // startTime:startTime, - // endTime:endTime , - // vfStatus:vfStatus - // }); - // } + getAlarmFormData(currentPage:number,pageSize:number,sourceName?:string,priority?:string,startTime?:string,endTime?:string,vfStatus?:string){ + return this.http.get('/api/usecaseui-server/v1/alarm/'+'/'+currentPage+'/'+pageSize+'/'+sourceName+'/'+priority+'/'+startTime+'/'+endTime+'/'+vfStatus); + } getSourceNames(){ - return this.http.get('http://192.168.43.12:8082/alarm/getSourceNames/'); + return this.http.get('/api/usecaseui-server/v1/alarm/getSourceNames/'); } getstatuscount(){ - let httpurl = 'http://192.168.43.12:8082/alarm/statusCount'; + let httpurl = '/api/usecaseui-server/v1/alarm/statusCount'; return this.http.get(httpurl); } - // getSourceNames(){ - // let httpurl = this.baseUrl + "/SourceName.json?"; - // console.log(httpurl); - // return this.http.get(httpurl); - // } - - // getAlarmFormData(currentPage:number,pageSize:number,sourceName?:string,priority?:string,startTime?:string,endTime?:string,vfStatus?:string){ - // return this.http.get(this.url.alarmFormData+'?currentPage='+currentPage+'?pageSize='+pageSize+'?sourceName='+sourceName+'?priority='+priority+'?startTime='+startTime+'?endTime='+endTime+'?vfStatus='+vfStatus); - // } - - getAlarmFormData(currentPage:number,pageSize:number,sourceName?:string,priority?:string,startTime?:string,endTime?:string,vfStatus?:string){ - return this.http.get('http://192.168.43.12:8082/alarm/'+'/'+currentPage+'/'+pageSize+'/'+sourceName+'/'+priority+'/'+startTime+'/'+endTime+'/'+vfStatus); - } - - // Alarm Detail page data - // getAlarmDetailData(id){ - // let httpurl = this.baseUrl + "/alarmFormDetailData.json?id/" +id; - // console.log(httpurl) - // return this.http.get(httpurl); - // } getAlarmDetailData(id){ - let httpurl = 'http://192.168.43.12:8082/alarm/getAlarmsHeaderDetail/'+id; + let httpurl = '/api/usecaseui-server/v1/alarm/getAlarmsHeaderDetail/'+id; console.log(httpurl) return this.http.get(httpurl); } -- cgit 1.2.3-korg