Raptor user interface code in Angular

Issue-ID: PORTAL-725

Signed-off-by: mravula <mr257h@att.com>
Change-Id: I0ceaf52026ba43b8f16e1e904643dccec74df09c

1 files changed, 148 insertions, 0 deletions

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
new file mode 100644
index 00000000..a8ac3642
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.ts
@@ -0,0 +1,148 @@
+import { AfterViewInit, Component, OnInit, ViewChild, Input, SimpleChange } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTable } from '@angular/material/table';
+import { RunReportDataSource, RunReportFinalTableItem } from './run-report-datasource';
+import { ActivatedRoute } from '@angular/router';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../../../../../../../environments/environment';
+import { RunService } from '../run.service';
+
+@Component({
+  selector: 'app-run-report',
+  templateUrl: './run-report.component.html',
+  styleUrls: ['./run-report.component.css']
+})
+export class RunReportComponent implements AfterViewInit, OnInit {
+  @Input("reportId") reportId1 : string;
+
+  
+  @ViewChild(MatPaginator, {static: false} as any) paginator: MatPaginator;
+  @ViewChild(MatSort, {static: false} as any) sort: MatSort;
+  @ViewChild(MatTable, {static: false} as any) table: MatTable<RunReportFinalTableItem>;
+  dataSource: RunReportDataSource;
+
+  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
+  displayedColumns : string[];
+  IncomingReportId : string;
+  displayedColumnsArr : string[];
+  displayedRowObj : RunReportFinalTableItem[];
+
+  constructor(private _http : HttpClient, private _route : ActivatedRoute, private _runService : RunService){
+      this.displayedColumnsArr = new Array();
+      this.displayedRowObj = new Array();
+      this.displayedColumns = new Array();
+  }
+
+  ngOnInit() {
+    this.dataSource = new RunReportDataSource();
+
+    this._route.params.subscribe(params => {
+      
+      this.IncomingReportId = params["reportId"];
+      this.reportId1 = params["reportId"];
+    });
+
+    
+
+    // console.log(this.IncomingReportId);
+
+    this._runService.getReportData(this.reportId1)
+    .subscribe((response) => {
+      console.log(response);
+
+      let i=0;
+      while(response["reportDataColumns"][i])
+      {
+        this.displayedColumnsArr.push(response["reportDataColumns"][i]["columnTitle"] +","+ response["reportDataColumns"][i]["colId"]);
+        i++;
+      }
+
+      let j=0;
+      while(response["reportDataRows"][j])
+      {
+        let k=0;
+        let obj = new Object();
+        while(this.displayedColumnsArr[k])
+        {
+          if(response["reportDataRows"][j][this.displayedColumnsArr[k].split(",")[1]])
+          {
+            //console.log(response["reportDataRows"][j][this.displayedColumnsArr[k].split(",")[1]]);
+            obj[response["reportDataRows"][j][this.displayedColumnsArr[k].split(",")[1]]["colId"]] = response["reportDataRows"][j][this.displayedColumnsArr[k].split(",")[1]]["displayValue"];
+            //this.displayedRowObj.push(response["reportDataRows"][j][this.displayedColumnsArr[k].split(",")[1]]);
+          }
+          k++;
+        }
+        this.displayedRowObj.push(obj);
+        //console.log(response["reportDataRows"][j]);
+        j++;
+      }
+
+      console.log(this.displayedColumnsArr);
+      console.log(this.displayedRowObj);
+
+      for(let l=0; l<this.displayedColumnsArr.length; l++)
+      {
+        this.displayedColumns.push(this.displayedColumnsArr[l].split(",")[1]);
+      }
+      
+      this.dataSource.data = this.displayedRowObj;
+      this.dataSource.sort = this.sort;
+      this.dataSource.paginator = this.paginator;
+      this.table.dataSource = this.dataSource;
+  
+    });
+
+    // this.dataSource.data = [{id: 1, name: 'Hydrogen'}];
+  }
+
+  ngAfterViewInit() {
+    this._runService.getReportData(this.reportId1)
+    .subscribe((response) => {
+      console.log(response);
+
+      let i=0;
+      while(response["reportDataColumns"][i])
+      {
+        this.displayedColumnsArr.push(response["reportDataColumns"][i]["columnTitle"] +","+ response["reportDataColumns"][i]["colId"]);
+        i++;
+      }
+
+      let j=0;
+      while(response["reportDataRows"][j])
+      {
+        let k=0;
+        let obj = new Object();
+        while(this.displayedColumnsArr[k])
+        {
+          if(response["reportDataRows"][j][this.displayedColumnsArr[k].split(",")[1]])
+          {
+            //console.log(response["reportDataRows"][j][this.displayedColumnsArr[k].split(",")[1]]);
+            obj[response["reportDataRows"][j][this.displayedColumnsArr[k].split(",")[1]]["colId"]] = response["reportDataRows"][j][this.displayedColumnsArr[k].split(",")[1]]["displayValue"];
+            //this.displayedRowObj.push(response["reportDataRows"][j][this.displayedColumnsArr[k].split(",")[1]]);
+          }
+          k++;
+        }
+        this.displayedRowObj.push(obj);
+        //console.log(response["reportDataRows"][j]);
+        j++;
+      }
+
+      console.log(this.displayedColumnsArr);
+      console.log(this.displayedRowObj);
+
+      for(let l=0; l<this.displayedColumnsArr.length; l++)
+      {
+        this.displayedColumns.push(this.displayedColumnsArr[l].split(",")[1]);
+      }
+      
+      this.dataSource.data = this.displayedRowObj;
+      this.dataSource.sort = this.sort;
+      this.dataSource.paginator = this.paginator;
+      this.table.dataSource = this.dataSource;
+  
+    });
+
+  }
+
+}