Adds light/dark ANSI palettes using Fancy-ANSI (#45)

Addresses #16
kubetail-org · Mar 29, 2024 · 4c8961a · 4c8961a
1 parent b3a8a4f
commit 4c8961a
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 46 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -16,14 +16,12 @@
     "@apollo/client": "^3.9.4",
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.1",
-    "ansi-regex": "^6.0.1",
-    "ansi-to-html": "^0.7.2",
-    "ansi_up": "^6.0.2",
     "async-mutex": "^0.4.1",
     "clsx": "^2.1.0",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
     "distinct-colors": "^3.0.0",
+    "fancy-ansi": "^0.1.0",
     "graphql": "^16.8.1",
     "graphql-ws": "^5.15.0",
     "kubetail-ui": "github:kubetail-org/kubetail-ui#v0.1.2",

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -17,6 +17,44 @@
   #root {
     @apply h-full;
   }
+
+  :root {
+    --ansi-black: theme(ansi.colors.vscode.black);
+    --ansi-red: theme(ansi.colors.vscode.red);
+    --ansi-green: theme(ansi.colors.vscode.green);
+    --ansi-yellow: theme(ansi.colors.vscode.yellow);
+    --ansi-blue: theme(ansi.colors.vscode.blue);
+    --ansi-magenta: theme(ansi.colors.vscode.magenta);
+    --ansi-cyan: theme(ansi.colors.vscode.cyan);
+    --ansi-white: theme(ansi.colors.vscode.white);
+    --ansi-bright-black: theme(ansi.colors.vscode.bright-black);
+    --ansi-bright-red: theme(ansi.colors.vscode.bright-red);
+    --ansi-bright-green: theme(ansi.colors.vscode.bright-green);
+    --ansi-bright-yellow: theme(ansi.colors.vscode.bright-yellow);
+    --ansi-bright-blue: theme(ansi.colors.vscode.bright-blue);
+    --ansi-bright-magenta: theme(ansi.colors.vscode.magenta);
+    --ansi-bright-cyan: theme(ansi.colors.vscode.cyan);
+    --ansi-bright-white: theme(ansi.colors.vscode.white);
+  }
+
+  .dark {
+    --ansi-black: theme(ansi.colors.xtermjs.black);
+    --ansi-red: theme(ansi.colors.xtermjs.red);
+    --ansi-green: theme(ansi.colors.xtermjs.green);
+    --ansi-yellow: theme(ansi.colors.xtermjs.yellow);
+    --ansi-blue: theme(ansi.colors.xtermjs.blue);
+    --ansi-magenta: theme(ansi.colors.xtermjs.magenta);
+    --ansi-cyan: theme(ansi.colors.xtermjs.cyan);
+    --ansi-white: theme(ansi.colors.xtermjs.white);
+    --ansi-bright-black: theme(ansi.colors.xtermjs.bright-black);
+    --ansi-bright-red: theme(ansi.colors.xtermjs.bright-red);
+    --ansi-bright-green: theme(ansi.colors.xtermjs.bright-green);
+    --ansi-bright-yellow: theme(ansi.colors.xtermjs.bright-yellow);
+    --ansi-bright-blue: theme(ansi.colors.xtermjs.bright-blue);
+    --ansi-bright-magenta: theme(ansi.colors.xtermjs.magenta);
+    --ansi-bright-cyan: theme(ansi.colors.xtermjs.cyan);
+    --ansi-bright-white: theme(ansi.colors.xtermjs.white);
+  }
 }
 
 @layer components {

diff --git a/frontend/src/lib/console/logfeed.tsx b/frontend/src/lib/console/logfeed.tsx
@@ -13,9 +13,9 @@
 // limitations under the License.
 
 import { useQuery, useSubscription } from '@apollo/client';
-import { AnsiUp } from 'ansi_up';
 import { format, utcToZonedTime } from 'date-fns-tz';
-import makeAnsiRegex from 'ansi-regex';
+import { stripAnsi } from 'fancy-ansi';
+import { AnsiHtml } from 'fancy-ansi/react';
 import { createRef, forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { VariableSizeList, areEqual } from 'react-window';
@@ -38,10 +38,6 @@ import { cssID } from './helpers';
 import { useNodes, usePods } from './logging-resources';
 import type { Node, Pod } from './logging-resources';
 
-const ansiUp = new AnsiUp();
-const ansiRegex = makeAnsiRegex({ onlyFirst: true });
-const ansiRegexGlobal = makeAnsiRegex();
-
 /**
  * Shared types
  */
@@ -383,14 +379,7 @@ const getAttribute = (record: LogRecord, col: LogFeedColumn) => {
     case LogFeedColumn.Node:
       return record.pod.spec.nodeName;
     case LogFeedColumn.Message:
-      // apply ansi color coding
-      if (ansiRegex.test(record.message)) {
-        return (
-          <span dangerouslySetInnerHTML={{ __html: ansiUp.ansi_to_html(record.message) }} />
-        );
-      } else {
-        return record.message;
-      }
+      return <AnsiHtml text={record.message} />
     default:
       throw new Error('not implemented');
   }
@@ -621,7 +610,7 @@ const LogFeedContentImpl: React.ForwardRefRenderFunction<LogFeedContentHandle, L
     if (index === 0 || index === (items.length + 1)) return 24;
 
     const record = items[index - 1];
-    sizerEl.textContent = record.message.replace(ansiRegexGlobal, ''); // strip out ansi
+    sizerEl.textContent = stripAnsi(record.message); // strip out ansi
     return sizerEl.clientHeight;
   };
 

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -6,5 +6,6 @@ module.exports = {
 	],
   plugins: [
     require('kubetail-ui/plugin'),
+    require('fancy-ansi/plugin')
   ],
 }