Prettify validator output (#178)

package.json

@@ -226,10 +226,12 @@
     "@solana/wallet-adapter-react": "^0.15.4",
     "@solana/wallet-adapter-react-ui": "^0.9.6",
     "amplitude-js": "^8.12.0",
+    "ansi_up": "^5.1.0",
     "bip39": "^3.0.4",
     "bootstrap": "^5.1.3",
     "classnames": "^2.3.1",
     "dockerode": "^3.3.2",
+    "dompurify": "^2.3.8",
     "electron-cfg": "^1.2.7",
     "electron-debug": "^3.2.0",
     "electron-log": "^4.4.6",

src/renderer/nav/Validator.tsx

@@ -12,6 +12,8 @@ import {
   ButtonToolbar,
 } from 'react-bootstrap';
 import { debounce } from 'underscore';
+import AnsiUp from 'ansi_up';
+import DOMPurify from 'dompurify';
 import {
   Net,
   selectValidatorNetworkState,
@@ -27,6 +29,8 @@ const ipcDockerToast = (dockerIPCMethod: string) => {
   });
 };
 
+const ansiUp = new AnsiUp();
+
 const Validator = () => {
   const [validatorLogs, setValidatorLogs] = useState('');
   const filterRef = useRef<HTMLInputElement>({} as HTMLInputElement);
@@ -84,7 +88,9 @@ const Validator = () => {
       switch (method) {
         case 'validator-logs':
           // eslint-disable-next-line prettier/prettier
-          setValidatorLogs(res.join("\n"));
+          setValidatorLogs(
+            DOMPurify.sanitize(ansiUp.ansi_to_html(res.join('\n')))
+          );
           break;
         default:
       }
@@ -245,9 +251,10 @@ const Validator = () => {
         />
       </InputGroup>
       <div className="overflow-auto">
-        <pre className="text-xs bg-surface-600 h-full p-2 whitespace-pre-wrap break-all overflow-auto">
-          {validatorLogs}
-        </pre>
+        <pre
+          className="text-xs bg-surface-600 h-full p-2 whitespace-pre-wrap break-all overflow-auto"
+          dangerouslySetInnerHTML={{ __html: validatorLogs }}
+        />
       </div>
     </div>
   );