1. 提交部分代码

skywalking-webui/src/main/webapp/bower_components/skywalking/js/analysisResultViewResovler.js

@@ -67,6 +67,7 @@ AnalysisResultViewResolver.prototype.bindEvent = function () {
 AnalysisResultViewResolver.prototype.showTypicalCallTree = function (nodeToken) {
     this.currentTypicalTreeNodes = {callChainTreeNodeList: []};
     this.currentTypicalTreeNodeMapping = {typicalTreeIds: []};
+    var tmpTypicalCallChainNodeIds = {};
     for (var i = 0; i < this.typicCallChainData.length; i++) {
         var node = this.typicCallChainData[i];
         var tmpInfo = node.treeNodes[nodeToken];
@@ -75,15 +76,69 @@ AnalysisResultViewResolver.prototype.showTypicalCallTree = function (nodeToken)
         }
 
         var tmpTypicalCallChain = [];
+
         for (var key in node.treeNodes) {
             var tmpNode = node.treeNodes[key];
             tmpNode.anlyResult = JSON.parse($("#" + key).text());
             tmpTypicalCallChain.push(tmpNode);
-            this.currentTypicalTreeNodes.callChainTreeNodeList.push(tmpNode);
+            if (tmpTypicalCallChainNodeIds[key] == undefined || tmpTypicalCallChainNodeIds[key] == "") {
+                this.currentTypicalTreeNodes.callChainTreeNodeList.push(tmpNode);
+                tmpTypicalCallChainNodeIds[key] = {};
+            }
         }
         this.currentTypicalTreeNodeMapping[node.callTreeId] = tmpTypicalCallChain;
         this.currentTypicalTreeNodeMapping.typicalTreeIds.push({"callTreeToken": node.callTreeId});
     }
+
+
+    this.sortTypicalCallChainTreeNode(this.currentTypicalTreeNodes.callChainTreeNodeList);
+}
+
+AnalysisResultViewResolver.prototype.sortTypicalCallChainTreeNode = function (callChainTreeNodeList) {
+    for (var i = 0 ; i < callChainTreeNodeList.length - 1; i++){
+        var testTraceLevelId = callChainTreeNodeList[i].traceLevelId;
+        var index = i;
+        for (var j = i + 1; j < callChainTreeNodeList.length; j++){
+            if (!this.compareTraceLevelId(testTraceLevelId, callChainTreeNodeList[j].traceLevelId)){
+                index = j;
+                testTraceLevelId = callChainTreeNodeList[j].traceLevelId;
+            }
+        }
+
+        if (index != i){
+            var tmpNode = callChainTreeNodeList[i];
+            callChainTreeNodeList[i] = callChainTreeNodeList[index];
+            callChainTreeNodeList[index] = tmpNode;
+        }
+    }
+}
+
+AnalysisResultViewResolver.prototype.compareTraceLevelId = function (traceLevelIdA, traceLevelIdB) {
+    var traceLevelIdAArray = traceLevelIdA.split(".");
+    var traceLevelIdBArray = traceLevelIdB.split(".");
+    var result = -1;
+    var index = 0;
+    while (true) {
+        if (index >= traceLevelIdAArray.length) {
+            result = true;
+            break;
+        }
+
+        if (index >= traceLevelIdBArray.length) {
+            result = false;
+            break;
+        }
+        if (parseInt(traceLevelIdAArray[index]) > parseInt(traceLevelIdBArray[index])) {
+            result = false;
+            break;
+        } else if (parseInt(traceLevelIdAArray[index]) < parseInt(traceLevelIdBArray[index])) {
+            result = true;
+            break;
+        }
+        index++;
+    }
+
+    return result;
 }
 
 AnalysisResultViewResolver.prototype.paintChainTreeDataTable = function () {
@@ -146,7 +201,8 @@ AnalysisResultViewResolver.prototype.bindGotoTypicalPageEvent = function () {
     $("button[name='showTypicalCallTreeBtn']").each(function () {
         $(this).click(function () {
             var treeNodeToken = $(this).attr("value");
-            $(".modal-backdrop").remove();
+            //$(".modal-backdrop").remove();
+            $("#modal" + treeNodeToken).modal('hide');
             self.showTypicalCallTree(treeNodeToken);
 
             var template = $.templates("#typicalCallChainTreesTmpl");
@@ -170,15 +226,20 @@ AnalysisResultViewResolver.prototype.bindGotoTypicalPageEvent = function () {
                             treeIds.push($(this).attr("value"));
                         }
                     });
-
+                    var tmpTpicalTreeNodes = {};
                     self.currentTypicalTreeNodes.callChainTreeNodeList = [];
                     for (var i = 0; i < treeIds.length; i++) {
                         var tmpNodes = self.currentTypicalTreeNodeMapping[treeIds[i]];
                         for (var j = 0; j < tmpNodes.length; j++) {
-                            self.currentTypicalTreeNodes.callChainTreeNodeList.push(tmpNodes[j]);
+                            if (tmpTpicalTreeNodes[tmpNodes[j].nodeToken] == undefined || tmpTpicalTreeNodes[tmpNodes[j].nodeToken] == "") {
+                                self.currentTypicalTreeNodes.callChainTreeNodeList.push(tmpNodes[j]);
+                                tmpTpicalTreeNodes[tmpNodes[j].nodeToken] = {};
+                            }
                         }
                     }
 
+                    self.sortTypicalCallChainTreeNode(self.currentTypicalTreeNodes.callChainTreeNodeList);
+
                     template = $.templates("#typicalTreeTableTmpl");
                     var htmlOutput = template.render((self.convertAnalysisResult(self.currentTypicalTreeNodes)));
                     $("#typicalTreeTableDataBody").empty();

skywalking-webui/src/main/webapp/pages/anls-result/analysisResult.ftl

@@ -47,6 +47,7 @@
     </div>
     <hr/>
 
+
 </script>
 </#macro>
 
@@ -59,29 +60,7 @@
             <td>
                 <a href="javascript:void(0);" data-toggle="modal" data-target="#modal{{>nodeToken}}">{{>viewPoint}}</a>
                 <span style="display:none" id="{{>nodeToken}}ViewPoint">{{>viewPoint}}</span>
-                    <div class="modal fade" id="modal{{>nodeToken}}" tabindex="-1" role="dialog" aria-labelledby="modal{{>modalId}}Label">
-                        <div class="modal-dialog" role="document">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                  <div class="modal-header">
-                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                                    <h4 class="modal-title">节点详情</h4>
-                                  </div>
-                                  <div class="modal-body">
-                                    <div class= "row">
-                                        <div  class="col-md-10">
-                                            <label>viewpoint：</label><br/>
-                                            <span style="word-wrap:break-word;">{{>viewPointStr}}</span>
-                                        </div>
-                                    </div>
-                                  </div>
-                                  <div class="modal-footer">
-                                    <button name="showTypicalCallTreeBtn" type="button" class="btn btn-primary" value="{{>nodeToken}}">查看调用链</button>
-                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
-                                  </div>
-                                </div>
-                              </div>
-                        </div>
+
                  </div>
             </td>
             <td>{{>anlyResult.totalCall}}</td>
@@ -102,9 +81,38 @@
 
         </tr>
 
+
 </script>
 </#macro>
 
+
+<#macro viewPointPickUp>
+    <div class="modal fade" id="viewPointPickupModal" tabindex="-1" role="dialog" aria-labelledby="viewPointPickupModal" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                        <h4 class="modal-title">节点详情</h4>
+                    </div>
+                    <div class="modal-body">
+                        <div class= "row">
+                            <div  class="col-md-10">
+                                <label>viewpoint：</label><br/>
+                                <span style="word-wrap:break-word;">{{>viewPointStr}}</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button id="showTypicalCallTreeBtn" type="button" class="btn btn-primary" value="{{>nodeToken}}">查看调用链</button>
+                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</#macro>
+
 <#macro typicalCallChainTrees>
 <script type="text/x-jsrender" id="typicalCallChainTreesTmpl">
     <br/>
@@ -136,6 +144,7 @@
         </table>
       </div>
     </div>
+    <hr/>
 
 </script>
 </#macro>
@@ -146,6 +155,7 @@
     {{for typicalTreeIds}}
         <input name="typicalTreeCheckBox" type="checkbox" checked value="{{>callTreeToken}}"/>典型调用链{{: #index}}&nbsp;
     {{/for}}
+
 </script>
 </#macro>
 
@@ -175,6 +185,7 @@
             <span id="{{>nodeToken}}" style="display:none">{{>anlyResultStr}}</span></td>
         </tr>
 
+
 </script>
 </#macro>