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

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