Strip ANSI codes from logs

src/app/frontend/common/pipes/module.ts

@@ -20,15 +20,15 @@ import {CommaSeparatedPipe} from './commaseparated';
 import {CoreFormatter} from './coreformatter';
 import {MemoryFormatter} from './memoryformatter';
 import {RelativeTimeFormatter} from './relativetime';
-import {SafeHtmlFormatter} from './safehtml';
+import {StripAnsiPipe} from './stripansi';
 import {TrimPipe} from './trim';
 
 @NgModule({
   declarations: [
     MemoryFormatter,
     CoreFormatter,
     RelativeTimeFormatter,
-    SafeHtmlFormatter,
+    StripAnsiPipe,
     TrimPipe,
     CommaSeparatedPipe,
     FilterByPipe,
@@ -38,7 +38,7 @@ import {TrimPipe} from './trim';
     MemoryFormatter,
     CoreFormatter,
     RelativeTimeFormatter,
-    SafeHtmlFormatter,
+    StripAnsiPipe,
     TrimPipe,
     CommaSeparatedPipe,
     FilterByPipe,

src/app/frontend/common/pipes/safehtml.ts → src/app/frontend/common/pipes/stripansi.ts

@@ -17,24 +17,11 @@ import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
 import stripAnsi from 'strip-ansi';
 
 /**
- * Formats the given value as raw HTML to display to the user.
+ * Strips ANSI codes from string.
  */
-@Pipe({name: 'kdSafeHtml'})
-export class SafeHtmlFormatter {
-  constructor(private readonly sanitizer: DomSanitizer) {}
-
+@Pipe({name: 'kdStripAnsi'})
+export class StripAnsiPipe {
   transform(value: string): SafeHtml {
-    value = stripAnsi(value);
-    value = this.escape_(value);
-    return this.sanitizer.sanitize(SecurityContext.HTML, value);
-  }
-
-  private escape_(unsafe: string): string {
-    return unsafe
-      .replace(/&/g, '&')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;')
-      .replace(/'/g, '&#039;');
+    return stripAnsi(value);
   }
 }

src/app/frontend/logs/template.html

@@ -83,7 +83,7 @@
          fxLayoutGap="2px">
       <div *ngFor="let item of logsSet"
            [ngClass]="{'kd-logs-element-compact': logService.getCompact(), 'kd-logs-element': !logService.getCompact()}">
-        <span>{{item}}</span>
+        <span>{{item | kdStripAnsi}}</span>
       </div>
     </div>
   </div>