feat(log): Add Highlighting to Logs #7707
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,220 @@ | ||
| <template> | ||
| <span v-for="(token, index) in tokens" :key="index" :class="['token', token.type]" :style="{ color: token.color }"> | ||
| {{ token.text }} | ||
| </span> | ||
| </template> | ||
| <script setup lang="ts"> | ||
| interface TokenRule { | ||
| type: string; | ||
| pattern: RegExp; | ||
| color: string; | ||
| } | ||
| interface Token { | ||
| text: string; | ||
| type: string; | ||
| color: string; | ||
| } | ||
| const props = defineProps<{ | ||
| log: string; | ||
| type: string; | ||
| }>(); | ||
| let rules = ref<TokenRule[]>([]); | ||
| const nginxRules: TokenRule[] = [ | ||
| { | ||
| type: 'log-level', | ||
| pattern: /\[(error|warn|notice|info|debug)\]/gi, | ||
| color: '#E74C3C', | ||
| }, | ||
| { | ||
| type: 'path', | ||
| pattern: | ||
| /(?:(?<=GET|POST|PUT|DELETE|PATCH|HEAD|OPTIONS)\s+|(?<=open\(\s*")|(?<="\s*))(\/[^"\s]+(?:\.\w+)?(?:\?\w+=\w+)?)/g, | ||
| color: '#B87A2B', | ||
| }, | ||
| { | ||
| type: 'http-method', | ||
| pattern: /(?<=")(?:GET|POST|PUT|DELETE|PATCH|HEAD|OPTIONS)(?=\s)/g, | ||
| color: '#27AE60', | ||
| }, | ||
| { | ||
| type: 'status-success', | ||
| pattern: /\s(2\d{2})\s/g, | ||
| color: '#2ECC71', | ||
| }, | ||
| { | ||
| type: 'status-error', | ||
| pattern: /\s([45]\d{2})\s/g, | ||
| color: '#E74C3C', | ||
| }, | ||
| { | ||
| type: 'process-info', | ||
| pattern: /\d+#\d+/g, | ||
| color: '#7F8C8D', | ||
| }, | ||
| ]; | ||
| const systemRules: TokenRule[] = [ | ||
| { | ||
| type: 'log-error', | ||
| pattern: /\[(ERROR|WARN|FATAL)\]/g, | ||
| color: '#E74C3C', | ||
| }, | ||
| { | ||
| type: 'log-normal', | ||
| pattern: /\[(INFO|DEBUG)\]/g, | ||
| color: '#8B8B8B', | ||
| }, | ||
| { | ||
| type: 'timestamp', | ||
| pattern: /\[\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}\]/g, | ||
| color: '#8B8B8B', | ||
| }, | ||
| { | ||
| type: 'bracket-text', | ||
| pattern: /\[([^\]]+)\]/g, | ||
| color: '#B87A2B', | ||
| }, | ||
| { | ||
| type: 'referrer-ua', | ||
| pattern: /https?:\/\/(?:[\w-]+\.)+[\w-]+(?::\d+)?(?:\/[^\s\]\)"]*)?/g, | ||
| color: '#786C88', | ||
| }, | ||
| ]; | ||
| const taskRules: TokenRule[] = [ | ||
| { | ||
| type: 'bracket-text', | ||
| pattern: /\[([^\]]+)\]/g, | ||
| color: '#B87A2B', | ||
| }, | ||
| ]; | ||
| const defaultRules: TokenRule[] = [ | ||
| { | ||
| type: 'timestamp', | ||
| pattern: | ||
| /(?:\[\d{2}\/\w{3}\/\d{4}:\d{2}:\d{2}:\d{2}\s[+-]\d{4}\]|\d{4}[-\/]\d{2}[-\/]\d{2}\s\d{2}:\d{2}:\d{2})/g, | ||
| color: '#8B8B8B', | ||
| }, | ||
| { | ||
| type: 'referrer-ua', | ||
| pattern: /"(?:https?:\/\/[^"]+|Mozilla[^"]+|curl[^"]+)"/g, | ||
| color: '#786C88', | ||
| }, | ||
| { | ||
| type: 'ip', | ||
| pattern: /\b\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\b/g, | ||
| color: '#4A90E2', | ||
| }, | ||
| { | ||
| type: 'server-host', | ||
| pattern: /(?:server|host):\s*[^,\s]+/g, | ||
| color: '#5D6D7E', | ||
| }, | ||
| ]; | ||
| const containerRules: TokenRule[] = [ | ||
| { | ||
| type: 'timestamp', | ||
| pattern: /\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}\+\d{2}:\d{2}/g, | ||
| color: '#8B8B8B', | ||
| }, | ||
| { | ||
| type: 'bracket-text', | ||
| pattern: /\[([^\]]+)\]/g, | ||
| color: '#B87A2B', | ||
| }, | ||
| ]; | ||
| function tokenizeLog(log: string): Token[] { | ||
| const tokens: Token[] = []; | ||
| let lastIndex = 0; | ||
| let matches: { index: number; text: string; type: string; color: string }[] = []; | ||
| rules.value.forEach((rule) => { | ||
| const regex = new RegExp(rule.pattern.source, 'g'); | ||
| let match; | ||
| while ((match = regex.exec(log)) !== null) { | ||
| matches.push({ | ||
| index: match.index, | ||
| text: match[0], | ||
| type: rule.type, | ||
| color: rule.color, | ||
| }); | ||
| } | ||
| }); | ||
| matches.sort((a, b) => a.index - b.index); | ||
| matches = matches.filter((match, index) => { | ||
| if (index === 0) return true; | ||
| const prev = matches[index - 1]; | ||
| return match.index >= prev.index + prev.text.length; | ||
| }); | ||
| matches.forEach((match) => { | ||
| if (match.index > lastIndex) { | ||
| tokens.push({ | ||
| text: log.substring(lastIndex, match.index), | ||
| type: 'plain', | ||
| color: '#666666', | ||
| }); | ||
| } | ||
| tokens.push({ | ||
| text: match.text, | ||
| type: match.type, | ||
| color: match.color, | ||
| }); | ||
| lastIndex = match.index + match.text.length; | ||
| }); | ||
| if (lastIndex < log.length) { | ||
| tokens.push({ | ||
| text: log.substring(lastIndex), | ||
| type: 'plain', | ||
| color: '#666666', | ||
| }); | ||
| } | ||
| return tokens; | ||
| } | ||
| const tokens = computed(() => tokenizeLog(props.log)); | ||
| onMounted(() => { | ||
| switch (props.type) { | ||
| case 'nginx': | ||
| rules.value = nginxRules.concat(defaultRules); | ||
| break; | ||
| case 'system': | ||
| rules.value = systemRules.concat(defaultRules); | ||
| break; | ||
| case 'container': | ||
| rules.value = containerRules.concat(defaultRules); | ||
| break; | ||
| case 'task': | ||
| rules.value = taskRules.concat(defaultRules); | ||
| break; | ||
| default: | ||
| rules.value = defaultRules; | ||
| break; | ||
| } | ||
| }); | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .token { | ||
| font-family: 'JetBrains Mono', Monaco, Menlo, Consolas, 'Courier New', monospace; | ||
| font-size: 14px; | ||
| font-weight: 500; | ||
| } | ||
| .ip { | ||
| text-decoration: underline; | ||
| text-decoration-style: dotted; | ||
| text-decoration-thickness: 1px; | ||
| } | ||
| </style> | ||
|
Member
There was a problem hiding this comment. Based on my knowledge as of September 2021, there is no evident irregularity or issue with this code snippet. The syntax and structure appear to be sound, the use of variables such as However, I would like to make some generic optimization suggestions that could potentially add value:
Remember that these are general tips based solely on past experiences and should not replace actual debugging techniques or best coding practices. It's always important to analyze code thoroughly to understand the nuances, including those hidden under comments but difficult to uncover without proper context. |
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The provided changes do not introduce significant issues but suggest room for improvement and further optimizations. It would be beneficial to refactor such that it looks more consistent with modern Vue practices. Currently, the use of
hightlightcomponent does not seem necessary since it's imported from another file. Additionally, there might be unnecessary comments or redundant logic.Here is a refined version: