Sunday, June 29, 2014
Automation – Take Snapshot of live webpage periodically using PhantomJS
Requirement:-
I have developed a monitoring dashboard application which displays backlog trends of various application components, something like below. I want take snapshot of this live monitoring dashboard webpage every 30 minutes and send it as inline attachment to specific set of Email Ids.
Please visit the following link for the live demo.
http://anjuwedssrini.com/Demos/HighCharts-Demo/
Steps Involved:-
1] First download the phantomJS plugin from the following link, and extract it inside the desired folder.
https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.7-linux-x86_64.tar.bz2
2] Put the code inside the a Js file.
[thiru@localhost bin]$ cat observare.js
var page = require('webpage').create();
page.open('http://anjuwedssrini.com/Demos/HighCharts-Demo/’, function() {
page.viewportSize = { width:1200, height:768 };
window.setTimeout(function () {
page.render('/optionalphantom/bin/observare.jpg');
phantom.exit();
}, 1000);
});
3] Execute the JS code using phanomJS executable available inside extracted binary.
[thiru@localhost bin]$ /optional/phantom/bin/phantomjs observare.js
Now we done with the image generation, but how to attach the generated image as inline attachment ? Is it easy ?
How to send image as an inline attachment using sendmail?
Linux send mail command have some exceptional features to do all these stuff.
/usr/sbin/sendmail -t <<EOT
TO: industryvertical@gmal.com
FROM: Thirunavukkarasu.Muthusamy@gmail.com
SUBJECT: Observer – Dashboard Report
MIME-Version: 1.0
Content-Type: multipart/related;boundary="XYZ"--XYZ
Content-Type: text/html; charset=ISO-8859-15
Content-Transfer-Encoding: 7bit<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-15">
</head>
<body bgcolor="#ffffff" text="#000000">
<img src="cid:part1.0609040" alt="">
</body>
</html>--XYZ
Content-Type: image/jpeg;name="observare.jpg"
Content-Transfer-Encoding: base64
Content-ID: <part1.0609040>
Content-Disposition: inline; filename="observare.jpg"$(base64 /optional/images/observare.jpg)
--XYZ--
EOT
Now we done with the image generation using phantomJs and image encoding, inline attachment using sendemail utility. By putting it all together we got the following script.
Full script:-
#!/bin/bash
#Program Name: Report_generation.sh
#Purpose: Report Generationexport hour=`date -u +%H`
function takesnap()
{
echo "Inside Take Snap fucntion!!"
/optional/phantom/bin/phantomjs observare.js
}function sendmail()
{
/usr/sbin/sendmail -t <<EOT
TO: industryvertical@gmal.com
FROM: Thirunavukkarasu.Muthusamy@gmail.com
SUBJECT: Observer – Dashboard Report
MIME-Version: 1.0
Content-Type: multipart/related;boundary="XYZ"--XYZ
Content-Type: text/html; charset=ISO-8859-15
Content-Transfer-Encoding: 7bit<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-15">
</head>
<body bgcolor="#ffffff" text="#000000">
<img src="cid:part1.0609040" alt="">
</body>
</html>--XYZ
Content-Type: image/jpeg;name="observare.jpg"
Content-Transfer-Encoding: base64
Content-ID: <part1.0609040>
Content-Disposition: inline; filename="observare.jpg"$(base64 /optional/images/observare.jpg)
--XYZ--
EOT}
#Main function starts here
takesnap
sendmail
Schedule as Cron:-
Make it as a cron, to send the report periodically to the distribution list something like below.
#Dashboard report generation
*/30 * * * * sh /optional/phantom/bin/Report_generation.sh > /dev/null 2>&1
Graphical report generation using High Charts JS Plugin – Monitoring Dashboard
For the past few months actually i have been working on developing a Dashboard application which displays various backlog trends of our application. I desperately looking for some of the open source graphical tools which would help us to convert the tabular or JSON data to graphical format.
Initially i just given a try with Google visualization API, but over the time it seems to be very painful to work with, during that phase i get to know about “High charts” Jquery plugin.
Technologies used:-
- Twitter Bootstrap – CSS framework
- Highcharts – Jquery Plugin
- Jquery – Javascript framework
Demo:-
Use the below link see the demo of the “Observare – Monitoring Dashboard”, just pasted below the snapshot of it. http://anjuwedssrini.com/Demos/HighCharts-Demo/
Download:-
The source-code of this Highcharts-Demo can be downloaded from Github. https://github.com/Thirunavukkarasu/HighCharts-Demo
Explanation:-
1] First create as many of div as you want(equivalent to number of charts) inside the parent container, specify unique id for each div element, we need to refer it from Javascript later on.
<div class="container-fluid">
<div class="row">
<div class="container-fluid">
<div class="row">
<div class="col-md-4" id="container1">
</div>
<div class="col-md-4" id="container2">
</div>
<div class="col-md-4" id="container3">
</div>
</div>
<div class="row">
<div class="col-md-4" id="container4">
</div>
<div class="col-md-4" id="container5">
</div>
<div class="col-md-4" id="container6">
</div>
</div>
</div>
</div>
</div>
2] Consume the JSON using Jquery $.getJSON() function as follows. Inside options you have to specify the rendering part of the chart using renderTo function. You can refer the the following stackoverflow question for better reference. http://stackoverflow.com/questions/20442147/how-to-convert-html-table-to-chart/20468101#20468101
$(document).ready(function() {
drawChart1();
});
function drawChart1()
{
var options = {chart: {renderTo: 'container1',type: 'area'},credits: {enabled: false},series: [{ }],title:{text:'Backlog-Trend-1'},xAxis:{title:{text:'Hour'}}};
$.getJSON('json/Chart1.json',function(data) {
options.series = data;
var chart = new Highcharts.Chart(options);
});
}
Please leave your feedbacks and suggestions.
