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   chartData: any = {
  24     xAxis: {
  25       data: [
  26         "2018-09-10 ",
  27         "2018-09-11",
  28         "2018-09-12",
  29         "2018-09-13",
  30         "2018-09-14",
  31         "2018-09-15",
  32         "2018-09-16",
  33         "2018-09-17",
  34         "2018-09-18",
  35         "2018-09-19",
  36         "2018-09-20",
  37         "2018-09-21",
  38         "2018-09-22"
  39       ]
  40     },
  41     series: [
  42       {
  43         data: [
  44           30,
  45           45,
  46           34,
  47           35,
  48           43,
  49           56,
  50           36,
  51           53,
  52           42,
  53           45,
  54           44,
  55           35,
  56           32
  57         ]
  58       },
  59       {
  60         data: [
  61           60,
  62           60,
  63           60,
  64           60,
  65           60,
  66           60,
  67           60,
  68           60,
  69           60,
  70           60,
  71           60,
  72           60,
  73           60
  74         ]
  75       }
  76     ]
  77   };
  78         initData: any = {
  79                 height: 320,
  80                 option: {
  81                         legend: { bottom: "0px", data: ["RATE", "MAXRATE"] },
  82                         xAxis: { data: [] },
  83                         series: [
  84                                 {
  85                                         name: "RATE",
  86                                         type: "line",
  87                                         itemStyle: { color: "#70ACEC" },
  88                                         data: [],
  89                                 },
  90         {
  91           name: 'MAXRATE',
  92           type: 'line',
  93           step: 'end',
  94           itemStyle: {
  95             color: "#3BCD79"
  96           },
  97           data: []
  98         }
  99                         ],
 100                 },
 101         };
 102
 103         initOpts: any;
 104         lineOption: any;
 105         chartIntance: any;
 106         updateOption: any;
 107
 108         instanceLists: any[] = [];
 109
 110   ngOnInit() {
 111     this.getFinishedInstanceInfo();
 112                 this.initOpts = {
 113                         renderer: "canvas",
 114                         height: this.initData.height,
 115                         width: this.initData.width,
 116                 };
 117                 this.lineOption = {
 118                         tooltip: this.initData.option.tooltip,
 119                         icon: "circle",
 120                         legend: this.initData.option.legend,
 121                         dataZoom: this.initData.option.dataZoom,
 122                         grid: {
 123                                 left: "0%",
 124                                 right: "3%",
 125                                 top: "10%",
 126                                 bottom: "18%",
 127                                 containLabel: true,
 128                         },
 129                         xAxis: {
 130                                 axisTick: {
 131                                         show: false,
 132                                 },
 133                                 axisLine: {
 134                                         show: false,
 135                                 },
 136                                 axisLabel: {
 137                                         color: "#3C4F8C",
 138                                 },
 139                                 data: this.initData.option.xAxis.data,
 140                         },
 141                         yAxis: {
 142                                 axisTick: {
 143                                         show: false,
 144                                 },
 145                                 axisLine: {
 146                                         show: false,
 147                                 },
 148                                 axisLabel: {
 149                                         color: "#3C4F8C",
 150                                 },
 151                                 splitLine: {
 152                                         lineStyle: {
 153                                                 type: "dashed",
 154                                         },
 155                                 },
 156                         },
 157                         series: this.initData.option.series,
 158                 };
 159         }
 160
 161         chartInit(chart) {
 162                 this.chartIntance = chart;
 163         }
 164
 165   getFinishedInstanceInfo() {
 166     this.myHttp.getFinishedInstanceInfo().subscribe(
 167       (response) => {
 168         const { code, message, data } = response;
 169         if (code !== 200) {
 170           this.nzMessage.error(message);
 171           return;
 172         }
 173         this.instanceLists = [...data];
 174       },
 175       (err) => {
 176         console.log(err);
 177       }
 178     )
 179   }
 180
 181         queryInstancePerformance(instanceId) {
 182     this.myHttp.queryInstancePerformanceData({ instanceId}).subscribe(
 183       (response) => {
 184         const { code, message, data } = response;
 185         if (code !== 200) {
 186           this.nzMessage.error(message);
 187           return;
 188         }
 189         if(this.chartIntance){
 190           this.updateOption = data;
 191         }
 192       },
 193       (err) => {
 194         console.log(err);
 195       }
 196     )
 197   }
 198
 199 }