From dbee729eee6afce691d8abe17bfd6dfbeef0581c Mon Sep 17 00:00:00 2001
From: beckerinj <becker@anticapital.ai>
Date: Wed, 3 May 2023 03:13:42 -0400
Subject: [PATCH] show ansi colors in the logs correctly

---
 .../src/components/deployment/tabs/log/Log.tsx    |  9 ++++++---
 package.json                                      |  5 +++++
 yarn.lock                                         | 15 +++++++++++++++
 3 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 package.json
 create mode 100644 yarn.lock

diff --git a/frontend/src/components/deployment/tabs/log/Log.tsx b/frontend/src/components/deployment/tabs/log/Log.tsx
index 408efe509..f25061dbf 100644
--- a/frontend/src/components/deployment/tabs/log/Log.tsx
+++ b/frontend/src/components/deployment/tabs/log/Log.tsx
@@ -6,6 +6,7 @@ import {
   onCleanup,
   Show,
 } from "solid-js";
+import Convert from "ansi-to-html";
 import { pushNotification } from "../../../..";
 import { useAppState } from "../../../../state/StateProvider";
 import { DockerContainerState, Log as LogType } from "../../../../types";
@@ -22,6 +23,8 @@ const POLLING_RATE = 5000;
 
 let interval = -1;
 
+const convert = new Convert();
+
 const Log: Component<{
   log?: LogType;
   logTail: number;
@@ -60,9 +63,9 @@ const Log: Component<{
     if (deployment()?.state === DockerContainerState.NotDeployed) {
       return "not deployed";
     } else {
-      return (
+      return convert.toHtml(
         (p.error ? p.log?.stderr : p.log?.stdout) ||
-        `no${p.error ? " error" : ""} log`
+          `no${p.error ? " error" : ""} log`
       );
     }
   };
@@ -145,7 +148,7 @@ const Log: Component<{
               }
             }}
           >
-            <pre class={s.Log}>{log()}</pre>
+            <pre class={s.Log} innerHTML={log()} />
           </div>
           <Show when={buffer()}>
             <button
diff --git a/package.json b/package.json
new file mode 100644
index 000000000..27e1b4285
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "ansi-to-html": "^0.7.2"
+  }
+}
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 000000000..1a49e5fcb
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,15 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+ansi-to-html@^0.7.2:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/ansi-to-html/-/ansi-to-html-0.7.2.tgz#a92c149e4184b571eb29a0135ca001a8e2d710cb"
+  integrity sha512-v6MqmEpNlxF+POuyhKkidusCHWWkaLcGRURzivcU3I9tv7k4JVhFcnukrM5Rlk2rUywdZuzYAZ+kbZqWCnfN3g==
+  dependencies:
+    entities "^2.2.0"
+
+entities@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
+  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==