dockerLog.jsp 17.7 KB

Raw Blame History Permalink

<%--
  Created by IntelliJ IDEA.
  User: meiling.ge
  Date: 2018/4/2
  Time: 16:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@page import="com.ui.contants.ProjectConstant"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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/bootstrap-datetimepicker.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"/>
    <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/select2/dist/css/select2.css"/>--%>
    <link rel="stylesheet" href="<%=basePath %>css/select2-4.0.3.css"/>

    <link rel="stylesheet" href="<%=basePath %>css/yoho.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/jquery.toaster.js"></script>
    <script src="<%=basePath %>js/laydate/laydate.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath%>js/select2-4.0.3.min.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">Docker日志检索</a>
        </div>
        <div class="container-fluid">
            <div class="widget-box">
                <div class="widget-content nopadding">
                <div class="widget-title">
                    <h5>Docker日志检索</h5>
                </div>

                <div class="widget-title" style="height: 56px;">

                        <div class="form-inline" role="form"  style=" margin-top: 12px;float: left;">

                            <button  class="btn btn-primary dateTimebutton"  style="margin-left: 5px;background-color: grey" onclick="setTime(this, 1)">今天</button>
                            <button  class="btn btn-primary dateTimebutton" style="" onclick="setTime(this, -1)">昨天</button>
                            <button  class="btn btn-primary dateTimebutton" style="" onclick="setTime(this, 7)">近7天</button>
                            <button  class="btn btn-primary dateTimebutton" style="" onclick="setTime(this, 30)">近30天</button>
                            <div class="input-group" >
                                <span class="input-group-addon">起止时间:</span>
                                <input id="startTime"type="text" class="form-control dateTimeInput"  style="width:150px;" />
                            </div>
                            ~
                            <div class="input-group" >
                                <input id="endTime"type="text" class="form-control dateTimeInput"  style="width:150px;" />
                            </div>
                        </div>
                </div>
                <div class="widget-title" style="height: 56px;margin-left: 5px">

                        <div class="form-inline" role="form"  style=" margin-top: 12px;float: left;">
                            <div class="input-group" >
                                <span class="input-group-addon">日志集:</span>
                                <select id="logset_id"  class="form-control" style="width:200px;" onchange="changeLogSet()">
                                    <option>--请选择--</option>
                                    <c:forEach items="${logSetInfoList}" var="logset">
                                        <option value="${logset.logset_id}">${logset.logset_name}</option>
                                    </c:forEach>
                                </select>
                            </div>

                            <div class="input-group" >
                                <span class="input-group-addon">日志主题:</span>
                                <select id="topic_ids" class="form-control  select2" multiple="multiple" style="width:300px;" >
                                   <%-- <option value="all">all</option>
                                    <c:forEach items="${topicInfos}" var="topic">
                                        <option value="${topic.topic_id}">${topic.topic_name}</option>
                                    </c:forEach>--%>

                                </select>

                            </div>
                            <div class="input-group" >

                                <input id="keywords" type="text" class="form-control"  style="width:200px;"  placeholder="请输入关键词" />
                            </div>


                            <button id="searchBtn" class="btn btn-primary" style="margin-left: 18px;" onclick="search()">搜索</button>


                        </div>

                </div>
                </div>

                <div style="margin-top: 20px;margin-bottom: 20px" >
                    <table id="logInfoTable" class="table table-bordered table-hover table-striped" style="margin-left:10px;width: 95%;">

                        <thead>
                        <tr>
                            <th style="width: 25%;text-align: center">日志属性</th>
                            <th style="width: 75%;text-align: center">日志数据</th>
                        </tr>
                        </thead>
                        <tbody id="loginfoTbody">

                        </tbody>


                    </table>
                    <div id="emptyInfo" style="text-align:center;" >当前列表为空</div>
                    <div id="showMore" style="text-align:center;display: none" ><a  onclick="showMore()">加载更多</a></div>
                    <div id="loadingDiv" style="text-align:center;display: none" >正在加载<img src="<%=basePath%>js/layer/skin/default/loading-1.gif"  ></img></div>
                    <div  id ="nomoreDiv"style="text-align:center;display: none" >已加载全部</div>

                </div>

                <div>

                </div>

            </div>
        </div>

    </div>


</body>
<script src="<%=basePath %>script/common/genarate_left_panel.js?v=<%=ProjectConstant.MENU_VERSION %>"></script>

<script>
    $("#li_other").addClass("active open");
    $("#li_docker_log").addClass("active");
</script>


