improvement(dashboard): render ANSI color in log views

dashboard/package.json

@@ -28,6 +28,7 @@
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
     "@garden-io/core": "^0.12.2",
+    "ansi_up": "^4.0.4",
     "axios": "^0.19.2",
     "classnames": "^2.2.6",
     "d3": "^5.16.0",
@@ -64,4 +65,4 @@
     "not ie <= 11",
     "not op_mini all"
   ]
-}
+}

dashboard/src/components/page-error.tsx

@@ -30,7 +30,10 @@ const PageError: React.FC<Props> = ({ error }) => {
       <div>
         <P>Please look at the terminal logs displayed by the dashboard server for details.</P>
         <P color={colors.gardenGray}>
-          💡 You can get more detailed logs by running the server with <code>--log-level=debug</code>.
+          <span role="img" aria-label="Tip:">
+            💡
+          </span>{" "}
+          You can get more detailed logs by running the server with <code>--log-level=debug</code>.
         </P>
       </div>
     )
@@ -46,7 +49,14 @@ const PageError: React.FC<Props> = ({ error }) => {
       )}
     >
       <H3 color={colors.gardenPink}>Whoops, something went wrong.</H3>
-      {error && error.message && <P>❌ {error.message}</P>}
+      {error && error.message && (
+        <P>
+          <span role="img" aria-label="Error:">
+            ❌
+          </span>{" "}
+          {error.message}
+        </P>
+      )}
       {suggestion}
     </div>
   )

dashboard/src/components/terminal.tsx

@@ -9,6 +9,7 @@
 import styled from "@emotion/styled"
 import { padEnd } from "lodash"
 import React from "react"
+import { default as AnsiUp } from "ansi_up"
 
 import { colors } from "../styles/variables"
 import { ServiceLogEntry } from "@garden-io/core/build/src/types/plugin/service/getServiceLogs"
@@ -40,6 +41,8 @@ const Timestamp = styled.span`
   color: ${colors.gardenGrayLight};
 `
 
+const ansiUp = new AnsiUp()
+
 const Terminal: React.FC<Props> = ({ entries, sectionPad, showServiceName }) => {
   return (
     <Term className="p-1">
@@ -50,7 +53,7 @@ const Terminal: React.FC<Props> = ({ entries, sectionPad, showServiceName }) =>
             <P key={idx}>
               {service}
               <Timestamp>[{e.timestamp}] </Timestamp>
-              {e.msg}
+              <span dangerouslySetInnerHTML={{ __html: ansiUp.ansi_to_html(e.msg) }} />
             </P>
           )
         })}