Fix VNF Alarm Query Bugs

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

2 files changed, 208 insertions, 151 deletions

diff --git a/usecaseui-portal/src/app/alarm/alarm.component.html b/usecaseui-portal/src/app/alarm/alarm.component.html
index 378cebc2..7fbbc039 100644
--- a/usecaseui-portal/src/app/alarm/alarm.component.html
+++ b/usecaseui-portal/src/app/alarm/alarm.component.html
@@ -51,24 +51,32 @@
     <span>Report Time: </span>
     <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker>
 
-    <!-- <button class="search" nz-button [nzType]="'primary'" (click)="getAlarmFormData()"><i class="anticon anticon-search"></i><span>Search</span></button> -->
-    <button class="search" nz-button [nzType]="'primary'"><i class="anticon anticon-search"></i><span>Search</span></button>
+    <button class="search" nz-button [nzType]="'primary'" (click)="getAlarmFormData()"><i class="anticon anticon-search"></i><span>Search</span></button>
 </div>
 </div>
 <div class="content" [@showHideAnimate]="state">
 <div class="title">
     <ul>
-        <li><h5>All</h5> <p>{{alarmList.all }}</p></li>
-        <li><h5>Closed</h5> <p>{{alarmList.closed }}</p></li>
-        <li><h5>Active</h5> <p>{{alarmList.activeNum }}</p></li>
+        <li>
+            <h5>All</h5>
+            <p>{{alarmList.all }}</p>
+        </li>
+        <li>
+            <h5>Closed</h5>
+            <p>{{alarmList.closed }}</p>
+        </li>
+        <li>
+            <h5>Active</h5>
+            <p>{{alarmList.activeNum }}</p>
+        </li>
     </ul>
 </div>
 <div class="chart">
     <h3>Alarm Chart</h3>
     <nz-radio-group [(ngModel)]="size">
-        <label nz-radio-button nzValue="day"> day </label>
-        <label nz-radio-button nzValue="month">month</label>
-      </nz-radio-group>
+        <label nz-radio-button nzValue="day" (click)="day()"> day </label>
+        <label nz-radio-button nzValue="month" (click)="month()">month</label>
+    </nz-radio-group>
     <div class="AlarmChart" [ngClass]="{'alarmChart-active':alarmShow}">
         <app-line [initData]="alarmChartInit" [chartData]="alarmChartData"></app-line>
     </div>
@@ -96,12 +104,12 @@
                 <td>{{item.specificProblem}}</td>
                 <td>{{item.sequence}}</td>
                 <td>{{item.status}}</td>
-                <td class="action"><a (click)="detailShow()"><i class="details"></i></a></td>
+                <td class="action"><a (click)="detailShow(item)"><i class="details"></i></a></td>
             </tr>
         </tbody>
     </nz-table>
 </div>
 </div>
 <div [@showHideAnimate]="state2">
-<app-details></app-details>
+<app-details [detailId]="detailId"></app-details>
 </div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.ts b/usecaseui-portal/src/app/alarm/alarm.component.ts
index d4372113..3f563b6e 100644
--- a/usecaseui-portal/src/app/alarm/alarm.component.ts
+++ b/usecaseui-portal/src/app/alarm/alarm.component.ts
@@ -13,108 +13,188 @@
     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 { Component, OnInit, Input, Output, EventEmitter, HostBinding, Pipe, PipeTransform } from '@angular/core';
 import { MyhttpService } from '../myhttp.service';
-import * as addDays from 'date-fns/add_days';
 import { showHideAnimate, slideToRight } from '../animates';
-
+import { DatePipe } from "@angular/common"
 @Component({
   selector: 'app-alarm',
   templateUrl: './alarm.component.html',
   styleUrls: ['./alarm.component.less'],
   animations: [
     showHideAnimate, slideToRight
-  ]
+  ],
+  providers: [DatePipe]
 })
 export class AlarmComponent implements OnInit {
   size = 'day';
   @HostBinding('@routerAnimate') routerAnimateState; //Routing animation
-  public currentPage:number=1;
-  public pageSize:number=5;
-  public sourceName:string='';
-  public priority:string ='';
-  public startTime:string ='';
-  public endTime:string ='';
-  public vfStatus:string ='';
+  public currentPage: number = 1;
+  public pageSize: number = 5;
+  public sourceName: string = '';
+  public priority: string = '';
+  public startTime: string = '';
+  public endTime: string = '';
+  public vfStatus: string = '';
+  public sourceNameList:Array<any> =['---auto---'];
   list: any;
-  sourcenames:any;
+  sourcenames: any;
 
 
   constructor(
-    private myhttp:MyhttpService) { }
-    ngOnInit() {
-      // this.getAlarmFormData();
-      // this. getSourceNames();
-      // this.getstatuscount();
-    }
+    private datePipe: DatePipe,
+    private myhttp: MyhttpService) { }
+  ngOnInit() {
+    this.getAlarmFormData();
+    this.getSourceNames();
+    // this.getstatuscount();
+  }
 
   // Filter box
