Updated logs viewer component

- now by default last 50 lines are showed - added copy to clipboard button - added loading spinner to indicate to users when the logs are loading app.get('/api/logs') is now app.post to allow for additional parameters (such as lines to retrieve)
Tzahi12345 · Jul 3, 2020 · a9f197e · a9f197e
1 parent 3732d13
commit a9f197e
Show file tree

Hide file tree

Showing 11 changed files with 45 additions and 15 deletions.
diff --git a/backend/app.js b/backend/app.js
@@ -29,6 +29,7 @@ var config_api = require('./config.js');
 var subscriptions_api = require('./subscriptions')
 const CONSTS = require('./consts')
 const { spawn } = require('child_process')
+const read_last_lines = require('read-last-lines');
 
 const is_windows = process.platform === 'win32';
 
@@ -1867,15 +1868,17 @@ app.get('/api/using-encryption', function(req, res) {
     res.send(usingEncryption);
 });
 
-app.get('/api/logs', function(req, res) {
+app.post('/api/logs', async function(req, res) {
     let logs = null;
+    let lines = req.body.lines;
     logs_path = path.join('appdata', 'logs', 'combined.log')
-    if (fs.existsSync(logs_path))
-        logs = fs.readFileSync(logs_path, 'utf8');
+    if (fs.existsSync(logs_path)) {
+        if (lines) logs = await read_last_lines.read(logs_path, lines);
+        else       logs = fs.readFileSync(logs_path, 'utf8');
+    }
     else
         logger.error(`Failed to find logs file at the expected location: ${logs_path}`)
 
-    console.log(logs)
     res.send({
         logs: logs,
         success: !!logs

diff --git a/backend/package.json b/backend/package.json
@@ -50,6 +50,7 @@
     "passport-jwt": "^4.0.0",
     "passport-local": "^1.0.0",
     "progress": "^2.0.3",
+    "read-last-lines": "^1.7.2",
     "shortid": "^2.2.15",
     "unzipper": "^0.10.10",
     "uuidv4": "^6.0.6",

diff --git a/...d/public/1-es2015.69c7d04ec9d3867ff817.js → ...d/public/1-es2015.6bc1f7cd24dfb6add92c.js b/...d/public/1-es2015.69c7d04ec9d3867ff817.js → ...d/public/1-es2015.6bc1f7cd24dfb6add92c.js
diff --git a/backend/public/1-es5.69c7d04ec9d3867ff817.js b/backend/public/1-es5.69c7d04ec9d3867ff817.js
diff --git a/backend/public/1-es5.6bc1f7cd24dfb6add92c.js b/backend/public/1-es5.6bc1f7cd24dfb6add92c.js
diff --git a/backend/public/index.html b/backend/public/index.html
@@ -14,5 +14,5 @@
 <link rel="stylesheet" href="styles.5112d6db78cf21541598.css"></head>
 <body>
   <app-root></app-root>
-<script src="runtime-es2015.8f98e80442a6fc46f61d.js" type="module"></script><script src="runtime-es5.8f98e80442a6fc46f61d.js" nomodule defer></script><script src="polyfills-es5.7f923c8f5afda210edd3.js" nomodule defer></script><script src="polyfills-es2015.5b408f108bcea938a7e2.js" type="module"></script><script src="main-es2015.0cbc545a4a3bee376826.js" type="module"></script><script src="main-es5.0cbc545a4a3bee376826.js" nomodule defer></script></body>
+<script src="runtime-es2015.1f02852de81190376ba1.js" type="module"></script><script src="runtime-es5.1f02852de81190376ba1.js" nomodule defer></script><script src="polyfills-es5.7f923c8f5afda210edd3.js" nomodule defer></script><script src="polyfills-es2015.5b408f108bcea938a7e2.js" type="module"></script><script src="main-es2015.0cbc545a4a3bee376826.js" type="module"></script><script src="main-es5.0cbc545a4a3bee376826.js" nomodule defer></script></body>
 </html>
diff --git a/...ic/runtime-es2015.8f98e80442a6fc46f61d.js → ...ic/runtime-es2015.1f02852de81190376ba1.js b/...ic/runtime-es2015.8f98e80442a6fc46f61d.js → ...ic/runtime-es2015.1f02852de81190376ba1.js
diff --git a/...ublic/runtime-es5.8f98e80442a6fc46f61d.js → ...ublic/runtime-es5.1f02852de81190376ba1.js b/...ublic/runtime-es5.8f98e80442a6fc46f61d.js → ...ublic/runtime-es5.1f02852de81190376ba1.js
diff --git a/src/app/components/logs-viewer/logs-viewer.component.html b/src/app/components/logs-viewer/logs-viewer.component.html
@@ -1,3 +1,21 @@
 <div style="height: 100%">
-    <textarea style="height: 100%" matInput readonly [(ngModel)]="logs" placeholder="Logs will appear here" i18n-placeholder="Logs placeholder"></textarea>
+    <div *ngIf="logs_loading" style="position: absolute; top: 40%; left: 50%">
+        <mat-spinner [diameter]="32"></mat-spinner>
+    </div>
+    <textarea style="height: 275px" matInput readonly [(ngModel)]="logs" placeholder="Logs will appear here" i18n-placeholder="Logs placeholder"></textarea>
+    <div>
+        <button style="margin-top: 12px;" [cdkCopyToClipboard]="logs" (click)="copiedLogsToClipboard()" mat-flat-button color="primary"><ng-container i18n="Copy to clipboard button text">Copy to clipboard</ng-container></button>
+        <div style="float: right">
+            <ng-container i18n="Label for lines select in logger view">Lines:</ng-container>&nbsp;
+            <mat-form-field style="width: 75px;">
+                <mat-select (selectionChange)="getLogs()" [(ngModel)]="requested_lines">
+                    <mat-option [value]="10">10</mat-option>
+                    <mat-option [value]="25">25</mat-option>
+                    <mat-option [value]="50">50</mat-option>
+                    <mat-option [value]="100">100</mat-option>
+                    <mat-option [value]="0">All</mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+    </div>
 </div>
diff --git a/src/app/components/logs-viewer/logs-viewer.component.ts b/src/app/components/logs-viewer/logs-viewer.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, AfterViewInit } from '@angular/core';
 import { PostsService } from '../../posts.services';
 
 @Component({
@@ -9,24 +9,32 @@ import { PostsService } from '../../posts.services';
 export class LogsViewerComponent implements OnInit {
 
   logs: string = null;
-
+  requested_lines = 50;
+  logs_loading = false;
   constructor(private postsService: PostsService) { }
 
   ngOnInit(): void {
     this.getLogs();
   }
 
   getLogs() {
-    this.postsService.getLogs().subscribe(res => {
+  if (!this.logs) { this.logs_loading = true; } // only show loading spinner at the first load
+    this.postsService.getLogs(this.requested_lines !== 0 ? this.requested_lines : null).subscribe(res => {
+      this.logs_loading = false;
       if (res['logs']) {
         this.logs = res['logs'];
       } else {
         this.postsService.openSnackBar('Failed to retrieve logs!');
       }
     }, err => {
+      this.logs_loading = false;
       console.error(err);
       this.postsService.openSnackBar('Failed to retrieve logs!');
     });
   }
 
+  copiedLogsToClipboard() {
+    this.postsService.openSnackBar('Logs copied to clipboard!');
+  }
+
 }
diff --git a/src/app/posts.services.ts b/src/app/posts.services.ts
@@ -234,8 +234,8 @@ export class PostsService implements CanActivate {
         return this.http.post(this.path + 'getVideoInfos', {fileNames: fileNames, type: type, urlMode: urlMode}, this.httpOptions);
     }
 
-    getLogs() {
-        return this.http.get(this.path + 'logs', this.httpOptions);
+    getLogs(lines = 50) {
+        return this.http.post(this.path + 'logs', {lines: lines}, this.httpOptions);
     }
 
     isPinSet() {