D-Net

import { MetricsUsagestatsReportResultsComponent } from './metrics-usagestats-report-results.component';

    MetricsUsagestatsComponent,

    MetricsUsagestatsReportResultsComponent

import { MetricsUsagestatsReportResultsComponent } from './metrics-usagestats-report-results.component';

    },

    {

      path: 'usagestats-report-results',

      component: MetricsUsagestatsReportResultsComponent

<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">

    <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-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="repoResponse" class="uk-margin-top">

                <h3>Report Results</h3>

              </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>

import { Component, OnInit } from '@angular/core';

import { ActivatedRoute } from '@angular/router';

import { Http, RequestOptions, Headers } from '@angular/http';

import { AuthenticationService } from '../../services/authentication.service';

import { UsagestatsService } from '../../services/usagestats.service';

import { ReportResponse } from '../../domain/usageStatsClasses';

@Component({

  selector: 'metrics-usagestats-report-results',

  templateUrl: 'metrics-usagestats-report-results.component'

})

export class MetricsUsagestatsReportResultsComponent implements OnInit {

  errorMessage: string;

  repoResponse: ReportResponse;

  constructor(private route: ActivatedRoute,

              private authService: AuthenticationService,

              private usageService: UsagestatsService) {}

  ngOnInit() {

    this.getReportResponse();

  }

  getReportResponse() {

    let headers = new Headers({ 'Content-Type': 'application/json' });

    let httpOptions = new RequestOptions({ headers: headers });

    let params = new URLSearchParams();

    this.route.queryParams.subscribe( qparams => {

      if (qparams['pretty']) {

        params.append('Pretty', 'Pretty');

      }

      params.append('Report', qparams['report']);

      params.append('Release', '4');

      params.append('RequestorID', this.authService.getUserEmail());

      params.append('BeginDate', qparams['beginDate']);

      params.append('EndDate', qparams['endDate']);

      params.append('RepositoryIdentifier', qparams['repoId']);

      params.append('ItemIdentifier', qparams['itemIdentifier']);

      params.append('Granularity', qparams['granularity']);

    });

    this.usageService.getReportResponse(params).subscribe(

      responseWrapper => {

        this.repoResponse = responseWrapper.ReportResponse

      },

      error => {

        this.errorMessage = 'Failed to load the report results!';

      }

    );

  }

}

        <h1 class="uk-h2">{{ piwik ? piwik.repositoryName : 'Metrics'}}</h1>

  shownRepoId: string;

  shownOpenaireId: string;

    this.getRepoId();

  getRepoId() {

    this.repoId = this.route.snapshot.paramMap.get('id');

    this.shownRepoId = this.convertToDisplayedFormat(this.repoId);

    console.log(`shownRepoId is ${this.repoId}`);

  }

  convertToDisplayedFormat(input: string) {

    const tempArray = this.repoId.split('____::');

    return tempArray[0] + ':' + tempArray[1];

  }

        this.shownOpenaireId = this.convertToDisplayedFormat(this.repo.piwikInfo.openaireId);

/*    let params = new URLSearchParams();

    params.append('RepositoryIdentifier', this.shownRepoId);

    window.open(url,"_blank");*/

    this.router.navigate(['usagestats-report-results'], {

      queryParams: {

        report: this.chosen_report,

        beginDate: this.beginDate,

        endDate: this.endDate,

        repoId: this.shownRepoId,

        itemIdentifier: this.itemIdentifier,

        granularity: this.granularity,

        pretty: this.pretty

      }

    })

                <div class="resultsPageLabel">page {{ (totalPages > 0) ? currentPage+1 : 0 }} of {{ totalPages }}</div>

                <div class="resultsPageLabel">page {{ (totalPages > 0) ? currentPage+1 : 0 }} of {{ totalPages }}</div>

                <div class="resultsPageLabel">page {{ (eventsPage.totalPages > 0) ? currentPage+1 : 0 }} of {{ eventsPage.totalPages }}</div>

                <div class="resultsPageLabel">page {{ (eventsPage.totalPages > 0) ? currentPage+1 : 0 }} of {{ eventsPage.totalPages }}</div>

              <div class="resultsPageLabel">page {{ (eventsPage.totalPages > 0) ? currentPage+1 : 0 }} of {{ eventsPage.totalPages }}</div>

              <div class="resultsPageLabel">page {{ (eventsPage.totalPages > 0) ? currentPage+1 : 0 }} of {{ eventsPage.totalPages }}</div>

/*

* Created by myrto on 05/11/2018

*/

import { Injectable } from '@angular/core';

import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/map';

import { Http, Headers, RequestOptions, Response } from '@angular/http';

import { ReportResponseWrapper } from '../domain/usageStatsClasses';

const headers = new Headers({ 'Content-Type': 'application/json' });

const httpOptions = new RequestOptions({ headers: headers });

@Injectable ()

export class UsagestatsService {

  /*private apiUrl = `${apiUrl}/piwik/`;*/

  private apiUrl = process.env.API_ENDPOINT + '/piwik/';

  constructor(private http: Http) { }

  getReportResponse(params: URLSearchParams): Observable<ReportResponseWrapper> {

    let url = `http://beta.services.openaire.eu/usagestats/sushilite/GetReport/?${params}`;

    console.log(`knocking on: ${url}`);

    httpOptions.withCredentials = true;

    return this.http.get(url, httpOptions)

      .map(res => <ReportResponseWrapper>res.json())

      .catch(this.handleError);

  }

  private handleError(error: Response | any) {

    // In a real world app, we might use a remote logging infrastructure

    // We'd also dig deeper into the error to get a better message

    let errMsg = "";

    console.log('E R R O R !!!');

    console.log(error);

    if (error instanceof Response) {

      const body = error.text() || '';

      //const err = body.error || JSON.stringify(body);

      errMsg = `${error.status} - ${error.statusText || ''} ${body}`;

    } else {

      errMsg = (error.message) ? error.message :

        error.status ? `${error.status} - ${error.statusText}` : 'Server error';

      console.error(errMsg); // log to console instead

    }

    return Observable.throw(errMsg);

  }

}

/*export const apiUrl = 'http://194.177.192.121:8380/repomanager-service-dev';*/

export const apiUrl = 'http://aleka.athenarc.gr:8380/repomanager-service-dev';

/*export const loginUrl = 'http://194.177.192.121:8380/repomanager-service-dev/openid_connect_login';*/

export const loginUrl = 'http://aleka.athenarc.gr:8380/repomanager-service-dev/openid_connect_login';

// Generated using typescript-generator version 1.29.366 on 2018-05-11 15:13:15.

export class Contact {

  "E-mail": string;

  Contact: string;

}

export class Customer {

  ID: string;

  ReportItems: ReportItem[];

}

export class Filter {

  Name: string;

  Value: string;

}

export class Filters {

  UsageDateRange: UsageDateRange;

  Filter: Filter[];

  ReportAttribute: Filter[];

}

export class Instance {

  MetricType: string;

  Count: string;

}

export class ItemIdentifier {

  Type: string;

  Value: string;

}

export class ItemPerformance {

  Period: Period;

  Category: string;

  Instance: Instance[];

}

export class Period {

  Begin: string;

  End: string;

}

export class Report {

  "@Created": string;

  "@Version": string;

  "@Name": string;

  Vendor: Vendor;

  Customer: Customer;

}

export class ReportDefinition {

  "@Name": string;

  "@Release": string;

  Filters: Filters;

}

export class ReportException {

  "@Created": string;

  Number: string;

  Severity: string;

  Message: string;

  Data: string;

}

export class ReportItem {

  ItemIdentifier: ItemIdentifier[];

  ItemPublisher: string;

  ItemPlatform: string;

  ItemDataType: string;

  ItemName: string;

  ItemPerformance: ItemPerformance[];

}

export class ReportResponse {

  "@Created": string;

  Exception: ReportException[];

  Requestor: Requestor;

  ReportDefinition: ReportDefinition;

  Report: ReportWrapper;

}

export class ReportResponseWrapper {

  ReportResponse: ReportResponse;

}

export class ReportWrapper {

  Report: Report;

}

export class Requestor {

  ID: string;

}

export class UsageDateRange {

  Begin: string;

  End: string;

}

export class BaseRepository {

}

export class UsageReport extends BaseRepository {

}

export class Vendor {

  Contact: Contact;

  Name: string;

}

import { UsagestatsService } from './services/usagestats.service';

    UsagestatsService,