service.monitor jQuery widget for displaying health and history data

This page contains the following sections:

Introduction
- Usage
Integration
- Display status information
- Experimental use of Chart.JS

Introduction

The service.monitor JavaScript widget enables 3rd party web sites displaying the status of monitored services in a status diagram. Also it provides capabilities to display a line chart of history data about the service’s response time.

Usage

An example demo site of the features is available under the following address: http://[SERVER]:[PORT]/monitor/widget.html

Integration

After a successful service.monitor installation, the JavaScript-Widget is located at:
<install.dir>/service.monitor/webapps/monitor/js/widget/widget.js

The JavaScript-Widget will be available at:
http://[SERVER]:[PORT]/monitor/js/widget/monitor-widget.js

To use the provided JavaScript-Library in external web-pages, these web-pages have to be modified. See below for a html header extension.

necessary header imports for widget usage

<head>
    <link rel="stylesheet" type="text/css" href="clientStyle.do" />
    <link href="js/jquery/css/redmond/jquery-ui-1.10.0.custom.sdi.css" rel="stylesheet" type="text/css"/>
    <link class="include" rel="stylesheet" type="text/css" href="js/jquery/jquery.jqplot.css" />
    <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/jquery/excanvas.js"></script><![endif]-->
    <script type="text/javascript" src="js/jquery/jquery-1.9.0.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery/jquery-migrate-1.1.0.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery/jquery-ui-1.10.0.custom.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery/jquery.jqplot.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery/plugins/jqplot.highlighter.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery/plugins/jqplot.canvasTextRenderer.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery/plugins/jqplot.canvasAxisTickRenderer.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery/plugins/jqplot.dateAxisRenderer.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery/plugins/jquery.localisation.js"></script>
    <script language="javascript" type="text/javascript" src="js/widget/monitor-widget.js"></script>

</head>

Display status information

To create the status diagram and to activate the dialog window the following options are available:

 $('#diagram1').monitorWidget({'serviceUrl': 'SERVICE_URL'});

 $('#diagram1').monitorWidget({'serviceId': 'SERVICE_UUID', 'jobId': 'JOB_UUID'});

Use the latter way if you know serviceId and jobId beforehand.

The two code blocks show the most simple way to use the widget. #diagram1 refers here to an image element which will get updated by the widget with the status display. You can pass more information into the widget to customize the widget’s behaviour. The following options are available:

Available options to be passed as JSON data structure

{
    'monitorUrl': '/monitor',
    'bindAction': 'click',
    'serviceUrl': null,
    'serviceId': null,
    'jobId': null,
    'language': 'en',
    'imageSize': 30,
    'requestedJobIndex': 0,
    'numberOfHistoryPeriods': 20
}

The parameters have the following meaning:

monitorUrl: represents the path to service.monitor.
serviceUrl: corresponds to the URL of the monitored service.
requestedJobIndex: corresponds to the Job’s index position of the registered service (from '0' to the latest job# – 1; used with serviceUrl parameter only)
serviceId: Id of the service to which the job belongs
jobId: Id of the job for which the status shall be displayed (usage with serviceId only)
bindAction: specifies the bind action which should be used to invoke diagram painting, e.g. "click", "mouseover", can be null
imageSize: assigns the size of the status diagram. ("20" for 20x20 pixel, "40" for 40x40 pixel, "60" for 60x60 pixel)
numberOfHistoryPeriods: determines the number of requests to be visualised in the line chart.
language: assigns the language in which the information in the dialog window are shown.

Experimental use of Chart.JS

To demonstrate the usage of alternative javascript charting options a demonstrator is available showing the usage of chart.js .

The demo page is available here: http://[SERVER]:[PORT]/monitor/chart.html

The sample page makes use of /monitor/js/widget/monitor-widget-chart-js.js which also relies on jQuery, but for charting the alternative library is used.

This alternative charting is experimental and not supported by all rowsers.