提交部分代码

skywalking-webui/src/main/java/com/ai/cloud/skywalking/web/dto/TypicalCallTree.java

@@ -19,4 +19,10 @@ public class TypicalCallTree {
     public void addNode(TypicalCallTreeNode typicalCallTreeNode) {
         this.treeNodes.put(typicalCallTreeNode.getNodeToken(), typicalCallTreeNode);
     }
+
+    public void beautifulViewPointForShow() {
+        for (Map.Entry<String, TypicalCallTreeNode> entry : treeNodes.entrySet()) {
+            entry.getValue().beautifulViewPoint();
+        }
+    }
 }

skywalking-webui/src/main/java/com/ai/cloud/skywalking/web/dto/TypicalCallTreeNode.java

@@ -9,20 +9,29 @@ import com.ai.cloud.skywalking.web.util.TokenGenerator;
 public class TypicalCallTreeNode {
     private String nodeToken;
     private String viewPoint;
-    private String levelId;
+    private String viewPointStr;
+    private String traceLevelId;
 
     public TypicalCallTreeNode(String parentLevelId, String levelId, String viewPoint) {
         if (StringUtil.isBlank(parentLevelId)){
-            this.levelId = levelId;
+            this.traceLevelId = levelId;
         }else{
-            this.levelId = parentLevelId + "." + levelId;
+            this.traceLevelId = parentLevelId + "." + levelId;
         }
 
         this.viewPoint = viewPoint;
-        nodeToken = TokenGenerator.generate(levelId + ":" + viewPoint);
+        this.viewPointStr = viewPoint;
+        nodeToken = TokenGenerator.generate(this.traceLevelId + ":" + viewPoint);
     }
 
     public String getNodeToken() {
         return nodeToken;
     }
+
+    public void beautifulViewPoint() {
+        if (!StringUtil.isBlank(viewPoint) && viewPoint.length() > 80) {
+            viewPoint = viewPoint.substring(0, 50) + "..."
+                    + viewPoint.substring(viewPoint.length() - 50);
+        }
+    }
 }

skywalking-webui/src/main/java/com/ai/cloud/skywalking/web/service/impl/AnalysisResultService.java

