memcachedMonitor.jsp 10 KB
<%--
  Created by IntelliJ IDEA.
  User: yoho
  Date: 2016/9/21
  Time: 10:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page import="org.aspectj.weaver.ast.Var" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="<%=basePath %>css/bootstrap.min.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/unicorn.main.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/unicorn.grey.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/jquery-ui.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/bootstrap-responsive.min.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/uniform.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
    <script src="<%=basePath %>js/excanvas.min.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/jquery-ui.custom.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>/js/bootstrap.min.js"></script>
    <script src="<%=basePath %>/js/unicorn.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>
    <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>
        var contextPath = '<%=basePath %>';
    </script>
    <title>YOHO!运维</title>
</head>
<body>
<!-- 头部 -->
<div id="head">
</div>

<!-- 右侧具体内容 -->
<div id="content">

    <div id="breadcrumb">
        <a href="#" title="Go to Home" class="tip-bottom"><i
                class="icon-home"></i> Home</a> <a href="#" class="current">Memcached</a>
    </div>

    <div class="container-fluid">
        <div class="widget-box">
            <div class="widget-title">
                <h5>Memcached状态 (<span id="updateTime"></span> 更新)</h5>
            </div>
        </div>

        <div class="container-fluid">

            <div id="tMemTable">

            </div>
        </div>
    </div>

</div>
</body>
<script src="<%=basePath %>js/pagination.js"></script>
<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
<script>
    $("#li_monitor").addClass("active open");
    $("#li_newRedisMonitor").addClass("active");
</script>

<script type="text/javascript">
    $(function () {
        $.ajax({
            url: contextPath + "memcachedMonitor/updateTime",
            type: 'POST',
            //请求成功后触发
            success: function (data) {
               $("#updateTime").text(data);
            }
        });

        $("#tMemTable").table({
            url: contextPath + "memcachedMonitor/allMemcached",
            striped: true,
            panelClass: "panel-success",
            loadFilter: function (data) {
                console.log(data.data)
                return defaultLoadFilter(data);
            },
            columns: [
                {
                    title: "业务分类",
                    width:"110px",
                    formatter: function (value, rowData, rowIndex) {
                        return  "<div style='padding:15px;'>"+rowData.name+"</div>";
                    }
                },
                {
                    title: "地址",
                    width: "190px",
                   // field: "url"
                    formatter: function (value, rowData, rowIndex) {
                        var array = rowData.url.split("\r\n");
                        var div = "";
                        for(var i=0;i<array.length;i++)
                            div = div+ "<div style='height:30px;padding:10px;'>"+array[i]+"</div>";
                        return div;
                    }
                }, {
                    title: "当前连接数",
                    width:"80px",
                //    field: "curConnections"
                    formatter: function (value, rowData, rowIndex) {
                        var array = rowData.curConnections.split("\r\n");
                        var div = "";
                        for(var i=0;i<array.length;i++)
                            div = div+ "<div style='height:30px;padding:10px;'>"+array[i]+"</div>";
                        return div;
                    }
                }, {
                    title: "启动时长",
                    width:"110px",
                   // field: "upTime"
                    formatter: function (value, rowData, rowIndex) {
                        var array = rowData.upTime.split("\r\n");
                        var div = "";
                        for(var i=0;i<array.length;i++)
                            div = div+ "<div style='height:30px;padding:10px;'>"+array[i]+"</div>";
                        return div;
                    }
                }, {
                    title: "get频率(次/秒)",
                    width:"100px",
                //    field: 'cmdGet'
                    formatter: function (value, rowData, rowIndex) {
                        var array = rowData.cmdGet.split("\r\n");
                        var div = "";
                        for(var i=0;i<array.length;i++)
                            div = div+ "<div style='height:30px;padding:10px;'>"+array[i]+"</div>";
                        return div;
                    }
                }, {
                    title: "set频率(次/秒)",
                    width:"100px",
                //    field: "cmdSet"
                    formatter: function (value, rowData, rowIndex) {
                        var array = rowData.cmdSet.split("\r\n");
                        var div = "";
                        for(var i=0;i<array.length;i++)
                            div = div+ "<div style='height:30px;padding:10px;'>"+array[i]+"</div>";
                        return div;
                    }
                }, {
                    title: "get命中率",
                    width: "100px",
                 //   field: "hitRate"
                    formatter: function (value, rowData, rowIndex) {
                        var array = rowData.hitRate.split("\r\n");
                        var div = "";
                        for(var i=0;i<array.length;i++)
                            div = div+ "<div style='height:30px;padding:10px;'>"+array[i]+"</div>";
                        return div;
                    }
                }, {
                    title: "使用内存",
                    width:"90px",
                   // field: "useMemory"
                    formatter: function (value, rowData, rowIndex) {
                        var array = rowData.useMemory.split("\r\n");
                        var div = "";
                        for(var i=0;i<array.length;i++)
                            div = div+ "<div style='height:30px;padding:10px;'>"+array[i]+"</div>";
                        return div;
                    }
                }, {
                    title: "最大内存",
                    width:"90px",
                //    field: "maxMemory"
                    formatter: function (value, rowData, rowIndex) {
                        var array = rowData.maxMemory.split("\r\n");
                        var div = "";
                        for(var i=0;i<array.length;i++)
                            div = div+ "<div style='height:30px;padding:10px;'>"+array[i]+"</div>";
                        return div;
                    }
                }, {
                    title: "当前数量",
                    width:"100px",
                 //   field: "curItems"
                    formatter: function (value, rowData, rowIndex) {
                        var array = rowData.curItems.split("\r\n");
                        var div = "";
                        for(var i=0;i<array.length;i++)
                            div = div+ "<div style='height:30px;padding:10px;'>"+array[i]+"</div>";
                        return div;
                    }
                }],
            /*            data: data*/
        });

    });

</script>
</html>