Fix VNF Performance Query Bugs

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

7 files changed, 186 insertions, 215 deletions

diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html
index 8a1e64da..3789c598 100644
--- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html
+++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html
@@ -14,44 +14,42 @@
     limitations under the License.
 -->
 <div class="content">
-      <!-- <nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isVisibleMiddle" nzTitle="Alarm Chart" (nzOnCancel)="handleCancelMiddle()" (nzOnOk)="handleOkMiddle()">
+    <!-- <nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isVisibleMiddle" nzTitle="Alarm Chart" (nzOnCancel)="handleCancelMiddle()" (nzOnOk)="handleOkMiddle()">
           <app-line [initData]="alarmChartInitBig" [chartData]="alarmChartDataBig"></app-line>
       </nz-modal> -->
     <div class="chart">
-          <div class="select">
-              <span>Report Time: </span>
-              <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker>
-      
-              <button class="search" nz-button [nzType]="'primary'"><i class="anticon anticon-search"></i><span>Search</span></button>
-          </div>
+        <div class="select">
+            <span>Report Time: </span>
+            <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker>
+
+            <button class="search" nz-button [nzType]="'primary'" (click) = "getPerformanceFormData()"><i class="anticon anticon-search"></i><span>Search</span></button>
+        </div>
     </div>
     <div class="tablelist">
-      <nz-table #nzTable [nzData]="dataSet" [nzPageSize]="10" nzShowSizeChanger [nzPageSizeOptions]="[5,10,15,20]" nzSize="middle">
-          <thead (nzSortChange)="sort($event)" nzSingleSort>
-              <tr>
-              <th nzWidth="5%">NO</th>
-              <th nzWidth="20%">Source Name</th>
-              <th nzWidth="10%">Priority</th>
-              <th nzWidth="20%">SpecificProblem</th>
-              <th nzWidth="20%">Report Time</th>
-              <th nzWidth="15%">Status</th>
-              <th nzWidth="10%">Action</th>
-              </tr>
-          </thead>
-          <tbody>
-              <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
-              <tr *ngFor="let item of nzTable.data; let i = index; ">
-                  <td>{{i+1}}</td>
-                  <td>{{item.name}}</td>
-                  <td>{{item.age}}</td>
-                  <td>{{item.address}}</td>
-                  <td>{{item.address}}</td>
-                  <td>{{item.address}}</td>
-                  <td><a class="action" (click)="detailShow(i+1)"><i class="details"></i></a></td>
-              </tr>
-              <!-- </ng-template> -->
-          </tbody>
-      </nz-table>
+        <nz-table #nzTable [nzData]="list" [nzPageSize]="10" nzShowSizeChanger [nzPageSizeOptions]="[5,10,15,20]"
+            nzSize="middle">
+            <thead (nzSortChange)="sort($event)" nzSingleSort>
+                <tr>
+                    <th nzWidth="5%">NO</th>
+                    <th nzWidth="20%">Source Name</th>
+                    <th nzWidth="20%">Event Name</th>
+                    <th nzWidth="20%">ReportingEntityName</th>
+                    <!-- <th nzWidth="20%">Report Time</th> -->
+                    <th nzWidth="10%">Action</th>
+                </tr>
+            </thead>
+            <tbody>
+                <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
+                <tr *ngFor="let item of nzTable.data; let i = index; ">
+                    <td>{{i+1}}</td>
+                    <td>{{item.sourceName}}</td>
+                    <td>{{item.eventName}}</td>
+                    <td>{{item.reportingEntityName}}</td>
+                    <!-- <td>{{item.sequence}}</td> -->
+                    <td><a class="action" (click)="detailShow(item)"><i class="details"></i></a></td>
+                </tr>
+                <!-- </ng-template> -->
+            </tbody>
+        </nz-table>
     </div>
