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

<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>
                      <!--<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>=0 ? aggr.numberOfRecords : 'NA' }}</span>
                      </div>
                    </li>
                    <li>
                      <div class="md-list-content">
                        <span class="md-list-heading">Completed Successfully</span>
                        <span class="uk-text-small uk-text-muted">{{ aggr.completedSuccessfully }}</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>