Fix VNF Performance Query Bugs

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

4 files changed, 101 insertions, 184 deletions

diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css
index 7268b5dc..e3912fca 100644
--- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css
+++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css
@@ -1,18 +1,3 @@
-/*
-    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.
-*/
 .content .title {
   border-radius: 5px 5px 0 0;
   background-color: #fff;
@@ -48,31 +33,29 @@
   border: none;
 }
 .content .chart {
-  background-color: #fff;
   position: relative;
   border-radius: 5px;
   margin-bottom: 20px;
-  height: 106px;
+  height: 70px;
 }
 .content .chart .select {
-  padding: 20px 50px;
+  padding: 20px  20px 20px 0px;
   width: 70%;
   float: left;
 }
-.content .chart .select nz-dropdown {
-  margin-right: 20px;
-}
-.content .chart .select nz-dropdown a {
-  font: 700 12px "Arial";
-  color: #3d4d65;
+.content .chart .select span {
+  display: inline-block;
+  font: 700 14px "Arial";
+  color: #4c5e70;
 }
-.content .chart .select nz-dropdown a:hover {
-  color: #3fa8eb;
+.content .chart .select .search {
+  margin-left: 20px;
+  height: 30px;
+  padding: 0 10px;
 }
-.content .chart .AlarmChart {
-  width: 25%;
-  padding-top: 7px;
-  float: left;
+.content .chart .select .search span {
+  color: #fff;
+  font-weight: 400;
 }
 .content .tablelist {
   background-color: #fff;
diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html
index 19c7d853..8a1e64da 100644
--- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html
+++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html
@@ -14,66 +14,44 @@
     limitations under the License.
 -->
 <div class="content">
-  <!-- <div class="title">
-    <ul>
-        <li><h5>CPU</h5> <p>{{alarmList.all }}</p></li>
-        <li><h5>Memory</h5> <p>{{alarmList.closed }}</p></li>
-        <li><h5>Disk</h5> <p>{{alarmList.alarm }}</p></li>
-    </ul>
-  </div> -->
-    <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">
-        <nz-dropdown [nzTrigger]="'click'">
-            <a nz-dropdown>
-                {{MeasurementSelected}} <i class="anticon anticon-down"></i>
-            </a>
-            <ul nz-menu>
-              <li nz-menu-item (click)="choseMeasurement(item)" *ngFor="let item of MeasurementList">{{item}}</li>
-            </ul>
-        </nz-dropdown>
-        <nz-dropdown [nzTrigger]="'click'">
-            <a nz-dropdown>
-                {{ReportTimeSelected}} <i class="anticon anticon-down"></i>
-            </a>
-            <ul nz-menu>
-              <li nz-menu-item (click)="choseReportTime(item)" *ngFor="let item of ReportTimeList">{{item}}</li>
-            </ul>
-        </nz-dropdown>
+      <!-- <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>
-    <div class="AlarmChart" (click)="showModalMiddle()">
-        <app-line [initData]="alarmChartInit" [chartData]="alarmChartData"></app-line>
+    <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>
     </div>
-    <!-- <button class="open-close" [ngClass]="{'open-close-active':alarmShow}" (click)="alarmShow=!alarmShow"></button> -->
   </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>
-  </div>
-</div>
+  
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less
index 30fea328..f6f1435b 100644
--- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less
+++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less
@@ -34,34 +34,48 @@
         }
     }
     .chart {
-        background-color: #fff;
+        // background-color: #fff;
         position: relative;
         border-radius: 5px;
         margin-bottom: 20px;
-        height: 106px;
+        height: 70px;
         .select {
-            padding: 20px 50px;
+            padding: 20px  20px 20px 0px;
             width: 70%;
             float: left;
-            nz-dropdown {
-                margin-right: 20px;
-                a {
-                    font: 700 12px "Arial";
-                    color: #3d4d65;
-                    &:hover {
-                        color: #3fa8eb;
-                    }
+            span {
+                display: inline-block;
+                font: 700 14px "Arial";
+                color: #4c5e70;
+            }
+            .search {
+                margin-left: 20px;       
+                height: 30px;
+                padding: 0 10px;
+                span {
+                    color: #fff;
+                    font-weight: 400;
                 }
             }
+            // nz-dropdown {
+            //     margin-right: 20px;
+            //     a {
+            //         font: 700 12px "Arial";
+            //         color: #3d4d65;
+            //         &:hover {
+            //             color: #3fa8eb;
+            //         }
+            //     }
+            // }
         }
-        .AlarmChart {
-            // height: 0px;
-            // border-bottom: 1px solid #f5f5f5;
-            // transition: all 0.3s linear;
-            width: 25%;
-            padding-top: 7px;
-            float: left;
-        }
+        // .AlarmChart {
+        //     // height: 0px;
+        //     // border-bottom: 1px solid #f5f5f5;
+        //     // transition: all 0.3s linear;
+        //     width: 25%;
+        //     padding-top: 7px;
+        //     float: left;
+        // }
         // .alarmChart-active {
         //     height: 386px;
         // }
diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts
index fc86ee0d..6eaf19f4 100644
--- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts
+++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core';
+import * as addDays from 'date-fns/add_days';
 
 @Component({
   selector: 'app-graphiclist',
@@ -8,18 +9,18 @@ import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@an
 export class GraphiclistComponent implements OnInit {
 
   constructor() { }
-  isVisibleMiddle = false;
+  // 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() {
   }
@@ -37,74 +38,15 @@ export class GraphiclistComponent implements OnInit {
     console.log(item);
     this.ReportTimeSelected = item;
   }
+ // Date screening
+ dateRange =  [ addDays(new Date(), -30), new Date() ];
 
+ onChange(result: Date): void {
+   console.log('onChange: ', result);
+ }
   sort(e){
 
   }
-  // 数量统计
-  alarmList = {
-    all:22439,
-    closed:37923,
-    alarm: 12342
-  }
-
-   //折线图
-   alarmChartData:Object;
-   alarmChartInit:Object = {
-    height:100,
-    width:290,
-     option:{
-      tooltip : {
-        show : false,
-      },
-      legend: {
-        show :false,
-      },
-       series: [
-         {
-             name: 'Memory',
-             type: 'bar',
-             legendHoverLink: true,
-             barWidth: "25%",
-             //timeframe_one
-             data: [40, 45, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 45],
-             itemStyle: {
-               color: "#3fa8eb"
-             },
-         }
-       ]
-     }
-   };
-   //折线图
-   alarmChartDataBig:Object;
-   alarmChartInitBig:Object = {
-    height:240,
-    width:500,
-     option:{
-       tooltip : {
-          show : true,
-          trigger: 'axis',
-        },
-       legend: {
-         bottom: 'bottom',
-         data: ['Memory']
-       },
-       series: [
-         {
-             name: 'Memory',
-             type: 'bar',
-             legendHoverLink: true,
-             barWidth: "25%",
-             //timeframe_one
-             data: [40, 45, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 45],
-             itemStyle: {
-               color: "#3fa8eb"
-             },
-         }
-       ]
-     }
-   };
-
   //表格数据
   dataSet = [
     {