Fix VNF Performance Query Bugs

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

3 files changed, 125 insertions, 102 deletions

diff --git a/usecaseui-portal/src/app/alarm/alarm.component.html b/usecaseui-portal/src/app/alarm/alarm.component.html
index 6e345a4e..312ec236 100644
--- a/usecaseui-portal/src/app/alarm/alarm.component.html
+++ b/usecaseui-portal/src/app/alarm/alarm.component.html
@@ -1,5 +1,5 @@
 <!--
-    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+    Copyright (C) 2019 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.
@@ -13,21 +13,20 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 -->
-<h3 class="title"> <span (click)="detailHide()" style="cursor:pointer;" *ngIf="detailshow">Alarm</span> <span *ngIf="detailshow">>
-        Details</span> </h3>
+<h3 class="title"> <span (click)="detailHide()" style="cursor:pointer; float:right;" *ngIf="detailshow">Alarm</span> <span *ngIf="detailshow">Device Alarm Details</span> </h3>
 <div style="padding:0px 20px 20px 20px;">
     <div class="charts" [@showHideAnimate]="state">
         <div class="chartsleft">
             <div class="active sctive_closed">
                 <div>Active</div>
                 <div>13,980</div>
-                <div><nz-progress [nzPercent]="90" [nzShowInfo]="false"></nz-progress></div>
+                <div><nz-progress [nzPercent]="30" [nzShowInfo]="false"></nz-progress></div>
                 <div>There are 13980 faults waiting to be solved</div>
             </div>
             <div class="closed sctive_closed">
                 <div>Closed</div>
                 <div>23,980</div>
-                <div><nz-progress [nzPercent]="30" [nzShowInfo]="false"></nz-progress></div>
+                <div><nz-progress [nzPercent]="50" [nzShowInfo]="false"></nz-progress></div>
                 <div>23,980 faults have been fixed</div>
             </div>
         </div>
@@ -38,39 +37,45 @@
     </div>
     <div class="select" [@showHideAnimate]="state">
         <div class="query_criteria">
