13 Replies Latest reply on Feb 14, 2020 11:04 AM by jm_sysadmin

    Basic HTML and CSS in Alerts

    KMSigma

      I realized that I've never posted this anywhere and I really should have done so.

       

      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: navy;
          text-align: left;
          font-weight: bold;
          vertical-align: center;
      }
      .alert_description {
          font-family: calibri;
          font-size: 14pt;
          color: gray;
          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;
      }
      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: #04c9d7;
          background-color: #eeeeee;
          text-align: left;
          vertical-align: middle;
      }
      }
      </style>
      </head>
      <body>
      <table cellspacing="0" cellpadding="1" width="792" border="0">
        <tr>
          <td><table cellspacing="0" cellpadding="0" width="792" border="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}.  Temp files and extraneous logs have already been removed.</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 cellspacing="0" cellpadding="1" width="792" border="1" bordercolor="#003366">
              <tr>
                <td><table cellspacing="0" cellpadding="3" width="100%" border="0">
                    <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 Details: ${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.

       

      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 <> 'TRUE'

       

      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