1. 将页面加载改成ajax形式

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

@@ -0,0 +1,20 @@
+package com.ai.cloud.skywalking.web.controller;
+
+import com.ai.cloud.skywalking.web.common.BaseController;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+import javax.servlet.http.HttpServletRequest;
+
+/**
+ * Created by xin on 16-4-10.
+ */
+@Controller
+public class MainPageController extends BaseController{
+
+    @RequestMapping("/mainPage")
+    public String mainPage(String loadType, HttpServletRequest request){
+        request.setAttribute("loadType", loadType);
+        return "main";
+    }
+}

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

@@ -1,11 +1,17 @@
 package com.ai.cloud.skywalking.web.controller;
 
+import com.ai.cloud.skywalking.web.bo.LoginUserInfo;
 import com.ai.cloud.skywalking.web.bo.TraceTreeInfo;
 import com.ai.cloud.skywalking.web.common.BaseController;
+import com.ai.cloud.skywalking.web.entity.CallChainTree;
+import com.ai.cloud.skywalking.web.service.inter.ICallChainTreeService;
 import com.ai.cloud.skywalking.web.service.inter.ITraceTreeService;
 import com.ai.cloud.skywalking.web.util.StringUtil;
 import com.alibaba.fastjson.JSON;
 import com.alibaba.fastjson.JSONObject;
+import com.google.gson.Gson;
+import org.apache.logging.log4j.LogManager;
+import org.apache.logging.log4j.Logger;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.ModelMap;
@@ -14,6 +20,8 @@ import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.ResponseBody;
 
 import javax.servlet.http.HttpServletRequest;
+import java.util.ArrayList;
+import java.util.List;
 
 /**
  * Created by xin on 16-3-29.
@@ -24,6 +32,11 @@ public class SearchController extends BaseController {
     @Autowired
     private ITraceTreeService iTraceTreeService;
 
+    @Autowired
+    private ICallChainTreeService callChainTreeService;
+    private Logger logger = LogManager.getLogger(SearchController.class);
+
+
     @RequestMapping(value = "")
     public String showDefaultIndexPage(ModelMap root) throws Exception {
         return "index";
@@ -63,9 +76,36 @@ public class SearchController extends BaseController {
 
     @RequestMapping(value = "/{traceId:.+}")
     public String searchTrace(@PathVariable String traceId, HttpServletRequest request) {
+        System.out.println("search Trace.....");
         request.setAttribute("key", traceId);
         request.setAttribute("searchType", "TRACE_ID");
-        return "searchResult";
+        request.setAttribute("loadType","showTraceInfo");
+        return "main";
+    }
+
+    @RequestMapping(value = "/search/chainTree", produces = "application/json; charset=UTF-8")
+    @ResponseBody
+    public String searchCallChainTree(String key, HttpServletRequest request) {
+        JSONObject jsonObject = new JSONObject();
+        try {
+            if (StringUtil.isBlank(key)) {
+                jsonObject.put("code", "200");
+                jsonObject.put("result", JSON.toJSONString(new ArrayList<CallChainTree>()));
+                return jsonObject.toJSONString();
+            }
+
+            LoginUserInfo loginUserInfo = fetchLoginUserInfoFromSession(request);
+
+            List<CallChainTree> callChainTreeList =
+                    callChainTreeService.queryCurrentMonthCallChainTree(loginUserInfo.getUid(), key);
+            jsonObject.put("code", "200");
+            jsonObject.put("result", new Gson().toJson(callChainTreeList));
+        } catch (Exception e) {
+            logger.error("Failed to search chain tree:{}", key, e);
+            jsonObject.put("code", "500");
+            jsonObject.put("result", "Fatal error");
+        }
+        return jsonObject.toJSONString();
     }
 
 }

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

@@ -106,4 +106,19 @@ public class UserMaintainController extends BaseController {
         }
         return result.toJSONString();
     }
+
+    @RequestMapping(value = "/doLogout", produces = "application/json; charset=UTF-8")
+    @ResponseBody
+    public String doLogout(HttpServletRequest request) {
+        JSONObject result = new JSONObject();
+        try {
+            request.getSession().removeAttribute(Constants.SESSION_LOGIN_INFO_KEY);
+            result.put("code", "200");
+            result.put("message", "register success");
+        } catch (Exception e) {
+            result.put("code", "500");
+            result.put("message", "fatal error. please try it again.");
+        }
+        return result.toJSONString();
+    }
 }

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

@@ -0,0 +1,43 @@
+package com.ai.cloud.skywalking.web.dao.impl;
+
+import com.ai.cloud.skywalking.web.dao.inter.ICallChainTreeDao;
+import com.ai.cloud.skywalking.web.entity.CallChainTree;
+import com.ai.cloud.skywalking.web.util.HBaseUtils;
+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;
+
+@Repository
+public class CallChainTreeDao implements ICallChainTreeDao {
+
+    @Autowired
+    private HBaseUtils hBaseUtils;
+
+    @Override
+    public CallChainTree queryTreeId(String treeId) throws IOException {
+        Table table = hBaseUtils.getConnection().getTable(TableName.valueOf("sw-chain-1day-summary"));
+        Get get = new Get(treeId.getBytes());
+        Result result = table.get(get);
+        if (result.rawCells().length == 0) {
+            return null;
+        }
+        CallChainTree chainTree = new CallChainTree(treeId);
+        for (Cell cell : result.rawCells()) {
+            if (cell.getValueArray().length > 0) {
+                String qualifier = Bytes.toString(cell.getQualifierArray(),
+                        cell.getQualifierOffset(), cell.getQualifierLength());
+                String[] qualifierArr = qualifier.split("@");
+                chainTree.addNode(qualifierArr[0],qualifierArr[1]);
+            }
+
+        }
+        return null;
+    }
+}

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

@@ -0,0 +1,49 @@
+package com.ai.cloud.skywalking.web.dao.impl;
+
+import com.ai.cloud.skywalking.web.dao.inter.IChainDetailDao;
+import com.ai.cloud.skywalking.web.util.DBConnectUtil;
+import org.apache.logging.log4j.LogManager;
+import org.apache.logging.log4j.Logger;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Repository;
+
+import java.sql.Connection;
+import java.sql.PreparedStatement;
+import java.sql.ResultSet;
+import java.sql.SQLException;
+import java.util.ArrayList;
+import java.util.List;
+
+@Repository
+public class ChainDetailDao implements IChainDetailDao {
+
+    private Logger logger = LogManager.getLogger(SystemConfigMaintainDao.class);
+
+    @Autowired
+    private DBConnectUtil dbConnectUtil;
+
+    @Override
+    public List<String> queryChainTreeIds(String uid, String viewpoint) throws SQLException {
+        List<String> treeIds = new ArrayList<String>();
+        String sql = "SELECT treeId FROM sw_chain_detail WHERE uid = ? AND viewpoint like ? ";
+        Connection connection = dbConnectUtil.getConnection();
+        try {
+            PreparedStatement preparedStatement = connection.prepareStatement(sql);
+            preparedStatement.setString(1, uid);
+            preparedStatement.setString(2, "%" + viewpoint + "%");
+
+            ResultSet resultSet = preparedStatement.executeQuery();
+            while (resultSet.next()) {
+                treeIds.add(resultSet.getString("treeId"));
+            }
+        } catch (Exception e) {
+            logger.error("Failed to query treeIds for Viewpoint[{}]", viewpoint);
+            throw new RuntimeException("Failed to query treeIds for " + viewpoint, e);
+        } finally {
+            if (connection != null) {
+                connection.close();
+            }
+        }
+        return treeIds;
+    }
+}

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

@@ -79,6 +79,7 @@ public class TraceNodeDao implements ITraceNodeDao {
                         }else{
                             clientLog.setServerExceptionStr(serverLog.getServerExceptionStr());
                         }
+                        System.out.println("1");
                     }
                     logVO.addTimeLine(rpcVO.getValue().getStartDate(), rpcVO.getValue().getCost());
                 } else {

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

@@ -0,0 +1,12 @@
+package com.ai.cloud.skywalking.web.dao.inter;
+
+import com.ai.cloud.skywalking.web.entity.CallChainTree;
+
+import java.io.IOException;
+
+/**
+ * Created by xin on 16-4-6.
+ */
+public interface ICallChainTreeDao {
+    CallChainTree queryTreeId(String treeId) throws IOException;
+}

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

@@ -0,0 +1,11 @@
+package com.ai.cloud.skywalking.web.dao.inter;
+
+import java.sql.SQLException;
+import java.util.List;
+
+/**
+ * Created by xin on 16-4-6.
+ */
+public interface IChainDetailDao {
+    List<String> queryChainTreeIds(String uid, String viewpoint) throws SQLException;
+}

skywalking-webui/src/main/java/com/ai/cloud/skywalking/web/entity/CallChainTree.java

@@ -0,0 +1,27 @@
+package com.ai.cloud.skywalking.web.entity;
+
+import java.util.ArrayList;
+import java.util.List;
+
+/**
+ * Created by xin on 16-4-6.
+ */
+public class CallChainTree {
+    private String treeId;
+    private List<CallChainTreeNode> nodes;
+
+    private String entranceViewpoint;
+
+    public CallChainTree(String treeId) {
+        this.treeId = treeId;
+        nodes = new ArrayList<CallChainTreeNode>();
+    }
+
+    public void addNode(String levelId, String viewpoint) {
+        if ("0".equals(levelId)) {
+            entranceViewpoint = viewpoint;
+        }
+
+        nodes.add(new CallChainTreeNode(levelId, viewpoint));
+    }
+}

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

@@ -0,0 +1,15 @@
+package com.ai.cloud.skywalking.web.entity;
+
+/**
+ * Created by xin on 16-4-6.
+ */
+public class CallChainTreeNode {
+
+    private String traceLevelId;
+
+    private String viewPoint;
+    public CallChainTreeNode(String traceLevelId, String viewpoint) {
+        this.traceLevelId = traceLevelId;
+        this.viewPoint = viewpoint;
+    }
+}

