Respect ANSI color codes in check output (#392)

Signed-off-by: James Phillips <jamesdphillips@gmail.com>

package.json

@@ -51,6 +51,7 @@
     "@material-ui/system": "^4.9.3",
     "@material-ui/utils": "^4.7.1",
     "@vx/axis": "^0.0.190",
+    "ansi-to-html": "^0.7.2",
     "apollo-cache": "^1.3.0",
     "apollo-cache-inmemory": "^1.5.1",
     "apollo-client": "^2.6.2",
@@ -67,6 +68,7 @@
     "d3-scale": "^3.0.0",
     "debounce": "^1.2.0",
     "deepmerge": "^3.2.0",
+    "entities": "^2.2.0",
     "error-stack-parser": "^2.0.2",
     "es6-error": "^4.1.1",
     "express": "^4.16.4",

src/lib/component/base/ANSIColor.tsx

@@ -0,0 +1,19 @@
+/* eslint-disable react/prop-types */
+
+import React from "/vendor/react";
+import Skeleton from "./Skeleton";
+import { ANSIColorLazyProps } from "./ANSIColorLazy";
+
+export type ANSIColorProps = ANSIColorLazyProps;
+
+const Component = React.lazy(() => import("./ANSIColorLazy"));
+
+const ANSIColor: React.FC<ANSIColorProps> = ({ ref, ...props }) => {
+  return (
+    <React.Suspense fallback={<Skeleton variant="text">loading</Skeleton>}>
+      <Component {...props} />
+    </React.Suspense>
+  );
+};
+
+export default ANSIColor;

src/lib/component/base/ANSIColor.worker.js

@@ -0,0 +1,8 @@
+import Convert from "ansi-to-html";
+import { encodeXML } from "entities";
+
+onmessage = message => {
+  const [data] = message.data.msg;
+  const convert = new Convert();
+  postMessage([message.data.key, convert.toHtml(encodeXML(data))]);
+};

src/lib/component/base/ANSIColorLazy.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+
+export interface ANSIColorLazyProps
+  extends Omit<React.HTMLProps<HTMLSpanElement>, "children"> {
+  children?: string;
+}
+
+declare const ANSIColorLazy: React.FC<ANSIColorLazyProps>;
+export default ANSIColorLazy;

src/lib/component/base/ANSIColorLazy.js

@@ -0,0 +1,36 @@
+/* eslint-disable react/prop-types */
+
+import React from "/vendor/react";
+import Worker from "./ANSIColor.worker";
+
+const worker = new Worker();
+const pending = {};
+
+worker.onmessage = event => {
+  const [key, data] = event.data;
+  pending[key].call(this, data);
+};
+
+let idx = 0;
+function postMessage(msg, callback) {
+  const key = idx;
+  pending[idx] = data => {
+    callback(data);
+    delete pending[idx];
+  };
+  worker.postMessage({ key, msg });
+  idx += 1;
+}
+
+const ANSIColor = ({ children, ...other }) => {
+  const [result, setResult] = React.useState({ value: "", processed: false });
+  React.useEffect(() => {
+    postMessage([children], result => {
+      setResult({ value: result, processed: true });
+    });
+  }, [children, setResult]);
+
+  return <code dangerouslySetInnerHTML={{ __html: result.value }} {...other} />;
+};
+
+export default ANSIColor;

src/lib/component/base/index.tsx

@@ -4,6 +4,7 @@ export {
   MobileFullWidthContent,
 } from "./AppLayout";
 export { default as AvatarIcon } from "./AvatarIcon";
+export { default as ANSIColor } from "./ANSIColor";
 export { default as ButtonIcon } from "./ButtonIcon";
 export { default as ButtonSet } from "./ButtonSet";
 export { default as CardHighlight } from "./CardHighlight";

src/lib/component/partial/EventDetailsContainer/EventDetailsCheckSummary.js

@@ -20,6 +20,7 @@ import {
 
 import { statusCodeToId } from "/lib/util/checkStatus";
 import {
+  ANSIColor,
   Dictionary,
   DictionaryKey,
   DictionaryValue,
@@ -291,7 +292,7 @@ class EventDetailsCheckSummary extends React.PureComponent {
           <React.Fragment>
             <Divider />
             <CodeBlock className={classes.code}>
-              <CardContent>{check.output}</CardContent>
+              <CardContent><ANSIColor>{check.output}</ANSIColor></CardContent>
             </CodeBlock>
           </React.Fragment>
         ) : (

yarn.lock

@@ -2777,6 +2777,13 @@ ansi-to-html@^0.6.11:
   dependencies:
     entities "^1.1.2"
 
+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"
+
 anymatch@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
@@ -5289,6 +5296,11 @@ enhanced-resolve@^4.1.0:
     memory-fs "^0.4.0"
     tapable "^1.0.0"
 
+entities@2, entities@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
+  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
+
 entities@^1.1.2, entities@~1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"