diff --git a/assets/static/base.css b/assets/static/base.css index 39dba079b..623db3fd1 100644 --- a/assets/static/base.css +++ b/assets/static/base.css @@ -423,6 +423,37 @@ table.table.silence-label-selects > tbody > tr > td { margin-right: 20px; } +.datetime-picker > .bootstrap-datetimepicker-widget > .row > .datepicker { + padding-top: 10px; + padding-bottom: 20px; +} + +.silence-duration-table { + margin-left: auto; + margin-right: auto; +} +.silence-duration-text { + font-size: 2em; +} +.silence-duration-btn:hover { + background: #eee; +} +.silence-duration-btn > i { + pointer-events: none; +} +table.silence-duration-table > tbody > tr > td.silence-separator { + width: 10px; +} +table.silence-duration-table > tbody > tr > td.silence-duration-label { + padding-left: 0; + vertical-align: bottom; + line-height: 2em; +} + +.no-margin-top { + margin-top: 0; +} + a[aria-expanded=true] .fa-chevron-right { display: none; } diff --git a/assets/static/ui.js b/assets/static/ui.js index 65ee0a42f..47dec86d9 100644 --- a/assets/static/ui.js +++ b/assets/static/ui.js @@ -96,11 +96,14 @@ var UI = (function(params) { case "comment": case "createdBy": payload[elem.name] = elem.value; break; - case "startsAt": case "endsAt": - payload[elem.name] = moment(elem.value); - break; } }); + if ($("#startsAt").data('DateTimePicker')) { + payload.startsAt = $("#startsAt").data('DateTimePicker').date(); + } + if ($("#endsAt").data('DateTimePicker')) { + payload.endsAt = $("#endsAt").data('DateTimePicker').date(); + } $.each($("#newSilenceForm .selectpicker"), function(i, elem) { var label_key = $(elem).data('label-key'); var values = $(elem).selectpicker('val'); @@ -123,6 +126,36 @@ var UI = (function(params) { return payload; } + + silenceFormCalculateDuration = function() { + // skip if datetimepicker isn't ready yet + if (!$("#startsAt").data('DateTimePicker') || !$("#endsAt").data('DateTimePicker')) return false; + + var startsAt = $("#startsAt").data('DateTimePicker').date(); + var endsAt = $("#endsAt").data('DateTimePicker').date(); + + var totalDays = (endsAt.diff(startsAt, 'days')); + var totalHours = (endsAt.diff(startsAt, 'hours')) % 24; + var totalMinutes = endsAt.diff(startsAt, 'minutes') % 60; + $("#silence-duration-days").html(totalDays); + $("#silence-duration-hours").html(totalHours); + $("#silence-duration-minutes").html(totalMinutes); + + var startsAtDesc = moment().to(startsAt); + startsAtDesc = startsAtDesc.replace("in a few seconds", "now"); + startsAtDesc = startsAtDesc.replace("a few seconds ago", "now"); + $("#silence-start-description").html(startsAtDesc); + + var endsAtDesc = moment().to(endsAt); + endsAtDesc = endsAtDesc.replace("in a few seconds", "now"); + endsAtDesc = endsAtDesc.replace("a few seconds ago", "now"); + $("#silence-end-description").html(endsAtDesc); + + // fix endsAt min date, it cannot be < startsAt + $("#endsAt").data('DateTimePicker').minDate(startsAt); + } + + silenceFormJSONRender = function() { var d = "curl " + $("#silenceModal").data("silence-api") + "\n -X POST --data " @@ -130,6 +163,25 @@ var UI = (function(params) { $("#silenceJSONBlob").html(d); } + + silenceFormUpdateDuration = function(event) { + // skip if datetimepicker isn't ready yet + if (!$("#endsAt").data('DateTimePicker')) return false; + + var endsAt = $("#endsAt").data('DateTimePicker').date(); + var action = $(event.target).data("duration-action"); + var unit = $(event.target).data("duration-unit"); + var step = parseInt($(event.target).data("duration-step")); + if (action == "increment") { + endsAt.add(step, unit); + } else { + endsAt.subtract(step, unit); + } + $("#endsAt").data('DateTimePicker').date(endsAt); + silenceFormCalculateDuration(); + } + + // modal form for creating new silences setupSilenceForm = function() { var modal = $("#silenceModal"); @@ -203,8 +255,9 @@ var UI = (function(params) { clear: 'fa fa-undo', close: 'fa fa-close' }, - minDate: moment().subtract(1, 'minutes'), - sideBySide: true + minDate: moment(), + sideBySide: true, + inline: true }); setupGroupTooltips(modal); $('.select-label-badge').on('click', function(e) { @@ -217,7 +270,12 @@ var UI = (function(params) { select.selectpicker('selectAll') } }); - } + // set endsAt time to +1hour + $("#endsAt").data('DateTimePicker').date(moment().add(1, 'hours')); + modal.on("click", "a.silence-duration-btn", silenceFormUpdateDuration); + modal.on("mousedown", "a.silence-duration-btn", false); + silenceFormCalculateDuration(); + } }); }); @@ -228,6 +286,7 @@ var UI = (function(params) { }); modal.on('show.bs.collapse, dp.change', function (e) { silenceFormJSONRender(); + silenceFormCalculateDuration(); }); modal.on('change', function (e) { silenceFormJSONRender(); diff --git a/assets/templates/silence.html b/assets/templates/silence.html index e9191cc4b..40fa11832 100644 --- a/assets/templates/silence.html +++ b/assets/templates/silence.html @@ -32,38 +32,107 @@