This recipe will provide a step-by-step guide to setting up a reporting system using Timebeat software. The goal of this process will be that at the end of which you can create your own reports with the steps learned in this that is tailored to your needs.
Problem:
You want to be able to download a PDF report of your devices being synchronised accounting for the past 30 days.
Ingredients (the minimum required items)
- Devices reporting to Timebeat's management platform
- An internet browser
- A PDF viewer
- A positive attitude :)
Total Prep time: 0 mins, Total Cook time: 10 mins
In this recipe, we will use the already configured environment from the previous recipes.
If you want a refresher on what to do prior to catching up to this stage check out the following recipe has all the necessary steps required (recipe 1 - a simple PTP network and recipe 2 - Timebeat management platform)
Step 1:
We want to log into our Grafana front end and be on the home page. From there we navigate to the settings (cog icon) on the left-hand sidebar and select API Keys.
Step 2:
Now we want to create a new API so we select "Add API Key" on the right-hand side.
We give our new key a name. In this example we use Reporter, and then select Admin as the Role. (lower levels will work but we find Admin works best). Unless you want to time out the key after a period of time, leave the "time to live" field blank.
Step 3:
Now we are presented with our key. Make sure to copy it down as we will need it for the next step and it is not retrievable. If you do misplace this key just run steps 1 & 2 again and all will be fine.
Once copied, return to the Home dashboard.
Step 4:
Now let's edit our report generator so that it has the correct API to access the reporter.
For this, we just hover over the report generator title and select edit.
Step 5:
On the right-hand side, we can see the code that drives the Reporter.
The code in full is below and highlighted are the parts that need amending to fit your environment:
<script>
var port = 443; //DEFAULT
var host = window.location.host.split(':')[0]; //DEFAULT
var token = "eyJrIjoiQWJHMHdQNGVOV1QwY0NUUmE1Ym9VQZXXXXXXXXXIjoicmVwb3J0ZXIzIiwiaWQiOjF9";
var hostname = '$hostname';
var offset = (new Date().getTimezoneOffset()*60*1000);
var timeRange = angular.element('grafana-app').injector().get('timeSrv').timeRange();
// convert Grafana's unix timestamp to a readable time format and add browser timezone offset
var temp_date_from = new Date(timeRange.from);
var temp_date_to = new Date(timeRange.to);
</script>
<div class="text-center">
<select style="height: auto;" id="dashFolders" class="btn btn-primary"></select>
<select style="height: auto;" id="dashUID" class="btn btn-primary"></select>
<input style="height: auto;" id="email" class="btn btn-primary" type="text" placeholder="insert email">
<button style="height: auto;" id="generateBtn" class="btn btn-primary"><i class="fa fa-fw fa-file-text-o"></i> Generate Report </button>
<button style="height: auto;" class="btn btn-primary"><i class="fa fa-fw fa-file-text-o"></i><a style="color:white" href="https://reporter.test.timebeat.app/api/async/download?apitoken=eyJrIjoiQWJHMXXXXXXXUmE1Ym9VQ2pNZXBiQzVqZ0giLCJuIjoicmVwb3J0ZXIzIiwiaWQiOjF9&cmd=list" target="__blank">Stored Reports </a></button>
</div>
<script>
$(document).ready(function(){
init();
getFolders();
$("#dashFolders").change(function(){
$("#dashUID").children('option:not(:first)').remove();
getDashboards($("#dashFolders").val());
});
});
function init(){
$('#dashFolders').append("<option class='gf-form'> <span> <i class='fa fa-fw fa-th-large'> Select Folder </span> </option>");
$('#dashUID').append("<option class='gf-form'> Select Dashboard </option>");
$("#dashUID").children('option:not(:first)').remove();
}
function getFolders(){
$.ajax({
type: 'GET',
url: '/api/search',
data: 'query=&type=dash-folder',
dataType: 'json',
async: false,
success: function (data) {
$.each(data, function(index, el) {
$('#dashFolders').append("<option class='gf-form' value="+el.id+">"+el.title+"</option>");
});
}
});
}
function getDashboards(id){
$.ajax({
type: 'GET',
url: '/api/search',
data: 'folderIds='+id+'&query=',
dataType: 'json',
async: false,
success: function (data) {
$.each(data, function(index, el) {
$('#dashUID').append("<option class='gf-form' value="+el.uid+">"+el.title+"</option>");
});
}
});
}
$("#generateBtn").click(function(){
generate();
});
function generate(){
var uid = $("#dashUID").val();
var email = $("#email").val();
var url = "https://reporter."+host+":"+port+"/api/async/report/"+uid+"?apitoken="+token+"&from="+$__from+"&to="+$__to+"&timeout=600&email=" + email + "&var-hostname=" + hostname;
window.open(url, '_blank',"width=600,height=400");
}
</script>
It's important you make sure to change both API keys to the one we created. Also, do change the start address on the highlighted button section to match that of your reporter environment.
Once complete we just update the panel and save the dashboard.
This is done with the apply button on the top right side of the panel and then the save icon at the top right of the home page dashboard.
Step 6:
I like to refresh the browser page at this stage for good measure but we are now ready to generate our report.
For this, we select the timeframe we want at the top (we're doing 30 days), then select the reports folder in the report generator panel, and select the dashboard we want to report on. In this case, we want the Clock Synchronisation Report, then just hit generate.
Once you have selected Generate you can click the Stored Reports button or follow the pop-up generated link.
Step 7:
Now that we have generated and clicked the link, we may need to wait a couple of minutes for it to be built. Then just click the report link and a PDF will open up