<script type="text/javascript">
    $(function () {
        //初始化时间
        lay('.dateTimeInput').each(function(){
            laydate.render({
                elem: this  ,type: 'datetime'
                ,trigger: 'click'
            });
        });

        //日期设置默认值
        //开始时间：当天凌晨
        $("#startTime").val(format(new Date(new Date().setHours(0,0,0,0))).substr(0,10)+" 00:00:00");
        //结束时间：当天  23:59:59
        $("#endTime").val(format(new Date(new Date(new Date().toLocaleDateString()).getTime()+ 24*60*60*1000-1)));


        $("#topic_ids").select2({

        });
    });

    //设置时间
    function  setTime(that, val) {


        $(".dateTimebutton").each(function (index, item) {
            $(this).css("background-color", "#337ab7");
        });

       $(that).css("background-color", "grey");//选中的为灰色
       //设置起止时间
        var startTime;
        //结束时间：今天23:59:59
        var endTime = new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1);//23:59:59秒
        if( val == 1){//今天的
            startTime = new Date(new Date().setHours(0,0,0,0));
        }
        if( val == -1){//昨天的
            startTime = new Date(new Date(new Date().setDate(new Date().getDate() - 1)).setHours(0,0,0,0));
            var yestodayTime = new Date(new Date().setDate(new Date().getDate() - 1));
            endTime = new Date(new Date(yestodayTime.toLocaleDateString()).getTime()+24*60*60*1000-1);//23:59:59秒
        }
        if(val == 7){//近7天
            startTime = new Date(new Date(new Date().setDate(new Date().getDate() - 7)).setHours(0,0,0,0));
        }

        if(val == 30){//近30天
            startTime = new Date(new Date(new Date().setDate(new Date().getDate() - 30)).setHours(0,0,0,0));
        }

        $("#startTime").val(format(startTime));
        //结束时间：当天  23:59:59
        $("#endTime").val(format(endTime));

    }


    //timeValue---时间戳
    function format(timeValue){
        var time = new Date(timeValue);
        var y = time.getFullYear();
        var m = time.getMonth()+1;
        var d = time.getDate();
        var h = time.getHours();
        var mm = time.getMinutes();
        var s = time.getSeconds();
        return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
    }
    function add0(m){
        return m<10 ? '0'+m : m;
    }


    var logset_id;
    var topic_ids;
    var start_time;
    var end_time;
    var query;
    var  context;
    //搜索--查询日志
    function search(){
        $("#loginfoTbody").html("");

        var logsetId = $("#logset_id").val();
        if( logsetId == null || logsetId == ""){
            alert("请选择日志集！");
            return;
        }

        var topicIds = $("#topic_ids").val();
        if( topicIds == null || topicIds == ""){
            alert("请选择日志主题！");
            return;
        }

        //选择全部topic 的情况下，重置topics
        if(  topicIds.indexOf("all") != -1){//选择全部topics
            var arr = new Array();
            $("#topic_ids option").each(function () {
                var val = $(this).val(); //获取单个value
                if( val != "all"){
                    arr.push(val);
                }

            });
            topicIds = arr;
        }
        var startTime = $("#startTime").val();
        if(startTime == null || startTime == ""){
            alert("请选择开始时间！");
            return;
        }
        var endTime = $("#endTime").val();
        if(endTime == null || endTime == ""){
            alert("请选择结束时间！");
            return;
        }

       if( compareTime(startTime,endTime ) > 0){
            alert("开始时间必须小于结束时间！");
            return;
       }
        var queryInfo= $("#keywords").val();


        //赋给全局变量--加载table信息
         logset_id = logsetId ;
         topic_ids = topicIds;
         start_time = startTime;
         end_time = endTime;
         query = queryInfo;
         context = "";//context还原
        loadTable();

    }


    function loadTable(){


        var params = {
            logset_id : logset_id,
            topic_ids : topic_ids.join(","),
            start_time : start_time,
            end_time: end_time,
            query: query,
            context : context
        };

       //隐藏所有的div
        $("#showMore").css("display","none");
        $("#nomoreDiv").css("display","none");
        $("#emptyInfo").css("display","none");
        //显示正在加载
        $("#loadingDiv").css("display","block");
        //查询日志信息
        $.ajax({
            url: contextPath + "dockerLogs/searchlog",
            type: 'post',
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify(params),
            success: function (data) {
                //返回的时候 隐藏正在加载
                $("#loadingDiv").css("display","none");
                if(data.code != 200){
                    alert("查询失败！");
                    $("#showMore").css("display","block");
                    return ;
                }else{//查询成功

                    var logInfo = data.data;
                    //加载更多需要传递的参数
                    context = logInfo.context;
                    //展示列表
                    var logData = logInfo.results;
                    var logtableBodyHtml = "";
                    for( var i in logData){
                        var html = "<tr>" +
                            "<td style='width: 25%'>Time: "+logData[i].timestamp+"</br>Topic name: "+ logData[i].topic_name +"</br>"+logData[i].descr+"</td>" +
                            "<td style='width: 75%;word-wrap: break-word; word-break:break-all;' > " +logData[i].simpleContent +"</td></tr>";
                        logtableBodyHtml += html;
                    }
                    if(logtableBodyHtml == ""){

                        $("#emptyInfo").css("display","block");
                    }else{
                        $("#loginfoTbody").append(logtableBodyHtml);
                        var listover = logInfo.listover;
                        if( !listover){//未加载完毕
                            $("#showMore").css("display","block");
                            $("#nomoreDiv").css("display","none");
                        }else{
                            $("#showMore").css("display","none");
                            $("#nomoreDiv").css("display","block");
                        }
                    }

                }

            },
            error: function(data){
                alert("请求失败！");
                $("#loadingDiv").css("display","none");
                $("#showMore").css("display","block");
            }
        });
    }

    //加载更多
    function showMore() {
        loadTable();
    }

    function  compareTime(time_1 , time_2) {
        var d1 = new Date(time_1);
        var d2 = new Date(time_2);
        if(d1 == d2){
            return 0;
        }
        if(d1 > d2){
            return 1;
        }

        return -1;

    }

    //根据日志集id 获取 日志主题集合
    function changeLogSet(){
        var logset_id = $("#logset_id").val();
        $.ajax({
            url: contextPath + "dockerLogs/getTopicList?logset_id=" + logset_id,
            type: 'get',
            success: function (data) {
                if(data.code != 200){
                    alert("获取日志主题列表失败！");

                }else{//查询成功
                    var topicsInfo = data.data;
                    $("#topic_ids").empty();//清空下拉列表
                    var html = "<option value ='all'> all</option>";
                    $("#topic_ids").append(html);
                    for( var i in topicsInfo){
                         html = "<option value =" + topicsInfo[i].topic_id +"> " + topicsInfo[i].topic_name  +"</option>"
                        $("#topic_ids").append(html);
                    }
                }

            },
            error: function(data){
                alert("获取日志主题失败！");
            }
        });

    }

</script>

</html>