abstruse/src/app/components/app-logs/app-logs.component.html

Abstruse CI

<app-header></app-header>

<nav class="nav sub-nav">
  <div class="container">
    <div class="nav-left">
      <span class="nav-item">
        <h1>System Logs</h1>
      </span>
    </div>
    <div class="nav-center">

    </div>
    <div class="nav-right">
      <div class="group-buttons bright">
        <button class="group-button" [ngClass]="{ 'is-active': show === 'all' }" (click)="changeShowType('all')">All Logs</button>
        <button class="group-button" [ngClass]="{ 'is-active': show === 'info' }" (click)="changeShowType('info')">Info</button>
        <button class="group-button" [ngClass]="{ 'is-active': show === 'warning' }" (click)="changeShowType('warning')">Warnings</button>
        <button class="group-button" [ngClass]="{ 'is-active': show === 'error' }" (click)="changeShowType('error')">Errors</button>
      </div>
    </div>
  </div>
</nav>

<div class="container">
  <div class="columns">
    <div class="column is-12">
      <div class="content">
        <div class="container" *ngIf="loading">
          <img src="/assets/images/icons/flickr.svg" class="main-loader">
        </div>

        <div class="columns is-multiline" *ngIf="!loading">
          <div class="column is-12">
            <div class="columns" *ngIf="!logs?.length">
              <div class="column is-4 is-offset-4">
                <div class="message">
                  <p class="has-text-centered">No logs found.</p>
                </div>
              </div>
            </div>

            <div class="log-lines dracula-ansi-theme" *ngIf="logs?.length">
              <div class="columns log-line" *ngFor="let line of logs; let i = index;" [ngClass]="{ green: line.type === 'info', red: line.type === 'error', yellow: line.type === 'warning' }">
                <div class="column is-10">
                  <span [innerHTML]="line.message"></span>
                </div>
                <div class="column is-2">
                  <span class="time">{{ line.created_at | date:'y MMM d, HH:mm:ss' }}</span>
                </div>
              </div>
            </div>
            <div layout-align="center" *ngIf="logs?.length" align="center" class="more-button-container">
              <button type="button" class="button" name="btn-loadmore" (click)="fetch($event)" [class.is-loading]="fetching" [class.is-hidden]="hideMoreButton">
                <img src="/assets/images/icons/more.svg">
                Load more
              </button>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>