forked from GithubBackups/healthchecks
e66725e23f
Not all email clients are formatting the `ping.body` contents uniformly. Even using different applications from the same email provider results in a different display of the `ping.body` contents. There are two basic issues: * Not all email clients are honoring the fixed-width font that should be used inside `<pre>` tags. Using fixed-width font is listed in the definition on https://www.w3schools.com/tags/tag_pre.asp * Not all email clients are displaying the text with a 1em line height. This was a recent change to the healthchecks WebUI in 9fd9c8e4efd0c87c015215ae56eada88a7d07b6b but is not part of the definition of the `<pre>` tag. I'd like to add this to the emails to make Healthchecks more uniform between the website and the email notification. Gmail Webmail: - [x] Is using fixed-width font - [ ] Line height is set by the webmail client to 18px Gmail Android App: - [ ] Text is not fixed-width - [ ] Line height has extra padding ProtonMail Webmail: - [x] Is using fixed-width font - [x] Line height is correct ProtonMail Android: - [ ] Text is not fixed width - [ ] Line height has extra padding The testing I performed is not extensive, but it does show how multiple clients are displaying the contents differently. To make the display of the `ping.body` more uniform I'd like to add a bit of formatting information to the `<pre>` tag.
137 lines
4.7 KiB
HTML
137 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
{% load hc_extras humanize %}
|
|
|
|
<p>
|
|
"{{ check.name_then_code }}" is {{ check.status|upper }}.
|
|
<a href="{{ check.cloaked_url }}">View on {% site_name %}…</a>
|
|
</p>
|
|
|
|
|
|
{% if check.desc %}
|
|
<p>
|
|
<b>Description</b><br>
|
|
{{ check.desc|linebreaksbr }}
|
|
</p>
|
|
{% endif %}
|
|
|
|
{% cycle '' '</tr><tr>' as trtr silent %}
|
|
<table>
|
|
<tr>
|
|
{% if check.project.name %}
|
|
<td style="padding-right: 32px; padding-bottom: 8px; vertical-align: top;">
|
|
<b>Project</b><br>
|
|
{{ check.project.name }}
|
|
</td>
|
|
{{ trtr|safe }} {% cycle trtr %}
|
|
{% endif %}
|
|
|
|
{% if check.tags_list %}
|
|
<td style="padding-right: 32px; padding-bottom: 8px; vertical-align: top;">
|
|
<b>Tags</b><br>
|
|
{% for tag in check.tags_list %}
|
|
<code style="background-color: #eeeeee; padding: 2px 4px; border-radius: 2px;">{{ tag }}</code>
|
|
{% endfor %}
|
|
</td>
|
|
{{ trtr|safe }} {% cycle trtr %}
|
|
{% endif %}
|
|
|
|
{% if check.kind == "simple" %}
|
|
<td style="padding-right: 32px; padding-bottom: 8px; vertical-align: top;">
|
|
<b>Period</b><br>
|
|
{{ check.timeout|hc_duration }}
|
|
</td>
|
|
{{ trtr|safe }} {% cycle trtr %}
|
|
{% endif %}
|
|
|
|
{% if check.kind == "cron" %}
|
|
<td style="padding-right: 32px; padding-bottom: 8px; vertical-align: top;">
|
|
<b>Schedule</b><br>
|
|
<code>{{ check.schedule }}</code>
|
|
</td>
|
|
{{ trtr|safe }} {% cycle trtr %}
|
|
{% endif %}
|
|
|
|
<td style="padding-right: 32px; padding-bottom: 8px; vertical-align: top;">
|
|
<b>Total Pings</b><br>
|
|
{{ check.n_pings }}
|
|
{% if check.created %}(since {{ check.created|date:'M j, Y' }}){% endif %}
|
|
</td>
|
|
</tr>
|
|
|
|
{% if ping %}
|
|
<tr>
|
|
<td style="padding-right: 32px; padding-bottom: 8px; vertical-align: top;">
|
|
<b>Last Ping</b><br>
|
|
{{ ping.created|naturaltime }}{% if ping.remote_addr %}, from {{ ping.remote_addr }}{% endif %}
|
|
</td>
|
|
<td style="padding-right: 32px; padding-bottom: 8px; vertical-align: top;">
|
|
<b>Last Ping Type</b><br>
|
|
{% if ping.exitstatus > 0 %}
|
|
<span style="background-color: #f2dede; color: #333333; padding-left: 4px; padding-right: 4px; border-radius: 2px;">
|
|
Exit status {{ ping.exitstatus }}
|
|
</span>
|
|
{% elif ping.exitstatus == 0 %}
|
|
<span style="background-color: #dff0d8; color: #333333; padding-left: 4px; padding-right: 4px; border-radius: 2px;">
|
|
Exit status 0
|
|
</span>
|
|
{% elif ping.kind == "fail" %}
|
|
<span style="background-color: #f2dede; color: #333333; padding-left: 4px; padding-right: 4px; border-radius: 2px;">
|
|
Failure
|
|
</span>
|
|
{% elif ping.kind == "start" %}
|
|
<span style="background-color: #dff0d8; color: #333333; padding-left: 4px; padding-right: 4px; border-radius: 2px;">
|
|
Started
|
|
</span>
|
|
{% elif ping.kind == "ign" %}
|
|
<span style="background-color: #eeeeee; color: #333333; padding-left: 4px; padding-right: 4px; border-radius: 2px;">
|
|
Ignored
|
|
</span>
|
|
{% else %}
|
|
<span style="background-color: #dff0d8; color: #333333; padding-left: 4px; padding-right: 4px; border-radius: 2px;">
|
|
Success
|
|
</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
</table>
|
|
|
|
{% if ping and ping.body %}
|
|
<p><b>Last Ping Body</b></p>
|
|
<pre style="font-family: monospace; line-height: 1em;">{{ ping.body|slice:":10000"|linebreaksbr }}{% if ping.body|length > 10000 %} [truncated]{% endif %}</pre>
|
|
{% endif %}
|
|
|
|
{% if projects %}
|
|
<p><b>Projects Overview</b></p>
|
|
<table>
|
|
{% for project in projects %}
|
|
<tr>
|
|
<td style="padding-right: 32px; padding-bottom: 4px;">
|
|
<a href="{{ project.checks_url }}">{{ project }}</a>
|
|
</td>
|
|
<td style="padding-right: 32px; padding-bottom: 4px;">
|
|
{% with project.get_n_down as n_down %}
|
|
{% if n_down %}
|
|
<b>{{ n_down }} check{{ n_down|pluralize }} down</b>
|
|
{% else %}
|
|
OK, all checks up
|
|
{% endif %}
|
|
{% endwith %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
{% endif %}
|
|
|
|
<p style="color: #666666">
|
|
—<br>
|
|
{% site_name %}<br>
|
|
<a href="{{ unsub_link }}" target="_blank" style="color: #666666; text-decoration: underline;">
|
|
{% if check.project.name %}
|
|
Unsubscribe from "{{ check.project.name }}" notifications
|
|
{% else %}
|
|
Unsubscribe
|
|
{% endif %}
|
|
</a>
|
|
</p>
|