-  sourceNameList = [];
-  sourceNameSelected = this.sourceNameList;
+  sourceNameSelected = this.sourceNameList[0];
 
-  priorityList = ['---auto---','Critical','Major','Minor','Warning'];
+  priorityList = ['---auto---', 'Critical', 'Major', 'Minor', 'Warning'];
   prioritySelected = this.priorityList[0];
 
-  
-  statusList = ['---auto---','active','Close'];
+
+  statusList = ['---auto---', 'active', 'Close'];
   statusSelected = this.statusList[0];
-  
-  choseSourceName(item){
-    console.log(item,'item1');
+
+  choseSourceName(item) {
+    if(item == "---auto---"){
+      this.sourceName = '';
+    }else{
+      this.sourceName = item;
+    }
     this.sourceNameSelected = item;
-    return this.sourceName = item;
+    
   }
-  chosePriority(item){
-    console.log(item);
+  chosePriority(item) {
     this.prioritySelected = item;
-    return this.priority = item;
+    if(item == "---auto---"){
+      this.priority = '';
+    }else{
+      this.priority = item;
+    }
   }
-  choseStatus(item){
-    console.log(item);
+  choseStatus(item) {
     this.statusSelected = item;
-    return this.vfStatus = item;
+    if(item == "---auto---"){
+      this.vfStatus = '';
+    }else{
+      this.vfStatus = item;
+    }
+  }
+  getSourceNames() {
+    this.myhttp.getSourceNames().subscribe((data) => {
+      for(let i=0;i<data.length;i++){
+        this.sourceNameList.push(data[i]);
+      }
+      this.sourceNameSelected = this.sourceNameList[0];
+    })
   }
-  //  getSourceNames(){
-  //   this.myhttp.getSourceNames().subscribe((data)=>{
-  //     this.sourceNameList=data;
-  //   console.log(data,'datass');
-  // })
-  // }
 
   // Date screening
-  dateRange =  [ addDays(new Date(), -30), new Date() ];
+  dateRange = [(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){
+
+  sort(e) {
 
   }
   // total
   alarmList = {
-    all:200,
-    closed:0,
-    activeNum:0
+    all: 200,
+    closed: 0,
+    activeNum: 0
   }
   // total data
-  // getstatuscount(){
-  //   this.myhttp.getstatuscount().subscribe((data)=>{
-  //     this.alarmList.activeNum = data[0];
-  //     this.alarmList.closed = data[1];
-      
-  //   })
-  // }
+  getstatuscount(){
+    this.myhttp.getstatuscount().subscribe((data)=>{
+      this.alarmList.activeNum = data[0];
+      this.alarmList.closed = data[1];
 
+    })
+  }
+  getAlarmFormData() { 
+     
+    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);
+  }
+  getAlarmChartData(event) {
+    let paramsObj = {
+      alarmSourceName: this.sourceName,
+      startTime: this.startTime,
+      endTime: this.endTime
+    }
+    this.myhttp.getHomePerformanceChartData(paramsObj)
+      .subscribe((data) => {
+        this.alarmChartData = {
+          series: [
+            { data: data.CPU },
+            { data: data.CPU },
+            { data: data.Memory }
+          ]
+        }
+      }, (err) => {
+        console.log(err);
+      })
+  }
+  // day alarmchartdata
+  day() {
+    let paramsObj = {
+      alarmSourceName: this.sourceName,
+      day:"day"
+    }
+    this.myhttp.getHomePerformanceChartData(paramsObj)
+      .subscribe((data) => {
+        this.alarmChartData = {
+          series: [
+            { data: data.CPU },
+            { data: data.CPU },
+            { data: data.Memory }
+          ]
+        }
+      }, (err) => {
+        console.log(err);
+      })
+  }
+  month() {
+    let paramsObj = {
+      alarmSourceName: this.sourceName,
+      day:"month"
+    }
+    this.myhttp.getHomePerformanceChartData(paramsObj)
+      .subscribe((data) => {
+        this.alarmChartData = {
+          series: [
+            { data: data.CPU },
+            { data: data.CPU },
+            { data: data.Memory }
+          ]
+        }
+      }, (err) => {
+        console.log(err);
+      })
+  }
   //Line chart
   alarmShow = false;
-  alarmChartData:Object;
-  alarmChartInit:Object = {
-    height:380,
-    option:{
+  alarmChartData: Object;
+  alarmChartInit: Object = {
+    height: 380,
+    option: {
       legend: {
         bottom: '0px',
         data: ['All', 'Active', 'Closed']
       },
+      tooltip: {
+        trigger: 'axis',
+      },
       dataZoom: [
         {
           type: 'slider',
@@ -124,91 +204,78 @@ export class AlarmComponent implements OnInit {
           height: 10,
           end: 40
         }
-    ],
+      ],
       series: [
         {
-            name: 'All',
-            type: 'line',
-            smooth: true,
-            showSymbol: false,
-            areaStyle: {
-              opacity: 0.8
-            },
-            //timeframe_one
-            data: [40, 45, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 45, 76, 88, 56, 33, 76, 45, 65,38, 52, 64, 58, 69, 87, 76, 33, 64, 87,40, 45, 38, 52, 64, 58, 69, 87, 76,40, 45, 38, 52, 64, 58, 69, 87, 76],
-            itemStyle: {
-              color: "#526b75"
-            },
-            lineStyle: {
-              width: 1,
-              opacity: 0.5
-            }
+          name: 'All',
+          type: 'line',
+          smooth: true,
+          showSymbol: false,
+          areaStyle: {
+            opacity: 0.8
+          },
+          //timeframe_one
+          data: [40, 45, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 45, 76, 88, 56, 33, 76, 45, 65, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 40, 45, 38, 52, 64, 58, 69, 87, 76, 40, 45, 38, 52, 64, 58, 69, 87, 76],
+          itemStyle: {
+            color: "#526b75"
+          },
+          lineStyle: {
+            width: 1,
+            opacity: 0.5
+          }
         },
         {
-            name: 'Active',
-            type: 'line',
-            smooth: true,
-            showSymbol: false,
-            areaStyle: {
-              opacity: 0.8
-            },
-            //timeframe_two
-            data: [32, 43, 23, 45, 63, 24, 54, 22, 32, 42, 42, 22, 23, 43, 32, 34, 42, 33, 42, 12,32, 43, 23, 45, 63, 24, 54, 22, 32, 42, 42, 22, 23, 43, 32, 34, 42, 33, 42, 12,32, 43, 23, 45, 63, 24, 54, 22],
-            itemStyle: {
-              color: "#fb6e6e"
-            },
-            lineStyle: {
-              width: 1,
-              opacity: 0.5
-            }
+          name: 'Active',
+          type: 'line',
+          smooth: true,//将图变得平缓
+          showSymbol: false,
+          areaStyle: {
+            opacity: 0.8
+          },
+          //timeframe_two
+          data: [32, 43, 23, 45, 63, 24, 54, 22, 32, 42, 42, 22, 23, 43, 32, 34, 42, 33, 42, 12, 32, 43, 23, 45, 63, 24, 54, 22, 32, 42, 42, 22, 23, 43, 32, 34, 42, 33, 42, 12, 32, 43, 23, 45, 63, 24, 54, 22],
+          itemStyle: {
+            color: "#fb6e6e"
+          },
+          lineStyle: {
+            width: 1,
+            opacity: 0.5
+          }
         },
         {
-            name: 'Closed',
-            type: 'line',
-            smooth: true,//
-            showSymbol: false,
-            areaStyle: {
-              opacity: 0.8
-            },
-            //timeframe_two
-            data: [12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5,12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5,12, 23, 13, 25, 33, 14, 34, 12, 125],
-            itemStyle: {
-              color: "#3fa8eb"
-            },
-            lineStyle: {
-              width: 1,
-              opacity: 0.5
-            }
+          name: 'Closed',
+          type: 'line',
+          smooth: true,//
+          showSymbol: false,
+          areaStyle: {
+            opacity: 0.8
+          },
+          //timeframe_two
+          data: [12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5, 12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5, 12, 23, 13, 25, 33, 14, 34, 12, 125],
+          itemStyle: {
+            color: "#3fa8eb"
+          },
+          lineStyle: {
+            width: 1,
+            opacity: 0.5
+          }
         }
       ]
     }
   };
-  getAlarmChartData(){
-    let paramsObj = {
-      alarmSourceName:this.sourceNameSelected
-    }
-    this.myhttp.getHomePerformanceChartData(paramsObj)
-      .subscribe((data)=>{
-        this.alarmChartData = {
-          series:[
-            {data:data.CPU},
-            {data:data.CPU},
-            {data:data.Memory}
-          ]
-        }
-      },(err)=>{
-        console.log(err);
-      })
-  }
+
   //Detail page title display
   detailshow = false;
   // Show hidden animation
   state = "show";
   state2 = "hide";
-  detailShow() {
+  detailId: number;
+  detailShow(item) {
     this.state = 'hide';
     this.state2 = 'show';
     this.detailshow = true;
+    // console.log(item);
+    this.detailId = item.eventId;
   }
   detailHide() {
     this.state = 'show';
@@ -216,22 +283,4 @@ export class AlarmComponent implements OnInit {
     this.detailshow = false;
   }
 
-
- 
-  getSelects:Object = {
-    countAll:0,
-    countClose:0,
-    countActive:0,
-    eventNameList:[],
-    sourceIdList:[],
-    reportingEntityNameList:[],
-    sourceNameList:[],
-};
-  // getAlarmFormData(){
-  //   this.myhttp.getAlarmFormData(this.currentPage,this.pageSize,this.sourceName,this.priority,this.startTime,this.endTime,this.vfStatus).subscribe((data)=>{
-  //       this.list = data.alarms;
-  //     // console.log(data,'data');
-  //   })
-  // }
-
 }