Make grace time editable when job is created (#953)

Fixes: #945

hc/api/migrations/0102_alter_check_kind.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.0.1 on 2024-02-06 00:56
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('api', '0101_alter_channel_kind'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='check',
+            name='kind',
+            field=models.CharField(choices=[('simple', 'Simple'), ('cron', 'Cron'), ('oncalendar', 'OnCalendar')], default='simple', max_length=10),
+        ),
+    ]

hc/front/forms.py

@@ -140,13 +140,19 @@ class TimeoutForm(forms.Form):
 class CronForm(forms.Form):
     schedule = forms.CharField(max_length=100, validators=[CronValidator()])
     tz = forms.CharField(max_length=36, validators=[TimezoneValidator()])
-    grace = forms.IntegerField(min_value=1, max_value=43200)
+    grace = forms.IntegerField(min_value=60, max_value=31536000)
+
+    def clean_grace(self) -> td:
+        return td(seconds=self.cleaned_data["grace"])
 
 
 class OnCalendarForm(forms.Form):
     schedule = forms.CharField(max_length=100, validators=[OnCalendarValidator()])
     tz = forms.CharField(max_length=36, validators=[TimezoneValidator()])
-    grace = forms.IntegerField(min_value=1, max_value=43200)
+    grace = forms.IntegerField(min_value=60, max_value=31536000)
+
+    def clean_grace(self) -> td:
+        return td(seconds=self.cleaned_data["grace"])
 
 
 class AddOpsgenieForm(forms.Form):

hc/front/views.py

@@ -207,7 +207,6 @@ def _get_referer_qs(request: HttpRequest) -> str:
         return "?" + parsed.query
     return ""
 
-
 @login_required
 def checks(request: AuthenticatedHttpRequest, code: UUID) -> HttpResponse:
     _refresh_last_active_date(request.profile)
@@ -585,7 +584,7 @@ def update_timeout(request: AuthenticatedHttpRequest, code: UUID) -> HttpRespons
         check.kind = "cron"
         check.schedule = cron_form.cleaned_data["schedule"]
         check.tz = cron_form.cleaned_data["tz"]
-        check.grace = td(minutes=cron_form.cleaned_data["grace"])
+        check.grace = cron_form.cleaned_data["grace"]
     elif kind == "oncalendar":
         oncalendar_form = forms.OnCalendarForm(request.POST)
         if not oncalendar_form.is_valid():
@@ -594,7 +593,7 @@ def update_timeout(request: AuthenticatedHttpRequest, code: UUID) -> HttpRespons
         check.kind = "oncalendar"
         check.schedule = oncalendar_form.cleaned_data["schedule"]
         check.tz = oncalendar_form.cleaned_data["tz"]
-        check.grace = td(minutes=oncalendar_form.cleaned_data["grace"])
+        check.grace = oncalendar_form.cleaned_data["grace"]
 
     check.alert_after = check.going_down_after()
     if check.status == "up":

static/css/update_timeout_modal.css

@@ -167,3 +167,11 @@
 #oncalendar-preview tr.from-now td {
     font-size: small;
 }
+
+.select-group {
+    display: flex;
+}
+
+.select-group select { 
+    border-left: 0;
+} 

static/js/update-timeout-modal.js

