github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-09 03:36:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #75 from cloudflare/silence-ui-rework

Browse Source 
Default to duration only UI controls
This commit is contained in:
Łukasz Mierzwa
2017-04-25 09:34:19 -07:00
committed by GitHub
parent 22f35f9f31 4ba54f5573
commit b261e853a5
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