creating tables for counter R5 repots

src/app/pages/repository/metrics/metrics-usagestats-report-results.component.html

@@ -14,6 +14,138 @@
     </aside-help-content>
 
     <!-- MIDDLE -->
+    <div *ngIf="release === '5'; else elseBlock" class="uk-width-expand@m">
+      <div *ngIf="errorMessage" class="uk-alert uk-alert-warning">{{errorMessage}}</div>
+      <div *ngIf="loadingMessage" class="loading-big">
+        <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">
+          {{ loadingMessage }}
+        </div>
+        <div class="transparentFilm"></div>
+      </div>
+      <div *ngIf="compressed; else notCompressed" class="uk-margin-top">
+        <a [href]=r5report?.Data target="_blank">Download report here</a>
+      </div>
+      <ng-template #notCompressed>
+        <div *ngIf="r5report?.[reportItems]?.length === 0" class="uk-alert uk-alert-warning">
+          Service did not find any data
+        </div>
+        <div *ngIf="r5report?.[reportItems]?.length > 0" class="md-card">
+          <div class="md-card-content large-padding">
+
+            <div class="uk-margin-bottom" data-uk-margin="">
+
+              <div class="uk-grid">
+                <div class="uk-width-4-5@m">
+                  <h3>{{ r5report?.Report_Header?.Report_Name }} Report Results</h3>
+                </div>
+<!--                <div class="uk-width-1-5@m">-->
+<!--                  <div [formGroup]="pageSizeSelect" class="md-input-wrapper md-input-filled">-->
+<!--                    <label class="">Results per page</label>-->
+<!--                    <select class="md-input" formControlName="selectPageSize" (change)="getPageSize()">-->
+<!--                      <option value="10" selected>10</option>-->
+<!--                      <option value="25">25</option>-->
+<!--                      <option value="50">50</option>-->
+<!--                      <option value="100">100</option>-->
+<!--                    </select>-->
+<!--                    <span class="md-input-bar"></span>-->
+<!--                  </div>-->
+<!--                </div>-->
+              </div>
+
+            </div>
+
+            <hr>
+
+            <div class="uk-grid uk-grid-divider" data-uk-grid-margin="">
+
+              <div class="uk-width-1-1@m uk-row-first">
+
+                <!-- RESULTS TABLE -->
+                {{chosenReport}}
+                <div class="uk-overflow-container">
+                  <table class="uk-table table_check" style="overflow-wrap: anywhere;">
+                    <thead>
+                    <tr>
+                      <ng-container *ngIf="chosenReport === 'DSR'; else notDSR">
+                        <th>Dataset Title</th>
+                        <th>Publisher</th>
+                        <th>YOP</th>
+                        <th>Access Method</th>
+                      </ng-container>
+
+                      <ng-template #notDSR>
+                        <th>Platform</th>
+                        <th *ngIf="chosenReport === 'PR'">Data type</th>
+                        <th>Access method</th>
+                      </ng-template>
+
+                      <th *ngIf="granularity === 'Monthly'">Count</th>
+                      <ng-container *ngIf="granularity === 'Totals'">
+                        <th *ngFor="let Instance of r5report[reportItems][0].Performance[0].Instance">
+                          {{Instance.MetricType}}
+                        </th>
+                      </ng-container>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <ng-container *ngFor="let item of r5report[reportItems]; let i=index">
+                      <tr *ngIf="chosenReport === 'DSR'; else notDsrRow">
+                        <td>{{item.Dataset_Title}}</td>
+                        <td>{{item.YOP}}</td>
+                        <td>{{item.Publisher}}</td>
+                        <td>{{item.Access_Method}}</td>
+                      </tr>
+                      <ng-template #notDsrRow>
+                        <tr>
+                          <td>{{item.Platform}}</td>
+                          <td *ngIf="chosenReport === 'PR'">{{item.Data_Type}}</td>
+                          <td>{{item.Access_Method}}</td>
+                          <ng-container *ngIf="granularity === 'Totals'">
+                            <td *ngFor="let instance of item.Performance[0].Instance">
+                              {{instance.Count}}
+                            </td>
+                          </ng-container>
+                          <td class="uk-text-center" *ngIf="granularity === 'Monthly'">
+                            <a *ngIf="item?.Performance?.length > 0" (click)="displayItemPerformance(i)">
+                              {{ (selectedItemIndex === i) ? 'Hide' : 'See' }} results
+                            </a>
+                          </td>
+                        </tr>
+                      </ng-template>
+                      <tr *ngIf="(selectedItemIndex === i)">
+                        <td colspan="6">
+                          <div class="uk-animation-slide-top-medium uk-margin-small-top">
+                            <table class="uk-table uk-table-middle uk-table-striped innerTable uk-margin-small-top uk-margin-small-bottom">
+                              <tr>
+                                <th>Month</th>
+                                <th *ngFor="let instance of item.Performance[0].Instance">{{instance.MetricType}}</th>
+                              </tr>
+                              <tr *ngFor="let month of item.Performance">
+                                <td>{{ month.Period.Begin_Date | date: "MMM yyyy" }}</td>
+                                <td *ngFor="let instance of month.Instance">{{ instance.Count }}</td>
+                              </tr>
+                            </table>
+                          </div>
+                        </td>
+                      </tr>
+                    </ng-container>
+                    </tbody>
+
+                  </table>
+                </div>
+
+              </div>
+
+            </div>
+
+          </div>
+        </div>
+
+      </ng-template>
+
+      <pre>{{r5report | json}}</pre>
+    </div>
+    <ng-template #elseBlock>
       <div class="uk-width-expand@m">
 
       <div *ngIf="errorMessage" class="uk-alert uk-alert-warning">{{errorMessage}}</div>
