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

component in os project

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

1 files changed, 130 insertions, 70 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.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.html
index 682899fd..4b647528 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/run/run-report/run-report.component.html
@@ -1,84 +1,144 @@
+<span *ngIf="showSpinner" class="ecomp-spinner"></span>
 
-<div *ngIf="showSpinner">
-  <div class="lds-ring">
-    <div></div>
-    <div></div>
-    <div></div>
-    <div></div>
-  </div>
+<div *ngIf="showDashboardReport">
+    <span *ngIf="download_in_progress" class="ecomp-small-spinner"></span>
+    Download:
+    <a [routerLink]=""><img class="downloadImg"  (click)="downloadReport('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'xlsx')" 
+                            placement="top" ngbTooltip="Download Dashboard Report"
+                            src="assets/images/xlsx.png"></a>&nbsp;
+
+    <gridster class="gridster-color"[options]="options">
+        <gridster-item *ngFor="let item of dashboard" [item]="item">
+            <div *ngIf="item.hasContent" class="gridster-item-content">
+                <div>
+                    <a (click)="takeToReport(queryString, item.hasContent.id.split('#')[1])"
+                       [routerLink]="">{{item.hasContent.name}}</a>
+                       <div style="height: 6px;"></div>
+                    <app-run-dashboard-report [hitCnt]="hitCnt" [queryString]="queryString"
+                                              [reportId]="item.hasContent.id.split('#')[1]"
+                                              [reportType]="item.hasContent.id.split('#')[0]"
+                                              [parentId]="inputReportId">
+                    </app-run-dashboard-report>
+                </div>
+            </div>
+        </gridster-item>
+    </gridster>
+    <div *ngIf="error == true">
+        <h1>Error Message:</h1>
+        <p>{{errorMessage}}</p>
+        <br/>
+        <h1>Stack Trace:</h1>
+        <p>{{stackTrace}}</p>
+    </div>
 </div>
+<span *ngIf="download_in_progress" class="ecomp-small-spinner"></span>
+<div *ngIf="!showDashboardReport">
+    <div *ngIf="error == false" [hidden]="isChartAvailable == false" align="center">
+        <iframe #iframe height="500" style="border: none" width="70%"></iframe>
+    </div>
+   
+    <div>
+        <div class="field-group">
 
-<div *ngIf="showDashboardReport">
- <gridster [options]="options">
-    <gridster-item [item]="item" *ngFor="let item of dashboard">
-        <div class="gridster-item-content" *ngIf="item.hasContent">
-            <div>
-              <h3>{{item.hasContent.name}}</h3>
-              <app-run-dashboard-report [reportId]="item.hasContent.id.split('#')[1]" [queryString]="queryString" [hitCnt]="hitCnt"></app-run-dashboard-report>
+            <div class="filter-div" >
+            <mat-form-field><input (keyup)="applyFilter($event.target.value)" matInput placeholder="Filter Report Data">
+            </mat-form-field>
+           </div>
+            <div class="download-div" >
+                <span class="download-title"> Download:</span>
+            <a [routerLink]=""><img class="downloadImg" (click)="downloadSinglePage('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'xlsx')" placement="top" ngbTooltip="Download Current Page"
+                                    src="assets/images/xlsx.png"></a>&nbsp;
+            <a [routerLink]=""><img class="downloadImg" (click)="downloadReport('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'xlsx')"  placement="top" ngbTooltip="Download All"
+                                    src="assets/images/xlsx.png"></a>&nbsp;
+            <a [routerLink]=""><img class="downloadImg" (click)="downloadReport('application/pdf', 'pdf')"  placement="top" ngbTooltip="Download PDF"
+                                    src="assets/images/pdf.png" ></a>&nbsp;
+                <button *ngIf="showBackButton"  (click)="goBack()" class="btn btn-alt btn-back" >Back</button>
             </div>
+            <div class="pagination-div">
+            <mat-paginator (page)="pageEvent = $event; onPaginationChange($event)" [length]="totalRecords"
+                           [pageSize]="pageSize" showFirstLastButtons></mat-paginator>
+             </div>
+        </div>
+        <div class="app-data-table-fixed-height" id="reportTableSize">
+            <table [dataSource]="dataSource" mat-table matSort>
+                <ng-container *ngFor="let keys of displayedColumns; let i = index">
+                    <ng-container matColumnDef="{{keys}}">
+                        <th *matHeaderCellDef align="center" mat-header-cell mat-sort-header>
+                            {{displayedColumnsArr[i].split(",")[0]}}</th>
+                        <td *matCellDef="let row" mat-cell>
+                            <div *ngIf="row[keys].split('|')[0] == 'linkToReport'"
+                                 [ngStyle]="setStyle(row[keys].split('|')[4])">
+                                <a (click)="linkToReport(row[keys].split('|')[1], row[keys].split('|')[2])"
+                                   [routerLink]="">{{row[keys].split('|')[3]}}</a>
+                            </div>
+                            <div *ngIf="row[keys].split('|')[0] == 'linkToFeedback'"
+                                 [ngStyle]="setStyle(row[keys].split('|')[4])">
+                                <a (click)="linkToFeedback(row[keys].split('|')[1], row[keys].split('|')[2])"
+                                   [routerLink]="">{{row[keys].split('|')[3]}}</a>
+                            </div>
+                            <div *ngIf="row[keys].split('|')[0] == 'linkToMail'"
+                                 [ngStyle]="setStyle(row[keys].split('|')[3])">
+                                <a (click)="linkToMail(row[keys].split('|')[1])"
+                                   [routerLink]="">{{row[keys].split('|')[2]}}</a>
+                            </div>
+                            <div *ngIf="row[keys].split('|')[0] == 'clickToDownload' ">
+                                <mat-icon (click)="onClickToDowload(row)" aria-hidden="false" aria-label="play-for-work"
+                                          class="mat-icon-delete">play-for-work
+                                </mat-icon>
+                            </div>
+                            <div *ngIf="row[keys].split('|')[0] !== 'linkToReport' && row[keys].split('|')[0] !== 'linkToFeedback' && row[keys].split('|')[0] !== 'linkToMail'
+                                && row[keys].split('|')[0] !== 'clickToDownload' " 
+                                 [ngStyle]="setStyle(row[keys].split('|')[1])">
+                                {{row[keys].split('|')[0]}}&nbsp;</div>
+                        </td>
+                        <td *matFooterCellDef align="center" mat-footer-cell>{{getDisplayTotal(keys)}}</td>
+                    </ng-container>
+                </ng-container>
 
