|
|
<%@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/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/jstree/themes/proton/style.css"/>
|
|
|
<link rel="stylesheet" href="<%=basePath %>css/select2.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/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">恶意ip规则管理</a>
|
|
|
</div>
|
|
|
|
|
|
<div class="container-fluid">
|
|
|
|
|
|
|
|
|
<div class="widget-box">
|
|
|
<div class="widget-title">
|
|
|
<h5>恶意Ip规则查询</h5>
|
|
|
</div>
|
|
|
<div class="widget-content nopadding">
|
|
|
<div class="widget-title" style="height: 53px;">
|
|
|
<div>
|
|
|
<button id="addRuleBtn" class="btn btn-success" style="margin-top: 12px;margin-left: 10px;" onclick="editRuleInfo(0)">新增规则</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div id="malIpRulesInfoTable">
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<%--新增规则模态框--%>
|
|
|
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
|
|
|
<div class="modal-dialog">
|
|
|
<div class="modal-content"style="width: 140%">
|
|
|
<div class="modal-header">
|
|
|
<button type="button" class="close" data-dismiss="modal"
|
|
|
aria-hidden="true">×</button>
|
|
|
<h4 class="modal-title" id="myModalLabel"></h4>
|
|
|
</div>
|
|
|
<div class="modal-body" style="height: 600px;overflow :auto" >
|
|
|
<form id="editRuleForm" class="form-horizontal">
|
|
|
|
|
|
<div class="form-group" >
|
|
|
<label class="col-sm-1 control-label"> <span style="color:red">*</span>规则名称:</label>
|
|
|
<div class="col-sm-9">
|
|
|
<input type="text" class="form-control " id="ruleName" name="ruleName" placeholder="规则名称" />
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="form-group">
|
|
|
<label class=" col-sm-1 control-label">生成规则:</label>
|
|
|
<div class="col-sm-2">
|
|
|
<input type="button" value="新增规则项" id="ruleItem" class="form-control btn btn-success" onclick="addRuleItem()"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
<label class=" col-sm-1 control-label"></label>
|
|
|
<div class="col-sm-9">
|
|
|
<table class="table table-striped table-hover table-bordered " id="table_rule_items" style="width: 100%">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th style="width: 25%">规则</th>
|
|
|
<th style="width: 15%"> 比较符</th>
|
|
|
<th style="width: 15%">值</th>
|
|
|
<th style="width: 15%">规则连接符号</th>
|
|
|
<th style="width: 15%">删除</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<tr>
|
|
|
<td><select name='item_rule' class="form-control" style="height:80%"></select></td>
|
|
|
<td><select name='item_op' class="form-control" style="height:80%"></select></td>
|
|
|
<td><input type="text" name='item_val' class="form-control" ></input></td>
|
|
|
<td><select name='item_concat' class="form-control" style="display:none;height:80%"></select></td>
|
|
|
<td><a href="javascript:void(0)" class="btn mini black metric_delete" onclick="removeItem(this)">删除</a></td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group" >
|
|
|
<label class="col-sm-1 control-label"> <span style="color:red">*</span>所生成的规则:</label>
|
|
|
<div class="col-sm-9">
|
|
|
<textarea class="form-control " id="rule" name="rule" style="font-size: 15px" rows="4" disabled="true" ></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" onclick="window.location.href='/maliciousIp/toMaliciousIpRules'">关闭</button>
|
|
|
<button type="button" class="btn btn-success" value="Validate" onclick="saveTask()">提交</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- /.modal-content -->
|
|
|
</div>
|
|
|
<!-- /.modal -->
|
|
|
</div>
|
|
|
<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
|
|
|
<script>
|
|
|
$("#li_config").addClass("active open");
|
|
|
$("#li_malicious_ips").addClass("active");
|
|
|
</script>
|
|
|
<script>
|
|
|
var items = ${items};//规则项
|
|
|
var operations = ${operations};//规则---比较符
|
|
|
var concats = ${concats};//规则连接符
|
|
|
|
|
|
$(function () {
|
|
|
initEvents();//初始化 绑定事件
|
|
|
initSelects(0);
|
|
|
//加载表格
|
|
|
$("#malIpRulesInfoTable").table({
|
|
|
columnAutoWidth : false,
|
|
|
url : "/maliciousIp/getIpRules",
|
|
|
striped : true,
|
|
|
title : "恶意ip规则列表",
|
|
|
dataType : "json",
|
|
|
pagination : true,
|
|
|
pageSize : 10,
|
|
|
loadFilter : function(data) {
|
|
|
return defaultLoadFilter(data);
|
|
|
},
|
|
|
columns : [{
|
|
|
title : "序号",
|
|
|
width : "12%",
|
|
|
formatter : function(value, rowData, rowIndex){
|
|
|
return rowIndex + 1;
|
|
|
}
|
|
|
},/*{
|
|
|
title : "id",
|
|
|
field : "id",
|
|
|
width : "12%"
|
|
|
},*/ {
|
|
|
title : "规则名称",
|
|
|
field : "name",
|
|
|
width : "20%"
|
|
|
}, {
|
|
|
title : "规则内容",
|
|
|
field : "rule",
|
|
|
width : "40%"
|
|
|
}, {
|
|
|
title : "操作",
|
|
|
field : "op",
|
|
|
formatter : function(value, rowData, rowIndex) {
|
|
|
var div = $("<div>");
|
|
|
var delBtn = $("<button>").addClass("btn btn-xs btn-danger").html("删除").appendTo(div);
|
|
|
delBtn.click(function() {
|
|
|
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 : "/maliciousIp/deleteIpRule",
|
|
|
type : 'post',
|
|
|
async : false,
|
|
|
data : {
|
|
|
id : rowData.id
|
|
|
},
|
|
|
dataType : "json",
|
|
|
success : function(data) {
|
|
|
if (!data || data.code != 200) {
|
|
|
localAlert('删除失败',data.message);
|
|
|
}
|
|
|
$("#malIpRulesInfoTable").table("load");
|
|
|
},
|
|
|
error: function (data) {
|
|
|
localAlert('系统异常',data.message);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
}]
|
|
|
});
|
|
|
});
|
|
|
return div;
|
|
|
},
|
|
|
width : "8%"
|
|
|
}]
|
|
|
});
|
|
|
$("#addRuleBtn").click(function() {
|
|
|
editRuleInfo(0);
|
|
|
});
|
|
|
});
|
|
|
|
|
|
|
|
|
//打开新增或修改页面
|
|
|
function editRuleInfo(id) {
|
|
|
|
|
|
$("#editRuleForm #messageAlert").hide();
|
|
|
if (id == 0) {//新增页面
|
|
|
$("#myModalLabel").text("新增恶意ip规则");
|
|
|
}
|
|
|
$("#myModal").modal('show');
|
|
|
}
|
|
|
|
|
|
//新增规则项
|
|
|
function addRuleItem(){
|
|
|
var contactTd = $("#table_rule_items").find("select[name='item_concat']").last();
|
|
|
contactTd.show();//展示拼接符
|
|
|
var tr = "<tr>" +
|
|
|
"<td><select name='item_rule' class='form-control' style='height:80%'></select></td>" +
|
|
|
"<td><select name='item_op' class='form-control'style='height:80%'></select></td>" +
|
|
|
"<td><input type='text' name='item_val' class='form-control'></input></td>" +
|
|
|
"<td><select name='item_concat' class='form-control'style='display:none;height:80%'></select></td>" +
|
|
|
"<td><a href='javascript:void(0)' class='btn mini black metric_delete' onclick='removeItem(this)'>删除</a></td>" +
|
|
|
"</tr>";
|
|
|
$("#table_rule_items tbody").append(tr);
|
|
|
initSelects(1);//给select赋值
|
|
|
|
|
|
}
|
|
|
|
|
|
//删除规则项
|
|
|
function removeItem(which){
|
|
|
var that = which;
|
|
|
$(that).closest("tr").remove();//移除
|
|
|
$("#table_rule_items").find("select[name='item_concat']").last().hide();//最后一个连接符设置为空并且隐藏
|
|
|
generateRules();//重新生成规则
|
|
|
}
|
|
|
|
|
|
//按照行 对下拉列表 进行 数据绑定
|
|
|
function initSelects(initOradd){
|
|
|
var select_item = "";
|
|
|
var select_op = "";
|
|
|
var select_concat = "";
|
|
|
|
|
|
if(initOradd == 0){//首次加载本页面--初始化 第一行
|
|
|
select_item = $("#table_rule_items tbody").find("select[name=\'item_rule\']").first();
|
|
|
select_op = $("#table_rule_items tbody").find("select[name=\'item_op\']").first();
|
|
|
select_concat = $("#table_rule_items tbody").find("select[name=\'item_concat\']").first();
|
|
|
}else{//新增规则项---最后一行
|
|
|
select_item = $("#table_rule_items tbody").find("select[name=\'item_rule\']").last();
|
|
|
select_op = $("#table_rule_items tbody").find("select[name=\'item_op\']").last();
|
|
|
select_concat = $("#table_rule_items tbody").find("select[name=\'item_concat\']").last();
|
|
|
}
|
|
|
//先清空
|
|
|
$(select_item).empty();
|
|
|
// $(select_item).append("<option ></option>");
|
|
|
$(select_op).empty();
|
|
|
// $(select_op).append("<option ></option>");
|
|
|
$(select_concat).empty();
|
|
|
/* $(select_concat).append("<option ></option>");*/
|
|
|
//再赋值
|
|
|
for(var i =0; i< items.length;i++){
|
|
|
$(select_item).append("<option value ='"+ items[i].value +"'>" + items[i].text + "</option>");
|
|
|
}
|
|
|
for(var i =0; i< operations.length;i++){
|
|
|
$(select_op).append("<option value ='"+ operations[i] +"'>" + operations[i] + "</option>");
|
|
|
}
|
|
|
for(var i =0; i<concats.length;i++){
|
|
|
$(select_concat).append("<option value ='"+ concats[i] +"'>" + concats[i] + "</option>");
|
|
|
}
|
|
|
}
|
|
|
|
|
|
//初始化 绑定事件---动态展示 生成的规则
|
|
|
function initEvents(){
|
|
|
|
|
|
$("#table_rule_items").on("change","select,input", function() {//下拉列表内容改变 绑定事件
|
|
|
generateRules();//生成规则文本
|
|
|
});
|
|
|
/* $("#table_rule_items").on("blur","input", function() {//文本框 获取焦点 绑定事件
|
|
|
generateRules();//生成规则文本
|
|
|
});*/
|
|
|
}
|
|
|
//生成规则文本
|
|
|
function generateRules(){
|
|
|
var ruleText = "";
|
|
|
var len = $("#table_rule_items").find("tr").length;
|
|
|
console.log("长度:"+len);
|
|
|
$("#table_rule_items").find("tr").each(function(i){//遍历table
|
|
|
if( i == 0 ) return true;//相当于continue
|
|
|
|
|
|
var text_rule = $(this).find("select[name='item_rule']").val() ;
|
|
|
var text_op = $(this).find("select[name='item_op']").val() ;
|
|
|
var text_val = $(this).find("input[name='item_val']").val();
|
|
|
ruleText = ruleText + text_rule + text_op +text_val ;
|
|
|
if( i!= len -1){//不是最后一行
|
|
|
var text_con= $(this).find("select[name='item_concat']").val();
|
|
|
ruleText = ruleText + text_con;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
$("#rule").val(ruleText);
|
|
|
|
|
|
}
|
|
|
//提交保存
|
|
|
function saveTask(){
|
|
|
var ruleName = $("#ruleName").val();
|
|
|
var ruleContent = $("#rule").val();
|
|
|
//表单数据验证
|
|
|
if(ruleName == null || ruleName ==""){
|
|
|
$("#editRuleForm #messageAlert").alerts({
|
|
|
content: "请输入规则名称",
|
|
|
type: "danger"
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if(ruleContent == null || ruleContent ==""){
|
|
|
$("#editRuleForm #messageAlert").alerts({
|
|
|
content: "规则不能为空",
|
|
|
type: "danger"
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
var param = {
|
|
|
name : ruleName,
|
|
|
rule : ruleContent
|
|
|
};
|
|
|
$.ajax({
|
|
|
url: '/maliciousIp/saveIpRules',
|
|
|
// 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');
|
|
|
window.location.href = "/maliciousIp/toMaliciousIpRules";
|
|
|
// $("#malIpRulesInfoTable").table("load");
|
|
|
}
|
|
|
},
|
|
|
error: function (data) {
|
|
|
localAlert('系统异常', data.message);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
</script> |
|
|
|
|
|
\ No newline at end of file |
...
|
...
|
|