MaDgIK
/
uoa-repository-manager-ui
13
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
uoa-repository-manager-ui/src/app/pages/repository/metrics/metrics-usagestats-report-r...

452 lines
21 KiB
HTML
Executable File
Raw Blame History

<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>
Reference in New Issue View Git Blame Copy Permalink