github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-15 04:06:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Default to duration only UI controls

Browse Source 
Instead of showing start & end inputs show duration input element, explicit start & end are still present under tabs, where datatime picker is inlined (so it doesn't require any click to show controls). Tabs will also show desription of relative start and end, so it should be more readable what is the real duration of a silence
This commit is contained in:
Łukasz Mierzwa
2017-04-24 22:55:38 -07:00
parent 22f35f9f31
commit 4ba54f5573
4 changed files with 195 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
assets/static/base.css
View File

@@ -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;
}

71
assets/static/ui.js
View File

@@ -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();

123
assets/templates/silence.html
View File

@@ -32,38 +32,107 @@
<hr class="separator">
<div class="row">
<div class="col-sm-6">
<label class="control-label">Starts at</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input type="datetime"
class="form-control datetime-picker"
id="startsAt"
value="<%= moment().format("YYYY-MM-DD HH:mm:ss") %>"
name="startsAt"
required>
<div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">
<a href="#startsAtTab" aria-controls="startsAtTab" role="tab" data-toggle="tab">
Starts <span id="silence-start-description"></span>
</a>
</li>
<li role="presentation">
<a href="#endsAtTab" aria-controls="endsAtTab" role="tab" data-toggle="tab">
Ends <span id="silence-end-description"></span>
</a>
</li>
<li role="presentation" class="active">
<a href="#duration" aria-controls="duration" role="tab" data-toggle="tab">
Duration
</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade" id="startsAtTab">
<div id="startsAt" class="datetime-picker"></div>
</div>
</div>
<div class="col-sm-6">
<label class="control-label">Ends at</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input type="datetime"
class="form-control datetime-picker"
id="endsAt"
value="<%= moment().add(1, 'hours').format("YYYY-MM-DD HH:mm:ss") %>"
name="endsAt"
required>
<div role="tabpanel" class="tab-pane fade" id="endsAtTab">
<div id="endsAt" class="datetime-picker"></div>
</div>
<div role="tabpanel" class="tab-pane active fade in" id="duration">
<table class="table-condensed silence-duration-table">
<tbody>
<tr>
<td>
<a href="#" class="btn silence-duration-btn" data-duration-action="increment" data-duration-unit="days" data-duration-step="1">
<i class="fa fa-chevron-up"></i>
</a>
</td>
<td></td>
<td class="silence-separator"></td>
<td>
<a href="#" class="btn silence-duration-btn" data-duration-action="increment" data-duration-unit="hours" data-duration-step="1">
<i class="fa fa-chevron-up"></i>
</a>
</td>
<td></td>
<td class="silence-separator"></td>
<td>
<a href="#" class="btn silence-duration-btn" data-duration-action="increment" data-duration-unit="minutes" data-duration-step="5">
<i class="fa fa-chevron-up"></i>
</a>
</td>
<td></td>
</tr>
<tr>
<td>
<div id="silence-duration-days" class="text-center silence-duration-text">0</div>
</td>
<td class="silence-duration-label">
<span class="text-center text-muted">days</span>
</td>
<td class="silence-separator"></td>
<td>
<div id="silence-duration-hours" class="text-center silence-duration-text">0</div>
</td>
<td class="silence-duration-label">
<span class="text-center text-muted">hours</span>
</td>
<td class="silence-separator"></td>
<td>
<div id="silence-duration-minutes" class="text-center silence-duration-text">0</div>
</td>
<td class="silence-duration-label">
<span class="text-center text-muted">minutes</span>
</td>
</tr>
<tr>
<td>
<a href="#" class="btn silence-duration-btn" data-duration-action="decrement" data-duration-unit="days" data-duration-step="1">
<i class="fa fa-chevron-down"></i>
</a>
</td>
<td></td>
<td class="silence-separator"></td>
<td>
<a href="#" class="btn silence-duration-btn" data-duration-action="decrement" data-duration-unit="hours" data-duration-step="1">
<i class="fa fa-chevron-down"></i>
</a>
</td>
<td></td>
<td class="silence-separator"></td>
<td>
<a href="#" class="btn silence-duration-btn" data-duration-action="decrement" data-duration-unit="minutes" data-duration-step="5">
<i class="fa fa-chevron-down"></i>
</a>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<hr class="separator">
<hr class="separator no-margin-top">
<div class="form-group">
<div class="input-group">

6
bindata_assetfs.go
View File

File diff suppressed because one or more lines are too long