How to access HTML5 pages from SCOM 2012 console

You can define HTML views at the SCOM console which is a very a nice feature, allowing to display further monitoring data, including, for instance, charts based on data from the Operations Manager Data Warehouse Database.

The problem is that many of the modern chart libraries take advantage of HTML5:

The SCOM views, although, allow only HTML 4. I guess that, back in 2012, HTML 5 wasn't much used.

Fortunately there is a simple way of bypassing this problem:

It is possible to create a HTML 4 page that in turn opens the another HTML 5 page as a new window and,  in this case, the Internet Explorer is invoked, so the new page is displayed according to the IE current configuration, nowadays the chances are that your installed IE version correctly displays HTML 5.

I've created the calling page in PHP but this method can be used in any language.

My scom2html5.php PHP program accepts at least 2 parameters:

The first parameter is the dimensions and location of the new HTML window.

The second parameter is the page to be called. It there are any more parameters then they will be sent to the called page.

For instance:

scom2html5.php?900,700,342,74+mypage.html

This opens a window of 900 x 700 pixels at the position 342,74 of the screen. This window will then present the page: mypage.html

The program scom2html5.php creates the new window by using javascript:

<?php
...
// -- Get script's parameters
$ARGS = explode('+',$_SERVER['QUERY_STRING']);
$ARG_NO = count($ARGS); if ($ARG_NO < 2) die('Invalid arguments');
$url = $ARGS[1];
$win = explode(',',$ARGS[0]); if (count($win) != 4) die('Invalid arguments');
$uparms = '';
for($t=2;$t<$ARG_NO;$t++) $uparms .= '+' . rawurlencode($ARGS[$t]);
if (strlen($uparms) > 1) $uparms = '?' . substr($uparms,1);
else
$uparms = '';
$url .= $uparms;
$pos = "width=${win[0]},height=${win[1]},left=${win[2]},top=${win[3]},screenX=${win[2]},screenY=${win[3]}";
// -- Open new window via javascript
?>
<script type="text/javascript">
var winopen =window.open('<?php echo $url; ?>',
'HTML5Window',<?php
echo "'$pos,toolbar=yes,location=yes,directories=yes,status=yes," .
"menubar=yes,scrollbars=yes,copyhistory=yes,resizable=yes');" ?>
winopen.focus();
</script> </div>
<?php 
...

Once you create a calling page using this strategy, in any language you prefer, you can define a view to your HTML 5 page following these steps:

Right click the mouse to create the view:

Finally the HTML5 page is presented. In this case, the window position was defined to match the usual dimensions of a maximized console.