Introduction
The Patch Trending toolkit [1] allows you to create and integrate into you SMP Patch Management compliance charts by bulletins and a sub-site to navigate the available trending data (that also extends to inactive computers and compliance by computer).
However there is no control or element that allows the administrator to build up a small control panel showing the global Patch Compliance for a SMP. This is what we will do here, from creating the control all the way to integrating it on the SMP.
Creating the Control
As all of the chart on the Patch Trending toolkit (and on more visualization tools available here on Connect [2][3]) this one will be no exception: it is based on the Google Chart API [4] and builds up on data available in Patch Trending.
In order to quickly and efficiently display the compliance of the system we will use the Gauge control [5] and the global data file "global_1.js" stored under the Patch Compliance web-directory Javascript folder.
Here are sections of the html code with explanation of what they do:
Html code:
<html>
<head>
<title>Compliance gauge view</title>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript' src='javascript/global_1.js'></script>
</head>
<body style="width: 600; font-family:arial;">
<div id='chart_div' style="text-align: center;"></div>
<div id='text_div'></div>
</body>As you can see there is not very much in term of html: we define the page title, load the Google jsapi, load the global vulnerability data form the local site, define the body and 2 divs: one for the chart and one for text data.
Javascript code:
<script type="text/javascript">
google.load('visualization', '1', {packages:['gauge']});
function logevent(msg) {
var d = document.getElementById("text_div");
d.innerHTML = "<p>" + msg + "</p>";
}
function drawchart() {
var inst = global_local[1];
var appl = global_local[2];
var vuln = global_local[3];
logevent("Applicable = " + appl + ", Installed = " + inst + ", Vulnerable = " + vuln + ".");
var global_compl = (global_local[1]) / (global_local[2]) * 100;
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['%', Math.round(global_compl * 100) / 100]
]);
var options = {
width: 600, height: 300,
greenFrom:90, greenTo: 100,
redFrom: 00, redTo: 75,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
}
var global_local = global_1[global_1.length -1];
google.setOnLoadCallback(drawchart);
</script>
</html>The javascript code is a little longer than the html code, but it is not very complicated either. Here's a view of the sub-sections of code:
- Load the Google visualization Gauge controls
- define the function logevent to insert a string of text in the html text_div
- define the function drawChart to generate the Gauge control
- define a global variable that point at the last entry in table global_1
- set the Google API to call the function drawchart once everything is loaded and ready
Processing:
The html is loaded on the browser and javascript files are retrieved remotely and locally. Once the Google jsapi is fully loaded on the browser it call the function drawChart. This function retrieves the count of installed, applicable and vulnerable updates from the global_local table (which is the last record from the table containing all global results for the server). Then the text summary is added to the text_div calling logevent() and the compliance ratio is calculated and saved. The result is added to a datatable, some options are set and used by the visualization API to draw the chart inside the chart_div element.
Options:
There are a number of options that I have settle upon that could be change to best fit your environments. Let's detail them:
- Gauge is set to 300x300 pixels for a large view
- Gauge label is '%'
- Percents 0 to 75 are shown as red
- Percents 75 to 90 are shown as orange (albeit the js indicates it should be some form of yellow)
- Percents 90 to 100 are shown as green
- Minor ticks are show every 5 percent
Here is the code that define these entries:
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['%', Math.round(global_compl * 100) / 100]
]);
var options = {
width: 300, height: 300,
greenFrom:90, greenTo: 100,
redFrom: 00, redTo: 75,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};Verifying the results:
Copy the code from the 2 main sections above and save it to file, or use the attached html file (saved as text for simplicity) and save it to your computer. Then create a javascript directory under the location you saved the html and add the following text to a file name "global_1.js":
var global_1 = [ ['Date', 'Installed', 'Applicable', 'Vulnerable'], ['2014-02-11T23:30:38.167', 98324, 100000, 1686] ]
You can now double click on the html file and it should show you the following in your browser:
Integrating with the SMP:
Now that we have a working gauge-control we can integrate it in the SMP console via a web-part and add it to any view we want.
Creating the Web-part:
Copy the html file to the PAtch Trending web-folder. Verify that it works using your browser. If the file is in the correct location it should display the current compliance information for your system.
Navigate to the SMP console and select "Settings > Console > Web Parts". Select a folder where you want to create the new web-part and right-click "New Web Part".
Add in the web-part the required information (based on where you trending site is configured:
Note that the "Show url" filed should contain a host available to all your console users, not like the "localhost" I used in my example ;).
Adding the web part in a portal page:
Also note that this sample gauge chart is too large for console integration, so I changed it on my system to 250x250 pixels. I also integrated the web part in a clone of the portal page "Windows Compliance" (because the default view is read-only).
Once the page is cloned you can edit it to add any web-part, albeit in this case you want to find the one we just create and put it in the portal page:
References
[1] Patch trending main Connect article
[2] aila2 main Connect article
[3] SWD Execution trending
[4] Google Chart API
[5] Google chart gauge control