Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Beautify Portal TraceLog UI interface #5149

Merged
merged 2 commits into from
May 25, 2024
Merged

Beautify Portal TraceLog UI interface #5149

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
913f1e0
beautify ui
BlackBear2003 May 24, 2024
741c6d4
reformat code
BlackBear2003 May 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 6 additions & 16 deletions apollo-portal/src/main/resources/static/audit_log_trace_detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,18 +56,7 @@ <h2>{{ 'ApolloAuditLog.TraceDetailTips' | translate }}</h2>
{{'ApolloAuditLog.TraceAuditLogTips' | translate }}</span>
</div>
<div class="panel-body">
<div class="media hover" ng-repeat="detail in traceDetails">
<h4 class="media-heading word-break" data-toggle="collapse" data-target="#detail{{ detail.logDTO.id }}"
ng-click="setShowingDetail(detail);removeInClassFromLogDropDownExceptId(detail.logDTO.id)">
{{detail.logDTO.opName}}
<span class="glyphicon glyphicon-menu-down"></span>
</h4>
<div id="detail{{ detail.logDTO.id }}" class="panel-collapse collapse">
<div class="word-break">{{'ApolloAuditLog.SpanIdTips' | translate }}:{{detail.logDTO.spanId.substr(0,5)+'...'}}</div>
<div class="word-break">{{'ApolloAuditLog.ParentSpan' | translate }}:{{findOpNameBySpanId(detail.logDTO.parentSpanId)}}</div>
<div class="word-break">{{'ApolloAuditLog.FollowsFromSpan' | translate }}:{{findOpNameBySpanId(detail.logDTO.followsFromSpanId)}}</div>
</div>
</div>
<div id="treeview" class="treeview"></div>
</div>
</div>
<!--properties mode info-->
Expand All @@ -89,7 +78,7 @@ <h4 style="margin: 8px 0px">{{'ApolloAuditLog.OpType' | translate}}:{{showingDet
<div style="font-size: 12pt; word-break: break-all">
{{'ApolloAuditLog.Description' | translate}}:{{showingDetail.logDTO.description}}
</div>
<hr style="margin: 5px"/>
<hr style="margin: 5px 0px"/>
<h4 style="word-break: break-all;">
{{'ApolloAuditLog.InfluenceEntity' | translate}}:
</h4>
Expand Down Expand Up @@ -153,7 +142,7 @@ <h4 ng-show="relatedDataInfluences && relatedDataInfluences.length > 0"
</h4>
<div class="table-responsive">
<table ng-show="relatedDataInfluences && relatedDataInfluences.length > 0"
class="no-margin table table-striped table-hover table-bordered">
class="no-margin table table-striped table-hover table-bordered">
<thead>
<tr>
<th style="width: 50%">{{'ApolloAuditLog.DataInfluence.FieldNewValue' | translate }}</th>
Expand Down Expand Up @@ -206,12 +195,13 @@ <h4 class="text-center empty-container">

<script src="vendor/angular/angular-translate.2.18.1/angular-translate.min.js"></script>
<script
src="vendor/angular/angular-translate.2.18.1/angular-translate-loader-static-files.min.js"></script>
src="vendor/angular/angular-translate.2.18.1/angular-translate-loader-static-files.min.js"></script>
<script
src="vendor/angular/angular-translate.2.18.1/angular-translate-storage-cookie.min.js"></script>
src="vendor/angular/angular-translate.2.18.1/angular-translate-storage-cookie.min.js"></script>

<!-- bootstrap.js -->
<script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="vendor/bootstrap/js/bootstrap-treeview.min.js" type="text/javascript"></script>

<script src="vendor/diff.min.js" type="text/javascript"></script>

Expand Down
91 changes: 69 additions & 22 deletions apollo-portal/src/main/resources/static/scripts/controller/AuditLogTraceDetailController.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,22 +16,21 @@
*/
audit_log_trace_detail_module.controller('AuditLogTraceDetailController',
['$scope', '$location', '$window', '$translate', 'toastr', 'AppService', 'AppUtil', 'EventManager', 'AuditLogService',
auditLogTraceDetailController]
auditLogTraceDetailController]
);
function auditLogTraceDetailController($scope, $location, $window, $translate, toastr, AppService, AppUtil, EventManager, AuditLogService) {
var params = AppUtil.parseParams($location.$$url);
$scope.traceId = params.traceId;

$scope.traceDetails = [];
$scope.traceDetailsTree = [];
$scope.showingDetail = {};
$scope.dataInfluenceEntities = [];
$scope.relatedDataInfluences = [];
$scope.relatedDataInfluencePage = 0;
$scope.relatedDataInfluenceHasLoadAll = true;
var RelatedDataInfluencePageSize = 10;
$scope.setShowingDetail = setShowingDetail;
$scope.showText = showText;
$scope.removeInClassFromLogDropDownExceptId = removeInClassFromLogDropDownExceptId;
$scope.findMoreRelatedDataInfluence = findMoreRelatedDataInfluence;
$scope.showRelatedDataInfluence = showRelatedDataInfluence;
$scope.findOpNameBySpanId = findOpNameBySpanId;
Expand All @@ -40,34 +39,82 @@ function auditLogTraceDetailController($scope, $location, $window, $translate, t
init();

function init() {
getTraceDetails();
buildTraceDetailsTree();
}

function getTraceDetails() {
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);
}
});

});
}
);
}

function setShowingDetail(detail) {
$scope.showingDetail = detail;
refreshDataInfluenceEntities();
}

function removeInClassFromLogDropDownExceptId(id) {
$scope.relatedDataInfluences = [];
$scope.relatedDataInfluenceHasLoadAll = true;

var elements = document.querySelectorAll('[id^="detail"]');

elements.forEach(function (element) {
if(element.id !== 'detail'+id) {
element.classList.remove('in');
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));
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The buildTree function is well-implemented, with clear logic for constructing the tree nodes. Consider using for...of instead of forEach for better performance.

- data.forEach(item => {
+ for (const item of data) {
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.

Suggested change
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) {
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 changeShowingDetail(data) {
$scope.showingDetail = data;
refreshDataInfluenceEntities();
}
}

function showRelatedDataInfluence(entityName, entityId, fieldName) {
Expand Down Expand Up @@ -128,7 +175,7 @@ function auditLogTraceDetailController($scope, $location, $window, $translate, t
});
return res;
}

function refreshDataInfluenceEntities() {
var entityMap = new Map();
$scope.showingDetail.dataInfluenceDTOList.forEach(function (dto) {
Expand Down
28 changes: 27 additions & 1 deletion apollo-portal/src/main/resources/static/styles/audit-log.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@
padding: 8px;
margin-top: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .09);
border-radius: 3%;
border-radius: 0%;
}

.options-container {
Expand All @@ -137,4 +137,30 @@

.options-list li:hover {
background-color: #f0f0f0;
}

.treeview {
background-color: #ffffff;
font-size: 14px;
}

.node-treeview {
padding: 5px 0px;
transition: background-color 0.5s;
word-break: break-all;
}

.node-treeview:last-child {
border-bottom: none;
}

.node-treeview:hover {
background-color: #f0f0f0; /* 悬停时的背景颜色 */
}

#treeview .list-group .list-group-item {
border: 0;
border-top: 1px solid #eff2f7;
border-top-width: 0px;
color: #797979;
}
Loading