|
- <!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: 15px;
- height: 100%;
- }
- .main {
- width: 600px;
- padding: 30px;
- margin: 0 auto;
- background-color: #fff;
- font-size: 12px;
- font-family: verdana,'Microsoft YaHei',Consolas,'Deja Vu Sans Mono','Bitstream Vera Sans Mono';
- }
- header {
- border-radius: 2px 2px 0 0;
- }
- header .title {
- font-size: 14px;
- color: #333333;
- margin: 0;
- }
- header .sub-desc {
- color: #333;
- font-size: 14px;
- margin-top: 6px;
- margin-bottom: 0;
- }
- hr {
- margin: 20px 0;
- height: 0;
- border: none;
- border-top: 1px solid #e5e5e5;
- }
- em {
- font-weight: 600;
- }
- table {
- margin: 20px 0;
- width: 100%;
- }
-
- table tbody tr{
- font-weight: 200;
- font-size: 12px;
- color: #666;
- height: 32px;
- }
-
- .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: 80px;
- text-align: right;
- }
- .text-right {
- text-align: right;
- }
- .body {
- margin-top: 24px;
- }
- .body-text {
- color: #666666;
- -webkit-font-smoothing: antialiased;
- }
- .body-extra {
- -webkit-font-smoothing: antialiased;
- }
- .body-extra.text-right a {
- text-decoration: none;
- color: #333;
- }
- .body-extra.text-right a:hover {
- color: #666;
- }
- .button {
- width: 200px;
- height: 50px;
- margin-top: 20px;
- text-align: center;
- border-radius: 2px;
- background: #2D77EE;
- line-height: 50px;
- font-size: 20px;
- color: #FFFFFF;
- cursor: pointer;
- }
- .button:hover {
- background: rgb(25, 115, 255);
- border-color: rgb(25, 115, 255);
- color: #fff;
- }
- footer {
- margin-top: 10px;
- text-align: right;
- }
- .footer-logo {
- text-align: right;
- }
- .footer-logo-image {
- width: 108px;
- height: 27px;
- margin-right: 10px;
- }
- .copyright {
- margin-top: 10px;
- font-size: 12px;
- text-align: right;
- color: #999;
- -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:</th>
- <td>
- {{.PromQl}}
- </td>
- </tr>
- </tbody>
- </table>
-
- <hr>
-
- <footer>
- <div class="copyright" style="font-style: italic">
- 报警太多?使用 <a href="https://flashcat.cloud/product/flashduty/" target="_blank">FlashDuty</a> 做告警聚合降噪、排班OnCall!
- </div>
- </footer>
- </div>
- </div>
- </div>
- </body>
- </html>
|