Add logs page in client

13 files changed, 326 insertions, 11 deletions

diff --git a/client/src/app/+admin/system/index.ts b/client/src/app/+admin/system/index.ts
new file mode 100644
index 000000000..226d999d2
--- /dev/null
+++ b/client/src/app/+admin/system/index.ts
@@ -0,0 +1,4 @@
+export * from './jobs'
+export * from './logs'
+export * from './system.component'
+export * from './system.routes'
diff --git a/client/src/app/+admin/system/jobs/index.ts b/client/src/app/+admin/system/jobs/index.ts
index c0e0cc95d..486a745e4 100644
--- a/client/src/app/+admin/system/jobs/index.ts
+++ b/client/src/app/+admin/system/jobs/index.ts
@@ -1,4 +1,2 @@
-export * from './shared'
-export * from './jobs-list'
-export * from './job.routes'
-export * from './job.component'
+export * from './job.service'
+export * from './jobs.component'
diff --git a/client/src/app/+admin/system/jobs/jobs.component.ts b/client/src/app/+admin/system/jobs/jobs.component.ts
index b265e1dd6..ebfb52779 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.ts
+++ b/client/src/app/+admin/system/jobs/jobs.component.ts
@@ -5,15 +5,15 @@ import { SortMeta } from 'primeng/primeng'
 import { Job } from '../../../../../../shared/index'
 import { JobState } from '../../../../../../shared/models'
 import { RestPagination, RestTable } from '../../../shared'
-import { JobService } from '../shared'
+import { JobService } from './job.service'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
-  selector: 'my-jobs-list',
-  templateUrl: './jobs-list.component.html',
-  styleUrls: [ './jobs-list.component.scss' ]
+  selector: 'my-jobs',
+  templateUrl: './jobs.component.html',
+  styleUrls: [ './jobs.component.scss' ]
 })
