ck-ops/code/alert/views/record.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="/record" 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="javascript:if(confirm('确实要清空所有记录吗?清空后无法恢复'))location='/record/clean'" class="btn btn-default bg-danger">
					<i class="fas fa-inbox"></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">** 非实时告警展示</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-bordered table-striped">
                  <thead>
                  <tr>
				    <th>告警名称</th>
				    <th>开始时间</th>
				    <th>结束时间</th>
				    <th>级别</th>
				    <th>Instance</th>
				    <th>Summary</th>
				    <th>Description</th>
				    <th>告警状态</th>
				    <th>Label</th>
                  </tr>
                  </thead>
                  <tbody>
				{{range .Record}}
				<tr>
					<!--<td>{{.Id}}</td>-->
					<td>
					<span class="badge bg-primary">
					{{.Alertname}}
					</span>
					</td>
					
					<td>
					<span class="badge bg-warning">
					{{.StartsAt}}
					</span>
					</td>
					
					<td>
					
					{{if eq .EndsAt "0001-01-01T00:00:00Z"}}<span class="badge bg-warning">持续中</span>{{else}}{{if eq .EndsAt "0001-01-01 08:00:00"}}<span class="badge bg-warning">持续中</span>{{else}}<span class="badge bg-success">{{.EndsAt}}</span>{{end}}{{end}}
					
					</td>
					<td> <!-- 0 信息,1 警告,2 一般严重,3 严重,4 灾难 -->
					<span class="badge bg-navy">
					{{if eq .AlertLevel ""}}信息{{else}}
					{{if eq .AlertLevel "0"}}信息{{else}}
					{{if eq .AlertLevel "1"}}警告{{else}}
					{{if eq .AlertLevel "2"}}一般严重{{else}}
					{{if eq .AlertLevel "3"}}严重{{else}}
					{{if eq .AlertLevel "4"}}灾难{{else}}
					{{.AlertLevel}}
					{{end}}{{end}}{{end}}{{end}}{{end}}{{end}}
					</span>
					</td>
					
					<td>
					<span class="badge bg-fuchsia">
					{{.Instance}}
					</span>
					</td>
					
					<td>
					<span class="badge bg-olive">
					{{.Summary}}
					</span>
					</td>
					
					<td>
					<span class="badge bg-danger">
					{{.Description}}
					</span>
					</td>
					
					<td>
					{{if eq .AlertStatus "firing"}}<span class="badge bg-danger">告警</span>{{else}}<span class="badge bg-success">恢复</span>{{end}}
					</td>

					<td>
					{{.Labels}}
					<!--<span class="badge bg-gray">
						
					</span>-->
					</td>

				</tr>
				{{end}}
                  </tbody>
                  <tfoot>
                  <tr>
				    <th>告警名称</th>
				    <th>开始时间</th>
				    <th>结束时间</th>
				    <th>级别</th>
				    <th>Instance</th>
				    <th>Summary</th>
				    <th>Description</th>
				    <th>告警状态</th>
				    <th>Label</th>
                  </tr>
                  </tfoot>
                </table>

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

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
{{template "endhtml"}}
<script>
  $(function () {
    $("#example1").DataTable({
      "responsive": true, "lengthChange": false, "autoWidth": false,
      "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
    }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
	
	var tb = document.getElementById('example1');//获取表格的dom节点
	var td = tb.rows[1].cells[8];//获取0行0列的td单元格
	//td.innerHTML = '222';//动态修改表格的内容为222
    for(var i=1,rows=tb.rows.length; i<rows-1; i++){
        var td = tb.rows[i].cells[8];//获取0行0列的td单元格
		var str = td.innerHTML;
		var obj = JSON.parse(str);
		var table_str = ""
		for(var p in obj){
		  //console.log(p + " " + obj[p]);
		  table_str = table_str + '<span class="badge bg-gray">'+p+'='+obj[p]+'</span><br />'
		}
		td.innerHTML = table_str;
    }
	
  });
</script>
{{template "jshtml"}}