You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

283 lines
10 KiB

6 years ago
6 years ago
  1. {% extends "base.html" %}
  2. {% load compress humanize static hc_extras %}
  3. {% block title %}{{ check|down_title }}{% endblock %}
  4. {% block content %}
  5. <div class="row">
  6. {% if is_new %}
  7. <div class="col-sm-12">
  8. <p id="new-check-alert" class="alert alert-success">
  9. <strong>Your new check is ready!</strong>
  10. You can now
  11. <a data-target="edit-name" href="#" >give it a name</a>
  12. or
  13. <a data-target="edit-timeout" href="#" >set its schedule</a>.
  14. </p>
  15. </div>
  16. {% endif %}
  17. {% if messages %}
  18. <div class="col-sm-12">
  19. {% for message in messages %}
  20. <p class="alert alert-{{ message.tags }}">{{ message }}</p>
  21. {% endfor %}
  22. </div>
  23. {% endif %}
  24. <div id="details-head" class="col-sm-12">
  25. <h1>
  26. {{ check.name_then_code }}
  27. <small><a id="edit-name" href="#">(edit&hellip;)</a></small>
  28. </h1>
  29. <span class="label label-tag">{{ check.project }}</span>
  30. {% for tag in check.tags_list %}
  31. <span class="label label-tag">{{ tag }}</span>
  32. {% endfor %}
  33. </div>
  34. <div class="col-sm-5">
  35. <div class="details-block">
  36. <h2>Description</h2>
  37. {% if check.desc %}
  38. {{ check.desc|linebreaks|urlize }}
  39. <div class="text-right">
  40. <button id="edit-desc" class="btn btn-sm btn-default">
  41. Edit Description&hellip;
  42. </button>
  43. </div>
  44. {% else %}
  45. <small><a id="edit-desc" href="#">Add description&hellip;</a></small>
  46. {% endif %}
  47. </div>
  48. <div class="details-block">
  49. <h2>How To Ping</h2>
  50. <div>
  51. <p>Keep this check up by making HTTP requests to this URL:</p>
  52. <code>{{ check.url }}</code>
  53. <p>
  54. {% if check.subject %}
  55. Or by sending emails with "{{ check.subject }}"
  56. in the subject line to this address:
  57. {% else %}
  58. Or by sending emails to this address:
  59. {% endif %}
  60. </p>
  61. <code>{{ check.email }}</code>
  62. <p>You can also explicitly
  63. <a href="{% url 'hc-docs' %}#fail-event">
  64. signal a failure</a>
  65. and
  66. <a href="{% url 'hc-docs' %}#start-event">
  67. measure job execution time</a>.
  68. </p>
  69. </div>
  70. <div class="text-right">
  71. <button
  72. data-toggle="modal"
  73. data-target="#email-settings-modal"
  74. class="btn btn-sm btn-default">Email Settings&hellip;</button>
  75. <button
  76. data-toggle="modal"
  77. data-target="#show-usage-modal"
  78. class="btn btn-sm btn-default">Usage Examples</button>
  79. <button
  80. data-label="Copy URL"
  81. data-clipboard-text="{{ check.url }}"
  82. class="btn btn-sm btn-default copy-btn">Copy URL</button>
  83. </div>
  84. </div>
  85. <div class="details-block">
  86. <h2>Current Status</h2>
  87. <table>
  88. <tr>
  89. <td>
  90. <span id="log-status-icon" class="status icon-{{ check.get_status }}"></span>
  91. </td>
  92. <td >
  93. <p id="log-status-text">{% include "front/log_status_text.html" %}</p>
  94. </td>
  95. </tr>
  96. <tr>
  97. <td></td>
  98. <td id="downtimes">
  99. {% include "front/details_downtimes.html" %}
  100. </td>
  101. </tr>
  102. </table>
  103. <div class="text-right">
  104. <form action="{% url 'hc-pause' check.code %}" method="post">
  105. {% csrf_token %}
  106. <input type="submit" class="btn btn-sm btn-default" value="Pause" />
  107. </form>
  108. <button
  109. id="ping-now"
  110. data-url="{{ check.url }}"
  111. class="btn btn-sm btn-default">Ping Now!</button>
  112. </div>
  113. </div>
  114. <div class="details-block">
  115. <h2>Schedule</h2>
  116. <table id="details-schedule">
  117. <tr>
  118. {% if check.kind == "simple" %}
  119. <th>Period</th>
  120. <td>
  121. <span class="value">{{ check.timeout|hc_duration }}</span>
  122. <div class="subtitle">
  123. (Expected time between pings)
  124. </div>
  125. </td>
  126. {% elif check.kind == "cron" %}
  127. <th>Cron Expression</th>
  128. <td>
  129. <span class="value">{{ check.schedule }}</span>
  130. </td>
  131. {% endif %}
  132. </tr>
  133. {% if check.kind == "cron" %}
  134. <tr>
  135. <th>Time Zone</th>
  136. <td>
  137. <span class="value">{{ check.tz }}</span>
  138. </td>
  139. </tr>
  140. {% endif %}
  141. <tr>
  142. <th>Grace Time</th>
  143. <td>
  144. <span class="value">{{ check.grace|hc_duration }}</span>
  145. <div class="subtitle">
  146. (When a check is late, how long to wait until an alert is sent)
  147. </div>
  148. </td>
  149. </tr>
  150. </table>
  151. <div class="text-right">
  152. <button
  153. id="edit-timeout"
  154. class="btn btn-sm btn-default timeout-grace"
  155. data-code="{{ check.code }}"
  156. data-status-url="{% url 'hc-status-single' check.code %}"
  157. data-kind="{{ check.kind }}"
  158. data-timeout="{{ check.timeout.total_seconds }}"
  159. data-grace="{{ check.grace.total_seconds }}"
  160. data-schedule="{{ check.schedule }}"
  161. data-tz="{{ check.tz }}">
  162. Change Schedule&hellip;</button>
  163. </div>
  164. </div>
  165. <div class="details-block">
  166. <h2>Notification Methods</h2>
  167. <table id="details-integrations" class="table">
  168. {% for channel in channels %}
  169. <tr data-url="{% url 'hc-switch-channel' check.code channel.code %}" {% if channel in check.channel_set.all %}class="on"{% endif %}>
  170. <th>
  171. <span class="label">
  172. {% if channel in check.channel_set.all %}ON{% else %}OFF{% endif %}
  173. </span>
  174. </th>
  175. <td>
  176. <span class="icon-{{ channel.kind }}"></span>
  177. {{ channel }}
  178. </td>
  179. </tr>
  180. {% endfor %}
  181. </table>
  182. </div>
  183. <div class="details-block">
  184. <h2>Danger Zone</h2>
  185. <p>Transfer to a different project, or permanently remove this check.</p>
  186. <div class="text-right">
  187. <button
  188. id="transfer-btn"
  189. data-toggle="modal"
  190. data-target="#transfer-modal"
  191. data-url="{% url 'hc-transfer' check.code %}"
  192. class="btn btn-sm btn-default">Transfer to Another Project&hellip;</button>
  193. <button
  194. id="details-remove-check"
  195. data-toggle="modal"
  196. data-target="#remove-check-modal"
  197. class="btn btn-sm btn-default">Remove</button>
  198. </div>
  199. </div>
  200. </div>
  201. <div id="events" class="col-sm-7">
  202. <h2>
  203. Log
  204. <small>Click on individual items for details</small>
  205. <div id="format-switcher" class="btn-group pull-right" data-toggle="buttons">
  206. <label class="btn btn-default btn-xs" data-format="UTC">
  207. <input type="radio" name="date-format">
  208. UTC
  209. </label>
  210. {% if check.kind == "cron" and check.tz != "UTC" %}
  211. <label class="btn btn-default btn-xs" data-format="{{ check.tz }}">
  212. <input type="radio" name="date-format">
  213. {{ check.tz }}
  214. </label>
  215. {% endif %}
  216. <label class="btn btn-default btn-xs active" data-format="local">
  217. <input type="radio" name="date-format">
  218. Browser's time zone
  219. </label>
  220. </div>
  221. </h2>
  222. <div id="log-container"></div>
  223. </div>
  224. </div>
  225. <div id="ping-details-modal" class="modal">
  226. <div class="modal-dialog">
  227. <div class="modal-content">
  228. <div id="ping-details-body">Loading</div>
  229. <div class="modal-footer">
  230. <button type="button" class="btn btn-default" data-dismiss="modal">Got It!</button>
  231. </div>
  232. </div>
  233. </div>
  234. </div>
  235. <div id="transfer-modal" class="modal">
  236. </div>
  237. {% include "front/update_name_modal.html" %}
  238. {% include "front/update_timeout_modal.html" %}
  239. {% include "front/show_usage_modal.html" %}
  240. {% include "front/remove_check_modal.html" %}
  241. {% include "front/email_settings_modal.html" %}
  242. {% endblock %}
  243. {% block scripts %}
  244. {% compress js %}
  245. <script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
  246. <script src="{% static 'js/bootstrap.min.js' %}"></script>
  247. <script src="{% static 'js/clipboard.min.js' %}"></script>
  248. <script src="{% static 'js/bootstrap-select.min.js' %}"></script>
  249. <script src="{% static 'js/nouislider.min.js' %}"></script>
  250. <script src="{% static 'js/snippet-copy.js' %}"></script>
  251. <script src="{% static 'js/moment.min.js' %}"></script>
  252. <script src="{% static 'js/moment-timezone-with-data-10-year-range.min.js' %}"></script>
  253. <script src="{% static 'js/update-timeout-modal.js' %}"></script>
  254. <script src="{% static 'js/adaptive-setinterval.js' %}"></script>
  255. <script src="{% static 'js/details.js' %}"></script>
  256. {% endcompress %}
  257. {% endblock %}