+                <tr *matHeaderRowDef="displayedColumns; sticky: true;" mat-header-row></tr>
+                <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
+                <tr *matFooterRowDef="displayedColumns; sticky: true;" mat-footer-row></tr>
+            </table>
         </div>
-        
-      
-    </gridster-item>
-  </gridster> 
+    </div>
+    <div *ngIf="error == true">
+        <h3>Error Message:</h3>
+        <p>{{errorMessage}}</p>
+        <br/>
+        <h3>Stack Trace:</h3>
+        <p>{{stackTrace}}</p>
+    </div>
 </div>
+<h6>Execution Time: {{timeTaken}} Seconds</h6>
 
 
-<div *ngIf="!showDashboardReport">
-    <mat-form-field>
-        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter Report Data">
-      </mat-form-field>
-  <button *ngIf="showMoreVert" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="Download Options">
-      <mat-icon>more_vert</mat-icon>
-    </button>
-    
-    <mat-menu #menu="matMenu" >
-        <a [routerLink]="" (click)="downloadReportExcel()">  Download Excel  </a>
-    </mat-menu>
+<style scoped>
+    :host ::ng-deep .mat-paginator-outer-container .mat-paginator-container{
+        min-height: 30px;
+        height: 30px;
+    }
 
-      <div class="app-data-table">
-        <div class="app-data-table-fixed-height">
-    <div>
-        <table mat-table [dataSource]="dataSource" matSort>
-            <div *ngFor="let keys of displayedColumns; let i = index">
-                <ng-container matColumnDef="{{keys}}">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{displayedColumnsArr[i].split(",")[0]}}</th>
-                    <td mat-cell *matCellDef="let row">
-                      <div *ngIf="row[keys].split(',')[0] == 'linkToReport'">
-                        <a [routerLink]="" (click)="linkToReport(row[keys].split(',')[1], row[keys].split(',')[2])">{{row[keys].split(',')[3]}}</a>
-                      </div>
-                      <div *ngIf="row[keys].split(',')[0] == 'linkToFeedback'">
-                        <a [routerLink]="" (click)="linkToFeedback(row[keys].split(',')[1], row[keys].split(',')[2])">{{row[keys].split(',')[3]}}</a>
-                      </div>
-                      <div *ngIf="row[keys].split(',')[0] == 'linkToMail'">
-                        <a [routerLink]="" (click)="linkToMail(row[keys].split(',')[1])">{{row[keys].split(',')[2]}}</a>
-                      </div>
-                        <div *ngIf="row[keys].split(',')[0] !== 'linkToReport' && row[keys].split(',')[0] !== 'linkToFeedback' && row[keys].split(',')[0] !== 'linkToMail'">
-                            {{row[keys]}}
-                        </div>
-                        
-                    </td>
-                  </ng-container>
-                </div>
-      
-          <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true;"></tr>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-        </table>
-      
-        <mat-paginator [pageSizeOptions]="[50]" showFirstLastButtons></mat-paginator>
-      </div>
-      </div>
-    </div>
+    :host ::ng-deep  .mat-form-field-appearance-legacy .mat-form-field-label {
+    font-size: 14px;
+  }
 
-</div>
+  :host ::ng-deep  .mat-paginator, .mat-paginator-page-size .mat-select-trigger {
+        font-size: 14px;
+  }
+
+  :host ::ng-deep .mat-sort-header-arrow.ng-trigger.ng-trigger-arrowPosition {
+    color: black;
+    opacity: 0;
+}
 
+:host ::ng-deep .mat-sort-header-pointer-left.ng-trigger.ng-trigger-leftPointer {
+   transform: rotate(-45deg);
+   color: black;
+}
+:host ::ng-deep .mat-sort-header-pointer-right.ng-trigger.ng-trigger-rightPointer {
+   transform: rotate(45deg);
+   color: black;
+}
 
-<div *ngIf="error == true">
-  <h1>Error Message:</h1>
-  <p>{{errorMessage}}</p>
-  <br/>
-  <h1>Stack Trace:</h1>
-  <p>{{stackTrace}}</p>
+</style>
 
-</div>
\ No newline at end of file