Merge pull request 'develop' (#1) from develop into master

Reviewed-on: #1

package.json

@@ -14,14 +14,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "12.2.16",
-    "@angular/common": "12.2.16",
-    "@angular/compiler": "12.2.16",
-    "@angular/core": "12.2.16",
-    "@angular/forms": "12.2.16",
-    "@angular/platform-browser": "12.2.16",
-    "@angular/platform-browser-dynamic": "^12.2.16",
-    "@angular/router": "12.2.16",
+    "@angular/animations": "12.2.17",
+    "@angular/common": "12.2.17",
+    "@angular/compiler": "12.2.17",
+    "@angular/core": "12.2.17",
+    "@angular/forms": "12.2.17",
+    "@angular/platform-browser": "12.2.17",
+    "@angular/platform-browser-dynamic": "^12.2.17",
+    "@angular/router": "12.2.17",
     "altair": "^1.0.0",
     "bootstrap": "^4.1.3",
     "core-js": "^2.5.4",
@@ -37,10 +37,10 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.2.17",
-    "@angular/cli": "~12.2.17",
-    "@angular/compiler-cli": "^12.2.16",
-    "@angular/language-service": "^12.2.16",
+    "@angular-devkit/build-angular": "~12.2.18",
+    "@angular/cli": "~12.2.18",
+    "@angular/compiler-cli": "^12.2.17",
+    "@angular/language-service": "^12.2.17",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",

src/app/domain/sushilite.ts

@@ -0,0 +1,257 @@
+/* tslint:disable */
+/* eslint-disable */
+// Generated using typescript-generator version 2.16.538 on 2023-03-29 16:52:47.
+
+export class Alert {
+  Date_Time: string;
+  Alert: string;
+}
+
+export class COUNTER_Dataset_Attributes {
+  Type: string;
+  Value: string;
+}
+
+export class COUNTER_Dataset_Contributors {
+  Type: string;
+  Name: string;
+  Identifier: string;
+}
+
+export class COUNTER_Dataset_Dates {
+  Type: string;
+  Value: string;
+}
+
+export class COUNTER_Dataset_Identifiers {
+  Type: string;
+  Value: string;
+}
+
+export class COUNTER_Dataset_Performance {
+  Period: Period;
+  Instance: Instance[];
+}
+
+export class COUNTER_Dataset_Report {
+  Report_Header: SUSHI_Report_Header_DSR;
+  Report_Datasets: COUNTER_Dataset_Usage[];
+}
+
+export class COUNTER_Dataset_Usage {
+  Dataset_Title: string;
+  Publisher: string;
+  YOP: string;
+  Access_Method: string;
+  Performance: COUNTER_Dataset_Performance[];
+  Dataset_ID: COUNTER_Dataset_Identifiers[];
+  Dataset_Contributors: COUNTER_Dataset_Contributors[];
+  Dataset_Dates: COUNTER_Dataset_Dates[];
+  Dataset_Attributes: COUNTER_Dataset_Attributes[];
+  Publisher_ID: COUNTER_Publisher_Identifiers[];
+  Item_Parent: COUNTER_Item_Parent;
+  Item_Component: COUNTER_Item_Component[];
+  Data_Type: string;
+  Platform: string;
+}
+
+export class COUNTER_Item_Attributes {
+  Type: string;
+  Value: string;
+}
+
+export class COUNTER_Item_Component {
+  Data_Type: string;
+}
+
+export class COUNTER_Item_Contributors {
+  Type: string;
+  Name: string;
+  Identifier: string;
+}
+
+export class COUNTER_Item_Dates {
+  Type: string;
+  Value: string;
+}
+
+export class COUNTER_Item_Identifiers {
+  Type: string;
+  Value: string;
+}
+
+export class COUNTER_Item_Parent {
+  Data_Type: string;
+}
+
+export class COUNTER_Item_Performance {
+  Period: Period;
+  Instance: Instance[];
+}
+
+export class COUNTER_Item_Report {
+  Report_Header: SUSHI_Report_Header;
+  Report_Items: COUNTER_Item_Usage[];
+}
+
+export class COUNTER_Item_Usage {
+  Platform: string;
+  Data_Type: string;
+  Access_Method: string;
+  Performance: COUNTER_Item_Performance[];
+  Item: string;
+  Item_ID: COUNTER_Item_Identifiers[];
+  Item_Contributors: COUNTER_Item_Contributors[];
+  Item_Dates: COUNTER_Item_Dates[];
+  Item_Attributes: COUNTER_Item_Attributes[];
+  Publisher_ID: COUNTER_Publisher_Identifiers[];
+  Item_Parent: COUNTER_Item_Parent;
+  Item_Component: COUNTER_Item_Component[];
+  YOP: string;
+  Access_Type: string;
+  Publisher: string;
+}
+
+export class COUNTER_Platform_Report {
+  Report_Header: SUSHI_Report_Header;
+  Report_Items: COUNTER_Platform_Usage[];
+}
+
+export class COUNTER_Platform_Usage {
+  Platform: string;
+  Data_Type: string;
+  Access_Method: string;
+  Performance: COUNTER_Item_Performance[];
+}
+
+export class COUNTER_Publisher_Identifiers {
+  Type: string;
+  Value: string;
+}
+
+export class COUNTER_Title_Report {
+  Report_Header: SUSHI_Report_Header;
+  Report_Items: COUNTER_Platform_Usage[];
+}
+
+export class COUNTER_Title_Usage {
+  Title: string;
+  Item_ID: COUNTER_Item_Identifiers[];
+  Platform: string;
+  Publisher: string;
+  Data_Type: string;
+  Section_Type: string;
+  YOP: string;
+  Access_Type: string;
+  Access_Method: string;
+  Performance: COUNTER_Item_Performance[];
+}
+
+export class Filter {
+  Name: string;
+  Value: string;
+}
+
+export class Filters {
+  UsageDateRange: UsageDateRange;
+  Filter: Filter[];
+  ReportAttribute: Filter[];
+}
+
+export class Instance {
+  MetricType: string;
+  Count: string;
+}
+
+export class Period {
+  Begin_Date: string;
+  End_Date: string;
+}
+
+export class ReportAttribute {
+  Name: string;
+  Value: string;
+}
+
+export class ReportDefinition {
+  "@Name": string;
+  "@Release": string;
+  Filters: Filters;
+}
+
+export class ReportSupported {
+  Report_Name: string;
+  Report_ID: string;
+  Release: string;
+  Report_Description: string;
+  Path: string;
+}
+
+export class Requestor {
+  ID: string;
+}
+
+export class SUSHI_Consortium_Member_List {
+  Customer_ID: string;
+  Requestor_ID: string;
+  Name: string;
+  Notes: string;
+  Institution_ID: SUSHI_Org_Identifiers[];
+}
+
+export class SUSHI_Error_Model {
+  Code: string;
+  Severity: string;
+  Message: string;
+  Help_URL: string;
+  Data: string;
+}
+
+export class SUSHI_Org_Identifiers {
+  Type: string;
+  Value: string;
+}
+
+export class SUSHI_Report_Header {
+  Created: string;
+  Created_By: string;
+  Customer_ID: string;
+  Report_ID: string;
+  Report_Name: string;
+  Institution_Name: string;
+  Institution_ID: SUSHI_Org_Identifiers[];
+  Report_Filters: Filter[];
+  Report_Attributes: ReportAttribute[];
+  Exceptions: SUSHI_Error_Model[];
+}
+
+export class SUSHI_Report_Header_DSR {
+  Report_Name: string;
+  Report_ID: string;
+  Created: string;
+  Created_By: string;
+  Customer_ID: string;
+  Report_Filters: Filter[];
+  Report_Attributes: ReportAttribute[];
+  Exceptions: SUSHI_Error_Model[];
+}
+
+export class SUSHI_Report_List {
+  Report_Name: string;
+  Report_ID: string;
+  Report_Description: string;
+  Path: string;
+}
+
+export class SUSHI_Service_Status {
+  Description: string;
+  Service_Active: boolean;
+  Registry_URL: string;
+  Note: string;
+  Alerts: Alert[];
+}
+
+export class UsageDateRange {
+  Begin: string;
+  End: string;
+}

src/app/domain/typeScriptClasses.ts

@@ -732,7 +732,7 @@ export class BrokerSummary {
 }
 
 export class CollectionMonitorSummary {
-  aggregationDetails: AggregationDetails[];
+  aggregationInfo: AggregationDetails[];
   lastIndexedVersion: AggregationDetails;
 }
 

src/app/domain/usageStatsClasses.ts

@@ -74,7 +74,7 @@ export class ReportItem {
 }
 
 export class ReportResponse {
-  "@Created": string;
+  '@Created': string;
   Exception: ReportException[];
   Requestor: Requestor;
   ReportDefinition: ReportDefinition;

src/app/pages/compatibility/compatibility-validate-type.component.html

@@ -25,26 +25,26 @@
                 <div class="steps clearfix">
                   <ul role="tablist">
                     <li role="tab" class="first {{ (currentStep == 0) ? 'current' : '' }}" aria-disabled="false" aria-selected="true">
-                      <a id="wizard_advanced-t-0" href="#wizard_advanced-h-0" aria-controls="wizard_advanced-p-0">
+                      <a id="wizard_advanced-t-0" aria-controls="wizard_advanced-p-0" style="cursor: default">
                         <!--<span class="current-info audible">current step: </span>-->
                         <span class="number">1</span>
                         <span class="title">Select datasource</span>
                       </a>
                     </li>
                     <li role="tab" class="{{ (currentStep < 1) ? 'disabled' : '' }} {{ (currentStep == 1) ? 'current' : '' }}" aria-disabled="true">
-                      <a id="wizard_advanced-t-1" href="#wizard_advanced-h-1" aria-controls="wizard_advanced-p-1">
+                      <a id="wizard_advanced-t-1" aria-controls="wizard_advanced-p-1" style="cursor: default">
                         <span class="number">2</span>
                         <span class="title">{{ (type === 'cris') ? 'Finish' : 'Select guidelines' }}</span>
                       </a>
                     </li>
                     <li *ngIf="(type !== 'cris')" role="tab" class=" {{ (currentStep < 2) ? 'disabled' : '' }} {{ (currentStep == 2) ? 'current' : '' }}" aria-disabled="true">
-                      <a id="wizard_advanced-t-2" href="#wizard_advanced-h-2" aria-controls="wizard_advanced-p-2">
+                      <a id="wizard_advanced-t-2" aria-controls="wizard_advanced-p-2" style="cursor: default">
                         <span class="number">3</span>
                         <span class="title">Select parameters</span>
                       </a>
                     </li>
                     <li *ngIf="(type !== 'cris')" role="tab" class="last {{ (currentStep < 3) ? 'disabled' : '' }} {{ (currentStep == 3) ? 'current' : '' }}" aria-disabled="true">
-                      <a id="wizard_advanced-t-3" href="#wizard_advanced-h-3" aria-controls="wizard_advanced-p-3">
+                      <a id="wizard_advanced-t-3" aria-controls="wizard_advanced-p-3" style="cursor: default">
                         <span class="number">4</span>
                         <span class="title">Finish</span>
                       </a>

src/app/pages/repository/dashboard/dashboard.component.ts

@@ -199,7 +199,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
 
   getCollectionMonitorSummary(collectionMonitorSummary: CollectionMonitorSummary) {
 
-    this.latestAggregations = collectionMonitorSummary.aggregationDetails;
+    this.latestAggregations = collectionMonitorSummary.aggregationInfo;
     this.lastIndexedVersion = collectionMonitorSummary.lastIndexedVersion;
 
     if ( !this.latestAggregations || (this.latestAggregations.length === 0) ) {

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

@@ -14,7 +14,176 @@
     </aside-help-content>
 
     <!-- MIDDLE -->
-    <div class=" uk-width-expand@m">
+    <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" class="uk-button uk-button-primary">
+          <span class=""><i class="fas fa-download"></i></span> Download report
+        </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 }} 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-3-4@m uk-row-first">
+
+                <!-- RESULTS TABLE -->
+                <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>
+                        <ng-container *ngIf="chosenReport === 'DSR'; else notDsrRow">
+                          <td class="uk-width-1-3">{{item.Dataset_Title}}</td>
+                          <td>{{item.Publisher}}</td>
+                          <td>{{item.YOP}}</td>
+                          <td>{{item.Access_Method}}</td>
+                        </ng-container>
+                        <ng-template #notDsrRow>
+                          <td>{{item.Platform}}</td>
+                          <td *ngIf="chosenReport === 'PR'">{{item.Data_Type}}</td>
+                          <td>{{item.Access_Method}}</td>
+                        </ng-template>
+                        <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>
+                      <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 class="uk-width-1-4@m">
+
+                <div class="uk-margin-medium-bottom">
+<!--                  <p>-->
+<!--                    Number of results:-->
+<!--                    <span class="uk-badge uk-badge-success uk-text-upper uk-margin-small-left">{{ repoResponse.ReportDefinition.Filters.ReportAttribute[1].Value }}</span>-->
+<!--                  </p>-->
+                  <p>
+                    Filters:
+                    <span *ngFor="let filter of r5report.Report_Header.Report_Filters; let i = index" class="uk-badge uk-badge-outline uk-text-upper uk-margin-small-left">
+                      {{ filter.Name }}: {{ filter.Value }}
+                    </span>
+                  </p>
+                </div>
+                <h2 class="heading_c uk-margin-small-bottom">Details</h2>
+                <ul class="md-list md-list-addon">
+                  <li>
+                    <div class="md-list-addon-element">
+                      <i class="md-list-addon-icon material-icons"></i>
+                    </div>
+                    <div class="md-list-content">
+                      <span class="md-list-heading">{{ r5report.Report_Header.Created | date: "yyyy-MM-dd HH:mm:ss" }}</span>
+                      <span class="uk-text-small uk-text-muted">Date run</span>
+                    </div>
+                  </li>
+<!--                  <li>-->
+<!--                    <div class="md-list-addon-element">-->
+<!--                      <i class="md-list-addon-icon material-icons"></i>-->
+<!--                    </div>-->
+<!--                    <div class="md-list-content">-->
+<!--                      <span class="md-list-heading">{{ coveredPeriod }}</span>-->
+<!--                      <span class="uk-text-small uk-text-muted">Period covered</span>-->
+<!--                    </div>-->
+<!--                  </li>-->
+                </ul>
+              </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>
       <div *ngIf="loadingMessage" class="loading-big">
@@ -33,10 +202,10 @@
               <div class="uk-width-4-5@m">
                 <h3>{{ repoResponse.ReportDefinition['@Name'] }} Report Results
                   <!--<span *ngIf="repoResponse.Report &&-->
-                              <!--repoResponse.Report.Report &&-->
-                              <!--repoResponse.Report.Report.Customer &&-->
-                              <!--repoResponse.Report.Report.Customer.ReportItems &&-->
-                              <!--repoResponse.Report.Report.Customer.ReportItems.length > 0">for {{ repoResponse.Report.Report.Customer.ReportItems[0].ItemPlatform }}</span>-->
+                  <!--repoResponse.Report.Report &&-->
+                  <!--repoResponse.Report.Report.Customer &&-->
+                  <!--repoResponse.Report.Report.Customer.ReportItems &&-->
+                  <!--repoResponse.Report.Report.Customer.ReportItems.length > 0">for {{ repoResponse.Report.Report.Customer.ReportItems[0].ItemPlatform }}</span>-->
                 </h3>
               </div>
               <div class="uk-width-1-5@m">
@@ -137,75 +306,6 @@
                 </table>
               </div>
 
-
-
-              <!--<div>-->
-              <!--<div>-->
-              <!--<div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium uk-margin-top uk-margin-bottom">-->
-
-              <!--<table class="uk-table uk-table-middle uk-table-striped" style="vertical-align: top !important;">-->
-              <!--<thead>-->
-              <!--<tr>-->
-              <!--<th *ngIf="chosenReport !== 'RR1'">Title</th>-->
-              <!--<th *ngIf="chosenReport !== 'RR1'">Publisher</th>-->
-              <!--<th *ngIf="chosenReport === 'RR1'">Platform name</th>-->
-              <!--<th>{{ (chosenReport !== 'RR1') ? 'Item Urls' : 'Url' }}</th>-->
-              <!--<th>Type</th>-->
-              <!--<th colspan="2">Downloads/Views</th>-->
-              <!--</tr>-->
-              <!--</thead>-->
-              <!--<td colspan="6" *ngIf="infoMessage">{{ infoMessage }}</td>-->
-              <!--<tbody *ngFor="let item of repoResponse.Report.Report.Customer.ReportItems; let item_i = index"-->
-              <!--style="border-bottom: 1px solid whitesmoke;">-->
-              <!--<tr>-->
-              <!--<td *ngIf="chosenReport !== 'RR1'">{{ item.ItemName }}</td>-->
-              <!--<td *ngIf="chosenReport !== 'RR1'">{{ item.ItemPublisher }}</td>-->
-              <!--<td *ngIf="chosenReport === 'RR1'">{{ item.ItemPlatform }}</td>-->
-              <!--<td style="min-width: 300px;">-->
-              <!--<span *ngFor="let url of transformItem(item.ItemIdentifier); let i = index">-->
-              <!--<br *ngIf="i>0">{{ url }}-->
-              <!--</span>-->
-              <!--</td>-->
-              <!--<td>{{ item.ItemDataType }}</td>-->
-              <!--<td class="uk-text-center"-->
-              <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Monthly'" colspan="2">-->
-              <!--<a *ngIf="item.ItemPerformance && (item.ItemPerformance.length > 0)"-->
-              <!--(click)="displayItemPerformance(item_i)">{{ (selectedItemIndex === item_i) ? 'Hide' : 'See' }} results</a>-->
-              <!--</td>-->
-              <!--<td class="uk-text-center"-->
-              <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">-->
-              <!--{{ item.ItemPerformance[0].Instance[0].Count }}-->
-              <!--</td>-->
-              <!--<td class="uk-text-center"-->
-              <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">-->
-              <!--{{ item.ItemPerformance[0].Instance[1].Count }}-->
-              <!--</td>-->
-              <!--</tr>-->
-              <!--<tr *ngIf="(selectedItemIndex === item_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">-->
-              <!--<tr>-->
-              <!--<th>Month</th>-->
-              <!--<th>Downloads</th>-->
-              <!--<th>Views</th>-->
-              <!--</tr>-->
-              <!--<tr *ngFor="let month of item.ItemPerformance">-->
-              <!--<td>{{ month.Period.Begin | date: "MMM yyyy" }}</td>-->
-              <!--<td>{{ month.Instance[0].Count }}</td>-->
-              <!--<td>{{ month.Instance[1].Count }}</td>-->
-              <!--</tr>-->
-              <!--</table>-->
-              <!--</div>-->
-              <!--</td>-->
-              <!--</tr>-->
-              <!--</tbody>-->
-              <!--</table>-->
-
-              <!--</div>-->
-              <!--</div>-->
-              <!--</div>-->
-
               <!-- BOTTOM PAGINATION LINKS -->
               <ul class="uk-pagination uk-margin-medium-top">
                 <li class="uk-pagination-previous"><a (click)="goToPreviousPage()"><i class="uk-icon-angle-left"></i><span class="uk-margin-left">Previous</span></a></li>
@@ -433,6 +533,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;
@@ -37,11 +43,11 @@ export class MetricsUsagestatsReportResultsComponent implements OnInit {
     this.pageSize = 10;
     this.readParams();
     this.pageSizeSelect = this.fb.group({selectPageSize: ['']});
-    let body = document.getElementsByTagName('body')[0];
-    body.classList.remove("top_bar_active");   //remove the class
-    body.classList.remove("page_heading_active");
-    body.classList.remove("landing");
-    body.classList.add("dashboard");
+    const body = document.getElementsByTagName('body')[0];
+    body.classList.remove('top_bar_active');   // remove the class
+    body.classList.remove('page_heading_active');
+    body.classList.remove('landing');
+    body.classList.add('dashboard');
   }
 
   readParams() {
@@ -49,14 +55,33 @@ export class MetricsUsagestatsReportResultsComponent implements OnInit {
 
     this.route.queryParams.subscribe( qparams => {
       this.params.append('Report', qparams['report']);
-      this.params.append('Release', '4');
+      this.params.append('Release', qparams['release']);
+      this.release = qparams['release'];
       this.params.append('RequestorID', this.authService.getUserEmail());
-      this.params.append('BeginDate', qparams['beginDate']);
-      this.params.append('EndDate', qparams['endDate']);
+      if (qparams['beginDate'])
+        this.params.append('BeginDate', qparams['beginDate']);
+      if (qparams['endDate'])
+        this.params.append('EndDate', qparams['endDate']);
       this.params.append('RepositoryIdentifier', qparams['repoId']);
-      this.params.append('ItemIdentifier', qparams['itemIdentifier']);
-      this.params.append('ItemDataType', qparams['itemIdentifier']);
+      if (qparams['itemIdentifier'])
+        this.params.append('ItemIdentifier', qparams['itemIdentifier']);
+      if (qparams['datasetIdentifier'])
+        this.params.append('DatasetIdentifier', qparams['datasetIdentifier']);
+      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_P1') {
+        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');
@@ -70,48 +95,70 @@ export class MetricsUsagestatsReportResultsComponent implements OnInit {
     this.selectedItemIndex = null;
     this.repoResponse = null;
 
-    this.usageService.getReportResponse(this.page.toString(), this.pageSize.toString(), this.params).subscribe(
-      responseWrapper => {
-        this.repoResponse = responseWrapper.ReportResponse;
-      },
-      error => {
-        this.errorMessage = 'Failed to load the report results!';
-        this.loadingMessage = '';
-      },
-      () => {
-        this.errorMessage = '';
-        this.loadingMessage = '';
-
-        this.pageSizeSelect.get('selectPageSize').setValue(this.pageSize);
-        this.pageSizeSelect.get('selectPageSize').updateValueAndValidity();
-
-        this.totalPages = Math.ceil(
-          +this.repoResponse.ReportDefinition.Filters
-                  .ReportAttribute.filter(x => x['Name'] === 'ReportItemCount')[0].Value / this.pageSize);
-        if ( this.totalPages === 0 ) {
-          this.infoMessage = 'No results were found';
+    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;
+        },
+        error => {
+          this.errorMessage = 'Failed to load the report results!';
+          this.loadingMessage = '';
+        },
+        () => {
+          this.errorMessage = '';
+          this.loadingMessage = '';
 
-        if (this.repoResponse.ReportDefinition && this.repoResponse.ReportDefinition.Filters &&
-            this.repoResponse.ReportDefinition.Filters.ReportAttribute) {
+          this.pageSizeSelect.get('selectPageSize').setValue(this.pageSize);
+          this.pageSizeSelect.get('selectPageSize').updateValueAndValidity();
 
-          if (this.repoResponse.Report && this.repoResponse.ReportDefinition.Filters.UsageDateRange &&
-            this.repoResponse.ReportDefinition.Filters.UsageDateRange.Begin &&
-            this.repoResponse.ReportDefinition.Filters.UsageDateRange.End) {
-            this.coveredPeriod = this.repoResponse.ReportDefinition.Filters.UsageDateRange.Begin + ' to ';
-            this.coveredPeriod = this.coveredPeriod + this.repoResponse.ReportDefinition.Filters.UsageDateRange.End;
-          } else {
-            const defaultDatePeriod = this.repoResponse.Exception.filter(x => x['Message'] === 'Unspecified Date Arguments');
-
-            this.coveredPeriod = defaultDatePeriod[0].Data.split(':')[1].trim() + ' to ';
-            this.coveredPeriod = this.coveredPeriod + defaultDatePeriod[1].Data.split(':')[1].trim() + ' (default)';
+          this.totalPages = Math.ceil(
+            +this.repoResponse.ReportDefinition.Filters
+              .ReportAttribute.filter(x => x['Name'] === 'ReportItemCount')[0].Value / this.pageSize);
+          if ( this.totalPages === 0 ) {
+            this.infoMessage = 'No results were found';
           }
 
-        } else {
-          this.repoResponse = null;
+          if (this.repoResponse.ReportDefinition && this.repoResponse.ReportDefinition.Filters &&
+            this.repoResponse.ReportDefinition.Filters.ReportAttribute) {
+
+            if (this.repoResponse.Report && this.repoResponse.ReportDefinition.Filters.UsageDateRange &&
+              this.repoResponse.ReportDefinition.Filters.UsageDateRange.Begin &&
+              this.repoResponse.ReportDefinition.Filters.UsageDateRange.End) {
+              this.coveredPeriod = this.repoResponse.ReportDefinition.Filters.UsageDateRange.Begin + ' to ';
+              this.coveredPeriod = this.coveredPeriod + this.repoResponse.ReportDefinition.Filters.UsageDateRange.End;
+            } else {
+              const defaultDatePeriod = this.repoResponse.Exception.filter(x => x['Message'] === 'Unspecified Date Arguments');
+
+              this.coveredPeriod = defaultDatePeriod[0].Data.split(':')[1].trim() + ' to ';
+              this.coveredPeriod = this.coveredPeriod + defaultDatePeriod[1].Data.split(':')[1].trim() + ' (default)';
+            }
+
+          } else {
+            this.repoResponse = null;
+          }
         }
-      }
-    );
+      );
+    }
 
   }
 

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

@@ -42,7 +42,7 @@
 
                 <div class="md-input-wrapper md-input-filled uk-margin-bottom">
                   <label>Release</label>
-                  <input class="md-input label-fixed" type="text" value="4" disabled>
+                  <input class="md-input label-fixed" type="text" value="{{release}}" disabled>
                   <span class="md-input-bar "></span>
                 </div>
 
@@ -112,17 +112,77 @@
                 </div>
 
 
-                <div *ngIf="chosen_report != 'JR1' && chosen_report != 'RR1'" class="">
+                <div *ngIf="chosen_report != 'JR1' && chosen_report != 'RR1' && chosen_report != 'PR'
+                      && chosen_report != 'PR_P1' && chosen_report != 'DSR'">
                   <div class="md-input-wrapper md-input-filled uk-margin-bottom">
                     <label>Item Identifier</label>
-                    <input class="md-input label-fixed" name="ItemIdentifier" placeholder="e.g. openaire:od_________::fb90de6f20d79783d05749d8f60417d5"
+                    <input class="md-input label-fixed" name="ItemIdentifier" placeholder="e.g. doi:10.xyz/12345"
                            type="text" (blur)="updateItemIdentifier($event)">
                     <span class="md-input-bar "></span>
                   </div>
 
                 </div>
 
-                <div *ngIf="chosen_report == 'IR1' || chosen_report == 'RR1' || chosen_report == 'JR1'">
+                <div *ngIf="chosen_report == 'DSR'">
+                  <div class="md-input-wrapper md-input-filled uk-margin-bottom">
+                    <label>Dataset Identifier</label>
+                    <input class="md-input label-fixed" name="DatasetIdentifier" placeholder="e.g. doi:10.xyz/12345"
+                           type="text" (blur)="updateDatasetIdentifier($event)">
+                    <span class="md-input-bar "></span>
+                  </div>
+
+                </div>
+
+                <div *ngIf="chosen_report == 'PR' || chosen_report == 'IR'">
+                  <h5>Metric Type</h5>
+                  <div>
+                    <label>
+                      <input type="checkbox" class="uk-checkbox" value="Total_Item_Requests" checked (change)="updateTotalItemRequests($event)"> Total Item Requests
+                    </label>
+                  </div>
+                  <div>
+                    <label>
+                      <input type="checkbox" class="uk-checkbox" value="Total_Item_Investigations" checked (change)="updateTotalItemInvestigations($event)"> Total Item Investigations
+                    </label>
+                  </div>
+                  <div>
+                    <label>
+                      <input type="checkbox" class="uk-checkbox" value="Unique_Item_Requests" checked (change)="updateUniqueItemRequests($event)"> Unique Item Requests
+                    </label>
+                  </div>
+                  <div>
+                    <label>
+                      <input type="checkbox" class="uk-checkbox" value="Unique_Item_Investigations" checked (change)="updateUniqueItemInvestigations($event)"> Unique Item Investigations
+                    </label>
+                  </div>
+                </div>
+
+                <div *ngIf="chosen_report == 'DSR'">
+                  <h5>Metric Type</h5>
+                  <div>
+                    <label>
+                      <input type="checkbox" class="uk-checkbox" value="Total_Dataset_Requests" checked (change)="updateTotalItemRequests($event)"> Total Dataset Requests
+                    </label>
+                  </div>
+                  <div>
+                    <label>
+                      <input type="checkbox" class="uk-checkbox" value="Total_Dataset_Investigations" checked (change)="updateTotalItemInvestigations($event)"> Total Dataset Investigations
+                    </label>
+                  </div>
+                  <div>
+                    <label>
+                      <input type="checkbox" class="uk-checkbox" value="Unique_Dataset_Requests" checked (change)="updateUniqueItemRequests($event)"> Unique Dataset Requests
+                    </label>
+                  </div>
+                  <div>
+                    <label>
+                      <input type="checkbox" class="uk-checkbox" value="Unique_Dataset_Investigations" checked (change)="updateUniqueItemInvestigations($event)"> Unique Dataset Investigations
+                    </label>
+                  </div>
+                </div>
+
+                <div *ngIf="chosen_report == 'IR1' || chosen_report == 'RR1' || chosen_report == 'JR1'
+                            || chosen_report == 'PR' || chosen_report == 'IR'">
 
                   <div class="uk-text-italic uk-margin-top uk-margin-bottom">
                     <p>Optional filter to only show results for a single item type, e.g. article, book, etc.</p>
@@ -130,7 +190,7 @@
 
                   <div class="md-input-wrapper md-input-filled">
                     <label class="">Item Data Type</label>
-                    <select class="md-input" name="ItemDataType" (change)="updateItemDataType($event)">
+                    <select class="md-input label-fixed" name="ItemDataType" (change)="updateItemDataType($event)">
                       <!-- TODO: get the list from api if it becomes available -->
                       <option value="">--- Select Item Data Type ---</option>
                       <option value="Annotation">Annotation</option>

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

@@ -4,7 +4,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { RepositoryService } from '../../../services/repository.service';
 import { AuthenticationService } from '../../../services/authentication.service';
 import { loadingRepoMessage } from '../../../domain/shared-messages';
-import { SharedService } from "../../../services/shared.service";
+import { SharedService } from '../../../services/shared.service';
 
 @Component({
   selector: 'metrics-usagestats-report',
@@ -26,10 +26,16 @@ export class MetricsUsagestatsReportComponent implements OnInit {
   chosen_report: string;
 
   userEmail: string;
+  release: string;
   beginDate = '';
   endDate = '';
   itemIdentifier = '';
-  itemDataType = '';
+  datasetIdentifier = '';
+  totalItemRequests = '';
+  totalItemInvestigations = '';
+  uniqueItemRequests = '';
+  uniqueItemInvestigations = '';
+  dataType = '';
   granularity = 'Monthly';
 
   constructor(private repoService: RepositoryService,
@@ -40,7 +46,7 @@ export class MetricsUsagestatsReportComponent implements OnInit {
 
   ngOnInit() {
 
-    if(this.sharedService.getRepository()) {
+    if (this.sharedService.getRepository()) {
       this.repo = this.sharedService.getRepository();
       this.getInfo();
     }
@@ -52,11 +58,11 @@ export class MetricsUsagestatsReportComponent implements OnInit {
       }
     );
 
-    let body = document.getElementsByTagName('body')[0];
-    body.classList.remove("top_bar_active");   //remove the class
-    body.classList.remove("page_heading_active");
-    body.classList.remove("landing");
-    body.classList.add("dashboard");
+    const body = document.getElementsByTagName('body')[0];
+    body.classList.remove('top_bar_active');   // remove the class
+    body.classList.remove('page_heading_active');
+    body.classList.remove('landing');
+    body.classList.add('dashboard');
   }
 
   getInfo() {
@@ -73,7 +79,21 @@ 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);
     this.chosen_report = this.route.snapshot.paramMap.get('reportID');
+    if (this.release === '5') {
+      if (this.chosen_report === 'DSR') {
+        this.totalItemRequests = 'Total_Dataset_Requests';
+        this.totalItemInvestigations = 'Total_Dataset_Investigations';
+        this.uniqueItemRequests = 'Unique_Dataset_Requests';
+        this.uniqueItemInvestigations = 'Unique_Dataset_Investigations';
+      } else {
+        this.totalItemRequests = 'Total_Item_Requests';
+        this.totalItemInvestigations = 'Total_Item_Investigations';
+        this.uniqueItemRequests = 'Unique_Item_Requests';
+        this.uniqueItemInvestigations = 'Unique_Item_Investigations';
+      }
+    }
     this.shownRepoId = this.convertToDisplayedFormat(this.repo.id);
     console.log(`shownRepoId is ${this.repo.id}`);
     this.title = `${this.chosen_report} report`;
@@ -122,13 +142,17 @@ export class MetricsUsagestatsReportComponent implements OnInit {
   }
 
   updateItemDataType(event: any) {
-    this.itemDataType = event.target.value;
+    this.dataType = event.target.value;
   }
 
   updateItemIdentifier(event: any) {
     this.itemIdentifier = event.target.value;
   }
 
+  updateDatasetIdentifier(event: any) {
+    this.datasetIdentifier = event.target.value;
+  }
+
   updateGranularity(event: any) {
     this.granularity = event.target.value;
   }
@@ -137,18 +161,70 @@ export class MetricsUsagestatsReportComponent implements OnInit {
     this.useCurrentRepo = event.target.value;
   }
 
+  updateTotalItemRequests(event: any) {
+    if (event.target.checked) {
+      this.totalItemRequests = event.target.value;
+    } else {
+      this.totalItemRequests = null;
+    }
+  }
+
+  updateUniqueItemRequests(event: any) {
+    if (event.target.checked) {
+      this.uniqueItemRequests = event.target.value;
+    } else {
+      this.uniqueItemRequests = null;
+    }
+  }
+
+  updateTotalItemInvestigations(event: any) {
+    if (event.target.checked) {
+      this.totalItemInvestigations = event.target.value;
+    } else {
+      this.totalItemInvestigations = null;
+    }
+  }
+
+  updateUniqueItemInvestigations(event: any) {
+    if (event.target.checked) {
+      this.uniqueItemInvestigations = event.target.value;
+    } else {
+      this.uniqueItemInvestigations = null;
+    }
+  }
+
   goToReport() {
     if (!this.useCurrentRepo) { this.shownRepoId = ''; }
+    const metricTypes: string[] = [];
+    if (this.totalItemRequests !== null) {
+      metricTypes.push(this.totalItemRequests);
+    }
+    if (this.totalItemInvestigations !== null) {
+      metricTypes.push(this.totalItemRequests);
+    }
+    if (this.uniqueItemRequests !== null) {
+      metricTypes.push(this.uniqueItemRequests);
+    }
+    if (this.uniqueItemInvestigations  !== null) {
+      metricTypes.push(this.uniqueItemInvestigations);
+    }
     this.router.navigate(['usagestats-report-results'], {
       relativeTo: this.route.parent,
       queryParams: {
         report: this.chosen_report,
+        release: this.release,
         beginDate: this.beginDate,
         endDate: this.endDate,
         repoId: this.shownRepoId,
-        itemDataType: this.itemDataType,
+        dataType: this.dataType,
         itemIdentifier: this.itemIdentifier,
-        granularity: this.granularity
+        datasetIdentifier: this.datasetIdentifier,
+        granularity: this.granularity,
+        // metricTypes: metricTypes,
+        totalItemRequests: this.totalItemRequests,
+        totalItemInvestigations: this.totalItemInvestigations,
+        uniqueItemRequests: this.uniqueItemRequests,
+        uniqueItemInvestigations: this.uniqueItemInvestigations
       }
     });
 

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

@@ -21,10 +21,73 @@
 
         <h3>Supported Reports</h3>
 
+        <h2>R5 Reports</h2>
+
+        <div class="uk-grid-match" uk-grid>
+          <div class="uk-width-1-3">
+            <div class="uk-text-center md-card md-card-hover">
+              <a [routerLink]="['R5','PR']" class="uk-position-cover"></a>
+              <div class="uk-card-media-top " style="background-color: #001a6e">
+                <h1 class="uk-padding-large font-weight-bolder md-color-white">PR</h1>
+              </div>
+              <div class="uk-card-body uk-padding-small">
+                <h3 class="uk-card-title uk-margin-small-bottom">
+                  A report summarizing usage activity for the repository by month, metric type and item type
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div class="uk-width-1-3">
+            <div class="uk-text-center md-card md-card-hover">
+              <a [routerLink]="['R5','PR_P1']" class="uk-position-cover"></a>
+              <div class="uk-card-media-top " style="background-color: #001a6e">
+                <h1 class="uk-padding-large font-weight-bolder md-color-white">PR_P1</h1>
+              </div>
+              <div class="uk-card-body uk-padding-small">
+                <h3 class="uk-card-title uk-margin-small-bottom">
+                  A report summarizing usage activity for the repository by month, broken down by metric type
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div class="uk-width-1-3">
+            <div class="uk-text-center md-card md-card-hover">
+              <a [routerLink]="['R5','IR']" class="uk-position-cover"></a>
+              <div class="uk-card-media-top " style="background-color: #001a6e">
+                <h1 class="uk-padding-large font-weight-bolder md-color-white">IR</h1>
+              </div>
+              <div class="uk-card-body uk-padding-small">
+                <h3 class="uk-card-title uk-margin-small-bottom">
+                  A report for items requests by month metric_type, item type and repository
+                </h3>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="uk-grid-match" uk-grid>
+          <div class="uk-width-1-3">
+            <div class="uk-text-center md-card md-card-hover">
+              <a [routerLink]="['R5','DSR']" class="uk-position-cover"></a>
+              <div class="uk-card-media-top " style="background-color: #001a6e">
+                <h1 class="uk-padding-large font-weight-bolder md-color-white">DSR</h1>
+              </div>
+              <div class="uk-card-body uk-padding-small">
+                <h3 class="uk-card-title uk-margin-small-bottom">
+                  A report for datasets requests by month metric type and repository
+                </h3>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <hr>
+        <h2>R4 Reports</h2>
+
         <div class="uk-grid uk-grid-match repositoryTypeSelection" data-uk-grid-margin="">
           <div class="uk-width-1-3@m uk-row-first">
             <div class="uk-text-center md-card md-card-default md-card-hover uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="">
-              <a [routerLink]="['AR1']" class="el-link uk-position-cover uk-margin-remove-adjacent"></a>
+              <a [routerLink]="['R4','AR1']" class="el-link uk-position-cover uk-margin-remove-adjacent"></a>
               <div class="uk-card-media-top">
                 <img class="el-image" src="../../../../assets/imgs/Icons_Reports_wide_AR1.png" alt="" style="width: 100%;">
               </div>
@@ -37,7 +100,7 @@
           </div>
           <div class="uk-width-1-3@m">
             <div class="uk-margin uk-text-center md-card md-card-default md-card-hover uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="" data-id="" style="">
-              <a [routerLink]="['IR1']" class="el-link uk-position-cover uk-margin-remove-adjacent" href=""></a>
+              <a [routerLink]="['R4','IR1']" class="el-link uk-position-cover uk-margin-remove-adjacent" href=""></a>
               <div class="uk-card-media-top">
                 <img class="el-image" src="../../../../assets/imgs/Icons_Reports_wide_IR1.png" alt="" style="width:100%;">
               </div>
@@ -50,7 +113,7 @@
           </div>
           <div class="uk-width-1-3@m">
             <div class="uk-margin uk-text-center md-card md-card-default md-card-hover uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="" data-id="" style="">
-              <a [routerLink]="['RR1']" class="el-link uk-position-cover uk-margin-remove-adjacent"></a>
+              <a [routerLink]="['R4','RR1']" class="el-link uk-position-cover uk-margin-remove-adjacent"></a>
               <div class="uk-card-media-top">
                 <img class="el-image" src="../../../../assets/imgs/Icons_Reports_wide_RR1.png" alt="" style="width:100%;">
               </div>
@@ -62,10 +125,11 @@
             </div>
           </div>
         </div>
+
         <div class="uk-grid uk-grid-match repositoryTypeSelection" data-uk-grid-margin="">
           <div class="uk-width-1-3@m uk-row-first">
             <div class="uk-text-center md-card md-card-default md-card-hover uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="">
-              <a [routerLink]="['BR1']" class="el-link uk-position-cover uk-margin-remove-adjacent"></a>
+              <a [routerLink]="['R4','BR1']" class="el-link uk-position-cover uk-margin-remove-adjacent"></a>
               <div class="uk-card-media-top">
                 <img class="el-image" src="../../../../assets/imgs/Icons_Reports_wide_BR1.png" alt="" style="width: 100%;">
               </div>
@@ -78,7 +142,7 @@
           </div>
           <div class="uk-width-1-3@m">
             <div class="uk-margin uk-text-center md-card md-card-default md-card-hover uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="" data-id="" style="">
-              <a [routerLink]="['BR2']" class="el-link uk-position-cover uk-margin-remove-adjacent" href=""></a>
+              <a [routerLink]="['R4','BR2']" class="el-link uk-position-cover uk-margin-remove-adjacent" href=""></a>
               <div class="uk-card-media-top">
                 <img class="el-image" src="../../../../assets/imgs/Icons_Reports_wide_BR2.png" alt="" style="width:100%;">
               </div>
@@ -91,7 +155,7 @@
           </div>
           <div *ngIf="repo.eoscDatasourceType === 'journal'" class="uk-width-1-3@m">
             <div class="uk-margin uk-text-center md-card md-card-default md-card-hover uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="" data-id="" style="">
-              <a [routerLink]="['JR1']" class="el-link uk-position-cover uk-margin-remove-adjacent"></a>
+              <a [routerLink]="['R4','JR1']" class="el-link uk-position-cover uk-margin-remove-adjacent"></a>
               <div class="uk-card-media-top">
                 <img class="el-image" src="../../../../assets/imgs/Icons_Reports_wide_JR1.png" alt="" style="width:100%;">
               </div>

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

@@ -3,7 +3,7 @@ import { Repository } from '../../../domain/typeScriptClasses';
 import { RepositoryService } from '../../../services/repository.service';
 import { AuthenticationService } from '../../../services/authentication.service';
 import { ActivatedRoute, Router } from '@angular/router';
-import { SharedService } from "../../../services/shared.service";
+import { SharedService } from '../../../services/shared.service';
 
 @Component({
   selector: 'metrics-usagestats',

src/app/pages/repository/metrics/metrics.routing.ts

@@ -36,7 +36,7 @@ const metricsRoutes: Routes = [
         component: MetricsUsagestatsComponent
       },
       {
-        path: 'usagestats/:reportID',
+        path: 'usagestats/:reportType/:reportID',
         component: MetricsUsagestatsReportComponent
       },
       {

src/app/pages/sources/sources-register/register-existing-datasource.component.html

@@ -23,32 +23,33 @@
                 <div class="steps clearfix">
                   <ul role="tablist">
                     <li role="tab" class="first {{ (currentStep == 0) ? 'current' : '' }}" aria-disabled="false" aria-selected="true">
-                      <a id="wizard_advanced-t-0" href="#wizard_advanced-h-0" aria-controls="wizard_advanced-p-0">
+<!--                      <a id="wizard_advanced-t-0" href="#wizard_advanced-h-0" aria-controls="wizard_advanced-p-0">-->
+                      <a id="wizard_advanced-t-0" aria-controls="wizard_advanced-p-0" style="cursor: default">
                         <!--<span class="current-info audible">current step: </span>-->
                         <span class="number">1</span>
                         <span class="title">Select {{currentMode === 'cris' ? 'Datasource' : 'Repository'}}</span>
                       </a>
                     </li>
                     <li role="tab" class="{{ (currentStep < 1) ? 'disabled' : '' }} {{ (currentStep == 1) ? 'current' : '' }}" aria-disabled="true">
-                      <a id="wizard_advanced-t-1" href="#wizard_advanced-h-1" aria-controls="wizard_advanced-p-1">
+                      <a id="wizard_advanced-t-1" aria-controls="wizard_advanced-p-1" style="cursor: default">
                         <span class="number">2</span>
                         <span class="title">Register data source</span>
                       </a>
                     </li>
                     <li role="tab" class=" {{ (currentStep < 2) ? 'disabled' : '' }} {{ (currentStep == 2) ? 'current' : '' }}" aria-disabled="true">
-                      <a id="wizard_advanced-t-2" href="#wizard_advanced-h-2" aria-controls="wizard_advanced-p-2">
+                      <a id="wizard_advanced-t-2" aria-controls="wizard_advanced-p-2" style="cursor: default">
                         <span class="number">3</span>
                         <span class="title">Register interface</span>
                       </a>
                     </li>
                     <li role="tab" class=" {{ (currentStep < 3) ? 'disabled' : '' }} {{ (currentStep == 3) ? 'current' : '' }}" aria-disabled="true">
-                      <a id="wizard_advanced-t-3" href="#wizard_advanced-h-3" aria-controls="wizard_advanced-p-3">
+                      <a id="wizard_advanced-t-3" aria-controls="wizard_advanced-p-3" style="cursor: default">
                         <span class="number">4</span>
                         <span class="title">Terms of Use</span>
                       </a>
                     </li>
                     <li role="tab" class="last {{ (currentStep < 4) ? 'disabled' : '' }} {{ (currentStep == 4) ? 'current' : '' }}" aria-disabled="true">
-                      <a id="wizard_advanced-t-4" href="#wizard_advanced-h-4" aria-controls="wizard_advanced-p-4">
+                      <a id="wizard_advanced-t-4" aria-controls="wizard_advanced-p-4"  style="cursor: default">
                         <span class="number">5</span>
                         <span class="title">Finish</span>
                       </a>

src/app/pages/sources/sources-register/register-new-datasource.component.html

@@ -23,26 +23,26 @@
                 <div class="steps clearfix">
                   <ul role="tablist">
                     <li role="tab" class="first {{ (currentStep == 1) ? 'current' : '' }}" aria-disabled="false" aria-selected="true">
-                      <a id="wizard_advanced-t-0" href="#wizard_advanced-h-0" aria-controls="wizard_advanced-p-0">
+                      <a id="wizard_advanced-t-0" aria-controls="wizard_advanced-p-0" style="cursor: default">
                         <!--<span class="current-info audible">current step: </span>-->
                         <span class="number">1</span>
                         <span class="title">Register data source</span>
                       </a>
                     </li>
                     <li role="tab" class="{{ (currentStep < 2) ? 'disabled' : '' }} {{ (currentStep == 2) ? 'current' : '' }}" aria-disabled="true">
-                      <a id="wizard_advanced-t-1" href="#wizard_advanced-h-1" aria-controls="wizard_advanced-p-1">
+                      <a id="wizard_advanced-t-1" aria-controls="wizard_advanced-p-1" style="cursor: default">
                         <span class="number">2</span>
                         <span class="title">Register interface</span>
                       </a>
                     </li>
                     <li role="tab" class=" {{ (currentStep < 3) ? 'disabled' : '' }} {{ (currentStep == 3) ? 'current' : '' }}" aria-disabled="true">
-                      <a id="wizard_advanced-t-2" href="#wizard_advanced-h-2" aria-controls="wizard_advanced-p-2">
+                      <a id="wizard_advanced-t-2" aria-controls="wizard_advanced-p-2" style="cursor: default">
                         <span class="number">3</span>
                         <span class="title">Terms of Use</span>
                       </a>
                     </li>
                     <li role="tab" class=" {{ (currentStep < 4) ? 'disabled' : '' }} {{ (currentStep == 4) ? 'current' : '' }}" aria-disabled="true">
-                      <a id="wizard_advanced-t-3" href="#wizard_advanced-h-3" aria-controls="wizard_advanced-p-2">
+                      <a id="wizard_advanced-t-3" aria-controls="wizard_advanced-p-2" style="cursor: default">
                         <span class="number">4</span>
                         <span class="title">Finish</span>
                       </a>

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);
+  }
+
 
 }