新增查询选项(analyResult:TREE_ID_3ABA812B902034A9BD8FF5CD7239756D) 可以查询出该调用树的统计结果

skywalking-webui/src/main/java/com/ai/cloud/skywalking/web/controller/AnalysisResultController.java

@@ -2,11 +2,10 @@ package com.ai.cloud.skywalking.web.controller;
 
 import com.ai.cloud.skywalking.web.common.BaseController;
 import com.ai.cloud.skywalking.web.dto.CallChainTree;
-import com.ai.cloud.skywalking.web.dto.LoginUserInfo;
+import com.ai.cloud.skywalking.web.dto.TypicalCallTree;
 import com.ai.cloud.skywalking.web.service.inter.IAnalysisResultService;
 import com.alibaba.fastjson.JSONObject;
 import com.google.gson.Gson;
-import com.google.gson.JsonObject;
 import org.apache.logging.log4j.LogManager;
 import org.apache.logging.log4j.Logger;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -16,6 +15,7 @@ import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.ResponseBody;
 
 import javax.servlet.http.HttpServletRequest;
+import java.util.List;
 
 /**
  * Created by xin on 16-4-5.
@@ -47,13 +47,13 @@ public class AnalysisResultController extends BaseController {
                                      @PathVariable("analyDate") String analyDate) {
         JSONObject result = new JSONObject();
         try {
-           // LoginUserInfo userInfo = fetchLoginUserInfoFromSession(request);
+            // LoginUserInfo userInfo = fetchLoginUserInfoFromSession(request);
             CallChainTree callChainTree = analysisResultService.
                     fetchAnalysisResult(treeId, analyType, analyDate);
             result.put("code", "200");
             if (callChainTree != null) {
                 result.put("result", new Gson().toJson(callChainTree));
-            }else{
+            } else {
                 result.put("result", "{}");
             }
         } catch (Exception e) {
@@ -64,4 +64,28 @@ public class AnalysisResultController extends BaseController {
         }
         return result.toJSONString();
     }
+
+    @RequestMapping(value = "/load/{treeId}/{analyDate}", produces = "application/json; charset=UTF-8")
+    @ResponseBody
+    public String loadTypicalCallTree(HttpServletRequest request,
+                                      @PathVariable("treeId") String treeId,
+                                      @PathVariable("analyDate") String analyDate) {
+        JSONObject result = new JSONObject();
+
+        try {
+            List<TypicalCallTree> typicalCallTrees = analysisResultService.fetchTypicalCallTrees(treeId, analyDate);
+            result.put("code", "200");
+            if (typicalCallTrees != null) {
+                result.put("result", new Gson().toJson(typicalCallTrees));
+            } else {
+                result.put("result", "{}");
+            }
+        } catch (Exception e) {
+            logger.error("Failed to load treeId[{}], anlyDate:[{}]", treeId, analyDate);
+            e.printStackTrace();
+            result.put("code", "500");
+            result.put("message", "Fatal error");
+        }
+        return result.toJSONString();
+    }
 }

skywalking-webui/src/main/java/com/ai/cloud/skywalking/web/dao/impl/CallChainTreeDao.java

@@ -23,7 +23,6 @@ import org.springframework.stereotype.Repository;
 
 import java.io.IOException;
 import java.util.Calendar;
-import java.util.Collections;
 import java.util.Map;
 
 @Repository
@@ -36,10 +35,6 @@ public class CallChainTreeDao implements ICallChainTreeDao {
 
     @Override
     public AnlyResult queryEntranceAnlyResult(String entranceColumnName, String treeId) throws IOException {
-        String columnName = entranceColumnName;
-        if (entranceColumnName.lastIndexOf(":") != -1) {
-            columnName = entranceColumnName.substring(0, entranceColumnName.length() - 1);
-        }
         Table table = hBaseUtils.getConnection().getTable(TableName.valueOf("sw-chain-1month-summary"));
         Get get = new Get(treeId.getBytes());
         Result result = table.get(get);
@@ -48,19 +43,17 @@ public class CallChainTreeDao implements ICallChainTreeDao {
             return new AnlyResult(calendar.get(Calendar.YEAR) + "", (calendar.get(Calendar.MONTH) + 1) + "");
         }
         AnlyResult anlyResult = null;
-        Cell cell = result.getColumnLatestCell("chain_summary".getBytes(), columnName.getBytes());
-        if (cell != null) {
-            String anlyResultStr = Bytes.toString(cell.getValueArray(),
-                    cell.getValueOffset(), cell.getValueLength());
-            logger.debug("traceId: {} , entranceColumnName : {}, anlyResultStr : {}",
-                    treeId, columnName, anlyResultStr);
-            JsonObject jsonObject = (JsonObject) new JsonParser().parse(anlyResultStr);
-            Map<String, AnlyResult> resultMap = new Gson().fromJson(jsonObject.getAsJsonObject("summaryValueMap"),
-                    new TypeToken<Map<String, AnlyResult>>() {
-                    }.getType());
-            anlyResult = resultMap.get((Calendar.getInstance().get(Calendar.MONTH) + 1) + "");
-        }
+        Cell cell = result.getColumnLatestCell("chain_summary".getBytes(), entranceColumnName.getBytes());
 
+        String anlyResultStr = Bytes.toString(cell.getValueArray(),
+                cell.getValueOffset(), cell.getValueLength());
+        logger.debug("traceId: {} , entranceColumnName : {}, anlyResultStr : {}",
+                treeId, entranceColumnName, anlyResultStr);
+        JsonObject jsonObject = (JsonObject) new JsonParser().parse(anlyResultStr);
+        Map<String, AnlyResult> resultMap = new Gson().fromJson(jsonObject.getAsJsonObject("summaryValueMap"),
+                new TypeToken<Map<String, AnlyResult>>() {
+                }.getType());
+        anlyResult = resultMap.get((Calendar.getInstance().get(Calendar.MONTH) + 1) + "");
         if (anlyResult == null) {
             anlyResult = new AnlyResult();
         }

skywalking-webui/src/main/java/com/ai/cloud/skywalking/web/dao/impl/TypicalCallTreeDaoImpl.java

+package com.ai.cloud.skywalking.web.dao.impl;
+
+import com.ai.cloud.skywalking.web.dao.inter.ITypicalCallTreeDao;
+import com.ai.cloud.skywalking.web.dto.TypicalCallTree;
+import com.ai.cloud.skywalking.web.dto.TypicalCallTreeNode;
+import com.ai.cloud.skywalking.web.util.HBaseUtils;
+import com.alibaba.fastjson.JSONArray;
+import org.apache.hadoop.hbase.Cell;
+import org.apache.hadoop.hbase.TableName;
+import org.apache.hadoop.hbase.client.Get;
+import org.apache.hadoop.hbase.client.Result;
+import org.apache.hadoop.hbase.client.Table;
+import org.apache.hadoop.hbase.util.Bytes;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Repository;
+
+import java.io.IOException;
+
+/**
+ * Created by xin on 16-4-28.
+ */
+@Repository
+public class TypicalCallTreeDaoImpl implements ITypicalCallTreeDao {
+
+    @Autowired
+    private HBaseUtils hBaseUtils;
+
+    @Override
+    public String[] queryAllCombineCallChainTreeIds(String rowKey) throws IOException {
+        Table table = hBaseUtils.getConnection().getTable(TableName.valueOf("sw-treeId-cid-mapping"));
+        Get g = new Get(Bytes.toBytes(rowKey));
+
+        Result r = table.get(g);
+        if (r.rawCells().length == 0) {
+            return null;
+        }
+        Cell cell = r.getColumnLatestCell("cids".getBytes(), "been_merged_cid".getBytes());
+        JSONArray result = JSONArray.parseArray(Bytes.toString(cell.getValueArray(), cell.getValueOffset(), cell.getValueLength()));
+        return result.toArray(new String[result.size()]);
+    }
+
+    @Override
+    public TypicalCallTree queryCallChainTree(String callTreeId) throws IOException {
+        Table table = hBaseUtils.getConnection().getTable(TableName.valueOf("sw-chain-detail"));
+        Get g = new Get(Bytes.toBytes(callTreeId));
+
+        Result r = table.get(g);
+        if (r.rawCells().length == 0) {
+            return null;
+        }
+        TypicalCallTree callTree = new TypicalCallTree(callTreeId);
+        for (Cell cell : r.rawCells()) {
+            String levelId = Bytes.toString(cell.getQualifierArray(), cell.getQualifierOffset(), cell.getQualifierLength());
+            String viewPoint = Bytes.toString(cell.getValueArray(), cell.getValueOffset(), cell.getValueLength());
+            callTree.addNode(new TypicalCallTreeNode(levelId, viewPoint));
+        }
+        return callTree;
+    }
+}

