definma-ui/src/app/changelog/changelog.component.html

<div class="header">
  <rb-form-date-input name="dateInput" label="older than" [options]="{enableTime: true}"
                      [(ngModel)]="timestamp" (ngModelChange)="loadChangelog()">
  </rb-form-date-input>

  <rb-form-select name="pageSizeSelection" label="page size" [(ngModel)]="pageSize" (ngModelChange)="loadChangelog()">
    <option value="3">3</option>
    <option value="10">10</option>
    <option value="25">25</option>
    <option value="50">50</option>
    <option value="100">100</option>
    <option value="250">250</option>
    <option value="500">500</option>
  </rb-form-select>

  <button class="rb-btn rb-link" type="button" (click)="loadChangelog(1)">
    next page
    <span class="rb-ic  rb-ic-forward-right"></span>
  </button>
</div>

<rb-table ellipsis>
  <tr>
    <th>Date</th>
    <th>Action</th>
    <th>Data</th>
  </tr>
  <tr *ngFor="let entry of changelog; index as i" class="clickable" (click)="showDetails(i, sampleModal)">
    <td>{{entry.date}}</td>
    <td>{{entry.action}}</td>
    <td>{{entry.data | json}}</td>
  </tr>
</rb-table>

<ng-template #sampleModal>
  <h4>Date</h4>
  <p class="space-below">{{changelog[modalDetail].date}}</p>
  <h4>Action</h4>
  <p class="space-below">{{changelog[modalDetail].action}}</p>
  <h4>Collection</h4>
  <p class="space-below">{{changelog[modalDetail].collection}}</p>
  <h4>Conditions</h4>
  <p class="space-below">{{changelog[modalDetail].conditions | json}}</p>
  <h4>Data</h4>
  <p class="space-below">{{changelog[modalDetail].data | json}}</p>
</ng-template>