color the logs (#998)

Co-authored-by: Drew Ansbacher <drew.ansbacher@spiredigital.com>

diagnostic-ui/package-lock.json

@@ -16,6 +16,7 @@
         "@angular/platform-browser-dynamic": "^12.2.5",
         "@angular/router": "^12.2.5",
         "@ionic/angular": "^5.6.13",
+        "ansi-to-html": "^0.7.2",
         "rxjs": "^6.6.7",
         "tslib": "^2.3.1",
         "zone.js": "^0.11.4"
@@ -4245,6 +4246,28 @@
         "node": ">=4"
       }
     },
+    "node_modules/ansi-to-html": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.7.2.tgz",
+      "integrity": "sha512-v6MqmEpNlxF+POuyhKkidusCHWWkaLcGRURzivcU3I9tv7k4JVhFcnukrM5Rlk2rUywdZuzYAZ+kbZqWCnfN3g==",
+      "dependencies": {
+        "entities": "^2.2.0"
+      },
+      "bin": {
+        "ansi-to-html": "bin/ansi-to-html"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/ansi-to-html/node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/anymatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
@@ -21529,6 +21552,21 @@
         "color-convert": "^1.9.0"
       }
     },
+    "ansi-to-html": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.7.2.tgz",
+      "integrity": "sha512-v6MqmEpNlxF+POuyhKkidusCHWWkaLcGRURzivcU3I9tv7k4JVhFcnukrM5Rlk2rUywdZuzYAZ+kbZqWCnfN3g==",
+      "requires": {
+        "entities": "^2.2.0"
+      },
+      "dependencies": {
+        "entities": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+          "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
+        }
+      }
+    },
     "anymatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",

diagnostic-ui/package.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser-dynamic": "^12.2.5",
     "@angular/router": "^12.2.5",
     "@ionic/angular": "^5.6.13",
+    "ansi-to-html": "^0.7.2",
     "rxjs": "^6.6.7",
     "tslib": "^2.3.1",
     "zone.js": "^0.11.4"

diagnostic-ui/src/app/pages/logs/logs.page.ts

@@ -1,6 +1,10 @@
 import { Component, ViewChild } from '@angular/core'
 import { IonContent } from '@ionic/angular'
 import { ApiService } from 'src/app/services/api/api.service'
+var Convert = require('ansi-to-html')
+var convert = new Convert({
+  bg: 'transparent',
+})
 
 @Component({
   selector: 'logs',
@@ -36,7 +40,8 @@ export class LogsPage {
       const container = document.getElementById('container')
       const beforeContainerHeight = container.scrollHeight
       const newLogs = document.getElementById('template').cloneNode(true) as HTMLElement
-      newLogs.innerHTML = logs.map(l => `${l.timestamp} ${l.message}`).join('\n\n') + (logs.length ? '\n\n' : '')
+      newLogs.innerHTML = logs.map(l => `${l.timestamp} ${convert.toHtml(l.message)}`).join('\n') + (logs.length ? '\n' : '')
+
       container.prepend(newLogs)
       const afterContainerHeight = container.scrollHeight
 
@@ -84,7 +89,7 @@ export class LogsPage {
 
       const container = document.getElementById('container')
       const newLogs = document.getElementById('template').cloneNode(true) as HTMLElement
-      newLogs.innerHTML = logs.map(l => `${l.timestamp} ${l.message}`).join('\n\n') + (logs.length ? '\n\n' : '')
+      newLogs.innerHTML = logs.map(l => `${l.timestamp} ${convert.toHtml(l.message)}`).join('\n') + (logs.length ? '\n' : '')
       container.append(newLogs)
       this.loadingMore = false
       this.scrollEvent()