Console de supervision simple avec Jquery et BOOTSTRAP et API Datametrie

09 décembre 2015 Par Posté dans Infos Produits

Cet article montre comment construire une console de supervision simple de vos moniteurs Datametrie. L’architecture est celui d’une page web développée dans un site client (Extranet, Intranet, etc..) qui récupère depuis le poste des utilisateurs à intervalles réguliers le dernier statut des moniteurs Datametrie.

Côté serveur : Récupérer le statut des moniteurs à intervalle régulier

Télécharger la documentation de l’API Datametrie.
Afin de mutualiser les accès à l’API, un script est exécuté en tache planifiée (par exemple toutes les 60s) pour enregistrer et mettre à jour un fichier JSON contenant le statut de tous les scénarios sur un serveur. Cette mise à jour se fait avec la méthode :

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

Et en utilisant CURL dans un script planifié :

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

Le fichier JSON status.json enregistré est de la forme suivante :

 {"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"
     }
   }
 }

La structure HTML

Coté client (page HTML), une console peut être simplement mise en place avec des effets visuels (CSS) issus de la librairie Bootstrap (http://getbootstrap.com/). Ces effets visuels se baseront sur le champ « TYPEALARME » qui prennent les valeurs :

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

Une simple structure HTML peut être construite et formatée sous Bootstrap via la classe « list-group »

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

Comme notre objectif est d’afficher un code couleur suivant l’état de chaque scenario, nous allons utiliser les classes bootstrap suivantes qui offrent une mise en forme de la couleur de fond et de la police :

  • Classe « list-group-item-success » pour un moniteur OK
  • Classe “list-group-item-warning” pour une alerte rouge ou orange
  • Classe « list-group-item-danger » pour une alerte noire

 

Class bootstrap
Une liste de 3 moniteurs en états OK/Warning/KO est mise en forme ci-dessous:
<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>

L’exemple final est disponible ici

 

Rafraîchissement des données côté client, et affichage du statut de chaque moniteur

Au départ, la structure <ul> de la console est vide. Elle est remplie après l’évènement Onload en 2 étapes :

  • D’abord on renseigne un tableau des moniteurs avec leurs IDCONTRAT et Nom avec la fonction GetMonitors
  • puis via un appel récurrent toutes les 60s à la fonction Refresh() via la fonction Javascript standard setInterval.

Le code Onload est montré ici:

//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();
   }
 });
//start Refreshing console
 setInterval(Refresh, 60000);

La liste des moniteurs est d’abord obtenue via un fichier json « Get_Monitors.json» passé en paramètre :

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

 

C’est la fonction Refreshconsole qui rapatrie ensuite le fichier « Get_Status_All_Monitors.json » des statuts des moniteurs à jour.

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);
    }
  });
}

Cette dernière appelle la fonction UpdateMonitors pour scanner le contenu JSON:

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"
            }));
         }
      });
}

 

Laisser un commentaire

Votre adresse email ne sera pas publié