ck-ops/code/alert/views/alertrouter_edit.html

{{template "main" .}}
  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="/alertrouter" class="nav-link">告警管理</a>
      </li>
    </ul>

  </nav>
  <!-- /.navbar -->

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>编辑告警路由</h1>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">

      <!-- Default box -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title"></h3>

          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
              <i class="fas fa-minus"></i>
            </button>
            <button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove">
              <i class="fas fa-times"></i>
            </button>
          </div>
        </div>
        <div class="card-body">

			<form class="form-horizontal" method="POST" action="##" enctype="multipart/form-data" onsubmit="return false" id="formtpl">
			<input id="id" type="hidden" name="id" value="{{.AlertRouter.Id}}">
			
			  <div class="row">
				<div class="col-sm-6">
				  <!-- text input -->
				  <div class="form-group">
					<label>路由名称</label>
					<input type="text" id="name" class="form-control" name="name" value="{{.AlertRouter.Name}}">
				  </div>
				</div>
			  
				<div class="col-sm-6">
				  <!-- select -->
				  <div class="form-group">
					<label>生效模版</label>
					<select class="form-control" name="tpl_id" id="tpl_id">
					<option value="{{.AlertRouter.Tpl.Id}}">{{.AlertRouter.Tpl.Tplname}}</option>
					</select>
				  </div>
				</div>

			  </div>
			
			  <div class="row"  style="display:none;">
				<div class="col-sm-6">
				  <!-- text input -->
				  <div class="form-group">
					<label>模版类型</label>
					<input type="text" id="tpltype" class="form-control" name="tpltype" value="{{.AlertRouter.Tpl.Tpltype}}" disabled>
				  </div>
				</div>
			  </div>

			<br />
			
			<div id="labelx"></div>
			
			
			  <div class="row">
				<div class="col-sm-6">
				  <!-- text input -->
				  <div class="form-group">
					<button id='labeladd' type="button" class="btn btn-info btn-flat"><i class="far fa-plus-square"></i></button>
				  </div>
				</div>
			  </div>
			  

			<br />

			  <div class="row">
				<div id="Purl" class="col-sm-6">
				  <!-- text input -->
				  <div class="form-group">
					<label id="typestr">钉钉机器人地址</label>
					<input type="text" id="purl" class="form-control" name="purl" value="{{.AlertRouter.UrlOrPhone}}">
				  </div>
				</div>

				<div id="Pat" class="col-sm-6">
				  <!-- text input -->
				  <div class="form-group">
					<label id="typestr">@某人</label>
					<input type="text" id="pat" class="form-control" name="pat" value="{{.AlertRouter.AtSomeOne}}"  placeholder="钉钉@使用的是手机号码，企业微信机器人@使用的是用户帐号，">
					<!-- <input type="text" id="pat" class="form-control" name="pat" value=""  placeholder="钉钉@使用的是手机号码，企业微信机器人@使用的是用户帐号，飞书V2 @使用的是用户Email邮箱"> -->
				  </div>
				</div>

				<div id="Party" class="col-sm-6" style="display:none">
				  <!-- text input -->
				  <div class="form-group">
					<label id="typestr">接受部门</label>
					<input type="text" id="pparty" class="form-control" name="pparty" value="">
				  </div>
				</div>

				<div id="Tag" class="col-sm-6" style="display:none">
				  <!-- text input -->
				  <div class="form-group">
					<label id="typestr">接受标签</label>
					<input type="text" id="ptag" class="form-control" name="ptag" value="">
				  </div>
				</div>

			  </div>

			<br />

			<div class="text-right">
			<a class="btn btn-app bg-success" onclick="savetpl();">
			  <i class="fas fa-save"></i> 保存路由
			</a>
			</div>
			</form>

        </div>
        <!-- /.card-body -->
        <div class="card-footer">
          
        </div>
        <!-- /.card-footer-->
      </div>
      <!-- /.card -->

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
{{template "endhtml"}}
<script>
$(function () {
	typeChange();
	loadRules();
	$('#labeladd').click(function(){
	    var labeldiv='<div class="row"> 				<div class="col-3"> 				  				  <div class="form-group"> 					<label>Label Name</label> 					<input type="text" id="rules" class="form-control" name="rules" value=""  placeholder="规则如 app=nginx,env=test"> 				  </div> 				</div> 				 				<div class="col-3"> 				  				  <div class="form-group"> 					<label>Label Value</label> 					<input type="text" id="rulesvalue" class="form-control" name="rulesvalue" value=""  placeholder="规则如 app=nginx,env=test"> 				  </div> 				</div>  				 				<div class="col-1 d-flex align-items-center"> 				  					<div class="form-check"> 					  <input id="rulesregex" class="form-check-input" name="rulesregex" type="checkbox"> 					  <label class="form-check-label">Regex</label> 					</div> 				</div> 				 			  				<div class="col-sm-1 d-flex align-items-center">				  <div class="form-group">					<button id="labeldel" type="button" class="btn btn-danger btn-flat"><i class="fa fa-trash"></i></button>				  </div>				</div></div> 			   			<br />';
		$('#labelx').append(labeldiv)
	});
	
	$("#labelx").delegate('#labeldel','click',function(){
		$(this).parents(".row").remove();
	});
	
})
function loadRules(){
	var rules_str={{.AlertRouter.Rules}};
	var rules_data = JSON.parse(rules_str);
	rules_data.forEach(function(rule_data){
		var ischeck=""
		if (rule_data.Regex){
			ischeck="checked"
		} else {
			ischeck=""
		}
		var labeldiv='<div class="row"> 				<div class="col-3"> 				  				  <div class="form-group"> 					<label>Label Name</label> 					<input type="text" id="rules" class="form-control" name="rules" value="'+rule_data.Name+'"  placeholder="规则如 app=nginx,env=test"> 				  </div> 				</div> 				 				<div class="col-3"> 				   				  <div class="form-group"> 					<label>Label Value</label> 					<input type="text" id="rulesvalue" class="form-control" name="rulesvalue" value="'+rule_data.Value+'"  placeholder="规则如 app=nginx,env=test"> 				  </div> 				</div>  				 				<div class="col-1 d-flex align-items-center"> 				  					<div class="form-check"> 					  <input id="rulesregex" class="form-check-input" name="rulesregex" type="checkbox" '+ischeck+'> 					  <label class="form-check-label">Regex</label> 					</div> 				</div> 				 			  <div class="col-sm-1 d-flex align-items-center">				  <div class="form-group">					<button id="labeldel" type="button" class="btn btn-danger btn-flat"><i class="fa fa-trash"></i></button>				  </div>				</div></div> 			   			<br />';
		$('#labelx').append(labeldiv)
	});
	
}

