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);
+            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++) {
+                            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,7 +60,34 @@
             <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>
+            </td>
+            <td>{{>anlyResult.totalCall}}</td>
+            <td>{{>anlyResult.correctNumber}}</td>
+            <td>
+            <span class="
+         {{if anlyResult.correctRate >= 99.00}}
+         text-success
+         {{else anlyResult.correctRate >= 97}}
+         text-warning
+         {{else}}
+         text-danger
+         {{/if}}
+         ">
+            <strong>{{>anlyResult.correctRate}}%</strong></span></td>
+            <td>{{>anlyResult.averageCost}}ms
+            <span id="{{>nodeToken}}" style="display:none">{{>anlyResultStr}}</span></td>
+
+        </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">
@@ -76,33 +104,13 @@
                         </div>
                     </div>
                     <div class="modal-footer">
-                                    <button name="showTypicalCallTreeBtn" type="button" class="btn btn-primary" value="{{>nodeToken}}">查看调用链</button>
+                        <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>
-            </td>
-            <td>{{>anlyResult.totalCall}}</td>
-            <td>{{>anlyResult.correctNumber}}</td>
-            <td>
-            <span class="
-         {{if anlyResult.correctRate >= 99.00}}
-         text-success
-         {{else anlyResult.correctRate >= 97}}
-         text-warning
-         {{else}}
-         text-danger
-         {{/if}}
-         ">
-            <strong>{{>anlyResult.correctRate}}%</strong></span></td>
-            <td>{{>anlyResult.averageCost}}ms
-            <span id="{{>nodeToken}}" style="display:none">{{>anlyResultStr}}</span></td>
-
-        </tr>
-
-</script>
 </#macro>
 
 <#macro typicalCallChainTrees>
@@ -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>