In the cron expression dialog, show a human-friendly version of the expression

CHANGELOG.md

@@ -8,6 +8,7 @@ All notable changes to this project will be documented in this file.
 - Add "Get a list of checks's logged pings" API call (#371)
 - The /api/v1/checks/ endpoint now accepts either UUID or `unique_key` (#370)
 - Added /api/v1/checks/uuid/flips/ endpoint (#349)
+- In the cron expression dialog, show a human-friendly version of the expression
 
 
 ### Bug Fixes

hc/front/tests/test_cron_preview.py

@@ -10,6 +10,7 @@ class CronPreviewTestCase(BaseTestCase):
         payload = {"schedule": "* * * * *", "tz": "UTC"}
         r = self.client.post("/checks/cron_preview/", payload)
         self.assertContains(r, "cron-preview-title", status_code=200)
+        self.assertContains(r, "“Every minute”")
 
     def test_it_rejects_invalid_cron_expression(self):
         samples = ["", "*", "100 100 100 100 100", "* * * * * *", "1,2 3,* * * *"]

hc/front/views.py

@@ -4,6 +4,7 @@ import os
 from secrets import token_urlsafe
 from urllib.parse import urlencode
 
+from cron_descriptor import ExpressionDescriptor
 from croniter import croniter
 from django.conf import settings
 from django.contrib import messages
@@ -408,6 +409,8 @@ def cron_preview(request):
         it = croniter(schedule, now_local)
         for i in range(0, 6):
             ctx["dates"].append(it.get_next(datetime))
+
+        ctx["desc"] = str(ExpressionDescriptor(schedule, use_24hour_time_format=True))
     except UnknownTimeZoneError:
         ctx["bad_tz"] = True
     except:

requirements.txt

@@ -1,3 +1,4 @@
+cron-descriptor==1.2.24
 croniter==0.3.31
 Django==3.0.7
 django-compressor==2.4

static/css/my_checks.css

@@ -87,9 +87,19 @@
     width: 300px;
 }
 
+#cron-description {
+    text-align: center;
+    font-weight: bold;
+    font-style: italic;
+    font-size: 18px;
+    color: #FFF;
+    color: #333;
+    padding: 16px 8px 0px 8px;
+}
+
 #cron-preview {
     background: #f8f8f8;
-    height: 256px;
+    min-height: 298px;
 }
 
 #cron-preview p {
@@ -103,6 +113,10 @@
     font-size: small;
 }
 
+#cron-preview-table {
+    margin: 0;
+}
+
 #cron-preview-table tr td:nth-child(1) {
     width: 120px;
 }

templates/front/cron_preview.html

@@ -9,6 +9,7 @@
 {% elif bad_tz %}
 <p id="invalid-arguments">Invalid timezone</p>
 {% else %}
+{% if desc %}<div id="cron-description">“{{ desc }}”</div>{% endif %}
 <table id="cron-preview-table" class="table">
     <tr><th id="cron-preview-title" colspan="3">Expected Ping Dates</th></tr>
     {% for d in dates %}