mirror of
https://github.com/prometheus/alertmanager
synced 2025-02-16 10:37:09 +00:00
Show actual alerts in UI and add no-op silence dialog.
This commit is contained in:
Julius Volz
parent
71a9d4af35
commit
827d3c3710
27
web/helpers.go
Normal file
27
web/helpers.go
Normal file
@ -0,0 +1,27 @@
|
||||
// Copyright 2013 Prometheus Team
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
package web
|
||||
|
||||
import (
|
||||
"html/template"
|
||||
"time"
|
||||
)
|
||||
|
||||
func timeSince(t time.Time) string {
|
||||
return time.Now().Round(time.Second / 10).Sub(t.Round(time.Second / 10)).String()
|
||||
}
|
||||
|
||||
var webHelpers = template.FuncMap{
|
||||
"timeSince": timeSince,
|
||||
}
|
||||
@ -1,3 +1,15 @@
|
||||
body {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
#create_silence_modal th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.add_silence_form {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.del_label_button {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
49
web/static/js/alerts.js
Normal file
49
web/static/js/alerts.js
Normal file
@ -0,0 +1,49 @@
|
||||
function clearSilenceLabels() {
|
||||
$("#silence_label_table").empty();
|
||||
}
|
||||
|
||||
function addSilenceLabel(label, value) {
|
||||
if (!label) {
|
||||
label = "";
|
||||
}
|
||||
if (!value) {
|
||||
value = "";
|
||||
}
|
||||
$("#silence_label_table").append(
|
||||
'<tr>' +
|
||||
' <td><input class="input-large" type="text" placeholder="label regex" value="' + label + '"></td>' +
|
||||
' <td><input class="input-large" type="text" placeholder="value regex" value="' + value + '"></td>' +
|
||||
' <td><button class="btn del_label_button"><i class="icon-minus"></i></button></td>' +
|
||||
'</tr>');
|
||||
bindDelLabel();
|
||||
}
|
||||
|
||||
function bindDelLabel() {
|
||||
$(".del_label_button").unbind("click");
|
||||
$(".del_label_button").click(function() {
|
||||
$(this).parents("tr").remove();
|
||||
});
|
||||
}
|
||||
|
||||
function init() {
|
||||
$("#new_silence_btn").click(function() {
|
||||
clearSilenceLabels();
|
||||
});
|
||||
|
||||
$(".add_silence_btn").click(function() {
|
||||
clearSilenceLabels();
|
||||
|
||||
var form = $(this).parents("form");
|
||||
var labels = form.children('input[name="label[]"]');
|
||||
var values = form.children('input[name="value[]"]');
|
||||
for (var i = 0; i < labels.length; i++) {
|
||||
addSilenceLabel(labels.get(i).value, values.get(i).value);
|
||||
}
|
||||
});
|
||||
|
||||
$("#add_label_button").click(function() {
|
||||
addSilenceLabel("", "");
|
||||
});
|
||||
}
|
||||
|
||||
$(init);
|
||||
@ -5,8 +5,10 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Prometheus Alert Manager</title>
|
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
|
||||
<link href="/static/vendor/bootstrap/css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" />
|
||||
<script src="/static/vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="/static/vendor/bootstrap/js/bootstrap.js" type="text/javascript"></script>
|
||||
|
||||
<link href="/static/css/default.css" media="all" rel="stylesheet" type="text/css" />
|
||||
|
||||
@ -43,3 +45,43 @@
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
{{define "createSilenceModal"}}
|
||||
<!-- Modal -->
|
||||
<div id="create_silence_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="create_silence_header" aria-hidden="true">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3 id="create_silence_header">Create Silence</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal">
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="silence_creator">Creator</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="silence_creator" placeholder="Creator">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="silence_expiry">Expiry</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="silence_expiry" placeholder="Expiry">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="silence_creator">Comment</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="silence_comment" placeholder="Comment">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<label>Labels:</label>
|
||||
<table id="silence_label_table">
|
||||
</table>
|
||||
<button class="btn" id="add_label_button"><i class="icon-plus"></i> Add Label Filter</button>
|
||||
<button class="btn">Preview Silence</button>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
|
||||
<button class="btn btn-primary">Create Silence</button>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<h2>Alerts</h2>
|
||||
<div class="input-append">
|
||||
<input class="input-xxlarge" type="text" value="service="*"">
|
||||
<button class="btn" type="button"><i class="icon-search"></i></button>
|
||||
<button class="btn" type="button"><i class="icon-filter"></i></button>
|
||||
</div>
|
||||
<table class="table table-striped table-bordered table-hover">
|
||||
<thead>
|
||||
@ -23,34 +23,32 @@
|
||||
<tbody>
|
||||
{{range .AlertAggregates}}
|
||||
<tr>
|
||||
<td>{{.Event}} <button class="btn btn-mini">Silence Alert</button></td>
|
||||
<td>{{.Event.Labels}} <button class="btn btn-mini">Silence Instance</button></td>
|
||||
<td>{{.Created}}</td>
|
||||
<td>{{.LastRefreshed}}</td>
|
||||
<td>
|
||||
{{index .Event.Name}}
|
||||
<form class="add_silence_form">
|
||||
<input type="hidden" name="label[]" value="name">
|
||||
<input type="hidden" name="value[]" value="{{.Event.Labels.name}}">
|
||||
<a href="#create_silence_modal" role="button" class="btn btn-mini add_silence_btn" data-toggle="modal">Silence Alert</a>
|
||||
</form>
|
||||
</td>
|
||||
<td>
|
||||
{{range $label, $value := .Event.Labels}}
|
||||
<b>{{$label}}</b>="{{$value}}",
|
||||
{{end}}
|
||||
<form class="add_silence_form">
|
||||
{{range $label, $value := .Event.Labels}}
|
||||
<input type="hidden" name="label[]" value="{{$label}}">
|
||||
<input type="hidden" name="value[]" value="{{$value}}">
|
||||
{{end}}
|
||||
<a href="#create_silence_modal" role="button" class="btn btn-mini add_silence_btn" data-toggle="modal">Silence Instance</a>
|
||||
</form>
|
||||
</td>
|
||||
<td>{{timeSince .Created}} ago</td>
|
||||
<td>{{timeSince .LastRefreshed}} ago</td>
|
||||
<td>No</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
<tr>
|
||||
<td>TheTaxesAreTooDamnHigh <button class="btn btn-mini">Silence Alert</button></td>
|
||||
<td>{foo="bar",baz="biz"} <button class="btn btn-mini">Silence Instance</button></td>
|
||||
<td>...</td>
|
||||
<td>...</td>
|
||||
<td>No</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>TheTaxesAreTooDamnHigh <button class="btn btn-mini">Silence Alert</button></td>
|
||||
<td>{foo="bar",baz="biz"} <button class="btn btn-mini">Silence Instance</button></td>
|
||||
<td>...</td>
|
||||
<td>...</td>
|
||||
<td>No</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>TheTaxesAreTooDamnHigh <button class="btn btn-mini">Silence Alert</button></td>
|
||||
<td>{foo="bar",baz="biz"} <button class="btn btn-mini">Silence Instance</button></td>
|
||||
<td>...</td>
|
||||
<td>...</td>
|
||||
<td>No</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{{template "createSilenceModal" .}}
|
||||
{{end}}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
{{define "content"}}
|
||||
<h2>Silences</h2>
|
||||
<p><button class="btn btn-primary">New Silence</button><p/>
|
||||
<p><a href="#create_silence_modal" role="button" class="btn btn-primary" id="new_silence_btn" data-toggle="modal">New Silence</a></p>
|
||||
<table class="table table-striped table-bordered table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -90,4 +90,5 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{{template "createSilenceModal" .}}
|
||||
{{end}}
|
||||
|
||||
11
web/web.go
11
web/web.go
@ -76,14 +76,17 @@ func (w WebService) ServeForever() error {
|
||||
}
|
||||
|
||||
func getLocalTemplate(name string) (*template.Template, error) {
|
||||
return template.ParseFiles(
|
||||
t := template.New("_base.html")
|
||||
t.Funcs(webHelpers)
|
||||
return t.ParseFiles(
|
||||
"web/templates/_base.html",
|
||||
fmt.Sprintf("web/templates/%s.html", name),
|
||||
)
|
||||
}
|
||||
|
||||
func getEmbeddedTemplate(name string) (*template.Template, error) {
|
||||
t := template.New("_base")
|
||||
t := template.New("_base.html")
|
||||
t.Funcs(webHelpers)
|
||||
|
||||
file, err := blob.GetFile(blob.TemplateFiles, "_base.html")
|
||||
if err != nil {
|
||||
@ -110,10 +113,10 @@ func getTemplate(name string) (t *template.Template, err error) {
|
||||
}
|
||||
|
||||
if err != nil {
|
||||
return
|
||||
return nil, err
|
||||
}
|
||||
|
||||
return
|
||||
return t, nil
|
||||
}
|
||||
|
||||
func executeTemplate(w http.ResponseWriter, name string, data interface{}) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user