summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.ts
blob: f86f02c144e21f9a74996cb3b3d48fb1826a1363 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
import { HttpClient } from "@angular/common/http";
import { Component, OnInit } from "@angular/core";
import { NzMessageService } from "ng-zorro-antd";
import { intentBaseService } from "../../../../core/services/intentBase.service";

@Component({
	selector: "app-monitor-facps-service",
	templateUrl: "./monitor-facps-service.component.html",
	styleUrls: ["./monitor-facps-service.component.less"],
})
export class MonitorFacpsServiceComponent implements OnInit {

  constructor(
    private nzMessage: NzMessageService,
    private myHttp: intentBaseService,
    private http: HttpClient
  ) {}
  
	selectedSubscriptionType: string = "";
	selectedServiceInstance: string = "";
	selectedTopology: string = "";
  instanceId: string = "";
	initData: any = {
		height: 320,
		option: {
			legend: { bottom: "0px", data: ["RATE", "MAXRATE"] },
			xAxis: { data: [] },
			series: [
				{
					name: "RATE",
					type: "line",
					itemStyle: { color: "#70ACEC" },
					data: [],
				},
        {
          name: 'MAXRATE',
          type: 'line',
          step: 'end',
          itemStyle: {
            color: "#3BCD79"
          },
          data: []
        }
			],
      tooltip: {
        trigger: 'axis',
      },
		},
	};
  
	initOpts: any;
	lineOption: any;
	chartIntance: any;
	updateOption: any;

	instanceLists: any[] = [];
  progressSetTimeOut: any;

  ngOnInit() {
    this.getFinishedInstanceInfo();
		this.initOpts = {
			renderer: "canvas",
			height: this.initData.height,
			width: this.initData.width,
		};
		this.lineOption = {
			tooltip: this.initData.option.tooltip,
			icon: "circle",
			legend: this.initData.option.legend,
			dataZoom: this.initData.option.dataZoom,
			grid: {
				left: "0%",
				right: "3%",
				top: "10%",
				bottom: "18%",
				containLabel: true,
			},
			xAxis: {
        type: "category",
				axisTick: {
					show: false,
				},
				axisLine: {
					show: false,
				},
				axisLabel: {
          interval: 0,
          show: true,
          textStyle: {
            color: "#a9a9a9",
            fontSize: 10
          },
          rotate: 40,
          showMinLabel: true,
          showMaxLabel: true,
					color: "#3C4F8C",
				},
				data: this.initData.option.xAxis.data,
			},
			yAxis: {
				axisTick: {
					show: false,
				},
				axisLine: {
					show: false,
				},
				axisLabel: {
					color: "#3C4F8C",
				},
				splitLine: {
					lineStyle: {
						type: "dashed",
					},
				},
			},
			series: this.initData.option.series,
		};
	}

	chartInit(chart) {
		this.chartIntance = chart;
	}

  getFinishedInstanceInfo() {
    this.myHttp.getFinishedInstanceInfo().subscribe(
      (response) => {
        const { code, message, data } = response;
        if (code !== 200) {
          this.nzMessage.error(message);
          return;
        }
        this.instanceLists = [...data];
      },
      (err) => {
        console.log(err);
      }
    )
  }

	queryInstancePerformance(instanceId) {
    const requery = () => {
      this.myHttp.queryInstancePerformanceData({ instanceId}).subscribe(
        (response) => {
          const { code, message, data } = response;
          if (code !== 200) {
            this.nzMessage.error(message);
          } else {
            if(this.chartIntance) {
              this.updateOption = data;
            }
          }

          if (this.progressSetTimeOut) {
            clearInterval(this.progressSetTimeOut);
          }
          
          this.progressSetTimeOut = setTimeout(() => {
            requery();
          }, 5000);
        },
        (err) => {
          console.log(err);
        }
      )
    }
    requery();
  }
}