You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>夜莺告警通知</title>
<style type="text/css">
.wrapper {
background - color : # f8f8f8 ;
padding : 1 5 px ;
height : 1 0 0 % ;
}
.main {
width : 6 0 0 px ;
padding : 3 0 px ;
margin : 0 auto ;
background - color : # fff ;
font - size : 1 2 px ;
font - family : verdana , 'Microsoft YaHei' , Consolas , 'Deja Vu Sans Mono' , 'Bitstream Vera Sans Mono' ;
}
header {
border - radius : 2 px 2 px 0 0 ;
}
header .title {
font - size : 1 4 px ;
color : # 3 3 3 3 3 3 ;
margin : 0 ;
}
header .sub-desc {
color : # 3 3 3 ;
font - size : 1 4 px ;
margin - top : 6 px ;
margin - bottom : 0 ;
}
hr {
margin : 2 0 px 0 ;
height : 0 ;
border : none ;
border - top : 1 px solid # e5e5e5 ;
}
em {
font - weight : 6 0 0 ;
}
table {
margin : 2 0 px 0 ;
width : 1 0 0 % ;
}
table tbody tr {
font - weight : 2 0 0 ;
font - size : 1 2 px ;
color : # 6 6 6 ;
height : 3 2 px ;
}
.succ {
background - color : green ;
color : # fff ;
}
.fail {
background - color : red ;
color : # fff ;
}
.succ th, .succ td, .fail th, .fail td {
color : # fff ;
}
table tbody tr th {
width : 8 0 px ;
text - align : right ;
}
.text-right {
text - align : right ;
}
.body {
margin - top : 2 4 px ;
}
.body-text {
color : # 6 6 6 6 6 6 ;
- webkit - font - smoothing : antialiased ;
}
.body-extra {
- webkit - font - smoothing : antialiased ;
}
.body-extra.text-right a {
text - decoration : none ;
color : # 3 3 3 ;
}
.body-extra.text-right a:hover {
color : # 6 6 6 ;
}
.button {
width : 2 0 0 px ;
height : 5 0 px ;
margin - top : 2 0 px ;
text - align : center ;
border - radius : 2 px ;
background : # 2D 7 7 EE ;
line - height : 5 0 px ;
font - size : 2 0 px ;
color : # FFFFFF ;
cursor : pointer ;
}
.button:hover {
background : rgb ( 2 5 , 1 1 5 , 2 5 5 ) ;
border - color : rgb ( 2 5 , 1 1 5 , 2 5 5 ) ;
color : # fff ;
}
footer {
margin - top : 1 0 px ;
text - align : right ;
}
.footer-logo {
text - align : right ;
}
.footer-logo-image {
width : 1 0 8 px ;
height : 2 7 px ;
margin - right : 1 0 px ;
}
.copyright {
margin - top : 1 0 px ;
font - size : 1 2 px ;
text - align : right ;
color : # 9 9 9 ;
- webkit - font - smoothing : antialiased ;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="main">
<header>
<h3 class="title"> { { . RuleName } } </h3>
<p class="sub-desc"></p>
</header>
<hr>
<div class="body">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
{ { if . IsRecovered } }
<tr class="succ">
<th>级别状态：</th>
<td>S { { . Severity } } Recovered</td>
</tr>
{ { else } }
<tr class="fail">
<th>级别状态：</th>
<td>S { { . Severity } } Triggered</td>
</tr>
{ { end } }
<tr>
<th>策略备注：</th>
<td> { { . RuleNote } } </td>
</tr>
<tr>
<th>设备备注：</th>
<td> { { . TargetNote } } </td>
</tr>
{ { if not . IsRecovered } }
<tr>
<th>触发时值：</th>
<td> { { . TriggerValue } } </td>
</tr>
{ { end } }
{ { if . TargetIdent } }
<tr>
<th>监控对象：</th>
<td> { { . TargetIdent } } </td>
</tr>
{ { end } }
<tr>
<th>监控指标：</th>
<td> { { . TagsJSON } } </td>
</tr>
{ { if . IsRecovered } }
<tr>
<th>恢复时间：</th>
<td> { { timeformat . LastEvalTime } } </td>
</tr>
{ { else } }
<tr>
<th>触发时间：</th>
<td>
{ { timeformat . TriggerTime } }
</td>
</tr>
{ { end } }
<tr>
<th>发送时间：</th>
<td>
{ { timestamp } }
</td>
</tr>
<tr>
<th>PromQL：
<td>
{ { . PromQl } }
</td>
</tr>
</tbody>
</table>
<hr>
<footer>
<div class="copyright" style="font-style: italic">
我们希望与您一起，将监控这个事情，做到极致！
</div>
</footer>
</div>
</div>
</div>
</body>
</html>
