Complete silence UI
This commit is contained in:
Fabian Reinartz
parent
0597dd62f1
commit
e48ec3a339
|
|
@ -9,38 +9,29 @@
|
|||
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout" class="content pure-g">
|
||||
<div id="nav" class="pure-u">
|
||||
<a href="#" class="nav-menu-button">Menu</a>
|
||||
<header class="group">
|
||||
<h1 id="logo" class="thin hide-for-small">Alertmanager.</h1>
|
||||
|
||||
<div class="nav-inner">
|
||||
<div class="pure-menu">
|
||||
<ul class="pure-menu-list"><!--
|
||||
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Alerts</a></li>
|
||||
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Silences</li>
|
||||
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Sent</a></li>
|
||||
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Drafts</a></li>
|
||||
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Trash</a></li>
|
||||
<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>
|
||||
<nav id="top-nav" ng-controller="NavCtrl">
|
||||
<ul>
|
||||
<li ng-repeat="item in items" ng-class="{'selected': selected(item)}">
|
||||
<a ng-href="/#{{ item.url }}" class="upper">{{ item.name }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div ng-view></div>
|
||||
<main id="content">
|
||||
<div ng-view></div>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -16,6 +16,20 @@ angular.module('am.services').factory('Silence',
|
|||
|
||||
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',
|
||||
function($scope, Silence) {
|
||||
$scope.silences = [];
|
||||
|
|
@ -100,4 +114,4 @@ angular.module('am').config(
|
|||
redirectTo: '/silences'
|
||||
});
|
||||
}
|
||||
);
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,41 +1,94 @@
|
|||
<div id="silence-create" ng-controller="SilenceCreateCtrl">
|
||||
<form novalidate>
|
||||
Start: <input ng-model="silence.startsAt" type="datetime-local">
|
||||
End: <input ng-model="silence.endsAt" type="datetime-local">
|
||||
<div ng-controller="SilenceCreateCtrl">
|
||||
<form novalidate class="forms">
|
||||
<fieldset id="silence-create">
|
||||
<legend>Create <span class="desc">Define a new silence.</span></legend>
|
||||
|
||||
<div ng-repeat="m in silence.matchers">
|
||||
<input placeholder="name" ng-model="m.name">
|
||||
<input placeholder="value" ng-model="m.value">
|
||||
regex: <input type="checkbox" ng-model="m.isRegex">
|
||||
<button ng-hide="$first" ng-click="delMatcher($index)">-</button>
|
||||
<button ng-show="$last" ng-click="newMatcher()">+</button>
|
||||
<row>
|
||||
<column cols="2">
|
||||
<label>Start</label>
|
||||
<input ng-model="silence.startsAt" type="datetime-local">
|
||||
</column>
|
||||
<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 ng-show="error != null">Error: {{ error }}</div>
|
||||
|
||||
<button ng-click="create()">Create</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="silences-query">
|
||||
<input placeholder="search" ng-model="query">
|
||||
|
||||
order by:
|
||||
<select ng-model="order">
|
||||
<option value="startsAt">start</option>
|
||||
<option value="endsAt">end</option>
|
||||
<option value="createdAt">created</option>
|
||||
</select>
|
||||
<hr>
|
||||
|
||||
<div id="silences-query" class="forms">
|
||||
<row>
|
||||
<column cols="5">
|
||||
<input type="search" placeholder="search" ng-model="query">
|
||||
</column>
|
||||
<column cols="2">
|
||||
<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 ng-show="silences.length == 0">No silences configured</div>
|
||||
|
||||
<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' }}
|
||||
created: {{ sil.createdAt | date:'medium' }}
|
||||
<div ng-repeat="m in sil.matchers | orderBy:name">
|
||||
{{ m.name }} = {{ m.value }} <span ng-show="m.isRegex">[re]</span>
|
||||
|
||||
<div class="list-item group" ng-repeat="sil in silences | filter:query | orderBy:order">
|
||||
<div class="container-left">
|
||||
<div class="silence-interval">{{ sil.startsAt | date:'medium' }} – {{ sil.endsAt | date:'medium' }}</div>
|
||||
<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>
|
||||
<button ng-click="delete(sil)">Delete</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue