1c5017c4d4abd35463d87961b7e14a72636e8319
[usecase-ui.git] /
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                 },
46         };
47   
48         initOpts: any;
49         lineOption: any;
50         chartIntance: any;
51         updateOption: any;
52
53         instanceLists: any[] = [];
54   progressSetTimeOut: any;
55
56   ngOnInit() {
57     this.getFinishedInstanceInfo();
58                 this.initOpts = {
59                         renderer: "canvas",
60                         height: this.initData.height,
61                         width: this.initData.width,
62                 };
63                 this.lineOption = {
64                         tooltip: this.initData.option.tooltip,
65                         icon: "circle",
66                         legend: this.initData.option.legend,
67                         dataZoom: this.initData.option.dataZoom,
68                         grid: {
69                                 left: "0%",
70                                 right: "3%",
71                                 top: "10%",
72                                 bottom: "18%",
73                                 containLabel: true,
74                         },
75                         xAxis: {
76                                 axisTick: {
77                                         show: false,
78                                 },
79                                 axisLine: {
80                                         show: false,
81                                 },
82                                 axisLabel: {
83                                         color: "#3C4F8C",
84                                 },
85                                 data: this.initData.option.xAxis.data,
86                         },
87                         yAxis: {
88                                 axisTick: {
89                                         show: false,
90                                 },
91                                 axisLine: {
92                                         show: false,
93                                 },
94                                 axisLabel: {
95                                         color: "#3C4F8C",
96                                 },
97                                 splitLine: {
98                                         lineStyle: {
99                                                 type: "dashed",
100                                         },
101                                 },
102                         },
103                         series: this.initData.option.series,
104                 };
105         }
106
107         chartInit(chart) {
108                 this.chartIntance = chart;
109         }
110
111   getFinishedInstanceInfo() {
112     this.myHttp.getFinishedInstanceInfo().subscribe(
113       (response) => {
114         const { code, message, data } = response;
115         if (code !== 200) {
116           this.nzMessage.error(message);
117           return;
118         }
119         this.instanceLists = [...data];
120       },
121       (err) => {
122         console.log(err);
123       }
124     )
125   }
126
127         queryInstancePerformance(instanceId) {
128     const requery = () => {
129       this.myHttp.queryInstancePerformanceData({ instanceId}).subscribe(
130         (response) => {
131           const { code, message, data } = response;
132           if (code !== 200) {
133             this.nzMessage.error(message);
134           } else {
135             if(this.chartIntance) {
136               this.updateOption = data;
137             }
138           }
139
140           if (this.progressSetTimeOut) {
141             clearInterval(this.progressSetTimeOut);
142           }
143           
144           this.progressSetTimeOut = setTimeout(() => {
145             requery();
146           }, 5000);
147         },
148         (err) => {
149           console.log(err);
150         }
151       )
152     }
153     requery();
154   }
155 }