Tag Controller - Constellation

Connectez vos pages Web à Constellation

Sebastien Warin — Wed, 06 Jul 2016 14:22:29 +0000

Introduction

Il existe actuellement deux librairies Constellation JavaScript :

Constellation for Javascript
Constellation for AngularJS

La première est basée sur jQuery, la deuxième est une surcouche de la 1ère encapsulée dans un module AngularJS.

Vous retrouverez ces deux librairies depuis le gestionnaire de package Nuget intégré à Visual Studio :

Chacune de ces deux librairies propose deux types de client :

Consumer
Controller

Le client “Consumer” permet de se connecter à Constellation en tant que “consommateur” pour pouvoir interroger des StateObjects et envoyer/recevoir des messages.

Le client “Controller” permet lui de se connecter à Constellation en tant que « contrôleur » pour récupérer par exemple en temps réel les logs produits par vos packages, arrêter/démarrer les packages, surveiller la consommation de ressources de chacun d’entre eux, etc.

Dans ce guide nous allons utiliser le client « Consumer » afficher en temps réel le StateObject produit par le package HWMonitor représentant la consommation de votre CPU dans une page Web.

Pour cela vous devez avoir déployé le package “HWMonitor” sur au moins une de vos sentinelles (Windows).

Etape 1 : ajouter la librairie Constellation

En utilisant le CDN

Les librairies JavaScripts sont accessibles sur : http://cdn.myconstellation.io/js/ (en HTTP ou HTTPS).

De ce fait, vous pouvez créer une simple pages HTML et ajoutez dans l’entête les balises suivantes :

Si vous souhaitez connecter votre page à Constellation en utilisant le framework AngularJS :

Par Nuget en utilisant Visual Studio

Créez une application Web vide dans Visual Studio et ouvrez le gestionnaire de package NuGet.

En sélectionnant la source “Constellation”, installez le package Nuget “Constellation.Javascript” :

Une fois installée vous obtiendrez dans le dossier “Scripts” de votre projet Web les librairies jQuery, SignalR et Constellation :

Créez ensuite une page Web (HTML ou ASPX) et dans l’entête de votre code HTML référencez les scripts (à adapter en fonction des n° de version des librairies contenues dans les packages Nuget) :

Etape 2 : Initialiser le client

Tout d’abord il faut déterminer la clé d’accès qui sera utilisée par votre page. Ici, depuis la Console Constellation, nous créons un credential “DemoWeb” avec la clé d’accès “123456789” :

Dans notre page HTML, créons un client “Consumer” en spécifiant l’URI de notre Constellation, la clé d’accès utilisée pour se connecter et le “friendly name” de votre client :

var constellation = $.signalR.createConstellationConsumer("http://localhost:8088", "123456789", "Test API JS");

Etape 3 : Etablir la connexion à Constellation

Ajoutons un handler sur le changement d’état de la connection pour afficher le message “Je suis connecté” dans la console de votre navigateur :

constellation.connection.stateChanged(function (change) {
    if (change.newState === $.signalR.connectionState.connected) {
        console.log("Je suis connecté");
    }
});

Pour finir lançons la connexion en invoquant la méthode Start :

constellation.connection.start();

Testons la page dans Chrome par exemple :

Etape 4 : Afficher le contenu d’un StateObject en temps réel

Dans notre cas nous voulons afficher en temps réel la consommation CPU de notre sentinelle.

Ce StateObject se nomme “/intelcpu/0/load/0” et est produit par le package “HWMonitor” que vous aurez pris le soin de déployer sur une de vos sentinelles (ici ma sentinelle se nomme “PO-SWARIN”) :

On peut donc enregistrer un “StateObjectLink” avec la méthode “registerStateObjectLink” en demandant un filtre sur la sentinelle nommée “MON-PC”, le package “HWMonitor” et le nom “/intelcpu/load/0” (le dernier argument de cette méthode correspond au type du StateObject, ici ”*” indique qu’il n’y a pas de filtre sur le type) et en indiquant la fonction à invoquer à chaque mise à jour du et des StateObjects liés, ici mettre à jour un de la page.

