javaApihis.jsp 11.4 KB
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";

    String api_id = request.getParameter("api_id");
    if (api_id == null)
        api_id = "0";
    String mobj_id = request.getParameter("mobj_id");
    if (mobj_id == null)
        mobj_id = "0";
%>


<html>
<head>
    <title>Java API 历史调用详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="<%=basePath %>css/bootstrap.min.css"/>
    <link href="<%=basePath %>js/bootstrap-plugin/css/bootstrap.table.css" rel="stylesheet" media="screen"/>
    <link rel="stylesheet" href="<%=basePath %>css/bootstrap-responsive.min.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/fullcalendar.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/unicorn.main.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/unicorn.grey.css" class="skin-color"/>
    <link rel="stylesheet" href="<%=basePath %>css/jquery-ui.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/uniform.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
    <link rel="stylesheet" href="<%=basePath %>js/jstree/themes/proton/style.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/bootstrap-datetimepicker.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/yoho.css"/>
    <script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>/js/bootstrap.min.js"></script>
    <script src="<%=basePath %>js/global.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.pagination.js" charset="UTF-8"
            type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.table.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.dialog.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.panel.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.alerts.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.accordion.js" charset="UTF-8"
            type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.breadcrumb.js" charset="UTF-8"
            type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.validate.js" charset="UTF-8"
            type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/layer/layer.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.select.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/jstree/jstree.min.js"></script>
    <script src="<%=basePath %>js/jquery.toaster.js"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/moment-with-locales.js" charset="UTF-8"
            type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/bootstrap-datetimepicker.js" charset="UTF-8"
            type="text/javascript"></script>

    <link rel="stylesheet" href="<%=basePath %>css/jquery.editable-select.min.css"/>
    <script src="<%=basePath %>js/jquery.editable-select.min.js" charset="UTF-8"
            type="text/javascript"></script>

    <script>
        var contextPath = '<%=basePath %>';
    </script>
    <style type="text/css">
        #info {

        }
    </style>
</head>
<body>
<div id="breadcrumb">
    <a href="#" title="Go to Home" class="tip-bottom"><i
            class="icon-home"></i> Java服务</a> <a href="#" class="current">服务历史信息</a>
</div>

<div class="container-fluid">
    <div class="widget-box">
        <div class="widget-title">
            <h5>Java服务历史</h5>
        </div>
        <div class="widget-content nopadding">
            <div class="widget-title" style="height: 53px;">
                <div>
                    <div class="form-inline" role="form" id="inBoxQueryDiv"
                         style=" margin-top: 12px;margin-left: 25px;float: left;">
                        <div class="input-group" style="float: left;">
                            <span class="input-group-addon">服务名:</span>
                            <input type="text" id="searchApiName" name="apiName" readonly='true' class="form-control"
                                   placeholder=""/>
                        </div>
                        <div class="input-group" style="float: left;">
                            <span class="input-group-addon">IP:</span>
                            <select id="searchIP" name="searchIP" class="form-control" style="background-color: white">
                                <option value="0">ALL</option>
                            </select>
                        </div>
                        <div class="input-group" style="float: left;">
                            <span class="input-group-addon">status:</span>
                            <select id="searchStatus" name="searchStatus" class="form-control">
                                <option value="2">ALL</option>
                                <option value="0">FAILED</option>
                                <option value="1">OK</option>
                            </select>
                        </div>
                        <%--<div class="input-group" style="float: left;">--%>
                        <%--<span class="input-group-addon">url:</span>--%>
                        <%--<input type="text" id="searchapiUrl" name="apiUrl" class="form-control" placeholder=""/>--%>
                        <%--</div>--%>

                        <div class="input-group" style="float: left;">
                            <span class="input-group-addon">开始时间:</span>
                            <input type="text" id="starTime" name="time" class="form-control" placeholder=""/>
                        </div>

                        <div class="input-group" style="float: left;">
                            <span class="input-group-addon">结束时间:</span>
                            <input type="text" id="endTime" name="time" class="form-control" placeholder=""/>
                        </div>

                        <button id="searchBtn" class="btn btn-default">搜索</button>
                    </div>
                </div>
            </div>
            <div id="infoTable">

            </div>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    var api_id =<%=api_id %>;
    var mobj_id =<%=mobj_id %>;
    var map_ip = {};
    //加载表格
    $(function () {

        $('#searchIP').editableSelect({
            effects: 'slide'
        });
        $.ajax({
            url: contextPath + "/mobject/queryMobjById?typeId=" + api_id,
            type: 'get',
            success: function (data) {
                if (!data || data.code != 200) {
                    $.toaster('获取IP失败', '警告', 'warn');
                    return;
                }
                console.log(data.data);
                var selObj = $("#searchIP");

                $.each(data.data, function (idx, val) {
                    if (map_ip["" + val.moId] == undefined) {
                        map_ip["" + val.moId] = val.moHostIp;
                    }
                    var value = val.moId;
                    var text = val.moHostIp;
                    selObj.append("<option value='" + value + "'>" + text + "</option>");
                })
            },
            error: function (data) {
                $.toaster('获取IP失败', '警告', 'warn');

            }
        });


        //设置默认时间
        $("#starTime").datetimepicker({
            format: 'YYYY-MM-DD HH:mm:ss'
        });

        $("#endTime").datetimepicker({
            format: 'YYYY-MM-DD HH:mm:ss'
        });

        //加载表格
        $("#infoTable").table({
            columnAutoWidth: false,
            url: contextPath + "/javaApi/history",
            striped: true,
            title: "java服务信息历史",
            dataType: "json",
            pagination: true,
            pageSize: 10,
            queryParams: {
                'apiId': api_id,
                'mobjId': mobj_id
            },
            loadFilter: function (data) {
                return defaultLoadFilter(data);
            },
            onLoadSuccess: function (data) {
                console.log(data);
            },
//            onAfterShow: function () {
//                refreshJavaAppStatus();
//            },
            columns: [{
                title: "time",
                field: "time",
                width: "8%"
            },
                {
                    title: "IP",
                    field: "mIp",
                    width: "10%"
                },
                {
                    title: "端口",
                    field: "mPort",
                    width: "4%"
                },
                {
                    title: "start",
                    field: "startTime",
                    width: "8%"
                },
                {
                    title: "响应时间",
                    field: "endTime",
                    width: "8%"
                },
                {
                    title: "耗时(ms)",
                    field: "costTime",
                    width: "6%"
                },
                {
                    title: "status",
                    field: "isException",
                    formatter: function (value, rowData, rowIndex) {
                        if (rowData.status == 0)
                            return "fail";
                        else
                            return "ok";
                    },
                    width: "4%"

                }, {
                    title: "Result",
                    field: "exception",
                    formatter: function (value, rowData, rowIndex) {
                        if (rowData.status == 0)
                            return rowData.exception;
                        else
                            return rowData.response;
                    },
                    width: "50%"

                }]
        });

        //点击查询按钮
        $("#searchBtn").click(function () {
            var startTime = $("#starTime").val();
            var endTime = $("#endTime").val();
            startTime = startTime.replace(new RegExp("-", "gm"), "/");
            startTime = (new Date(startTime)).getTime();
            endTime = endTime.replace(new RegExp("-", "gm"), "/");
            endTime = (new Date(endTime)).getTime();

            $("#infoTable").table("load", {
                'apiId': api_id,
                'mobjId': mobj_id,
                'startTime': startTime,
                'endTime': endTime
            });
        });

    });

</script>