From 93cd579269717934b2b8e72d6258b712c1675eaa Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 22 Jun 2023 04:15:19 +0200
Subject: [PATCH] Switch to ansi_up for ansi rendering in actions (#25401)
Fixes: https://github.com/go-gitea/gitea/issues/24777
---
package-lock.json | 32 ++++---------
package.json | 2 +-
web_src/js/components/RepoActionView.test.js | 30 ------------
web_src/js/components/RepoActionView.vue | 48 +-------------------
web_src/js/render/ansi.js | 44 ++++++++++++++++++
web_src/js/render/ansi.test.js | 21 +++++++++
6 files changed, 77 insertions(+), 100 deletions(-)
delete mode 100644 web_src/js/components/RepoActionView.test.js
create mode 100644 web_src/js/render/ansi.js
create mode 100644 web_src/js/render/ansi.test.js
diff --git a/package-lock.json b/package-lock.json
index e808ccf2a8..43846cf4a0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
"@primer/octicons": "19.3.0",
"@webcomponents/custom-elements": "1.6.0",
"add-asset-webpack-plugin": "2.0.1",
- "ansi-to-html": "0.7.2",
+ "ansi_up": "5.2.1",
"asciinema-player": "3.4.0",
"clippie": "4.0.1",
"css-loader": "6.8.1",
@@ -2465,6 +2465,14 @@
"ajv": "^8.8.2"
}
},
+ "node_modules/ansi_up": {
+ "version": "5.2.1",
+ "resolved": "https://registry.npmjs.org/ansi_up/-/ansi_up-5.2.1.tgz",
+ "integrity": "sha512-5bz5T/7FRmlxA37zDXhG6cAwlcZtfnmNLDJra66EEIT3kYlw5aPJdbkJEhm59D6kA4Wi5ict6u6IDYHJaQlH+g==",
+ "engines": {
+ "node": "*"
+ }
+ },
"node_modules/ansi-regex": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -2487,20 +2495,6 @@
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
- "node_modules/ansi-to-html": {
- "version": "0.7.2",
- "resolved": "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.7.2.tgz",
- "integrity": "sha512-v6MqmEpNlxF+POuyhKkidusCHWWkaLcGRURzivcU3I9tv7k4JVhFcnukrM5Rlk2rUywdZuzYAZ+kbZqWCnfN3g==",
- "dependencies": {
- "entities": "^2.2.0"
- },
- "bin": {
- "ansi-to-html": "bin/ansi-to-html"
- },
- "engines": {
- "node": ">=8.0.0"
- }
- },
"node_modules/argparse": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -4210,14 +4204,6 @@
"node": ">=10.13.0"
}
},
- "node_modules/entities": {
- "version": "2.2.0",
- "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
- "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
- "funding": {
- "url": "https://github.com/fb55/entities?sponsor=1"
- }
- },
"node_modules/envinfo": {
"version": "7.8.1",
"resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
diff --git a/package.json b/package.json
index 0701862cc2..dd2eff7195 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
"@primer/octicons": "19.3.0",
"@webcomponents/custom-elements": "1.6.0",
"add-asset-webpack-plugin": "2.0.1",
- "ansi-to-html": "0.7.2",
+ "ansi_up": "5.2.1",
"asciinema-player": "3.4.0",
"clippie": "4.0.1",
"css-loader": "6.8.1",
diff --git a/web_src/js/components/RepoActionView.test.js b/web_src/js/components/RepoActionView.test.js
deleted file mode 100644
index 011c20d8d1..0000000000
--- a/web_src/js/components/RepoActionView.test.js
+++ /dev/null
@@ -1,30 +0,0 @@
-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('<script>');
-
-
- // 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');
-});
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index ebc78b049b..fd40bd7ee5 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -119,14 +119,12 @@
import {SvgIcon} from '../svg.js';
import ActionRunStatus from './ActionRunStatus.vue';
import {createApp} from 'vue';
-import AnsiToHTML from 'ansi-to-html';
import {toggleElem} from '../utils/dom.js';
import {getCurrentLocale} from '../utils.js';
+import {renderAnsi} from '../render/ansi.js';
const {csrfToken} = window.config;
-const ansiLogRender = new AnsiToHTML({escapeXML: true});
-
const sfc = {
name: 'RepoActionView',
components: {
@@ -304,7 +302,7 @@ const sfc = {
const logMessage = document.createElement('span');
logMessage.className = 'log-msg';
- logMessage.innerHTML = ansiLogToHTML(line.message);
+ logMessage.innerHTML = renderAnsi(line.message);
div.append(logTimeStamp);
div.append(logMessage);
div.append(logTimeSeconds);
@@ -470,48 +468,6 @@ 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>
diff --git a/web_src/js/render/ansi.js b/web_src/js/render/ansi.js
new file mode 100644
index 0000000000..68e8f2c544
--- /dev/null
+++ b/web_src/js/render/ansi.js
@@ -0,0 +1,44 @@
+import AnsiUp from 'ansi_up';
+
+const replacements = [
+ [/\x1b\[\d+[A-H]/g, ''], // Move cursor, treat them as no-op
+ [/\x1b\[\d?[JK]/g, '\r'], // Erase display/line, treat them as a Carriage Return
+];
+
+// render ANSI to HTML
+export function renderAnsi(line) {
+ // create a fresh ansi_up instance because otherwise previous renders can influence
+ // the output of future renders, because ansi_up is stateful and remembers things like
+ // unclosed opening tags for colors.
+ const ansi_up = new (AnsiUp.default || AnsiUp)();
+
+ if (line.endsWith('\r\n')) {
+ line = line.substring(0, line.length - 2);
+ } else if (line.endsWith('\n')) {
+ line = line.substring(0, line.length - 1);
+ }
+
+ if (line.includes('\x1b')) {
+ for (const [regex, replacement] of replacements) {
+ line = line.replace(regex, replacement);
+ }
+ }
+
+ if (!line.includes('\r')) {
+ return ansi_up.ansi_to_html(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 = ansi_up.ansi_to_html(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');
+}
diff --git a/web_src/js/render/ansi.test.js b/web_src/js/render/ansi.test.js
new file mode 100644
index 0000000000..7542ba0ede
--- /dev/null
+++ b/web_src/js/render/ansi.test.js
@@ -0,0 +1,21 @@
+import {expect, test} from 'vitest';
+import {renderAnsi} from './ansi.js';
+
+test('renderAnsi', () => {
+ expect(renderAnsi('abc')).toEqual('abc');
+ expect(renderAnsi('abc\n')).toEqual('abc');
+ expect(renderAnsi('abc\r\n')).toEqual('abc');
+ expect(renderAnsi('\r')).toEqual('');
+ expect(renderAnsi('\rx\rabc')).toEqual('x\nabc');
+ expect(renderAnsi('\rabc\rx\r')).toEqual('abc\nx');
+ expect(renderAnsi('\x1b[30mblack\x1b[37mwhite')).toEqual('<span style="color:rgb(0,0,0)">black</span><span style="color:rgb(255,255,255)">white</span>'); // unclosed
+ expect(renderAnsi('<script>')).toEqual('<script>');
+ expect(renderAnsi('\x1b[1A\x1b[2Ktest\x1b[1B\x1b[1A\x1b[2K')).toEqual('test');
+ expect(renderAnsi('\x1b[1A\x1b[2K\rtest\r\x1b[1B\x1b[1A\x1b[2K')).toEqual('test');
+ expect(renderAnsi('\x1b[1A\x1b[2Ktest\x1b[1B\x1b[1A\x1b[2K')).toEqual('test');
+ expect(renderAnsi('\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(renderAnsi('a\x1b[Kb\x1b[2Jc')).toEqual('a\nb\nc');
+ expect(renderAnsi('\x1b[48;5;88ma\x1b[38;208;48;5;159mb\x1b[m')).toEqual(`<span style="background-color:rgb(135,0,0)">a</span><span style="background-color:rgb(175,255,255)">b</span>`);
+});