taskConfigure.jsp 23.9 KB

Raw Blame History Permalink

<%@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: "isOn",
                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>