@@ -99,6 +99,7 @@ public class AnalysisResultService implements IAnalysisResultService {
         List<TypicalCallTree> typicalCallTrees = new ArrayList<TypicalCallTree>();
         for (String callTreeId : typicalCallTreeIds) {
             TypicalCallTree typicalCallTree = typicalCallTreeDao.queryCallChainTree(callTreeId);
+            typicalCallTree.beautifulViewPointForShow();
             typicalCallTrees.add(typicalCallTree);
         }
 

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

@@ -27,15 +27,13 @@ AnalysisResultViewResolver.prototype.bindEvent = function () {
 
 }
 
-
 AnalysisResultViewResolver.prototype.callChainTreeData = [];
 AnalysisResultViewResolver.prototype.callEntrance = {};
 AnalysisResultViewResolver.prototype.typicCallChainData = [];
-AnalysisResultViewResolver.prototype.currentTypicalTreeNodeMapping = [];
+AnalysisResultViewResolver.prototype.currentTypicalTreeNodes = {callChainTreeNodeList:[]};
+AnalysisResultViewResolver.prototype.currentTypicalTreeNodeMapping={typicalTreeIds:[]};
 
 AnalysisResultViewResolver.prototype.showTypicalCallTree = function (nodeToken) {
-
-
     for (var i = 0; i < this.typicCallChainData.length; i++) {
         var node = this.typicCallChainData[i];
         var tmpInfo = node.treeNodes[nodeToken];
@@ -43,18 +41,16 @@ AnalysisResultViewResolver.prototype.showTypicalCallTree = function (nodeToken)
             continue;
         }
 
-        var tmpTypicalCallChain = {};
-        tmpTypicalCallChain.callTreeId = node.callTreeId;
+        var tmpTypicalCallChain = [];
         for (var key in node.treeNodes) {
             var tmpNode = node.treeNodes[key];
-            tmpNode.analyResult = JSON.parse($("#" + key).text());
-            tmpTypicalCallChain.nodes.push(tmpNode);
+            tmpNode.anlyResult = JSON.parse($("#" + key).text());
+            tmpTypicalCallChain.push(key);
+            this.currentTypicalTreeNodes.callChainTreeNodeList.push(tmpNode);
         }
-        this.currentTypicalTreeNodeMapping.push(tmpTypicalCallChain);
+        this.currentTypicalTreeNodeMapping[node.callTreeId] = tmpTypicalCallChain;
+        this.currentTypicalTreeNodeMapping.typicalTreeIds.push(node.callTreeId);
     }
-
-    alert(currentTypicalTreeNodeMapping);
-
 }
 
 AnalysisResultViewResolver.prototype.loadData = function (analyType, analyDate) {
@@ -84,6 +80,26 @@ AnalysisResultViewResolver.prototype.loadData = function (analyType, analyDate)
                         var htmlOutput = template.render({});
                         $("#mainPanel").empty();
                         $("#mainPanel").html(htmlOutput);
+
+                        template = $.templates("#typicalTreeCheckBoxTmpl");
+                         htmlOutput = template.render({"typicalTreeIds": self.currentTypicalTreeNodeMapping.typicalTreeIds});
+                        alert(htmlOutput);
+                        $("#typicalCheckBoxDiv").empty();
+                        $("#typicalCheckBoxDiv").html(htmlOutput);
+
+                        $("input[name='typicalTreeCheckBox']").each(function(){
+                            $(this).change(function(){
+                                var treeIds = new Array();
+                                $("input[name='typicalTreeCheckBox']").each(function(){
+                                    
+                                });
+                            });
+                        });
+
+                         template = $.templates("#typicalTreeTableTmpl");
+                        var htmlOutput = template.render((self.convertAnalysisResult(self.currentTypicalTreeNodes)));
+                        $("#typicalTreeTableDataBody").empty();
+                        $("#typicalTreeTableDataBody").html(htmlOutput);
                     })
                 });
             }
