Raptor backend java API Code(Analytics), UI Code(Overlay) and pages

component in os project

Issue-ID: PORTAL-902
Change-Id: Id297d9493a77e6816ed0f2a82c15b2eaa1e57a72
Signed-off-by: Sudarshan Kumar <sudarshan.kumar@att.com>

8 files changed, 1202 insertions, 685 deletions

diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-dashboard-report/run-dashboard-report.component.css b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-dashboard-report/run-dashboard-report.component.css
index e9b4c87f..c57d7287 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-dashboard-report/run-dashboard-report.component.css
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-dashboard-report/run-dashboard-report.component.css
@@ -1,4 +1,6 @@
-
+.submit-approval-btn{
+  display: contents;
+}
 .lds-ring {
   display: inline-block;
   position: relative;
@@ -9,11 +11,11 @@
   box-sizing: border-box;
   display: block;
   position: absolute;
-  width: 80px;
-  height: 80px;
+  width: 35px;
+  height: 35px;
   margin: 6px;
-  margin-top: -10px;
-  border: 10px solid #006496;
+  margin-top: 40px;
+  border: 6px solid #006496;
   border-radius: 80%;
   animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
   border-color: #006496 transparent transparent transparent;
@@ -46,13 +48,21 @@ table {
     overflow: auto;
   }
 
+  td.mat-cell{
+  padding-left: 3px;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-right: 0.1px solid gray;
+  border-left: 0.1px solid gray;
+}
+.mat-icon-delete{
+  color: #006496;
+  cursor: pointer;
+}
   
 
 .app-data-table {
-    margin-top: 35px;
-    /* margin-left: 250px;
-    margin-right: 250px; */
-   
+    margin-top: 0px;
   }
 
   
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-dashboard-report/run-dashboard-report.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-dashboard-report/run-dashboard-report.component.html
index b8fa314a..08ae8d42 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-dashboard-report/run-dashboard-report.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-dashboard-report/run-dashboard-report.component.html
@@ -1,65 +1,73 @@
+<span class="ecomp-spinner" *ngIf="showSpinner"></span>   
 
-<div *ngIf="showSpinner">
-  <div class="lds-ring">
-    <div></div>
-    <div></div>
-    <div></div>
-    <div></div>
-  </div>
-</div>
+<div *ngIf="!showChart">  
+    <div class="app-data-table">
+        <div class="app-data-table-fixed-height">
+            <div class="example-container">
+                <table [dataSource]="dataSource" mat-table matSort>
+                    <div *ngFor="let keys of displayedColumns; let i = index">
+                        <ng-container matColumnDef="{{keys}}">
+                            <th *matHeaderCellDef mat-header-cell
+                                mat-sort-header>{{displayedColumnsArr[i].split(",")[0]}}</th>
+                            <td *matCellDef="let row" mat-cell>
+                                <div *ngIf="row[keys].split('|')[0] == 'linkToReport'"
+                                     [ngStyle]="setStyle(row[keys].split('|')[4])">
+                                    <a (click)="linkToReport(row[keys].split('|')[1], row[keys].split('|')[2])"
+                                       [routerLink]="">{{row[keys].split('|')[3]}}</a>
+                                </div>
+                                <div *ngIf="row[keys].split('|')[0] == 'linkToFeedback'"
+                                     [ngStyle]="setStyle(row[keys].split('|')[4])">
+                                    <a (click)="linkToFeedback(row[keys].split('|')[1], row[keys].split('|')[2])"
+                                       [routerLink]="">{{row[keys].split('|')[3]}}</a>
+                                </div>
+                                <div *ngIf="row[keys].split('|')[0] == 'linkToMail'"
+                                     [ngStyle]="setStyle(row[keys].split('|')[3])">
+                                    <a (click)="linkToMail(row[keys].split('|')[1])"
+                                       [routerLink]="">{{row[keys].split('|')[2]}}</a>
+                                </div>
+                                <div *ngIf="row[keys].split('|')[0] == 'clickToDownload' ">
+								<mat-icon class="mat-icon-delete" aria-hidden="false" aria-label="play-for-work"
+									(click)="onClickToDowload(row)">play-for-work</mat-icon>
+                                </div>
+                                 <div *ngIf="row[keys].split('|')[0] !== 'linkToReport' && row[keys].split('|')[0] !== 'linkToFeedback' && row[keys].split('|')[0] !== 'linkToMail'
+                                && row[keys].split('|')[0] !== 'clickToDownload' "
+                                    [ngStyle]="setStyle(row[keys].split('|')[1])">
+                                    {{row[keys].split('|')[0]}}</div>
+                            </td>
+                            <td *matFooterCellDef align="center"
+                                mat-footer-cell>{{getDisplayTotal(keys)}}</td>
+                        </ng-container>
+                    </div>
 
-<mat-form-field>
-    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter Report Data">
-  </mat-form-field>
+                    <tr *matHeaderRowDef="displayedColumns; sticky: true;"
+                        mat-header-row></tr>
+                    <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
+                    <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true;"></tr>
+                </table>
 
-<div class="app-data-table">
-    <div class="app-data-table-fixed-height">
-<div class="example-container">
-    <table mat-table [dataSource]="dataSource" matSort>
-        <div *ngFor="let keys of displayedColumns; let i = index">
-            <ng-container matColumnDef="{{keys}}">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header>{{displayedColumnsArr[i].split(",")[0]}}</th>
-                 <td mat-cell *matCellDef="let row">
-                    <div *ngIf="row[keys].split(',')[0] == 'linkToReport'">
-                      <a [routerLink]="" (click)="linkToReport(row[keys].split(',')[1], row[keys].split(',')[2])">{{row[keys].split(',')[3]}}</a>
-                    </div>
-                    <div *ngIf="row[keys].split(',')[0] == 'linkToFeedback'">
-                      <a [routerLink]="" (click)="linkToFeedback(row[keys].split(',')[1], row[keys].split(',')[2])">{{row[keys].split(',')[3]}}</a>
-                    </div>
-                    <div *ngIf="row[keys].split(',')[0] == 'linkToMail'">
-                      <a [routerLink]="" (click)="linkToMail(row[keys].split(',')[1])">{{row[keys].split(',')[2]}}</a>
-                    </div>
-                      <div *ngIf="row[keys].split(',')[0] !== 'linkToReport' && row[keys].split(',')[0] !== 'linkToFeedback' && row[keys].split(',')[0] !== 'linkToMail'">
-                          {{row[keys]}}
-                      </div>
-                  </td>
-              </ng-container>
+                <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
             </div>
-  
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true;"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-    </table>
-  
-    <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
-  </div>
-  </div>
+        </div>
+    </div>
+</div>
+<div *ngIf="showChart" align="center">
+    <iframe #iframe height="550px" style="border: none" width="100%"></iframe>
 </div>
 
 
-  
 <!-- <div *ngIf="!showDashboardReport">
     <div class="app-data-table">
         <div class="app-data-table-fixed-height">
           <table mat-table class="full-width-table" matSort aria-label="Elements">
-           
+
               <div *ngFor="let keys of displayedColumns; let i = index">
                 <ng-container matColumnDef="{{keys}}">
                     <th mat-header-cell *matHeaderCellDef mat-sort-header >{{displayedColumnsArr[i].split(",")[0]}}</th>
                     <td mat-cell *matCellDef="let row">{{row[keys]}}</td>
                   </ng-container>
                 </div>
-               
-          
+
+
             <tr mat-header-row *matHeaderRowDef="displayedColumns" ></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
           </table>
@@ -70,6 +78,5 @@
               [pageSize]="15"
               [pageSizeOptions]="[15, 25, 50, 100, 250]">
           </mat-paginator>
-        </div> 
+        </div>
   </div> -->
-  
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-dashboard-report/run-dashboard-report.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-dashboard-report/run-dashboard-report.component.spec.ts
index e0ea762d..a94d9ee1 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-dashboard-report/run-dashboard-report.component.spec.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-dashboard-report/run-dashboard-report.component.spec.ts
@@ -40,12 +40,10 @@ describe('RunDashboardReportComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(RunDashboardReportComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => { 
     expect(component).toBeTruthy();
-    fixture.detectChanges();
   });
 
   it('should test ngOnInit method', () => {
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-dashboard-report/run-dashboard-report.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-dashboard-report/run-dashboard-report.component.ts
index 35fe7414..3a38eba4 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-dashboard-report/run-dashboard-report.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-dashboard-report/run-dashboard-report.component.ts
@@ -1,10 +1,14 @@
-import { Component, OnInit, Input, AfterViewInit, ViewChild } from '@angular/core';
+import { Component, OnInit, Input, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
 import { GridsterConfig, GridType, GridsterItem } from 'angular-gridster2';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatPaginator } from '@angular/material/paginator';
 import { DashboardReportService } from './dashboard-report.service';
 import { MatSort } from '@angular/material';
 import { Router } from '@angular/router';
+import { environment } from '../../../../../../../../environments/environment';
+import { DisplayHtml } from '../../../display-html';
+import { RunService } from '../../run.service';
+import {FormControl} from '@angular/forms';
 
 
 
@@ -12,168 +16,262 @@ export interface PeriodicElement {
 
 }
 
-
-  
 const ELEMENT_DATA: PeriodicElement[] = [{}];
 
 @Component({
-  selector: 'app-run-dashboard-report',
-  templateUrl: './run-dashboard-report.component.html',
-  styleUrls: ['./run-dashboard-report.component.css']
+    selector: 'app-run-dashboard-report',
+    templateUrl: './run-dashboard-report.component.html',
+    styleUrls: ['./run-dashboard-report.component.css']
 })
 
 export class RunDashboardReportComponent implements AfterViewInit {
 
-  
-
-  @Input("reportId") reportId1 : string;
-  @Input("queryString") queryString : string;
-  @Input("hitCnt") hitCnt : number;
-  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
-
-  @ViewChild(MatPaginator, {static: false} as any) paginator: MatPaginator;
-  @ViewChild(MatSort, {static: false} as any) sort: MatSort;
-
-  options: GridsterConfig;
-  dashboard :  Array<GridsterItem> = new Array();
-
-  displayedColumns : string[];
-  IncomingReportId : string;
-  displayedColumnsArr : string[];
-  displayedRowObj : {}[];
-  formFieldPresent : boolean;
-  showSpinner : boolean;
-  formFieldList : {}[];
-  isReady : boolean;
-  responseFormFieldListLength : number;
-  NEWdisplayedColumns : string[];
-  initCnt : number;
-  reportName : string;
-  showDashboardReport : boolean;
-  checkCnt : number;
-  initialQueryString : string;
-  initCounter : number;
-  runButtonHitCounter : number;
-  
-  constructor(private _dashboardReportService : DashboardReportService, private _router : Router) {
-    this.initCounter = 0;
-    this.runButtonHitCounter = 0;
-   }
-
-  ngOnInit(){
-    this.initialQueryString = this.queryString;
-    this.initCounter++;
-    this.runButtonHitCounter = this.hitCnt;
-    this.initialProcesses();
-  }
-
-  initialProcesses()
-  {
-    this.dataSource.paginator = this.paginator;
-  }
-
-  ngOnChanges()
-  {
-    if(this.initialQueryString !== this.queryString && this.initCounter > 0 && this.runButtonHitCounter !== this.hitCnt)
-    {
-      this.initialQueryString = this.queryString;
-      this.runButtonHitCounter = this.hitCnt;
-      this.initialProcesses();
-      this.afterViewInitProcesses();
+    @Input('reportId') inputReportId: string;
+    @Input('queryString') queryString: string;
+    @Input('hitCnt') hitCnt: number;
+    @Input('reportType') reportType: string;
+    @Input('parentId') parentId: string;
+    dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
+    @ViewChild(MatPaginator, { static: false } as any) paginator: MatPaginator;
+    @ViewChild(MatSort, { static: false } as any) sort: MatSort;
+    @ViewChild('iframe') iframe: ElementRef;
+    options: GridsterConfig;
+    dashboard: Array<GridsterItem> = new Array();
+    displayedColumns: string[];
+    IncomingReportId: string;
+    displayedColumnsArr: string[];
+    displayedRowObj: {}[];
+    formFieldPresent: boolean;
+    showSpinner: boolean;
+    formFieldList: {}[];
+    isReady: boolean;
+    responseFormFieldListLength: number;
+    NEWdisplayedColumns: string[];
+    initCnt: number;
+    reportName: string;
+    showDashboardReport: boolean;
+    checkCnt: number;
+    initialQueryString: string;
+    initCounter: number;
+    runButtonHitCounter: number;
+    showChart = false;
+    displayColumValue: string;
+    displayTotal: any[];
+    private chartRunUrl: string;
+    replaceDisplayValue: String;
+saveResponseObj:any;
+
+    constructor(private _dashboardReportService: DashboardReportService, private _router: Router,
+        private _runService: RunService) {
+        this.initCounter = 0;
+        this.runButtonHitCounter = 0;
+    }
+
+    ngOnInit() {
+        this.initialQueryString = this.queryString;
+        this.initCounter++;
+        this.runButtonHitCounter = this.hitCnt;
+        if (this.reportType === 'Chart') {
+            this.showChart = true;
+        }
+
+        this.initialProcesses();
     }
-    else
-    {
-      this.runButtonHitCounter = this.hitCnt;
-      this.initialQueryString = this.queryString;
+
+    initialProcesses() {
+        this.dataSource.paginator = this.paginator;
     }
-    
-  }
 
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.afterViewInitProcesses();
-    })
-}
+    ngOnChanges() {
+        if (this.initialQueryString !== this.queryString && this.initCounter > 0 && this.runButtonHitCounter !== this.hitCnt) {
+            this.initialQueryString = this.queryString;
+            this.runButtonHitCounter = this.hitCnt;
+            this.initialProcesses();
+            this.afterViewInitProcesses();
+        } else {
+            this.runButtonHitCounter = this.hitCnt;
+            this.initialQueryString = this.queryString;
+        }
+    }
+
+    ngAfterViewInit() {
+        this.afterViewInitProcesses();
+    }
+
+    afterViewInitProcesses() {
+        if (this.showChart) {
+            this.chartRunUrl = environment.baseUrl + 'raptor.htm?action=chart.run&c_master=' +
+                this.inputReportId + this.queryString + '&refresh=Y&display_content=Y&r_page=0';
+            this.iframe.nativeElement.setAttribute('src', this.chartRunUrl);
+            this.showSpinner = false;
+        } else {
+
+            this.displayedColumnsArr = new Array();
+            this.displayedRowObj = new Array();
+            this.displayedColumns = new Array();
+            this.formFieldList = new Array();
+            this.showSpinner = true;
+            this.isReady = false;
+            this.NEWdisplayedColumns = new Array();
+            this.displayTotal = [];
+            if (localStorage.getItem(this.inputReportId)) {
+                this.postFetchingReportDataFn(JSON.parse(localStorage.getItem(this.inputReportId)));
+                localStorage.removeItem(this.inputReportId);
+            } else {
+            this._dashboardReportService.getReportDataWithFormFields(this.queryString, this.inputReportId)
+                .subscribe((response) => {
+                        this.postFetchingReportDataFn(response);
+                    });
+            }
+        }
+    }
 
-  afterViewInitProcesses()
-  {
-
-    this.displayedColumnsArr = new Array();
-    this.displayedRowObj = new Array();
-    this.displayedColumns = new Array();
-    this.formFieldList = new Array();
-    this.showSpinner = true;
-    this.isReady = false;
-    this.NEWdisplayedColumns = new Array();
-  this._dashboardReportService.getReportDataWithFormFields(this.queryString, this.reportId1)
-  .subscribe((response) => {
-      this.formFieldPresent = false;
-      this.responseFormFieldListLength = 0;
-
-      this.reportName = response["reportName"];
-
-    let i=0;
-    while(response["reportDataColumns"][i])
-    {
-      this.displayedColumnsArr.push(response["reportDataColumns"][i]["columnTitle"] +","+ response["reportDataColumns"][i]["colId"]);
-      i++;
+    postFetchingReportDataFn(response: any){
+        this.saveResponseObj = response;
+                    this.formFieldPresent = false;
+                    this.responseFormFieldListLength = 0;
+                    this.reportName = response['reportName'];
+                    let columnCntr = 0;
+                    while (response['reportDataColumns'][columnCntr]) {
+                        this.displayedColumnsArr.push(response['reportDataColumns'][columnCntr]['columnTitle'] + ','
+                            + response['reportDataColumns'][columnCntr]['colId']);
+                        columnCntr++;
+                    }
+                    let totalCnt = 0;
+                    while (response['reportTotalDataRows'][totalCnt]) {
+                        this.displayTotal.push(response['reportTotalDataRows'][totalCnt]);
+                        totalCnt++;
+                    }
+                    let rdr_cntr = 0;
+                    while (response['reportDataRows'][rdr_cntr]) {
+                        let dca_cntr = 0;
+                        const obj = {};
+                        const reportDataRows = response['reportDataRows'][rdr_cntr];
+                        while (this.displayedColumnsArr[dca_cntr]) {
+                            const rowColumnId = this.displayedColumnsArr[dca_cntr].split(',')[1];
+                            if (reportDataRows[rowColumnId]) {
+                                let drillDownHtml = '';
+                                let displayValue = '';
+                                drillDownHtml = reportDataRows[rowColumnId]['drillDownURL'];
+                                displayValue = reportDataRows[rowColumnId]['displayValue'];
+                                if (drillDownHtml !== null &&
+                                    drillDownHtml.length > 0 &&
+                                    !displayValue.includes('linkToReport')) {
+                                    const value = this.convertToLinkToReport(drillDownHtml);
+                                    if (value.length > 0) {
+                                        this.replaceDisplayValue = value + ',' +
+                                            reportDataRows[rowColumnId]['displayValue'];
+                                    } else {
+                                        this.replaceDisplayValue = reportDataRows[rowColumnId]['displayValue'];
+                                    }
+                                } else {
+                                    this.replaceDisplayValue = reportDataRows[rowColumnId]['displayValue'];
+                                }
+                                let displayObj: DisplayHtml = new class implements DisplayHtml {
+                                    'background-color': string;
+                                    'font-family': string;
+                                    'font-size': string;
+                                    'font-style': string;
+                                    'font-weight': string;
+                                    'text-align': string;
+                                    'text-decoration': string;
+                                    color: string;
+                                };
+                                if (reportDataRows[rowColumnId]['displayValueHtml'].includes('{')) {
+                                    displayObj = JSON.parse(reportDataRows[rowColumnId]['displayValueHtml']);
+                                }
+                                displayObj['text-align'] = reportDataRows[rowColumnId]['alignment'];
+                                if (this.replaceDisplayValue.includes('linkToReport') || this.replaceDisplayValue.includes('linkToFeedback') || this.replaceDisplayValue.includes('linkToMail')) {
+                                    obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue.split(',').join('|')
+                                        + '|' + JSON.stringify(displayObj);
+                                } else {
+                                    obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue
+                                        + '|' + JSON.stringify(displayObj);
+                                }
+                            }
+                            dca_cntr++;
+                        }
+                        this.displayedRowObj.push(obj);
+                        rdr_cntr++;
+                    }
+                    for (let pushCounter = 0; pushCounter < this.displayedColumnsArr.length; pushCounter++) {
+                        this.displayedColumns.push(this.displayedColumnsArr[pushCounter].split(',')[1]);
+                    }
+                    this.showSpinner = false;
+                    this.dataSource = new MatTableDataSource<PeriodicElement>(this.displayedRowObj);
+                    this.dataSource.sort = this.sort;
+                    this.dataSource.paginator = this.paginator;
     }
 
-    let j=0;
-    while(response["reportDataRows"][j])
-    {
-      let k=0;
-      let obj = new Object();
-      while(this.displayedColumnsArr[k])
-      {
-        if(response["reportDataRows"][j][this.displayedColumnsArr[k].split(",")[1]])
-        {
-          obj[response["reportDataRows"][j][this.displayedColumnsArr[k].split(",")[1]]["colId"]] = response["reportDataRows"][j][this.displayedColumnsArr[k].split(",")[1]]["displayValue"];
+    linkToReport(reportID: string, queryParameters: string) {
+        localStorage.setItem(this.inputReportId, JSON.stringify(this.saveResponseObj));
+        if (sessionStorage.length === 0) {
+            sessionStorage.setItem('1', this.parentId + '|' + this.queryString);
+        } else {
+            let length = sessionStorage.length;
+            length++;
+            sessionStorage.setItem(length.toString(), this.parentId + '|' + this.queryString);
         }
-        k++;
-      }
-      this.displayedRowObj.push(obj);
-      j++;
+        this._router.navigate(['v2/run', reportID, queryParameters]);
     }
 
-    for(let l=0; l<this.displayedColumnsArr.length; l++)
-    {
-      this.displayedColumns.push(this.displayedColumnsArr[l].split(",")[1]);
+    linkToFeedback(feedBackId: string, queryParameters: string) {
+        this._router.navigate(['v2/feedback', feedBackId]);
+    }
+
+    linkToMail(mailId: string) {
+        const email = 'mailto:' + mailId;
+        window.location.href = email;
+    }
+
+    applyFilter(filterValue: string) {
+        this.dataSource.filter = filterValue.trim().toLowerCase();
+    }
+
+    setStyle(styles: string) {
+        if (styles.includes('{')) {
+            return JSON.parse(styles);
+        } else {
+            return {};
+        }
+    }
+
+    getDisplayTotal(keys: any) {
+        if (this.displayTotal.length > 0) {
+            return this.displayTotal[0][keys].displayValue;
+        } else {
+            return '';
+        }
+    }
+
+    convertToLinkToReport(value: string) {
+        value = value.replace(/;/g, '');
+        let outPut = '';
+        while (value.includes('c_master=')) {
+            const index = value.indexOf('c_master=');
+            if (index > 0) {
+                value = value.substring(index, value.length);
+            } else if (index === 0) {
+                value = value.replace('c_master=', '');
+            }
+        }
+        const split = value.split('&');
+        // const spltFirst = split[0].split('=');
+        if (split[1].length <= 0) {
+            return outPut;
+        }
+        outPut = 'linkToReport,' + split[0] + ',';
+        let splitCounter = 1;
+        for (splitCounter = 1; splitCounter < split.length; splitCounter++) {
+            if (!split[splitCounter].includes('LOGIN_ID=') &&
+                !split[splitCounter].includes('display_content=') &&
+                !split[splitCounter].includes('drilldown_index=') &&
+                !split[splitCounter].includes('show_back_btn=') &&
+                !split[splitCounter].includes('r_action')) {
+                outPut = outPut + '&' + split[splitCounter];
+            }
+        }
+        return outPut;
     }
-    this.showSpinner = false;
-    
-    this.dataSource = new MatTableDataSource<PeriodicElement>(this.displayedRowObj);
-    this.dataSource.sort = this.sort;
-    this.dataSource.paginator = this.paginator;
-   
-
-  });
-
-  
-  }
-  
-  
-  
-  linkToReport(reportID : string, queryParameters : string)
-  {
-    this._router.navigate(['v2/run', reportID, queryParameters]);
-  }
-
-  linkToFeedback(feedBackId : string, queryParameters : string)
-  {
-    this._router.navigate(['v2/feedback', feedBackId]);
-  }
-
-  linkToMail(mailId : string)
-  {
-    var email = "mailto:" + mailId;
-    window.location.href = email;
-  }
-
-  applyFilter(filterValue: string) {
-    this.dataSource.filter = filterValue.trim().toLowerCase();
-  }
-
- 
 
 }
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.css b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.css
index 693fb543..85e3c58f 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.css
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.css
@@ -1,3 +1,10 @@
+.approval-img{
+  height:25px;
+   width:25px
+}
+.submit-approval-btn{
+  display: contents;
+}
 .gridster-item-content{
   overflow-y: scroll;
   overflow-x: scroll;
@@ -14,11 +21,11 @@
   box-sizing: border-box;
   display: block;
   position: absolute;
-  width: 80px;
-  height: 80px;
+  width: 35px;
+  height: 35px;
   margin: 6px;
-  margin-top: -10px;
-  border: 10px solid #006496;
+  margin-top: 40px;
+  border: 6px solid #006496;
   border-radius: 80%;
   animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
   border-color: #006496 transparent transparent transparent;
@@ -49,7 +56,7 @@
 }
 .right {
   width: auto;
-  
+
   float: left;
 } */
 
@@ -57,6 +64,10 @@ mat-icon{
   color: #006496;
   cursor: pointer;
 }
+.mat-icon-delete{
+  color: #006496;
+  cursor: pointer;
+}
 
 
 button,
@@ -67,7 +78,7 @@ textarea {
   font-size: 100%;
   vertical-align: middle; }
 
-  
+
 button,
 html input[type="button"],
 input[type="reset"],
@@ -91,10 +102,18 @@ input[type="submit"] {
 } */
 
 .boxMargin{
-  
+
   width: auto;
 }
 
+td.mat-cell{
+  padding-left: 3px;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-right: 1px solid #999;
+  border-left: 1px solid #999;
+}
+
 mat-button-toggle{
   display: block;
   width: 400px;
@@ -193,7 +212,7 @@ input[type=search]:-webkit-search-decoration {
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);}
-  
+
   [class*="icoWeather-"], [class*="icoTrans-"], [class*="icoBubble-"], [class*="icoRetail-"], [class*="icoPeople-"], [class*="icoNumslets-"], [class*="icoLocation-"], [class*="icoHealthcare-"], [class*="icoDocuments-"], [class*="icoDevices-"], [class*="icoDatanetwork-"], [class*="icoControls-"], [class*="icoBuilding-"], [class*="icoArrows-"] {
     color: #0568ae;
     display: inline-block;
@@ -214,7 +233,7 @@ input[type=search]:-webkit-search-decoration {
     -ms-user-select: none;
     user-select: none;
     vertical-align: middle; }
-  
+
   [class*="icon-primary-"]:before,
   [class*="icon-primary-"]:after {
     box-sizing: border-box;
@@ -227,7 +246,7 @@ input[type=search]:-webkit-search-decoration {
     vertical-align: middle;
     width: 1em; }
 
-    
+
 .checkbox {
   position: relative;
   min-height: 24px;
@@ -376,7 +395,7 @@ input[type=search]:-webkit-search-decoration {
 
   .b2b-pane-selector-wrapper .pane-container .panes div.pane-block .form-row .checkbox-selectall {
     margin: 0px 0 0 24px !important; }
-  
+
 .filter-container .checkbox .icon-primary-spinner {
   height: 24px;
   position: absolute;
@@ -508,7 +527,7 @@ button.awd-select.large {
       top: 20px;
       width: 40px;
       top: 10px; }
-      
+
       .inputWrap {
   border-radius: 6px;
   position: relative;
@@ -977,7 +996,7 @@ i, em {
 }
 
 .modalTitle{
-    font-size: 35px;  
+    font-size: 35px;
 }
 
 
@@ -990,7 +1009,7 @@ i, em {
   margin-top: 35px;
   /* margin-left: 250px;
   margin-right: 250px; */
- 
+
 }
 
 .app-data-table-fixed-height {
@@ -1012,7 +1031,7 @@ tr:nth-child(even) {
   font-size: 2px;
   height: 35px;
   border-radius: 4px;
-  
+
 }
 
 tr:nth-child(odd) {
@@ -1021,10 +1040,10 @@ tr:nth-child(odd) {
   border-radius: 4px;
 }
 
-    
+
 .card{
   border-radius: 10px;
-  
+
 }
 
 .card-header{
@@ -1053,7 +1072,7 @@ tr:nth-child(odd) {
 }
 
 .modalTitle{
-    font-size: 35px;  
+    font-size: 35px;
 }
 
 ::-webkit-scrollbar {
@@ -1062,11 +1081,11 @@ tr:nth-child(odd) {
 }
 
 
-label { 
-  float: left; 
-  width: 24em; 
-  margin-right: 2em; 
-  text-align: right; 
+label {
+  float: left;
+  width: 24em;
+  margin-right: 2em;
+  text-align: right;
 }
 
 
@@ -1088,7 +1107,7 @@ label {
     outline-color: #ffffff !important;
     background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
 
-    
+
 a.btn {
   vertical-align: middle; }
   a.btn:hover {
@@ -1354,3 +1373,47 @@ a.btn {
     text-decoration: underline; }
   .btn-clear:hover {
     text-decoration: underline; }
+
+.downloadImg{
+    height: 25px ;
+    width: 25px;
+}
+
+#reportTableSize{
+    width: 99%;
+    height: 750px;
+}
+
+ .gridster-color {
+        background: whitesmoke;
+    }
+    
+    
+.download-div{
+  width: 20%;
+  float: left;
+  height: 30px;
+}
+
+.pagination-div{
+width: 60%;
+float: right;
+height: 30px;
+}
+
+.download-title{
+padding-right: 10px;
+font-size: 14px;
+font-family: Roboto, "Helvetica Neue", sans-serif;
+color: rgba(0, 0, 0, 0.54);
+}
+
+.filter-div{
+  height: 30px;
+  width: 20%;
+  float: left;
+}
+
+.btn-back {
+    padding-bottom: 5px;
+    font-size: 15px;}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.html
index 682899fd..4b647528 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.html
@@ -1,84 +1,144 @@
+<span *ngIf="showSpinner" class="ecomp-spinner"></span>
 
-<div *ngIf="showSpinner">
-  <div class="lds-ring">
-    <div></div>
-    <div></div>
-    <div></div>
-    <div></div>
-  </div>
+<div *ngIf="showDashboardReport">
+    <span *ngIf="download_in_progress" class="ecomp-small-spinner"></span>
+    Download:
+    <a [routerLink]=""><img class="downloadImg"  (click)="downloadReport('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'xlsx')" 
+                            placement="top" ngbTooltip="Download Dashboard Report"
+                            src="assets/images/xlsx.png"></a>&nbsp;
+
+    <gridster class="gridster-color"[options]="options">
+        <gridster-item *ngFor="let item of dashboard" [item]="item">
+            <div *ngIf="item.hasContent" class="gridster-item-content">
+                <div>
+                    <a (click)="takeToReport(queryString, item.hasContent.id.split('#')[1])"
+                       [routerLink]="">{{item.hasContent.name}}</a>
+                       <div style="height: 6px;"></div>
+                    <app-run-dashboard-report [hitCnt]="hitCnt" [queryString]="queryString"
+                                              [reportId]="item.hasContent.id.split('#')[1]"
+                                              [reportType]="item.hasContent.id.split('#')[0]"
+                                              [parentId]="inputReportId">
+                    </app-run-dashboard-report>
+                </div>
+            </div>
+        </gridster-item>
+    </gridster>
+    <div *ngIf="error == true">
+        <h1>Error Message:</h1>
+        <p>{{errorMessage}}</p>
+        <br/>
+        <h1>Stack Trace:</h1>
+        <p>{{stackTrace}}</p>
+    </div>
 </div>
+<span *ngIf="download_in_progress" class="ecomp-small-spinner"></span>
+<div *ngIf="!showDashboardReport">
+    <div *ngIf="error == false" [hidden]="isChartAvailable == false" align="center">
+        <iframe #iframe height="500" style="border: none" width="70%"></iframe>
+    </div>
+   
+    <div>
+        <div class="field-group">
 
-<div *ngIf="showDashboardReport">
- <gridster [options]="options">
-    <gridster-item [item]="item" *ngFor="let item of dashboard">
-        <div class="gridster-item-content" *ngIf="item.hasContent">
-            <div>
-              <h3>{{item.hasContent.name}}</h3>
-              <app-run-dashboard-report [reportId]="item.hasContent.id.split('#')[1]" [queryString]="queryString" [hitCnt]="hitCnt"></app-run-dashboard-report>
+            <div class="filter-div" >
+            <mat-form-field><input (keyup)="applyFilter($event.target.value)" matInput placeholder="Filter Report Data">
+            </mat-form-field>
+           </div>
+            <div class="download-div" >
+                <span class="download-title"> Download:</span>
+            <a [routerLink]=""><img class="downloadImg" (click)="downloadSinglePage('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'xlsx')" placement="top" ngbTooltip="Download Current Page"
+                                    src="assets/images/xlsx.png"></a>&nbsp;
+            <a [routerLink]=""><img class="downloadImg" (click)="downloadReport('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'xlsx')"  placement="top" ngbTooltip="Download All"
+                                    src="assets/images/xlsx.png"></a>&nbsp;
+            <a [routerLink]=""><img class="downloadImg" (click)="downloadReport('application/pdf', 'pdf')"  placement="top" ngbTooltip="Download PDF"
+                                    src="assets/images/pdf.png" ></a>&nbsp;
+                <button *ngIf="showBackButton"  (click)="goBack()" class="btn btn-alt btn-back" >Back</button>
             </div>
+            <div class="pagination-div">
+            <mat-paginator (page)="pageEvent = $event; onPaginationChange($event)" [length]="totalRecords"
+                           [pageSize]="pageSize" showFirstLastButtons></mat-paginator>
+             </div>
+        </div>
+        <div class="app-data-table-fixed-height" id="reportTableSize">
+            <table [dataSource]="dataSource" mat-table matSort>
+                <ng-container *ngFor="let keys of displayedColumns; let i = index">
+                    <ng-container matColumnDef="{{keys}}">
+                        <th *matHeaderCellDef align="center" mat-header-cell mat-sort-header>
+                            {{displayedColumnsArr[i].split(",")[0]}}</th>
+                        <td *matCellDef="let row" mat-cell>
+                            <div *ngIf="row[keys].split('|')[0] == 'linkToReport'"
+                                 [ngStyle]="setStyle(row[keys].split('|')[4])">
+                                <a (click)="linkToReport(row[keys].split('|')[1], row[keys].split('|')[2])"
+                                   [routerLink]="">{{row[keys].split('|')[3]}}</a>
+                            </div>
+                            <div *ngIf="row[keys].split('|')[0] == 'linkToFeedback'"
+                                 [ngStyle]="setStyle(row[keys].split('|')[4])">
+                                <a (click)="linkToFeedback(row[keys].split('|')[1], row[keys].split('|')[2])"
+                                   [routerLink]="">{{row[keys].split('|')[3]}}</a>
+                            </div>
+                            <div *ngIf="row[keys].split('|')[0] == 'linkToMail'"
+                                 [ngStyle]="setStyle(row[keys].split('|')[3])">
+                                <a (click)="linkToMail(row[keys].split('|')[1])"
+                                   [routerLink]="">{{row[keys].split('|')[2]}}</a>
+                            </div>
+                            <div *ngIf="row[keys].split('|')[0] == 'clickToDownload' ">
+                                <mat-icon (click)="onClickToDowload(row)" aria-hidden="false" aria-label="play-for-work"
+                                          class="mat-icon-delete">play-for-work
+                                </mat-icon>
+                            </div>
+                            <div *ngIf="row[keys].split('|')[0] !== 'linkToReport' && row[keys].split('|')[0] !== 'linkToFeedback' && row[keys].split('|')[0] !== 'linkToMail'
+                                && row[keys].split('|')[0] !== 'clickToDownload' " 
+                                 [ngStyle]="setStyle(row[keys].split('|')[1])">
+                                {{row[keys].split('|')[0]}}&nbsp;</div>
+                        </td>
+                        <td *matFooterCellDef align="center" mat-footer-cell>{{getDisplayTotal(keys)}}</td>
+                    </ng-container>
+                </ng-container>
 
+                <tr *matHeaderRowDef="displayedColumns; sticky: true;" mat-header-row></tr>
+                <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
+                <tr *matFooterRowDef="displayedColumns; sticky: true;" mat-footer-row></tr>
+            </table>
         </div>
-        
-      
-    </gridster-item>
-  </gridster> 
+    </div>
+    <div *ngIf="error == true">
+        <h3>Error Message:</h3>
+        <p>{{errorMessage}}</p>
+        <br/>
+        <h3>Stack Trace:</h3>
+        <p>{{stackTrace}}</p>
+    </div>
 </div>
+<h6>Execution Time: {{timeTaken}} Seconds</h6>
 
 
-<div *ngIf="!showDashboardReport">
-    <mat-form-field>
-        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter Report Data">
-      </mat-form-field>
-  <button *ngIf="showMoreVert" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="Download Options">
-      <mat-icon>more_vert</mat-icon>
-    </button>
-    
-    <mat-menu #menu="matMenu" >
-        <a [routerLink]="" (click)="downloadReportExcel()">  Download Excel  </a>
-    </mat-menu>
+<style scoped>
+    :host ::ng-deep .mat-paginator-outer-container .mat-paginator-container{
+        min-height: 30px;
+        height: 30px;
+    }
 
-      <div class="app-data-table">
-        <div class="app-data-table-fixed-height">
-    <div>
-        <table mat-table [dataSource]="dataSource" matSort>
-            <div *ngFor="let keys of displayedColumns; let i = index">
-                <ng-container matColumnDef="{{keys}}">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{displayedColumnsArr[i].split(",")[0]}}</th>
-                    <td mat-cell *matCellDef="let row">
-                      <div *ngIf="row[keys].split(',')[0] == 'linkToReport'">
-                        <a [routerLink]="" (click)="linkToReport(row[keys].split(',')[1], row[keys].split(',')[2])">{{row[keys].split(',')[3]}}</a>
-                      </div>
-                      <div *ngIf="row[keys].split(',')[0] == 'linkToFeedback'">
-                        <a [routerLink]="" (click)="linkToFeedback(row[keys].split(',')[1], row[keys].split(',')[2])">{{row[keys].split(',')[3]}}</a>
-                      </div>
-                      <div *ngIf="row[keys].split(',')[0] == 'linkToMail'">
-                        <a [routerLink]="" (click)="linkToMail(row[keys].split(',')[1])">{{row[keys].split(',')[2]}}</a>
-                      </div>
-                        <div *ngIf="row[keys].split(',')[0] !== 'linkToReport' && row[keys].split(',')[0] !== 'linkToFeedback' && row[keys].split(',')[0] !== 'linkToMail'">
-                            {{row[keys]}}
-                        </div>
-                        
-                    </td>
-                  </ng-container>
-                </div>
-      
-          <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true;"></tr>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-        </table>
-      
-        <mat-paginator [pageSizeOptions]="[50]" showFirstLastButtons></mat-paginator>
-      </div>
-      </div>
-    </div>
+    :host ::ng-deep  .mat-form-field-appearance-legacy .mat-form-field-label {
+    font-size: 14px;
+  }
 
-</div>
+  :host ::ng-deep  .mat-paginator, .mat-paginator-page-size .mat-select-trigger {
+        font-size: 14px;
+  }
+
+  :host ::ng-deep .mat-sort-header-arrow.ng-trigger.ng-trigger-arrowPosition {
+    color: black;
+    opacity: 0;
+}
 
+:host ::ng-deep .mat-sort-header-pointer-left.ng-trigger.ng-trigger-leftPointer {
+   transform: rotate(-45deg);
+   color: black;
+}
+:host ::ng-deep .mat-sort-header-pointer-right.ng-trigger.ng-trigger-rightPointer {
+   transform: rotate(45deg);
+   color: black;
+}
 
-<div *ngIf="error == true">
-  <h1>Error Message:</h1>
-  <p>{{errorMessage}}</p>
-  <br/>
-  <h1>Stack Trace:</h1>
-  <p>{{stackTrace}}</p>
+</style>
 
-</div>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.spec.ts
index 2aeac4a2..da718262 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.spec.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.spec.ts
@@ -2,10 +2,10 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule} from '@angular/material/table';
+import { MatTableModule, MatTableDataSource } from '@angular/material/table';
 
-import { RunReportComponent} from './run-report.component';
-import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, SimpleChanges } from '@angular/core';
+import { RunReportComponent, PeriodicElement } from './run-report.component';
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, SimpleChange, SimpleChanges } from '@angular/core';
 import { MatMenuModule } from '@angular/material';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { RouterTestingModule } from '@angular/router/testing';
@@ -24,12 +24,13 @@ describe('RunReportComponent', () => {
   let runService : RunService;
   let options1 = {};
   let dashboard; 
+  let dashboard2; 
   let responseformfield = 1;
   let environment = [
     {
       baseUrl: 'just a link'
     }
-  ];
+  ]
 
 
   beforeEach(async(() => {
@@ -48,10 +49,13 @@ describe('RunReportComponent', () => {
       providers: [RunService]
     }).compileComponents();
     runService = TestBed.get(RunService);
+    //spyOn(runService, 'getReportDataWithFormFields').and.returnValue(Observable.of(environment));
+    //spyOn(runService, 'getReportData').and.returnValue(Observable.of(environment));
     spyOn(runService, 'downloadReportExcel').and.returnValue(Observable.of(environment));
   }));
 
   beforeEach(() => {
+    //dashboard = {"item":{"hasContent":{"name":"rupi","id":"check#check"}}};
     fixture = TestBed.createComponent(RunReportComponent);
     runService = TestBed.get(RunService);
     component = fixture.componentInstance;
@@ -61,7 +65,7 @@ describe('RunReportComponent', () => {
     component.options = options1;
     component.dashboard = dashboard; 
     component.responseFormFieldListLength = responseformfield;
-    fixture.detectChanges();
+    //fixture.detectChanges();
   });
 
   it('should compile', () => {
@@ -103,7 +107,6 @@ describe('RunReportComponent', () => {
       expect(component.NEWdisplayedColumns).toEqual(new Array());
   });
 
-
   it('should test showError method', () => {
        let errmsg = "errormessage";
        let stcktrace = "stacktrace";
@@ -131,11 +134,6 @@ describe('RunReportComponent', () => {
         expect(component.openOptionsFlag).toEqual(component.openOptionsFlag);
   });
 
-  it('should test downloadReportExcel method', () => {
-    spyOn(component, 'downloadReportExcel').and.callThrough();
-        component.downloadReportExcel();
-        expect(component.downloadReportExcel).toHaveBeenCalled();
-  });
 
   it('should test applyFilter method', () => {
       let filterValue = "test"
@@ -145,40 +143,40 @@ describe('RunReportComponent', () => {
 
    it('should test the ngOnChanges first If condition', () => {   
     change = {};
-    component.queryString="queryString";
-    component.reportId1="reportId1";
-    var response={"errormessage":true}
         component.reportMode !== "Regular"
         component.initCnt = 1;
         component.TriggerFFArr.length = 0;
-        let spy=spyOn(runService,'getReportDataWithFormFields').and.returnValue(Observable.of(response));
         component.ngOnChanges(change);
-        expect(spy).toHaveBeenCalled();
+        expect(component.showMoreVert).toEqual(false);
         expect(component.initCnt).toEqual(1);
         expect(component.showDashboardReport).toEqual(false);
         expect(component.displayedRowObj).toEqual(new Array());
         expect(component.displayedColumns).toEqual(new Array());
         expect(component.formFieldList).toEqual(new Array());
+        expect(component.showSpinner).toEqual(true);
         expect(component.NEWdisplayedColumns).toEqual(new Array());
         expect(component.isReady).toEqual(false);
-        
   });
 
-
    it('should test initialProcess method', () => {
       component.DashboardReportObj.length = 1;
       component.initialProcesses();
   });
 
-  // it('should test postFetchingReportDataFn method',()=>{
-  //   var response={
-  //                    "reportName":"reportName",
-  //                    "reportDataColumns":[{"columnTitle":"columnTitle","colId":"colId"}],
-  //                    "reportDataRows":[{"value":"value"}]
-  //                   }
-  //   component.displayedColumnsArr=["string"]
-  //   component.postFetchingReportDataFn(response)
+  // it('should test postFetchingReportDataFn method', () => {
+  //     let response: any;
+  //     component.postFetchingReportDataFn(response);
   // })
 
- 
+  // it('should test ngOnChanges subscribe method', ()  => {
+  //     spyOn(component, 'ngOnChanges').and.callThrough();
+  //     component.ngOnChanges(change);
+  //     expect(component.ngOnChanges).toHaveBeenCalled();
+  // })
+
+  // it('should test postFetchingReportDataFn method', () => {
+  //   let obj: any;
+  //     component.postFetchingReportDataFn(obj);
+  // })
+  
 });
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.ts
index cc520380..a2163054 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.ts
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.ts
@@ -1,393 +1,676 @@
-import { AfterViewInit, Component, OnInit, ViewChild, Input, SimpleChange, SimpleChanges, ChangeDetectorRef, Inject } from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
-import { MatTable, MatTableDataSource } from '@angular/material/table';
-import { RunReportDataSource, RunReportFinalTableItem } from './run-report-datasource';
-import { ActivatedRoute, Router } from '@angular/router';
-import { HttpClient } from '@angular/common/http';
-import { environment } from '../../../../../../../environments/environment';
-import { RunService } from '../run.service';
-import { GridsterConfig, GridsterItem, GridType } from 'angular-gridster2';
-import { Observable } from 'rxjs';
-
+import {
+    AfterViewInit,
+    Component,
+    OnInit,
+    ViewChild,
+    Input,
+    SimpleChange,
+    SimpleChanges,
+    ChangeDetectorRef,
+    Inject,
+    ElementRef
+} from '@angular/core';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort} from '@angular/material/sort';
+import {MatTable, MatTableDataSource} from '@angular/material/table';
+import {ActivatedRoute, Router} from '@angular/router';
+import {HttpClient} from '@angular/common/http';
+import {environment} from '../../../../../../../environments/environment';
+import {RunService} from '../run.service';
+import {GridsterConfig, GridsterItem, GridType} from 'angular-gridster2';
+import {Observable} from 'rxjs';
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
+import {displayGrids} from 'angular-gridster2/lib/gridsterConfig.interface';
+import {DisplayHtml} from '../../display-html';
+import {FormControl} from '@angular/forms';
 
 export interface PeriodicElement {
 
 }
 
-
 const ELEMENT_DATA: PeriodicElement[] = [{}];
 
 @Component({
-  selector: 'app-run-report',
-  templateUrl: './run-report.component.html',
-  styleUrls: ['./run-report.component.css']
+    selector: 'app-run-report',
+    templateUrl: './run-report.component.html',
+    styleUrls: ['./run-report.component.css']
 })
-export class RunReportComponent implements  OnInit, AfterViewInit {
-  @Input("reportId") reportId1 : string;
-  @Input("reportMode") reportMode : string;
-  @Input("queryString") queryString : string;
-  @Input("DashboardReportObj") DashboardReportObj : Array<GridsterItem>;
-  @Input("TriggerFFArr") TriggerFFArr : string[];
-  @Input("hitCnt") hitCnt : number;
-
-  
-  @ViewChild(MatPaginator, {static: false} as any) paginator: MatPaginator;
-  @ViewChild(MatSort, {static: false} as any) sort: MatSort;
-  @ViewChild(MatTable, {static: false} as any) table: MatTable<RunReportFinalTableItem>;
-  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
-  displayedColumns : string[];
-  IncomingReportId : string;
-  displayedColumnsArr : string[];
-  displayedRowObj : RunReportFinalTableItem[];
-  formFieldPresent : boolean;
-  showSpinner : boolean;
-  formFieldList : {}[];
-  isReady : boolean;
-  responseFormFieldListLength : number;
-  NEWdisplayedColumns : string[];
-  initCnt : number;
-  reportName : string;
-  showDashboardReport : boolean;
-  checkCnt : number;
-
-  options: GridsterConfig;
-  dashboard :  Array<GridsterItem> = new Array();
-  openOptionsFlag : boolean;
-  showMoreVert : boolean;
-  errorMessage : string = "";
-  stackTrace : string = "";
-  error : boolean = false;
-  environment : any;
-  initialQueryString : string;
-  initCounter : number;
-  runButtonHitCnt : number;
-
-  
-
-  constructor(private _http : HttpClient, 
-              private _route : ActivatedRoute, 
-              private _runService : RunService, 
-              private _router : Router, 
-              private changeDetectorRefs: ChangeDetectorRef)
-    {
-      this.displayedColumnsArr = new Array();
-      this.displayedRowObj = new Array();
-      this.displayedColumns = new Array();
-      this.formFieldList = new Array();
-      this.showSpinner = true;
-      this.isReady = false;
-      this.NEWdisplayedColumns = new Array();
-      this.initCnt = 0;
-      this.checkCnt = 0;
-      this.showDashboardReport = false;
-      this.openOptionsFlag = false;
-      this.showMoreVert = false;
-      this.environment = environment;
-      this.initCounter = 0;
-      this.runButtonHitCnt = 0;
-
-      this._router.routeReuseStrategy.shouldReuseRoute = function() {
-        return false;
-    };
-  }
-
-
-  ngOnChanges(changes: SimpleChanges)
-  {
-    if(this.reportMode !== "Regular" && this.initCnt > 0 && this.TriggerFFArr.length == 0)
-    {
-      this.showMoreVert = false;
-      if(changes["queryString"])
-      {
-      this.queryString = changes["queryString"]["currentValue"];
-      }
-      this.initCnt = 1;
-      this.showDashboardReport = false;
-
-      this.dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
-
-      this.displayedColumnsArr = new Array();
-      this.displayedRowObj = new Array();
-      this.displayedColumns = new Array();
-      this.formFieldList = new Array();
-      this.showSpinner = true;
-      this.isReady = false;
-      this.NEWdisplayedColumns = new Array();
-
-      this._runService.getReportDataWithFormFields(this.queryString, this.reportId1)
-      .subscribe((response) => {
-        if(response["errormessage"])
-        {
-          this.showError(response);
+export class RunReportComponent implements OnInit, AfterViewInit {
+    @Input('reportId') inputReportId: string;
+    @Input('reportMode') reportMode: string;
+    @Input('queryString') queryString: string;
+    @Input('DashboardReportObj') DashboardReportObj: Array<GridsterItem>;
+    @Input('TriggerFFArr') TriggerFFArr: string[];
+    @Input('hitCnt') hitCnt: number;
+    @Input('runAgain') runAgain: string;
+    @Input('groupSelectValue') groupSelectValue: string;
+    @ViewChild('iframe') iframe: ElementRef;
+    @ViewChild(MatPaginator, {static: false} as any) paginator: MatPaginator;
+    @ViewChild(MatSort, {static: false} as any) sort: MatSort;
+    dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
+    displayedColumns: string[];
+    IncomingReportId: string;
+    displayedColumnsArr: string[];
+    displayedRowObj: PeriodicElement[];
+    formFieldPresent: boolean;
+    showSpinner: boolean;
+    formFieldList: {}[];
+    isReady: boolean;
+    responseFormFieldListLength: number;
+    NEWdisplayedColumns: string[];
+    initCnt: number;
+    reportName: string;
+    showDashboardReport: boolean;
+    checkCnt: number;
+    options: GridsterConfig;
+    dashboard: Array<GridsterItem> = [];
+    openOptionsFlag: boolean;
+    showMoreVert: boolean;
+    errorMessage = '';
+    stackTrace = '';
+    error = false;
+    environment: any;
+    initialQueryString: string;
+    initCounter: number;
+    runButtonHitCnt: number;
+    chartRunUrl: string;
+    url: SafeResourceUrl;
+    replaceDisplayValue: String;
+    nodeName: string;
+    uploadId: string;
+    ecgi: string;
+    lac: string;
+    cid: string;
+    displayTotal: any[];
+    totalRecords: number;
+    pageSize: number;
+    download_in_progress: boolean;
+    commentCtrl = new FormControl('');
+    isChartAvailable = false;
+    timeTaken = '...';
+    saveResponseObj: any;
+    showBackButton = false;
+
+    constructor(private _http: HttpClient,
+        private _route: ActivatedRoute,
+        private _runService: RunService,
+        private _router: Router,
+        private changeDetectorRefs: ChangeDetectorRef,
+        public sanitizer: DomSanitizer) {
+        this.displayedColumnsArr = [];
+        this.displayedRowObj = [];
+        this.displayedColumns = [];
+        this.formFieldList = [];
+        this.showSpinner = true;
+        this.isReady = false;
+        this.NEWdisplayedColumns = [];
+        this.initCnt = 0;
+        this.checkCnt = 0;
+        this.showDashboardReport = false;
+        this.openOptionsFlag = false;
+        this.showMoreVert = false;
+        this.environment = environment;
+        this.initCounter = 0;
+        this.runButtonHitCnt = 0;
+        this.displayTotal = [];
+        this.totalRecords = 0;
+        this.pageSize = 0;
+        this.download_in_progress = false;
+
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (this.reportMode !== 'Regular' && this.initCnt > 0 && changes['runAgain']) {
+            this.showMoreVert = false;
+            if (changes['queryString']) {
+                this.queryString = changes['queryString']['currentValue'];
+            }
+            if (this.queryString !== this.initialQueryString) {
+                this.initCnt = 1;
+                this.showDashboardReport = false;
+                this.dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
+                this.displayedColumnsArr = [];
+                this.displayedRowObj = [];
+                this.displayedColumns = [];
+                this.formFieldList = [];
+                this.showSpinner = true;
+                this.isReady = false;
+                this.NEWdisplayedColumns = [];
+                this.displayTotal = [];
+                this.isChartAvailable = false;
+                this.timeTaken = '...';
+                const startDate: Date = new Date();
+                const startTime = startDate.getTime();
+                this._runService.getReportDataWithFormFields(this.queryString, this.inputReportId)
+                    .subscribe((response) => {
+                        if (response['errormessage']) {
+                            this.showError(response);
+                        } else {
+                            this.chartRunUrl = environment.baseUrl + 'raptor.htm?action=chart.run&c_master=' +
+                                this.inputReportId + this.queryString + '&refresh=Y&display_content=Y&r_page=0';
+                            if (this.reportMode !== 'FormField') {
+                                this.postFetchingReportDataFn(response, false);
+                                const endDate: Date = new Date();
+                                const endTime = endDate.getTime();
+                                this.timeTaken = ((endTime - startTime) / 1000).toString();
+                                this.showMoreVert = true;
+                                this.showDashboardReport = true;
+                                this.errorMessage = '';
+                                this.error = false;
+                            } else {
+                                this.postFetchingReportDataFn(response, false);
+                                const endDate: Date = new Date();
+                                const endTime = endDate.getTime();
+                                this.timeTaken = ((endTime - startTime) / 1000).toString();
+                                this.showMoreVert = true;
+                                this.errorMessage = '';
+                                this.error = false;
+                            }
+                        }
+                    });
+            }
+        } else {
         }
-        else
-        {
-          if(this.reportMode !== "FormField")
-          {
-            this.postFetchingReportDataFn(response);
-            this.showMoreVert = true;
+        if (this.initialQueryString !== this.queryString && this.initCounter > 0 && this.hitCnt !== this.runButtonHitCnt) {
+            this.runButtonHitCnt = this.hitCnt;
+            this.initialQueryString = this.queryString;
+            this.initialProcesses();
+        } else {
+            this.runButtonHitCnt = this.hitCnt;
+        }
+
+    }
+
+    ngOnInit() {
+        this.dataSource.paginator = this.paginator;
+        this.dataSource.sort = this.sort;
+        this.dataSource.data = this.displayedRowObj;
+        this.initialProcesses();
+        this.errorMessage = '';
+        this.error = false;
+    }
+
+    initialProcesses() {
+        if (this.DashboardReportObj.length > 0) {
+            this.dashboard = this.DashboardReportObj;
+            this.options = {
+                gridType: GridType.ScrollVertical,
+                margin: 10,
+                outerMargin: true,
+                outerMarginTop: 10,
+                outerMarginRight: 10,
+                outerMarginBottom: 5000,
+                outerMarginLeft: 10,
+                scrollSensitivity: 10,
+                scrollSpeed: 20,
+                emptyCellDragMaxCols: null,
+                emptyCellDragMaxRows: null,
+                ignoreContentClass: 'gridster-item-content',
+                enableOccupiedCellDrop: true,
+                ignoreMarginInRow: false,
+                draggable: {
+                    enabled: true,
+                },
+                resizable: {
+                    enabled: true,
+                },
+                swap: true,
+                pushItems: true,
+                disablePushOnDrag: false,
+                disablePushOnResize: false,
+                pushDirections: {north: true, east: true, south: true, west: true},
+                pushResizeItems: true,
+                disableWindowResize: true,
+                disableWarnings: false,
+                scrollToNewItems: true,
+                enableDropToAdd: true,
+                enableEmptyCellDrop: true,
+                minCols: 2,
+                minRows: 2,
+            };
+            this._runService.getDashboardReportFormFields(this.inputReportId)
+            .subscribe((dashboardFormFields) => {
+                this.download_in_progress = true;
+                this._runService.runDashboardReport(this.inputReportId, this.queryString)
+                    .subscribe((runDashboardReportResp) => {
+                    });
+                this.download_in_progress = false;
+            });
+
+
             this.showDashboardReport = true;
-          }
-          else
-          {
-            this.postFetchingReportDataFn(response);
-            this.showMoreVert = true;
-          }
+
         }
-    });
+        this.hitCnt = this.runButtonHitCnt;
+        this.initialQueryString = this.queryString;
+        this.initCounter++;
+
     }
-    else
-    {
+
+    ngAfterViewInit() {
+        this.afterViewInitialProcesses();
     }
 
-    if(this.initialQueryString !== this.queryString && this.initCounter > 0 && this.hitCnt !== this.runButtonHitCnt)
-    {
-      this.runButtonHitCnt = this.hitCnt;
-      this.initialQueryString = this.queryString;
-      this.initialProcesses();
-      this.afterViewInitialProcesses();
+    afterViewInitialProcesses() {
+        if (sessionStorage.length > 0) {
+            this.showBackButton = true;
+        } else {
+            this.showBackButton = false;
+        }
+        if (this.DashboardReportObj.length === 0) {
+            if (this.reportMode === 'Regular' && this.initCnt == 0) {
+                this.showMoreVert = false;
+                this.dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
+                this.displayedColumnsArr = [];
+                this.displayedRowObj = [];
+                this.displayedColumns = [];
+                this.formFieldList = [];
+                this.showSpinner = true;
+                this.isReady = false;
+                this.NEWdisplayedColumns = [];
+                this.timeTaken = '...';
+                const startDate: Date = new Date();
+                const startTime = startDate.getTime();
+                this._runService.getReportData(this.inputReportId)
+                    .subscribe((response) => {
+                        if (response['errormessage']) {
+                            this.showError(response);
+                        } else {
+                            this.chartRunUrl = environment.baseUrl + 'raptor.htm?action=chart.run&c_master=' +
+                                this.inputReportId + '&refresh=Y&display_content=Y&r_page=0';
+                            this.postFetchingReportDataFn(response, false);
+                            const endDate: Date = new Date();
+                            const endTime = endDate.getTime();
+                            this.timeTaken = ((endTime - startTime) / 1000).toString();
+                            this.showMoreVert = true;
+                        }
+                    });
+            } else {
+                this.showMoreVert = false;
+                this.dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
+                this.displayedColumnsArr = [];
+                this.displayedRowObj = [];
+                this.displayedColumns = [];
+                this.formFieldList = [];
+                this.showSpinner = true;
+                this.isReady = false;
+                this.NEWdisplayedColumns = [];
+                this.timeTaken = '...';
+                const startDate: Date = new Date();
+                const startTime = startDate.getTime();
+                if (localStorage.getItem(this.inputReportId)) {
+                    this.chartRunUrl = environment.baseUrl + 'raptor.htm?action=chart.run&c_master=' +
+                        this.inputReportId + this.queryString + '&refresh=Y&display_content=Y&r_page=0';
+                    this.postFetchingReportDataFn(JSON.parse(localStorage.getItem(this.inputReportId)), false);
+                    this.saveResponseObj = JSON.parse(localStorage.getItem(this.inputReportId));
+                    const endDate: Date = new Date();
+                    const endTime = endDate.getTime();
+                    this.timeTaken = ((endTime - startTime) / 1000).toString();
+                    this.showMoreVert = true;
+                    localStorage.removeItem(this.inputReportId);
+                } else {
+                this._runService.getReportDataWithFormFields(this.queryString, this.inputReportId)
+                    .subscribe((response) => {
+                        if (response['errormessage']) {
+                            this.showError(response);
+                        } else {
+                            this.chartRunUrl = environment.baseUrl + 'raptor.htm?action=chart.run&c_master=' +
+                                this.inputReportId + this.queryString + '&refresh=Y&display_content=Y&r_page=0';
+                                this.saveResponseObj = response;
+                            this.postFetchingReportDataFn(response, false);
+                            const endDate: Date = new Date();
+                            const endTime = endDate.getTime();
+                            this.timeTaken = ((endTime - startTime) / 1000).toString();
+                            this.showMoreVert = true;
+                        }
+                    });
+            }
+            }
+        } else {
+            this.showMoreVert = true;
+            this.showSpinner = false;
+        }
+        this.errorMessage = '';
+        this.error = false;
+        this.initCnt = 1;
     }
-    else
-    {
-      this.runButtonHitCnt = this.hitCnt;
-      this.initialQueryString = this.queryString;
+
+    showError(Errresponse: any) {
+        this.errorMessage = Errresponse['errormessage'];
+        this.stackTrace = Errresponse['stacktrace'];
+        this.error = true;
+        this.showSpinner = false;
+        this.isChartAvailable = false;
     }
-    
-  }
-
-  ngOnInit(){
-    this.initialProcesses();
-    
-  }
-
-  initialProcesses()
-  {
-    if(this.DashboardReportObj.length > 0)
-    {
-      this.dashboard = this.DashboardReportObj;
-      this.options = {
-      gridType: GridType.ScrollVertical,
-      margin: 10,
-      outerMargin: true,
-      outerMarginTop: 10,
-      outerMarginRight: 10,
-      outerMarginBottom: 5000,
-      outerMarginLeft: 10,
-      scrollSensitivity: 10,
-      scrollSpeed: 20,
-      emptyCellDragMaxCols: null,
-      emptyCellDragMaxRows: null,
-      ignoreContentClass: 'gridster-item-content',
-      enableOccupiedCellDrop : true,
-      ignoreMarginInRow: false,
-      draggable: {
-        enabled: true,
-      },
-      resizable: {
-        enabled: true,
-      },
-      swap: true,
-      pushItems: true,
-      disablePushOnDrag: false,
-      disablePushOnResize: false,
-      pushDirections: {north: true, east: true, south: true, west: true},
-      pushResizeItems: true,
-      disableWindowResize: true,
-      disableWarnings: false,
-      scrollToNewItems: true,
-      enableDropToAdd : true,
-      enableEmptyCellDrop : true,
-      minCols : 2,
-      minRows : 2,
-      
-    };
-    this.showDashboardReport = true;
-    
-  }
-
-  this.hitCnt = this.runButtonHitCnt;
-  this.initialQueryString = this.queryString;
-  this.initCounter++;
-  }
-
-  ngAfterViewInit() {
-    this.afterViewInitialProcesses();
-  }
-
-afterViewInitialProcesses()
-{
-  
-  if(this.DashboardReportObj.length === 0)
-  {
-    if(this.reportMode === "Regular" && this.initCnt == 0)
-    {
-      this.showMoreVert = false;
-      this.dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
-
-      this.displayedColumnsArr = new Array();
-      this.displayedRowObj = new Array();
-      this.displayedColumns = new Array();
-      this.formFieldList = new Array();
-      this.showSpinner = true;
-      this.isReady = false;
-      this.NEWdisplayedColumns = new Array();
-      this._runService.getReportData(this.reportId1)
-      .subscribe((response) => {
-        if(response["errormessage"])
-        {
-          this.showError(response);
+
+    postFetchingReportDataFn(response: any, isPageChange: boolean) {
+        this.pageSize = 0;
+        this.totalRecords = 0;
+        this.displayedColumnsArr = [];
+        this.displayedColumns = [];
+        this.formFieldPresent = false;
+        this.responseFormFieldListLength = 0;
+        this.reportName = response['reportName'];
+        let rdc_cntr = 0;
+        while (response['reportDataColumns'][rdc_cntr]) {
+            const columnTitle = response['reportDataColumns'][rdc_cntr]['columnTitle'];
+            const columnId = response['reportDataColumns'][rdc_cntr]['colId'];
+            this.displayedColumnsArr.push(columnTitle + ',' + columnId);
+            rdc_cntr++;
+        }
+
+        if (response['chartWizardAvailable'] === true) {
+            this.isChartAvailable = true;
+            this.iframe.nativeElement.setAttribute('src', this.chartRunUrl);
+        }
+
+        let totalCnt = 0;
+        while (response['reportTotalDataRows'][totalCnt]) {
+            this.displayTotal.push(response['reportTotalDataRows'][totalCnt]);
+            totalCnt++;
         }
-        else
-        {
-          this.postFetchingReportDataFn(response);
-          this.showMoreVert = true;
+
+        let rdr_cntr = 0;
+        while (response['reportDataRows'][rdr_cntr]) {
+            let dca_cntr = 0;
+            const obj = {};
+            const reportDataRows = response['reportDataRows'][rdr_cntr];
+            while (this.displayedColumnsArr[dca_cntr]) {
+                const rowColumnId = this.displayedColumnsArr[dca_cntr].split(',')[1];
+                if (reportDataRows[rowColumnId]) {
+                    let drillDownHtml = '';
+                    let displayValue = '';
+                    drillDownHtml = reportDataRows[rowColumnId]['drillDownURL'];
+                    displayValue = reportDataRows[rowColumnId]['displayValue'];
+                    if (drillDownHtml !== null &&
+                        drillDownHtml.length > 0 &&
+                        !displayValue.includes('linkToReport')) {
+                        const value = this.convertToLinkToReport(drillDownHtml);
+                        if (value.length > 0) {
+                            this.replaceDisplayValue = value + ',' +
+                                reportDataRows[rowColumnId]['displayValue'];
+                        } else {
+                            this.replaceDisplayValue = reportDataRows[rowColumnId]['displayValue'];
+                        }
+                    } else {
+                        this.replaceDisplayValue = reportDataRows[rowColumnId]['displayValue'];
+                    }
+                    let displayObj: DisplayHtml = new class implements DisplayHtml {
+                        'background-color': string;
+                        'font-family': string;
+                        'font-size': string;
+                        'font-style': string;
+                        'font-weight': string;
+                        'text-align': string;
+                        'text-decoration': string;
+                        color: string;
+                    };
+                    if (reportDataRows[rowColumnId]['displayValueHtml'].includes('{')) {
+                        displayObj = JSON.parse(reportDataRows[rowColumnId]['displayValueHtml']);
+                    }
+                    displayObj['text-align'] = reportDataRows[rowColumnId]['alignment'];
+                    if (this.replaceDisplayValue.includes('linkToReport') || this.replaceDisplayValue.includes('linkToFeedback') || this.replaceDisplayValue.includes('linkToMail')) {
+                        obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue.split(',').join('|')
+                            + '|' + JSON.stringify(displayObj);
+                    } else {
+                        obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue
+                            + '|' + JSON.stringify(displayObj);
+                    }
+                }
+                dca_cntr++;
+            }
+            this.displayedRowObj.push(obj);
+            rdr_cntr++;
+        }
+        this.pageSize = response['pageSize'];
+        for (let cntr = 0; cntr < this.displayedColumnsArr.length; cntr++) {
+            const columnArrId = this.displayedColumnsArr[cntr].split(',')[1];
+            this.displayedColumns.push(columnArrId);
+        }
+        this.totalRecords = 0;
+        this.totalRecords = response['totalRows'];
+        this.showSpinner = false;
+        if (!isPageChange) {
+            this.paginator.length = this.totalRecords;
+            this.paginator.pageSize = this.pageSize;
+            this.paginator.pageIndex = 0;
         }
-      });
+        this.dataSource.data = this.displayedRowObj;
+        this.dataSource.sort = this.sort;
+
     }
-    else
-    {
-      
-      this.showMoreVert = false;
-      this.dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
-
-      this.displayedColumnsArr = new Array();
-      this.displayedRowObj = new Array();
-      this.displayedColumns = new Array();
-      this.formFieldList = new Array();
-      this.showSpinner = true;
-      this.isReady = false;
-      this.NEWdisplayedColumns = new Array();
-
-      this._runService.getReportDataWithFormFields(this.queryString, this.reportId1)
-      .subscribe((response) => {
-        if(response["errormessage"])
-        {
-          this.showError(response);
+
+    linkToReport(reportID: string, queryParameters: string) {
+        localStorage.setItem(this.inputReportId, JSON.stringify(this.saveResponseObj));
+        if (sessionStorage.length === 0) {
+            sessionStorage.setItem('1', this.inputReportId + '|' + this.queryString);
+        } else {
+            let length = sessionStorage.length;
+            length++;
+            sessionStorage.setItem(length.toString(), this.inputReportId + '|' + this.queryString);
         }
-        else
-        {
-          this.postFetchingReportDataFn(response);
-          this.showMoreVert = true;
+        this._router.navigate(['v2/run', reportID, queryParameters]);
+    }
+
+
+    linkToFeedback(feedBackId: string, queryParameters: string) {
+        this._router.navigate(['v2/feedback', feedBackId]);
+    }
+
+    linkToMail(mailId: string) {
+        const email = 'mailto:' + mailId;
+        window.location.href = email;
+    }
+
+    openOptions() {
+        this.openOptionsFlag = !this.openOptionsFlag;
+    }
+
+    downloadReport(contentType: string, extension: string) {
+
+        if (this.showDashboardReport === false) {
+            this.download_in_progress = true;
+            this._runService.downloadReport(this.inputReportId, extension)
+                .subscribe((responseExcel) => {
+
+                    this.downLoadFile(responseExcel, contentType, extension, '');
+                    this.download_in_progress = false;
+                });
+        } else {
+            this._runService.getDashboardReportFormFields(this.inputReportId)
+                .subscribe((dashboardFormFields) => {
+                    this.download_in_progress = true;
+                    this._runService.runDashboardReport(this.inputReportId, this.queryString)
+                        .subscribe((runDashboardReportResp) => {
+                            this._runService.downloadDashboardReportExcel(this.inputReportId)
+                                .subscribe((responseDownloadDashboardReport) => {
+                                    this.downLoadFile(responseDownloadDashboardReport, contentType, extension, 'Dashboard');
+                                });
+                        });
+                    this.download_in_progress = false;
+                });
         }
-      });
     }
 
-    
-}
-else
-{
-this.showSpinner = false;
-}
+    downloadSinglePage(contentType: string, extension: string) {
+        this.download_in_progress = true;
+        this._runService.downloadSinglePageReport(this.inputReportId, extension)
+            .subscribe((responseExcel) => {
 
-this.initCnt = 1;
-}
+                this.downLoadFile(responseExcel, contentType, extension, '');
+                this.download_in_progress = false;
+            });
+    }
 
-showError(Errresponse : any)
-{
-  this.errorMessage = Errresponse["errormessage"];
-  this.stackTrace = Errresponse["stacktrace"];
-  this.error = true;
-  this.showSpinner = false;
-}
+    downLoadFile(data: any, type: string, extension: string, reportType: string) {
+        const blob = new Blob([data], {type: type});
+        const dt = new Date();
+        const utcDate = dt.getTime();
+        let fileName = this.reportName + utcDate + '.' + extension;
+        if (reportType === 'Dashboard') {
+            fileName = '';
+            fileName = reportType + '-' + this.inputReportId + '.' + extension;
+        }
+        if (window.navigator.msSaveOrOpenBlob) {
+            window.navigator.msSaveBlob(blob, fileName);
+        } else {
+            const anchor = window.document.createElement('a');
+            anchor.href = window.URL.createObjectURL(blob);
+            anchor.download = fileName;
+            document.body.appendChild(anchor);
+            anchor.click();
+            document.body.removeChild(anchor);
+            window.URL.revokeObjectURL(anchor.href);
+        }
+    }
 
-  postFetchingReportDataFn(response : any)
-  {
-    
-    this.formFieldPresent = false;
-    this.responseFormFieldListLength = 0;
-
-    this.reportName = response["reportName"];
-
-  let i=0;
-  while(response["reportDataColumns"][i])
-  {
-    let columnTitle = response["reportDataColumns"][i]["columnTitle"];
-    let columnId = response["reportDataColumns"][i]["colId"];
-    this.displayedColumnsArr.push(columnTitle +","+ columnId);
-    i++;
-  }
-
-  let j=0;
-  while(response["reportDataRows"][j])
-  {
-    let k=0;
-    let obj = new Object();
-    let reportDataRows = response["reportDataRows"][j];
-    while(this.displayedColumnsArr[k])
-    {
-      let rowColumnId = this.displayedColumnsArr[k].split(",")[1];
-      if(reportDataRows[rowColumnId])
-      {
-         obj[reportDataRows[rowColumnId]["colId"]] = reportDataRows[rowColumnId]["displayValue"];
-      }
-      k++;
+    applyFilter(filterValue: string) {
+        this.dataSource.data = this.displayedRowObj;
+        this.dataSource.sort = this.sort;
+        if (filterValue === '' || filterValue === null) {
+        } else {
+            this.dataSource.filter = filterValue.trim().toLowerCase();
+        }
     }
-    this.displayedRowObj.push(obj);
-    j++;
-  }
-  for(let l=0; l<this.displayedColumnsArr.length; l++)
-  {
-    let columnArrId = this.displayedColumnsArr[l].split(",")[1];
-    this.displayedColumns.push(columnArrId);
-  }
-  this.showSpinner = false;
-  
-  this.dataSource = new MatTableDataSource<PeriodicElement>(this.displayedRowObj);
-  
-  this.dataSource.sort = this.sort;
-  this.dataSource.paginator = this.paginator;
-  
-  this.table.dataSource = this.dataSource;
- 
-  this.changeDetectorRefs.detectChanges();
-  }
-
-  linkToReport(reportID : string, queryParameters : string)
-  {
-    this._router.navigate(['v2/run', reportID, queryParameters]);
-  }
-  
-  
-  linkToFeedback(feedBackId : string, queryParameters : string)
-  {
-    this._router.navigate(['v2/feedback', feedBackId]);
-  }
-
-  linkToMail(mailId : string)
-  {
-    var email = "mailto:" + mailId;
-    window.location.href = email;
-  }
-
-
-  openOptions()
-  {
-    this.openOptionsFlag = !this.openOptionsFlag;
-  }
-
-  downloadReportExcel()
-  {
-    this._runService.downloadReportExcel(this.reportId1)
-    .subscribe((responseExcel) => {
-      
-      this.downLoadFile(responseExcel, "application/vnd.ms-excel")
-    });
-  }
-
-  downLoadFile(data: any, type: string) {
-    let blob = new Blob([data], { type: type});
-    let url = window.URL.createObjectURL(blob);
-    let pwa = window.open(url);
-    if (!pwa || pwa.closed || typeof pwa.closed == 'undefined') {
-        alert( 'Please disable your Pop-up blocker and try again.');
+
+    setStyle(styles: string) {
+        if (styles.includes('{')) {
+            return JSON.parse(styles);
+        } else {
+            return {};
+        }
     }
-}
 
-applyFilter(filterValue: string) {
-  this.dataSource.filter = filterValue.trim().toLowerCase();
-}
+    getDisplayTotal(keys: string) {
+        if (this.displayTotal.length > 0) {
+            return this.displayTotal[0][keys].displayValue;
+        } else {
+            return '';
+        }
+    }
 
+    onPaginationChange(event: any) {
+        if (this.DashboardReportObj.length === 0) {
+            if (this.reportMode === 'Regular' && this.initCnt === 0) {
+                this.showMoreVert = false;
+                this.displayedColumnsArr = [];
+                this.displayedRowObj = [];
+                this.displayedColumns = [];
+                this.formFieldList = [];
+                this.showSpinner = true;
+                this.isReady = false;
+                this.NEWdisplayedColumns = [];
+                this.isChartAvailable = false;
+                this.timeTaken = '...';
+                const startDate: Date = new Date();
+                const startTime = startDate.getTime();
+                this._runService.getReportDataWithPageNo(this.inputReportId, event.pagenum)
+                    .subscribe((response) => {
+                        if (response['errormessage']) {
+                            this.showError(response);
+                        } else {
+                            const endDate: Date = new Date();
+                            const endTime = endDate.getTime();
+                            this.timeTaken = ((endTime - startTime) / 1000).toString();
+                            this.chartRunUrl = environment.baseUrl + 'raptor.htm?action=chart.run&c_master=' +
+                                this.inputReportId + '&refresh=Y&display_content=Y&r_page=' + event.pagenum;
+                            this.postFetchingReportDataFn(response, true);
+                            this.showMoreVert = true;
+                        }
+                    });
+            } else {
+                this.showMoreVert = false;
+                this.displayedColumnsArr = [];
+                this.displayedRowObj = [];
+                this.displayedColumns = [];
+                this.formFieldList = [];
+                this.showSpinner = true;
+                this.isReady = false;
+                this.NEWdisplayedColumns = [];
+                this.isChartAvailable = false;
+                this.timeTaken = '...';
+                const startDate: Date = new Date();
+                const startTime = startDate.getTime();
+                this._runService.getReportDataWithFormFieldsWithPageNo(this.queryString, this.inputReportId, event.pageIndex)
+                    .subscribe((response) => {
+                        if (response['errormessage']) {
+                            this.showError(response);
+                        } else {
+                            const endDate: Date = new Date();
+                            const endTime = endDate.getTime();
+                            this.timeTaken = ((endTime - startTime) / 1000).toString();
+                            this.chartRunUrl = environment.baseUrl + 'raptor.htm?action=chart.run&c_master=' +
+                                this.inputReportId + this.queryString + '&refresh=Y&display_content=Y&r_page=' + event.pagenum;
+                            this.postFetchingReportDataFn(response, true);
+                            this.showMoreVert = true;
+                        }
+                    });
+            }
+        } else {
+            this.showMoreVert = true;
+            this.showSpinner = false;
+        }
+        this.errorMessage = '';
+        this.error = false;
+        this.initCnt = 1;
+    }
+
+    convertToLinkToReport(value: string) {
+        value = value.replace(/;/g, '');
+        let outPut = '';
+        while (value.includes('c_master=')) {
+            const index = value.indexOf('c_master=');
+            if (index > 0) {
+                value = value.substring(index, value.length);
+            } else if (index === 0) {
+                value = value.replace('c_master=', '');
+            }
+        }
+        const split = value.split('&');
+        // const spltFirst = split[0].split('=');
+        if (split[1].length <= 0) {
+            return outPut;
+        }
+        outPut = 'linkToReport,' + split[0] + ',';
+        let splitCounter = 1;
+        for (splitCounter = 1; splitCounter < split.length; splitCounter++) {
+            if (!split[splitCounter].includes('LOGIN_ID=') &&
+                !split[splitCounter].includes('display_content=') &&
+                !split[splitCounter].includes('drilldown_index=') &&
+                !split[splitCounter].includes('show_back_btn=') &&
+                !split[splitCounter].includes('r_action')) {
+                outPut = outPut + '&' + split[splitCounter];
+            }
+        }
+        return outPut;
+    }
+
+
+
+    takeToReport(queryString: string, reportID: string) {
+        this._router.navigate(['v2/run', reportID, queryString , this.groupSelectValue]);
+    }
+
+    goBack() {
+        const length = sessionStorage.length;
+        let repId = '';
+        let queryString = '';
+        if (length > 1) {
+            let split = [];
+            split = sessionStorage.getItem((length).toString()).split('|');
+            repId = split[0];
+            queryString = split[1];
+            sessionStorage.removeItem((length).toString());
+        } else if (length === 1) {
+            let split = [];
+            split = sessionStorage.getItem('1').split('|');
+            repId = split[0];
+            queryString = split[1];
+            sessionStorage.removeItem('1');
+        }
+        localStorage.removeItem(this.inputReportId);
+        this._router.navigate(['v2/run', repId, queryString]);
+    }
 
 }