Vous devez impérativement faire cet enregistrement lorsque vous êtes connecté, c’est à dire lorsque le handler “stateChanged” est invoqué avec l’état “Connected”.

Le code final sera donc :

constellation.connection.stateChanged(function (change) {
    if (change.newState === $.signalR.connectionState.connected) {
        console.log("Je suis connecté");
        constellation.client.registerStateObjectLink("MON-PC", "HWMonitor", "/intelcpu/0/load/0", "*", function (so) {
            console.log(so);
            $("#cpu").text(so.Value.Value);
        });
    }
});

Dès que le StateObject est réceptionné par notre page nous affectons la propriété “Value” de la valeur du StateObject comme contenu du span “cpu” de la page. De ce fait, ajoutons un “span” nommé “cpu” dans le corps de notre page :

Ainsi vous aurez en temps réel votre CPU dans une page HTML grâce à l’exploitation du StateObject ici produit par le package HWMonitor :

Vous remarquerez que dans le handler ci-dessus nous loguons également l’objet “stateobject” réceptionné par notre page.

Cet objet contient les différentes propriétés du StateObject : la sentinelle et le package qui ont produit ce StateObject, le nom du StateObject, son type, sa durée de vue (ici “lifetime=0” donc n’expire jamais), la date de mise à jour du StateObject, ses métadonnées et surtout sa valeur (propriété “Value”).

Ici la valeur de ce StateObject produit par le package “HWMonitor” est un objet complexe (entouré en vert) qui contient différentes propriétés :

Pour la suite je vous recommande vivement l’utilisation du framework AngularJS permettant de développer des pages plus facilement.

Next step

The post Connectez vos pages Web à Constellation appeared first on Constellation.

Les différents hubs et interfaces REST du serveur Constellation

Sebastien Warin — Fri, 12 Aug 2016 14:19:15 +0000

Le serveur Constellation est accessible en HTTP ou HTTPS sur une ou plusieurs URIs.

Il héberge des hubs et des interfaces HTTP/REST. De plus il peut également héberger des fichiers statiques en configurant le “fileServer” ce qui permet par exemple l’auto-hébergement de la console Constellation (plus d’info ici).

Les hubs Constellation sont basés sur la technologie SignalR permettant d’exposer des canaux de communication bi-directionnels et temps réel en HTTP long-polling, server-event ou WebSocket en fonction des capacités du client.

Les interfaces HTTP/REST sont en fait des contrôleurs WebAPI exposant des méthodes en HTTP/REST. Les interfaces HTTP/REST permettent d’exposer des fonctionnalités de Constellation de manière très simple pour les devices ou frameworks ne pouvant supporter SignalR.

Il existe 4 hubs :

Constellation
Consumer
Controller
Sentinel

Ainsi que 3 interfaces HTTP/REST :

Constellation
Consumer
Management

Le hub et l’interface HTTP “Constellation” sont utilisés par les packages Constellation (réels ou virtuels). Ils exposent des méthodes pour écrire des logs, pour récupérer les settings, pour publier ou interroger des StateObjects, envoyer ou recevoir des messages, etc…

Le hub et l’interface HTTP “Consumer” sont utilisés par les “consommateurs”. Par exemple une page Web est un consommateur, c’est à dire qu’elle se connecte à Constellation pour interroger des StateObjects ou envoyer/recevoir des messages mais elle n’est pas un package (son cycle de vie est lié au navigateur du client). Un “consommateur” ne peut pas produire des logs, avoir de settings ou encore publier des StateObjects.

