Fix VNF Performance Query Bugs

Change-Id: Ieb296116f454e8134bb3c43703f6515a58d9cc0a
Issue-ID: USECASEUI-166
Signed-off-by: zhangab <zhanganbing@chinamobile.com>

4 files changed, 100 insertions, 55 deletions

diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css
index cbb5bfdd..414beebf 100644
--- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css
+++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css
@@ -43,13 +43,13 @@ hr {
   top: 10px;
   right: 10px;
 }
-.select .submit {
+.select .search {
   margin-left: 20px;
   vertical-align: middle;
   height: 30px;
   padding: 0 10px;
 }
-.select .submit span {
+.select .search span {
   color: #fff;
   font-weight: 400;
 }
diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html
index 824599e7..d308d808 100644
--- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html
+++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html
@@ -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.
+-->
 <h3 class="title">
     <span (click)="performanceShow()" style="cursor:pointer;">Performance VNF</span> 
     <span (click)="graphicShow()" *ngIf="graphicshow">> Graphic list </span> 
@@ -14,25 +29,25 @@
             </li>
         </ul>
     </nz-dropdown>
-    <button class="submit" nz-button [nzType]="'primary'" (click)="submit()"><i class="anticon anticon-plus-circle-o"></i><span>Submit</span></button>
+    <button class="search" nz-button [nzType]="'primary'" (click)="getperformanceSsourceNames()"><i class="anticon anticon-search"></i><span>Search</span></button>
 </div>
 <div class="content" [@showHideAnimate]="state">
     <div class="vnfs">
-        <div class="vnf" *ngFor="let item of vnfsData" (click)="graphicShow()">
-            <img src="../../../assets/images/VNF3.png" alt="VNF3">
-            <h3>Mfvs_MMEManaxxdeafsfdf</h3>
-            <div class="intro">
-                Mfvs_MMEMa naxxdfdafa fafad a afeaf sfdff doafe oghaiod aaafeageageagfdavzvdagewag
+        <div class="vnf" *ngFor="let item of vnfsData">
+            <img src="../../../assets/images/VNF3.png" title="VF" (click)="graphicShow2(item)">
+            <h3>{{item.name}}</h3>
+            <div class="intro"> 
+               {{item.text}}
             </div>
         </div>
         <div class="empty" *ngFor="let empty of emptys"></div>   
     </div>
     <div class="pages">
-        <nz-pagination [(nzPageIndex)]="current" [nzTotal]="500" [nzSize]="'small'" [nzPageSize]="10" [nzPageSizeOptions]="[10,15,20,25,30]" nzShowSizeChanger nzShowQuickJumper></nz-pagination>
+        <nz-pagination [(nzPageIndex)]="namecurrentPage"  [nzTotal]="vnfsdataTotal"  [nzSize]="'small'" [(nzPageSize)]="namepageSize" [nzPageSizeOptions]="[10,15,20,25,30]" nzShowSizeChanger nzShowQuickJumper></nz-pagination>
     </div>
 </div>
 <div [@showHideAnimate]="state2">
-    <app-graphiclist  (detailData)="detailShow($event)"></app-graphiclist>
+    <app-graphiclist  (detailData)="detailShow($event)" [vnfname] = "vnfname"></app-graphiclist>
 </div>
 <div [@showHideAnimate]="state3">
     <app-performance-details [detailId]="detailId"></app-performance-details>
diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less
index 977ef5c0..6cc5b0fc 100644
--- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less
+++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less
@@ -43,7 +43,7 @@ hr {
         }
         //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的
     }
-    .submit {
+    .search {
         margin-left: 20px;
         vertical-align: middle;       
         height: 30px;
diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts
index d2e8d991..3e08c2d4 100644
--- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts
+++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts
@@ -1,64 +1,85 @@
+/*
+    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, HostBinding } from '@angular/core';
 import { slideToRight, showHideAnimate } from '../../animates';
+import { MyhttpService } from '../../myhttp.service';
 
 @Component({
   selector: 'app-performance-vnf',
   templateUrl: './performance-vnf.component.html',
   styleUrls: ['./performance-vnf.component.less'],
-  animations: [ slideToRight, showHideAnimate ]
+  animations: [slideToRight, showHideAnimate],
 })
 export class PerformanceVnfComponent implements OnInit {
   @HostBinding('@routerAnimate') routerAnimateState;
-  constructor() { }
+  public sourceNameList: Array<any> = ['---auto---'];
+  public namecurrentPage: number = 1;
+  public namepageSize: number = 10;
+  public sourceName: string = '';
+  public vnfsdataTotal: number;
+
+  constructor(
+    private myhttp: MyhttpService) { }
 
   ngOnInit() {
-    let _this = this;
-    setTimeout(function(){
-      // 在路由切换时加载图片造成动画卡顿，先完成动画再加载图片
-      _this.vnfsData = [    
-        {name:"aaa",text:"oahgieango"},
-        {name:"aaa",text:"oahgieango"},
-        {name:"aaa",text:"oahgieango"},
-        {name:"aaa",text:"oahgieango"},
-        {name:"aaa",text:"oahgieango"},
-        {name:"aaa",text:"oahgieango"},
-        {name:"aaa",text:"oahgieango"},
-        {name:"aaa",text:"oahgieango"},
-        {name:"aaa",text:"oahgieango"},
-        {name:"aaa",text:"oahgieango"},
-        {name:"aaa",text:"oahgieango"}
-      ];
-      _this.emptys = new Array(15-_this.vnfsData.length);
-    },300)
+    this.getqueryAllSourceNames();
+    this.getperformanceSsourceNames()
   }
 
-  // 筛选框（下拉框）
-  sourceNameList = ['aaaa','bbbb','cccc','dddddDDDDDDDDDDDDDDD'];
+
   sourceNameSelected = this.sourceNameList[0];
-  ReportingEntityNameList = ['aaaa','bbbb','cccc','ddddd'];
-  ReportingEntityNameSelected = this.ReportingEntityNameList[0];  
-  choseSourceName(item){
-    console.log(item);
-    this.sourceNameSelected = item;
+  getqueryAllSourceNames() {
+    this.myhttp.getqueryAllSourceNames().subscribe((data) => {
+      // console.log(data)
+      for (let i = 0; i < data.length; i++) {
+        this.sourceNameList.push(data[i]);
+      }
+      this.sourceNameSelected = this.sourceNameList[0];
+    })
   }
-  choseReportingEntityName(item){
+  choseSourceName(item) {
     console.log(item);
-    this.ReportingEntityNameSelected = item;
+    this.sourceNameSelected = item;
+    if (item == "---auto---") {
+      this.sourceName = '';
+    } else {
+      this.sourceName = item;
+    }
   }
 
-  submit(){
-    
+  getperformanceSsourceNames() {
+    this.myhttp.getperformanceSsourceNames(this.namecurrentPage, this.namepageSize, this.sourceName).subscribe((data) => {
+      this.vnfsData = data.vnfdata;
+      this.vnfsdataTotal = data.total;
+      if (Number.isInteger(this.vnfsData.length / 5)) {
+        this.emptys = new Array(0);
+      } else {
+        this.emptys = new Array(5 - this.vnfsData.length % 5);
+      }
+      // console.log(this.emptys);
+    })
   }
-  // vnfs数据
+  // vnfs data
   vnfsData = [];
-  emptys = []; //补空盒子用
-  // 分页 
-  current = 1;  //当前页码
+  emptys = []; //Fill the box
 
-  //详情页标题显示
+  //Detail page title display
   graphicshow = false;
   detailshow = false;
-  // 显示隐藏动画
+  // Show hidden animation
   state = "show";
   state2 = "hide";
   state3 = "hide";
@@ -69,24 +90,33 @@ export class PerformanceVnfComponent implements OnInit {
     this.graphicshow = false;
     this.detailshow = false;
   }
-  graphicShow() {
+  // Selected name
+  
+  graphicShow(item) {
     this.state = 'hide';
     this.state2 = 'show';
     this.state3 = 'hide';
     this.graphicshow = true;
     this.detailshow = false;
   }
-  // 选中id
-  detailId:number;
-  detailShow(prems) {
+  vnfname: number;
+  graphicShow2(item){
+    this.state = 'hide';
+    this.state2 = 'show';
+    this.state3 = 'hide';
+    this.graphicshow = true;
+    this.detailshow = false;
+    this.vnfname = item.name;
+  }
+  // Selected id
+  detailId: number;
+  detailShow(item) {
     this.state = 'hide';
     this.state2 = 'hide';
     this.state3 = 'show';
     this.graphicshow = true;
     this.detailshow = true;
-    console.log(prems);
-    this.detailId = prems.id;
+    this.detailId = item.id;
   }
 
-
 }