Raptor UI Changes, user profile, folder restructure

Issue-ID: PORTAL-902
Change-Id: Ib76bb3fce7efe55504b75d2fc4764bafb9f8e908
Signed-off-by: mravula <mr257h@att.com>

12 files changed, 0 insertions, 3157 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/dashboard-report.service.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/dashboard-report.service.spec.ts
deleted file mode 100644
index 1c96f7ed..00000000
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-dashboard-report/dashboard-report.service.spec.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { DashboardReportService } from './dashboard-report.service';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { HttpClient } from '@angular/common/http';
-import { environment } from 'src/environments/environment';
-
-describe('DashboardReportService', () => {
-
-    let service: DashboardReportService;
-
-  beforeEach(() => {TestBed.configureTestingModule({
-    imports: [HttpClientTestingModule],
-    providers: [HttpClient, HttpClientTestingModule, DashboardReportService]
-  });
-    service = TestBed.get(DashboardReportService);
-  
-});
-
-  it('should be created', () => {
-    const service: DashboardReportService = TestBed.get(DashboardReportService);
-    expect(service).toBeTruthy();
-  });
-
-  it('should getReportData', () => {
-      service.getReportData("test").subscribe((res) => {
-          expect(res).toBe(environment);
-      });
-  });
-
-  it('should getReportDataWithFormFields', () => {
-    service.getReportDataWithFormFields("just", "test").subscribe((res) => {
-        expect(res).toBe(environment);
-    });
-  });
-
-});
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/dashboard-report.service.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-dashboard-report/dashboard-report.service.ts
deleted file mode 100644
index 1b046334..00000000
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-dashboard-report/dashboard-report.service.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
-import { environment } from 'src/environments/environment';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class DashboardReportService {
-
-  constructor(private _http : HttpClient) { }
-
-  
-  getReportData(reportId : string) : Observable<any>
-  {
-    return this._http.get(environment.baseUrl + "raptor.htm?action=report.run.container&c_master="+reportId+"&refresh=Y");      
-  }
-
-  getReportDataWithFormFields(queryString : string, reportId : string) : Observable<any>
-  {
-    return this._http.get(environment.baseUrl + "raptor.htm?action=report.run.container&c_master="+reportId+queryString+"&refresh=Y&display_content=Y&r_page=0");
-  }
-}
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
deleted file mode 100644
index c57d7287..00000000
--- 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
+++ /dev/null
@@ -1,90 +0,0 @@
-.submit-approval-btn{
-  display: contents;
-}
-.lds-ring {
-  display: inline-block;
-  position: relative;
-  width: 64px;
-  height: 64px;
-}
-.lds-ring div {
-  box-sizing: border-box;
-  display: block;
-  position: absolute;
-  width: 35px;
-  height: 35px;
-  margin: 6px;
-  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;
-}
-.lds-ring div:nth-child(1) {
-  animation-delay: -0.45s;
-}
-.lds-ring div:nth-child(2) {
-  animation-delay: -0.3s;
-}
-.lds-ring div:nth-child(3) {
-  animation-delay: -0.15s;
-}
-@keyframes lds-ring {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-
-table {
-    width: 100%;
-  }
-  .example-container {
-    height: auto;
-    max-height: 800px;
-    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: 0px;
-  }
-
-  
-th{
-    background-color: #2125299c;
-    color: rgb(255, 255, 255);
-    font-size: 15px;
-    border-radius: 2px;
-    height: 35px;
-  }
-  
-  tr:nth-child(even) {
-    background-color: #dddddd;
-    font-size: 2px;
-    height: 35px;
-    border-radius: 4px;
-    
-  }
-  
-  tr:nth-child(odd) {
-    font-size: 2px;
-    height: 35px;
-    border-radius: 4px;
-  }
-  
\ 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.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
deleted file mode 100644
index 08ae8d42..00000000
--- 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
+++ /dev/null
@@ -1,82 +0,0 @@
-<span class="ecomp-spinner" *ngIf="showSpinner"></span>   
-
-<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>
-
-                    <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>
-
-                <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
-            </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>
-        </div>
-          <mat-paginator #paginator
-              [length]="dataSource?.data.length"
-              [pageIndex]="0"
-              [pageSize]="15"
-              [pageSizeOptions]="[15, 25, 50, 100, 250]">
-          </mat-paginator>
-        </div>
-  </div> -->
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.scss 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.scss
deleted file mode 100644
index e69de29b..00000000
--- 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.scss
+++ /dev/null
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
deleted file mode 100644
index a94d9ee1..00000000
--- 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
+++ /dev/null
@@ -1,132 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatTableModule } from '@angular/material';
-import { RunDashboardReportComponent } from './run-dashboard-report.component';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { RouterModule, Router } from '@angular/router';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { DashboardReportService } from './dashboard-report.service';
-import { MockBackend, MockConnection } from '@angular/http/testing';
-import { Http, BaseRequestOptions } from '@angular/http';
-import { Observable } from 'rxjs';
-import 'rxjs/add/observable/empty';
-import 'rxjs/add/observable/of';
-import { environment } from 'src/environments/environment';
-
-describe('RunDashboardReportComponent', () => {
-  let component: RunDashboardReportComponent;
-  let fixture: ComponentFixture<RunDashboardReportComponent>;
-  let dashboardService : DashboardReportService;
-  let router: Router;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-      declarations: [ RunDashboardReportComponent ],
-      imports: [MatTableModule, RouterTestingModule, HttpClientTestingModule],
-      providers:[DashboardReportService, MockBackend, BaseRequestOptions, {
-        provide: Http,
-                    useFactory: (backend: MockBackend, defaultOptions: BaseRequestOptions) => {
-                        return new Http(backend, defaultOptions);
-                    },
-                    deps: [MockBackend, BaseRequestOptions],
-      }]
-    })
-    .compileComponents();
-    dashboardService = TestBed.get(DashboardReportService);
-    router = TestBed.get(Router);
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(RunDashboardReportComponent);
-    component = fixture.componentInstance;
-  });
-
-  it('should create', () => { 
-    expect(component).toBeTruthy();
-  });
-
-  it('should test ngOnInit method', () => {
-        component.queryString = "test";
-        component.ngOnInit();
-        expect(component.initialQueryString).toEqual("test");
-        expect(component.initCounter).toEqual(component.initCounter++);
-        spyOn(component, 'initialProcesses');
-        component.initialProcesses();
-        expect(component.initialProcesses).toHaveBeenCalled();
-  });
-
-  it('should test initialProcess method', () => {
-        component.initialProcesses();
-        expect(component.dataSource.paginator).toEqual(component.paginator);
-  });
-
-  it('should test ngOnChanges methods if condition', () => {
-
-      component.hitCnt = 1;
-      component.queryString =  "testing"
-        component.initialQueryString === "test";
-        component.initCounter > 0;
-        component.runButtonHitCounter === 2;
-
-        component.ngOnChanges();
-        expect(component.initialQueryString).toEqual(component.queryString);
-        expect(component.runButtonHitCounter).toEqual(component.hitCnt);
-
-        spyOn(component, 'initialProcesses');
-        spyOn(component, 'afterViewInitProcesses');
-        component.initialProcesses();
-        component.afterViewInitProcesses();
-        expect(component.initialProcesses).toHaveBeenCalled();
-        expect(component.afterViewInitProcesses).toHaveBeenCalled();
-        
-  });
-
-  it('should test ngOnChanges methods else condition', () => {
-
-    component.hitCnt = 1;
-    component.queryString =  "testing"
-      component.initialQueryString === "testing";
-      component.initCounter = 0;
-      component.runButtonHitCounter === 1;
-
-      component.ngOnChanges();
-      expect(component.runButtonHitCounter).toBe(component.hitCnt);
-      expect(component.initialQueryString).toBe(component.queryString);
-      
-});
-
-  it('should test applyFilter method', () => {
-        component.applyFilter("testing");
-        expect(component.dataSource.filter).toEqual("testing".trim().toLowerCase());
-  });
-
-   it('should test afterViewInitProcesses method', () => {
-    component.afterViewInitProcesses();
-    expect(component.displayedColumnsArr).toEqual(new Array());
-    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.isReady).toEqual(false);
-    expect(component.NEWdisplayedColumns).toEqual(new Array());
-  });
-
-    it('should test linkToReport method', () => {
-      let reportId = "abc";
-      let queryParameters = "def";
-      component.linkToReport(reportId, queryParameters);
-    });
-
-    it('should test linkToFeedback method', () => {
-      let reportId = "abc";
-      let queryParameters = "def";
-      component.linkToFeedback(reportId, queryParameters);
-    });
-
-    it('should test linkToMail method', () => {
-      let mailID = "abc";
-      component.linkToMail(mailID);
-    });
-
-});
\ 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.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
deleted file mode 100644
index ccf6212a..00000000
--- 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
+++ /dev/null
@@ -1,275 +0,0 @@
-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';
-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']
-})
-
-export class RunDashboardReportComponent implements AfterViewInit {
-
-    @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();
-    }
-
-    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();
-        } 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);
-                    });
-            }
-        }
-    }
-
-    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;
-    }
-
-    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);
-        }
-        this._router.navigate(['v2/app/run', reportID, queryParameters]);
-    }
-
-    linkToFeedback(feedBackId: string, queryParameters: string) {
-        this._router.navigate(['v2/app/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;
-    }
-
-
-}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report-datasource.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report-datasource.ts
deleted file mode 100644
index 8c8d6222..00000000
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report-datasource.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
-import { map } from 'rxjs/operators';
-import { Observable, of as observableOf, merge } from 'rxjs';
-
-// TODO: Replace this with your own data model type
-export interface RunReportFinalTableItem {
-  
-}
-
-// TODO: replace this with real data from your application
-
-
-/**
- * Data source for the RunReportFinalTable view. This class should
- * encapsulate all logic for fetching and manipulating the displayed data
- * (including sorting, pagination, and filtering).
- */
-export class RunReportDataSource extends DataSource<RunReportFinalTableItem> {
-  data: RunReportFinalTableItem[];
-  paginator: MatPaginator;
-  sort: MatSort;
-
-  constructor() {
-    super();
-  }
-
-  /**
-   * Connect this data source to the table. The table will only update when
-   * the returned stream emits new items.
-   * @returns A stream of the items to be rendered.
-   */
-  connect(): Observable<RunReportFinalTableItem[]> {
-    // Combine everything that affects the rendered data into one update
-    // stream for the data-table to consume.
-    const dataMutations = [
-      observableOf(this.data),
-      this.paginator.page,
-      this.sort.sortChange
-    ];
-
-    return merge(...dataMutations).pipe(map(() => {
-      return this.getPagedData(this.getSortedData([...this.data]));
-    }));
-  }
-
-  /**
-   *  Called when the table is being destroyed. Use this function, to clean up
-   * any open connections or free any held resources that were set up during connect.
-   */
-  disconnect() {}
-
-  /**
-   * Paginate the data (client-side). If you're using server-side pagination,
-   * this would be replaced by requesting the appropriate data from the server.
-   */
-  private getPagedData(data: RunReportFinalTableItem[]) {
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  /**
-   * Sort the data (client-side). If you're using server-side sorting,
-   * this would be replaced by requesting the appropriate data from the server.
-   */
-  private getSortedData(data: RunReportFinalTableItem[]) {
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-
-    return data.sort((a, b) => {
-      const isAsc = this.sort.direction === 'asc';
-      switch (this.sort.active) {
-        // case 'name': return compare(a.name, b.name, isAsc);
-        // case 'id': return compare(+a.id, +b.id, isAsc);
-        
-        
-        default: return 0;
-      }
-    });
-  }
-}
-
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-function compare(a, b, isAsc) {
-  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-}
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
deleted file mode 100644
index 85e3c58f..00000000
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.css
+++ /dev/null
@@ -1,1419 +0,0 @@
-.approval-img{
-  height:25px;
-   width:25px
-}
-.submit-approval-btn{
-  display: contents;
-}
-.gridster-item-content{
-  overflow-y: scroll;
-  overflow-x: scroll;
-  overflow: scroll;
-}
-
-.lds-ring {
-  display: inline-block;
-  position: relative;
-  width: 64px;
-  height: 64px;
-}
-.lds-ring div {
-  box-sizing: border-box;
-  display: block;
-  position: absolute;
-  width: 35px;
-  height: 35px;
-  margin: 6px;
-  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;
-}
-.lds-ring div:nth-child(1) {
-  animation-delay: -0.45s;
-}
-.lds-ring div:nth-child(2) {
-  animation-delay: -0.3s;
-}
-.lds-ring div:nth-child(3) {
-  animation-delay: -0.15s;
-}
-@keyframes lds-ring {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-
-/* .left {
-  width: auto;
-  float: left;
-  text-align: right;
-}
-.right {
-  width: auto;
-
-  float: left;
-} */
-
-mat-icon{
-  color: #006496;
-  cursor: pointer;
-}
-.mat-icon-delete{
-  color: #006496;
-  cursor: pointer;
-}
-
-
-button,
-input,
-select,
-textarea {
-  margin: 0;
-  font-size: 100%;
-  vertical-align: middle; }
-
-
-button,
-html input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-  appearance: button;
-  cursor: pointer; }
-
-
-.defaultFontSize1{
-  font-size: 16px;
-}
-
-.defaultFontSize{
-  font-size: 15px;
-}
-
-/* .tab-pane{
-  padding-right: 130px;
-  padding-left: 120px;
-  color: rgba(0, 0, 0, 0.603)
-} */
-
-.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;
-  border-radius: 5px;
-}
-
-
-.tab-content{
-  margin-right: 20px;
-  /* background-color: #006496; */
-  color: rgb(0, 0, 0);
-}
-
-.stdForm{
-  margin-left: 20px;
-}
-
-.field-group {
-  position: relative;
-  display: block;
-}
-
-
-input {
-  width: 400px;
-  height: 35px;
-}
-
-label + .field-group, label + .input-append, label + .row, label + .row-nowrap, label + .form-row {
-  margin-top: 5px;
-}
-
-
-.checkbox .skin {
-  background-color: #fff;
-  border: 1px solid #d2d2d2;
-  border-radius: 3px;
-  display: inline-block;
-  height: 24px;
-  width: 24px;
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-
-
-label,
-select,
-button,
-input[type="button"],
-input[type="reset"],
-input[type="submit"],
-input[type="radio"],
-input[type="checkbox"] {
-  cursor: pointer; }
-
-label,
-select,
-button,
-input[type="button"],
-input[type="reset"],
-input[type="submit"],
-input[type="radio"],
-input[type="checkbox"] {
-  cursor: pointer; }
-
-input[type=search] {
-  -webkit-appearance: textfield; }
-
-input[type=search]:-webkit-search-cancel-button,
-input[type=search]:-webkit-search-decoration {
-  -webkit-appearance: none; }
-
-
-
-  [class*="icon-primary-"],
-  .nav-links a:after,
-  .bellyband-link a:after,
-  .breadcrumb > li:after,
-  .checkbox input:checked + .skin:after,
-  .checkbox input.indeterminate + .skin:after,
-  .checkbox input:indeterminate + .skin:after,
-  .selectWrap.large:before,
-  .form-row.error .error-msg:before,
-  .close:before,
-  .reset-field:before,
-  .cssIcon-globe:before,
-  .selectWrap:after {
-    color: #0568ae;
-    left: 6px;
-    top: -3px;
-    width: 2px;
-    height: 3px;
-    border: solid white;
-    border-width: 0 3px 3px 0;
-    -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;
-    font-style: normal;
-    font-size: 20px;
-    font-weight: normal;
-    font-variant: normal;
-    font-style: normal;
-    width: 20px;
-    text-transform: none;
-    line-height: 1;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    position: relative;
-    speak: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    vertical-align: middle; }
-
-  [class*="icon-primary-"]:before,
-  [class*="icon-primary-"]:after {
-    box-sizing: border-box;
-    display: inline-block;
-    font-size: 1em;
-    height: 1em;
-    position: relative;
-    top: 0;
-    left: 0;
-    vertical-align: middle;
-    width: 1em; }
-
-
-.checkbox {
-  position: relative;
-  min-height: 24px;
-  font-family: "Omnes-ECOMP-W02", Arial;
-  font-size: 1rem;
-   }
-  .checkbox input {
-    -webkit-tap-highlight-color: transparent;
-    height: 20px;
-    margin-left: 20px;
-    opacity: 0;
-    outline: none;
-    position: absolute;
-    left: 1px;
-    top: 1px;
-    width: 10px; }
-    .checkbox input:focus + .skin {
-      border-color: #0568ae; }
-      .checkbox input:focus + .skin:before {
-        content: "";
-        height: 34px;
-        left: -6px;
-        top: -6px;
-        outline: 1px dotted #000000;
-        position: absolute;
-        width: 34px; }
-    .checkbox input:checked:not(:disabled) + .skin {
-      background-color: #0568ae;
-      border-color: #0568ae; }
-    .checkbox input:checked:disabled + .skin:after {
-      color: #5A5A5A; }
-    .checkbox input:checked + .skin:after {
-      height: 20px;
-      width: 10px;
-      background-color: transparent;
-      font-size: 23.4px;
-      color: #FFFFFF;
-      line-height: 21px; }
-    .checkbox input:disabled + .skin {
-      cursor: not-allowed;
-      background-color: #d2d2d2;
-      border-color: #d2d2d2;
-      color: #666666; }
-      .checkbox input:disabled + .skin + span {
-        cursor: not-allowed;
-        color: #666666; }
-    .checkbox input:invalid + .skin {
-      border: solid 1px #cf2a2a; }
-    .checkbox input:indeterminate + .skin:after {
-      background-color: transparent;
-      font-size: 25px;
-      color: #0574ac;
-      content: "\e920"; }
-  .checkbox .skin {
-    background-color: #fff;
-    border: 1px solid #d2d2d2;
-    border-radius: 3px;
-    display: inline-block;
-    height: 24px;
-    width: 24px;
-    position: absolute;
-    left: 0;
-    top: 0; }
-  .checkbox span {
-    display: inline-block;
-    margin-left: 34px;
-    margin-top: 0;
-    position: relative;
-    top: 3px; }
-  .checkbox label {
-    font-size: 1.6rem;
-    font-family: "Omnes-ECOMP-W02", Arial; }
-  .checkbox input {
-    z-index: 9999; }
-  .checkbox input.indeterminate + .skin:after {
-    font-size: 22px;
-    color: #0568ae; }
-
-/* .checkbox.inline {
-  display: inline-block;
-  margin-bottom: 10px;
-  vertical-align: middle;
-  margin-right: 10px; }
-  .checkbox.inline:last-child {
-    margin-right: 0; }
-
-.checkbox.checkbox-selectall {
-  margin: 20px 0 0 24px; }
-
-.terms-after-checkbox {
-  margin-top: 15px; } */
-
-
-  .b2b-tree-checkbox a > span.nodeIcon.end {
-    margin-top: 10px; }
-.b2b-tree-checkbox a:only-child {
-  color: #0574ac; }
-  .b2b-tree-checkbox a:only-child > span.nodeIcon {
-    left: -11px;
-    border-radius: 50%;
-    line-height: 7px;
-    top: 0; }
-    .b2b-tree-checkbox a:only-child > span.nodeIcon > i {
-      background-color: inherit;
-      background: #fff; }
-.b2b-tree-checkbox a > span.nodeIcon > i.icon-primary-circle {
-  background-color: inherit;
-  background: #fff;
-  font-size: 5px; }
-.b2b-tree-checkbox ul li:first-child > a:only-child > span {
-  left: -11px;
-  border-radius: 50%;
-  line-height: 12px;
-  top: 0px; }
-.b2b-tree-checkbox ul li:first-child > a:only-child > span.end {
-  margin-top: 0px; }
-.b2b-tree-checkbox ul li:first-child > a:only-child > span i.icon-primary-circle {
-  top: 8px; }
-.b2b-tree-checkbox ul li:last-child > a:only-child > span {
-  height: 34px;
-  background-color: #fff; }
-.b2b-tree-checkbox li a + ul {
-  height: 0;
-  overflow: hidden; }
-.b2b-tree-checkbox li a.active + ul {
-  height: auto; }
-.b2b-tree-checkbox li a.grp {
-  font-family: "Omnes-ECOMP-W02-Italic", Arial; }
-.b2b-tree-checkbox span.end {
-  left: -6px !important; }
-.b2b-tree-checkbox .checkbox {
-  margin-bottom: 0px;
-  margin-top: 2px;
-  font-size: 14px; }
-  .b2b-tree-checkbox .checkbox input:indeterminate + .skin:after {
-    content: "\2014";
-    padding-left: 2px;
-    font-family: inherit !important;
-    line-height: inherit !important; }
-/* .b2b-tree-checkbox span.first-link {
-  width: 3px !important;
-  height: 15px !important;
-  top: 0px !important;
-  left: -2px !important;
-  background: #fff; } */
-
-  .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;
-  width: 24px; }
-
-
-textarea {
-  display: block;
-  width: 400px;
-  max-width: 50%;
-  padding: 15px;
-}
-select {
-  margin-right: -1;
-  max-width: 400px;
-  height: 36px;
-  line-height: 25px;
-  width: 400px;
-  background-color: #95959521; }
-
-.selectWrap.disabled .icon-primary-down {
-  color: #d6d6d6; }
-
-.selectWrap.disabled input.awd-select {
-  z-index: 0;
-  padding: 10px 45px 10px 15px;
-  text-indent: 0; }
-
-.selectWrap.disabled button.awd-select {
-  z-index: 0;
-  text-indent: 15px; }
-
-.selectWrap.disabled:after {
-  color: #5A5A5A;
-  cursor: not-allowed; }
-
-input.awd-select {
-  background-color: transparent;
-  border: 1px solid #d2d2d2;
-  border-radius: 6px;
-  box-shadow: 1px 5px 2px -5px rgba(0, 0, 0, 0.15);
-  color: #333333;
-  display: block;
-  font-family: "Omnes-ECOMP-W02", Arial;
-  /*font-size: 1.6rem;*/
-  height: 36px;
-  line-height: 0;
-  margin-bottom: 0;
-  position: relative;
-  text-align: left;
-  top: 0;
-  width: 100%;
-  z-index: 10;
-  padding: 12px 45px 8px 15px;
-  user-select: none; }
-  input.awd-select:focus {
-    border-color: #0568ae !important;
-    text-overflow: ellipsis;
-    padding-right: 45px; }
-
-button.awd-select {
-  background-color: transparent;
-  border: 1px solid #d2d2d2;
-  border-radius: 6px;
-  box-shadow: 1px 5px 2px -5px rgba(0, 0, 0, 0.15);
-  color: #333333;
-  display: block;
-  font-family: "Omnes-ECOMP-W02", Arial;
-  /*font-size: 1.6rem;*/
-  height: 36px;
-  line-height: 36px;
-  margin-bottom: 0;
-  position: relative;
-  text-align: left;
-  top: 0;
-  width: 100%;
-  z-index: 10; }
-  button.awd-select:not(.large) {
-    text-indent: 15px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: clip;
-    text-overflow: ellipsis; }
-  button.awd-select img {
-    height: 26px;
-    margin-right: 7px;
-    margin-top: -10px;
-    position: relative;
-    top: 2px;
-    vertical-align: text-bottom; }
-  button.awd-select:focus {
-    border-color: #0568ae !important; }
-  button.awd-select i {
-    font-size: 23px;
-    position: absolute;
-    right: 33px;
-    top: 5px;
-    z-index: 1000; }
-
-button.awd-select.large {
-  align-items: center;
-  display: flex;
-  height: 60px;
-  line-height: 20px;
-  overflow: hidden;
-  padding-left: 70px;
-  vertical-align: middle; }
-  button.awd-select.large img {
-    height: 40px;
-    left: 20px;
-    position: absolute;
-    top: 20px;
-    width: 40px; }
-
-.selectWrap.large {
-  height: 60px; }
-  .selectWrap.large .awd-select-list-item {
-    align-items: center;
-    display: flex;
-    height: 60px;
-    line-height: 20px;
-    overflow: hidden;
-    padding-left: 70px;
-    vertical-align: middle; }
-    .selectWrap.large .awd-select-list-item img {
-      height: 40px;
-      left: 20px;
-      position: absolute;
-      top: 20px;
-      width: 40px;
-      top: 10px; }
-
-      .inputWrap {
-  border-radius: 6px;
-  position: relative;
-  height: 36px;
-  line-height: 44px;
-  display: block;
-  margin: 0;
-  }
-
-button.awd-select.active {
-  border-radius: 6px 6px 0 0; }
-  button.awd-select.active:focus {
-    border-color: #d2d2d2 !important; }
-
-input.awd-select.active {
-  border-radius: 6px 6px 0 0; }
-  input.awd-select.active:focus {
-    border-color: #d2d2d2 !important; }
-
-.selectWrapper {
-  position: relative; }
-
-span.selectWrap input[readonly]:focus {
-  color: transparent;
-  text-shadow: 0 0 0 #000; }
-
-.isIE.ds2-no-colors .awd-select:focus {
-  outline: 1px dashed transparent; }
-
-.awd-select-list {
-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
-  border-radius: 0 0 6px 6px;
-  position: absolute;
-  border: 1px solid #d2d2d2;
-  border-top: 0;
-  padding: 0;
-  background-color: #f2f2f2;
-  z-index: 1000;
-  width: 100%;
-  max-height: 320px;
-  overflow-y: auto; }
-
-.awd-select-list-item {
-  cursor: pointer;
-  height: 100%;
-  min-height: 36px;
-  line-height: 20px;
-  overflow: hidden;
-  padding: 8px 15px;
-  position: relative;
-  z-index: 1000; }
-  .awd-select-list-item:hover {
-    cursor: pointer;
-    background-color: #d2d2d2;
-    outline: 1px dashed transparent; }
-  .awd-select-list-item:focus {
-    cursor: pointer;
-    background-color: #d2d2d2;
-    outline: 1px dashed transparent; }
-  .awd-select-list-item img {
-    margin-top: 0;
-    margin-right: 7px;
-    height: 26px;
-    width: 26px; }
-
-.selectWrap {
-  border-radius: 6px;
-  position: relative;
-  height: 36px;
-  line-height: 28px;
-  display: block;
-  margin: 0;
-  background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);
-  background: -webkit-linear-gradient(top, #fcfcfc 0%, #f2f2f2 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="@att-gray-highlight", endColorstr="@att-functional-bg-gray", GradientType=0); }
-  .selectWrap:not(.large) .awd-select-list-item:first-child {
-    margin-top: 15px; }
-  .selectWrap:not(.large) .awd-select-list-item:last-child {
-    margin-bottom: 15px; }
-  .selectWrap .icon-primary-down {
-    font-size: 23px;
-    margin-top: -11px;
-    position: absolute;
-    right: 4px;
-    top: 50%; }
-  .selectWrap + [aria-expanded="true"] {
-    padding-bottom: 9px;
-    padding-top: 20px; }
-
-.awd-select-list-item[data-hover="true"] {
-  background-color: #d2d2d2; }
-
-span input.awd-select {
-  width: 100%;
-  cursor: pointer;
-  text-overflow: ellipsis;
-  padding-right: 45px; }
-
-li.optgroup-wrapper {
-  font-family: "Omnes-ECOMP-W02-Medium", Arial;
-  cursor: default !important;
-  padding: 0px 15px; }
-  li.optgroup-wrapper:first-child {
-    padding-top: 10px; }
-  li.optgroup-wrapper:hover {
-    background-color: #f2f2f2; }
-
-ul.optgroup {
-  font-family: "Omnes-ECOMP-W02", Arial;
-  cursor: pointer !important;
-  margin: 0 -15px; }
-  ul.optgroup li {
-    padding: 0 0 0 33px; }
-
-label + .selectWrap {
-  margin-top: 4px; }
-
-.selectorModule {
-  border-radius: 6px;
-  position: relative;
-  height: 36px;
-  line-height: 28px;
-  display: block;
-  margin: 0;
-  background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);
-  background: -webkit-linear-gradient(top, #fcfcfc 0%, #f2f2f2 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="@att-gray-highlight", endColorstr="@att-functional-bg-gray", GradientType=0); }
-
-.group .selectWrap {
-  margin: 0 0 10px 0; }
-
-select.awd-select {
-  position: relative;
-  top: 0;
-  left: 0;
-  font-size: 16px;
-  z-index: 1010;
-  height: 33px;
-  min-width: 100%;
-  opacity: 0.01; }
-  select.awd-select > optgroup {
-    padding-left: 8px;
-    font-style: normal;
-    margin-top: 10px; }
-    select.awd-select > optgroup:first-child {
-      margin-top: 0; }
-    select.awd-select > optgroup > option {
-      padding-left: 8px; }
-  select.awd-select > option {
-    padding-left: 8px; }
-  select.awd-select + span {
-    background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);
-    background: -webkit-linear-gradient(top, #fcfcfc 0%, #f2f2f2 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="@att-gray-highlight", endColorstr="@att-functional-bg-gray", GradientType=0);
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 0;
-    display: block;
-    border: 1px solid #d2d2d2;
-    border-radius: 6px;
-    height: 35px;
-    line-height: 0;
-    padding: 18px 45px 15px 15px;
-    width: 100%;
-    font-size: 1.6rem;
-    padding-right: 45px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis; }
-    select.awd-select + span > i {
-      font-size: 23px;
-      position: absolute;
-      right: 33px;
-      top: 5px;
-      z-index: 1000; }
-      select.awd-select + span > i:before {
-        left: 1px;
-        position: absolute;
-        top: -1px; }
-  select.awd-select:focus + span {
-    border-color: #0568ae; }
-
-.isIE select.awd-select + span {
-  line-height: 1; }
-
-[data-default-option="true"] {
-  color: #767676 !important;
-  font-family: "Omnes-ECOMP-W02-Italic", Arial; }
-
-.placeholdercolor {
-  color: #767676 !important;
-  font-family: "Omnes-ECOMP-W02-Italic", Arial; }
-
-.filterTank button.awd-select {
-  border-color: #d2d2d2;
-  background-color: #333333;
-  color: #FFFFFF;
-  color: #333333; }
-  .filterTank button.awd-select:after {
-    background-color: #FFFFFF !important;
-    border-color: #d2d2d2; }
-
-.utility-bg button.awd-select {
-  border-color: #d2d2d2;
-  background-color: #333333;
-  color: #FFFFFF;
-  color: #333333; }
-  .utility-bg button.awd-select:after {
-    background-color: #FFFFFF !important;
-    border-color: #d2d2d2; }
-
-.utility-bg select.awd-select + span {
-  border-color: #d2d2d2;
-  border-color: #d2d2d2;
-  background-color: #333333;
-  background-color: #333333;
-  color: #FFFFFF;
-  color: #FFFFFF; }
-  .utility-bg select.awd-select + span:after {
-    background-color: #FFFFFF !important;
-    background-color: #FFFFFF !important;
-    border-color: #d2d2d2;
-    border-color: #d2d2d2; }
-
-.utility-bg select.awd-select:focus + span {
-  border-color: #d2d2d2;
-  border-color: #d2d2d2;
-  background-color: #333333;
-  background-color: #333333;
-  color: #FFFFFF;
-  color: #FFFFFF; }
-  .utility-bg select.awd-select:focus + span:after {
-    background-color: #FFFFFF !important;
-    background-color: #FFFFFF !important;
-    border-color: #d2d2d2;
-    border-color: #d2d2d2; }
-
-.utility-bg select.awd-select:hover + span {
-  border-color: #d2d2d2;
-  border-color: #d2d2d2;
-  background-color: #333333;
-  background-color: #333333;
-  color: #FFFFFF;
-  color: #FFFFFF; }
-  .utility-bg select.awd-select:hover + span:after {
-    background-color: #FFFFFF !important;
-    background-color: #FFFFFF !important;
-    border-color: #d2d2d2;
-    border-color: #d2d2d2; }
-
-input.awd-select[disabled] {
-  cursor: not-allowed;
-  border-color: #d2d2d2;
-  background-color: #d2d2d2;
-  background-image: none;
-  color: #5A5A5A; }
-  input.awd-select[disabled] + span {
-    cursor: not-allowed;
-    border-color: #d2d2d2;
-    background-color: #d2d2d2;
-    background-image: none;
-    color: #5A5A5A; }
-
-button.awd-select[disabled] {
-  cursor: not-allowed;
-  border-color: #d2d2d2;
-  background-color: #d2d2d2;
-  background-image: none;
-  color: #5A5A5A; }
-  button.awd-select[disabled]:after {
-    background-color: #d2d2d2 !important;
-    border-color: #d2d2d2; }
-
-select.awd-select[disabled] + span {
-  cursor: not-allowed;
-  border-color: #d2d2d2;
-  background-color: #d2d2d2;
-  background-image: none;
-  color: #5A5A5A; }
-  select.awd-select[disabled] + span:after {
-    background-color: #d2d2d2 !important;
-    border-color: #d2d2d2; }
-
-select.awd-select[disabled]:focus + span {
-  cursor: not-allowed;
-  border-color: #d2d2d2;
-  background-color: #d2d2d2;
-  background-image: none;
-  color: #5A5A5A; }
-
-select.awd-select[disabled]:hover + span {
-  cursor: not-allowed;
-  border-color: #d2d2d2;
-  background-color: #d2d2d2;
-  background-image: none;
-  color: #5A5A5A; }
-
-input.awd-select[disabled="disabled"] {
-  cursor: not-allowed;
-  border-color: #d2d2d2;
-  background-color: #d2d2d2;
-  background-image: none;
-  color: #5A5A5A; }
-  input.awd-select[disabled="disabled"] + span {
-    cursor: not-allowed;
-    border-color: #d2d2d2;
-    background-color: #d2d2d2;
-    background-image: none;
-    color: #5A5A5A; }
-
-select.awd-select[disabled="disabled"] + span {
-  cursor: not-allowed;
-  border-color: #d2d2d2;
-  background-color: #d2d2d2;
-  background-image: none;
-  color: #5A5A5A; }
-  select.awd-select[disabled="disabled"] + span:after {
-    background-color: #d2d2d2 !important;
-    border-color: #d2d2d2; }
-
-select.awd-select[disabled="disabled"]:focus + span {
-  cursor: not-allowed;
-  border-color: #d2d2d2;
-  background-color: #d2d2d2;
-  background-image: none;
-  color: #5A5A5A; }
-  select.awd-select[disabled="disabled"]:focus + span:after {
-    background-color: #d2d2d2 !important;
-    border-color: #d2d2d2; }
-
-select.awd-select[disabled="disabled"]:hover + span {
-  cursor: not-allowed;
-  border-color: #d2d2d2;
-  background-color: #d2d2d2;
-  background-image: none;
-  color: #5A5A5A; }
-  select.awd-select[disabled="disabled"]:hover + span:after {
-    background-color: #d2d2d2 !important;
-    border-color: #d2d2d2; }
-
-.ddexpand-wrapper > h2 {
-  margin-bottom: 11px; }
-  .ddexpand-wrapper > h2 + p {
-    margin-bottom: 4px; }
-
-.ddexpand-wrapper .selectWrap + [aria-expanded="true"] .form-row {
-  margin-top: 11px; }
-
-.ddexpand-wrapper .selectWrap + [aria-expanded="true"] .row + .row .form-row {
-  margin-top: 14px; }
-
-.modal .awd-select-list {
-  z-index: 1060 !important; }
-
-.form-row.error button.awd-select.active:focus {
-  border-color: #cf2a2a !important; }
-
-.form-row.error input.awd-select.active:focus {
-  border-color: #cf2a2a !important; }
-
-.awd-module-list .module-list-item[aria-selected="true"] {
-  background-color: #f2f2f2; }
-
-li.module-list-item[aria-selected="true"]:before {
-  color: #0568ae;
-  display: inline-block;
-  font-family: "icoControls" !important;
-  font-style: normal;
-  font-size: 20px;
-  font-weight: normal;
-  font-variant: normal;
-  height: 1em;
-  margin-right: 7px;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  position: relative;
-  speak: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  width: 1em;
-  content: "\e907";
-  box-sizing: border-box;
-  display: inline-block;
-  font-size: 2em;
-  height: 1em;
-  position: absolute;
-  top: 20px;
-  right: 0px;
-  vertical-align: middle;
-  width: 1em;
-  color: #007a3e; }
-
-@media (min-width: 768px) {
-  span[class*="large"] {
-    max-width: 370px; }
-  .large {
-    max-width: 370px; } }
-
-@media (max-width: 767px) {
-  .selectWrap.large:after {
-    right: 5px; }
-  .selectWrap.large .awd-select-list-item {
-    padding-right: 41px; }
-  .selectWrap + div > h4 {
-    margin-bottom: 0;
-    font-size: 16px; } }
-
-/**********************Dropdown Chrome scrolling fix start ********************/
-input.awd-select {
-  -webkit-user-select: text;
-  -moz-user-select: text;
-  -ms-user-select: text;
-  user-select: text; }
-
-.checkbox .skin {
-  background-color: #fff;
-  border: 1px solid #d2d2d2;
-  border-radius: 3px;
-  display: inline-block;
-  height: 24px;
-  width: 24px;
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-
-i, em {
-  font-family: "Omnes-ECOMP-W02-Italic", Arial;
-  font-style: normal;
-}
-
-
-
-.card{
-  border-radius: 5px;
-}
-
-.card-header{
-  height: 50px;
-}
-
-.card-body{
-  height: 150px;
-}
-
-.card-footer{
-  height: 50px;
-}
-
-.dialog__close-btn {
-  border: 0;
-  background: #087ac2;
-  color: #ffffff;
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  font-size: 1.2em;
-  display: block;
-  border: #087ac2 2px solid;
-}
-
-.modalTitle{
-    font-size: 35px;
-}
-
-
-.full-width-table {
-  width: 100%;
-}
-
-
-.app-data-table {
-  margin-top: 35px;
-  /* margin-left: 250px;
-  margin-right: 250px; */
-
-}
-
-.app-data-table-fixed-height {
-  overflow: scroll;
-  width: 100%;
-  max-height: 60%;
-}
-
-th{
-  background-color: #2125299c;
-  color: rgb(255, 255, 255);
-  font-size: 15px;
-  border-radius: 2px;
-  height: 35px;
-}
-
-tr:nth-child(even) {
-  background-color: #dddddd;
-  font-size: 2px;
-  height: 35px;
-  border-radius: 4px;
-
-}
-
-tr:nth-child(odd) {
-  font-size: 2px;
-  height: 35px;
-  border-radius: 4px;
-}
-
-
-.card{
-  border-radius: 10px;
-
-}
-
-.card-header{
-  height: 80px;
-}
-
-.card-body{
-  height: 150px;
-}
-
-.card-footer{
-  height: 55px;
-  margin-right: 10px;
-}
-
-.dialog__close-btn {
-  border: 0;
-  background: #087ac2;
-  color: #ffffff;
-  position: absolute;
-  top: 12px;
-  right: 12px;
-  font-size: 1em;
-  display: block;
-  border: #087ac2 2px solid;
-}
-
-.modalTitle{
-    font-size: 35px;
-}
-
-::-webkit-scrollbar {
-  width: 5px;
-  background: transparent;
-}
-
-
-label {
-  float: left;
-  width: 24em;
-  margin-right: 2em;
-  text-align: right;
-}
-
-
-.btn-alt {
-  border-color: #087ac2 transparent #0568ae;
-  background-color: #0568ae;
-  background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%);
-  color: #ffffff; }
-  .btn-alt:hover {
-    color: #ffffff;
-    outline-color: #ffffff !important;
-    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
-  .btn-alt:focus {
-    color: #ffffff;
-    outline-color: #ffffff !important;
-    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
-  .btn-alt:active {
-    color: #ffffff;
-    outline-color: #ffffff !important;
-    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
-
-
-a.btn {
-  vertical-align: middle; }
-  a.btn:hover {
-    text-decoration: none; }
-
-.field-group + .btn {
-  margin-left: 20px; }
-
-.btn-primary {
-  border-color: #ea7400 transparent #d16500;
-  background-color: #ea7400 transparent #d16500;
-  background: linear-gradient(to bottom, #ea7400 0%, #d16500 100%);
-  color: #ffffff;
-  font-family: "Omnes-ECOMP-W02", Arial;
-  font-weight: bold; }
-  .btn-primary:hover {
-    text-decoration: none;
-    color: #ffffff;
-    outline-color: #ffffff !important;
-    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
-  .btn-primary:focus {
-    text-decoration: none;
-    color: #ffffff;
-    outline-color: #ffffff !important;
-    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
-  .btn-primary:active {
-    text-decoration: none;
-    color: #ffffff;
-    outline-color: #ffffff !important;
-    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
-
-.btn-arrow {
-  font-family: "Omnes-ECOMP-W02", Arial;
-  font-size: 1.6rem;
-  font-weight: normal;
-  background-color: transparent;
-  border: none;
-  padding: 5px 0 0;
-  top: -4px;
-  color: #333333;
-  position: relative; }
-  .btn-arrow:hover {
-    text-decoration: underline; }
-    .btn-arrow:hover .btn-primary {
-      text-decoration: none;
-      color: #ffffff;
-      outline-color: #ffffff !important;
-      background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
-    .btn-arrow:hover .btn-secondary {
-      color: #0568ae;
-      outline-color: #000000 !important;
-      background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
-    .btn-arrow:hover .btn-alt {
-      color: #ffffff;
-      outline-color: #ffffff !important;
-      background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%); }
-    .btn-arrow:hover .btn-specialty {
-      color: #ffffff;
-      outline-color: #ffffff !important;
-      background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
-  .btn-arrow:focus {
-    text-decoration: underline;
-    outline: 1px dotted #666; }
-    .btn-arrow:focus .btn-primary {
-      text-decoration: none;
-      color: #ffffff;
-      outline-color: #ffffff !important;
-      background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
-    .btn-arrow:focus .btn-secondary {
-      color: #0568ae;
-      outline-color: #000000 !important;
-      background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
-    .btn-arrow:focus .btn-alt {
-      color: #ffffff;
-      outline-color: #ffffff !important;
-      background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%); }
-    .btn-arrow:focus .btn-specialty {
-      color: #ffffff;
-      outline-color: #ffffff !important;
-      background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
-  .btn-arrow:active .btn-primary {
-    text-decoration: none;
-    color: #ffffff;
-    outline-color: #ffffff !important;
-    background: linear-gradient(to bottom, #d16500 0%, #ea7400 100%); }
-  .btn-arrow:active .btn-secondary {
-    color: #0568ae;
-    outline-color: #000000 !important;
-    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
-  .btn-arrow:active .btn-alt {
-    color: #ffffff;
-    outline-color: #ffffff !important;
-    background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%); }
-  .btn-arrow:active .btn-specialty {
-    color: #ffffff;
-    outline-color: #ffffff !important;
-    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
-  .btn-arrow .btn-alt {
-    border-color: #087ac2 transparent #0568ae;
-    background-color: #0568ae;
-    background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%);
-    color: #ffffff; }
-    .btn-arrow .btn-alt:hover {
-      color: #ffffff;
-      outline-color: #ffffff !important;
-      background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
-    .btn-arrow .btn-alt:focus {
-      color: #ffffff;
-      outline-color: #ffffff !important;
-      background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
-    .btn-arrow .btn-alt:active {
-      color: #ffffff;
-      outline-color: #ffffff !important;
-      background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
-  .btn-arrow::-moz-focus-inner {
-    padding: 0;
-    border: 0; }
-  .btn-arrow .btn {
-    border: 1px solid transparent;
-    border-radius: 100%;
-    height: 36px;
-    margin-bottom: 0;
-    margin-right: 7px;
-    max-width: 36px;
-    min-width: 20px;
-    padding: 0;
-    margin-top: -4px;
-    vertical-align: middle;
-    width: 36px; }
-    .btn-arrow .btn .icon-primary-left {
-      bottom: 0;
-      display: block;
-      height: 100%;
-      left: 0;
-      line-height: 0;
-      position: absolute;
-      right: 0;
-      text-indent: 0;
-      top: 0; }
-      .btn-arrow .btn .icon-primary-left:before {
-        position: absolute;
-        font-size: 1.6rem;
-        left: 1px;
-        top: 9px; }
-    .btn-arrow .btn .icon-primary-right {
-      bottom: 0;
-      display: block;
-      height: 100%;
-      left: 0;
-      line-height: 0;
-      position: absolute;
-      right: 0;
-      text-indent: 0;
-      top: 0;
-      color: #ffffff; }
-      .btn-arrow .btn .icon-primary-right:before {
-        position: absolute;
-        font-size: 1.6rem;
-        left: 17px;
-        top: 9px; }
-  .btn-arrow .btn.btn-primary .icon-primary-left {
-    color: #fff; }
-  .btn-arrow .btn.btn-primary .icon-primary-right {
-    color: #fff; }
-  .btn-arrow .btn.btn-alt .icon-primary-left {
-    color: #fff; }
-  .btn-arrow .btn.btn-alt .icon-primary-right {
-    color: #fff; }
-  .btn-arrow .btn.btn-secondary {
-    border: 1px solid #d2d2d2; }
-    .btn-arrow .btn.btn-secondary .icon-primary-left {
-      color: #0568ae; }
-    .btn-arrow .btn.btn-secondary .icon-primary-right {
-      color: #0568ae; }
-  .btn-arrow .btn.btn-small {
-    height: 20px;
-    max-width: 20px;
-    min-width: 20px;
-    width: 20px;
-    top: -1px; }
-    .btn-arrow .btn.btn-small .icon-primary-left:before {
-      font-size: 5px;
-      top: 4px;
-      left: 0; }
-    .btn-arrow .btn.btn-small .icon-primary-right:before {
-      font-size: 5px;
-      top: 4px;
-      left: 10px; }
-  .btn-arrow .btn.btn-large .icon-primary-left:before {
-    font-size: 112%;
-    top: 12px;
-    left: 23px; }
-  .btn-arrow .btn.btn-large .icon-primary-right:before {
-    font-size: 112%;
-    top: 12px;
-    left: 23px; }
-
-.btn-secondary {
-  border: 1px solid #d2d2d2;
-  background-color: #f2f2f2;
-  background: linear-gradient(to bottom, #fcfcfc 0%, #f2f2f2 100%);
-  color: #0568ae;
-  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.15);
-  padding: 14px 18px 11px 17px; }
-  .btn-secondary:hover {
-    color: #0568ae;
-    outline-color: #000000 !important;
-    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
-  .btn-secondary:focus {
-    color: #0568ae;
-    outline-color: #000000 !important;
-    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
-  .btn-secondary:active {
-    color: #0568ae;
-    outline-color: #000000 !important;
-    background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%); }
-
-.btn-alt {
-  border-color: #087ac2 transparent #0568ae;
-  background-color: #0568ae;
-  background: linear-gradient(to bottom, #087ac2 0%, #0568ae 100%);
-  color: #ffffff; }
-  .btn-alt:hover {
-    color: #ffffff;
-    outline-color: #ffffff !important;
-    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
-  .btn-alt:focus {
-    color: #ffffff;
-    outline-color: #ffffff !important;
-    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
-  .btn-alt:active {
-    color: #ffffff;
-    outline-color: #ffffff !important;
-    background: linear-gradient(to bottom, #0568ae 0%, #087ac2 100%); }
-
-.btn-specialty {
-  border-color: #008744 transparent #007a3e;
-  background-color: #007a3e;
-  background: linear-gradient(to bottom, #008744 0%, #007a3e 100%);
-  color: #ffffff; }
-  .btn-specialty:hover {
-    color: #ffffff;
-    outline-color: #ffffff !important;
-    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
-  .btn-specialty:focus {
-    color: #ffffff;
-    outline-color: #ffffff !important;
-    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
-  .btn-specialty:active {
-    color: #ffffff;
-    outline-color: #ffffff !important;
-    background: linear-gradient(to bottom, #007a3e 0%, #008744 100%); }
-
-.btn-clear {
-  background: transparent !important;
-  border-color: transparent !important;
-  font-weight: normal;
-  font-family: "Omnes-ECOMP-W02", Arial;
-  box-shadow: none;
-  text-decoration: none;
-  color: #0568ae; }
-  .btn-clear:focus {
-    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
deleted file mode 100644
index 42035f65..00000000
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.html
+++ /dev/null
@@ -1,142 +0,0 @@
-<span *ngIf="showSpinner" class="ecomp-spinner"></span>
-
-<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 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 [ngStyle]="setStyle(row[keys])">
-                            <div *ngIf="row[keys].split('|')[0] == 'linkToReport'">
-                                <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'"
-                                 >
-                                <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'"
-                                 >
-                                <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])">
-                                {{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>
-    </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>
-
-
-<style scoped>
-    :host ::ng-deep .mat-paginator-outer-container .mat-paginator-container{
-        min-height: 30px;
-        height: 30px;
-    }
-
-    :host ::ng-deep  .mat-form-field-appearance-legacy .mat-form-field-label {
-    font-size: 14px;
-  }
-
-  :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;
-}
-
-</style>
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
deleted file mode 100644
index e1476421..00000000
--- 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
+++ /dev/null
@@ -1,178 +0,0 @@
-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, MatTableDataSource } from '@angular/material/table';
-
-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';
-import { RunService } from '../run.service';
-import 'rxjs/add/observable/empty';
-import 'rxjs/add/observable/of';
-import { Observable } from 'rxjs';
-
-describe('RunReportComponent', () => {
-  let component: RunReportComponent;
-  let fixture: ComponentFixture<RunReportComponent>;
-  const displayedColumnsArr1 = [];
-  const DashboardReportObj1 = [];
-  const trigger = ["a","b"];
-  let change : SimpleChanges;
-  let runService : RunService;
-  let options1 = {};
-  let dashboard; 
-  let dashboard2; 
-  let responseformfield = 1;
-  let environment = [
-    {
-      baseUrl: 'just a link'
-    }
-  ]
-
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
-      declarations: [ RunReportComponent ],
-      imports: [
-        NoopAnimationsModule,
-        MatPaginatorModule,
-        MatSortModule,
-        MatTableModule,
-        MatMenuModule,
-        HttpClientTestingModule,
-        RouterTestingModule
-      ],
-      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;
-    component.DashboardReportObj = DashboardReportObj1;
-    component.displayedColumnsArr = displayedColumnsArr1;
-    component.TriggerFFArr = trigger;
-    component.options = options1;
-    component.dashboard = dashboard; 
-    component.responseFormFieldListLength = responseformfield;
-    //fixture.detectChanges();
-  });
-
-  it('should compile', () => {
-      expect(component).toBeTruthy(); 
-  });
- 
-  it('should test the ngOnChanges second If condition', () => {    
-    component.queryString = "test"
-    component.runButtonHitCnt = 1;
-    component.initialQueryString = "abc";
-    component.initCounter = 4;
-    component.hitCnt = 2;
-    component.ngOnChanges(change);
-
-    expect(component.runButtonHitCnt).toEqual(component.hitCnt);
-    expect(component.initialQueryString).toEqual("test");
-    spyOn(component, 'initialProcesses');
-    spyOn(component, 'afterViewInitialProcesses');
-    component.initialProcesses();
-    component.afterViewInitialProcesses();
-
-    expect(component.initialProcesses).toHaveBeenCalled();
-    expect(component.afterViewInitialProcesses).toHaveBeenCalled();
-});
-
-  it('should test afterViewInitialProcesses method', () => {
-      component.DashboardReportObj.length = 0;
-      component.reportMode = "Regular";
-      component.initCnt = 0;
-      component.afterViewInitialProcesses();
-
-      expect(component.showMoreVert).toEqual(false);
-      expect(component.displayedColumnsArr).toEqual(new Array());
-      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.isReady).toEqual(false);
-      expect(component.NEWdisplayedColumns).toEqual(new Array());
-  });
-
-  it('should test showError method', () => {
-       let errmsg = "errormessage";
-       let stcktrace = "stacktrace";
-      component.showError("test");
-       expect(component.errorMessage).toEqual("test"[errmsg]);
-       expect(component.stackTrace).toEqual("test"[stcktrace]);
-       expect(component.error).toEqual(true);
-       expect(component.showSpinner).toEqual(false);
-    });
-
-  it('should test linkToReport', () => {
-        component.linkToReport("test", "abc");
-  })
-
-  it('should test linkToMail', () => {
-   component.linkToMail("test");
-  })
-
-  it('should test openOptions method', () => {
-        component.openOptions();
-        expect(component.openOptionsFlag).toEqual(component.openOptionsFlag);
-  });
-
-
-  it('should test applyFilter method', () => {
-      let filterValue = "test"
-      component.applyFilter(filterValue);
-      expect(component.dataSource.filter).toEqual(filterValue.trim().toLowerCase());
-  });
-
-   it('should test the ngOnChanges first If condition', () => {   
-    change = {};
-        component.reportMode !== "Regular"
-        component.initCnt = 1;
-        component.TriggerFFArr.length = 0;
-        component.ngOnChanges(change);
-        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', () => {
-  //     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
deleted file mode 100644
index 1142c318..00000000
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.ts
+++ /dev/null
@@ -1,690 +0,0 @@
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    Input,
-    OnInit,
-    SimpleChanges,
-    ViewChild
-} from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
-import { 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 { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
-import { DisplayHtml } from '../../display-html';
-import { FormControl } from '@angular/forms';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component';
-
-export interface PeriodicElement {
-
-}
-
-const ELEMENT_DATA: PeriodicElement[] = [{}];
-
-@Component({
-    selector: 'app-run-report',
-    templateUrl: './run-report.component.html',
-    styleUrls: ['./run-report.component.css'],
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-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;
-    @Input('chartType') chartType: 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);
-                            this.changeDetectorRefs.detectChanges();
-                        } 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 {
-        }
-        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;
-
-        }
-        this.hitCnt = this.runButtonHitCnt;
-        this.initialQueryString = this.queryString;
-        this.initCounter++;
-    }
-
-    ngAfterViewInit() {
-        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);
-                            this.changeDetectorRefs.detectChanges();
-                        } 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);
-                                this.changeDetectorRefs.detectChanges();
-                            } 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;
-    }
-
-    showError(Errresponse: any) {
-        this.errorMessage = Errresponse['errormessage'];
-        this.stackTrace = Errresponse['stacktrace'];
-        this.error = true;
-        this.showSpinner = false;
-        this.isChartAvailable = false;
-    }
-
-    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.chartType !== 'none') {
-            this.isChartAvailable = true;
-            this.iframe.nativeElement.setAttribute('src', this.chartRunUrl);
-        }
-
-        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++;
-        }
-        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;
-
-    }
-
-    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);
-        }
-        this._router.navigate(['v2/app/run', reportID, queryParameters]);
-    }
-
-
-
-    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;
-                });
-        }
-    }
-
-    downloadSinglePage(contentType: string, extension: string) {
-        this.download_in_progress = true;
-        this._runService.downloadSinglePageReport(this.inputReportId, extension)
-            .subscribe((responseExcel) => {
-
-                this.downLoadFile(responseExcel, contentType, extension, '');
-                this.download_in_progress = false;
-            });
-    }
-
-    downLoadFile(data: any, type: string, extension: string, reportType: string) {
-        const blob = new Blob([data], { type: type });
-        const date = new Date();
-        const dateStr =
-            ('00' + (date.getMonth() + 1)).slice(-2) +
-            ('00' + date.getDate()).slice(-2) +
-            date.getFullYear() +
-            ('00' + date.getHours()).slice(-2) +
-            ('00' + date.getMinutes()).slice(-2) +
-            ('00' + date.getMilliseconds());
-        let fileName = this.reportName + dateStr + '.' + extension;
-        if (reportType === 'Dashboard') {
-            fileName = '';
-            fileName = reportType + '_' + this.inputReportId + '_' + dateStr + '.' + 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);
-        }
-    }
-
-    applyFilter(filterValue: string) {
-        this.dataSource.data = this.displayedRowObj;
-        this.dataSource.sort = this.sort;
-        if (filterValue === '' || filterValue === null) {
-        } else {
-            this.dataSource.filter = filterValue.trim().toLowerCase();
-        }
-    }
-
-    setStyle(rowData: string) {
-        let styles = '';
-        if (rowData.split('|')[0] === 'linkToReport') {
-            styles = rowData.split('|')[4];
-        } else if (rowData.split('|')[0] === 'linkToMail') {
-            styles = rowData.split('|')[3];
-        } else {
-            styles = rowData.split('|')[1];
-        }
-        if (styles.includes('{')) {
-            return JSON.parse(styles);
-        } else {
-            return {};
-        }
-    }
-
-    
-
-    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);
-                            this.changeDetectorRefs.detectChanges();
-                        } 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);
-                            this.changeDetectorRefs.detectChanges();
-                        } 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('&');
-        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/app/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/app/run', repId, queryString]);
-    }
-
-}