[Feat] add log

Author: youncccat

package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser": "~8.2.14",
     "@angular/platform-browser-dynamic": "~8.2.14",
     "@angular/router": "~8.2.14",
+    "ansi_up": "^4.0.4",
     "rxjs": "~6.4.0",
     "tslib": "^1.10.0",
     "zone.js": "~0.9.1"

src/app/panel/panel.component.html

@@ -59,7 +59,7 @@
     <mat-card-subtitle>
       logs
     </mat-card-subtitle>
-    <mat-card-content>
+    <mat-card-content class="logger-content">
       <mat-button-toggle-group>
         <mat-button-toggle
           *ngFor="let type of selectedProject.logType"
@@ -70,6 +70,9 @@
           {{ type }}
         </mat-button-toggle>
       </mat-button-toggle-group>
+      <div class="dispatcher-logs">
+        <div [innerHTML]="dispatcherLogs"></div>
+      </div>
     </mat-card-content>
   </mat-card>
   <mat-card class="notify-card">

src/app/panel/panel.component.scss

@@ -62,6 +62,10 @@ $full-height: calc(100% - 150px);
 
     width: 500px;
     height: $full-height;
+
+    .logger-content {
+      height: calc(100% - 80px);
+    }
   }
 
   .notify-card {
@@ -108,6 +112,10 @@ $full-height: calc(100% - 150px);
     .task-content {
       @include scroll-content;
 
+      &::-webkit-scrollbar {
+        width: 0 !important;
+      }
+
       .task-item-card {
         @include base-card;
         @extend .selected;
@@ -119,3 +127,16 @@ $full-height: calc(100% - 150px);
 * {
   font-weight: 200;
 }
+
+.dispatcher-logs {
+  display: flex;
+  flex-direction: column-reverse;
+  height: calc(100% - 60px);
+  overflow-y: scroll;
+  margin-top: 10px;
+  white-space: pre-line;
+
+  &::-webkit-scrollbar {
+    width: 0 !important;
+  }
+}

src/app/panel/panel.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit } from "@angular/core";
-import { WebSocketService, HttpInfo } from "src/services";
+import { WebSocketService, HttpInfo } from "../../services";
 import { HttpClient } from "@angular/common/http";
+import AnsiUp from "ansi_up";
+import { DomSanitizer } from "@angular/platform-browser";
 
 type LogType = "docker" | "dispatcher";
 
@@ -38,7 +40,8 @@ export class PanelComponent implements OnInit {
   constructor(
     private websocketService: WebSocketService,
     private httpClient: HttpClient,
-    private httpInfo: HttpInfo
+    private httpInfo: HttpInfo,
+    private sanitized: DomSanitizer
   ) {}
 
   ngOnInit() {}
@@ -66,4 +69,14 @@ export class PanelComponent implements OnInit {
   get tasks() {
     return this.websocketService.tasks;
   }
+
+  get dispatcherLogs() {
+    console.info(
+      new AnsiUp().ansi_to_html(this.websocketService.dispatcherLogs.join("\n"))
+    );
+
+    return this.sanitized.bypassSecurityTrustHtml(
+      new AnsiUp().ansi_to_html(this.websocketService.dispatcherLogs.join("\n"))
+    );
+  }
 }

src/interceptors/auth-interceptor.ts

@@ -12,11 +12,11 @@ export class AuthInterceptor implements HttpInterceptor {
     req: HttpRequest<any>,
     next: HttpHandler
   ): Observable<HttpEvent<any>> {
-    console.info("aaaaa");
+    const { token } = this.userService;
 
     return next.handle(
       req.clone({
-        headers: req.headers.set("Authentication", this.userService.token)
+        headers: token ? req.headers.set("Authentication", token) : req.headers
       })
     );
   }

src/services/websocket.ts

@@ -33,7 +33,8 @@ export class WebSocketService {
   private conn: WebSocket;
 
   notifications: NotifyPayload[] = [];
-  loggers: LoggerPayload[] = [];
+  dispatcherLogs: LoggerPayload[] = [];
+  dockerLogs: LoggerPayload[] = [];
   tasks: TaskPayload[] = [];
 
   constructor(private httpInfo: HttpInfo, private httpClient: HttpClient) {
@@ -65,17 +66,25 @@ export class WebSocketService {
       return;
     }
 
-    const CONTAINER_MAP = {
-      [EventType.LOGGER]: this.loggers,
-      [EventType.NOTIFY]: this.notifications
-    };
-    const container = CONTAINER_MAP[type];
     let result = payload;
+    const LOGGER_MAP = {
+      [LoggerType.DOCKER]: this.dockerLogs,
+      [LoggerType.DISPATCHER]: this.dispatcherLogs
+    };
 
     if (type === EventType.NOTIFY) {
       result.type = NOTIFY_CLASS_TYPE[payload.type];
+      this.notifications.push(result);
+
+      return;
     }
 
-    container.push(result);
+    if (type === EventType.LOGGER) {
+      const { logType, content } = payload;
+
+      LOGGER_MAP[logType].push(content);
+
+      return;
+    }
   }
 }

yarn.lock

@@ -1280,6 +1280,11 @@ ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
+ansi_up@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.npm.taobao.org/ansi_up/download/ansi_up-4.0.4.tgz#5b8c35f0b02e4476f3f18cf89c3bf48d15d054f6"
+  integrity sha1-W4w18LAuRHbz8Yz4nDv0jRXQVPY=
+
 anymatch@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npm.taobao.org/anymatch/download/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"