RepoMirrors/alertmanager
1
0
Fork 0
mirror of https://github.com/prometheus/alertmanager synced 2025-01-28 00:53:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve silence UI

Browse Source
This commit is contained in:
Fabian Reinartz 2015-11-06 17:07:55 +01:00
parent 8f937a3d05
commit 896449efac
8 changed files with 85 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
ui/app/css/main.css
View File

@ -58,6 +58,10 @@ header #logo {
.silence .detail {
background: #fff;
padding: .8em;
display: none;
}
.silence:hover .detail {
display: block;
}
.silence-matchers {
@ -106,19 +110,9 @@ header #logo {
padding: 1em;
}
.list-item .active-interval {
font-family: Menlo, Monaco, Consolas, Courier, monospace;
font-size: .75em;
color: #fff;
padding-bottom: 3px;
margin-bottom: 4px;
}
.active-interval .time {
color: #f9f9f9;
}
.active-interval .date {
color: #c9c9c9;
.active-interval {
color: #aaa;
font-style: italic;
}
.list-item .silence-created {

2
ui/app/index.html
View File

@ -2,10 +2,12 @@
<html lang="en" ng-app="am">
<head>
<script src="/static/jquery.min.js"></script>
<script src="/static/moment.min.js"></script>
<script src="/static/angular.min.js"></script>
<script src="/static/angular-route.min.js"></script>
<script src="/static/angular-resource.min.js"></script>
<script src="/static/angular-moment.min.js"></script>
<script src="/app/js/app.js"></script>

39
ui/app/js/app.js
View File

@ -230,15 +230,36 @@ angular.module('am.controllers').controller('AlertsCtrl',
}
);
angular.module('am.controllers').controller('SilenceCtrl',
function($scope, $rootScope, Silence) {
$scope.delete = function(sil) {
Silence.delete({id: sil.id},
function(data) {
$rootScope.$broadcast('silence-deleted');
},
function(data) {
$scope.error = data.data;
});
};
}
);
angular.module('am.controllers').controller('SilencesCtrl',
function($scope, Silence) {
$scope.silences = [];
$scope.order = "startsAt";
$scope.order = "endsAt";
$scope.refresh = function() {
Silence.query({},
function(data) {
function(data) {
$scope.silences = data.data || [];
angular.forEach($scope.silences, function(value) {
value.endsAt = new Date(value.endsAt);
value.startsAt = new Date(value.startsAt);
value.createdAt = new Date(value.createdAt);
});
},
function(data) {
$scope.error = data.data;
@ -246,19 +267,12 @@ angular.module('am.controllers').controller('SilencesCtrl',
);
};
$scope.delete = function(sil) {
Silence.delete({id: sil.id},
function(data) {
$scope.refresh();
},
function(data) {
$scope.error = data.data;
});
};
$scope.$on('silence-created', function(evt) {
$scope.refresh();
});
$scope.$on('silence-deleted', function(evt) {
$scope.refresh();
});
$scope.refresh();
}
@ -344,6 +358,7 @@ angular.module('am.controllers').controller('StatusCtrl',
angular.module('am', [
'ngRoute',
'angularMoment',
'am.controllers',
'am.services',

4
ui/app/partials/route.html
View File

@ -1,8 +1,8 @@
<div class="route">
<div class="route-header group">
<div class="grouping-labels right">
<!-- <div class="grouping-labels right">
<span ng-repeat="l in route.routeOpts.groupBy" class="lbl">{{ l }}</span>
</div>
</div> -->
<div class="route-matchers left">
<span ng-repeat="m in route.matchers" class="lbl">
{{ m.name }} =<span ng-show="m.isRegex">~</span> '{{ m.value }}'

37
ui/app/partials/silence.html Normal file
View File

@ -0,0 +1,37 @@
<div class="silence" ng-controller="SilenceCtrl">
<div class="labels">
<span ng-repeat="m in sil.matchers | orderBy:name">
<span class="lbl {{ m.name == 'alertname' ? 'lbl-highlight' : '' }}">
{{ m.name }} =<span ng-show="m.isRegex">~</span> '{{ m.value }}'
</span>
</span>
<div class="right">
<button type="black" disabled small>Until {{ sil.endsAt | amCalendar }}</button>
<button class="delete-button" type="secondary" ng-click="delete(sil)" small upper>Delete</button>
</div>
</div>
<div class="detail group">
<table class="table-flat">
<tbody>
<tr ng-show="sil.createdBy">
<td>creator</td>
<td>{{ sil.createdBy }}</td>
</tr>
<tr ng-show="sil.comment">
<td>comment</td>
<td>{{ sil.comment }}</td>
</tr>
<tr>
<td>active</td>
<td>
<span>{{ sil.startsAt | date:'yyyy-MM-dd HH:mm' }}</span>
–
<span>{{ sil.endsAt | date:'yyyy-MM-dd HH:mm' }}</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>

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

@ -21,7 +21,7 @@
<div ng-hide="silences.length == 0" id="silences-list">
<div class="list-item group" ng-repeat="sil in silences | filter:query | orderBy:order">
<div class="list-item group" ng-repeat="sil in silences | filter:query | orderBy:order:reverse">
<silence sil="sil"></silence>
</div>

2
ui/lib/angular-moment.min.js vendored Normal file
View File

@ -0,0 +1,2 @@
"format amd";!function(){"use strict";function a(a){return angular.isUndefined(a)||null===a}function b(b,c){return b.module("angularMoment",[]).constant("angularMomentConfig",{preprocess:null,timezone:null,format:null,statefulFilters:!0}).constant("moment",c).constant("amTimeAgoConfig",{withoutSuffix:!1,serverTime:null,titleFormat:null,fullDateThreshold:null,fullDateFormat:null}).directive("amTimeAgo",["$window","moment","amMoment","amTimeAgoConfig",function(c,d,e,f){return function(g,h,i){function j(){var a;if(p)a=p;else if(f.serverTime){var b=(new Date).getTime(),c=b-v+f.serverTime;a=d(c)}else a=d();return a}function k(){q&&(c.clearTimeout(q),q=null)}function l(a){var b=j().diff(a,"day"),d=t&&b>=t;if(h.text(d?a.format(u):a.from(j(),r)),s&&!h.attr("title")&&h.attr("title",a.local().format(s)),!d){var e=Math.abs(j().diff(a,"minute")),f=3600;1>e?f=1:60>e?f=30:180>e&&(f=300),q=c.setTimeout(function(){l(a)},1e3*f)}}function m(a){x&&h.attr("datetime",a)}function n(){if(k(),o){var a=e.preprocessDate(o);l(a),m(a.toISOString())}}var o,p,q=null,r=f.withoutSuffix,s=f.titleFormat,t=f.fullDateThreshold,u=f.fullDateFormat,v=(new Date).getTime(),w=i.amTimeAgo,x="TIME"===h[0].nodeName.toUpperCase();g.$watch(w,function(b){return a(b)||""===b?(k(),void(o&&(h.text(""),m(""),o=null))):(o=b,void n())}),b.isDefined(i.amFrom)&&g.$watch(i.amFrom,function(b){p=a(b)||""===b?null:d(b),n()}),b.isDefined(i.amWithoutSuffix)&&g.$watch(i.amWithoutSuffix,function(a){"boolean"==typeof a?(r=a,n()):r=f.withoutSuffix}),i.$observe("amFullDateThreshold",function(a){t=a,n()}),i.$observe("amFullDateFormat",function(a){u=a,n()}),g.$on("$destroy",function(){k()}),g.$on("amMoment:localeChanged",function(){n()})}}]).service("amMoment",["moment","$rootScope","$log","angularMomentConfig",function(a,c,d,e){var f=null;this.changeLocale=function(d,e){var f=a.locale(d,e);return b.isDefined(d)&&c.$broadcast("amMoment:localeChanged"),f},this.changeTimezone=function(b){a.tz&&a.tz.setDefault?(a.tz.setDefault(b),c.$broadcast("amMoment:timezoneChanged")):d.warn("angular-moment: changeTimezone() works only with moment-timezone.js v0.3.0 or greater."),e.timezone=b,f=b},this.preprocessDate=function(b){return f!==e.timezone&&this.changeTimezone(e.timezone),e.preprocess?e.preprocess(b):a(!isNaN(parseFloat(b))&&isFinite(b)?parseInt(b,10):b)}}]).filter("amParse",["moment",function(a){return function(b,c){return a(b,c)}}]).filter("amFromUnix",["moment",function(a){return function(b){return a.unix(b)}}]).filter("amUtc",["moment",function(a){return function(b){return a.utc(b)}}]).filter("amUtcOffset",["amMoment",function(a){function b(b,c){return a.preprocessDate(b).utcOffset(c)}return b}]).filter("amLocal",["moment",function(a){return function(b){return a.isMoment(b)?b.local():null}}]).filter("amTimezone",["amMoment","angularMomentConfig","$log",function(a,b,c){function d(b,d){var e=a.preprocessDate(b);return d?e.tz?e.tz(d):(c.warn("angular-moment: named timezone specified but moment.tz() is undefined. Did you forget to include moment-timezone.js ?"),e):e}return d}]).filter("amCalendar",["moment","amMoment","angularMomentConfig",function(b,c,d){function e(b){if(a(b))return"";var d=c.preprocessDate(b);return d.isValid()?d.calendar():""}return e.$stateful=d.statefulFilters,e}]).filter("amDifference",["moment","amMoment","angularMomentConfig",function(b,c,d){function e(d,e,f,g){if(a(d))return"";var h=c.preprocessDate(d),i=a(e)?b():c.preprocessDate(e);return h.isValid()&&i.isValid()?h.diff(i,f,g):""}return e.$stateful=d.statefulFilters,e}]).filter("amDateFormat",["moment","amMoment","angularMomentConfig",function(b,c,d){function e(b,d){if(a(b))return"";var e=c.preprocessDate(b);return e.isValid()?e.format(d):""}return e.$stateful=d.statefulFilters,e}]).filter("amDurationFormat",["moment","angularMomentConfig",function(b,c){function d(c,d,e){return a(c)?"":b.duration(c,d).humanize(e)}return d.$stateful=c.statefulFilters,d}]).filter("amTimeAgo",["moment","amMoment","angularMomentConfig",function(b,c,d){function e(d,e,f){var g,h;return a(d)?"":(d=c.preprocessDate(d),g=b(d),g.isValid()?(h=b(f),!a(f)&&h.isValid()?g.from(h,e):g.fromNow(e)):"")}return e.$stateful=d.statefulFilters,e}]).filter("amSubtract",["moment","angularMomentConfig",function(b,c){function d(c,d,e){return a(c)?"":b(c).subtract(parseInt(d,10),e)}return d.$stateful=c.statefulFilters,d}]).filter("amAdd",["moment","angularMomentConfig",function(b,c){function d(c,d,e){return a(c)?"":b(c).add(parseInt(d,10),e)}return d.$stateful=c.statefulFilters,d}])}"function"==typeof define&&define.amd?define(["angular","moment"],b):"undefined"!=typeof module&&module&&module.exports?(b(require("angular"),require("moment")),module.exports="angularMoment"):b(angular,("undefined"!=typeof global?global:window).moment)}();
//# sourceMappingURL=angular-moment.min.js.map

7
ui/lib/moment.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long