summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/home
diff options
context:
space:
mode:
authorguochuyicmri <guochuyi@chinamobile.com>2018-11-06 11:56:50 +0800
committerguochuyicmri <guochuyi@chinamobile.com>2018-11-06 11:57:44 +0800
commit3aa2334e116c1e7921ed46958ff5fed1c70fad7e (patch)
tree4987e4597df4f0ff6fd3d99d911a808ac9102995 /usecaseui-portal/src/app/home
parentee80382f7574fa459808da8e7f9ad410b5e8de22 (diff)
Dashboard finish
Change-Id: Ib9a4b70260beb971b27e82288ef2546c43535569 Issue-ID: USECASEUI-164 Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/home')
-rw-r--r--usecaseui-portal/src/app/home/home.component.html16
-rw-r--r--usecaseui-portal/src/app/home/home.component.ts201
2 files changed, 129 insertions, 88 deletions
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);
- }
- )
- }
}