Support color ANSI escape codes in Ponos logs

package-lock.json

@@ -11,6 +11,7 @@
       "dependencies": {
         "@sentry/integrations": "^7.16.0",
         "@sentry/vue": "^7.16.0",
+        "ansi-to-html": "^0.7.2",
         "axios": "^1.1.3",
         "bulma": "^0.9.3",
         "bulma-switch": "^2.0.0",
@@ -4401,6 +4402,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/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
@@ -22717,6 +22740,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=="
+        }
+      }
+    },
     "any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",

package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "@sentry/integrations": "^7.16.0",
     "@sentry/vue": "^7.16.0",
+    "ansi-to-html": "^0.7.2",
     "axios": "^1.1.3",
     "bulma": "^0.9.3",
     "bulma-switch": "^2.0.0",

src/components/Process/Status/Logs.vue

 <template>
   <p class="code">
+    <!-- eslint-disable vue/no-v-html -->
     <span
-      v-for="({ line, style }, index) in splitLogs"
-      :key="line + index"
+      v-for="({ html, style }, index) in splitLogs"
+      :key="index"
       class="is-block m-0"
       :style="style"
-    >{{ line }}<br /></span>
+      v-html="html"
+    ></span>
+    <!-- eslint-enable vue/no-v-html -->
   </p>
 </template>
 
 <script>
+import Convert from 'ansi-to-html'
 import { LOG_COLORS } from '@/config'
+
 export default {
   props: {
     logs: {
@@ -21,8 +26,22 @@ export default {
   computed: {
     splitLogs () {
       const lines = this.logs.split('\n').map(l => l.trimEnd())
-      // Return non empty log lines with their color style
-      return lines.filter(l => l).map(line => ({ line, style: this.getColorStyle(line) }))
+
+      const converter = new Convert({
+        // When a reset escape code is hit, set everything back to nothing
+        fg: 'none',
+        bg: 'none',
+        // Escape HTML entities so that we can safely use v-html
+        escapeXML: true,
+        // The style will be kept between each call to converter.toHtml, allowing a color to be set over multiple lines
+        stream: true
+      })
+
+      // Return non empty log lines with their default color style and the parsed ANSI escape codes
+      return lines.filter(l => l).map(line => ({
+        html: converter.toHtml(line) + '<br />',
+        style: this.getColorStyle(line)
+      }))
     }
   },
   methods: {