ck-ops/code/alert/views/alertrouter.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 class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
				<a href="/alertrouter/add" class="btn btn-default bg-warning">
					<i class="fas fa-file mr-2"></i> 添加路由
				</a>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

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

      <!-- Default box -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title" style="color:red">** 告警路由目前仅支持 Prometheus</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">


			<table id="example1" class="table table-hover">
				<thead>
					<tr>
						<th style="display:none;">Id</th>
						<th>路由名称</th>
						<th>生效模版</th>
						<th>模版类型</th>
						<th>模版用途</th>
						<th>路由规则</th>
						<th>创建时间</th>
						<th>编辑</th>
						<th>删除</th>
					</tr>
				</thead>
				<tbody id="tpllist" >
					{{range $k,$v:= .AlertRouter}}
					<tr>
						<th style="display:none;">{{.Id}}</th>
						<th>{{$v.Name}}</th>
						<th>{{$v.Tpl.Tplname}}</th>
						<th>
                           {{if eq $v.Tpl.Tpltype "dd"}}钉钉{{end}}
                           {{if eq $v.Tpl.Tpltype "wx"}}企业微信{{end}}
                           {{if eq $v.Tpl.Tpltype "workwechat"}}企业微信应用{{end}}
                           {{if eq $v.Tpl.Tpltype "fs"}}飞书{{end}}
                           {{if eq $v.Tpl.Tpltype "webhook"}}WebHook{{end}}
                           {{if eq $v.Tpl.Tpltype "txdx"}}腾讯云短信{{end}}
                           {{if eq $v.Tpl.Tpltype "txdh"}}腾讯云电话{{end}}
                           {{if eq $v.Tpl.Tpltype "alydx"}}阿里云短信{{end}}
                           {{if eq $v.Tpl.Tpltype "alydh"}}阿里云电话{{end}}
                           {{if eq $v.Tpl.Tpltype "hwdx"}}华为云短信{{end}}
                           {{if eq $v.Tpl.Tpltype "bddx"}}百度云短信{{end}}
                           {{if eq $v.Tpl.Tpltype "rlydh"}}容联云电话{{end}}
                           {{if eq $v.Tpl.Tpltype "7moordx"}}七陌短信{{end}}
                           {{if eq $v.Tpl.Tpltype "7moordh"}}七陌语音电话{{end}}
                           {{if eq $v.Tpl.Tpltype "email"}}Email{{end}}
						   {{if eq $v.Tpl.Tpltype "tg"}}Telegram{{end}}
						   {{if eq $v.Tpl.Tpltype "rl"}}百度Hi(如流){{end}}
						   {{if eq $v.Tpl.Tpltype "bark"}}Bark(iPhone推送){{end}}
						   {{if eq $v.Tpl.Tpltype "voice"}}语音播报{{end}}
						   {{if eq $v.Tpl.Tpltype "fsapp"}}飞书机器人应用{{end}}
                        </th>
                        <th>{{$v.Tpl.Tpluse}}</th>
						
						<th>
						{{$v.Rules}}
						</th>
						
						<th>{{$v.Created.Format "2006-01-02 15:04:05 UTC"}}</th>
						<th>
						<a href="/alertrouter/edit?id={{.Id}}" class="btn btn-default bg-success">
							<i class="fa fa-edit"></i> Edit
						</a>
						</th>
						<th>
						<a href="javascript:if(confirm('确实要删除吗?'))location='/alertrouter/del?id={{.Id}}'" class="btn btn-default bg-danger">
							<i class="fa fa-trash"></i> Delete
						</a>
						</th>

					</tr>
					{{end}}
				</tbody>
			</table>



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

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
{{template "endhtml"}}
<script>
$(function () {
	var tb = document.getElementById('example1');
	var td = tb.rows[1].cells[5];
    for(var i=1,rows=tb.rows.length; i<rows; i++){
        var td = tb.rows[i].cells[5];
		var str = td.innerHTML;
		var obj = JSON.parse(str);
		var table_str = ""
		for(var p in obj){
		  console.log(obj[p]);
			if (obj[p].Regex){
				ischeck="正则"
			} else {
				ischeck="普通"
			}
		  table_str = table_str + '<span class="badge bg-info">'+obj[p].Name+' = '+obj[p].Value+' | '+ischeck+'</span><br />'
		}
		td.innerHTML = table_str;
    }
})
</script>
{{template "jshtml"}}