@@ -364,6 +496,7 @@
       <!--</div>-->
 
     </div>
+    </ng-template>
 
     <!-- RIGHT HELP CONTENT -->
     <aside-help-content #rightHelperContent [position]="'right'"

src/app/pages/repository/metrics/metrics-usagestats-report-results.component.ts

@@ -4,6 +4,7 @@ import { AuthenticationService } from '../../../services/authentication.service'
 import { UsagestatsService } from '../../../services/usagestats.service';
 import { ReportResponse } from '../../../domain/usageStatsClasses';
 import { FormBuilder, FormGroup } from '@angular/forms';
+import {COUNTER_Dataset_Report, COUNTER_Item_Report, SUSHI_Error_Model} from '../../../domain/sushilite';
 
 @Component({
   selector: 'metrics-usagestats-report-results',
@@ -15,6 +16,11 @@ export class MetricsUsagestatsReportResultsComponent implements OnInit {
   loadingMessage: string;
   errorMessage: string;
   infoMessage: string;
+  release: string;
+  granularity: string;
+  r5report: COUNTER_Dataset_Report | COUNTER_Item_Report | SUSHI_Error_Model = null;
+  reportItems: string;
+  compressed: boolean = null;
 
   repoResponse: ReportResponse;
   coveredPeriod: string;
@@ -50,19 +56,32 @@ export class MetricsUsagestatsReportResultsComponent implements OnInit {
     this.route.queryParams.subscribe( qparams => {
       this.params.append('Report', qparams['report']);
       this.params.append('Release', qparams['release']);
+      this.release = qparams['release'];
       this.params.append('RequestorID', this.authService.getUserEmail());
+      if (qparams['beginDate'])
         this.params.append('BeginDate', qparams['beginDate']);
+      if (qparams['endDate'])
         this.params.append('EndDate', qparams['endDate']);
       this.params.append('RepositoryIdentifier', qparams['repoId']);
+      if (qparams['itemIdentifier'])
         this.params.append('ItemIdentifier', qparams['itemIdentifier']);
+      if (qparams['datasetIdentifier'])
         this.params.append('DatasetIdentifier', qparams['datasetIdentifier']);
-      this.params.append('ItemDataType', qparams['itemIdentifier']);
+      if (qparams['dataType'])
+        this.params.append('DataType', qparams['dataType']);
       this.params.append('Granularity', qparams['granularity']);
+      this.granularity = qparams['granularity'];
       // this.params.append('MetricType', qparams['metricTypes']);
+      if (qparams['report'] !== 'PR_1') {
+        if (qparams['totalItemRequests'])
           this.params.append('MetricType', qparams['totalItemRequests']);
+        if (qparams['totalItemInvestigations'])
           this.params.append('MetricType', qparams['totalItemInvestigations']);
+        if (qparams['uniqueItemRequests'])
           this.params.append('MetricType', qparams['uniqueItemRequests']);
+        if (qparams['uniqueItemInvestigations'])
           this.params.append('MetricType', qparams['uniqueItemInvestigations']);
+      }
     });
 
     this.chosenReport = this.params.get('Report');
@@ -76,6 +95,27 @@ export class MetricsUsagestatsReportResultsComponent implements OnInit {
     this.selectedItemIndex = null;
     this.repoResponse = null;
 
+    if (this.release === '5') {
+      this.usageService.getR5Response(this.params).subscribe(
+        res => {
+          this.r5report = res;
+          this.reportItems = 'Report_Items';
+          if (this.chosenReport === 'DSR') {
+            this.reportItems = 'Report_Datasets';
+          }
+          if (this.r5report?.['Code'] === '100000') {
+            this.compressed = true;
+          }
+        }, error => {
+          this.errorMessage = 'Failed to load the report results!';
+          this.loadingMessage = '';
+        },
+        () => {
+          this.errorMessage = '';
+          this.loadingMessage = '';
+        }
+      );
+    } else {
       this.usageService.getReportResponse(this.page.toString(), this.pageSize.toString(), this.params).subscribe(
         responseWrapper => {
           this.repoResponse = responseWrapper.ReportResponse;
@@ -118,6 +158,7 @@ export class MetricsUsagestatsReportResultsComponent implements OnInit {
           }
         }
       );
+    }
 
   }
 

src/app/pages/repository/metrics/metrics-usagestats-report.component.ts

@@ -31,11 +31,11 @@ export class MetricsUsagestatsReportComponent implements OnInit {
   endDate = '';
   itemIdentifier = '';
   datasetIdentifier = '';
-  totalItemRequests = 'Total_Item_Requests';
-  totalItemInvestigations = 'Total_Item_Investigations';
-  uniqueItemRequests = 'Unique_Item_Requests';
-  uniqueItemInvestigations = 'Unique_Item_Investigations';
-  itemDataType = '';
+  totalItemRequests = '';
+  totalItemInvestigations = '';
+  uniqueItemRequests = '';
+  uniqueItemInvestigations = '';
+  dataType = '';
   granularity = 'Monthly';
 
   constructor(private repoService: RepositoryService,
@@ -80,6 +80,12 @@ export class MetricsUsagestatsReportComponent implements OnInit {
   getParams() {
     // this.repoId = this.route.snapshot.paramMap.get('id');
     this.release = this.route.snapshot.paramMap.get('reportType').slice(1, 2);
+    if (this.release === '5') {
+      this.totalItemRequests = 'Total_Item_Requests';
+      this.totalItemInvestigations = 'Total_Item_Investigations';
+      this.uniqueItemRequests = 'Unique_Item_Requests';
+      this.uniqueItemInvestigations = 'Unique_Item_Investigations';
+    }
     this.chosen_report = this.route.snapshot.paramMap.get('reportID');
     this.shownRepoId = this.convertToDisplayedFormat(this.repo.id);
     console.log(`shownRepoId is ${this.repo.id}`);
@@ -129,7 +135,7 @@ export class MetricsUsagestatsReportComponent implements OnInit {
   }
 
   updateItemDataType(event: any) {
-    this.itemDataType = event.target.value;
+    this.dataType = event.target.value;
   }
 
   updateItemIdentifier(event: any) {
@@ -203,7 +209,7 @@ export class MetricsUsagestatsReportComponent implements OnInit {
         beginDate: this.beginDate,
         endDate: this.endDate,
         repoId: this.shownRepoId,
-        itemDataType: this.itemDataType,
+        dataType: this.dataType,
         itemIdentifier: this.itemIdentifier,
         datasetIdentifier: this.datasetIdentifier,
         granularity: this.granularity,

src/app/services/usagestats.service.ts

@@ -6,6 +6,7 @@ import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { ReportResponseWrapper } from '../domain/usageStatsClasses';
 import { environment } from '../../environments/environment';
+import {COUNTER_Dataset_Report, COUNTER_Item_Report} from '../domain/sushilite';
 
 const headerOptions = {
   headers : new HttpHeaders().set('Content-Type', 'application/json')
@@ -15,17 +16,24 @@ const headerOptions = {
 
 @Injectable ()
 export class UsagestatsService {
-  private apiUrl = environment.API_ENDPOINT + '/sushilite/';
+  private apiUrl = environment.API_ENDPOINT + '';
 
   constructor(private httpClient: HttpClient) { }
 
 
   getReportResponse(page: String, pageSize: String, params: URLSearchParams): Observable<ReportResponseWrapper> {
-    const url = `${this.apiUrl}getReportResults/${page}/${pageSize}?${params}`;
+    const url = `${this.apiUrl}/sushilite/getReportResults/${page}/${pageSize}?${params}`;
     console.log(`knocking on: ${url}`);
 
     return this.httpClient.get<ReportResponseWrapper>(url, headerOptions);
   }
 
+  getR5Response(params: URLSearchParams) {
+    const url = `${this.apiUrl}/sushiliteR5/getReportResults/?${params}`;
+    console.log(`knocking on: ${url}`);
+
+    return this.httpClient.get<COUNTER_Dataset_Report | COUNTER_Item_Report>(url, headerOptions);
+  }
+
 
 }