Le hub “Controller” expose des méthodes pour contrôler la Constellation comme arrêter/démarrer des packages, s’abonner et récupérer en temps réel les logs des packages de la Constellation, propager les changements de configuration dans la Constellation, suivre les états et consommation des ressources des packages, etc… Ce hub est notamment utilisé par la Console Constellation pour vous fournir une interface de pilotage de votre Constellation. Pour pouvez également vous connecter et exploiter les fonctionnalités de contrôle de vos pages Web ou packages .NET.

Le hub “Sentinel” est un hub privé réservé aux sentinelles de la Constellation. C’est sur ce hub que les sentinelles s’enregistrent, remontent les états des packages qu’elles supervisent, etc…

Enfin l’interface HTTP “Management” aussi nommée “Management API” est une API HTTP/REST de management du serveur permettant la gestion des sentinelles, des packages, des settings, des credentials, etc… Cette API est notamment utilisée par la Console Constellation pour vous fournir une interface d’administration de votre Constellation.

The post Les différents hubs et interfaces REST du serveur Constellation appeared first on Constellation.

Contrôler votre Constellation en Javascript

Sebastien Warin — Thu, 18 Aug 2016 14:48:37 +0000

Le hub de contrôle expose des méthodes pour contrôler la Constellation comme arrêter/démarrer des packages, s’abonner et récupérer en temps réel les logs des packages de la Constellation, propager les changements de configuration dans la Constellation, suivre les états et la consommation de ressource des packages, etc…

Les deux librairies JavaScript Constellation intègrent un client permettant de se connecter sur ce hub afin de pouvoir piloter votre Constellation. La Console Constellation est d’ailleurs basée sur ce client.

Dans cet article découvrons les fonctionnalités de ce client avec l’API JavaScript et l’API AngularJS.

Connecter une page HTML au hub de contrôle

Etape 1 : Ajouter les librairies

En utilisant le CDN

Les librairies JavaScripts sont accessibles sur : http://cdn.myconstellation.io/js/ (en HTTP ou HTTPS).

Pour utiliser la librairie JavaScript :

Ou si vous souhaitez l’utiliser avec le framework AngularJS :

Par Nuget en utilisant Visual Studio

Dans Visual Studio et ouvrez le gestionnaire de package NuGet.

En sélectionnant la source “Constellation”, installez le package Nuget “Constellation.Javascript” pour l’API JavaScript ou “Constellation.AngularJS” pour l’API AngularJS :

Etape 2 : Connexion au hub de contrôle

Avec l’API JavaScript (JS) vous devez créer le client avec la méthode “createConstellationController” en spécifiant l’URL de votre Constellation, une clé d’accès et un friendly name :

var controller = $.signalR.createConstellationController("http://localhost:8088", "123456789", "TestAPI");
controller.connection.stateChanged(function (change) {
  if (change.newState === $.signalR.connectionState.connected) {
    console.log("Connected to the ControlHub");
  }
});
controller.connection.start();

Avec l’API AngularJS (NG), vous devez injecter le client “constellationController” dans votre contrôleur puis l’initialiser avec la méthode “initializeClient” en spécifiant l’URL de votre Constellation, une clé d’accès et un friendly name :

var demo = angular.module('demoApp', ['ngConstellation']);
demo.controller('MyController', ['$scope',  'constellationController', function ($scope, controller) {

  controller.initializeClient("http://localhost:8088", "123456789", "TestAPI");
    
  controller.onConnectionStateChanged(function (change) {
    if (change.newState === $.signalR.connectionState.connected) {
      console.log("Connected to the ControlHub");
    }
  });
    
  controller.connect();
}]);

La clé d’accès (AccessKey) utilisée pour se connecter au hub de contrôle doit avoir l’attribut “enableControlHub” à “true”. Vous pouvez gérer les credentials dans la Console Constellation ou dans le fichier de configuration.

Superviser les sentinelles

Vous disposez de deux méthodes :

requestSentinelsList() : pour recevoir la liste des sentinelles de votre Constellation
requestSentinelUpdates() : pour recevoir toutes les mises à jour des sentinelles de votre Constellation (ajout ou suppression de sentinelles, connexion ou déconnexion des sentinelles, mise à jour des informations, etc…).

