Style tweaks in timeout dialog, fix trigger.

hc/api/management/commands/ensuretriggers.py

@@ -22,6 +22,6 @@ $update_alert_after$ LANGUAGE plpgsql;
 DROP TRIGGER IF EXISTS update_alert_after ON api_check;
 
 CREATE TRIGGER update_alert_after
-BEFORE INSERT OR UPDATE OF last_ping, timeout  ON api_check
+BEFORE INSERT OR UPDATE OF last_ping, timeout, grace  ON api_check
 FOR EACH ROW EXECUTE PROCEDURE update_alert_after();
         """)

static/css/style.css

@@ -175,6 +175,10 @@ tr:hover .check-menu {
 }
 
 
+#update-timeout-modal .modal-body {
+    padding-top: 40px;
+}
+
 .update-timeout-info {
     line-height: 22px;
 }
@@ -205,9 +209,28 @@ tr:hover .check-menu {
 }
 
 #grace-slider {
-    margin: 20px 50px 60px 50px;
+    margin: 20px 50px 110px 50px;
 }
 
 #grace-slider.noUi-connect {
   background: #f0ad4e;
 }
+
+#frequency-slider .noUi-value, #grace-slider .noUi-value {
+    width: 60px;
+    margin-left: -30px;
+}
+
+.update-timeout-terms {
+    color: #999;
+}
+
+.update-timeout-terms p {
+    margin: 0;
+}
+
+
+.update-timeout-terms span {
+    font-weight: bold;
+}
+

templates/front/my_checks.html

@@ -114,9 +114,11 @@
             <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal">&times;</span></button>
-                    <h4 class="update-timeout-title">Update Name</h4>
-                </div>                <div class="modal-body">
-                    <p>Name:</p>
+                    <h4 class="update-timeout-title">Name</h4>
+                </div>
+                <div class="modal-body">
+                    <p>Give this check a human-friendly name, so you can
+                    easily recognize it later:</p>
                     <input
                         id="update-name-input"
                         name="name"
@@ -141,10 +143,6 @@
             <input type="hidden" name="timeout" id="update-timeout-timeout" />
             <input type="hidden" name="grace" id="update-timeout-grace" />
             <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal">&times;</span></button>
-                    <h4 class="update-timeout-title">Update Frequency and Grace Period</h4>
-                </div>
                 <div class="modal-body">
                     <div class="update-timeout-info text-center">
                         <span
@@ -176,6 +174,18 @@
                     </div>
 
                     <div id="grace-slider"></div>
+
+                    <div class="update-timeout-terms">
+                        <p>
+                            <span>Frequency</span>
+                            Expected time between pings.
+                        </p>
+                        <p>
+                            <span>Grace Period</span>
+                            When a check is late, how much time to wait until alert is sent.
+                        </p>
+                    </div>
+
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>