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>

<cdk-virtual-scroll-viewport
  itemSize="20"
  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>
  }
  <p *cdkVirtualFor="let log of logs"
     class="m-0 p-0"
     [ngClass]="'log-entry-' + log.level">
    {{log.message}}
  </p>
</cdk-virtual-scroll-viewport>