From 0abbc2b50f52530946ed05f7e5f218a399ae75e1 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Fri, 30 Sep 2022 12:26:59 +0800
Subject: [PATCH] log color

---
 package-lock.json                       | 61 +++++++++++++++++++++++++
 package.json                            |  1 +
 web_src/js/components/RepoBuildView.vue | 10 +++-
 3 files changed, 70 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b9c649c9de..d70d6bf47d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@primer/octicons": "17.9.0",
         "@vue/compiler-sfc": "3.2.45",
         "add-asset-webpack-plugin": "2.0.1",
+        "ansi-to-html": "0.7.2",
         "css-loader": "6.7.2",
         "dropzone": "6.0.0-beta.2",
         "easymde": "2.18.0",
@@ -1682,6 +1683,41 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "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",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -11098,6 +11134,31 @@
         "color-convert": "^2.0.1"
       }
     },
+    "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",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dev": true,
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
     "argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
diff --git a/package.json b/package.json
index 15c2601cd7..6135ba62f0 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@primer/octicons": "17.9.0",
     "@vue/compiler-sfc": "3.2.45",
     "add-asset-webpack-plugin": "2.0.1",
+    "ansi-to-html": "0.7.2",
     "css-loader": "6.7.2",
     "dropzone": "6.0.0-beta.2",
     "easymde": "2.18.0",
diff --git a/web_src/js/components/RepoBuildView.vue b/web_src/js/components/RepoBuildView.vue
index 49a0c749fd..e7812578a3 100644
--- a/web_src/js/components/RepoBuildView.vue
+++ b/web_src/js/components/RepoBuildView.vue
@@ -68,6 +68,7 @@
 <script>
 import {SvgIcon} from '../svg.js';
 import Vue from 'vue';
+import AnsiToHTML from `ansi-to-html`;
 
 const sfc = {
   name: 'RepoBuildView',
@@ -89,6 +90,10 @@ const sfc = {
     };
   },
 
+  created() {
+    this.ansiToHTML = new AnsiToHTML({escapeXML: true});
+  },
+
   mounted() {
     // TODO: the parent element's full height doesn't work well now
     const elBodyDiv = document.querySelector('body > div.full.height');
@@ -144,7 +149,7 @@ const sfc = {
       el.appendChild(elLogTime);
 
       const elLogMsg = document.createElement('log-msg');
-      elLogMsg.innerText = line.m;
+      elLogMsg.innerHTML = this.ansiToHTML.toHtml(line.m);
       el.appendChild(elLogMsg);
 
       return el;
@@ -191,7 +196,7 @@ const sfc = {
         for (let i = 0; i < 110; i++) {
           lines.push({
             ln: cursor, // demo only, use cursor for line number
-            m: `hello world ${Date.now()}, cursor: ${cursor}`,
+            m: ' '.repeat(i % 4) + `\x1B[1;3;31mDemo Log\x1B[0m, tag test <br>, hello world ${Date.now()}, cursor: ${cursor}`,
             t: Date.now(),
           });
           cursor++;
@@ -369,6 +374,7 @@ export function initRepositoryBuildView() {
       }
       log-msg {
         flex: 1;
+        white-space: pre;
         margin-left: 16px;
       }
     }