skywalking-webui/src/main/java/com/ai/cloud/skywalking/web/filter/AccessControllerFilter.java

@@ -7,6 +7,8 @@ import javax.servlet.*;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
 import java.io.IOException;
+import java.util.ArrayList;
+import java.util.List;
 
 /**
  * Created by xin on 16-3-28.
@@ -14,22 +16,27 @@ import java.io.IOException;
 public class AccessControllerFilter implements Filter {
 
 
+    private List<String> contained = new ArrayList<>();
+
     @Override
     public void init(FilterConfig filterConfig) throws ServletException {
-
+        contained.add("applicationList");
+        contained.add("addApplication");
+        contained.add("createGlobalApplication");
+        contained.add("modifyApplication");
     }
 
     @Override
     public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
             throws IOException, ServletException {
         HttpServletRequest request = (HttpServletRequest) servletRequest;
-
-        LoginUserInfo loginUserInfo = (LoginUserInfo) request.getSession()
-                .getAttribute(Constants.SESSION_LOGIN_INFO_KEY);
-        if (loginUserInfo == null) {
-            ((HttpServletResponse) servletResponse).sendRedirect(request.getContextPath() + "/usr/login");
+        if (contained.contains(request.getParameter("loadType"))){
+            LoginUserInfo loginUserInfo = (LoginUserInfo) request.getSession()
+                    .getAttribute(Constants.SESSION_LOGIN_INFO_KEY);
+            if (loginUserInfo == null) {
+                ((HttpServletResponse) servletResponse).sendRedirect(request.getContextPath() + "/usr/login");
+            }
         }
-
         filterChain.doFilter(servletRequest, servletResponse);
     }
 

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

@@ -0,0 +1,46 @@
+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.IChainDetailDao;
+import com.ai.cloud.skywalking.web.entity.CallChainTree;
+import com.ai.cloud.skywalking.web.service.inter.ICallChainTreeService;
+import org.apache.logging.log4j.LogManager;
+import org.apache.logging.log4j.Logger;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+import java.io.IOException;
+import java.sql.SQLException;
+import java.util.ArrayList;
+import java.util.Calendar;
+import java.util.List;
+
+@Service
+public class CallChainTreeService implements ICallChainTreeService {
+
+    private Logger logger = LogManager.getLogger(CallChainTreeService.class);
+
+    @Autowired
+    private IChainDetailDao iChainDetailDao;
+
+    @Autowired
+    private ICallChainTreeDao chainTreeDao;
+
+    @Override
+    public List<CallChainTree> queryCurrentMonthCallChainTree(String uid, String viewpoint) throws SQLException, IOException {
+        List<String> chainTreeIds = iChainDetailDao.queryChainTreeIds(uid,viewpoint);
+        logger.info("viewpoint key :{}, chainTreeIds : {}", viewpoint, chainTreeIds);
+        List<CallChainTree> callChainTrees = new ArrayList<CallChainTree>();
+        Calendar calendar = Calendar.getInstance();
+        String monthSuffix = "/" + calendar.get(Calendar.YEAR) + "-" + (calendar.get(Calendar.MONTH) + 1);
+        for (String treeId : chainTreeIds) {
+            CallChainTree chainTree = chainTreeDao.queryTreeId(treeId + monthSuffix);
+            if (chainTree == null) {
+                continue;
+            }
+            callChainTrees.add(chainTree);
+        }
+        logger.info("viewpoint key :{}, chainTree size : {}", viewpoint, callChainTrees.size());
+        return callChainTrees;
+    }
+}

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

@@ -0,0 +1,14 @@
+package com.ai.cloud.skywalking.web.service.inter;
+
+import com.ai.cloud.skywalking.web.entity.CallChainTree;
+
+import java.io.IOException;
+import java.sql.SQLException;
+import java.util.List;
+
+/**
+ * Created by xin on 16-4-6.
+ */
+public interface ICallChainTreeService {
+    List<CallChainTree> queryCurrentMonthCallChainTree(String uid, String viewpoint) throws SQLException, IOException;
+}

skywalking-webui/src/main/resources/config.properties

@@ -1,2 +1,2 @@
-hbaseconfig.quorum=10.1.235.197,10.1.235.198,10.1.235.199
+hbaseconfig.quorum=10.1.241.18,10.1.241.19,10.1.241.20
 hbaseconfig.client_port=29181

skywalking-webui/src/main/resources/jdbc.properties

@@ -1,7 +1,7 @@
 jdbc.driverClassName=com.mysql.jdbc.Driver
-jdbc.url=jdbc:mysql://10.1.228.202:31316/test
-jdbc.username=devrdbusr21
-jdbc.password=devrdbusr21
+jdbc.url=jdbc:mysql://10.1.241.20:31306/sw_db
+jdbc.username=sw_dbusr01
+jdbc.password=sw_dbusr01
 jdbc.maxTotal=200
 jdbc.maxIdle=50
 jdbc.maxWaitMillis=1000

skywalking-webui/src/main/webapp/WEB-INF/web.xml

@@ -11,7 +11,7 @@
 
     <filter-mapping>
         <filter-name>AccessControllerFilter</filter-name>