Ces deux méthodes sont de type “void”. Les réponses sont réceptionnées par les handlers respectivement nommés ”onUpdateSentinelsList” et “onUpdateSentinel”.

Avec l’API JS :

controller.client.onUpdateSentinelsList(function (list) {
  console.log(list);
});

controller.client.onUpdateSentinel(function (sentinel) {
  console.log(sentinel);
});

controller.connection.onConnectionStateChanged(function (change) {
  if (change.newState === $.signalR.connectionState.connected) {
    controller.server.requestSentinelsList();
    controller.server.requestSentinelUpdates();
  }
}

Avec l’API NG :

controller.onUpdateSentinelsList (function (list) {
  console.log(list);
});

controller.onUpdateSentinel  (function (se) {
  console.log(se);
});

controller.onConnectionStateChanged(function (change) {
  if (change.newState === $.signalR.connectionState.connected) {
    controller.requestSentinelsList();
    controller.requestSentinelUpdates ();
  }
});

Par exemple utilisons l’API NG pour créer une page affichant l’ensemble des sentinelles avec leur statuts en temps dans une page :

Dans le code du contrôleur, ajoutons un handler sur la mise à jour sentinelle afin de stocker les objets “sentinelle” dans une variable de scope :

$scope.sentinels = {};
controller.onUpdateSentinel  (function (sentinel) {
  $scope.$apply(function() {
    $scope.sentinels[sentinel.Description.SentinelName.replace("-", "")] = sentinel;
  });
});

Nous sommes obligé de faire un “replace(« -« , « »)” car nous utilisons le nom de la sentinelle comme nom pour la propriété de notre variable de scope, or en JavaScript une propriété ou variable ne peut pas comporter de “-“.

Lors de la connexion, abonnons-nous aux mises à jour des sentinelles afin de maintenir notre page à jour :

controller.onConnectionStateChanged(function (change) {
  if (change.newState === $.signalR.connectionState.connected) {
    console.log("Connected to the ControlHub");
    controller.requestSentinelUpdates ();
  }
});

Enfin dans le template HTML affichons nos différentes sentinelles dans une simple liste à puce :


  {{s.Description.SentinelName}} [{{s.IsConnected ? "CONNECTED" : "DISCONNECTED"}}] ({{s.Description.OSVersion}})

Veuillez noter que seule les sentinelles “réelles” qui se sont connectées au moins une fois peuvent être récupérer car cette technique. Pour les sentinelles qui ne se sont jamais connectées comme pour les sentinelles virtuelles, vous devez lire le fichier de configuration en utilisant l’API REST de Management (Management API).

Voici la structure de l’objet ”sentinelle” :

Superviser les packages

Une fois la liste de vos sentinelles connue, vous pouvez récupérer la liste des packages pour chaque sentinelle en invoquant la méthode “requestPackagesList “ et en ajoutant un handler sur le “onUpdatePackageList”.

Avec l’API JS :

controller.client.onUpdatePackageList (function (list) {
  console.log(list);
});
controller.server.requestPackagesList("MySentinel");

Avec l’API NG :

controller.onUpdatePackageList (function (list) {
  console.log(list);
});
controller.requestPackagesList("MySentinel");

Reprenons notre page ci-dessus et ajoutons la liste des packages pour chaque sentinelle de notre Constellation.

Dans le handler “onUpdateSentinel” défini dans la section précédente, demandons au hub de contrôle la liste des packages pour chaque sentinelle :

controller.onUpdateSentinel  (function (sentinel) {
  $scope.$apply(function() {
    $scope.sentinels[sentinel.Description.SentinelName.replace("-", "")] = sentinel;
  });
  controller.requestPackagesList(sentinel.Description.SentinelName);
});

Et ajoutons dans notre scope le handler “onUpdatePackageList” de manière à ajouter la liste des packages dans une propriété “Packages” que nous ajouterons dans nos objets “sentinelles” :

controller.onUpdatePackageList (function (p) {
  $scope.$apply(function() {
    $scope.sentinels[p.SentinelName.replace("-", "")]["Packages"] = p.List;
  });
});

Nous pouvons maintenant enrichir notre template pour afficher les packages de chacune de nos sentinelles :


  {{s.Description.SentinelName}} [{{s.IsConnected ? "CONNECTED" : "DISCONNECTED"}}] ({{s.Description.OSVersion}})
    
      {{p.Package.Name}} version {{p.PackageVersion}} [{{p.State}}]

Surveiller l’état et la consommation des packages

La liste de package récupérée ci-dessus n’est pas maintenue à jour. Pour recevoir les mises à jour de vos packages afin d’être notifié de chaque changement d’état vous pouvez ajouter le handler “onReportPackageState”.

De plus vous pouvez aussi vous abonner aux informations de consommation des ressources de vos packages avec le handler “onReportPackageUsage”.

Avec l’API JS :

controller.client.onReportPackageUsage  (function (usage) {
  console.log(usage);
});

controller.client.onReportPackageState  (function (usage) {
  console.log(usage);
});

Avec l’API NG :

controller.onReportPackageUsage  (function (usage) {
  console.log(usage);
});

controller.onReportPackageState  (function (usage) {
  console.log(usage);
});

Par exemple ajoutons dans notre page la consommation de CPU et de RAM pour chaque package de notre Constellation :

controller.onReportPackageUsage(function (usage) {
  $scope.$apply(function() {
    var sentinelName = usage.SentinelName.replace("-", "");
    for(var idx in $scope.sentinels[sentinelName].Packages) {
      var p = $scope.sentinels[sentinelName].Packages[idx];
      if(p.Package.Name == usage.PackageName) {
        p["CPU"] = usage.CPU;
        p["RAM"] = usage.RAM;
      }
    }
  });
});

Dans le code ci-dessus, on ajoute dans chaque objet “Package” la valeur de la consommation du CPU et de RAM.

Ainsi on peut enrichir le template HTML avec le code :


  {{s.Description.SentinelName}} [{{s.IsConnected ? "CONNECTED" : "DISCONNECTED"}}] ({{s.Description.OSVersion}})
    
      {{p.Package.Name}} version {{p.PackageVersion}} [{{p.State}}]
        
          CPU: {{p.CPU | number : 0 }}% - RAM: {{p.RAM / 1024 / 1024 | number: 0}}Mo

Contrôler les packages

Pour contrôler les instances de package vous disposez des méthodes suivantes :

start(sentinelName, packageName) : démarre un package
stop(sentinelName, packageName) : arrête un package
restart(sentinelName, packageName) : redémarre un package
reload(sentinelName, packageName) : arrête un package, force la sentinelle à télécharger la dernière version du package sur le serveur et redémarre le package
updatePackageSettings(sentinelName, packageName) : pousse les settings d’un package au package en cours de fonctionnement (à charge au package à prendre en compte ses nouveaux paramètres).

Avec l’API JS :

controller.server.start(sentinelName, packageName);
controller.server.stop(sentinelName, packageName);
controller.server.restart(sentinelName, packageName);
controller.server.reload(sentinelName, packageName);
controller.server.updatePackageSettings(sentinelName, packageName);

Avec l’API NG :

controller.start(sentinelName, packageName);
controller.stop(sentinelName, packageName);
controller.restart(sentinelName, packageName);
controller.reload(sentinelName, packageName);
controller.updatePackageSettings(sentinelName, packageName);

Par exemple ajoutons dans notre page la possibilité de piloter les packages.

Pour ce faire exposons notre client “controller” dans le scope Angular de façon à pouvoir l’utiliser dans le template HTML :

$scope.controller = controller;

Dans notre template ajoutons ensuite des boutons en spécifiant l’action du clic grâce à l’attribut “ng-click” :

Pour aller plus loin on peut également afficher/cacher les boutons en fonction de l’état du package, par exemple ne pas afficher le bouton “Start” si le package est déjà démarré :

S’abonner aux logs de Constellation

Pour récupérer les logs produits par les packages (virtuels ou non) en temps réel dans votre page Web, vous devez ajouter un handler sur “onReceiveLogMessage”.

Avec l’API JS :

controller.client.onReceiveLogMessage(function (log) {
  console.log(log);
});

Avec l’API NG :

controller.onReceiveLogMessage(function (log) {
  console.log(log);
});

Par exemple ajoutons à notre page la capacité d’afficher les logs des packages de notre Constellation en temps réel.

Pour cela nous allons nous abonner aux logs et les stocker dans un tableau de notre scope Angular :

$scope.logs = [];
controller.onReceiveLogMessage(function (log) {
  $scope.$apply(function() {
    $scope.logs.push(log);
  });
});

Nous pouvons donc maintenant afficher proprement nos logs dans notre template HTML :


  {{log.Date | date: 'dd/MM/yyyy HH:mm:ss' }} on {{log.SentinelName}}/{{log.PackageName}} : [{{ log.Level.toUpperCase() }}] {{log.Message}}

Récupérer les PackageDescriptors

Le PackageDescriptor est un objet publié par les packages qui permet de décrire les MessagesCallbacks que les packages exposent ainsi que les types utilisés dans leurs MC et StateObjects.

Pour récupérer un PackageDescriptor vous devez invoquer la méthode ”requestPackageDescriptor” en spécifiant le nom du package et attacher un handler “onUpdatePackageDescriptor” pour récupérer le résultat.

Avec l’API JS :

controller.client.onUpdatePackageDescriptor(function (descriptor) {
  console.log(descriptor);
});

controller.server.requestPackageDescriptor(packageName);

Avec l’API NG :

controller.onUpdatePackageDescriptor(function (descriptor) {
  console.log(descriptor);
});

controller.requestPackageDescriptor(packageName);

Par exemple sur notre page ci-dessus, ajoutons un bouton permettant d’afficher dans une simple boite de dialogue la liste des MessageCallbacks d’un package :

Dans le template HTML :

Et dans le code de notre contrôleur, de manière grossière :

controller.onUpdatePackageDescriptor(function (descriptor) {
  var result = "Package "+ descriptor.PackageName + " :";
  for(var idx in descriptor.Descriptor.MessageCallbacks) {
    result += "\n - " + descriptor.Descriptor.MessageCallbacks[idx].MessageKey;
  }
  alert(result);          
});

Une description plus détaillée des PackageDesciptors se trouve ici.

Effacer des StateObjects

Vous pouvez effacer des StateObjects en invoquant la méthode “purgeStateObjects” :

Avec l’API JS :

controller.server.purgeStateObjects(sentinelName, packageName, name, type);

Avec l’API NG :

controller.purgeStateObjects(sentinelName, packageName, name, type);

Vous devez indiquer les filtres de sélection des StateObjects à supprimer avec la possibilité d’utiliser le wildcard ”*” seulement pour les paramètres “name” et “type”. Autrement dit vous êtes obliger de spécifier le “sentinelName” et “packageName”.

Rafraichir et déployer la configuration

Vous pouvez recharger la configuration Constellation avec la méthode “reloadServerConfiguration” :

Avec l’API JS :

controller.server.reloadServerConfiguration(deployConfiguration);

Avec l’API NG :

controller.reloadServerConfiguration(deployConfiguration);

Cette méthode attend un booléen (deployConfiguration) pour indiquer si oui ou non la configuration doit être déployée après son rechargement. Dans le cas d’un déploiement, la nouvelle configuration est envoyée à toutes les sentinelles et packages de votre Constellation.

The post Contrôler votre Constellation en Javascript appeared first on Constellation.