Basic HTML and CSS in Alerts

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.

KMSigma_0-1593635285362.png

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

Parents
  • I pimped my email-alerts but for an interface alert i don't find how to show the statusled of the interface

    I have following code

    <!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: #f9e31c;
                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_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="https://slw-server/Orion/images/StatusIcons/${N=SwisEntity;M=Node.StatusLED}" width="16" height="16" />
                                        </td>
                                        <td>
                                            <a href="https://slw-server/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>Interface</th>
                                        <td>
                                            <img src="https://slw-server/NetPerfMon/images/StatusIcons/${I=SwisEntity;M=Node.StatusLED}" width="16" height="16" />
                                        </td>
                                        <td>
                                            <a href="https://slw-server/Orion/Interfaces/InterfaceDetails.aspx?NetObject=I:${N=SwisEntity;M=InterfaceID}">${N=SwisEntity;M=Caption}</a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td class="alert_details">
                    Alert Description: ${N=Alerting;M=AlertDescription}
                </td>
            </tr>
        </table>
    </body>
    
    </html>

    Anyone any idea why the statusled of the interface doesn't appear ?

  • The relative URL for status LED if '/NetPerfMon/images/<LED Name Here>'.

  • <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="https://slw-server.fluviusnet.be/Orion/images/StatusIcons/${N=SwisEntity;M=Node.StatusLED}" width="16" height="16" />
                                        </td>
                                        <td>
                                            <a href="https://slw-server.fluviusnet.be/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>Interface</th>
                                        <td>
                                            <img src="https://slw-server.fluviusnet.be/Orion/images/StatusIcons/${I=SwisEntity;M=Node.StatusLED}" width="16" height="16" />
                                        </td>
                                        <td>
                                            <a href="https://slw-server.fluviusnet.be/Orion/Interfaces/InterfaceDetails.aspx?NetObject=I:${N=SwisEntity;M=InterfaceID}">${N=SwisEntity;M=Caption}</a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>

  • When i change the relative path the status icon of the node is not working anymore.

    But stil no status icon for the interface

  • This is how I find the icon paths (because I'm lazy):

    This yielded /NetPerfMon/images/ for my relative URL.

    If this is an email alert, then you can't use relative URLs because the email program won't be able to process them.  Outlook can be especially stingy about thinks like this.  I've done a few things as workarounds in the past, but recently posted something that might change my overall recommendations moving forward with regards to icons.

Reply
  • This is how I find the icon paths (because I'm lazy):

    This yielded /NetPerfMon/images/ for my relative URL.

    If this is an email alert, then you can't use relative URLs because the email program won't be able to process them.  Outlook can be especially stingy about thinks like this.  I've done a few things as workarounds in the past, but recently posted something that might change my overall recommendations moving forward with regards to icons.

Children
No Data