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

   1 <span *ngIf="showSpinner" class="ecomp-spinner"></span>
   2
   3 <span *ngIf="showUploadSpinner" class="ecomp-spinner"></span>
   4
   5 <div *ngIf="showDashboardReport">
   6     <span *ngIf="download_in_progress" class="ecomp-small-spinner"></span>
   7     Download:
   8     <a *ngIf = "isDashboardExcelReadyToDownload" [routerLink]=""><img class="downloadImg"  (click)="downloadReport('application/vnd.ms-excel', 'xls')"
   9                             placement="top" ngbTooltip="Download Dashboard Report"
  10                             src="assets/images/xlsx.png"></a>&nbsp;
  11
  12     <gridster class="gridster-color"[options]="options">
  13         <gridster-item *ngFor="let item of dashboard" [item]="item">
  14             <div *ngIf="item.hasContent" class="gridster-item-content">
  15                 <div>
  16                     <a (click)="takeToReport(queryString, item.hasContent.id.split('#')[1])"
  17                        [routerLink]="">{{item.hasContent.name}}</a>
  18                        <div style="height: 6px;"></div>
  19                     <app-run-dashboard-report [hitCnt]="hitCnt" [queryString]="queryString"
  20                                               [reportId]="item.hasContent.id.split('#')[1]"
  21                                               [reportType]="item.hasContent.id.split('#')[0]"
  22                                               [parentId]="inputReportId">
  23                     </app-run-dashboard-report>
  24                 </div>
  25             </div>
  26         </gridster-item>
  27     </gridster>
  28     <div *ngIf="error == true">
  29         <h1>Error Message:</h1>
  30         <p>{{errorMessage}}</p>
  31         <br/>
  32         <h1>Stack Trace:</h1>
  33         <p>{{stackTrace}}</p>
  34     </div>
  35 </div>
  36 <span *ngIf="download_in_progress" class="ecomp-small-spinner"></span>
  37 <div *ngIf="!showDashboardReport">
  38     <div *ngIf="error == false" [hidden]="isChartAvailable == false" align="center">
  39         <iframe #iframe height="500" style="border: none" width="70%"></iframe>
  40     </div>
  41
  42     <div>
  43         <div class="field-group">
  44
  45             <div class="filter-div" >
  46             <mat-form-field><input (keyup)="applyFilter($event.target.value)" matInput placeholder="Filter Report Data">
  47             </mat-form-field>
  48            </div>
  49             <div class="download-div" >
  50                 <span class="download-title"> Download:</span>
  51             <a [routerLink]=""><img class="downloadImg" (click)="downloadSinglePage('application/vnd.ms-excel', 'xls')" placement="top" ngbTooltip="Download Current Page"
  52                                     src="assets/images/xlsx.png"></a>&nbsp;
  53             <a [routerLink]=""><img class="downloadImg" (click)="downloadReport('application/vnd.ms-excel', 'xls')"  placement="top" ngbTooltip="Download Upto 65,000"
  54                                     src="assets/images/xlsx.png"></a>&nbsp;
  55                 <a [routerLink]=""><img class="downloadImg" (click)="downloadReport('application/octet-stream', 'zip')"  placement="top" ngbTooltip="Download CSV Upto 750,000"
  56                                         src="assets/images/csv.png" ></a>&nbsp;
  57             <a [routerLink]=""><img class="downloadImg" (click)="downloadReport('application/pdf', 'pdf')"  placement="top" ngbTooltip="Download PDF"
  58                                     src="assets/images/pdf.png" ></a>&nbsp;
  59                 <button *ngIf="showBackButton"  (click)="goBack()" class="btn btn-alt btn-back" >Back</button>
  60             </div>
  61             <div class="pagination-div">
  62             <mat-paginator (page)="pageEvent = $event; onPaginationChange($event)" [length]="totalRecords"
  63                            [pageSize]="pageSize" showFirstLastButtons></mat-paginator>
  64              </div>
  65         </div>
  66         <div class="app-data-table-fixed-height" id="reportTableSize">
  67             <table [dataSource]="dataSource" mat-table matSort>
  68                 <ng-container *ngFor="let keys of displayedColumns; let i = index">
  69                     <ng-container matColumnDef="{{keys}}">
  70                         <th *matHeaderCellDef align="center" mat-header-cell mat-sort-header>
  71                             {{displayedColumnsArr[i].split(",")[0]}}</th>
  72                         <td *matCellDef="let row" mat-cell [ngStyle]="setStyle(row[keys])">
  73                             <div *ngIf="row[keys].split('|')[0] == 'linkToReport'">
  74                                 <a (click)="linkToReport(row[keys].split('|')[1], row[keys].split('|')[2])"
  75                                    [routerLink]="">{{row[keys].split('|')[3]}}</a>
  76                             </div>
  77                             <div *ngIf="row[keys].split('|')[0] == 'linkToMail'"
  78                                  >
  79                                 <a (click)="linkToMail(row[keys].split('|')[1])"
  80                                    [routerLink]="">{{row[keys].split('|')[2]}}</a>
  81                             </div>
  82                             <div *ngIf="row[keys].split('|')[0] !== 'linkToReport' && row[keys].split('|')[0] !== 'linkToMail'">
  83                                 {{row[keys].split('|')[0]}}&nbsp;</div>
  84                         </td>
  85                         <td *matFooterCellDef align="center" mat-footer-cell>{{getDisplayTotal(keys)}}</td>
  86                     </ng-container>
  87                 </ng-container>
  88
  89                 <tr *matHeaderRowDef="displayedColumns; sticky: true;" mat-header-row></tr>
  90                 <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
  91                 <tr *matFooterRowDef="displayedColumns; sticky: true;" mat-footer-row></tr>
  92             </table>
  93         </div>
  94     </div>
  95 </div>
  96 <h6>Execution Time: {{timeTaken}} Seconds</h6>
  97
  98
  99 <style scoped>
 100     :host ::ng-deep .mat-paginator-outer-container .mat-paginator-container{
 101         min-height: 30px;
 102         height: 30px;
 103     }
 104
 105     :host ::ng-deep  .mat-form-field-appearance-legacy .mat-form-field-label {
 106     font-size: 14px;
 107   }
 108
 109   :host ::ng-deep  .mat-paginator, .mat-paginator-page-size .mat-select-trigger {
 110         font-size: 14px;
 111   }
 112
 113   :host ::ng-deep .mat-sort-header-arrow.ng-trigger.ng-trigger-arrowPosition {
 114     color: black;
 115     opacity: 0;
 116 }
 117
 118 :host ::ng-deep .mat-sort-header-pointer-left.ng-trigger.ng-trigger-leftPointer {
 119    transform: rotate(-45deg);
 120    color: black;
 121 }
 122 :host ::ng-deep .mat-sort-header-pointer-right.ng-trigger.ng-trigger-rightPointer {
 123    transform: rotate(45deg);
 124    color: black;
 125 }
 126
 127 </style>