paperless-ngx/src-ui/src/app/components/admin/logs/logs.component.html

<pngx-page-header
  title="Logs"
  i18n-title
  info="Review the log files for the application and for email checking."
  i18n-info>
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch" [(ngModel)]="autoRefreshEnabled">
    <label class="form-check-label" for="autoRefreshSwitch" i18n>Auto refresh</label>
  </div>
</pngx-page-header>

<ul ngbNav #nav="ngbNav" [(activeId)]="activeLog" (activeIdChange)="reloadLogs()" class="nav-tabs">
  @for (logFile of logFiles; track logFile) {
    <li [ngbNavItem]="logFile">
      <a ngbNavLink>
        {{logFile}}.log
      </a>
    </li>
  }
  @if (loading || !logFiles.length) {
    <div class="ps-2 d-flex align-items-center">
      <div class="spinner-border spinner-border-sm me-2" role="status"></div>
      @if (!logFiles.length) {
        <ng-container i18n>Loading...</ng-container>
      }
    </div>
  }
</ul>

<div [ngbNavOutlet]="nav" class="mt-2"></div>

<div class="bg-dark p-3 text-light font-monospace log-container" #logContainer>
  @if (loading && logFiles.length) {
    <div>
      <div class="spinner-border spinner-border-sm me-2" role="status"></div>
      <ng-container i18n>Loading...</ng-container>
    </div>
  }
  @for (log of logs; track $index) {
    <p class="m-0 p-0 log-entry-{{getLogLevel(log)}}">{{log}}</p>
  }
</div>