test

angular.json

@@ -27,8 +27,12 @@
             ],
             "scripts": [
               "node_modules/jquery/dist/jquery.min.js",
+              "node_modules/jquery-bez/lib/jquery.bez.js",
               "node_modules/uikit/dist/js/uikit.min.js",
-              "node_modules/uikit/dist/js/uikit-icons.min.js"
+              "node_modules/uikit/dist/js/uikit-icons.min.js",
+              "src/assets/js/altair_admin_common.min.js",
+              "src/assets/js/common.min.js",
+              "src/assets/js/pages/forms_wizard.js"
             ]
           },
           "configurations": {
@@ -48,6 +52,23 @@
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true
+            },
+            "beta": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.beta.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
             }
           }
         },

package.json

@@ -21,10 +21,14 @@
     "@angular/platform-browser": "^6.0.3",
     "@angular/platform-browser-dynamic": "^6.0.3",
     "@angular/router": "^6.0.3",
+    "altair": "^1.0.0",
     "angular2-cookie-law": "^6.0.4",
     "bootstrap": "^4.1.3",
     "core-js": "^2.5.4",
-    "jquery": "^3.3.1",
+    "highcharts": "^7.2.1",
+    "highcharts-angular": "^2.4.0",
+    "jquery": "^3.4.1",
+    "jquery-bez": "^1.0.11",
     "ngx-bootstrap": "^3.0.1",
     "ngx-matomo": "^0.1.2",
     "rxjs": "6.3.3",

src/app/app-routing.module.ts

@@ -1,25 +1,55 @@
 import { RouterModule, Routes } from '@angular/router';
 import { NgModule } from '@angular/core';
-import { LandingComponent } from './pages/landing/landing.component';
+import { HomeComponent } from './pages/landing/home/home.component';
 import { AuthGuardService } from './services/auth-guard.service';
-import { DashboardComponent } from './pages/dashboard/dashboard.component';
 import { ForbiddenPageComponent } from './shared/reusablecomponents/403-forbidden-page.component';
+import { EmptyPageComponent } from "./pages/emptypage/empty-page.component";
+import { JoinComponent } from "./pages/join/join.component";
+import { AboutComponent } from "./pages/landing/about/about.component";
 
 const appRoutes: Routes = [
   {
     path: '',
-    redirectTo: '/landing',
+    redirectTo: '/home',
     pathMatch: 'full'
   },
   {
-    path: 'landing',
+    path: 'home',
-    component: LandingComponent
+    component: HomeComponent
   },
   {
-    path: 'dashboard',
+    path: 'about',
-    component: DashboardComponent,
+    component: AboutComponent
+  },
+  {
+    path: 'join',
+    component: JoinComponent,
     canActivate: [AuthGuardService]
   },
+  {
+    path: 'emptyPage',
+    component: EmptyPageComponent,
+    canActivate: [AuthGuardService]
+  },
+  {
+    path: 'repository',
+    loadChildren: './pages/repository/repository.module#RepositoryModule',
+    // loadChildren: () => import('./pages/repository/repository.module').then(m => m.RepositoryModule),
+    canActivate: [AuthGuardService]
+  },
+  {
+    path: 'repositoryAdmin',
+    loadChildren: './pages/repository/repository.module#RepositoryModule',
+    // loadChildren: () => import('./pages/repository/repository.module').then(m => m.RepositoryModule),
+    canActivate: [AuthGuardService]
+  },
+
+
+  // {
+  //   path: 'dashboard',
+  //   component: DashboardComponent,
+  //   canActivate: [AuthGuardService]
+  // },
   {
     path: 'sources',
     loadChildren: './pages/sources/sources.module#SourcesModule',
@@ -34,11 +64,11 @@ const appRoutes: Routes = [
     loadChildren: './pages/content/content.module#ContentModule',
     canActivate: [AuthGuardService]
   },
-  {
+  // {
-    path: 'getImpact',
+  //   path: 'getImpact',
-    loadChildren: './pages/metrics/metrics.module#MetricsModule',
+  //   loadChildren: './pages/metrics/metrics.module#MetricsModule',
-    canActivate: [AuthGuardService]
+  //   canActivate: [AuthGuardService]
-  },
+  // },
   {
     path: 'admin',
     loadChildren: './pages/adminPg/adminPg.module#AdminPgModule',
@@ -47,9 +77,16 @@ const appRoutes: Routes = [
     path: '403-forbidden',
     component: ForbiddenPageComponent
   },
+  // {
+  //   path: '',
+  //   redirectTo: '/home',
+  //   pathMatch: 'full'
+  // },
   {
+    //fixme redirect to 404
     path: '**',
-    redirectTo: '/landing'
+    redirectTo: '/403-forbidden',
+    // component: ForbiddenPageComponent
   }
 ];
 

src/app/app.component.html

@@ -1,15 +1,39 @@
-<div class="uk-offcanvas-content">
+<div *ngIf="!isLandingRoute() ; else landing" class="sidebar_main_swipe" [class.sidebar_main_active]="open">
-  <top-menu></top-menu>
+  <!--<div *ngIf="!isHomeRoute() ; else home" class="sidebar_main_open sidebar_main_swipe uk-height-1-1">-->
+  <top-menu-dashboard></top-menu-dashboard>
+  <side-menu></side-menu>
+  <div id="hide_controls">
+    <div id="toggle" [class.sidebar_main_open]="open" (click)="toggleOpen($event)">
+      <i class="material-icons">play_circle_filled</i>
+      <span *ngIf="open" class="uk-margin-small-left">Hide Controls</span>
+    </div>
+  </div>
+  <router-outlet></router-outlet>
+</div>
+
+<ng-template #landing>
+  <top-menu-landing></top-menu-landing>
   <router-outlet></router-outlet>
   <footer></footer>
-  <cookie-law position="bottom">
+</ng-template>
-    OpenAIRE uses cookies in order to function properly.<br>
+
-    Cookies are small pieces of data that websites store in your browser to allow us to give you the best browsing experience possible.
+
-    By using the OpenAIRE portal you accept our use of cookies. <a href="http://ec.europa.eu/ipg/basics/legal/cookies/index_en.htm" target="_blank"> Read more <span class="uk-icon">
+
-    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg>
+
-    </span></a>
+<!--<div class="uk-offcanvas-content">-->
-  </cookie-law>
+  <!--<top-menu></top-menu>-->
-</div>
+  <!--<router-outlet></router-outlet>-->
+  <!--<footer></footer>-->
+  <!--<cookie-law position="bottom">-->
+    <!--OpenAIRE uses cookies in order to function properly.<br>-->
+    <!--Cookies are small pieces of data that websites store in your browser to allow us to give you the best browsing experience possible.-->
+    <!--By using the OpenAIRE portal you accept our use of cookies. <a href="http://ec.europa.eu/ipg/basics/legal/cookies/index_en.htm" target="_blank"> Read more <span class="uk-icon">-->
+    <!--<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg>-->
+    <!--</span></a>-->
+  <!--</cookie-law>-->
+<!--</div>-->
+
+
 <!-- Matomo -->
 <!--<script type="text/javascript">
   var _paq = _paq || [];
@@ -24,3 +48,28 @@
   })();
 </script>-->
 <!-- End Matomo Code -->
+
+
+<!--&lt;!&ndash; Terms of Use (modal) &ndash;&gt;-->
+<!--<confirmation-dialog #subscribeToTermsModal [title]=modalTitle [isModalShown]=isModalShown-->
+<!--                     [confirmActionButton]=modalButton (emitObject)="updateTerms()">-->
+<!--  <form class="" [formGroup]="agreementForm">-->
+<!--    <div formArrayName="terms">-->
+<!--      <table class="table">-->
+<!--        <tr class="uk-text-nowrap">Do you agree with the <a href="https://zenodo.org/record/1446384#.XiGIAdmxU5n" target="_blank">terms of use</a>?</tr>-->
+<!--        <tbody>-->
+<!--        <tr class="el-item" *ngFor="let term of terms.controls; let i=index">-->
+<!--&lt;!&ndash;          {{term.get('accept').value}}&ndash;&gt;-->
+<!--          <br> {{term.get('name').value}} <br>-->
+<!--          <div [formGroupName]="i">-->
+<!--            <label>-->
+<!--              <input id="i" type="checkbox" formControlName="accept"> Yes, I agree to the terms of use.-->
+<!--            </label>-->
+<!--          </div>-->
+<!--        </tr>-->
+<!--        </tbody>-->
+<!--      </table>-->
+<!--    </div>-->
+<!--  </form>-->
+<!--  &lt;!&ndash;    <pre>{{this.agreementForm.value | json}}</pre>&ndash;&gt;-->
+<!--</confirmation-dialog>-->

src/app/app.component.ts

@@ -1,19 +1,43 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import { NavigationEnd, Router, RoutesRecognized } from '@angular/router';
 import { AuthenticationService } from './services/authentication.service';
 import { environment } from '../environments/environment';
 import { MatomoInjector, MatomoTracker } from 'ngx-matomo';
+import { ConfirmationDialogComponent } from './shared/reusablecomponents/confirmation-dialog.component';
+import { RepositoryService } from './services/repository.service';
+import { RepositorySnippet } from './domain/typeScriptClasses';
+import {FormBuilder, FormGroup, FormControl, FormArray} from '@angular/forms';
+import {element} from 'protractor';
+import {timestamp} from 'rxjs/operators';
 
 @Component({
   selector: 'oa-repo-manager',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent implements OnInit {
+  reposOfUser: RepositorySnippet[] = [];
+  modalTitle = 'Terms of Use';
+  isModalShown: boolean;
+  modalButton = 'OK';
+
+  agreementForm = this.fb.group({
+    terms: this.fb.array([])
+  });
+
+  consentTermsOfUseDate: Date;
+
+  @ViewChild('subscribeToTermsModal')
+  public subscribeToTermsModal: ConfirmationDialogComponent;
+
+  open: boolean = true;
+
   constructor(private router: Router,
               private authService: AuthenticationService,
               private matomoInjector: MatomoInjector,
-              private matomoTracker: MatomoTracker) {
+              private matomoTracker: MatomoTracker,
+              private repositoryService: RepositoryService,
+              private fb: FormBuilder) {
 
     console.log('21-06-2019. Fixed matomo to log userIds?');
 
@@ -47,6 +71,39 @@ export class AppComponent implements OnInit {
     this.authService.tryLogin();
   }
 
+  getReposOfUser(): void {
+    this.repositoryService.getRepositoriesOfUser()
+      .subscribe(
+        repos => { this.reposOfUser = repos; },
+        error => { console.log(error); },
+        () => {
+          console.log(this.reposOfUser);
+          this.reposOfUser.forEach( repo => {
+            // TODO: change !repo.consentTermsOfUse check when it gets a non-null value
+            if (this.authService.isLoggedIn && !repo.consentTermsOfUse) {
+              this.addTerm(repo.officialname, repo.id, repo.consentTermsOfUse);
+              this.isModalShown = true;
+            }
+          });
+        }
+      );
+  }
+
+  updateTerms() {
+    /*   update consentTermsOfUse, consentTermsOfUseDate(?)
+         depending on  what value will consentTermsOfUse hold
+         Also what type of consentTermsOfUse will be? boolean or string */
+    for (let i = 0; i < this.terms.length; i++) {
+      const  id = this.terms.controls[i].get('id').value;
+      if (this.terms.controls[i].get('accept').value === true) {
+        console.log(`Agreed to the Terms of Use for: `, id);
+      }
+    }
+    this.consentTermsOfUseDate = new Date(Date.now());
+    console.log(this.consentTermsOfUseDate);
+    console.log('will POST when backend is ready');
+  }
+
   ngOnInit() {
     this.router.events.subscribe((evt) => {
       if (!(evt instanceof NavigationEnd)) {
@@ -57,6 +114,72 @@ export class AppComponent implements OnInit {
       }
       window.scrollTo(0, 0);
     });
+
+    // this.getReposOfUser();
+
   }
 
+  addTerm(name: string, id: string, consent: string) {
+    this.terms.push(this.newTerm(name, id, consent));
+  }
+
+  newTerm(name: string, id: string, consent: string): FormGroup {
+    return this.fb.group({
+      id: [id],
+      name: [name],
+      accept: [(consent ? consent : true)]
+    });
+  }
+
+  get terms() {
+    return this.agreementForm.get('terms') as FormArray;
+  }
+
+  isLandingRoute() {
+    // console.log('Is home route? Route is: ' + this.router.url);
+    return (this.router.url === '/') || (this.router.url === '/home') || (this.router.url === '/about');
+  }
+
+  public toggleOpen(event: MouseEvent) {
+    event.preventDefault();
+    this.open = !this.open;
+  }
+
+  // ngAfterContentInit() {
+  //
+  //   // this.loadScript('assets/js/common.js');
+  //   // this.loadScript('assets/js/uikit_custom.js');
+  //   // this.loadScript('assets/js/altair_admin_common.js');
+  //   this.loadScript('assets/js/altair_admin_common.min.js');
+  //
+  //   // setTimeout( () => {
+  //   //   // this.loadScript('assets/js/common.js');
+  //   //   // this.loadScript('assets/js/uikit_custom.js');
+  //   //   this.loadScript('assets/js/altair_admin_common.min.js');
+  //   // }, 2000);
+  //
+  //   // $.getScript('assets/js/altair_admin_common.min.js');
+  //
+  //
+  //
+  //   // // Load the script
+  //   // // var self = this;
+  //   //
+  //   // var script = <HTMLScriptElement>document.createElement("SCRIPT");
+  //   // script.src = 'assets/js/altair_admin_common.min.js';
+  //   // script.type = 'text/javascript';
+  //   // // self.script = <HTMLScriptElement>document.createElement("SCRIPT");
+  //   // // self.script.src = '../Content/js/settings.js';
+  //   // // self.script.type = 'text/javascript';
+  //   // document.getElementsByTagName("head")[0].appendChild(script);
+  // }
+  //
+  // public loadScript(url) {
+  //   console.log('preparing to load...')
+  //   let node = document.createElement('script');
+  //   node.src = url;
+  //   node.type = 'text/javascript';
+  //   document.getElementsByTagName('head')[0].appendChild(node);
+  // }
+
 }

src/app/app.module.ts

@@ -17,16 +17,22 @@ import { UsagestatsService } from './services/usagestats.service';
 import { StatisticsService } from './services/statistics.service';
 import { AuthGuardService } from './services/auth-guard.service';
 import { AuthenticationService } from './services/authentication.service';
-import { LandingComponent } from './pages/landing/landing.component';
+import { HomeComponent } from './pages/landing/home/home.component';
-import { DashboardComponent } from './pages/dashboard/dashboard.component';
 import { MatomoModule } from 'ngx-matomo';
+import { DashboardService } from "./services/dashboard.service";
+import { EmptyPageComponent } from "./pages/emptypage/empty-page.component";
+import { SharedService } from "./services/shared.service";
+import { JoinComponent } from "./pages/join/join.component";
+import { AboutComponent } from "./pages/landing/about/about.component";
 
 
 @NgModule({
   declarations: [
     AppComponent,
-    LandingComponent,
+    HomeComponent,
-    DashboardComponent
+    AboutComponent,
+    EmptyPageComponent,
+    JoinComponent
   ],
   imports: [
     BrowserModule,
@@ -49,11 +55,13 @@ import { MatomoModule } from 'ngx-matomo';
     MonitorService,
     PiwikService,
     RepositoryService,
+    DashboardService,
     ValidatorService,
     UsagestatsService,
     StatisticsService,
     AuthGuardService,
-    AuthenticationService
+    AuthenticationService,
+    SharedService
   ],
   bootstrap: [AppComponent]
 })

src/app/domain/oa-description.ts

@@ -184,3 +184,10 @@ export const compatibilityLevelDesc = {
   mandatory: true,
   recommended: false
 };
+
+export const commentDesc = {
+  desc: 'Add your comments regarding the interface.',
+  label: 'Comments',
+  mandatory: false,
+  recommended: false
+};

src/app/domain/shared-messages.ts

@@ -88,10 +88,12 @@ errorRegisterRepo = errorRegisterRepo + 'We\'re sorry for the inconvenience.';
 export const formErrorRegisterRepo = errorRegisterRepo;
 export const formSuccessUpdatedRepo = 'The datasource was updated successfully.';
 export const formSuccessRegisteredDatasource = 'The datasource was registered successfully';
-export const formSuccessAddedInterface = 'The interface was added successfully.';
+// export const formSuccessAddedInterface = 'The interface was added successfully.';
-export const formSuccessUpdatedInterface = 'The interface was updated successfully.';
+// export const formSuccessUpdatedInterface = 'The interface was updated successfully.';
+export const formSuccessAddedInterface = 'The harvesting settings are valid!';
+export const formSuccessUpdatedInterface = 'The harvesting settings are valid!';
 
 /* BaseUrl validation Messages */
 export const didntChooseBaseUrl = 'You need to select a base URL';
-export const invalidCustomBaseUrl = 'The url is not responding or is not a valid OAI-PMH url. Please, make sure that you are using the correct protocol ("http" or "https"), as the service is currently unable to follow url redirects.';
+export const invalidCustomBaseUrl = 'The base URL could not be confirmed. Μake sure that you are using the correct protocol ("http" or "https"), as the service is currently unable to follow url redirects. If the warning persists, leave us a note in the comments section. We will check your interface and contact you if there are any problems.';
 export const identifyingUrl = 'Identifying Url ...';

src/app/domain/typeScriptClasses.ts

@@ -151,6 +151,9 @@ export class Repository extends DriverResource implements IsSerializable {
   registrationDate: Date;
   verified: boolean;
   dataCollectionTypes: DataCollectionType[];
+  consentTermsOfUse: string;
+  consentTermsOfUseDate: Date;
+  fullTextDownload: string;
 }
 
 export class RepositorySnippet {
@@ -381,11 +384,13 @@ export class ConditionParams implements IsSerializable {
     otherValue: string;
 }
 
-export class Dataset implements IsSerializable {
+export class OaBrokerRelatedDataset implements IsSerializable {
-    titles: string[];
+    openaireId: string;
-    collectedFrom: string[];
+    originalId: string;
-    pids: Pid[];
+    title: string;
-    instances: Instance[];
+    collectedFrom: string;
+    pids: OaBrokerTypedValue[];
+    instances: OaBrokerInstance[];
 }
 
 export class DatasourcesBroker implements IsSerializable {
@@ -394,30 +399,37 @@ export class DatasourcesBroker implements IsSerializable {
     datasourcesOfOthers: Tuple<BrowseEntry, string>[];
 }
 
+export class OaBrokerRelatedDatasource implements IsSerializable {
+  openaireId: string;
+  name: string;
+  type: string;
+  relType: string;
+}
+
 export class EventsPage implements IsSerializable {
     datasource: string;
     topic: string;
     currPage: number;
     totalPages: number;
     total: number;
-    values: OpenAireEventPayload[];
+    values: OaBrokerEventPayload[];
 }
 
-export class ExternalReference implements IsSerializable {
+export class OaBrokerExternalReference implements IsSerializable {
     url: string;
     sitename: string;
     type: string;
     refidentifier: string;
 }
 
-export class Instance implements IsSerializable {
+export class OaBrokerInstance implements IsSerializable {
     url: string;
     license: string;
     hostedby: string;
     instancetype: string;
 }
 
-export class Journal implements IsSerializable {
+export class OaBrokerJournal implements IsSerializable {
     name: string;
     issn: string;
     eissn: string;
@@ -431,13 +443,18 @@ export class MapConditions implements IsSerializable {
     listParams: ConditionParams[];
 }
 
-export class OpenAireEventPayload implements IsSerializable {
+export class OaBrokerEventPayload implements IsSerializable {
-    publication: Publication;
+    result: OaBrokerMainEntity; // old publication: Publication; ??
-    highlight: Publication;
+    highlight: OaBrokerMainEntity;
-    provenance: Provenance;
+    provenance: OaBrokerProvenance;
     trust: number;
 }
 
+export class OaBrokerAuthor implements IsSerializable {
+  fullname: string;
+  orcid: string;
+}
+
 export class OpenaireSubscription implements IsSerializable {
     subscriber: string;
     frequency: NotificationFrequency;
@@ -445,12 +462,13 @@ export class OpenaireSubscription implements IsSerializable {
     query: AdvQueryObject;
 }
 
-export class Pid implements IsSerializable {
+export class OaBrokerTypedValue implements IsSerializable {
     value: string;
     type: string;
 }
 
-export class Project implements IsSerializable {
+export class OaBrokerProject implements IsSerializable {
+    openaireId: string;
     code: string;
     acronym: string;
     title: string;
@@ -459,32 +477,45 @@ export class Project implements IsSerializable {
     jurisdiction: string;
 }
 
-export class Provenance implements IsSerializable {
+export class OaBrokerProvenance implements IsSerializable {
     repositoryName: string;
+    repositoryType: string;
     url: string;
     id: string;
 }
 
-export class Publication implements IsSerializable {
+export class OaBrokerRelatedPublication implements IsSerializable {
+  openaireId: string;
+  originalId: string;
+  title: string;
+  collectedFrom: string;
+  pids: OaBrokerTypedValue[];
+  instances: OaBrokerInstance[];
+  relType: string;
+}
+
+export class OaBrokerMainEntity implements IsSerializable {
+    openaireId: string;
     originalId: string;
+    typology: string;
     titles: string[];
     abstracts: string[];
     language: string;
-    subjects: string[];
+    subjects: OaBrokerTypedValue[];
-    creators: string[];
+    creators: OaBrokerAuthor[];
     publicationdate: string;
     publisher: string;
     embargoenddate: string;
     contributor: string[];
-    journal: Journal;
+    journal: OaBrokerJournal;
-    collectedFrom: string[];
+    pids: OaBrokerTypedValue[];
-    pids: Pid[];
+    instances: OaBrokerInstance[];
-    instances: Instance[];
+    externalReferences: OaBrokerExternalReference[];
-    externalReferences: ExternalReference[];
+    publications: OaBrokerRelatedPublication[];
-    publications: Publication[];
+    projects: OaBrokerProject[];
-    projects: Project[];
+    datasets: OaBrokerRelatedDataset[];
-    datasets: Dataset[];
+    softwares: OaBrokerRelatedSoftware[];
-    softwares: Software[];
+    datasources: OaBrokerRelatedDatasource[];
 }
 
 export class Range implements IsSerializable {
@@ -501,7 +532,8 @@ export class SimpleSubscriptionDesc implements IsSerializable {
     lastNotificationDate: Date;
 }
 
-export class Software implements IsSerializable {
+export class OaBrokerRelatedSoftware implements IsSerializable {
+  openaireId: string;
   name: string;
   description: string;
   landingPage: string;
@@ -668,3 +700,18 @@ export class RepositorySummaryInfo {
   totalViews: string;
   totalDownloads: string;
 }
+
+export class UsageSummary {
+  metricsInfo: MetricsInfo;
+  piwikInfo: PiwikInfo;
+}
+
+export class BrokerSummary {
+  userSubs: Map<string, SimpleSubscriptionDesc[]>;
+  topicsForDatasource: BrowseEntry[];
+}
+
+export class CollectionMonitorSummary {
+  aggregationDetails: AggregationDetails[];
+  lastIndexedVersion: AggregationDetails;
+}

src/app/pages/adminPg/adminPg-metrics.component.html

@@ -1,14 +1,42 @@
-<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
+<div id="page_content">
-  <div class="uk-width-1-1@m uk-first-column">
 
-    <h1 class="uk-h2">Metrics Admin</h1>
+  <div class="repositoryAdminMenu">
 
-    <!-- TOP HELP CONTENT -->
+    <div class="uk-margin-medium-left uk-margin-medium-right">
-    <help-content #topHelperContent [position]="'top'"
+      <div class="uk-padding-small">
-                  [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
+        <h3 class="heading_b">
-    </help-content>
+          Metrics Admin
+        </h3>
+      </div>
+
+      <div id="top_bar">
+        <div class="md-top-bar">
+          <div class="uk-width-1-2@l uk-margin-auto">
+            <form [formGroup]="dataForm" (ngSubmit)="handleChangeAndResetPage()" class="uk-search uk-search-default uk-width-1-1@m">
+              <div class="md-input-wrapper">
+                <label for="repository_name_search">Search...</label>
+                <input class="md-input" type="search" id="repository_name_search" formControlName="searchField">
+                <span class="md-input-bar"></span>
+              </div>
+
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <div id="page_content_inner" class="whiteBackground uk-padding-remove-left uk-padding-remove-right">
+
+    <div class="uk-section uk-background-norepeat uk-background-cover uk-background-top-center"
+         style="background-image: url('../../../assets/imgs/landing/abstract2.svg'); !important; min-height: calc(80vh);" uk-height-viewport="offset-top: true; offset-bottom: 20;">
+
+      <!-- TOP HELP CONTENT -->
+      <help-content #topHelperContent [position]="'top'"
+                    [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
+      </help-content>
 
-    <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
       <div class="uk-grid">
 
         <!-- LEFT HELP CONTENT -->
@@ -22,29 +50,19 @@
           <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>
           <div *ngIf="successMessage" class="uk-alert uk-alert-success">{{ successMessage }}</div>
 
+          <div *ngIf="!errorMessage" class="uk-container">
 
-          <div class="uk-grid">
+            <div class="">
-            <div class="uk-width-1-1@m uk-padding" style="background-color: #fff; text-align: center">
+              <div class="">
-              <form [formGroup]="dataForm" class="uk-search uk-search-default uk-width-1-1@m">
-                <input class="uk-width-1-2 uk-search-input" type="search" formControlName="searchField" placeholder="Search..." style="background-color: #fff">
-                <button class="uk-button" (click)="handleChangeAndResetPage()">Search</button>
-                <div class="uk-position-right">
-                  <button class="uk-button uk-button-primary" (click)="downloadCSV()">Export to CSV</button>
-                </div>
-              </form>
-            </div>
-          </div>
 
-          <div class="uk-grid">
+                <div class="uk-margin-medium uk-margin-top repositoryAdminActions">
-            <div class="uk-width-expand@m">
-              <div class="uk-grid">
-                <div class="uk-width-1-1@m uk-margin-medium">
-                  <form [formGroup]="dataForm" class="uk-form-horizontal uk-grid">
 
-                    <div class="uk-width-2-5@m">
+                  <form [formGroup]="dataForm" class="uk-form-horizontal uk-flex">
-                      <div class="uk-margin">
+
-                        <label class="uk-form-label uk-text-right" for="quantity">Items per page: </label>
+                    <div class="uk-margin-right">
-                        <div class="uk-form-controls">
+                      <div class="">
+                        <label class="" for="quantity">Results per page </label>
+                        <div class="uk-inline">
                           <select class="uk-select" id="quantity" (change)="handleChangeAndResetPage()" formControlName="quantity">
                             <option value="10">10</option>
                             <option value="25" selected>25</option>
@@ -55,85 +73,108 @@
                       </div>
                     </div>
 
-                    <div class="uk-width-expand@m ">
+                    <div class="uk-margin-right">
 
-                      <div class="uk-float-right">
+                      <div class="uk-inline uk-margin-right">
-                        <label class="uk-form-label uk-text-right" for="orderBy">Order by: </label>
+                        <label class="" for="orderBy">Order by </label>
-                        <div class="uk-form-controls">
+                        <div class="uk-inline">
                           <select class="uk-select" id="orderBy" (change)="handleChangeAndResetPage()" formControlName="order">
-                            <option value="DSC">Descending</option>
+                            <option value="DSC" selected>Descending</option>
-                            <option value="ASC" selected>Ascending</option>
+                            <option value="ASC">Ascending</option>
                           </select>
                         </div>
                       </div>
 
-                      <div class="uk-float-right">
+                      <div class="uk-inline">
-                        <label class="uk-form-label uk-text-right" for="sortBy">Sort by: </label>
+                        <label class="" for="orderField">Sort by </label>
-                        <div class="uk-form-controls">
+                        <div class="uk-inline">
-                          <select class="uk-select" id="sortBy" (change)="handleChangeAndResetPage()" formControlName="orderField">
+                          <select class="uk-select" id="orderField" (change)="handleChangeAndResetPage()" formControlName="orderField">
-                            <option value="CREATION_DATE" >Date</option>
+                            <option value="CREATION_DATE" selected>Date</option>
-                            <option value="REPOSITORY_NAME" selected>Name</option>
+                            <option value="REPOSITORY_NAME">Name</option>
                           </select>
                         </div>
                       </div>
 
                     </div>
 
+                    <div class="" style="margin-left:auto; margin-right:0;">
+                      <button class="uk-button uk-button-link" (click)="downloadCSV()">
+                        <i class="fas fa-download uk-margin-small-right"></i>Export to CSV
+                      </button>
+                    </div>
+
                   </form>
+
+
                 </div>
 
                 <div class="uk-width-1-1@m">
 
+                  <div style="display: flex;justify-content: space-between;">
+
+                    <div *ngIf="piwiks" class="resultsInfo" style="margin-top: auto;">
+                      <span class="number">{{piwiks.total}}</span> RESULTS, PAGE <span class="number">{{(dataForm.get('page').value)*1 + 1}}</span> OF <span class="number">{{pages.length}}</span>
+                    </div>
+
+                    <div class="uk-inline">
+                      <ul class="uk-pagination" uk-margin>
+                        <li><a (click)="previousPage()" class="pagination_arrow"><span uk-pagination-previous></span></a></li>
+                        <li [ngClass]="{'uk-active': (this.dataForm.get('page').value == page) }" *ngFor="let page of pages">
+                          <a (click)="selectPage(page)">{{page+1}}</a>
+                        </li>
+                        <li><a (click)="nextPage()" class="pagination_arrow"><span uk-pagination-next></span></a></li>
+                      </ul>
+                    </div>
+
+                  </div>
+
+
+                  <hr class="adminResultsHeader">
+
                   <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="whiteFilm"></div>
+                    <div class="transparentFilm"></div>
                   </div>
 
-                  <!-- TABLE -->
-                  <div *ngIf="piwiks && piwiks.results.length>0">
-                    <table class="uk-table uk-table-striped uk-table-middle" style="font-size: 12px;">
-                      <thead>
-                      <tr>
-                        <th class="uk-text-nowrap">Repository</th>
-                        <th class="uk-text-nowrap">Piwik site</th>
-                        <th class="uk-text-nowrap">Requested on</th>
-                        <th class="uk-text-nowrap">Requestor</th>
-                        <th class="uk-text-nowrap">Validated</th>
-                        <th class="uk-text-nowrap">Actions</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr class="el-item" *ngFor="let piwik of piwiks.results">
-                        <td class="uk-table-shrink uk-text-truncate" style="min-width: 400px;">
-                          {{ piwik.repositoryName }}<br>
-                          <a class="viewDetails" [routerLink]="['/getImpact/show_metrics/', piwik.repositoryId]">(ID: {{ piwik.repositoryId }})</a>
-                        </td>
-                        <td class="uk-table-shrink">ID: {{ piwik.siteId }}<br>Authentication Token: {{ piwik.authenticationToken }}</td>
-                        <td class="uk-text-nowrap uk-table-shrink">{{ piwik.creationDate | date : "yyyy-MM-dd" }}</td>
-                        <td class="uk-text-nowrap uk-table-shrink">{{ piwik.requestorName }}<br>{{ piwik.requestorEmail }}</td>
-                        <td class="uk-text-nowrap uk-table-shrink">
-                          <span *ngIf="piwik.validated">YES<br>on {{ piwik.validationDate | date : "yyyy-MM-dd" }}</span>
-                          <span *ngIf="!piwik.validated">NO</span>
-                        </td>
-                        <td class="uk-text-nowrap uk-table-shrink">
-                          <button id="{{ piwik.repositoryId }}"
-                                  *ngIf="!piwik.validated"
-                                  class="uk-button uk-button-primary validate"
-                                  (click)="confirmApproval(piwik.repositoryId)">Validate</button>
-                        </td>
-                      </tr>
-                      </tbody>
-                    </table>
-                  </div>
 
-                  <ul class="uk-pagination uk-flex-center" uk-margin>
+                  <!-- REPOSITORY CARD -->
-                    <li><a (click)="previousPage()"><span uk-pagination-previous></span></a></li>
+                  <ng-container *ngIf="piwiks && piwiks.results.length>0">
-<!--                    <li class="uk-active"><span>{{+dataForm.get('page').value + 1}}</span></li>-->
+                    <div *ngFor="let piwik of piwiks.results" class="md-card repositoryCard">
+                      <div class="md-card-content large-padding">
+                        <div class="uk-text-meta">
+                          Requested on: {{ piwik.creationDate | date : "yyyy-MM-dd" }}
+                          <ng-container *ngIf="piwik.validated">
+                            . Validated on: {{ piwik.validationDate | date : "yyyy-MM-dd" }}
+                          </ng-container>
+                        </div>
+                        <div>
+                          <div class="repositoryCardHeader uk-margin-bottom uk-margin-small-top uk-inline">
+                            <a *ngIf="piwik.validated" [routerLink]="['/repositoryAdmin/' + piwik.repositoryId + '/getImpact/show']">{{ piwik.repositoryName }}</a>
+                            <a *ngIf="!piwik.validated" [routerLink]="['/repositoryAdmin/' + piwik.repositoryId + '/getImpact/instructions']">{{ piwik.repositoryName }}</a>
+                          </div>
+                          <ng-container *ngIf="!piwik.validated">
+                            <button class="uk-button uk-button-primary validate uk-inline uk-float-right" (click)="confirmApproval(piwik.repositoryId)">Validate</button>
+                          </ng-container>
+                        </div>
+
+                        <div class="uk-margin-small-bottom"><span class="uk-badge uk-badge-primary uk-badge-notification uk-margin-small-right">ID</span>{{ piwik.repositoryId }}</div>
+                        <div class="uk-margin-small-bottom"><span class="mute-title">Requestor: </span><span class="small-content">{{ piwik.requestorName }} - {{ piwik.requestorEmail }}</span></div>
+                        <div class="uk-margin-small-bottom"><span class="mute-title">Matomo ID: </span><span class="small-content">{{ piwik.siteId }}</span></div>
+                        <div class=""><span class="mute-title">Authentication Token: </span><span class="small-content">{{ piwik.authenticationToken }}</span></div>
+                      </div>
+                    </div>
+                  </ng-container>
+
+
+                  <ul class="uk-pagination uk-margin-top uk-flex-right" uk-margin>
+                    <li><a (click)="previousPage()" class="pagination_arrow"><span uk-pagination-previous></span></a></li>
                     <li [ngClass]="{'uk-active': (this.dataForm.get('page').value == page) }" *ngFor="let page of pages">
-                      <a (click)="selectPage(page)">{{page+1}}</a> </li>
+                      <a (click)="selectPage(page)">{{page+1}}</a>
-                    <li><a (click)="nextPage()"><span uk-pagination-next></span></a></li>
+                    </li>
+                    <li><a (click)="nextPage()" class="pagination_arrow"><span uk-pagination-next></span></a></li>
                   </ul>
 
                 </div>
@@ -150,19 +191,18 @@
         </aside-help-content>
 
       </div>
+
+      <!-- BOTTOM HELP CONTENT -->
+      <help-content #bottomHelperContent [position]="'bottom'"
+                    [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
+      </help-content>
+
     </div>
 
 
-    <!-- BOTTOM HELP CONTENT -->
-    <help-content #bottomHelperContent [position]="'bottom'"
-                  [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
-    </help-content>
-
-
   </div>
 </div>
 
-
 <confirmation-dialog #confirmApprovalModal [title]="modalTitle" [isModalShown]="isModalShown"
                      [confirmActionButton]="modalButton" (emitObject)="confirmedApproval($event)">
   Are you sure you want to validate the selected piwik site(s)?

src/app/pages/adminPg/adminPg-registrations.component.html

@@ -1,14 +1,42 @@
-<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
+<div id="page_content">
-  <div class="uk-width-1-1@m uk-first-column">
 
-    <h1 class="uk-h2">Registrations Admin</h1>
+  <div class="repositoryAdminMenu">
 
-    <!-- TOP HELP CONTENT -->
+    <div class="uk-margin-medium-left uk-margin-medium-right">
-    <help-content #topHelperContent [position]="'top'"
+      <div class="uk-padding-small">
-                  [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
+        <h3 class="heading_b">
-    </help-content>
+          Registrations Admin
+        </h3>
+      </div>
+
+      <div id="top_bar">
+        <div class="md-top-bar">
+          <div class="uk-width-1-2@l uk-margin-auto">
+            <form [formGroup]="dataForm" (ngSubmit)="handleChangeAndResetPage()" class="uk-search uk-search-default uk-width-1-1@m">
+              <div class="md-input-wrapper">
+                <label for="repository_name_search">Search (official name) ...</label>
+                <input class="md-input" type="search" id="repository_name_search" formControlName="officialName">
+                <span class="md-input-bar"></span>
+              </div>
+
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <div id="page_content_inner" class="whiteBackground uk-padding-remove-left uk-padding-remove-right">
+
+    <div class="uk-section uk-background-norepeat uk-background-contain uk-background-bottom-center"
+         style="background-image: url('../../../assets/imgs/landing/abstract2.svg'); !important; min-height: calc(80vh);" uk-height-viewport="offset-top: true; offset-bottom: 20;">
+
+      <!-- TOP HELP CONTENT -->
+      <help-content #topHelperContent [position]="'top'"
+                    [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
+      </help-content>
 
-    <div class="uk-container uk-container-expand uk-margin-medium-top uk-margin-medium-bottom">
       <div class="uk-grid">
 
         <!-- LEFT HELP CONTENT -->
@@ -22,66 +50,18 @@
           <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>
           <div *ngIf="successMessage" class="uk-alert uk-alert-success">{{ successMessage }}</div>
 
+          <div *ngIf="!errorMessage" class="uk-container">
 
-          <div class="uk-grid">
+            <div class="">
-            <div class="uk-width-1-1@m uk-padding" style="background-color: #fff; text-align: center">
+              <div class="">
-              <form [formGroup]="dataForm" class="uk-search uk-search-default uk-width-1-1@m">
-                <input class="uk-width-1-2 uk-search-input" type="search" formControlName="officialName" placeholder="Search (official name) ..." style="background-color: #fff">
-                <button class="uk-button" (click)="handleChangeAndResetPage()">Search</button>
-              </form>
-            </div>
-          </div>
 
-          <div class="uk-grid">
+                <div class="uk-margin-medium uk-margin-top repositoryAdminActions">
-            <div class="uk-width-1-5@m">
-              <form [formGroup]="dataForm" class="uk-form-stacked">
-
-                <div class="uk-form-label uk-text-large">Filtered By</div>
-
-                <div class="uk-margin">
-                  <div class="uk-form-label uk-text-large">Datasource Type</div>
-                  <div class="uk-form-controls">
-                    <label><input class="uk-radio" type="radio" value="" (change)="handleChangeAndResetPage()" formControlName="typology"> Any</label><br>
-                    <label><input class="uk-radio" type="radio" value="Aggregator" (change)="handleChangeAndResetPage()" formControlName="typology"> Aggregator</label><br>
-                    <label><input class="uk-radio" type="radio" value="Journal" (change)="handleChangeAndResetPage()" formControlName="typology"> Journal</label><br>
-                    <label><input class="uk-radio" type="radio" value="datarepository" (change)="handleChangeAndResetPage()" formControlName="typology"> Data Repository</label><br>
-                    <label><input class="uk-radio" type="radio" value="pubsrepository" (change)="handleChangeAndResetPage()" formControlName="typology"> Public Repository</label><br>
-                    <label><input class="uk-radio" type="radio" value="entityregistry" (change)="handleChangeAndResetPage()" formControlName="typology"> Entity Registry</label><br>
-                    <label><input class="uk-radio" type="radio" value="Institutional" (change)="handleChangeAndResetPage()" formControlName="typology"> Institutional</label><br>
-                    <label><input class="uk-radio" type="radio" value="Thematic" (change)="handleChangeAndResetPage()" formControlName="typology"> Thematic</label><br>
-                    <label><input class="uk-radio" type="radio" value="Products" (change)="handleChangeAndResetPage()" formControlName="typology"> Products</label><br>
-                    <label><input class="uk-radio" type="radio" value="Unknown" (change)="handleChangeAndResetPage()" formControlName="typology"> Unknown</label>
-                  </div>
-                </div>
-
-                <div class="uk-margin">
-                  <div class="uk-form-label uk-text-large">Countries</div>
-                  <div class="uk-form-controls">
-                    <ng-container *ngIf="countries && countries.length>0">
-                      <read-more [maxHeight]="238">
-                        <div><input class="uk-radio" type="radio" value="" (change)="handleChangeAndResetPage()" formControlName="country"> Any</div>
-                        <ng-container *ngFor="let country of countries">
-                          <div class="">
-                            <input class="uk-radio" type="radio" value="{{country.code}}"
-                                   (change)="handleChangeAndResetPage()" formControlName="country"> {{country.name}}
-                          </div>
-                        </ng-container>
-                      </read-more>
-                    </ng-container>
-                  </div>
-                </div>
-
-              </form>
-            </div>
-            <div class="uk-width-expand@m">
-              <div class="uk-grid">
-                <div class="uk-width-1-1@m uk-margin-medium">
                   <form [formGroup]="dataForm" class="uk-form-horizontal uk-grid">
 
-                    <div class="uk-width-2-5@m">
+                    <div class="uk-inline">
                       <div class="uk-margin">
-                        <label class="uk-form-label uk-text-right" for="size">Items per page: </label>
+                        <label class="" for="size">Results per page </label>
-                        <div class="uk-form-controls">
+                        <div class="uk-inline">
                           <select class="uk-select" id="size" (change)="handleChangeAndResetPage()" formControlName="size">
                             <option value="10">10</option>
                             <option value="25" selected>25</option>
@@ -92,11 +72,11 @@
                       </div>
                     </div>
 
-                    <div class="uk-width-expand@m ">
+                    <div class="uk-inline">
 
-                      <div class="uk-float-right">
+                      <div class="uk-inline uk-margin-right">
-                        <label class="uk-form-label uk-text-right" for="orderBy">Order by: </label>
+                        <label class="" for="orderBy">Order by </label>
-                        <div class="uk-form-controls">
+                        <div class="uk-inline">
                           <select class="uk-select" id="orderBy" (change)="handleChangeAndResetPage()" formControlName="order">
                             <option value="DESCENDING" selected>Descending</option>
                             <option value="ASCENDING">Ascending</option>
@@ -104,9 +84,9 @@
                         </div>
                       </div>
 
-                      <div class="uk-float-right">
+                      <div class="uk-inline">
-                        <label class="uk-form-label uk-text-right" for="sortBy">Sort by: </label>
+                        <label class="" for="sortBy">Sort by </label>
-                        <div class="uk-form-controls">
+                        <div class="uk-inline">
                           <select class="uk-select" id="sortBy" (change)="handleChangeAndResetPage()" formControlName="requestSortBy">
                             <option value="registrationdate" selected>Date</option>
                             <option value="officialname">Name</option>
@@ -122,40 +102,38 @@
 
                 <div class="uk-width-1-1@m">
 
+                  <ul class="uk-pagination uk-flex-right" uk-margin>
+                    <li><a (click)="previousPage()" class="pagination_arrow"><span uk-pagination-previous></span></a></li>
+                    <li class="uk-active"><span>{{+dataForm.get('page').value + 1}}</span></li>
+                    <li><a (click)="nextPage()" class="pagination_arrow"><span uk-pagination-next></span></a></li>
+                  </ul>
+
+                  <hr class="adminResultsHeader">
+
                   <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="whiteFilm"></div>
+                    <div class="transparentFilm"></div>
                   </div>
 
-                  <!-- TABLE -->
+                  <!-- REPOSITORY CARD -->
-                  <table class="uk-table uk-table-striped">
+                  <div *ngFor="let res of repositorySnippet" class="md-card repositoryCard">
-                    <thead>
+                    <div class="md-card-content large-padding">
-                    <tr>
+                      <div class="uk-text-meta">{{res.typology.split('::')[0]}}  {{res.typology.split('::')[1]}}  {{res.typology.split('::')[2]}}</div>
-                      <th>Repository</th>
+                      <div class="repositoryCardHeader uk-margin-bottom uk-margin-small-top"><a [routerLink]="['/repositoryAdmin/' + res.id]">{{res.officialname}}</a></div>
-                      <th>Date</th>
+                      <div class="uk-margin-small-bottom"><span class="uk-badge uk-badge-primary uk-badge-notification uk-margin-small-right">ID</span>{{res.id}}</div>
-                      <th>Organization</th>
+                      <div class="uk-margin-small-bottom"><span class="uk-badge uk-badge-primary uk-badge-notification uk-margin-small-right">RM</span>{{res.registeredby}}</div>
-                      <th>Type</th>
+                      <div class="uk-margin-small-bottom"><span class="mute-title">Date: </span><span class="small-content">{{res.registrationdate}}</span></div>
-                      <th>Actions</th>
+                      <div><span class="mute-title">Organization: </span><span *ngFor="let organization of res.organizations; let i=index" class="small-content"><span *ngIf="i>0">, </span>{{organization.legalname + ' (' + getCountryName(organization.country) + ')'}}</span></div>
-                    </tr>
+                    </div>
-                    </thead>
+                  </div>
-                    <tbody>
-                    <tr *ngFor="let res of repositorySnippet">
-                      <td class="uk-width-1-6@m">{{res.officialname}} <br> ({{res.id}}) <br> {{res.registeredby}}</td>
-                      <td >{{res.registrationdate}}</td>
-                      <td> <div *ngFor="let organization of res.organizations">{{organization.legalname + ' (' + getCountryName(organization.country) + ')'}}<br></div></td>
-                      <td>{{res.typology.split('::')[0]}}<br>{{res.typology.split('::')[1]}}<br>{{res.typology.split('::')[2]}}</td>
-                      <td><a class="viewDetails" [routerLink]="['/sources/update/', res.id ]"><i class="fa fa-pencil-square-o"></i></a></td>
-                    </tr>
-                    </tbody>
-                  </table>
 
-                  <ul class="uk-pagination uk-flex-center" uk-margin>
+                  <ul class="uk-pagination uk-margin-top uk-flex-right" uk-margin>
-                    <li><a (click)="previousPage()"><span uk-pagination-previous></span></a></li>
+                    <li><a (click)="previousPage()" class="pagination_arrow"><span uk-pagination-previous></span></a></li>
                     <li class="uk-active"><span>{{+dataForm.get('page').value + 1}}</span></li>
-                    <li><a (click)="nextPage()"><span uk-pagination-next></span></a></li>
+                    <li><a (click)="nextPage()" class="pagination_arrow"><span uk-pagination-next></span></a></li>
                   </ul>
 
                 </div>
@@ -165,7 +143,76 @@
           </div>
 
         </div>
+
+        <!-- RIGHT HELP CONTENT -->
+        <aside-help-content #rightHelperContent [position]="'right'"
+                            [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+        </aside-help-content>
+
       </div>
+
+      <!-- BOTTOM HELP CONTENT -->
+      <help-content #bottomHelperContent [position]="'bottom'"
+                    [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
+      </help-content>
     </div>
+
   </div>
 </div>
+
+<div class="filter-overlay-toolbar uk-animation-scale-up ng-star-inserted">
+  <button class="uk-button filter-overlay-button" type="button" uk-toggle="target: #offcanvas-overlay">
+    <span class=""><i class="fas fa-filter"></i></span>
+  </button>
+</div>
+
+<div class="offcanvas-filters" id="offcanvas-overlay" uk-offcanvas="overlay: true">
+  <div class="uk-offcanvas-bar uk-light">
+
+    <button class="uk-offcanvas-close" type="button" uk-close></button>
+
+
+    <h4>Filters</h4>
+
+    <form [formGroup]="dataForm" class="uk-form-stacked">
+
+      <div class="uk-margin">
+        <h5 class="">Datasource Type</h5>
+        <div class="uk-form-controls">
+          <div class="uk-margin-small-bottom"><label><input class="uk-radio" type="radio" value="" (change)="handleChangeAndResetPage()" formControlName="typology"> Any</label></div>
+          <div class="uk-margin-small-bottom"><label><input class="uk-radio" type="radio" value="Aggregator" (change)="handleChangeAndResetPage()" formControlName="typology"> Aggregator</label></div>
+          <div class="uk-margin-small-bottom"><label><input class="uk-radio" type="radio" value="Journal" (change)="handleChangeAndResetPage()" formControlName="typology"> Journal</label></div>
+          <div class="uk-margin-small-bottom"><label><input class="uk-radio" type="radio" value="datarepository" (change)="handleChangeAndResetPage()" formControlName="typology"> Data Repository</label></div>
+          <div class="uk-margin-small-bottom"><label><input class="uk-radio" type="radio" value="pubsrepository" (change)="handleChangeAndResetPage()" formControlName="typology"> Public Repository</label></div>
+          <div class="uk-margin-small-bottom"><label><input class="uk-radio" type="radio" value="entityregistry" (change)="handleChangeAndResetPage()" formControlName="typology"> Entity Registry</label></div>
+          <div class="uk-margin-small-bottom"><label><input class="uk-radio" type="radio" value="Institutional" (change)="handleChangeAndResetPage()" formControlName="typology"> Institutional</label></div>
+          <div class="uk-margin-small-bottom"><label><input class="uk-radio" type="radio" value="Thematic" (change)="handleChangeAndResetPage()" formControlName="typology"> Thematic</label></div>
+          <div class="uk-margin-small-bottom"><label><input class="uk-radio" type="radio" value="Products" (change)="handleChangeAndResetPage()" formControlName="typology"> Products</label></div>
+          <div class="uk-margin-small-bottom"><label><input class="uk-radio" type="radio" value="Unknown" (change)="handleChangeAndResetPage()" formControlName="typology"> Unknown</label></div>
+        </div>
+      </div>
+
+      <hr>
+
+      <div class="uk-margin">
+        <h5 class="">Countries</h5>
+        <div class="uk-form-controls">
+          <ng-container *ngIf="countries && countries.length>0">
+            <read-more [maxHeight]="238">
+              <div class="uk-margin-small-bottom"><input class="uk-radio" type="radio" value="" (change)="handleChangeAndResetPage()" formControlName="country"> Any</div>
+              <ng-container *ngFor="let country of countries">
+                <div class="uk-margin-small-bottom">
+                  <input class="uk-radio" type="radio" value="{{country.code}}"
+                         (change)="handleChangeAndResetPage()" formControlName="country"> {{country.name}}
+                </div>
+              </ng-container>
+            </read-more>
+          </ng-container>
+        </div>
+      </div>
+
+    </form>
+
+  </div>
+</div>
+

src/app/pages/compatibility/compatibility-monitor-fullHistory-repo.component.html

@@ -1,76 +0,0 @@
-<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
-  <div class="uk-width-1-1@m uk-first-column">
-
-    <h1 class="uk-h2">Aggregation history for {{ repoName }}</h1>
-
-    <!-- TOP HELP CONTENT -->
-    <help-content #topHelperContent [position]="'top'"
-                  [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
-    </help-content>
-
-    <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
-      <div class="uk-grid">
-
-        <!-- LEFT HELP CONTENT -->
-        <aside-help-content #leftHelperContent [position]="'left'"
-                            [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-        </aside-help-content>
-
-        <!-- MIDDLE -->
-        <div class=" uk-width-expand@m">
-
-          <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ 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="whiteFilm"></div>
-          </div>
-          <div *ngIf="noAggregations">{{ noAggregations }}</div>
-          <div *ngIf="aggregationsMap && years && (years.length > 0) && !noAggregations">
-            <div *ngFor="let year of years" class="uk-width-1-1@m">
-              <ul class="uk-list uk-list-striped">
-                <h4>{{ year }}</h4>
-                <li *ngFor="let aggr of aggregationsMap[year]">
-                  <div class="uk-grid uk-child-width-1-4">
-                    <div><span *ngIf="aggr.date">{{ aggr.date | date : "yyyy-MM-dd" }}</span></div>
-                    <div><span *ngIf="aggr.aggregationStage">Aggregation stage: {{ aggr.aggregationStage }}</span></div>
-                    <div><span *ngIf="aggr.collectionMode">CollectionMode: {{ aggr.collectionMode }}</span></div>
-                    <div><span *ngIf="aggr.numberOfRecords">Number of records: {{ aggr.numberOfRecords }}</span></div>
-                    <div><span *ngIf="aggr.indexedVersion !== null">Is the indexed version: {{ (aggr.indexedVersion === true) ? 'Yes': 'No' }}</span></div>
-                  </div>
-                </li>
-              </ul>
-              <hr>
-            </div>
-          </div>
-
-          <div *ngIf="repo" class="uk-inline">
-            <div class="uk-float-right" style="z-index: 100; bottom: 30px; position: fixed; right: 30px;">
-              <button [routerLink]="['/compatibility/monitor', repo.id]"
-                      style="box-shadow: 0 1px 10px #444444"
-                      class="uk-button uk-button-primary">
-                Go back
-              </button>
-            </div>
-          </div>
-
-        </div>
-
-        <!-- RIGHT HELP CONTENT -->
-        <aside-help-content #rightHelperContent [position]="'right'"
-                            [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-        </aside-help-content>
-
-      </div>
-    </div>
-
-
-    <!-- BOTTOM HELP CONTENT -->
-    <help-content #bottomHelperContent [position]="'bottom'"
-                  [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
-    </help-content>
-
-
-  </div>
-</div>

src/app/pages/compatibility/compatibility-monitor-fullHistory-repo.component.ts

@@ -1,86 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import {AggregationDetails, Repository} from '../../domain/typeScriptClasses';
-import { RepositoryService } from '../../services/repository.service';
-import { loadingAggregationHistory, loadingAggregationHistoryError, loadingRepoError,
-         loadingRepoMessage, noAggregationHistory } from '../../domain/shared-messages';
-import { AuthenticationService } from '../../services/authentication.service';
-
-@Component ({
-  selector: 'app-compatibility-fullhistory-monitor-repo',
-  templateUrl: 'compatibility-monitor-fullHistory-repo.component.html'
-})
-
-export class CompatibilityMonitorFullHistoryRepoComponent implements OnInit {
-  loadingMessage: string;
-  errorMessage: string;
-  noAggregations: string;
-
-  repoId = '';
-  repoName = '';
-  repo: Repository;
-
-  aggregationsMap: Map<string, AggregationDetails[]> = new Map<string, AggregationDetails[]>();
-  years: string[] = [];
-
-  constructor(private route: ActivatedRoute,
-              private router: Router,
-              private repoService: RepositoryService,
-              private authService: AuthenticationService) {}
-
-  ngOnInit() {
-    this.readRepoId();
-    this.getRepo();
-  }
-
-  readRepoId() {
-    this.repoId = this.route.snapshot.paramMap.get('id');
-    this.repoName = `repository with id \'${this.repoId}\'`;
-  }
-
-  getRepo() {
-    if (this.repoId) {
-      this.loadingMessage = loadingRepoMessage;
-      this.repoService.getRepositoryById(this.repoId).subscribe(
-        repo => {
-          this.repo = repo;
-        },
-        error => {
-          console.log(error);
-          this.loadingMessage = '';
-          this.errorMessage = loadingRepoError;
-        },
-        () => {
-          this.loadingMessage = '';
-          if (this.repo) {
-            this.repoName = this.repo.officialName;
-              this.getAllAggregationHistory();
-          } else {
-            this.errorMessage = loadingRepoError;
-          }
-        }
-      );
-    }
-  }
-
-  getAllAggregationHistory() {
-    this.loadingMessage = loadingAggregationHistory;
-    this.repoService.getRepositoryAggregationsByYear(this.repo.id).subscribe(
-      aggr => this.aggregationsMap = aggr,
-      error => {
-        this.loadingMessage = '';
-        this.errorMessage = loadingAggregationHistoryError;
-      },
-      () => {
-        this.loadingMessage = '';
-        this.years = Object.keys(this.aggregationsMap);
-        if ( this.years.length === 0 ) {
-          this.noAggregations = noAggregationHistory;
-        } else {
-          this.years.sort( (a, b)  => ( a > b ? -1 : 1 ) );
-        }
-      }
-    );
-  }
-
-}

src/app/pages/compatibility/compatibility-monitor-repo.component.html

@@ -1,80 +0,0 @@
-<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
-  <div class="uk-width-1-1@m uk-first-column">
-
-    <h1 class="uk-h2">Recent aggregation history for {{ repoName }}</h1>
-
-    <!-- TOP HELP CONTENT -->
-    <help-content #topHelperContent [position]="'top'"
-                  [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
-    </help-content>
-
-    <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
-      <div class="uk-grid">
-
-        <!-- LEFT HELP CONTENT -->
-        <aside-help-content #leftHelperContent [position]="'left'"
-                            [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-        </aside-help-content>
-
-        <!-- MIDDLE -->
-        <div class=" uk-width-expand@m">
-
-          <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ 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="whiteFilm"></div>
-          </div>
-          <div *ngIf="noAggregations">{{ noAggregations }}</div>
-          <div *ngIf="latestAggregations &&
-                      (latestAggregations.length > 0) &&
-                      !noAggregations">
-            <div class="uk-width-1-1@m">
-              <div class="section md-bg-blue-grey-700">
-                <div class="uk-container uk-container-center">
-                  <div class="al_timeline">
-                    <div *ngFor="let aggr of latestAggregations" class="al_timeline_block versionChange">
-                      <div class="al_timeline_image uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up">
-                        <ng-container *ngIf="aggr.indexedVersion">
-                          <img src="https://www.openaire.eu/images/Logos/Favicon-90x90.png" style="width: 80%;margin-top: 9%;">
-                        </ng-container>
-                      </div>
-                      <div class="al_timeline_content uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-slide-left">
-                        <h3 *ngIf="aggr.date" class="uk-inline">{{ aggr.date | date : "yyyy-MM-dd" }}</h3>
-                        <span *ngIf="aggr.indexedVersion" class="ng-star-inserted uk-inline uk-float-right uk-badge"
-                              style="padding-top: 10px;padding-left: 10px;padding-right: 10px;margin-top: 5px;">Indexed version</span>
-                        <p *ngIf="aggr.aggregationStage">Aggregation stage - {{ aggr.aggregationStage }}</p>
-                        <p *ngIf="aggr.collectionMode">CollectionMode - {{ aggr.collectionMode }}</p>
-                        <p *ngIf="aggr.numberOfRecords">Number of records - {{ aggr.numberOfRecords }}</p>
-                        <!--<p *ngIf="aggr.indexedVersion !== null">Is the indexed version - {{ (aggr.indexedVersion === true) ? 'Yes': 'No' }}</p>-->
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="uk-margin-top uk-text-center">
-              <a [routerLink]="['/compatibility/monitor/fullHistory', repo.id]" class="uk-h3 uk-link">See more results ...</a>
-            </div>
-          </div>
-        </div>
-
-        <!-- RIGHT HELP CONTENT -->
-        <aside-help-content #rightHelperContent [position]="'right'"
-                            [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-        </aside-help-content>
-
-      </div>
-    </div>
-
-
-    <!-- BOTTOM HELP CONTENT -->
-    <help-content #bottomHelperContent [position]="'bottom'"
-                  [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
-    </help-content>
-
-
-  </div>
-</div>
-

src/app/pages/compatibility/compatibility-monitor-repo.component.ts

@@ -1,82 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import {ActivatedRoute, Router} from '@angular/router';
-import {AggregationDetails, Repository} from '../../domain/typeScriptClasses';
-import { RepositoryService } from '../../services/repository.service';
-import { loadingAggregationHistory, loadingAggregationHistoryError, loadingRepoError,
-         loadingRepoMessage, noAggregationHistory } from '../../domain/shared-messages';
-import {AuthenticationService} from '../../services/authentication.service';
-
-@Component ({
-  selector: 'app-compatibility-monitor-repo',
-  templateUrl: 'compatibility-monitor-repo.component.html'
-})
-
-export class CompatibilityMonitorRepoComponent implements OnInit {
-  loadingMessage: string;
-  errorMessage: string;
-  noAggregations: string;
-
-  repoId = '';
-  repoName = '';
-  repo: Repository;
-
-  latestAggregations: AggregationDetails[] = [];
-
-  constructor(private route: ActivatedRoute,
-              private router: Router,
-              private repoService: RepositoryService,
-              private authService: AuthenticationService) {}
-
-  ngOnInit() {
-    this.readRepoId();
-    this.getRepo();
-  }
-
-  readRepoId() {
-    this.repoId = this.route.snapshot.paramMap.get('id');
-    this.repoName = `repository with id \'${this.repoId}\'`;
-  }
-
-  getRepo() {
-    if (this.repoId) {
-      this.loadingMessage = loadingRepoMessage;
-      this.repoService.getRepositoryById(this.repoId).subscribe(
-        repo => {
-          this.repo = repo;
-        },
-        error => {
-          console.log(error);
-          this.loadingMessage = '';
-          this.errorMessage = loadingRepoError;
-        },
-        () => {
-          this.loadingMessage = '';
-          if (this.repo) {
-            this.repoName = this.repo.officialName;
-              this.getLatestAggregationHistory();
-          } else {
-            this.errorMessage = loadingRepoError;
-          }
-        }
-      );
-    }
-  }
-
-  getLatestAggregationHistory() {
-    this.loadingMessage = loadingAggregationHistory;
-    this.repoService.getRepositoryAggregations(this.repo.id).subscribe(
-      aggr => this.latestAggregations = aggr,
-      error => {
-        this.loadingMessage = '';
-        this.errorMessage = loadingAggregationHistoryError;
-      },
-      () => {
-        this.loadingMessage = '';
-        if ( !this.latestAggregations || (this.latestAggregations.length === 0) ) {
-          this.noAggregations = noAggregationHistory;
-        }
-      }
-    );
-  }
-
-}

src/app/pages/compatibility/compatibility-monitor.component.html

@@ -1,42 +0,0 @@
-<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
-  <div class="uk-width-1-1@m uk-first-column">
-
-    <h1 class="uk-h2">Monitor</h1>
-
-    <!-- TOP HELP CONTENT -->
-    <help-content #topHelperContent [position]="'top'"
-                  [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
-    </help-content>
-
-    <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
-      <div class="uk-grid">
-
-        <!-- LEFT HELP CONTENT -->
-        <aside-help-content #leftHelperContent [position]="'left'"
-                            [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-        </aside-help-content>
-
-        <!-- MIDDLE -->
-        <div class=" uk-width-expand@m">
-
-          <repository-tiles [parent]="'compatibilityMonitor'"></repository-tiles>
-
-        </div>
-
-        <!-- RIGHT HELP CONTENT -->
-        <aside-help-content #rightHelperContent [position]="'right'"
-                            [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-        </aside-help-content>
-
-      </div>
-    </div>
-
-
-    <!-- BOTTOM HELP CONTENT -->
-    <help-content #bottomHelperContent [position]="'bottom'"
-                  [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
-    </help-content>
-
-
-  </div>
-</div>

src/app/pages/compatibility/compatibility-monitor.component.ts

@@ -1,13 +0,0 @@
-import {Component, OnInit} from '@angular/core';
-
-@Component ({
-  selector: 'app-compatibility-monitor',
-  templateUrl: 'compatibility-monitor.component.html'
-})
-
-export class CompatibilityMonitorComponent implements OnInit {
-
-  constructor() {}
-
-  ngOnInit() {}
-}

src/app/pages/compatibility/compatibility-validate-forms/compatibility-validate-step1.component.html

@@ -1,20 +1,29 @@
-<div *ngIf="baseUrlList" [formGroup]="group" class="form-group">
+<div *ngIf="baseUrlList" [formGroup]="group" class="radioButtonForm">
-  <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>
+  <!--<label class="control-label">Validation Set</label>-->
-  <div>
+
-    <label class="btn btn-link validationSetRadio" for="selectRadio">
+  <div class="form-group">
+    <label for="selectRadio" class="uk-button uk-link-muted visible_uk_links" style="display: block; text-align: left;">
       <input id="selectRadio" value="select" name="baseURLRadio" type="radio" (change)="chooseUrl(true)" checked>
       <span class="uk-margin-small-left">Select base URL from one of your registered repositories</span>
     </label>
   </div>
-  <select id="selectBaseUrl" formControlName="selectBaseUrl" class="form-control" >
+  <div class="md-input-wrapper">
-    <option value="">-- none selected --</option>
+    <!--<label class="">Select repository's country</label>-->
-    <option *ngFor="let url of baseUrlList" value="{{ url }}">{{ url }}</option>
+    <select class="md-input" id="selectBaseUrl" formControlName="selectBaseUrl">
-  </select>
+      <option value="">-- none selected --</option>
-  <div>
+      <option *ngFor="let url of baseUrlList" value="{{ url }}">{{ url }}</option>
-    <label class="btn btn-link validationSetRadio" for="customRadio">
+    </select>
+    <span class="md-input-bar"></span>
+  </div>
+  <div class="form-group">
+    <label for="customRadio" class="uk-button uk-link-muted visible_uk_links" style="display: block; text-align: left;">
       <input id="customRadio" value="custom" name="baseURLRadio" type="radio" (change)="chooseUrl(false)">
       <span class="uk-margin-small-left">or enter new</span>
     </label>
   </div>
-  <input id="customBaseUrl" formControlName="customBaseUrl" class="form-control" type="text">
+  <div class="md-input-wrapper">
+    <input id="customBaseUrl" formControlName="customBaseUrl" class="md-input" type="text">
+    <span class="md-input-bar"></span>
+  </div>
+
 </div>

src/app/pages/compatibility/compatibility-validate-forms/compatibility-validate-step2.component.html

@@ -1,16 +1,16 @@
-<div *ngIf="ruleSets" [formGroup]="group" class="form-group">
+<div *ngIf="ruleSets" [formGroup]="group" class="form-group radioButtonForm">
-  <div *ngFor="let set of ruleSets; let set_index = index">
+
-    <label class="btn btn-link" for="ruleSet_{{ set_index }}">
+  <div class="radioButtonForm uk-margin-bottom">
-      <input id="ruleSet_{{ set_index }}"
+    <div *ngFor="let set of ruleSets; let set_index = index" class="">
-             value="{{ set.id }}"
+
-             formControlName="ruleSet"
+      <label for="ruleSet_{{ set_index }}" class="uk-button uk-link-muted visible_uk_links" style="display: block; text-align: left;">
-             name="ruleSet"
+        <input id="ruleSet_{{ set_index }}" value="{{ set.id }}" formControlName="ruleSet" name="ruleSet" type="radio"
-             type="radio"
+               (change)="refreshLists()" [checked]="set_index == 0">
-             (change)="refreshLists()"
+        <span class="uk-margin-small-left">{{ set.name }}</span>
-             [checked]="set_index == 0">
+      </label>
-      <span class="uk-margin-small-left">{{ set.name }}</span>
+    </div>
-    </label>
   </div>
+
   <button class="uk-button uk-button-link" (click)="toggleShowRules()">
     <span *ngIf="showRules">
       <i class="fa fa-angle-up"></i>
@@ -20,9 +20,17 @@
       Show Content and Usage Rules</span>
   </button>
   <div *ngIf="showRules" class="uk-grid uk-animation-fade">
-    <div class="uk-width-expand@m uk-width-1-2@s uk-grid-item-match uk-first-column" formArrayName="contentRules">
+    <div class="uk-width-1-2 uk-grid-item-match uk-first-column" formArrayName="contentRules">
-      <div class="margin10">
+      <div class="">
-        <div class="checkbox selectAll">
+        <div class="checkbox selectAll uk-margin-small-bottom">
+
+          <!--<div class="icheckbox_md">-->
+            <!--<input type="checkbox" name="checkbox_demo_mercury" id="checkbox_demo_1" data-md-icheck=""  [checked]="selectedAllContentRules" (change)="toggleSelectAllContentRules()"-->
+                   <!--style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;">-->
+            <!--<ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"></ins>-->
+          <!--</div>-->
+          <!--<label for="checkbox_demo_1" class="inline-label">Select / Deselect All Content Rules</label>-->
+
           <label>
             <input type="checkbox" [checked]="selectedAllContentRules" (change)="toggleSelectAllContentRules()">
             <span>Select / Deselect All Content Rules</span>
@@ -42,9 +50,9 @@
         </div>
       </div>
     </div>
-    <div class="uk-width-expand@m uk-width-1-2@s uk-grid-item-match uk-first-column" formArrayName="usageRules">
+    <div class="uk-width-1-2 uk-grid-item-match uk-first-column" formArrayName="usageRules">
-      <div class="margin10">
+      <div class="">
-        <div class="checkbox selectAll">
+        <div class="checkbox selectAll uk-margin-small-bottom">
           <label>
             <input type="checkbox" [checked]="selectedAllUsageRules" (change)="toggleSelectAllUsageRules()">
             <span>Select / Deselect All Usage Rules</span>

src/app/pages/compatibility/compatibility-validate-forms/compatibility-validate-step3-cris.component.html

@@ -1,49 +1,79 @@
 <div *ngIf="entitiesList" [formGroup]="group">
-  <div class="marginBottom20 uk-margin-top">
+
-    <div>
+  <div class="uk-margin-bottom uk-margin-top">
-      <label>Cris Entities</label>
+
-    </div>
+    <label class="uk-form-label">Cris Entities</label>
-    <div>
+
-      <div class="margin10" formArrayName="entities">
+    <div class="uk-grid uk-margin-top">
-        <div class="checkbox selectAll">
+      <div class="uk-width-1-2 uk-grid-item-match uk-first-column" formArrayName="entities">
-          <label>
+
-            <input type="checkbox" [checked]="selectedAllEntities" (change)="toggleSelectAllContentRules()">
+        <div class="">
-            <span>Select / Deselect All Entities</span>
+          <div class="checkbox selectAll uk-margin-small-bottom">
-          </label>
+
-        </div>
+            <label>
-        <div *ngFor="let content of group.controls['entities'].controls; let i = index" class="checkbox">
+              <input type="checkbox" [checked]="selectedAllContentRules" (change)="toggleSelectAllContentRules()">
-          <div [formGroupName]="i">
+              <span>Select / Deselect All Entities</span>
-            <label for="entity_{{ i }}">
-              <input id="entity_{{ i }}"
-                     formControlName="entity"
-                     type="checkbox"
-                     (change)="onToggleCheckEntity($event)">
-              <span class="uk-margin-small-left">{{ entitiesList[i] }}</span>
             </label>
           </div>
+          <div *ngFor="let content of group.controls['entities'].controls; let i = index" class="checkbox">
+            <div [formGroupName]="i">
+              <label class="uk-link-muted small" for="entity_{{ i }}">
+                <input id="entity_{{ i }}"
+                       formControlName="entity"
+                       type="checkbox"
+                       (change)="onToggleCheckEntity($event)">
+                <span class="uk-margin-small-left">{{ entitiesList[i] }}</span>
+              </label>
+            </div>
+          </div>
         </div>
+        <!--<div class="checkbox selectAll">-->
+          <!--<label>-->
+            <!--<input type="checkbox" [checked]="selectedAllEntities" (change)="toggleSelectAllContentRules()">-->
+            <!--<span>Select / Deselect All Entities</span>-->
+          <!--</label>-->
+        <!--</div>-->
+        <!--<div *ngFor="let content of group.controls['entities'].controls; let i = index" class="checkbox">-->
+          <!--<div [formGroupName]="i">-->
+            <!--<label for="entity_{{ i }}">-->
+              <!--<input id="entity_{{ i }}"-->
+                     <!--formControlName="entity"-->
+                     <!--type="checkbox"-->
+                     <!--(change)="onToggleCheckEntity($event)">-->
+              <!--<span class="uk-margin-small-left">{{ entitiesList[i] }}</span>-->
+            <!--</label>-->
+          <!--</div>-->
+        <!--</div>-->
       </div>
     </div>
   </div>
-  <div class="marginBottom20">
+
-    <div>
+  <div class="uk-margin-bottom radioButtonForm">
-      <label>Check Referential Integrity</label>
+
-    </div>
+    <label class="uk-form-label">Check Referential Integrity</label>
-    <div class="uk-grid form-inline">
+
-      <div class="uk-width-1-1">
+    <div class="uk-margin-bottom uk-grid uk-grid uk-grid-width-medium-1-2 uk-grid-width-large-1-4">
-        <label class="btn btn-link" for="yes">
+
-          <input id="yes"
+      <div class="uk-input-group uk-row-first">
-                 name="referentialIntegrity"
+        <div class="">
-                 value="yes"
+          <label for="yes"
-                 checked
+                 class="uk-button uk-link-muted visible_uk_links"
-                 type="radio"> <span class="uk-margin-small-left">Yes</span>
+                 style="display: block; text-align: left;">
-        </label>
+            <input id="yes" name="referentialIntegrity" type="radio" value="yes" checked>
-        <label class="btn btn-link" for="no">
+            <span>Yes</span>
-          <input id="no"
+          </label>
-                 name="referentialIntegrity"
+        </div>
-                 value="no"
+      </div>
-                 type="radio"> <span class="uk-margin-small-left">No</span>
+
-        </label>
+      <div class="uk-input-group">
+        <div class="">
+          <label for="no"
+                 class="uk-button uk-link-muted visible_uk_links"
+                 style="display: block; text-align: left;">
+            <input id="no" name="referentialIntegrity" type="radio" value="no">
+            <span>No</span>
+          </label>
+        </div>
       </div>
     </div>
   </div>

src/app/pages/compatibility/compatibility-validate-forms/compatibility-validate-step3.component.html

@@ -1,62 +1,89 @@
-<div class="uk-margin-top">
+<div class="" [formGroup]="group">
   <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{errorMessage}}</div>
-  <div class="marginBottom20" [formGroup]="group">
+
-    <div>
+  <div class="uk-margin-bottom radioButtonForm">
-      <label>Number of records to validate</label>
+
-    </div>
+    <label class="uk-form-label">Number of records to validate</label>
-    <div class="uk-margin uk-grid">
+
-      <div class="uk-width-1-4@s">
+    <div class="uk-margin-bottom uk-grid uk-grid uk-grid-width-medium-1-2 uk-grid-width-large-1-4">
-        <label class="uk-link-muted" for="allRecords">
+      <div class="uk-input-group uk-row-first">
-          <input id="allRecords" name="noOfRecords" type="radio" (change)="chooseAll(true)" checked>
+        <div class="">
-          <span class="uk-margin-small-left">All</span>
+          <label for="allRecords"
-        </label>
+                 class="uk-button uk-link-muted visible_uk_links"
+                 style="display: block; text-align: left;">
+            <input id="allRecords" name="noOfRecords" type="radio" (change)="chooseAll(true)" checked>
+            <span>All</span>
+          </label>
+        </div>
       </div>
-      <div class="uk-width-1-4@s">
+      <div class="uk-input-group">
-        <label class="uk-link-muted" for="someRecords">
+        <div class="">
-          <input id="someRecords" name="noOfRecords" type="radio" (change)="chooseAll(false)">
+          <label for="someRecords"
-          <span class="uk-margin-small-left">Custom</span>
+                 class="uk-button uk-link-muted visible_uk_links"
-        </label>
+                 style="display: block; text-align: left;">
+            <input id="someRecords" name="noOfRecords" type="radio" (change)="chooseAll(false)">
+            <span>Custom</span>
+          </label>
+        </div>
       </div>
-      <div class="uk-width-1-2@s">
+      <div class="uk-input-group">
-        <input class="form-control" formControlName="noOfRecordsInput" type="number">
+        <div class="md-input-wrapper">
+          <input class="md-input" formControlName="noOfRecordsInput" type="number">
+          <span class="md-input-bar"></span>
+        </div>
       </div>
     </div>
-    <div class="marginBottom20">
+
-      <div>
+  </div>
-        <label for="selectValSet">Validation Set</label>
+
-      </div>
+  <div class="uk-margin-medium-bottom">
-      <div>
+
-        <select id="selectValSet" class="form-control" formControlName="selectValSet">
+    <label for="selectValSet" class="uk-form-label">Validation Set</label>
+
+    <div class="uk-width-1-1">
+
+      <div class="md-input-wrapper md-input-filled">
+        <select class="md-input" id="selectValSet" formControlName="selectValSet">
           <option value="">All sets</option>
           <option *ngFor="let set of valSets" value="{{set}}">{{set}}</option>
         </select>
+        <span class="md-input-bar"></span>
       </div>
-      <div class="xPathPanel marginBottom20">
+    </div>
-        <div>
+
-          <label>Would you like to group your results by a specific field?</label>
+  </div>
+
+  <div class="xPathPanel uk-margin-bottom radioButtonForm">
+
+    <label class="uk-form-label">Would you like to group your results by a specific field?</label>
+
+    <div class="uk-grid uk-grid-width-medium-1-2 uk-grid-width-large-1-4">
+      <div class="uk-input-group uk-row-first">
+        <div class="">
+          <label class="uk-button uk-link-muted visible_uk_links" for="noXPath">
+            <input id="noXPath" name="xpath" type="radio" (change)="addXpath(false)" checked>
+            <span class="uk-margin-small-left">No</span>
+          </label>
         </div>
-        <div class="uk-grid">
+      </div>
-          <div class="uk-width-1-4@s">
+      <div class="uk-input-group">
-            <label class="uk-link-muted" for="noXPath">
+        <div class="">
-              <input id="noXPath" name="xpath" type="radio" (change)="addXpath(false)" checked>
+          <label class="uk-button uk-link-muted visible_uk_links" for="customXPath">
-              <span class="uk-margin-small-left">No</span>
+            <input id="customXPath" name="xpath" type="radio" (change)="addXpath(true)">
-            </label>
+            <span class="uk-margin-small-left">Yes</span>
-          </div>
+          </label>
-          <div class="uk-width-1-4@s">
-            <label class="uk-link-muted" for="customXPath">
-              <input id="customXPath" name="xpath" type="radio" (change)="addXpath(true)">
-              <span class="uk-margin-small-left">Yes</span>
-            </label>
-          </div>
-          <div class="uk-width-1-2@s">
-            <input class="form-control" formControlName="xpathInput" placeholder="-XPATH-" type="text">
-          </div>
         </div>
-        <div class="comment fontItalic marginTop10">
+      </div>
-          <strong>XPath Examples:</strong>
+      <div class="uk-input-group">
-          1. //header/setSpec 2. //record/metadata//*[name()='dc:language']
+        <div class="md-input-wrapper">
+          <input class="md-input" formControlName="xpathInput" placeholder="-XPATH-" type="text">
+          <span class="md-input-bar"></span>
         </div>
       </div>
     </div>
+    <div class="uk-text-italic uk-text-small uk-margin-top">
+      <strong>XPath Examples:</strong>
+      1. //header/setSpec 2. //record/metadata//*[name()='dc:language']
+    </div>
   </div>
 </div>

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

@@ -1,133 +1,303 @@
-<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
+<div id="page_content">
-  <div class="uk-width-1-1@m uk-first-column">
+  <div id="page_content_inner">
-
+    <h2 class="heading_b uk-margin-bottom">Run compatibility test</h2>
-    <h1 class="uk-h2">Run compatibility test</h1>
 
     <!-- TOP HELP CONTENT -->
     <help-content #topHelperContent [position]="'top'"
                   [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
     </help-content>
 
-    <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
+    <div class="uk-grid">
-      <div class="uk-grid">
 
-        <!-- LEFT HELP CONTENT -->
+      <!-- LEFT HELP CONTENT -->
-        <aside-help-content #leftHelperContent [position]="'left'"
+      <aside-help-content #leftHelperContent [position]="'left'"
-                            [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+                          [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-        </aside-help-content>
+      </aside-help-content>
 
-        <!-- MIDDLE -->
+      <!-- MIDDLE -->
-        <div class="uk-width-expand@m">
+      <div class=" uk-width-expand@m">
+        <div class="md-card uk-margin-large-bottom">
+          <div class="md-card-content">
 
-          <div class="wizard">
+            <form class="uk-form-stacked" id="wizard_advanced_form" novalidate="">
-            <div class="wizardBreadcrumbs">
+
-              <div class="steps clearfix">
+              <div id="wizard_advanced" role="application" class="wizard clearfix">
-                <div class="step active">
+                <div class="steps clearfix">
-                  <div>
+                  <ul role="tablist">
-                    Select datasource
+                    <li role="tab" class="first {{ (currentStep == 0) ? 'current' : '' }}" aria-disabled="false" aria-selected="true">
-                    <span></span>
+                      <a id="wizard_advanced-t-0" href="#wizard_advanced-h-0" aria-controls="wizard_advanced-p-0">
-                  </div>
+                        <!--<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">
+                        <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">
+                        <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">
+                        <span class="number">4</span>
+                        <span class="title">Finish</span>
+                      </a>
+                    </li>
+                  </ul>
                 </div>
-                <div class="step {{ (currentStep > 0) ? 'active' : '' }}">
+                <div class="content clearfix" style="height: 660px">
-                  <div>
+
-                    {{ (type === 'cris') ? 'Finish' : 'Select guidelines' }}
-                    <span></span>
-                  </div>
-                </div>
-                <div *ngIf="(type !== 'cris')" class="step {{ (currentStep > 1) ? 'active' : '' }}">
-                  <div>
-                    Select parameters
-                    <span></span>
-                  </div>
-                </div>
-                <div *ngIf="(type !== 'cris')" class="step {{ (currentStep > 2) ? 'active' : '' }} ">
-                  <div>
-                    Finish
-                    <span></span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="content">
-              <div>
-                <div class="animated fadeInRight stepContent">
-                  <div *ngIf="errorMessage && (type!=='cris' && errorMessage!=='No rule sets were found')" class="uk-alert uk-alert-danger">{{ 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="whiteFilm"></div>
                   </div>
-                  <div *ngIf="(currentStep === 0) && !loadingMessage">
+                  <div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-top">{{ errorMessage }}</div>
-                    <compatibility-validate-step1 #step1ChooseBaseUrl
+
-                                                  [baseUrlList]="baseUrlList"
+                  <!-- first section -->
-                                                  (emitObject)="getChosenUrl($event)"></compatibility-validate-step1>
+                  <h3 id="wizard_advanced-h-0" tabindex="-1" class="title {{ (currentStep == 0) ? 'current' : '' }}">Select Repository</h3>
-                  </div>
+                  <section id="wizard_advanced-p-0" role="tabpanel" aria-labelledby="wizard_advanced-h-0"
-                  <div *ngIf="(currentStep === 1) && !loadingMessage">
+                           class="body step-0 {{ (currentStep == 0) ? 'current' : '' }}" data-step="0" aria-hidden="false">
-                    <compatibility-validate-step2 #step2ChooseGuidelines
+
-                                                  [ruleSets]="ruleSets"
+                    <div *ngIf="(currentStep === 0) && !loadingMessage">
-                                                  (emitObject)="getChosenRules($event)">
+                      <compatibility-validate-step1 #step1ChooseBaseUrl
-                    </compatibility-validate-step2>
+                                                    [baseUrlList]="baseUrlList"
-                  </div>
+                                                    (emitObject)="getChosenUrl($event)"></compatibility-validate-step1>
-                  <div *ngIf="(currentStep === 2) && (type !== 'cris') && !loadingMessage">
+                    </div>
-                    <compatibility-validate-step3 #step3ChooseParameters
+                  </section>
-                                                  [valSets]="valSets"
+
-                                                  (emitObject)="getChosenParameters($event)">
+                  <!-- second section -->
-                    </compatibility-validate-step3>
+                  <h3 id="wizard_advanced-h-1" tabindex="-1" class="title {{ (currentStep == 1) ? 'current' : '' }}">Enter Information</h3>
-                  </div>
+                  <section id="wizard_advanced-p-1" role="tabpanel" aria-labelledby="wizard_advanced-h-1"
-                  <div *ngIf="(currentStep === 2) && (type === 'cris') && !loadingMessage">
+                           class="body step-1 {{ (currentStep == 1) ? 'current' : '' }}" data-step="1"  aria-hidden="true">
-                    <compatibility-validate-step3-cris #step3ChooseCrisEntities
+
-                                                       (emitObject)="getChosenCrisEntities($event)">
+                    <div *ngIf="(currentStep === 1) && !loadingMessage">
-                    </compatibility-validate-step3-cris>
+                      <compatibility-validate-step2 #step2ChooseGuidelines
-                  </div>
+                                                    [ruleSets]="ruleSets"
-                  <div *ngIf="(currentStep === 3) && !loadingMessage">
+                                                    (emitObject)="getChosenRules($event)">
-                    <div>
+                      </compatibility-validate-step2>
-                      <div class="success">
+                    </div>
-                        <i class="fa fa-check-circle" style=""></i>
+                  </section>
-                        <h3>Validation has begun</h3>
+
-                      </div>
+                  <!-- third section -->
-                      <div class="uk-alert uk-alert-primary marginTop20 textAlignCenter">
+                  <h3 id="wizard_advanced-h-2" tabindex="-1" class="title {{ (currentStep == 2) ? 'current' : '' }}">Add Interfaces</h3>
-                        You will be notified by email with the results of the compatibility test.
+                  <section id="wizard_advanced-p-2" role="tabpanel" aria-labelledby="wizard_advanced-h-2"
+                           class="body step-2 {{ (currentStep == 2) ? 'current' : '' }}" data-step="2" aria-hidden="true">
+
+                    <div *ngIf="(currentStep === 2) && (type !== 'cris') && !loadingMessage">
+                      <compatibility-validate-step3 #step3ChooseParameters
+                                                    [valSets]="valSets"
+                                                    (emitObject)="getChosenParameters($event)">
+                      </compatibility-validate-step3>
+                    </div>
+                    <div *ngIf="(currentStep === 2) && (type === 'cris') && !loadingMessage">
+                      <compatibility-validate-step3-cris #step3ChooseCrisEntities
+                                                         (emitObject)="getChosenCrisEntities($event)">
+                      </compatibility-validate-step3-cris>
+                    </div>
+                  </section>
+
+                  <!-- fourth section -->
+                  <h3 id="wizard_advanced-h-3" tabindex="-1" class="title {{ (currentStep == 3) ? 'current' : '' }}">Finish</h3>
+                  <section id="wizard_advanced-p-3" role="tabpanel" aria-labelledby="wizard_advanced-h-3"
+                           class="body step-3 {{ (currentStep == 3) ? 'current' : '' }}" data-step="2"  aria-hidden="true">
+
+                    <div *ngIf="(currentStep === 3) && !loadingMessage">
+                      <div style="text-align: center">
+                        <div class="success">
+                          <i class="fa fa-check-circle fa-3x" style="color: green"></i>
+                          <h3>Validation has begun</h3>
+                        </div>
+                        <div class="uk-margin-top">
+                          You will be notified by email with the results of the compatibility test.
+                        </div>
                       </div>
                     </div>
-                  </div>
+
+                  </section>
+
+                </div>
+                <div *ngIf="currentStep != 3" class="actions clearfix">
+                  <ul role="menu" aria-label="Pagination">
+                    <li class="button_previous {{ (currentStep < 1) ? 'disabled' : '' }}" aria-disabled="true">
+                      <a (click)="moveBackAStep()" role="menuitem"><i class="material-icons"></i> Previous</a>
+                    </li>
+                    <li *ngIf="(((currentStep < 2) && (type !== 'cris')) || ((type === 'cris') && (currentStep == 0)))" class="button_next" aria-hidden="false" aria-disabled="false">
+                      <a (click)="moveAStep()" role="menuitem">Next<i class="material-icons"></i></a>
+                    </li>
+                    <li *ngIf="((currentStep == 2) || ((type === 'cris') && (currentStep == 1)))" class="button_finish" aria-hidden="true">
+                      <a (click)="(type !== 'cris') ? moveAStep() : moveAStep() + submitForValidation()" role="menuitem">Finish</a>
+                    </li>
+                  </ul>
                 </div>
               </div>
-            </div>
+
-            <div *ngIf="!loadingMessage" class="wizardActions">
+            </form>
-              <button *ngIf="((currentStep === 1) || (currentStep === 2)) && (type !== 'cris') && !loadingMessage"
+
-                      class="uk-button uk-button-grey-light uk-margin-small-right" type="button"
-                      (click)="moveBackAStep()">
-                <i class="fa fa-angle-double-left"></i>
-                Back
-              </button>
-              <button *ngIf="((currentStep < 3) && !loadingMessage)"
-                      class="uk-button uk-button-grey-light uk-margin-small-left" type="button"
-                      (click)="(type !== 'cris') ? moveAStep() : (moveAStep() + submitForValidation())">
-                <span class="{{((currentStep === 2) || ((type === 'cris') && (currentStep === 1))) ? 'uk-link' : ''}}">
-                  {{ ((currentStep < 2) && (type !== 'cris')) || (currentStep === 0) ? 'Next' : 'Finish' }}
-                </span>
-                <i class="fa fa-angle-double-right"></i>
-              </button>
-            </div>
           </div>
-
         </div>
-
-        <!-- RIGHT HELP CONTENT -->
-        <aside-help-content #rightHelperContent [position]="'right'"
-                            [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-        </aside-help-content>
-
       </div>
-    </div>
 
+      <!-- RIGHT HELP CONTENT -->
+      <aside-help-content #rightHelperContent [position]="'right'"
+                          [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+      </aside-help-content>
+
+    </div>
 
     <!-- BOTTOM HELP CONTENT -->
     <help-content #bottomHelperContent [position]="'bottom'"
                   [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
     </help-content>
 
-
   </div>
 </div>
+
+
+
+
+
+
+
+<!--<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">-->
+  <!--<div class="uk-width-1-1@m uk-first-column">-->
+
+    <!--<h1 class="uk-h2">Run compatibility test</h1>-->
+
+    <!--&lt;!&ndash; TOP HELP CONTENT &ndash;&gt;-->
+    <!--<help-content #topHelperContent [position]="'top'"-->
+                  <!--[ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">-->
+    <!--</help-content>-->
+
+    <!--<div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">-->
+      <!--<div class="uk-grid">-->
+
+        <!--&lt;!&ndash; LEFT HELP CONTENT &ndash;&gt;-->
+        <!--<aside-help-content #leftHelperContent [position]="'left'"-->
+                            <!--[ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">-->
+        <!--</aside-help-content>-->
+
+        <!--&lt;!&ndash; MIDDLE &ndash;&gt;-->
+        <!--<div class=" uk-width-expand@m">-->
+
+          <!--<div class="wizard">-->
+            <!--<div class="wizardBreadcrumbs">-->
+              <!--<div class="steps clearfix">-->
+                <!--<div class="step active">-->
+                  <!--<div>-->
+                    <!--Select datasource-->
+                    <!--<span></span>-->
+                  <!--</div>-->
+                <!--</div>-->
+                <!--<div class="step {{ (currentStep > 0) ? 'active' : '' }}">-->
+                  <!--<div>-->
+                    <!--Select guidelines-->
+                    <!--<span></span>-->
+                  <!--</div>-->
+                <!--</div>-->
+                <!--<div class="step {{ (currentStep > 1) ? 'active' : '' }}">-->
+                  <!--<div>-->
+                    <!--Select parameters-->
+                    <!--<span></span>-->
+                  <!--</div>-->
+                <!--</div>-->
+                <!--<div class="step {{ (currentStep > 2) ? 'active' : '' }}">-->
+                  <!--<div>-->
+                    <!--Finish-->
+                    <!--<span></span>-->
+                  <!--</div>-->
+                <!--</div>-->
+              <!--</div>-->
+            <!--</div>-->
+            <!--<div class="content">-->
+              <!--<div>-->
+                <!--<div class="animated fadeInRight stepContent">-->
+                  <!--<div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ 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="whiteFilm"></div>-->
+                  <!--</div>-->
+                  <!--<div *ngIf="(currentStep === 0) && !loadingMessage">-->
+                    <!--<compatibility-validate-step1 #step1ChooseBaseUrl-->
+                                                  <!--[baseUrlList]="baseUrlList"-->
+                                                  <!--(emitObject)="getChosenUrl($event)"></compatibility-validate-step1>-->
+                  <!--</div>-->
+                  <!--<div *ngIf="(currentStep === 1) && !loadingMessage">-->
+                    <!--<compatibility-validate-step2 #step2ChooseGuidelines-->
+                                                  <!--[ruleSets]="ruleSets"-->
+                                                  <!--(emitObject)="getChosenRules($event)">-->
+                    <!--</compatibility-validate-step2>-->
+                  <!--</div>-->
+                  <!--<div *ngIf="(currentStep === 2) && (type !== 'cris') && !loadingMessage">-->
+                    <!--<compatibility-validate-step3 #step3ChooseParameters-->
+                                                  <!--[valSets]="valSets"-->
+                                                  <!--(emitObject)="getChosenParameters($event)">-->
+                    <!--</compatibility-validate-step3>-->
+                  <!--</div>-->
+                  <!--<div *ngIf="(currentStep === 2) && (type === 'cris') && !loadingMessage">-->
+                    <!--<compatibility-validate-step3-cris #step3ChooseCrisEntities-->
+                                                       <!--(emitObject)="getChosenCrisEntities($event)">-->
+                    <!--</compatibility-validate-step3-cris>-->
+                  <!--</div>-->
+                  <!--<div *ngIf="(currentStep === 3) && !loadingMessage">-->
+                    <!--<div>-->
+                      <!--<div class="success">-->
+                        <!--<i class="fa fa-check-circle" style=""></i>-->
+                        <!--<h3>Validation has begun</h3>-->
+                      <!--</div>-->
+                      <!--<div class="uk-alert uk-alert-primary marginTop20 textAlignCenter">-->
+                        <!--You will be notified by email with the results of the compatibility test.-->
+                      <!--</div>-->
+                    <!--</div>-->
+                  <!--</div>-->
+                <!--</div>-->
+              <!--</div>-->
+            <!--</div>-->
+            <!--<div *ngIf="!loadingMessage" class="wizardActions">-->
+              <!--<button *ngIf="((currentStep === 1) || (currentStep === 2)) && !loadingMessage"-->
+                      <!--class="uk-button uk-button-grey-light uk-margin-small-right" type="button"-->
+                      <!--(click)="moveBackAStep()">-->
+                <!--<i class="fa fa-angle-double-left"></i>-->
+                <!--Back-->
+              <!--</button>-->
+              <!--<button *ngIf="(currentStep < 3) && !loadingMessage"-->
+                      <!--class="uk-button uk-button-grey-light uk-margin-small-left" type="button"-->
+                      <!--(click)="moveAStep()">-->
+
+                <!--<span class="{{(currentStep === 2) ? 'uk-link' : ''}}">-->
+                  <!--{{ (currentStep < 2) ? 'Next' : 'Finish' }}-->
+                <!--</span>-->
+                <!--<i class="fa fa-angle-double-right"></i>-->
+
+              <!--</button>-->
+            <!--</div>-->
+          <!--</div>-->
+
+        <!--</div>-->
+
+        <!--&lt;!&ndash; RIGHT HELP CONTENT &ndash;&gt;-->
+        <!--<aside-help-content #rightHelperContent [position]="'right'"-->
+                            <!--[ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">-->
+        <!--</aside-help-content>-->
+
+      <!--</div>-->
+    <!--</div>-->
+
+
+    <!--&lt;!&ndash; BOTTOM HELP CONTENT &ndash;&gt;-->
+    <!--<help-content #bottomHelperContent [position]="'bottom'"-->
+                  <!--[ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">-->
+    <!--</help-content>-->
+
+
+  <!--</div>-->
+<!--</div>-->

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

@@ -73,6 +73,11 @@ export class CompatibilityValidateTypeComponent implements OnInit {
         () => this.getStep()
       );
     }
+    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");
   }
 
   getStep() {

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

@@ -1,63 +1,67 @@
-<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
+<div id="page_content">
-  <div class="uk-width-1-1@m uk-first-column">
+  <div id="page_content_inner">
-
+    <h2 class="heading_b uk-margin-bottom">Validate your datasource</h2>
-    <h1 class="uk-h2">Validate your datasource</h1>
 
     <!-- TOP HELP CONTENT -->
     <help-content #topHelperContent [position]="'top'"
                   [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
     </help-content>
 
-    <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
+    <div class="uk-grid">
-      <div class="uk-grid">
 
-        <!-- LEFT HELP CONTENT -->
+      <!-- LEFT HELP CONTENT -->
-        <aside-help-content #leftHelperContent [position]="'left'"
+      <aside-help-content #leftHelperContent [position]="'left'"
-                            [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+                          [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-        </aside-help-content>
+      </aside-help-content>
 
-        <!-- MIDDLE -->
+      <!-- MIDDLE -->
-        <div class=" uk-width-expand@m">
+      <div class=" uk-width-expand@m">
 
-          <div>
+        <div class="uk-grid uk-grid-match uk-grid-medium repositoryTypeSelection uk-child-width-1-3@l uk-child-widht-1-3@m" data-uk-grid-margin="">
-            <div class="uk-margin uk-grid repositoryTypeSelection">
+
-              <div class="uk-width-expand@m uk-width-1-3@s uk-grid-item-match uk-first-column">
+          <div class="uk-row-first">
-                <div class="uk-text-center uk-card uk-card-default uk-card-hover uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="" data-id="" style="">
+            <div class="uk-text-center md-card md-card-default md-card-hover uk-scrollspy-inview uk-animation-slide-top-medium
-                  <a class="uk-position-cover uk-margin-remove-adjacent" [routerLink]="['literature']" [queryParams]="{ step: 'baseUrl' }"></a>
+            datasourceTypeCard uk-inline-clip uk-transition-toggle" uk-scrollspy-class="" tabindex="0">
-                  <div class="uk-card-media-top">
+              <a [routerLink]="['literature']" [queryParams]="{ step: 'baseUrl' }" class="el-link uk-position-cover uk-margin-remove-adjacent"></a>
-                    <img src="../../../assets/imgs/Literature_repos_wide.png" alt="" style="width:100%;">
+              <div class="md-card-content large-padding uk-margin-medium-top uk-margin-bottom">
-                  </div>
+                <div class="">
-                  <div class="uk-card-body">
+                  <img class="el-image" src="../../../assets/imgs/datasourcetypes/Asset%203.svg" alt="" width="50">
-                    <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">
+                </div>
-                      Run compatibility test against the OpenAIRE literature guidelines.
+                <h3>Literature repository</h3>
-                    </h3>
+                <div class="uk-transition-slide-bottom uk-position-bottom uk-overlay uk-overlay-primary">
-                  </div>
+                  <p class="uk-margin-remove">Run compatibility test against the OpenAIRE literature guidelines.</p>
                 </div>
               </div>
-              <div class="uk-width-expand@m uk-width-1-3@s uk-grid-item-match uk-first-column">
+            </div>
-                <div class="uk-text-center uk-card uk-card-default uk-card-hover uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="" data-id="" style="">
+          </div>
-                  <a class="el-link uk-position-cover uk-margin-remove-adjacent" [routerLink]="['data']" [queryParams]="{ step: 'baseUrl' }"></a>
+
-                  <div class="uk-card-media-top">
+          <div class="">
-                    <img class="el-image" src="../../../assets/imgs/Data_repos_wide.png" alt="" style="width:100%;">
+            <div class="uk-text-center md-card md-card-default md-card-hover uk-scrollspy-inview uk-animation-slide-top-medium
-                  </div>
+            datasourceTypeCard uk-inline-clip uk-transition-toggle" uk-scrollspy-class="" tabindex="0">
-                  <div class="uk-card-body">
+              <a [routerLink]="['data']" [queryParams]="{ step: 'baseUrl' }" class="el-link uk-position-cover uk-margin-remove-adjacent"></a>
-                    <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">
+              <div class="md-card-content large-padding uk-margin-medium-top uk-margin-bottom">
-                      Run compatibility test against the OpenAIRE Guidelines for Data Archives.
+                <div class="">
-                    </h3>
+                  <img class="el-image" src="../../../assets/imgs/datasourcetypes/Asset%202.svg" alt="" width="50">
-                  </div>
+                </div>
+                <h3>Data repository</h3>
+                <div class="uk-transition-slide-bottom uk-position-bottom uk-overlay uk-overlay-primary">
+                  <p class="uk-margin-remove">Run compatibility test against the OpenAIRE Guidelines for Data Archives.</p>
                 </div>
               </div>
-              <div class="uk-width-expand@m uk-width-1-3@s uk-grid-item-match uk-first-column">
+            </div>
-                <div class="uk-text-center uk-card uk-card-default uk-card-hover uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="" data-id="" style="">
+          </div>
-                  <a class="el-link uk-position-cover uk-margin-remove-adjacent" [routerLink]="['cris']" [queryParams]="{ step: 'baseUrl' }"></a>
+
-                  <div class="uk-card-media-top">
+          <div class="">
-                    <img class="el-image" src="../../../assets/imgs/CRIS_wide.png" alt="" style="width:100%;">
+            <div class="uk-text-center md-card md-card-default md-card-hover uk-scrollspy-inview uk-animation-slide-top-medium
-                  </div>
+            datasourceTypeCard uk-inline-clip uk-transition-toggle" uk-scrollspy-class="" tabindex="0">
-                  <div class="uk-card-body">
+              <a [routerLink]="['cris']" [queryParams]="{ step: 'baseUrl' }" class="el-link uk-position-cover uk-margin-remove-adjacent"></a>
-                    <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">
+              <div class="md-card-content large-padding uk-margin-medium-top uk-margin-bottom">
-                      Run compatibility test against the OpenAIRE Guidelines for CRIS Managers based on CERIF-XML.
+                <div class="">
-                    </h3>
+                  <img class="el-image" src="../../../assets/imgs/datasourcetypes/Asset%201.svg" alt="" width="50">
-                  </div>
+                </div>
+                <h3>CRIS systems</h3>
+                <div class="uk-transition-slide-bottom uk-position-bottom uk-overlay uk-overlay-primary">
+                  <p class="uk-margin-remove">Run compatibility test against the OpenAIRE Guidelines for CRIS Managers based on CERIF-XML.</p>
                 </div>
               </div>
             </div>
@@ -65,20 +69,105 @@
 
         </div>
 
-        <!-- RIGHT HELP CONTENT -->
-        <aside-help-content #rightHelperContent [position]="'right'"
-                            [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-        </aside-help-content>
-
       </div>
-    </div>
 
+      <!-- RIGHT HELP CONTENT -->
+      <aside-help-content #rightHelperContent [position]="'right'"
+                          [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+      </aside-help-content>
+
+    </div>
 
     <!-- BOTTOM HELP CONTENT -->
     <help-content #bottomHelperContent [position]="'bottom'"
                   [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
     </help-content>
 
-
   </div>
 </div>
+
+
+<!--<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">-->
+  <!--<div class="uk-width-1-1@m uk-first-column">-->
+
+    <!--<h1 class="uk-h2">Validate your datasource</h1>-->
+
+    <!--&lt;!&ndash; TOP HELP CONTENT &ndash;&gt;-->
+    <!--<help-content #topHelperContent [position]="'top'"-->
+                  <!--[ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">-->
+    <!--</help-content>-->
+
+    <!--<div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">-->
+      <!--<div class="uk-grid">-->
+
+        <!--&lt;!&ndash; LEFT HELP CONTENT &ndash;&gt;-->
+        <!--<aside-help-content #leftHelperContent [position]="'left'"-->
+                            <!--[ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">-->
+        <!--</aside-help-content>-->
+
+        <!--&lt;!&ndash; MIDDLE &ndash;&gt;-->
+        <!--<div class=" uk-width-expand@m">-->
+
+          <!--<div>-->
+            <!--<div class="uk-margin uk-grid repositoryTypeSelection">-->
+              <!--<div class="uk-width-expand@m uk-width-1-3@s uk-grid-item-match uk-first-column">-->
+                <!--<div class="uk-text-center uk-card uk-card-default uk-card-hover uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="" data-id="" style="">-->
+                  <!--<a class="uk-position-cover uk-margin-remove-adjacent" [routerLink]="['literature']" [queryParams]="{ step: 'baseUrl' }"></a>-->
+                  <!--<div class="uk-card-media-top">-->
+                    <!--<img src="../../../assets/imgs/Literature_repos_wide.png" alt="" style="width:100%;">-->
+                  <!--</div>-->
+                  <!--<div class="uk-card-body">-->
+                    <!--<h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">-->
+                      <!--Run compatibility test against the OpenAIRE literature guidelines.-->
+                    <!--</h3>-->
+                  <!--</div>-->
+                <!--</div>-->
+              <!--</div>-->
+              <!--<div class="uk-width-expand@m uk-width-1-3@s uk-grid-item-match uk-first-column">-->
+                <!--<div class="uk-text-center uk-card uk-card-default uk-card-hover uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="" data-id="" style="">-->
+                  <!--<a class="el-link uk-position-cover uk-margin-remove-adjacent" [routerLink]="['data']" [queryParams]="{ step: 'baseUrl' }"></a>-->
+                  <!--<div class="uk-card-media-top">-->
+                    <!--<img class="el-image" src="../../../assets/imgs/Data_repos_wide.png" alt="" style="width:100%;">-->
+                  <!--</div>-->
+                  <!--<div class="uk-card-body">-->
+                    <!--<h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">-->
+                      <!--Run compatibility test against the OpenAIRE Guidelines for Data Archives.-->
+                    <!--</h3>-->
+                  <!--</div>-->
+                <!--</div>-->
+              <!--</div>-->
+              <!--<div class="uk-width-expand@m uk-width-1-3@s uk-grid-item-match uk-first-column">-->
+                <!--<div class="uk-text-center uk-card uk-card-default uk-card-hover uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="" data-id="" style="">-->
+                  <!--<a class="el-link uk-position-cover uk-margin-remove-adjacent" [routerLink]="['cris']" [queryParams]="{ step: 'baseUrl' }"></a>-->
+                  <!--<div class="uk-card-media-top">-->
+                    <!--<img class="el-image" src="../../../assets/imgs/CRIS_wide.png" alt="" style="width:100%;">-->
+                  <!--</div>-->
+                  <!--<div class="uk-card-body">-->
+                    <!--<h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">-->
+                      <!--Run compatibility test against the OpenAIRE Guidelines for CRIS Managers based on CERIF-XML.-->
+                    <!--</h3>-->
+                  <!--</div>-->
+                <!--</div>-->
+              <!--</div>-->
+            <!--</div>-->
+          <!--</div>-->
+
+        <!--</div>-->
+
+        <!--&lt;!&ndash; RIGHT HELP CONTENT &ndash;&gt;-->
+        <!--<aside-help-content #rightHelperContent [position]="'right'"-->
+                            <!--[ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">-->
+        <!--</aside-help-content>-->
+
+      <!--</div>-->
+    <!--</div>-->
+
+
+    <!--&lt;!&ndash; BOTTOM HELP CONTENT &ndash;&gt;-->
+    <!--<help-content #bottomHelperContent [position]="'bottom'"-->
+                  <!--[ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">-->
+    <!--</help-content>-->
+
+
+  <!--</div>-->
+<!--</div>-->

src/app/pages/compatibility/compatibility-validate.component.ts

@@ -9,5 +9,11 @@ export class CompatibilityValidateComponent implements OnInit {
 
   constructor() {}
 
-  ngOnInit() {}
+  ngOnInit() {
+    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");
+  }
 }

src/app/pages/compatibility/compatibility-validation-history.component.html

@@ -1,207 +1,314 @@
-<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
+<div id="page_content">
-  <div class="uk-width-1-1@m uk-first-column">
+  <div id="page_content_inner">
-
+    <h2 class="heading_b uk-margin-bottom">Previous validations</h2>
-    <h1 class="uk-h2">Previous validations</h1>
 
     <!-- TOP HELP CONTENT -->
     <help-content #topHelperContent [position]="'top'"
                   [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
     </help-content>
 
-    <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
+    <div class="uk-grid">
-      <div class="uk-grid">
 
-        <!-- LEFT HELP CONTENT -->
+      <!-- LEFT HELP CONTENT -->
-        <aside-help-content #leftHelperContent [position]="'left'"
+      <aside-help-content #leftHelperContent [position]="'left'"
-                            [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+                          [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-        </aside-help-content>
+      </aside-help-content>
 
-        <!-- MIDDLE -->
+      <!-- MIDDLE -->
-        <div class=" uk-width-expand@m">
+      <div class=" uk-width-expand@m">
 
-          <div *ngIf="successMessage" class="uk-alert uk-alert-success">{{ successMessage }}</div>
+        <div *ngIf="successMessage" class="uk-alert uk-alert-success">{{ successMessage }}</div>
-          <div *ngIf="failureMessage" class="uk-alert uk-alert-danger">{{ failureMessage }}</div>
+        <div *ngIf="failureMessage" class="uk-alert uk-alert-danger">{{ failureMessage }}</div>
-          <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>
+        <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>
-          <div *ngIf="loadingMessage" class="loading-big">
+        <div *ngIf="loadingMessage" class="loading-big">
-            <div class="loader-big"
+          <div class="loader-big"
-                 style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">
+               style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">
-              {{ loadingMessage }}
+            {{ loadingMessage }}
-            </div>
-            <div class="whiteFilm"></div>
           </div>
-          <div *ngIf="jobsOfUser">
+          <div class="transparentFilm"></div>
-            <div class="uk-grid page-controls">
+        </div>
-              <div class="uk-margin-bottom uk-width-1-1 filters">
+        <div *ngIf="jobsOfUser">
-                <div class="links">
+
-                  <div class="filterLabel">Filter by job type:</div>
+
-                  <div class="inlineBlock">
+          <div class="page-controls">
-                    <select class="form-control" #selectType (change)="getJobType(selectType.value)">
+
-                      <option value="">--none selected--</option>
+            <div class="md-card uk-margin-medium-bottom">
-                      <option *ngFor="let type of jobTypes" value="{{type}}">{{type}}</option>
+              <div class="md-card-content">
-                    </select>
+                <div class="uk-grid" data-uk-grid-margin="">
+
+                  <div class="uk-width-1-5 uk-row-first">
+                    <div class="uk-margin-small-top">
+                      <div class="md-input-wrapper md-input-filled">
+                        <label class="">Filter by job type</label>
+                        <select class="md-input" #selectType (change)="getJobType(selectType.value)">
+                          <option value="">--none selected--</option>
+                          <option *ngFor="let type of jobTypes" value="{{type}}">{{type}}</option>
+                        </select>
+                        <span class="md-input-bar"></span>
+                      </div>
+
+                      <!--<select id="product_search_status1" data-md-selectize="" multiple="multiple" data-md-selectize-bottom="" tabindex="-1" style="display: none;" class="selectized"></select>-->
+                      <!--<div class="selectize-control multi plugin-tooltip">-->
+                        <!--<div class="selectize-input items not-full has-options">-->
+                          <!--<input type="select-multiple" autocomplete="off" tabindex="" id="product_search_status-selectized1" placeholder="Status" style="width: 47px;">-->
+                        <!--</div>-->
+                      <!--</div>-->
+                      <!--<div class="selectize_fix"></div>-->
+                    </div>
                   </div>
-                </div>
+
-              </div>
+                  <div class="uk-width-3-5">
-              <div class="uk-margin-bottom uk-width-1-1 filters">
-                <div class="links uk-inline">
-                  <div class="filterLabel" style="display: inline;">Filter validation jobs:</div>
-                  <a class="uk-active"
-                     [class.active]="currentFilter==='all'"
-                     (click)="filterJobs('all')">All jobs ({{this.jobsOfUser.totalJobs}})</a>
-                  <a class="uk-active"
-                     [class.active]="currentFilter==='successful'"
-                     (click)="filterJobs('successful')">successful ({{this.jobsOfUser.totalJobsSuccessful}})</a>
-                  <a class="uk-active"
-                     [class.active]="currentFilter==='failed'"
-                     (click)="filterJobs('failed')">failed ({{this.jobsOfUser.totalJobsFailed}})</a>
-                  <a class="uk-active"
-                     [class.active]="currentFilter==='ongoing'"
-                     (click)="filterJobs('ongoing')">ongoing ({{this.jobsOfUser.totalJobsOngoing}})</a>
-                </div>
-                <div class="show-options uk-inline" style="float: right;">
-                  <div class="filterLabel" style="display: inline;">Jobs per page:</div>
-                  <div class="inlineBlock">
-                    <select #itemsPerPage class="form-control" (change)="getItemsPerPage(+itemsPerPage.value)">
-                      <option value="10" selected>10</option>
-                      <option value="25">25</option>
-                      <option value="50">50</option>
-                      <option value="100">100</option>
-                    </select>
                   </div>
+
+                  <div class="uk-width-1-5">
+                    <div class="uk-margin-small-top">
+
+                      <div class="md-input-wrapper md-input-filled">
+                        <label class="">Jobs per page</label>
+                        <select #itemsPerPage class="md-input" (change)="getItemsPerPage(+itemsPerPage.value)">
+                          <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>
               </div>
             </div>
-            <div class="contentAndPagerPanel">
+
-              <div>
+            <div class="uk-margin-bottom uk-width-1-1 filters">
-                <ul class="uk-pagination">
+
-                  <li>
+              <!--<h3 class="heading_a uk-margin-bottom">Filter validation jobs:</h3>-->
-                    <a class="uk-link uk-link-muted" (click)="goToPreviousPage()">
+              <ul id="filter" class="uk-subnav uk-subnav-pill">
-                      <span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">
+                <li class="uk-active" [class.uk-active]="currentFilter==='all'" data-uk-filter="">
-                        <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"
+                  <a (click)="filterJobs('all')">All jobs ({{this.jobsOfUser.totalJobs}})</a>
-                             icon="pagination-previous" ratio="1"></svg>
+                </li>
-                      </span>
+                <li class="" [class.uk-active]="currentFilter==='successful'" data-uk-filter="filter-a">
-                      Previous
+                  <a (click)="filterJobs('successful')">successful ({{this.jobsOfUser.totalJobsSuccessful}})</a>
-                    </a>
+                </li>
-                  </li>
+                <li class="" [class.uk-active]="currentFilter==='failed'" data-uk-filter="filter-b">
-                  <li class="uk-margin-auto-left">
+                  <a (click)="filterJobs('failed')">failed ({{this.jobsOfUser.totalJobsFailed}})</a>
-                    <a class="uk-link uk-link-muted" (click)="goToNextPage()">
+                </li>
-                      Next
+                <li class="" [class.uk-active]="currentFilter==='ongoing'" data-uk-filter="filter-c">
-                      <span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">
+                  <a (click)="filterJobs('ongoing')">ongoing ({{this.jobsOfUser.totalJobsOngoing}})</a>
-                        <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"
+                </li>
-                             icon="pagination-next" ratio="1"></svg>
+              </ul>
-                      </span>
+
-                    </a>
+            </div>
-                  </li>
+          </div>
-                </ul>
+
-                <div class="resultsPageLabel">page {{ (totalPages > 0) ? currentPage+1 : 0 }} of {{ totalPages }}</div>
+
-              </div>
+          <div class="md-card uk-margin-medium-bottom">
-              <div>
+            <div class="md-card-content">
-                <div>
+              <div class="uk-overflow-container">
-                  <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-nowrap table_check">
-                    <table class="uk-table uk-table-middle uk-table-striped" style="vertical-align: top !important;">
+                  <thead>
-                      <thead>
+                    <tr>
-                      <tr>
+                      <th class="uk-width-2-10">Repository</th>
-                        <th>Repository</th>
+                      <th class="uk-width-1-10">Validation Type</th>
-                        <th>Validation Type</th>
+                      <th class="uk-width-1-10">Status</th>
-                        <th>Status</th>
+                      <th class="uk-width-1-10">Score</th>
-                        <th>Score</th>
+                      <th class="uk-width-1-10">Started</th>
-                        <th>Started</th>
+                      <th class="uk-width-2-10">Guidelines</th>
-                        <th>Guidelines</th>
+                      <th class="uk-width-1-10">Actions</th>
-                        <th>Actions</th>
+                      <th class="uk-width-1-10"></th>
-                        <th></th>
+                    </tr>
-                      </tr>
+                  </thead>
-                      </thead>
+                  <tbody>
-                      <tr *ngIf="infoMessage">
+                    <tr *ngIf="infoMessage">
-                        <td colspan="7">{{ infoMessage }}</td>
+                      <td colspan="7">{{ infoMessage }}</td>
-                      </tr>
+                    </tr>
-                      <tbody *ngIf="jobsOfUser && jobsOfUser.jobs">
+                    <ng-container *ngIf="jobsOfUser && jobsOfUser.jobs">
-                      <tr class="el-item" *ngFor="let job of jobsOfUser.jobs">
+                      <tr *ngFor="let job of jobsOfUser.jobs">
-                        <td class="uk-table-shrink" style="vertical-align: top !important;">
+                        <td style="vertical-align: top !important;">
-                          <div class="el-title">{{ job.baseUrl }}</div>
+                          <div class="">{{ job.baseUrl }}</div>
                         </td>
-                        <td class="uk-table-shrink" style="vertical-align: top !important;">
+                        <td style="vertical-align: top !important;">
-                          <div *ngIf="job.validationType.includes('C')" class="el-title">OAI Content</div>
+                          <div *ngIf="job.validationType.includes('C')" class="">OAI Content</div>
-                          <div *ngIf="job.validationType.includes('U')" class="el-title">OAI Usage</div>
+                          <div *ngIf="job.validationType.includes('U')" class="">OAI Usage</div>
                         </td>
-                        <td class="uk-table-shrink" style="vertical-align: top !important;">
+                        <td style="vertical-align: top !important;">
-                          <div *ngIf="job.validationType.includes('C')" class="el-title">{{ job.contentJobStatus }}</div>
+                          <div *ngIf="job.validationType.includes('C')" class="">{{ job.contentJobStatus }}</div>
-                          <div *ngIf="job.validationType.includes('U')" class="el-title">{{ job.usageJobStatus }}</div>
+                          <div *ngIf="job.validationType.includes('U')" class="">{{ job.usageJobStatus }}</div>
                         </td>
-                        <td class="uk-table-shrink" style="vertical-align: top !important;">
+                        <td style="vertical-align: top !important;">
-                          <div *ngIf="job.validationType.includes('C')" class="el-title">{{ job.contentJobScore }}</div>
+                          <div *ngIf="job.validationType.includes('C')" class="">{{ job.contentJobScore }}</div>
-                          <div *ngIf="job.validationType.includes('U')" class="el-title">{{ job.usageJobScore }}</div>
+                          <div *ngIf="job.validationType.includes('U')" class="">{{ job.usageJobScore }}</div>
                         </td>
-                        <td class="uk-table-shrink" style="vertical-align: top !important;">
+                        <td style="vertical-align: top !important;">
-                          <div class="el-title">{{ job.started }}</div>
+                          <div class="">{{ job.started }}</div>
                         </td>
-                        <td class="uk-table-shrink" style="vertical-align: top !important;">
+                        <td style="vertical-align: top !important;">
-                          <div class="el-title">{{ job.guidelinesShortName }}</div>
+                          <div class="">{{ job.guidelinesShortName }}</div>
                         </td>
-                        <td class="uk-table-shrink" style="vertical-align: top !important;">
+                        <td style="vertical-align: top !important;">
-                          <div class="el-link">
+                          <div>
-                            <div class="viewDetailsLinkWrapper">
+                            <a [routerLink]="[job.id]">
-                              <a class="viewDetails" [routerLink]="[job.id]">
+                              View Results<i class="fa fa-angle-right uk-margin-small-left"></i>
-                                View Results<i class="fa fa-angle-right"></i>
+                            </a>
-                              </a>
+                          </div>
-                            </div>
+                          <div>
-                            <div>
+                            <a (click)="resubmitJob(job.id.toString(), job.userEmail)">Resubmit Job<i class="fa fa-repeat uk-margin-small-left"></i></a>
-                              <a class="resubmitJob" (click)="resubmitJob(job.id.toString(), job.userEmail)">Resubmit Job<i class="fa fa-repeat"></i></a>
-                            </div>
                           </div>
                         </td>
-                        <td class="uk-table-shrink" style="vertical-align: top !important;">
+                        <td class="uk-text-center">
-                          <img type="image" [src]="getResultImage(job.validationStatus)" title="{{job.validationStatus}}">
+                          <i *ngIf="job.validationStatus === 'ongoing'" title="{{job.validationStatus}}" class="material-icons" style="color: yellow; font-size: 25px;">help</i>
+                          <i *ngIf="job.validationStatus === 'successful'" title="{{job.validationStatus}}" class="material-icons" style="color: green; font-size: 25px;">check_circle</i>
+                          <i *ngIf="job.validationStatus === 'failed'" title="{{job.validationStatus}}" class="material-icons" style="color: red; font-size: 25px;">cancel</i>
+                          <!--<img type="image" [src]="getResultImage(job.validationStatus)" title="{{job.validationStatus}}">-->
                         </td>
                       </tr>
-                      </tbody>
+                    </ng-container>
-                    </table>
+                  </tbody>
-                  </div>
+                </table>
-                </div>
-              </div>
-              <div>
-                <ul class="uk-pagination">
-                  <li>
-                    <a class="uk-link uk-link-muted" (click)="goToPreviousPage()">
-                    <span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">
-                      <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"
-                           icon="pagination-previous" ratio="1"></svg>
-                    </span>
-                      Previous
-                    </a>
-                  </li>
-                  <li class="uk-margin-auto-left">
-                    <a class="uk-link uk-link-muted" (click)="goToNextPage()">
-                      Next
-                      <span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">
-                        <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"
-                             icon="pagination-next" ratio="1"></svg>
-                      </span>
-                    </a>
-                  </li>
-                </ul>
-                <div class="resultsPageLabel">page {{ (totalPages > 0) ? currentPage+1 : 0 }} of {{ totalPages }}</div>
               </div>
+
+              <ul class="uk-pagination uk-margin-top uk-flex-right" uk-margin>
+                <li><a (click)="goToPreviousPage()" class="pagination_arrow"><span uk-pagination-previous></span></a></li>
+                <li class="uk-active"><span>{{ (totalPages > 0) ? currentPage+1 : 0 }}</span></li>
+                <li><a (click)="goToNextPage()" class="pagination_arrow"><span uk-pagination-next></span></a></li>
+              </ul>
+              <!--<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>-->
+                <!--<li class=""><span>page {{ (totalPages > 0) ? currentPage+1 : 0 }} of {{ totalPages }}</span></li>-->
+                <!--<li class="uk-pagination-next"><a (click)="goToNextPage()"><span class="uk-margin-right">Next</span><i class="uk-icon-angle-right"></i></a></li>-->
+              <!--</ul>-->
             </div>
-            <div class="row"></div>
           </div>
 
+          <!--<div class="contentAndPagerPanel">-->
+            <!--<div>-->
+              <!--<ul class="uk-pagination">-->
+                <!--<li>-->
+                  <!--<a class="uk-link uk-link-muted" (click)="goToPreviousPage()">-->
+                      <!--<span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">-->
+                        <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
+                             <!--icon="pagination-previous" ratio="1"></svg>-->
+                      <!--</span>-->
+                    <!--Previous-->
+                  <!--</a>-->
+                <!--</li>-->
+                <!--<li class="uk-margin-auto-left">-->
+                  <!--<a class="uk-link uk-link-muted" (click)="goToNextPage()">-->
+                    <!--Next-->
+                    <!--<span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">-->
+                        <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
+                             <!--icon="pagination-next" ratio="1"></svg>-->
+                      <!--</span>-->
+                  <!--</a>-->
+                <!--</li>-->
+              <!--</ul>-->
+              <!--<div class="resultsPageLabel">page {{ (totalPages > 0) ? currentPage+1 : 0 }} of {{ totalPages }}</div>-->
+            <!--</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>Repository</th>-->
+                      <!--<th>Validation Type</th>-->
+                      <!--<th>Status</th>-->
+                      <!--<th>Score</th>-->
+                      <!--<th>Started</th>-->
+                      <!--<th>Guidelines</th>-->
+                      <!--<th>Actions</th>-->
+                      <!--<th></th>-->
+                    <!--</tr>-->
+                    <!--</thead>-->
+                    <!--<tr *ngIf="infoMessage">-->
+                      <!--<td colspan="7">{{ infoMessage }}</td>-->
+                    <!--</tr>-->
+                    <!--<tbody *ngIf="jobsOfUser && jobsOfUser.jobs">-->
+                    <!--<tr class="el-item" *ngFor="let job of jobsOfUser.jobs">-->
+                      <!--<td class="uk-table-shrink" style="vertical-align: top !important;">-->
+                        <!--<div class="el-title">{{ job.baseUrl }}</div>-->
+                      <!--</td>-->
+                      <!--<td class="uk-table-shrink" style="vertical-align: top !important;">-->
+                        <!--<div *ngIf="job.validationType.includes('C')" class="el-title">OAI Content</div>-->
+                        <!--<div *ngIf="job.validationType.includes('U')" class="el-title">OAI Usage</div>-->
+                      <!--</td>-->
+                      <!--<td class="uk-table-shrink" style="vertical-align: top !important;">-->
+                        <!--<div *ngIf="job.validationType.includes('C')" class="el-title">{{ job.contentJobStatus }}</div>-->
+                        <!--<div *ngIf="job.validationType.includes('U')" class="el-title">{{ job.usageJobStatus }}</div>-->
+                      <!--</td>-->
+                      <!--<td class="uk-table-shrink" style="vertical-align: top !important;">-->
+                        <!--<div *ngIf="job.validationType.includes('C')" class="el-title">{{ job.contentJobScore }}</div>-->
+                        <!--<div *ngIf="job.validationType.includes('U')" class="el-title">{{ job.usageJobScore }}</div>-->
+                      <!--</td>-->
+                      <!--<td class="uk-table-shrink" style="vertical-align: top !important;">-->
+                        <!--<div class="el-title">{{ job.started }}</div>-->
+                      <!--</td>-->
+                      <!--<td class="uk-table-shrink" style="vertical-align: top !important;">-->
+                        <!--<div class="el-title">{{ job.guidelinesShortName }}</div>-->
+                      <!--</td>-->
+                      <!--<td class="uk-table-shrink" style="vertical-align: top !important;">-->
+                        <!--<div class="el-link">-->
+                          <!--<div class="viewDetailsLinkWrapper">-->
+                            <!--<a class="viewDetails" [routerLink]="[job.id]">-->
+                              <!--View Results<i class="fa fa-angle-right"></i>-->
+                            <!--</a>-->
+                          <!--</div>-->
+                          <!--<div>-->
+                            <!--<a class="resubmitJob" (click)="resubmitJob(job.id.toString(), job.userEmail)">Resubmit Job<i class="fa fa-repeat"></i></a>-->
+                          <!--</div>-->
+                        <!--</div>-->
+                      <!--</td>-->
+                      <!--<td class="uk-table-shrink" style="vertical-align: top !important;">-->
+                        <!--<img type="image" [src]="getResultImage(job.validationStatus)" title="{{job.validationStatus}}">-->
+                      <!--</td>-->
+                    <!--</tr>-->
+                    <!--</tbody>-->
+                  <!--</table>-->
+                <!--</div>-->
+              <!--</div>-->
+            <!--</div>-->
+            <!--<div>-->
+              <!--<ul class="uk-pagination">-->
+                <!--<li>-->
+                  <!--<a class="uk-link uk-link-muted" (click)="goToPreviousPage()">-->
+                    <!--<span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">-->
+                      <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
+                           <!--icon="pagination-previous" ratio="1"></svg>-->
+                    <!--</span>-->
+                    <!--Previous-->
+                  <!--</a>-->
+                <!--</li>-->
+                <!--<li class="uk-margin-auto-left">-->
+                  <!--<a class="uk-link uk-link-muted" (click)="goToNextPage()">-->
+                    <!--Next-->
+                    <!--<span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">-->
+                        <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
+                             <!--icon="pagination-next" ratio="1"></svg>-->
+                      <!--</span>-->
+                  <!--</a>-->
+                <!--</li>-->
+              <!--</ul>-->
+              <!--<div class="resultsPageLabel">page {{ (totalPages > 0) ? currentPage+1 : 0 }} of {{ totalPages }}</div>-->
+            <!--</div>-->
+          <!--</div>-->
+          <!--<div class="row"></div>-->
         </div>
 
-        <!-- RIGHT HELP CONTENT -->
-        <aside-help-content #rightHelperContent [position]="'right'"
-                            [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-        </aside-help-content>
-
       </div>
-    </div>
 
+      <!-- RIGHT HELP CONTENT -->
+      <aside-help-content #rightHelperContent [position]="'right'"
+                          [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+      </aside-help-content>
+
+    </div>
 
     <!-- BOTTOM HELP CONTENT -->
     <help-content #bottomHelperContent [position]="'bottom'"
                   [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
     </help-content>
 
-
   </div>
 </div>
 

src/app/pages/compatibility/compatibility-validation-history.component.ts

@@ -39,6 +39,11 @@ export class CompatibilityValidationHistoryComponent  implements OnInit {
 
   ngOnInit() {
     this.loadTable();
+    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");
   }
 
   loadTable() {
@@ -147,10 +152,18 @@ export class CompatibilityValidationHistoryComponent  implements OnInit {
   }
 
   getResultImage(status: string) {
+    // if (status === 'ongoing') {
+    //   return `../../../assets/imgs/icon_colours-question.jpg`;
+    // } else if (status === 'successful') {
+    //     return `../../../assets/imgs/icon_colours-check.jpg`;
+    // } else {
+    //   return `../../../assets/imgs/icon_colours-x.jpg`;
+    // }
+
     if (status === 'ongoing') {
       return `../../../assets/imgs/icon_colours-question.jpg`;
     } else if (status === 'successful') {
-        return `../../../assets/imgs/icon_colours-check.jpg`;
+      return `check_circle`;
     } else {
       return `../../../assets/imgs/icon_colours-x.jpg`;
     }

src/app/pages/compatibility/compatibility-validation-results.component.html

@@ -1,248 +1,280 @@
-<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
+<div id="page_content">
-  <div class="uk-width-1-1@m uk-first-column">
+  <div id="page_content_inner">
-
+    <h2 class="heading_b uk-margin-bottom">Validation results for</h2>
-    <h1 class="uk-h2">Validation results for</h1>
 
     <!-- TOP HELP CONTENT -->
     <help-content #topHelperContent [position]="'top'"
                   [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
     </help-content>
 
-    <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
+    <div class="uk-grid">
-      <div class="uk-grid">
 
-        <!-- LEFT HELP CONTENT -->
+      <!-- LEFT HELP CONTENT -->
-        <aside-help-content #leftHelperContent [position]="'left'"
+      <aside-help-content #leftHelperContent [position]="'left'"
-                            [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+                          [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-        </aside-help-content>
+      </aside-help-content>
 
-        <!-- MIDDLE -->
+      <!-- MIDDLE -->
-        <div class=" uk-width-expand@m">
+      <div class=" uk-width-expand@m">
 
-          <div>
+        <div>
-            <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>
+          <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>
-            <div *ngIf="loadingMessage" class="loading-big">
+          <div *ngIf="loadingMessage" class="loading-big">
-              <div class="loader-big"
+            <div class="loader-big"
-                   style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">
+                 style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">
-                {{ loadingMessage }}
+              {{ loadingMessage }}
-              </div>
-              <div class="whiteFilm"></div>
-            </div>
-            <div *ngIf="jobSummary">
-              <div>
-                <div>
-                  <h4 class="uk-h4 uk-text-primary uk-scrollspy-inview uk-animation-slide-top-medium"
-                      uk-scrollspy-class=""><span>{{jobSummary.baseUrl}}</span></h4>
-                  <div class="uk-margin-small">by {{jobSummary.userEmail}}</div>
-                </div>
-              </div>
-              <div>
-                <div>
-                  <hr class="uk-scrollspy-inview uk-animation-slide-bottom-small" uk-scrollspy-class="">
-                  <div>
-                    <span>{{ jobSummary.jobType }}</span>
-                    |
-                    <span>{{ jobSummary.guidelinesShortName }}</span>
-                    |
-                    <span>Validation set: {{ jobSummary.validationSet }}</span>
-                  </div>
-                  <div>
-                    <span>Started: {{ jobSummary.started }}</span>
-                    ,
-                    <span>Ended: {{ jobSummary.ended ? jobSummary.ended : '--' }}</span>
-                    ,
-                    <span>Duration: {{ jobSummary.duration }}</span>
-                  </div>
-                  <div style="font-size: 120%;">
-                    <span>Records tested: {{ jobSummary.recordsTested }}</span>
-                  </div>
-                  <div>
-                    <span class="uk-label uk-margin-right">Score for content: {{ jobSummary.contentJobScore }}</span>
-                    <span class="uk-label">Score for usage: {{ jobSummary.usageJobScore }}</span>
-                  </div>
-                  <hr class="uk-scrollspy-inview uk-animation-slide-bottom-small" uk-scrollspy-class="">
-                </div>
-              </div>
-              <div>
-                <ul class="uk-margin el-nav uk-tab" uk-switcher="connect: .uk-switcher">
-                  <li routerLinkActive="uk-active">
-                    <a href="#">for Content</a>
-                  </li>
-                  <li routerLinkActive="uk-active">
-                    <a href="#">for Usage</a>
-                  </li>
-                </ul>
-                <ul class="uk-switcher">
-                  <li class="el-item">
-                    <div class="uk-grid-margin uk-grid uk-grid-stack">
-                      <div class="uk-width-1-1@m uk-first-column">
-                        <div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium">
-                          <div *ngIf="noContent" class="uk-alert">{{ noContent }}</div>
-                          <div *ngIf="contentResults && contentResults.length > 0">
-                            <table class="uk-table uk-table-striped uk-table-middle rules-table">
-                              <thead>
-                              <tr>
-                                <th>Rule Name</th>
-                                <th class="uk-text-nowrap">Rule Description</th>
-                                <th class="uk-text-nowrap">Rule Weight</th>
-                                <th class="uk-text-nowrap"># of records</th>
-                                <th class="uk-text-nowrap">Status</th>
-                              </tr>
-                              </thead>
-                              <tbody>
-                              <tr *ngFor="let contentRule of contentResults" class="el-item">
-                                <td class="uk-table-shrink">
-                                  <div class="el-title">{{ contentRule.name }}</div>
-                                </td>
-                                <td class="uk-table-shrink">
-                                  <div class="el-title" [innerHtml]="contentRule.description">
-                                  </div>
-                                </td>
-                                <td class="uk-table-shrink">
-                                  <div class="el-title">{{ contentRule.weight }}</div>
-                                </td>
-                                <td class="uk-table-shrink">
-                                  <div class="el-title">{{ contentRule.successes }}</div>
-                                </td>
-                                <td class="uk-table-shrink">
-                                  <div *ngIf="!contentRule.hasErrors" class="el-title">
-                                    <span uk-icon="icon: check" style="color: #4b991f" class="uk-icon">
-                                      <!--<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                                           icon="check" ratio="1">
-                                        <polyline fill="none" stroke="#000" stroke-width="1.1"
-                                                  points="4,10 8,15 17,4"></polyline>
-                                      </svg>-->
-                                    </span>
-                                  </div>
-                                  <div *ngIf="contentRule.hasErrors && contentRule.mandatory">
-                                    <span uk-icon="icon: close" style="color: #cd242b" class="uk-icon">
-                                      <!--<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                                           icon="close" ratio="1">
-                                        <path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path>
-                                        <path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path>
-                                      </svg>-->
-                                    </span>
-                                    <a class="errorlink viewErrors uk-display-block"
-                                       (click)="viewErrors(contentRule)"><span>View Errors</span></a>
-                                  </div>
-                                  <div *ngIf="contentRule.hasErrors && !contentRule.mandatory">
-                                    <span uk-icon="icon: warning" style="color: #e9d60d" class="uk-icon">
-                                      <!--<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                                           icon="warning" ratio="1">
-                                        <circle cx="10" cy="14" r="1"></circle>
-                                        <circle fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle>
-                                        <path
-                                          d="M10.97,7.72 C10.85,9.54 10.56,11.29 10.56,11.29 C10.51,11.87 10.27,12 9.99,12 C9.69,12 9.49,11.87 9.43,11.29 C9.43,11.29 9.16,9.54 9.03,7.72 C8.96,6.54 9.03,6 9.03,6 C9.03,5.45 9.46,5.02 9.99,5 C10.53,5.01 10.97,5.44 10.97,6 C10.97,6 11.04,6.54 10.97,7.72 L10.97,7.72 Z"></path>
-                                      </svg>-->
-                                    </span>
-                                    <a class="warninglink viewErrors uk-display-block"
-                                       (click)="viewErrors(contentRule)"><span>View Warnings</span></a>
-                                  </div>
-                                </td>
-                              </tr>
-                              </tbody>
-                            </table>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </li>
-                  <li class="el-item">
-                    <div class="uk-grid-margin uk-grid uk-grid-stack">
-                      <div class="uk-width-1-1@m uk-first-column">
-                        <div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium">
-                          <div *ngIf="noUsage" class="uk-alert">{{ noUsage }}</div>
-                          <div *ngIf="usageResults && usageResults.length > 0">
-                            <table class="uk-table uk-table-striped uk-table-middle rules-table">
-                              <thead>
-                              <tr>
-                                <th>Rule Name</th>
-                                <th class="uk-text-nowrap">Rule Description</th>
-                                <th class="uk-text-nowrap">Rule Weight</th>
-                                <th class="uk-text-nowrap"># of records</th>
-                                <th class="uk-text-nowrap">Status</th>
-                              </tr>
-                              </thead>
-                              <tbody>
-                              <tr *ngFor="let usageRule of usageResults" class="el-item">
-                                <td class="uk-table-shrink">
-                                  <div class="el-title">{{ usageRule.name }}</div>
-                                </td>
-                                <td class="uk-table-shrink">
-                                  <div class="el-title" [innerHtml]="usageRule.description">
-                                  </div>
-                                </td>
-                                <td class="uk-table-shrink">
-                                  <div class="el-title">{{ usageRule.weight }}</div>
-                                </td>
-                                <td class="uk-table-shrink">
-                                  <div class="el-title">{{ usageRule.successes }}</div>
-                                </td>
-                                <td class="uk-table-shrink">
-                                  <div *ngIf="!usageRule.hasErrors" class="el-title">
-                                    <span uk-icon="icon: check" style="color: #4b991f" class="uk-icon">
-                                      <!--<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                                           icon="check" ratio="1">
-                                        <polyline fill="none" stroke="#000" stroke-width="1.1"
-                                                  points="4,10 8,15 17,4"></polyline>
-                                      </svg>-->
-                                    </span>
-                                  </div>
-                                  <div *ngIf="usageRule.hasErrors && usageRule.mandatory">
-                                <span uk-icon="icon: close" style="color: #cd242b" class="uk-icon">
-                                  <!--<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                                       icon="close" ratio="1">
-                                    <path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path>
-                                    <path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path>
-                                  </svg>-->
-                                </span>
-                                    <a class="errorlink viewErrors uk-display-block"
-                                       (click)="viewErrors(usageRule)"><span>View Errors</span></a>
-                                  </div>
-                                  <div *ngIf="usageRule.hasErrors && !usageRule.mandatory">
-                                    <span uk-icon="icon: warning" style="color: #e9d60d" class="uk-icon">
-                                      <!--<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                                           icon="warning" ratio="1">
-                                        <circle cx="10" cy="14" r="1"></circle>
-                                        <circle fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle>
-                                        <path
-                                          d="M10.97,7.72 C10.85,9.54 10.56,11.29 10.56,11.29 C10.51,11.87 10.27,12 9.99,12 C9.69,12 9.49,11.87 9.43,11.29 C9.43,11.29 9.16,9.54 9.03,7.72 C8.96,6.54 9.03,6 9.03,6 C9.03,5.45 9.46,5.02 9.99,5 C10.53,5.01 10.97,5.44 10.97,6 C10.97,6 11.04,6.54 10.97,7.72 L10.97,7.72 Z"></path>
-                                      </svg>-->
-                                    </span>
-                                    <a class="warninglink viewErrors uk-display-block"
-                                       (click)="viewErrors(usageRule)"><span>View Warnings</span></a>
-                                  </div>
-                                </td>
-                              </tr>
-                              </tbody>
-                            </table>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </li>
-                </ul>
-              </div>
             </div>
+            <div class="transparentFilm"></div>
           </div>
 
+
+          <div *ngIf="jobSummary">
+
+            <div class="uk-margin-medium-bottom">
+              <h4 class="uk-h4 uk-text-primary uk-scrollspy-inview uk-animation-slide-top-medium"
+                  uk-scrollspy-class=""><span>{{jobSummary.baseUrl}}</span></h4>
+              <div class="uk-margin-small">by {{jobSummary.userEmail}}</div>
+            </div>
+
+            <div class="uk-grid">
+              <div class="uk-width-3-4">
+                <div id="container_C" class="md-card tabs">
+                  <div class="md-card-content">
+                    <highcharts-chart
+                      [Highcharts] = "HighchartsForContent"
+                      [options] = "chartOptionsForContent"
+                      style="width: 100%; height: 400px; display: block; margin-top: 20px"
+                    ></highcharts-chart>
+                  </div>
+                </div>
+              </div>
+              <div class="uk-width-1-4">
+                <div id="container_U" class="md-card tabs">
+                  <div class="md-card-content">
+                    <highcharts-chart
+                      [Highcharts] = "HighchartsForUsage"
+                      [options] = "chartOptionsForUsage"
+                      style="width: 100%; height: 400px; display: block; margin-top: 20px"
+                    ></highcharts-chart>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+
+
+
+            <div class="md-card tabs">
+              <div class="md-card-content">
+
+                <div class="uk-grid uk-grid-divider" data-uk-grid-margin="">
+                  <div class="uk-width-3-4@m uk-row-first">
+                    <ul class="uk-tab" data-uk-tab="{connect:'#tabs_anim4', animation:'slide-left'}">
+                      <li id="forContent" class="uk-active" aria-expanded="true"><a href="#">for Content</a></li>
+                      <li id="forUsage" aria-expanded="false" class=""><a href="#">for Usage</a></li>
+                    </ul>
+                    <ul id="tabs_anim4" class="uk-switcher uk-margin">
+                      <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+                        <div class="uk-grid-margin uk-grid uk-grid-stack">
+                          <div class="uk-width-1-1@m uk-first-column">
+                            <div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium">
+                              <div *ngIf="noContent" class="uk-alert">{{ noContent }}</div>
+                              <div *ngIf="contentResults && contentResults.length > 0">
+                                <table class="uk-table uk-table-striped uk-table-middle rules-table">
+                                  <thead>
+                                  <tr>
+                                    <th class="uk-width-2-10">Rule Name</th>
+                                    <th class="uk-width-4-10 uk-text-nowrap">Rule Description</th>
+                                    <th class="uk-width-1-10 uk-text-nowrap">Rule Weight</th>
+                                    <th class="uk-width-1-10 uk-text-nowrap"># of records</th>
+                                    <th class="uk-width-2-10 uk-text-nowrap">Status</th>
+                                  </tr>
+                                  </thead>
+                                  <tbody>
+                                  <tr *ngFor="let contentRule of contentResults" class="el-item">
+                                    <td class="uk-table-shrink">
+                                      <div class="el-title">{{ contentRule.name }}</div>
+                                    </td>
+                                    <td class="uk-table-shrink">
+                                      <div class="el-title" [innerHtml]="contentRule.description">
+                                      </div>
+                                    </td>
+                                    <td class="uk-table-shrink">
+                                      <div class="el-title">{{ contentRule.weight }}</div>
+                                    </td>
+                                    <td class="uk-table-shrink">
+                                      <div class="el-title">{{ contentRule.successes }}</div>
+                                    </td>
+                                    <td class="uk-table-shrink">
+                                      <div *ngIf="!contentRule.hasErrors" class="el-title">
+                                        <i class="material-icons" style="color: #4b991f">check_circle_outline</i>
+                                      </div>
+                                      <div *ngIf="contentRule.hasErrors && contentRule.mandatory">
+                                        <i class="material-icons" style="color: #cd242b">highlight_off</i>
+                                        <a class="errorlink viewErrors uk-margin-left"
+                                           (click)="viewErrors(contentRule)"><span>View Errors</span></a>
+                                      </div>
+                                      <div *ngIf="contentRule.hasErrors && !contentRule.mandatory">
+                                        <i class="material-icons" style="color: #e9d60d">error_outline</i>
+                                        <a class="warninglink viewErrors uk-margin-left"
+                                           (click)="viewErrors(contentRule)"><span>View Warnings</span></a>
+                                      </div>
+                                    </td>
+                                  </tr>
+                                  </tbody>
+                                </table>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </li>
+                      <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                        <div class="uk-grid-margin uk-grid uk-grid-stack">
+                          <div class="uk-width-1-1@m uk-first-column">
+                            <div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium">
+                              <div *ngIf="noUsage" class="uk-alert">{{ noUsage }}</div>
+                              <div *ngIf="usageResults && usageResults.length > 0">
+                                <table class="uk-table uk-table-striped uk-table-middle rules-table">
+                                  <thead>
+                                  <tr>
+                                    <th class="uk-width-2-10">Rule Name</th>
+                                    <th class="uk-width-4-10 uk-text-nowrap">Rule Description</th>
+                                    <th class="uk-width-1-10 uk-text-nowrap">Rule Weight</th>
+                                    <th class="uk-width-1-10 uk-text-nowrap"># of records</th>
+                                    <th class="uk-width-2-10 uk-text-nowrap">Status</th>
+                                  </tr>
+                                  </thead>
+                                  <tbody>
+                                  <tr *ngFor="let usageRule of usageResults" class="el-item">
+                                    <td class="uk-table-shrink">
+                                      <div class="el-title">{{ usageRule.name }}</div>
+                                    </td>
+                                    <td class="uk-table-shrink">
+                                      <div class="el-title" [innerHtml]="usageRule.description">
+                                      </div>
+                                    </td>
+                                    <td class="uk-table-shrink">
+                                      <div class="el-title">{{ usageRule.weight }}</div>
+                                    </td>
+                                    <td class="uk-table-shrink">
+                                      <div class="el-title">{{ usageRule.successes }}</div>
+                                    </td>
+                                    <td class="uk-table-shrink">
+                                      <div *ngIf="!usageRule.hasErrors" class="el-title">
+                                        <i class="material-icons" style="color: #4b991f">check_circle_outline</i>
+                                      </div>
+                                      <div *ngIf="usageRule.hasErrors && usageRule.mandatory">
+                                        <i class="material-icons" style="color: #cd242b">highlight_off</i>
+                                        <a class="errorlink viewErrors uk-margin-left"
+                                           (click)="viewErrors(usageRule)"><span>View Errors</span></a>
+                                      </div>
+                                      <div *ngIf="usageRule.hasErrors && !usageRule.mandatory">
+                                        <i class="material-icons" style="color: #e9d60d">error_outline</i>
+                                        <a class="warninglink viewErrors uk-margin-left"
+                                           (click)="viewErrors(usageRule)"><span>View Warnings</span></a>
+                                      </div>
+                                    </td>
+                                  </tr>
+                                  </tbody>
+                                </table>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </li>
+                    </ul>
+                  </div>
+                  <div class="uk-width-1-4@m">
+                    <div class="uk-margin-medium-bottom">
+                      <p>
+                        Score for content:
+                        <span *ngIf="jobSummary.contentJobScore>=50" class="uk-badge uk-badge-success uk-text-upper uk-margin-small-left">{{ jobSummary.contentJobScore }}</span>
+                        <span *ngIf="jobSummary.contentJobScore<50" class="uk-badge uk-badge-danger uk-text-upper uk-margin-small-left">{{ jobSummary.contentJobScore }}</span>
+                      </p>
+                      <p>
+                        Score for usage:
+                        <span *ngIf="jobSummary.usageJobScore>=50" class="uk-badge uk-badge-success uk-text-upper uk-margin-small-left">{{ jobSummary.usageJobScore }}</span>
+                        <span *ngIf="jobSummary.usageJobScore<50" class="uk-badge uk-badge-danger uk-text-upper uk-margin-small-left">{{ jobSummary.usageJobScore }}</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">
+                          <!--<img class="md-user-image md-list-addon-avatar dense-image dense-ready" src="assets/img/avatars/avatar_02_tn@2x.png" alt="" data-dense-cap="2">-->
+                        </div>
+                        <div class="md-list-content">
+                          <span class="md-list-heading">{{ jobSummary.jobType }}</span>
+                        </div>
+                      </li>
+                      <li>
+                        <div class="md-list-addon-element">
+                          <i class="md-list-addon-icon material-icons">gavel</i>
+                        </div>
+                        <div class="md-list-content">
+                          <span class="md-list-heading">{{ jobSummary.guidelinesShortName }}</span>
+                          <span class="uk-text-small uk-text-muted">Guidelines</span>
+                        </div>
+                      </li>
+                      <li>
+                        <div class="md-list-addon-element">
+                          <i class="md-list-addon-icon material-icons">collections_bookmark</i>
+                        </div>
+                        <div class="md-list-content">
+                          <span class="md-list-heading">{{ jobSummary.validationSet }}</span>
+                          <span class="uk-text-small uk-text-muted">Validation set</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 uk-margin-small-bottom">
+                          <span class="md-list-heading">{{ jobSummary.started }}</span>
+                          <span class="uk-text-small uk-text-muted">Started</span>
+                        </div>
+                        <div class="md-list-content">
+                          <span class="md-list-heading">{{ jobSummary.ended ? jobSummary.ended : '--' }}</span>
+                          <span class="uk-text-small uk-text-muted">Ended</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">{{ jobSummary.duration }}</span>
+                          <span class="uk-text-small uk-text-muted">Duration</span>
+                        </div>
+                      </li>
+                    </ul>
+                  </div>
+
+                </div>
+
+              </div>
+            </div>
+
+          </div>
+
+
         </div>
 
-        <!-- RIGHT HELP CONTENT -->
-        <aside-help-content #rightHelperContent [position]="'right'"
-                            [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-        </aside-help-content>
-
       </div>
-    </div>
 
+      <!-- RIGHT HELP CONTENT -->
+      <aside-help-content #rightHelperContent [position]="'right'"
+                          [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+      </aside-help-content>
+
+    </div>
 
     <!-- BOTTOM HELP CONTENT -->
     <help-content #bottomHelperContent [position]="'bottom'"
                   [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
     </help-content>
 
-
   </div>
 </div>
 

src/app/pages/compatibility/compatibility-validation-results.component.ts

@@ -6,6 +6,8 @@ import { loadingJobSummary, loadingJobSummaryError, noContentRulesResults,
          noUsageRulesResults } from '../../domain/shared-messages';
 import { ConfirmationDialogComponent } from '../../shared/reusablecomponents/confirmation-dialog.component';
 import { AuthenticationService } from '../../services/authentication.service';
+import * as Highcharts from 'highcharts';
+import {text} from '@angular/core/src/render3/instructions';
 
 @Component({
   selector: 'app-compatibility-validation-results',
@@ -27,6 +29,18 @@ export class CompatibilityValidationResultsComponent implements OnInit {
   modalTitle: string;
   isModalShown: boolean;
 
+  ruleNameForContent: string[] = [];
+  ruleNameForUsage: string[] = [];
+  unprocessedDataForContent: string[] = [];
+  unprocessedDataForUsage: string[] = [];
+  processedDataForContent: number[] = [];
+  processedDataForUsage: number[] = [];
+
+  HighchartsForContent: typeof Highcharts = Highcharts;
+  HighchartsForUsage: typeof Highcharts = Highcharts;
+  chartOptionsForContent: Highcharts.Options;
+  chartOptionsForUsage: Highcharts.Options;
+
   @ViewChild('checkErrors')
   public checkErrors: ConfirmationDialogComponent;
 
@@ -43,6 +57,11 @@ export class CompatibilityValidationResultsComponent implements OnInit {
       this.authService.redirectUrl = '/compatibility/browseHistory/' + id;
       this.authService.loginWithState();
     }
+    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");
   }
 
   getJobInfo() {
@@ -56,8 +75,12 @@ export class CompatibilityValidationResultsComponent implements OnInit {
             entry => {
               if (entry.type === 'content') {
                 this.contentResults.push(entry);
+                this.ruleNameForContent.push(entry.name);
+                this.unprocessedDataForContent.push(entry.successes.split('/')[0]);
               } else if (entry.type === 'usage') {
                 this.usageResults.push(entry);
+                this.ruleNameForUsage.push(entry.name);
+                this.unprocessedDataForUsage.push(entry.successes.split('/')[0]);
               }
             }
           );
@@ -72,9 +95,25 @@ export class CompatibilityValidationResultsComponent implements OnInit {
         this.loadingMessage = '';
         if (!this.contentResults.length) {
           this.noContent = noContentRulesResults;
+        } else {
+          this.processedDataForContent = this.unprocessedDataForContent.map(Number);
+          this.chartOptionsForContent = {
+            title: { text: ''},
+            yAxis: { title: { text: 'Number of records' } },
+            xAxis: { categories: this.ruleNameForContent },
+            series: [{ name: 'For content', data: this.processedDataForContent, type: 'column' }]
+          };
         }
         if (!this.usageResults.length) {
           this.noUsage = noUsageRulesResults;
+        } else {
+          this.processedDataForUsage = this.unprocessedDataForUsage.map(Number);
+          this.chartOptionsForUsage = {
+            title: { text: ''},
+            yAxis: { title: { text: 'Number of records' } },
+            xAxis: { categories: this.ruleNameForUsage },
+            series: [{ name: 'For usage', data: this.processedDataForUsage, type: 'column' }]
+          };
         }
         /*if ( this.authService.activateFrontAuthorization && (this.authService.getUserEmail() !== this.jobSummary.userEmail.trim()) ) {
           this.router.navigateByUrl('/403-forbidden', { skipLocationChange: true });

src/app/pages/compatibility/compatibility.module.ts

@@ -1,38 +1,35 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { TabsModule } from 'ngx-bootstrap';
-import { ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CompatibilityRouting } from './compatibility.routing';
 import { ReusableComponentsModule } from '../../shared/reusablecomponents/reusable-components.module';
 import { CompatibilityComponent } from './compatibility.component';
 import { CompatibilityValidateComponent } from './compatibility-validate.component';
 import { CompatibilityValidationHistoryComponent } from './compatibility-validation-history.component';
 import { CompatibilityValidationResultsComponent } from './compatibility-validation-results.component';
-import { CompatibilityMonitorComponent } from './compatibility-monitor.component';
-import { CompatibilityMonitorRepoComponent } from './compatibility-monitor-repo.component';
-import { CompatibilityMonitorFullHistoryRepoComponent } from './compatibility-monitor-fullHistory-repo.component';
 import { CompatibilityValidateTypeComponent } from './compatibility-validate-type.component';
 import { CompatibilityValidateStep1Component } from './compatibility-validate-forms/compatibility-validate-step1.component';
 import { CompatibilityValidateStep2Component } from './compatibility-validate-forms/compatibility-validate-step2.component';
 import { CompatibilityValidateStep3Component } from './compatibility-validate-forms/compatibility-validate-step3.component';
 import { CompatibilityValidateStep3CrisComponent } from './compatibility-validate-forms/compatibility-validate-step3-cris.component';
+import {HighchartsChartModule} from 'highcharts-angular';
 
 @NgModule ({
   imports: [
     CommonModule,
     TabsModule.forRoot(),
+    FormsModule,
     ReactiveFormsModule,
     CompatibilityRouting,
-    ReusableComponentsModule
+    ReusableComponentsModule,
+    HighchartsChartModule
   ],
   declarations: [
     CompatibilityComponent,
     CompatibilityValidateComponent,
     CompatibilityValidationHistoryComponent,
     CompatibilityValidationResultsComponent,
-    CompatibilityMonitorComponent,
-    CompatibilityMonitorRepoComponent,
-    CompatibilityMonitorFullHistoryRepoComponent,
     CompatibilityValidateTypeComponent,
     CompatibilityValidateStep1Component,
     CompatibilityValidateStep2Component,

src/app/pages/compatibility/compatibility.routing.ts

@@ -5,9 +5,6 @@ import { CompatibilityComponent } from './compatibility.component';
 import { CompatibilityValidateTypeComponent } from './compatibility-validate-type.component';
 import { CompatibilityValidationHistoryComponent } from './compatibility-validation-history.component';
 import { CompatibilityValidationResultsComponent } from './compatibility-validation-results.component';
-import { CompatibilityMonitorComponent } from './compatibility-monitor.component';
-import { CompatibilityMonitorRepoComponent } from './compatibility-monitor-repo.component';
-import { CompatibilityMonitorFullHistoryRepoComponent } from './compatibility-monitor-fullHistory-repo.component';
 import { CompatibilityValidateComponent } from './compatibility-validate.component';
 import { AuthGuardService } from '../../services/auth-guard.service';
 
@@ -35,21 +32,21 @@ const compatibilityRoutes: Routes = [
         path: 'browseHistory/:id',
         component: CompatibilityValidationResultsComponent
       },
-      {
+      // {
-        path: 'monitor',
+      //   path: 'monitor',
-        component: CompatibilityMonitorComponent,
+      //   component: CompatibilityMonitorComponent,
-        canActivate: [AuthGuardService]
+      //   canActivate: [AuthGuardService]
-      },
+      // },
-      {
+      // {
-        path: 'monitor/:id',
+      //   path: 'monitor/:id',
-        component: CompatibilityMonitorRepoComponent,
+      //   component: CompatibilityMonitorRepoComponent,
-        canActivate: [AuthGuardService]
+      //   canActivate: [AuthGuardService]
-      },
+      // },
-      {
+      // {
-        path: 'monitor/fullHistory/:id',
+      //   path: 'monitor/fullHistory/:id',
-        component: CompatibilityMonitorFullHistoryRepoComponent,
+      //   component: CompatibilityMonitorFullHistoryRepoComponent,
-        canActivate: [AuthGuardService]
+      //   canActivate: [AuthGuardService]
-      }
+      // }
     ]
   }
 ];

src/app/pages/content/content-events-of-repo-eventslist.component.html

@@ -1,524 +0,0 @@
-<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
-  <div class="uk-width-1-1@m uk-first-column">
-
-    <h1 class="uk-h2">{{ repoName }}</h1>
-    <div class="uk-text uk-text-small uk-text-secondary">{{ topic }}</div>
-
-    <!-- TOP HELP CONTENT -->
-        <help-content #topHelperContent [position]="'top'"
-                      [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
-        </help-content>
-
-    <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
-      <div class="uk-grid">
-
-        <!-- LEFT HELP CONTENT -->
-                <aside-help-content #leftHelperContent [position]="'left'"
-                                    [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-                </aside-help-content>
-
-        <!-- MIDDLE -->
-        <div class=" uk-width-expand@m">
-
-          <div>
-            <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{errorMessage}}</div>
-            <div *ngIf="successMessage" class="uk-alert uk-alert-success">{{successMessage}}</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="whiteFilm"></div>
-            </div>
-            <div *ngIf="noEvents" class="uk-alert">{{ noEvents }}</div>
-            <div *ngIf="!noEvents && !loadingMessage && !errorMessage && eventsPage && eventsPage.totalPages>0" class="events-results">
-              <div class="numberOfEventsLabel">
-
-                <!-- RESTORE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE -->
-                <!--<span>Showing {{(eventsPage.currPage*10)+1 }}-{{ ( (eventsPage.total < 10) || (eventsPage.total < (eventsPage.currPage+1)*10) ) ? (eventsPage.total) : (eventsPage.currPage+1)*10 }} of {{ eventsPage.total }} results</span>-->
-
-                <!-- DELETE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE -->
-                <span>Showing {{(currentPage*10)+1 }}-{{ ( (eventsPage.total < 10) || (eventsPage.total < (currentPage+1)*10) ) ? (eventsPage.total) : (currentPage+1)*10 }} of {{ eventsPage.total }} results</span>
-
-                <span class="uk-float-right">
-                  <button id="subscribe" type="button" class="uk-button uk-button-primary uk-button-small" (click)="showSubscriptionModal()">Subscribe to these events</button>
-                </span>
-              </div>
-              <div>
-                <ul class="uk-pagination">
-                  <li>
-                    <a class="uk-link uk-link-muted" (click)="goToPreviousPage()">
-                <span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">
-                  <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" icon="pagination-previous" ratio="1"></svg>
-                </span>
-                      Previous
-                    </a>
-                  </li>
-                  <li class="uk-margin-auto-left">
-                    <a class="uk-link uk-link-muted" (click)="goToNextPage()">
-                      Next
-                      <span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">
-                        <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" icon="pagination-next" ratio="1"></svg>
-                      </span>
-                    </a>
-                  </li>
-                </ul>
-
-                <!-- RESTORE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE -->
-                <!--<div class="resultsPageLabel">page {{ eventsPage.currPage+1 }} of {{ eventsPage.totalPages }}</div>-->
-
-                <!-- DELETE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE -->
-                <div class="resultsPageLabel">page {{ (eventsPage.totalPages > 0) ? currentPage+1 : 0 }} of {{ eventsPage.totalPages }}</div>
-
-              </div>
-              <div *ngFor="let event of eventsPage.values" class="events-list">
-                <div class="uk-card uk-card-default well uk-scrollspy-inview uk-animation-slide-top-medium">
-                  <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
-                    <div class="uk-width-1-1@m uk-first-column">
-                      <p class="text-right"><span class="uk-label">Trust: {{ event.trust }}</span></p>
-                      <div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium">
-                        <table class="uk-table uk-table-striped uk-table-middle">
-                          <tbody>
-                          <tr class="el-item">
-                            <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">ID</strong></td>
-                            <td class="uk-table-shrink">
-                              <div class="el-title">{{ event.publication.originalId }}</div>
-                            </td>
-                          </tr>
-                          <tr class="el-item">
-                            <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Title(s)</strong></td>
-                            <td class="uk-table-shrink">
-                              <div class="el-title">
-                                <span *ngFor="let t of event.publication.titles; let ti_index = index">
-                                  <br *ngIf="ti_index>0">
-                                  <span>{{ t }}</span>
-                                </span>
-                              </div>
-                            </td>
-                          </tr>
-                          <tr class="el-item">
-                            <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Author(s)</strong></td>
-                            <td class="uk-table-shrink">
-                              <div class="el-title">
-                                <span *ngFor="let auth of event.publication.creators; let au_index = index">
-                                  <span *ngIf="au_index>0"> | </span>
-                                  <span>{{ auth }}</span>
-                                </span>
-                              </div>
-                            </td>
-                          </tr>
-                          <tr class="el-item" [ngClass]="{'success': event.highlight.pids && event.highlight.pids.length>0 }">
-                            <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">PID(s)</strong></td>
-                            <td class="uk-table-shrink">
-                              <div class="el-title">
-                                <span *ngFor="let pid of event.publication.pids; let a_index = index">
-                                  <br *ngIf="a_index > 0">
-                                  <span>{{ pid.value }} <b>&nbsp;&nbsp;({{ pid.type }})&nbsp;&nbsp;</b>
-                                    <span *ngFor="let hl_pid of event.highlight.pids">
-                                      <span *ngIf="hl_pid.value.indexOf(pid.value)>=0 && event.highlight.pids.length>0 && event.provenance">
-                                        <span class="uk-label uk-label-success">added</span>
-                                        <span class="pull-right">
-                                          <b>from: </b>
-                                          <ng-container *ngIf="event.provenance.url">
-                                            <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
-                                            <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
-                                          </ng-container>
-                                          <ng-container *ngIf="!event.provenance.url">
-                                            <span>{{ event.provenance.repositoryName }}</span>
-                                          </ng-container>
-                                        </span>
-                                      </span>
-                                    </span>
-                                  </span>
-                                </span>
-                              </div>
-                            </td>
-                          </tr>
-                          <tr class="el-item" [ngClass]="{'success': event.highlight.abstracts && event.highlight.abstracts.length>0 }">
-                            <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Abstract(s)</strong></td>
-                            <td class="uk-table-shrink">
-                              <div class="el-title">
-                                <span *ngFor="let abs of event.publication.abstracts; let a_index = index">
-                                  <br *ngIf="a_index > 0 && event.publication.abstracts[a_index-1].length > 0">
-                                  <span>{{ abs }}</span>
-                                  <span *ngIf="event.highlight.abstracts.indexOf(abs)>=0 && event.highlight.abstracts.length>0 && event.provenance">
-                                    <span class="pull-right">
-                                      <b>from: </b>
-                                      <ng-container *ngIf="event.provenance.url">
-                                        <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
-                                        <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
-                                      </ng-container>
-                                      <ng-container *ngIf="!event.provenance.url">
-                                        <span>{{ event.provenance.repositoryName }}</span>
-                                      </ng-container>
-                                    </span>
-                                  </span>
-                                </span>
-                              </div>
-                            </td>
-                          </tr>
-                          <tr class="el-item" [ngClass]="{'success': event.highlight.projects && event.highlight.projects.length>0 }">
-                            <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Project(s)/Relation(s)</strong></td>
-                            <td class="uk-table-shrink">
-                              <div class="el-title">
-                                <span *ngFor="let proj of event.publication.projects; let p_index = index">
-                                  <br *ngIf="p_index > 0">
-                                  <span *ngIf="proj.acronym && proj.acronym !==''">{{ proj.acronym }}</span>
-                                  <span *ngIf="!proj.acronym || proj.acronym ===''">{{ proj.title }}</span>
-                                  <span *ngIf="(proj.funder && proj.funder !=='') ||
-                                               (proj.fundingProgram && proj.fundingProgram !=='')">
-                                    (<span *ngIf="proj.funder && proj.funder !==''">{{ proj.funder }} </span>
-                                    <span *ngIf="(proj.funder && proj.funder !=='') &&
-                                                 (proj.fundingProgram && proj.fundingProgram !=='')">/</span>
-                                    <span *ngIf="proj.fundingProgram && proj.fundingProgram !==''">{{ proj.fundingProgram }}</span>)
-                                  </span>
-                                  <span *ngFor="let hl_proj of event.highlight.projects">
-                                    <span *ngIf="hl_proj.code.indexOf(proj.code)>=0  && event.highlight.projects.length>0 && event.provenance">
-                                      <span class="pull-right">
-                                        <b>from: </b>
-                                        <ng-container *ngIf="event.provenance.url">
-                                          <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
-                                          <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
-                                        </ng-container>
-                                        <ng-container *ngIf="!event.provenance.url">
-                                          <span>{{ event.provenance.repositoryName }}</span>
-                                        </ng-container>
-                                      </span>
-                                    </span>
-                                  </span>
-                                </span>
-                              </div>
-                            </td>
-                          </tr>
-                          <tr class="el-item" [ngClass]="{'success': event.highlight.subjects && event.highlight.subjects.length>0 }">
-                            <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Subject(s)</strong></td>
-                            <td class="uk-table-shrink">
-                              <div class="el-title">
-                                <span *ngFor="let subj of event.publication.subjects; let s_index = index">
-                                  <br *ngIf="s_index > 0">
-                                  <span>{{ subj }}</span>
-                                  <span *ngIf="event.highlight.subjects.indexOf(subj)>=0 && event.highlight.subjects.length>0 && event.provenance">
-                                    <span class="pull-right">
-                                      <b>from: </b>
-                                      <ng-container *ngIf="event.provenance.url">
-                                        <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
-                                        <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
-                                      </ng-container>
-                                      <ng-container *ngIf="!event.provenance.url">
-                                        <span>{{ event.provenance.repositoryName }}</span>
-                                      </ng-container>
-                                    </span>
-                                  </span>
-                                </span>
-                              </div>
-                            </td>
-                          </tr>
-
-                          <!--Publications-->
-                          <tr class="el-item" [ngClass]="{'success': event.highlight.publications && event.highlight.publications.length>0 }">
-                            <td *ngIf="this.topic.includes('PUBLICATION')" class="uk-table-shrink uk-width-1-4">
-                              <strong class="el-title uk-display-block">{{this.lastTopicEntry}}<br>Publication(s)</strong>
-                            </td>
-                            <td *ngIf="!(this.topic.includes('PUBLICATION'))"
-                                class="uk-table-shrink uk-width-1-4">
-                              <strong class="el-title uk-display-block">Publication(s)</strong>
-                            </td>
-                            <td class="uk-table-shrink">
-                              <div class="el-title">
-                                <span *ngFor="let pub of event.publication.publications; let s_index = index">
-                                  <br *ngIf="s_index > 0">
-                                  <span>{{ pub.titles[0] }} (ID: {{pub.originalId}})</span>
-                                  <span *ngFor="let hl_pub of event.highlight.publications">
-                                    <span *ngIf="hl_pub.originalId.indexOf(pub.originalId)>=0 && event.highlight.publications.length>0 && event.provenance">
-                                      <span class="pull-right">
-                                        <b>from: </b>
-                                        <ng-container *ngIf="event.provenance.url">
-                                          <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
-                                          <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
-                                        </ng-container>
-                                        <ng-container *ngIf="!event.provenance.url">
-                                          <span>{{ event.provenance.repositoryName }}</span>
-                                        </ng-container>
-                                      </span>
-                                    </span>
-                                  </span>
-                                </span>
-                              </div>
-                            </td>
-                          </tr>
-
-                          <!--Datasets-->
-                          <tr class="el-item" [ngClass]="{'success': event.highlight.datasets && event.highlight.datasets.length>0 }">
-                            <td *ngIf="this.topic.includes('DATASET')" class="uk-table-shrink uk-width-1-4">
-                              <strong class="el-title uk-display-block">{{this.lastTopicEntry}}<br>Dataset(s)</strong>
-                            </td>
-                            <td *ngIf="!(this.topic.includes('DATASET'))" class="uk-table-shrink uk-width-1-4">
-                              <strong class="el-title uk-display-block">Dataset(s)</strong>
-                            </td>
-                            <td class="uk-table-shrink">
-                              <div class="el-title">
-                                <span *ngFor="let dataset of event.publication.datasets; let s_index = index">
-                                  <br *ngIf="s_index > 0">
-                                  <span>{{ dataset.titles[0] }} <span *ngIf="dataset.pids && dataset.pids.length>0">({{dataset.pids[0].type}}: {{dataset.pids[0].value}})</span></span>
-                                  <span *ngFor="let hl_dataset of event.highlight.datasets">
-                                    <span *ngIf="hl_dataset.pids.indexOf(dataset.pids[s_index])>=0 && event.highlight.datasets.length>0 && event.provenance">
-                                      <span class="pull-right">
-                                        <b>from: </b>
-                                        <ng-container *ngIf="event.provenance.url">
-                                          <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
-                                          <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
-                                        </ng-container>
-                                        <ng-container *ngIf="!event.provenance.url">
-                                          <span>{{ event.provenance.repositoryName }}</span>
-                                        </ng-container>
-                                      </span>
-                                    </span>
-                                  </span>
-                                </span>
-                              </div>
-                            </td>
-                          </tr>
-
-                          <!--Software-->
-                          <tr class="el-item" [ngClass]="{'success': event.highlight.softwares && event.highlight.softwares.length>0 }">
-                            <td *ngIf="this.topic.includes('SOFTWARE')" class="uk-table-shrink uk-width-1-4">
-                              <strong class="el-title uk-display-block">Software</strong>
-                            </td>
-                            <td *ngIf="!(this.topic.includes('SOFTWARE'))" class="uk-table-shrink uk-width-1-4">
-                              <strong class="el-title uk-display-block">Software</strong>
-                            </td>
-                            <td class="uk-table-shrink">
-                              <div class="el-title">
-                                <span *ngFor="let software of event.publication.softwares; let s_index = index">
-                                  <br *ngIf="s_index > 0">
-                                  <span>{{ software.name }}</span>
-                                  <span *ngIf="software.description"> <br> {{ software.description }}</span>
-                                  <span><br><a href="{{ software.landingPage }}" target="_blank">{{ software.landingPage }}</a></span>
-                                  <span *ngIf="software.landingPage !== software.repository"><br><a href="{{ software.repository }}" target="_blank">{{ software.repository }}</a></span>
-                                  <span *ngFor="let hl_software of event.highlight.softwares">
-                                    <span *ngIf="hl_software.name.indexOf(software.name)>=0 && event.highlight.softwares.length>0 && event.provenance">
-                                      <span class="pull-right">
-                                        <b>from: </b>
-                                        <ng-container *ngIf="event.provenance.url">
-                                          <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
-                                          <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
-                                        </ng-container>
-                                        <ng-container *ngIf="!event.provenance.url">
-                                          <span>{{ event.provenance.repositoryName }}</span>
-                                        </ng-container>
-                                      </span>
-                                    </span>
-                                  </span>
-                                </span>
-                              </div>
-                            </td>
-                          </tr>
-
-                          <tr class="el-item" [ngClass]="{'success': event.highlight.publicationdate && event.highlight.publicationdate.length>0 }">
-                            <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Publication date</strong></td>
-                            <td class="uk-table-shrink"><div class="el-title">{{ event.publication.publicationdate }}</div></td>
-                          </tr>
-
-                          <tr class="el-item" [ngClass]="{'success': event.highlight.instances && event.highlight.instances.length>0 }">
-                            <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Rights</strong></td>
-                            <td class="uk-table-shrink">
-                              <div class="el-title">
-                                <span *ngFor="let l of event.publication.instances; let l_index = index">
-                                  <br *ngIf="l_index > 0">
-                                  <span>
-                                    {{ l.license }}&nbsp;&nbsp;<b>{{ l.hostedby }}</b><br>
-                                    <a href="{{ l.url }}" target="_blank">{{ l.url }}</a>
-                                  </span>
-                                  <span *ngFor="let hl of event.highlight.instances">
-                                    <span *ngIf="hl.hostedby.indexOf(l.hostedby)>=0 && event.highlight.instances.length>0 && event.provenance">
-                                      &nbsp;&nbsp;<span class="uk-label uk-label-success">added</span>&nbsp;&nbsp;
-                                      <b>from: </b>
-                                      <ng-container *ngIf="event.provenance.url">
-                                        <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
-                                        <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
-                                      </ng-container>
-                                      <ng-container *ngIf="!event.provenance.url">
-                                        <span>{{ event.provenance.repositoryName }}</span>
-                                      </ng-container>
-                                    </span>
-                                  </span>
-                                </span>
-                              </div>
-                            </td>
-                          </tr>
-                          </tbody>
-                        </table>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div>
-                <ul class="uk-pagination">
-                  <li>
-                    <a class="uk-link uk-link-muted" (click)="goToPreviousPage()">
-                <span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">
-                  <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" icon="pagination-previous" ratio="1"></svg>
-                </span>
-                      Previous
-                    </a>
-                  </li>
-                  <li class="uk-margin-auto-left">
-                    <a class="uk-link uk-link-muted" (click)="goToNextPage()">
-                      Next
-                      <span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">
-                  <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" icon="pagination-next" ratio="1"></svg>
-                </span>
-                    </a>
-                  </li>
-                </ul>
-
-                <!-- RESTORE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE -->
-                <!--<div class="resultsPageLabel">page {{ eventsPage.currPage+1 }} of {{ eventsPage.totalPages }}</div>-->
-
-                <!-- DELETE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE -->
-                <div class="resultsPageLabel">page {{ (eventsPage.totalPages > 0) ? currentPage+1 : 0 }} of {{ eventsPage.totalPages }}</div>
-
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- RIGHT HELP CONTENT CAN'T BE USED IN THIS PAGE -->
-        <div [formGroup]="group" class="tm-sidebar uk-width-1-4@m">
-          <div class="enrichContentAdvancedSearch uk-card uk-card-body uk-card-default sidemenu">
-            <div>
-              <h6 class="uk-h6 uk-text-primary uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="">
-                <span>Tweak and refine events</span>
-              </h6>
-            </div>
-            <div role="form" class="uk-form-horizontal">
-              <div class="uk-form-horizontal">
-                <div class="form-group">
-                  <label class="control-label">Trust [{{group.get('trustMin').value}} - {{group.get('trustMax').value}}]</label><br>
-                  <input type="range" min="0" max="1" step="0.05" formControlName="trustMin" class="uk-range"/>
-                  <input type="range" min="0" max="1" step="0.05" formControlName="trustMax" class="uk-range"/>
-                </div>
-              </div>
-              <div class="uk-form-horizontal">
-                <div class="form-group">
-                  <label class="control-label" style="display: block;">Title</label>
-                  <div formArrayName="eventTitles" *ngFor="let title of eventTitleFormArray; let title_index = index">
-                    <div [formGroupName]="title_index">
-                      <input class="form-control inlineBlock" style="width:88%;" type="text" formControlName="eventTitle">
-                      <a class="inlineBlock deleteIcon" (click)="removeControl('eventTitles',title_index)"><i class="fa fa-remove"></i></a>
-                    </div>
-                  </div>
-                  <a (click)="addControl('eventTitles',titleDefinition)"><i class="fa fa-plus"></i> Add another</a>
-                </div>
-              </div>
-              <div class="uk-form-horizontal">
-                <div class="form-group">
-                  <label class="control-label" style="display: block;">Author</label>
-                  <div formArrayName="eventAuthors" *ngFor="let author of eventAuthorFormArray; let author_index = index">
-                    <div [formGroupName]="author_index">
-                      <input class="form-control inlineBlock" style="width:88%;" type="text" formControlName="eventAuthor">
-                      <a class="inlineBlock deleteIcon" (click)="removeControl('eventAuthors',author_index)"><i class="fa fa-remove"></i></a>
-                    </div>
-                  </div>
-                  <a (click)="addControl('eventAuthors', authorDefinition)"><i class="fa fa-plus"></i> Add another</a>
-                </div>
-              </div>
-              <div class="uk-form-horizontal">
-                <div class="form-group">
-                  <label class="control-label" style="display: block;">Subject</label>
-                  <div formArrayName="eventSubjects" *ngFor="let subject of eventSubjectsFormArray; let subject_index = index">
-                    <div [formGroupName]="subject_index">
-                      <input class="form-control inlineBlock" style="width:88%;" type="text" formControlName="eventSubject">
-                      <a class="inlineBlock deleteIcon" (click)="removeControl('eventSubjects', subject_index)"><i class="fa fa-remove"></i></a>
-                    </div>
-                  </div>
-                  <a (click)="addControl('eventSubjects', subjectDefinition)"><i class="fa fa-plus"></i> Add another</a>
-                </div>
-              </div>
-              <div>
-                <div class="uk-form-horizontal">
-                  <div class="form-group">
-                    <label class="control-label" style="display: block;">Date</label>
-                    <div formArrayName="eventDateRanges" *ngFor="let date of eventDateRangesFormArray; let date_index = index">
-                      <div class="uk-form" style="position: relative;" [formGroupName]=date_index>
-                        <input class="form-control inlineBlock dateFrom" style="width:88%;"
-                               placeholder="From"
-                               type="text"
-                               onfocus="(this.type='date')"
-                               formControlName=dateFrom>
-                        <input class="form-control inlineBlock dateTo" style="width:88%;"
-                               placeholder="To"
-                               type="text"
-                               onfocus="(this.type='date')"
-                               formControlName=dateTo>
-                        <a class="inlineBlock deleteIcon" (click)="removeControl('eventDateRanges',date_index)"><i class="fa fa-remove" style=""></i></a>
-                      </div>
-                    </div>
-                    <a (click)="addControl('eventDateRanges', dateRangeDefinition)"><i class="fa fa-plus"></i> Add another</a>
-                  </div>
-                </div>
-              </div>
-              <div role="form" class="form-horizontal">
-                <div class="form-group">
-                  <div class="actionButtons">
-                    <button type="button" (click)="updateQuery()" class="uk-button uk-button-primary advancedSearch uk-margin-small-right">Apply</button>
-                    <button type="reset" (click)="clearForm()" class="uk-button uk-button-default clearCriteria">Clear</button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-      </div>
-    </div>
-
-
-    <!-- BOTTOM HELP CONTENT -->
-    <help-content #bottomHelperContent [position]="'bottom'"
-                  [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
-    </help-content>
-
-
-  </div>
-</div>
-
-
-<confirmation-dialog #subscribeToEventsModal [title]="'Create subscription for'" [isModalShown]="isModalShown"
-                     [confirmActionButton]="'Subscribe'" (emitObject)="subscribeToEvents($event)">
-  <div *ngIf="eventsPage">
-    <div *ngIf="modalErrorMessage" class="uk-alert uk-alert-danger">{{ modalErrorMessage }}</div>
-    <div>
-      <h4 class="uk-h4">{{ eventsPage.datasource }}</h4>
-      <div class="uk-text uk-text-small uk-text-secondary">{{ eventsPage.topic }}</div>
-    </div>
-    <div>
-      <div class="form-group">
-        <label class="control-label">Email</label>
-        <div>{{ userEmail }}</div>
-      </div>
-      <div class="form-group">
-        <label class="control-label">Frequency (*)</label>
-        <select class="form-control" #selectFreq (change)="choseFrequency(selectFreq.value)">
-          <option value="">-- none selected --</option>
-          <option value="never">never</option>
-          <option value="realtime">realtime</option>
-          <option value="daily">daily</option>
-          <option value="weekly">weekly</option>
-          <option value="monthly">monthly</option>
-        </select>
-      </div>
-      <div class="form-group">
-        <label class="control-label">Options</label>
-        <div>
-          <table class="table table-bordered">
-            <tbody>
-            <tr>
-              <td>Trust</td>
-              <td>[{{advanceSearch.trust.min}}, {{advanceSearch.trust.max}}]</td>
-            </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-</confirmation-dialog>

src/app/pages/content/content-events-of-repo-eventslist.component.ts

@@ -1,332 +0,0 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { AdvQueryObject, EventsPage, NotificationFrequency, NotificationMode } from '../../domain/typeScriptClasses';
-import { BrokerService } from '../../services/broker.service';
-import { loadingEvents, noEventsForTopic, noEventsWithParams, noServiceMessage,
-         subscribingChooseFrequency, subscribingToEvents, subscribingToEventsError,
-         subscribingToeventsSuccess } from '../../domain/shared-messages';
-import { AbstractControl, FormArray, FormBuilder, FormGroup } from '@angular/forms';
-import { AuthenticationService } from '../../services/authentication.service';
-import { ConfirmationDialogComponent } from '../../shared/reusablecomponents/confirmation-dialog.component';
-
-@Component ({
-  selector: 'app-content-events-of-repo-eventslist',
-  templateUrl: 'content-events-of-repo-eventslist.component.html'
-})
-
-export class ContentEventsOfRepoEventslistComponent implements OnInit {
-  errorMessage: string;
-  loadingMessage: string;
-  successMessage: string;
-  noEvents: string;
-  eventsPageInitialized = false;
-
-  topic = '';
-  lastTopicEntry = '';
-  correctTopic = '';
-  repoName = '';
-
-  advanceSearch: AdvQueryObject;
-  eventsPage: EventsPage;
-  currentPage: number; /* DELETE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE */
-
-  group: FormGroup;
-  readonly titleDefinition = { eventTitle: [''] };
-  readonly authorDefinition = { eventAuthor: [''] };
-  readonly subjectDefinition = { eventSubject: [''] };
-  readonly dateRangeDefinition = { dateFrom: '', dateTo: '' };
-  readonly groupDefinition = {
-    trustMin: [+''],
-    trustMax: [+''],
-    eventTitles: this.fb.array([this.initControl(this.titleDefinition)]),
-    eventAuthors: this.fb.array([this.initControl(this.authorDefinition)]),
-    eventSubjects: this.fb.array([this.initControl(this.subjectDefinition)]),
-    eventDateRanges: this.fb.array([this.initControl(this.dateRangeDefinition)])
-  };
-
-  eventTitleFormArray: any;
-  eventAuthorFormArray: any;
-  eventSubjectsFormArray: any;
-  eventDateRangesFormArray: any;
-
-  frequencyChoice: string;
-  userEmail: string;
-  modalErrorMessage: string;
-
-  isModalShown: boolean;
-  @ViewChild('subscribeToEventsModal')
-  public subscribeToEventsModal: ConfirmationDialogComponent;
-
-  constructor (private route: ActivatedRoute,
-               private fb: FormBuilder,
-               private brokerService: BrokerService,
-               private authService: AuthenticationService) {}
-
-  ngOnInit () {
-    this.userEmail = this.authService.getUserEmail();
-    this.getParams();
-    this.initQuery();
-    this.initForm();
-    this.currentPage = 0; /* DELETE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE */
-    this.getEventsPage(0);
-  }
-
-  getParams() {
-    this.topic = this.route.snapshot.paramMap.get('topic');
-    console.log(`my topic is: ${this.topic}`);
-    this.lastTopicEntry = this.topic.substring(this.topic.lastIndexOf('|') + 1).toLowerCase();
-    this.lastTopicEntry = this.replaceAll(this.lastTopicEntry, '_', ' ');
-    this.getCorrectTopic();
-    this.repoName = this.route.snapshot.paramMap.get('name');
-  }
-
-  replaceAll(str, find, replace) {
-    return str.replace(new RegExp(find, 'g'), replace);
-  }
-
-  initQuery() {
-    this.advanceSearch = {
-      datasource: this.repoName,
-      topic: this.correctTopic,
-      titles: [],
-      subjects: [],
-      authors: [],
-      dates: [],
-      trust: {min: '0', max: '1'},
-      page: 0
-    };
-  }
-
-  initForm() {
-    this.group = this.fb.group( this.groupDefinition, { validator: checkMinMax } );
-    this.group.get('trustMin').setValue(0);
-    this.group.get('trustMax').setValue(1);
-  }
-
-  initControl(definition: any) {
-    return this.fb.group(definition);
-  }
-
-  removeControl(controlName: string, i: number) {
-    const controlArray = <FormArray>this.group.controls[controlName];
-    controlArray.removeAt(i);
-  }
-
-  addControl(controlName: string, definition: any) {
-    const controlArray = <FormArray>this.group.controls[controlName];
-    controlArray.push(this.initControl(definition));
-  }
-
-  clearForm() {
-    let controlArray: FormArray;
-    controlArray = <FormArray>this.group.controls['eventTitles'];
-    controlArray.controls = [];
-    controlArray.push(this.initControl(this.titleDefinition));
-
-    controlArray = <FormArray>this.group.controls['eventAuthors'];
-    controlArray.controls = [];
-    controlArray.push(this.initControl(this.authorDefinition));
-
-    controlArray = <FormArray>this.group.controls['eventSubjects'];
-    controlArray.controls = [];
-    controlArray.push(this.initControl(this.subjectDefinition));
-
-    controlArray = <FormArray>this.group.controls['eventDateRanges'];
-    controlArray.controls = [];
-    controlArray.push(this.initControl(this.dateRangeDefinition));
-
-    this.group.get('trustMin').setValue(0);
-    this.group.get('trustMax').setValue(1);
-
-    this.initQuery();
-    this.getEventsPage(0);
-  }
-
-  updateQuery() {
-    let i: number;
-    let controlArray: FormArray;
-
-    if ( this.group.valid ) {
-      this.initQuery();
-      this.advanceSearch.trust.min = this.group.get('trustMin').value;
-      this.advanceSearch.trust.max = this.group.get('trustMax').value;
-
-      controlArray = <FormArray>this.group.controls['eventTitles'];
-      for (i = 0; i < controlArray.length; i++) {
-        if (controlArray.at(i).get('eventTitle').value) {
-          this.advanceSearch.titles.push(controlArray.at(i).get('eventTitle').value);
-        }
-      }
-      controlArray = <FormArray>this.group.controls['eventAuthors'];
-      for (i = 0; i < controlArray.length; i++) {
-        if (controlArray.at(i).get('eventAuthor').value) {
-          this.advanceSearch.authors.push(controlArray.at(i).get('eventAuthor').value);
-        }
-      }
-      controlArray = <FormArray>this.group.controls['eventSubjects'];
-      for (i = 0; i < controlArray.length; i++) {
-        if (controlArray.at(i).get('eventSubject').value) {
-          this.advanceSearch.subjects.push(controlArray.at(i).get('eventSubject').value);
-        }
-      }
-      controlArray = <FormArray>this.group.controls['eventDateRanges'];
-      for (i = 0; i < controlArray.length; i++) {
-        if (controlArray.at(i).get('dateFrom').value) {
-          let toDate;
-          if (controlArray.at(i).get('dateTo').value ||
-              (controlArray.at(i).get('dateFrom').value > controlArray.at(i).get('dateTo').value) ) {
-            toDate = controlArray.at(i).get('dateTo').value;
-          } else {
-            toDate = Date.now();
-          }
-          this.advanceSearch.dates.push({
-            min: controlArray.at(i).get('dateFrom').value,
-            max: toDate
-          });
-        }
-      }
-      console.log(this.advanceSearch);
-      this.currentPage = 0; /* DELETE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE */
-      this.getEventsPage(0);
-    }
-  }
-
-  getEventsPage(page: number) {
-    this.noEvents = '';
-    this.errorMessage = '';
-    this.successMessage = '';
-    this. loadingMessage = loadingEvents;
-    this.brokerService.advancedShowEvents(page, 10, this.advanceSearch).subscribe(
-      events => this.eventsPage = events,
-      error => {
-        this.loadingMessage = '';
-        this.errorMessage = noServiceMessage;
-        console.log(error);
-      },
-      () => {
-        this.loadingMessage = '';
-        console.log(this.eventsPage);
-        if (!this.eventsPage.total) {
-          if (!this.eventsPageInitialized) {
-            this.noEvents = noEventsForTopic;
-          } else {
-            this.noEvents = noEventsWithParams;
-          }
-        }
-        let tempArray = <FormArray>this.group.controls['eventTitles'];
-        this.eventTitleFormArray = tempArray.controls;
-        tempArray = <FormArray>this.group.controls['eventAuthors'];
-        this.eventAuthorFormArray = tempArray.controls;
-        tempArray = <FormArray>this.group.controls['eventSubjects'];
-        this.eventSubjectsFormArray = tempArray.controls;
-        tempArray = <FormArray>this.group.controls['eventDateRanges'];
-        this.eventDateRangesFormArray = tempArray.controls;
-        console.log(`total pages is ${this.eventsPage.totalPages}`);
-        this.eventsPageInitialized = true;
-      }
-    );
-  }
-
-  isHighlighted(item: any, itemList: any[]) {
-    return itemList.some(x => x === item);
-  }
-
-  getCorrectTopic() {
-    const temp = this.topic.split('|');
-    this.correctTopic = temp[0];
-    this.topic = temp[0];
-    for (let i = 1; i < temp.length; i++) {
-      this.correctTopic += `/${temp[i]}`;
-      this.topic += ` | ${temp[i]}`;
-    }
-  }
-
-  goToNextPage() {
-    /* RESTORE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE */
-    /*if(this.eventsPage.currPage < this.eventsPage.totalPages) {
-      console.log(`Get me page ${this.eventsPage.currPage+1}!`);
-      this.getEventsPage(this.eventsPage.currPage+1);
-    }*/
-
-    /* DELETE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE */
-    if ( (this.currentPage + 1) < this.eventsPage.totalPages) {
-      this.currentPage = this.currentPage + 1;
-      console.log(`Get me page ${this.currentPage}!`);
-      this.getEventsPage(this.currentPage);
-    }
-
-  }
-
-  goToPreviousPage() {
-    /* RESTORE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE */
-    /*if(this.eventsPage.currPage > 0) {
-      console.log(`Get me page ${this.eventsPage.currPage-1}!`);
-      this.getEventsPage(this.eventsPage.currPage-1);
-    }*/
-
-    /* DELETE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE */
-    if (this.currentPage > 0) {
-      this.currentPage = this.currentPage - 1;
-      console.log(`Get me page ${this.currentPage}!`);
-      this.getEventsPage(this.currentPage);
-    }
-  }
-
-  showSubscriptionModal() {
-    if (this.advanceSearch && this.eventsPage) {
-      this.subscribeToEventsModal.confirmed = false;
-      this.subscribeToEventsModal.showModal();
-    }
-  }
-
-  choseFrequency(freq: string) {
-    this.frequencyChoice = freq;
-  }
-
-  subscribeToEvents(event: any) {
-    this.modalErrorMessage = '';
-    if (this.frequencyChoice) {
-      this.subscribeToEventsModal.confirmed = true;
-      const freq = <NotificationFrequency>this.frequencyChoice;
-      const mod: NotificationMode = 'EMAIL';
-      const sub = {
-        subscriber: this.userEmail,
-        frequency: freq,
-        mode: mod,
-        query: this.advanceSearch
-      };
-      this.errorMessage = '';
-      this.successMessage = '';
-      console.log(JSON.stringify(sub));
-      this.loadingMessage = subscribingToEvents;
-      this.brokerService.subscribeToEvent(sub).subscribe(
-        response => console.log(`subscribeToEvents responded ${JSON.stringify(response)}`),
-        error => {
-          this.errorMessage = subscribingToEventsError;
-          this.loadingMessage = '';
-        },
-        () => {
-          this.loadingMessage = '';
-          this.successMessage = subscribingToeventsSuccess;
-        }
-      );
-    } else {
-      this.modalErrorMessage = subscribingChooseFrequency;
-    }
-  }
-
-}
-
-export function checkMinMax(c: AbstractControl) {
-  if ( c.get('trustMin').value > c.get('trustMax').value ) {
-    return 'invalid';
-  }
-  return null;
-}
-
-export function checkDates(c: AbstractControl) {
-  if ( c.get('dateFrom').value > c.get('dateTo').value ) {
-    return 'invalid';
-  }
-  return null;
-}

src/app/pages/content/content-events-of-repository.component.html

@@ -1,123 +0,0 @@
-<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
-  <div class="uk-width-1-1@m uk-first-column">
-
-    <h1 class="uk-h2">Enrichments for {{ correctName }}</h1>
-
-    <!-- TOP HELP CONTENT -->
-    <help-content #topHelperContent [position]="'top'"
-                  [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
-    </help-content>
-
-    <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
-      <div class="uk-grid">
-
-        <!-- LEFT HELP CONTENT -->
-        <aside-help-content #leftHelperContent [position]="'left'"
-                            [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-        </aside-help-content>
-
-        <!-- MIDDLE -->
-        <div class=" uk-width-expand@m">
-
-          <div>
-            <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{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="whiteFilm"></div>
-            </div>
-            <div *ngIf="noTopics" class="uk-alert">{{ noTopics }}</div>
-            <div *ngIf="repoTopics && repoTopics.length > 0" class="uk-grid-margin uk-grid uk-grid-stack repos-list">
-              <div class="uk-width-1-2@m uk-first-column">
-                <div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium">
-                  <div>
-                    <h4 class="uk-h4 uk-text-primary uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="">
-                      <span>More</span>
-                    </h4>
-                    <table class="uk-table uk-table-striped uk-table-middle">
-                      <thead>
-                      <tr>
-                        <th>Events that may enrich {{ repoName }} content</th>
-                        <th class="uk-text-nowrap"># of events</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr class="el-item" *ngFor="let moreTopic of moreList">
-                        <td class="uk-table-shrink uk-width-4-5">
-                          <a (click)="goToEventsList(moreTopic.value)" class="el-link">{{ moreTopic.value }}</a>
-                          <div *ngIf="topics[moreTopic.value]" class="uk-text uk-text-meta">{{ topics[moreTopic.value]['englishName'] }}</div>
-                        </td>
-                        <td class="uk-text-nowrap uk-table-shrink uk-width-1-5">
-                          <div class="el-title">{{ moreTopic.size }}</div>
-                        </td>
-                      </tr>
-                      <tr class="el-item footers">
-                        <td class="uk-text-nowrap uk-table-shrink uk-width-4-5">
-                          <div class="el-title">Total</div>
-                        </td>
-                        <td class="uk-text-nowrap uk-table-shrink uk-width-1-5">
-                          <div class="el-title">{{ totalMore }}</div>
-                        </td>
-                      </tr>
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-              </div>
-              <div class="uk-width-1-2@m uk-first-column">
-                <div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium">
-                  <div>
-                    <h4 class="uk-h4 uk-text-primary uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="">
-                      <span>Missing</span>
-                    </h4>
-                    <table class="uk-table uk-table-striped uk-table-middle">
-                      <thead>
-                      <tr>
-                        <th>Events that may enrich {{ repoName }} content</th>
-                        <th class="uk-text-nowrap"># of events</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr class="el-item" *ngFor="let missingTopic of missingList">
-                        <td class="uk-table-shrink uk-width-4-5">
-                          <a (click)="goToEventsList(missingTopic.value)" class="el-link">{{ missingTopic.value }}</a>
-                          <div *ngIf="topics[missingTopic.value]" class="uk-text uk-text-meta">{{ topics[missingTopic.value]['englishName'] }}</div>
-                        </td>
-                        <td class="uk-text-nowrap uk-table-shrink uk-width-1-5">
-                          <div class="el-title">{{ missingTopic.size }}</div>
-                        </td>
-                      </tr>
-                      <tr class="el-item footers">
-                        <td class="uk-text-nowrap uk-table-shrink uk-width-4-5">
-                          <div class="el-title">Total</div>
-                        </td>
-                        <td class="uk-text-nowrap uk-table-shrink uk-width-1-5">
-                          <div class="el-title">{{ totalMissing }}</div>
-                        </td>
-                      </tr>
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-        </div>
-
-        <!-- RIGHT HELP CONTENT -->
-        <aside-help-content #rightHelperContent [position]="'right'"
-                            [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-        </aside-help-content>
-
-      </div>
-    </div>
-
-
-    <!-- BOTTOM HELP CONTENT -->
-    <help-content #bottomHelperContent [position]="'bottom'"
-                  [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
-    </help-content>
-
-
-  </div>
-</div>

src/app/pages/content/content-events-of-repository.component.ts

@@ -1,110 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { BrowseEntry, Term } from '../../domain/typeScriptClasses';
-import { ActivatedRoute, Router } from '@angular/router';
-import { loadingTopics, loadingTopicsError, noTopicsFound } from '../../domain/shared-messages';
-import { BrokerService } from '../../services/broker.service';
-
-@Component ({
-  selector: 'content-events-of-repository',
-  templateUrl: 'content-events-of-repository.component.html'
-})
-
-export class ContentEventsOfRepositoryComponent implements OnInit {
-  errorMessage: string;
-  loadingMessage: string;
-  noTopics: string;
-
-  repoName = '';
-  correctName = '';
-  topics: Map<string, Term> = new Map<string, Term>();
-  repoTopics: BrowseEntry[] = [];
-  moreList: BrowseEntry[] = [];
-  missingList: BrowseEntry[] = [];
-  totalMore = 0;
-  totalMissing = 0;
-
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private brokerService: BrokerService
-  ) {}
-
-  ngOnInit() {
-    this.repoName = this.route.snapshot.paramMap.get('name');
-    this.getCorrectName();
-    this.getTopics();
-  }
-
-  getRepoTopics(): void {
-    this.loadingMessage = loadingTopics;
-    this.brokerService.getTopicsForDataSource(this.correctName)
-      .subscribe(
-        topics => {
-          this.repoTopics = topics;
-        },
-        error => {
-          console.log(error);
-          this.errorMessage = loadingTopicsError;
-          this.loadingMessage = '';
-        },
-        () => {
-          this.loadingMessage = '';
-          if (this.repoTopics.length === 0) {
-            this.noTopics = noTopicsFound;
-          } else {
-            for (const browseEntry of this.repoTopics) {
-              if (browseEntry.value.startsWith('ENRICH/MORE')) {
-                this.totalMore += browseEntry.size;
-                this.moreList.push(browseEntry);
-              } else if (browseEntry.value.startsWith('ENRICH/MISSING')) {
-                this.totalMissing += browseEntry.size;
-                this.missingList.push(browseEntry);
-              }
-            }
-          }
-        }
-      );
-  }
-
-
-  getTopics () {
-    this.loadingMessage = loadingTopics;
-    this.brokerService.getDnetTopics().subscribe(
-      topics => this.topics = topics,
-      error => {
-        console.log(error);
-        this.errorMessage = loadingTopicsError;
-        this.loadingMessage = '';
-      },
-      () => {
-        this.loadingMessage = '';
-        console.log(this.topics);
-        this.getRepoTopics();
-      }
-    );
-  }
-
-  goToEventsList(topic: string) {
-    const temp = topic.replace(/\//g, '|');
-    let chosenTopic = temp[0];
-    for (let i = 1; i < temp.length; i++) {
-      chosenTopic += '|' + temp[i];
-    }
-    chosenTopic = encodeURIComponent(chosenTopic);
-    /*this.router.navigate([`/content/events/${this.repoName}`, chosenTopic]);*/
-    console.log(temp, this.route.url);
-    this.router.navigate([temp], {relativeTo: this.route});
-
-  }
-
-  getCorrectName() {
-    const temp = this.repoName.split('|');
-    this.correctName = temp[0];
-    this.repoName = temp[0];
-    for (let i = 1; i < temp.length; i++) {
-      this.correctName += `/${temp[i]}`;
-      this.repoName += ` | ${temp[i]}`;
-    }
-  }
-
-}

src/app/pages/content/content-events.component.html

@@ -1,130 +0,0 @@
-<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
-  <div class="uk-width-1-1@m uk-first-column">
-
-    <h1 class="uk-h2">Enrich Your Content - Browse Events</h1>
-
-    <!-- TOP HELP CONTENT -->
-    <help-content #topHelperContent [position]="'top'"
-                  [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
-    </help-content>
-
-    <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
-      <div class="uk-grid">
-
-        <!-- LEFT HELP CONTENT -->
-        <aside-help-content #leftHelperContent [position]="'left'"
-                            [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-        </aside-help-content>
-
-        <!-- MIDDLE -->
-        <div class=" uk-width-expand@m">
-
-          <div>
-            <div class="uk-width-1-1 uk-grid">
-              <div class="uk-width-1-1 uk-first-column uk-margin-bottom">
-                <div class="uk-float-right">
-                  <a class="grid-view" [class.active]="tilesView" (click)="toggleTiles()">
-                    <i class="fa fa-th"></i>
-                  </a>
-                  <a class="grid-view"  [class.active]="!tilesView" (click)="toggleTiles()">
-                    <i class="fa fa-th-list"></i>
-                  </a>
-                </div>
-              </div>
-              <div class="uk-width-1-1">
-                <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>
-                <div *ngIf="noDatasourcesMessage" class="uk-alert uk-alert-warning">{{ noDatasourcesMessage }}</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="whiteFilm"></div>
-                </div>
-
-                <!--TILES VIEW-->
-                <div *ngIf="tilesView && datasourcesOfUser && datasourcesOfUser.length>0" class="uk-grid-large uk-grid-margin-large uk-grid repos-grid uk-height-1-1">
-                  <div *ngFor="let repo of datasourcesOfUser" class="uk-width-expand@m uk-width-auto\@m uk-first-column uk-margin-bottom" style="min-width: 300px; max-width: 22%;">
-                    <div class="uk-margin uk-grid-match uk-child-width-1-1 uk-grid-small uk-grid-divider uk-grid uk-scrollspy-inview uk-animation-slide-top-medium uk-grid-stack">
-                      <div class="uk-first-column">
-                        <div class="">
-                          <a class="el-link uk-vertical-align-middle uk-height-1-1" (click)="goToRepoEvents(repo['first']['value'])">
-                            <div class="el-item uk-panel uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="">
-                              <div class="uk-child-width-expand uk-grid-medium uk-flex-middle uk-grid uk-grid-stack" uk-grid="">
-                                <div class="uk-width-1-3@m uk-first-column" style="width: 90px;">
-                                  <img *ngIf="!repo['second']" class="el-image uk-border-rounded" src="../../../assets/imgs/yourLogoHere.jpg" alt="">
-                                  <img *ngIf="repo['second']" class="el-image uk-border-rounded" src="{{ repo['second'] }}" alt="">
-                                </div>
-                                <div class="uk-first-column">
-                                  <h3 class="el-title uk-margin uk-h5 uk-margin-remove-adjacent uk-margin-small-bottom">{{ repo['first']['value'] }}</h3>
-                                  <div class="el-meta uk-margin uk-text-meta">
-                                    <span>({{ repo['first']['size'] }} events)</span>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </a>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <!-- LIST VIEW -->
-                <div *ngIf="!tilesView && datasourcesOfUser && datasourcesOfUser.length>0" class="uk-grid-large uk-grid-margin-large uk-grid repos-list">
-                  <div class="uk-width-1-1@m uk-first-column">
-                    <div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium">
-                      <div>
-                        <table class="uk-table uk-table-striped uk-table-middle">
-                          <thead>
-                          <tr>
-                            <th class="uk-text-nowrap">Logo</th>
-                            <th class="uk-text-nowrap">Name</th>
-                            <th class="uk-text-nowrap"># of Events</th>
-                          </tr>
-                          </thead>
-                          <tbody>
-                          <tr class="el-item" *ngFor="let repo of datasourcesOfUser">
-                            <td class="uk-table-shrink">
-                              <img *ngIf="repo['second']" class="el-image uk-preserve-width" src="{{ repo['second'] }}" style="height: 45px;">
-                              <img *ngIf="!repo['second']" class="el-image uk-preserve-width" src="../../../assets/imgs/yourLogoHere.jpg" alt="[Repo Logo]" style="height: 45px;">
-                            </td>
-                            <td class="uk-text-nowrap uk-table-shrink">
-                              <a (click)="goToRepoEvents(repo['first']['value'])">{{ repo['first']['value'] }}</a>
-                            </td>
-                            <td class="uk-text-nowrap uk-table-shrink">
-                              {{ repo['first']['size'] }}
-                            </td>
-                          </tr>
-                          </tbody>
-                        </table>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-              </div>
-
-            </div>
-          </div>
-
-
-        </div>
-
-        <!-- RIGHT HELP CONTENT -->
-        <aside-help-content #rightHelperContent [position]="'right'"
-                            [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-        </aside-help-content>
-
-      </div>
-    </div>
-
-
-    <!-- BOTTOM HELP CONTENT -->
-    <help-content #bottomHelperContent [position]="'bottom'"
-                  [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
-    </help-content>
-
-
-  </div>
-</div>
-

src/app/pages/content/content-events.component.ts

@@ -1,71 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { AuthenticationService } from '../../services/authentication.service';
-import { BrokerService } from '../../services/broker.service';
-import { ActivatedRoute, Router } from '@angular/router';
-import { loadingRepoMessage, loadingUserRepoInfoEmpty, reposRetrievalError } from '../../domain/shared-messages';
-
-@Component ({
-  selector: 'app-content-events',
-  templateUrl: 'content-events.component.html'
-})
-
-export class ContentEventsComponent implements OnInit {
-  datasourcesOfUser = [];
-  tilesView: boolean;
-  errorMessage: string;
-  noDatasourcesMessage: string;
-  loadingMessage: string;
-
-  @Input() parent = '';
-
-  constructor(private authService: AuthenticationService,
-              private brokerService: BrokerService,
-              private router: Router,
-              private route: ActivatedRoute) {}
-
-  ngOnInit() {
-    this.tilesView = true;
-    this.getDatasourcesOfUser();
-  }
-
-
-  getDatasourcesOfUser() {
-    this.loadingMessage = loadingRepoMessage;
-    this.brokerService.getDatasourcesOfUser().subscribe(
-      res => {
-        this.datasourcesOfUser = res['datasourcesOfUser'];
-      },
-      error => {
-        console.log(error);
-        this.loadingMessage = '';
-        this.errorMessage = reposRetrievalError;
-      },
-      () => {
-        this.loadingMessage = '';
-        if (!this.datasourcesOfUser || !this.datasourcesOfUser.length) {
-          this.noDatasourcesMessage = loadingUserRepoInfoEmpty;
-        } else {
-          this.datasourcesOfUser.sort( function(a, b) {
-            if ( a['first']['value'] < b['first']['value'] ) {
-              return -1;
-            } else if (a['first']['value'] > b['first']['value']) {
-              return 1;
-            } else {
-              return 0;
-            }
-          });
-        }
-      }
-    );
-  }
-
-  toggleTiles() {
-    this.tilesView = !this.tilesView;
-  }
-
-  goToRepoEvents(repoName: string) {
-    const newName = repoName.replace(/\//g, '|');
-    this.router.navigate([newName], {relativeTo: this.route});
-  }
-
-}

src/app/pages/content/content-notifications-of-subscription.component.html

@@ -1,264 +1,435 @@
-<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
+<div id="page_content">
-  <div class="uk-width-1-1@m uk-first-column">
+  <div id="page_content_inner">
-
+    <h2 *ngIf="eventsPage" class="heading_b uk-margin-bottom">
-    <h1 *ngIf="eventsPage" class="uk-h2">{{ eventsPage.datasource }}</h1>
+      {{ eventsPage.datasource }}
-    <div *ngIf="eventsPage" class="uk-text uk-text-small uk-text-secondary">{{ topic }}</div>
+      <span class="sub-heading">{{ topic }}</span>
+    </h2>
 
     <!-- TOP HELP CONTENT -->
     <help-content #topHelperContent [position]="'top'"
                   [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
     </help-content>
 
-    <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
+    <div class="uk-grid">
-      <div class="uk-grid">
 
-        <!-- LEFT HELP CONTENT -->
+      <!-- LEFT HELP CONTENT -->
-        <aside-help-content #leftHelperContent [position]="'left'"
+      <aside-help-content #leftHelperContent [position]="'left'"
-                            [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+                          [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-        </aside-help-content>
+      </aside-help-content>
 
-        <!-- MIDDLE -->
+      <!-- MIDDLE -->
-        <div class=" uk-width-expand@m">
+      <div class=" uk-width-expand@m">
 
+        <div>
           <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{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="whiteFilm"></div>
+            <div class="transparentFilm"></div>
           </div>
           <div *ngIf="noEvents" class="uk-alert">{{ noEvents }}</div>
           <div *ngIf="!noEvents && !loadingMessage && !errorMessage && eventsPage && eventsPage.totalPages>0" class="events-results">
-            <div class="numberOfEventsLabel">
 
-              <!-- RESTORE WHEN getNotificationsBySubscriptionId IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE -->
+            <div style="display: flex;justify-content: space-between;">
-              <!--<span>Showing {{(eventsPage.currPage*10)+1 }}-{{ ( (eventsPage.total < 10) || (eventsPage.total < (eventsPage.currPage+1)*10) ) ? (eventsPage.total) : (eventsPage.currPage+1)*10 }} of {{ eventsPage.total }} results</span>-->
 
-              <!-- DELETE WHEN getNotificationsBySubscriptionId IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE -->
+              <div class="resultsInfo" style="margin-top: auto;">
-              <span>Showing {{(currentPage*10)+1 }}-{{ ( (eventsPage.total < 10) || (eventsPage.total < (currentPage+1)*10) ) ? (eventsPage.total) : (currentPage+1)*10 }} of {{ eventsPage.total }} results</span>
+                <span class="number">{{eventsPage.total}}</span> RESULTS, PAGE <span class="number">{{(currentPage)+1}}</span> OF <span class="number">{{ eventsPage.totalPages }}</span>
+              </div>
+
+              <div class="uk-inline">
+                <ul class="uk-pagination" uk-margin>
+                  <li><a (click)="goToPreviousPage()" class="pagination_arrow"><span uk-pagination-previous></span></a></li>
+                  <li class="uk-active"><span>{{ (eventsPage.totalPages > 0) ? currentPage+1 : 0 }}</span></li>
+                  <li><a (click)="goToNextPage()" class="pagination_arrow"><span uk-pagination-next></span></a></li>
+                </ul>
+              </div>
 
             </div>
-            <div>
-              <ul class="uk-pagination">
-                <li>
-                  <a class="uk-link uk-link-muted" (click)="goToPreviousPage()">
-              <span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">
-                <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" icon="pagination-previous" ratio="1"></svg>
-              </span>
-                    Previous
-                  </a>
-                </li>
-                <li class="uk-margin-auto-left">
-                  <a class="uk-link uk-link-muted" (click)="goToNextPage()">
-                    Next
-                    <span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">
-                <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" icon="pagination-next" ratio="1"></svg>
-              </span>
-                  </a>
-                </li>
-              </ul>
 
-              <!-- RESTORE WHEN getNotificationsBySubscriptionId IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE -->
-              <!--<div class="resultsPageLabel">page {{ eventsPage.currPage+1 }} of {{ eventsPage.totalPages }}</div>-->
 
-              <!-- DELETE WHEN getNotificationsBySubscriptionId IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE -->
+            <hr class="adminResultsHeader">
-              <div class="resultsPageLabel">page {{ (eventsPage.totalPages > 0) ? currentPage+1 : 0 }} of {{ eventsPage.totalPages }}</div>
 
-            </div>
+            <!--<div class="uk-margin-bottom">Showing {{(currentPage*10)+1 }}-{{ ( (eventsPage.total < 10) || (eventsPage.total < (currentPage+1)*10) ) ? (eventsPage.total) : (currentPage+1)*10 }} of {{ eventsPage.total }} results</div>-->
-            <div *ngFor="let event of eventsPage.values" class="events-list">
-              <div class="uk-card uk-card-default well uk-scrollspy-inview uk-animation-slide-top-medium">
-                <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
-                  <div class="uk-width-1-1@m uk-first-column">
-                    <p class="text-right"><span class="uk-label">Trust: {{ event.trust }}</span></p>
-                    <div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium">
-                      <table class="uk-table uk-table-striped uk-table-middle">
-                        <tbody>
-                        <tr class="el-item">
-                          <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">ID</strong></td>
-                          <td class="uk-table-shrink">
-                            <div class="el-title">{{ event.publication.originalId }}</div>
-                          </td>
-                        </tr>
-                        <tr class="el-item">
-                          <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Title(s)</strong></td>
-                          <td class="uk-table-shrink">
-                            <div class="el-title">
-                                <span *ngFor="let t of event.publication.titles; let ti_index = index">
-                                  <br *ngIf="ti_index>0">
-                                  <span>{{ t }}</span>
-                                </span>
-                            </div>
-                          </td>
-                        </tr>
-                        <tr class="el-item">
-                          <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Author(s)</strong></td>
-                          <td class="uk-table-shrink">
-                            <div class="el-title">
-                                <span *ngFor="let auth of event.publication.creators; let au_index = index">
-                                  <span *ngIf="au_index>0"> | </span>
-                                  <span>{{ auth }}</span>
-                                </span>
-                            </div>
-                          </td>
-                        </tr>
-                        <tr class="el-item" [ngClass]="{'success': event.highlight.pids && event.highlight.pids.length>0 }">
-                          <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">PID(s)</strong></td>
-                          <td class="uk-table-shrink">
-                            <div class="el-title">
-                                <span *ngFor="let pid of event.publication.pids">
-                                  <span>{{ pid.value }} <b>&nbsp;&nbsp;({{ pid.type }})&nbsp;&nbsp;</b>
-                                    <span *ngIf="event.highlight.pids && event.highlight.pids.length>0 && isHighlighted(pid,event.highlight.pids)">
-                                      <span class="uk-label uk-label-success">added</span>&nbsp;&nbsp;
-                                      <span *ngIf="event.provenance" class="pull-right">
-                                        <b>from: </b>
-                                        <a *ngIf="event.provenance.url" href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
-                                        <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
-                                      </span>
-                                    </span>
-                                  </span>
-                                </span>
-                            </div>
-                          </td>
-                        </tr>
-                        <tr class="el-item" [ngClass]="{'success': event.highlight.abstracts && event.highlight.abstracts.length>0 }">
-                          <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Abstract(s)</strong></td>
-                          <td class="uk-table-shrink">
-                            <div class="el-title">
-                                <span *ngFor="let abs of event.publication.abstracts; let a_index = index">
-                                  <br *ngIf="a_index > 0">
-                                  <span>{{ abs }}</span>
-                                  <span *ngIf="event.highlight.abstracts && event.highlight.abstracts.length>0 && event.provenance">
-                                    <span class="pull-right">
-                                      <b>from: </b>
-                                      <a *ngIf="event.provenance.url" href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
-                                      <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
-                                    </span>
-                                  </span>
-                                </span>
-                            </div>
-                          </td>
-                        </tr>
-                        <tr class="el-item" [ngClass]="{'success': event.highlight.projects && event.highlight.projects.length>0 }">
-                          <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Project(s)/Relation(s)</strong></td>
-                          <td class="uk-table-shrink">
-                            <div class="el-title">
-                                <span *ngFor="let proj of event.publication.projects; let p_index = index">
-                                  <br *ngIf="p_index > 0">
-                                  <span *ngIf="proj.acronym && proj.acronym !==''">{{ proj.acronym }}</span>
-                                  <span *ngIf="!proj.acronym || proj.acronym ===''">{{ proj.title }}</span>
-                                  <span *ngIf="(proj.funder && proj.funder !=='') ||
-                                               (proj.fundingProgram && proj.fundingProgram !=='')">
-                                    (<span *ngIf="proj.funder && proj.funder !==''">{{ proj.funder }} </span>
-                                    <span *ngIf="(proj.funder && proj.funder !=='') &&
-                                                 (proj.fundingProgram && proj.fundingProgram !=='')">/</span>
-                                    <span *ngIf="proj.fundingProgram && proj.fundingProgram !==''">{{ proj.fundingProgram }}</span>)
-                                  </span>
 
-                                  <span *ngIf="event.highlight.projects && event.highlight.projects.length>0 && event.provenance">
+            <div *ngFor="let event of eventsPage.values; let item_i = index" class="md-card md-card-hover eventCard">
-                                    <span class="pull-right">
+              <div class="md-card-content large-padding">
-                                      <b>from: </b>
+
-                                      <a *ngIf="event.provenance.url" href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
+                <div *ngIf="event.result.originalId" class="uk-text-meta">ID: {{event.result.originalId}}</div>
-                                      <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
+
-                                    </span>
+                <div *ngIf="event.result.titles && event.result.titles.length>0">
-                                  </span>
+                  <div class="repositoryCardHeader uk-margin-bottom uk-margin-small-top">
-                                </span>
+                    <h4>{{ event.result.titles[0] }}</h4>
-                            </div>
-                          </td>
-                        </tr>
-                        <tr class="el-item" [ngClass]="{'success': event.highlight.subjects && event.highlight.subjects.length>0 }">
-                          <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Subject(s)</strong></td>
-                          <td class="uk-table-shrink">
-                            <div class="el-title">
-                                <span *ngFor="let subj of event.publication.subjects; let s_index = index">
-                                  <br *ngIf="s_index > 0">
-                                  <span>{{ subj }}</span>
-                                  <span *ngIf="event.highlight.subjects && event.highlight.subjects.length>0 && event.provenance">
-                                    <span class="pull-right">
-                                      <b>from: </b>
-                                      <a *ngIf="event.provenance.url" href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
-                                      <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
-                                    </span>
-                                  </span>
-                                </span>
-                            </div>
-                          </td>
-                        </tr>
-                        <tr class="el-item" [ngClass]="{'success': event.highlight.publicationdate && event.highlight.publicationdate.length>0 }">
-                          <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Publication date</strong></td>
-                          <td class="uk-table-shrink"><div class="el-title">{{ event.publication.publicationdate }}</div></td>
-                        </tr>
-                        <tr class="el-item" [ngClass]="{'success': event.highlight.instances && event.highlight.instances.length>0 }">
-                          <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Rights</strong></td>
-                          <td class="uk-table-shrink">
-                            <div class="el-title">
-                                <span *ngFor="let l of event.publication.instances; let l_index = index">
-                                  <br *ngIf="l_index > 0">
-                                  <span>
-                                    {{ l.license }}&nbsp;&nbsp;<b>{{ l.hostedby }}</b><br>
-                                    <a href="{{ l.url }}" target="_blank">{{ l.url }}</a>
-                                  </span>
-                                  <span *ngIf="event.highlight.instances && event.highlight.instances.length>0 && isHighlighted(l,event.highlight.instances)">
-                                    <span class="uk-label uk-label-success">added</span>&nbsp;&nbsp;
-                                    <span *ngIf="event.provenance" class="pull-right">
-                                      <b>from: </b>
-                                      <a *ngIf="event.provenance.url" href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
-                                      <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
-                                    </span>
-                                  </span>
-                                </span>
-                            </div>
-                          </td>
-                        </tr>
-                        </tbody>
-                      </table>
-                    </div>
                   </div>
                 </div>
+
+                <ng-container *ngIf="event.highlight.creators && event.highlight.creators.length>0">
+
+                  <div class="small-content">
+                    <span class="uk-badge uk-badge-success uk-margin-small-right">{{event.highlight.creators.length}} author ORCID(s) added</span>
+                    <span class="mute-title">FROM: </span>
+                    <ng-container *ngIf="event.provenance.url">
+                      <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
+                      <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
+                    </ng-container>
+                    <ng-container *ngIf="!event.provenance.url">
+                      <span>{{ event.provenance.repositoryName }}</span>
+                    </ng-container>
+                  </div>
+
+                  <div class="uk-margin-top uk-margin-medium-bottom small-content">
+                    <div *ngFor="let author of event.highlight.creators; let p_index = index" class="uk-margin-small-bottom">
+                      <span class="highlightIndex">{{(p_index + 1)}}. </span>
+                      <span>{{ author.fullname }} <b>&nbsp;&nbsp;({{ author.orcid }})&nbsp;&nbsp;</b></span>
+                    </div>
+                  </div>
+
+                </ng-container>
+
+                <ng-container *ngIf="event.highlight.pids && event.highlight.pids.length>0">
+
+                  <div class="small-content">
+                    <span class="uk-badge uk-badge-success uk-margin-small-right">{{event.highlight.pids.length}} PID(s) added</span>
+                    <span class="mute-title">FROM: </span>
+                    <ng-container *ngIf="event.provenance.url">
+                      <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
+                      <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
+                    </ng-container>
+                    <ng-container *ngIf="!event.provenance.url">
+                      <span>{{ event.provenance.repositoryName }}</span>
+                    </ng-container>
+                  </div>
+
+                  <div class="uk-margin-top uk-margin-medium-bottom small-content">
+                    <div *ngFor="let pid of event.highlight.pids; let p_index = index" class="uk-margin-small-bottom">
+                      <span class="highlightIndex">{{(p_index + 1)}}. </span>
+                      <span>{{ pid.value }} <b>&nbsp;&nbsp;({{ pid.type }})&nbsp;&nbsp;</b></span>
+                    </div>
+                  </div>
+
+                </ng-container>
+
+                <ng-container *ngIf="event.highlight.abstracts && event.highlight.abstracts.length>0">
+
+                  <div class="small-content">
+                    <span class="uk-badge uk-badge-success uk-margin-small-right">{{event.highlight.abstracts.length}} Abstract(s) added</span>
+                    <span class="mute-title">FROM: </span>
+                    <ng-container *ngIf="event.provenance.url">
+                      <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
+                      <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
+                    </ng-container>
+                    <ng-container *ngIf="!event.provenance.url">
+                      <span>{{ event.provenance.repositoryName }}</span>
+                    </ng-container>
+                  </div>
+
+                  <div class="uk-margin-top uk-margin-medium-bottom small-content">
+                    <div *ngFor="let abs of event.highlight.abstracts; let a_index = index" class="uk-margin-small-bottom">
+                      <span class="highlightIndex">{{(a_index + 1)}}. </span>
+                      <span class=""><read-more-text [text]="abs" [maxHeight]="40"></read-more-text></span>
+                    </div>
+                  </div>
+
+                </ng-container>
+
+                <ng-container *ngIf="event.highlight.projects && event.highlight.projects.length>0">
+
+                  <div class="small-content">
+                    <span class="uk-badge uk-badge-success uk-margin-small-right">{{event.highlight.projects.length}} Project(s) added</span>
+                    <span class="mute-title">FROM: </span>
+                    <ng-container *ngIf="event.provenance.url">
+                      <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
+                      <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
+                    </ng-container>
+                    <ng-container *ngIf="!event.provenance.url">
+                      <span>{{ event.provenance.repositoryName }}</span>
+                    </ng-container>
+                  </div>
+
+                  <div class="uk-margin-top uk-margin-medium-bottom small-content">
+                    <div *ngFor="let proj of event.highlight.projects; let p_index = index" class="uk-margin-small-bottom">
+                      <span class="highlightIndex">{{(p_index + 1)}}. </span>
+                      <span *ngIf="proj.acronym && proj.acronym !==''">{{ proj.acronym }}</span>
+                      <span *ngIf="!proj.acronym || proj.acronym ===''">{{ proj.title }}</span>
+                      <span *ngIf="(proj.funder && proj.funder !=='') ||
+                                 (proj.fundingProgram && proj.fundingProgram !=='')">
+                      (<span *ngIf="proj.funder && proj.funder !==''">{{ proj.funder }} </span>
+                      <span *ngIf="(proj.funder && proj.funder !=='') &&
+                                   (proj.fundingProgram && proj.fundingProgram !=='')">/</span>
+                      <span *ngIf="proj.fundingProgram && proj.fundingProgram !==''">{{ proj.fundingProgram }}</span>)
+                    </span>
+                    </div>
+                  </div>
+
+                </ng-container>
+
+                <ng-container *ngIf="event.highlight.subjects && event.highlight.subjects.length>0">
+
+                  <div class="small-content">
+                    <span class="uk-badge uk-badge-success uk-margin-small-right">{{event.highlight.subjects.length}} Subject(s) added</span>
+                    <span class="mute-title">FROM: </span>
+                    <ng-container *ngIf="event.provenance.url">
+                      <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
+                      <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
+                    </ng-container>
+                    <ng-container *ngIf="!event.provenance.url">
+                      <span>{{ event.provenance.repositoryName }}</span>
+                    </ng-container>
+                  </div>
+
+                  <div class="uk-margin-top uk-margin-medium-bottom small-content">
+                    <div *ngFor="let subj of event.highlight.subjects; let s_index = index" class="uk-margin-small-bottom">
+                      <span class="highlightIndex">{{(s_index + 1)}}. </span>
+                      <span>{{ subj.value }}</span>
+                    </div>
+                  </div>
+
+                </ng-container>
+
+                <ng-container *ngIf="event.highlight.publications && event.highlight.publications.length>0">
+
+                  <div class="small-content">
+                    <span class="uk-badge uk-badge-success uk-margin-small-right">{{event.highlight.publications.length}} Publications(s) added</span>
+                    <span class="mute-title">FROM: </span>
+                    <ng-container *ngIf="event.provenance.url">
+                      <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
+                      <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
+                    </ng-container>
+                    <ng-container *ngIf="!event.provenance.url">
+                      <span>{{ event.provenance.repositoryName }}</span>
+                    </ng-container>
+                  </div>
+
+                  <div class="uk-margin-top uk-margin-medium-bottom small-content">
+                    <div *ngFor="let pub of event.highlight.publications; let p_index = index" class="uk-margin-small-bottom">
+                      <span class="highlightIndex">{{(p_index + 1)}}. </span>
+                      <span>{{ pub.title }} (ID: {{pub.originalId}})</span>
+                    </div>
+                  </div>
+
+                </ng-container>
+
+                <ng-container *ngIf="event.highlight.datasets && event.highlight.datasets.length>0">
+
+                  <div class="small-content">
+                    <span class="uk-badge uk-badge-success uk-margin-small-right">{{event.highlight.datasets.length}} Dataset(s) added</span>
+                    <span class="mute-title">FROM: </span>
+                    <ng-container *ngIf="event.provenance.url">
+                      <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
+                      <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
+                    </ng-container>
+                    <ng-container *ngIf="!event.provenance.url">
+                      <span>{{ event.provenance.repositoryName }}</span>
+                    </ng-container>
+                  </div>
+
+                  <div class="uk-margin-top uk-margin-medium-bottom small-content">
+                    <div *ngFor="let dataset of event.highlight.datasets; let d_index = index" class="uk-margin-small-bottom">
+                      <span class="highlightIndex">{{(d_index + 1)}}. </span>
+                      <span>{{ dataset.title }} <span *ngIf="dataset.pids && dataset.pids.length>0">({{dataset.pids[0].type}}: {{dataset.pids[0].value}})</span></span>
+                    </div>
+                  </div>
+
+                </ng-container>
+
+                <ng-container *ngIf="event.highlight.softwares && event.highlight.softwares.length>0">
+
+                  <div class="small-content">
+                    <span class="uk-badge uk-badge-success uk-margin-small-right">{{event.highlight.softwares.length}} Software(s) added</span>
+                    <span class="mute-title">FROM: </span>
+                    <ng-container *ngIf="event.provenance.url">
+                      <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
+                      <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
+                    </ng-container>
+                    <ng-container *ngIf="!event.provenance.url">
+                      <span>{{ event.provenance.repositoryName }}</span>
+                    </ng-container>
+                  </div>
+
+                  <div class="uk-margin-top uk-margin-medium-bottom small-content">
+                    <div *ngFor="let software of event.highlight.softwares; let s_index = index" class="uk-margin-small-bottom">
+                      <span class="highlightIndex">{{(s_index + 1)}}. </span>
+                      <span>{{ software.name }}</span>
+                      <span *ngIf="software.description"> <br> {{ software.description }}</span>
+                      <span><br><a href="{{ software.landingPage }}" target="_blank">{{ software.landingPage }}</a></span>
+                    </div>
+                  </div>
+
+                </ng-container>
+
+                <ng-container *ngIf="event.highlight.instances && event.highlight.instances.length>0">
+
+                  <div class="small-content">
+                    <span class="uk-badge uk-badge-success uk-margin-small-right">{{event.highlight.instances.length}} OA version(s) added</span>
+                    <span class="mute-title">FROM: </span>
+                    <ng-container *ngIf="event.provenance.url">
+                      <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
+                      <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
+                    </ng-container>
+                    <ng-container *ngIf="!event.provenance.url">
+                      <span>{{ event.provenance.repositoryName }}</span>
+                    </ng-container>
+                  </div>
+
+                  <div class="uk-margin-top uk-margin-medium-bottom small-content">
+                    <div *ngFor="let l of event.highlight.instances; let l_index = index" class="uk-margin-small-bottom">
+                      <span class="highlightIndex">{{(l_index + 1)}}. </span>
+                      <span>
+                    {{ l.license }}&nbsp;&nbsp;<b>{{ l.hostedby }}</b>
+                    <a href="{{ l.url }}" target="_blank" class="uk-margin-left">{{ l.url }}</a>
+                  </span>
+                    </div>
+                  </div>
+
+                </ng-container>
+
+                <div *ngIf="selectedItemIndex == item_i" class="uk-text-meta uk-text-center">
+                  <a (click)="showLess(item_i)">Show less <i class="fas fa-angle-up uk-margin-small-left"></i></a>
+                </div>
+
+                <div *ngIf="selectedItemIndex != item_i" class="uk-text-meta uk-text-center">
+                  <a (click)="showMore(item_i)">Show more <i class="fas fa-angle-down uk-margin-small-left"></i></a>
+                </div>
+
+                <ng-container *ngIf="selectedItemIndex == item_i">
+                  <hr>
+
+                  <!--AUTHORS-->
+                  <div *ngIf="event.result.creators && event.result.creators.length>0" class="uk-margin-small-bottom">
+                    <span class="mute-title">Author(s): </span>
+                    <span *ngFor="let auth of event.result.creators; let au_index = index" class="small-content">
+                    <span *ngIf="au_index>0"> | </span>
+                    <span>{{ auth.fullname }} <b>&nbsp;({{ auth.orcid }})&nbsp;&nbsp;</b></span>
+                  </span>
+                  </div>
+
+                  <!--PIDs-->
+                  <div *ngIf="event.result.pids && event.result.pids.length>0" class="uk-margin-small-bottom">
+                    <span class="mute-title">PID(s): </span>
+                    <span *ngFor="let pid of event.result.pids; let p_index = index" class="small-content">
+                    <br *ngIf="p_index > 0">
+                    <span>{{ pid.value }} <b>&nbsp;&nbsp;({{ pid.type }})&nbsp;&nbsp;</b></span>
+                  </span>
+                  </div>
+
+                  <!--Abstracts-->
+                  <div *ngIf="event.result.abstracts && event.result.abstracts.length>0" class="uk-margin-small-bottom">
+                    <span class="mute-title">Abstract(s): </span>
+                    <span *ngFor="let abs of event.result.abstracts; let a_index = index" class="small-content">
+                    <br *ngIf="a_index > 0">
+                    <span>
+                      <read-more-text [text]="abs" [maxHeight]="83"></read-more-text>
+                    </span>
+                  </span>
+                  </div>
+
+                  <!--Projects/Relations-->
+                  <div *ngIf="event.result.projects && event.result.projects.length>0" class="uk-margin-small-bottom">
+                    <span class="mute-title">Project(s)/Relation(s): </span>
+                    <span *ngFor="let proj of event.result.projects; let p_index = index" class="small-content">
+                    <br *ngIf="p_index > 0">
+                    <span *ngIf="proj.acronym && proj.acronym !==''">{{ proj.acronym }}</span>
+                    <span *ngIf="!proj.acronym || proj.acronym ===''">{{ proj.title }}</span>
+                    <span *ngIf="(proj.funder && proj.funder !=='') ||
+                                 (proj.fundingProgram && proj.fundingProgram !=='')">
+                      (<span *ngIf="proj.funder && proj.funder !==''">{{ proj.funder }} </span>
+                      <span *ngIf="(proj.funder && proj.funder !=='') &&
+                                   (proj.fundingProgram && proj.fundingProgram !=='')">/</span>
+                      <span *ngIf="proj.fundingProgram && proj.fundingProgram !==''">{{ proj.fundingProgram }}</span>)
+                    </span>
+                  </span>
+                  </div>
+
+                  <!--Subjects-->
+                  <div *ngIf="event.result.subjects && event.result.subjects.length>0" class="uk-margin-small-bottom">
+                    <span class="mute-title">Subject(s): </span>
+                    <span *ngFor="let subj of event.result.subjects; let s_index = index" class="small-content">
+                    <span *ngIf="s_index>0"> | </span>
+                    <span>{{ subj.value }}</span>
+                  </span>
+                  </div>
+
+                  <!--Publications-->
+                  <div *ngIf="event.result.publications && event.result.publications.length>0" class="uk-margin-small-bottom">
+                    <span *ngIf="this.topic.includes('PUBLICATION')" class="mute-title">{{this.lastTopicEntry}} Publication(s): </span>
+                    <span *ngIf="!this.topic.includes('PUBLICATION')" class="mute-title">Publication(s): </span>
+                    <span *ngFor="let pub of event.result.publications; let p_index = index" class="small-content">
+                    <br *ngIf="p_index > 0">
+                    <span>{{ pub.title }} (ID: {{pub.originalId}})</span>
+                  </span>
+                  </div>
+
+                  <!--Datasets-->
+                  <div *ngIf="event.result.datasets && event.result.datasets.length>0" class="uk-margin-small-bottom">
+                    <span *ngIf="this.topic.includes('DATASET')" class="mute-title">{{this.lastTopicEntry}} Dataset(s): </span>
+                    <span *ngIf="!this.topic.includes('DATASET')" class="mute-title">Dataset(s): </span>
+                    <span *ngFor="let dataset of event.result.datasets; let d_index = index" class="small-content">
+                    <br *ngIf="d_index > 0">
+                    <span>{{ dataset.title }} <span *ngIf="dataset.pids && dataset.pids.length>0">({{dataset.pids[0].type}}: {{dataset.pids[0].value}})</span></span>
+                  </span>
+                  </div>
+
+                  <!--Software-->
+                  <div *ngIf="event.result.softwares && event.result.softwares.length>0" class="uk-margin-small-bottom">
+                    <span *ngIf="this.topic.includes('SOFTWARE')" class="mute-title">{{this.lastTopicEntry}} Software(s): </span>
+                    <span *ngIf="!this.topic.includes('SOFTWARE')" class="mute-title">Software(s): </span>
+                    <span *ngFor="let software of event.result.softwares; let s_index = index" class="small-content">
+                    <br *ngIf="s_index > 0">
+                    <span>{{ software.name }}</span>
+                    <span *ngIf="software.description"> <br> {{ software.description }}</span>
+                    <span><br><a href="{{ software.landingPage }}" target="_blank">{{ software.landingPage }}</a></span>
+                    <span *ngIf="software.landingPage !== software.repository"><br><a href="{{ software.repository }}" target="_blank">{{ software.repository }}</a></span>
+                  </span>
+                  </div>
+
+                  <!--Publication Date-->
+                  <div *ngIf="event.result.publicationdate && event.result.publicationdate.length>0" class="uk-margin-small-bottom">
+                    <span class="mute-title">Publication date(s): </span>
+                    <span class="small-content">
+                    {{ event.result.publicationdate }}
+                  </span>
+                  </div>
+
+                  <!--Rights-->
+                  <div *ngIf="event.result.instances && event.result.instances.length>0" class="uk-margin-small-bottom">
+                    <span class="mute-title">Rights: </span>
+                    <span *ngFor="let l of event.result.instances; let l_index = index" class="small-content">
+                    <br *ngIf="l_index > 0">
+                    <span>
+                      {{ l.license }}&nbsp;&nbsp;<b>{{ l.hostedby }}</b> - <a class="" href="{{ l.url }}" target="_blank">{{ l.url }}</a>
+                    </span>
+                  </span>
+                  </div>
+
+                </ng-container>
+
               </div>
-            </div>
-            <div>
-              <ul class="uk-pagination">
-                <li>
-                  <a class="uk-link uk-link-muted" (click)="goToPreviousPage()">
-                    <span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">
-                      <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" icon="pagination-previous" ratio="1"></svg>
-                    </span>
-                    Previous
-                  </a>
-                </li>
-                <li class="uk-margin-auto-left">
-                  <a class="uk-link uk-link-muted" (click)="goToNextPage()">
-                    Next
-                    <span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">
-                      <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" icon="pagination-next" ratio="1"></svg>
-                    </span>
-                  </a>
-                </li>
-              </ul>
-
-              <!-- RESTORE WHEN getNotificationsBySubscriptionId IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE -->
-              <!--<div class="resultsPageLabel">page {{ eventsPage.currPage+1 }} of {{ eventsPage.totalPages }}</div>-->
-
-              <!-- DELETE WHEN getNotificationsBySubscriptionId IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE -->
-              <div class="resultsPageLabel">page {{ (eventsPage.totalPages > 0) ? currentPage+1 : 0 }} of {{ eventsPage.totalPages }}</div>
 
             </div>
+
+
+            <!-- BOTTOM PAGINATION LINKS -->
+            <ul class="uk-pagination uk-margin-top uk-flex-right" uk-margin>
+              <li><a (click)="goToPreviousPage()" class="pagination_arrow"><span uk-pagination-previous></span></a></li>
+              <li class="uk-active"><span>{{ (eventsPage.totalPages > 0) ? currentPage+1 : 0 }}</span></li>
+              <li><a (click)="goToNextPage()" class="pagination_arrow"><span uk-pagination-next></span></a></li>
+            </ul>
+
           </div>
-
         </div>
 
-        <!-- RIGHT HELP CONTENT -->
-        <aside-help-content #rightHelperContent [position]="'right'"
-                            [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-        </aside-help-content>
-
       </div>
-    </div>
 
+      <!-- RIGHT HELP CONTENT -->
+      <aside-help-content #rightHelperContent [position]="'right'"
+                          [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+      </aside-help-content>
+
+    </div>
 
     <!-- BOTTOM HELP CONTENT -->
     <help-content #bottomHelperContent [position]="'bottom'"
                   [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
     </help-content>
 
-
   </div>
 </div>
+

src/app/pages/content/content-notifications-of-subscription.component.ts

@@ -16,9 +16,12 @@ export class ContentNotificationsOfSubscriptionComponent implements OnInit {
 
   subId: string;
   topic: string;
+  lastTopicEntry = '';
   eventsPage: EventsPage;
   currentPage: number;  /* DELETE WHEN getNotificationsBySubscriptionId IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE */
 
+  selectedItemIndex: number;
+
   constructor(private route: ActivatedRoute,
               private brokerService: BrokerService) {}
 
@@ -26,6 +29,11 @@ export class ContentNotificationsOfSubscriptionComponent implements OnInit {
     this.subId = this.route.snapshot.paramMap.get('id');
     this.currentPage = 0; /* DELETE WHEN getNotificationsBySubscriptionId IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE */
     this.getEventsPage(0);
+    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");
   }
 
   getEventsPage(page: number) {
@@ -46,10 +54,18 @@ export class ContentNotificationsOfSubscriptionComponent implements OnInit {
           this.noEvents = noEventsForTopic;
         }
         this.getCorrectTopic();
+        // console.log('Topic: ' + this.topic);
+        this.lastTopicEntry = this.topic.substring(this.topic.lastIndexOf('|') + 1).toLowerCase();
+        this.lastTopicEntry = this.replaceAll(this.lastTopicEntry, '_', ' ');
+        // console.log('Last topic entry: ' + this.lastTopicEntry);
       }
     );
   }
 
+  replaceAll(str, find, replace) {
+    return str.replace(new RegExp(find, 'g'), replace);
+  }
+
 
   goToNextPage() {
     /* RESTORE WHEN getNotificationsBySubscriptionId IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE */
@@ -63,6 +79,8 @@ export class ContentNotificationsOfSubscriptionComponent implements OnInit {
       this.currentPage = this.currentPage + 1;
       console.log(`Get me page ${this.currentPage}!`);
       this.getEventsPage(this.currentPage);
+
+      window.scrollTo(0, 0);
     }
   }
 
@@ -78,6 +96,8 @@ export class ContentNotificationsOfSubscriptionComponent implements OnInit {
       this.currentPage = this.currentPage - 1;
       console.log(`Get me page ${this.currentPage}!`);
       this.getEventsPage(this.currentPage);
+
+      window.scrollTo(0, 0);
     }
   }
 
@@ -93,4 +113,20 @@ export class ContentNotificationsOfSubscriptionComponent implements OnInit {
       this.topic += ` | ${temp[i]}`;
     }
   }
+
+  displayFullResultInfo(i: number) {
+    if (this.selectedItemIndex === i) {
+      this.selectedItemIndex = null;
+    } else {
+      this.selectedItemIndex = i;
+    }
+  }
+
+  showMore(i: number) {
+    this.selectedItemIndex = i;
+  }
+
+  showLess(i: number) {
+    this.selectedItemIndex = null;
+  }
 }

src/app/pages/content/content-notifications.component.html

@@ -1,92 +1,94 @@
-<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
+<div id="page_content">
-  <div class="uk-width-1-1@m uk-first-column">
+  <div id="page_content_inner">
-
+    <h2 class="heading_b uk-margin-bottom">Enrich Your Content - Browse Subscriptions</h2>
-    <h1 class="uk-h2">Enrich Your Content - Browse Subscriptions</h1>
 
     <!-- TOP HELP CONTENT -->
     <help-content #topHelperContent [position]="'top'"
                   [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
     </help-content>
 
-    <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
+    <div class="uk-grid">
-      <div class="uk-grid">
 
-        <!-- LEFT HELP CONTENT -->
+      <!-- LEFT HELP CONTENT -->
-        <aside-help-content #leftHelperContent [position]="'left'"
+      <aside-help-content #leftHelperContent [position]="'left'"
-                            [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+                          [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-        </aside-help-content>
+      </aside-help-content>
 
-        <!-- MIDDLE -->
+      <!-- MIDDLE -->
-        <div class=" uk-width-expand@m">
+      <div class=" uk-width-expand@m">
 
-          <div>
+        <div>
-            <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{errorMessage}}</div>
+          <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{errorMessage}}</div>
-            <div *ngIf="successMessage" class="uk-alert uk-alert-success">{{successMessage}}</div>
+          <div *ngIf="successMessage" class="uk-alert uk-alert-success">{{successMessage}}</div>
-            <div *ngIf="loadingMessage" class="loading-big">
+          <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="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">{{ loadingMessage }}</div>
-              <div class="whiteFilm"></div>
+            <div class="transparentFilm"></div>
-            </div>
-            <div *ngIf="noSubscriptions" class="uk-alert">{{noSubscriptions}}</div>
           </div>
-          <div *ngIf="subscrOfUser && subKeys">
+          <div *ngIf="noSubscriptions" class="uk-alert">{{noSubscriptions}}</div>
-            <div *ngFor="let key of subKeys">
+        </div>
-              <h4 class="uk-h4 uk-text-primary uk-scrollspy-inview uk-animation-slide-top-medium uk-scrollspy-class=">
+        <div *ngIf="subscrOfUser && subKeys">
-                <span>{{ key }}</span>
+          <div *ngFor="let key of subKeys" class="uk-margin-medium-top">
-              </h4>
+
-              <table class="uk-table uk-table-striped uk-table-middle">
+            <div class="md-card">
-                <thead>
+              <div class="md-card-toolbar">
-                <tr>
+                <h3 class="md-card-toolbar-heading-text">
-                  <th>Topic</th>
+                  {{ key }}
-                  <th>Creation Date</th>
+                </h3>
-                  <th>Last Notification Date</th>
+              </div>
-                  <th class="uk-text-nowrap"># of notifications</th>
+              <div class="md-card-content">
-                  <th class="uk-text-nowrap">Actions</th>
+                <table class="uk-table uk-table-striped uk-table-middle">
-                </tr>
+                  <thead>
-                </thead>
+                  <tr>
-                <tbody>
+                    <th>Topic</th>
-                <tr *ngFor="let sub of subscrOfUser[key]" class="el-item">
+                    <th>Creation Date</th>
-                  <td class="uk-table-shrink">
+                    <th>Last Notification Date</th>
-                    <a [routerLink]="sub.id">
+                    <th class="uk-text-nowrap"># of notifications</th>
-                      <div class="el-title">{{ sub.topic }}</div>
+                    <th class="uk-text-nowrap">Actions</th>
-                    </a>
+                  </tr>
-                  </td>
+                  </thead>
-                  <td class="uk-table-shrink">
+                  <tbody>
-                    <div class="el-title">{{ sub.creationDate | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+                  <tr *ngFor="let sub of subscrOfUser[key]" class="el-item">
-                  </td>
+                    <td class="uk-table-shrink">
-                  <td class="uk-table-shrink">
+                      <a [routerLink]="sub.id">
-                    <div class="el-title">{{ sub.lastNotificationDate | date:'yyyy-MM-dd HH:mm:ss' }}</div>
+                        <div class="el-title">{{ sub.topic }}</div>
-                  </td>
+                      </a>
-                  <td class="uk-text-nowrap uk-table-shrink">
+                    </td>
-                    <div class="el-title">{{ sub.count }}</div>
+                    <td class="uk-table-shrink">
-                  </td>
+                      <div class="el-title">{{ sub.creationDate | date:'yyyy-MM-dd HH:mm:ss' }}</div>
-                  <td class="uk-text-nowrap uk-table-shrink">
+                    </td>
-                    <a class="el-link" (click)="deleteSubscription(sub.id)">
+                    <td class="uk-table-shrink">
-                      <i class="fa fa-remove" aria-hidden="true"></i>
+                      <div class="el-title">{{ sub.lastNotificationDate | date:'yyyy-MM-dd HH:mm:ss' }}</div>
-                    </a>
+                    </td>
-                  </td>
+                    <td class="uk-text-nowrap uk-table-shrink">
-                </tr>
+                      <div class="el-title">{{ sub.count }}</div>
-                </tbody>
+                    </td>
-              </table>
+                    <td class="uk-text-nowrap uk-table-shrink">
+                      <a class="el-link" (click)="deleteSubscription(sub.id)">
+                        <i class="fa fa-remove" aria-hidden="true"></i>
+                      </a>
+                    </td>
+                  </tr>
+                  </tbody>
+                </table>
+              </div>
             </div>
           </div>
-
         </div>
 
-        <!-- RIGHT HELP CONTENT -->
-        <aside-help-content #rightHelperContent [position]="'right'"
-                            [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-        </aside-help-content>
-
       </div>
-    </div>
 
+      <!-- RIGHT HELP CONTENT -->
+      <aside-help-content #rightHelperContent [position]="'right'"
+                          [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+      </aside-help-content>
+
+    </div>
 
     <!-- BOTTOM HELP CONTENT -->
     <help-content #bottomHelperContent [position]="'bottom'"
                   [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
     </help-content>
 
-
   </div>
 </div>
 

src/app/pages/content/content-notifications.component.ts

@@ -24,6 +24,11 @@ export class ContentNotificationsComponent implements OnInit {
 
   ngOnInit() {
     this.getSubscriptions();
+    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");
   }
 
   getSubscriptions() {

src/app/pages/content/content.module.ts

@@ -1,6 +1,4 @@
 import { ReusableComponentsModule } from '../../shared/reusablecomponents/reusable-components.module';
-import { ContentEventsOfRepositoryComponent } from './content-events-of-repository.component';
-import { ContentEventsOfRepoEventslistComponent } from './content-events-of-repo-eventslist.component';
 import { ReactiveFormsModule } from '@angular/forms';
 import { ContentNotificationsOfSubscriptionComponent } from './content-notifications-of-subscription.component';
 import { NgModule } from '@angular/core';
@@ -8,7 +6,6 @@ import { CommonModule } from '@angular/common';
 import { TabsModule } from 'ngx-bootstrap';
 import { ContentRouting } from './content.routing';
 import { ContentComponent } from './content.component';
-import { ContentEventsComponent } from './content-events.component';
 import { ContentNotificationsComponent } from './content-notifications.component';
 
 @NgModule ({
@@ -21,9 +18,9 @@ import { ContentNotificationsComponent } from './content-notifications.component
   ],
   declarations: [
     ContentComponent,
-    ContentEventsComponent,
+    // ContentEventsComponent,
-    ContentEventsOfRepositoryComponent,
+    // ContentEventsOfRepositoryComponent,
-    ContentEventsOfRepoEventslistComponent,
+    // ContentEventsOfRepoEventslistComponent,
     ContentNotificationsComponent,
     ContentNotificationsOfSubscriptionComponent
   ]

src/app/pages/content/content.routing.ts

@@ -1,10 +1,7 @@
 import { RouterModule, Routes } from '@angular/router';
 import { NgModule } from '@angular/core';
-import { ContentEventsComponent } from './content-events.component';
 import { ContentComponent } from './content.component';
 import { ContentNotificationsComponent } from './content-notifications.component';
-import { ContentEventsOfRepositoryComponent } from './content-events-of-repository.component';
-import { ContentEventsOfRepoEventslistComponent } from './content-events-of-repo-eventslist.component';
 import { ContentNotificationsOfSubscriptionComponent } from './content-notifications-of-subscription.component';
 
 const contentRoutes: Routes = [
@@ -12,18 +9,18 @@ const contentRoutes: Routes = [
     path: '',
     component: ContentComponent,
     children: [
-      {
+      // {
-        path: 'events',
+      //   path: 'events',
-        component: ContentEventsComponent,
+      //   component: ContentEventsComponent,
-      },
+      // },
-      {
+      // {
-        path: 'events/:name',
+      //   path: 'events/:name',
-        component: ContentEventsOfRepositoryComponent,
+      //   component: ContentEventsOfRepositoryComponent,
-      },
+      // },
-      {
+      // {
-        path: 'events/:name/:topic',
+      //   path: 'events/:name/:topic',
-        component: ContentEventsOfRepoEventslistComponent,
+      //   component: ContentEventsOfRepoEventslistComponent,
-      },
+      // },
       {
         path: 'notifications',
         component: ContentNotificationsComponent,

src/app/pages/dashboard/dashboard.component.html

@@ -1,145 +0,0 @@
-<div *ngIf="getIsUserLoggedIn()" id="contentWrapper" class="tm-main uk-section uk-section-default" uk-height-viewport="expand: true" style="box-sizing: border-box;" >
-
-
-  <div class="uk-container uk-container-expand">
-    <div class="uk-sticky-placeholder" style="height: 84px; margin: 0px;" aria-hidden="aria-hidden"></div>
-    <div class="uk-grid uk-padding">
-      <div class="uk-width-3-4@m uk-first-column">
-        <div class="uk-margin uk-grid-match uk-child-width-1-1 uk-child-width-1-2@m uk-grid-small uk-grid uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" uk-grid="" style="">
-          <div class="uk-first-column">
-            <div class="el-item uk-card uk-card-hover uk-card-body uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
-              <a class="el-link uk-position-cover uk-margin-remove-adjacent"  [routerLink]="['/sources','register']" uk-scroll=""></a>
-              <div class="uk-child-width-expand uk-flex-middle uk-grid" uk-grid="">
-                <div class="uk-width-1-2@m uk-first-column">
-                  <img  class="el-image uk-border-rounded" src="../../../assets/imgs/iStock-153949408.jpg" >
-                </div>
-                <div>
-                  <div>
-                    <h3 class="el-title uk-margin uk-card-title">Register</h3>
-                    <div class="el-content uk-margin">
-                      Register data sources in the OpenAIRE infrastructure
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div>
-            <div class="el-item uk-card uk-card-hover uk-card-body uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
-              <a class="el-link uk-position-cover uk-margin-remove-adjacent" [routerLink]="['/compatibility','validate']" uk-scroll=""></a>
-              <div class="uk-child-width-expand uk-flex-middle uk-grid" uk-grid="">
-                <div class="uk-width-1-2@m uk-first-column">
-                  <img  class="el-image uk-border-rounded" src="../../../assets/imgs/iStock-516286898.jpg" >
-                </div>
-                <div>
-                  <div>
-                    <h3 class="el-title uk-margin uk-card-title">Validate</h3>
-                    <div class="el-content uk-margin">
-                      Validate data sources against OpenAIRE guidelines
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="uk-grid-margin uk-first-column">
-            <div class="el-item uk-card uk-card-hover uk-card-body uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
-              <a class="el-link uk-position-cover uk-margin-remove-adjacent" [routerLink]="['/content','notifications']" uk-scroll=""></a>
-              <div class="uk-child-width-expand uk-flex-middle uk-grid" uk-grid="">
-                <div class="uk-width-1-2@m uk-first-column">
-                  <img  class="el-image uk-border-rounded" src="../../../assets/imgs/iStock-466267165.jpg" >
-                </div>
-                <div>
-                  <div>
-                    <h3 class="el-title uk-margin uk-card-title">Notifications</h3>
-                    <div class="el-content uk-margin">
-                      View notifications to enrich the metadata and the content
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="uk-grid-margin">
-            <div class="el-item uk-card uk-card-hover uk-card-body uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
-              <a class="el-link uk-position-cover uk-margin-remove-adjacent" uk-scroll="" [routerLink]="['/getImpact']"></a>
-              <div class="uk-child-width-expand uk-flex-middle uk-grid" uk-grid="">
-                <div class="uk-width-1-2@m uk-first-column">
-                  <img  class="el-image uk-border-rounded" src="../../../assets/imgs/iStock-659630328.jpg" >
-                </div>
-                <div>
-                  <div>
-                    <h3 class="el-title uk-margin uk-card-title">Metrics</h3>
-                    <div class="el-content uk-margin">
-                      View aggregated, cleaned usage statistics for repository access
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-width-1-4@m">
-        <div class="uk-card uk-card-body uk-card-grey" style="min-height: 300px;">
-          <h5 class="">MY DATASOURCES AT A GLANCE</h5>
-
-          <div *ngIf="loading">
-            <div class="loader-big" style="text-align: center; padding-top: 100px; color: rgb(47, 64, 80); font-weight: bold;">
-              Retrieving your datasources...
-            </div>
-            <div class="whiteFilm"></div>
-          </div>
-
-          <div *ngIf="!loading">
-            <div *ngIf="repositories && repositories.length>0">
-              <div *ngFor="let repository of repositories" class="uk-margin-bottom uk-margin-top">
-
-                <div class="uk-padding-small" style="background-color: #fff">
-                  <div class="uk-inline uk-width-1-3@m">
-                    <img src="{{repository.logoURL ? repository.logoURL : '../../../assets/imgs/yourLogoHere.jpg'}}" alt="">
-                  </div>
-                  <div class="uk-inline uk-width-2-3@m">
-                    <div class="uk-margin-left">{{repository.repositoryName}}</div>
-                  </div>
-                </div>
-
-                <div class="uk-margin-small-top">
-                  <div>Number of records collected:
-                    <span *ngIf="repository.recordsCollected">{{repository.recordsCollected}}</span>
-                    <span *ngIf="!repository.recordsCollected">not available</span>
-                  </div>
-                  <div>Last indexed version:
-                    <span *ngIf="repository.lastIndexedVersion">{{repository.lastIndexedVersion | date :'short'}}</span>
-                    <span *ngIf="!repository.lastIndexedVersion">not available</span>
-                  </div>
-                  <div>Content enrichment events:
-                    <span *ngIf="repository.enrichmentEvents">{{repository.enrichmentEvents}}</span>
-                    <span *ngIf="!repository.enrichmentEvents">not available</span>
-                  </div>
-                  <div>Views:
-                    <span *ngIf="repository.totalViews">{{repository.totalViews}}</span>
-                    <span *ngIf="!repository.totalViews">not available</span>
-                  </div>
-                  <div>Downloads:
-                    <span *ngIf="repository.totalDownloads">{{repository.totalDownloads}}</span>
-                    <span *ngIf="!repository.totalDownloads">not available</span>
-                  </div>
-                </div>
-
-              </div>
-            </div>
-            <div *ngIf="!repositories || repositories.length==0">
-              No repositories available...
-            </div>
-          </div>
-
-
-
-        </div>
-      </div>
-
-    </div>
-  </div>
-</div>

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

@@ -1,49 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { AuthenticationService } from '../../services/authentication.service';
-import { RepositoryService } from '../../services/repository.service';
-import {Repository, RepositorySnippet, RepositorySummaryInfo} from '../../domain/typeScriptClasses';
-
-@Component ({
-  selector: 'app-dashboard',
-  templateUrl: 'dashboard.component.html'
-})
-
-export class DashboardComponent implements OnInit {
-
-  constructor(private authService: AuthenticationService,
-              private repositoryService: RepositoryService) { }
-
-  repositories: RepositorySummaryInfo[] = [];
-  userEmail: string;
-
-  loading: boolean = true;
-
-  ngOnInit() {
-    // this.getUserEmail();
-    this.userEmail = sessionStorage.getItem('email');
-    if (this.userEmail) {
-      this.getRepositoriesSummaryInfo();
-    }
-  }
-
-  getIsUserLoggedIn() {
-    return this.authService.getIsUserLoggedIn();
-  }
-
-  getUserEmail() {
-    this.userEmail = this.authService.getUserEmail();
-  }
-
-  getRepos() {
-    console.log('in getRepos');
-    this.getRepositoriesSummaryInfo();
-  }
-
-  getRepositoriesSummaryInfo() {
-    this.repositoryService.getRepositoriesSummaryInfo().subscribe(
-      repositories => { this.repositories = repositories; this.loading=false },
-      error => { console.log('Errrrror'); this.loading=false },
-      () => { console.log(this.repositories); this.loading=false }
-    );
-  }
-}

src/app/pages/emptypage/empty-page.component.html

@@ -0,0 +1,5 @@
+<div id="page_content">
+  <div id="page_content_inner">
+    <div>This is an empty page</div>
+  </div>
+</div>

src/app/pages/emptypage/empty-page.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component ({
+  selector: 'app-empty-page',
+  templateUrl: './empty-page.component.html',
+})
+
+export class EmptyPageComponent {
+
+  constructor() {}
+}

src/app/pages/join/join.component.html

@@ -0,0 +1,172 @@
+<div id="page_content">
+  <div id="page_content_inner" class="whiteBackground uk-padding-remove-left uk-padding-remove-right">
+
+    <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="!loadingMessage" class="uk-margin-top">
+      <div class="uk-section">
+        <div class="uk-margin-large-left uk-margin-large-right">
+          <h3 class="heading_b" style="font-weight: 500">You have not yet registered any repositories</h3>
+
+          <div class="uk-grid uk-child-width-1-3@l uk-child-width-1-2@m uk-child-width-1-1@s uk-grid-match">
+
+            <div class="">
+              <div class="md-card md-card-hover">
+                <a [routerLink]="['/sources/register']">
+                  <div class="md-card-content large-padding" style="min-height: 150px;">
+                    <div class="">
+                      <strong>Register</strong>
+                    </div>
+                    <p>Register data sources in the OpenAIRE infrastructure.</p>
+                  </div>
+                </a>
+              </div>
+            </div>
+
+
+            <div class="">
+              <div class="md-card md-card-hover">
+                <a [routerLink]="['/compatibility/validate']">
+                  <div class="md-card-content large-padding" style="min-height: 150px;">
+                    <div class="">
+                      <strong>Validate</strong>
+                    </div>
+                    <p>Validate data sources against OpenAIRE guidelines.</p>
+                  </div>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="uk-section uk-background-norepeat uk-background-cover uk-background-top-center"
+           style="background-image: url('../../../assets/imgs/landing/abstract2.svg'); !important; min-height: calc(80vh);" uk-height-viewport="offset-top: true; offset-bottom: 20;">
+        <div class="uk-margin-large-top uk-margin-large-left uk-margin-large-right">
+          <h3 class="heading_b" style="font-weight: 700">Take a look at the Provide Dashboard and functionalities</h3>
+
+          <div class="uk-container uk-container-large uk-margin-medium-top">
+
+            <div class="uk-slider" tabindex="-1" uk-slider="velocity: 0;autoplay: true;autoplay-interval: 5000;pause-on-hover: false;center: true">
+              <div class="uk-position-relative">
+                <div class="uk-slider-container">
+                  <ul class="uk-slider-items uk-child-width-1-1" style="transform: translateX(-1300px);">
+                    <li class="ng-star-inserted uk-active" tabindex="-1" style="order: 1;">
+                      <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
+                        <div class="uk-first-column">
+                          <video class="uk-box-shadow-large uk-border-rounded" autoplay loop>
+                            <source src="../../../../assets/mp4/validate.mp4" type="video/mp4">
+                          </video>
+                          <!--<img class="uk-box-shadow-large uk-border-rounded" src="../../../../assets/gifs/validate.gif">-->
+                        </div>
+                        <div class="uk-margin-top">
+                          <div>
+                            <div class="uk-text-bold uk-h4">Validate</div>
+                            <div class="uk-margin-medium">
+                              Interoperable metadata is key for effective content sharing.
+                              <p class="uk-margin-top">
+                                OpenAIRE guidelines are a global standard to expose and share your content. Use our validation service and see how you can apply them.
+                              </p>
+                            </div>
+                            <div class="uk-inline">
+                              <a class="uk-button uk-button-primary uk-text-uppercase" [routerLink]="['/about']">learn more</a>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </li>
+                    <li tabindex="-1" style="order: 1;">
+                      <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
+                        <div class="uk-first-column">
+                          <video class="uk-box-shadow-large uk-border-rounded" autoplay loop>
+                            <source src="../../../../assets/mp4/register.mp4" type="video/mp4">
+                          </video>
+                          <!--<img class="uk-box-shadow-large uk-border-rounded" src="../../../../assets/gifs/register.gif">-->
+                        </div>
+                        <div class="uk-margin-top">
+                          <div>
+                            <div class="uk-text-bold uk-h4">Register</div>
+                            <div class="uk-margin-medium">
+                              Reach a wider audience around the world.
+                              <p class="uk-margin-top">
+                                Register your literature or data repository, OA Journal, CRIS in OpenAIRE and be part of a global interlinked network.
+                              </p>
+                            </div>
+                            <div class="uk-inline">
+                              <a class="uk-button uk-button-primary uk-text-uppercase" [routerLink]="['/about']">learn more</a>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </li>
+                    <li tabindex="-1" style="order: 1;">
+                      <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
+                        <div class="uk-first-column">
+                          <video class="uk-box-shadow-large uk-border-rounded" autoplay loop>
+                            <source src="../../../../assets/mp4/enrich.mp4" type="video/mp4">
+                          </video>
+                          <!--<img class="uk-box-shadow-large uk-border-rounded" src="../../../../assets/gifs/enrichments.gif">-->
+                        </div>
+                        <div class="uk-margin-top">
+                          <div>
+                            <div class="uk-text-bold uk-h4">Enrich</div>
+                            <div class="uk-margin-medium">
+                              Improve your metadata. Get more connections.
+                              <p class="uk-margin-top">
+                                Our newly released OA Broker service offers a wealth of information on scholarly communication data. Find out what interests you and subscribe to enrich your records.
+                              </p>
+                            </div>
+                            <div class="uk-inline">
+                              <a class="uk-button uk-button-primary uk-text-uppercase" [routerLink]="['/about']">learn more</a>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </li>
+                    <li tabindex="-1" style="order: 1;">
+                      <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
+                        <div class="uk-first-column">
+                          <video class="uk-box-shadow-large uk-border-rounded" autoplay loop>
+                            <source src="../../../../assets/mp4/usage-stat.mp4" type="video/mp4">
+                          </video>
+                          <!--<img class="uk-box-shadow-large uk-border-rounded" src="../../../../assets/gifs/usageStats.gif">-->
+                        </div>
+                        <div class="uk-margin-top">
+                          <div>
+                            <div class="uk-text-bold uk-h4">Usage statistics</div>
+                            <div class="uk-margin-medium">
+                              Open research impact empowers Open Science.
+                              <p class="uk-margin-top">
+                                Share usage data via OpenAIRE's global Open Metrics Service. Get the benefit of an aggregated environment to broaden the mechanisms for impact assessment.
+                              </p>
+                            </div>
+                            <div class="uk-inline">
+                              <a class="uk-button uk-button-primary uk-text-uppercase" [routerLink]="['/about']">learn more</a>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+
+              <ul class="uk-position-relative uk-slider-nav uk-dotnav uk-flex-center uk-margin">
+                <li uk-slider-item="0" class="uk-active"><a href="#"></a></li>
+                <li uk-slider-item="1" class=""><a href="#"></a></li>
+                <li uk-slider-item="2" class=""><a href="#"></a></li>
+                <li uk-slider-item="3" class=""><a href="#"></a></li>
+              </ul>
+            </div>
+
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>

src/app/pages/join/join.component.ts

@@ -0,0 +1,56 @@
+import { Component, OnInit } from '@angular/core';
+import { RepositoryService } from "../../services/repository.service";
+import { SharedService } from "../../services/shared.service";
+import { RepositorySnippet } from "../../domain/typeScriptClasses";
+import { Router } from "@angular/router";
+
+@Component ({
+  selector: 'app-join',
+  templateUrl: './join.component.html',
+})
+
+export class JoinComponent implements OnInit {
+
+  repositoriesOfUser: RepositorySnippet[];
+
+  loadingMessage: string;
+
+  constructor(private repositoryService: RepositoryService,
+              private sharedService: SharedService,
+              private router: Router) {
+  }
+
+  ngOnInit() {
+
+    this.loadingMessage = ' ';
+
+    let body = document.getElementsByTagName('body')[0];
+    body.classList.remove("landing");
+    body.classList.add("dashboard");
+
+    if(this.sharedService.getRepositoriesOfUser() && this.sharedService.getRepositoriesOfUser().length>0) {
+      this.repositoriesOfUser = this.sharedService.getRepositoriesOfUser();
+      if(this.repositoriesOfUser.length>0)
+        this.router.navigate([`/repository/${this.repositoriesOfUser[0].id}/dashboard`]);
+      else
+        this.loadingMessage = null;
+    } else {
+      this.getReposOfUser();
+    }
+
+  }
+
+  getReposOfUser(): void {
+    this.repositoryService.getRepositoriesOfUser()
+      .subscribe(
+        repos => {
+          this.repositoriesOfUser = repos;
+          if(this.repositoriesOfUser.length>0)
+            this.router.navigate([`/repository/${this.repositoriesOfUser[0].id}/dashboard`]);
+          else
+            this.loadingMessage = null;
+        },
+        error => { console.log(error); }
+      );
+  }
+}

src/app/pages/landing/about/about.component.html

@@ -0,0 +1,367 @@
+<!--MOBILE & PAD PORTRAIT-->
+<div class="uk-hidden@m">
+  <div class="provideLanding">
+
+    <div class="image-front-topbar  uk-section-default"
+         uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light">
+      <!--<div style="background-image: url('../../../../assets/imgs/landing/Group 1149.svg'); background-color: rgb(255, 255, 255); box-sizing: border-box; min-height: calc(-101.35px + 100vh);"-->
+      <!--<div style="background-image: url('../../../../assets/imgs/landing/Group 1149.svg'); background-color: rgb(255, 255, 255); box-sizing: border-box; min-height: calc(-101.35px + 100vh);"-->
+      <div style="background: transparent linear-gradient(0deg, #F7F7F7 20%, #E2EEFA 30%) 0% 0% no-repeat padding-box; box-sizing: border-box; min-height: calc(-101.35px + 100vh);"
+           class="uk-background-norepeat uk-background-cover uk-background-top-center uk-background-fixed uk-section uk-padding-remove-bottom uk-flex uk-flex-middle" uk-height-viewport="offset-top: true;offset-bottom: 20">
+        <div class="uk-width-1-1">
+          <!--<div class="uk-margin-medium uk-grid uk-grid-stack" uk-grid="">-->
+            <!--<div class="uk-width-1-1@m">-->
+            <!--</div>-->
+          <!--</div>-->
+          <div class="uk-container uk-container-large uk-margin-large aboutPage">
+            <!--<div class="uk-sticky-placeholder" style="height: 84px; margin: 0px;"></div>-->
+            <div class="uk-grid uk-flex-middle uk-grid uk-grid-stack uk-margin-small-left" uk-grid="">
+
+              <div class="el-overlay uk-panel uk-width-1-2@l uk-width-1-2@m uk-dark">
+                <div class="uk-margin-left uk-margin-right">
+                  <h1 class="el-title uk-margin">Capture the essence</h1>
+                  <div class="uk-margin-medium-top">
+                    <p class="text-muted">The OpenAIRE Content Provider Dashboard is a one-stop-shop web service where data providers (repository, data archive, journal, aggregator, CRIS system) interact with OpenAIRE. It provides the front-end access to many of OpenAIRE’s backend services.</p>
+                  </div>
+                </div>
+
+                <!--<p><a (click)="goToPage('/dashboard')" class="el-link uk-button uk-button-primary">Start here</a></p>-->
+              </div>
+
+              <div class="el-overlay uk-panel uk-width-1-2@l uk-width-1-2@m uk-dark" style="text-align: right">
+                <div class="uk-margin-left uk-margin-right">
+                  <img style="box-shadow: 0px 3px 8px #00000033;" src="../../../../assets/imgs/landing/about-us-dashboard-2.png">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="uk-section-secondary uk-section uk-section-small uk-padding-remove-bottom uk-padding-remove-top uk-preserve-color">
+
+      <div style="position: relative; top: 120px">
+        <div style="text-align: center">
+          <img src="../../../../assets/imgs/landing/_0002_Group-2.png" width="214">
+        </div>
+      </div>
+
+      <div class="uk-container uk-container-expand uk-margin-large-top">
+
+        <div class="validationAndRegistrationSection uk-padding">
+
+          <div class="uk-container uk-container-medium uk-container-center uk-margin-large-top">
+            <div class="" style="text-align: center">
+              <h2 class="">Validation & Registration</h2>
+              <p>
+                The OpenAIRE Validator service allows to test your repository’s compatibility with the OpenAIRE Guidelines. If validation succeeds the data source can be registered for regular aggregation and indexing in OpenAIRE. OpenAIRE allows for registration of institutional and thematic repositories registered in OpenDOAR, research data repositories registered in re3data, individual e-Journals, CRIS, aggregators and publishers.
+              </p>
+              <p class="uk-margin-remove-bottom">
+                The Validator service includes two main steps to perform the aggregation and indexing of your datasource in OpenAIRE:
+              </p>
+            </div>
+          </div>
+
+          <div class="uk-container uk-container-large uk-container-center">
+            <div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m">
+
+              <div class="uk-margin-medium-top">
+                <!--<div>-->
+                <!--<div style="position: relative; top: 10px; text-align: right;right: 82px;">-->
+                  <!--<img src="../../../../assets/imgs/landing/arrow5.svg">-->
+                <!--</div>-->
+                <h3 class="uk-margin-remove-top">1st: Validate your datasource</h3>
+                <p>Test the compatibility of your repository/journal or aggregator to the OpenAIRE guidelines. If validation
+                  succeeds the data source can be registered for regular aggregation and indexing in OpenAIRE.</p>
+                <!--<div style="position: relative; top: -10px; text-align: right;right: -145px;">-->
+                  <!--<img src="../../../../assets/imgs/landing/arrow7.svg">-->
+                <!--</div>-->
+              </div>
+
+              <div class="uk-margin-medium-top">
+                <h3>2nd: Register your datasource</h3>
+                <p>Register your literature repository, data repository, journal or aggregator in OpenAIRE.</p>
+                <p>Once registered in OpenAIRE, the data source manager are able to use the Provide functionalities to validate their data source compatibility with the OpenAIRE Guidelines, to get notification to enrich their research results with additional or missing metadata, and to track the data source usage activity.</p>
+              </div>
+            </div>
+          </div>
+
+          <div class="uk-container uk-container-large uk-container-center uk-margin-large-top">
+            <div class="uk-text-center">
+              <p>Learn more: <a href="https://www.openaire.eu/validator-registration-guide" target="_blank">https://www.openaire.eu/validator-registration-guide</a></p>
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+    </div>
+
+    <div class="uk-section-secondary uk-section uk-section-large uk-padding-remove-top uk-padding-remove-bottom uk-preserve-color">
+      <div class="uk-container uk-container-expand" style="position: relative; top: -260px">
+
+        <div class="uk-grid">
+
+          <div class="uk-width-1-2@l uk-width-1-2@m">
+
+            <div style="position: relative; top: 255px">
+              <div style="text-align: center">
+                <img src="../../../../assets/imgs/landing/_0001_Group-3.png" width="158">
+              </div>
+            </div>
+
+            <!--<div style="position: relative; top: -4px; left: 550px;">-->
+              <!--<img src="../../../../assets/imgs/landing/arrow3.svg">-->
+            <!--</div>-->
+            <div class="enrichmentsSection uk-padding" style="margin-top: 175px">
+              <!--<div style="text-align: center">-->
+              <!--<img src="../../../../assets/imgs/landing/_0001_Group-3.png" width="158">-->
+              <!--</div>-->
+              <div class="uk-margin-large-top" style="text-align: center">
+                <h2 class="">Enrichments</h2>
+                <p>Content enrichment is a powerful tool that enables Content providers to enrich research artifacts with additional metadata, through the OpenAIRE Notification Broker Service.</p>
+                <p>Learn more: <a href="https://www.openaire.eu/content-enrichment-guide" target="_blank">https://www.openaire.eu/content-enrichment-guide</a></p>
+              </div>
+            </div>
+            <!--<div style="position: relative; top: -50px; text-align: right;right: -40px;">-->
+              <!--<img src="../../../../assets/imgs/landing/arrow4.svg">-->
+            <!--</div>-->
+          </div>
+
+
+          <div class="uk-width-1-2@l uk-width-1-2@m uk-margin-xlarge" style="position: relative; top: -290px">
+
+            <div style="position: relative; top: 275px">
+              <div style="text-align: center">
+                <img src="../../../../assets/imgs/landing/_0003_Group-1.png" width="258">
+              </div>
+            </div>
+
+            <div class="measureSection uk-padding">
+              <!--<div style="text-align: center">-->
+              <!--<img src="../../../../assets/imgs/landing/_0003_Group-1.png" width="258">-->
+              <!--</div>-->
+              <div class="uk-margin-large-top" style="text-align: center">
+                <h2 class="">Usage Statistics</h2>
+                <p>OpenAIRE’s Usage Statistic service uses the Matomo Open Source Analytics platform (matomo.org) to track usage activity. It collects and analyzes usage data from the network of OpenAIRE data providers and exploits usage metrics like downloads and metadata views.</p>
+                <p>Learn more: <a href="https://www.openaire.eu/guides-usage-statistics" target="_blank">https://www.openaire.eu/guides-usage-statistics</a></p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+    <div class="uk-section uk-section-large uk-section-muted uk-background-norepeat uk-background-cover uk-background-top-center
+  uk-background-fixed uk-section uk-flex uk-flex-middle"
+         style="background: transparent linear-gradient(0deg, #E2EEFA 20%, #F7F7F7 70%) 0% 0% no-repeat padding-box; box-sizing: border-box; position: relative; top: -450px">
+
+      <div class="uk-container uk-container-xsmall uk-container-center uk-margin-left uk-margin-right">
+        <div class="uk-grid uk-flex" style="display: block; text-align: center">
+          <div class="">
+            <h2>Contact us to help you.</h2>
+            <p class="text-muted">Are you looking for more? Get in touch with our team and let us help you.</p>
+            <a class="uk-margin-large-top uk-text-uppercase uk-button uk-button-primary" href="https://www.openaire.eu/contact-us/" target="_blank">Get in touch</a>
+          </div>
+          <div class="uk-margin-top">
+            <img src="../../../../assets/imgs/landing/_0000_Group-4.png" width="153">
+          </div>
+        </div>
+      </div>
+
+      <!--<div class="uk-container uk-container-large">-->
+        <!--<div class="uk-grid uk-flex" style="align-items: center">-->
+          <!--<div class="uk-width-1-3@l uk-width-1-3@m">-->
+            <!--<img src="../../../../assets/imgs/landing/_0000_Group-4.png">-->
+          <!--</div>-->
+          <!--<div class="uk-width-2-3@l uk-width-2-3@m">-->
+            <!--<div class="uk-margin-large-left">-->
+              <!--<h2>Contact us to help you.</h2>-->
+              <!--<p class="text-muted">Are you looking for more? Get in touch with our team and let us help you.</p>-->
+              <!--<button class="uk-margin-large-top uk-text-uppercase uk-button uk-button-primary">Get in touch</button>-->
+            <!--</div>-->
+          <!--</div>-->
+        <!--</div>-->
+      <!--</div>-->
+    </div>
+
+  </div>
+</div>
+
+<!--LAPTOP & PAD LANDSCAPE-->
+<div class="uk-visible@m">
+  <div class="provideLanding">
+
+    <div class="image-front-topbar  uk-section-default"
+         uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light">
+      <div style="background-color: #F7F7F7; box-sizing: border-box; min-height: calc(-101.35px + 100vh);"
+           class="uk-background-norepeat uk-background-cover uk-background-top-center uk-background-fixed uk-section uk-padding-remove-bottom uk-flex uk-flex-middle" uk-height-viewport="offset-top: true;offset-bottom: 20">
+        <div class="uk-width-1-1">
+          <div class="uk-margin-medium uk-grid uk-grid-stack" uk-grid="">
+            <div class="uk-width-1-1@m">
+            </div>
+          </div>
+          <div class="uk-container uk-container-expand uk-margin-large aboutPage">
+            <div class="uk-sticky-placeholder" style="height: 84px; margin: 0px;"></div>
+            <div class="uk-grid-large uk-flex-middle uk-grid uk-grid-stack uk-margin-large-left" uk-grid="">
+
+              <div class="el-overlay uk-panel uk-width-1-2@l uk-width-1-2@m uk-dark">
+                <div class="uk-margin-left uk-margin-right">
+                  <h1 class="el-title uk-margin">Capture the essence</h1>
+                  <div class="uk-margin-medium-top">
+                    <p class="text-muted">The OpenAIRE Content Provider Dashboard is a one-stop-shop web service where data providers (repository, data archive, journal, aggregator, CRIS system) interact with OpenAIRE. It provides the front-end access to many of OpenAIRE’s backend services.</p>
+                  </div>
+                </div>
+
+                <!--<p><a (click)="goToPage('/dashboard')" class="el-link uk-button uk-button-primary">Start here</a></p>-->
+              </div>
+
+              <div class="el-overlay uk-panel uk-width-1-2@l uk-width-1-2@m uk-dark" style="text-align: right">
+                <div class="uk-margin-left uk-margin-right">
+                  <img style="box-shadow: 0px 3px 8px #00000033;" src="../../../../assets/imgs/landing/about-us-dashboard-2.png">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="uk-section-secondary uk-section uk-section-small uk-padding-remove-bottom uk-padding-remove-top uk-preserve-color">
+
+      <div style="position: relative; top: 150px">
+        <div style="text-align: center">
+          <img src="../../../../assets/imgs/landing/_0002_Group-2.png" width="214">
+        </div>
+      </div>
+
+      <div class="uk-container uk-container-expand uk-margin-large-top">
+
+        <div class="validationAndRegistrationSection uk-padding">
+
+          <div class="uk-container uk-container-medium uk-container-center uk-margin-large-top">
+            <div class="" style="text-align: center">
+              <h2 class="">Validation & Registration</h2>
+              <p>
+                The OpenAIRE Validator service allows to test your repository’s compatibility with the OpenAIRE Guidelines. If validation succeeds the data source can be registered for regular aggregation and indexing in OpenAIRE. OpenAIRE allows for registration of institutional and thematic repositories registered in OpenDOAR, research data repositories registered in re3data, individual e-Journals, CRIS, aggregators and publishers.
+              </p>
+              <p class="uk-margin-remove-bottom">
+                The Validator service includes two main steps to perform the aggregation and indexing of your datasource in OpenAIRE:
+              </p>
+            </div>
+          </div>
+
+          <div class="uk-container uk-container-large uk-container-center">
+            <div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m">
+
+              <div class="paddingLargeLeft paddingLargeRight">
+                <!--<div>-->
+                <div style="position: relative; top: 10px; text-align: right;right: 82px;">
+                  <img src="../../../../assets/imgs/landing/arrow5.svg">
+                </div>
+                <h3 class="uk-margin-remove-top">1st: Validate your datasource</h3>
+                <p>Test the compatibility of your repository/journal or aggregator to the OpenAIRE guidelines. If validation
+                  succeeds the data source can be registered for regular aggregation and indexing in OpenAIRE.</p>
+                <div style="position: relative; top: -10px; text-align: right;right: -145px;">
+                  <img src="../../../../assets/imgs/landing/arrow7.svg">
+                </div>
+              </div>
+
+              <div class="padding paddingLargeLeft paddingLargeRight uk-margin-xlarge">
+                <h3>2nd: Register your datasource</h3>
+                <p>Register your literature repository, data repository, journal or aggregator in OpenAIRE.</p>
+                <p>Once registered in OpenAIRE, the data source manager are able to use the Provide functionalities to validate their data source compatibility with the OpenAIRE Guidelines, to get notification to enrich their research results with additional or missing metadata, and to track the data source usage activity.</p>
+              </div>
+            </div>
+          </div>
+
+          <div class="uk-container uk-container-large uk-container-center uk-margin-large-top">
+            <div class="uk-text-center">
+              <p>Learn more: <a href="https://www.openaire.eu/validator-registration-guide" target="_blank">https://www.openaire.eu/validator-registration-guide</a></p>
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+    </div>
+
+    <div class="uk-section-secondary uk-section uk-section-large uk-padding-remove-top uk-padding-remove-bottom uk-preserve-color">
+      <div class="uk-container uk-container-expand" style="position: relative; top: -260px">
+
+        <div class="uk-grid">
+
+          <div class="uk-width-1-2@l uk-width-1-2@m">
+
+            <div style="position: relative; top: 275px">
+              <div style="text-align: center">
+                <img src="../../../../assets/imgs/landing/_0001_Group-3.png" width="158">
+              </div>
+            </div>
+
+            <div style="position: relative; top: -4px; left: 550px;">
+              <img src="../../../../assets/imgs/landing/arrow3.svg">
+            </div>
+            <div class="enrichmentsSection uk-padding" style="margin-top: -23px">
+              <!--<div style="text-align: center">-->
+                <!--<img src="../../../../assets/imgs/landing/_0001_Group-3.png" width="158">-->
+              <!--</div>-->
+              <div class="uk-margin-large-top" style="text-align: center">
+                <h2 class="">Enrichments</h2>
+                <p>Content enrichment is a powerful tool that enables Content providers to enrich research artifacts with additional metadata, through the OpenAIRE Notification Broker Service.</p>
+                <p>Learn more: <a href="https://www.openaire.eu/content-enrichment-guide" target="_blank">https://www.openaire.eu/content-enrichment-guide</a></p>
+              </div>
+            </div>
+            <div style="position: relative; top: -50px; text-align: right;right: -40px;">
+              <img src="../../../../assets/imgs/landing/arrow4.svg">
+            </div>
+          </div>
+
+
+          <div class="uk-width-1-2@l uk-width-1-2@m uk-margin-xlarge">
+
+            <div style="position: relative; top: 275px">
+              <div style="text-align: center">
+                <img src="../../../../assets/imgs/landing/_0003_Group-1.png" width="258">
+              </div>
+            </div>
+
+            <div class="measureSection uk-padding">
+              <!--<div style="text-align: center">-->
+                <!--<img src="../../../../assets/imgs/landing/_0003_Group-1.png" width="258">-->
+              <!--</div>-->
+              <div class="uk-margin-large-top" style="text-align: center">
+                <h2 class="">Usage Statistics</h2>
+                <p>OpenAIRE’s Usage Statistic service uses the Matomo Open Source Analytics platform (matomo.org) to track usage activity. It collects and analyzes usage data from the network of OpenAIRE data providers and exploits usage metrics like downloads and metadata views.</p>
+                <p>Learn more: <a href="https://www.openaire.eu/guides-usage-statistics" target="_blank">https://www.openaire.eu/guides-usage-statistics</a></p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+    <div class="uk-section uk-section-large uk-section-muted uk-background-norepeat uk-background-cover uk-background-top-center
+  uk-background-fixed uk-section uk-flex uk-flex-middle uk-padding-remove-top"
+         style="background: transparent linear-gradient(0deg, #E2EEFA 20%, #F7F7F7 70%) 0% 0% no-repeat padding-box; box-sizing: border-box;">
+      <div class="uk-container uk-container-large">
+        <div class="uk-grid uk-flex" style="align-items: center">
+          <div class="uk-width-1-3@l uk-width-1-3@m">
+            <img src="../../../../assets/imgs/landing/_0000_Group-4.png">
+          </div>
+          <div class="uk-width-2-3@l uk-width-2-3@m">
+            <div class="uk-margin-large-left">
+              <h2>Contact us to help you.</h2>
+              <p class="text-muted">Are you looking for more? Get in touch with our team and let us help you.</p>
+              <a class="uk-margin-large-top uk-text-uppercase uk-button uk-button-primary" href="https://www.openaire.eu/contact-us/" target="_blank">Get in touch</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>

src/app/pages/landing/about/about.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+import { AuthenticationService } from '../../../services/authentication.service';
+import { StatisticsService } from '../../../services/statistics.service';
+import { Router } from '@angular/router';
+
+@Component ({
+  selector: 'app-about',
+  templateUrl: './about.component.html',
+  styleUrls: ['../../../../assets/css/landingpage/theme.css','../../../../assets/css/landingpage/custom.css','../../../../assets/css/landingpage/custom-provide.css'],
+})
+
+export class AboutComponent implements OnInit {
+
+  constructor(private authService: AuthenticationService,
+              private statsService: StatisticsService,
+              private router: Router) { }
+
+  ngOnInit() {
+    let body = document.getElementsByTagName('body')[0];
+    body.classList.remove("dashboard");
+    body.classList.add("landing");
+  }
+
+  login() {
+    this.authService.loginWithState();
+  }
+
+
+  goToPage(pageUrl: string) {
+    if (this.authService.getIsUserLoggedIn()) {
+      this.router.navigate([pageUrl]);
+    } else {
+      this.authService.redirectUrl = pageUrl;
+      this.login();
+    }
+  }
+
+}

src/app/pages/landing/home/home.component.html

@@ -0,0 +1,933 @@
+<!--MOBILE & PAD PORTRAIT-->
+<div class="uk-hidden@m">
+  <div class="provideLanding">
+    <div class="image-front-topbar  uk-section-default"
+         uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light">
+      <!--<div style="background-image: url('../../../../assets/imgs/landing/Group 1149.svg'); background-color: rgb(255, 255, 255); box-sizing: border-box; min-height: calc(-101.35px + 100vh);"-->
+      <!--<div style="background-image: url('../../../../assets/imgs/landing/Group 1149.svg'); background-color: rgb(255, 255, 255); box-sizing: border-box; min-height: calc(-101.35px + 100vh);"-->
+      <div style="background: transparent linear-gradient(0deg, #F7F7F7 20%, #E2EEFA 30%) 0% 0% no-repeat padding-box; box-sizing: border-box; min-height: calc(-101.35px + 100vh);"
+           class="uk-background-norepeat uk-background-cover uk-background-top-center uk-background-fixed uk-section uk-padding-remove-bottom uk-flex uk-flex-middle" uk-height-viewport="offset-top: true;offset-bottom: 20">
+        <div class="uk-width-1-1">
+          <!--<div class="uk-margin-medium uk-grid uk-grid-stack" uk-grid="">-->
+            <!--<div class="uk-width-1-1@m">-->
+            <!--</div>-->
+          <!--</div>-->
+          <div class="uk-container uk-container-large uk-margin-large">
+            <!--<div class="uk-sticky-placeholder" style="height: 84px; margin: 0px;"></div>-->
+            <div class="search_box_bg uk-grid-large uk-flex-middle uk-grid uk-grid-stack" uk-grid="">
+              <div class="el-overlay uk-panel uk-width-1-1 uk-dark uk-text-center">
+
+                <h1 class="uk-margin">Your data is valuable. Get connected. Participate</h1>
+
+                <div class="uk-container uk-container-xsmall uk-container-center">
+                  <div class="uk-margin-medium-top uk-margin-medium-left uk-margin-medium-right text-muted">
+                    The Provide Dashboard is a one-stop-service where content providers interact
+                    with OpenAIRE and become a building block of a global Open Research community. A gateway to the European Open Science Cloud.
+                  </div>
+                </div>
+
+                <div class="uk-container uk-container-small uk-container-center">
+
+                  <div class="uk-margin-left uk-margin-right uk-margin-top">
+                    <div class="uk-grid uk-child-width-1-3">
+                      <div class="uk-width-1-3">
+                        <img src="../../../../assets/imgs/landing/paidaki_me_xartia.png">
+                      </div>
+                      <div class="uk-width-1-3" style="display: flex; align-items: center; justify-content: center">
+                        <!--fixme remove custom padding??-->
+                        <a style="padding: 0 17px" (click)="goToPage('/join')" class="el-link uk-button uk-button-primary">SIGN IN</a>
+                      </div>
+                    </div>
+                  </div>
+
+                </div>
+
+                <!--<div class="el-content uk-margin"><h2 style="color:#1a1a1a!important">A one-stop-shop for sharing, finding and enriching your content</h2></div>-->
+                <!--<p><a (click)="goToPage('/dashboard')" class="el-link uk-button uk-button-primary">Sign In</a></p>-->
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="uk-section-muted uk-section uk-section-large uk-section-overlap uk-position-relative">
+
+      <h2 class="uk-text-center">PROVIDE Dashboard brings all your data together</h2>
+
+      <div class="uk-margin-medium-left uk-margin-medium-right uk-text-center text-muted">Get front-end access to many of OpenAIRE’s backend services</div>
+
+      <div class="uk-container uk-container-large uk-margin-medium-top">
+
+        <div class="slider-mobile-card">
+          <div class="uk-slider" tabindex="-1" uk-slider="velocity: 0;autoplay: true;autoplay-interval: 5000;pause-on-hover: false;center: true">
+            <div class="uk-position-relative">
+              <div class="uk-slider-container">
+                <ul class="uk-slider-items uk-child-width-1-1" style="transform: translateX(-1300px);">
+                  <li class="ng-star-inserted uk-active" tabindex="-1" style="order: 1;">
+                    <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
+                      <div class="uk-first-column">
+                        <video class="uk-box-shadow-large uk-border-rounded" autoplay loop>
+                          <source src="../../../../assets/mp4/validate.mp4" type="video/mp4">
+                        </video>
+                        <!--<img class="uk-box-shadow-large uk-border-rounded" src="../../../../assets/gifs/validate.gif">-->
+                      </div>
+                      <div class="uk-margin-top">
+                        <div>
+                          <div class="uk-text-bold uk-h4">Validate</div>
+                          <div class="uk-margin-medium">
+                            Interoperable metadata is key for effective content sharing.
+                            <p class="uk-margin-top">
+                              OpenAIRE guidelines are a global standard to expose and share your content. Use our validation service and see how you can apply them.
+                            </p>
+                          </div>
+                          <div class="uk-inline">
+                            <a class="uk-button uk-button-primary uk-text-uppercase" [routerLink]="['/about']">learn more</a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </li>
+                  <li tabindex="-1" style="order: 1;">
+                    <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
+                      <div class="uk-first-column">
+                        <video class="uk-box-shadow-large uk-border-rounded" autoplay loop>
+                          <source src="../../../../assets/mp4/register.mp4" type="video/mp4">
+                        </video>
+                        <!--<img class="uk-box-shadow-large uk-border-rounded" src="../../../../assets/gifs/register.gif">-->
+                      </div>
+                      <div class="uk-margin-top">
+                        <div>
+                          <div class="uk-text-bold uk-h4">Register</div>
+                          <div class="uk-margin-medium">
+                            Reach a wider audience around the world.
+                            <p class="uk-margin-top">
+                              Register your literature or data repository, OA Journal, CRIS in OpenAIRE and be part of a global interlinked network.
+                            </p>
+                          </div>
+                          <div class="uk-inline">
+                            <a class="uk-button uk-button-primary uk-text-uppercase" [routerLink]="['/about']">learn more</a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </li>
+                  <li tabindex="-1" style="order: 1;">
+                    <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
+                      <div class="uk-first-column">
+                        <video class="uk-box-shadow-large uk-border-rounded" autoplay loop>
+                          <source src="../../../../assets/mp4/enrich.mp4" type="video/mp4">
+                        </video>
+                        <!--<img class="uk-box-shadow-large uk-border-rounded" src="../../../../assets/gifs/enrichments.gif">-->
+                      </div>
+                      <div class="uk-margin-top">
+                        <div>
+                          <div class="uk-text-bold uk-h4">Enrich</div>
+                          <div class="uk-margin-medium">
+                            Improve your metadata. Get more connections.
+                            <p class="uk-margin-top">
+                              Our newly released OA Broker service offers a wealth of information on scholarly communication data. Find out what interests you and subscribe to enrich your records.
+                            </p>
+                          </div>
+                          <div class="uk-inline">
+                            <a class="uk-button uk-button-primary uk-text-uppercase" [routerLink]="['/about']">learn more</a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </li>
+                  <li tabindex="-1" style="order: 1;">
+                    <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
+                      <div class="uk-first-column">
+                        <video class="uk-box-shadow-large uk-border-rounded" autoplay loop>
+                          <source src="../../../../assets/mp4/usage-stat.mp4" type="video/mp4">
+                        </video>
+                        <!--<img class="uk-box-shadow-large uk-border-rounded" src="../../../../assets/gifs/usageStats.gif">-->
+                      </div>
+                      <div class="uk-margin-top">
+                        <div>
+                          <div class="uk-text-bold uk-h4">Usage statistics</div>
+                          <div class="uk-margin-medium">
+                            Open research impact empowers Open Science.
+                            <p class="uk-margin-top">
+                              Share usage data via OpenAIRE's global Open Metrics Service. Get the benefit of an aggregated environment to broaden the mechanisms for impact assessment.
+                            </p>
+                          </div>
+                          <div class="uk-inline">
+                            <a class="uk-button uk-button-primary uk-text-uppercase" [routerLink]="['/about']">learn more</a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+            <ul class="uk-position-relative uk-slider-nav uk-dotnav uk-flex-center uk-margin">
+              <li uk-slider-item="0" class="uk-active"><a href="#"></a></li>
+              <li uk-slider-item="1" class=""><a href="#"></a></li>
+              <li uk-slider-item="2" class=""><a href="#"></a></li>
+              <li uk-slider-item="3" class=""><a href="#"></a></li>
+            </ul>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+    <div class="uk-section uk-section-muted uk-section-large uk-preserve-color uk-background-norepeat uk-background-cover uk-background-top-center"
+         style="background-image: url('../../../../assets/imgs/landing/abstract2.svg'); !important; min-height: calc(80vh);" uk-height-viewport="offset-top: true; offset-bottom: 20;">
+      <div class="uk-container uk-container-expand">
+
+        <h1 class="uk-text-center">Do numbers make you happy?</h1>
+
+        <div class="uk-margin-medium-top">
+          <div class="" style="display: block; width: 60%; margin-left: auto; margin-right: auto">
+            <img src="../../../../assets/imgs/landing/avakas.png">
+          </div>
+        </div>
+
+        <div class="uk-grid">
+          <div class="uk-width-expand">
+
+            <div class="uk-grid uk-child-width-1-2 uk-text-center" style="display: flex;align-items: center;height: 70%;">
+
+              <div class="uk-margin-top">
+                <div class="bigNumber">{{ (statisticsNumbers && statisticsNumbers.literature) ? (statisticsNumbers.literature | number) : 'N/A' }}</div>
+                <div class="uk-text-uppercase">Literature repositories</div>
+              </div>
+
+              <div class="uk-margin-top">
+                <div class="bigNumber">{{ (statisticsNumbers && statisticsNumbers.journal) ? (statisticsNumbers.journal | number) : 'N/A' }}</div>
+                <div class="uk-text-uppercase">Data repositories</div>
+              </div>
+
+              <div class="uk-margin-top">
+                <div class="bigNumber">{{ (statisticsNumbers && statisticsNumbers.dataRepositories) ? (statisticsNumbers.dataRepositories | number) : 'N/A' }}</div>
+                <div class="uk-text-uppercase">OA journals</div>
+              </div>
+
+              <div class="uk-margin-top">
+                <div class="bigNumber">{{ (statisticsNumbers && statisticsNumbers.aggregators) ? (statisticsNumbers.aggregators | number) : 'N/A' }}</div>
+                <div class="uk-text-uppercase">Aggregators</div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+      </div>
+
+      <!--<div class="uk-container uk-container-large uk-margin-top">-->
+        <!--<div class="uk-grid uk-child-width-1-5@l uk-child-width-1-5@m uk-child-width-1-2@s uk-margin-medium-left">-->
+
+          <!--<div class="uk-margin-top">-->
+            <!--<h3>{{ (statisticsNumbers && statisticsNumbers.publications) ? (statisticsNumbers.publications | number) : 'N/A' }}</h3>-->
+            <!--<div class="uk-text-uppercase text-small iconsWithText">-->
+              <!--<span><i class="fas fa-book fa-2x uk-margin-small-right" style="color: #3EC8FE"></i></span>-->
+              <!--<span>publications</span>-->
+            <!--</div>-->
+          <!--</div>-->
+          <!--<div class="uk-margin-top">-->
+            <!--<h3>{{ (statisticsNumbers && statisticsNumbers.datasets) ? (statisticsNumbers.datasets | number) : 'N/A' }}</h3>-->
+            <!--<div class="uk-text-uppercase text-small iconsWithText">-->
+              <!--<span><i class="fas fa-database fa-2x uk-margin-small-right" style="color: #3EC8FE"></i></span>-->
+              <!--<span>datasets</span>-->
+            <!--</div>-->
+          <!--</div>-->
+          <!--<div class="uk-margin-top">-->
+            <!--<h3>{{ (statisticsNumbers && statisticsNumbers.software) ? (statisticsNumbers.software | number) : 'N/A' }}</h3>-->
+            <!--<div class="uk-text-uppercase text-small iconsWithText">-->
+              <!--<span><i class="fas fa-cog fa-2x uk-margin-small-right" style="color: #3EC8FE"></i></span>-->
+              <!--<span>software</span>-->
+            <!--</div>-->
+          <!--</div>-->
+          <!--<div class="uk-margin-top">-->
+            <!--<h3>{{ (statisticsNumbers && statisticsNumbers.usagestats) ? statisticsNumbers.usagestats : 'N/A' }}</h3>-->
+            <!--<div class="uk-text-uppercase text-small iconsWithText">-->
+              <!--<span><i class="fas fa-globe-americas fa-2x uk-margin-small-right" style="color: #3EC8FE"></i></span>-->
+              <!--<span>metadata exchange events</span>-->
+            <!--</div>-->
+          <!--</div>-->
+          <!--<div class="uk-margin-top">-->
+            <!--<h3>{{ statisticsNumbers ? (statisticsNumbers.lastYearUsagestats.number | number) : 'N/A' }}</h3>-->
+            <!--<div class="uk-text-uppercase text-small iconsWithText">-->
+              <!--<span><i class="fas fa-globe-americas fa-2x uk-margin-small-right" style="color: #3EC8FE"></i></span>-->
+              <!--<span>usage statistics views & downloads ({{ statisticsNumbers ? statisticsNumbers.lastYearUsagestats.year : 'N/A' }})</span>-->
+            <!--</div>-->
+          <!--</div>-->
+        <!--</div>-->
+      <!--</div>-->
+    </div>
+
+    <!--<div class="uk-section uk-section-muted uk-section-large text-small" style="background: transparent url('../../../../assets/imgs/landing/kathisto%20paidaki.png') 0% 0% no-repeat padding-box;">-->
+    <div class="uk-section uk-section-muted uk-padding-remove-top text-small">
+
+      <div style="position: relative; top: 25px; text-align: right;right: 33px;">
+        <img src="../../../../assets/imgs/landing/kathisto%20paidaki.png" width="58">
+      </div>
+
+
+      <div class="uk-container uk-container-xsmall uk-margin-left uk-margin-right openAIREGuidelinesBoxMobile">
+        <div>
+
+          <div class="uk-margin-medium-top">
+            <h5 class="uk-text-uppercase uk-text-center">
+              <span><strong>Follow OpenAIRE Guidelines</strong></span>
+            </h5>
+          </div>
+
+          <div style="">
+            <div class="uk-grid uk-child-width-1-1">
+              <div class="uk-margin-medium-bottom uk-margin-medium-top">
+                <div style="border-bottom: 1px solid #BFBFBF; padding-bottom: 20px" class="uk-margin-left uk-margin-right">
+                  <div style="display: block; text-align: center">
+                    <img width="56" src="../../../../assets/imgs/landing/Guidelines%20color.svg">
+                  </div>
+                  <div class="uk-margin-bottom uk-margin-top" style="font-weight: 600">OpenAIRE Guidelines</div>
+                  <p>Follow the OpenAIRE <strong>Guidelines</strong> to expose your metadata in order to integrate with OpenAIRE infrastructure. <br>Learn more:
+                    <a href="https://guidelines.openaire.eu/en/latest/" target="_blank">https://guidelines.openaire.eu/en/latest/</a></p>
+                  <p>Follow the OpenAIRE <strong>Usage Statistics Guidelines</strong> to get ready to track the usage activity of your data source. <br>Learn more:
+                    <a href="https://openaire.github.io/usage-statistics-guidelines/" target="_blank">https://openaire.github.io/usage-statistics-guidelines/</a></p>
+                </div>
+
+              </div>
+
+              <div class="uk-margin-medium-bottom">
+                <div style="border-bottom: 1px solid #BFBFBF; padding-bottom: 20px" class="uk-margin-left uk-margin-right">
+                  <div style="display: block; text-align: center">
+                    <img width="43" src="../../../../assets/imgs/landing/Data%20color.svg">
+                  </div>
+                  <div class="uk-margin-bottom uk-margin-top" style="font-weight: 600">Our Data Policies</div>
+                  <p>
+                    <strong>Data Acquisition</strong> - How we retrieve data, how often, what processes it goes through (aggregating cleaning, transforming, inferring, de-duplicating), what are the quality checks along all data processing stages.
+                  </p>
+                  <p>
+                    <strong>Data usage</strong> - Who is able to retrieve our data, what are the licences, what about specific SLAs. <br>Learn more:
+                    <a href="https://www.openaire.eu/content-aquisition-policy" target="_blank">https://www.openaire.eu/content-aquisition-policy</a>
+                  </p>
+                </div>
+
+              </div>
+
+            </div>
+          </div>
+
+
+          <div class="uk-grid uk-child-width-1-1">
+            <div class="uk-margin-medium-bottom">
+              <div style="border-bottom: 1px solid #BFBFBF; padding-bottom: 20px" class="uk-margin-left uk-margin-right">
+                <div style="display: block; text-align: center">
+                  <img width="55" src="../../../../assets/imgs/landing/Agreement%20color.svg">
+                </div>
+                <div class="uk-margin-bottom uk-margin-top" style="font-weight: 600">Terms of Agreement for Content Providers</div>
+                <p>Learn more: <a href="https://www.openaire.eu/terms-of-use-for-content-providers" target="_blank">https://www.openaire.eu/terms-of-use-for-content-providers</a></p>
+              </div>
+
+            </div>
+
+            <div class="uk-margin-medium-bottom">
+              <div class="uk-margin-left uk-margin-right">
+                <div style="display: block; text-align: center">
+                  <img width="38" src="../../../../assets/imgs/landing/Support%20color.svg">
+                </div>
+                <div class="uk-margin-bottom uk-margin-top" style="font-weight: 600">Support</div>
+                <p>Read <strong>how to use OpenAIRE</strong> to best serve your needs. <br>Learn more: <a href="https://www.openaire.eu/guides" target="_blank">https://www.openaire.eu/guides</a></p>
+                <p>Ask a question. Contact us via our <strong>ticketing system.</strong> <br>Learn more: <a href="https://www.openaire.eu/support/helpdesk" target="_blank">https://www.openaire.eu/support/helpdesk</a></p>
+              </div>
+
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+
+    <div class="uk-section uk-section-muted uk-background-norepeat uk-background-cover uk-background-top-center uk-background-fixed uk-section uk-flex uk-flex-middle"
+         style="background: transparent linear-gradient(0deg, #E2EEFA 20%, #F7F7F7 70%) 0% 0% no-repeat padding-box; box-sizing: border-box;">
+      <!--<div style="background: transparent linear-gradient(0deg, #E2EEFA 20%, #F7F7F7 30%) 0% 0% no-repeat padding-box; box-sizing: border-box;"-->
+      <!--class="uk-background-norepeat uk-background-cover uk-background-top-center uk-background-fixed uk-section uk-padding-remove-bottom uk-flex uk-flex-middle">-->
+      <!--</div>-->
+      <div class="uk-container uk-container-xsmall uk-container-center uk-margin-left uk-margin-right">
+        <div class="uk-grid uk-flex" style="display: block; text-align: center">
+          <div class="">
+            <h2>We're here to help you.</h2>
+            <p class="text-muted">Do you want more information? Our team is happy to assist you.</p>
+            <a class="uk-margin-large-top uk-text-uppercase uk-button uk-button-primary" href="https://www.openaire.eu/contact-us/" target="_blank">Get in touch</a>
+          </div>
+          <div class="uk-margin-top">
+            <img src="../../../../assets/imgs/landing/contact%20us%20provide.png" width="66">
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="uk-section uk-section-muted" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}">
+      <div class="uk-container uk-container-large">
+        <div class="uk-grid uk-margin-large-top uk-margin-large-bottom" uk-grid="">
+          <div class="uk-width-1-1 uk-width-1-2@s uk-dark uk-grid-item-match uk-first-column explore">
+            <div class="uk-margin uk-panel uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
+              <h4 class="el-title uk-margin uk-h4">
+                Researcher?
+              </h4>
+              <div class="el-content uk-margin">
+                Explore all OA research results. Link all your research. Build your profile
+              </div>
+              <p>
+                <a href="https://{{ inBeta ? 'beta.' : '' }}explore.openaire.eu" class="el-link uk-button uk-button-default" target="_blank">
+                  OpenAIRE.EXPLORE
+                </a>
+              </p>
+            </div>
+          </div>
+          <div class="uk-width-1-1 uk-width-1-2@s uk-dark uk-grid-item-match connect">
+            <div class="uk-margin uk-panel uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
+              <h4 class="el-title uk-margin uk-h4">
+                Research community?
+              </h4>
+              <div class="el-content uk-margin">
+                Use a trusted partner to share, link, disseminate and monitor your research.
+              </div>
+              <p>
+                <a href="https://{{ inBeta ? 'beta.' : '' }}connect.openaire.eu" class="el-link uk-button uk-button-default" target="_blank">
+                  OpenAIRE.CONNECT
+                </a>
+              </p>
+            </div>
+          </div>
+          <div class="uk-width-1-1 uk-width-1-2@s uk-dark uk-grid-item-match monitor">
+            <div class="uk-margin uk-panel uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
+              <h4 class="el-title uk-margin uk-h4">
+                Research manager?
+              </h4>
+              <div class="el-content uk-margin">
+                Use our monitoring services and easily track all relevant research results.
+              </div>
+              <p>
+                <a href="https://monitor.openaire.eu" class="el-link uk-button uk-button-default" target="_blank">
+                  OpenAIRE.MONITOR
+                </a>
+              </p>
+            </div>
+          </div>
+          <div class="uk-width-1-1 uk-width-1-2@s uk-dark uk-grid-item-match develop">
+            <div class="uk-margin uk-panel uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
+              <h4 class="el-title uk-margin uk-h4">
+                Developer?
+              </h4>
+              <div class="el-content uk-margin">
+                Get access to OpenAIRE data and capitalize on on Europe's open linked research
+              </div>
+              <p>
+                <a href="https://develop.openaire.eu" class="el-link uk-button uk-button-default" target="_blank">
+                  OpenAIRE.DEVELOP
+                </a>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+
+<!--LAPTOP & PAD LANDSCAPE-->
+<div class="uk-visible@m">
+  <div class="provideLanding">
+    <div class="image-front-topbar  uk-section-default"
+         uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light">
+      <!--<div style="background-image: url('../../../../assets/imgs/landing/Group 1149.svg'); background-color: rgb(255, 255, 255); box-sizing: border-box; min-height: calc(-101.35px + 100vh);"-->
+      <!--<div style="background-image: url('../../../../assets/imgs/landing/Group 1149.svg'); background-color: rgb(255, 255, 255); box-sizing: border-box; min-height: calc(-101.35px + 100vh);"-->
+      <div style="background: transparent linear-gradient(0deg, #F7F7F7 20%, #E2EEFA 30%) 0% 0% no-repeat padding-box; box-sizing: border-box; min-height: calc(-101.35px + 100vh);"
+           class="uk-background-norepeat uk-background-cover uk-background-top-center uk-background-fixed uk-section uk-padding-remove-bottom uk-flex uk-flex-middle" uk-height-viewport="offset-top: true;offset-bottom: 20">
+        <div class="uk-width-1-1">
+          <div class="uk-margin-medium uk-grid uk-grid-stack" uk-grid="">
+            <div class="uk-width-1-1@m">
+            </div>
+          </div>
+          <div class="uk-container uk-container-large uk-margin-large">
+            <div class="uk-sticky-placeholder" style="height: 84px; margin: 0px;"></div>
+            <div class="search_box_bg uk-grid-large uk-flex-middle uk-grid uk-grid-stack" uk-grid="">
+              <div class="el-overlay uk-panel uk-width-1-1 uk-dark uk-text-center">
+
+                <h1 class="uk-margin">Your data is valuable. Get connected. Participate</h1>
+
+                <div class="uk-container uk-container-xsmall uk-container-center">
+                  <div class="uk-margin-medium-top uk-margin-medium-left uk-margin-medium-right text-muted">
+                    The Provide Dashboard is a one-stop-service where content providers interact
+                    with OpenAIRE and become a building block of a global Open Research community. A gateway to the European Open Science Cloud.
+                  </div>
+                </div>
+
+                <div class="uk-container uk-container-large uk-container-center">
+
+                  <div class="uk-margin-large-left uk-margin-large-right uk-margin-top">
+                    <div class="uk-grid uk-child-width-1-3@l uk-child-width-1-3@m uk-child-width-1-3@s">
+                      <div class="">
+                        <img src="../../../../assets/imgs/landing/paidaki_me_xartia.png">
+                      </div>
+                      <div style="display: flex; align-items: center; justify-content: center">
+                        <a (click)="goToPage('/join')" class="el-link uk-button uk-button-primary">SIGN IN</a>
+                      </div>
+                    </div>
+                  </div>
+
+                </div>
+
+                <!--<div class="el-content uk-margin"><h2 style="color:#1a1a1a!important">A one-stop-shop for sharing, finding and enriching your content</h2></div>-->
+                <!--<p><a (click)="goToPage('/dashboard')" class="el-link uk-button uk-button-primary">Sign In</a></p>-->
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="uk-section-muted uk-section uk-section-large uk-section-overlap uk-position-relative">
+
+      <h2 class="uk-text-center">PROVIDE Dashboard brings all your data together</h2>
+
+      <div class="uk-margin-medium-left uk-margin-medium-right uk-text-center text-muted">Get front-end access to many of OpenAIRE’s backend services</div>
+
+      <div class="uk-container uk-container-large uk-margin-medium-top">
+
+        <div class="uk-slider" tabindex="-1" uk-slider="velocity: 0;autoplay: true;autoplay-interval: 5000;pause-on-hover: false;center: true">
+          <div class="uk-position-relative">
+            <div class="uk-slider-container">
+              <ul class="uk-slider-items uk-child-width-1-1" style="transform: translateX(-1300px);">
+                <li class="ng-star-inserted uk-active" tabindex="-1" style="order: 1;">
+                  <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
+                    <div class="uk-first-column">
+                      <video class="uk-box-shadow-large uk-border-rounded" autoplay loop>
+                        <source src="../../../../assets/mp4/validate.mp4" type="video/mp4">
+                      </video>
+                      <!--<img class="uk-box-shadow-large uk-border-rounded" src="../../../../assets/gifs/validate.gif">-->
+                    </div>
+                    <div class="uk-margin-top">
+                      <div>
+                        <div class="uk-text-bold uk-h4">Validate</div>
+                        <div class="uk-margin-medium">
+                          Interoperable metadata is key for effective content sharing.
+                          <p class="uk-margin-top">
+                            OpenAIRE guidelines are a global standard to expose and share your content. Use our validation service and see how you can apply them.
+                          </p>
+                        </div>
+                        <div class="uk-inline">
+                          <a class="uk-button uk-button-primary uk-text-uppercase" [routerLink]="['/about']">learn more</a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li tabindex="-1" style="order: 1;">
+                  <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
+                    <div class="uk-first-column">
+                      <video class="uk-box-shadow-large uk-border-rounded" autoplay loop>
+                        <source src="../../../../assets/mp4/register.mp4" type="video/mp4">
+                      </video>
+                      <!--<img class="uk-box-shadow-large uk-border-rounded" src="../../../../assets/gifs/register.gif">-->
+                    </div>
+                    <div class="uk-margin-top">
+                      <div>
+                        <div class="uk-text-bold uk-h4">Register</div>
+                        <div class="uk-margin-medium">
+                          Reach a wider audience around the world.
+                          <p class="uk-margin-top">
+                            Register your literature or data repository, OA Journal, CRIS in OpenAIRE and be part of a global interlinked network.
+                          </p>
+                        </div>
+                        <div class="uk-inline">
+                          <a class="uk-button uk-button-primary uk-text-uppercase" [routerLink]="['/about']">learn more</a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li tabindex="-1" style="order: 1;">
+                  <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
+                    <div class="uk-first-column">
+                      <video class="uk-box-shadow-large uk-border-rounded" autoplay loop>
+                        <source src="../../../../assets/mp4/enrich.mp4" type="video/mp4">
+                      </video>
+                      <!--<img class="uk-box-shadow-large uk-border-rounded" src="../../../../assets/gifs/enrichments.gif">-->
+                    </div>
+                    <div class="uk-margin-top">
+                      <div>
+                        <div class="uk-text-bold uk-h4">Enrich</div>
+                        <div class="uk-margin-medium">
+                          Improve your metadata. Get more connections.
+                          <p class="uk-margin-top">
+                            Our newly released OA Broker service offers a wealth of information on scholarly communication data. Find out what interests you and subscribe to enrich your records.
+                          </p>
+                        </div>
+                        <div class="uk-inline">
+                          <a class="uk-button uk-button-primary uk-text-uppercase" [routerLink]="['/about']">learn more</a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li tabindex="-1" style="order: 1;">
+                  <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
+                    <div class="uk-first-column">
+                      <video class="uk-box-shadow-large uk-border-rounded" autoplay loop>
+                        <source src="../../../../assets/mp4/usage-stat.mp4" type="video/mp4">
+                      </video>
+                      <!--<img class="uk-box-shadow-large uk-border-rounded" src="../../../../assets/gifs/usageStats.gif">-->
+                    </div>
+                    <div class="uk-margin-top">
+                      <div>
+                        <div class="uk-text-bold uk-h4">Usage statistics</div>
+                        <div class="uk-margin-medium">
+                          Open research impact empowers Open Science.
+                          <p class="uk-margin-top">
+                            Share usage data via OpenAIRE's global Open Metrics Service. Get the benefit of an aggregated environment to broaden the mechanisms for impact assessment.
+                          </p>
+                        </div>
+                        <div class="uk-inline">
+                          <a class="uk-button uk-button-primary uk-text-uppercase" [routerLink]="['/about']">learn more</a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <ul class="uk-position-relative uk-slider-nav uk-dotnav uk-flex-center uk-margin">
+            <li uk-slider-item="0" class="uk-active"><a href="#"></a></li>
+            <li uk-slider-item="1" class=""><a href="#"></a></li>
+            <li uk-slider-item="2" class=""><a href="#"></a></li>
+            <li uk-slider-item="3" class=""><a href="#"></a></li>
+          </ul>
+        </div>
+
+      </div>
+    </div>
+
+    <div class="uk-section uk-section-muted uk-section-large uk-preserve-color uk-background-norepeat uk-background-cover uk-background-top-center"
+         style="background-image: url('../../../../assets/imgs/landing/abstract2.svg'); !important; min-height: calc(80vh);" uk-height-viewport="offset-top: true; offset-bottom: 20;">
+      <div class="uk-container uk-container-expand">
+
+        <div class="uk-grid uk-child-width-1-3@l uk-child-width-1-3@m">
+          <div>
+            <img src="../../../../assets/imgs/landing/avakas.png">
+          </div>
+          <div class="uk-width-expand">
+            <h1 class="uk-text-center">Do numbers make you happy?</h1>
+
+            <div class="uk-grid uk-child-width-1-4@l uk-child-width-1-4@m uk-child-width-1-1@s uk-margin-medium-left uk-margin-medium-right uk-text-center" style="display: flex;align-items: center;height: 70%;">
+
+              <div class="uk-margin-top">
+                <div class="bigNumber">{{ (statisticsNumbers && statisticsNumbers.literature) ? (statisticsNumbers.literature | number) : 'N/A' }}</div>
+                <div class="uk-text-uppercase">Literature repositories</div>
+              </div>
+
+              <div class="uk-margin-top">
+                <div class="bigNumber">{{ (statisticsNumbers && statisticsNumbers.dataRepositories) ? (statisticsNumbers.dataRepositories | number) : 'N/A' }}</div>
+                <div class="uk-text-uppercase">Data repositories</div>
+              </div>
+
+              <div class="uk-margin-top">
+                <div class="bigNumber">{{ (statisticsNumbers && statisticsNumbers.journal) ? (statisticsNumbers.journal | number) : 'N/A' }}</div>
+                <div class="uk-text-uppercase">OA journals</div>
+              </div>
+
+              <div class="uk-margin-top">
+                <div class="bigNumber">{{ (statisticsNumbers && statisticsNumbers.aggregators) ? (statisticsNumbers.aggregators | number) : 'N/A' }}</div>
+                <div class="uk-text-uppercase">Aggregators</div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+      </div>
+
+      <div class="uk-container uk-container-large uk-margin-top">
+        <div class="uk-grid uk-child-width-1-5@l uk-child-width-1-5@m uk-child-width-1-2@s uk-margin-medium-left">
+
+          <div class="uk-margin-top">
+            <h3>{{ (statisticsNumbers && statisticsNumbers.publications) ? (statisticsNumbers.publications | number) : 'N/A' }}</h3>
+            <div class="uk-text-uppercase text-small iconsWithText">
+              <span><i class="fas fa-book fa-2x uk-margin-small-right" style="color: #3EC8FE"></i></span>
+              <span>publications</span>
+            </div>
+          </div>
+          <div class="uk-margin-top">
+            <h3>{{ (statisticsNumbers && statisticsNumbers.datasets) ? (statisticsNumbers.datasets | number) : 'N/A' }}</h3>
+            <div class="uk-text-uppercase text-small iconsWithText">
+              <span><i class="fas fa-database fa-2x uk-margin-small-right" style="color: #3EC8FE"></i></span>
+              <span>datasets</span>
+            </div>
+          </div>
+          <div class="uk-margin-top">
+            <h3>{{ (statisticsNumbers && statisticsNumbers.software) ? (statisticsNumbers.software | number) : 'N/A' }}</h3>
+            <div class="uk-text-uppercase text-small iconsWithText">
+              <span><i class="fas fa-cog fa-2x uk-margin-small-right" style="color: #3EC8FE"></i></span>
+              <span>software</span>
+            </div>
+          </div>
+          <div class="uk-margin-top">
+            <h3>{{ (statisticsNumbers && statisticsNumbers.usagestats) ? (statisticsNumbers.usagestats | number) : 'N/A' }}</h3>
+            <div class="uk-text-uppercase text-small iconsWithText">
+              <span><i class="fas fa-globe-americas fa-2x uk-margin-small-right" style="color: #3EC8FE"></i></span>
+              <span>metadata exchange events</span>
+            </div>
+          </div>
+          <div class="uk-margin-top">
+            <h3>{{ statisticsNumbers ? (statisticsNumbers.lastYearUsagestats.number | number) : 'N/A' }}</h3>
+            <div class="uk-text-uppercase text-small iconsWithText">
+              <span><i class="fas fa-globe-americas fa-2x uk-margin-small-right" style="color: #3EC8FE"></i></span>
+              <span>usage statistics views & downloads ({{ statisticsNumbers ? statisticsNumbers.lastYearUsagestats.year : 'N/A' }})</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!--<div class="uk-section uk-section-muted uk-section-large text-small" style="background: transparent url('../../../../assets/imgs/landing/kathisto%20paidaki.png') 0% 0% no-repeat padding-box;">-->
+    <div class="uk-section uk-section-muted uk-padding-remove-top text-small">
+
+      <!--LAPTOP ONLY-->
+      <div class="uk-visible@l" style="position: relative; top: 86px; text-align: right;right: 195px;">
+        <img src="../../../../assets/imgs/landing/kathisto%20paidaki.png" width="130">
+      </div>
+
+      <!--PAD ONLY-->
+      <div class="uk-hidden@l" style="position: relative; top: 86px; text-align: right;right: 130px;">
+        <img src="../../../../assets/imgs/landing/kathisto%20paidaki.png" width="130">
+      </div>
+
+      <!--LAPTOP ONLY-->
+      <div class="uk-container uk-visible@l uk-container-large openAIREGuidelinesBox">
+        <div>
+
+          <div class="">
+            <h5 class="uk-text-uppercase uk-text-center uk-margin-remove">
+              <img class="" src="../../../../assets/imgs/landing/Arrow%20left.svg" style="margin-top: 35px; margin-right: 25px">
+              <span>Follow OpenAIRE Guidelines</span>
+              <img class="" src="../../../../assets/imgs/landing/Arrow%20right.svg" style="margin-top: 35px; margin-left: 25px">
+            </h5>
+          </div>
+
+          <div style="border-bottom: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;margin-top: -15px;">
+            <div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m uk-grid-divider">
+              <div class="uk-first-column">
+                <div class="uk-margin-medium-left uk-margin-medium-top uk-margin-medium-bottom">
+                  <img width="56" src="../../../../assets/imgs/landing/Guidelines%20color.svg">
+                  <div class="uk-margin-bottom uk-margin-top" style="font-weight: 600">OpenAIRE Guidelines</div>
+                  <p>Follow the OpenAIRE <strong>Guidelines</strong> to expose your metadata in order to integrate with OpenAIRE infrastructure. <br>Learn more:
+                    <a href="https://guidelines.openaire.eu/en/latest/" target="_blank">https://guidelines.openaire.eu/en/latest/</a></p>
+                  <p>Follow the OpenAIRE <strong>Usage Statistics Guidelines</strong> to get ready to track the usage activity of your data source. <br>Learn more:
+                    <a href="https://openaire.github.io/usage-statistics-guidelines/" target="_blank">https://openaire.github.io/usage-statistics-guidelines/</a></p>
+                </div>
+
+              </div>
+
+              <div class="">
+                <div class="uk-margin-medium-right uk-margin-medium-top uk-margin-medium-bottom">
+                  <img width="43" src="../../../../assets/imgs/landing/Data%20color.svg">
+                  <div class="uk-margin-bottom uk-margin-top" style="font-weight: 600">Our Data Policies</div>
+                  <p>
+                    <strong>Data Acquisition</strong> - How we retrieve data, how often, what processes it goes through (aggregating cleaning, transforming, inferring, de-duplicating), what are the quality checks along all data processing stages.
+                  </p>
+                  <p>
+                    <strong>Data usage</strong> - Who is able to retrieve our data, what are the licences, what about specific SLAs. <br>Learn more:
+                    <a href="https://www.openaire.eu/content-aquisition-policy" target="_blank">https://www.openaire.eu/content-aquisition-policy</a>
+                  </p>
+                </div>
+
+              </div>
+            </div>
+          </div>
+
+
+          <div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m uk-grid-divider">
+            <div class="uk-first-column">
+              <div class="uk-margin-medium-left uk-margin-medium-top uk-margin-medium-bottom">
+                <img width="55" src="../../../../assets/imgs/landing/Agreement%20color.svg">
+                <div class="uk-margin-bottom uk-margin-top" style="font-weight: 600">Terms of Agreement for Content Providers</div>
+                <p>Learn more: <a href="https://www.openaire.eu/terms-of-use-for-content-providers" target="_blank">https://www.openaire.eu/terms-of-use-for-content-providers</a></p>
+              </div>
+
+            </div>
+
+            <div class="">
+              <div class="uk-margin-medium-right uk-margin-medium-top uk-margin-medium-bottom">
+                <img width="38" src="../../../../assets/imgs/landing/Support%20color.svg">
+                <div class="uk-margin-bottom uk-margin-top" style="font-weight: 600">Support</div>
+                <p>Read <strong>how to use OpenAIRE</strong> to best serve your needs. <br>Learn more: <a href="https://www.openaire.eu/guides" target="_blank">https://www.openaire.eu/guides</a></p>
+                <p>Ask a question. Contact us via our <strong>ticketing system.</strong> <br>Learn more: <a href="https://www.openaire.eu/support/helpdesk" target="_blank">https://www.openaire.eu/support/helpdesk</a></p>
+              </div>
+
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+      <!--PAD ONLY-->
+      <div class="uk-container uk-hidden@l uk-container-small openAIREGuidelinesBox">
+        <div>
+
+          <div class="">
+            <h5 class="uk-text-uppercase uk-text-center uk-margin-remove">
+              <img class="" src="../../../../assets/imgs/landing/Arrow%20left.svg" style="margin-top: 35px; margin-right: 25px">
+              <span>Follow OpenAIRE Guidelines</span>
+              <img class="" src="../../../../assets/imgs/landing/Arrow%20right.svg" style="margin-top: 35px; margin-left: 25px">
+            </h5>
+          </div>
+
+          <div style="border-bottom: 1px solid #BFBFBF;border-top: 1px solid #BFBFBF;margin-top: -15px;">
+            <div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m uk-grid-divider">
+              <div class="uk-first-column">
+                <div class="uk-margin-medium-left uk-margin-medium-top uk-margin-medium-bottom">
+                  <img width="56" src="../../../../assets/imgs/landing/Guidelines%20color.svg">
+                  <div class="uk-margin-bottom uk-margin-top" style="font-weight: 600">OpenAIRE Guidelines</div>
+                  <p>Follow the OpenAIRE <strong>Guidelines</strong> to expose your metadata in order to integrate with OpenAIRE infrastructure. <br>Learn more:
+                    <a href="https://guidelines.openaire.eu/en/latest/" target="_blank">https://guidelines.openaire.eu/en/latest/</a></p>
+                  <p>Follow the OpenAIRE <strong>Usage Statistics Guidelines</strong> to get ready to track the usage activity of your data source. <br>Learn more:
+                    <a href="https://openaire.github.io/usage-statistics-guidelines/" target="_blank">https://openaire.github.io/usage-statistics-guidelines/</a></p>
+                </div>
+
+              </div>
+
+              <div class="">
+                <div class="uk-margin-medium-right uk-margin-medium-top uk-margin-medium-bottom">
+                  <img width="43" src="../../../../assets/imgs/landing/Data%20color.svg">
+                  <div class="uk-margin-bottom uk-margin-top" style="font-weight: 600">Our Data Policies</div>
+                  <p>
+                    <strong>Data Acquisition</strong> - How we retrieve data, how often, what processes it goes through (aggregating cleaning, transforming, inferring, de-duplicating), what are the quality checks along all data processing stages.
+                  </p>
+                  <p>
+                    <strong>Data usage</strong> - Who is able to retrieve our data, what are the licences, what about specific SLAs. <br>Learn more:
+                    <a href="https://www.openaire.eu/content-aquisition-policy" target="_blank">https://www.openaire.eu/content-aquisition-policy</a>
+                  </p>
+                </div>
+
+              </div>
+            </div>
+          </div>
+
+
+          <div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m uk-grid-divider">
+            <div class="uk-first-column">
+              <div class="uk-margin-medium-left uk-margin-medium-top uk-margin-medium-bottom">
+                <img width="55" src="../../../../assets/imgs/landing/Agreement%20color.svg">
+                <div class="uk-margin-bottom uk-margin-top" style="font-weight: 600">Terms of Agreement for Content Providers</div>
+                <p>Learn more: <a href="https://www.openaire.eu/terms-of-use-for-content-providers" target="_blank">https://www.openaire.eu/terms-of-use-for-content-providers</a></p>
+              </div>
+
+            </div>
+
+            <div class="">
+              <div class="uk-margin-medium-right uk-margin-medium-top uk-margin-medium-bottom">
+                <img width="38" src="../../../../assets/imgs/landing/Support%20color.svg">
+                <div class="uk-margin-bottom uk-margin-top" style="font-weight: 600">Support</div>
+                <p>Read <strong>how to use OpenAIRE</strong> to best serve your needs. <br>Learn more: <a href="https://www.openaire.eu/guides" target="_blank">https://www.openaire.eu/guides</a></p>
+                <p>Ask a question. Contact us via our <strong>ticketing system.</strong> <br>Learn more: <a href="https://www.openaire.eu/support/helpdesk" target="_blank">https://www.openaire.eu/support/helpdesk</a></p>
+              </div>
+
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+
+    <div class="uk-section uk-section-muted uk-background-norepeat uk-background-cover uk-background-top-center uk-background-fixed uk-section uk-flex uk-flex-middle"
+         style="background: transparent linear-gradient(0deg, #E2EEFA 20%, #F7F7F7 70%) 0% 0% no-repeat padding-box; box-sizing: border-box;">
+      <!--<div style="background: transparent linear-gradient(0deg, #E2EEFA 20%, #F7F7F7 30%) 0% 0% no-repeat padding-box; box-sizing: border-box;"-->
+      <!--class="uk-background-norepeat uk-background-cover uk-background-top-center uk-background-fixed uk-section uk-padding-remove-bottom uk-flex uk-flex-middle">-->
+      <!--</div>-->
+      <div class="uk-container uk-container-xlarge">
+        <div class="uk-grid uk-flex" style="align-items: center">
+          <div class="uk-width-3-4@l uk-width-3-4@m">
+            <h2>We're here to help you.</h2>
+            <p class="text-muted">Do you want more information? Our team is happy to assist you.</p>
+            <a class="uk-margin-large-top uk-text-uppercase uk-button uk-button-primary" href="https://www.openaire.eu/contact-us/" target="_blank">Get in touch</a>
+          </div>
+          <div class="uk-width-1-4@l uk-width-1-4@m">
+            <img src="../../../../assets/imgs/landing/contact%20us%20provide.png">
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="uk-section uk-section-muted" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}">
+      <div class="uk-container uk-container-large">
+        <div class="uk-grid uk-margin-large-top uk-margin-large-bottom" uk-grid="">
+          <div class="uk-width-expand@m uk-width-1-2@s uk-dark uk-grid-item-match uk-first-column explore">
+            <div class="uk-margin uk-panel uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
+              <h4 class="el-title uk-margin uk-h4">
+                Researcher?
+              </h4>
+              <div class="el-content uk-margin">
+                Explore all OA research results. Link all your research. Build your profile
+              </div>
+              <p>
+                <a href="https://{{ inBeta ? 'beta.' : '' }}explore.openaire.eu" class="el-link uk-button uk-button-default" target="_blank">
+                  OpenAIRE.EXPLORE
+                </a>
+              </p>
+            </div>
+          </div>
+          <div class="uk-width-expand@m uk-width-1-2@s uk-dark uk-grid-item-match connect">
+            <div class="uk-margin uk-panel uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
+              <h4 class="el-title uk-margin uk-h4">
+                Research community?
+              </h4>
+              <div class="el-content uk-margin">
+                Use a trusted partner to share, link, disseminate and monitor your research.
+              </div>
+              <p>
+                <a href="https://{{ inBeta ? 'beta.' : '' }}connect.openaire.eu" class="el-link uk-button uk-button-default" target="_blank">
+                  OpenAIRE.CONNECT
+                </a>
+              </p>
+            </div>
+          </div>
+          <div class="uk-width-expand@m uk-width-1-2@s uk-dark uk-grid-item-match monitor">
+            <div class="uk-margin uk-panel uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
+              <h4 class="el-title uk-margin uk-h4">
+                Research manager?
+              </h4>
+              <div class="el-content uk-margin">
+                Use our monitoring services and easily track all relevant research results.
+              </div>
+              <p>
+                <a href="https://monitor.openaire.eu" class="el-link uk-button uk-button-default" target="_blank">
+                  OpenAIRE.MONITOR
+                </a>
+              </p>
+            </div>
+          </div>
+          <div class="uk-width-expand@m uk-width-1-2@s uk-dark uk-grid-item-match develop">
+            <div class="uk-margin uk-panel uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
+              <h4 class="el-title uk-margin uk-h4">
+                Developer?
+              </h4>
+              <div class="el-content uk-margin">
+                Get access to OpenAIRE data and capitalize on on Europe's open linked research
+              </div>
+              <p>
+                <a href="https://develop.openaire.eu" class="el-link uk-button uk-button-default" target="_blank">
+                  OpenAIRE.DEVELOP
+                </a>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>
+

src/app/pages/landing/home/home.component.ts

@@ -0,0 +1,61 @@
+import { Component, OnInit } from '@angular/core';
+import { UsageStatsSummary } from '../../../domain/typeScriptClasses';
+import { AuthenticationService } from '../../../services/authentication.service';
+import { StatisticsService } from '../../../services/statistics.service';
+import { Router } from '@angular/router';
+
+@Component ({
+  selector: 'app-landing',
+  templateUrl: './home.component.html',
+  styleUrls: ['../../../../assets/css/landingpage/theme.css','../../../../assets/css/landingpage/custom.css','../../../../assets/css/landingpage/custom-provide.css'],
+})
+
+export class HomeComponent implements OnInit {
+
+  statisticsNumbers: UsageStatsSummary;
+  inBeta: boolean;
+
+
+  constructor(private authService: AuthenticationService,
+              private statsService: StatisticsService,
+              private router: Router) { }
+
+  ngOnInit() {
+    this.getStatisticsNumbers();
+
+    const baseUrl = window.location.origin;
+    this.inBeta = ( baseUrl.includes('beta') || baseUrl.includes('athenarc') );
+
+    let body = document.getElementsByTagName('body')[0];
+    body.classList.remove("dashboard");
+    body.classList.add("landing");
+  }
+
+
+  login() {
+    this.authService.loginWithState();
+  }
+
+  getStatisticsNumbers() {
+    this.statsService.getStatisticsNumbers().subscribe(
+      res => {
+        this.statisticsNumbers = res;
+        // this.statisticsNumbers.lastYearUsagestats = JSON.parse(res['lastYearUsagestats'].toString());
+      },
+      error => console.log(error),
+      () => {
+        console.log('statisticsNumbers is', JSON.stringify(this.statisticsNumbers));
+      }
+    );
+  }
+
+  goToPage(pageUrl: string) {
+    if (this.authService.getIsUserLoggedIn()) {
+      this.router.navigate([pageUrl]);
+    } else {
+      this.authService.redirectUrl = pageUrl;
+      this.login();
+    }
+  }
+
+}

src/app/pages/landing/landing.component.html

@@ -1,294 +0,0 @@
-<div>
-  <div class="image-front-topbar  uk-section-default"
-       uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light">
-    <div style="background-image: url('../../../assets/imgs/KOJu48AA.jpeg'); background-color: rgb(255, 255, 255); box-sizing: border-box; min-height: calc(-101.35px + 100vh);"
-         class="uk-background-norepeat uk-background-cover uk-background-top-center uk-background-fixed uk-section uk-padding-remove-bottom uk-flex uk-flex-middle" uk-height-viewport="offset-top: true;offset-bottom: 20">
-      <div class="uk-width-1-1">
-        <div class="uk-margin-medium uk-grid uk-grid-stack" uk-grid="">
-          <div class="uk-width-1-1@m">
-          </div>
-        </div>
-        <div class="uk-container uk-container-large uk-margin-large">
-          <div class="uk-sticky-placeholder" style="height: 84px; margin: 0px;"></div>
-          <div class="search_box_bg uk-grid-large uk-flex-middle uk-grid uk-grid-stack" uk-grid="">
-            <div class="el-overlay uk-panel uk-width-xlarge uk-dark">
-              <h1 class="el-title uk-margin uk-heading-hero provide">Content Provider Dashboard</h1>
-              <div class="el-content uk-margin"><h2 style="color:#1a1a1a!important">A one-stop-shop for sharing, finding and enriching your content</h2></div>
-              <p><a (click)="goToPage('/dashboard')" class="el-link uk-button uk-button-primary">Start here</a></p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="uk-section-default uk-section uk-section-small">
-    <div class="uk-container uk-container-large">
-      <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
-        <div class="uk-width-1-1@m uk-first-column">
-          <div class="uk-margin uk-text-center uk-child-width-1-1 uk-grid-match uk-child-width-1-1@s uk-child-width-1-4@m uk-child-width-1-4@l uk-grid-large uk-grid" uk-grid="">
-            <div class="uk-first-column">
-              <div class="el-item uk-card uk-card-hover uk-card-small uk-card-body">
-                <a (click)="goToPage('/compatibility/validate')" class="el-link uk-position-cover uk-position-z-index uk-margin-remove-adjacent"></a>
-                <img src="../../../assets/imgs/Path%20163.svg" class="el-image" alt="" uk-svg="" hidden="true">
-                <h3 class="el-title uk-margin uk-h3">Validate</h3>
-                <!--<div class="el-content uk-margin uk-text-lead">-->
-                <div class="el-content uk-margin">
-                  <p><strong>Interoperable metadata is key for effective content sharing.</strong></p>
-                  <p>Use our validation service and see how you can apply the OpenAIRE Guidelines to expose your content using global standards.</p>
-                </div>
-              </div>
-            </div>
-            <div class="">
-              <div class="el-item uk-card uk-card-hover uk-card-small uk-card-body">
-                <a (click)="goToPage('/sources/register')" class="el-link uk-position-cover uk-position-z-index uk-margin-remove-adjacent"></a>
-                <img src="../../../assets/imgs/Group%20987.svg" class="el-image" alt="" uk-svg="" hidden="true">
-                <h3 class="el-title uk-margin uk-h3" style="margin-top: 26px !important;">Register</h3>
-                <div class="el-content uk-margin">
-                  <p><strong>Reach a wider audience around the world</strong></p>
-                  <p>Register your literature or data repository, OA Journal, CRIS in OpenAIRE and be part of a global interlinked network. Start now!</p>
-                </div>
-              </div>
-            </div>
-            <div class="">
-              <div class="el-item uk-card uk-card-hover uk-card-small uk-card-body">
-                <a (click)="goToPage('/content/events')" class="el-link uk-position-cover uk-position-z-index uk-margin-remove-adjacent"></a>
-                <img src="../../../assets/imgs/Group%20409.svg" class="el-image" alt="" uk-svg="" hidden="true">
-                <h3 class="el-title uk-margin uk-h3">Enrich</h3>
-                <div class="el-content uk-margin">
-                  <p><strong>Improve your metadata. Get more connections</strong></p>
-                  <p>Our newly released OA Broker service offers a wealth of information on scholarly communication data. Find out what interests you and subscribe to enrich your records. Learn more!</p>
-                </div>
-              </div>
-            </div>
-            <div class="">
-              <div class="el-item uk-card uk-card-hover uk-card-small uk-card-body">
-                <a (click)="goToPage('/getImpact')" class="el-link uk-position-cover uk-position-z-index uk-margin-remove-adjacent"></a>
-                <img src="../../../assets/imgs/Group%20410.svg" class="el-image" alt="" uk-svg="" hidden="true">
-                <h3 class="el-title uk-margin uk-h3" style="margin-top: 34px !important;">Measure</h3>
-                <div class="el-content uk-margin">
-                  <p><strong>Open research impact empowers Open Science</strong></p>
-                  <p>Participate in the Open Metrics service by sharing your usage data. Get the benefit of an aggregated environment to broaden the mechanisms for impact assesment. Learn more!</p>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="uk-margin-medium uk-text-center uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="" style="">
-            <a (click)="goToPage('/dashboard')" class="el-content uk-button uk-button-primary">
-              Get Started
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="uk-section-muted uk-section uk-section-small">
-    <div class="uk-container uk-container-large">
-      <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
-        <div class="uk-width-1-1@m uk-first-column">
-          <div class="uk-margin uk-child-width-1-1 uk-grid-match uk-child-width-1-1@s uk-child-width-1-2@m
-            uk-child-width-1-2@l uk-grid-large uk-grid uk-grid-divider provide" uk-grid="">
-            <div class="uk-first-column uk-text-center">
-              <div class="el-item uk-card uk-card-small uk-card-body">
-                <img src="../../../assets/imgs/Group%20599.svg" class="el-image" alt="" uk-svg="" hidden="true">
-                <h3 class="el-title uk-margin uk-h3">Have more questions?</h3>
-              </div>
-            </div>
-            <div class="questions">
-              <div class="el-item uk-card uk-card-small uk-card-body">
-                <ul class="uk-list uk-list-divider">
-                  <!--<li><a href="https://www.openaire.eu/os-primers">Learn about open science policies and how to align</a></li>-->
-                  <!--<li><a href="https://www.openaire.eu/rdm-handbook">Learn more on how to manage your data in the open science era</a></li>-->
-                  <!--<li><a href="https://www.openaire.eu/guides/">Find out how to use OpenAIRE to best serve your needs</a></li>-->
-                  <!--<li><a href="https://www.openaire.eu/webinars/">View our training material on a variety of related topics</a></li>-->
-                  <!--<li><a href="https://www.openaire.eu/contact-us/">Contact us</a></li>-->
-                  <li><a href="https://www.openaire.eu/validator-registration-guide">Learn how to validate and register your repository</a></li>
-                  <li><a href="https://www.openaire.eu/guides">Find out how to use OpenAIRE to best serve your needs</a></li>
-                  <li><a href="https://www.openaire.eu/category/content-providers">View our training material for Content Providers</a></li>
-                  <li><a href="https://guidelines.openaire.eu/en/latest/">Follow the OpenAIRE Guidelines</a></li>
-                  <li><a href="https://www.openaire.eu/contact-us/">Contact us</a></li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="uk-section-default uk-section">
-    <div class="uk-container">
-      <div class="uk-grid-medium uk-margin-medium uk-grid" uk-grid="">
-        <div class="uk-width-2-3@m uk-first-column">
-          <div class="uk-margin-medium-top uk-panel">
-            <h3 class="el-title uk-margin uk-h3">
-              Our community
-            </h3>
-            <hr class="uk-divider-small uk-text-left provide">
-
-            <div class="uk-grid uk-margin-medium-top">
-
-              <div class="uk-width-expand@m">
-                <p class="uk-margin-medium-bottom">
-                  <span class="emphasis provide">{{ (statisticsNumbers && statisticsNumbers.literature) ? (statisticsNumbers.literature | number) : 'N/A' }}</span><br>
-                  <span class="uk-text-uppercase">literature repositories</span>
-                </p>
-                <p>
-                  <span class="emphasis provide">{{ (statisticsNumbers && statisticsNumbers.journal) ? (statisticsNumbers.journal | number) : 'N/A' }}</span><br>
-                  <span class="uk-text-uppercase">OA Journals</span>
-                </p>
-              </div>
-              <div class="uk-width-expand@m">
-                <p class="uk-margin-medium-bottom">
-                  <span class="emphasis provide">{{ (statisticsNumbers && statisticsNumbers.dataRepositories) ? (statisticsNumbers.dataRepositories | number) : 'N/A' }}</span><br>
-                  <span class="uk-text-uppercase">data repositories</span>
-                </p>
-                <p>
-                  <span class="emphasis provide">{{ (statisticsNumbers && statisticsNumbers.aggregators) ? (statisticsNumbers.aggregators | number) : 'N/A' }}</span><br>
-                  <span class="uk-text-uppercase">aggregators</span>
-                </p>
-              </div>
-
-            </div>
-
-            <div class="uk-grid">
-
-              <div class="uk-width-expand@m">
-                <p>
-                  <span class="emphasis">{{ (statisticsNumbers && statisticsNumbers.publications) ? (statisticsNumbers.publications | number) : 'N/A' }}</span>
-                  <span class="uk-text-uppercase"> publications</span>
-                </p>
-                <p>
-                  <span class="emphasis">{{ (statisticsNumbers && statisticsNumbers.datasets) ? (statisticsNumbers.datasets | number) : 'N/A' }}</span>
-                  <span class="uk-text-uppercase"> datasets</span>
-                </p>
-                <p>
-                  <span class="emphasis">{{ (statisticsNumbers && statisticsNumbers.software) ? (statisticsNumbers.software | number) : 'N/A' }}</span>
-                  <span class="uk-text-uppercase"> software</span>
-                </p>
-              </div>
-              <div class="uk-width-expand@m">
-                <p>
-                  <span class="emphasis">{{ statisticsNumbers ? (statisticsNumbers.lastYearUsagestats.number | number) : 'N/A' }}</span>
-                  <span class="uk-text-uppercase"> usage events
-                  ({{ statisticsNumbers ? statisticsNumbers.lastYearUsagestats.year : 'N/A' }})</span>
-                </p>
-                <p>
-                  <span class="emphasis">
-                    {{ (statisticsNumbers && statisticsNumbers.usagestats) ? statisticsNumbers.usagestats : 'N/A' }}
-                  </span>
-                  <span class="uk-text-uppercase"> metadata exchange events</span>
-                </p>
-              </div>
-
-            </div>
-          </div>
-        </div>
-        <div class="uk-width-expand@m">
-
-          <div class="uk-card uk-card-body uk-card-provide">
-
-            <h3 class="uk-margin-remove-top uk-h3">
-              <span class="">Our data policies</span>
-            </h3>
-            <hr class="uk-divider-small uk-text-left">
-
-            <ul class="uk-margin-small uk-list uk-list-large uk-margin-medium-bottom">
-              <li class="el-item uk-margin-medium-bottom">
-                <h5 class="el-title uk-h5">Data acquisition</h5>
-                <div class="el-content">
-                  <span>How we retrieve data, how often, what processes it goes through (aggregating cleaning, transforming, inferring, de-duplicating), what are the quality checks&nbsp;along all&nbsp; data processing stages.</span>
-                </div>
-              </li>
-              <li class="el-item">
-                <h5 class="el-title uk-h5">Data usage</h5>
-                <div class="el-content">
-                  <span>Who is able to retrieve our data, what are the licences, what about specific SLAs.</span>
-                </div>
-              </li>
-            </ul>
-            <div class="uk-margin uk-margin-remove-bottom uk-text-left">
-              <h6 class="uk-h6">
-                <a class="el-content uk-link-text" href="https://www.openaire.eu/data-aquisition-policy" target="_blank">
-                  Learn more
-                </a>
-              </h6>
-            </div>
-          </div>
-
-
-        </div>
-      </div>
-    </div>
-  </div>
-
-
-  <div class="uk-section-muted" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}">
-    <div class="uk-container uk-container-large">
-      <div class="uk-grid uk-margin-large-top uk-margin-large-bottom" uk-grid="">
-        <div class="uk-width-expand@m uk-width-1-2@s uk-dark uk-grid-item-match uk-first-column explore">
-          <div class="uk-margin uk-panel uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
-            <h4 class="el-title uk-margin uk-h4">
-              Researcher?
-            </h4>
-            <div class="el-content uk-margin">
-              Explore all OA research results. Link all your research. Build your profile
-            </div>
-            <p>
-              <a href="https://{{ inBeta ? 'beta.' : '' }}explore.openaire.eu" class="el-link uk-button uk-button-default" target="_blank">
-                OpenAIRE.EXPLORE
-              </a>
-            </p>
-          </div>
-        </div>
-        <div class="uk-width-expand@m uk-width-1-2@s uk-dark uk-grid-item-match connect">
-          <div class="uk-margin uk-panel uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
-            <h4 class="el-title uk-margin uk-h4">
-              Research community?
-            </h4>
-            <div class="el-content uk-margin">
-              Use a trusted partner to share, link, disseminate and monitor your research.
-            </div>
-            <p>
-              <a href="https://{{ inBeta ? 'beta.' : '' }}connect.openaire.eu" class="el-link uk-button uk-button-default" target="_blank">
-                OpenAIRE.CONNECT
-              </a>
-            </p>
-          </div>
-        </div>
-        <div class="uk-width-expand@m uk-width-1-2@s uk-dark uk-grid-item-match monitor">
-          <div class="uk-margin uk-panel uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
-            <h4 class="el-title uk-margin uk-h4">
-              Research manager?
-            </h4>
-            <div class="el-content uk-margin">
-              Use our monitoring services and easily track all relevant research results.
-            </div>
-            <p>
-              <a href="https://monitor.openaire.eu" class="el-link uk-button uk-button-default" target="_blank">
-                OpenAIRE.MONITOR
-              </a>
-            </p>
-          </div>
-        </div>
-        <div class="uk-width-expand@m uk-width-1-2@s uk-dark uk-grid-item-match develop">
-          <div class="uk-margin uk-panel uk-scrollspy-inview uk-animation-fade" uk-scrollspy-class="" style="">
-            <h4 class="el-title uk-margin uk-h4">
-              Developer?
-            </h4>
-            <div class="el-content uk-margin">
-              Get access to OpenAIRE data and capitalize on on Europe's open linked research
-            </div>
-            <p>
-              <a href="https://develop.openaire.eu" class="el-link uk-button uk-button-default" target="_blank">
-                OpenAIRE.DEVELOP
-              </a>
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-</div>

src/app/pages/landing/landing.component.ts

@@ -1,56 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { UsageStatsSummary } from '../../domain/typeScriptClasses';
-import { AuthenticationService } from '../../services/authentication.service';
-import { StatisticsService } from '../../services/statistics.service';
-import { Router } from '@angular/router';
-
-@Component ({
-  selector: 'app-landing',
-  templateUrl: './landing.component.html'
-})
-
-export class LandingComponent implements OnInit {
-
-  statisticsNumbers: UsageStatsSummary;
-  inBeta: boolean;
-
-
-  constructor(private authService: AuthenticationService,
-              private statsService: StatisticsService,
-              private router: Router) { }
-
-  ngOnInit() {
-    this.getStatisticsNumbers();
-
-    const baseUrl = window.location.origin;
-    this.inBeta = ( baseUrl.includes('beta') || baseUrl.includes('athenarc') );
-  }
-
-
-  login() {
-    this.authService.loginWithState();
-  }
-
-  getStatisticsNumbers() {
-    this.statsService.getStatisticsNumbers().subscribe(
-      res => {
-        this.statisticsNumbers = res;
-        // this.statisticsNumbers.lastYearUsagestats = JSON.parse(res['lastYearUsagestats'].toString());
-      },
-      error => console.log(error),
-      () => {
-        console.log('statisticsNumbers is', JSON.stringify(this.statisticsNumbers));
-      }
-    );
-  }
-
-  goToPage(pageUrl: string) {
-    if (this.authService.getIsUserLoggedIn()) {
-      this.router.navigate([pageUrl]);
-    } else {
-      this.authService.redirectUrl = pageUrl;
-      this.login();
-    }
-  }
-
-}

src/app/pages/metrics/metrics-enable.component.html

@@ -1,89 +0,0 @@
-<div class="uk-section-default uk-section uk-section-small uk-padding-remove-bottom" style="min-height: 325px">
-
-  <!-- MARGIN-TOP  -->
-  <div class="uk-sticky-placeholder" style="height: 84px; margin: 0px;" aria-hidden="true"></div>
-  <div class="uk-container uk-container-large">
-
-    <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
-      <div class="uk-width-1-1@m uk-first-column">
-
-        <h1 class="uk-h2">Metrics</h1>
-
-        <!-- TOP HELP CONTENT -->
-        <help-content #topHelperContent [position]="'top'"
-                      [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
-        </help-content>
-
-        <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
-          <div class="uk-grid">
-
-            <!-- LEFT HELP CONTENT -->
-            <aside-help-content #leftHelperContent [position]="'left'"
-                                [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-            </aside-help-content>
-
-            <!-- MIDDLE -->
-            <div class=" uk-width-expand@m">
-
-              <div>
-                <div *ngIf="successMessage" class="uk-alert uk-alert-success">{{ successMessage }}</div>
-                <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ 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="whiteFilm"></div>
-                </div>
-                <div *ngIf="repo && !loadingMessage">
-                  <div>
-                    <h4>You don't have metrics enabled for this repository yet. Would you like to enable them?</h4>
-                    <p><img src="../../../assets/imgs/metricsWorkflow-new.svg"
-                            style="display:block; margin: 0 auto;"
-                            width="50%"></p>
-                    <p>Once you select to enable metrics for your repository, the following steps need to be performed:</p>
-                    <p><i>On your side</i><br>
-                      1. Download the tracking code for your repository platform<br>
-                      2. Configure the tracking code according to the instructions<br>
-                      3. Deploy the tracking code in your repository platform
-                    </p>
-                    <p><i>On the OpenAIRE's side</i><br>
-                      4. Validate the installation of the tracking code and inform the repository manager accordingly<br>
-                    </p>
-                    <div class="uk-alert uk-alert-info">
-                      For more details about the workflows and tools please consult the
-                      <a target="_blank" href="https://openaire.github.io/usage-statistics-guidelines/">
-                        “Guidelines for Collecting Usage Events and Provision of Usage Statistics”
-                      </a>
-                      .
-                    </div>
-                    <button class="uk-button uk-button-primary" (click)="confirmEnabling()">Enable Metrics</button>
-                  </div>
-                </div>
-              </div>
-
-            </div>
-
-            <!-- RIGHT HELP CONTENT -->
-            <aside-help-content #rightHelperContent [position]="'right'"
-                                [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-            </aside-help-content>
-
-          </div>
-        </div>
-
-
-        <!-- BOTTOM HELP CONTENT -->
-        <help-content #bottomHelperContent [position]="'bottom'"
-                      [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
-        </help-content>
-
-
-      </div>
-    </div>
-  </div>
-</div>
-
-<confirmation-dialog #confirmEnablingModal [title]="modalTitle" [isModalShown]="isModalShown"
-                     [confirmActionButton]="modalButton" (emitObject)="confirmedEnabling($event)">
-  Are you sure you want to enable metrics for this repository?
-</confirmation-dialog>

src/app/pages/metrics/metrics-enable.component.ts

@@ -1,118 +0,0 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { ConfirmationDialogComponent } from '../../shared/reusablecomponents/confirmation-dialog.component';
-import { PiwikService } from '../../services/piwik.service';
-import { RepositoryService } from '../../services/repository.service';
-import { PiwikInfo, Repository } from '../../domain/typeScriptClasses';
-import { enabledMetricsError, enabledMetricsSuccess, enablingMetrics,
-         loadingRepoError, loadingRepoMessage } from '../../domain/shared-messages';
-import { AuthenticationService } from '../../services/authentication.service';
-
-@Component ({
-  selector: 'metrics-enable',
-  templateUrl: 'metrics-enable.component.html'
-})
-
-export class MetricsEnableComponent implements OnInit {
-  successMessage: string;
-  errorMessage: string;
-  loadingMessage: string;
-
-  readonly analyticsUrl = 'https://analytics.openaire.eu/addsite.php?';
-  readonly authenticationToken = '32846584f571be9b57488bf4088f30ea';  /* THE ACTUAL TOKEN WILL BE NEEDED EVENTUALLY!! */
-  repo: Repository;
-  oaId: string;
-
-  modalTitle = 'Confirmation';
-  modalButton = 'Yes, enable it';
-  isModalShown: boolean;
-
-  @ViewChild('confirmEnablingModal')
-  public confirmEnablingModal: ConfirmationDialogComponent;
-
-
-  constructor (
-    private route: ActivatedRoute,
-    private router: Router,
-    private authService: AuthenticationService,
-    private piwikService: PiwikService,
-    private repoService: RepositoryService
-  ) {}
-
-  ngOnInit() {
-    this.getRepo();
-    this.isModalShown = false;
-  }
-
-  getRepo(): void {
-    const id = this.route.snapshot.paramMap.get('id');
-    this.loadingMessage = loadingRepoMessage;
-    this.repoService.getRepositoryById(id).subscribe(
-      repo => {
-        this.repo = repo;
-      },
-      error => {
-        console.log(error);
-        this.errorMessage = loadingRepoError;
-        this.loadingMessage = '';
-      }, () => {
-        if (this.repo) {
-          this.getOAid();
-        }
-        this.loadingMessage = '';
-      }
-    );
-  }
-
-  getOAid () {
-    this.piwikService.getOpenaireId(this.repo.id).subscribe(
-      id => {
-        this.oaId = id;
-        console.log(`getOpenaireId responded: ${this.oaId}`);
-      },
-      error => console.log(`ERROR is ${error}`)
-    );
-  }
-
-  confirmEnabling() {
-    if (this.repo) {
-      this.confirmEnablingModal.showModal();
-    }
-  }
-
-  confirmedEnabling(event: any) {
-    if (this.repo) {
-      this.loadingMessage = enablingMetrics;
-      const piwik: PiwikInfo = {
-        repositoryId: this.repo.id,
-        openaireId: this.oaId,
-        repositoryName: this.repo.officialName,
-        country: this.repo.countryName,
-        siteId: '',
-        authenticationToken: this.authenticationToken,
-        creationDate: null,
-        requestorName: this.authService.getUserName(),
-        requestorEmail: this.authService.getUserEmail(),
-        validated: false,
-        validationDate: null,
-        comment: ''
-      };
-
-      this.piwikService.enableMetricsForRepository(this.repo.officialName, this.repo.websiteUrl, piwik).subscribe(
-        response => {
-          console.log(`enableMetrics answered: ${response}`);
-          this.successMessage = enabledMetricsSuccess;
-          this.loadingMessage = '';
-        },
-        error => {
-          console.log(error);
-          this.errorMessage = enabledMetricsError;
-          this.loadingMessage = '';
-        },
-        () => {
-          this.router.navigate([`/getImpact/instructions/${this.repo.id}`]);
-        }
-      );
-    }
-  }
-}

src/app/pages/metrics/metrics-instructions.component.html

@@ -1,91 +0,0 @@
-<div class="uk-section-default uk-section uk-section-small uk-padding-remove-bottom" style="min-height: 325px">
-
-  <!-- MARGIN-TOP  -->
-  <div class="uk-sticky-placeholder" style="height: 84px; margin: 0px;" aria-hidden="true"></div>
-  <div class="uk-container uk-container-large">
-
-    <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
-      <div class="uk-width-1-1@m uk-first-column">
-
-        <h1 class="uk-h2">Metrics Configuration & Software Details</h1>
-
-        <!-- TOP HELP CONTENT -->
-        <help-content #topHelperContent [position]="'top'"
-                      [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
-        </help-content>
-
-        <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
-          <div class="uk-grid">
-
-            <!-- LEFT HELP CONTENT -->
-            <aside-help-content #leftHelperContent [position]="'left'"
-                                [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-            </aside-help-content>
-
-            <!-- MIDDLE -->
-            <div class=" uk-width-expand@m">
-
-              <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ 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="whiteFilm"></div>
-              </div>
-              <div *ngIf="piwik">
-                <p>
-                  OpenAIRE’s usage statistic service uses the <i>Matomo Open Source Analytics platform</i> (matomo.org) to track usage activity. When <i>metrics</i>
-                  are enabled for a repository, two unique identifiers are generated - a matomo-ID that associates the repository with its usage events in Matomo
-                  and an authentication-ID that allows to track usage activity on the Matomo platform. Metadata views and item downloads are tracked and automatically sent to Matomo. Statistics are generated using the COUNTER Code of practice directives.
-                </p>
-                <p>
-                  OpenAIRE's usage statistics service tracking code exploits Matomo’s API. In order to make the tracking of usage events from repositories more robust, it was necessary to implement repository platform specific patches and plugins starting with DSpace and EPrints. The code is maintained on Github:
-                </p>
-                <ul>
-                  <li>as a patch for various versions of DSpace
-                    (<a target="_blank" href="https://github.com/openaire/OpenAIRE-Piwik-DSpace">https://github.com/openaire/OpenAIRE-Piwik-DSpace</a>)</li>
-                  <li>as an Eprints plugin for version 3
-                    (<a target="_blank" href="https://github.com/openaire/EPrints-OAPiwik">https://github.com/openaire/EPrints-OAPiwik</a>)</li>
-                  <li>as a python script for all other cases
-                    (<a target="_blank" href="https://github.com/openaire/Generic-Matomo-Tracker">https://github.com/openaire/Generic-Matomo-Tracker</a>)</li>
-                </ul>
-                <p>
-                  To configure your repository to allow tracking in Matomo platform, please change the configuration files with the following parameters and values, generated for your site:
-                </p>
-                <dl class="uk-description-list">
-                  <dt>MatomoID</dt>
-                  <dd>{{ piwik.siteId }}</dd>
-                  <dt>AuthenticationToken</dt>
-                  <dd>{{ piwik.authenticationToken }}</dd>
-                </dl>
-                <p>
-                  Details for the configuration files are given in the README of the tracking code.
-                </p>
-                <div class="uk-alert uk-alert-info">
-                  <strong>NOTE</strong>
-                  - You will be informed by e-mail that the installation of the tracking code has been validated and when the usage statistics will be available.
-                </div>
-              </div>
-
-            </div>
-
-            <!-- RIGHT HELP CONTENT -->
-            <aside-help-content #rightHelperContent [position]="'right'"
-                                [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-            </aside-help-content>
-
-          </div>
-        </div>
-
-
-        <!-- BOTTOM HELP CONTENT -->
-        <help-content #bottomHelperContent [position]="'bottom'"
-                      [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
-        </help-content>
-
-
-      </div>
-    </div>
-  </div>
-</div>
-

src/app/pages/metrics/metrics-instructions.component.ts

@@ -1,47 +0,0 @@
-/**
- * Created by myrto on 11/24/17.
- */
-import { Component, OnInit } from '@angular/core';
-import { PiwikInfo } from '../../domain/typeScriptClasses';
-import { ActivatedRoute, Router } from '@angular/router';
-import { PiwikService } from '../../services/piwik.service';
-import { AuthenticationService } from '../../services/authentication.service';
-import { loadingUserRepoInfoError } from '../../domain/shared-messages';
-
-@Component ({
-  selector: 'app-metrics-instructions',
-  templateUrl: 'metrics-instructions.component.html'
-})
-
-export class MetricsInstructionsComponent implements OnInit {
-  piwik: PiwikInfo;
-  errorMessage: string;
-  loadingMessage: string;
-
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private piwikService: PiwikService,
-    private authService: AuthenticationService) {}
-
-  ngOnInit() {
-    this.getPiwik();
-  }
-
-  getPiwik(): void {
-    this.loadingMessage = 'Retrieving instructions ...';
-    const id = this.route.snapshot.paramMap.get('id');
-    this.piwikService.getPiwikInfo(id).subscribe(
-      piwik => this.piwik = piwik,
-      error => {
-        console.log(error);
-        this.loadingMessage = '';
-        this.errorMessage = loadingUserRepoInfoError;
-      },
-      () => {
-        this.loadingMessage = '';
-      }
-    );
-  }
-
-}

src/app/pages/metrics/metrics-show.component.html

@@ -1,100 +0,0 @@
-<div class="uk-section-default uk-section uk-section-small uk-padding-remove-bottom" style="min-height: 325px">
-
-  <!-- MARGIN-TOP  -->
-  <div class="uk-sticky-placeholder" style="height: 84px; margin: 0px;" aria-hidden="true"></div>
-  <div class="uk-container uk-container-large">
-
-    <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
-      <div class="uk-width-1-1@m uk-first-column">
-
-        <h1 class="uk-h2">{{ piwik ? piwik.repositoryName : 'Metrics'}}</h1>
-
-        <!-- TOP HELP CONTENT -->
-        <help-content #topHelperContent [position]="'top'"
-                      [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
-        </help-content>
-
-        <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
-          <div class="uk-grid">
-
-            <!-- LEFT HELP CONTENT -->
-            <aside-help-content #leftHelperContent [position]="'left'"
-                                [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-            </aside-help-content>
-
-            <!-- MIDDLE -->
-            <div class=" uk-width-expand@m">
-
-              <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ 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="whiteFilm"></div>
-              </div>
-              <div *ngIf="repoMetrics">
-                <div class="uk-grid">
-                  <div class="uk-width-1-1 uk-margin-bottom">
-                    <div class="uk-float-right">
-                      <a class="uk-button uk-button-primary"
-                         [routerLink]="['/getImpact/usagestats',repoId]" title="">Get statistics report</a>
-                    </div>
-                  </div>
-                  <div class="uk-width-1-1 uk-margin-medium-bottom">
-                    <div>
-                      <div class="uk-child-width-1-3@m uk-grid-small uk-grid-match uk-grid" uk-grid="">
-                        <div class="metrics-openaire uk-first-column">
-                          <div class="uk-tile uk-tile-default uk-padding-small">
-                            <div class="uk-text-center">   {{ pageViews }}</div>
-                            <div class="uk-text-center"> views in OpenAIRE</div>
-                          </div>
-                        </div>
-                        <div class="metrics-views">
-                          <div class="uk-tile uk-tile-muted uk-padding-small">
-                            <div class="uk-text-center">  {{ totalViews }}
-                              <span *ngIf="repoMetrics.metricsNumbers.total_openaire_views">( {{ repoMetrics.metricsNumbers.total_openaire_views }} from OpenAIRE )</span>
-                            </div>
-                            <div class="uk-text-center">views in local repository</div>
-                          </div>
-                        </div>
-                        <div class="metrics-downloads">
-                          <div class="uk-tile uk-tile-primary uk-padding-small">
-                            <div class="uk-text-center">  {{ totalDownloads }}
-                              <span *ngIf="repoMetrics.metricsNumbers.total_openaire_downloads">( {{ repoMetrics.metricsNumbers.total_openaire_downloads }} from OpenAIRE )</span></div>
-                            <div class="uk-text-center">downloads in local repository</div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="uk-width-1-1 uk-text-center uk-card uk-card-default uk-card-hover uk-scrollspy-inview uk-animation-slide-top-medium uk-margin-bottom uk-padding">
-                    <iframe class="statsFrame" [src]="viewsUrl"></iframe>
-                  </div>
-                  <div class="uk-width-1-1 uk-text-center uk-card uk-card-default uk-card-hover uk-scrollspy-inview uk-animation-slide-top-medium uk-margin-bottom uk-padding">
-                    <iframe class="statsFrame" [src]="downloadsUrl"></iframe>
-                  </div>
-                </div>
-              </div>
-
-            </div>
-
-            <!-- RIGHT HELP CONTENT -->
-            <aside-help-content #rightHelperContent [position]="'right'"
-                                [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-            </aside-help-content>
-
-          </div>
-        </div>
-
-
-        <!-- BOTTOM HELP CONTENT -->
-        <help-content #bottomHelperContent [position]="'bottom'"
-                      [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
-        </help-content>
-
-
-      </div>
-    </div>
-  </div>
-</div>
-

src/app/pages/metrics/metrics-show.component.ts

@@ -1,125 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { MetricsInfo, PiwikInfo } from '../../domain/typeScriptClasses';
-import { PiwikService } from '../../services/piwik.service';
-import { RepositoryService } from '../../services/repository.service';
-import { loadingMetrics, loadingMetricsError } from '../../domain/shared-messages';
-import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
-import { AuthenticationService } from '../../services/authentication.service';
-
-@Component ({
-  selector: 'metrics-show',
-  templateUrl: 'metrics-show.component.html'
-})
-
-export class MetricsShowComponent implements OnInit {
-  errorMessage: string;
-  loadingMessage: string;
-
-  repoId: string;
-  piwik: PiwikInfo;
-  repoMetrics: MetricsInfo;
-  pageViews = '--';
-  totalViews = '--';
-  totalDownloads = '--';
-  viewsUrl: SafeResourceUrl;
-  downloadsUrl: SafeResourceUrl;
-
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private sanitizer: DomSanitizer,
-    private piwikService: PiwikService,
-    private repoService: RepositoryService,
-    private authService: AuthenticationService) {}
-
-  ngOnInit() {
-    this.repoId = this.route.snapshot.paramMap.get('id');
-    this.getPiwik();
-  }
-
-
-  getPiwik() {
-    this.loadingMessage = loadingMetrics;
-    this.piwikService.getPiwikInfo(this.repoId).subscribe(
-      piwik => this.piwik = piwik,
-      error => {
-        this.loadingMessage = '';
-        this.errorMessage = loadingMetricsError;
-        console.log(error);
-      },
-      () => {
-        this.loadingMessage = '';
-        this.errorMessage = '';
-        this.getMetrics();
-      }
-    );
-  }
-
-  getMetrics() {
-    this.loadingMessage = loadingMetrics;
-    this.repoService.getMetricsInfoForRepository(this.repoId).subscribe(
-      metrics => {
-        this.repoMetrics = metrics;
-        if (this.repoMetrics.metricsNumbers.pageviews) {
-          this.pageViews = this.repoMetrics.metricsNumbers.pageviews;
-        }
-        if (this.repoMetrics.metricsNumbers.total_views) {
-          this.totalViews = this.repoMetrics.metricsNumbers.total_views;
-        }
-        if (this.repoMetrics.metricsNumbers.total_downloads) {
-          this.totalDownloads = this.repoMetrics.metricsNumbers.total_downloads;
-        }
-        this.getViewsUrl();
-        this.getDownloadsUrl();
-      },
-      error => {
-        this.loadingMessage = '';
-        this.errorMessage = loadingMetricsError;
-        console.log(error);
-      },
-      () => {
-        this.loadingMessage = '';
-        this.errorMessage = '';
-      }
-    );
-  }
-
-
-  getViewsUrl () {
-    this.viewsUrl = this.sanitizer.bypassSecurityTrustResourceUrl(
-      `${this.repoMetrics.diagramsBaseURL}merge.php?com=query
-      &data=[{"query":"dtsrcRepoViews","dtsrcName":"${this.piwik.openaireId}",
-      "table":"","fields":[{"fld":"sum","agg":"sum","type":"chart","yaxis":1,"c":false}],
-      "xaxis":{"name":"month","agg":"sum"},"group":"","color":"","type":"chart","size":30,
-      "sort":"xaxis","xStyle":{"r":-30,"s":"0","l":"-","ft":"-","wt":"-"},"title":"","subtitle":"",
-      "xaxistitle":"","yaxisheaders":["Monthly views"],"generalxaxis":"","theme":0,"in":[]}]
-      &info_types=["spline"]&stacking=&steps=false&fontFamily=Courier&spacing=[5,0,0,0]
-      &style=[{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"rgba(0, 0, 0, 1)","size":"18"},
-      {"color":"000000","size":""},{"color":"000000","size":""}]&backgroundColor=rgba(255,255,255,1)
-      &colors[]=rgba(124,181, 236, 1)&colors[]=rgba(67, 67, 72, 1)&colors[]=rgba(144, 237, 125,1)
-      &colors[]=rgba(247, 163, 92, 1)&colors[]=rgba(128, 133, 233,1)&colors[]=rgba(241, 92, 128, 1)
-      &colors[]=rgba(228, 211, 84,1)&colors[]=rgba(43, 144, 143, 1)&colors[]=rgba(244, 91, 91,1)
-      &colors[]=rgba(145, 232, 225,1)&xlinew=0&ylinew=1&legends=true&tooltips=true&persistent=false`
-    );
-  }
-
-  getDownloadsUrl () {
-    this.downloadsUrl = this.sanitizer.bypassSecurityTrustResourceUrl(
-      `${this.repoMetrics.diagramsBaseURL}merge.php?com=query
-      &data=[{"query":"dtsrcRepoDownloads","dtsrcName":"${this.piwik.openaireId}",
-      "table":"","fields":[{"fld":"sum","agg":"sum","type":"chart","yaxis":1,"c":false}],
-      "xaxis":{"name":"month","agg":"sum"},"group":"","color":"","type":"chart","size":30,
-      "sort":"xaxis","xStyle":{"r":-30,"s":"0","l":"-","ft":"-","wt":"-"},"title":"","subtitle":"",
-      "xaxistitle":"","yaxisheaders":["Monthly downloads"],"generalxaxis":"","theme":0,"in":[]}]
-      &info_types=["spline"]&stacking=&steps=false&fontFamily=Courier&spacing=[5,0,0,0]
-      &style=[{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"rgba(0, 0, 0,1)","size":"18"},
-      {"color":"000000","size":""},{"color":"000000","size":""}]&backgroundColor=rgba(255,255,255,1)
-      &colors[]=rgba(124, 181, 236, 1)&colors[]=rgba(67, 67, 72, 1)&colors[]=rgba(144, 237, 125,1)
-      &colors[]=rgba(247, 163, 92, 1)&colors[]=rgba(128, 133, 233,1)&colors[]=rgba(241, 92, 128, 1)
-      &colors[]=rgba(228, 211, 84,1)&colors[]=rgba(43, 144, 143, 1)&colors[]=rgba(244, 91, 91,1)
-      &colors[]=rgba(145, 232, 225,1)&xlinew=0&ylinew=1&legends=true&tooltips=true&persistent=false`
-    );
-  }
-
-}

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

@@ -1,229 +0,0 @@
-<div class="uk-section-default uk-section uk-section-small uk-padding-remove-bottom" style="min-height: 325px">
-
-  <!-- MARGIN-TOP  -->
-  <div class="uk-sticky-placeholder" style="height: 84px; margin: 0px;" aria-hidden="true"></div>
-  <div class="uk-container uk-container-large">
-
-    <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
-      <div class="uk-width-1-1@m uk-first-column">
-
-        <h1 class="uk-h2">Get usage statistics report</h1>
-
-        <!-- TOP HELP CONTENT -->
-        <help-content #topHelperContent [position]="'top'"
-                      [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
-        </help-content>
-
-        <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
-          <div class="uk-grid">
-
-            <!-- LEFT HELP CONTENT -->
-            <aside-help-content #leftHelperContent [position]="'left'"
-                                [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-            </aside-help-content>
-
-            <!-- MIDDLE -->
-            <div class=" uk-width-expand@m" style="min-height:500px;">
-
-              <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="whiteFilm"></div>
-              </div>
-              <div *ngIf="repoResponse" class="uk-margin-top">
-                <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>
-                </h3>
-                <div class="uk-width-1-2">
-                  <table class="uk-table">
-                    <tr>
-                      <th>Period covered</th>
-                      <td>{{ coveredPeriod }}</td>
-                    </tr>
-                    <tr>
-                      <th>Filters</th>
-                      <td>
-                        <span *ngFor="let filter of repoResponse.ReportDefinition.Filters.Filter; let i = index">
-                          <br *ngIf="i>0">
-                          {{ filter.Name }}: {{ filter.Value }}
-                        </span>
-                      </td>
-                    </tr>
-                    <tr>
-                      <th>Date run</th>
-                      <td>{{ repoResponse.Report.Report['@Created'] | date: "yyyy-MM-dd HH:mm:ss" }}</td>
-                    </tr>
-                    <tr>
-                      <th>Number of results</th>
-                      <td>{{ repoResponse.ReportDefinition.Filters.ReportAttribute[1].Value }}</td>
-                    </tr>
-                  </table>
-                </div>
-                <div *ngIf="repoResponse.Report.Report.Customer &&
-                            repoResponse.Report.Report.Customer.ReportItems">
-                  <div>
-                    <div class="show-options uk-inline" style="float: right;">
-                      <div class="filterLabel" style="display: inline;">Results per page:</div>
-                      <div [formGroup]="pageSizeSelect" class="inlineBlock">
-                        <select class="form-control" 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>
-                      </div>
-                    </div>
-                  </div><br>
-                  <div class="contentAndPagerPanel">
-
-                    <!-- TOP PAGINATION LINKS -->
-                    <div>
-                      <ul class="uk-pagination">
-                        <li>
-                          <a class="uk-link uk-link-muted" (click)="goToPreviousPage()">
-                      <span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">
-                        <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"
-                             icon="pagination-previous" ratio="1"></svg>
-                      </span>
-                            Previous
-                          </a>
-                        </li>
-                        <li class="uk-margin-auto-left">
-                          <a class="uk-link uk-link-muted" (click)="goToNextPage()">
-                            Next
-                            <span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">
-                        <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"
-                             icon="pagination-next" ratio="1"></svg>
-                      </span>
-                          </a>
-                        </li>
-                      </ul>
-                      <div class="resultsPageLabel">page {{ (totalPages > 0) ? page+1 : 0 }} of {{ totalPages }}</div>
-                    </div>
-
-
-                    <!-- RESULTS TABLE -->
-                    <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" class="uk-alert">{{ 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 -->
-                    <div>
-                      <ul class="uk-pagination">
-                        <li>
-                          <a class="uk-link uk-link-muted" (click)="goToPreviousPage()">
-                      <span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">
-                        <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"
-                             icon="pagination-previous" ratio="1"></svg>
-                      </span>
-                            Previous
-                          </a>
-                        </li>
-                        <li class="uk-margin-auto-left">
-                          <a class="uk-link uk-link-muted" (click)="goToNextPage()">
-                            Next
-                            <span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">
-                        <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"
-                             icon="pagination-next" ratio="1"></svg>
-                      </span>
-                          </a>
-                        </li>
-                      </ul>
-                      <div class="resultsPageLabel">page {{ (totalPages > 0) ? page+1 : 0 }} of {{ totalPages }}</div>
-                    </div>
-                  </div>
-                </div>
-
-              </div>
-
-            </div>
-
-            <!-- RIGHT HELP CONTENT -->
-            <aside-help-content #rightHelperContent [position]="'right'"
-                                [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-            </aside-help-content>
-
-          </div>
-        </div>
-
-
-        <!-- BOTTOM HELP CONTENT -->
-        <help-content #bottomHelperContent [position]="'bottom'"
-                      [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
-        </help-content>
-
-
-      </div>
-    </div>
-  </div>
-</div>
-

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

@@ -1,159 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { AuthenticationService } from '../../services/authentication.service';
-import { UsagestatsService } from '../../services/usagestats.service';
-import { ReportResponse } from '../../domain/usageStatsClasses';
-import { FormBuilder, FormGroup } from '@angular/forms';
-
-@Component({
-  selector: 'metrics-usagestats-report-results',
-  templateUrl: 'metrics-usagestats-report-results.component.html',
-  styleUrls: ['metrics-usagestats-report-results.component.css']
-})
-export class MetricsUsagestatsReportResultsComponent implements OnInit {
-
-  loadingMessage: string;
-  errorMessage: string;
-  infoMessage: string;
-
-  repoResponse: ReportResponse;
-  coveredPeriod: string;
-  params: URLSearchParams;
-  page: number;
-  pageSize: number;
-  totalPages: number;
-  selectedItemIndex: number;
-
-  pageSizeSelect: FormGroup;
-  chosenReport: string;
-
-  constructor(private route: ActivatedRoute,
-              private authService: AuthenticationService,
-              private usageService: UsagestatsService,
-              private fb: FormBuilder) {}
-
-  ngOnInit() {
-    this.page = 0;
-    this.pageSize = 10;
-    this.readParams();
-    this.pageSizeSelect = this.fb.group({selectPageSize: ['']});
-  }
-
-  readParams() {
-    this.params = new URLSearchParams();
-
-    this.route.queryParams.subscribe( qparams => {
-      this.params.append('Report', qparams['report']);
-      this.params.append('Release', '4');
-      this.params.append('RequestorID', this.authService.getUserEmail());
-      this.params.append('BeginDate', qparams['beginDate']);
-      this.params.append('EndDate', qparams['endDate']);
-      this.params.append('RepositoryIdentifier', qparams['repoId']);
-      this.params.append('ItemIdentifier', qparams['itemIdentifier']);
-      this.params.append('ItemDataType', qparams['itemIdentifier']);
-      this.params.append('Granularity', qparams['granularity']);
-    });
-
-    this.chosenReport = this.params.get('Report');
-    this.getReportResponse();
-  }
-
-  getReportResponse() {
-    this.errorMessage = '';
-    this.loadingMessage = 'Loading results...';
-    this.infoMessage = '';
-    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.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;
-        }
-      }
-    );
-
-  }
-
-
-  getPageSize() {
-    this.pageSize = +(this.pageSizeSelect.get('selectPageSize').value);
-    this.page = 0;
-    this.getReportResponse();
-  }
-
-  goToNextPage() {
-    if ( (this.page + 1) < this.totalPages) {
-      this.page++;
-      console.log(`Get me page ${this.page}!`);
-      this.getReportResponse();
-    }
-  }
-
-  goToPreviousPage() {
-    if (this.page > 0) {
-      this.page--;
-      console.log(`Get me page ${this.page}!`);
-      this.getReportResponse();
-    }
-  }
-
-  displayItemPerformance(i: number) {
-    if (this.selectedItemIndex === i) {
-      this.selectedItemIndex = null;
-    } else {
-      this.selectedItemIndex = i;
-    }
-  }
-
-  transformItem(itemIdentifiers: any[]) {
-    let field: string;
-    if (this.chosenReport === 'RR1') {
-      field = 'URL';
-    } else {
-      field = 'URLs';
-    }
-    const i = itemIdentifiers.findIndex(x => x['Type'] === field);
-    if ( i > -1 ) {
-      const urls = itemIdentifiers[i]['Value'];
-      return urls.split(';');
-    }
-    return '';
-  }
-
-}

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

@@ -1,210 +0,0 @@
-<div class="uk-section-default uk-section uk-section-small uk-padding-remove-bottom" style="min-height: 325px">
-
-  <!-- MARGIN-TOP  -->
-  <div class="uk-sticky-placeholder" style="height: 84px; margin: 0px;" aria-hidden="true"></div>
-  <div class="uk-container uk-container-large">
-
-    <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
-      <div class="uk-width-1-1@m uk-first-column">
-
-        <h1 class="uk-h2">{{ title }}</h1>
-
-        <!-- TOP HELP CONTENT -->
-        <help-content #topHelperContent [position]="'top'"
-                      [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
-        </help-content>
-
-        <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
-          <div class="uk-grid">
-
-            <!-- LEFT HELP CONTENT -->
-            <aside-help-content #leftHelperContent [position]="'left'"
-                                [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-            </aside-help-content>
-
-            <!-- MIDDLE -->
-            <div class=" uk-width-expand@m" style="min-height:500px;">
-
-              <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="whiteFilm"></div>
-              </div>
-              <div *ngIf="repo && chosen_report" class="uk-margin-top">
-
-                <div class="uk-forml uk-width-1-1@s uk-width-2-3@m uk-container uk-container-large">
-                  <h3>Report Request</h3>
-                  <div class="uk-grid">
-                    <div class=" uk-width-1-3 uk-text-right">
-                      Report Name:
-                    </div>
-                    <div class="uk-width-2-3">
-                      {{ chosen_report }}
-                    </div>
-                  </div>
-                  <div class="uk-grid">
-                    <div class=" uk-width-1-3 uk-text-right">
-                      Release:
-                    </div>
-                    <div class="uk-width-2-3">
-                      4
-                    </div>
-                  </div>
-                  <div class="uk-grid">
-                    <div class=" uk-width-1-3 uk-text-right">
-                      Requestor:
-                    </div>
-                    <div class="uk-width-2-3">
-                      {{ userEmail }}
-                    </div>
-                  </div>
-                  <h3>Report Filters</h3>
-                  <h5>Date range</h5>
-                  <p>Valid date formats are yyyy-mm-dd or yyyy-mm. Default range is the last available month.
-                  </p>
-                  <div class="uk-grid">
-                    <div class=" uk-width-1-3 uk-text-right">
-                      Begin Date:
-                    </div>
-                    <div class="uk-width-2-3">
-                      <input name="BeginDate" placeholder="2016-03" type="text" (blur)="updateBeginDate($event)">
-                    </div>
-                  </div>
-                  <div class="uk-grid">
-                    <div class=" uk-width-1-3 uk-text-right">
-                      End Date:
-                    </div>
-                    <div class="uk-width-2-3">
-                      <input name="EndDate" placeholder="2016-06" type="text" (blur)="updateEndDate($event)">
-                    </div>
-                  </div>
-                  <h5><span *ngIf="chosen_report == 'RR1' || chosen_report == 'JR1'">Optional </span>Filters</h5>
-                  <p *ngIf="chosen_report != 'RR1' && chosen_report != 'JR1'">
-                    For more specific results, provide an Item Identifier.<br>
-                    Identifier format: <b>namespace:value</b><br>
-                    Valid namespace for Item Identifier: <b>openaire</b>, <b>doi</b> or <b>oid</b>(for OAI-PMH).
-                  </p>
-            		  <p *ngIf="chosen_report =='RR1'">
-                    By default results are returned for all repositories.<br>
-		                To get just the results for the current repository, check the box.</p>
-                  <div *ngIf="chosen_report != 'JR1'" class="uk-grid">
-                    <div class=" uk-width-1-3 uk-text-right">
-                      Repository Identifier:
-                    </div>
-                    <div class="uk-width-2-3">
-                      {{ shownRepoId }}
-                    </div>
-                    <div *ngIf="chosen_report =='RR1'" class=" uk-width-1-3 uk-text-right">
-                      Select current repository
-                    </div>
-                    <div *ngIf="chosen_report =='RR1'" class="uk-width-2-3 checkbox">
-                      <input type="checkbox" value="useCurrentRepo"
-                             (change)="updateUseCurrentRepo($event)">
-                    </div>
-                  </div>
-                  <div *ngIf="repo.issn && chosen_report == 'JR1'" class="uk-grid">
-                    <div class=" uk-width-1-3 uk-text-right">
-                      Journal Identifier:
-                    </div>
-                    <div class="uk-width-2-3">
-                      {{ shownRepoId }}
-                    </div>
-                  </div>
-                  <div *ngIf="chosen_report != 'JR1' && chosen_report != 'RR1'" class="uk-grid">
-                    <div class=" uk-width-1-3 uk-text-right">
-                      Item Identifier:
-                    </div>
-                    <div class="uk-width-2-3">
-                      <input name="ItemIdentifier" placeholder="e.g. openaire:od_________::fb90de6f20d79783d05749d8f60417d5"
-                             type="text" (blur)="updateItemIdentifier($event)">
-                    </div>
-                  </div>
-
-                  <div *ngIf="chosen_report == 'IR1' || chosen_report == 'RR1' || chosen_report == 'JR1'">
-                    <p>Optional filter to only show results for a single item type, e.g. article, book, etc.</p>
-                    <div class="uk-grid">
-                      <div class=" uk-width-1-3 uk-text-right">
-                        Item Data Type:
-                      </div>
-                      <div class="uk-width-2-3">
-                        <!-- TODO: get the list from api if it becomes available -->
-                        <select name="ItemDataType" (change)="updateItemDataType($event)">
-                          <option value="">--- Select Item Data Type ---</option>
-                          <option value="Annotation">Annotation</option>
-                          <option value="Article">Article</option>
-                          <option value="Bachelor thesis">Bachelor thesis</option>
-                          <option value="Book">Book</option>
-                          <option value="clinical trial">clinical trial</option>
-                          <option value="Collection">Collection</option>
-                          <option value="Conference object">Conference object</option>
-                          <option value="Contribution for newspaper or weekly magazine">Contribution for newspaper or weekly magazine</option>
-                          <option value="Dataset">Dataset</option>
-                          <option value="Doctoral thesis">Doctoral thesis</option>
-                          <option value="Event">Event</option>
-                          <option value="External research report">External research report</option>
-                          <option value="Film">Film</option>
-                          <option value="Image">Image</option>
-                          <option value="InteractiveResource">InteractiveResource</option>
-                          <option value="Internal report">Internal report</option>
-                          <option value="Lecture">Lecture</option>
-                          <option value="Master thesis">Master thesis</option>
-                          <option value="Newsletter">Newsletter</option>
-                          <option value="Other">Other</option>
-                          <option value="Part of book or chapter of book">Part of book or chapter of book</option>
-                          <option value="Patent">Patent</option>
-                          <option value="PhysicalObject">PhysicalObject</option>
-                          <option value="Preprint">Preprint</option>
-                          <option value="Report">Report</option>
-                          <option value="Research">Research</option>
-                          <option value="Review">Review</option>
-                          <option value="Software">Software</option>
-                          <option value="Sound">Sound</option>
-                          <option value="Unknown">Unknown</option>
-                        </select>
-                      </div>
-                    </div>
-                  </div>
-                  <h3>Report Attributes</h3>
-                  <p>Valid Granularity values: Monthly or Totals</p>
-                  <div class="uk-grid">
-                    <div class=" uk-width-1-3 uk-text-right">
-                      Granularity:
-                    </div>
-                    <div class="uk-width-2-3">
-                      <select name="Granularity" (change)="updateGranularity($event)">
-                        <option value="Monthly">Monthly</option>
-                        <option value="Totals">Totals</option>
-                      </select>
-                    </div>
-                  </div>
-                  <!--<p>The Pretty attribute is just for humans playing with the API and looking at results in a browser.</p>
-                  <p><input name="Pretty" value="Pretty" checked="checked" type="checkbox" (change)="updatePretty($event)">Pretty print json(p) for humans</p>-->
-                  <a class="uk-button uk-button-primary uk-margin-top" (click)="goToReport()">Get Report</a>
-                </div>
-
-              </div>
-
-            </div>
-
-            <!-- RIGHT HELP CONTENT -->
-            <aside-help-content #rightHelperContent [position]="'right'"
-                                [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-            </aside-help-content>
-
-          </div>
-        </div>
-
-
-        <!-- BOTTOM HELP CONTENT -->
-        <help-content #bottomHelperContent [position]="'bottom'"
-                      [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
-        </help-content>
-
-
-      </div>
-    </div>
-  </div>
-</div>
-

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

@@ -1,147 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Repository } from '../../domain/typeScriptClasses';
-import { ActivatedRoute, Router } from '@angular/router';
-import { RepositoryService } from '../../services/repository.service';
-import { AuthenticationService } from '../../services/authentication.service';
-import { loadingRepoMessage } from '../../domain/shared-messages';
-
-@Component({
-  selector: 'metrics-usagestats-report',
-  templateUrl: './metrics-usagestats-report.component.html'
-})
-
-export class MetricsUsagestatsReportComponent implements OnInit {
-
-  errorMessage: string;
-  loadingMessage: string;
-  title: string;
-
-  repo: Repository;
-  repoId: string;
-  shownRepoId: string;
-  shownOpenaireId: string;
-  useCurrentRepo: boolean;
-  issnToShow = '';
-  chosen_report: string;
-
-  userEmail: string;
-  beginDate = '';
-  endDate = '';
-  itemIdentifier = '';
-  itemDataType = '';
-  granularity = 'Monthly';
-
-  constructor(private repoService: RepositoryService,
-              private route: ActivatedRoute,
-              private router: Router,
-              private authService: AuthenticationService) {}
-
-  ngOnInit() {
-    this.getParams();
-    this.getUserEmail();
-    this.getRepo();
-  }
-
-  getParams() {
-    this.repoId = this.route.snapshot.paramMap.get('id');
-    this.chosen_report = this.route.snapshot.paramMap.get('reportID');
-    this.shownRepoId = this.convertToDisplayedFormat(this.repoId);
-    console.log(`shownRepoId is ${this.repoId}`);
-    this.title = `${this.chosen_report} report`;
-    if (this.chosen_report !== 'RR1') {
-      this.useCurrentRepo = true;
-    }
-  }
-
-  convertToDisplayedFormat(input: string) {
-    const tempArray = this.repoId.split('____::');
-    return tempArray[0] + ':' + tempArray[1];
-  }
-
-  getUserEmail() {
-    this.userEmail = this.authService.getUserEmail();
-  }
-
-  getRepo() {
-    this.loadingMessage = loadingRepoMessage;
-    this.repoService.getRepositoryById(this.repoId).subscribe(
-      repo => this.repo = repo,
-      error => {
-        console.log(error);
-        this.loadingMessage = '';
-          this.errorMessage = 'The repository could not be retrieved';
-      },
-      () => {
-        this.loadingMessage = '';
-        if (this.repo.piwikInfo) {
-          this.shownOpenaireId = this.convertToDisplayedFormat(this.repo.piwikInfo.openaireId);
-        }
-        if (this.repo.issn && this.repo.issn !== 'null') {
-          this.shownRepoId = this.repo.issn.slice(0, 4) + '-' + this.repo.issn.toString().slice(4);
-        }
-        this.title = `${this.chosen_report} report for ${this.repo.officialName}`;
-      }
-    );
-  }
-
-  updateBeginDate(event: any) {
-    this.beginDate = event.target.value;
-  }
-
-  updateEndDate(event: any) {
-    this.endDate = event.target.value;
-  }
-
-  updateItemDataType(event: any) {
-    this.itemDataType = event.target.value;
-  }
-
-  updateItemIdentifier(event: any) {
-    this.itemIdentifier = event.target.value;
-  }
-
-  updateGranularity(event: any) {
-    this.granularity = event.target.value;
-  }
-
-  updateUseCurrentRepo(event: any) {
-    this.useCurrentRepo = event.target.value;
-  }
-
-  goToReport() {
-    if (!this.useCurrentRepo) { this.shownRepoId = ''; }
-    this.router.navigate(['/getImpact/usagestats-report-results'], {
-      queryParams: {
-        report: this.chosen_report,
-        beginDate: this.beginDate,
-        endDate: this.endDate,
-        repoId: this.shownRepoId,
-        itemDataType: this.itemDataType,
-        itemIdentifier: this.itemIdentifier,
-        granularity: this.granularity
-      }
-    });
-
-    /*const params = new URLSearchParams();
-
-    params.append('Report', this.chosen_report);
-    params.append('Release', '4');
-    params.append('RequestorID', this.authService.getUserEmail());
-    params.append('BeginDate', this.beginDate);
-    params.append('EndDate', this.endDate);
-    params.append('RepositoryIdentifier', this.shownRepoId);
-    if (this.itemIdentifier) {
-      params.append('ItemIdentifier', this.itemIdentifier);
-    }
-    if (this.itemDataType) {
-      params.append('ItemDataType', this.itemDataType);
-    }
-    params.append('Pretty', 'Pretty');
-
-    let url = `http://beta.services.openaire.eu/usagestats/sushilite/GetReport/?${params}`;
-    console.log(`going to: ${url}`);
-
-    window.location.href = url;*/
-  }
-
-}

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

@@ -1,136 +0,0 @@
-<div class="uk-section-default uk-section uk-section-small uk-padding-remove-bottom" style="min-height: 325px">
-
-  <!-- MARGIN-TOP  -->
-  <div class="uk-sticky-placeholder" style="height: 84px; margin: 0px;" aria-hidden="true"></div>
-  <div class="uk-container uk-container-large">
-
-    <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
-      <div class="uk-width-1-1@m uk-first-column">
-
-        <h1 class="uk-h2">{{ title }}</h1>
-
-        <!-- TOP HELP CONTENT -->
-        <help-content #topHelperContent [position]="'top'"
-                      [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
-        </help-content>
-
-        <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
-          <div class="uk-grid">
-
-            <!-- LEFT HELP CONTENT -->
-            <aside-help-content #leftHelperContent [position]="'left'"
-                                [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-            </aside-help-content>
-
-            <!-- MIDDLE -->
-            <div class=" uk-width-expand@m" style="min-height:500px;">
-
-              <div *ngIf="errorMessage" class="uk-alert uk-alert-warning">{{ errorMessage }}</div>
-              <div *ngIf="repo">
-                <h3>Supported Reports</h3>
-
-                <div class="uk-margin uk-grid repositoryTypeSelection">
-                  <div class="uk-width-1-3 uk-grid-item-match uk-first-column">
-                    <div class="uk-text-center uk-card uk-card-default uk-card-hover uk-scrollspy-inview uk-animation-slide-top-medium">
-                      <a [routerLink]="['AR1']" class="uk-position-cover uk-margin-remove-adjacent"></a>
-                      <div class="uk-card-media-top">
-                        <img src="../../../assets/imgs/Icons_Reports_wide_AR1.png" alt="" style="width: 100%;">
-                      </div>
-                      <div class="uk-card-body">
-                        <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">
-                          Article Report 1, number of successful article download requests by month and repository.
-                        </h3>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="uk-width-1-3 uk-grid-item-match uk-first-column">
-                    <div class="uk-text-center uk-card uk-card-default uk-card-hover uk-scrollspy-inview uk-animation-slide-top-medium">
-                      <a [routerLink]="['IR1']" class="uk-position-cover uk-margin-remove-adjacent"></a>
-                      <div class="uk-card-media-top">
-                        <img class="el-image" src="../../../assets/imgs/Icons_Reports_wide_IR1.png" alt="" style="width:100%;">
-                      </div>
-                      <div class="uk-card-body">
-                        <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">
-                          Item Report 1, number of successful item download requests by month and repository.
-                        </h3>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="uk-width-1-3 uk-grid-item-match uk-first-column">
-                    <div class="uk-text-center uk-card uk-card-default uk-card-hover uk-scrollspy-inview uk-animation-slide-top-medium">
-                      <a [routerLink]="['RR1']" class="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>
-                      <div class="uk-card-body">
-                        <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">
-                          Repository Report 1, number of successful item downloads for all repositories participating in the usage statistics service.
-                        </h3>
-                      </div>
-                    </div>
-                  </div>
-                  <div *ngIf="repo.datasourceType === 'journal'" class="uk-width-1-3 uk-grid-item-match uk-first-column">
-                    <div class="uk-text-center uk-card uk-card-default uk-card-hover uk-scrollspy-inview uk-animation-slide-top-medium">
-                      <a [routerLink]="['JR1']" class="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>
-                      <div class="uk-card-body">
-                        <h2 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">
-                          Journal Report 1, number of successful full-text article requests by month and journal.
-                        </h2>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="uk-width-1-3 uk-grid-item-match uk-first-column">
-                    <div class="uk-text-center uk-card uk-card-default uk-card-hover uk-scrollspy-inview uk-animation-slide-top-medium">
-                      <a [routerLink]="['BR1']" class="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>
-                      <div class="uk-card-body">
-                        <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">
-                          Book Report 1, number of successful title requests by month and title.
-                        </h3>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="uk-width-1-3 uk-grid-item-match uk-first-column">
-                    <div class="uk-text-center uk-card uk-card-default uk-card-hover uk-scrollspy-inview uk-animation-slide-top-medium">
-                      <a [routerLink]="['BR2']" class="uk-position-cover uk-margin-remove-adjacent"></a>
-                      <div class="uk-card-media-top">
-                        <img class="el-image" src="../../../assets/imgs/Icons_Reports_wide_BR2.png" alt="" style="width:100%;">
-                      </div>
-                      <div class="uk-card-body">
-                        <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">
-                          Book Report 2, number of successful section requests by month and title.
-                        </h3>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-              </div>
-
-            </div>
-
-            <!-- RIGHT HELP CONTENT -->
-            <aside-help-content #rightHelperContent [position]="'right'"
-                                [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-            </aside-help-content>
-
-          </div>
-        </div>
-
-
-        <!-- BOTTOM HELP CONTENT -->
-        <help-content #bottomHelperContent [position]="'bottom'"
-                      [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
-        </help-content>
-
-
-      </div>
-    </div>
-  </div>
-</div>
-

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

@@ -1,47 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Repository } from '../../domain/typeScriptClasses';
-import { RepositoryService } from '../../services/repository.service';
-import { AuthenticationService } from '../../services/authentication.service';
-import { ActivatedRoute, Router } from '@angular/router';
-
-@Component({
-  selector: 'metrics-usagestats',
-  templateUrl: 'metrics-usagestats.component.html'
-})
-
-export class MetricsUsagestatsComponent implements OnInit {
-
-  errorMessage: string;
-  title = 'Get usage statistics report';
-
-  repo: Repository;
-  repoId: string;
-
-  constructor(private repoService: RepositoryService,
-              private authService: AuthenticationService,
-              private route: ActivatedRoute,
-              private router: Router) {}
-
-  ngOnInit() {
-    this.getRepo();
-  }
-
-  getRepo() {
-    this.repoId = this.route.snapshot.paramMap.get('id');
-
-    if (this.repoId) {
-      this.repoService.getRepositoryById(this.repoId).subscribe(
-        repo => this.repo = repo,
-        error => {
-          console.log(error);
-          this.errorMessage = 'The repository could not be retrieved';
-        },
-        () => {
-          this.title = this.title + ' for ' + this.repo.officialName;
-          console.log(this.authService.getUserEmail(), this.repo.registeredBy);
-        }
-      );
-    }
-  }
-
-}

src/app/pages/metrics/metrics.component.html

@@ -1,50 +0,0 @@
-<div class="uk-section-default uk-section uk-section-small uk-padding-remove-bottom" style="min-height: 325px">
-
-  <!-- MARGIN-TOP  -->
-  <div class="uk-sticky-placeholder" style="height: 84px; margin: 0px;" aria-hidden="true"></div>
-  <div class="uk-container uk-container-large">
-
-    <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
-      <div class="uk-width-1-1@m uk-first-column">
-
-        <h1 class="uk-h2">Metrics</h1>
-
-        <!-- TOP HELP CONTENT -->
-        <help-content #topHelperContent [position]="'top'"
-                      [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
-        </help-content>
-
-        <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom" style="min-height: 500px;">
-          <div class="uk-grid">
-
-            <!-- LEFT HELP CONTENT -->
-            <aside-help-content #leftHelperContent [position]="'left'"
-                                [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-            </aside-help-content>
-
-            <!-- MIDDLE -->
-            <div class=" uk-width-expand@m">
-
-              <repository-tiles [parent]="'metrics'"></repository-tiles>
-
-            </div>
-
-            <!-- RIGHT HELP CONTENT -->
-            <aside-help-content #rightHelperContent [position]="'right'"
-                                [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
-            </aside-help-content>
-
-          </div>
-        </div>
-
-
-        <!-- BOTTOM HELP CONTENT -->
-        <help-content #bottomHelperContent [position]="'bottom'"
-                      [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
-        </help-content>
-
-
-      </div>
-    </div>
-  </div>
-</div>

src/app/pages/metrics/metrics.component.ts

@@ -1,17 +0,0 @@
-/**
- * Created by myrto on 11/27/17.
- */
-import { Component, OnInit } from '@angular/core';
-
-@Component ({
-  selector: 'app-metrics',
-  templateUrl: 'metrics.component.html'
-})
-
-export class MetricsComponent implements OnInit {
-
-  constructor() {}
-
-  ngOnInit() { }
-
-}

src/app/pages/metrics/metrics.module.ts

@@ -1,37 +0,0 @@
-/**
- * Created by myrto on 11/27/17.
- */
-import { NgModule } from '@angular/core';
-import { TabsModule } from 'ngx-bootstrap';
-import { CommonModule } from '@angular/common';
-import { MetricsRouting } from './metrics.routing';
-import { ReusableComponentsModule } from '../../shared/reusablecomponents/reusable-components.module';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MetricsComponent } from './metrics.component';
-import { MetricsEnableComponent } from './metrics-enable.component';
-import { MetricsInstructionsComponent } from './metrics-instructions.component';
-import { MetricsShowComponent } from './metrics-show.component';
-import { MetricsUsagestatsComponent } from './metrics-usagestats.component';
-import { MetricsUsagestatsReportComponent } from './metrics-usagestats-report.component';
-import { MetricsUsagestatsReportResultsComponent } from './metrics-usagestats-report-results.component';
-
-@NgModule ({
-  imports: [
-    CommonModule,
-    TabsModule.forRoot(),
-    MetricsRouting,
-    ReusableComponentsModule,
-    ReactiveFormsModule
-  ],
-  declarations: [
-    MetricsComponent,
-    MetricsEnableComponent,
-    MetricsInstructionsComponent,
-    MetricsShowComponent,
-    MetricsUsagestatsComponent,
-    MetricsUsagestatsReportComponent,
-    MetricsUsagestatsReportResultsComponent
-  ]
-})
-
-export class MetricsModule { }

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

@@ -1,52 +0,0 @@
-/**
- * Created by myrto on 11/27/17.
- */
-import { RouterModule, Routes } from '@angular/router';
-import { MetricsComponent } from './metrics.component';
-import { MetricsEnableComponent } from './metrics-enable.component';
-import { MetricsShowComponent } from './metrics-show.component';
-import { MetricsInstructionsComponent } from './metrics-instructions.component';
-import { MetricsUsagestatsComponent } from './metrics-usagestats.component';
-import { MetricsUsagestatsReportComponent } from './metrics-usagestats-report.component';
-import { MetricsUsagestatsReportResultsComponent } from './metrics-usagestats-report-results.component';
-import { NgModule } from '@angular/core';
-
-const metricsRoutes: Routes = [
-    {
-      path: '',
-      component: MetricsComponent
-    },
-    {
-      path: 'enable/:id',
-      component: MetricsEnableComponent
-    },
-    {
-      path: 'show_metrics/:id',
-      component: MetricsShowComponent
-    },
-    {
-      path: 'instructions/:id',
-      component: MetricsInstructionsComponent
-    },
-    {
-      path: 'usagestats/:id',
-      component: MetricsUsagestatsComponent
-    },
-    {
-      path: 'usagestats/:id/:reportID',
-      component: MetricsUsagestatsReportComponent
-    },
-    {
-      path: 'usagestats-report-results',
-      component: MetricsUsagestatsReportResultsComponent
-    }
-];
-
-
-@NgModule ({
-  imports: [RouterModule.forChild(metricsRoutes)],
-  exports: [RouterModule]
-})
-
-export class MetricsRouting {}
-

src/app/pages/pageContainer.html

@@ -1,8 +1,10 @@
-<div class="uk-section-default uk-section uk-section-small uk-padding-remove-bottom" style="min-height: 325px">
+<!--<div class="uk-section-default uk-section uk-section-small uk-padding-remove-bottom" style="min-height: 325px">-->
 
-  <!-- MARGIN-TOP  -->
+  <!--&lt;!&ndash; MARGIN-TOP  &ndash;&gt;-->
-  <div class="uk-sticky-placeholder" style="height: 84px; margin: 0px;" aria-hidden="true"></div>
+  <!--<div class="uk-sticky-placeholder" style="height: 84px; margin: 0px;" aria-hidden="true"></div>-->
-  <div class="uk-container uk-container-large" style="min-height: 500px;">
+  <!--<div class="uk-container uk-container-large" style="min-height: 500px;">-->
-    <router-outlet></router-outlet>
+    <!--<router-outlet></router-outlet>-->
-  </div>
+  <!--</div>-->
-</div>
+<!--</div>-->
+
+<router-outlet></router-outlet>

src/app/pages/repository/aggregationhistory/compatibility-monitor-fullHistory-repo.component.html

@@ -0,0 +1,88 @@
+<div id="page_content_inner">
+  <!--<h2 class="heading_b uk-margin-bottom">Aggregation history for {{ repoName }}</h2>-->
+
+  <!-- TOP HELP CONTENT -->
+  <help-content #topHelperContent [position]="'top'"
+                [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
+  </help-content>
+
+  <div class="uk-grid">
+
+    <!-- LEFT HELP CONTENT -->
+    <aside-help-content #leftHelperContent [position]="'left'"
+                        [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+    </aside-help-content>
+
+    <!-- MIDDLE -->
+    <div class=" uk-width-expand@m">
+
+      <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ 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="noAggregations">{{ noAggregations }}</div>
+      <div *ngIf="aggregationsMap && years && (years.length > 0) && !noAggregations">
+        <div *ngFor="let year of years" class="uk-width-1-1@m uk-margin-medium-bottom">
+
+          <h2 class="heading_b uk-margin-bottom">
+            <span class="sub-heading">{{ year }}</span>
+          </h2>
+
+          <div class="md-card uk-margin-medium-bottom">
+            <div class="md-card-content">
+              <div class="uk-overflow-container">
+                <table class="uk-table uk-table-nowrap table_check">
+                  <thead>
+                  <tr>
+                    <!--<th class="uk-width-1-10 uk-text-center small_col"><div class="icheckbox_md"><input type="checkbox" data-md-icheck="" class="check_all" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"></ins></div></th>-->
+                    <th class="uk-width-2-10">Date</th>
+                    <th class="uk-width-2-10">Aggregation stage</th>
+                    <th class="uk-width-2-10">Collection mode</th>
+                    <th class="uk-width-2-10 uk-text-center">Number of records</th>
+                    <th class="uk-width-2-10 uk-text-center">Indexed version?</th>
+                  </tr>
+                  </thead>
+                  <tbody>
+                  <tr *ngFor="let aggr of aggregationsMap[year]">
+                    <!--<td class="uk-text-center uk-table-middle small_col"><div class="icheckbox_md"><input type="checkbox" data-md-icheck="" class="check_row" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"></ins></div></td>-->
+                    <!--<td class="uk-text-center"><img class="md-user-image dense-image dense-ready" src="assets/img/avatars/avatar_01_tn@2x.png" alt="" data-dense-cap="2"></td>-->
+                    <td><span *ngIf="aggr.date">{{ aggr.date | date : "yyyy-MM-dd" }}</span></td>
+                    <td class=""><span *ngIf="aggr.aggregationStage">{{ aggr.aggregationStage }}</span></td>
+                    <td class=""><span *ngIf="aggr.collectionMode">{{ aggr.collectionMode }}</span></td>
+                    <td class="uk-text-center"><span *ngIf="aggr.numberOfRecords">{{ aggr.numberOfRecords }}</span></td>
+                    <td class="uk-text-center"><span *ngIf="aggr.indexedVersion !== null && (aggr.indexedVersion === true)" class="uk-badge">Indexed version</span></td>
+                  </tr>
+                  </tbody>
+                </table>
+              </div>
+
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+      <div *ngIf="repo" class="md-fab-wrapper">
+        <a class="md-fab md-fab-success md-fab-wave-light waves-effect waves-button waves-light" [routerLink]="['/repository/' + repo.id + '/aggregationHistory']">
+          <i class="material-icons">arrow_back</i>
+        </a>
+      </div>
+
+    </div>
+
+    <!-- RIGHT HELP CONTENT -->
+    <aside-help-content #rightHelperContent [position]="'right'"
+                        [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+    </aside-help-content>
+
+  </div>
+
+  <!-- BOTTOM HELP CONTENT -->
+  <help-content #bottomHelperContent [position]="'bottom'"
+                [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
+  </help-content>
+
+</div>

src/app/pages/repository/aggregationhistory/compatibility-monitor-fullHistory-repo.component.ts

@@ -0,0 +1,74 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AggregationDetails, Repository } from '../../../domain/typeScriptClasses';
+import { RepositoryService } from '../../../services/repository.service';
+import { loadingAggregationHistory, loadingAggregationHistoryError, noAggregationHistory } from '../../../domain/shared-messages';
+import { SharedService } from "../../../services/shared.service";
+
+@Component ({
+  selector: 'app-compatibility-fullhistory-monitor-repo',
+  templateUrl: 'compatibility-monitor-fullHistory-repo.component.html'
+})
+
+export class CompatibilityMonitorFullHistoryRepoComponent implements OnInit {
+  loadingMessage: string;
+  errorMessage: string;
+  noAggregations: string;
+
+  repoName = '';
+  repo: Repository;
+
+  aggregationsMap: Map<string, AggregationDetails[]> = new Map<string, AggregationDetails[]>();
+  years: string[] = [];
+
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private repoService: RepositoryService,
+              private sharedService: SharedService) {}
+
+  ngOnInit() {
+
+    if(this.sharedService.getRepository()) {
+      this.repo = this.sharedService.getRepository();
+      this.repoName = this.repo.officialName;
+      this.getAllAggregationHistory();
+    }
+
+    this.sharedService.repository$.subscribe(
+      r => {
+        this.repo = r;
+        if (this.repo) {
+          this.repoName = this.repo.officialName;
+          this.getAllAggregationHistory();
+        }
+      }
+    );
+
+    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");
+  }
+
+  getAllAggregationHistory() {
+    this.loadingMessage = loadingAggregationHistory;
+    this.repoService.getRepositoryAggregationsByYear(this.repo.id).subscribe(
+      aggr => this.aggregationsMap = aggr,
+      error => {
+        this.loadingMessage = '';
+        this.errorMessage = loadingAggregationHistoryError;
+      },
+      () => {
+        this.loadingMessage = '';
+        this.years = Object.keys(this.aggregationsMap);
+        if ( this.years.length === 0 ) {
+          this.noAggregations = noAggregationHistory;
+        } else {
+          this.years.sort( (a, b)  => ( a > b ? -1 : 1 ) );
+        }
+      }
+    );
+  }
+
+}

src/app/pages/repository/aggregationhistory/compatibility-monitor-repo.component.html

@@ -0,0 +1,118 @@
+<div id="page_content_inner">
+  <!--<h2 *ngIf="repoName" class="heading_b uk-margin-bottom">Recent aggregation history for {{ repoName }}</h2>-->
+
+  <!-- TOP HELP CONTENT -->
+  <help-content #topHelperContent [position]="'top'"
+                [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
+  </help-content>
+
+  <div class="uk-grid">
+
+    <!-- LEFT HELP CONTENT -->
+    <aside-help-content #leftHelperContent [position]="'left'"
+                        [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+    </aside-help-content>
+
+    <!-- MIDDLE -->
+    <div class=" uk-width-expand@m">
+
+      <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ 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="noAggregations">{{ noAggregations }}</div>
+      <div *ngIf="latestAggregations && (latestAggregations.length > 0) && !noAggregations">
+
+        <div class="uk-width-large-2-3 uk-container-center">
+          <div class="timeline timeline-center">
+            <div *ngFor="let aggr of latestAggregations" class="timeline_item">
+              <div class="timeline_icon timeline_icon_white uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up"
+                   data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible', delay:300, repeat: true}">
+                <ng-container *ngIf="aggr.indexedVersion">
+                  <img src="https://www.openaire.eu/images/Logos/Favicon-90x90.png" style="width: 80%;margin-top: 9%;">
+                </ng-container>
+                <!--<i class="material-icons"></i>-->
+              </div>
+              <div *ngIf="aggr.date" class="timeline_date uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-slide-right"
+                   data-uk-scrollspy="{cls:'uk-animation-slide-right uk-invisible', delay:300}">
+                {{ aggr.date | date : "yyyy-MM-dd" }}
+              </div>
+              <div class="timeline_content uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-slide-left"
+                   data-uk-scrollspy="{cls:'uk-animation-slide-left uk-invisible', delay:300}">
+                  <span *ngIf="aggr.indexedVersion" class="ng-star-inserted uk-inline uk-float-right uk-badge"
+                        style="padding-top: 3px;padding-left: 10px;padding-right: 10px;margin-top: 5px;">Indexed version</span>
+
+                <div class="timeline_content_addon">
+                  <ul class="md-list md-list-addon">
+                    <li *ngIf="aggr.aggregationStage">
+                      <!--<div class="md-list-addon-element">-->
+                          <!--<span *ngIf="aggr.aggregationStage=='TRANSFORM'" class="md-user-image md-list-addon-avatar dense-image dense-ready">-->
+                            <!--<i class="material-icons">transform</i>-->
+                          <!--</span>-->
+                        <!--<span *ngIf="aggr.aggregationStage=='COLLECT'" class="md-user-image md-list-addon-avatar dense-image dense-ready">-->
+                            <!--<i class="material-icons">collections</i>-->
+                          <!--</span>-->
+                        <!--&lt;!&ndash;<img class="md-user-image md-list-addon-avatar dense-image dense-ready" src="assets/img/avatars/avatar_02_tn@2x.png" alt="" data-dense-cap="2">&ndash;&gt;-->
+                      <!--</div>-->
+                      <div class="md-list-content">
+                        <span class="md-list-heading">Aggregation stage</span>
+                        <span class="uk-text-small uk-text-muted">{{ aggr.aggregationStage }}</span>
+                      </div>
+                    </li>
+                    <li *ngIf="aggr.collectionMode">
+                      <!--<div class="md-list-addon-element">-->
+                          <!--<span *ngIf="aggr.collectionMode=='REFRESH'" class="md-user-image md-list-addon-avatar dense-image dense-ready">-->
+                            <!--<i class="material-icons">refresh</i>-->
+                          <!--</span>-->
+                        <!--&lt;!&ndash;<img class="md-user-image md-list-addon-avatar dense-image dense-ready" src="assets/img/avatars/avatar_02_tn@2x.png" alt="" data-dense-cap="2">&ndash;&gt;-->
+                      <!--</div>-->
+                      <div class="md-list-content">
+                        <span class="md-list-heading">Collection mode</span>
+                        <span class="uk-text-small uk-text-muted">{{ aggr.collectionMode }}</span>
+                      </div>
+                    </li>
+                    <li *ngIf="aggr.numberOfRecords">
+                      <!--<div class="md-list-addon-element">-->
+                          <!--<span class="md-user-image md-list-addon-avatar dense-image dense-ready">-->
+                            <!--<i class="material-icons">list</i>-->
+                          <!--</span>-->
+                      <!--</div>-->
+                      <div class="md-list-content">
+                        <span class="md-list-heading">Number of records</span>
+                        <span class="uk-text-small uk-text-muted">{{ aggr.numberOfRecords }}</span>
+                      </div>
+                    </li>
+                  </ul>
+                  <!--<p *ngIf="aggr.indexedVersion !== null">Is the indexed version - {{ (aggr.indexedVersion === true) ? 'Yes': 'No' }}</p>-->
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="uk-margin-top uk-text-center">
+          <a *ngIf="repo" [routerLink]="['/repository/' + repo.id + '/aggregationHistory/fullHistory']" class="uk-h3 uk-link">See more results ...</a>
+        </div>
+
+
+      </div>
+    </div>
+
+    <!-- RIGHT HELP CONTENT -->
+    <aside-help-content #rightHelperContent [position]="'right'"
+                        [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+    </aside-help-content>
+
+  </div>
+
+  <!-- BOTTOM HELP CONTENT -->
+  <help-content #bottomHelperContent [position]="'bottom'"
+                [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
+  </help-content>
+
+</div>
+

src/app/pages/repository/aggregationhistory/compatibility-monitor-repo.component.ts

@@ -0,0 +1,70 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AggregationDetails, Repository } from '../../../domain/typeScriptClasses';
+import { RepositoryService } from '../../../services/repository.service';
+import { loadingAggregationHistory, loadingAggregationHistoryError, noAggregationHistory } from '../../../domain/shared-messages';
+import { SharedService } from "../../../services/shared.service";
+
+@Component ({
+  selector: 'app-compatibility-monitor-repo',
+  templateUrl: 'compatibility-monitor-repo.component.html'
+})
+
+export class CompatibilityMonitorRepoComponent implements OnInit {
+  loadingMessage: string;
+  errorMessage: string;
+  noAggregations: string;
+
+  repoName = '';
+  repo: Repository;
+
+  latestAggregations: AggregationDetails[] = [];
+
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private repoService: RepositoryService,
+              private sharedService: SharedService) {}
+
+  ngOnInit() {
+
+    if(this.sharedService.getRepository()) {
+      this.repo = this.sharedService.getRepository();
+      this.repoName = this.repo.officialName;
+      this.getLatestAggregationHistory();
+    }
+
+    this.sharedService.repository$.subscribe(
+      r => {
+        this.repo = r;
+        if (this.repo) {
+          this.repoName = this.repo.officialName;
+          this.getLatestAggregationHistory();
+        }
+      }
+    );
+
+    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");
+  }
+
+  getLatestAggregationHistory() {
+    this.loadingMessage = loadingAggregationHistory;
+    this.repoService.getRepositoryAggregations(this.repo.id).subscribe(
+      aggr => this.latestAggregations = aggr,
+      error => {
+        this.loadingMessage = '';
+        this.errorMessage = loadingAggregationHistoryError;
+      },
+      () => {
+        this.loadingMessage = '';
+        if ( !this.latestAggregations || (this.latestAggregations.length === 0) ) {
+          this.noAggregations = noAggregationHistory;
+        }
+      }
+    );
+  }
+
+}

src/app/pages/repository/aggregationhistory/compatibility-monitor-routing.module.ts

@@ -0,0 +1,27 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { CompatibilityMonitorRepoComponent } from "./compatibility-monitor-repo.component";
+import { AuthGuardService } from "../../../services/auth-guard.service";
+import { CompatibilityMonitorFullHistoryRepoComponent } from "./compatibility-monitor-fullHistory-repo.component";
+
+const aggregationHistoryRoutes: Routes = [
+  {
+    path: '',
+    component: CompatibilityMonitorRepoComponent,
+    canActivate: [AuthGuardService],
+  },
+  {
+    path: 'fullHistory',
+    component: CompatibilityMonitorFullHistoryRepoComponent,
+    canActivate: [AuthGuardService]
+  }
+];
+
+
+@NgModule ({
+  imports: [RouterModule.forChild(aggregationHistoryRoutes)],
+  exports: [RouterModule]
+})
+
+export class AggregationHistoryRoutingModule {}
+

src/app/pages/repository/aggregationhistory/compatibility-monitor.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { TabsModule } from 'ngx-bootstrap';
+import { CommonModule } from '@angular/common';
+import { ReusableComponentsModule } from "../../../shared/reusablecomponents/reusable-components.module";
+import { AggregationHistoryRoutingModule } from "./compatibility-monitor-routing.module";
+import { CompatibilityMonitorRepoComponent } from "./compatibility-monitor-repo.component";
+import { CompatibilityMonitorFullHistoryRepoComponent } from "./compatibility-monitor-fullHistory-repo.component";
+
+@NgModule ({
+  imports: [
+    CommonModule,
+    TabsModule.forRoot(),
+    AggregationHistoryRoutingModule,
+    ReusableComponentsModule
+  ],
+  declarations: [
+    CompatibilityMonitorRepoComponent,
+    CompatibilityMonitorFullHistoryRepoComponent
+  ]
+})
+
+export class AggregationHistoryModule { }

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

@@ -0,0 +1,399 @@
+<div id="page_content_inner">
+
+  <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>
+  <!--<div *ngIf="noRepos" class="">{{ noRepos }}</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="!loadingMessage && repository">
+
+    <!--<div *ngIf="reposOfUser.length>1" class="md-card uk-margin-bottom uk-width-1-3">-->
+    <!--<div class="md-card-content">-->
+    <!--<div class="md-input-wrapper md-input-filled">-->
+    <!--<label class="">Select repository</label>-->
+    <!--<select class="md-input" (change)="changeSelectedRepository($event.target.value)">-->
+    <!--<option *ngFor="let repo of reposOfUser; let i = index" value="{{ repo.id }}">{{ repo.officialname }}</option>-->
+    <!--</select>-->
+    <!--<span class="md-input-bar"></span>-->
+    <!--</div>-->
+    <!--</div>-->
+    <!--</div>-->
+
+    <!--FIRST NUMBERS-->
+    <div class="uk-grid uk-grid-match uk-child-width-1-4@l uk-child-width-1-2@m uk-child-width-1-1@s uk-grid-medium uk-sortable sortable-handler" data-uk-sortable="" data-uk-grid-margin="">
+      <div class="uk-row-first" style="">
+        <div class="md-card">
+          <a [routerLink]="['/repository/' + repository.id + '/aggregationHistory']">
+            <div class="md-card-content">
+              <div class="uk-float-right uk-margin-top uk-margin-small-right"><span class="peity_live peity_data" style="display: none;">7,5,8,7,6,5,2,5,3,10,10,3,6,5,6,3,3,6,8,3</span><svg class="peity" height="28" width="64"><polygon fill="#efebe9" points="0 27.5 0 8.600000000000001 3.3684210526315788 14 6.7368421052631575 5.899999999999999 10.105263157894736 8.600000000000001 13.473684210526315 11.3 16.842105263157894 14 20.210526315789473 22.1 23.57894736842105 14 26.94736842105263 19.4 30.31578947368421 0.5 33.68421052631579 0.5 37.05263157894737 19.4 40.421052631578945 11.3 43.78947368421052 14 47.1578947368421 11.3 50.526315789473685 19.4 53.89473684210526 19.4 57.263157894736835 11.3 60.63157894736842 5.899999999999999 64 19.4 64 27.5"></polygon><polyline fill="none" points="0 8.600000000000001 3.3684210526315788 14 6.7368421052631575 5.899999999999999 10.105263157894736 8.600000000000001 13.473684210526315 11.3 16.842105263157894 14 20.210526315789473 22.1 23.57894736842105 14 26.94736842105263 19.4 30.31578947368421 0.5 33.68421052631579 0.5 37.05263157894737 19.4 40.421052631578945 11.3 43.78947368421052 14 47.1578947368421 11.3 50.526315789473685 19.4 53.89473684210526 19.4 57.263157894736835 11.3 60.63157894736842 5.899999999999999 64 19.4" stroke="#5d4037" stroke-width="1" stroke-linecap="square"></polyline></svg></div>
+              <ng-container *ngIf="lastIndexedVersion">
+                <span class="uk-text-muted uk-text-small">Records collected <span *ngIf="lastIndexedVersion.date">on {{lastIndexedVersion.date | date : "yyyy-MM-dd"}}</span></span>
+                <h2 class="uk-margin-remove">{{lastIndexedVersion.numberOfRecords | number}}</h2>
+              </ng-container>
+              <ng-container *ngIf="!lastIndexedVersion">
+                <span class="uk-text-muted uk-text-small">Records collected</span>
+                <h2 class="uk-margin-remove">no data available</h2>
+              </ng-container>
+            </div>
+          </a>
+        </div>
+      </div>
+      <div style="">
+        <div class="md-card">
+          <a [routerLink]="['/repository/' + repository.id + '/events']">
+            <div class="md-card-content">
+              <div class="uk-float-right uk-margin-top uk-margin-small-right"><span class="peity_orders peity_data" style="display: none;">64/100</span><svg class="peity" height="24" width="24"><path d="M 12 0 A 12 12 0 1 1 2.7538410866905263 19.649087876984275 L 7.376920543345263 15.824543938492138 A 6 6 0 1 0 12 6" data-value="64" fill="#8bc34a"></path><path d="M 2.7538410866905263 19.649087876984275 A 12 12 0 0 1 11.999999999999998 0 L 11.999999999999998 6 A 6 6 0 0 0 7.376920543345263 15.824543938492138" data-value="36" fill="#eee"></path></svg></div>
+              <span class="uk-text-muted uk-text-small">Enrichments</span>
+              <h2 class="uk-margin-remove">
+                <span class="countUpMe">{{ totalNumberOfEvents | number }}</span>
+              </h2>
+            </div>
+          </a>
+        </div>
+      </div>
+      <div style="">
+        <div class="md-card">
+          <a [routerLink]="['/repository/' + repository.id + '/getImpact/show_metrics']">
+            <div class="md-card-content">
+              <div class="uk-float-right uk-margin-top uk-margin-small-right"><span class="peity_sale peity_data" style="display: none;">5,3,9,6,5,9,7,3,5,2</span><svg class="peity" height="28" width="64"><polygon fill="#d1e4f6" points="0 27.5 0 12.5 7.111111111111111 18.5 14.222222222222221 0.5 21.333333333333332 9.5 28.444444444444443 12.5 35.55555555555556 0.5 42.666666666666664 6.5 49.77777777777777 18.5 56.888888888888886 12.5 64 21.5 64 27.5"></polygon><polyline fill="none" points="0 12.5 7.111111111111111 18.5 14.222222222222221 0.5 21.333333333333332 9.5 28.444444444444443 12.5 35.55555555555556 0.5 42.666666666666664 6.5 49.77777777777777 18.5 56.888888888888886 12.5 64 21.5" stroke="#0288d1" stroke-width="1" stroke-linecap="square"></polyline></svg></div>
+              <span class="uk-text-muted uk-text-small">Downloads</span>
+              <h2 class="uk-margin-remove">
+                <span *ngIf="totalDownloads == '--'">{{ totalDownloads }}</span>
+                <span *ngIf="totalDownloads != '--'">{{ totalDownloads | number }}</span>
+              </h2>
+            </div>
+          </a>
+        </div>
+      </div>
+      <div style="">
+        <div class="md-card">
+          <a [routerLink]="['/repository/' + repository.id + '/getImpact/show_metrics']">
+            <div class="md-card-content">
+              <div class="uk-float-right uk-margin-top uk-margin-small-right"><span class="peity_visitors peity_data" style="display: none;">5,3,9,6,5,9,7</span><svg class="peity" height="28" width="48"><rect data-value="5" fill="#d84315" x="1.3714285714285717" y="12.444444444444443" width="4.114285714285715" height="15.555555555555557"></rect><rect data-value="3" fill="#d84315" x="8.228571428571428" y="18.666666666666668" width="4.114285714285716" height="9.333333333333332"></rect><rect data-value="9" fill="#d84315" x="15.085714285714287" y="0" width="4.1142857142857086" height="28"></rect><rect data-value="6" fill="#d84315" x="21.942857142857147" y="9.333333333333336" width="4.114285714285707" height="18.666666666666664"></rect><rect data-value="5" fill="#d84315" x="28.800000000000004" y="12.444444444444443" width="4.114285714285707" height="15.555555555555557"></rect><rect data-value="9" fill="#d84315" x="35.65714285714286" y="0" width="4.114285714285707" height="28"></rect><rect data-value="7" fill="#d84315" x="42.51428571428572" y="6.222222222222221" width="4.114285714285707" height="21.77777777777778"></rect></svg></div>
+              <span class="uk-text-muted uk-text-small">Views</span>
+              <h2 class="uk-margin-remove">
+                <span *ngIf="pageViews == '--'" class="countUpMe">{{ pageViews }}</span>
+                <span *ngIf="pageViews != '--'" class="countUpMe">{{ pageViews | number }}</span>
+              </h2>
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div class="uk-grid uk-grid-medium uk-grid-match" data-uk-grid-margin="" data-uk-grid-match="{target:'.md-card-content'}">
+
+      <!--COLLECTION MONITOR-->
+      <div class="uk-width-1-4@m uk-row-first">
+        <div class="md-card" style="min-height: 600px">
+          <div class="md-card-content">
+            <h3 class="heading_a uk-margin-bottom">Aggregation History</h3>
+            <div *ngIf="errorAggregationsMessage" class="uk-alert uk-alert-danger">{{ errorAggregationsMessage }}</div>
+            <div *ngIf="loadingAggregationsMessage" class="loading-big">
+              <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">
+                {{ loadingAggregationsMessage }}
+              </div>
+              <div class="whiteFilm"></div>
+            </div>
+            <div *ngIf="noAggregations">{{ noAggregations }}</div>
+
+            <div *ngIf="latestAggregations && (latestAggregations.length > 0) && !noAggregations">
+              <div class="timeline timeline_small uk-margin-bottom">
+                <div *ngFor="let aggr of latestAggregations" class="timeline_item">
+                  <div class="timeline_icon">
+                    <ng-container *ngIf="aggr.indexedVersion">
+                      <img src="https://www.openaire.eu/images/Logos/Favicon-90x90.png" style="width: 80%;margin-top: 9%;">
+                    </ng-container>
+                  </div>
+                  <div *ngIf="aggr.date" class="timeline_date">
+                    {{ aggr.date | date : "yyyy-MM-dd" }}
+                  </div>
+                  <div class="timeline_content">
+
+                    <div *ngIf="aggr.indexedVersion" class="ng-star-inserted uk-badge uk-margin-small-bottom">Indexed version</div>
+
+                    <div *ngIf="aggr.aggregationStage" class="uk-margin-small-bottom">
+                      <!--<div class="inline-block" style="vertical-align: top">-->
+                        <!--<span *ngIf="aggr.aggregationStage=='TRANSFORM'" class="md-user-image md-list-addon-avatar dense-image dense-ready">-->
+                        <!--<i class="material-icons">transform</i>-->
+                      <!--</span>-->
+                        <!--<span *ngIf="aggr.aggregationStage=='COLLECT'" class="md-user-image md-list-addon-avatar dense-image dense-ready">-->
+                        <!--<i class="material-icons">collections</i>-->
+                      <!--</span>-->
+                      <!--</div>-->
+                      <div class="">
+                        <div class="md-list-heading">Aggregation stage</div>
+                        <div class="uk-text-small uk-text-muted">{{ aggr.aggregationStage }}</div>
+                      </div>
+                    </div>
+
+                    <div *ngIf="aggr.collectionMode" class="uk-margin-small-bottom">
+                      <!--<div class="inline-block" style="vertical-align: top">-->
+                        <!--<span *ngIf="aggr.collectionMode=='REFRESH'" class="md-user-image md-list-addon-avatar dense-image dense-ready">-->
+                          <!--<i class="material-icons">refresh</i>-->
+                        <!--</span>-->
+                      <!--</div>-->
+
+                      <div class="">
+                        <div class="md-list-heading">Collection mode</div>
+                        <div class="uk-text-small uk-text-muted">{{ aggr.collectionMode }}</div>
+                      </div>
+                    </div>
+
+                    <div *ngIf="aggr.numberOfRecords" class="uk-margin-small-bottom">
+                      <!--<div class="inline-block" style="vertical-align: top">-->
+                        <!--<span class="md-user-image md-list-addon-avatar dense-image dense-ready">-->
+                          <!--<i class="material-icons">list</i>-->
+                        <!--</span>-->
+                      <!--</div>-->
+
+                      <div class="">
+                        <div class="md-list-heading">Number of records</div>
+                        <div class="uk-text-small uk-text-muted">{{ aggr.numberOfRecords | number }}</div>
+                      </div>
+                    </div>
+
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="uk-position-bottom-right" style="margin-bottom: 10px; margin-right: 10px"><a [routerLink]="['/repository/' + repository.id + '/aggregationHistory']">view more..</a></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="uk-width-expand@m">
+
+        <!--&lt;!&ndash;VALIDATIONS&ndash;&gt;-->
+        <!--<div class="md-card"  style="min-height: 300px">-->
+          <!--<div class="md-card-content">-->
+            <!--<h3 class="heading_a uk-margin-bottom">Validation History</h3>-->
+            <!--<div class="uk-overflow-container">-->
+              <!--<div *ngIf="noValidationsMessage">{{ noValidationsMessage }}</div>-->
+              <!--<div *ngIf="errorValidationsMessage" class="uk-alert uk-alert-danger">{{ errorValidationsMessage }}</div>-->
+              <!--<div *ngIf="loadingJobSummaryMessage" class="loading-big">-->
+                <!--<div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">-->
+                  <!--{{ loadingJobSummaryMessage }}-->
+                <!--</div>-->
+                <!--<div class="whiteFilm"></div>-->
+              <!--</div>-->
+
+              <!--<table *ngIf="storedJob && (storedJob.length > 0) && !noValidationsMessage" class="uk-table">-->
+                <!--<thead>-->
+                <!--<tr>-->
+                  <!--<th class="uk-text-nowrap">Base URL</th>-->
+                  <!--<th class="uk-text-nowrap">Validation Type</th>-->
+                  <!--<th class="uk-text-nowrap">Status</th>-->
+                  <!--<th class="uk-text-nowrap">Score</th>-->
+                  <!--<th class="uk-text-nowrap uk-text-right">Guidelines</th>-->
+                <!--</tr>-->
+                <!--</thead>-->
+                <!--<tbody>-->
+                <!--<tr *ngFor="let job of storedJob" class="uk-table-middle uk-text-muted">-->
+                  <!--<td class="uk-width-3-10 uk-text-nowrap"><div>{{ job.baseUrl }}</div></td>-->
+                  <!--<td>-->
+                    <!--<div *ngIf="job.validationType.includes('C')" class="">OAI Content</div>-->
+                    <!--<div *ngIf="job.validationType.includes('U')" class="">OAI Usage</div>-->
+                  <!--</td>-->
+                  <!--<td class="uk-text-nowrap">-->
+                    <!--<div [ngClass]="job.contentJobStatus == 'finished' ? 'uk-badge uk-badge-success':-->
+                      <!--( job.contentJobStatus == 'ongoing' ) ? 'uk-badge' :-->
+                      <!--( job.contentJobStatus == 'none' ) ? 'uk-badge uk-badge-warning' : 'clear-style' ">{{ job.contentJobStatus }}</div>-->
+                    <!--<br *ngIf="job.contentJobStatus == 'finished' || 'ongoing' || 'none' ">-->
+                    <!--<div [ngClass]="job.usageJobStatus == 'finished' ? 'uk-badge uk-badge-success':-->
+                      <!--( job.usageJobStatus == 'ongoing' ) ? 'uk-badge' :-->
+                      <!--( job.usageJobStatus == 'none' ) ? 'uk-badge uk-badge-warning' : 'clear-style' ">{{ job.usageJobStatus }}</div>-->
+                  <!--</td>-->
+                  <!--<td>-->
+                    <!--<div>{{ job.contentJobScore }}</div>-->
+                    <!--<div>{{ job.usageJobScore }}</div>-->
+                  <!--</td>-->
+                  <!--<td class="uk-width-3-10 uk-text-right"><div>{{ job.guidelinesShortName }}</div></td>-->
+                <!--</tr>-->
+                <!--</tbody>-->
+              <!--</table>-->
+              <!--<div class="uk-position-bottom-right" style="margin-bottom: 10px; margin-right: 10px"><a [routerLink]="['/compatibility/browseHistory/']">view more..</a></div>-->
+            <!--</div>-->
+          <!--</div>-->
+        <!--</div>-->
+
+        <!--USAGE STATISTICS-->
+        <div class="md-card" style="min-height: 300px">
+          <div class="md-card-content">
+
+            <h3 class="heading_a uk-margin-bottom">Usage Counts</h3>
+
+            <div *ngIf="errorUsageStatsMessage" class="uk-alert uk-alert-danger">{{ errorUsageStatsMessage }}</div>
+            <div *ngIf="noUsageStats" class="">{{ noUsageStats }}</div>
+            <div *ngIf="loadingUsageStatsMessage" class="loading-big">
+              <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">
+                {{ loadingUsageStatsMessage }}
+              </div>
+              <div class="whiteFilm"></div>
+            </div>
+
+            <div *ngIf="!loadingUsageStatsMessage && !errorUsageStatsMessage && !noUsageStats && usageSummary" class="uk-grid">
+
+              <div class="uk-width-3-4">
+                <iframe *ngIf="viewsUrl" class="statsFrame" [src]="viewsUrl"></iframe>
+              </div>
+              <div class="uk-width-1-4">
+                <h2 class="heading_b uk-margin-bottom">
+                  <span class="sub-heading">Last month's reports</span>
+                </h2>
+                <div class="uk-margin-top">
+                  <a class="md-btn md-btn-large md-btn-block md-btn-wave-light waves-effect waves-button waves-light"
+                     [routerLink]="['/repository/' + repository.id + '/getImpact/usagestats-report-results']" [queryParams]="{ report:'AR1', beginDate: currentDate, endDate: currentDate, repoId: shortRepositoryId, granularity:'Monthly'}">AR1</a>
+                </div>
+                <div class="uk-margin-top">
+                  <a class="md-btn md-btn-large md-btn-block md-btn-wave-light waves-effect waves-button waves-light"
+                     [routerLink]="['/repository/' + repository.id + '/getImpact/usagestats-report-results']" [queryParams]="{ report:'IR1', beginDate: currentDate, endDate: currentDate, repoId: shortRepositoryId, granularity:'Monthly'}">IR1</a>
+                </div>
+                <div class="uk-margin-top">
+                  <a class="md-btn md-btn-large md-btn-block md-btn-wave-light waves-effect waves-button waves-light"
+                     [routerLink]="['/repository/' + repository.id + '/getImpact/usagestats-report-results']" [queryParams]="{ report:'RR1', beginDate: currentDate, endDate: currentDate, repoId: shortRepositoryId, granularity:'Monthly'}">RR1</a>
+                </div>
+                <div class="uk-margin-top">
+                  <a class="md-btn md-btn-large md-btn-block md-btn-wave-light waves-effect waves-button waves-light"
+                     [routerLink]="['/repository/' + repository.id + '/getImpact/usagestats-report-results']" [queryParams]="{ report:'BR1', beginDate: currentDate, endDate: currentDate, repoId: shortRepositoryId, granularity:'Monthly'}">BR1</a>
+                </div>
+                <div class="uk-margin-top">
+                  <a class="md-btn md-btn-large md-btn-block md-btn-wave-light waves-effect waves-button waves-light"
+                     [routerLink]="['/repository/' + repository.id + '/getImpact/usagestats-report-results']" [queryParams]="{ report:'BR2', beginDate: currentDate, endDate: currentDate, repoId: shortRepositoryId, granularity:'Monthly'}">BR2</a>
+                </div>
+                <div *ngIf="repository && repository.typology.includes('journal')" class="uk-margin-top">
+                  <a class="md-btn md-btn-large md-btn-block md-btn-wave-light waves-effect waves-button waves-light"
+                     [routerLink]="['/repository/' + repository.id + '/getImpact/usagestats-report-results']" [queryParams]="{ report:'RR1', beginDate: currentDate, endDate: currentDate, repoId: shortRepositoryId, granularity:'Monthly'}">RR1</a>
+                </div>
+              </div>
+
+            </div>
+
+          </div>
+          <div class="uk-position-bottom-right" style="margin-bottom: 10px; margin-right: 10px"><a [routerLink]="['/repository/' + repository.id + '/getImpact/show_metrics']">view more..</a></div>
+        </div>
+
+      </div>
+    </div>
+
+    <div class="uk-grid uk-grid-medium" data-uk-grid-margin="" data-uk-grid-match="{target:'.md-card-content'}">
+
+      <!--EVENTS - MORE-->
+      <div class="uk-width-1-3@m uk-row-first">
+        <div class="md-card" style="min-height: 200px">
+          <div class="md-card-toolbar">
+            <h3 class="md-card-toolbar-heading-text">
+              Events - MORE
+            </h3>
+          </div>
+          <div class="md-card-content">
+            <div *ngIf="errorTopicsMessage" class="uk-alert uk-alert-danger">{{ errorTopicsMessage }}</div>
+            <div *ngIf="loadingTopicsMessage" class="loading-big">
+              <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">
+                {{ loadingTopicsMessage }}
+              </div>
+              <div class="whiteFilm"></div>
+            </div>
+            <div *ngIf="!moreList || moreList.length==0">No topics for these kind of events were found</div>
+            <div *ngIf="moreList && moreList.length>0">
+              <ul class="md-list md-list-addon gmap_list">
+                <li *ngFor="let moreTopic of moreList">
+                  <div class="md-list-addon-element">
+                    <span>{{ moreTopic.size | number }}</span>
+                    <!--<img class="md-user-image md-list-addon-avatar" src="assets/img/avatars/avatar_01_tn.png" alt="">-->
+                  </div>
+                  <div class="md-list-content">
+                    <span class="md-list-heading">{{ moreTopic.value }}</span>
+                    <!--<span class="uk-text-small uk-text-muted">Lockman, Pouros and Kilback</span>-->
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="uk-position-bottom-right" style="margin-bottom: 10px; margin-right: 10px"><a [routerLink]="['/repository/' + repository.id + '/events']">view more..</a></div>
+        </div>
+      </div>
+
+      <!--EVENTS - MISSING-->
+      <div class="uk-width-1-3@m">
+        <div class="md-card" style="min-height: 200px">
+          <div class="md-card-toolbar">
+            <h3 class="md-card-toolbar-heading-text">
+              Events - MISSING
+            </h3>
+          </div>
+          <div class="md-card-content">
+            <div *ngIf="errorTopicsMessage" class="uk-alert uk-alert-danger">{{ errorTopicsMessage }}</div>
+            <div *ngIf="loadingTopicsMessage" class="loading-big">
+              <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">
+                {{ loadingTopicsMessage }}
+              </div>
+              <div class="whiteFilm"></div>
+            </div>
+            <div *ngIf="!missingList || missingList.length==0">No topics for these kind of events were found</div>
+            <div *ngIf="missingList && missingList.length>0">
+              <ul class="md-list md-list-addon gmap_list">
+                <li *ngFor="let missingTopic of missingList">
+                  <div class="md-list-addon-element">
+                    <span>{{ missingTopic.size | number }}</span>
+                    <!--<img class="md-user-image md-list-addon-avatar" src="assets/img/avatars/avatar_01_tn.png" alt="">-->
+                  </div>
+                  <div class="md-list-content">
+                    <span class="md-list-heading">{{ missingTopic.value }}</span>
+                    <!--<span class="uk-text-small uk-text-muted">Lockman, Pouros and Kilback</span>-->
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="uk-position-bottom-right" style="margin-bottom: 10px; margin-right: 10px"><a [routerLink]="['/repository/' + repository.id + '/events']">view more..</a></div>
+        </div>
+      </div>
+
+      <!--NOTIFICATIONS-->
+      <div class="uk-width-1-3@m">
+        <div class="md-card" style="min-height: 200px">
+          <div class="md-card-toolbar">
+            <h3 class="md-card-toolbar-heading-text">
+              Notifications
+            </h3>
+          </div>
+          <div class="md-card-content">
+            <div *ngIf="errorSubscriptionsMessage" class="uk-alert uk-alert-danger">{{ errorSubscriptionsMessage }}</div>
+            <div *ngIf="loadingSubscriptionsMessage" class="loading-big">
+              <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">
+                {{ loadingSubscriptionsMessage }}
+              </div>
+              <div class="whiteFilm"></div>
+            </div>
+            <div *ngIf="!brokerSummary || !brokerSummary.userSubs">No notifications were found</div>
+            <div *ngIf="brokerSummary && brokerSummary.userSubs">
+              <ul class="md-list md-list-addon gmap_list">
+                <li *ngFor="let sub of brokerSummary.userSubs[repository.officialName]">
+                  <div class="md-list-addon-element">
+                    <span>{{ sub.count | number }}</span>
+                    <!--<img class="md-user-image md-list-addon-avatar" src="assets/img/avatars/avatar_01_tn.png" alt="">-->
+                  </div>
+                  <div class="md-list-content">
+                    <span class="md-list-heading">{{ sub.topic }}</span>
+                    <!--<span class="uk-text-small uk-text-muted">Lockman, Pouros and Kilback</span>-->
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="uk-position-bottom-right" style="margin-bottom: 10px; margin-right: 10px"><a [routerLink]="['/content/notifications']">view more..</a></div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+
+
+
+</div>

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

@@ -0,0 +1,296 @@
+import { Component, OnInit } from '@angular/core';
+import { AuthenticationService } from '../../../services/authentication.service';
+import { RepositoryService } from '../../../services/repository.service';
+import {
+  AggregationDetails, BrokerSummary, BrowseEntry, CollectionMonitorSummary,
+  MetricsInfo, PiwikInfo,
+  Repository, StoredJob, UsageSummary
+} from '../../../domain/typeScriptClasses';
+import {
+  loadingAggregationHistory, loadingAggregationHistoryError, loadingMetrics,
+  loadingMetricsError, loadingSubscriptions, loadingTopics, loadingTopicsError,
+  noAggregationHistory, noSubscriptionsFound, noTopicsFound,
+  loadingJobSummary, loadingJobSummaryError
+} from '../../../domain/shared-messages';
+import {DashboardService} from '../../../services/dashboard.service';
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
+import {PiwikService} from '../../../services/piwik.service';
+import {ValidatorService} from '../../../services/validator.service';
+import {ActivatedRoute} from "@angular/router";
+import {SharedService} from "../../../services/shared.service";
+
+@Component ({
+  selector: 'app-dashboard',
+  templateUrl: 'dashboard.component.html'
+})
+
+export class DashboardComponent implements OnInit {
+
+  repository: Repository = null;
+  errorMessage: string;
+  loadingMessage: string;
+
+  constructor(private authService: AuthenticationService,
+              private repositoryService: RepositoryService,
+              private sharedService: SharedService,
+              private dashboardService: DashboardService,
+              private piwikService: PiwikService,
+              private validatorService: ValidatorService,
+              private sanitizer: DomSanitizer,
+              private route: ActivatedRoute) {
+  }
+
+  loading: boolean = true;
+
+
+  // Aggregations
+  collectionMonitorSummary: CollectionMonitorSummary;
+  lastIndexedVersion: AggregationDetails;
+  latestAggregations: AggregationDetails[] = [];
+  errorAggregationsMessage: string;
+  noAggregations: string;
+  loadingAggregationsMessage: string;
+
+  // Usage Statistics
+  usageSummary: UsageSummary;
+  piwik: PiwikInfo;
+  repoMetrics: MetricsInfo;
+  errorUsageStatsMessage: string;
+  noUsageStats: string;
+  loadingUsageStatsMessage: string;
+  pageViews = '--';
+  totalViews = '--';
+  totalDownloads = '--';
+  viewsUrl: SafeResourceUrl;
+  downloadsUrl: SafeResourceUrl;
+  shortRepositoryId: string;
+  currentDate: string;
+
+  // Broker
+  brokerSummary: BrokerSummary;
+  errorTopicsMessage: string;
+  noTopics: string;
+  loadingTopicsMessage: string;
+  errorSubscriptionsMessage: string;
+  noSubscriptions: string;
+  loadingSubscriptionsMessage: string;
+  totalNumberOfEvents: number = 0;
+  moreList: BrowseEntry[] = [];
+  missingList: BrowseEntry[] = [];
+  totalMore: number = 0;
+  totalMissing: number = 0;
+
+  // Validation
+  storedJob: StoredJob[] = [];
+  noValidationsMessage: string;
+  errorValidationsMessage: string;
+  loadingJobSummaryMessage: string;
+
+  ngOnInit() {
+
+    if(this.sharedService.getRepository()) {
+      this.repository = this.sharedService.getRepository();
+      this.getSelectedRepositorySummaryInfo(this.repository);
+    }
+
+    this.sharedService.repository$.subscribe(
+      r => {
+        this.repository = r;
+        // console.log("RepositoryID: ", this.repository.id);
+        this.getSelectedRepositorySummaryInfo(this.repository);
+      }
+    );
+
+    let body = document.getElementsByTagName('body')[0];
+    body.classList.remove("top_bar_active");
+    body.classList.remove("page_heading_active");
+    body.classList.remove("landing");
+    body.classList.add("dashboard");
+
+    const currentTime = new Date();
+    this.currentDate = currentTime.getFullYear() + '-' + (currentTime.getMonth() + 1);
+  }
+
+  getSelectedRepositorySummaryInfo(repository: Repository) {
+
+    // Aggregations
+    this.loadingAggregationsMessage = loadingAggregationHistory;
+    this.latestAggregations = [];
+    this.lastIndexedVersion = null;
+    this.dashboardService.getCollectionMonitorSummary(repository.id, 5).subscribe(
+      collectionMonitorSummary => this.getCollectionMonitorSummary(collectionMonitorSummary),
+      error => {
+        this.loadingAggregationsMessage = '';
+        this.errorAggregationsMessage = loadingAggregationHistoryError;
+      },
+      () => {
+        this.loadingAggregationsMessage = '';
+        this.errorAggregationsMessage = '';
+      }
+    );
+
+    // Usage Statistics
+    this.loadingUsageStatsMessage = loadingMetrics;
+    this.usageSummary = null;
+    this.piwik = null;
+    this.repoMetrics = null;
+    this.pageViews = '--';
+    this.totalViews = '--';
+    this.totalDownloads = '--';
+    this.viewsUrl = null;
+    this.downloadsUrl = null;
+    this.shortRepositoryId = null;
+    this.dashboardService.getUsageSummary(repository.id).subscribe(
+      usageSummary => this.getUsageSummary(usageSummary),
+      error => {
+        this.loadingUsageStatsMessage = '';
+        this.errorUsageStatsMessage = loadingMetricsError;
+        console.log(error);
+      } ,
+      () => {
+        this.shortRepositoryId = repository.id.replace(/_/g, '').replace('::', ':');
+        this.loadingUsageStatsMessage = '';
+        this.errorUsageStatsMessage = '';
+      }
+    );
+
+    // Broker
+    this.loadingTopicsMessage = loadingTopics;
+    this.loadingSubscriptionsMessage = loadingSubscriptions;
+    this.brokerSummary = null;
+    this.totalNumberOfEvents = 0;
+    this.moreList = [];
+    this.missingList = [];
+    this.totalMore = 0;
+    this.totalMissing = 0;
+    this.dashboardService.getBrokerSummary(this.getCorrectName()).subscribe(
+      brokerSummary => this.getBrokerSummary(brokerSummary),
+      error => {
+        this.loadingTopicsMessage = '';
+        this.loadingSubscriptionsMessage = '';
+        this.errorTopicsMessage = loadingTopicsError;
+        this.errorSubscriptionsMessage = 'Failed to load the subscriptions for your datasource';
+        console.log(error);
+      },
+      () => {
+        this.loadingTopicsMessage = '';
+        this.loadingSubscriptionsMessage = '';
+        this.errorTopicsMessage = '';
+        this.errorSubscriptionsMessage = '';
+      }
+    );
+
+    // Validation
+    this.loadingJobSummaryMessage = loadingJobSummary;
+    this.noValidationsMessage = '';
+    this.errorValidationsMessage = '';
+    this.validatorService.getValidationSummary(repository.id).subscribe(
+      validationSummary => {
+        this.storedJob = validationSummary;
+        console.log(validationSummary);
+      },
+      error => {
+        this.errorValidationsMessage = loadingJobSummaryError;
+        this.loadingJobSummaryMessage = '';
+        console.log(error);
+      } ,
+      () => {
+        this.getValidationSummary(this.storedJob);
+        this.loadingJobSummaryMessage = '';
+      }
+    );
+  }
+
+  getCollectionMonitorSummary(collectionMonitorSummary: CollectionMonitorSummary) {
+
+    this.latestAggregations = collectionMonitorSummary.aggregationDetails;
+    this.lastIndexedVersion = collectionMonitorSummary.lastIndexedVersion;
+
+    if ( !this.latestAggregations || (this.latestAggregations.length === 0) ) {
+      this.noAggregations = noAggregationHistory;
+    }
+  }
+
+  getBrokerSummary(brokerSummary: BrokerSummary) {
+
+    this.noSubscriptions = '';
+    this.noTopics = '';
+
+    this.brokerSummary = brokerSummary;
+
+    if(this.brokerSummary.userSubs==null)
+      this.noSubscriptions = noTopicsFound;
+    if(this.brokerSummary.topicsForDatasource==null)
+      this.noTopics = noSubscriptionsFound;
+
+    this.totalNumberOfEvents = 0;
+    this.totalMore = 0;
+    this.totalMissing = 0;
+    if(brokerSummary.topicsForDatasource) {
+      for (let browseEntry of brokerSummary.topicsForDatasource) {
+        this.totalNumberOfEvents += browseEntry.size;
+        if (browseEntry.value.startsWith('ENRICH/MORE')) {
+          this.totalMore += browseEntry.size;
+          this.moreList.push(browseEntry);
+        } else if (browseEntry.value.startsWith('ENRICH/MISSING')) {
+          this.totalMissing += browseEntry.size;
+          this.missingList.push(browseEntry);
+        }
+      }
+    }
+
+
+  }
+
+  getUsageSummary(usageSummary: UsageSummary) {
+
+    this.noUsageStats = '';
+
+    if (usageSummary.piwikInfo == null) {
+      this.noUsageStats = 'This repository does not have our Usage Statistics service enabled yet';
+    } else {
+      this.usageSummary = usageSummary;
+      this.piwik = usageSummary.piwikInfo;
+      this.repoMetrics = usageSummary.metricsInfo;
+      if (this.repoMetrics.metricsNumbers.pageviews) {
+        this.pageViews = this.repoMetrics.metricsNumbers.pageviews;
+      }
+      if (this.repoMetrics.metricsNumbers.total_views) {
+        this.totalViews = this.repoMetrics.metricsNumbers.total_views;
+      }
+      if (this.repoMetrics.metricsNumbers.total_downloads) {
+        this.totalDownloads = this.repoMetrics.metricsNumbers.total_downloads;
+      }
+      this.getViewsUrl();
+      this.getDownloadsUrl();
+    }
+  }
+
+  getValidationSummary(validationSummary: StoredJob[]) {
+    if (validationSummary == null) { this.noValidationsMessage = 'There is no validation history for this repository at the moment'; }
+  }
+
+  getViewsUrl () {
+
+    let encodedURL = encodeURIComponent('{"library":"HighCharts","chartDescription":{"queries":[{"name":"Monthly views","type":"line","query":{"name":"usagestats.views.monthly", "parameters":["' + this.piwik.openaireId + '"], "profile":"OpenAIRE All-inclusive" }}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":""},"subtitle":{},"yAxis":{"title":{"text":"Monthly views"}},"xAxis":{"title":{}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":false},"plotOptions":{"series":{"dataLabels":{"enabled":false}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":true,"text":"Created by OpenAIRE via HighCharts"}}}');
+    this.viewsUrl = this.sanitizer.bypassSecurityTrustResourceUrl(`${this.repoMetrics.diagramsBaseURL}chart?json=${encodedURL}`);
+  }
+
+  getDownloadsUrl () {
+
+    let encodedURL = encodeURIComponent('{"library":"HighCharts","chartDescription":{"queries":[{"name":"Monthly downloads","type":"line","query":{"name":"usagestats.downloads.monthly", "parameters":["' + this.piwik.openaireId + '"], "profile":"OpenAIRE All-inclusive" }}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":""},"subtitle":{},"yAxis":{"title":{"text":"Monthly views"}},"xAxis":{"title":{}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":false},"plotOptions":{"series":{"dataLabels":{"enabled":false}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":true,"text":"Created by OpenAIRE via HighCharts"}}}');
+    this.downloadsUrl = this.sanitizer.bypassSecurityTrustResourceUrl(`${this.repoMetrics.diagramsBaseURL}chart?json=${encodedURL}`);
+  }
+
+  getCorrectName() {
+    const temp = this.repository.officialName.split('|');
+    let correctName = temp[0];
+    let repoName = temp[0];
+    for (let i = 1; i < temp.length; i++) {
+      correctName += `/${temp[i]}`;
+      repoName += ` | ${temp[i]}`;
+    }
+
+    return correctName;
+  }
+}

src/app/pages/repository/events/content-events-of-repo-eventslist.component.html

@@ -0,0 +1,950 @@
+<!--<div class="uk-sticky-placeholder" style="height: 81px; margin: 0px;">-->
+  <!--<div id="page_heading" style="position: fixed; top: 48px; width: 1440px;" class="uk-sticky-init uk-active">-->
+    <!--&lt;!&ndash;<div id="page_heading"  data-uk-sticky="{ top: 48, media: 960 }" style="position: fixed; top: 48px; width: 1440px;" class="uk-sticky-init uk-active">&ndash;&gt;-->
+    <!--<div class="heading_actions">-->
+      <!--<button id="subscribe" type="button" class="uk-button uk-button-success" (click)="showSubscriptionModal()">Subscribe to these events</button>-->
+    <!--</div>-->
+    <!--<h1>{{ repoName }}</h1>-->
+    <!--<span class="uk-text-upper uk-text-small">{{ topic }}</span>-->
+  <!--</div>-->
+<!--</div>-->
+
+<div id="page_content_inner" class="uk-margin-medium-left uk-margin-medium-right uk-margin-top">
+
+  <div class="uk-margin-bottom">
+    <h2 class="heading_b uk-margin-bottom uk-inline">{{ topic }}</h2>
+
+    <div class="heading_actions uk-float-right repositoryAdminActions">
+      <button class="uk-button uk-button-link" (click)="showSubscriptionModal()">
+        <img src="../../../../assets/icons/noun_subscribe_2322541.svg" width="20">
+        Subscribe to these events
+      </button>
+      <!--<button id="subscribe" type="button" class="uk-button uk-button-success" (click)="showSubscriptionModal()">Subscribe to these events</button>-->
+    </div>
+  </div>
+
+  <!-- TOP HELP CONTENT -->
+  <help-content #topHelperContent [position]="'top'"
+                [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
+  </help-content>
+
+  <div class="uk-grid">
+
+    <!-- LEFT HELP CONTENT -->
+    <aside-help-content #leftHelperContent [position]="'left'"
+                        [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+    </aside-help-content>
+
+    <!-- MIDDLE -->
+    <div class=" uk-width-expand@m">
+
+      <div>
+        <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{errorMessage}}</div>
+        <div *ngIf="successMessage" class="uk-alert uk-alert-success">{{successMessage}}</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="noEvents" class="uk-alert">{{ noEvents }}</div>
+        <div *ngIf="!noEvents && !loadingMessage && !errorMessage && eventsPage && eventsPage.totalPages>0" class="events-results">
+
+          <!-- RESTORE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE -->
+          <!--<span>Showing {{(eventsPage.currPage*10)+1 }}-{{ ( (eventsPage.total < 10) || (eventsPage.total < (eventsPage.currPage+1)*10) ) ? (eventsPage.total) : (eventsPage.currPage+1)*10 }} of {{ eventsPage.total }} results</span>-->
+
+          <!-- DELETE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE -->
+          <!--<div class="uk-margin-bottom">Showing {{(currentPage*10)+1 }}-{{ ( (eventsPage.total < 10) || (eventsPage.total < (currentPage+1)*10) ) ? (eventsPage.total) : (currentPage+1)*10 }} of {{ eventsPage.total }} results</div>-->
+
+          <div class="uk-alert uk-alert-info">
+            This is a preview of the top 100 events generated for this topic. If you are interested to receive the full list, please subscribe to these events and then be notified about the new enrichment events for your data source.
+          </div>
+
+          <div style="display: flex;justify-content: space-between;">
+
+            <div class="resultsInfo" style="margin-top: auto;">
+              <span class="number">{{eventsPage.total}}</span> RESULTS, PAGE <span class="number">{{(currentPage)+1}}</span> OF <span class="number">{{ eventsPage.totalPages }}</span>
+            </div>
+
+            <div class="uk-inline">
+              <ul class="uk-pagination" uk-margin>
+                <li><a (click)="goToPreviousPage()"><span uk-pagination-previous></span></a></li>
+                <li class="uk-active"><span>{{ (eventsPage.totalPages > 0) ? currentPage+1 : 0 }}</span></li>
+                <li><a (click)="goToNextPage()"><span uk-pagination-next></span></a></li>
+              </ul>
+            </div>
+
+          </div>
+
+
+          <hr class="adminResultsHeader">
+
+
+          <!--<div *ngFor="let event of eventsPage.values; let item_i = index" class="md-card md-card-hover md-card-overlay {{ (selectedItemIndex == item_i) ? 'md-card-overlay-active' : '' }}">-->
+          <div *ngFor="let event of eventsPage.values; let item_i = index" class="md-card md-card-hover eventCard">
+            <div class="md-card-content large-padding">
+
+              <div *ngIf="event.result.originalId" class="uk-text-meta">ID: {{event.result.originalId}}</div>
+
+              <div *ngIf="event.result.titles && event.result.titles.length>0">
+                <div class="repositoryCardHeader uk-margin-bottom uk-margin-small-top">
+                  <h4>{{ event.result.titles[0] }}</h4>
+                </div>
+              </div>
+
+              <ng-container *ngIf="event.highlight.creators && event.highlight.creators.length>0">
+
+                <div class="small-content">
+                  <span class="uk-badge uk-badge-success uk-margin-small-right">{{event.highlight.creators.length}} author ORCID(s) added</span>
+                  <span class="mute-title">FROM: </span>
+                  <ng-container *ngIf="event.provenance.url">
+                    <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
+                    <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
+                  </ng-container>
+                  <ng-container *ngIf="!event.provenance.url">
+                    <span>{{ event.provenance.repositoryName }}</span>
+                  </ng-container>
+                </div>
+
+                <div class="uk-margin-top uk-margin-medium-bottom small-content">
+                  <div *ngFor="let author of event.highlight.creators; let p_index = index" class="uk-margin-small-bottom">
+                    <span class="highlightIndex">{{(p_index + 1)}}. </span>
+                    <span>{{ author.fullname }} <b>&nbsp;&nbsp;({{ author.orcid }})&nbsp;&nbsp;</b></span>
+                  </div>
+                </div>
+
+              </ng-container>
+
+              <ng-container *ngIf="event.highlight.pids && event.highlight.pids.length>0">
+
+                <div class="small-content">
+                  <span class="uk-badge uk-badge-success uk-margin-small-right">{{event.highlight.pids.length}} PID(s) added</span>
+                  <span class="mute-title">FROM: </span>
+                  <ng-container *ngIf="event.provenance.url">
+                    <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
+                    <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
+                  </ng-container>
+                  <ng-container *ngIf="!event.provenance.url">
+                    <span>{{ event.provenance.repositoryName }}</span>
+                  </ng-container>
+                </div>
+
+                <div class="uk-margin-top uk-margin-medium-bottom small-content">
+                  <div *ngFor="let pid of event.highlight.pids; let p_index = index" class="uk-margin-small-bottom">
+                    <span class="highlightIndex">{{(p_index + 1)}}. </span>
+                    <span>{{ pid.value }} <b>&nbsp;&nbsp;({{ pid.type }})&nbsp;&nbsp;</b></span>
+                  </div>
+                </div>
+
+              </ng-container>
+
+              <ng-container *ngIf="event.highlight.abstracts && event.highlight.abstracts.length>0">
+
+                <div class="small-content">
+                  <span class="uk-badge uk-badge-success uk-margin-small-right">{{event.highlight.abstracts.length}} Abstract(s) added</span>
+                  <span class="mute-title">FROM: </span>
+                  <ng-container *ngIf="event.provenance.url">
+                    <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
+                    <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
+                  </ng-container>
+                  <ng-container *ngIf="!event.provenance.url">
+                    <span>{{ event.provenance.repositoryName }}</span>
+                  </ng-container>
+                </div>
+
+                <div class="uk-margin-top uk-margin-medium-bottom small-content">
+                  <div *ngFor="let abs of event.highlight.abstracts; let a_index = index" class="uk-margin-small-bottom">
+                    <span class="highlightIndex">{{(a_index + 1)}}. </span>
+                    <span class=""><read-more-text [text]="abs" [maxHeight]="40"></read-more-text></span>
+                  </div>
+                </div>
+
+              </ng-container>
+
+              <ng-container *ngIf="event.highlight.projects && event.highlight.projects.length>0">
+
+                <div class="small-content">
+                  <span class="uk-badge uk-badge-success uk-margin-small-right">{{event.highlight.projects.length}} Project(s) added</span>
+                  <span class="mute-title">FROM: </span>
+                  <ng-container *ngIf="event.provenance.url">
+                    <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
+                    <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
+                  </ng-container>
+                  <ng-container *ngIf="!event.provenance.url">
+                    <span>{{ event.provenance.repositoryName }}</span>
+                  </ng-container>
+                </div>
+
+                <div class="uk-margin-top uk-margin-medium-bottom small-content">
+                  <div *ngFor="let proj of event.highlight.projects; let p_index = index" class="uk-margin-small-bottom">
+                    <span class="highlightIndex">{{(p_index + 1)}}. </span>
+                    <span *ngIf="proj.acronym && proj.acronym !==''">{{ proj.acronym }}</span>
+                    <span *ngIf="!proj.acronym || proj.acronym ===''">{{ proj.title }}</span>
+                    <span *ngIf="(proj.funder && proj.funder !=='') ||
+                                 (proj.fundingProgram && proj.fundingProgram !=='')">
+                      (<span *ngIf="proj.funder && proj.funder !==''">{{ proj.funder }} </span>
+                      <span *ngIf="(proj.funder && proj.funder !=='') &&
+                                   (proj.fundingProgram && proj.fundingProgram !=='')">/</span>
+                      <span *ngIf="proj.fundingProgram && proj.fundingProgram !==''">{{ proj.fundingProgram }}</span>)
+                    </span>
+                  </div>
+                </div>
+
+              </ng-container>
+
+              <ng-container *ngIf="event.highlight.subjects && event.highlight.subjects.length>0">
+
+                <div class="small-content">
+                  <span class="uk-badge uk-badge-success uk-margin-small-right">{{event.highlight.subjects.length}} Subject(s) added</span>
+                  <span class="mute-title">FROM: </span>
+                  <ng-container *ngIf="event.provenance.url">
+                    <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
+                    <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
+                  </ng-container>
+                  <ng-container *ngIf="!event.provenance.url">
+                    <span>{{ event.provenance.repositoryName }}</span>
+                  </ng-container>
+                </div>
+
+                <div class="uk-margin-top uk-margin-medium-bottom small-content">
+                  <div *ngFor="let subj of event.highlight.subjects; let s_index = index" class="uk-margin-small-bottom">
+                    <span class="highlightIndex">{{(s_index + 1)}}. </span>
+                    <span>{{ subj.value }}</span>
+                  </div>
+                </div>
+
+              </ng-container>
+
+              <ng-container *ngIf="event.highlight.publications && event.highlight.publications.length>0">
+
+                <div class="small-content">
+                  <span class="uk-badge uk-badge-success uk-margin-small-right">{{event.highlight.publications.length}} Publications(s) added</span>
+                  <span class="mute-title">FROM: </span>
+                  <ng-container *ngIf="event.provenance.url">
+                    <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
+                    <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
+                  </ng-container>
+                  <ng-container *ngIf="!event.provenance.url">
+                    <span>{{ event.provenance.repositoryName }}</span>
+                  </ng-container>
+                </div>
+
+                <div class="uk-margin-top uk-margin-medium-bottom small-content">
+                  <div *ngFor="let pub of event.highlight.publications; let p_index = index" class="uk-margin-small-bottom">
+                    <span class="highlightIndex">{{(p_index + 1)}}. </span>
+                    <span>{{ pub.title }} (ID: {{pub.originalId}})</span>
+                  </div>
+                </div>
+
+              </ng-container>
+
+              <ng-container *ngIf="event.highlight.datasets && event.highlight.datasets.length>0">
+
+                <div class="small-content">
+                  <span class="uk-badge uk-badge-success uk-margin-small-right">{{event.highlight.datasets.length}} Dataset(s) added</span>
+                  <span class="mute-title">FROM: </span>
+                  <ng-container *ngIf="event.provenance.url">
+                    <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
+                    <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
+                  </ng-container>
+                  <ng-container *ngIf="!event.provenance.url">
+                    <span>{{ event.provenance.repositoryName }}</span>
+                  </ng-container>
+                </div>
+
+                <div class="uk-margin-top uk-margin-medium-bottom small-content">
+                  <div *ngFor="let dataset of event.highlight.datasets; let d_index = index" class="uk-margin-small-bottom">
+                    <span class="highlightIndex">{{(d_index + 1)}}. </span>
+                    <span>{{ dataset.title }} <span *ngIf="dataset.pids && dataset.pids.length>0">({{dataset.pids[0].type}}: {{dataset.pids[0].value}})</span></span>
+                  </div>
+                </div>
+
+              </ng-container>
+
+              <ng-container *ngIf="event.highlight.softwares && event.highlight.softwares.length>0">
+
+                <div class="small-content">
+                  <span class="uk-badge uk-badge-success uk-margin-small-right">{{event.highlight.softwares.length}} Software(s) added</span>
+                  <span class="mute-title">FROM: </span>
+                  <ng-container *ngIf="event.provenance.url">
+                    <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
+                    <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
+                  </ng-container>
+                  <ng-container *ngIf="!event.provenance.url">
+                    <span>{{ event.provenance.repositoryName }}</span>
+                  </ng-container>
+                </div>
+
+                <div class="uk-margin-top uk-margin-medium-bottom small-content">
+                  <div *ngFor="let software of event.highlight.softwares; let s_index = index" class="uk-margin-small-bottom">
+                    <span class="highlightIndex">{{(s_index + 1)}}. </span>
+                    <span>{{ software.name }}</span>
+                    <span *ngIf="software.description"> <br> {{ software.description }}</span>
+                    <span><br><a href="{{ software.landingPage }}" target="_blank">{{ software.landingPage }}</a></span>
+                  </div>
+                </div>
+
+              </ng-container>
+
+              <ng-container *ngIf="event.highlight.instances && event.highlight.instances.length>0">
+
+                <div class="small-content">
+                  <span class="uk-badge uk-badge-success uk-margin-small-right">{{event.highlight.instances.length}} OA version(s) added</span>
+                  <span class="mute-title">FROM: </span>
+                  <ng-container *ngIf="event.provenance.url">
+                    <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
+                    <span *ngIf="event.provenance.id"> (ID: {{ event.provenance.id }})</span>
+                  </ng-container>
+                  <ng-container *ngIf="!event.provenance.url">
+                    <span>{{ event.provenance.repositoryName }}</span>
+                  </ng-container>
+                </div>
+
+                <div class="uk-margin-top uk-margin-medium-bottom small-content">
+                  <div *ngFor="let l of event.highlight.instances; let l_index = index" class="uk-margin-small-bottom">
+                    <span class="highlightIndex">{{(l_index + 1)}}. </span>
+                    <span>
+                    {{ l.license }}&nbsp;&nbsp;<b>{{ l.hostedby }}</b>
+                    <a href="{{ l.url }}" target="_blank" class="uk-margin-left">{{ l.url }}</a>
+                  </span>
+                  </div>
+                </div>
+
+              </ng-container>
+
+              <div *ngIf="selectedItemIndex == item_i" class="uk-text-meta uk-text-center">
+                <a (click)="showLess(item_i)">Show less <i class="fas fa-angle-up uk-margin-small-left"></i></a>
+              </div>
+
+              <div *ngIf="selectedItemIndex != item_i" class="uk-text-meta uk-text-center">
+                <a (click)="showMore(item_i)">Show more <i class="fas fa-angle-down uk-margin-small-left"></i></a>
+              </div>
+
+              <ng-container *ngIf="selectedItemIndex == item_i">
+                <hr>
+
+                <!--AUTHORS-->
+                <div *ngIf="event.result.creators && event.result.creators.length>0" class="uk-margin-small-bottom">
+                  <span class="mute-title">Author(s): </span>
+                  <span *ngFor="let auth of event.result.creators; let au_index = index" class="small-content">
+                    <span *ngIf="au_index>0"> | </span>
+                    <span>{{ auth.fullname }} <b>&nbsp;({{ auth.orcid }})&nbsp;&nbsp;</b></span>
+                  </span>
+                </div>
+
+                <!--PIDs-->
+                <div *ngIf="event.result.pids && event.result.pids.length>0" class="uk-margin-small-bottom">
+                  <span class="mute-title">PID(s): </span>
+                  <span *ngFor="let pid of event.result.pids; let p_index = index" class="small-content">
+                    <br *ngIf="p_index > 0">
+                    <span>{{ pid.value }} <b>&nbsp;&nbsp;({{ pid.type }})&nbsp;&nbsp;</b></span>
+                  </span>
+                </div>
+
+                <!--Abstracts-->
+                <div *ngIf="event.result.abstracts && event.result.abstracts.length>0" class="uk-margin-small-bottom">
+                  <span class="mute-title">Abstract(s): </span>
+                  <span *ngFor="let abs of event.result.abstracts; let a_index = index" class="small-content">
+                    <br *ngIf="a_index > 0">
+                    <span>
+                      <read-more-text [text]="abs" [maxHeight]="83"></read-more-text>
+                    </span>
+                  </span>
+                </div>
+
+                <!--Projects/Relations-->
+                <div *ngIf="event.result.projects && event.result.projects.length>0" class="uk-margin-small-bottom">
+                  <span class="mute-title">Project(s)/Relation(s): </span>
+                  <span *ngFor="let proj of event.result.projects; let p_index = index" class="small-content">
+                    <br *ngIf="p_index > 0">
+                    <span *ngIf="proj.acronym && proj.acronym !==''">{{ proj.acronym }}</span>
+                    <span *ngIf="!proj.acronym || proj.acronym ===''">{{ proj.title }}</span>
+                    <span *ngIf="(proj.funder && proj.funder !=='') ||
+                                 (proj.fundingProgram && proj.fundingProgram !=='')">
+                      (<span *ngIf="proj.funder && proj.funder !==''">{{ proj.funder }} </span>
+                      <span *ngIf="(proj.funder && proj.funder !=='') &&
+                                   (proj.fundingProgram && proj.fundingProgram !=='')">/</span>
+                      <span *ngIf="proj.fundingProgram && proj.fundingProgram !==''">{{ proj.fundingProgram }}</span>)
+                    </span>
+                  </span>
+                </div>
+
+                <!--Subjects-->
+                <div *ngIf="event.result.subjects && event.result.subjects.length>0" class="uk-margin-small-bottom">
+                  <span class="mute-title">Subject(s): </span>
+                  <span *ngFor="let subj of event.result.subjects; let s_index = index" class="small-content">
+                    <span *ngIf="s_index>0"> | </span>
+                    <span>{{ subj.value }}</span>
+                  </span>
+                </div>
+
+                <!--Publications-->
+                <div *ngIf="event.result.publications && event.result.publications.length>0" class="uk-margin-small-bottom">
+                  <span *ngIf="this.topic.includes('PUBLICATION')" class="mute-title">{{this.lastTopicEntry}} Publication(s): </span>
+                  <span *ngIf="!this.topic.includes('PUBLICATION')" class="mute-title">Publication(s): </span>
+                  <span *ngFor="let pub of event.result.publications; let p_index = index" class="small-content">
+                    <br *ngIf="p_index > 0">
+                    <span>{{ pub.title }} (ID: {{pub.originalId}})</span>
+                  </span>
+                </div>
+
+                <!--Datasets-->
+                <div *ngIf="event.result.datasets && event.result.datasets.length>0" class="uk-margin-small-bottom">
+                  <span *ngIf="this.topic.includes('DATASET')" class="mute-title">{{this.lastTopicEntry}} Dataset(s): </span>
+                  <span *ngIf="!this.topic.includes('DATASET')" class="mute-title">Dataset(s): </span>
+                  <span *ngFor="let dataset of event.result.datasets; let d_index = index" class="small-content">
+                    <br *ngIf="d_index > 0">
+                    <span>{{ dataset.titles[0] }} <span *ngIf="dataset.pids && dataset.pids.length>0">({{dataset.pids[0].type}}: {{dataset.pids[0].value}})</span></span>
+                  </span>
+                </div>
+
+                <!--Software-->
+                <div *ngIf="event.result.softwares && event.result.softwares.length>0" class="uk-margin-small-bottom">
+                  <span *ngIf="this.topic.includes('SOFTWARE')" class="mute-title">{{this.lastTopicEntry}} Software(s): </span>
+                  <span *ngIf="!this.topic.includes('SOFTWARE')" class="mute-title">Software(s): </span>
+                  <span *ngFor="let software of event.result.softwares; let s_index = index" class="small-content">
+                    <br *ngIf="s_index > 0">
+                    <span>{{ software.name }}</span>
+                    <span *ngIf="software.description"> <br> {{ software.description }}</span>
+                    <span><br><a href="{{ software.landingPage }}" target="_blank">{{ software.landingPage }}</a></span>
+                    <span *ngIf="software.landingPage !== software.repository"><br><a href="{{ software.repository }}" target="_blank">{{ software.repository }}</a></span>
+                  </span>
+                </div>
+
+                <!--Publication Date-->
+                <div *ngIf="event.result.publicationdate && event.result.publicationdate.length>0" class="uk-margin-small-bottom">
+                  <span class="mute-title">Publication date(s): </span>
+                  <span class="small-content">
+                    {{ event.result.publicationdate }}
+                  </span>
+                </div>
+
+                <!--Rights-->
+                <div *ngIf="event.result.instances && event.result.instances.length>0" class="uk-margin-small-bottom">
+                  <span class="mute-title">Rights: </span>
+                  <span *ngFor="let l of event.result.instances; let l_index = index" class="small-content">
+                    <br *ngIf="l_index > 0">
+                    <span>
+                      {{ l.license }}&nbsp;&nbsp;<b>{{ l.hostedby }}</b> - <a class="" href="{{ l.url }}" target="_blank">{{ l.url }}</a>
+                    </span>
+                  </span>
+                </div>
+
+              </ng-container>
+
+            </div>
+
+          </div>
+
+          <!-- BOTTOM PAGINATION LINKS -->
+          <ul class="uk-pagination uk-margin-top uk-flex-right" uk-margin>
+            <li><a (click)="goToPreviousPage()"><span uk-pagination-previous></span></a></li>
+            <li class="uk-active"><span>{{ (eventsPage.totalPages > 0) ? currentPage+1 : 0 }}</span></li>
+            <li><a (click)="goToNextPage()"><span uk-pagination-next></span></a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+
+    <!-- RIGHT HELP CONTENT -->
+    <aside-help-content #rightHelperContent [position]="'right'"
+                        [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+    </aside-help-content>
+
+  </div>
+
+  <!-- BOTTOM HELP CONTENT -->
+  <help-content #bottomHelperContent [position]="'bottom'"
+                [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
+  </help-content>
+
+</div>
+
+
+<div class="filter-overlay-toolbar uk-animation-scale-up ng-star-inserted">
+  <button class="uk-button filter-overlay-button" type="button" uk-toggle="target: #offcanvas-overlay">
+    <span class=""><i class="fas fa-filter"></i></span>
+  </button>
+</div>
+
+<div class="offcanvas-filters" id="offcanvas-overlay" uk-offcanvas="overlay: true">
+  <div class="uk-offcanvas-bar uk-light">
+
+    <button class="uk-offcanvas-close" type="button" uk-close></button>
+
+
+    <h4>Filters
+    <button type="button" (click)="updateQuery()" class="uk-button uk-button-link advancedSearch uk-margin-right uk-margin-medium-left">Apply<i class="fas fa-check uk-margin-small-left"></i></button>
+    <button type="reset" (click)="clearForm()" class="uk-button uk-button-link clearCriteria">Clear<i class="fas fa-times uk-margin-small-left"></i></button>
+    </h4>
+
+    <div [formGroup]="group" class="">
+      <div class="enrichContentAdvancedSearch">
+        <div role="form" class="uk-form-horizontal">
+          <div class="uk-form-horizontal uk-margin-bottom">
+            <div class="form-group">
+              <label class="control-label">Trust [{{group.get('trustMin').value}} - {{group.get('trustMax').value}}]</label><br>
+              <input type="range" min="0" max="1" step="0.05" formControlName="trustMin" class="uk-range"/>
+              <input type="range" min="0" max="1" step="0.05" formControlName="trustMax" class="uk-range"/>
+            </div>
+          </div>
+
+          <div class="uk-form-horizontal uk-margin-small-bottom">
+            <div data-dynamic-fields="field_template_b" dynamic-fields-counter="1">
+              <div formArrayName="eventTitles" class="uk-grid form_section" *ngFor="let title of eventTitleFormArray; let title_index = index; let last_title = last;">
+                <div [formGroupName]="title_index" class="uk-width-1-1 uk-margin-small-bottom">
+                  <div class="uk-input-group">
+                    <div class="md-input-wrapper md-input-filled">
+                      <label>Title</label>
+                      <input type="text" class="md-input label-fixed" formControlName="eventTitle">
+                      <span class="md-input-bar "></span>
+                    </div>
+                    <span *ngIf="last_title" class="uk-input-group-addon">
+                          <a (click)="addControl('eventTitles',titleDefinition)" class="btnSectionClone"><i class="material-icons md-24"></i></a>
+                        </span>
+                    <span *ngIf="!last_title" class="uk-input-group-addon">
+                          <a (click)="removeControl('eventTitles',title_index)" class="btnSectionRemove"><i class="material-icons md-24"></i></a>
+                        </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!--<div class="form-group">-->
+            <!--<label class="control-label" style="display: block;">Title</label>-->
+            <!--<div formArrayName="eventTitles" *ngFor="let title of eventTitleFormArray; let title_index = index">-->
+            <!--<div [formGroupName]="title_index">-->
+            <!--<input class="form-control inlineBlock" style="width:88%;" type="text" formControlName="eventTitle">-->
+            <!--<a class="inlineBlock deleteIcon" (click)="removeControl('eventTitles',title_index)"><i class="fa fa-remove"></i></a>-->
+            <!--</div>-->
+            <!--</div>-->
+            <!--<a (click)="addControl('eventTitles',titleDefinition)"><i class="fa fa-plus"></i> Add another</a>-->
+            <!--</div>-->
+          </div>
+          <div class="uk-form-horizontal uk-margin-small-bottom">
+            <div data-dynamic-fields="field_template_b" dynamic-fields-counter="1">
+              <div formArrayName="eventAuthors" class="uk-grid form_section" *ngFor="let author of eventAuthorFormArray; let author_index = index; let last_author = last;">
+                <div [formGroupName]="author_index" class="uk-width-1-1 uk-margin-small-bottom">
+                  <div class="uk-input-group">
+                    <div class="md-input-wrapper md-input-filled">
+                      <label>Author</label>
+                      <input type="text" class="md-input label-fixed" formControlName="eventAuthor">
+                      <span class="md-input-bar "></span>
+                    </div>
+                    <span *ngIf="last_author" class="uk-input-group-addon">
+                          <a (click)="addControl('eventAuthors',authorDefinition)" class="btnSectionClone"><i class="material-icons md-24"></i></a>
+                        </span>
+                    <span *ngIf="!last_author" class="uk-input-group-addon">
+                          <a (click)="removeControl('eventAuthors',author_index)" class="btnSectionRemove"><i class="material-icons md-24"></i></a>
+                        </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!--<div class="form-group">-->
+            <!--<label class="control-label" style="display: block;">Author</label>-->
+            <!--<div formArrayName="eventAuthors" *ngFor="let author of eventAuthorFormArray; let author_index = index">-->
+            <!--<div [formGroupName]="author_index">-->
+            <!--<input class="form-control inlineBlock" style="width:88%;" type="text" formControlName="eventAuthor">-->
+            <!--<a class="inlineBlock deleteIcon" (click)="removeControl('eventAuthors',author_index)"><i class="fa fa-remove"></i></a>-->
+            <!--</div>-->
+            <!--</div>-->
+            <!--<a (click)="addControl('eventAuthors', authorDefinition)"><i class="fa fa-plus"></i> Add another</a>-->
+            <!--</div>-->
+          </div>
+          <div class="uk-form-horizontal uk-margin-small-bottom">
+            <div data-dynamic-fields="field_template_b" dynamic-fields-counter="1">
+              <div formArrayName="eventSubjects" class="uk-grid form_section" *ngFor="let subject of eventSubjectsFormArray; let subject_index = index; let last_subject = last;">
+                <div [formGroupName]="subject_index" class="uk-width-1-1 uk-margin-small-bottom">
+                  <div class="uk-input-group">
+                    <div class="md-input-wrapper md-input-filled">
+                      <label>Subject</label>
+                      <input type="text" class="md-input label-fixed" formControlName="eventSubject">
+                      <span class="md-input-bar "></span>
+                    </div>
+                    <span *ngIf="last_subject" class="uk-input-group-addon">
+                          <a (click)="addControl('eventSubjects',subjectDefinition)" class="btnSectionClone"><i class="material-icons md-24"></i></a>
+                        </span>
+                    <span *ngIf="!last_subject" class="uk-input-group-addon">
+                          <a (click)="removeControl('eventSubjects',subject_index)" class="btnSectionRemove"><i class="material-icons md-24"></i></a>
+                        </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!--<div class="form-group">-->
+            <!--<label class="control-label" style="display: block;">Subject</label>-->
+            <!--<div formArrayName="eventSubjects" *ngFor="let subject of eventSubjectsFormArray; let subject_index = index">-->
+            <!--<div [formGroupName]="subject_index">-->
+            <!--<input class="form-control inlineBlock" style="width:88%;" type="text" formControlName="eventSubject">-->
+            <!--<a class="inlineBlock deleteIcon" (click)="removeControl('eventSubjects', subject_index)"><i class="fa fa-remove"></i></a>-->
+            <!--</div>-->
+            <!--</div>-->
+            <!--<a (click)="addControl('eventSubjects', subjectDefinition)"><i class="fa fa-plus"></i> Add another</a>-->
+            <!--</div>-->
+          </div>
+
+          <div>
+            <div class="uk-form-horizontal">
+              <div data-dynamic-fields="field_template_b" dynamic-fields-counter="1">
+                <div formArrayName="eventDateRanges" class="uk-grid form_section" *ngFor="let date of eventDateRangesFormArray; let date_index = index; let last_date = last;">
+                  <div [formGroupName]="date_index" class="uk-width-1-1 uk-margin-small-bottom">
+                    <div class="uk-input-group">
+                      <div class="md-input-wrapper md-input-filled">
+                        <label>Date From</label>
+                        <input type="text" class="md-input label-fixed" onfocus="(this.type='date')" formControlName="dateFrom">
+                        <span class="md-input-bar "></span>
+                      </div>
+                      <div class="md-input-wrapper md-input-filled">
+                        <label>Date To</label>
+                        <input type="text" class="md-input label-fixed" onfocus="(this.type='date')" formControlName="dateTo">
+                        <span class="md-input-bar "></span>
+                      </div>
+                      <span *ngIf="last_date" class="uk-input-group-addon">
+                            <a (click)="addControl('eventDateRanges',dateRangeDefinition)" class="btnSectionClone"><i class="material-icons md-24"></i></a>
+                          </span>
+                      <span *ngIf="!last_date" class="uk-input-group-addon">
+                          <a (click)="removeControl('eventDateRanges',date_index)" class="btnSectionRemove"><i class="material-icons md-24"></i></a>
+                        </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!--<div class="form-group">-->
+              <!--<label class="control-label" style="display: block;">Date</label>-->
+              <!--<div formArrayName="eventDateRanges" *ngFor="let date of eventDateRangesFormArray; let date_index = index">-->
+              <!--<div class="uk-form" style="position: relative;" [formGroupName]=date_index>-->
+              <!--<input class="form-control inlineBlock dateFrom" style="width:88%;"-->
+              <!--placeholder="From"-->
+              <!--type="text"-->
+              <!--onfocus="(this.type='date')"-->
+              <!--formControlName=dateFrom>-->
+              <!--<input class="form-control inlineBlock dateTo" style="width:88%;"-->
+              <!--placeholder="To"-->
+              <!--type="text"-->
+              <!--onfocus="(this.type='date')"-->
+              <!--formControlName=dateTo>-->
+              <!--<a class="inlineBlock deleteIcon" (click)="removeControl('eventDateRanges',date_index)"><i class="fa fa-remove" style=""></i></a>-->
+              <!--</div>-->
+              <!--</div>-->
+              <!--<a (click)="addControl('eventDateRanges', dateRangeDefinition)"><i class="fa fa-plus"></i> Add another</a>-->
+              <!--</div>-->
+            </div>
+          </div>
+          <!--<div role="form" class="form-horizontal">-->
+          <!--<div class="form-group">-->
+          <!--<div class="actionButtons">-->
+          <!--<button type="button" (click)="updateQuery()" class="uk-button uk-button-primary advancedSearch uk-margin-small-right">Apply</button>-->
+          <!--<button type="reset" (click)="clearForm()" class="uk-button uk-button-default clearCriteria">Clear</button>-->
+          <!--</div>-->
+          <!--</div>-->
+          <!--</div>-->
+        </div>
+      </div>
+
+      <!--<div class="enrichContentAdvancedSearch md-card sidemenu">-->
+        <!--<div class="md-card-toolbar">-->
+          <!--<div class="md-card-toolbar-actions">-->
+            <!--<button type="button" (click)="updateQuery()" class="uk-button uk-button-primary advancedSearch uk-margin-small-right">Apply</button>-->
+            <!--<button type="reset" (click)="clearForm()" class="uk-button uk-button-default clearCriteria">Clear</button>-->
+            <!--&lt;!&ndash;<a href="#" class="md-btn md-btn-small md-btn-flat">Button</a>&ndash;&gt;-->
+            <!--&lt;!&ndash;<a href="#" class="md-btn md-btn-small md-btn-flat md-btn-flat-primary">Button</a>&ndash;&gt;-->
+          <!--</div>-->
+          <!--<h3 class="md-card-toolbar-heading-text">-->
+            <!--Tweak and refine events-->
+          <!--</h3>-->
+        <!--</div>-->
+        <!--<div class="md-card-content">-->
+          <!--<div role="form" class="uk-form-horizontal">-->
+            <!--<div class="uk-form-horizontal uk-margin-bottom">-->
+              <!--<div class="form-group">-->
+                <!--<label class="control-label">Trust [{{group.get('trustMin').value}} - {{group.get('trustMax').value}}]</label><br>-->
+                <!--<input type="range" min="0" max="1" step="0.05" formControlName="trustMin" class="uk-range"/>-->
+                <!--<input type="range" min="0" max="1" step="0.05" formControlName="trustMax" class="uk-range"/>-->
+              <!--</div>-->
+            <!--</div>-->
+
+            <!--<div class="uk-form-horizontal uk-margin-small-bottom">-->
+              <!--<div data-dynamic-fields="field_template_b" dynamic-fields-counter="1">-->
+                <!--<div formArrayName="eventTitles" class="uk-grid form_section" *ngFor="let title of eventTitleFormArray; let title_index = index; let last_title = last;">-->
+                  <!--<div [formGroupName]="title_index" class="uk-width-1-1 uk-margin-small-bottom">-->
+                    <!--<div class="uk-input-group">-->
+                      <!--<div class="md-input-wrapper md-input-filled">-->
+                        <!--<label>Title</label>-->
+                        <!--<input type="text" class="md-input label-fixed" formControlName="eventTitle">-->
+                        <!--<span class="md-input-bar "></span>-->
+                      <!--</div>-->
+                      <!--<span *ngIf="last_title" class="uk-input-group-addon">-->
+                          <!--<a (click)="addControl('eventTitles',titleDefinition)" class="btnSectionClone"><i class="material-icons md-24"></i></a>-->
+                        <!--</span>-->
+                      <!--<span *ngIf="!last_title" class="uk-input-group-addon">-->
+                          <!--<a (click)="removeControl('eventTitles',title_index)" class="btnSectionRemove"><i class="material-icons md-24"></i></a>-->
+                        <!--</span>-->
+                    <!--</div>-->
+                  <!--</div>-->
+                <!--</div>-->
+              <!--</div>-->
+
+              <!--&lt;!&ndash;<div class="form-group">&ndash;&gt;-->
+              <!--&lt;!&ndash;<label class="control-label" style="display: block;">Title</label>&ndash;&gt;-->
+              <!--&lt;!&ndash;<div formArrayName="eventTitles" *ngFor="let title of eventTitleFormArray; let title_index = index">&ndash;&gt;-->
+              <!--&lt;!&ndash;<div [formGroupName]="title_index">&ndash;&gt;-->
+              <!--&lt;!&ndash;<input class="form-control inlineBlock" style="width:88%;" type="text" formControlName="eventTitle">&ndash;&gt;-->
+              <!--&lt;!&ndash;<a class="inlineBlock deleteIcon" (click)="removeControl('eventTitles',title_index)"><i class="fa fa-remove"></i></a>&ndash;&gt;-->
+              <!--&lt;!&ndash;</div>&ndash;&gt;-->
+              <!--&lt;!&ndash;</div>&ndash;&gt;-->
+              <!--&lt;!&ndash;<a (click)="addControl('eventTitles',titleDefinition)"><i class="fa fa-plus"></i> Add another</a>&ndash;&gt;-->
+              <!--&lt;!&ndash;</div>&ndash;&gt;-->
+            <!--</div>-->
+            <!--<div class="uk-form-horizontal uk-margin-small-bottom">-->
+              <!--<div data-dynamic-fields="field_template_b" dynamic-fields-counter="1">-->
+                <!--<div formArrayName="eventAuthors" class="uk-grid form_section" *ngFor="let author of eventAuthorFormArray; let author_index = index; let last_author = last;">-->
+                  <!--<div [formGroupName]="author_index" class="uk-width-1-1 uk-margin-small-bottom">-->
+                    <!--<div class="uk-input-group">-->
+                      <!--<div class="md-input-wrapper md-input-filled">-->
+                        <!--<label>Author</label>-->
+                        <!--<input type="text" class="md-input label-fixed" formControlName="eventAuthor">-->
+                        <!--<span class="md-input-bar "></span>-->
+                      <!--</div>-->
+                      <!--<span *ngIf="last_author" class="uk-input-group-addon">-->
+                          <!--<a (click)="addControl('eventAuthors',authorDefinition)" class="btnSectionClone"><i class="material-icons md-24"></i></a>-->
+                        <!--</span>-->
+                      <!--<span *ngIf="!last_author" class="uk-input-group-addon">-->
+                          <!--<a (click)="removeControl('eventAuthors',author_index)" class="btnSectionRemove"><i class="material-icons md-24"></i></a>-->
+                        <!--</span>-->
+                    <!--</div>-->
+                  <!--</div>-->
+                <!--</div>-->
+              <!--</div>-->
+              <!--&lt;!&ndash;<div class="form-group">&ndash;&gt;-->
+              <!--&lt;!&ndash;<label class="control-label" style="display: block;">Author</label>&ndash;&gt;-->
+              <!--&lt;!&ndash;<div formArrayName="eventAuthors" *ngFor="let author of eventAuthorFormArray; let author_index = index">&ndash;&gt;-->
+              <!--&lt;!&ndash;<div [formGroupName]="author_index">&ndash;&gt;-->
+              <!--&lt;!&ndash;<input class="form-control inlineBlock" style="width:88%;" type="text" formControlName="eventAuthor">&ndash;&gt;-->
+              <!--&lt;!&ndash;<a class="inlineBlock deleteIcon" (click)="removeControl('eventAuthors',author_index)"><i class="fa fa-remove"></i></a>&ndash;&gt;-->
+              <!--&lt;!&ndash;</div>&ndash;&gt;-->
+              <!--&lt;!&ndash;</div>&ndash;&gt;-->
+              <!--&lt;!&ndash;<a (click)="addControl('eventAuthors', authorDefinition)"><i class="fa fa-plus"></i> Add another</a>&ndash;&gt;-->
+              <!--&lt;!&ndash;</div>&ndash;&gt;-->
+            <!--</div>-->
+            <!--<div class="uk-form-horizontal uk-margin-small-bottom">-->
+              <!--<div data-dynamic-fields="field_template_b" dynamic-fields-counter="1">-->
+                <!--<div formArrayName="eventSubjects" class="uk-grid form_section" *ngFor="let subject of eventSubjectsFormArray; let subject_index = index; let last_subject = last;">-->
+                  <!--<div [formGroupName]="subject_index" class="uk-width-1-1 uk-margin-small-bottom">-->
+                    <!--<div class="uk-input-group">-->
+                      <!--<div class="md-input-wrapper md-input-filled">-->
+                        <!--<label>Subject</label>-->
+                        <!--<input type="text" class="md-input label-fixed" formControlName="eventSubject">-->
+                        <!--<span class="md-input-bar "></span>-->
+                      <!--</div>-->
+                      <!--<span *ngIf="last_subject" class="uk-input-group-addon">-->
+                          <!--<a (click)="addControl('eventSubjects',subjectDefinition)" class="btnSectionClone"><i class="material-icons md-24"></i></a>-->
+                        <!--</span>-->
+                      <!--<span *ngIf="!last_subject" class="uk-input-group-addon">-->
+                          <!--<a (click)="removeControl('eventSubjects',subject_index)" class="btnSectionRemove"><i class="material-icons md-24"></i></a>-->
+                        <!--</span>-->
+                    <!--</div>-->
+                  <!--</div>-->
+                <!--</div>-->
+              <!--</div>-->
+              <!--&lt;!&ndash;<div class="form-group">&ndash;&gt;-->
+              <!--&lt;!&ndash;<label class="control-label" style="display: block;">Subject</label>&ndash;&gt;-->
+              <!--&lt;!&ndash;<div formArrayName="eventSubjects" *ngFor="let subject of eventSubjectsFormArray; let subject_index = index">&ndash;&gt;-->
+              <!--&lt;!&ndash;<div [formGroupName]="subject_index">&ndash;&gt;-->
+              <!--&lt;!&ndash;<input class="form-control inlineBlock" style="width:88%;" type="text" formControlName="eventSubject">&ndash;&gt;-->
+              <!--&lt;!&ndash;<a class="inlineBlock deleteIcon" (click)="removeControl('eventSubjects', subject_index)"><i class="fa fa-remove"></i></a>&ndash;&gt;-->
+              <!--&lt;!&ndash;</div>&ndash;&gt;-->
+              <!--&lt;!&ndash;</div>&ndash;&gt;-->
+              <!--&lt;!&ndash;<a (click)="addControl('eventSubjects', subjectDefinition)"><i class="fa fa-plus"></i> Add another</a>&ndash;&gt;-->
+              <!--&lt;!&ndash;</div>&ndash;&gt;-->
+            <!--</div>-->
+
+            <!--<div>-->
+              <!--<div class="uk-form-horizontal">-->
+                <!--<div data-dynamic-fields="field_template_b" dynamic-fields-counter="1">-->
+                  <!--<div formArrayName="eventDateRanges" class="uk-grid form_section" *ngFor="let date of eventDateRangesFormArray; let date_index = index; let last_date = last;">-->
+                    <!--<div [formGroupName]="date_index" class="uk-width-1-1 uk-margin-small-bottom">-->
+                      <!--<div class="uk-input-group">-->
+                        <!--<div class="md-input-wrapper md-input-filled">-->
+                          <!--<label>Date From</label>-->
+                          <!--<input type="text" class="md-input label-fixed" onfocus="(this.type='date')" formControlName="dateFrom">-->
+                          <!--<span class="md-input-bar "></span>-->
+                        <!--</div>-->
+                        <!--<div class="md-input-wrapper md-input-filled">-->
+                          <!--<label>Date To</label>-->
+                          <!--<input type="text" class="md-input label-fixed" onfocus="(this.type='date')" formControlName="dateTo">-->
+                          <!--<span class="md-input-bar "></span>-->
+                        <!--</div>-->
+                        <!--<span *ngIf="last_date" class="uk-input-group-addon">-->
+                            <!--<a (click)="addControl('eventDateRanges',dateRangeDefinition)" class="btnSectionClone"><i class="material-icons md-24"></i></a>-->
+                          <!--</span>-->
+                        <!--<span *ngIf="!last_date" class="uk-input-group-addon">-->
+                          <!--<a (click)="removeControl('eventDateRanges',date_index)" class="btnSectionRemove"><i class="material-icons md-24"></i></a>-->
+                        <!--</span>-->
+                      <!--</div>-->
+                    <!--</div>-->
+                  <!--</div>-->
+                <!--</div>-->
+
+                <!--&lt;!&ndash;<div class="form-group">&ndash;&gt;-->
+                <!--&lt;!&ndash;<label class="control-label" style="display: block;">Date</label>&ndash;&gt;-->
+                <!--&lt;!&ndash;<div formArrayName="eventDateRanges" *ngFor="let date of eventDateRangesFormArray; let date_index = index">&ndash;&gt;-->
+                <!--&lt;!&ndash;<div class="uk-form" style="position: relative;" [formGroupName]=date_index>&ndash;&gt;-->
+                <!--&lt;!&ndash;<input class="form-control inlineBlock dateFrom" style="width:88%;"&ndash;&gt;-->
+                <!--&lt;!&ndash;placeholder="From"&ndash;&gt;-->
+                <!--&lt;!&ndash;type="text"&ndash;&gt;-->
+                <!--&lt;!&ndash;onfocus="(this.type='date')"&ndash;&gt;-->
+                <!--&lt;!&ndash;formControlName=dateFrom>&ndash;&gt;-->
+                <!--&lt;!&ndash;<input class="form-control inlineBlock dateTo" style="width:88%;"&ndash;&gt;-->
+                <!--&lt;!&ndash;placeholder="To"&ndash;&gt;-->
+                <!--&lt;!&ndash;type="text"&ndash;&gt;-->
+                <!--&lt;!&ndash;onfocus="(this.type='date')"&ndash;&gt;-->
+                <!--&lt;!&ndash;formControlName=dateTo>&ndash;&gt;-->
+                <!--&lt;!&ndash;<a class="inlineBlock deleteIcon" (click)="removeControl('eventDateRanges',date_index)"><i class="fa fa-remove" style=""></i></a>&ndash;&gt;-->
+                <!--&lt;!&ndash;</div>&ndash;&gt;-->
+                <!--&lt;!&ndash;</div>&ndash;&gt;-->
+                <!--&lt;!&ndash;<a (click)="addControl('eventDateRanges', dateRangeDefinition)"><i class="fa fa-plus"></i> Add another</a>&ndash;&gt;-->
+                <!--&lt;!&ndash;</div>&ndash;&gt;-->
+              <!--</div>-->
+            <!--</div>-->
+            <!--&lt;!&ndash;<div role="form" class="form-horizontal">&ndash;&gt;-->
+            <!--&lt;!&ndash;<div class="form-group">&ndash;&gt;-->
+            <!--&lt;!&ndash;<div class="actionButtons">&ndash;&gt;-->
+            <!--&lt;!&ndash;<button type="button" (click)="updateQuery()" class="uk-button uk-button-primary advancedSearch uk-margin-small-right">Apply</button>&ndash;&gt;-->
+            <!--&lt;!&ndash;<button type="reset" (click)="clearForm()" class="uk-button uk-button-default clearCriteria">Clear</button>&ndash;&gt;-->
+            <!--&lt;!&ndash;</div>&ndash;&gt;-->
+            <!--&lt;!&ndash;</div>&ndash;&gt;-->
+            <!--&lt;!&ndash;</div>&ndash;&gt;-->
+          <!--</div>-->
+        <!--</div>-->
+      <!--</div>-->
+    </div>
+
+    <!--<form [formGroup]="dataForm" class="uk-form-stacked">-->
+
+      <!--<div class="uk-margin">-->
+        <!--<h5 class="">Datasource Type</h5>-->
+        <!--<div class="uk-form-controls">-->
+          <!--<div class="uk-margin-small-bottom"><label><input class="uk-radio" type="radio" value="" (change)="handleChangeAndResetPage()" formControlName="typology"> Any</label></div>-->
+          <!--<div class="uk-margin-small-bottom"><label><input class="uk-radio" type="radio" value="Aggregator" (change)="handleChangeAndResetPage()" formControlName="typology"> Aggregator</label></div>-->
+          <!--<div class="uk-margin-small-bottom"><label><input class="uk-radio" type="radio" value="Journal" (change)="handleChangeAndResetPage()" formControlName="typology"> Journal</label></div>-->
+          <!--<div class="uk-margin-small-bottom"><label><input class="uk-radio" type="radio" value="datarepository" (change)="handleChangeAndResetPage()" formControlName="typology"> Data Repository</label></div>-->
+          <!--<div class="uk-margin-small-bottom"><label><input class="uk-radio" type="radio" value="pubsrepository" (change)="handleChangeAndResetPage()" formControlName="typology"> Public Repository</label></div>-->
+          <!--<div class="uk-margin-small-bottom"><label><input class="uk-radio" type="radio" value="entityregistry" (change)="handleChangeAndResetPage()" formControlName="typology"> Entity Registry</label></div>-->
+          <!--<div class="uk-margin-small-bottom"><label><input class="uk-radio" type="radio" value="Institutional" (change)="handleChangeAndResetPage()" formControlName="typology"> Institutional</label></div>-->
+          <!--<div class="uk-margin-small-bottom"><label><input class="uk-radio" type="radio" value="Thematic" (change)="handleChangeAndResetPage()" formControlName="typology"> Thematic</label></div>-->
+          <!--<div class="uk-margin-small-bottom"><label><input class="uk-radio" type="radio" value="Products" (change)="handleChangeAndResetPage()" formControlName="typology"> Products</label></div>-->
+          <!--<div class="uk-margin-small-bottom"><label><input class="uk-radio" type="radio" value="Unknown" (change)="handleChangeAndResetPage()" formControlName="typology"> Unknown</label></div>-->
+        <!--</div>-->
+      <!--</div>-->
+
+      <!--<hr>-->
+
+      <!--<div class="uk-margin">-->
+        <!--<h5 class="">Countries</h5>-->
+        <!--<div class="uk-form-controls">-->
+          <!--<ng-container *ngIf="countries && countries.length>0">-->
+            <!--<read-more [maxHeight]="238">-->
+              <!--<div class="uk-margin-small-bottom"><input class="uk-radio" type="radio" value="" (change)="handleChangeAndResetPage()" formControlName="country"> Any</div>-->
+              <!--<ng-container *ngFor="let country of countries">-->
+                <!--<div class="uk-margin-small-bottom">-->
+                  <!--<input class="uk-radio" type="radio" value="{{country.code}}"-->
+                         <!--(change)="handleChangeAndResetPage()" formControlName="country"> {{country.name}}-->
+                <!--</div>-->
+              <!--</ng-container>-->
+            <!--</read-more>-->
+          <!--</ng-container>-->
+        <!--</div>-->
+      <!--</div>-->
+
+    <!--</form>-->
+
+  </div>
+</div>
+
+
+<confirmation-dialog #subscribeToEventsModal [title]="'Create subscription for'" [isModalShown]="isModalShown"
+                     [confirmActionButton]="'Subscribe'" (emitObject)="subscribeToEvents($event)">
+  <div *ngIf="eventsPage">
+    <div *ngIf="modalErrorMessage" class="uk-alert uk-alert-danger">{{ modalErrorMessage }}</div>
+    <div>
+      <h2 class="heading_c uk-margin-bottom">
+        {{ eventsPage.datasource }}
+        <span class="sub-heading">{{ eventsPage.topic }}</span>
+      </h2>
+    </div>
+    <div>
+      <div class="md-input-wrapper md-input-filled uk-margin-bottom">
+        <label>Email</label>
+        <input class="md-input label-fixed" type="text" value="{{ userEmail }}" disabled>
+        <span class="md-input-bar "></span>
+      </div>
+      <!--<div class="form-group">-->
+        <!--<label class="control-label">Email</label>-->
+        <!--<div>{{ userEmail }}</div>-->
+      <!--</div>-->
+<!--      <div class="md-input-wrapper md-input-filled">
+        <label class="">Frequency (*)</label>
+        <select class="md-input" #selectFreq (change)="choseFrequency(selectFreq.value)">
+          <option value="">&#45;&#45; none selected &#45;&#45;</option>
+          <option value="never">never</option>
+          <option value="realtime">realtime</option>
+          <option value="daily">daily</option>
+          <option value="weekly">weekly</option>
+          <option value="monthly">monthly</option>
+        </select>
+        <span class="md-input-bar"></span>
+      </div>-->
+
+      <div class="uk-margin-top">
+        <div class="uk-margin-small-bottom">Selected Options</div>
+        <div>
+          <table class="uk-table uk-table-striped">
+            <tbody>
+              <tr>
+                <td class="uk-width-1-5">Trust</td>
+                <td>[{{advanceSearch.trust.min}}, {{advanceSearch.trust.max}}]</td>
+              </tr>
+              <tr *ngIf="advanceSearch.titles && advanceSearch.titles.length>0">
+                <td class="uk-width-1-5">Titles</td>
+                <td>
+                  <span *ngFor="let title of advanceSearch.titles; let i = index">
+                    <br *ngIf="i>0">
+                    {{title}}
+                  </span>
+                </td>
+              </tr>
+              <tr *ngIf="advanceSearch.authors && advanceSearch.authors.length>0">
+                <td class="uk-width-1-5">Authors</td>
+                <td>
+                  <span *ngFor="let author of advanceSearch.authors; let i = index">
+                    <br *ngIf="i>0">
+                    {{author}}
+                  </span>
+                </td>
+              </tr>
+              <tr *ngIf="advanceSearch.subjects && advanceSearch.subjects.length>0">
+                <td class="uk-width-1-5">Subjects</td>
+                <td>
+                  <span *ngFor="let subject of advanceSearch.subjects; let i = index">
+                    <br *ngIf="i>0">
+                    {{subject}}
+                  </span>
+                </td>
+              </tr>
+              <tr *ngIf="advanceSearch.dates && advanceSearch.dates.length>0">
+                <td class="uk-width-1-5">Dates</td>
+                <td>
+                  <span *ngFor="let date of advanceSearch.dates; let i = index">
+                    <br *ngIf="i>0">
+                    {{date.min}} <span class="uk-margin-small-left uk-margin-small-right">-</span> {{date.max}}
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</confirmation-dialog>

src/app/pages/repository/events/content-events-of-repo-eventslist.component.ts

@@ -0,0 +1,381 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { AdvQueryObject, EventsPage, NotificationFrequency, NotificationMode } from '../../../domain/typeScriptClasses';
+import { BrokerService } from '../../../services/broker.service';
+import { loadingEvents, noEventsForTopic, noEventsWithParams, noServiceMessage,
+         subscribingChooseFrequency, subscribingToEvents, subscribingToEventsError,
+         subscribingToeventsSuccess } from '../../../domain/shared-messages';
+import { AbstractControl, FormArray, FormBuilder, FormGroup } from '@angular/forms';
+import { AuthenticationService } from '../../../services/authentication.service';
+import { ConfirmationDialogComponent } from '../../../shared/reusablecomponents/confirmation-dialog.component';
+import { SharedService } from "../../../services/shared.service";
+
+@Component ({
+  selector: 'app-content-events-of-repo-eventslist',
+  templateUrl: 'content-events-of-repo-eventslist.component.html'
+})
+
+export class ContentEventsOfRepoEventslistComponent implements OnInit {
+  errorMessage: string;
+  loadingMessage: string;
+  successMessage: string;
+  noEvents: string;
+  eventsPageInitialized = false;
+
+  topic = '';
+  lastTopicEntry = '';
+  correctTopic = '';
+  repoName = '';
+
+  advanceSearch: AdvQueryObject;
+  eventsPage: EventsPage;
+  currentPage: number; /* DELETE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE */
+
+  selectedItemIndex: number;
+
+  group: FormGroup;
+  readonly titleDefinition = { eventTitle: [''] };
+  readonly authorDefinition = { eventAuthor: [''] };
+  readonly subjectDefinition = { eventSubject: [''] };
+  readonly dateRangeDefinition = { dateFrom: '', dateTo: '' };
+  readonly groupDefinition = {
+    trustMin: [+''],
+    trustMax: [+''],
+    eventTitles: this.fb.array([this.initControl(this.titleDefinition)]),
+    eventAuthors: this.fb.array([this.initControl(this.authorDefinition)]),
+    eventSubjects: this.fb.array([this.initControl(this.subjectDefinition)]),
+    eventDateRanges: this.fb.array([this.initControl(this.dateRangeDefinition)])
+  };
+
+  eventTitleFormArray: any;
+  eventAuthorFormArray: any;
+  eventSubjectsFormArray: any;
+  eventDateRangesFormArray: any;
+
+  frequencyChoice = 'daily';
+  userEmail: string;
+  modalErrorMessage: string;
+
+  isModalShown: boolean;
+  @ViewChild('subscribeToEventsModal')
+  public subscribeToEventsModal: ConfirmationDialogComponent;
+
+  constructor (private route: ActivatedRoute,
+               private fb: FormBuilder,
+               private brokerService: BrokerService,
+               private authService: AuthenticationService,
+               private sharedService: SharedService) {}
+
+  ngOnInit () {
+
+    this.userEmail = this.authService.getUserEmail();
+
+    this.getParams();
+
+
+    if(this.sharedService.getRepository()) {
+      this.repoName = this.sharedService.getRepository().officialName;
+      this.initQuery();
+      this.initForm();
+      this.currentPage = 0; /* DELETE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE */
+      this.getEventsPage(0);
+    }
+
+    this.sharedService.repository$.subscribe(
+      r => {
+        if (r) {
+          this.repoName = r.officialName;
+          this.initQuery();
+          this.initForm();
+          this.currentPage = 0; /* DELETE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE */
+          this.getEventsPage(0);
+        }
+      }
+    );
+
+    let body = document.getElementsByTagName('body')[0];
+    body.classList.remove("top_bar_active");   //remove the class
+    body.classList.add("page_heading_active");
+    body.classList.remove("landing");
+    body.classList.add("dashboard");
+  }
+
+  getParams() {
+    this.topic = this.route.snapshot.paramMap.get('topic');
+    console.log(`my topic is: ${this.topic}`);
+    this.lastTopicEntry = this.topic.substring(this.topic.lastIndexOf('|') + 1).toLowerCase();
+    this.lastTopicEntry = this.replaceAll(this.lastTopicEntry, '_', ' ');
+    this.getCorrectTopic();
+    // this.repoName = this.route.snapshot.paramMap.get('name');
+  }
+
+  replaceAll(str, find, replace) {
+    return str.replace(new RegExp(find, 'g'), replace);
+  }
+
+  initQuery() {
+    this.advanceSearch = {
+      datasource: this.repoName,
+      topic: this.correctTopic,
+      titles: [],
+      subjects: [],
+      authors: [],
+      dates: [],
+      trust: {min: '0', max: '1'},
+      page: 0
+    };
+  }
+
+  initForm() {
+    this.group = this.fb.group( this.groupDefinition, { validator: checkMinMax } );
+    this.group.get('trustMin').setValue(0);
+    this.group.get('trustMax').setValue(1);
+  }
+
+  initControl(definition: any) {
+    return this.fb.group(definition);
+  }
+
+  removeControl(controlName: string, i: number) {
+    const controlArray = <FormArray>this.group.controls[controlName];
+    controlArray.removeAt(i);
+  }
+
+  addControl(controlName: string, definition: any) {
+    const controlArray = <FormArray>this.group.controls[controlName];
+    controlArray.push(this.initControl(definition));
+  }
+
+  clearForm() {
+    let controlArray: FormArray;
+    controlArray = <FormArray>this.group.controls['eventTitles'];
+    controlArray.controls = [];
+    controlArray.push(this.initControl(this.titleDefinition));
+
+    controlArray = <FormArray>this.group.controls['eventAuthors'];
+    controlArray.controls = [];
+    controlArray.push(this.initControl(this.authorDefinition));
+
+    controlArray = <FormArray>this.group.controls['eventSubjects'];
+    controlArray.controls = [];
+    controlArray.push(this.initControl(this.subjectDefinition));
+
+    controlArray = <FormArray>this.group.controls['eventDateRanges'];
+    controlArray.controls = [];
+    controlArray.push(this.initControl(this.dateRangeDefinition));
+
+    this.group.get('trustMin').setValue(0);
+    this.group.get('trustMax').setValue(1);
+
+    this.initQuery();
+    this.getEventsPage(0);
+  }
+
+  updateQuery() {
+    let i: number;
+    let controlArray: FormArray;
+
+    if ( this.group.valid ) {
+      this.initQuery();
+      this.advanceSearch.trust.min = this.group.get('trustMin').value;
+      this.advanceSearch.trust.max = this.group.get('trustMax').value;
+
+      controlArray = <FormArray>this.group.controls['eventTitles'];
+      for (i = 0; i < controlArray.length; i++) {
+        if (controlArray.at(i).get('eventTitle').value) {
+          this.advanceSearch.titles.push(controlArray.at(i).get('eventTitle').value);
+        }
+      }
+      controlArray = <FormArray>this.group.controls['eventAuthors'];
+      for (i = 0; i < controlArray.length; i++) {
+        if (controlArray.at(i).get('eventAuthor').value) {
+          this.advanceSearch.authors.push(controlArray.at(i).get('eventAuthor').value);
+        }
+      }
+      controlArray = <FormArray>this.group.controls['eventSubjects'];
+      for (i = 0; i < controlArray.length; i++) {
+        if (controlArray.at(i).get('eventSubject').value) {
+          this.advanceSearch.subjects.push(controlArray.at(i).get('eventSubject').value);
+        }
+      }
+      controlArray = <FormArray>this.group.controls['eventDateRanges'];
+      for (i = 0; i < controlArray.length; i++) {
+        if (controlArray.at(i).get('dateFrom').value) {
+          let toDate;
+          if (controlArray.at(i).get('dateTo').value ||
+              (controlArray.at(i).get('dateFrom').value > controlArray.at(i).get('dateTo').value) ) {
+            toDate = controlArray.at(i).get('dateTo').value;
+          } else {
+            toDate = Date.now();
+          }
+          this.advanceSearch.dates.push({
+            min: controlArray.at(i).get('dateFrom').value,
+            max: toDate
+          });
+        }
+      }
+      console.log(this.advanceSearch);
+      this.currentPage = 0; /* DELETE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE */
+      this.getEventsPage(0);
+    }
+  }
+
+  getEventsPage(page: number) {
+    this.noEvents = '';
+    this.errorMessage = '';
+    this.successMessage = '';
+    this.loadingMessage = loadingEvents;
+    this.brokerService.advancedShowEvents(page, 10, this.advanceSearch).subscribe(
+      events => this.eventsPage = events,
+      error => {
+        this.loadingMessage = '';
+        this.errorMessage = noServiceMessage;
+        console.log(error);
+      },
+      () => {
+        this.loadingMessage = '';
+        console.log(this.eventsPage);
+        if (!this.eventsPage.total) {
+          if (!this.eventsPageInitialized) {
+            this.noEvents = noEventsForTopic;
+          } else {
+            this.noEvents = noEventsWithParams;
+          }
+        }
+        let tempArray = <FormArray>this.group.controls['eventTitles'];
+        this.eventTitleFormArray = tempArray.controls;
+        tempArray = <FormArray>this.group.controls['eventAuthors'];
+        this.eventAuthorFormArray = tempArray.controls;
+        tempArray = <FormArray>this.group.controls['eventSubjects'];
+        this.eventSubjectsFormArray = tempArray.controls;
+        tempArray = <FormArray>this.group.controls['eventDateRanges'];
+        this.eventDateRangesFormArray = tempArray.controls;
+        console.log(`total pages is ${this.eventsPage.totalPages}`);
+        this.eventsPageInitialized = true;
+      }
+    );
+  }
+
+  isHighlighted(item: any, itemList: any[]) {
+    return itemList.some(x => x === item);
+  }
+
+  getCorrectTopic() {
+    const temp = this.topic.split('|');
+    this.correctTopic = temp[0];
+    this.topic = temp[0];
+    for (let i = 1; i < temp.length; i++) {
+      this.correctTopic += `/${temp[i]}`;
+      this.topic += ` | ${temp[i]}`;
+    }
+  }
+
+  goToNextPage() {
+    /* RESTORE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE */
+    /*if(this.eventsPage.currPage < this.eventsPage.totalPages) {
+      console.log(`Get me page ${this.eventsPage.currPage+1}!`);
+      this.getEventsPage(this.eventsPage.currPage+1);
+    }*/
+
+    /* DELETE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE */
+    if ( (this.currentPage + 1) < this.eventsPage.totalPages) {
+      this.currentPage = this.currentPage + 1;
+      console.log(`Get me page ${this.currentPage}!`);
+      this.getEventsPage(this.currentPage);
+
+      window.scrollTo(0, 0);
+    }
+
+  }
+
+  goToPreviousPage() {
+    /* RESTORE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE */
+    /*if(this.eventsPage.currPage > 0) {
+      console.log(`Get me page ${this.eventsPage.currPage-1}!`);
+      this.getEventsPage(this.eventsPage.currPage-1);
+    }*/
+
+    /* DELETE WHEN ADVANCED SHOW EVENTS IS FIXED AND SENDS CORRECT VALUE FOR CURRENT PAGE */
+    if (this.currentPage > 0) {
+      this.currentPage = this.currentPage - 1;
+      console.log(`Get me page ${this.currentPage}!`);
+      this.getEventsPage(this.currentPage);
+
+      window.scrollTo(0, 0);
+    }
+  }
+
+  showSubscriptionModal() {
+    if (this.advanceSearch && this.eventsPage) {
+      this.subscribeToEventsModal.confirmed = false;
+      this.subscribeToEventsModal.showModal();
+    }
+  }
+
+  choseFrequency(freq: string) {
+    this.frequencyChoice = freq;
+  }
+
+  subscribeToEvents(event: any) {
+    this.modalErrorMessage = '';
+    if (this.frequencyChoice) {
+      this.subscribeToEventsModal.confirmed = true;
+      const freq = <NotificationFrequency>this.frequencyChoice;
+      const mod: NotificationMode = 'EMAIL';
+      const sub = {
+        subscriber: this.userEmail,
+        frequency: freq,
+        mode: mod,
+        query: this.advanceSearch
+      };
+      this.errorMessage = '';
+      this.successMessage = '';
+      console.log(JSON.stringify(sub));
+      this.loadingMessage = subscribingToEvents;
+      this.brokerService.subscribeToEvent(sub).subscribe(
+        response => console.log(`subscribeToEvents responded ${JSON.stringify(response)}`),
+        error => {
+          this.errorMessage = subscribingToEventsError;
+          this.loadingMessage = '';
+        },
+        () => {
+          this.loadingMessage = '';
+          this.successMessage = subscribingToeventsSuccess;
+        }
+      );
+    } else {
+      this.modalErrorMessage = subscribingChooseFrequency;
+    }
+  }
+
+  // displayFullResultInfo(i: number) {
+  //   if (this.selectedItemIndex === i) {
+  //     this.selectedItemIndex = null;
+  //   } else {
+  //     this.selectedItemIndex = i;
+  //   }
+  // }
+
+  showMore(i: number) {
+    this.selectedItemIndex = i;
+  }
+
+  showLess(i: number) {
+    this.selectedItemIndex = null;
+  }
+
+}
+
+export function checkMinMax(c: AbstractControl) {
+  if ( c.get('trustMin').value > c.get('trustMax').value ) {
+    return 'invalid';
+  }
+  return null;
+}
+
+export function checkDates(c: AbstractControl) {
+  if ( c.get('dateFrom').value > c.get('dateTo').value ) {
+    return 'invalid';
+  }
+  return null;
+}

src/app/pages/repository/events/content-events-of-repository.component.html

@@ -0,0 +1,140 @@
+<div id="page_content_inner" class="uk-margin-medium-left uk-margin-medium-right uk-margin-top">
+  <h2 class="heading_b uk-margin-bottom">Enrich Your Content - Browse Events</h2>
+
+  <!-- TOP HELP CONTENT -->
+  <help-content #topHelperContent [position]="'top'"
+                [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
+  </help-content>
+
+  <div class="uk-grid">
+
+    <!-- LEFT HELP CONTENT -->
+    <aside-help-content #leftHelperContent [position]="'left'"
+                        [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+    </aside-help-content>
+
+    <!-- MIDDLE -->
+    <div class=" uk-width-expand@m">
+
+      <div>
+        <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{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="noTopics" class="uk-alert">{{ noTopics }}</div>
+
+        <ng-container *ngIf="repoTopics && repoTopics.length > 0">
+
+          <div class="uk-alert uk-alert-info">
+            For each topic a sample of 100 events will be displayed, as well as the total number that can be potentially built for your data source. If you are interested to receive the full list, you can subscribe to these events and then be notified about the new enrichment events.
+          </div>
+
+          <div class="uk-grid-margin uk-grid uk-grid-stack repos-list">
+
+            <div class="uk-width-1-2 uk-first-column">
+              <div class="md-card">
+                <div class="md-card-toolbar">
+                  <!--<div class="md-card-toolbar-actions">-->
+                  <!--<a href="#" class="md-btn md-btn-small md-btn-flat">Button</a>-->
+                  <!--<a href="#" class="md-btn md-btn-small md-btn-flat md-btn-flat-primary">Button</a>-->
+                  <!--</div>-->
+                  <h3 class="md-card-toolbar-heading-text">
+                    More
+                  </h3>
+                </div>
+                <div class="md-card-content">
+                  <table class="uk-table uk-table-striped uk-table-middle">
+                    <thead>
+                    <tr>
+                      <th>Additional metadata information that may enrich or supplement {{ repoName }} content</th>
+                      <th class="uk-text-nowrap uk-text-right"># of events</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr class="el-item" *ngFor="let moreTopic of moreList">
+                      <td class="uk-table-shrink uk-width-4-5">
+                        <a (click)="goToEventsList(moreTopic.value)" class="el-link">{{ moreTopic.value }}</a>
+                        <div *ngIf="topics[moreTopic.value]" class="uk-text uk-text-small">{{ topics[moreTopic.value]['englishName'] }}</div>
+                      </td>
+                      <td class="uk-text-nowrap uk-table-shrink uk-width-1-5 uk-text-right">
+                        <div class="el-title">{{ moreTopic.size }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-item uk-text-bold">
+                      <td class="uk-text-nowrap uk-table-shrink uk-width-4-5">
+                        <div class="el-title">Total</div>
+                      </td>
+                      <td class="uk-text-nowrap uk-table-shrink uk-width-1-5 uk-text-right">
+                        <div class="el-title">{{ totalMore }}</div>
+                      </td>
+                    </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+
+            <div class="uk-width-1-2 uk-first-column">
+              <div class="md-card">
+                <div class="md-card-toolbar">
+                  <!--<div class="md-card-toolbar-actions">-->
+                  <!--<a href="#" class="md-btn md-btn-small md-btn-flat">Button</a>-->
+                  <!--<a href="#" class="md-btn md-btn-small md-btn-flat md-btn-flat-primary">Button</a>-->
+                  <!--</div>-->
+                  <h3 class="md-card-toolbar-heading-text">
+                    Missing
+                  </h3>
+                </div>
+                <div class="md-card-content">
+                  <table class="uk-table uk-table-striped uk-table-middle">
+                    <thead>
+                    <tr>
+                      <th>Missing metadata information that may enrich or complete {{ repoName }} content</th>
+                      <th class="uk-text-nowrap uk-text-right"># of events</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr class="el-item" *ngFor="let missingTopic of missingList">
+                      <td class="uk-table-shrink uk-width-4-5">
+                        <a (click)="goToEventsList(missingTopic.value)" class="el-link">{{ missingTopic.value }}</a>
+                        <div *ngIf="topics[missingTopic.value]" class="uk-text uk-text-small">{{ topics[missingTopic.value]['englishName'] }}</div>
+                      </td>
+                      <td class="uk-text-nowrap uk-table-shrink uk-width-1-5">
+                        <div class="el-title uk-text-right">{{ missingTopic.size }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-item uk-text-bold">
+                      <td class="uk-text-nowrap uk-table-shrink uk-width-4-5">
+                        <div class="el-title">Total</div>
+                      </td>
+                      <td class="uk-text-nowrap uk-table-shrink uk-width-1-5">
+                        <div class="el-title uk-text-right">{{ totalMissing }}</div>
+                      </td>
+                    </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </ng-container>
+
+      </div>
+
+    </div>
+
+    <!-- RIGHT HELP CONTENT -->
+    <aside-help-content #rightHelperContent [position]="'right'"
+                        [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+    </aside-help-content>
+
+  </div>
+
+  <!-- BOTTOM HELP CONTENT -->
+  <help-content #bottomHelperContent [position]="'bottom'"
+                [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
+  </help-content>
+
+</div>

src/app/pages/repository/events/content-events-of-repository.component.ts

@@ -0,0 +1,134 @@
+import { Component, OnInit } from '@angular/core';
+import { BrowseEntry, Term } from '../../../domain/typeScriptClasses';
+import { ActivatedRoute, Router } from '@angular/router';
+import { loadingTopics, loadingTopicsError, noTopicsFound } from '../../../domain/shared-messages';
+import { BrokerService } from '../../../services/broker.service';
+import { SharedService } from "../../../services/shared.service";
+
+@Component ({
+  selector: 'content-events-of-repository',
+  templateUrl: 'content-events-of-repository.component.html'
+})
+
+export class ContentEventsOfRepositoryComponent implements OnInit {
+  errorMessage: string;
+  loadingMessage: string;
+  noTopics: string;
+
+  repoName = '';
+  correctName = '';
+  topics: Map<string, Term> = new Map<string, Term>();
+  repoTopics: BrowseEntry[] = [];
+  moreList: BrowseEntry[] = [];
+  missingList: BrowseEntry[] = [];
+  totalMore = 0;
+  totalMissing = 0;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private brokerService: BrokerService,
+    private sharedService: SharedService
+  ) {}
+
+  ngOnInit() {
+
+    if(this.sharedService.getRepository()) {
+      this.repoName = this.sharedService.getRepository().officialName;
+      this.getCorrectName();
+      this.getTopics();
+    }
+
+    this.sharedService.repository$.subscribe(
+      r => {
+        if (r) {
+          this.repoName = r.officialName;
+          this.getCorrectName();
+          this.getTopics();
+        }
+      }
+    );
+
+    // this.repoName = this.route.snapshot.paramMap.get('name');
+    // this.getCorrectName();
+    // this.getTopics();
+    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");
+  }
+
+  getRepoTopics(): void {
+    this.loadingMessage = loadingTopics;
+    this.brokerService.getTopicsForDataSource(this.correctName)
+      .subscribe(
+        topics => {
+          this.repoTopics = topics;
+        },
+        error => {
+          console.log(error);
+          this.errorMessage = loadingTopicsError;
+          this.loadingMessage = '';
+        },
+        () => {
+          this.loadingMessage = '';
+          if (this.repoTopics.length === 0) {
+            this.noTopics = noTopicsFound;
+          } else {
+            for (const browseEntry of this.repoTopics) {
+              if (browseEntry.value.startsWith('ENRICH/MORE')) {
+                this.totalMore += browseEntry.size;
+                this.moreList.push(browseEntry);
+              } else if (browseEntry.value.startsWith('ENRICH/MISSING')) {
+                this.totalMissing += browseEntry.size;
+                this.missingList.push(browseEntry);
+              }
+            }
+          }
+        }
+      );
+  }
+
+
+  getTopics () {
+    this.loadingMessage = loadingTopics;
+    this.brokerService.getDnetTopics().subscribe(
+      topics => this.topics = topics,
+      error => {
+        console.log(error);
+        this.errorMessage = loadingTopicsError;
+        this.loadingMessage = '';
+      },
+      () => {
+        this.loadingMessage = '';
+        console.log(this.topics);
+        this.getRepoTopics();
+      }
+    );
+  }
+
+  goToEventsList(topic: string) {
+    const temp = topic.replace(/\//g, '|');
+    let chosenTopic = temp[0];
+    for (let i = 1; i < temp.length; i++) {
+      chosenTopic += '|' + temp[i];
+    }
+    chosenTopic = encodeURIComponent(chosenTopic);
+    /*this.router.navigate([`/content/events/${this.repoName}`, chosenTopic]);*/
+    console.log(temp, this.route.url);
+    this.router.navigate([temp], {relativeTo: this.route});
+
+  }
+
+  getCorrectName() {
+    const temp = this.repoName.split('|');
+    this.correctName = temp[0];
+    this.repoName = temp[0];
+    for (let i = 1; i < temp.length; i++) {
+      this.correctName += `/${temp[i]}`;
+      this.repoName += ` | ${temp[i]}`;
+    }
+  }
+
+}

src/app/pages/repository/events/events-routing.module.ts

@@ -0,0 +1,27 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { AuthGuardService } from "../../../services/auth-guard.service";
+import { ContentEventsOfRepositoryComponent } from "./content-events-of-repository.component";
+import { ContentEventsOfRepoEventslistComponent } from "./content-events-of-repo-eventslist.component";
+
+const eventsRoutes: Routes = [
+  {
+    path: '',
+    component: ContentEventsOfRepositoryComponent,
+    canActivate: [AuthGuardService],
+  },
+  {
+    path: ':topic',
+    component: ContentEventsOfRepoEventslistComponent,
+    canActivate: [AuthGuardService]
+  }
+];
+
+
+@NgModule ({
+  imports: [RouterModule.forChild(eventsRoutes)],
+  exports: [RouterModule]
+})
+
+export class EventsRoutingModule {}
+

src/app/pages/repository/events/events.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { TabsModule } from 'ngx-bootstrap';
+import { CommonModule } from '@angular/common';
+import { ReusableComponentsModule } from "../../../shared/reusablecomponents/reusable-components.module";
+import { EventsRoutingModule } from "./events-routing.module";
+import { ContentEventsOfRepositoryComponent } from "./content-events-of-repository.component";
+import { ContentEventsOfRepoEventslistComponent } from "./content-events-of-repo-eventslist.component";
+import { ReactiveFormsModule } from "@angular/forms";
+
+
+@NgModule ({
+  imports: [
+    CommonModule,
+    TabsModule.forRoot(),
+    EventsRoutingModule,
+    ReusableComponentsModule,
+    ReactiveFormsModule,
+  ],
+  declarations: [
+    ContentEventsOfRepositoryComponent,
+    ContentEventsOfRepoEventslistComponent
+  ]
+})
+
+export class EventsModule { }

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

@@ -0,0 +1,91 @@
+<div id="page_content_inner">
+  <!--<h2 class="heading_b uk-margin-bottom">Metrics for repository....</h2>-->
+  <h2 *ngIf="repo" class="heading_b uk-margin-bottom">Metrics for {{repo.officialName}}</h2>
+
+  <!-- TOP HELP CONTENT -->
+  <help-content #topHelperContent [position]="'top'"
+                [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
+  </help-content>
+
+  <div class="uk-grid">
+
+    <!-- LEFT HELP CONTENT -->
+    <aside-help-content #leftHelperContent [position]="'left'"
+                        [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+    </aside-help-content>
+
+    <!-- MIDDLE -->
+    <div class=" uk-width-expand@m">
+
+      <div>
+        <div *ngIf="successMessage" class="uk-alert uk-alert-success">{{ successMessage }}</div>
+        <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ 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="repo && !loadingMessage">
+
+          <div class="md-card">
+            <div class="md-card-content large-padding">
+              <div class="uk-article">
+
+                <p class="uk-article-lead uk-margin-bottom">You don't have metrics enabled for this repository yet. Would you like to enable them?</p>
+
+                <div class="uk-grid uk-margin-medium-top uk-margin-medium-bottom">
+                  <figure class="uk-width-1-3 uk-first-column">
+                    <img src="../../../../assets/imgs/metricsWorkflow-new.svg" alt="" data-dense-cap="2" class="dense-image dense-ready">
+                    <figcaption class="uk-thumbnail-caption">Usage stats enable workflow</figcaption>
+                  </figure>
+
+                  <div class="info uk-width-2-3">
+                    <p>Once you select to enable metrics for your repository, the following actions need to be performed:</p>
+                    <p><i>As the repository manager, on datasource site:</i><br>
+                      1. Download the tracking code for your datasource platform.<br>
+                      2. Follow the instructions to configure the tracking code.<br>
+                      3. Deploy the tracking code into your datasource platform.
+                    </p>
+                    <p><i>As OpenAIRE's Usage Counts Technical Staff, on our data analytics platform:</i><br>
+                      4. Validate the installation and inform you accordingly.<br>
+                    </p>
+                  </div>
+                </div>
+
+                <blockquote>
+                  For more details about the workflows, please consult the
+                  <a href="https://openaire.github.io/usage-statistics-guidelines/">OpenAIRE Usage Counts Guidelines</a>.<br>
+                  If you have any questions, please create a <a href="https://www.openaire.eu/support/helpdesk">helpdesk ticket</a> or write to <a href="mailto:usagecounts-helpdesk@openaire.eu">usagecounts-helpdesk@openaire.eu</a>.
+
+                </blockquote>
+
+                <button class="uk-button uk-button-primary uk-margin-top" (click)="confirmEnabling()">Enable Metrics</button>
+
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+
+    <!-- RIGHT HELP CONTENT -->
+    <aside-help-content #rightHelperContent [position]="'right'"
+                        [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+    </aside-help-content>
+
+  </div>
+
+  <!-- BOTTOM HELP CONTENT -->
+  <help-content #bottomHelperContent [position]="'bottom'"
+                [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
+  </help-content>
+
+</div>
+
+<confirmation-dialog #confirmEnablingModal [title]="modalTitle" [isModalShown]="isModalShown"
+                     [confirmActionButton]="modalButton" (emitObject)="confirmedEnabling($event)">
+  Are you sure you want to enable metrics for this repository?
+</confirmation-dialog>

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

@@ -0,0 +1,146 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ConfirmationDialogComponent } from '../../../shared/reusablecomponents/confirmation-dialog.component';
+import { PiwikService } from '../../../services/piwik.service';
+import { RepositoryService } from '../../../services/repository.service';
+import { PiwikInfo, Repository } from '../../../domain/typeScriptClasses';
+import { enabledMetricsError, enabledMetricsSuccess, enablingMetrics,
+         loadingRepoError, loadingRepoMessage } from '../../../domain/shared-messages';
+import { AuthenticationService } from '../../../services/authentication.service';
+import { SharedService } from "../../../services/shared.service";
+
+@Component ({
+  selector: 'metrics-enable',
+  templateUrl: 'metrics-enable.component.html'
+})
+
+export class MetricsEnableComponent implements OnInit {
+  successMessage: string;
+  errorMessage: string;
+  loadingMessage: string;
+
+  readonly analyticsUrl = 'https://analytics.openaire.eu/addsite.php?';
+  readonly authenticationToken = '32846584f571be9b57488bf4088f30ea';  /* THE ACTUAL TOKEN WILL BE NEEDED EVENTUALLY!! */
+
+  repo: Repository;
+  oaId: string;
+
+  modalTitle = 'Confirmation';
+  modalButton = 'Yes, enable it';
+  isModalShown: boolean;
+
+  @ViewChild('confirmEnablingModal')
+  public confirmEnablingModal: ConfirmationDialogComponent;
+
+
+  constructor (
+    private route: ActivatedRoute,
+    private router: Router,
+    private authService: AuthenticationService,
+    private piwikService: PiwikService,
+    private repoService: RepositoryService,
+    private sharedService: SharedService
+  ) {}
+
+  ngOnInit() {
+
+    if(this.sharedService.getRepository()) {
+      this.repo = this.sharedService.getRepository();
+      this.getOAid();
+    }
+
+    this.sharedService.repository$.subscribe(
+      r => {
+        this.repo = r;
+        if (this.repo) {
+          this.getOAid();
+        }
+      }
+    );
+
+    // this.getRepo();
+    this.isModalShown = false;
+    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");
+  }
+
+  // getRepo(): void {
+  //   const id = this.route.snapshot.paramMap.get('id');
+  //   this.loadingMessage = loadingRepoMessage;
+  //   this.repoService.getRepositoryById(id).subscribe(
+  //     repo => {
+  //       this.repo = repo;
+  //     },
+  //     error => {
+  //       console.log(error);
+  //       this.errorMessage = loadingRepoError;
+  //       this.loadingMessage = '';
+  //     }, () => {
+  //       if (this.repo) {
+  //         this.getOAid();
+  //       }
+  //       this.loadingMessage = '';
+  //     }
+  //   );
+  // }
+
+  getOAid () {
+    this.piwikService.getOpenaireId(this.repo.id).subscribe(
+      id => {
+        this.oaId = id;
+        console.log(`getOpenaireId responded: ${this.oaId}`);
+      },
+      error => console.log(`ERROR is ${error}`)
+    );
+  }
+
+  confirmEnabling() {
+    if (this.repo) {
+      this.confirmEnablingModal.showModal();
+    }
+  }
+
+  confirmedEnabling(event: any) {
+    if (this.repo) {
+      this.loadingMessage = enablingMetrics;
+      const piwik: PiwikInfo = {
+        repositoryId: this.repo.id,
+        openaireId: this.oaId,
+        repositoryName: this.repo.officialName,
+        country: this.repo.countryName,
+        siteId: '',
+        authenticationToken: this.authenticationToken,
+        creationDate: null,
+        requestorName: this.authService.getUserName(),
+        requestorEmail: this.authService.getUserEmail(),
+        validated: false,
+        validationDate: null,
+        comment: ''
+      };
+
+      this.piwikService.enableMetricsForRepository(this.repo.officialName, this.repo.websiteUrl, piwik).subscribe(
+        response => {
+          console.log(`enableMetrics answered: ${response}`);
+          this.successMessage = enabledMetricsSuccess;
+          this.loadingMessage = '';
+
+          //save piwik and update shareRepo
+          this.repo.piwikInfo = piwik;
+          this.sharedService.setRepository(this.repo);
+        },
+        error => {
+          console.log(error);
+          this.errorMessage = enabledMetricsError;
+          this.loadingMessage = '';
+        },
+        () => {
+          this.router.navigate([`../instructions/`]);
+          // this.router.navigate([`/getImpact/instructions/${this.repo.id}`]);
+        }
+      );
+    }
+  }
+}

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

@@ -0,0 +1,80 @@
+<div id="page_content_inner">
+  <h2 *ngIf="piwik" class="heading_b uk-margin-bottom">Usage Statistics Configuration & Software Details for {{piwik.repositoryName}}</h2>
+
+  <!-- TOP HELP CONTENT -->
+  <help-content #topHelperContent [position]="'top'"
+                [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
+  </help-content>
+
+  <div class="uk-grid">
+
+    <!-- LEFT HELP CONTENT -->
+    <aside-help-content #leftHelperContent [position]="'left'"
+                        [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+    </aside-help-content>
+
+    <!-- MIDDLE -->
+    <div class=" uk-width-expand@m">
+
+      <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>
+      <div *ngIf="piwik">
+
+        <div class="md-card">
+          <div class="md-card-content large-padding">
+            <div class="uk-article">
+
+              <p>
+                OpenAIRE’s usage statistic service uses the <i>Matomo Open Source Analytics platform</i> (matomo.org) to track usage activity. When <i>metrics</i>
+                are enabled for a repository, two unique identifiers are generated - a matomo-ID that associates the repository with its usage events in Matomo
+                and an authentication-ID that allows to track usage activity on the Matomo platform. Metadata views and item downloads are tracked and automatically sent to Matomo. Statistics are generated using the COUNTER Code of practice directives.
+              </p>
+              <p>
+                OpenAIRE's usage statistics service tracking code exploits Matomo’s API. In order to make the tracking of usage events from repositories more robust, it was necessary to implement repository platform specific patches and plugins starting with DSpace and EPrints. The code is maintained on Github:
+              </p>
+              <ul>
+                <li>as a patch for various versions of DSpace
+                  (<a target="_blank" href="https://github.com/openaire/OpenAIRE-Piwik-DSpace">https://github.com/openaire/OpenAIRE-Piwik-DSpace</a>)</li>
+                <li>as an Eprints plugin for version 3
+                  (<a target="_blank" href="https://github.com/openaire/EPrints-OAPiwik">https://github.com/openaire/EPrints-OAPiwik</a>)</li>
+                <li>as a python script for all other cases
+                  (<a target="_blank" href="https://github.com/openaire/Generic-Matomo-Tracker">https://github.com/openaire/Generic-Matomo-Tracker</a>)</li>
+              </ul>
+              <p>
+                To configure your repository to allow tracking in Matomo platform, please change the configuration files with the following parameters and values, generated for your site:
+              </p>
+              <dl class="uk-description-list">
+                <dt>MatomoID</dt>
+                <dd>{{ piwik.siteId }}</dd>
+                <dt>AuthenticationToken</dt>
+                <dd>{{ piwik.authenticationToken }}</dd>
+              </dl>
+              <p>
+                Details for the configuration files are given in the README of the tracking code.
+              </p>
+              <div class="uk-alert uk-alert-info">
+                <strong>NOTE</strong>
+                - You will be informed by e-mail that the installation of the tracking code has been validated and when the usage statistics will be available.
+              </div>
+
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <!-- RIGHT HELP CONTENT -->
+    <aside-help-content #rightHelperContent [position]="'right'"
+                        [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+    </aside-help-content>
+
+  </div>
+
+  <!-- BOTTOM HELP CONTENT -->
+  <help-content #bottomHelperContent [position]="'bottom'"
+                [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
+  </help-content>
+
+</div>
+

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

@@ -0,0 +1,45 @@
+/**
+ * Created by myrto on 11/24/17.
+ */
+import { Component, OnInit } from '@angular/core';
+import { PiwikInfo, Repository } from '../../../domain/typeScriptClasses';
+import { ActivatedRoute, Router } from '@angular/router';
+import { PiwikService } from '../../../services/piwik.service';
+import { AuthenticationService } from '../../../services/authentication.service';
+import { SharedService } from "../../../services/shared.service";
+
+@Component ({
+  selector: 'app-metrics-instructions',
+  templateUrl: 'metrics-instructions.component.html'
+})
+
+export class MetricsInstructionsComponent implements OnInit {
+
+  piwik: PiwikInfo;
+  errorMessage: string;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private piwikService: PiwikService,
+    private authService: AuthenticationService,
+    private sharedService: SharedService) {}
+
+  ngOnInit() {
+
+    if(this.sharedService.getRepository())
+      this.piwik = this.sharedService.getRepository().piwikInfo;
+
+    this.sharedService.repository$.subscribe(
+      r => {
+        this.piwik = r.piwikInfo;
+      }
+    );
+
+    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");
+  }
+}

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

@@ -0,0 +1,102 @@
+<div id="page_content_inner">
+  <h2 *ngIf="piwik" class="heading_b uk-margin-bottom">{{ piwik ? piwik.repositoryName : 'Metrics'}}</h2>
+
+  <!-- TOP HELP CONTENT -->
+  <help-content #topHelperContent [position]="'top'"
+                [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
+  </help-content>
+
+  <div class="uk-grid">
+
+    <!-- LEFT HELP CONTENT -->
+    <aside-help-content #leftHelperContent [position]="'left'"
+                        [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+    </aside-help-content>
+
+    <!-- MIDDLE -->
+    <div class=" uk-width-expand@m">
+
+      <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ 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="repoMetrics">
+
+        <div class="uk-grid">
+          <div class="uk-width-1-1">
+            <div class="uk-float-right">
+              <a class="uk-button uk-button-primary"
+                 [routerLink]="['../usagestats']" title="">Get statistics report</a>
+            </div>
+          </div>
+        </div>
+
+        <div class="uk-grid uk-grid-match uk-child-width-1-3@l uk-child-width-1-3@m uk-grid-medium uk-sortable sortable-handler" data-uk-sortable="" data-uk-grid-margin="">
+          <div class="uk-row-first" style="">
+            <div class="md-card">
+              <div class="md-card-content">
+                <div class="uk-float-right uk-margin-top uk-margin-small-right"><span class="peity_sale peity_data" style="display: none;">5,3,9,6,5,9,7,3,5,2</span><svg class="peity" height="28" width="64"><polygon fill="#d1e4f6" points="0 27.5 0 12.5 7.111111111111111 18.5 14.222222222222221 0.5 21.333333333333332 9.5 28.444444444444443 12.5 35.55555555555556 0.5 42.666666666666664 6.5 49.77777777777777 18.5 56.888888888888886 12.5 64 21.5 64 27.5"></polygon><polyline fill="none" points="0 12.5 7.111111111111111 18.5 14.222222222222221 0.5 21.333333333333332 9.5 28.444444444444443 12.5 35.55555555555556 0.5 42.666666666666664 6.5 49.77777777777777 18.5 56.888888888888886 12.5 64 21.5" stroke="#0288d1" stroke-width="1" stroke-linecap="square"></polyline></svg></div>
+                <span class="uk-text-muted uk-text-small">views in OpenAIRE</span>
+                <h2 class="uk-margin-remove"><span class="countUpMe">{{ pageViews | number }}</span></h2>
+              </div>
+            </div>
+          </div>
+          <div style="">
+            <div class="md-card">
+              <div class="md-card-content">
+                <div class="uk-float-right uk-margin-top uk-margin-small-right"><span class="peity_live peity_data" style="display: none;">3,5,2,10,2,7,0,2,8,8,7,2,4,8,0,6,6,7,9,5</span><svg class="peity" height="28" width="64"><polygon fill="#efebe9" points="0 27.5 0 19.4 3.3684210526315788 14 6.7368421052631575 22.1 10.105263157894736 0.5 13.473684210526315 22.1 16.842105263157894 8.600000000000001 20.210526315789473 27.5 23.57894736842105 22.1 26.94736842105263 5.899999999999999 30.31578947368421 5.899999999999999 33.68421052631579 8.600000000000001 37.05263157894737 22.1 40.421052631578945 16.7 43.78947368421052 5.899999999999999 47.1578947368421 27.5 50.526315789473685 11.3 53.89473684210526 11.3 57.263157894736835 8.600000000000001 60.63157894736842 3.1999999999999993 64 14 64 27.5"></polygon><polyline fill="none" points="0 19.4 3.3684210526315788 14 6.7368421052631575 22.1 10.105263157894736 0.5 13.473684210526315 22.1 16.842105263157894 8.600000000000001 20.210526315789473 27.5 23.57894736842105 22.1 26.94736842105263 5.899999999999999 30.31578947368421 5.899999999999999 33.68421052631579 8.600000000000001 37.05263157894737 22.1 40.421052631578945 16.7 43.78947368421052 5.899999999999999 47.1578947368421 27.5 50.526315789473685 11.3 53.89473684210526 11.3 57.263157894736835 8.600000000000001 60.63157894736842 3.1999999999999993 64 14" stroke="#5d4037" stroke-width="1" stroke-linecap="square"></polyline></svg></div>
+                <span class="uk-text-muted uk-text-small">views in local repository</span>
+                <h2 class="uk-margin-remove" id="peity_live_text">{{ totalViews | number }}
+                  <span *ngIf="repoMetrics.metricsNumbers.total_openaire_views" class="comment">( {{ repoMetrics.metricsNumbers.total_openaire_views | number }} from OpenAIRE )</span></h2>
+              </div>
+            </div>
+          </div>
+          <div class="" style="">
+            <div class="md-card">
+              <div class="md-card-content">
+                <div class="uk-float-right uk-margin-top uk-margin-small-right"><span class="peity_visitors peity_data" style="display: none;">5,3,9,6,5,9,7</span><svg class="peity" height="28" width="48"><rect data-value="5" fill="#d84315" x="1.3714285714285717" y="12.444444444444443" width="4.114285714285715" height="15.555555555555557"></rect><rect data-value="3" fill="#d84315" x="8.228571428571428" y="18.666666666666668" width="4.114285714285716" height="9.333333333333332"></rect><rect data-value="9" fill="#d84315" x="15.085714285714287" y="0" width="4.1142857142857086" height="28"></rect><rect data-value="6" fill="#d84315" x="21.942857142857147" y="9.333333333333336" width="4.114285714285707" height="18.666666666666664"></rect><rect data-value="5" fill="#d84315" x="28.800000000000004" y="12.444444444444443" width="4.114285714285707" height="15.555555555555557"></rect><rect data-value="9" fill="#d84315" x="35.65714285714286" y="0" width="4.114285714285707" height="28"></rect><rect data-value="7" fill="#d84315" x="42.51428571428572" y="6.222222222222221" width="4.114285714285707" height="21.77777777777778"></rect></svg></div>
+                <span class="uk-text-muted uk-text-small">downloads in local repository</span>
+                <h2 class="uk-margin-remove">{{ totalDownloads | number }}
+                  <span *ngIf="repoMetrics.metricsNumbers.total_openaire_downloads" class="comment">( {{ repoMetrics.metricsNumbers.total_openaire_downloads | number }} from OpenAIRE )</span></h2>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="uk-grid">
+          <div class="uk-width-1-1">
+            <div class="md-card">
+              <div class="md-card-content">
+                <iframe class="statsFrame" [src]="viewsUrl"></iframe>
+              </div>
+            </div>
+          </div>
+          <div class="uk-width-1-1 uk-margin-medium-top">
+            <div class="md-card">
+              <div class="md-card-content">
+                <iframe class="statsFrame" [src]="downloadsUrl"></iframe>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <!-- RIGHT HELP CONTENT -->
+    <aside-help-content #rightHelperContent [position]="'right'"
+                        [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+    </aside-help-content>
+
+  </div>
+
+  <!-- BOTTOM HELP CONTENT -->
+  <help-content #bottomHelperContent [position]="'bottom'"
+                [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
+  </help-content>
+
+</div>
+

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

@@ -0,0 +1,135 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MetricsInfo, PiwikInfo } from '../../../domain/typeScriptClasses';
+import { PiwikService } from '../../../services/piwik.service';
+import { RepositoryService } from '../../../services/repository.service';
+import { loadingMetrics, loadingMetricsError } from '../../../domain/shared-messages';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { AuthenticationService } from '../../../services/authentication.service';
+import { SharedService } from "../../../services/shared.service";
+
+@Component ({
+  selector: 'metrics-show',
+  templateUrl: 'metrics-show.component.html'
+})
+
+export class MetricsShowComponent implements OnInit {
+  errorMessage: string;
+  loadingMessage: string;
+
+  repoId: string;
+  piwik: PiwikInfo;
+  repoMetrics: MetricsInfo;
+  pageViews = '--';
+  totalViews = '--';
+  totalDownloads = '--';
+  viewsUrl: SafeResourceUrl;
+  downloadsUrl: SafeResourceUrl;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private sanitizer: DomSanitizer,
+    private piwikService: PiwikService,
+    private repoService: RepositoryService,
+    private authService: AuthenticationService,
+    private sharedService: SharedService) {}
+
+  ngOnInit() {
+
+    if(this.sharedService.getRepository()) {
+      this.repoId = this.sharedService.getRepository().id;
+      this.piwik = this.sharedService.getRepository().piwikInfo;
+      this.getMetrics();
+    }
+
+    this.sharedService.repository$.subscribe(
+      r => {
+        this.repoId = r.id;
+        this.piwik = r.piwikInfo;
+        this.getMetrics();
+      }
+    );
+
+    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");
+  }
+
+  getMetrics() {
+    this.loadingMessage = loadingMetrics;
+    this.repoService.getMetricsInfoForRepository(this.repoId).subscribe(
+      metrics => {
+        this.repoMetrics = metrics;
+        if (this.repoMetrics.metricsNumbers.pageviews) {
+          this.pageViews = this.repoMetrics.metricsNumbers.pageviews;
+        }
+        if (this.repoMetrics.metricsNumbers.total_views) {
+          this.totalViews = this.repoMetrics.metricsNumbers.total_views;
+        }
+        if (this.repoMetrics.metricsNumbers.total_downloads) {
+          this.totalDownloads = this.repoMetrics.metricsNumbers.total_downloads;
+        }
+        this.getViewsUrl();
+        this.getDownloadsUrl();
+      },
+      error => {
+        this.loadingMessage = '';
+        this.errorMessage = loadingMetricsError;
+        console.log(error);
+      },
+      () => {
+        this.loadingMessage = '';
+        this.errorMessage = '';
+      }
+    );
+  }
+
+
+  getViewsUrl () {
+
+    let encodedURL = encodeURIComponent('{"library":"HighCharts","chartDescription":{"queries":[{"name":"Monthly views","type":"line","query":{"name":"usagestats.views.monthly", "parameters":["' + this.piwik.openaireId + '"], "profile":"OpenAIRE All-inclusive" }}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":""},"subtitle":{},"yAxis":{"title":{"text":"Monthly views"}},"xAxis":{"title":{}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":false},"plotOptions":{"series":{"dataLabels":{"enabled":false}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":true,"text":"Created by OpenAIRE via HighCharts"}}}');
+    this.viewsUrl = this.sanitizer.bypassSecurityTrustResourceUrl(`${this.repoMetrics.diagramsBaseURL}chart?json=${encodedURL}`);
+
+    // this.viewsUrl = this.sanitizer.bypassSecurityTrustResourceUrl(
+    //   `${this.repoMetrics.diagramsBaseURL}merge.php?com=query
+    //   &data=[{"query":"dtsrcRepoViews","dtsrcName":"${this.piwik.openaireId}",
+    //   "table":"","fields":[{"fld":"sum","agg":"sum","type":"chart","yaxis":1,"c":false}],
+    //   "xaxis":{"name":"month","agg":"sum"},"group":"","color":"","type":"chart","size":30,
+    //   "sort":"xaxis","xStyle":{"r":-30,"s":"0","l":"-","ft":"-","wt":"-"},"title":"","subtitle":"",
+    //   "xaxistitle":"","yaxisheaders":["Monthly views"],"generalxaxis":"","theme":0,"in":[]}]
+    //   &info_types=["spline"]&stacking=&steps=false&fontFamily=Courier&spacing=[5,0,0,0]
+    //   &style=[{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"rgba(0, 0, 0, 1)","size":"18"},
+    //   {"color":"000000","size":""},{"color":"000000","size":""}]&backgroundColor=rgba(255,255,255,1)
+    //   &colors[]=rgba(124,181, 236, 1)&colors[]=rgba(67, 67, 72, 1)&colors[]=rgba(144, 237, 125,1)
+    //   &colors[]=rgba(247, 163, 92, 1)&colors[]=rgba(128, 133, 233,1)&colors[]=rgba(241, 92, 128, 1)
+    //   &colors[]=rgba(228, 211, 84,1)&colors[]=rgba(43, 144, 143, 1)&colors[]=rgba(244, 91, 91,1)
+    //   &colors[]=rgba(145, 232, 225,1)&xlinew=0&ylinew=1&legends=true&tooltips=true&persistent=false`
+    // );
+  }
+
+  getDownloadsUrl () {
+
+    let encodedURL = encodeURIComponent('{"library":"HighCharts","chartDescription":{"queries":[{"name":"Monthly downloads","type":"line","query":{"name":"usagestats.downloads.monthly", "parameters":["' + this.piwik.openaireId + '"], "profile":"OpenAIRE All-inclusive" }}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":""},"subtitle":{},"yAxis":{"title":{"text":"Monthly views"}},"xAxis":{"title":{}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":false},"plotOptions":{"series":{"dataLabels":{"enabled":false}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":true,"text":"Created by OpenAIRE via HighCharts"}}}');
+    this.downloadsUrl = this.sanitizer.bypassSecurityTrustResourceUrl(`${this.repoMetrics.diagramsBaseURL}chart?json=${encodedURL}`);
+
+    // this.downloadsUrl = this.sanitizer.bypassSecurityTrustResourceUrl(
+    //   `${this.repoMetrics.diagramsBaseURL}merge.php?com=query
+    //   &data=[{"query":"dtsrcRepoDownloads","dtsrcName":"${this.piwik.openaireId}",
+    //   "table":"","fields":[{"fld":"sum","agg":"sum","type":"chart","yaxis":1,"c":false}],
+    //   "xaxis":{"name":"month","agg":"sum"},"group":"","color":"","type":"chart","size":30,
+    //   "sort":"xaxis","xStyle":{"r":-30,"s":"0","l":"-","ft":"-","wt":"-"},"title":"","subtitle":"",
+    //   "xaxistitle":"","yaxisheaders":["Monthly downloads"],"generalxaxis":"","theme":0,"in":[]}]
+    //   &info_types=["spline"]&stacking=&steps=false&fontFamily=Courier&spacing=[5,0,0,0]
+    //   &style=[{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"rgba(0, 0, 0,1)","size":"18"},
+    //   {"color":"000000","size":""},{"color":"000000","size":""}]&backgroundColor=rgba(255,255,255,1)
+    //   &colors[]=rgba(124, 181, 236, 1)&colors[]=rgba(67, 67, 72, 1)&colors[]=rgba(144, 237, 125,1)
+    //   &colors[]=rgba(247, 163, 92, 1)&colors[]=rgba(128, 133, 233,1)&colors[]=rgba(241, 92, 128, 1)
+    //   &colors[]=rgba(228, 211, 84,1)&colors[]=rgba(43, 144, 143, 1)&colors[]=rgba(244, 91, 91,1)
+    //   &colors[]=rgba(145, 232, 225,1)&xlinew=0&ylinew=1&legends=true&tooltips=true&persistent=false`
+    // );
+  }
+
+}

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

@@ -0,0 +1,451 @@
+<div id="page_content_inner">
+  <h2 class="heading_b uk-margin-bottom">Get usage statistics report</h2>
+
+  <!-- TOP HELP CONTENT -->
+  <help-content #topHelperContent [position]="'top'"
+                [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
+  </help-content>
+
+  <div class="uk-grid">
+
+    <!-- LEFT HELP CONTENT -->
+    <aside-help-content #leftHelperContent [position]="'left'"
+                        [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+    </aside-help-content>
+
+    <!-- MIDDLE -->
+    <div 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="repoResponse" 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>{{ 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>-->
+                </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>
+                    <th class="uk-width-1-6" *ngIf="chosenReport !== 'RR1'">Title</th>
+                    <th class="uk-width-1-6" *ngIf="chosenReport !== 'RR1'">Publisher</th>
+                    <th class="uk-width-1-6" *ngIf="chosenReport === 'RR1'">Platform name</th>
+                    <th class="uk-width-1-6">{{ (chosenReport !== 'RR1') ? 'Item Urls' : 'Url' }}</th>
+                    <th class="uk-width-1-6">Type</th>
+                    <th class="uk-width-1-6" colspan="2">Downloads/Views</th>
+                    <!--<th class="uk-width-2-10">Repository</th>-->
+                    <!--<th class="uk-width-1-10">Validation Type</th>-->
+                    <!--<th class="uk-width-1-10">Status</th>-->
+                    <!--<th class="uk-width-1-10">Score</th>-->
+                    <!--<th class="uk-width-1-10">Started</th>-->
+                    <!--<th class="uk-width-2-10">Guidelines</th>-->
+                    <!--<th class="uk-width-1-10">Actions</th>-->
+                    <!--<th class="uk-width-1-10"></th>-->
+                  </tr>
+                  </thead>
+                  <tbody>
+                  <tr *ngIf="infoMessage">
+                    <td colspan="6">{{ infoMessage }}</td>
+                  </tr>
+                  <ng-container *ngIf="repoResponse?.Report?.Report?.Customer?.ReportItems">
+                    <ng-container *ngFor="let item of repoResponse.Report.Report.Customer.ReportItems; let item_i = index">
+                      <tr>
+                        <td *ngIf="chosenReport !== 'RR1'">{{ item.ItemName }}</td>
+                        <td *ngIf="chosenReport !== 'RR1'">{{ item.ItemPublisher }}</td>
+                        <td *ngIf="chosenReport === 'RR1'">{{ item.ItemPlatform }}</td>
+                        <td>
+                          <div *ngFor="let url of transformItem(item.ItemIdentifier); let i = index" class="uk-margin-small-bottom">
+                            <!--<br *ngIf="i>0">-->
+                            {{ url }}
+                          </div>
+                        </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 uk-margin-small-top uk-margin-small-bottom">
+                              <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>
+                    </ng-container>
+                  </ng-container>
+                  </tbody>
+                </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>
+                <li class=""><span>page {{ (totalPages > 0) ? page+1 : 0 }} of {{ totalPages }}</span></li>
+                <li class="uk-pagination-next"><a (click)="goToNextPage()"><span class="uk-margin-right">Next</span><i class="uk-icon-angle-right"></i></a></li>
+              </ul>
+
+            </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 repoResponse.ReportDefinition.Filters.Filter; 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">{{ repoResponse.Report.Report['@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>
+
+
+
+      <!--<div *ngIf="repoResponse" class="uk-margin-top">-->
+      <!--<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>-->
+      <!--</h3>-->
+      <!--<div class="uk-width-1-2">-->
+      <!--<table class="uk-table">-->
+      <!--<tr>-->
+      <!--<th>Period covered</th>-->
+      <!--<td>{{ coveredPeriod }}</td>-->
+      <!--</tr>-->
+      <!--<tr>-->
+      <!--<th>Filters</th>-->
+      <!--<td>-->
+      <!--<span *ngFor="let filter of repoResponse.ReportDefinition.Filters.Filter; let i = index">-->
+      <!--<br *ngIf="i>0">-->
+      <!--{{ filter.Name }}: {{ filter.Value }}-->
+      <!--</span>-->
+      <!--</td>-->
+      <!--</tr>-->
+      <!--<tr>-->
+      <!--<th>Date run</th>-->
+      <!--<td>{{ repoResponse.Report.Report['@Created'] | date: "yyyy-MM-dd HH:mm:ss" }}</td>-->
+      <!--</tr>-->
+      <!--<tr>-->
+      <!--<th>Number of results</th>-->
+      <!--<td>{{ repoResponse.ReportDefinition.Filters.ReportAttribute[1].Value }}</td>-->
+      <!--</tr>-->
+      <!--</table>-->
+      <!--</div>-->
+      <!--<div *ngIf="repoResponse.Report.Report.Customer &&-->
+      <!--repoResponse.Report.Report.Customer.ReportItems">-->
+      <!--<div>-->
+      <!--<div class="show-options uk-inline" style="float: right;">-->
+      <!--<div class="filterLabel" style="display: inline;">Results per page:</div>-->
+      <!--<div [formGroup]="pageSizeSelect" class="inlineBlock">-->
+      <!--<select class="form-control" 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>-->
+      <!--</div>-->
+      <!--</div>-->
+      <!--</div><br>-->
+      <!--<div class="contentAndPagerPanel">-->
+
+      <!--&lt;!&ndash; TOP PAGINATION LINKS &ndash;&gt;-->
+      <!--<div>-->
+      <!--<ul class="uk-pagination">-->
+      <!--<li>-->
+      <!--<a class="uk-link uk-link-muted" (click)="goToPreviousPage()">-->
+      <!--<span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">-->
+      <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
+      <!--icon="pagination-previous" ratio="1"></svg>-->
+      <!--</span>-->
+      <!--Previous-->
+      <!--</a>-->
+      <!--</li>-->
+      <!--<li class="uk-margin-auto-left">-->
+      <!--<a class="uk-link uk-link-muted" (click)="goToNextPage()">-->
+      <!--Next-->
+      <!--<span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">-->
+      <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
+      <!--icon="pagination-next" ratio="1"></svg>-->
+      <!--</span>-->
+      <!--</a>-->
+      <!--</li>-->
+      <!--</ul>-->
+      <!--<div class="resultsPageLabel">page {{ (totalPages > 0) ? page+1 : 0 }} of {{ totalPages }}</div>-->
+      <!--</div>-->
+
+
+      <!--&lt;!&ndash; RESULTS TABLE &ndash;&gt;-->
+      <!--<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" class="uk-alert">{{ 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>-->
+
+      <!--&lt;!&ndash; BOTTOM PAGINATION LINKS &ndash;&gt;-->
+      <!--<div>-->
+      <!--<ul class="uk-pagination">-->
+      <!--<li>-->
+      <!--<a class="uk-link uk-link-muted" (click)="goToPreviousPage()">-->
+      <!--<span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">-->
+      <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
+      <!--icon="pagination-previous" ratio="1"></svg>-->
+      <!--</span>-->
+      <!--Previous-->
+      <!--</a>-->
+      <!--</li>-->
+      <!--<li class="uk-margin-auto-left">-->
+      <!--<a class="uk-link uk-link-muted" (click)="goToNextPage()">-->
+      <!--Next-->
+      <!--<span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">-->
+      <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
+      <!--icon="pagination-next" ratio="1"></svg>-->
+      <!--</span>-->
+      <!--</a>-->
+      <!--</li>-->
+      <!--</ul>-->
+      <!--<div class="resultsPageLabel">page {{ (totalPages > 0) ? page+1 : 0 }} of {{ totalPages }}</div>-->
+      <!--</div>-->
+      <!--</div>-->
+      <!--</div>-->
+
+      <!--</div>-->
+
+    </div>
+
+    <!-- RIGHT HELP CONTENT -->
+    <aside-help-content #rightHelperContent [position]="'right'"
+                        [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+    </aside-help-content>
+
+  </div>
+
+  <!-- BOTTOM HELP CONTENT -->
+  <help-content #bottomHelperContent [position]="'bottom'"
+                [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
+  </help-content>
+
+</div>
+
+

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

@@ -0,0 +1,164 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { AuthenticationService } from '../../../services/authentication.service';
+import { UsagestatsService } from '../../../services/usagestats.service';
+import { ReportResponse } from '../../../domain/usageStatsClasses';
+import { FormBuilder, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'metrics-usagestats-report-results',
+  templateUrl: 'metrics-usagestats-report-results.component.html',
+  styleUrls: ['metrics-usagestats-report-results.component.css']
+})
+export class MetricsUsagestatsReportResultsComponent implements OnInit {
+
+  loadingMessage: string;
+  errorMessage: string;
+  infoMessage: string;
+
+  repoResponse: ReportResponse;
+  coveredPeriod: string;
+  params: URLSearchParams;
+  page: number;
+  pageSize: number;
+  totalPages: number;
+  selectedItemIndex: number;
+
+  pageSizeSelect: FormGroup;
+  chosenReport: string;
+
+  constructor(private route: ActivatedRoute,
+              private authService: AuthenticationService,
+              private usageService: UsagestatsService,
+              private fb: FormBuilder) {}
+
+  ngOnInit() {
+    this.page = 0;
+    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");
+  }
+
+  readParams() {
+    this.params = new URLSearchParams();
+
+    this.route.queryParams.subscribe( qparams => {
+      this.params.append('Report', qparams['report']);
+      this.params.append('Release', '4');
+      this.params.append('RequestorID', this.authService.getUserEmail());
+      this.params.append('BeginDate', qparams['beginDate']);
+      this.params.append('EndDate', qparams['endDate']);
+      this.params.append('RepositoryIdentifier', qparams['repoId']);
+      this.params.append('ItemIdentifier', qparams['itemIdentifier']);
+      this.params.append('ItemDataType', qparams['itemIdentifier']);
+      this.params.append('Granularity', qparams['granularity']);
+    });
+
+    this.chosenReport = this.params.get('Report');
+    this.getReportResponse();
+  }
+
+  getReportResponse() {
+    this.errorMessage = '';
+    this.loadingMessage = 'Loading results...';
+    this.infoMessage = '';
+    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.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;
+        }
+      }
+    );
+
+  }
+
+
+  getPageSize() {
+    this.pageSize = +(this.pageSizeSelect.get('selectPageSize').value);
+    this.page = 0;
+    this.getReportResponse();
+  }
+
+  goToNextPage() {
+    if ( (this.page + 1) < this.totalPages) {
+      this.page++;
+      console.log(`Get me page ${this.page}!`);
+      this.getReportResponse();
+    }
+  }
+
+  goToPreviousPage() {
+    if (this.page > 0) {
+      this.page--;
+      console.log(`Get me page ${this.page}!`);
+      this.getReportResponse();
+    }
+  }
+
+  displayItemPerformance(i: number) {
+    if (this.selectedItemIndex === i) {
+      this.selectedItemIndex = null;
+    } else {
+      this.selectedItemIndex = i;
+    }
+  }
+
+  transformItem(itemIdentifiers: any[]) {
+    let field: string;
+    if (this.chosenReport === 'RR1') {
+      field = 'URL';
+    } else {
+      field = 'URLs';
+    }
+    const i = itemIdentifiers.findIndex(x => x['Type'] === field);
+    if ( i > -1 ) {
+      const urls = itemIdentifiers[i]['Value'];
+      return urls.split(';');
+    }
+    return '';
+  }
+
+}

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

@@ -0,0 +1,218 @@
+<div id="page_content_inner">
+  <h2 class="heading_b uk-margin-bottom">{{ title }}</h2>
+
+  <!-- TOP HELP CONTENT -->
+  <help-content #topHelperContent [position]="'top'"
+                [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
+  </help-content>
+
+  <div class="uk-grid">
+
+    <!-- LEFT HELP CONTENT -->
+    <aside-help-content #leftHelperContent [position]="'left'"
+                        [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+    </aside-help-content>
+
+    <!-- MIDDLE -->
+    <div 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="repo && chosen_report" class="uk-margin-top">
+
+        <div class="md-card">
+          <div class="md-card-content large-padding">
+
+            <div class="uk-grid uk-grid-divider" data-uk-grid-margin="">
+
+              <div class="uk-width-1-3@l uk-width-1-3@m uk-row-first">
+
+                <h3>Report Request</h3>
+
+                <div class="md-input-wrapper md-input-filled uk-margin-bottom">
+                  <label>Report Name</label>
+                  <input class="md-input label-fixed" type="text" value="{{ chosen_report }}" disabled>
+                  <span class="md-input-bar "></span>
+                </div>
+
+                <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>
+                  <span class="md-input-bar "></span>
+                </div>
+
+                <div class="md-input-wrapper md-input-filled uk-margin-bottom">
+                  <label>Requestor</label>
+                  <input class="md-input label-fixed" type="text" value="{{ userEmail }}" disabled>
+                  <span class="md-input-bar "></span>
+                </div>
+
+              </div>
+
+              <!--<hr>-->
+
+              <div class="uk-width-1-3@l uk-width-1-3@m">
+                <h3>Report Filters</h3>
+
+                <h5>Date range</h5>
+
+                <div class="uk-text-italic">
+                  <p>Valid date formats are yyyy-mm-dd or yyyy-mm. Default range is the last available month.</p>
+                </div>
+
+                <div class="">
+                  <div class="md-input-wrapper md-input-filled uk-margin-bottom">
+                    <label>Begin Date</label>
+                    <input class="md-input label-fixed" name="BeginDate" placeholder="2016-03" type="text" (blur)="updateBeginDate($event)">
+                    <span class="md-input-bar "></span>
+                  </div>
+                  <div class="md-input-wrapper md-input-filled">
+                    <label>End Date</label>
+                    <input class="md-input label-fixed" name="EndDate" placeholder="2016-06" type="text" (blur)="updateEndDate($event)">
+                    <span class="md-input-bar "></span>
+                  </div>
+                </div>
+
+                <h5><span *ngIf="chosen_report == 'RR1' || chosen_report == 'JR1'">Optional </span>Filters</h5>
+
+                <div class="uk-text-italic">
+                  <p *ngIf="chosen_report != 'RR1' && chosen_report != 'JR1'">
+                    For more specific results, provide an Item Identifier.<br>
+                    Identifier format: <b>namespace:value</b><br>
+                    Valid namespace for Item Identifier: <b>openaire</b>, <b>doi</b> or <b>oid</b>(for OAI-PMH).
+                  </p>
+                  <p *ngIf="chosen_report =='RR1'">
+                    By default results are returned for all repositories.<br>
+                    To get just the results for the current repository, check the box.</p>
+                </div>
+
+                <div *ngIf="chosen_report != 'JR1'">
+                  <div class="md-input-wrapper md-input-filled uk-margin-bottom">
+                    <label>Repository Identifier</label>
+                    <input class="md-input label-fixed" type="text" value="{{ shownRepoId }}" disabled>
+                    <span class="md-input-bar "></span>
+                  </div>
+                  <div *ngIf="chosen_report =='RR1'" class="uk-margin-bottom">
+                    <input class="md-input label-fixed" type="checkbox" value="useCurrentRepo" (change)="updateUseCurrentRepo($event)">
+                    <label class="inline-label">Select current repository</label>
+                  </div>
+                </div>
+
+                <div *ngIf="repo.issn && chosen_report == 'JR1'" class="">
+                  <div class="md-input-wrapper md-input-filled uk-margin-bottom">
+                    <label>Journal Identifier</label>
+                    <input class="md-input label-fixed" type="text" value="{{ shownRepoId }}" disabled>
+                    <span class="md-input-bar "></span>
+                  </div>
+                </div>
+
+
+                <div *ngIf="chosen_report != 'JR1' && chosen_report != 'RR1'" class="">
+                  <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"
+                           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 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>
+                  </div>
+
+                  <div class="md-input-wrapper md-input-filled">
+                    <label class="">Item Data Type</label>
+                    <select class="md-input" 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>
+                      <option value="Article">Article</option>
+                      <option value="Bachelor thesis">Bachelor thesis</option>
+                      <option value="Book">Book</option>
+                      <option value="clinical trial">clinical trial</option>
+                      <option value="Collection">Collection</option>
+                      <option value="Conference object">Conference object</option>
+                      <option value="Contribution for newspaper or weekly magazine">Contribution for newspaper or weekly magazine</option>
+                      <option value="Dataset">Dataset</option>
+                      <option value="Doctoral thesis">Doctoral thesis</option>
+                      <option value="Event">Event</option>
+                      <option value="External research report">External research report</option>
+                      <option value="Film">Film</option>
+                      <option value="Image">Image</option>
+                      <option value="InteractiveResource">InteractiveResource</option>
+                      <option value="Internal report">Internal report</option>
+                      <option value="Lecture">Lecture</option>
+                      <option value="Master thesis">Master thesis</option>
+                      <option value="Newsletter">Newsletter</option>
+                      <option value="Other">Other</option>
+                      <option value="Part of book or chapter of book">Part of book or chapter of book</option>
+                      <option value="Patent">Patent</option>
+                      <option value="PhysicalObject">PhysicalObject</option>
+                      <option value="Preprint">Preprint</option>
+                      <option value="Report">Report</option>
+                      <option value="Research">Research</option>
+                      <option value="Review">Review</option>
+                      <option value="Software">Software</option>
+                      <option value="Sound">Sound</option>
+                      <option value="Unknown">Unknown</option>
+                    </select>
+                    <span class="md-input-bar"></span>
+                  </div>
+
+                </div>
+              </div>
+
+              <!--<hr>-->
+
+              <div class="uk-width-1-3@l uk-width-1-3@m">
+
+                <h3>Report Attributes</h3>
+
+                <div class="uk-text-italic">
+                  <p>Valid Granularity values: Monthly or Totals</p>
+                </div>
+
+                <div class="md-input-wrapper md-input-filled">
+                  <label class="">Granularity</label>
+                  <select class="md-input" name="Granularity" (change)="updateGranularity($event)">
+                    <option value="Monthly">Monthly</option>
+                    <option value="Totals">Totals</option>
+                  </select>
+                  <span class="md-input-bar"></span>
+                </div>
+
+              </div>
+
+            </div>
+
+            <a class="uk-button uk-button-primary uk-margin-top" (click)="goToReport()">Get Report</a>
+
+          </div>
+        </div>
+
+
+      </div>
+
+    </div>
+
+    <!-- RIGHT HELP CONTENT -->
+    <aside-help-content #rightHelperContent [position]="'right'"
+                        [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+    </aside-help-content>
+
+  </div>
+
+  <!-- BOTTOM HELP CONTENT -->
+  <help-content #bottomHelperContent [position]="'bottom'"
+                [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
+  </help-content>
+
+</div>

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

@@ -0,0 +1,177 @@
+import { Component, OnInit } from '@angular/core';
+import { Repository } from '../../../domain/typeScriptClasses';
+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";
+
+@Component({
+  selector: 'metrics-usagestats-report',
+  templateUrl: './metrics-usagestats-report.component.html'
+})
+
+export class MetricsUsagestatsReportComponent implements OnInit {
+
+  errorMessage: string;
+  loadingMessage: string;
+  title: string;
+
+  repo: Repository;
+  // repoId: string;
+  shownRepoId: string;
+  shownOpenaireId: string;
+  useCurrentRepo: boolean;
+  issnToShow = '';
+  chosen_report: string;
+
+  userEmail: string;
+  beginDate = '';
+  endDate = '';
+  itemIdentifier = '';
+  itemDataType = '';
+  granularity = 'Monthly';
+
+  constructor(private repoService: RepositoryService,
+              private sharedService: SharedService,
+              private route: ActivatedRoute,
+              private router: Router,
+              private authService: AuthenticationService) {}
+
+  ngOnInit() {
+
+    if(this.sharedService.getRepository()) {
+      this.repo = this.sharedService.getRepository();
+      this.getInfo();
+    }
+
+    this.sharedService.repository$.subscribe(
+      r => {
+        this.repo = r;
+        this.getInfo();
+      }
+    );
+
+    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");
+  }
+
+  getInfo() {
+    this.getParams();
+    this.getUserEmail();
+    if (this.repo.piwikInfo) {
+      this.shownOpenaireId = this.convertToDisplayedFormat(this.repo.piwikInfo.openaireId);
+    }
+    if (this.repo.issn && this.repo.issn !== 'null') {
+      this.shownRepoId = this.repo.issn.slice(0, 4) + '-' + this.repo.issn.toString().slice(4);
+    }
+    this.title = `${this.chosen_report} report for ${this.repo.officialName}`;
+  }
+
+  getParams() {
+    // this.repoId = this.route.snapshot.paramMap.get('id');
+    this.chosen_report = this.route.snapshot.paramMap.get('reportID');
+    this.shownRepoId = this.convertToDisplayedFormat(this.repo.id);
+    console.log(`shownRepoId is ${this.repo.id}`);
+    this.title = `${this.chosen_report} report`;
+    if (this.chosen_report !== 'RR1') {
+      this.useCurrentRepo = true;
+    }
+  }
+
+  convertToDisplayedFormat(input: string) {
+    const tempArray = this.repo.id.split('____::');
+    return tempArray[0] + ':' + tempArray[1];
+  }
+
+  getUserEmail() {
+    this.userEmail = this.authService.getUserEmail();
+  }
+
+  // getRepo() {
+  //   this.loadingMessage = loadingRepoMessage;
+  //   this.repoService.getRepositoryById(this.repoId).subscribe(
+  //     repo => this.repo = repo,
+  //     error => {
+  //       console.log(error);
+  //       this.loadingMessage = '';
+  //         this.errorMessage = 'The repository could not be retrieved';
+  //     },
+  //     () => {
+  //       this.loadingMessage = '';
+  //       if (this.repo.piwikInfo) {
+  //         this.shownOpenaireId = this.convertToDisplayedFormat(this.repo.piwikInfo.openaireId);
+  //       }
+  //       if (this.repo.issn && this.repo.issn !== 'null') {
+  //         this.shownRepoId = this.repo.issn.slice(0, 4) + '-' + this.repo.issn.toString().slice(4);
+  //       }
+  //       this.title = `${this.chosen_report} report for ${this.repo.officialName}`;
+  //     }
+  //   );
+  // }
+
+  updateBeginDate(event: any) {
+    this.beginDate = event.target.value;
+  }
+
+  updateEndDate(event: any) {
+    this.endDate = event.target.value;
+  }
+
+  updateItemDataType(event: any) {
+    this.itemDataType = event.target.value;
+  }
+
+  updateItemIdentifier(event: any) {
+    this.itemIdentifier = event.target.value;
+  }
+
+  updateGranularity(event: any) {
+    this.granularity = event.target.value;
+  }
+
+  updateUseCurrentRepo(event: any) {
+    this.useCurrentRepo = event.target.value;
+  }
+
+  goToReport() {
+    if (!this.useCurrentRepo) { this.shownRepoId = ''; }
+    this.router.navigate(['usagestats-report-results'], {
+      relativeTo: this.route.parent,
+      queryParams: {
+        report: this.chosen_report,
+        beginDate: this.beginDate,
+        endDate: this.endDate,
+        repoId: this.shownRepoId,
+        itemDataType: this.itemDataType,
+        itemIdentifier: this.itemIdentifier,
+        granularity: this.granularity
+      }
+    });
+
+    /*const params = new URLSearchParams();
+
+    params.append('Report', this.chosen_report);
+    params.append('Release', '4');
+    params.append('RequestorID', this.authService.getUserEmail());
+    params.append('BeginDate', this.beginDate);
+    params.append('EndDate', this.endDate);
+    params.append('RepositoryIdentifier', this.shownRepoId);
+    if (this.itemIdentifier) {
+      params.append('ItemIdentifier', this.itemIdentifier);
+    }
+    if (this.itemDataType) {
+      params.append('ItemDataType', this.itemDataType);
+    }
+    params.append('Pretty', 'Pretty');
+
+    let url = `http://beta.services.openaire.eu/usagestats/sushilite/GetReport/?${params}`;
+    console.log(`going to: ${url}`);
+
+    window.location.href = url;*/
+  }
+
+}

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

@@ -0,0 +1,125 @@
+<div id="page_content_inner">
+  <h2 class="heading_b uk-margin-bottom">{{ title }}</h2>
+
+  <!-- TOP HELP CONTENT -->
+  <help-content #topHelperContent [position]="'top'"
+                [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
+  </help-content>
+
+  <div class="uk-grid">
+
+    <!-- LEFT HELP CONTENT -->
+    <aside-help-content #leftHelperContent [position]="'left'"
+                        [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+    </aside-help-content>
+
+    <!-- MIDDLE -->
+    <div class=" uk-width-expand@m">
+
+      <div *ngIf="errorMessage" class="uk-alert uk-alert-warning">{{ errorMessage }}</div>
+      <div *ngIf="repo">
+
+        <h3>Supported Reports</h3>
+
+        <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>
+              <div class="uk-card-media-top">
+                <img class="el-image" src="../../../../assets/imgs/Icons_Reports_wide_AR1.png" alt="" style="width: 100%;">
+              </div>
+              <div class="uk-card-body">
+                <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">
+                  Article Report 1, number of successful article download requests by month and repository.
+                </h3>
+              </div>
+            </div>
+          </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>
+              <div class="uk-card-media-top">
+                <img class="el-image" src="../../../../assets/imgs/Icons_Reports_wide_IR1.png" alt="" style="width:100%;">
+              </div>
+              <div class="uk-card-body">
+                <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom" >
+                  Item Report 1, number of successful item download requests by month and repository.
+                </h3>
+              </div>
+            </div>
+          </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>
+              <div class="uk-card-media-top">
+                <img class="el-image" src="../../../../assets/imgs/Icons_Reports_wide_RR1.png" alt="" style="width:100%;">
+              </div>
+              <div class="uk-card-body">
+                <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">
+                  Repository Report 1, number of successful item downloads for all repositories participating in the usage statistics service.
+                </h3>
+              </div>
+            </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>
+              <div class="uk-card-media-top">
+                <img class="el-image" src="../../../../assets/imgs/Icons_Reports_wide_BR1.png" alt="" style="width: 100%;">
+              </div>
+              <div class="uk-card-body">
+                <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">
+                  Book Report 1, number of successful title requests by month and title.
+                </h3>
+              </div>
+            </div>
+          </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>
+              <div class="uk-card-media-top">
+                <img class="el-image" src="../../../../assets/imgs/Icons_Reports_wide_BR2.png" alt="" style="width:100%;">
+              </div>
+              <div class="uk-card-body">
+                <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom" >
+                  Book Report 2, number of successful section requests by month and title.
+                </h3>
+              </div>
+            </div>
+          </div>
+          <div *ngIf="repo.datasourceType === '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>
+              <div class="uk-card-media-top">
+                <img class="el-image" src="../../../../assets/imgs/Icons_Reports_wide_JR1.png" alt="" style="width:100%;">
+              </div>
+              <div class="uk-card-body">
+                <h3 class="el-title uk-margin uk-card-title uk-margin-remove-adjacent uk-margin-small-bottom">
+                  Journal Report 1, number of successful full-text article requests by month and journal.
+                </h3>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <!-- RIGHT HELP CONTENT -->
+    <aside-help-content #rightHelperContent [position]="'right'"
+                        [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
+    </aside-help-content>
+
+  </div>
+
+  <!-- BOTTOM HELP CONTENT -->
+  <help-content #bottomHelperContent [position]="'bottom'"
+                [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
+  </help-content>
+
+</div>
+
+

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

@@ -0,0 +1,65 @@
+import { Component, OnInit } from '@angular/core';
+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";
+
+@Component({
+  selector: 'metrics-usagestats',
+  templateUrl: 'metrics-usagestats.component.html'
+})
+
+export class MetricsUsagestatsComponent implements OnInit {
+
+  errorMessage: string;
+  title = 'Get usage counts report';
+
+  repo: Repository;
+
+  constructor(private repoService: RepositoryService,
+              private sharedService: SharedService,
+              private authService: AuthenticationService,
+              private route: ActivatedRoute,
+              private router: Router) {}
+
+  ngOnInit() {
+
+    if(this.sharedService.getRepository()) {
+      this.repo = this.sharedService.getRepository();
+      this.title = this.title + ' for ' + this.repo.officialName;
+    }
+
+    this.sharedService.repository$.subscribe(
+      r => {
+        this.repo = r;
+        this.title = this.title + ' for ' + this.repo.officialName;
+      }
+    );
+
+    // this.getRepo();
+    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");
+  }
+
+  // getRepo() {
+  //
+  //   if (this.repoId) {
+  //     this.repoService.getRepositoryById(this.repoId).subscribe(
+  //       repo => this.repo = repo,
+  //       error => {
+  //         console.log(error);
+  //         this.errorMessage = 'The repository could not be retrieved';
+  //       },
+  //       () => {
+  //         this.title = this.title + ' for ' + this.repo.officialName;
+  //         console.log(this.authService.getUserEmail(), this.repo.registeredBy);
+  //       }
+  //     );
+  //   }
+  // }
+
+}