Improve action log display with control chars

package.json

@@ -55,6 +55,7 @@
  "@playwright/test": "1.31.2",
  "@rollup/pluginutils": "5.0.2",
  "@stoplight/spectral-cli": "6.6.0",
+ "@vitejs/plugin-vue": "4.1.0",
  "eslint": "8.36.0",
  "eslint-plugin-import": "2.27.5",
  "eslint-plugin-jquery": "1.5.1",

vitest.config.js

@@ -2,6 +2,7 @@ import {defineConfig} from 'vitest/dist/config.js';
 import {readFile} from 'node:fs/promises';
 import {dataToEsm} from '@rollup/pluginutils';
 import {extname} from 'node:path';
+import vue from '@vitejs/plugin-vue';
 
 function stringPlugin() {
  return {
@@ -28,5 +29,6 @@ export default defineConfig({
  },
  plugins: [
  stringPlugin(),
+ vue(),
  ],
 });

web_src/js/components/RepoActionView.test.js

@@ -0,0 +1,30 @@
+import {expect, test} from 'vitest';
+
+import {ansiLogToHTML} from './RepoActionView.vue';
+import AnsiToHTML from 'ansi-to-html';
+
+test('processConsoleLine', () => {
+ expect(ansiLogToHTML('abc')).toEqual('abc');
+ expect(ansiLogToHTML('abc\n')).toEqual('abc');
+ expect(ansiLogToHTML('abc\r\n')).toEqual('abc');
+ expect(ansiLogToHTML('\r')).toEqual('');
+ expect(ansiLogToHTML('\rx\rabc')).toEqual('x\nabc');
+ expect(ansiLogToHTML('\rabc\rx\r')).toEqual('abc\nx');
+
+ expect(ansiLogToHTML('\x1b[30mblack\x1b[37mwhite')).toEqual('<span style="color:#000">black<span style="color:#AAA">white</span></span>');
+ expect(ansiLogToHTML('<script>')).toEqual('&lt;script&gt;');
+
+
+ // upstream AnsiToHTML has bugs when processing "\033[1A" and "\033[1B", we fixed these control sequences in our code
+ // if upstream could fix these bugs, we can remove these tests and remove our patch code
+ const ath = new AnsiToHTML({escapeXML: true});
+ expect(ath.toHtml('\x1b[1A\x1b[2Ktest\x1b[1B\x1b[1A\x1b[2K')).toEqual('AtestBA'); // AnsiToHTML bug
+ expect(ath.toHtml('\x1b[1A\x1b[2K\rtest\r\x1b[1B\x1b[1A\x1b[2K')).toEqual('A\rtest\rBA'); // AnsiToHTML bug
+
+ // test our patched behavior
+ expect(ansiLogToHTML('\x1b[1A\x1b[2Ktest\x1b[1B\x1b[1A\x1b[2K')).toEqual('test');
+ expect(ansiLogToHTML('\x1b[1A\x1b[2K\rtest\r\x1b[1B\x1b[1A\x1b[2K')).toEqual('test');
+
+ // treat "\033[0K" and "\033[0J" (Erase display/line) as "\r", then it will be covered to "\n" finally.
+ expect(ansiLogToHTML('a\x1b[Kb\x1b[2Jc')).toEqual('a\nb\nc');
+});

web_src/js/components/RepoActionView.vue

@@ -77,6 +77,8 @@ import AnsiToHTML from 'ansi-to-html';
 
 const {csrfToken} = window.config;
 
+const ansiLogRender = new AnsiToHTML({escapeXML: true});
+
 const sfc = {
  name: 'RepoActionView',
  components: {
@@ -91,8 +93,6 @@ const sfc = {
 
  data() {
  return {
- ansiToHTML: new AnsiToHTML({escapeXML: true}),
-
  // internal state
  loading: false,
  intervalID: null,
@@ -214,7 +214,7 @@ const sfc = {
 
  const logMessage = document.createElement('div');
  logMessage.className = 'log-msg';
- logMessage.innerHTML = this.ansiToHTML.toHtml(line.message);
+ logMessage.innerHTML = ansiLogToHTML(line.message);
  div.appendChild(logMessage);
 
  return div;
@@ -307,6 +307,48 @@ export function initRepositoryActionView() {
  view.mount(el);
 }
 
+// some unhandled control sequences by AnsiToHTML
+// https://man7.org/linux/man-pages/man4/console_codes.4.html
+const ansiRegexpRemove = /\x1b\[\d+[A-H]/g; // Move cursor, treat them as no-op.
+const ansiRegexpNewLine = /\x1b\[\d?[JK]/g; // Erase display/line, treat them as a Carriage Return
+
+function ansiCleanControlSequences(line) {
+ if (line.includes('\x1b')) {
+ line = line.replace(ansiRegexpRemove, '');
+ line = line.replace(ansiRegexpNewLine, '\r');
+ }
+ return line;
+}
+
+export function ansiLogToHTML(line) {
+ if (line.endsWith('\r\n')) {
+ line = line.substring(0, line.length - 2);
+ } else if (line.endsWith('\n')) {
+ line = line.substring(0, line.length - 1);
+ }
+
+ // usually we do not need to process control chars like "\033[", let AnsiToHTML do it
+ // but AnsiToHTML has bugs, so we need to clean some control sequences first
+ line = ansiCleanControlSequences(line);
+
+ if (!line.includes('\r')) {
+ return ansiLogRender.toHtml(line);
+ }
+
+ // handle "\rReading...1%\rReading...5%\rReading...100%",
+ // convert it into a multiple-line string: "Reading...1%\nReading...5%\nReading...100%"
+ const lines = [];
+ for (const part of line.split('\r')) {
+ if (part === '') continue;
+ const partHtml = ansiLogRender.toHtml(part);
+ if (partHtml !== '') {
+ lines.push(partHtml);
+ }
+ }
+ // the log message element is with "white-space: break-spaces;", so use "\n" to break lines
+ return lines.join('\n');
+}
+
 </script>
 
 <style scoped>