mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-11-25 14:35:40 +00:00
Improve action log display with control chars (#23820)
Close #23680 Some CLI programs use "\r" and control chars to print new content in current line. So, the strings in one line are actually from `\rReading...1%\rReading...5%\rReading...100%` This PR tries to make the output better.
This commit is contained in:
parent
9a30b2eafa
commit
aa9c920980
14
package-lock.json
generated
14
package-lock.json
generated
|
@ -55,6 +55,7 @@
|
||||||
"@playwright/test": "1.31.2",
|
"@playwright/test": "1.31.2",
|
||||||
"@rollup/pluginutils": "5.0.2",
|
"@rollup/pluginutils": "5.0.2",
|
||||||
"@stoplight/spectral-cli": "6.6.0",
|
"@stoplight/spectral-cli": "6.6.0",
|
||||||
|
"@vitejs/plugin-vue": "4.1.0",
|
||||||
"eslint": "8.36.0",
|
"eslint": "8.36.0",
|
||||||
"eslint-plugin-import": "2.27.5",
|
"eslint-plugin-import": "2.27.5",
|
||||||
"eslint-plugin-jquery": "1.5.1",
|
"eslint-plugin-jquery": "1.5.1",
|
||||||
|
@ -1609,6 +1610,19 @@
|
||||||
"integrity": "sha512-FDJNkyhmKLw7uEvTxx5tSXfPeQpO0iy73Ry+PmYZJvQy0QIWX8a7kJ4kLWRf+EbTPJEPDSgPXHaM7pzr5lmvCg==",
|
"integrity": "sha512-FDJNkyhmKLw7uEvTxx5tSXfPeQpO0iy73Ry+PmYZJvQy0QIWX8a7kJ4kLWRf+EbTPJEPDSgPXHaM7pzr5lmvCg==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/@vitejs/plugin-vue": {
|
||||||
|
"version": "4.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.1.0.tgz",
|
||||||
|
"integrity": "sha512-++9JOAFdcXI3lyer9UKUV4rfoQ3T1RN8yDqoCLar86s0xQct5yblxAE+yWgRnU5/0FOlVCpTZpYSBV/bGWrSrQ==",
|
||||||
|
"dev": true,
|
||||||
|
"engines": {
|
||||||
|
"node": "^14.18.0 || >=16.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"vite": "^4.0.0",
|
||||||
|
"vue": "^3.2.25"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@vitest/expect": {
|
"node_modules/@vitest/expect": {
|
||||||
"version": "0.29.3",
|
"version": "0.29.3",
|
||||||
"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.29.3.tgz",
|
"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.29.3.tgz",
|
||||||
|
|
|
@ -55,6 +55,7 @@
|
||||||
"@playwright/test": "1.31.2",
|
"@playwright/test": "1.31.2",
|
||||||
"@rollup/pluginutils": "5.0.2",
|
"@rollup/pluginutils": "5.0.2",
|
||||||
"@stoplight/spectral-cli": "6.6.0",
|
"@stoplight/spectral-cli": "6.6.0",
|
||||||
|
"@vitejs/plugin-vue": "4.1.0",
|
||||||
"eslint": "8.36.0",
|
"eslint": "8.36.0",
|
||||||
"eslint-plugin-import": "2.27.5",
|
"eslint-plugin-import": "2.27.5",
|
||||||
"eslint-plugin-jquery": "1.5.1",
|
"eslint-plugin-jquery": "1.5.1",
|
||||||
|
|
|
@ -2,6 +2,7 @@ import {defineConfig} from 'vitest/dist/config.js';
|
||||||
import {readFile} from 'node:fs/promises';
|
import {readFile} from 'node:fs/promises';
|
||||||
import {dataToEsm} from '@rollup/pluginutils';
|
import {dataToEsm} from '@rollup/pluginutils';
|
||||||
import {extname} from 'node:path';
|
import {extname} from 'node:path';
|
||||||
|
import vue from '@vitejs/plugin-vue';
|
||||||
|
|
||||||
function stringPlugin() {
|
function stringPlugin() {
|
||||||
return {
|
return {
|
||||||
|
@ -28,5 +29,6 @@ export default defineConfig({
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
stringPlugin(),
|
stringPlugin(),
|
||||||
|
vue(),
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
|
30
web_src/js/components/RepoActionView.test.js
Normal file
30
web_src/js/components/RepoActionView.test.js
Normal file
|
@ -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('<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');
|
||||||
|
});
|
|
@ -77,6 +77,8 @@ import AnsiToHTML from 'ansi-to-html';
|
||||||
|
|
||||||
const {csrfToken} = window.config;
|
const {csrfToken} = window.config;
|
||||||
|
|
||||||
|
const ansiLogRender = new AnsiToHTML({escapeXML: true});
|
||||||
|
|
||||||
const sfc = {
|
const sfc = {
|
||||||
name: 'RepoActionView',
|
name: 'RepoActionView',
|
||||||
components: {
|
components: {
|
||||||
|
@ -91,8 +93,6 @@ const sfc = {
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
ansiToHTML: new AnsiToHTML({escapeXML: true}),
|
|
||||||
|
|
||||||
// internal state
|
// internal state
|
||||||
loading: false,
|
loading: false,
|
||||||
intervalID: null,
|
intervalID: null,
|
||||||
|
@ -214,7 +214,7 @@ const sfc = {
|
||||||
|
|
||||||
const logMessage = document.createElement('div');
|
const logMessage = document.createElement('div');
|
||||||
logMessage.className = 'log-msg';
|
logMessage.className = 'log-msg';
|
||||||
logMessage.innerHTML = this.ansiToHTML.toHtml(line.message);
|
logMessage.innerHTML = ansiLogToHTML(line.message);
|
||||||
div.appendChild(logMessage);
|
div.appendChild(logMessage);
|
||||||
|
|
||||||
return div;
|
return div;
|
||||||
|
@ -307,6 +307,48 @@ export function initRepositoryActionView() {
|
||||||
view.mount(el);
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
Loading…
Reference in a new issue