ops / monitor-ui · Commits

Go to a project

Authored by zhengyouwei
Commit aa4060d4d38c2d5b1d584935891ba28e131c73f7 1 parent e5c7c16f

任务配置管理

Inline Side-by-side
Showing 5 changed files with 759 additions and 1 deletions
... ... @@ -118,4 +118,15 @@ public class HttpUriContants {
*/
public static final String DNS_MONITOR_CURRENT = "/other/dns_monitor/current";
public static final String DNS_MONITOR_HISTORY = "/other/dns_monitor/history";
/***
* 机组信息
****/
public static final String TASK__GETALL = "/taskConfigure/getTaskConfigure";
public static final String TASK__SAVE = "/taskConfigure/saveTaskModel";
public static final String TASK__DELETE = "/taskConfigure/delTaskModel";
public static final String TASK__GET_ID = "/taskConfigure/getTaskModelById";
}
... ...
package com.ui.model.domain;
import lombok.Data;
/**
* Created by zhengyouwei on 2016/8/10.
*/
@Data
public class TaskModel {
private int id;
/**
* 查询的列
*/
private String fields;
/**
* 查询使用的tag
*/
private String tags;
/**
* 查询的influxdbs
*/
private String influxdbs;
/**
* 查询的influxdb 数据库
*/
private String database;
/**
* sql语句
*/
private String influxSql;
/**
* 告警号码
*/
private String mobile;
/**
* 告警短信${}表示替换词
*/
private String sms;
/**
* alarm type
*/
private String type;
/**
*执行间隔
*/
private int interval;
/**
* 休息开始时间 H
*/
private int relaxStartTime;
/**
* 休息结束时间 H
*/
private int relaxEndTime;
/**
* 1 一直执行任务 2 有休息
*/
private int timeFlag;
/**
* 告警方式
* 1：单个influxdb 未出出现想要的数据
* 2：多个influxdb 合起来未出现想要的数据
* 3：单个influxdb 出现次数超过一定值
* 4：出现一个就告警，单条记录单独告警
*/
private int alarmType;
/**
* 数量告警
*/
private int alarmNumFlag;
/**
* 是否在运行中 1 ： 运行中
*/
private int isRun;
/**
* 是否需要监控 1： 需要监控
*/
private int isOn;
/**
* 持续需要告警的次数
*/
private int alarmTimes;
/**
*上次执行时间
*/
private String lastTime;
/**
* 描述
*/
private String description;
}
... ...
package com.ui.ctrl;
import com.ui.contants.HttpUriContants;
import com.ui.http.HttpRestClient;
import com.ui.model.BaseResponse;
import com.ui.model.domain.TaskModel;
import com.ui.model.req.PageRequest;
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.HashMap;
import java.util.Map;
/**
* Created by yoho on 2016/6/14.
* task 配置
*/
@Controller
@RequestMapping("taskConfigure")
public class TaskConfigCtrl {
Logger log = LoggerFactory.getLogger(TaskConfigCtrl.class);
@Autowired
HttpRestClient httpRestClient;
@RequestMapping("/toTaskConfigure")
public ModelAndView getHostGroups() {
return new ModelAndView("manager/taskConfigure");
}
@RequestMapping("/getTaskConfigure")
@ResponseBody
public BaseResponse getTaskConfigure(PageRequest req) {
BaseResponse response=httpRestClient.defaultPost(HttpUriContants.TASK__GETALL, req, BaseResponse.class);
return response;
}
@RequestMapping("/saveTaskModel")
@ResponseBody
public BaseResponse saveTaskModel(@RequestBody TaskModel taskModel) {
BaseResponse response=httpRestClient.defaultPost(HttpUriContants.TASK__SAVE, taskModel, BaseResponse.class);
return response;
}
@RequestMapping("/delTaskModel")
@ResponseBody
public BaseResponse delTaskModel(int id) {
Map map = new HashMap<>();
map.put("id",id);
BaseResponse response = httpRestClient.defaultGet(HttpUriContants.TASK__DELETE, BaseResponse.class, map);
return response;
}
@RequestMapping("/getTaskModelById")
@ResponseBody
public BaseResponse getTaskModelById(int id) {
Map map = new HashMap<>();
map.put("id",id);
BaseResponse response = httpRestClient.defaultGet(HttpUriContants.TASK__GET_ID, BaseResponse.class, map);
return response;
}
}
... ...
<%@page language="java" contentType="text/html;charset=utf-8" %>
<%@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/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">管理员</a>
</div>
<div class="container-fluid">
<div class="widget-box">
<div class="widget-title">
<h5>任务操作</h5>
</div>
<div class="widget-content nopadding">
<div class="widget-title" style="height: 53px;">
<div class="form-inline">
<a href="#" id="toAddTask" class="btn btn-success"
style="margin-top: 12px;margin-left: 0px;" onclick="editTask(0)">添加任务</a>
</div>
</div>
</div>
<div id="taskTable">
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="height: 500px;overflow :auto">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
<form id="taskForm" class="form-horizontal">
<input type="hidden" name="id">
<div class="form-group">
<label class="col-sm-2 control-label"> <span style="color:red">*</span>查询列名：</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="fields" name="fields"
placeholder="查询的列名，逗号分割" size="40"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> <span style="color:red">*</span>查询标签：</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="tags" name="tags"
placeholder="查询标签，逗号分割" size="40"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> <span style="color:red">*</span>数据源：</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="influxdbs" name="influxdbs"
placeholder="数据源，逗号分割" size="40"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> <span style="color:red">*</span>数据库：</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="database" name="database"
placeholder="数据库" size="40"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> <span style="color:red">*</span>SQL：</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="influxSql" name="influxSql"
placeholder="SQL" size="40"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> <span style="color:red">*</span>手机号：</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="mobile" name="mobile"
placeholder="手机号，逗号分割" size="40"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> <span style="color:red">*</span>短信：</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="sms" name="sms"
placeholder="短信，${_}替换符" size="40"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> <span style="color:red">*</span>告警类型：</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="type" name="type"
placeholder="告警类型" size="40"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> <span style="color:red">*</span>执行间隔：</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="interval" name="interval"
placeholder="执行间隔，分钟" size="40"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> <span style="color:red">*</span>时间标志：</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="timeFlag" name="timeFlag"
placeholder="时间标志 1 一直 2 有休息" size="40"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> <span style="color:red">*</span>休息开始：</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="relaxStartTime" name="relaxStartTime"
placeholder="休息开始 H" size="40"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> <span style="color:red">*</span>休息结束：</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="relaxEndTime" name="relaxEndTime"
placeholder="休息结束 H" size="40"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> <span style="color:red">*</span>告警方式：</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="alarmType" name="alarmType"
placeholder="告警方式" size="40"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> <span style="color:red">*</span>数量阀值：</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="alarmNumFlag" name="alarmNumFlag"
placeholder="数量阀值" size="40"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> <span style="color:red">*</span>是否需要监控：</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="isOn" name="isOn"
placeholder="是否需要监控 1 需要" size="40"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> <span style="color:red">*</span>描述：</label>
<div class="col-sm-8">
<textarea rows="5" cols="40" id="description"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> </label>
<div class="col-sm-8" id="messageAlert"></div>
</div>
<input type="hidden" name="editGroupId"/>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-success" value="Validate" onclick="saveTask()">提交</button>
</div>
</div>ask
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
<script>
$("#li_manager").addClass("active open");
$("#li_taskConfigure").addClass("active");
</script>
<script type="text/javascript">
$(function () {
//加载表格
$("#taskTable").table({
columnAutoWidth: false,
url: contextPath + "/taskConfigure/getTaskConfigure",
striped: true,
title: "告警任务配置表",
pagination: true,
pageSize: 10,
loadFilter: function (data) {
return defaultLoadFilter(data);
},
columns: [{
title: "id",
field: "id",
width: "50px"
}, {
title: "列名",
field: "fields",
width: "250px"
}, {
title: "数据库",
field: "database",
width: "150px"
}, {
title: "告警类型",
field: "type",
width: "150px"
}, {
title: "执行间隔m",
field: "interval",
width: "80px"
}, {
title: "时间标志",
field: "timeFlag",
width: "80px"
}, {
title: "告警方式",
field: "alarmType",
width: "80px"
}, {
title: "数量标志",
field: "alarmNumFlag",
width: "80px"
}, {
title: "运行状态",
field: "isRun",
formatter : function(value, rowData, rowIndex) {
if(value == 1){
return 'yes';
}else{
return 'no';
}
},
width: "80px"
}, {
title: "上次执行",
field: "lastTime",
width: "200px"
}, {
title: "操作",
formatter: function (value, rowData, rowIndex) {
var div = $("<div>");
$("<button onclick=\"editTask(\'" + rowData.id + "\')\">").addClass("btn btn-xs btn-success").html("修改").appendTo(div);
div.append("&nbsp;");
$("<button onclick=\"deleteTask(\'" + rowData.id + "\')\">").addClass("btn btn-xs btn-danger").html("删除").appendTo(div);
return div;
}
}]
});
});
//打开新增或修改页面
function editTask(id) {
$("#taskForm #messageAlert").hide();
if (id == 0) {//新增页面
$("input[name='id']").val(0);
$("input[name='fields']").val("");
$("input[name='influxdbs']").val("");
$("input[name='database']").val("");
$("input[name='tags']").val("");
$("input[name='influxSql']").val("");
$("input[name='mobile']").val("");
$("input[name='sms']").val("");
$("input[name='type']").val("");
$("input[name='interval']").val("");
$("input[name='relaxStartTime']").val("");
$("input[name='relaxEndTime']").val("");
$("input[name='timeFlag']").val("");
$("input[name='alarmType']").val("");
$("input[name='alarmNumFlag']").val("");
$("input[name='isOn']").val("");
$("#description").val("");
$("#myModalLabel").text("新增任务");
} else {
$.ajax({
url: contextPath + "/taskConfigure/getTaskModelById",
type: 'post',
async: false,
data: {
id: id
},
dataType: "json",
success: function (data) {
if (data.code == 200) {
var taskModel = data.data;
$("input[name='id']").val(id);
$("input[name='fields']").val(taskModel.fields);
$("input[name='influxdbs']").val(taskModel.influxdbs);
$("input[name='database']").val(taskModel.database);
$("input[name='tags']").val(taskModel.tags);
$("input[name='influxSql']").val(taskModel.influxSql);
$("input[name='mobile']").val(taskModel.mobile);
$("input[name='sms']").val(taskModel.sms);
$("input[name='type']").val(taskModel.type);
$("input[name='interval']").val(taskModel.interval);
$("input[name='relaxStartTime']").val(taskModel.relaxStartTime);
$("input[name='relaxEndTime']").val(taskModel.relaxEndTime);
$("input[name='timeFlag']").val(taskModel.timeFlag);
$("input[name='alarmType']").val(taskModel.alarmType);
$("input[name='alarmNumFlag']").val(taskModel.alarmNumFlag);
$("input[name='isOn']").val(taskModel.isOn);
$("#description").val(taskModel.description);
}
}
});
$("#myModalLabel").text("修改任务");
}
$("#myModal").modal('show');
}
function deleteTask(id) {
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
title: "你确定删除吗",
backdrop: "static",
content: "你确定要删除该任务吗？",
buttons: [{
text: "否",
className: "btn-danger",
onclick: function () {
$(dialog).dialog("hide");
}
}, {
text: "是",
className: "btn-success",
onclick: function () {
$(dialog).dialog("hide");
$.ajax({
url: contextPath + "/taskConfigure/delTaskModel",
type: 'post',
async: false,
data: {
id: id
},
dataType: "json",
success: function (data) {
if (!data || data.code != 200) {
localAlert('删除失败', data.message);
}
$("#taskTable").table("load");
}
});
}
}]
});
}
function saveTask() {
var id = $("input[name='id']").val();
var fields = $("input[name='fields']").val();
var influxdbs = $("input[name='influxdbs']").val();
var database = $("input[name='database']").val();
var tags = $("input[name='tags']").val();
var influxSql = $("input[name='influxSql']").val();
var mobile = $("input[name='mobile']").val();
var sms = $("input[name='sms']").val();
var type = $("input[name='type']").val();
var interval = $("input[name='interval']").val();
var relaxStartTime = $("input[name='relaxStartTime']").val();
var relaxEndTime = $("input[name='relaxEndTime']").val();
var timeFlag = $("input[name='timeFlag']").val();
var alarmType = $("input[name='alarmType']").val();
var alarmNumFlag = $("input[name='alarmNumFlag']").val();
var isOn = $("input[name='isOn']").val();
var description = $("#description").val();
if (fields == null || fields == "") {
$("#taskForm #messageAlert").alerts({
content: "请输入列名",
type: "danger"
});
return;
}
if (influxdbs == null || influxdbs == "") {
$("#taskForm #messageAlert").alerts({
content: "请输入数据源",
type: "danger"
});
return;
}
if (database == null || database == "") {
$("#taskForm #messageAlert").alerts({
content: "请输入数据库",
type: "danger"
});
return;
}
if (influxSql == null || influxSql == "") {
$("#taskForm #messageAlert").alerts({
content: "请输入SQL",
type: "danger"
});
return;
}
if (mobile == null || mobile == "") {
$("#taskForm #messageAlert").alerts({
content: "请输入手机号",
type: "danger"
});
return;
}
if (sms == null || sms == "") {
$("#taskForm #messageAlert").alerts({
content: "请输入短信",
type: "danger"
});
return;
}
if (interval == null || interval == "") {
$("#taskForm #messageAlert").alerts({
content: "请输入监控间隔",
type: "danger"
});
return;
}
if (timeFlag == null || timeFlag == "") {
$("#taskForm #messageAlert").alerts({
content: "请输入时间标志",
type: "danger"
});
return;
}
if (type == null || type == "") {
$("#taskForm #messageAlert").alerts({
content: "请输入告警类型",
type: "danger"
});
return;
}
if (alarmType == null || alarmType == "") {
$("#taskForm #messageAlert").alerts({
content: "请输入监控类型",
type: "danger"
});
return;
}
if (isOn == null || isOn == "") {
$("#taskForm #messageAlert").alerts({
content: "请输入是否监控",
type: "danger"
});
return;
}
var param = {
id: id,
fields: fields,
influxdbs: influxdbs,
database: database,
tags: tags,
influxSql: influxSql,
mobile: mobile,
sms: sms,
type: type,
interval: interval,
relaxStartTime: relaxStartTime,
relaxEndTime: relaxEndTime,
timeFlag: timeFlag,
alarmType: alarmType,
alarmNumFlag: alarmNumFlag,
isOn: isOn,
description:description
}
$.ajax({
url: contextPath + 'taskConfigure/saveTaskModel',
type: 'POST',
dataType: 'json',
contentType: "application/json",
data: JSON.stringify(param),
success: function (data) {
if (!data || data.code != 200) {
$("#taskForm #messageAlert").alerts({
content: data.message,
type: "danger"
});
return;
} else {
$("#myModal").modal('hide');
$("#taskTable").table("load");
}
},
error: function (data) {
localAlert('系统异常', data.message);
}
});
}
</script>
</body>
</html>
... ...
... ... @@ -41,9 +41,10 @@ innerHTML += "<li id='li_luaswitch'><a id='li_luaswitch_a' href='#'>LUA切换</a
innerHTML += "</ul></li>";
/*manage*/
innerHTML += "<li class='submenu' id='li_manager'><a id='li_manager_a' href='#'><i class='icon icon-th-list'></i> <span>管理员</span><span class='label'>2</span></a>";
innerHTML += "<li class='submenu' id='li_manager'><a id='li_manager_a' href='#'><i class='icon icon-th-list'></i> <span>管理员</span><span class='label'>3</span></a>";
innerHTML += "<ul><li id='li_user'><a id='li_user_a' href=''>用户管理</a></li>";
innerHTML += "<li id='li_module'><a id='li_module_a' href=''>模块管理</a></li>";
innerHTML += "<li id='li_taskConfigure'><a id='li_taskConfigure_a' href=''>任务管理</a></li>";
innerHTML += "</ul></li>";
/*其他*/
... ... @@ -71,6 +72,7 @@ document.getElementById("li_others_a").setAttribute("href", path + "/dashboard/t
document.getElementById("li_zkMonitor_a").setAttribute("href", path + "/zkTree/tozkMonitorList");
document.getElementById("li_user_a").setAttribute("href", path + "/manage/toUser");
document.getElementById("li_module_a").setAttribute("href", path + "/manage/toModule");
document.getElementById("li_taskConfigure_a").setAttribute("href", path + "/taskConfigure/toTaskConfigure");
document.getElementById("li_nginxswitch_a").setAttribute("href", path + "/nginxswitch/toNginxSwitch");
document.getElementById("li_luaswitch_a").setAttribute("href", path + "/luaswitch/toLuaSwitch");
document.getElementById("li_projectHistory_a").setAttribute("href", path + "/project/toHistory");
... ...