I was building out the Sumo Logic integration and ran into an interesting issue. The results from Sumo Logic come out as an array of JSON objects and I needed a good way to display these in a readable fashion. These are the raw values from Sumo Logic:
{
"SearchName": "Cookies - Webhook",
"SearchDescription": "The cookies are coming!!",
"SearchQuery": "cookies*",
"SearchQueryUrl": "https:\/\/service.us2.sumologic.com\/ui\/index.html#section\/search\/MTljAvmwMA970Cy6bC5Nt2FTCmCfKXIncjx33Ly37BxxH4rnlbQkkTLaAkbF3eTWfgyACUDA0BR7lbeP1Z3cx6ZmKwpC9fapAdf3jkxQMGRpnYbIU73l1Y4JwQwCFZC8",
"TimeRange": "2016-06-27 16:21:30 PDT - 2016-06-27 16:24:30 PDT",
"FireTime": "2016-06-27 16:25:17 PDT",
"AggregateResultsJson": "",
"RawResultsJson": "[{\"Message\":\"Jun 27 16:23:40 The cookies are on fire. Save the butter\",\"Time\":1467069820000,\"Host\":\"cookienix\",\"Category\":\"linux_apps_logs\",\"Name\":\"\/var\/log\/mysumo.log\",\"Collector\":\"cookienix\"},{\"Message\":\"Jun 27 16:23:37 The cookies are on fire. Save the butter\",\"Time\":1467069817000,\"Host\":\"cookienix\",\"Category\":\"linux_apps_logs\",\"Name\":\"\/var\/log\/mysumo.log\",\"Collector\":\"cookienix\"},{\"Message\":\"Jun 27 16:23:37 The cookies are on fire. Save the butter\",\"Time\":1467069817000,\"Host\":\"cookienix\",\"Category\":\"linux_apps_logs\",\"Name\":\"\/var\/log\/mysumo.log\",\"Collector\":\"cookienix\"}]",
"NumRawResults": "3"
}
As you can see, the RawResultsJSON has a string value that is an encoded array of JSON objects. If I pull that out and format it, this is the data:
[
{
"Message": "Jun 27 16:23:40 The cookies are on fire. Save the butter",
"Time": 1467069820000,
"Host": "cookienix",
"Category": "linux_apps_logs",
"Name": "/var/log/mysumo.log",
"Collector": "cookienix"
},
{
"Message": "Jun 27 16:23:37 The cookies are on fire. Save the butter",
"Time": 1467069817000,
"Host": "cookienix",
"Category": "linux_apps_logs",
"Name": "/var/log/mysumo.log",
"Collector": "cookienix"
},
{
"Message": "Jun 27 16:23:37 The cookies are on fire. Save the butter",
"Time": 1467069817000,
"Host": "cookienix",
"Category": "linux_apps_logs",
"Name": "/var/log/mysumo.log",
"Collector": "cookienix"
}
]
Great. Now how would I display that in an email? Well, since it is an array with several items, a table with rows and columns to match comes to mind - and I know I can use the Integration Builder to generate the HTML needed to display a table, then we can pass the raw HTML as a property!
After some tinkering and hair pulling, I put together this function:
function generateTable( array ) {
// Skeleton HTML table with three columns
var table = '<table>';
table += '<tr>';
table += '<th align="left">#</th>';
table += '<th align="left">Time</th>';
table += '<th align="left">Message</th>';
table += '</tr>';
table += '';
table += 'TABLEHERE'; // We'll generate the table and replace this value
table += '';
table += '</table>';
var str = '';
var i = 1;
// Loop through and build the table
for( var r in array ) {
str += '<tr>';
str += '<td align="left">' + i + '</td>';
str += '<td align="left">' + getDate( array[r].Time ) + '</td>';
str += '<td align="left">' + array[r].Message + '<br />' +
'Host: ' + array[r].Host + '<br />' +
'Name: ' + array[r].Name + '<br />' +
'Category: ' + array[r].Category +
'</td>';
str += '</tr>';
i++;
}
// Make the replacement
table = table.replace( /TABLEHERE/, str );
return table;
}
Great! So what's it look like?
Hey! Not bad. Except the centeredness of the Message column makes it rather hard to read. I tinkered with it and Google tells me adding align="left" to the td tag should left-align these columns, which you can see in the function above. When I inspected the source of the email sent out, I found the align attribute was removed from my tags! How rude! I played with adding a class, id and various other attributes but to no avail. Nothing I could do would get my columns to line up like I wanted them.
Fortunately, our very own Sandra came up with this great piece of work that explains how to use colors in your emails based on an incoming property. The relevant part for us is the use of embedding a <style> tag in the html source. This is actually very powerful as it allows me to override the styling that is sent out from xMod.
So, I'll just use Sandra's trick, but instead of colors, I'll override the <td> styling. Like so:
<style> table td, th {
padding-right: 10px;
vertical-align: text-top;
text-align: left;
}
</style>
Now, when my email comes in, my log lines are aligned to the left!
This approach is not without its drawbacks. Since the class and id attributes are wiped out we don't have a whole lot of fine control of the formatting, so we have to override the entire <td> tag. Which means it's up to us to then determine the formatting. Also, this means we couldn't style table cells individually; they are all the same.
3 Comments