skywalking-webui/src/main/java/com/ai/cloud/skywalking/web/dao/inter/ITypicalCallTreeDao.java

+package com.ai.cloud.skywalking.web.dao.inter;
+
+import com.ai.cloud.skywalking.web.dto.TypicalCallTree;
+
+import java.io.IOException;
+
+/**
+ * Created by xin on 16-4-28.
+ */
+public interface ITypicalCallTreeDao {
+    String[] queryAllCombineCallChainTreeIds(String rowKey) throws IOException;
+
+    TypicalCallTree queryCallChainTree(String callTreeId) throws IOException;
+}

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

 package com.ai.cloud.skywalking.web.dto;
 
 import com.ai.cloud.skywalking.web.util.StringUtil;
+import com.ai.cloud.skywalking.web.util.TokenGenerator;
 import com.google.gson.Gson;
 import com.google.gson.JsonObject;
 import com.google.gson.JsonParser;
@@ -13,6 +14,7 @@ import java.util.Map;
  */
 public class CallChainTreeNode {
 
+    private String nodeToken;
     private String traceLevelId;
     private String viewPoint;
     private AnlyResult anlyResult;
@@ -20,6 +22,7 @@ public class CallChainTreeNode {
     public CallChainTreeNode(String qualifierStr, String valueStr, String loadKey) {
         traceLevelId = qualifierStr.substring(0, qualifierStr.indexOf("@"));
         viewPoint = qualifierStr.substring(qualifierStr.indexOf("@") + 1);
+        nodeToken = TokenGenerator.generate(traceLevelId + ":" + viewPoint);
         JsonObject jsonObject = (JsonObject) new JsonParser().parse(valueStr);
         Map<String, AnlyResult> resultMap = new Gson().fromJson(jsonObject.getAsJsonObject("summaryValueMap"),
                 new TypeToken<Map<String, AnlyResult>>() {
@@ -44,4 +47,8 @@ public class CallChainTreeNode {
                     + viewPoint.substring(viewPoint.length() - 50);
         }
     }
+
+    public String getNodeToken() {
+        return nodeToken;
+    }
 }

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

+package com.ai.cloud.skywalking.web.dto;
+
+import java.util.ArrayList;
+import java.util.List;
+
+/**
+ * Created by xin on 16-4-28.
+ */
+public class TypicalCallTree {
+    private String callTreeId;
+    private List<TypicalCallTreeNode> treeNodes;
+
+
+    public TypicalCallTree(String callTreeId) {
+        this.callTreeId = callTreeId;
+        this.treeNodes = new ArrayList<TypicalCallTreeNode>();
+    }
+
+    public void addNode(TypicalCallTreeNode typicalCallTreeNode) {
+        this.treeNodes.add(typicalCallTreeNode);
+    }
+}

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

+package com.ai.cloud.skywalking.web.dto;
+
+import com.ai.cloud.skywalking.web.util.TokenGenerator;
+
+/**
+ * Created by xin on 16-4-28.
+ */
+public class TypicalCallTreeNode {
+    private String nodeToken;
+    private String levelId;
+    private String viewpoint;
+
+
+    public TypicalCallTreeNode(String levelId, String viewPoint) {
+        this.levelId = levelId;
+        this.viewpoint = viewPoint;
+        this.nodeToken = TokenGenerator.generate(levelId + ":" + viewPoint);
+    }
+}

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

 package com.ai.cloud.skywalking.web.service.impl;
 
 import com.ai.cloud.skywalking.web.dao.inter.ICallChainTreeDao;
+import com.ai.cloud.skywalking.web.dao.inter.ITypicalCallTreeDao;
 import com.ai.cloud.skywalking.web.dto.CallChainTree;
 import com.ai.cloud.skywalking.web.dto.CallChainTreeNode;
+import com.ai.cloud.skywalking.web.dto.TypicalCallTree;
 import com.ai.cloud.skywalking.web.service.inter.IAnalysisResultService;
 import org.apache.logging.log4j.LogManager;
 import org.apache.logging.log4j.Logger;
@@ -12,10 +14,7 @@ import org.springframework.stereotype.Service;
 import java.io.IOException;
 import java.text.ParseException;
 import java.text.SimpleDateFormat;
-import java.util.Calendar;
-import java.util.Collections;
-import java.util.Comparator;
-import java.util.Date;
+import java.util.*;
 
 /**
  * Created by xin on 16-4-25.
@@ -28,6 +27,9 @@ public class AnalysisResultService implements IAnalysisResultService {
     @Autowired
     private ICallChainTreeDao callChainTreeDao;
 
+    @Autowired
+    private ITypicalCallTreeDao typicalCallTreeDao;
+
     @Override
     public CallChainTree fetchAnalysisResult(String treeId, String analyType, String analyDate) throws ParseException, IOException {
         String tableName = null;
@@ -79,4 +81,26 @@ public class AnalysisResultService implements IAnalysisResultService {
 
         return callChainTree;
     }
+
+    @Override
+    public List<TypicalCallTree> fetchTypicalCallTrees(String treeId, String analyDate) throws ParseException, IOException {
+        SimpleDateFormat format = new SimpleDateFormat("yyyy-MM");
+        Date date = format.parse(analyDate);
+        Calendar calendar = Calendar.getInstance();
+        calendar.setTime(date);
+
+        String rowKey = treeId + "@" + calendar.get(Calendar.YEAR) + "-" + calendar.get(Calendar.MONTH);
+        //load treeID
+        String[] typicalCallTreeIds = typicalCallTreeDao.queryAllCombineCallChainTreeIds(rowKey);
+        if (typicalCallTreeIds == null) {
+            return new ArrayList<TypicalCallTree>();
+        }
+        List<TypicalCallTree> typicalCallTrees = new ArrayList<TypicalCallTree>();
+        for (String callTreeId : typicalCallTreeIds) {
+            TypicalCallTree typicalCallTree = typicalCallTreeDao.queryCallChainTree(callTreeId);
+            typicalCallTrees.add(typicalCallTree);
+        }
+
+        return typicalCallTrees;
+    }
 }

skywalking-webui/src/main/java/com/ai/cloud/skywalking/web/service/inter/IAnalysisResultService.java

 package com.ai.cloud.skywalking.web.service.inter;
 
 import com.ai.cloud.skywalking.web.dto.CallChainTree;
+import com.ai.cloud.skywalking.web.dto.TypicalCallTree;
 
 import java.io.IOException;
 import java.text.ParseException;
+import java.util.List;
 
 /**
  * Created by xin on 16-4-25.
  */
 public interface IAnalysisResultService {
     CallChainTree fetchAnalysisResult(String treeId, String analyType, String analyDate) throws ParseException, IOException;
+
+    List<TypicalCallTree> fetchTypicalCallTrees(String treeId, String analyDate) throws ParseException, IOException;
 }

skywalking-webui/src/main/java/com/ai/cloud/skywalking/web/util/TokenGenerator.java

+package com.ai.cloud.skywalking.web.util;
+
+
+import org.apache.logging.log4j.LogManager;
+import org.apache.logging.log4j.Logger;
+
+import java.security.MessageDigest;
+import java.security.NoSuchAlgorithmException;
+
+public final class TokenGenerator {
+
+    private static Logger logger = LogManager.getLogger(TokenGenerator.class);
+
+    public static String generate(String originData) {
+        StringBuilder result = new StringBuilder();
+        if (originData != null) {
+            try {
+                MessageDigest md = MessageDigest.getInstance("MD5");
+                byte bytes[] = md.digest(originData.getBytes());
+                for (int i = 0; i < bytes.length; i++) {
+                    String str = Integer.toHexString(bytes[i] & 0xFF);
+                    if (str.length() == 1) {
+                        str += "F";
+                    }
+                    result.append(str);
+                }
+            } catch (NoSuchAlgorithmException e) {
+                logger.error("Cannot found algorithm.", e);
+                System.exit(-1);
+            }
+        }
+        return result.toString().toUpperCase();
+    }
+}

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

+function initAnalysisResult() {
+
+
+    $('#analyDate').datetimepicker({
+        format: 'yyyy-mm-dd',
+        startView: 2,
+        minView: 2,
+        autoclose: true
+    });
+
+    $("#previousHourBtn").click(function () {
+        var analyType = "HOUR";
+        var analyDate = getPreviousHour();
+        paintAnalysisResult($("#treeId").val(), analyType, analyDate)
+    });
+
+    $("#yesterdayBtn").click(function () {
+        var analyType = "DAY";
+        var analyDate = getYesterday();
+        paintAnalysisResult($("#treeId").val(), analyType, analyDate)
+    });
+
+    $("#currentMonthBtn").click(function () {
+        var analyType = "MONTH";
+        var analyDate = getCurrentMonth();
+        paintAnalysisResult($("#treeId").val(), analyType, analyDate)
+    });
+
+    $("#previousMonthBtn").click(function () {
+        var analyType = "MONTH";
+        var analyDate = getPreviousMonth();
+        paintAnalysisResult($("#treeId").val(), analyType, analyDate)
+    });
+
+
+    $("a[name='analyTypeDropDownOption']").each(function () {
+        $(this).click(function () {
+            $('#analyDate').val("");
+            $("#analyTypeDropDown").text($(this).text());
+            var value = $(this).attr("value");
+            var modelView = 2;
+            var formatStr = 'yyyy-mm-dd';
+            if (value == "HOUR") {
+                formatStr = 'yyyy-mm-dd:hh';
+                modelView = 1;
+            } else if (value == "DAY") {
+                formatStr = 'yyyy-mm-dd';
+                modelView = 2;
+            } else if (value == "MONTH") {
+                formatStr = 'yyyy-mm';
+                modelView = 3;
+            } else {
+                formatStr = 'yyyy-mm-dd';
+                modelView = 2;
+            }
+            $('#analyDate').datetimepicker('remove');
+            $('#analyDate').datetimepicker({
+                format: formatStr,
+                startView: modelView,
+                minView: modelView,
+                autoclose: true
+            });
+
+            $("#analyType").val(value);
+        });
+    });
+
+    $("a[name='analyTypeDropDownOption'][value='MONTH']").click();
+    $("#analyDate").val(getCurrentMonth());
+
+    $("#showAnalyResultBtn").click(function () {
+        paintAnalysisResult($("#treeId").val(), $("#analyType").val(), $("#analyDate").val())
+    });
+
+    $("#showAnalyResultBtn").click();
+}
+
+function paintAnalysisResult(treeId, analyType, analyDate) {
+    var baseUrl = $("#baseUrl").text();
+    var analysisResultUrl = baseUrl + "/analy/load/" + treeId + "/" +
+        analyType + "/" + analyDate;
+    $.ajax({
+        type: 'POST',
+        url: analysisResultUrl,
+        dataType: 'json',
+        async: true,
+        success: function (data) {
+            if (data.code == '200') {
+                var dataResult = convertAnalysisResult(jQuery.parseJSON(data.result));
+                var template = $.templates("#analysisResultTableTmpl");
+                var htmlOutput = template.render(dataResult);
+                $("#dataBody").empty();
+                $("#dataBody").html(htmlOutput);
+            }
+        },
+        error: function () {
+            $("#errorMessage").text("Fatal Error, please try it again.");
+            $("#alertMessageBox").show();
+        }
+    });
+    var typicalCallUrl = baseUrl + "/analy/load/" + treeId + "/" + analyDate;
+
+    $.ajax({
+        type: 'POST',
+        url: typicalCallUrl,
+        dataType: 'json',
+        async: true,
+        success: function (data) {
+            if (data.code == '200') {
+                //data.result
+            }
+        },
+        error: function () {
+            $("#errorMessage").text("Fatal Error, please try it again.");
+            $("#alertMessageBox").show();
+        }
+    });
+}
+
+function convertAnalysisResult(originData) {
+    if (originData == undefined || originData.callChainTreeNodeList == undefined) {
+        return [];
+    }
+    var previousNodeLevelId = "";
+    var index = -1;
+    var count = 1;
+    var flag = false;
+    for (var i = 0; i < originData.callChainTreeNodeList.length; i++) {
+        var node = originData.callChainTreeNodeList[i];
+
+        if (previousNodeLevelId == node.traceLevelId) {
+            if (count == 1) {
+                index = i - 1;
+            }
+            count++;
+            flag = true;
+        }
+
+        if (flag){
+            originData.callChainTreeNodeList[i].isPrintLevelId = false;
+            originData.callChainTreeNodeList[index].rowSpanCount = count;
+            flag = false;
+        }else{
+            count = 1;
+            originData.callChainTreeNodeList[i].rowSpanCount = count;
+            originData.callChainTreeNodeList[i].isPrintLevelId = true;
+        }
+
+        if (node.anlyResult.totalCall > 0) {
+            node.anlyResult.correctRate =
+                (parseFloat(node.anlyResult.correctNumber)
+                / parseFloat(node.anlyResult.totalCall) * 100).toFixed(2);
+
+            node.anlyResult.averageCost =
+                (parseFloat(node.anlyResult.totalCostTime)
+                / parseFloat(node.anlyResult.totalCall)).toFixed(2);
+        } else {
+            node.anlyResult.correctRate = (0).toFixed(2);
+            node.anlyResult.averageCost = (0).toFixed(2);
+        }
+        previousNodeLevelId = node.traceLevelId;
+    }
+
+    return originData.callChainTreeNodeList;
+}
+
+function getPreviousHour() {
+    var date = new Date();
+    var seperator1 = "-";
+    var seperator2 = ":";
+    var month = date.getMonth() + 1;
+    var strDate = date.getDate();
+    if (month >= 1 && month <= 9) {
+        month = "0" + month;
+    }
+    if (strDate >= 0 && strDate <= 9) {
+        strDate = "0" + strDate;
+    }
+    return date.getFullYear() + seperator1 + month + seperator1 + strDate + seperator2 + (date.getHours() - 1);
+}
+
+function getYesterday() {
+    var date = new Date();
+    var seperator1 = "-";
+    var month = date.getMonth() + 1;
+    var strDate = date.getDate() - 1;
+    if (month >= 1 && month <= 9) {
+        month = "0" + month;
+    }
+    if (strDate >= 0 && strDate <= 9) {
+        strDate = "0" + strDate;
+    }
+    return date.getFullYear() + seperator1 + month + seperator1 + strDate;
+}
+
+function getCurrentMonth() {
+    var date = new Date();
+    var seperator1 = "-";
+    var month = date.getMonth() + 1;
+    if (month >= 1 && month <= 9) {
+        month = "0" + month;
+    }
+    return date.getFullYear() + seperator1 + month;
+}
+
+function getPreviousMonth() {
+    var date = new Date();
+    var seperator1 = "-";
+    var month = date.getMonth();
+    var year = date.getFullYear();
+    if (month == 0) {
+        year = date.getFullYear() - 1;
+        month = 12;
+    }
+    if (month >= 1 && month <= 9) {
+        month = "0" + month;
+    }
+    return year + seperator1 + month;
+}
\ No newline at end of file

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

-<#import "../common/commons.ftl" as common>
-<!DOCTYPE html>
-<html lang="zh-CN">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
-<@common.importResources />
-    <link href="${_base}/bower_components/skywalking/css/tracelog.css" rel="stylesheet"/>
-    <link href="${_base}/bower_components/smalot-bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"
-          rel="stylesheet"/>
-    <script src="${_base}/bower_components/smalot-bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
-</head>
-
-<body style="padding-top:100px">
-<@common.navbar/>
-<div class="container" id="mainPanel">
+<#macro analysisResult>
+<script type="text/x-jsrender" id="analysisResultPanelTmpl">
     <div class="row">
         <div class="col-md-4 ">
             <div class="input-group">
@@ -43,10 +28,9 @@
     </div>
     <hr/>
     <div class="row">
-        <div>
-            <input type="hidden" id="treeId" value="${treeId}"/>
+            <input type="hidden" id="treeId" value="{{>treeId}}"/>
             <input type="hidden" id="analyType" value=""/>
-            <table class="gridtable" style="width:100%">
+            <table class="gridtable">
                 <thead>
                 <tr>
                     <th width="10%">LevelId</th>
@@ -60,9 +44,12 @@
                 <tbody id="dataBody">
                 </tbody>
             </table>
-        </div>
     </div>
-    <script type="text/x-jsrender" id="analysisResultTableTmpl">
+</script>
+</#macro>
+
+<#macro analysisResultTableTmpl>
+<script type="text/x-jsrender" id="analysisResultTableTmpl">
         <tr id="a">
             {{if isPrintLevelId}}
                 <td rowspan="{{>rowSpanCount}}" valign="middle">{{>traceLevelId}}</td>
@@ -81,198 +68,8 @@
          {{/if}}
          ">
             <strong>{{>anlyResult.correctRate}}%</strong></span></td>
-            <td>{{>anlyResult.totalCostTime}}ms</td>
+            <td>{{>anlyResult.averageCost}}ms</td>
         </tr>
-    </script>
-    <script>
-        $(document).ready(function () {
-            $('#analyDate').datetimepicker({
-                format: 'yyyy-mm-dd',
-                startView: 2,
-                minView: 2,
-                autoclose: true
-            });
-
-
-            $("#previousHourBtn").click(function () {
-                var analyType = "HOUR";
-                var analyDate = getPreviousHour();
-                paintAnalysisResult($("#treeId").val(), analyType, analyDate)
-            });
-
-            $("#yesterdayBtn").click(function () {
-                var analyType = "DAY";
-                var analyDate = getYesterday();
-                paintAnalysisResult($("#treeId").val(), analyType, analyDate)
-            });
-
-            $("#currentMonthBtn").click(function () {
-                var analyType = "MONTH";
-                var analyDate = getCurrentMonth();
-                paintAnalysisResult($("#treeId").val(), analyType, analyDate)
-            });
-
-            $("#previousMonthBtn").click(function () {
-                var analyType = "MONTH";
-                var analyDate = getPreviousMonth();
-                paintAnalysisResult($("#treeId").val(), analyType, analyDate)
-            });
-
-
-            $("a[name='analyTypeDropDownOption']").each(function () {
-                $(this).click(function () {
-                    $('#analyDate').val("");
-                    $("#analyTypeDropDown").text($(this).text());
-                    var value = $(this).attr("value");
-                    var modelView = 2;
-                    var formatStr = 'yyyy-mm-dd';
-                    if (value == "HOUR") {
-                        formatStr = 'yyyy-mm-dd:hh';
-                        modelView = 1;
-                    } else if (value == "DAY") {
-                        formatStr = 'yyyy-mm-dd';
-                        modelView = 2;
-                    } else if (value == "MONTH") {
-                        formatStr = 'yyyy-mm';
-                        modelView = 3;
-                    } else {
-                        formatStr = 'yyyy-mm-dd';
-                        modelView = 2;
-                    }
-                    $('#analyDate').datetimepicker('remove');
-                    $('#analyDate').datetimepicker({
-                        format: formatStr,
-                        startView: modelView,
-                        minView: modelView,
-                        autoclose: true
-                    });
-
-                    $("#analyType").val(value);
-                });
-            });
-
-            $("a[name='analyTypeDropDownOption'][value='DAY']").click();
-
-            $("#showAnalyResultBtn").click(function () {
-                paintAnalysisResult($("#treeId").val(), $("#analyType").val(), $("#analyDate").val())
-            });
-        });
-
-        function paintAnalysisResult(treeId, analyType, analyDate) {
-            var url = "${_base}/analy/load/" + treeId + "/" +
-                    analyType + "/" + analyDate;
-            $.ajax({
-                type: 'POST',
-                url: url,
-                dataType: 'json',
-                async: true,
-                success: function (data) {
-                    if (data.code == '200') {
-                        var dataResult = convertAnalysisResult(jQuery.parseJSON(data.result));
-                        var template = $.templates("#analysisResultTableTmpl");
-                        var htmlOutput = template.render(dataResult);
-                        $("#dataBody").empty();
-                        $("#dataBody").html(htmlOutput);
-                    }
-                },
-                error: function () {
-                    $("#errorMessage").text("Fatal Error, please try it again.");
-                    $("#alertMessageBox").show();
-                }
-            });
-        }
-
-        function convertAnalysisResult(originData) {
-            if (originData == undefined || originData.callChainTreeNodeList == undefined) {
-                return [];
-            }
-            var previousNodeLevelId = "";
-            var index = 0;
-            var count = 1;
-            for (var i = 0; i < originData.callChainTreeNodeList.length; i++) {
-                var node = originData.callChainTreeNodeList[i];
-                if (previousNodeLevelId == node.traceLevelId) {
-                    if (count == 1) {
-                        index = i - 1;
-                    }
-                    count++;
-                    originData.callChainTreeNodeList[i].isPrintLevelId = false;
-                } else {
-                    if (count > 1) {
-                        originData.callChainTreeNodeList[index].rowSpanCount = count;
-                    } else {
-                        originData.callChainTreeNodeList[i].rowSpanCount = count;
-                    }
-                    count = 1;
-                    originData.callChainTreeNodeList[i].isPrintLevelId = true;
-                }
-                if (node.anlyResult.totalCall > 0) {
-                    node.anlyResult.correctRate =
-                            (parseFloat(node.anlyResult.correctNumber)
-                            / parseFloat(node.anlyResult.totalCall) * 100).toFixed(2);
-                }else{
-                    node.anlyResult.correctRate = (0).toFixed(2);
-                }
-                previousNodeLevelId = node.traceLevelId;
-            }
-
-            return originData.callChainTreeNodeList;
-        }
-
-        function getPreviousHour() {
-            var date = new Date();
-            var seperator1 = "-";
-            var seperator2 = ":";
-            var month = date.getMonth() + 1;
-            var strDate = date.getDate();
-            if (month >= 1 && month <= 9) {
-                month = "0" + month;
-            }
-            if (strDate >= 0 && strDate <= 9) {
-                strDate = "0" + strDate;
-            }
-            return date.getFullYear() + seperator1 + month + seperator1 + strDate + seperator2 + (date.getHours() - 1);
-        }
-
-        function getYesterday() {
-            var date = new Date();
-            var seperator1 = "-";
-            var month = date.getMonth() + 1;
-            var strDate = date.getDate() - 1;
-            if (month >= 1 && month <= 9) {
-                month = "0" + month;
-            }
-            if (strDate >= 0 && strDate <= 9) {
-                strDate = "0" + strDate;
-            }
-            return date.getFullYear() + seperator1 + month + seperator1 + strDate;
-        }
-
-        function getCurrentMonth() {
-            var date = new Date();
-            var seperator1 = "-";
-            var month = date.getMonth() + 1;
-            if (month >= 1 && month <= 9) {
-                month = "0" + month;
-            }
-            return date.getFullYear() + seperator1 + month;
-        }
 
-        function getPreviousMonth() {
-            var date = new Date();
-            var seperator1 = "-";
-            var month = date.getMonth();
-            var year = date.getFullYear();
-            if (month == 0) {
-                year = date.getFullYear() - 1;
-                month = 12;
-            }
-            if (month >= 1 && month <= 9) {
-                month = "0" + month;
-            }
-            return year + seperator1 + month;
-        }
-    </script>
-</div>
-</body>
-</html>
\ No newline at end of file
+</script>
+</#macro>
\ No newline at end of file

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

@@ -13,7 +13,7 @@
 <#macro anlyResultDisplayTmpl>
 <script type="text/x-jsrender" id="anlyResultDisplayTmpl">
     <div class="row">
-        <h4><a href="${_base}/analy/mainPage?treeId={{>treeId}}">{{>entranceViewpoint}}</a></h4>
+        <h4><a href="${_base}/mainPage?loadType=showAnalysisResult&key=analyResult:{{>treeId}}">{{>entranceViewpoint}}</a></h4>
         <p>
          {{for nodes}}
          {{if isPrintSlipDot}}

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

@@ -71,7 +71,9 @@
         $("#searchBtn").click(function () {
             var searchKey = $("#key").val();
             if (searchKey.match(/viewpoint:*/i)) {
-                window.location.href = "${_base}/" + "mainPage?loadType=showAnlyResult&key=" + searchKey;
+                window.location.href = "${_base}/mainPage?loadType=showAnlySearchResult&key=" + searchKey;
+            }else if (searchKey.match(/analyResult:*/i)){
+                window.location.href = "${_base}/mainPage?loadType=showAnalysisResult&key=" + searchKey;
             } else {
                 window.location.href = "${_base}/" + searchKey;
             }

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

@@ -2,7 +2,8 @@
 <#import "./common/traceInfo.ftl" as traceInfo>
 <#import "./usr/applications/applicationMaintain.ftl" as applicationMaintain>
 <#import "./usr/authfile/auth.ftl" as auth>
-<#import "anls-result/analysisSearchResult.ftl" as anlyResult>
+<#import "anls-result/analysisSearchResult.ftl" as anlySearchResult>
+<#import "anls-result/analysisResult.ftl" as anlyResult>
 <!DOCTYPE html>
 <html lang="zh-CN">
 
@@ -17,12 +18,15 @@
     <link href="${_base}/bower_components/skywalking/css/tracelog.css" rel="stylesheet"/>
     <script src="${_base}/bower_components/skywalking/js/tracelog.js"></script>
     <script src="${_base}/bower_components/skywalking/js/application.js"></script>
-    <script src="${_base}/bower_components/skywalking/js/analysisresult.js"></script>
+    <script src="${_base}/bower_components/skywalking/js/analysisSearchResult.js"></script>
+    <script src="${_base}/bower_components/skywalking/js/analysisResult.js"></script>
+    <script src="${_base}/bower_components/smalot-bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
+    <link href="${_base}/bower_components/smalot-bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
     <link href="${_base}/bower_components/bootstrap-toggle/css/bootstrap-toggle.min.css" rel="stylesheet">
     <script src="${_base}/bower_components/bootstrap-toggle/js/bootstrap-toggle.min.js"></script>
 </head>
 
-<body style="padding-top:80px">
+<body style="padding-top:100px">
 <@common.navbar/>
 <!--Trace Info -->
 <@traceInfo.traceTableTmpl/>
@@ -34,9 +38,11 @@
 <@applicationMaintain.createglobalConfig/>
 <@applicationMaintain.modifyApplication/>
 <@auth.downloadAuth/>
-<@anlyResult.anlyResultTmpl/>
-<@anlyResult.anlyResultDisplayTmpl/>
-<@anlyResult.pageInfoTmpl/>
+<@anlySearchResult.anlyResultTmpl/>
+<@anlySearchResult.anlyResultDisplayTmpl/>
+<@anlySearchResult.pageInfoTmpl/>
+<@anlyResult.analysisResult/>
+<@anlyResult.analysisResultTableTmpl/>
 <p id="baseUrl" style="display: none">${_base}</p>
 <div class="container" id="mainPanel">
     <p id="searchType" style="display: none">${searchType!''}</p>
@@ -51,22 +57,24 @@
         // bind
         $("#searchBtn").click(function () {
             var searchKey = $("#searchKey").val();
-            if (searchKey.match(/viewpoint:*/i)){
-                loadContent("showAnlyResult")
-            }else {
+            if (searchKey.match(/viewpoint:*/i)) {
+                loadContent("showAnlySearchResult")
+            } else if (searchKey.match(/analyResult:*/i)){
+                loadContent("showAnalysisResult");
+            } else{
                 loadContent("showTraceInfo");
             }
         })
     });
 
-    function loadContent(loadType,applicationId){
+    function loadContent(loadType, param) {
 
-        if (loadType == "showTraceInfo"){
+        if (loadType == "showTraceInfo") {
             loadTraceTreeData("${_base}");
             return;
         }
 
-        if (loadType == "showAnlyResult"){
+        if (loadType == "showAnlySearchResult") {
             var template = $.templates("#anlyResultPanelTmpl");
             var htmlOutput = template.render({});
             $("#mainPanel").empty();
@@ -80,12 +88,27 @@
             return;
         }
 
+        if (loadType == "showAnalysisResult") {
+            var searchKey = $("#searchKey").val();
+            var index = searchKey.indexOf(':');
+            if (index != -1) {
+                searchKey = searchKey.substr(index + 1);
+            }
+
+            var template = $.templates("#analysisResultPanelTmpl");
+            var htmlOutput = template.render({treeId: searchKey});
+            $("#mainPanel").empty();
+            $("#mainPanel").html(htmlOutput);
+            initAnalysisResult()
+            return;
+        }
+
         if (loadType == "applicationList") {
             loadAllApplications();
             return;
         }
 
-        if (loadType == "addApplication"){
+        if (loadType == "addApplication") {
             var template = $.templates("#addApplicationTmpl");
             var htmlOutput = template.render({});
             $("#mainPanel").empty();
@@ -94,7 +117,7 @@
             return;
         }
 
-        if (loadType == "createGlobalApplication"){
+        if (loadType == "createGlobalApplication") {
             var template = $.templates("#createGlobalConfigTmpl");
             var htmlOutput = template.render({});
             $("#mainPanel").empty();
@@ -103,24 +126,25 @@
             return;
         }
 
-        if (loadType == "modifyApplication"){
+        if (loadType == "modifyApplication") {
             var template = $.templates("#modifyApplicationTmpl");
-            var htmlOutput = template.render({applicationId:applicationId});
+            var htmlOutput = template.render({applicationId: param});
             $("#mainPanel").empty();
             $("#mainPanel").html(htmlOutput);
             modifyApplication();
             return;
         }
 
-        if (loadType == "downloadAuthFile"){
+        if (loadType == "downloadAuthFile") {
             var template = $.templates("#downloadAuthFileTmpl");
-            var htmlOutput = template.render({applicationCode:applicationId});
+            var htmlOutput = template.render({applicationCode: param});
             $("#mainPanel").empty();
             $("#mainPanel").html(htmlOutput);
             toDownloadAuthFile();
             return;
         }
 
+
         $("#mainPanel").empty();
     }
 </script>

skywalking-webui/src/test/java/test/json/TestJSON.java

+package test.json;
+
+import com.ai.cloud.skywalking.web.dto.AnlyResult;
+import com.ai.cloud.skywalking.web.entity.BreviaryChainTree;
+import com.ai.cloud.skywalking.web.util.Constants;
+import com.alibaba.fastjson.JSONObject;
+import com.google.gson.Gson;
+import com.google.gson.JsonElement;
+import com.google.gson.JsonObject;
+import com.google.gson.JsonParser;
+
+import java.util.ArrayList;
+import java.util.List;
+
+/**
+ * Created by xin on 16-4-18.
+ */
+public class TestJSON {
+
+    public static void main(String[] args) {
+        List<BreviaryChainTree> chainTreeList = new ArrayList<BreviaryChainTree>();
+        BreviaryChainTree chainTree = new BreviaryChainTree("Test");
+        chainTree.setEntranceViewpoint("testPoint");
+        AnlyResult anlyResult = new AnlyResult();
+        anlyResult.setCorrectNumber(10);
+        anlyResult.setHumanInterruptionNumber(0);
+        anlyResult.setTotalCall(20);
+        anlyResult.setTotalCostTime(1000);
+        chainTree.setEntranceAnlyResult(anlyResult);
+        chainTreeList.add(chainTree);
+        JSONObject jsonObject = new JSONObject();
+
+        JsonObject result = new JsonObject();
+        if (chainTreeList.size() > Constants.MAX_ANALYSIS_RESULT_PAGE_SIZE) {
+            result.addProperty("hasNextPage", true);
+            chainTreeList.remove(chainTreeList.size() - 1);
+        } else {
+            result.addProperty("hasNexPage", false);
+        }
+        JsonElement jsonElements =  new JsonParser().parse(new Gson().toJson(chainTreeList));
+        result.add("children", jsonElements);
+        jsonObject.put("code", "200");
+        jsonObject.put("result", result.toString());
+
+        System.out.println(jsonObject.toString());
+    }
+}