ops / monitor-ui · Commits

Go to a project

Authored by mlge
Commit be72391ce7f796a78ae3a61a64a2d41f5074271a 1 parent 5a7858b0

Docker日志查询模块

Inline Side-by-side
Showing 7 changed files with 580 additions and 1 deletions
... ... @@ -7,6 +7,6 @@ package com.ui.contants;
public class ProjectConstant {
//左侧菜单的版本号控制
public static final String MENU_VERSION = "20180423-002";
public static final String MENU_VERSION = "20180423-003";
}
... ...
package com.ui.model.domain;
import lombok.Data;
import java.util.List;
/**
* Created by meiling.ge on 2018/5/3.
*/
@Data
public class DockerLogResp {
private String context;
private boolean listover;
private List<LogContent> results;
@Data
public static class LogContent{
private String timestamp;
private String topic_id;
private String topic_name;
private String content;
private String fileName;
}
}
... ...
package com.ui.model.domain;
import lombok.Data;
import java.util.List;
/**
* Created by meiling.ge on 2018/5/8.
*/
@Data
public class Logsets {
private List<LogsetInfo> logsets;
@Data
public static class LogsetInfo{
private String logset_id;
private String logset_name;
}
}
... ...
package com.ui.model.req;
import lombok.Data;
/**
* Created by yoho on 2016/6/14.
*/
@Data
public class DockerLogReq {
private String logset_id;
private String topic_ids;
private String start_time;
private String end_time;
private String query;
private int limit = 20;
private String context;
}
... ...
package com.ui.ctrl;
import com.ui.http.HttpRestClient;
import com.ui.model.BaseResponse;
import com.ui.model.domain.DockerLogResp;
import com.ui.model.domain.Logsets;
import com.ui.model.req.DockerLogReq;
import org.apache.commons.lang.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import java.util.LinkedHashMap;
import java.util.List;
@Controller
@RequestMapping("/dockerLogs")
public class DockerLogsCtrl {
private static final Logger LOGGER = LoggerFactory.getLogger(DockerLogsCtrl.class);
@Autowired
HttpRestClient httpRestClient;
/**
* 跳转至 docker 日志查询页面
*
* @return
*/
@RequestMapping("toDockerLog")
public ModelAndView toMonitorAlarmPage() {
ModelAndView mv = new ModelAndView("dockerLog/dockerLog");
//获取日志集 list
BaseResponse resp = httpRestClient.defaultGet("/dockerLogs/logsets" , BaseResponse.class ,null );
if( resp.getCode() == 200){
mv.addObject("logSetInfoList" , resp.getData() );
}
return mv;
}
@RequestMapping("/searchlog")
@ResponseBody
public BaseResponse<DockerLogResp> searchlog(@RequestBody DockerLogReq req ) {
LOGGER.info("searchlog, req param is {}", req);
BaseResponse resp = httpRestClient.defaultPost("/dockerLogs/searchlog", req, BaseResponse.class);
return resp;
}
@RequestMapping("/getTopicList")
@ResponseBody
public BaseResponse getTopicList(String logset_id ) {
BaseResponse resp = httpRestClient.defaultGet("/dockerLogs/getTopicList?logset_id="+logset_id, BaseResponse.class, null);
return resp;
}
}
... ...
<%--
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_manager").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>Source: "+logData[i].source+"</br>Filename: "+logData[i].fileName+"</td>" +
"<td style='width: 75%'> " +logData[i].content +"</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>
... ...
... ... @@ -142,6 +142,7 @@ innerHTML += "<li class='submenu' id='li_manager'><a id='li_manager_a' href='#'>
innerHTML += "<ul><li id='li_user'><a id='li_user_a' href=''>用户管理</a></li>";
innerHTML += "<li id='li_user_operate_log'><a id='li_user_operate_log_a' href=''>用户操作日志</a></li>";
innerHTML += "<li id='li_monitorAlarm_log'><a id='li_monitorAlarm_log_a' href=''>短信告警日志</a></li>";
innerHTML += "<li id='li_docker_log'><a id='li_docker_log_a' href=''>Docker日志检索</a></li>";
innerHTML += "<li id='li_module'><a id='li_module_a' href=''>模块管理</a></li>";
innerHTML += "<li id='li_authority'><a id='li_authority_a' href=''>权限组管理</a></li>";
innerHTML += "<li id='li_alarmgroup'><a id='li_alarmgroup_a' href=''>报警组管理</a></li>";
... ... @@ -216,6 +217,7 @@ document.getElementById("li_zkMonitor_log4j_a").setAttribute("href", path + "/zk
document.getElementById("li_user_a").setAttribute("href", path + "/manage/toUser");
document.getElementById("li_user_operate_log_a").setAttribute("href", path + "/userOperateLog/toUserOperateLog");
document.getElementById("li_monitorAlarm_log_a").setAttribute("href", path + "/monitorAlarm/toMonitorAlarm");
document.getElementById("li_docker_log_a").setAttribute("href", path + "/dockerLogs/toDockerLog");
document.getElementById("li_module_a").setAttribute("href", path + "/manage/toModule");
document.getElementById("li_authority_a").setAttribute("href", path + "/manage/toAuthority");
document.getElementById("li_taskConfigure_a").setAttribute("href", path + "/taskConfigure/toTaskConfigure");
... ...