gerrit.onap Code Review - portal/sdk.git/blob

   1 import {Component, OnInit, Input, AfterViewInit, ViewChild, ElementRef, ChangeDetectorRef} from '@angular/core';
   2 import { GridsterConfig, GridType, GridsterItem } from 'angular-gridster2';
   3 import { MatTableDataSource } from '@angular/material/table';
   4 import { MatPaginator } from '@angular/material/paginator';
   5 import { DashboardReportService } from './dashboard-report.service';
   6 import { MatSort } from '@angular/material';
   7 import { Router } from '@angular/router';
   8 import { RunService } from '../../run.service';
   9 import {FormControl} from '@angular/forms';
  10 import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
  11 import {environment} from '../../../../../environments/environment';
  12 import {DisplayHtml} from '../../../../pages/analytics/Report_List/Report/display-html';
  13 import {ErrorModalComponent} from '../../../../modals/error-modal/error-modal.component';
  14
  15 export interface PeriodicElement {
  16
  17 }
  18
  19 const ELEMENT_DATA: PeriodicElement[] = [{}];
  20
  21 @Component({
  22     selector: 'app-run-dashboard-report',
  23     templateUrl: './run-dashboard-report.component.html',
  24     styleUrls: ['./run-dashboard-report.component.css']
  25 })
  26
  27 export class RunDashboardReportComponent implements AfterViewInit {
  28
  29     @Input('reportId') inputReportId: string;
  30     @Input('queryString') queryString: string;
  31     @Input('hitCnt') hitCnt: number;
  32     @Input('reportType') reportType: string;
  33     @Input('parentId') parentId: string;
  34     dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
  35     @ViewChild(MatPaginator, {static: false} as any) paginator: MatPaginator;
  36     @ViewChild(MatSort, {static: false} as any) sort: MatSort;
  37     @ViewChild('iframe') iframe: ElementRef;
  38     options: GridsterConfig;
  39     dashboard: Array<GridsterItem> = [];
  40     displayedColumns: string[];
  41     IncomingReportId: string;
  42     displayedColumnsArr: string[];
  43     displayedRowObj: {}[];
  44     formFieldPresent: boolean;
  45     showSpinner: boolean;
  46     formFieldList: {}[];
  47     isReady: boolean;
  48     responseFormFieldListLength: number;
  49     NEWdisplayedColumns: string[];
  50     initCnt: number;
  51     reportName: string;
  52     showDashboardReport: boolean;
  53     checkCnt: number;
  54     initialQueryString: string;
  55     initCounter: number;
  56     runButtonHitCounter: number;
  57     showChart = false;
  58     displayColumValue: string;
  59     displayTotal: any[];
  60     private chartRunUrl: string;
  61     replaceDisplayValue: String;
  62 saveResponseObj:any;
  63
  64     constructor(private _dashboardReportService: DashboardReportService,
  65         private _router: Router,
  66         private _runService: RunService,
  67         private ngModal: NgbModal,
  68         private changeDetectorRefs: ChangeDetectorRef,
  69         public ngbModal: NgbModal) {
  70         this.initCounter = 0;
  71         this.runButtonHitCounter = 0;
  72     }
  73
  74     ngOnInit() {
  75         this.initialQueryString = this.queryString;
  76         this.initCounter++;
  77         this.runButtonHitCounter = this.hitCnt;
  78         if (this.reportType === 'Chart') {
  79             this.showChart = true;
  80         }
  81
  82         this.initialProcesses();
  83     }
  84
  85     initialProcesses() {
  86         // this.dataSource.paginator = this.paginator;
  87     }
  88
  89     ngOnChanges() {
  90         if (this.initialQueryString !== this.queryString && this.initCounter > 0 && this.runButtonHitCounter !== this.hitCnt) {
  91             this.initialQueryString = this.queryString;
  92             this.runButtonHitCounter = this.hitCnt;
  93             this.initialProcesses();
  94             this.afterViewInitProcesses();
  95         } else {
  96             this.runButtonHitCounter = this.hitCnt;
  97             this.initialQueryString = this.queryString;
  98         }
  99     }
 100
 101     ngAfterViewInit() {
 102         this.afterViewInitProcesses();
 103     }
 104
 105     afterViewInitProcesses() {
 106         if (this.showChart) {
 107             this.chartRunUrl = environment.baseUrl + 'raptor.htm?action=chart.run&c_master=' +
 108                 this.inputReportId + this.queryString + '&refresh=Y&display_content=Y&r_page=0';
 109             this.iframe.nativeElement.setAttribute('src', this.chartRunUrl);
 110             this.showSpinner = false;
 111         } else {
 112
 113             this.displayedColumnsArr = [];
 114             this.displayedRowObj = [];
 115             this.displayedColumns = [];
 116             this.formFieldList = [];
 117             this.showSpinner = true;
 118             this.isReady = false;
 119             this.NEWdisplayedColumns = [];
 120             this.displayTotal = [];
 121             if (localStorage.getItem(this.inputReportId)) {
 122                 this.postFetchingReportDataFn(JSON.parse(localStorage.getItem(this.inputReportId)));
 123                 localStorage.removeItem(this.inputReportId);
 124             } else {
 125                 this._dashboardReportService.getReportDataWithFormFields(this.queryString, this.inputReportId)
 126                     .subscribe((response) => {
 127                         if (response['errormessage']){
 128                             this.openErrorModel(response['errormessage']);
 129                             this.showSpinner = false;
 130                             this.changeDetectorRefs.detectChanges();
 131                         } else {
 132                             this.postFetchingReportDataFn(response);
 133                         }
 134                     }, error => {
 135                         this.openErrorModel('Error occurred while running report: ' + this.inputReportId);
 136                         this.showSpinner = false;
 137                         this.changeDetectorRefs.detectChanges();
 138                     });
 139             }
 140         }
 141     }
 142
 143     postFetchingReportDataFn(response: any){
 144         this.saveResponseObj = response;
 145         this.formFieldPresent = false;
 146         this.responseFormFieldListLength = 0;
 147         this.reportName = response['reportName'];
 148         let columnCntr = 0;
 149         this.displayedColumnsArr.push('RowNum,RowNum');
 150         while (response['reportDataColumns'][columnCntr]) {
 151             this.displayedColumnsArr.push(response['reportDataColumns'][columnCntr]['columnTitle'] + ','
 152                 + response['reportDataColumns'][columnCntr]['colId']);
 153             columnCntr++;
 154         }
 155         let totalCnt = 0;
 156         while (response['reportTotalDataRows'][totalCnt]) {
 157             this.displayTotal.push(response['reportTotalDataRows'][totalCnt]);
 158             totalCnt++;
 159         }
 160         let rdr_cntr = 0;
 161         while (response['reportDataRows'][rdr_cntr]) {
 162             let dca_cntr = 0;
 163             const obj = {};
 164             const reportDataRows = response['reportDataRows'][rdr_cntr];
 165             while (this.displayedColumnsArr[dca_cntr]) {
 166                 const rowColumnId = this.displayedColumnsArr[dca_cntr].split(',')[1];
 167                 if (reportDataRows[rowColumnId]) {
 168                     let drillDownHtml = '';
 169                     let displayValue = '';
 170                     drillDownHtml = reportDataRows[rowColumnId]['drillDownURL'];
 171                     displayValue = reportDataRows[rowColumnId]['displayValue'];
 172                     if (drillDownHtml !== null &&
 173                         drillDownHtml.length > 0 &&
 174                         !displayValue.includes('linkToReport')) {
 175                         const value = this.convertToLinkToReport(drillDownHtml);
 176                         if (value.length > 0) {
 177                             this.replaceDisplayValue = value + ',' +
 178                                 reportDataRows[rowColumnId]['displayValue'];
 179                         } else {
 180                             this.replaceDisplayValue = reportDataRows[rowColumnId]['displayValue'];
 181                         }
 182                     } else {
 183                         this.replaceDisplayValue = reportDataRows[rowColumnId]['displayValue'];
 184                     }
 185                     let displayObj: DisplayHtml = new class implements DisplayHtml {
 186                         'background-color': string;
 187                         'font-family': string;
 188                         'font-size': string;
 189                         'font-style': string;
 190                         'font-weight': string;
 191                         'text-align': string;
 192                         'text-decoration': string;
 193                         color: string;
 194                     };
 195                     if (reportDataRows[rowColumnId]['displayValueHtml'].includes('{')) {
 196                         displayObj = JSON.parse(reportDataRows[rowColumnId]['displayValueHtml']);
 197                     }
 198                     displayObj['text-align'] = reportDataRows[rowColumnId]['alignment'];
 199                     obj['RowNum'] = (rdr_cntr + 1) + '|{"text-align":"center"}';
 200                     if (this.replaceDisplayValue.includes('linkToReport') || this.replaceDisplayValue.includes('linkToMail')) {
 201                         obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue.split(',').join('|')
 202                             + '|' + JSON.stringify(displayObj);
 203                     } else {
 204                         obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue
 205                             + '|' + JSON.stringify(displayObj);
 206                     }
 207                 }
 208                 dca_cntr++;
 209             }
 210             this.displayedRowObj.push(obj);
 211             rdr_cntr++;
 212         }
 213         for (let pushCounter = 0; pushCounter < this.displayedColumnsArr.length; pushCounter++) {
 214             this.displayedColumns.push(this.displayedColumnsArr[pushCounter].split(',')[1]);
 215         }
 216         this.showSpinner = false;
 217         this.dataSource = new MatTableDataSource<PeriodicElement>(this.displayedRowObj);
 218         this.dataSource.sort = this.sort;
 219         this.changeDetectorRefs.detectChanges();
 220     }
 221
 222     linkToReport(reportID: string, queryParameters: string) {
 223         localStorage.setItem(this.inputReportId, JSON.stringify(this.saveResponseObj));
 224         if (sessionStorage.length === 0) {
 225             sessionStorage.setItem('1', this.parentId + '|' + this.queryString);
 226         } else {
 227             let length = sessionStorage.length;
 228             length++;
 229             sessionStorage.setItem(length.toString(), this.parentId + '|' + this.queryString);
 230         }
 231         this._router.navigate(['v2/run', reportID, queryParameters]);
 232     }
 233
 234     linkToMail(mailId: string) {
 235         const email = 'mailto:' + mailId;
 236         window.location.href = email;
 237     }
 238
 239     applyFilter(filterValue: string) {
 240         this.dataSource.filter = filterValue.trim().toLowerCase();
 241     }
 242
 243     setStyle(rowData: string) {
 244         let styles = '';
 245         if (rowData.split('|')[0] === 'linkToReport') {
 246             styles = rowData.split('|')[4];
 247         } else if (rowData.split('|')[0] === 'linkToMail') {
 248             styles = rowData.split('|')[3];
 249         } else {
 250             styles = rowData.split('|')[1];
 251         }
 252         if (styles !== undefined && styles.includes('{')) {
 253             return JSON.parse(styles);
 254         } else {
 255             return {};
 256         }
 257     }
 258
 259     getDisplayTotal(keys: any) {
 260         if (this.displayTotal.length > 0) {
 261             return this.displayTotal[0][keys].displayValue;
 262         } else {
 263             return '';
 264         }
 265     }
 266
 267     convertToLinkToReport(value: string) {
 268         value = value.replace(/;/g, '');
 269         let outPut = '';
 270         while (value.includes('c_master=')) {
 271             const index = value.indexOf('c_master=');
 272             if (index > 0) {
 273                 value = value.substring(index, value.length);
 274             } else if (index === 0) {
 275                 value = value.replace('c_master=', '');
 276             }
 277         }
 278         const split = value.split('&');
 279         // const spltFirst = split[0].split('=');
 280         if (split[1].length <= 0) {
 281             return outPut;
 282         }
 283         outPut = 'linkToReport,' + split[0] + ',';
 284         let splitCounter = 1;
 285         for (splitCounter = 1; splitCounter < split.length; splitCounter++) {
 286             if (!split[splitCounter].includes('LOGIN_ID=') &&
 287                 !split[splitCounter].includes('display_content=') &&
 288                 !split[splitCounter].includes('drilldown_index=') &&
 289                 !split[splitCounter].includes('show_back_btn=') &&
 290                 !split[splitCounter].includes('r_action')) {
 291                 outPut = outPut + '&' + split[splitCounter];
 292             }
 293         }
 294         return outPut;
 295     }
 296
 297     openErrorModel(_message: string) {
 298         const modalInfoRef = this.ngbModal.open(ErrorModalComponent);
 299         modalInfoRef.componentInstance.message = _message;
 300         return modalInfoRef;
 301     }
 302
 303 }