If there's one thing that I hear from customers is that people ignore alerts. What I've found in the past is that plain text alerts go unread, get automatically filed, or get deleted. But if you take a little time and play with basic HTML and CSS, your email alerts will get the attention they deserve.
I've talked frequently at SWUG about using HTML and CSS in alerts because they are pretty. This is my example that I talk about for an alert that triggers for disk volumes which have less than 1 GB free and less than 10% free. I could describe the whole thing, but the important part for this post is the HTML + CSS body of the message and the variables. Without further ado, here it is:
<!DOCTYPE html>
<html>
<head>
<title>
Orion Alert: ${N=Alerting;M=AlertName} for ${N=SwisEntity;M=Caption} on ${N=SwisEntity;M=Node.Caption}
</title>
<style type="text/css">
.alert_header {
font-family: calibri;
font-size: 16pt;
color: #292929;
text-align: left;
font-weight: bold;
vertical-align: center;
}
.alert_description {
font-family: calibri;
font-size: 14pt;
color: #444444;
text-align: left;
font-weight: bold;
vertical-align: center;
}
.alert_details {
font-family: calibri;
font-size: 10pt;
color: gray;
text-align: left;
font-weight: bold;
vertical-align: center;
}
.header_table {
border: none;
width: 100%;
}
.metrics_table {
border: 1px solid #04C9D7;
border-collapse: collapse;
width: 100%;
}
th {
font-family: calibri;
font-size: 12pt;
font-weight: bold;
color: white;
background-color: #f99d1c;
text-align: left;
vertical-align: middle;
}
td {
font-family: calibri;
font-size: 12pt;
font-weight: normal;
color: #B8D757;
background-color: #eeeeee;
text-align: left;
vertical-align: middle;
}
body {
background-color: #eeeeee; /* not quite white */
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="1" width="792px">
<tr>
<td>
<table class="header_table" cellspacing="0" cellpadding="0">
<tr>
<td class="alert_header">
${N=SwisEntity;M=Caption} on ${N=SwisEntity;M=Node.Caption} has less than 10% and 1GB free space.
</td>
</tr>
<tr>
<td class="alert_description">
There is less than 10% and 1GB free on ${N=SwisEntity;M=Caption} on ${N=SwisEntity;M=Node.Caption}.
<ol>
<li>Temporary files have already been deleted by an alert action</li>
<li>Web logs older than 14 days have already been deleted by an alert action</li>
</ol>
</td>
</tr>
<tr>
<td class="alert_details">
Alert Name: ${N=Alerting;M=AlertName} / Trigger Time: ${N=Alerting;M=AlertTriggerTime;F=DateTime}
</td>
</tr>
</table>
<table class="metrics_table" cellspacing="0" cellpadding="1" width="792">
<tr>
<td>
<table cellspacing="0" cellpadding="3" width="100%">
<tr>
<th>Node</th>
<td>
<img src="http://OrionServer/Orion/images/StatusIcons/${N=SwisEntity;M=Node.StatusLED}" alt="${N=SwisEntity;M=Node.StatusDescription}" width="16" height="16" />
</td>
<td>
<a href="http://OrionServer/Orion/NetPerfMon/NodeDetails.aspx?NetObject=N:${N=SwisEntity;M=NodeID}">${N=SwisEntity;M=Node.Caption} / ${N=SwisEntity;M=Node.IP_Address}</a>
</td>
</tr>
<tr>
<th>Volume</th>
<td>
<img src="http://OrionServer/NetPerfMon/images/Volumes/${N=SwisEntity;M=Icon}" alt="${N=SwisEntity;M=Caption}" width="16" height="16" />
</td>
<td>
<a href="http://OrionServer/Orion/NetPerfMon/VolumeDetails?NetObject=V:${N=SwisEntity;M=VolumeID}">${N=SwisEntity;M=Caption}</a>
</td>
</tr>
<tr>
<th>Volume Status</th>
<td>
<img src="http://OrionServer/Orion/images/StatusIcons/${N=SwisEntity;M=StatusIcon}" width="16" height="16" alt="${N=SwisEntity;M=Status}" />
</td>
<td>${N=SwisEntity;M=StatusDescription}</td>
</tr>
<tr>
<th>Free Space</th>
<td></td>
<td>
${N=SwisEntity;M=VolumeSpaceAvailable} of ${N=SwisEntity;M=VolumeSize} (${N=SwisEntity;M=VolumePercentAvailable} free)
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="alert_details">
Alert Description: ${N=Alerting;M=AlertDescription}
</td>
</tr>
<tr>
<td class="alert_details">
Acknowledge ${N=Alerting;M=AcknowledgeUrl}
</td>
</tr>
</table>
</body>
</html>
It's not the easiest thing to read, but the important parts are there. The CSS block at the top (lines 5-49) control the color, the font and the rest of the prettiness.
This is a rudimentary example, but it makes a pretty alert. In my experience "pretty" alerts get read while plain alerts get filed.
Please note that the above numbers are simulation numbers and wouldn't actually trigger the alert. (which is also why there is no Acknowledge URL displayed.
Also, if you are encountering extra lines showing up, then you can flip a switch in the database (required SQL access).
/************************************ Fix Alert Email New Line Replacement *************************************/ UPDATE [dbo].[WebSettings] SET SettingValue = 'FALSE' WHERE SettingName = 'Email_ReplaceNewLinesHtml' AND SettingValue <> 'FALSE'
This is a "fix," but you should totally upvote: EOL Conversion in HTML Alerts
SQL for EOL Conversions section was added by: Kevin M. Sparenberg
Updated to use proper CSS language for 'table' elements by: Kevin M. Sparenberg
