Beautify Portal TraceLog UI interface #5148
Conversation
dosubot
bot
added
the
size:L
![hound[bot]](https://avatars.githubusercontent.com/in/3598?s=60&v=4){kind=small}
| } | ||
|
|
||
| }); | ||
| return roots.map(root => buildTreeNode(root)); |
There was a problem hiding this comment.
'arrow function syntax (=>)' is only available in ES6 (use 'esversion: 6').
| metaDetail: node | ||
| }; | ||
| if (node.children) { | ||
| node.children.forEach(child => { |
There was a problem hiding this comment.
'arrow function syntax (=>)' is only available in ES6 (use 'esversion: 6').
| const parentSpanId = log.parentSpanId; | ||
|
|
||
| if (parentSpanId && nodeMap.has(parentSpanId)) { | ||
| const parent = nodeMap.get(parentSpanId); |
There was a problem hiding this comment.
'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).
|
|
||
| data.forEach(item => { | ||
| const log = item.logDTO; | ||
| const parentSpanId = log.parentSpanId; |
There was a problem hiding this comment.
'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).
| var roots = []; | ||
|
|
||
| data.forEach(item => { | ||
| const log = item.logDTO; |
There was a problem hiding this comment.
'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).
| // 构建图的根节点列表 | ||
| var roots = []; | ||
|
|
||
| data.forEach(item => { |
There was a problem hiding this comment.
'arrow function syntax (=>)' is only available in ES6 (use 'esversion: 6').
| function buildTree(data) { | ||
| // 构建 spanId 到节点的映射 | ||
| var nodeMap = new Map(); | ||
| data.forEach(item => { |
There was a problem hiding this comment.
'arrow function syntax (=>)' is only available in ES6 (use 'esversion: 6').
WalkthroughThe changes introduce a treeview structure to display audit log trace details in the Apollo Portal. This involves replacing the previous list-based display with a more navigable treeview, using Bootstrap Treeview. The HTML, JavaScript, and CSS files have been updated accordingly to support this new structure. Changes
Possibly related issues
Tip New Features and ImprovementsReview SettingsIntroduced new personality profiles for code reviews. Users can now select between "Chill" and "Assertive" review tones to tailor feedback styles according to their preferences. The "Assertive" profile posts more comments and nitpicks the code more aggressively, while the "Chill" profile is more relaxed and posts fewer comments. AST-based InstructionsCodeRabbit offers customizing reviews based on the Abstract Syntax Tree (AST) pattern matching. Read more about AST-based instructions in the documentation. Community-driven AST-based RulesWe are kicking off a community-driven initiative to create and share AST-based rules. Users can now contribute their AST-based rules to detect security vulnerabilities, code smells, and anti-patterns. Please see the ast-grep-essentials repository for more information. New Static Analysis ToolsWe are continually expanding our support for static analysis tools. We have added support for Tone SettingsUsers can now customize CodeRabbit to review code in the style of their favorite characters or personalities. Here are some of our favorite examples:
Revamped Settings PageWe have redesigned the settings page for a more intuitive layout, enabling users to find and adjust settings quickly. This change was long overdue; it not only improves the user experience but also allows our development team to add more settings in the future with ease. Going forward, the changes to Miscellaneous
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
|
CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅ |
|
I have read the CLA Document and I hereby sign the CLA |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Review Details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- apollo-portal/src/main/resources/static/audit_log_trace_detail.html (3 hunks)
- apollo-portal/src/main/resources/static/scripts/controller/AuditLogTraceDetailController.js (2 hunks)
- apollo-portal/src/main/resources/static/styles/audit-log.css (2 hunks)
Files skipped from review due to trivial changes (1)
- apollo-portal/src/main/resources/static/audit_log_trace_detail.html
Additional Context Used
Biome (20)
apollo-portal/src/main/resources/static/scripts/controller/AuditLogTraceDetailController.js (20)
58-61: This function expression can be turned into an arrow function.
51-64: This function expression can be turned into an arrow function.
47-65: This function expression can be turned into an arrow function.
70-74: Prefer for...of instead of forEach.
78-92: Prefer for...of instead of forEach.
102-105: Prefer for...of instead of forEach.
108-108: Avoid the delete operator which can impact performance.
136-149: This function expression can be turned into an arrow function.
158-170: This function expression can be turned into an arrow function.
172-179: Prefer for...of instead of forEach.
174-176: Template literals are preferred over string concatenation.
172-179: This function expression can be turned into an arrow function.
181-197: Prefer for...of instead of forEach.
183-197: This function expression can be turned into an arrow function.
22-22: Use let or const instead of var.
32-32: Use let or const instead of var.
69-70: Use let or const instead of var.
77-77: Use let or const instead of var.
95-96: Use let or const instead of var.
96-101: Use let or const instead of var.
Additional comments not posted (5)
apollo-portal/src/main/resources/static/styles/audit-log.css (2)
115-115: Updated border-radius from 3% to 0% to align with modern UI design principles.
142-145: Added styles for.treeviewand.node-treeviewto support the new treeview functionality in the audit log interface.Also applies to: 147-151, 153-155, 157-159, 161-165
apollo-portal/src/main/resources/static/scripts/controller/AuditLogTraceDetailController.js (3)
26-26: Initialized new variables to support the treeview functionality in the audit log interface.
42-42: Updated theinitfunction to callbuildTraceDetailsTreefor setting up the treeview on initialization.
114-117: UpdatedchangeShowingDetailto handle node selection in the treeview, enhancing user interaction.
| function buildTraceDetailsTree() { | ||
| AuditLogService.find_trace_details($scope.traceId).then( | ||
| function (result) { | ||
| $scope.traceDetails = result; | ||
| $scope.traceDetailsTree = buildTree($scope.traceDetails); | ||
| // 初始化 Bootstrap Treeview | ||
| $(document).ready(function() { | ||
| $('#treeview').treeview({ | ||
| color: "#252525", | ||
| showBorder: false, | ||
| data: $scope.traceDetailsTree, | ||
| levels: 99, | ||
| showTags: true, | ||
| onNodeSelected: function (event, data) { | ||
| changeShowingDetail(data.metaDetail); | ||
| } | ||
| }); | ||
|
|
||
| }); | ||
| } | ||
| ); |
There was a problem hiding this comment.
Implemented buildTraceDetailsTree to fetch and display trace details using the treeview. Consider using arrow functions for better readability and ES6 features like for...of for iterating over arrays.
- data.forEach(item => {
+ for (const item of data) {Committable suggestion was skipped due low confidence.
| function buildTree(data) { | ||
| // 构建 spanId 到节点的映射 | ||
| var nodeMap = new Map(); | ||
| data.forEach(item => { | ||
| nodeMap.set(item.logDTO.spanId, item); | ||
| }); | ||
|
|
||
| // 构建图的根节点列表 | ||
| var roots = []; | ||
|
|
||
| data.forEach(item => { | ||
| const log = item.logDTO; | ||
| const parentSpanId = log.parentSpanId; | ||
|
|
||
| if (parentSpanId && nodeMap.has(parentSpanId)) { | ||
| const parent = nodeMap.get(parentSpanId); | ||
| if (!parent.children) { | ||
| parent.children = []; | ||
| } | ||
| parent.children.push(item); | ||
| } else { | ||
| roots.push(item); | ||
| } | ||
| }); | ||
|
|
||
| // 递归生成 Treeview 格式的节点 | ||
| function buildTreeNode(node) { | ||
| var log = node.logDTO; | ||
| var treeNode = { | ||
| text: log.opName, | ||
| nodes: [], | ||
| metaDetail: node | ||
| }; | ||
| if (node.children) { | ||
| node.children.forEach(child => { | ||
| treeNode.nodes.push(buildTreeNode(child)); | ||
| }); | ||
| } | ||
| if (treeNode.nodes.length === 0) { | ||
| delete treeNode.nodes; | ||
| } | ||
| return treeNode; | ||
| } | ||
|
|
||
| }); | ||
| return roots.map(root => buildTreeNode(root)); | ||
| } |
There was a problem hiding this comment.
Refactored buildTree to construct the tree structure from trace details. Optimize by avoiding the delete operator and using for...of loops.
- data.forEach(item => {
+ for (const item of data) {
- delete treeNode.nodes;
+ if (treeNode.nodes.length === 0) treeNode.nodes = undefined;Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| function buildTree(data) { | |
| // 构建 spanId 到节点的映射 | |
| var nodeMap = new Map(); | |
| data.forEach(item => { | |
| nodeMap.set(item.logDTO.spanId, item); | |
| }); | |
| // 构建图的根节点列表 | |
| var roots = []; | |
| data.forEach(item => { | |
| const log = item.logDTO; | |
| const parentSpanId = log.parentSpanId; | |
| if (parentSpanId && nodeMap.has(parentSpanId)) { | |
| const parent = nodeMap.get(parentSpanId); | |
| if (!parent.children) { | |
| parent.children = []; | |
| } | |
| parent.children.push(item); | |
| } else { | |
| roots.push(item); | |
| } | |
| }); | |
| // 递归生成 Treeview 格式的节点 | |
| function buildTreeNode(node) { | |
| var log = node.logDTO; | |
| var treeNode = { | |
| text: log.opName, | |
| nodes: [], | |
| metaDetail: node | |
| }; | |
| if (node.children) { | |
| node.children.forEach(child => { | |
| treeNode.nodes.push(buildTreeNode(child)); | |
| }); | |
| } | |
| if (treeNode.nodes.length === 0) { | |
| delete treeNode.nodes; | |
| } | |
| return treeNode; | |
| } | |
| }); | |
| return roots.map(root => buildTreeNode(root)); | |
| } | |
| function buildTree(data) { | |
| // 构建 spanId 到节点的映射 | |
| var nodeMap = new Map(); | |
| for (const item of data) { | |
| nodeMap.set(item.logDTO.spanId, item); | |
| } | |
| // 构建图的根节点列表 | |
| var roots = []; | |
| for (const item of data) { | |
| const log = item.logDTO; | |
| const parentSpanId = log.parentSpanId; | |
| if (parentSpanId && nodeMap.has(parentSpanId)) { | |
| const parent = nodeMap.get(parentSpanId); | |
| if (!parent.children) { | |
| parent.children = []; | |
| } | |
| parent.children.push(item); | |
| } else { | |
| roots.push(item); | |
| } | |
| } | |
| // 递归生成 Treeview 格式的节点 | |
| function buildTreeNode(node) { | |
| var log = node.logDTO; | |
| var treeNode = { | |
| text: log.opName, | |
| nodes: [], | |
| metaDetail: node | |
| }; | |
| if (node.children) { | |
| for (const child of node.children) { | |
| treeNode.nodes.push(buildTreeNode(child)); | |
| } | |
| } | |
| if (treeNode.nodes.length === 0) { | |
| treeNode.nodes = undefined; | |
| } | |
| return treeNode; | |
| } | |
| return roots.map(root => buildTreeNode(root)); | |
| } |
|
d |
What's the purpose of this PR
Beautify Portal TraceLog UI interface
Which issue(s) this PR fixes:
Fixes # #5147
Brief changelog
in portal front-end side
Follow this checklist to help us incorporate your contribution quickly and easily:
mvn clean testto make sure this pull request doesn't break anything.CHANGESlog.Summary by CodeRabbit
New Features
Improvements
Bug Fixes
Style