Chocobozzz/PeerTube

<div class="sub-title-container">
  <div class="sub-title">
    <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
    <h1 i18n>Logs</h1>
  </div>
</div>

<div class="header">

  <div>
    <label i18n for="log-type">Log type</label>

    <div class="peertube-select-container">
      <select id="log-type" [(ngModel)]="logType" (ngModelChange)="refresh()" class="form-control">
        <option *ngFor="let logTypeChoice of logTypeChoices" [value]="logTypeChoice.id">{{ logTypeChoice.label }}</option>
      </select>
    </div>
  </div>

  @if (!isAuditLog()) {
    <div>
      <label i18n for="log-start-date">Start date</label>

      <my-select-options inputId="log-start-date" [items]="timeChoices" [(ngModel)]="startDate" (ngModelChange)="refresh()">
        <ng-template ptTemplate="item" let-item>
          {{ item.label }} ({{ item.id | date: item.dateFormat }} - <span i18n>now</span>)
        </ng-template>
      </my-select-options>
    </div>

    <div>
      <label i18n for="log-level">Log level</label>

      <my-select-options inputId="log-level" [items]="levelChoices" [(ngModel)]="level" (ngModelChange)="refresh()">
        <ng-template ptTemplate="item" let-item>
          <span class="level-choice me-1" [ngClass]="item.id">&#11044;</span> {{ item.label }}
        </ng-template>
      </my-select-options>
    </div>

    <div>
      <label i18n for="log-tags">Filter logs by tags</label>

      <my-select-tags
        *ngIf="!isAuditLog()"
        inputId="log-tags"
        i18n-placeholder placeholder="Example: ffmpeg, api"
        [(ngModel)]="tagsOneOf" (ngModelChange)="refresh()"
      ></my-select-tags>
    </div>
  }

  <my-button class="mt-auto" i18n-label label="Refresh" icon="refresh" (click)="refresh()"></my-button>
</div>

<div class="logs">
  <div *ngIf="loading" i18n>Loading...</div>

  <div #logsElement>
    <my-copy-button
      *ngIf="logs.length !== 0"
      i18n-notification notification="Logs copied" i18n-title title="Copy logs"
      withBorder="true" [elementContent]="logsContent"
    ></my-copy-button>

    <div *ngIf="!loading && logs.length === 0" i18n>No log.</div>

    <div #logsContent>
      <div *ngFor="let log of logs" class="log-row" [ngClass]="{ error: log.level === 'error', warn: log.level === 'warn' }">
        <span class="log-level">{{ log.level }}</span>

        <span class="log-date">[{{ log.localeDate }}]</span>

        <strong class="log-by" *ngIf="log.by" i18n>By {{ log.by }} -></strong>
        <strong class="log-domain-action" *ngIf="log.domain">{{ log.domain }} -> {{ log.action }}</strong>

        {{ log.message }}

        <pre>{{ log.meta }}</pre>
      </div>
    </div>
  </div>
</div>