-export class JobsListComponent extends RestTable implements OnInit {
+export class JobsComponent extends RestTable implements OnInit {
   private static JOB_STATE_LOCAL_STORAGE_STATE = 'jobs-list-state'
 
   jobState: JobState = 'waiting'
@@ -58,12 +58,12 @@ export class JobsListComponent extends RestTable implements OnInit {
   }
 
   private loadJobState () {
-    const result = peertubeLocalStorage.getItem(JobsListComponent.JOB_STATE_LOCAL_STORAGE_STATE)
+    const result = peertubeLocalStorage.getItem(JobsComponent.JOB_STATE_LOCAL_STORAGE_STATE)
 
     if (result) this.jobState = result as JobState
   }
 
   private saveJobState () {
-    peertubeLocalStorage.setItem(JobsListComponent.JOB_STATE_LOCAL_STORAGE_STATE, this.jobState)
+    peertubeLocalStorage.setItem(JobsComponent.JOB_STATE_LOCAL_STORAGE_STATE, this.jobState)
   }
 }
diff --git a/client/src/app/+admin/system/logs/index.ts b/client/src/app/+admin/system/logs/index.ts
new file mode 100644
index 000000000..7b56d4237
--- /dev/null
+++ b/client/src/app/+admin/system/logs/index.ts
@@ -0,0 +1,2 @@
+export * from './logs.component'
+export * from './logs.service'
diff --git a/client/src/app/+admin/system/logs/log-row.model.ts b/client/src/app/+admin/system/logs/log-row.model.ts
new file mode 100644
index 000000000..9bc7dafdd
--- /dev/null
+++ b/client/src/app/+admin/system/logs/log-row.model.ts
@@ -0,0 +1,21 @@
+import { LogLevel } from '@shared/models/server/log-level.type'
+import omit from 'lodash-es/omit'
+
+export class LogRow {
+  date: Date
+  localeDate: string
+  level: LogLevel
+  message: string
+  meta: string
+
+  constructor (row: any) {
+    this.date = new Date(row.timestamp)
+    this.localeDate = this.date.toLocaleString()
+    this.level = row.level
+    this.message = row.message
+
+    const metaObj = omit(row, 'timestamp', 'level', 'message', 'label')
+
+    if (Object.keys(metaObj).length !== 0) this.meta = JSON.stringify(metaObj, undefined, 2)
+  }
+}
diff --git a/client/src/app/+admin/system/logs/logs.component.html b/client/src/app/+admin/system/logs/logs.component.html
new file mode 100644
index 000000000..45723a655
--- /dev/null
+++ b/client/src/app/+admin/system/logs/logs.component.html
@@ -0,0 +1,31 @@
+<div class="header">
+  <div class="peertube-select-container">
+    <select [(ngModel)]="startDate" (ngModelChange)="refresh()">
+      <option *ngFor="let timeChoice of timeChoices" [value]="timeChoice.id">{{ timeChoice.label }}</option>
+    </select>
+  </div>
+
+  <div class="peertube-select-container">
+    <select [(ngModel)]="level" (ngModelChange)="refresh()">
+      <option *ngFor="let levelChoice of levelChoices" [value]="levelChoice.id">{{ levelChoice.label }}</option>
+    </select>
+  </div>
+
+  <my-button i18n-label label="Refresh" icon="refresh" (click)="refresh()"></my-button>
+</div>
+
+<div class="logs">
+  <div *ngIf="loading">Loading...</div>
+
+  <div #logsElement>
+    <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>
+
+      {{ log.message }}
+
+      {{ log.meta }}
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/+admin/system/logs/logs.component.scss b/client/src/app/+admin/system/logs/logs.component.scss
new file mode 100644
index 000000000..ab00fb5ae
--- /dev/null
+++ b/client/src/app/+admin/system/logs/logs.component.scss
@@ -0,0 +1,48 @@
+@import '_variables';
+@import '_mixins';
+
+.logs {
+  font-family: monospace;
+  font-size: 13px;
+  max-height: 500px;
+  overflow-y: auto;
+  background: rgba(0, 0, 0, 0.03);
+  padding: 20px;
+
+  .log-row {
+    margin-top: 1px;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.07);
+    }
+  }
+
+  .log-level {
+    font-weight: $font-semibold;
+    margin-right: 5px;
+  }
+
+  .warn {
+    color: $orange-color;
+  }
+
+  .error {
+    color: $red;
+  }
+}
+
+.header {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 10px;
+
+  .peertube-select-container {
+    @include peertube-select-container(150px);
+  }
+
+  my-button,
+  .peertube-select-container {
+    margin-left: 10px;
+  }
+}
+
diff --git a/client/src/app/+admin/system/logs/logs.component.ts b/client/src/app/+admin/system/logs/logs.component.ts
new file mode 100644
index 000000000..17abb8409
--- /dev/null
+++ b/client/src/app/+admin/system/logs/logs.component.ts
@@ -0,0 +1,111 @@
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
+import { LogsService } from '@app/+admin/system/logs/logs.service'
+import { Notifier } from '@app/core'
+import { LogRow } from '@app/+admin/system/logs/log-row.model'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { LogLevel } from '@shared/models/server/log-level.type'
+
+@Component({
+  templateUrl: './logs.component.html',
+  styleUrls: [ './logs.component.scss' ]
+})
+export class LogsComponent implements OnInit {
+  @ViewChild('logsElement') logsElement: ElementRef<HTMLElement>
+
+  loading = false
+
+  logs: LogRow[] = []
+  timeChoices: { id: string, label: string }[] = []
+  levelChoices: { id: LogLevel, label: string }[] = []
+
+  startDate: string
+  level: LogLevel
+
+  constructor (
+    private logsService: LogsService,
+    private notifier: Notifier,
+    private i18n: I18n
+  ) { }
+
+  ngOnInit (): void {
+    this.buildTimeChoices()
+    this.buildLevelChoices()
+
+    this.load()
+  }
+
+  refresh () {
+    this.logs = []
+    this.load()
+  }
+
+  load () {
+    this.loading = true
+
+    this.logsService.getLogs(this.level, this.startDate)
+        .subscribe(
+          logs => {
+            this.logs = logs
+
+            setTimeout(() => {
+              this.logsElement.nativeElement.scrollIntoView({ block: 'end', inline: 'nearest' })
+            })
+          },
+
+          err => this.notifier.error(err.message),
+
+          () => this.loading = false
+        )
+  }
+
+  buildTimeChoices () {
+    const lastHour = new Date()
+    lastHour.setHours(lastHour.getHours() - 1)
+
+    const lastDay = new Date()
+    lastDay.setDate(lastDay.getDate() - 1)
+
+    const lastWeek = new Date()
+    lastWeek.setDate(lastWeek.getDate() - 7)
+
+    this.timeChoices = [
+      {
+        id: lastWeek.toISOString(),
+        label: this.i18n('Last week')
+      },
+      {
+        id: lastDay.toISOString(),
+        label: this.i18n('Last day')
+      },
+      {
+        id: lastHour.toISOString(),
+        label: this.i18n('Last hour')
+      }
+    ]
+
+    this.startDate = lastHour.toISOString()
+  }
+
+  buildLevelChoices () {
+    this.levelChoices = [
+      {
+        id: 'debug',
+        label: this.i18n('Debug')
+      },
+      {
+        id: 'info',
+        label: this.i18n('Info')
+      },
+      {
+        id: 'warn',
+        label: this.i18n('Warning')
+      },
+      {
+        id: 'error',
+        label: this.i18n('Error')
+      }
+    ]
+
+    this.level = 'info'
+  }
+}
diff --git a/client/src/app/+admin/system/logs/logs.service.ts b/client/src/app/+admin/system/logs/logs.service.ts
new file mode 100644
index 000000000..4db79a1fa
--- /dev/null
+++ b/client/src/app/+admin/system/logs/logs.service.ts
@@ -0,0 +1,33 @@
+import { catchError, map } from 'rxjs/operators'
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { Observable } from 'rxjs'
+import { environment } from '../../../../environments/environment'
+import { RestExtractor, RestService } from '../../../shared'
+import { LogRow } from '@app/+admin/system/logs/log-row.model'
+import { LogLevel } from '@shared/models/server/log-level.type'
+
+@Injectable()
+export class LogsService {
+  private static BASE_JOB_URL = environment.apiUrl + '/api/v1/server/logs'
+
+  constructor (
+    private authHttp: HttpClient,
+    private restService: RestService,
+    private restExtractor: RestExtractor
+  ) {}
+
+  getLogs (level: LogLevel, startDate: string, endDate?: string): Observable<any> {
+    let params = new HttpParams()
+    params = params.append('startDate', startDate)
+    params = params.append('level', level)
+
+    if (endDate) params.append('endDate', endDate)
+
+    return this.authHttp.get<any[]>(LogsService.BASE_JOB_URL, { params })
+               .pipe(
+                 map(rows => rows.map(r => new LogRow(r))),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+}
diff --git a/client/src/app/+admin/system/system.component.html b/client/src/app/+admin/system/system.component.html
new file mode 100644
index 000000000..345a101e6
--- /dev/null
+++ b/client/src/app/+admin/system/system.component.html
@@ -0,0 +1,11 @@
+<div class="admin-sub-header">
+  <div i18n class="form-sub-title">System</div>
+
+  <div class="admin-sub-nav">
+    <a i18n routerLink="jobs" routerLinkActive="active">Jobs</a>
+
+    <a i18n routerLink="logs" routerLinkActive="active">Logs</a>
+  </div>
+</div>
+
+<router-outlet></router-outlet>
diff --git a/client/src/app/+admin/system/system.component.scss b/client/src/app/+admin/system/system.component.scss
new file mode 100644
index 000000000..766d7853b
--- /dev/null
+++ b/client/src/app/+admin/system/system.component.scss
@@ -0,0 +1,4 @@
+.form-sub-title {
+  flex-grow: 0;
+  margin-right: 30px;
+}
diff --git a/client/src/app/+admin/system/system.component.ts b/client/src/app/+admin/system/system.component.ts
new file mode 100644
index 000000000..992d9c8af
--- /dev/null
+++ b/client/src/app/+admin/system/system.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core'
+
+@Component({
+  templateUrl: './system.component.html',
+  styleUrls: [ './system.component.scss' ]
+})
+export class SystemComponent {
+}
diff --git a/client/src/app/+admin/system/system.routes.ts b/client/src/app/+admin/system/system.routes.ts
new file mode 100644
index 000000000..e6d45b760
--- /dev/null
+++ b/client/src/app/+admin/system/system.routes.ts
@@ -0,0 +1,44 @@
+import { Routes } from '@angular/router'
+import { UserRightGuard } from '../../core'
+import { UserRight } from '../../../../../shared'
+import { JobsComponent } from '@app/+admin/system/jobs/jobs.component'
+import { LogsComponent } from '@app/+admin/system/logs'
+import { SystemComponent } from '@app/+admin/system/system.component'
+
+export const SystemRoutes: Routes = [
+  {
+    path: 'system',
+    component: SystemComponent,
+    data: {
+    },
+    children: [
+      {
+        path: '',
+        redirectTo: 'jobs',
+        pathMatch: 'full'
+      },
+      {
+        path: 'jobs',
+        canActivate: [ UserRightGuard ],
+        component: JobsComponent,
+        data: {
+          meta: {
+            userRight: UserRight.MANAGE_JOBS,
+            title: 'Jobs'
+          }
+        }
+      },
+      {
+        path: 'logs',
+        canActivate: [ UserRightGuard ],
+        component: LogsComponent,
+        data: {
+          meta: {
+            userRight: UserRight.MANAGE_LOGS,
+            title: 'Logs'
+          }
+        }
+      }
+    ]
+  }
+]