Log view improvements

Author: iilunin

API/APIServer.py

@@ -46,7 +46,7 @@ def __init__(self, trade_handler: TradeHandler):
         self.api.add_resource(ProxyEndpoint, APIServer.API_PREFIX + '/proxy/icon',
                               resource_class_kwargs={'trade_handler': self.th})
 
-        self.api.add_resource(LogsEndpoint, APIServer.API_PREFIX + '/logs/<file>',
+        self.api.add_resource(LogsEndpoint, APIServer.API_PREFIX + '/logs',
                               resource_class_kwargs={'trade_handler': self.th})
 
         self.api.add_resource(OrderBookEndpoint, APIServer.API_PREFIX + '/orderbook/<symbol>',

API/Endpoints/LogsEndpoint.py

@@ -1,12 +1,57 @@
+import datetime
+from flask import Request, request
+
 from API.Endpoints.BotAPIResource import BotAPIResource
 from flask_jwt_extended import jwt_required
+import arrow
 
 
 class LogsEndpoint(BotAPIResource):
 
     @jwt_required()
-    def get(self, file):
+    def get(self, file=None, limit=1000):
+
+        file = request.args.get('file', file)
+        limit = int(request.args.get('limit', 1000))
+
         if not file:
             return self.list_files()
 
-        return self.get_file_contents(None if file == 'latest' else file)
+        contents = self.get_file_contents(None if file == 'latest' else file)
+
+        log_records = []
+        for line in contents.splitlines():
+            if not line:
+                continue
+
+            level_start = -1
+            if '[' in line:
+               level_start = line.index('[')
+
+            if level_start > -1:
+                log_entry = {}
+
+                dt_str = line[0:level_start]
+                try:
+                    log_entry['d'] = arrow.get(dt_str).format('YYYY-MM-DD HH:mm:ss.SSS')
+                except Exception as e:
+                    log_records[-1]['t'] += '\n' + line.strip()
+                    continue
+
+                level_end = line.index(']')
+                log_entry['l'] = line[level_start + 1: level_end]
+
+                orig_start = line.index('[', level_end)
+                orig_end = line.index(']', level_end+1)
+
+                log_entry['o'] = line[orig_start+1:orig_end]
+
+                log_start = line.index(':', orig_end+1)
+
+                log_entry['t'] = line[log_start +1:].strip()
+                log_records.append(log_entry)
+            else:
+                log_records[-1]['t'] += '\n' + line.strip()
+
+
+        return log_records[::-1][0:limit]

admin/src/app/balances/balances.component.html

@@ -1,4 +1,4 @@
-<div class="balance-table">
+<div>
     <table mat-table [dataSource]="balances" matSort class="mat-elevation-z2">
 
       <ng-container matColumnDef="sym">
@@ -23,17 +23,7 @@
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-    </table>
-  
-    <ng-template #modal_template>
-      <h2 mat-dialog-title>{{isCloseTradeAction ? 'Cancel' : 'Delete'}} {{'"' + selectedTrade.sym + '"'}} Trade?</h2>
-      <div mat-dialog-content>Please confirm if you want to {{isCloseTradeAction ? 'cancel' : 'delete' }} this trade</div>
-      <div mat-dialog-actions align="end">
-          <button mat-button mat-dialog-close="cancel" (click)="decline()" color="primary" cdkFocusInitial>No</button>
-          <button mat-button mat-dialog-close="ok"  (click)="confirm()" color="primary">Yes</button>
-      </div>
-    </ng-template>
-  
+    </table>  
   </div>
 
 

admin/src/app/botapi.ts

@@ -8,6 +8,8 @@ import {TradeDetails, Entry} from './trade-details';
 import deleteProperty = Reflect.deleteProperty;
 import {environment} from '../environments/environment';
 import { Balance } from './balance';
+import { LogEntry } from './log-entry';
+import * as moment from 'moment';
 
 
 const httpOptions = {
@@ -30,10 +32,22 @@ export class BotApi {
   constructor(private http: HttpClient) {
   }
 
-  getRecentLogFileContents(filename='latest'): Observable<String> {
-    return this.http.get<String>(`${this.API_URL}/logs/${filename}`).pipe(
+  getRecentLogFileContents(limit:number=1000, filename='latest'): Observable<LogEntry[]> {
+    return this.http.get<LogEntry[]>(`${this.API_URL}/logs?file=${filename}&limit=${limit}`).pipe(
       retry(this.RETRIES),
-      catchError(this.handleError('getActiveTrades', '')));
+      map(r => {
+
+        const entries: LogEntry[] = [];
+
+        r.forEach(entry => { 
+          entry.d = new Date(entry.d)
+          entries.push(new LogEntry(entry));
+        });
+        // console.log(entries);
+        return entries;
+
+      }),
+      catchError(this.handleError('getActiveTrades',[])));
   }
 
   addTrade(trade: TradeDetails ): Observable<ApiResult> {

admin/src/app/log-entry.spec.ts

@@ -0,0 +1,7 @@
+import { LogEntry } from './log-entry';
+
+describe('LogEntry', () => {
+  it('should create an instance', () => {
+    expect(new LogEntry()).toBeTruthy();
+  });
+});

admin/src/app/log-entry.ts

@@ -0,0 +1,27 @@
+export class LogEntry {
+    
+    d: Date;
+    l: string;
+    t: string;
+    o: string;
+
+    constructor(init?: Partial<LogEntry>){
+        Object.assign(this, init)
+    }
+
+    get date(): Date{
+        return this.d;
+    }
+
+    get level(): string{
+        return this.l;
+    }
+
+    get originator(): string{
+        return this.o;
+    }
+
+    get text(): string{
+        return this.t;
+    }
+}

admin/src/app/logs/logs.component.css

@@ -1,19 +1,13 @@
-/* make-scrollable {
-    height: 800px;
-    overflow-y: scroll;
-} */
-
-.log-item {
-    height: 32px;
-    font-size: 16px;
-}
-
-div {
+.top-panel-ctrl {
     display: flex;
     flex-direction: row;
     align-items: center;
     box-sizing: border-box;
     padding: 0 16px;
     position: relative;
     height: inherit;
+}
+
+table {
+    width: 100%;
 }

admin/src/app/logs/logs.component.html

@@ -1,16 +1,43 @@
-<!-- <div class="full-width">
-    <mat-list *ngFor="let log of logContents">
-        <mat-list-item class="log-item"><p>{{log}}</p></mat-list-item>
-    </mat-list>
-</div> -->
-<div class="full-width">
+<div class="full-width top-panel-ctrl">
+    <mat-form-field appearance="standard">
+        <mat-label># of log entries</mat-label>
+        <input matInput type="number" min="1" step="1" id="targetPrice" name="targetPrice" [(ngModel)]="limit">
+    </mat-form-field>
     <button mat-icon-button matTooltip="Refresh Log" (click)="refreshLogs()">
         <mat-icon>refresh</mat-icon>
     </button>
-    <button mat-icon-button matTooltip="Copy Log" *ngIf="logContents">
-        <mat-icon [cdkCopyToClipboard]="this.logContents.join('\n')">file_copy</mat-icon>
+    <button mat-icon-button matTooltip="Copy All Log Records" *ngIf="logs">
+        <mat-icon [cdkCopyToClipboard]="getClipboard()">file_copy</mat-icon>
     </button>
 </div>
-<div class="full-width" *ngFor="let log of logContents">
-    <p>{{log}}</p>
-</div>
+
+<mat-progress-bar *ngIf="!logs" mode="query"></mat-progress-bar>
+<div> 
+    <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z2">
+  
+      <ng-container matColumnDef="date">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="d"> Date </th>
+        <td mat-cell *matCellDef="let log"> {{log.d.toLocaleString()}} </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="level">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="l"> Level </th>
+        <td mat-cell *matCellDef="let log"> {{log.l}} </td>
+      </ng-container>  
+
+      <ng-container matColumnDef="origin">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="o"> Origin </th>
+        <td mat-cell *matCellDef="let log"> {{log.o}} </td>
+      </ng-container>
+  
+      <ng-container matColumnDef="message">
+        <th mat-header-cell *matHeaderCellDef> Message </th>
+        <td mat-cell *matCellDef="let log"> {{log.t}} </td>
+      </ng-container>
+  
+      <tr mat-header-row *matHeaderRowDef="['date', 'level', 'origin', 'message']"></tr>
+      <tr mat-row *matRowDef="let row; columns: ['date', 'level', 'origin', 'message'];"></tr>
+    </table>
+    
+  </div>
+  <mat-paginator [pageSizeOptions]="[30, 50, 100]" showFirstLastButtons></mat-paginator>

admin/src/app/logs/logs.component.ts

@@ -1,27 +1,56 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
 import { BotApi } from '../botapi';
+import { LogEntry } from '../log-entry';
 
 @Component({
   selector: 'app-logs',
   templateUrl: './logs.component.html',
   styleUrls: ['./logs.component.css']
 })
-export class LogsComponent implements OnInit {
+export class LogsComponent implements OnInit, AfterViewInit {
+
+  logs: LogEntry[];
+  dataSource: MatTableDataSource<LogEntry> = new MatTableDataSource<LogEntry>();
+  limit: number = 1000;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
 
-  logContents: String[];
 
   constructor(private api: BotApi) { }
+  ngAfterViewInit(): void {
+    this.refreshLogs(); 
+    console.log(this.paginator);
+  }
 
   ngOnInit(): void {
-    this.refreshLogs();  
+    // this.refreshLogs();  
   }
 
   refreshLogs(): void {
-    this.api.getRecentLogFileContents().subscribe(r => {
+    this.logs = null;
+    this.api.getRecentLogFileContents(this.limit).subscribe(r => {
       if (r){
-        this.logContents = r.trim().split('\n').reverse();
+        this.logs = r;
+        this.dataSource = new MatTableDataSource<LogEntry>(this.logs);
+        this.dataSource.paginator = this.paginator;
+        this.dataSource.sort = this.sort;
       }
     })
   }
 
+  getClipboard(): string {
+    let cb = ''
+    
+    if (this.logs){
+      this.logs.forEach(l=> {
+        cb += `${l.d.toLocaleString()} [${l.l}] [${l.o}]: ${l.t}\n`
+      })
+    }
+
+    return cb
+  }
+
 }

requirements.txt

@@ -8,3 +8,4 @@ Flask==1.1.2
 Flask-Cors==3.0.10
 Flask-JWT-Extended==4.2.0
 Flask-RESTful==0.3.8
+arrow==1.1.0