@@ -4,6 +4,11 @@ $(function () {
     var periodUnit = document.getElementById("period-unit");
     var grace = document.getElementById("grace-value");
     var graceUnit = document.getElementById("grace-unit");
+    var graceCron = document.getElementById("update-timeout-grace-cron");
+    var graceCronUnit = document.getElementById("update-timeout-grace-cron-unit");
+    var graceOncalendar = document.getElementById("update-timeout-grace-oncalendar");
+    var graceOncalendarUnit = document.getElementById("update-timeout-grace-oncalendar-unit");
+
 
     $(".rw .timeout-grace").click(function() {
         var code = $(this).closest("tr.checks-row").attr("id");
@@ -36,9 +41,9 @@ $(function () {
         $("#cron-preview").html("<p>Updating...</p>");
         $("#schedule").val(this.dataset.kind == "cron" ? this.dataset.schedule: "* * * * *");
         $("#tz")[0].selectize.setValue(this.dataset.tz, true);
-
+        graceCron.value = parsed.value;
-        var minutes = parseInt(this.dataset.grace / 60);
+        graceCronUnit.value = parsed.unit;
-        $("#update-timeout-grace-cron").val(minutes);
+        $("#update-cron-grace").val(this.dataset.grace);
         updateCronPreview();
 
         // OnCalendar
@@ -46,8 +51,9 @@ $(function () {
         $("#oncalendar-preview").html("<p>Updating...</p>");
         $("#schedule-oncalendar").val(this.dataset.kind == "oncalendar" ? this.dataset.schedule: "*-*-* *:*:*");
         $("#tz-oncalendar")[0].selectize.setValue(this.dataset.tz, true);
-        var minutes = parseInt(this.dataset.grace / 60);
+        graceOncalendar.value = parsed.value
-        $("#update-timeout-grace-oncalendar").val(minutes);
+        graceOncalendarUnit.value = parsed.unit
+        $("#update-oncalendar-grace").val(this.dataset.grace);
         updateOnCalendarPreview();
 
         showPanel(this.dataset.kind);
@@ -235,6 +241,24 @@ $(function () {
         });
     }
 
+    $("#update-timeout-modal .update-timeout-grace-cron-input").on("keyup change", function() {
+        var secs = Math.round(graceCron.value * graceCronUnit.value);
+        graceCron.setCustomValidity(secs <= 31536000 ? "" : "Must not exceed 365 days");
+
+        if (secs >= 60) {
+            $("#update-cron-grace").val(secs);
+        }
+    });
+
+    $("#update-timeout-modal .update-timeout-grace-oncalendar-input").on("keyup change", function() {
+        var secs = Math.round(graceOncalendar.value * graceOncalendarUnit.value);
+        graceOncalendar.setCustomValidity(secs <= 31536000 ? "" : "Must not exceed 365 days");
+
+        if (secs >= 60) {
+            $("#update-oncalendar-grace").val(secs);
+        }
+    });
+
     // Wire up events for Timeout/Cron forms
     $(".kind-simple").click(() => showPanel("simple"));
     $(".kind-cron").click(() => showPanel("cron"));

templates/front/update_timeout_modal.html

@@ -66,6 +66,7 @@
             <form id="update-cron-form" method="post">
                 {% csrf_token %}
                 <input type="hidden" name="kind" value="cron" />
+                <input type="hidden" name="grace" id="update-cron-grace"/>
                 <div class="modal-body">
                     <div class="row">
                         <div class="col-md-4">
@@ -93,18 +94,22 @@
                         </div>
                         <div class="col-md-4">
                             <div class="form-group">
-                                <label for="update-timeout-grace-cron">Grace Time</label>
+                                <label for="update-timeout-grace-cron">Grace Time</label>   
-                                <div class="input-group">
+                                <div class="input-group select-group">
                                     <input
                                         type="number"
                                         min="1"
-                                        max="43200"
+                                        class="form-control update-timeout-grace-cron-input"
-                                        class="form-control"
                                         id="update-timeout-grace-cron"
-                                        name="grace">
+                                        >
-                                    <div class="input-group-addon">minutes</div>
+
+                                        <select id="update-timeout-grace-cron-unit" class="form-control update-timeout-grace-cron-input">
+                                            <option value="60">minutes</option>
+                                            <option value="3600">hours</option>
+                                            <option value="86400">days</option>
+                                        </select>
                                 </div>
-                            </div>
+                            </div>     
                         </div>
                     </div>
                     <div class="row">
@@ -131,6 +136,7 @@
             <form id="update-oncalendar-form" method="post">
                 {% csrf_token %}
                 <input type="hidden" name="kind" value="oncalendar" />
+                <input type="hidden" name="grace" id="update-oncalendar-grace"/>
                 <div class="modal-body">
                     <div class="row">
                         <div id="oncalendar-controls" class="col-md-6">
@@ -155,16 +161,19 @@
                             </div>
                             <div class="form-group">
                                 <label for="update-timeout-grace-oncalendar">Grace Time</label>
-                                <div class="input-group">
+                                <div class="input-group select-group">
                                     <input
-                                        id="update-timeout-grace-oncalendar"
                                         type="number"
                                         min="1"
-                                        max="43200"
+                                        class="form-control update-timeout-grace-oncalendar-input"
-                                        class="form-control"
+                                        id="update-timeout-grace-oncalendar"
-                                        name="grace">
+                                        >
-                                    <div class="input-group-addon">minutes</div>
+                                        <select id="update-timeout-grace-oncalendar-unit" class="form-control update-timeout-grace-oncalendar-input">
-                                </div>
+                                            <option value="60">minutes</option>
+                                            <option value="3600">hours</option>
+                                            <option value="86400">days</option>
+                                        </select>
+                                    </div>
                             </div>
                         </div>
                         <div id="oncalendar-preview" class="col-md-6"></div>