gerrit.onap Code Review - usecase-ui.git/blob

   1 import { HttpClient } from "@angular/common/http";
   2 import { Component, OnInit } from "@angular/core";
   3 import { ActivatedRoute } from '@angular/router';
   4 import { NzMessageService } from "ng-zorro-antd";
   5 import { intentBaseService } from "../../../../core/services/intentBase.service";
   6
   7 @Component({
   8         selector: "app-monitor-facps-service",
   9         templateUrl: "./monitor-facps-service.component.html",
  10         styleUrls: ["./monitor-facps-service.component.less"],
  11 })
  12 export class MonitorFacpsServiceComponent implements OnInit {
  13
  14   constructor(
  15     private nzMessage: NzMessageService,
  16     private myHttp: intentBaseService,
  17     private http: HttpClient,
  18     private route: ActivatedRoute
  19   ) {}
  20
  21         selectedSubscriptionType: string = "";
  22         selectedServiceInstance: string = "";
  23         selectedTopology: string = "";
  24   instanceId: string = "";
  25         initData: any = {
  26                 height: 320,
  27                 option: {
  28                         legend: { bottom: "0px", data: ["RATE", "MAXRATE"] },
  29                         xAxis: { data: [] },
  30                         series: [
  31                                 {
  32                                         name: "RATE",
  33                                         type: "line",
  34                                         itemStyle: { color: "#70ACEC" },
  35                                         data: [],
  36                                 },
  37         {
  38           name: 'MAXRATE',
  39           type: 'line',
  40           step: 'end',
  41           itemStyle: {
  42             color: "#3BCD79"
  43           },
  44           data: []
  45         }
  46                         ],
  47       tooltip: {
  48         trigger: 'axis',
  49       },
  50                 },
  51         };
  52
  53         initOpts: any;
  54         lineOption: any;
  55         chartIntance: any;
  56         updateOption: any;
  57
  58         instanceLists: any[] = [];
  59   progressSetTimeOut: any;
  60
  61   ngOnInit() {
  62     this.route.queryParams.subscribe(
  63       params => {
  64         this.instanceId= params['instanceId'];
  65         if (this.instanceId) {
  66           this.queryInstancePerformance(this.instanceId);
  67         }
  68       }
  69     );
  70     this.getFinishedInstanceInfo();
  71                 this.initOpts = {
  72                         renderer: "canvas",
  73                         height: this.initData.height,
  74                         width: this.initData.width,
  75                 };
  76                 this.lineOption = {
  77                         tooltip: this.initData.option.tooltip,
  78                         icon: "circle",
  79                         legend: this.initData.option.legend,
  80                         dataZoom: this.initData.option.dataZoom,
  81                         grid: {
  82                                 left: "0%",
  83                                 right: "3%",
  84                                 top: "10%",
  85                                 bottom: "18%",
  86                                 containLabel: true,
  87                         },
  88                         xAxis: {
  89         type: "category",
  90                                 axisTick: {
  91                                         show: false,
  92                                 },
  93                                 axisLine: {
  94                                         show: false,
  95                                 },
  96                                 axisLabel: {
  97           interval: 0,
  98           show: true,
  99           textStyle: {
 100             color: "#a9a9a9",
 101             fontSize: 10
 102           },
 103           rotate: 40,
 104           showMinLabel: true,
 105           showMaxLabel: true,
 106                                         color: "#3C4F8C",
 107                                 },
 108                                 data: this.initData.option.xAxis.data,
 109                         },
 110                         yAxis: {
 111                                 axisTick: {
 112                                         show: false,
 113                                 },
 114                                 axisLine: {
 115                                         show: false,
 116                                 },
 117                                 axisLabel: {
 118                                         color: "#3C4F8C",
 119                                 },
 120                                 splitLine: {
 121                                         lineStyle: {
 122                                                 type: "dashed",
 123                                         },
 124                                 },
 125                         },
 126                         series: this.initData.option.series,
 127                 };
 128         }
 129
 130         chartInit(chart) {
 131                 this.chartIntance = chart;
 132         }
 133
 134   getFinishedInstanceInfo() {
 135     this.myHttp.getFinishedInstanceInfo().subscribe(
 136       (response) => {
 137         const { code, message, data } = response;
 138         if (code !== 200) {
 139           this.nzMessage.error(message);
 140           return;
 141         }
 142         this.instanceLists = [...data];
 143       },
 144       (err) => {
 145         console.log(err);
 146       }
 147     )
 148   }
 149
 150         queryInstancePerformance(instanceId) {
 151     const requery = () => {
 152       this.myHttp.queryInstancePerformanceData({ instanceId}).subscribe(
 153         (response) => {
 154           const { code, message, data } = response;
 155           if (code !== 200) {
 156             this.nzMessage.error(message);
 157           } else {
 158             if(this.chartIntance) {
 159               this.updateOption = data;
 160             }
 161           }
 162
 163           if (this.progressSetTimeOut) {
 164             clearInterval(this.progressSetTimeOut);
 165           }
 166
 167           this.progressSetTimeOut = setTimeout(() => {
 168             requery();
 169           }, 5000);
 170         },
 171         (err) => {
 172           console.log(err);
 173         }
 174       )
 175     }
 176     requery();
 177   }
 178 }