RepoMirrors/alertmanager
1
0
Fork 0
mirror of https://github.com/prometheus/alertmanager synced 2025-02-16 10:37:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Complete silence UI

Browse Source
This commit is contained in:
Fabian Reinartz 2015-10-15 12:01:19 +02:00
parent 0597dd62f1
commit e48ec3a339
4 changed files with 112 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
ui/app/index.html
View File

@ -9,38 +9,29 @@
<script src="/app/js/app.js"></script> <script src="/app/js/app.js"></script>
<link rel="stylesheet" href="/static/pure-min.css"> <link rel="stylesheet" href="/static/kube.min.css">
<link rel="stylesheet" href="/app/css/main.css">
<style> <style>
</style> </style>
</head> </head>
<body> <body>
<div id="layout" class="content pure-g"> <header class="group">
<div id="nav" class="pure-u"> <h1 id="logo" class="thin hide-for-small">Alertmanager.</h1>
<a href="#" class="nav-menu-button">Menu</a>
<div class="nav-inner"> <nav id="top-nav" ng-controller="NavCtrl">
<div class="pure-menu"> <ul>
<ul class="pure-menu-list"><!-- <li ng-repeat="item in items" ng-class="{'selected': selected(item)}">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Alerts</a></li> <a ng-href="/#{{ item.url }}" class="upper">{{ item.name }}</a>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Silences</li> </li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Sent</a></li> </ul>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Drafts</a></li> </nav>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Trash</a></li> </header>
<li class="pure-menu-heading">Labels</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link"><span class="email-label-personal"></span>Personal</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link"><span class="email-label-work"></span>Work</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link"><span class="email-label-travel"></span>Travel</a></li> -->
</ul>
</div>
</div>
</div>
</div>
<h1>AM</h1>
<div ng-view></div> <main id="content">
<div ng-view></div>
</main>
</body> </body>
</html> </html>

16
ui/app/js/app.js
View File

@ -16,6 +16,20 @@ angular.module('am.services').factory('Silence',
angular.module('am.controllers', []); angular.module('am.controllers', []);
angular.module('am.controllers').controller('NavCtrl',
function($scope, $location) {
$scope.items = [
{name: 'Silences', url:'/silences'},
{name: 'Alerts', url:'/alerts'},
{name: 'Status', url:'/status'}
];
$scope.selected = function(item) {
return item.url == $location.path()
}
}
);
angular.module('am.controllers').controller('SilencesCtrl', angular.module('am.controllers').controller('SilencesCtrl',
function($scope, Silence) { function($scope, Silence) {
$scope.silences = []; $scope.silences = [];
@ -100,4 +114,4 @@ angular.module('am').config(
redirectTo: '/silences' redirectTo: '/silences'
}); });
} }
); );

111
ui/app/partials/silences.html
View File

@ -1,41 +1,94 @@
<div id="silence-create" ng-controller="SilenceCreateCtrl"> <div ng-controller="SilenceCreateCtrl">
<form novalidate> <form novalidate class="forms">
Start: <input ng-model="silence.startsAt" type="datetime-local"> <fieldset id="silence-create">
End: <input ng-model="silence.endsAt" type="datetime-local"> <legend>Create <span class="desc">Define a new silence.</span></legend>
<div ng-repeat="m in silence.matchers"> <row>
<input placeholder="name" ng-model="m.name"> <column cols="2">
<input placeholder="value" ng-model="m.value"> <label>Start</label>
regex: <input type="checkbox" ng-model="m.isRegex"> <input ng-model="silence.startsAt" type="datetime-local">
<button ng-hide="$first" ng-click="delMatcher($index)">-</button> </column>
<button ng-show="$last" ng-click="newMatcher()">+</button> <column cols="3">
<label>End</label>
<input ng-model="silence.endsAt" type="datetime-local">
</column>
<column cols="2">
<label>Creator</label>
<input ng-model="silence.createdBy" type="email">
</column>
<column cols="3">
<label>Comment</label>
<input ng-model="silence.comment" type="text">
</column>
</row>
<label>Matchers <span class="desc">Alerts affected by this silence.</span></label>
<row class="silence-matchers" ng-repeat="m in silence.matchers">
<column cols="2">
<input class="input-small" type="text" placeholder="name" ng-model="m.name">
</column>
<column cols="2">
<input class="input-small" type="text" placeholder="value" ng-model="m.value">
</column>
<column>
<label class="checkbox is-regex"><input type="checkbox" ng-model="m.isRegex"> /re/</label>
</column>
<column cols="1">
<button type="secondary" ng-hide="$first" ng-click="delMatcher($index)" small>-</button>
<button type="secondary" ng-show="$last" ng-click="newMatcher()" small>+</button>
</column>
</row>
</fieldset>
<div ng-show="error != null"><span class="error">{{ error }}</span></div>
<div class="btn-group">
<button type="primary" ng-disabled="silence.matchers.length == 0" ng-click="create()" small>Create</button>
<button type="seconday" ng-click="reset()" small>Reset</button>
</div> </div>
<div ng-show="error != null">Error: {{ error }}</div>
<button ng-click="create()">Create</button>
</form> </form>
</div> </div>
<div id="silences-query"> <hr>
<input placeholder="search" ng-model="query">
<div id="silences-query" class="forms">
order by: <row>
<select ng-model="order"> <column cols="5">
<option value="startsAt">start</option> <input type="search" placeholder="search" ng-model="query">
<option value="endsAt">end</option> </column>
<option value="createdAt">created</option> <column cols="2">
</select> <select class="select" ng-model="order">
<option value="startsAt">start</option>
<option value="endsAt">end</option>
<option value="createdAt">created</option>
</select>
</column>
</row>
</div> </div>
<div ng-show="silences.length == 0">No silences configured</div> <div ng-show="silences.length == 0">No silences configured</div>
<div ng-hide="silences.length == 0" id="silences-list"> <div ng-hide="silences.length == 0" id="silences-list">
<div ng-repeat="sil in silences | filter:query | orderBy:order">
{{ sil.startsAt | date:'medium' }} – {{ sil.endsAt | date:'medium' }} <div class="list-item group" ng-repeat="sil in silences | filter:query | orderBy:order">
created: {{ sil.createdAt | date:'medium' }} <div class="container-left">
<div ng-repeat="m in sil.matchers | orderBy:name"> <div class="silence-interval">{{ sil.startsAt | date:'medium' }} – {{ sil.endsAt | date:'medium' }}</div>
{{ m.name }} = {{ m.value }} <span ng-show="m.isRegex">[re]</span> <span class="label-matcher label label-white" outline ng-repeat="m in sil.matchers | orderBy:name">
{{ m.name }} =<span ng-show="m.isRegex">~</span> '{{ m.value }}'
</span>
</div>
<div class="container-right group">
<blockquote class="left silence-created">
<div ng-show="sil.comment">{{ sil.comment }}</div>
<cite>created <span ng-show="sil.createdBy">by <strong>{{ sil.createdBy }}</strong></span> at {{ sil.createdAt | date:'medium' }}</cite>
</blockquote>
<div class="right">
<button type="secondary" ng-click="delete(sil)" small>Delete</button>
</div>
</div> </div>
<button ng-click="delete(sil)">Delete</button>
</div> </div>
</div> </div>

11
ui/lib/pure-min.css vendored
View File

File diff suppressed because one or more lines are too long