-            <span>Source Name: </span>
-            <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
-                <button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button>
-                <ul nz-menu>
-                    <li nz-menu-item (click)="choseSourceName(item)" *ngFor="let item of sourceNameList">
-                        <a>{{item}}</a>
-                    </li>
-                </ul>
-            </nz-dropdown>
-            &nbsp;&nbsp;
-            <span>Priority: </span>
-            <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
-                <button nz-button nz-dropdown><span>{{prioritySelected}}</span> <i class="anticon anticon-down"></i></button>
-                <ul nz-menu>
-                    <li nz-menu-item (click)="chosePriority(item)" *ngFor="let item of priorityList">
-                        <a>{{item}}</a>
-                    </li>
-                </ul>
-            </nz-dropdown>
-            &nbsp;&nbsp;
-            <span>Status: </span>
-            <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
-                <button nz-button nz-dropdown><span>{{statusSelected}}</span> <i class="anticon anticon-down"></i></button>
-                <ul nz-menu>
-                    <li nz-menu-item (click)="choseStatus(item)" *ngFor="let item of statusList">
-                        <a>{{item}}</a>
-                    </li>
-                </ul>
-            </nz-dropdown>
-            &nbsp;&nbsp;
-            <span>Report Time: </span>
-            <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker>
-
+            <div class="query_item">
+                <span>Source Name: </span>
+                <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+                    <button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button>
+                    <ul nz-menu>
+                        <li nz-menu-item (click)="choseSourceName(item)" *ngFor="let item of sourceNameList">
+                            <a>{{item}}</a>
+                        </li>
+                    </ul>
+                </nz-dropdown>
+            </div>
+            <div class="query_item" style="margin-left: 1.5%;">
+                <span>Priority: </span>
+                <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+                    <button nz-button nz-dropdown><span>{{prioritySelected}}</span> <i class="anticon anticon-down"></i></button>
+                    <ul nz-menu>
+                        <li nz-menu-item (click)="chosePriority(item)" *ngFor="let item of priorityList">
+                            <a>{{item}}</a>
+                        </li>
+                    </ul>
+                </nz-dropdown>
+            </div>
+            <div class="query_item" style="margin-left:-2%;">
+                <span>Status: </span>
+                <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+                    <button nz-button nz-dropdown><span>{{statusSelected}}</span> <i class="anticon anticon-down"></i></button>
+                    <ul nz-menu>
+                        <li nz-menu-item (click)="choseStatus(item)" *ngFor="let item of statusList">
+                            <a>{{item}}</a>
+                        </li>
+                    </ul>
+                </nz-dropdown>
+            </div>
+            <div class="query_time" style="margin-left: -3%;">
+                <span>Report Time: </span>
+                <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" 
+               ></nz-range-picker>
+                <!-- <nz-range-picker [nzFormat]="dateFormat"></nz-range-picker> -->
+            </div>
             <button class="search" nz-button [nzType]="'primary'" (click)="getAlarmFormData()"><i class="anticon anticon-search"></i><span>Search</span></button>
         </div>
     </div>
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.less b/usecaseui-portal/src/app/alarm/alarm.component.less
index 936f73c8..434470fc 100644
--- a/usecaseui-portal/src/app/alarm/alarm.component.less
+++ b/usecaseui-portal/src/app/alarm/alarm.component.less
@@ -1,5 +1,5 @@
 /*
-    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+    Copyright (C) 2019 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.
@@ -14,9 +14,9 @@
     limitations under the License.
 */
 .title {
-    font: 700 18px/18px "思源黑体";
-    color: #4c5e70;
-    margin-bottom: 18px; 
+    font: 500 16px/16px "ArialMT";
+    color: #3C4F8C;
+    margin: 20px;
 }
 hr {
     border: none;
@@ -26,47 +26,64 @@ hr {
 }
 .select {
     margin-bottom: 15px;
-    span {
-        display: inline-block;
-        font: 700 14px "Arial";
-        color: #4c5e70;
-    }
-    nz-dropdown {
-        vertical-align: middle;
-        :hover{
-            border-color: #147dc2;
-        }
-        button {
-            width: 165px;
-            height: 30px;
-            background-color: #eceff4;
-            text-align: left;
-            border-color: #9fa9ab;
+    width: 100%;
+    .query_criteria {
+        width: 100%;
+        .query_item {
+            width: 20%;
+            display: inline-block;
             span {
-                font-weight: 400;
                 display: inline-block;
-                width: 120px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                padding-top: 2px;
+                font: 500 13px "ArialMT";
+                color: #3C4F8C;
             }
-            i {
-                position: absolute;
-                top: 10px;
-                right: 10px;
+            nz-dropdown {
+                vertical-align: middle;
+                width: 55%;
+                :hover{
+                    border-color: #48C6EF;
+                }
+                button {
+                    width: 100%;
+                    height: 30px;
+                    background-color: #fff;
+                    text-align: left;
+                    border-color: #EEEEEE ;
+                    border-radius: 2px;
+                    span {
+                        font-weight: 400;
+                        color:rgba(60,79,140,0.5);
+                        display: inline-block;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        padding-top: 2px;
+                    }
+                    i {
+                        position: absolute;
+                        top: 10px;
+                        right: 10px;
+                    }
+                }
             }
         }
-    }
-    .search {
-        margin-left: 20px;       
-        height: 30px;
-        padding: 0 10px;
-        span {
-            color: #fff;
-            font-weight: 400;
+       
+        .query_time{
+            display: inline-block;
+            span {
+                font: 500 13px "ArialMT";
+                color: #3C4F8C;
+            }
+        }
+        .search {
+            margin-left: 0.8%;
+            height: 30px;
+            padding: 0 10px;
+            span {
+                color: #fff;
+                font-weight: 400;
+            }
         }
     }
-    
 }
 .charts{
     width: 100%;
@@ -112,8 +129,15 @@ hr {
     .chartsright {
         background-color: #fff;
         width: 68%;
+        padding: 20px;
         float: left;
         height: 100%;
+        .picker {
+            float: right; margin-right: 3%;
+        }
+        .datapicker {
+            padding-left: 700px;
+        }
     }
 }
 .content {
@@ -213,24 +237,8 @@ hr {
         }
     }
 }
-// select 框更改
-.select[_ngcontent-c3] nz-dropdown[_ngcontent-c3] button[_ngcontent-c3] {
-    width: 120px;
-    height: 30px;
-    background-color: #fff;
-    text-align: left;
-    border-color: #EEEEEE;
-    border-radius: 2px;
-}
-.select[_ngcontent-c3] nz-dropdown[_ngcontent-c3] [_ngcontent-c3]:hover {
-    border-color: #58B7F9;
-}
-.ant-progress-inner{
-    background:rgba(229,238,252,0.8) !important;
-}
-.ant-progress-bg {
-    background-color: linear-gradient(270deg,rgba(255,255,255,1) 0%,rgba(223,233,243,1) 100%) !important;
-}
+
+
 
 
 
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.ts b/usecaseui-portal/src/app/alarm/alarm.component.ts
index ae9c0681..b8b9d4f3 100644
--- a/usecaseui-portal/src/app/alarm/alarm.component.ts
+++ b/usecaseui-portal/src/app/alarm/alarm.component.ts
@@ -1,5 +1,5 @@
 /*
-    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+    Copyright (C) 2019 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.
@@ -45,6 +45,7 @@ export class AlarmComponent implements OnInit {
   ngOnInit() {
     this.getAlarmFormData();
     this.getSourceNames();
+
     // this.getstatuscount();
   }
 
@@ -95,8 +96,13 @@ export class AlarmComponent implements OnInit {
   // Date screening
   dateRange = [(new Date(), -30), new Date()];
   onChange(result: Date): void {
-    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');
+    this.startTime = this.datePipe.transform(result[0], 'yyyy-MM-dd');
+    this.endTime = this.datePipe.transform(result[1], 'yyyy-MM-dd');
+  }
+  dateRange2 = [(new Date(), -30), new Date()];
+  onChange2(result: Date): void {
+    this.startTime = this.datePipe.transform(result[0], 'yyyy-MM-dd');
+    this.endTime = this.datePipe.transform(result[1], 'yyyy-MM-dd');
   }
 
   // total
@@ -118,9 +124,9 @@ export class AlarmComponent implements OnInit {
     this.myhttp.getAlarmFormData(this.currentPage, this.pageSize, this.sourceName, this.priority, this.startTime, this.endTime, this.vfStatus).subscribe((data) => {
       this.list = data.alarms;
     })
-    this.getAlarmChartData(event);
+    // this.getAlarmChartData(event);
   }
-  getAlarmChartData(event) {
+  getAlarmChartData() {
     let paramsObj = {
       // sourceName: this.sourceName,
       // startTime: this.startTime,
@@ -193,10 +199,13 @@ export class AlarmComponent implements OnInit {
   alarmShow = false;
   alarmChartData: Object;
   alarmChartInit: Object = {
-    height:  240,
+    height:  200,
     option: {
       legend: {
-        bottom: '0px',
+        icon: "circle", 
+        itemWidth:10,
+        itemHeight:10,
+        bottom: '-5px',
         data: ['Active', 'Fixed']
       },
       tooltip: {
@@ -208,7 +217,8 @@ export class AlarmComponent implements OnInit {
           show: true,
           start: 1,
           height: 10,
-          end: 40
+          end: 60,
+          bottom:'9%'
         }
       ],
       xAxis: {