Fix VNF Performance Query Bugs

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

2 files changed, 84 insertions, 158 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 = {