265 lines
16 KiB
HTML
265 lines
16 KiB
HTML
<ng-template #rules_analysis let-rules=rules>
|
|
<div *ngIf="rules?.length == 0" class="uk-margin-medium-top uk-text-center">No rules available</div>
|
|
<table *ngIf="rules?.length > 0" class="uk-margin-medium-top uk-table uk-table-middle uk-table-divider uk-table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th class="uk-width-auto uk-width-2-6@xl">Rule Name</th>
|
|
<th class="uk-text-center uk-width-auto uk-width-1-6@xl">FAIR Principles</th>
|
|
<!-- <th class="uk-text-center">Rule Weight</th>-->
|
|
<!-- <th class="uk-text-center"># Of Records</th>-->
|
|
<th class="uk-text-center uk-width-auto uk-width-1-6@xl">Success Rate</th>
|
|
<th class="uk-text-center uk-width-small uk-width-1-6@xl">Status</th>
|
|
<th class="uk-text-center uk-width-small uk-width-1-6@xl">Issues</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="uk-text-small">
|
|
<tr *ngFor="let ruleResult of rules">
|
|
<td>
|
|
<div>{{ruleResult.rule_name ? ruleResult.rule_name : '-'}}</div>
|
|
<div *ngIf="ruleResult.rule_description" class="uk-text-small uk-text-meta">{{ruleResult.rule_description}}</div>
|
|
</td>
|
|
<td class="uk-text-center uk-text-normal">
|
|
<!-- <span uk-tooltip="Findable">F</span>-->
|
|
<!-- <span>, </span>-->
|
|
<!-- <span uk-tooltip="Accessible">A</span>-->
|
|
<!-- <span>, </span>-->
|
|
<!-- <span uk-tooltip="Interoperable">I</span>-->
|
|
<!-- <span>, </span>-->
|
|
<!-- <span uk-tooltip="Reusable">R</span>-->
|
|
-
|
|
</td>
|
|
<!-- <td class="uk-text-center">{{(ruleResult.rule_weight != undefined && ruleResult.rule_weight != null) ? ruleResult.rule_weight : '-'}}</td>-->
|
|
<!-- <td class="uk-text-center">{{ruleResult.passed_records | number}}/{{(ruleResult.passed_records+ruleResult.failed_records) | number}}</td>-->
|
|
<td>
|
|
<div class="uk-text-xsmall">{{ruleResult.passed_records | number}}/{{jobResult.numberOfRecords | number}}</div>
|
|
<div class="uk-text-center">
|
|
<progress class="analysis-progress uk-progress uk-margin-remove-bottom" [value]="ruleResult.passed_records*100/jobResult.numberOfRecords" max="100"></progress>
|
|
<div class="uk-text-center uk-text-xsmall uk-text-bolder uk-text-primary"
|
|
style="position:relative; top: -18px; mix-blend-mode: color-burn">
|
|
{{ruleResult.passed_records*100/jobResult.numberOfRecords}}%
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="uk-text-center">
|
|
<span class="uk-label" [ngClass]="ruleResult.rule_status == Status.SUCCESS ? 'uk-label-success' : 'uk-label-danger'">{{ruleResult.rule_status}}</span>
|
|
</td>
|
|
<td class="uk-text-center">
|
|
<a *ngIf="ruleResult.has_warnings" class="uk-text-warning" (click)="getWarnings(ruleResult)">Warnings</a>
|
|
<div *ngIf="ruleResult.has_warnings && (ruleResult.has_errors || ruleResult.internal_error)">&</div>
|
|
<a *ngIf="ruleResult.has_errors || ruleResult.internal_error" class="uk-text-danger" (click)="getErrors(ruleResult)">Errors</a>
|
|
<!-- <div *ngIf="ruleResult.internal_error" class="uk-text-danger">error</div>-->
|
|
<div *ngIf="!ruleResult.has_warnings && !ruleResult.has_errors && !ruleResult.internal_error">
|
|
<icon class="uk-text-success" name="check" ratio="1"></icon>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</ng-template>
|
|
|
|
<div id="page_content">
|
|
<div id="page_content_header">
|
|
<div class="analysis uk-grid uk-margin-remove-left" uk-grid>
|
|
<div class="uk-width-expand uk-container uk-container-large">
|
|
<div id="analysis-center-content" class="uk-width-expand uk-section uk-section-small uk-container uk-container-large">
|
|
<!-- <div class="uk-section uk-section-small">-->
|
|
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
|
|
|
|
<div class="uk-margin-large-top">
|
|
<h1 class="uk-h5">Validation Result Analysis</h1>
|
|
<hr>
|
|
|
|
<div *ngIf="!validationResult || validationResult.size == 0" class="uk-alert uk-alert-primary">
|
|
No validated metadata record yet
|
|
</div>
|
|
<div *ngIf="validationResult?.size > 0">
|
|
<ul uk-tab>
|
|
<li *ngFor="let result of getKeys(validationResult)" class="uk-width-auto@l uk-width-medium">
|
|
<a><span class="uk-text-truncate" [attr.uk-tooltip]="result">{{result}}</span></a></li>
|
|
</ul>
|
|
|
|
<ul class="uk-switcher uk-margin">
|
|
<li *ngFor="let result of getValues(validationResult)">
|
|
<ul class="uk-subnav uk-subnav-pill-alt uk-margin" uk-switcher>
|
|
<li class="uk-active"><a>All Rules ({{result.analysisResult.length | number}})</a></li>
|
|
<li><a>Successful ({{result.successfulAnalysisResult.length | number}})</a></li>
|
|
<li><a>Warnings ({{result.warningAnalysisResult.length | number}})</a></li>
|
|
<li><a>Failed ({{result.failedAnalysisResult.length | number}})</a></li>
|
|
</ul>
|
|
<ul class="uk-switcher uk-margin">
|
|
<li>
|
|
<ng-container *ngTemplateOutlet="rules_analysis; context: {rules: result.analysisResult}"></ng-container>
|
|
</li>
|
|
<li>
|
|
<ng-container *ngTemplateOutlet="rules_analysis; context: {rules: result.successfulAnalysisResult}"></ng-container>
|
|
</li>
|
|
<li>
|
|
<ng-container *ngTemplateOutlet="rules_analysis; context: {rules: result.warningAnalysisResult}"></ng-container>
|
|
</li>
|
|
<li>
|
|
<ng-container *ngTemplateOutlet="rules_analysis; context: {rules: result.failedAnalysisResult}"></ng-container>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
<!-- <h6>Validation Result Analysis</h6>-->
|
|
</div>
|
|
|
|
<modal-alert #warningsModal large="true" (alertOutput)="warningsModalOpen=false" classTitle="uk-border-bottom">
|
|
<div *ngIf="warningsModalOpen" class="uk-modal-body uk-height-min-medium uk-width-expand">
|
|
<div *ngIf="warnings.length == 0">No warnings available</div>
|
|
<div *ngIf="warnings.length > 0">
|
|
<div class="uk-h6">Warnings list ({{warnings.length | number}} warning<span *ngIf="warnings.length > 1">s</span>)</div>
|
|
<ul uk-accordion class="uk-accordion">
|
|
<li *ngFor="let message of warnings" class="accordion-warning uk-padding-small">
|
|
<a class="uk-accordion-title">
|
|
<div class="uk-flex uk-flex-top">
|
|
<icon class="uk-text-warning" [flex]="true" name="warning" ratio="2"></icon>
|
|
<div class="uk-margin-left">
|
|
<div class="uk-text-warning uk-text-default">{{message.records.length | number}} Records - {{message.description}}</div>
|
|
<div class="uk-text-normal uk-text-xsmall uk-margin-small-top uk-flex">
|
|
<div class="uk-text-italic uk-text-meta">Try:</div>
|
|
<div class="uk-margin-small-left">
|
|
<div class="uk-text-truncate">
|
|
1. Lorem ipsum
|
|
</div>
|
|
<div class="uk-text-truncate">
|
|
2. Lorem ipsum
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<div class="uk-accordion-content">
|
|
<hr>
|
|
<div *ngFor="let record of message.records" class="uk-margin-medium-left">
|
|
<!-- {Base OAI-PMH url}?verb=GetRecord&metadataPrefix={the metadata prefix for each rule*}&identifier={oai identifier, which you have}-->
|
|
<!-- *-->
|
|
<a [href]="jobResult.baseUrl + '?verb=GetRecord&metadataPrefix=' + guidelinesLabelToPrefix.get(jobResult.guidelines) + '&identifier=' + record" target="_blank" class="uk-margin-left">{{record}}</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</modal-alert>
|
|
|
|
<modal-alert #errorsModal large="true" (alertOutput)="errorsModalOpen=false" classTitle="uk-border-bottom">
|
|
<div *ngIf="errorsModalOpen" class="uk-modal-body uk-height-min-medium uk-width-expand">
|
|
<div *ngIf="errors.length == 0 && !internal_error">No errors available</div>
|
|
<div *ngIf="internal_error" [class.uk-margin-medium-bottom]="errors.length > 0">
|
|
<div class="uk-h6">Internal error</div>
|
|
<div class="uk-alert uk-alert-danger">{{internal_error}}</div>
|
|
</div>
|
|
|
|
<div *ngIf="errors.length > 0">
|
|
<div class="uk-h6">Errors list ({{errors.length | number}} error<span *ngIf="errors.length > 1">s</span>)</div>
|
|
<ul uk-accordion class="uk-accordion">
|
|
<li *ngFor="let message of errors" class="accordion-danger uk-padding-small">
|
|
<a class="uk-accordion-title">
|
|
<div class="uk-flex uk-flex-top">
|
|
<icon class="uk-text-danger" [flex]="true" name="cancel" ratio="2"></icon>
|
|
<div class="uk-margin-left">
|
|
<div class="uk-text-danger uk-text-default">{{message.records.length | number}} Records - {{message.description}}</div>
|
|
<div class="uk-text-normal uk-text-xsmall uk-margin-small-top uk-flex">
|
|
<div class="uk-text-italic uk-text-meta">Try:</div>
|
|
<div class="uk-margin-small-left">
|
|
<div class="uk-text-truncate">
|
|
1. Lorem ipsum
|
|
</div>
|
|
<div class="uk-text-truncate">
|
|
2. Lorem ipsum
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<div class="uk-accordion-content">
|
|
<hr>
|
|
<div *ngFor="let record of message.records" class="uk-margin-medium-left">
|
|
<a [href]="jobResult.baseUrl + '?verb=GetRecord&metadataPrefix=' + guidelinesLabelToPrefix.get(jobResult.guidelines) + '&identifier=' + record" target="_blank" class="uk-margin-left">{{record}}</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- <div *ngIf="currentRule.internal_error">Internal error: {{currentRule.internal_error}}</div>-->
|
|
</div>
|
|
</modal-alert>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="jobResult" id="analysis-right-sidebar" class="uk-width-1-3 uk-width-1-4@l uk-padding-remove uk-text-small">
|
|
<div class="uk-sticky" uk-sticky="end: true" [attr.offset]="offset">
|
|
<div class="uk-overflow-auto uk-height-1-1 uk-padding">
|
|
<div class="uk-card uk-card-default">
|
|
<div class="uk-card-body uk-card-small">
|
|
<div class="uk-flex uk-flex-middle">
|
|
<icon name="gavel" ratio="1.2" class="uk-text-background"></icon>
|
|
<div class="uk-margin-left">
|
|
<div class="uk-text-meta uk-text-xsmall">Guidelines</div>
|
|
<div class="uk-text-primary uk-text-bold uk-text-default">{{jobResult.guidelines}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="uk-margin-top uk-card uk-card-default">
|
|
<div class="uk-card-body uk-card-small">
|
|
<div class="uk-flex uk-flex-top">
|
|
<icon name="today" ratio="1.2" class="uk-text-background"></icon>
|
|
<div class="uk-margin-left">
|
|
<div class="uk-text-meta uk-text-xsmall">Started</div>
|
|
<div class="uk-text-primary uk-text-bold uk-text-default">{{jobResult.startDate | date: 'yyyy-MM-dd, HH:mm:ss'}}</div>
|
|
<div class="uk-text-meta uk-text-xsmall uk-margin-small-top"><span *ngIf="!jobResult.endDate">Not yet </span>Ended</div>
|
|
<div *ngIf="jobResult.endDate" class="uk-text-primary uk-text-bold uk-text-default">{{jobResult.endDate | date: 'yyyy-MM-dd, HH:mm:ss'}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="uk-margin-top uk-card uk-card-default">
|
|
<div class="uk-card-body uk-card-small">
|
|
<div class="uk-flex uk-flex-middle">
|
|
<icon name="schedule" ratio="1.2" class="uk-text-background"></icon>
|
|
<div class="uk-margin-left">
|
|
<div class="uk-text-meta uk-text-xsmall">Duration</div>
|
|
<div class="uk-text-primary uk-text-bold uk-text-default" [title]="jobResult.progress" [attr.uk-tooltip]="!jobResult.endDate ? 'cls: uk-active' : 'cls: uk-invisible'">
|
|
<span *ngIf="jobDuration.years">{{jobDuration.years}} years</span>
|
|
<span *ngIf="jobDuration.years && (jobDuration.months || jobDuration.days || jobDuration.hours || jobDuration.minutes || jobDuration.seconds)"> & </span>
|
|
<span *ngIf="jobDuration.months">{{jobDuration.months}} months</span>
|
|
<span *ngIf="jobDuration.months && (jobDuration.days || jobDuration.hours || jobDuration.minutes || jobDuration.seconds)"> & </span>
|
|
<span *ngIf="jobDuration.days">{{jobDuration.days}} days</span>
|
|
<span *ngIf="jobDuration.days && (jobDuration.hours || jobDuration.minutes || jobDuration.seconds)"> & </span>
|
|
<span *ngIf="jobDuration.hours">{{jobDuration.hours}} hours</span>
|
|
<span *ngIf="jobDuration.hours && (jobDuration.minutes || jobDuration.seconds)"> & </span>
|
|
<span *ngIf="jobDuration.minutes">{{jobDuration.minutes}} minutes</span>
|
|
<span *ngIf="jobDuration.minutes && jobDuration.seconds"> & </span>
|
|
<span *ngIf="jobDuration.seconds">{{jobDuration.seconds}} seconds</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <hr class="uk-margin-medium-top uk-margin-medium-bottom">-->
|
|
<!-- <div class="uk-flex uk-flex-middle">-->
|
|
<!-- <div class="uk-progress-circle" [attr.percentage]="jobResult.score" [style]="'--percentage: '+jobResult.score"></div>-->
|
|
<!-- <div class="uk-margin-left uk-width-expand">-->
|
|
<!-- <div>Validation Score</div>-->
|
|
<!-- <div class="uk-text-left uk-width-1-1">-->
|
|
<!-- <a class="uk-display-inline-block uk-width-auto uk-button uk-button-text uk-text-normal uk-text-xsmall" target="_blank" [href]="">-->
|
|
<!-- <div class="uk-text-truncate">Guidelines Compliance</div>-->
|
|
<!-- </a>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|