@@ -122,10 +138,6 @@ AnalysisResultViewResolver.prototype.convertAnalysisResult = function (originDat
     var flag = false;
     for (var i = 0; i < originData.callChainTreeNodeList.length; i++) {
         var node = originData.callChainTreeNodeList[i];
-        if (node.traceLevelId == "0") {
-            self.callEntrance = node;
-        }
-
         if (previousNodeLevelId == node.traceLevelId) {
             if (count == 1) {
                 index = i - 1;

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

@@ -46,12 +46,13 @@
             </table>
     </div>
     <hr/>
+
 </script>
 </#macro>
 
 <#macro analysisResultTableTmpl>
 <script type="text/x-jsrender" id="analysisResultTableTmpl">
-        <tr id="a">
+        <tr>
             {{if isPrintLevelId}}
                 <td rowspan="{{>rowSpanCount}}" valign="middle">{{>traceLevelId}}</td>
             {{/if}}
@@ -99,6 +100,7 @@
             <span id="{{>nodeToken}}" style="display:none">{{>anlyResultStr}}</span></td>
 
         </tr>
+
 </script>
 </#macro>
 
@@ -114,11 +116,7 @@
     <br/>
     <div class="panel panel-default">
       <div class="panel-body">
-        <div class="row">
-          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;归属该节点下所有的典型调用链：</span>
-          <input type="checkbox"/>典型调用链1&nbsp;
-          <input type="checkbox">典型调用链2</input>&nbsp;
-          <input type="checkbox">典型调用链3</input>
+        <div class="row" id="typicalCheckBoxDiv">
         </div>
         <br/>
         <table class="gridtable" style="width:100%;">
@@ -126,79 +124,56 @@
             <tr>
               <th>LevelId</th>
               <th>ViewPoint</th>
-              <th>应用</th>
               <th>调用次数</th>
               <th>正确次数</th>
-              <th>错误次数</th>
               <th>正确率</th>
               <th>平均耗时</th>
             </tr>
           </thead>
-          <tbody id="dataBody">
-            <tr id="a">
-              <td>0</td>
-              <td>Http://localhost:8080/order/save1</td>
-              <td>Order-Application</td>
-              <td>100</td>
-              <td>100</td>
-              <td>0</td>
-              <td>100%</td>
-              <td>20.0ms</td>
-            </tr>
-            <tr id="b">
-              <td valign="middle">0.0</td>
-              <td>&nbsp;&nbsp;<a id="popBtn" data-toggle="modal" data-target="#myModal">com.ai.aisse.core.service.impl...taServiceImpl.SynchAisseData()</a></td>
-              <td>Account-Application</td>
-              <td>100</td>
-              <td>100</td>
-              <td>0</td>
-              <td>100%</td>
-              <td>20.0ms</td>
-            </tr>
-            <tr id="c">
-              <td valign="middle">0.0</td>
-              <td>&nbsp;&nbsp;<a>com.ai.aisse.core.dao.impl.Syn...taDaoImpl.queryAppAisseTimer()</a></td>
-              <td>Biling-Application</td>
-              <td>100</td>
-              <td>100</td>
-              <td>0</td>
-              <td>100%</td>
-              <td>20.0ms</td>
-            </tr>
-            <tr id="d">
-              <td>0.2</td>
-              <td>&nbsp;&nbsp;<a>tracing:jdbc:oracle:thin:@10.1.1.61:1521:OAPROD(aisse)</a></td>
-              <td>Order-Application</td>
-              <td>100</td>
-              <td>100</td>
-              <td>0</td>
-              <td>100%</td>
-              <td>20.0ms</td>
-            </tr>
-            <tr id="e">
-              <td valign="middle">0.3</td>
-              <td>&nbsp;&nbsp;<a>com.ai.aisse.core.dao.impl.Syn...AisseTimer(java.sql.Timestamp)</a></td>
-              <td>Order-Application</td>
-              <td>100</td>
-              <td>100</td>
-              <td>0</td>
-              <td>100%</td>
-              <td>20.0ms</td>
-            </tr>
-            <tr id="f">
-              <td valign="middle">0.0</td>
-              <td>&nbsp;&nbsp;<a>tracing:jdbc:oracle:thin:@10.1.1.61:1521:OAPROD(aisse)</a></td>
-              <td>Order-Application</td>
-              <td>100</td>
-              <td>100</td>
-              <td>0</td>
-              <td>100%</td>
-              <td>20.0ms</td>
-            </tr>
+          <tbody id="typicalTreeTableDataBody">
           </tbody>
         </table>
       </div>
     </div>
+
+</script>
+</#macro>
+
+<#macro typicalCallChainCheckBox>
+<script type="text/x-jsrender" id="typicalTreeCheckBoxTmpl">
+    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;归属该节点下所有的典型调用链：</span>
+    {{for typicalTreeIds}}
+        <input name="typicalTreeCheckBox" type="checkbox" checked/>典型调用链{{: #index}}&nbsp;
+    {{/for}}
+</script>
+</#macro>
+
+<#macro typicalCallChainTreeTable>
+<script type="text/x-jsrender" id="typicalTreeTableTmpl">
+        <tr>
+            {{if isPrintLevelId}}
+                <td rowspan="{{>rowSpanCount}}" valign="middle">{{>traceLevelId}}</td>
+            {{/if}}
+            <td>
+                <a href="javascript:void(0);" data-toggle="modal" data-target="#modal{{>nodeToken}}">{{>viewPoint}}</a>
+            </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>
 

skywalking-webui/src/main/webapp/pages/main.ftl

@@ -46,6 +46,8 @@
 <@anlyResult.analysisResult/>
 <@anlyResult.analysisResultTableTmpl/>
 <@anlyResult.typicalCallChainTrees/>
+<@anlyResult.typicalCallChainTreeTable/>
+<@anlyResult.typicalCallChainCheckBox/>
 <p id="baseUrl" style="display: none">${_base}</p>
 <div class="container" id="mainPanel">
     <p id="searchType" style="display: none">${searchType!''}</p>