diff options
author | 2018-11-06 11:56:50 +0800 | |
---|---|---|
committer | 2018-11-06 11:57:44 +0800 | |
commit | 3aa2334e116c1e7921ed46958ff5fed1c70fad7e (patch) | |
tree | 4987e4597df4f0ff6fd3d99d911a808ac9102995 /usecaseui-portal | |
parent | ee80382f7574fa459808da8e7f9ad410b5e8de22 (diff) |
Dashboard finish
Change-Id: Ib9a4b70260beb971b27e82288ef2546c43535569
Issue-ID: USECASEUI-164
Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>
Diffstat (limited to 'usecaseui-portal')
-rw-r--r-- | usecaseui-portal/src/app/alarm/alarm.component.ts | 39 | ||||
-rw-r--r-- | usecaseui-portal/src/app/components/charts/line/line.component.ts | 2 | ||||
-rw-r--r-- | usecaseui-portal/src/app/home/home.component.html | 16 | ||||
-rw-r--r-- | usecaseui-portal/src/app/home/home.component.ts | 201 | ||||
-rw-r--r-- | usecaseui-portal/src/app/myhttp.service.ts | 71 |
5 files changed, 177 insertions, 152 deletions
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.ts b/usecaseui-portal/src/app/alarm/alarm.component.ts index 3f563b6e..58c75e7b 100644 --- a/usecaseui-portal/src/app/alarm/alarm.component.ts +++ b/usecaseui-portal/src/app/alarm/alarm.component.ts @@ -132,13 +132,16 @@ export class AlarmComponent implements OnInit { startTime: this.startTime, endTime: this.endTime } - this.myhttp.getHomePerformanceChartData(paramsObj) + this.myhttp.getHomeAlarmChartData(paramsObj) .subscribe((data) => { this.alarmChartData = { - series: [ - { data: data.CPU }, - { data: data.CPU }, - { data: data.Memory } + xAxis:{ + data:data.dataList + }, + series:[ + {data:data.allList}, + {data:data.ActiveList}, + {data:data.closedList} ] } }, (err) => { @@ -151,13 +154,16 @@ export class AlarmComponent implements OnInit { alarmSourceName: this.sourceName, day:"day" } - this.myhttp.getHomePerformanceChartData(paramsObj) + this.myhttp.getHomeAlarmChartData(paramsObj) .subscribe((data) => { this.alarmChartData = { - series: [ - { data: data.CPU }, - { data: data.CPU }, - { data: data.Memory } + xAxis:{ + data:data.dataList + }, + series:[ + {data:data.allList}, + {data:data.ActiveList}, + {data:data.closedList} ] } }, (err) => { @@ -169,13 +175,16 @@ export class AlarmComponent implements OnInit { alarmSourceName: this.sourceName, day:"month" } - this.myhttp.getHomePerformanceChartData(paramsObj) + this.myhttp.getHomeAlarmChartData(paramsObj) .subscribe((data) => { this.alarmChartData = { - series: [ - { data: data.CPU }, - { data: data.CPU }, - { data: data.Memory } + xAxis:{ + data:data.dataList + }, + series:[ + {data:data.allList}, + {data:data.ActiveList}, + {data:data.closedList} ] } }, (err) => { diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.ts b/usecaseui-portal/src/app/components/charts/line/line.component.ts index fa9c0367..fde63ed6 100644 --- a/usecaseui-portal/src/app/components/charts/line/line.component.ts +++ b/usecaseui-portal/src/app/components/charts/line/line.component.ts @@ -39,7 +39,7 @@ export class LineComponent implements OnInit { axisLine:{ show: false }, - data: ['01','02','04','06','08','10','12','14','16','18','20','22','24'] + data: this.initData.option.xAxis.data }, yAxis: { axisTick: { diff --git a/usecaseui-portal/src/app/home/home.component.html b/usecaseui-portal/src/app/home/home.component.html index b2fa5eb4..c93d3f76 100644 --- a/usecaseui-portal/src/app/home/home.component.html +++ b/usecaseui-portal/src/app/home/home.component.html @@ -29,14 +29,14 @@ <div class="poerformance"> <h4>{{"PERFORMANCE" | translate}}</h4> <div class="pfVnf"> - <h3 class="pfVnfNum">126</h3> + <h3 class="pfVnfNum">{{performanceVnfNum}}</h3> <p>Performance VNF</p> - <img src="../../assets/images/VNF.png" alt="VNF"> + <img src="./assets/images/VNF.png" alt="VNF"> </div> <div class="pfVmPm"> - <h3 class="pfVmPmNum">286</h3> + <h3 class="pfVmPmNum">{{performanceVmNum}}</h3> <p>Performance VM/PM</p> - <img src="../../assets/images/VM.png" alt="VM/PM"> + <img src="./assets/images/VM.png" alt="VM/PM"> </div> </div> <div class="alarm"> @@ -46,16 +46,16 @@ </div> <div class="rb-content"> - <h4>{{"VM Performance" | translate}}</h4> + <h4>{{"Alarm" | translate}}</h4> <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomRight'"> - <button nz-button nz-dropdown><span>{{vmPerformanceNameSelected}}</span> <i class="anticon anticon-down"></i></button> + <button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button> <ul nz-menu> - <li nz-menu-item (click)="vmPerformanceNameSelect(item)" *ngFor="let item of vmPerformanceNames"> + <li nz-menu-item (click)="sourceNameSelect(item)" *ngFor="let item of sourceNameList"> <a>{{item}}</a> </li> </ul> </nz-dropdown> - <app-line [initData]="performanceChartInit" [chartData]="performanceChartData"></app-line> + <app-line [initData]="alarmLineChartInit" [chartData]="alarmLineChartData"></app-line> </div> </div> diff --git a/usecaseui-portal/src/app/home/home.component.ts b/usecaseui-portal/src/app/home/home.component.ts index 39fab25d..5d91e357 100644 --- a/usecaseui-portal/src/app/home/home.component.ts +++ b/usecaseui-portal/src/app/home/home.component.ts @@ -14,38 +14,15 @@ export class HomeComponent implements OnInit { constructor(private myhttp: MyhttpService) { } ngOnInit() { - this.getHomeAllData(); + this.getSourceNames(); + this.getHomeServiceData(); + this.getHomePerformanceData(); + this.getHomeAlarmData(); + this.getHomeAlarmChartData(); } - // alarm饼图 - alarmChartData:Object; - alarmChartInit:Object = { - height: 164, - option:{ - legend: { - orient: 'vertical', - left: '0px', - bottom: '0px', - data: ['Active','Closed'] - }, - color:["#fb6e6e","#526b75"], - series:[{ - name:"告警信息", - radius : '55%', - label:{ - normal:{ - show: false, - }, - emphasis: { - show: true, - formatter:'{b}\n{c},{d}%', - } - } - }] - } - }; - // services饼图 + // services serviceNumber:number = 0; serviceChartData:Object; serviceChartInit:Object = { @@ -84,40 +61,141 @@ export class HomeComponent implements OnInit { }] } }; + // gethomeServiceData + getHomeServiceData(){ + this.myhttp.getHomeServiceData() + .subscribe( + (data)=>{ + // console.log(data); + this.serviceNumber = data.serviceTotalNum; + this.serviceChartData = { + series:[{data:data.customerServiceList}] + }; + // console.log(this.serviceChartData); + }, + (err)=>{ + console.log(err); + } + ) + } + + // performance + performanceVnfNum = 0; + performanceVmNum = 0; + getHomePerformanceData(){ + this.myhttp.getHomePerformanceData() + .subscribe((data)=>{ + this.performanceVnfNum = data.length; + }) + } + + // alarm饼图 + alarmChartData:Object; + alarmChartInit:Object = { + height: 164, + option:{ + legend: { + orient: 'vertical', + left: '0px', + bottom: '0px', + data: ['Active','Closed'] + }, + color:["#fb6e6e","#526b75"], + series:[{ + name:"告警信息", + radius : '55%', + label:{ + normal:{ + show: false, + }, + emphasis: { + show: true, + formatter:'{b}\n{c},{d}%', + } + } + }] + } + }; + getHomeAlarmData(){ + this.myhttp.getHomeAlarmData() + .subscribe((data)=>{ + this.alarmChartData ={ + series:[{ + data:[{name:"Active",value:data[0]},{name:"Closed",value:data[1]}] + }] + }; + }) + } - // Performance线图 - performanceChartData:Object; - performanceChartInit:Object = { + // alarm线图 + alarmLineChartData:Object; + alarmLineChartInit:Object = { height:320, option:{ legend: { bottom: '0px', - data: ['CPU','Memory'] + data: ['All','Active','Closed'] + }, + xAxis:{ + data:["2018-09-10 ","2018-09-11","2018-09-12","2018-09-13","2018-09-14", + "2018-09-15","2018-09-16","2018-09-17","2018-09-18","2018-09-19", + "2018-09-20","2018-09-21","2018-09-22"] }, series : [ { - name: 'CPU', + name: 'All', type: 'line', - data:[20,23,14,12,34,25,22,42,52,35,34,13,13] + data:[30,45,34,35,43,56,36,53,42,45,44,35,32] }, { - name: 'Memory', + name: 'Active', type: 'line', data:[10,23,24,22,14,15,32,12,12,32,14,23,23] + }, + { + name: 'Closed', + type: 'line', + data:[20,23,14,12,34,25,22,42,52,35,34,13,13] } ] } }; - getPerformanceChartData(){ - let paramsObj = { - vmPerformanceName:this.vmPerformanceNameSelected + // sourceName筛选框 + sourceNameList = ['performanceNameOne']; + sourceNameSelected = null; + getSourceNames(){ + this.myhttp.getSourceNames() + .subscribe((data)=>{ + this.sourceNameList = data; + }) + } + sourceNameSelect(item){ + if(this.sourceNameSelected != item){ + // console.log(item); + this.sourceNameSelected = item; + this.getHomeAlarmChartData() + } + } + getHomeAlarmChartData(){ + let nowTime = this.myhttp.dateformater( Date.now()); + let startTime = this.myhttp.dateformater( Date.now()-30*24*60*60*1000 ); + let obj = { + sourceName:this.sourceNameSelected, + startTime: startTime, + endTime:nowTime, + format:"day" } - this.myhttp.getHomePerformanceChartData(paramsObj) + console.log(obj); + this.myhttp.getHomeAlarmChartData(obj) .subscribe((data)=>{ - this.performanceChartData = { + this.alarmLineChartData = { + xAxis:{ + data:data.dataList + }, series:[ - {data:data.CPU}, - {data:data.Memory} + {data:data.allList}, + {data:data.ActiveList}, + {data:data.closedList} ] } },(err)=>{ @@ -125,42 +203,5 @@ export class HomeComponent implements OnInit { }) } - // vm筛选框 - vmPerformanceNames = ['performanceNameOne']; - vmPerformanceNameSelected = this.vmPerformanceNames[0]; - vmPerformanceNameSelect(item){ - if(this.vmPerformanceNameSelected != item){ - console.log(item); - this.vmPerformanceNameSelected = item; - this.getPerformanceChartData() - } - } - - // 获取数据 - getHomeAllData(){ - this.myhttp.getAllHomeData() - .subscribe( - (data)=>{ - console.log(data); - this.alarmChartData ={ - series:[{ - data:data.alarm.chartdata - }] - }; - this.serviceNumber = data.services.number; - this.serviceChartData ={ - series:[{ - data:data.services.chartdata - }] - }; - this.vmPerformanceNames = data.Vm_performance.names; - this.vmPerformanceNameSelected = this.vmPerformanceNames[0]; - this.getPerformanceChartData(); - }, - (err)=>{ - console.log(err); - } - ) - } } diff --git a/usecaseui-portal/src/app/myhttp.service.ts b/usecaseui-portal/src/app/myhttp.service.ts index 53a25cec..b2ab91be 100644 --- a/usecaseui-portal/src/app/myhttp.service.ts +++ b/usecaseui-portal/src/app/myhttp.service.ts @@ -27,16 +27,15 @@ export class MyhttpService { // baseUrl = "./assets/json"; // url={ - // allhome:this.baseUrl + "/homeAllData.json", - // homeLineData:this.baseUrl + "/homePerformanceChartData.json", - // serviceSelectList:this.baseUrl + "/servicesList.json", //customer、serviceType - // servicesTableData:this.baseUrl + "/servicesTableData.json", - // onboardTableData:this.baseUrl + "/onboardTableData.json", + // home_serviceData:this.baseUrl + "/home_serviceData.json", + // home_performanceData:this.baseUrl + "/home_performanceData.json", + // home_alarmData:this.baseUrl + "/home_alarmData.json", + // home_alarmChartData:this.baseUrl + "/home_alarmChartData.json", + // sourceNames:this.baseUrl + "/SourceName.json", // customers:this.baseUrl + "/customers.json?", // serviceType:this.baseUrl + "/serviceTypes.json?*_*", - // servicesCategory:this.baseUrl + "/configuration_files/servicesCategory.json?", - // serviceInstanceList:this.baseUrl + "/instanceTableData.json?", + // servicesTableData:this.baseUrl + "/servicesTableData.json", // serviceTemplates:this.baseUrl + "/serviceTemplates2.json?", // templateParameters:this.baseUrl + "/*_*" + "ServiceTemplateParameters.json?", // vimInfo:this.baseUrl + "/vimInfo.json?", @@ -59,24 +58,20 @@ export class MyhttpService { // connectivity:this.baseUrl + "/sotn-connectivity2.json?", // vpnBinding:this.baseUrl + "/vpnbinding.json?", // alarmFormData:this.baseUrl + "/alarmFormData.json?", - // alarmFormDetailData:this.baseUrl + "/alarmFormDetailData.json?", - // sourceName:this.baseUrl+ "/SorceName.json?" // } // baseUrl = 'http://172.19.44.223/api/usecaseui-server/v1'; baseUrl = '/api/usecaseui-server/v1'; url={ - allhome:this.baseUrl + "/alarm/getAlarmDataByStatus/0", - homeLineData:this.baseUrl + "/...........", - serviceSelectList:this.baseUrl + "/xxxxxxxxxxxxx", - servicesTableData:this.baseUrl + "/xxxxxxxx.json", - onboardTableData:this.baseUrl + "/xxxxxxx.json", - + home_serviceData:this.baseUrl + "/uui-lcm/serviceNumByCustomer", + home_performanceData:this.baseUrl + "/performance/queryAllSourceNames", + home_alarmData:this.baseUrl + "/alarm/statusCount", + home_alarmChartData:this.baseUrl + "/alarm/diagram", + sourceNames:this.baseUrl + "/alarm/getSourceNames", customers:this.baseUrl + "/uui-lcm/customers", serviceType:this.baseUrl + "/uui-lcm/customers/" + "*_*" + "/service-subscriptions", - servicesCategory: "./assets/json/configuration_files/servicesCategory.json", - serviceInstanceList:this.baseUrl + '/uui-sotn/getServiceInstanceList', + servicesTableData:this.baseUrl + '/uui-sotn/getServiceInstanceList', serviceTemplates:this.baseUrl + "/uui-lcm/service-templates", templateParameters:this.baseUrl + "/uui-lcm/service-templates/" + "*_*" +"?toscaModelPath=", nstemplateParameters:this.baseUrl + "/uui-lcm/fetchNsTemplateData", @@ -102,32 +97,26 @@ export class MyhttpService { } // home - getAllHomeData() { - return this.http.get<homeData>(this.url.allhome); + getHomeServiceData(){ + return this.http.get<any>(this.url.home_serviceData); + } + getHomePerformanceData(){ + return this.http.get<String[]>(this.url.home_performanceData); } - //home lin - getHomePerformanceChartData(paramsObj){ + getHomeAlarmData(){ + return this.http.get<any>(this.url.home_alarmData); + } + getHomeAlarmChartData(paramsObj){ let params = new HttpParams({fromObject:paramsObj}); - return this.http.get<homeVmLineData>(this.url.homeLineData,{params}); + return this.http.get<any>(this.url.home_alarmChartData,{params}); } - // servicesList data - // getServicesSelectData():Observable<HttpResponse<servicesSelectData>>{ - // return this.http.get<servicesSelectData>(this.url.serviceSelectList,{observe:'response'}); - // } + // serviceTable list getServicesTableData(paramsObj):Observable<HttpResponse<servicesTableData>>{ let params = new HttpParams({fromObject:paramsObj}); return this.http.get<servicesTableData>(this.url.servicesTableData,{observe:'response',params}); } - // onboard data - getOnboardTableData(paramsObj):Observable<HttpResponse<onboardTableData>>{ - let params = new HttpParams({fromObject:paramsObj}); - return this.http.get<onboardTableData>(this.url.onboardTableData,{observe:'response',params}); - } - - - //--------------------------------------------------------------------------------- // Get all customers @@ -140,21 +129,7 @@ export class MyhttpService { let url = this.url.serviceType.replace("*_*",customer.id); return this.http.get<any>(url); } - // Get service classification information, local configuration file - // getServicesCategory(){ - // return this.http.get<any>(this.url.servicesCategory); - // } - // list Tabular data - getInstanceTableData(paramsObj){ - let params = new HttpParams({fromObject:paramsObj}); - return this.http.get<any>(this.url.serviceInstanceList,{params}); - } - // // Service details data - // getInstanceDetails(id){ - // let url = this.baseUrl + "/detailsData.json?id=" + id; - // return this.http.get<instanceDetail>(url); - // } // Get all template types getAllServiceTemplates(type){ |