function typeChange(){
 var tpl_id = document.getElementById("tpl_id");
 var tpltype = document.getElementById("tpltype");
 var typeStr = document.getElementById("typestr");
 var tpl_idSelect = tpl_id.options[tpl_id.selectedIndex].value; //get id
 
 if (tpltype.value=="dd"){
	typeStr.innerText="钉钉机器人地址(多个请以,隔开)";
	document.getElementById("Purl").style.display="";
	document.getElementById("Pat").style.display="";
	document.getElementById("Party").style.display="none";
	document.getElementById("Tag").style.display="none";
 } else if(tpltype.value=="wx"){
	typeStr.innerText="微信机器人地址(多个请以,隔开)";
	document.getElementById("Purl").style.display="";
	document.getElementById("Pat").style.display="";
	document.getElementById("Party").style.display="none";
	document.getElementById("Tag").style.display="none";
 } else if(tpltype.value=="fs"){
	typeStr.innerText="飞书机器人地址(多个请以,隔开)";
	document.getElementById("Purl").style.display="";
	document.getElementById("Pat").style.display="";
	document.getElementById("Party").style.display="none";
	document.getElementById("Tag").style.display="none";
 } else if(tpltype.value=="fsapp"){
	typeStr.innerText="飞书 用户open_id、user_id、union_ids、部门open_department_id";
	document.getElementById("Purl").style.display="none";
	document.getElementById("Pat").style.display="";
	document.getElementById("Party").style.display="none";
	document.getElementById("Tag").style.display="none";
 } else if(tpltype.value=="voice"){
	typeStr.innerText="";
	document.getElementById("Purl").style.display="none";
	document.getElementById("Pat").style.display="none";
	document.getElementById("Party").style.display="none";
	document.getElementById("Tag").style.display="none";
 } else if(tpltype.value=="webhook"){
	typeStr.innerText="webhook地址(多个请以,隔开)";
	document.getElementById("Purl").style.display="";
	document.getElementById("Pat").style.display="none";
	document.getElementById("Party").style.display="none";
	document.getElementById("Tag").style.display="none";
 } else if(tpltype.value=="email"){
	typeStr.innerText="邮箱(多个请以,隔开)";
	document.getElementById("Purl").style.display="";
	document.getElementById("Pat").style.display="none";
	document.getElementById("Party").style.display="none";
	document.getElementById("Tag").style.display="none";
 } else if(tpltype.value=="rl"){
	typeStr.innerText="百度Hi(如流)群id";
	document.getElementById("Purl").style.display="";
	document.getElementById("Pat").style.display="none";
	document.getElementById("Party").style.display="none";
	document.getElementById("Tag").style.display="none";
 } else if(tpltype.value=="workwechat"){
    alert("workwechat暂不支持告警路由，待后期开启!");
	/*typeStr.innerText="接受用户";
	document.getElementById("Pat").style.display="none";
	document.getElementById("Party").style.display="";
	document.getElementById("Tag").style.display="";*/
	
 } else{
	typeStr.innerText="手机号(多个请以,隔开)";
	document.getElementById("Purl").style.display="";
	document.getElementById("Pat").style.display="none";
	document.getElementById("Party").style.display="none";
	document.getElementById("Tag").style.display="none";
 }
 
}

function savetpl(){
	var uname=document.getElementById("rules");
	if (uname.value.length==0){
		alert('路由规则不能为空');
		return
	};
	var ucontent=document.getElementById("purl");
	if (ucontent.value.length==0){
		alert('url 或 手机号参数不能为空');
		return
	};

	//取到所有rules
	var RouterRules =new Array();
	$("#labelx > div").each(function() {
		var LabelMap={
			Name: $(this).find("#rules").val(),
			Value: $(this).find("#rulesvalue").val(),
			Regex: $(this).find("#rulesregex").is(":checked")

		};
		RouterRules.push(LabelMap);
	});

	var alert_router_json_str={
		RouterId: $('#id').val(),
		RouterName: $('#name').val(),
		RouterTplId: $('#tpl_id').val(),
		RouterPurl: $('#purl').val(),
		RouterPat: $('#pat').val(),
		Rules: RouterRules
	};

	var json_data = JSON.stringify(alert_router_json_str);
	$.ajax({
		type: "POST",
		dataType: "json",
		url: '{{ urlfor "MainController.AddRouter"}}',
		data: json_data,
		success: function (result) {
			console.log(result);
			if (result == null) {
				alert("告警路由保存成功!");
				window.location.replace("/alertrouter")
			} else {
				alert("告警路由保存失败!");
			};
		},
	});

}
</script>
{{template "jshtml"}}