beautify ui

apolloconfig · May 24, 2024 · 913f1e0 · 913f1e0
1 parent 3d14e6f
commit 913f1e0
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 39 deletions.
diff --git a/apollo-portal/src/main/resources/static/audit_log_trace_detail.html b/apollo-portal/src/main/resources/static/audit_log_trace_detail.html
@@ -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-->
@@ -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>
@@ -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>
@@ -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>
 

diff --git a/apollo-portal/src/main/resources/static/scripts/controller/AuditLogTraceDetailController.js b/apollo-portal/src/main/resources/static/scripts/controller/AuditLogTraceDetailController.js
@@ -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;
@@ -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));
+            }
+
+            function changeShowingDetail(data) {
+                  $scope.showingDetail = data;
+                  refreshDataInfluenceEntities();
+            }
       }
 
       function showRelatedDataInfluence(entityName, entityId, fieldName) {
@@ -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) {

diff --git a/apollo-portal/src/main/resources/static/styles/audit-log.css b/apollo-portal/src/main/resources/static/styles/audit-log.css
@@ -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 {
@@ -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;
 }