-        <url-pattern>/usr/applications/*</url-pattern>
+        <url-pattern>/mainPage</url-pattern>
     </filter-mapping>
 
     <servlet>

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

@@ -0,0 +1,402 @@
+function del(applicationId) {
+    var baseUrl = $("#baseUrl").text();
+    var url = baseUrl + "/usr/applications/del/" + applicationId;
+    $.ajax({
+        type: 'POST',
+        url: url,
+        dataType: 'json',
+        success: function (data) {
+            if (data.code == 200) {
+                $("#allApplications").empty();
+                loadAllApplications();
+            } else {
+                $("#errormessage").text(data.message);
+                $("#errorMessageAlert").show();
+            }
+        },
+        error: function () {
+            $("#errormessage").text("Fatal error");
+            $("#errorMessageAlert").show();
+        }
+    });
+}
+
+function loadAllApplications(){
+    var baseUrl = $("#baseUrl").text();
+    var url = baseUrl + "/usr/applications/all";
+    $.ajax({
+        type: 'POST',
+        url: url,
+        dataType: 'json',
+        success: function (data) {
+            if (data.code == 200) {
+                var template = $.templates("#applicationsAllTmpl");
+                var htmlOutput = template.render({applications:jQuery.parseJSON(data.result)});
+                $("#mainPanel").empty();
+                $("#mainPanel").html(htmlOutput);
+            } else {
+                $("#errormessage").text(data.message);
+                $("#errorMessageAlert").show();
+            }
+        },
+        error: function () {
+            $("#errormessage").text("Fatal error");
+            $("#errorMessageAlert").show();
+        }
+    });
+}
+
+function addApplication(){
+    $('#isGlobalConfig').bootstrapToggle();
+    var baseUrl = $("#baseUrl").text();
+    $("#isGlobalConfig").change(function () {
+        if ($(this).prop("checked")) {
+            $("#sysConfigParam input").each(function () {
+                $(this).prop("disabled", true);
+            });
+            $("#isModifyGlobalConfig").show();
+        } else {
+            $("#sysConfigParam input").each(function () {
+                $(this).prop("disabled", false);
+            });
+            $("#isUpdateGlobalConfig").prop("checked", false);
+            $("#isModifyGlobalConfig").hide();
+        }
+    });
+
+    $("#isUpdateGlobalConfig").change(function () {
+        if ($(this).prop("checked")) {
+            $("#sysConfigParam input").each(function () {
+                $(this).prop("disabled", "");
+            });
+        } else {
+            $("#sysConfigParam input").each(function () {
+                $(this).prop("disabled", "disabled");
+            });
+        }
+    });
+
+    $("#saveApplicationBtn").click(function () {
+        var url = baseUrl + "/usr/applications/dosave";
+        $.ajax({
+            type: 'POST',
+            url: url,
+            data: {
+                "appInfo": function () {
+                    var application = {};
+                    application.appCode = $("#appCode").val();
+                    application.appDesc = $("#appDesc").val();
+                    application.isGlobalConfig = $("#isGlobalConfig").prop("checked");
+                    application.isUpdateGlobalConfig = $("#isUpdateGlobalConfig").prop("checked");
+
+                    var configArgs = {};
+                    configArgs.period = $("#period").val();
+
+                    var mailInfo = {};
+                    mailInfo.mailTo = $("#mailTo").val().split(",");
+                    mailInfo.mailCc = $("#mailCc").val().split(",");
+
+                    configArgs.mailInfo = mailInfo;
+                    application.configArgs = configArgs;
+
+                    return JSON.stringify(application);
+                }
+            },
+            dataType: 'json',
+            success: function (data) {
+                if (data.code == 200) {
+                    $("#successCreatedMessageAlter").show();
+                } else {
+                    $("#errormessage").text(data.message);
+                    $("#errorMessageAlter").show();
+                }
+            },
+            error: function () {
+                $("#errormessage").text("Fatal error");
+                $("#errorMessageAlter").show();
+            }
+        });
+    });
+    loadDefaultAlarmRule();
+}
+
+function loadDefaultAlarmRule() {
+    var baseUrl = $("#baseUrl").text();
+    var url = baseUrl + "/usr/applications/alarm-rule/global";
+    $.ajax({
+        type: 'POST',
+        url: url,
+        dataType: 'json',
+        success: function (data) {
+            if (data.code == "200") {
+                if (data.result == "") {
+                    $("#globalConfigAlter").show();
+                    $("#isGlobalConfig").prop("checked", false).change();
+                    $("#isGlobalConfig").prop("disabled", "disabled");
+                    $("#isModifyGlobalConfig").hide();
+                } else {
+                    $("#isGlobalConfig").prop("checked", true).change();
+                    $("#isModifyGlobalConfig").show();
+                    var globalConfig = jQuery.parseJSON(data.result);
+                    $("#globalAlarmRuleId").val(globalConfig.ruleId)
+                    $("#period").val(globalConfig.configArgs.period);
+                    $("#mailTo").val(globalConfig.configArgs.mailInfo.mailTo);
+                    $("#mailCc").val(globalConfig.configArgs.mailInfo.mailCc);
+                }
+            } else {
+                $("#errormessage").text(data.message);
+                $("#errorMessageAlter").show();
+            }
+        },
+        error: function () {
+            $("#errormessage").text("Fatal Message");
+            $("#errorMessageAlter").show();
+        }
+    });
+}
+
+function createGlobalConfig(){
+    $('button[data-loading-text]').click(function () {
+        //var btn = $(this).button('loading');
+        var baseUrl = $("#baseUrl").text();
+        var url = baseUrl +"/usr/applications/alarm-rule/global/save"
+        $.ajax({
+            type: 'POST',
+            url: url,
+            data: {
+                "configArgs": function () {
+                    var configArg = {};
+                    var mailInfo = {};
+                    configArg.period = parseInt($("#period").val());
+                    mailInfo.mailTo = $("#mailTo").val().split(",");
+                    mailInfo.mailCc = $("#mailCc").val().split(",");
+                    configArg.mailInfo = mailInfo;
+                    return JSON.stringify(configArg);
+                }
+            },
+            dataType: 'json',
+            success: function (data) {
+                if (data.code == "200") {
+                    $("#saveGlobalSuccessAlter").show();
+                } else {
+                    $("#saveGlobalFailedConfigAlter").show();
+                    $("#errormessage").text(data.message);
+                }
+                //btn.button('reset');
+            },
+            error: function () {
+                $("#saveGlobalFailedConfigAlter").show();
+                $("#errormessage").text("Fatal error!");
+            }
+        });
+
+    });
+}
+
+function loadAlarmRule(applicationId) {
+    var baseUrl = $("#baseUrl").text();
+    var url = baseUrl +"/usr/applications/alarm-rule/load/" + applicationId;
+    $.ajax({
+        type: 'POST',
+        url: url,
+        dataType: 'json',
+        success: function (data) {
+            if (data.code == 200) {
+                var alarmRules = jQuery.parseJSON(data.result);
+                if (alarmRules.isGlobalAlarm) {
+                    $("#period").val(alarmRules.globalAlarmRule.configArgs.period);
+                    $("#mailTo").val(alarmRules.globalAlarmRule.configArgs.mailInfo.mailTo);
+                    $("#mailCc").val(alarmRules.globalAlarmRule.configArgs.mailInfo.mailCc);
+                } else {
+                    $("#period").val(alarmRules.selfAlarmRule.configArgs.period);
+                    $("#mailTo").val(alarmRules.selfAlarmRule.configArgs.mailInfo.mailTo);
+                    $("#mailCc").val(alarmRules.selfAlarmRule.configArgs.mailInfo.mailCc);
+                }
+            }
+        },
+        error: function () {
+            $("#errormessage").text("Fatal error");
+            $("#errorMessageAlter").show();
+        }
+    });
+}
+
+
+function loadApplicationInfo(applicationId) {
+    var baseUrl = $("#baseUrl").text();
+    var url = baseUrl +"/usr/applications/load/" + applicationId;
+    $.ajax({
+        type: 'POST',
+        url: url,
+        dataType: 'json',
+        success: function (data) {
+            if (data.code == 200) {
+                var application = jQuery.parseJSON(data.result);
+                $("#appCode").text(application.appCode);
+                $("#appDesc").val(application.appDecs);
+                if (application.isGlobalAlarmRule) {
+                    $("#isGlobalConfig").prop("checked", true).change();
+                    $("#isModifyGlobalConfig").show();
+                } else {
+                    $("#isGlobalConfig").prop("checked", false).change();
+                    $("#isModifyGlobalConfig").hide();
+                }
+
+                if (!application.hasGlobalAlarmRule) {
+                    $("#isGlobalConfig").prop("checked", false).change();
+                    $("#isGlobalConfig").prop("disabled", "disabled");
+                }
+            }
+        },
+        error: function () {
+            $("#errormessage").text("Fatal error");
+            $("#errorModifiedMessageAlter").show();
+        }
+    });
+}
+
+function loadDefaultAlarmRuleData() {
+    var baseUrl = $("#baseUrl").text();
+    var url = baseUrl +"/usr/applications/alarm-rule/global";
+    $.ajax({
+        type: 'POST',
+        url: url,
+        dataType: 'json',
+        success: function (data) {
+            if (data.code == "200") {
+                if (data.result == "") {
+                    $("#period").val("");
+                    $("#mailTo").val("");
+                    $("#mailCc").val("");
+                } else {
+                    var globalConfig = jQuery.parseJSON(data.result);
+                    $("#globalAlarmRuleId").val(globalConfig.ruleId)
+                    $("#period").val(globalConfig.configArgs.period);
+                    $("#mailTo").val(globalConfig.configArgs.mailInfo.mailTo);
+                    $("#mailCc").val(globalConfig.configArgs.mailInfo.mailCc);
+                }
+            } else {
+                $("#errormessage").text(data.message);
+                $("#errorModifiedMessageAlter").show();
+            }
+        },
+        error: function () {
+            $("#errormessage").text("Fatal error");
+            $("#errorModifiedMessageAlter").show();
+        }
+    });
+}
+
+function modifyApplication(){
+    $('#isGlobalConfig').bootstrapToggle();
+    $("#isGlobalConfig").change(function () {
+        if ($(this).prop("checked")) {
+            //替换成
+            loadDefaultAlarmRuleData($("#applicationId").val());
+            $("#sysConfigParam input").each(function () {
+                $(this).prop("disabled", true);
+            });
+            $("#isModifyGlobalConfig").show();
+        } else {
+            //
+            loadAlarmRule($("#applicationId").val());
+            $("#sysConfigParam input").each(function () {
+                $(this).prop("disabled", false);
+            });
+            $("#isUpdateGlobalConfig").prop("checked", false);
+            $("#isModifyGlobalConfig").hide();
+        }
+    });
+
+    $("#isUpdateGlobalConfig").change(function () {
+        if ($(this).prop("checked")) {
+            $("#sysConfigParam input").each(function () {
+                $(this).prop("disabled", "");
+            });
+        } else {
+            $("#sysConfigParam input").each(function () {
+                $(this).prop("disabled", "disabled");
+            });
+        }
+    });
+
+    $("#updateBtn").click(function () {
+        var baseUrl = $("#baseUrl").text();
+        var url = baseUrl +"/usr/applications/update/" + $("#applicationId").val();
+        $.ajax({
+            type: 'POST',
+            url: url,
+            data: {
+                "appInfo": function () {
+                    var application = {};
+                    application.appDesc = $("#appDesc").val();
+                    application.isGlobalConfig = $("#isGlobalConfig").prop("checked");
+                    application.isUpdateGlobalConfig = $("#isUpdateGlobalConfig").prop("checked");
+
+                    var configArgs = {};
+                    configArgs.period = $("#period").val();
+
+                    var mailInfo = {};
+                    mailInfo.mailTo = $("#mailTo").val().split(",");
+                    mailInfo.mailCc = $("#mailCc").val().split(",");
+
+                    configArgs.mailInfo = mailInfo;
+                    application.configArgs = configArgs;
+
+                    return JSON.stringify(application);
+                }
+            },
+            dataType: 'json',
+            success: function (data) {
+                if (data.code == 200) {
+                    $("#successModifiedMessageAlter").show();
+                } else {
+                    $("#errormessage").text(data.message);
+                    $("#errorModifiedMessageAlter").show();
+                }
+            },
+            error: function () {
+                $("#errormessage").text("Fatal error");
+                $("#errorModifiedMessageAlter").show();
+            }
+        });
+    });
+    loadApplicationInfo($("#applicationId").val());
+}
+
+function toDownloadAuthFile(){
+    $("#downloadBtn").click(function () {
+        downloadAuthFile();
+    })
+}
+
+function downloadAuthFile() {
+    var baseUrl = $("#baseUrl").text();
+    var applicationId = $("#applicationId").val();
+    if (applicationId == "") {
+        $("#message").text("Application Id cannot be null");
+        $("#warningAlter").show();
+        return;
+    }
+    var form = $("<form>");
+    form.attr("style", "display:none");
+    form.attr("method", "post");
+    form.attr("action", baseUrl + "/usr/applications/authfile/download/" + applicationId);
+    var exportData = $("<input>");
+    exportData.attr("type", "hidden");
+    exportData.attr("name", "exportData");
+    exportData.attr("value", (new Date()).getMilliseconds());
+    var exclusiveException = $("<input>");
+    exclusiveException.attr("type", "hidden");
+    exclusiveException.attr("name", "exclusiveException");
+    exclusiveException.attr("value", $("#exclusiveException").val());
+    var authType = $("<input>");
+    authType.attr("type", "hidden");
+    authType.attr("name", "authType");
+    authType.attr("value", $("#authType").val());
+    $("#authFiledownLoad").append(form);
+    form.append(exportData);
+    form.append(exclusiveException);
+    form.append(authType);
+    form.submit();
+}

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

@@ -30,12 +30,24 @@
 </div>
 
 <script>
-    $(document).ready(function () {
-        loadAnalysisResult();
-    });
 
     function loadAnalysisResult(){
-
+        var url = "${_base}/usr/doLogout";
+        $.ajax({
+            type: 'POST',
+            url: url,
+            dataType: 'json',
+            async: true,
+            success: function (data) {
+                if (data.code == '200') {
+                    location.href = "${_base}/index";
+                }
+            },
+            error: function () {
+                $("#errorMessage").text("Fatal Error, please try it again.");
+                $("#alertMessageBox").show();
+            }
+        });
     }
 </script>
 </body>

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

@@ -3,6 +3,7 @@
 <link href="${_base}/bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
 <script src="${_base}/bower_components/jquery/dist/jquery.min.js"></script>
 <script src="${_base}/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
+<script src="${_base}/bower_components/jsrender/jsrender.min.js"></script>
 </#macro>
 
 <#macro navbar>
@@ -32,9 +33,9 @@
                                 <span class="caret"></span>
                             </button>
                             <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
-                                <li><a href="${_base}/usr/applications/list">系统配置</a></li>
+                                <li><a href="javascript:void(0);" onclick="loadContent('applicationList')">系统配置</a></li>
                                 <li role="separator" class="divider"></li>
-                                <li><a href="${_base}/usr/applications/add">新增应用</a></li>
+                                <li><a href="javascript:void(0);" onclick="loadContent('addApplication')">新增应用</a></li>
                                 <li role="separator" class="divider"></li>
                                 <li><a href="javascript:void(0);" id="logoutBtn">退出</a></li>
                             </ul>

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

@@ -33,7 +33,7 @@
                                             <li class="list-group-item"><strong>应用Code：</strong>{{>applicationId}}</li>
                                             <li class="list-group-item"><strong>主机信息：</strong>{{>address}}}</li>
                                             <li class="list-group-item"><strong>调用进程号：</strong>{{>processNo}}</li>
-                                            <li class="list-group-item"><strong>异常堆栈：</strong>
+                                            <li class="list-group-item" style="word-wrap: break-word;word-break: normal;"><strong>异常堆栈：</strong>
                                                 {{if　exceptionStack}}
                                                     {{>exceptionStack}}
                                                 {{/if}}

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

@@ -29,9 +29,9 @@
                             <span class="caret"></span>
                         </button>
                         <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
-                            <li><a href="${_base}/usr/applications/list">系统配置</a></li>
+                            <li><a href="${_base}/mainPage?loadType=applicationList">系统配置</a></li>
                             <li role="separator" class="divider"></li>
-                            <li><a href="${_base}/usr/applications/add">新增应用</a></li>
+                            <li><a href="${_base}/mainPage?loadType=addApplication">新增应用</a></li>
                             <li role="separator" class="divider"></li>
                             <li><a href="javascript:void(0);" id="logoutBtn">退出</a></li>
                         </ul>

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

@@ -0,0 +1,103 @@
+<#import "./common/commons.ftl" as common>
+<#import "./common/traceInfo.ftl" as traceInfo>
+<#import "./usr/applications/applicationMaintain.ftl" as applicationMaintain>
+<#import "./usr/authfile/auth.ftl" as auth>
+<!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 />
+    <script src="${_base}/bower_components/jquery-ui/jquery-ui.min.js"></script>
+    <link rel="stylesheet" href="${_base}/bower_components/jquery-treetable/css/jquery.treetable.theme.default.css"/>
+    <script src="${_base}/bower_components/jquery-treetable/jquery.treetable.js"></script>
+    <link href="${_base}/bower_components/jquery-treetable/css/jquery.treetable.css" rel="stylesheet"/>
+    <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>
+    <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">
+<@common.navbar/>
+<!--Trace Info -->
+<@traceInfo.traceTableTmpl/>
+<@traceInfo.traceLogTmpl/>
+<@traceInfo.traceTreeAllTmpl/>
+<!--Application -->
+<@applicationMaintain.applicationList/>
+<@applicationMaintain.addApplication/>
+<@applicationMaintain.createglobalConfig/>
+<@applicationMaintain.modifyApplication/>
+<@auth.downloadAuth/>
+<p id="baseUrl" style="display: none">${_base}</p>
+<div class="container" id="mainPanel">
+    <p id="searchType" style="display: none">${searchType!''}</p>
+    <p id="loadType" style="display: none;">${loadType!''}</p>
+</div>
+
+<script>
+    $(document).ready(function () {
+        //
+        var loadType = $("#loadType").text();
+        loadContent(loadType);
+        // bind
+        $("#searchBtn").click(function () {
+            loadTraceTreeData("${_base}");
+        })
+    });
+
+    function loadContent(loadType,applicationId){
+
+        if (loadType == "showTraceInfo"){
+            loadTraceTreeData("${_base}");
+        }
+
+        if (loadType == "applicationList") {
+            loadAllApplications();
+            return;
+        }
+
+        if (loadType == "addApplication"){
+            var template = $.templates("#addApplicationTmpl");
+            var htmlOutput = template.render({});
+            $("#mainPanel").empty();
+            $("#mainPanel").html(htmlOutput);
+            addApplication();
+            return;
+        }
+
+        if (loadType == "createGlobalApplication"){
+            var template = $.templates("#createGlobalConfigTmpl");
+            var htmlOutput = template.render({});
+            $("#mainPanel").empty();
+            $("#mainPanel").html(htmlOutput);
+            createGlobalConfig();
+            return;
+        }
+
+        if (loadType == "modifyApplication"){
+            var template = $.templates("#modifyApplicationTmpl");
+            var htmlOutput = template.render({applicationId:applicationId});
+            $("#mainPanel").empty();
+            $("#mainPanel").html(htmlOutput);
+            modifyApplication();
+            return;
+        }
+
+        if (loadType == "downloadAuthFile"){
+            var template = $.templates("#downloadAuthFileTmpl");
+            var htmlOutput = template.render({applicationCode:applicationId});
+            $("#mainPanel").empty();
+            $("#mainPanel").html(htmlOutput);
+            toDownloadAuthFile();
+            return;
+        }
+
+        $("#mainPanel").empty();
+    }
+</script>
+</body>
+</html>

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

@@ -1,36 +0,0 @@
-<#import "./common/commons.ftl" as common>
-<#import "./common/traceInfo.ftl" as traceInfo>
-<!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 />
-    <script src="${_base}/bower_components/jsrender/jsrender.min.js"></script>
-    <script src="${_base}/bower_components/jquery-ui/jquery-ui.min.js"></script>
-    <link href="${_base}/bower_components/jquery-treetable/css/jquery.treetable.css" rel="stylesheet" type="text/css"/>
-    <link rel="stylesheet" href="${_base}/bower_components/jquery-treetable/css/jquery.treetable.theme.default.css"/>
-    <script src="${_base}/bower_components/jquery-treetable/jquery.treetable.js"></script>
-    <link href="${_base}/bower_components/jquery-treetable/css/jquery.treetable.css" rel="stylesheet"/>
-    <link href="${_base}/bower_components/skywalking/css/tracelog.css" rel="stylesheet"/>
-    <script src="${_base}/bower_components/skywalking/js/tracelog.js"></script>
-</head>
-
-<body style="padding-top:80px">
-<@common.navbar/>
-<@traceInfo.traceTableTmpl/>
-<@traceInfo.traceLogTmpl/>
-<@traceInfo.traceTreeAllTmpl/>
-
-<div class="container" id="mainPanel">
-    <p id="searchType" style="display: none">${searchType}</p>
-</div>
-
-<script>
-    $(document).ready(function () {
-        loadTraceTreeData("${_base}");
-    });
-</script>
-</body>
-</html>

skywalking-webui/src/main/webapp/pages/usr/applications/addapplication.ftl

@@ -1,235 +0,0 @@
-<#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 />
-    <title>Add new application</title>
-    <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">
-<@common.navbar/>
-<div class="container">
-    <div class="row" style="display: none;" id="defautConfigAlter">
-        <div class="col-md-6 col-md-offset-2">
-            <div class="alert alert-warning alert-dismissible" role="alert">
-                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
-                        aria-hidden="true">&times;</span></button>
-                <strong>Warning!</strong>&nbsp;You don't have a global config,
-                you may <a href="${_base}/usr/applications/alarm-rule/global/create">
-                <ins>create global config</ins>
-            </a>.
-            </div>
-        </div>
-    </div>
-    <div class="row" style="display: none;" id="successMessageAlter">
-        <div class="col-md-6 col-md-offset-2">
-            <div class="alert alert-success alert-dismissible" role="alert">
-                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
-                        aria-hidden="true">&times;</span></button>
-                <strong>Congratuate!</strong>&nbsp;You had craete application success,
-                you may <a href="${_base}/usr/applications/list">
-                <ins>see all application</ins>
-            </a> or <a href="${_base}/usr/applications/add">
-                <ins>Create another application</ins>
-            </a>.
-            </div>
-        </div>
-    </div>
-    <div class="row" id="errorMessageAlter" style="display: none">
-        <div class="col-md-6 col-md-offset-2">
-            <div class="alert alert-danger alert-dismissible" role="alert">
-                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
-                        aria-hidden="true">&times;</span></button>
-                <strong>Error!</strong><span id="errormessage"></span>.
-            </div>
-        </div>
-    </div>
-    <div class="row">
-        <div class="col-md-6 col-md-offset-2">
-            <div class="row">
-                <form class="form-horizontal">
-                    <div class="form-group">
-                        <label for="appCode" class="col-sm-3 control-label">应用编码:</label>
-                        <div class="col-sm-9">
-                            <input type="text" class="form-control" id="appCode" placeholder="Application code">
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="inputPassword3" class="col-sm-3 control-label">应用描述:</label>
-                        <div class="col-sm-9">
-                            <input type="text" class="form-control" id="appDesc" placeholder="Application Description">
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="isGlobalConfig" class="col-sm-3 control-label">使用全局配置:</label>
-                        <div class="col-sm-3">
-                            <input data-toggle="toggle" type="checkbox" id="isGlobalConfig"/>
-                        </div>
-                        <div class="col-sm-6" style="margin-top: 1%;display: none" id="isModifyGlobalConfig">
-                            <input type="checkbox" id="isUpdateGlobalConfig"/> Update the global config
-                        </div>
-                    </div>
-                    <p id="defaultConfigID" value="" style="display: none"></p>
-                    <div class="panel panel-default" id="sysConfigParam">
-                        <div class="panel-heading">
-                            告警配置
-                        </div>
-                        <div class="panel-body">
-                            <div class="form-group">
-                                <label for="inputPassword3" class="col-sm-3 control-label">告警周期:</label>
-                                <div class="col-sm-9">
-                                    <input type="text" class="form-control" id="period" name="period"
-                                           placeholder="10(M)"/>
-                                </div>
-                            </div>
-                            <div class="form-group">
-                                <label for="inputPassword3" class="col-sm-3 control-label">告警类型:</label>
-                                <div class="col-sm-9">
-                                    <span>发送邮件</span>
-                                </div>
-                            </div>
-                            <div class="form-group">
-                                <label for="inputPassword3" class="col-sm-3 control-label">收件人地址:</label>
-                                <div class="col-sm-9">
-                                    <input type="text-are" class="form-control" id="mailTo" name="mailTo"
-                                           placeholder="Application Description">
-                                </div>
-                            </div>
-                            <div class="form-group">
-                                <label for="inputPassword3" class="col-sm-3 control-label">抄送人地址:</label>
-                                <div class="col-sm-9">
-                                    <input type="text" class="form-control" id="mailCc" name="mailCc"
-                                           placeholder="Application Description">
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <div class="col-sm-offset-4 col-sm-1">
-                            <button type="button" id="saveBtn" data-loading-text="Loading..." class="btn btn-primary"
-                                    autocomplete="off">
-                                <strong><ins>Save</ins></strong>
-                            </button>
-                        </div>
-                        <div class="col-sm-offset-1 col-sm-1">
-                            <button type="button" class="btn btn-default"><strong><ins>Cancle</ins></strong></button>
-                        </div>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
-    <script>
-        $(document).ready(function () {
-            $("#isGlobalConfig").change(function () {
-                if ($(this).prop("checked")) {
-                    $("#sysConfigParam input").each(function () {
-                        $(this).prop("disabled", true);
-                    });
-                    $("#isModifyGlobalConfig").show();
-                } else {
-                    $("#sysConfigParam input").each(function () {
-                        $(this).prop("disabled", false);
-                    });
-                    $("#isUpdateGlobalConfig").prop("checked", false);
-                    $("#isModifyGlobalConfig").hide();
-                }
-            });
-
-            $("#isUpdateGlobalConfig").change(function () {
-                if ($(this).prop("checked")) {
-                    $("#sysConfigParam input").each(function () {
-                        $(this).prop("disabled", "");
-                    });
-                } else {
-                    $("#sysConfigParam input").each(function () {
-                        $(this).prop("disabled", "disabled");
-                    });
-                }
-            });
-
-            $("#saveBtn").click(function () {
-                var url = "${_base}/usr/applications/dosave";
-                $.ajax({
-                    type: 'POST',
-                    url: url,
-                    data: {
-                        "appInfo": function () {
-                            var application = {};
-                            application.appCode = $("#appCode").val();
-                            application.appDesc = $("#appDesc").val();
-                            application.isGlobalConfig = $("#isGlobalConfig").prop("checked");
-                            application.isUpdateGlobalConfig = $("#isUpdateGlobalConfig").prop("checked");
-
-                            var configArgs = {};
-                            configArgs.period = $("#period").val();
-
-                            var mailInfo = {};
-                            mailInfo.mailTo = $("#mailTo").val().split(",");
-                            mailInfo.mailCc = $("#mailCc").val().split(",");
-
-                            configArgs.mailInfo = mailInfo;
-                            application.configArgs = configArgs;
-
-                            return JSON.stringify(application);
-                        }
-                    },
-                    dataType: 'json',
-                    success: function (data) {
-                        if (data.code == 200) {
-                            $("#successMessageAlter").show();
-                        } else {
-                            $("#errormessage").text(data.message);
-                            $("#errorMessageAlter").show();
-                        }
-                    },
-                    error: function () {
-                        $("#errormessage").text("Fatal error");
-                        $("#errorMessageAlter").show();
-                    }
-                });
-            });
-            loadDefaultAlarmRule();
-        });
-
-        function loadDefaultAlarmRule() {
-            var url = "${_base}/usr/applications/alarm-rule/global";
-            $.ajax({
-                type: 'POST',
-                url: url,
-                dataType: 'json',
-                success: function (data) {
-                    if (data.code == "200") {
-                        if (data.result == "") {
-                            $("#defautConfigAlter").show();
-                            $("#isGlobalConfig").prop("checked", false).change();
-                            $("#isGlobalConfig").prop("disabled", "disabled");
-                            $("#isModifyGlobalConfig").hide();
-                        } else {
-                            $("#isGlobalConfig").prop("checked", true).change();
-                            $("#isModifyGlobalConfig").show();
-                            var globalConfig = jQuery.parseJSON(data.result);
-                            $("#globalAlarmRuleId").val(globalConfig.ruleId)
-                            $("#period").val(globalConfig.configArgs.period);
-                            $("#mailTo").val(globalConfig.configArgs.mailInfo.mailTo);
-                            $("#mailCc").val(globalConfig.configArgs.mailInfo.mailCc);
-                        }
-                    } else {
-                        $("#errormessage").text(data.message);
-                        $("#errorMessageAlter").show();
-                    }
-                },
-                error: function () {
-                    $("#errormessage").text("Fatal Message");
-                    $("#errorMessageAlter").show();
-                }
-            });
-        }
-    </script>
-</body>
-</html>

skywalking-webui/src/main/webapp/pages/usr/applications/applicationMaintain.ftl

@@ -0,0 +1,352 @@
+<#macro applicationList>
+<script type="text/x-jsrender" id="applicationsAllTmpl">
+<div class="row" style="display: none;" id="errorMessageAlert">
+    <div class="col-md-8">
+        <div class="row">
+            <div class="alert alert-warning alert-dismissible" role="alert">
+                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
+                        aria-hidden="true">&times;</span></button>
+                <strong>Warning!</strong>&nbsp;<p id="errormessage"></p>
+                </a>.
+            </div>
+        </div>
+    </div>
+</div>
+<div class="row">
+    <div class="col-md-8">
+        <div class="row">
+            <table class="table table-hover">
+                <thead>
+                <tr>
+                    <th>应用编码</th>
+                    <th>创建时间</th>
+                    <th>更新时间</th>
+                    <th>操作</th>
+                </tr>
+                </thead>
+                <tbody>
+                {{for applications}}
+                <tr>
+                    <td>{{>appCode}}</td>
+                    <td>{{>createTime}}</td>
+                    <td>{{>updateTime}}</td>
+                    <td>
+                        <a class="btn btn-xs" href="javascript:void(0);" onclick="loadContent('modifyApplication','{{>appId}}');">Update</a>
+                        <a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="del('{{>appId}}')">Delete</a>
+                        <a class="btn btn-info btn-xs" href="javascript:void(0)" onclick="loadContent('downloadAuthFile','{{>appCode}}')">Download auth File</a>
+                    </td>
+                </tr>
+                {{/for}}
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <div class="col-md-4">
+    </div>
+</div>
+</script>
+</#macro>
+
+<#macro addApplication>
+<script type="text/x-jsrender" id="addApplicationTmpl">
+<div class="row" style="display: none;" id="globalConfigAlter">
+    <div class="col-md-6 col-md-offset-2">
+        <div class="alert alert-warning alert-dismissible" role="alert">
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
+                    aria-hidden="true">&times;</span></button>
+            <strong>Warning!</strong>&nbsp;You don't have a global config,
+            you may <a href="javascript:void(0);" onclick="loadContent('createGlobalApplication')">
+            <ins>create global config</ins>
+        </a>.
+        </div>
+    </div>
+</div>
+<div class="row" style="display: none;" id="successCreatedMessageAlter">
+    <div class="col-md-6 col-md-offset-2">
+        <div class="alert alert-success alert-dismissible" role="alert">
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
+                    aria-hidden="true">&times;</span></button>
+            <strong>Congratuate!</strong>&nbsp;You had craete application success,
+            you may <a href="javascript:void(0)" onclick="loadContent('applicationList');">
+            <ins>see all application</ins>
+        </a> or <a href="javascript:void(0);" onclick="loadContent('addApplication')">
+            <ins>Create another application</ins>
+        </a>.
+        </div>
+    </div>
+</div>
+<div class="row" id="errorMessageAlter" style="display: none">
+    <div class="col-md-6 col-md-offset-2">
+        <div class="alert alert-danger alert-dismissible" role="alert">
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
+                    aria-hidden="true">&times;</span></button>
+            <strong>Error!</strong><span id="errormessage"></span>.
+        </div>
+    </div>
+</div>
+<div class="row">
+    <div class="col-md-6 col-md-offset-2">
+        <div class="row">
+            <form class="form-horizontal">
+                <div class="form-group">
+                    <label for="appCode" class="col-sm-3 control-label">应用编码:</label>
+                    <div class="col-sm-9">
+                        <input type="text" class="form-control" id="appCode" placeholder="Application code">
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="inputPassword3" class="col-sm-3 control-label">应用描述:</label>
+                    <div class="col-sm-9">
+                        <input type="text" class="form-control" id="appDesc" placeholder="Application Description">
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="isGlobalConfig" class="col-sm-3 control-label">使用全局配置:</label>
+                    <div class="col-sm-3">
+                        <input data-toggle="toggle" type="checkbox" id="isGlobalConfig"/>
+                    </div>
+                    <div class="col-sm-6" style="margin-top: 1%;display: none" id="isModifyGlobalConfig">
+                        <input type="checkbox" id="isUpdateGlobalConfig"/> Update the global config
+                    </div>
+                </div>
+                <p id="defaultConfigID" value="" style="display: none"></p>
+                <div class="panel panel-default" id="sysConfigParam">
+                    <div class="panel-heading">
+                        告警配置
+                    </div>
+                    <div class="panel-body">
+                        <div class="form-group">
+                            <label for="inputPassword3" class="col-sm-3 control-label">告警周期:</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" id="period" name="period"
+                                       placeholder="10(M)"/>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="inputPassword3" class="col-sm-3 control-label">告警类型:</label>
+                            <div class="col-sm-9">
+                                <span>发送邮件</span>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="inputPassword3" class="col-sm-3 control-label">收件人地址:</label>
+                            <div class="col-sm-9">
+                                <input type="text-are" class="form-control" id="mailTo" name="mailTo"
+                                       placeholder="Application Description">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="inputPassword3" class="col-sm-3 control-label">抄送人地址:</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" id="mailCc" name="mailCc"
+                                       placeholder="Application Description">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <div class="col-sm-offset-4 col-sm-1">
+                        <button type="button" id="saveApplicationBtn" data-loading-text="Loading..." class="btn btn-primary"
+                                autocomplete="off">
+                            <strong><ins>Save</ins></strong>
+                        </button>
+                    </div>
+                    <div class="col-sm-offset-1 col-sm-1">
+                        <button type="button" class="btn btn-default" onclick="loadContent('applicationList');"><strong><ins>Cancle</ins></strong></button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</script>
+</#macro>
+
+
+<#macro createglobalConfig>
+<script type="text/x-jsrender" id="createGlobalConfigTmpl">
+<div class="row" style="display: none" id="saveGlobalSuccessAlter">
+    <div class="col-md-6 col-md-offset-2">
+        <div class="alert alert-success alert-dismissible" role="alert">
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
+                    aria-hidden="true">&times;</span></button>
+            <strong>Congratulate!</strong>&nbsp;Create global success,
+            you may <a href="javascript:void(0);" onclick="loadContent('addApplication')">
+            <ins>Create an application</ins>
+        </a> or <a href="javascript:void(0);" onclick="loadContent('applicationList')">
+            <ins>See all application</ins>
+        </a>.
+        </div>
+    </div>
+</div>
+<div class="row" style="display: none;" id="saveGlobalFailedConfigAlter">
+    <div class="col-md-6 col-md-offset-2">
+        <div class="alert alert-warning alert-dismissible" role="alert">
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
+                    aria-hidden="true">&times;</span></button>
+            <strong>Warning!</strong>
+            <p id="errormessage"></p>.
+        </div>
+    </div>
+</div>
+<div class="row">
+    <div class="col-md-6 col-md-offset-2">
+        <div class="row">
+            <form class="form-horizontal">
+                <div class="panel panel-default" id="sysConfigParam">
+                    <div class="panel-heading">
+                        告警配置
+                    </div>
+                    <div class="panel-body">
+                        <div class="form-group">
+                            <label for="inputPassword3" class="col-sm-3 control-label">告警周期:</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" id="period" name="period"
+                                       placeholder="10(M)">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="inputPassword3" class="col-sm-3 control-label">告警类型:</label>
+                            <div class="col-sm-9">
+                                <span>发送邮件</span>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="inputPassword3" class="col-sm-3 control-label">收件人地址:</label>
+                            <div class="col-sm-9">
+                                <input type="text-are" class="form-control" id="mailTo" name="mailTo"
+                                       placeholder="Application Description">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="inputPassword3" class="col-sm-3 control-label">抄送人地址:</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" id="mailCc" name="mailCc"
+                                       placeholder="Application Description">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <div class="col-sm-offset-4 col-sm-1">
+                        <button type="button" id="saveBtn" data-loading-text="Loading..." class="btn btn-primary"
+                                autocomplete="off">
+                            Save it!
+                        </button>
+                    </div>
+                    <div class="col-sm-offset-1 col-sm-1">
+                        <button type="button" class="btn btn-default" onclick="loadContent('applicationList');">Cancle</button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+
+</script>
+</#macro>
+
+<#macro modifyApplication>
+<script type="text/x-jsrender" id="modifyApplicationTmpl">
+<div class="row" style="display: none;" id="successModifiedMessageAlter">
+    <div class="col-md-6 col-md-offset-2">
+        <div class="alert alert-success alert-dismissible" role="alert">
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
+                    aria-hidden="true">&times;</span></button>
+            <strong>Congratuate!</strong>&nbsp;You had craete application success,
+            you may <a href="javascript:void(0);" onclick="loadContent('applicationList')">
+            <ins>see all application</ins>
+        </a> or <a href="javascript:void(0);" onclick="loadContent('addApplication')">
+            <ins>Create another application</ins>
+        </a>.
+        </div>
+    </div>
+</div>
+<div class="row" id="errorModifiedMessageAlter" style="display: none">
+    <div class="col-md-6 col-md-offset-2">
+        <div class="alert alert-danger alert-dismissible" role="alert">
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
+                    aria-hidden="true">&times;</span></button>
+            <strong>Error!</strong><span id="errormessage"></span>.
+        </div>
+    </div>
+</div>
+<div class="row">
+    <div class="col-md-6 col-md-offset-2">
+        <div class="row">
+            <form class="form-horizontal">
+                <div class="form-group">
+                    <input type="hidden" id="applicationId" name="applicationId" value="{{:applicationId}}"/>
+                    <label for="appCode" class="col-sm-3 control-label">应用编码:</label>
+                    <div class="col-sm-9">
+                        <span style="padding-top: 10%"><p id="appCode"></p></span>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="inputPassword3" class="col-sm-3 control-label">应用描述:</label>
+                    <div class="col-sm-9">
+                        <input type="text" class="form-control" id="appDesc" placeholder="Application Description">
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="isGlobalConfig" class="col-sm-3 control-label">使用全局配置:</label>
+                    <div class="col-sm-3">
+                        <input data-toggle="toggle" type="checkbox" id="isGlobalConfig"/>
+                    </div>
+                    <div class="col-sm-6" style="margin-top: 1%;display: none" id="isModifyGlobalConfig">
+                        <input type="checkbox" id="isUpdateGlobalConfig"/> Update the global config
+                    </div>
+                </div>
+                <p id="defaultConfigID" value="" style="display: none"></p>
+                <div class="panel panel-default" id="sysConfigParam">
+                    <div class="panel-heading">
+                        告警配置
+                    </div>
+                    <div class="panel-body">
+                        <div class="form-group">
+                            <label for="inputPassword3" class="col-sm-3 control-label">告警周期:</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" id="period" name="period"
+                                       placeholder="10(M)"/>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="inputPassword3" class="col-sm-3 control-label">告警类型:</label>
+                            <div class="col-sm-9">
+                                <span>发送邮件</span>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="inputPassword3" class="col-sm-3 control-label">收件人地址:</label>
+                            <div class="col-sm-9">
+                                <input type="text-are" class="form-control" id="mailTo" name="mailTo"
+                                       placeholder="Application Description">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="inputPassword3" class="col-sm-3 control-label">抄送人地址:</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" id="mailCc" name="mailCc"
+                                       placeholder="Application Description">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <div class="col-sm-offset-4 col-sm-1">
+                        <button type="button" id="updateBtn" data-loading-text="Loading..." class="btn btn-primary"
+                                autocomplete="off">
+                            <strong>
+                                <ins>Update</ins>
+                            </strong>
+                        </button>
+                    </div>
+                    <div class="col-sm-offset-1 col-sm-1">
+                        <button type="button" class="btn btn-default" onclick="loadContent('applicationList');"><strong>
+                            <ins>Cancel</ins>
+                        </strong></button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</script>
+</#macro>

skywalking-webui/src/main/webapp/pages/usr/applications/applicationsconfig.ftl

@@ -1,113 +0,0 @@
-<#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 />
-    <title>All Applications configuration</title>
-    <script src="${_base}/bower_components/jsrender/jsrender.min.js"></script>
-</head>
-
-<body style="padding-top:80px">
-<@common.navbar/>
-<div class="container">
-    <div class="row" style="display: none;" id="errorMessageAlert">
-        <div class="col-md-8">
-            <div class="row">
-                <div class="alert alert-warning alert-dismissible" role="alert">
-                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
-                            aria-hidden="true">&times;</span></button>
-                    <strong>Warning!</strong>&nbsp;<p id="errormessage"></p>
-                    </a>.
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="row">
-        <div class="col-md-8">
-            <div class="row">
-                <table class="table table-hover">
-                    <thead>
-                    <tr>
-                        <th>应用编码</th>
-                        <th>创建时间</th>
-                        <th>更新时间</th>
-                        <th>操作</th>
-                    </tr>
-                    </thead>
-                    <tbody id="allApplications">
-                    </tbody>
-                </table>
-            </div>
-        </div>
-        <div class="col-md-4">
-        </div>
-    </div>
-</div>
-<script type="text/x-jsrender" id="applicationsAllTmpl">
-    <tr>
-        <td>{{>appCode}}</td>
-        <td>{{>createTime}}</td>
-        <td>{{>updateTime}}</td>
-        <td>
-            <a class="btn btn-xs" href="${_base}/usr/applications/modify/{{>appId}}">Update</a>
-            <a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="del('{{>appId}}')">Delete</a>
-            <a class="btn btn-info btn-xs" href="${_base}/usr/applications/authfile/todownload/{{>appCode}}">Download auth File</a>
-        </td>
-    </tr>
-</script>
-<script>
-    $(document).ready(function () {
-        loadData();
-    });
-
-    function del(applicationId) {
-        var url = "${_base}/usr/applications/del/" + applicationId;
-        $.ajax({
-            type: 'POST',
-            url: url,
-            dataType: 'json',
-            success: function (data) {
-                if (data.code == 200) {
-                    $("#allApplications").empty();
-                    loadData();
-                } else {
-                    $("#errormessage").text(data.message);
-                    $("#errorMessageAlert").show();
-                }
-            },
-            error: function () {
-                $("#errormessage").text("Fatal error");
-                $("#errorMessageAlert").show();
-            }
-        });
-    }
-
-    function loadData() {
-        var url = "${_base}/usr/applications/all";
-        $.ajax({
-            type: 'POST',
-            url: url,
-            dataType: 'json',
-            success: function (data) {
-                if (data.code == 200) {
-                    var template = $.templates("#applicationsAllTmpl");
-                    var htmlOutput = template.render(jQuery.parseJSON(data.result));
-                    $("#allApplications").empty();
-                    $("#allApplications").html(htmlOutput);
-                } else {
-                    $("#errormessage").text(data.message);
-                    $("#errorMessageAlert").show();
-                }
-            },
-            error: function () {
-                $("#errormessage").text("Fatal error");
-                $("#errorMessageAlert").show();
-            }
-        });
-    }
-</script>
-</body>
-</html>

skywalking-webui/src/main/webapp/pages/usr/applications/createglobalconfig.ftl

@@ -1,133 +0,0 @@
-<#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 />
-    <title>To create global configuration</title>
-    <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">
-<@common.navbar/>
-<div class="container">
-    <div class="row" style="display: none" id="saveSuccessAlter">
-        <div class="col-md-6 col-md-offset-2">
-            <div class="alert alert-success alert-dismissible" role="alert">
-                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
-                        aria-hidden="true">&times;</span></button>
-                <strong>Congratulate!</strong>&nbsp;Create global success,
-                you may <a href="${_base}/usr/applications/add">
-                <ins>Create an application</ins>
-            </a> or <a href="${_base}/usr/applications/list">
-                <ins>See all application</ins>
-            </a>.
-            </div>
-        </div>
-    </div>
-    <div class="row" style="display: none;" id="defautConfigAlter">
-        <div class="col-md-6 col-md-offset-2">
-            <div class="alert alert-warning alert-dismissible" role="alert">
-                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
-                        aria-hidden="true">&times;</span></button>
-                <strong>Warning!</strong>
-                <p id="errormessage"></p>.
-            </div>
-        </div>
-    </div>
-    <div class="row">
-        <div class="col-md-6 col-md-offset-2">
-            <div class="row">
-                <form class="form-horizontal">
-                    <div class="panel panel-default" id="sysConfigParam">
-                        <div class="panel-heading">
-                            告警配置
-                        </div>
-                        <div class="panel-body">
-                            <div class="form-group">
-                                <label for="inputPassword3" class="col-sm-3 control-label">告警周期:</label>
-                                <div class="col-sm-9">
-                                    <input type="text" class="form-control" id="period" name="period"
-                                           placeholder="10(M)">
-                                </div>
-                            </div>
-                            <div class="form-group">
-                                <label for="inputPassword3" class="col-sm-3 control-label">告警类型:</label>
-                                <div class="col-sm-9">
-                                    <span>发送邮件</span>
-                                </div>
-                            </div>
-                            <div class="form-group">
-                                <label for="inputPassword3" class="col-sm-3 control-label">收件人地址:</label>
-                                <div class="col-sm-9">
-                                    <input type="text-are" class="form-control" id="mailTo" name="mailTo"
-                                           placeholder="Application Description">
-                                </div>
-                            </div>
-                            <div class="form-group">
-                                <label for="inputPassword3" class="col-sm-3 control-label">抄送人地址:</label>
-                                <div class="col-sm-9">
-                                    <input type="text" class="form-control" id="mailCc" name="mailCc"
-                                           placeholder="Application Description">
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <div class="col-sm-offset-4 col-sm-1">
-                            <button type="button" id="saveBtn" data-loading-text="Loading..." class="btn btn-primary"
-                                    autocomplete="off">
-                                Save it!
-                            </button>
-                        </div>
-                        <div class="col-sm-offset-1 col-sm-1">
-                            <button type="button" class="btn btn-default">Cancle</button>
-                        </div>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
-    <script>
-        $(document).ready(function () {
-            $('button[data-loading-text]').click(function () {
-                var btn = $(this).button('loading');
-                var url = "${_base}/usr/applications/alarm-rule/global/save"
-                $.ajax({
-                    type: 'POST',
-                    url: url,
-                    data: {
-                        "configArgs": function () {
-                            var configArg = {};
-                            var mailInfo = {};
-                            configArg.period = parseInt($("#period").val());
-                            mailInfo.mailTo = $("#mailTo").val().split(",");
-                            mailInfo.mailCc = $("#mailCc").val().split(",");
-                            configArg.mailInfo = mailInfo;
-                            return JSON.stringify(configArg);
-                        }
-                    },
-                    dataType: 'json',
-                    success: function (data) {
-                        if (data.code == "200") {
-                            $("#saveSuccessAlter").show();
-                        } else {
-                            $("#errormessage").show();
-                            $("#errormessage").text(data.message);
-                        }
-                        btn.button('reset');
-                    },
-                    error: function () {
-                        $("#errormessage").show();
-                        $("#errormessage").text("Fatal error!");
-                    }
-                });
-
-            });
-        });
-    </script>
-</body>
-</html>

skywalking-webui/src/main/webapp/pages/usr/applications/modifyapplication.ftl

@@ -1,288 +0,0 @@
-<#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 />
-    <title>Modify application configuration</title>
-    <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">
-<@common.navbar/>
-<div class="container">
-    <div class="row" style="display: none;" id="successMessageAlter">
-        <div class="col-md-6 col-md-offset-2">
-            <div class="alert alert-success alert-dismissible" role="alert">
-                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
-                        aria-hidden="true">&times;</span></button>
-                <strong>Congratuate!</strong>&nbsp;You had craete application success,
-                you may <a href="${_base}/usr/applications/list">
-                <ins>see all application</ins>
-            </a> or <a href="${_base}/usr/applications/add">
-                <ins>Create another application</ins>
-            </a>.
-            </div>
-        </div>
-    </div>
-    <div class="row" id="errorMessageAlter" style="display: none">
-        <div class="col-md-6 col-md-offset-2">
-            <div class="alert alert-danger alert-dismissible" role="alert">
-                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
-                        aria-hidden="true">&times;</span></button>
-                <strong>Error!</strong><span id="errormessage"></span>.
-            </div>
-        </div>
-    </div>
-    <div class="row">
-        <div class="col-md-6 col-md-offset-2">
-            <div class="row">
-                <form class="form-horizontal">
-                    <div class="form-group">
-                        <input type="hidden" id="applicationId" name="applicationId" value="${applicationId}"/>
-                        <label for="appCode" class="col-sm-3 control-label">应用编码:</label>
-                        <div class="col-sm-9">
-                            <span style="padding-top: 10%"><p id="appCode"></p></span>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="inputPassword3" class="col-sm-3 control-label">应用描述:</label>
-                        <div class="col-sm-9">
-                            <input type="text" class="form-control" id="appDesc" placeholder="Application Description">
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="isGlobalConfig" class="col-sm-3 control-label">使用全局配置:</label>
-                        <div class="col-sm-3">
-                            <input data-toggle="toggle" type="checkbox" id="isGlobalConfig"/>
-                        </div>
-                        <div class="col-sm-6" style="margin-top: 1%;display: none" id="isModifyGlobalConfig">
-                            <input type="checkbox" id="isUpdateGlobalConfig"/> Update the global config
-                        </div>
-                    </div>
-                    <p id="defaultConfigID" value="" style="display: none"></p>
-                    <div class="panel panel-default" id="sysConfigParam">
-                        <div class="panel-heading">
-                            告警配置
-                        </div>
-                        <div class="panel-body">
-                            <div class="form-group">
-                                <label for="inputPassword3" class="col-sm-3 control-label">告警周期:</label>
-                                <div class="col-sm-9">
-                                    <input type="text" class="form-control" id="period" name="period"
-                                           placeholder="10(M)"/>
-                                </div>
-                            </div>
-                            <div class="form-group">
-                                <label for="inputPassword3" class="col-sm-3 control-label">告警类型:</label>
-                                <div class="col-sm-9">
-                                    <span>发送邮件</span>
-                                </div>
-                            </div>
-                            <div class="form-group">
-                                <label for="inputPassword3" class="col-sm-3 control-label">收件人地址:</label>
-                                <div class="col-sm-9">
-                                    <input type="text-are" class="form-control" id="mailTo" name="mailTo"
-                                           placeholder="Application Description">
-                                </div>
-                            </div>
-                            <div class="form-group">
-                                <label for="inputPassword3" class="col-sm-3 control-label">抄送人地址:</label>
-                                <div class="col-sm-9">
-                                    <input type="text" class="form-control" id="mailCc" name="mailCc"
-                                           placeholder="Application Description">
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <div class="col-sm-offset-4 col-sm-1">
-                            <button type="button" id="updateBtn" data-loading-text="Loading..." class="btn btn-primary"
-                                    autocomplete="off">
-                                <strong>
-                                    <ins>Update</ins>
-                                </strong>
-                            </button>
-                        </div>
-                        <div class="col-sm-offset-1 col-sm-1">
-                            <button type="button" class="btn btn-default"><strong>
-                                <ins>Cancel</ins>
-                            </strong></button>
-                        </div>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
-    <script>
-        $(document).ready(function () {
-            $("#isGlobalConfig").change(function () {
-                if ($(this).prop("checked")) {
-                    //替换成
-                    loadDefaultAlarmRule($("#applicationId").val());
-                    $("#sysConfigParam input").each(function () {
-                        $(this).prop("disabled", true);
-                    });
-                    $("#isModifyGlobalConfig").show();
-                } else {
-                    //
-                    loadAlarmRule($("#applicationId").val());
-                    $("#sysConfigParam input").each(function () {
-                        $(this).prop("disabled", false);
-                    });
-                    $("#isUpdateGlobalConfig").prop("checked", false);
-                    $("#isModifyGlobalConfig").hide();
-                }
-            });
-
-            $("#isUpdateGlobalConfig").change(function () {
-                if ($(this).prop("checked")) {
-                    $("#sysConfigParam input").each(function () {
-                        $(this).prop("disabled", "");
-                    });
-                } else {
-                    $("#sysConfigParam input").each(function () {
-                        $(this).prop("disabled", "disabled");
-                    });
-                }
-            });
-
-            $("#updateBtn").click(function () {
-                var url = "${_base}/usr/applications/update/" + $("#applicationId").val();
-                $.ajax({
-                    type: 'POST',
-                    url: url,
-                    data: {
-                        "appInfo": function () {
-                            var application = {};
-                            application.appDesc = $("#appDesc").val();
-                            application.isGlobalConfig = $("#isGlobalConfig").prop("checked");
-                            application.isUpdateGlobalConfig = $("#isUpdateGlobalConfig").prop("checked");
-
-                            var configArgs = {};
-                            configArgs.period = $("#period").val();
-
-                            var mailInfo = {};
-                            mailInfo.mailTo = $("#mailTo").val().split(",");
-                            mailInfo.mailCc = $("#mailCc").val().split(",");
-
-                            configArgs.mailInfo = mailInfo;
-                            application.configArgs = configArgs;
-
-                            return JSON.stringify(application);
-                        }
-                    },
-                    dataType: 'json',
-                    success: function (data) {
-                        if (data.code == 200) {
-                            $("#successMessageAlter").show();
-                        } else {
-                            $("#errormessage").text(data.message);
-                            $("#errorMessageAlter").show();
-                        }
-                    },
-                    error: function () {
-                        $("#errormessage").text("Fatal error");
-                        $("#errorMessageAlter").show();
-                    }
-                });
-            });
-            loadApplicationInfo($("#applicationId").val());
-        });
-
-        function loadAlarmRule(applicationId) {
-            var url = "${_base}/usr/applications/alarm-rule/load/" + applicationId;
-            $.ajax({
-                type: 'POST',
-                url: url,
-                dataType: 'json',
-                success: function (data) {
-                    if (data.code == 200) {
-                        var alarmRules = jQuery.parseJSON(data.result);
-                        if (alarmRules.isGlobalAlarm) {
-                            $("#period").val(alarmRules.globalAlarmRule.configArgs.period);
-                            $("#mailTo").val(alarmRules.globalAlarmRule.configArgs.mailInfo.mailTo);
-                            $("#mailCc").val(alarmRules.globalAlarmRule.configArgs.mailInfo.mailCc);
-                        } else {
-                            $("#period").val(alarmRules.selfAlarmRule.configArgs.period);
-                            $("#mailTo").val(alarmRules.selfAlarmRule.configArgs.mailInfo.mailTo);
-                            $("#mailCc").val(alarmRules.selfAlarmRule.configArgs.mailInfo.mailCc);
-                        }
-                    }
-                },
-                error: function () {
-                    $("#errormessage").text("Fatal error");
-                    $("#errorMessageAlter").show();
-                }
-            });
-        }
-
-
-        function loadApplicationInfo(applicationId) {
-            var url = "${_base}/usr/applications/load/" + applicationId;
-            $.ajax({
-                type: 'POST',
-                url: url,
-                dataType: 'json',
-                success: function (data) {
-                    if (data.code == 200) {
-                        var application = jQuery.parseJSON(data.result);
-                        $("#appCode").text(application.appCode);
-                        $("#appDesc").val(application.appDecs);
-                        if (application.isGlobalAlarmRule) {
-                            $("#isGlobalConfig").prop("checked", true).change();
-                            $("#isModifyGlobalConfig").show();
-                        } else {
-                            $("#isGlobalConfig").prop("checked", false).change();
-                            $("#isModifyGlobalConfig").hide();
-                        }
-
-                        if (!application.hasGlobalAlarmRule) {
-                            $("#isGlobalConfig").prop("checked", false).change();
-                            $("#isGlobalConfig").prop("disabled", "disabled");
-                        }
-                    }
-                },
-                error: function () {
-                    $("#errormessage").text("Fatal error");
-                    $("#errorMessageAlter").show();
-                }
-            });
-        }
-
-        function loadDefaultAlarmRule() {
-            var url = "${_base}/usr/applications/alarm-rule/global";
-            $.ajax({
-                type: 'POST',
-                url: url,
-                dataType: 'json',
-                success: function (data) {
-                    if (data.code == "200") {
-                        if (data.result == "") {
-                            $("#period").val("");
-                            $("#mailTo").val("");
-                            $("#mailCc").val("");
-                        } else {
-                            var globalConfig = jQuery.parseJSON(data.result);
-                            $("#globalAlarmRuleId").val(globalConfig.ruleId)
-                            $("#period").val(globalConfig.configArgs.period);
-                            $("#mailTo").val(globalConfig.configArgs.mailInfo.mailTo);
-                            $("#mailCc").val(globalConfig.configArgs.mailInfo.mailCc);
-                        }
-                    } else {
-                        $("#errormessage").text(data.message);
-                        $("#errorMessageAlter").show();
-                    }
-                },
-                error: function () {
-                    $("#errormessage").text("Fatal error");
-                    $("#errorMessageAlter").show();
-                }
-            });
-        }
-    </script>
-</body>
-</html>

skywalking-webui/src/main/webapp/pages/usr/authfile/auth.ftl

@@ -0,0 +1,55 @@
+<#macro downloadAuth>
+<script type="text/x-jsrender" id="downloadAuthFileTmpl">
+<div class="row" style="display: none;" id="warningAlter">
+    <div class="col-md-6 col-md-offset-2">
+        <div class="alert alert-warning alert-dismissible" role="alert">
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
+                    aria-hidden="true">&times;</span></button>
+            <strong>Warning!</strong>&nbsp;<p id="message"></p>
+        </div>
+    </div>
+</div>
+<div class="row">
+    <div class="col-md-6 col-md-offset-2">
+        <div class="row">
+            <form class="form-horizontal" role="form">
+                <input type='hidden' id="applicationId" value="{{:applicationCode}}">
+                <div class="form-group">
+                    <label for="exclusiveException" class="col-sm-3 control-label">需要排除的异常:</label>
+                    <div class="col-sm-9">
+                        <input type="text" class="form-control" id="exclusiveException"
+                               placeholder="java.lang.Exception,java.io.IOException">
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="authType" class="col-sm-3 control-label">授权文件类型:</label>
+                    <div class="col-sm-9">
+                        <select class="form-control" id="authType" name="authType">
+                            <option value="1">外网</option>
+                            <option value="0">内网</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <div class="col-sm-offset-4 col-sm-1">
+                        <button type="button" id="downloadBtn" data-loading-text="Loading..."
+                                class="btn btn-primary"
+                                autocomplete="off">
+                            <strong>
+                                <ins>Download</ins>
+                            </strong>
+                        </button>
+                    </div>
+                    <div class="col-sm-offset-1 col-sm-1">
+                        <button type="button" class="btn btn-default" onclick="loadContent('applicationList');"><strong>
+                            <ins>Cancle</ins>
+                        </strong></button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+    <div id="authFiledownLoad"></div>
+</div>
+</script>
+</#macro>

skywalking-webui/src/main/webapp/pages/usr/authfile/download.ftl

@@ -1,107 +0,0 @@
-<#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 />
-    <title>Download auth file</title>
-</head>
-
-<body style="padding-top:80px">
-<@common.navbar/>
-<div class="container">
-    <div class="row" style="display: none;" id="warningAlter">
-        <div class="col-md-6 col-md-offset-2">
-            <div class="alert alert-warning alert-dismissible" role="alert">
-                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
-                        aria-hidden="true">&times;</span></button>
-                <strong>Warning!</strong>&nbsp;<p id="message"></p>
-            </div>
-        </div>
-    </div>
-    <div class="row">
-        <div class="col-md-6 col-md-offset-2">
-            <div class="row">
-                <form class="form-horizontal" role="form">
-                    <input type='hidden' id="applicationId" value="${applicationId}">
-                    <div class="form-group">
-                        <label for="exclusiveException" class="col-sm-3 control-label">需要排除的异常:</label>
-                        <div class="col-sm-9">
-                            <input type="text" class="form-control" id="exclusiveException"
-                                   placeholder="java.lang.Exception,java.io.IOException">
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="authType" class="col-sm-3 control-label">授权文件类型:</label>
-                        <div class="col-sm-9">
-                            <select class="form-control" id="authType" name="authType">
-                                <option value="1">外网</option>
-                                <option value="0">内网</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <div class="col-sm-offset-4 col-sm-1">
-                            <button type="button" id="downloadBtn" data-loading-text="Loading..."
-                                    class="btn btn-primary"
-                                    autocomplete="off">
-                                <strong>
-                                    <ins>Download</ins>
-                                </strong>
-                            </button>
-                        </div>
-                        <div class="col-sm-offset-1 col-sm-1">
-                            <button type="button" class="btn btn-default"><strong>
-                                <ins>Cancle</ins>
-                            </strong></button>
-                        </div>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
-</div>
-<div id="authFiledownLoad">
-</div>
-<script>
-
-    $(document).ready(function () {
-        $("#downloadBtn").click(function () {
-            downloadAuthFile();
-        })
-    });
-
-    function downloadAuthFile() {
-        var applicationId = $("#applicationId").val();
-        if (applicationId == "") {
-            $("#message").text("Application Id cannot be null");
-            $("#warningAlter").show();
-            return;
-        }
-        var form = $("<form>");
-        form.attr("style", "display:none");
-        form.attr("method", "post");
-        form.attr("action", "${_base}/usr/applications/authfile/download/" + applicationId);
-        var exportData = $("<input>");
-        exportData.attr("type", "hidden");
-        exportData.attr("name", "exportData");
-        exportData.attr("value", (new Date()).getMilliseconds());
-        var exclusiveException = $("<input>");
-        exclusiveException.attr("type", "hidden");
-        exclusiveException.attr("name", "exclusiveException");
-        exclusiveException.attr("value", $("#exclusiveException").val());
-        var authType = $("<input>");
-        authType.attr("type", "hidden");
-        authType.attr("name", "authType");
-        authType.attr("value", $("#authType").val());
-        $("#authFiledownLoad").append(form);
-        form.append(exportData);
-        form.append(exclusiveException);
-        form.append(authType);
-        form.submit();
-    }
-</script>
-</body>
-</html>