so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.ts

   1 /**
   2 ============LICENSE_START=======================================================
   3  Copyright (C) 2018 Ericsson. All rights reserved.
   4 ================================================================================
   5 Licensed under the Apache License, Version 2.0 (the "License");
   6 you may not use this file except in compliance with the License.
   7 You may obtain a copy of the License at
   8
   9     http://www.apache.org/licenses/LICENSE-2.0
  10
  11 Unless required by applicable law or agreed to in writing, software
  12 distributed under the License is distributed on an "AS IS" BASIS,
  13 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14 See the License for the specific language governing permissions and
  15  limitations under the License.
  16
  17 SPDX-License-Identifier: Apache-2.0
  18 ============LICENSE_END=========================================================
  19
  20 @authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
  21 */
  22
  23 import { Component, OnInit } from '@angular/core';
  24 import { DataService } from '../data.service';
  25 import { ActivatedRoute, Router } from "@angular/router";
  26 import { Process } from '../model/process.model';
  27
  28 import { ProcessInstanceId } from '../model/processInstanceId.model';
  29 import { ToastrNotificationService } from '../toastr-notification-service.service';
  30 import { MatSelectModule } from '@angular/material/select';
  31 import { ViewEncapsulation } from '@angular/core';
  32 import { FormsModule } from '@angular/forms';
  33 import { MatFormFieldModule, MatInputModule } from '@angular/material';
  34 import { SearchData } from '../model/searchData.model';
  35 import { MatDatepickerModule } from '@angular/material/datepicker';
  36 import { FormControl } from '@angular/forms';
  37 import { SearchRequest } from '../model/SearchRequest.model';
  38 import { ElementRef } from '@angular/core';
  39 import { Input } from '@angular/core';
  40 import { NgxSpinnerService } from 'ngx-spinner';
  41
  42 @Component({
  43   selector: 'app-home',
  44   templateUrl: './home.component.html',
  45   styleUrls: ['./home.component.scss'],
  46   encapsulation: ViewEncapsulation.None
  47 })
  48
  49 export class HomeComponent implements OnInit {
  50
  51   totalVal = 0;
  52   completeVal = 0;
  53   inProgressVal = 0;
  54   failedVal = 0;
  55   pendingVal = 0;
  56   unlockedVal = 0;
  57   percentageComplete = 0;
  58   percentageFailed = 0;
  59   percentageInProg = 0;
  60   percentagePending = 0;
  61   percentageUnlocked = 0;
  62
  63   options = [{ name: "EQUAL", value: "EQ" }, { name: "NOT EQUAL", value: "NEQ" }, { name: "LIKE", value: "LIKE" }];
  64   statusOptions = [{ name: "ALL", value: "ALL" }, { name: "COMPLETE", value: "COMPLETE" }, { name: "IN_PROGRESS", value: "IN_PROGRESS" },
  65   { name: "FAILED", value: "FAILED" }, { name: "PENDING", value: "PENDING" }, { name: "UNLOCKED", value: "UNLOCKED" }];
  66
  67   hourOptions = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11",
  68     "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];
  69
  70   minuteOptions = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15",
  71     "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35",
  72     "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55",
  73     "56", "57", "58", "59"];
  74
  75   processData: Process[];
  76   searchData: SearchData;
  77
  78   startingDate: Date;
  79
  80   displayedColumns = ['requestId', 'serviceInstanceId', 'serviceIstanceName', 'networkId', 'requestStatus', 'serviceType', 'startTime', 'endTime'];
  81
  82   constructor(private route: ActivatedRoute, private data: DataService,
  83     private router: Router, private popup: ToastrNotificationService,
  84     private spinner: NgxSpinnerService) {
  85     this.searchData = new SearchData();
  86   }
  87
  88   makeCall() {
  89     this.spinner.show();
  90
  91     var search = this.searchData.getSearchRequest().subscribe((result: SearchRequest) => {
  92
  93       this.data.retrieveInstance(result.getFilters(), result.getStartTimeInMilliseconds(), result.getEndTimeInMilliseconds())
  94         .subscribe((data: Process[]) => {
  95           this.spinner.hide();
  96           this.processData = data;
  97           this.popup.info("Number of records found: " + data.length)
  98
  99           // Calculate Statistics for Service Statistics tab
 100           this.completeVal = this.processData.filter(i => i.requestStatus === "COMPLETE").length;
 101           this.inProgressVal = this.processData.filter(i => i.requestStatus === "IN_PROGRESS").length;
 102           this.failedVal = this.processData.filter(i => i.requestStatus === "FAILED").length;
 103           this.pendingVal = this.processData.filter(i => i.requestStatus === "PENDING").length;
 104           this.unlockedVal = this.processData.filter(i => i.requestStatus === "UNLOCKED").length;
 105           this.totalVal = this.processData.length;
 106
 107           // Calculate percentages to 2 decimal places and compare to 0 to avoid NaN error
 108           if (this.totalVal != 0) {
 109             this.percentageComplete = Math.round(((this.completeVal / this.totalVal) * 100) * 100) / 100;
 110             this.percentageFailed = Math.round(((this.failedVal / this.totalVal) * 100) * 100) / 100;
 111             this.percentageInProg = Math.round(((this.inProgressVal / this.totalVal) * 100) * 100) / 100;
 112             this.percentagePending = Math.round(((this.pendingVal / this.totalVal) * 100) * 100) / 100;
 113             this.percentageUnlocked = Math.round(((this.unlockedVal / this.totalVal) * 100) * 100) / 100;
 114           }
 115           console.log("COMPLETE: " + this.completeVal);
 116           console.log("FAILED: " + this.failedVal);
 117         }, error => {
 118           console.log(error);
 119           this.popup.error("Unable to perform search Error code:" + error.status);
 120           this.spinner.hide();
 121         });
 122     }, error => {
 123       console.log("Data validation error " + error);
 124       this.popup.error(error);
 125       this.spinner.hide();
 126     });
 127   }
 128
 129   getProcessIsntanceId(requestId: string) {
 130     this.spinner.show();
 131
 132     var response = this.data.getProcessInstanceId(requestId).subscribe((data) => {
 133       if (data.status == 200) {
 134         this.spinner.hide();
 135         var processInstanceId = (data.body as ProcessInstanceId).processInstanceId;
 136         this.router.navigate(['/details/' + processInstanceId]);
 137       } else {
 138         this.popup.error('No process instance id found: ' + requestId);
 139         this.spinner.hide();
 140         console.log('No process instance id found: ' + requestId);
 141       }
 142     });
 143   }
 144
 145   ngOnInit() {
 146
 147   }
 148 }