-  </div>
-  
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts
index 6eaf19f4..c3153c8e 100644
--- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts
+++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts
@@ -1,147 +1,75 @@
+/*
+    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, Output, EventEmitter, HostBinding } from '@angular/core';
+import { MyhttpService } from '../../myhttp.service';
 import * as addDays from 'date-fns/add_days';
+import { DatePipe } from "@angular/common"
 
 @Component({
   selector: 'app-graphiclist',
   templateUrl: './graphiclist.component.html',
-  styleUrls: ['./graphiclist.component.less']
+  styleUrls: ['./graphiclist.component.less'],
+  providers: [DatePipe]
 })
 export class GraphiclistComponent implements OnInit {
+  public startTime: string = '';
+  public endTime: string = '';
+  public currentPage: number = 1;
+  public pageSize: number = 10;
+  list: any;
+  constructor( private datePipe: DatePipe,
+    private myhttp: MyhttpService) { }
+  isVisibleMiddle = false;
 
-  constructor() { }
-  // isVisibleMiddle = false;
-
-  // showModalMiddle(): void {
-  //   this.isVisibleMiddle = true;
-  // }
-  // handleOkMiddle(): void {
-  //   console.log('click ok');
-  //   this.isVisibleMiddle = false;
-  // }
-  // handleCancelMiddle(): void {
-  //   this.isVisibleMiddle = false;
-  // }
+  showModalMiddle(): void {
+    this.isVisibleMiddle = true;
+  }
+  handleOkMiddle(): void {
+    // console.log('click ok');
+    this.isVisibleMiddle = false;
+  }
+  handleCancelMiddle(): void {
+    this.isVisibleMiddle = false;
+  }
 
   ngOnInit() {
+    this.getPerformanceFormData();
   }
-
-  // 筛选框（下拉框）
-  MeasurementList = ['aaaa','bbbb','cccc','dddddDDDD'];
-  MeasurementSelected = "Measurement";
-  ReportTimeList = ['aaaa','bbbb','cccc','ddddd'];
-  ReportTimeSelected = "ReportTime";  
-  choseMeasurement(item){
-    console.log(item);
-    this.MeasurementSelected = item;
+  ngOnchanges(changes){
+    this.getPerformanceFormData();
+    console.log(this.vnfname)
+   
   }
-  choseReportTime(item){
-    console.log(item);
-    this.ReportTimeSelected = item;
+  getPerformanceFormData() {
+    this.myhttp.getAlarmFormData(this.currentPage, this.pageSize, this.vnfname, this.startTime, this.endTime).subscribe((data) => {
+      console.log(data)
+      this.list = data.alarms;
+    })
   }
  // Date screening
  dateRange =  [ addDays(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){
 
   }
-  //表格数据
-  dataSet = [
-    {
-      name       : 'John Brown',
-      age        : 32,
-      expand     : false,
-      address    : 'New York No. 1',
-      description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.'
-    },
-    {
-      name       : 'Aim Green',
-      age        : 42,
-      expand     : false,
-      address    : 'London No. 1',
-      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
-    },
-    {
-      name       : 'Bim Green',
-      age        : 42,
-      expand     : false,
-      address    : 'London No. 1',
-      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
-    },
-    {
-      name       : 'Cim Green',
-      age        : 42,
-      expand     : false,
-      address    : 'London No. 1',
-      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
-    },
-    {
-      name       : 'Jim Green',
-      age        : 42,
-      expand     : false,
-      address    : 'London No. 1',
-      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
-    },
-    {
-      name       : 'Xim Green',
-      age        : 42,
-      expand     : false,
-      address    : 'London No. 1',
-      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
-    },
-    {
-      name       : 'Jim Green',
-      age        : 42,
-      expand     : false,
-      address    : 'London No. 1',
-      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
-    },
-    {
-      name       : 'Jim Green',
-      age        : 42,
-      expand     : false,
-      address    : 'London No. 1',
-      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
-    },
-    {
-      name       : 'Jim Green',
-      age        : 42,
-      expand     : false,
-      address    : 'London No. 1',
-      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
-    },
-    {
-      name       : 'Jim Green',
-      age        : 42,
-      expand     : false,
-      address    : 'London No. 1',
-      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
-    },
-    {
-      name       : 'cim Green',
-      age        : 42,
-      expand     : false,
-      address    : 'London No. 1',
-      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
-    },
-    {
-      name       : 'bim Green',
-      age        : 42,
-      expand     : false,
-      address    : 'London No. 1',
-      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
-    },
-    {
-      name       : 'aoe Black',
-      age        : 32,
-      expand     : false,
-      address    : 'Sidney No. 1',
-      description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.'
-    }
-  ];
-
+  @Input () vnfname;
   @Output() detailData = new EventEmitter();
   detailShow(id){
     let prems = {
diff --git a/usecaseui-portal/src/app/components/performance-details/performance-details.component.ts b/usecaseui-portal/src/app/components/performance-details/performance-details.component.ts
index 9f70824b..2e174474 100644
--- a/usecaseui-portal/src/app/components/performance-details/performance-details.component.ts
+++ b/usecaseui-portal/src/app/components/performance-details/performance-details.component.ts
@@ -14,11 +14,11 @@ export class PerformanceDetailsComponent implements OnInit {
   constructor(private myhttp:MyhttpService) { }
 
   ngOnInit() {
-    this.getAlarmDetailData(7);
+    this.getAlarmDetailData(this.detailId);
   }
 
   ngOnChanges(changes){
-    console.log(changes);
+    // console.log(changes);
   }
   datailheaderdata: any = {};
   dataillistdata: any = [];
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;
   }
 
-
 }