All files / src/app/components/events events.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
172x
344x
 
344x
 
344x
 
47x
 
44x
 
3x
3x
3x
3x
 
 
 
3x
3x
3x
3x
 
3x
332x
706x
706x
706x
42x
 
 
3x
 
<app-loader *ngIf="!eventsResponse && !error"></app-loader>
<app-error *ngIf="error" [error]="error"></app-error>
 
<app-empty-placeholder *ngIf="eventsResponse && eventsResponse.items.length===0"></app-empty-placeholder>
 
<div *ngIf="eventsResponse && eventsResponse.items.length>0">
 
<p-table [value]="eventsResponse.items" [tableStyle]="{ 'min-width': '50rem' }"  [paginator]="true" [(rows)]="limit" [rowsPerPageOptions]="filteredRowsPerPageOptions"
[showCurrentPageReport]="true" currentPageReportTemplate="{first} - {last} of {totalRecords} events"  [rowHover]="true" [loading]="isLoading"
[lazy]="true" (onLazyLoad)="loadEvents($event)" [totalRecords]="eventsResponse.total" [first]="offset" (onPage)="onTableChange($event)">
  <ng-template pTemplate="caption">
    <div class="flex align-items-center justify-content-between">
        Events
        <p-button icon="pi pi-refresh" (onClick)="getData()"></p-button>
    </div>
</ng-template>
  <ng-template pTemplate="header">
      <tr>
        <th pSortableColumn="timestamp" >Occurred <p-sortIcon field="timestamp"></p-sortIcon></th>
        <th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
        <th>Event rule</th>
      </tr>
  </ng-template>
  <ng-template pTemplate="body" let-event>
      <tr [routerLink]="['/events', event.id]">
          <td>{{ event.timestamp*1000 | date:'medium' }}</td>
          <td>{{ event.name }}</td>
          <td>{{ event.event_rule.name }}</td>
      </tr>
  </ng-template>
</p-table>
</div>