A simple supervision console using Ajax with Bootstrap, jQuery, and the Datametrie API

December 09 2015 By Posted in Product News

This post describes how to build a simple console for supervising your Datametrie monitors. The architecture is that of a web page developed on a customer web site (extranet, intranet, etc.). At regular intervals it retrieves to the user workstation the most recent status of Datametrie monitors.

On the server-side : get up-to-date information about the monitors status

Download the Datametrie API reference documentation.

To share access to the API a script runs as a scheduled task (for instance, every 60 s) to save and update a JSON file that contains the status of all of the scenarios on a server. This update is done using the method:

https://ws.ip-label.net/REST/Get_Status_All_Monitors/

and using CURL in a scheduled script:

curl –-user LOGIN:PASSWORD https://ws.ip-label.net/REST/Get_Status_All_Monitors/ > status.json

The JSON file, status.json, is saved in the following form:

 {"Ipln_WS_REST_datametrie":
   {"Get_Status_All_Monitors":
     {
       "key_0":{
         "IDCONTRAT":"1000",
         "IDALARMECONTRAT":"",
         "TYPEALARME":"OK",
         "MANDATORY_PROPERTIES":""
      },
       "key_1":{
         "IDCONTRAT":"1001",
         "IDALARMECONTRAT":"123456",
         "TYPEALARME":"BLACK",
         "MANDATORY_PROPERTIES":""
     },
     "status":"success"
     }
   }
 }

The HTML code for the client-side

On the client side (HTML page), a console can be set up very simply with visual effects (CSS) from the Bootstrap library (http://getbootstrap.com/). These visual effects will be based on the field TYPEALARME, which takes these values:

– TYPEALARME: OK
– TYPEALARME: ORANGE
– TYPEALARME: RED
– TYPEALARME: BLACK

A simple HTML structure can be built and formatted with Bootstrap within the class ‘list-group’

<ul id=’console’ class=”list-group”>
<li id=’monitor1’ class=”list-group-item”></li>
<li id=’monitor1’ class=”list-group-item”></li>
</ul>

Since the aim is to display color coding in phase with the status of each scenario, we are going to use the following Bootstrap classes that offer formatting of background color and font:

  • Class « list-group-item-success » for a monitor that is OK
  • Class “list-group-item-warning” for a red or orange alert
  • Class « list-group-item-danger » for a black alert

 

Class bootstrap

A list of 3 monitors with statuses OK/Warning/NOK can be formatted for presentation as below:
<ul class=”list-group”>
<li class=”list-group-item list-group-item-success”>Premier moniteur</li>
<li class=”list-group-item list-group-item-warning “>Second moniteur </li>
<li class=”list-group-item list-group-item-danger “>Troisième moniteur </li>
</ul>

The end result is can be viewed here

 

Refresh the data on the client-side and show the monitor status

At the beginning the <ul> structure of the console is empty. It is filled in after the Onload event in two stages:

  • First a table of monitors is filled in with their IDCONTRAT and Name using function GetMonitors.
  • Then via a recurrent call to function Refresh() every 60 s  via the standard JavaScript function.

The Onload code is shown below:

//Get monitor List
 $.ajax({
   type: 'GET',
   url: 'Get_Monitors.json',
   //Do not get json file from cache!
   cache: false,
   success: function (data) {
     GetMonitors(data);
     Refresh();
   }
 });

 


The list of monitors is first displayed using a JSON file « Get_Monitors.json» passed as a parameter:

function GetMonitors(content) {
     $.each(content.Ipln_WS_REST_datametrie.Get_Monitors, function(idx, elem) {
          if (elem.ETATCONTRAT == "PROCESSING") {
            Monitors[elem.IDCONTRAT] = elem.NOMCONTRAT;
          } 
     });
}

 

 

Function ‘Refreshconsole ‘then retrieves the file « Get_Status_All_Monitors.json » containing the latest monitor statuses.

function Refresh() {
  $('#console').empty();
  $.ajax({
    type: 'GET',
    url: 'Get_Status_All_Monitors.json',
    //Do not get json file from cache!
    cache: false,
    success: function (data) {
      UpdateMonitors(data);
    }
  });
}

 

The last part calls function UpdateMonitors to scan JSON content:

function UpdateMonitors(content) {
     //Scan Get_Status_All_Monitors JSON
     $.each(content.Ipln_WS_REST_datametrie.Get_Status_All_Monitors, function(idx, elem) {
         if (elem.IDCONTRAT) {
            $('#console').append($('<li>', {
              text: Monitors[elem.IDCONTRAT],
              class: ((elem.TYPEALARME == "BLACK") || (elem.TYPEALARME == "RED")) ? "list-group-item list-group-item-danger" : "list-group-item list-group-item-success"
            }));
         }
      });
}

 

 

Leave a Reply

Your email address will not be published