show ansi colors in the logs correctly

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

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "ansi-to-html": "^0.7.2"
+  }
+}

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==