ace.js插件自定义mode-log.js和theme-log.js,日志文本可以高亮显示ERROR|WARNING信息

This commit is contained in:
azhengzz 2021-05-01 10:59:16 +08:00
parent e077922c5f
commit f99ed5c44e
4 changed files with 114 additions and 3 deletions

View File

@ -754,7 +754,8 @@ function getBaseCaseElement(case_id, case_type) {
element.obj.ace_postprocessor_script_editor.session.setMode("ace/mode/python");
// 日志
element.obj.ace_log_editor = ace.edit(`div-ace-log-${case_id}`);
element.obj.ace_log_editor.setTheme("ace/theme/eclipse");
element.obj.ace_log_editor.setTheme("ace/theme/log");
element.obj.ace_log_editor.session.setMode("ace/mode/log");
}
// 渲染期望表格

View File

@ -67,7 +67,8 @@ function renderReportLogAceEditor() {
// 渲染Editor
ace_report_log_editor = ace.edit('div-ace-report-log');
ace_report_log_editor.setReadOnly(true);
ace_report_log_editor.setTheme("ace/theme/eclipse");
ace_report_log_editor.setTheme("ace/theme/log");
ace_report_log_editor.session.setMode("ace/mode/log");
// 定时查询直到调度执行结束
let dispatcher_id = $input_dispatcher_id.val();
@ -319,7 +320,8 @@ function renderCasePage(dispatcher_detail_id, data_expectations) {
// 日志
let ace_case_log_editor = ace.edit('ace-case-log-' + dispatcher_detail_id);
ace_case_log_editor.setReadOnly(true);
ace_case_log_editor.setTheme("ace/theme/eclipse");
ace_case_log_editor.setTheme("ace/theme/log");
ace_case_log_editor.session.setMode("ace/mode/log");
// 期望表格渲染
renderExpectationTable(dispatcher_detail_id, data_expectations);

View File

@ -0,0 +1,62 @@
/*
* 自定义日志文本高亮规则
* copy from mode-abc.js
*
* 可参考: https://ace.c9.io/tool/mode_creator.html
* */
define("ace/mode/log_highlight_rules", function (require, exports, modules) {
"use strict";
var oop = require("../lib/oop");
var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;
var LogHighlightRules = function () {
this.$rules = {
start: [{
token: 'error',
regex: /\[(ERROR|CRITICAL) \d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2},\d{3}\]/,
comment: 'Instruction Comment',
next: 'error_log'
}, {
token: 'warn',
regex: /\[(WARNING|WARN) \d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2},\d{3}\]/,
comment: 'Instruction Comment',
next: 'warn_log'
},],
error_log: [{
token: "",
regex: /(?=\[(DEBUG|INFO|WARN|WARNING|ERROR|CRITICAL) \d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2},\d{3}\])/, // ?= 匹配之前的内容
next: "start"
}, {
defaultToken: "error"
}],
warn_log: [{
token: "",
regex: /(?=\[(DEBUG|INFO|WARN|WARNING|ERROR|CRITICAL) \d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2},\d{3}\])/, // ?= 匹配之前的内容
next: "start"
}, {
defaultToken: "warn"
}],
};
this.normalizeRules();
};
oop.inherits(LogHighlightRules, TextHighlightRules);
exports.LogHighlightRules = LogHighlightRules;
});
define("ace/mode/log", function (require, exports, modules) {
"use strict";
var oop = require("../lib/oop");
var TextMode = require("./text").Mode;
var s = require("./log_highlight_rules").LogHighlightRules;
var Mode = function () {
this.HighlightRules = s;
};
oop.inherits(Mode, TextMode);
(function () {
this.$id = "ace/mode/log";
}).call(Mode.prototype);
exports.Mode = Mode;
});

View File

@ -0,0 +1,46 @@
/*
* 自定义日志文本高亮规则
*
* copy from theme-github.js
* */
define("ace/theme/log", function (require, exports, modules) {
exports.isDark = !1;
exports.cssClass = "ace-log";
exports.cssText =
'.ace-log .ace_gutter {background: #e8e8e8;color: #AAA;}' +
'.ace-log {background: #fff;color: #000;}' +
'.ace-log .ace_keyword {font-weight: bold;}' +
'.ace-log .ace_string {color: #D14;}' +
'.ace-log .ace_variable.ace_class {color: teal;}' +
'.ace-log .ace_constant.ace_numeric {color: #099;}' +
'.ace-log .ace_constant.ace_buildin {color: #0086B3;}' +
'.ace-log .ace_support.ace_function {color: #0086B3;}' +
'.ace-log .ace_comment {color: #998;font-style: italic;}' +
'.ace-log .ace_variable.ace_language {color: #0086B3;}' +
'.ace-log .ace_paren {font-weight: bold;}' +
'.ace-log .ace_boolean {font-weight: bold;}' +
'.ace-log .ace_string.ace_regexp {color: #009926;font-weight: normal;}' +
'.ace-log .ace_variable.ace_instance {color: teal;}' +
'.ace-log .ace_constant.ace_language {font-weight: bold;}' +
'.ace-log .ace_cursor {color: black;}' +
'.ace-log .ace_focus .ace_marker-layer .ace_active-line {background: rgb(255, 255, 204);}' +
'.ace-log .ace_marker-layer .ace_active-line {background: rgb(245, 245, 245);}' +
'.ace-log .ace_marker-layer .ace_selection {background: rgb(181, 213, 255);}' +
'.ace-log .ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px white;}' +
'.ace-log .ace_nobold .ace_line > span {font-weight: normal !important;}' +
'.ace-log .ace_marker-layer .ace_step {background: rgb(252, 255, 0);}' +
'.ace-log .ace_marker-layer .ace_stack {background: rgb(164, 229, 101);}' +
'.ace-log .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid rgb(192, 192, 192);}' +
'.ace-log .ace_gutter-active-line {background-color : rgba(0, 0, 0, 0.07);}' +
'.ace-log .ace_marker-layer .ace_selected-word {background: rgb(250, 250, 255);border: 1px solid rgb(200, 200, 250);}' +
'.ace-log .ace_invisible {color: #BFBFBF}' +
'.ace-log .ace_print-margin {width: 1px;background: #e8e8e8;}' +
'.ace-log .ace_indent-guide {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==") right repeat-y;}' +
// theme-log 添加
'.ace-log .ace_error {color: #D14;}' +
'.ace-log .ace_warn {color: #ffa500;}' +
'';
var dom = require("../lib/dom");
dom.importCssString(exports.cssText, exports.cssClass)
});