Sommaire
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 :
|
1 2 3 |
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.2.min.js"></script> <script type="text/javascript" src="https://cdn.myconstellation.io/js/Constellation-1.8.2.min.js"></script> |
Ou si vous souhaitez l’utiliser avec le framework AngularJS :
|
1 2 3 4 5 |
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.2.min.js"></script> <script type="text/javascript" src="https://cdn.myconstellation.io/js/Constellation-1.8.2.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> <script type="text/javascript" src="https://cdn.myconstellation.io/js/ngConstellation-1.8.2.min.js"></script> |
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 :
|
1 2 3 4 5 6 7 |
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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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 :
|
1 2 3 4 5 6 |
$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 :
|
1 2 3 4 5 6 |
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 :
|
1 2 3 |
<ul> <li ng-repeat="s in sentinels">{{s.Description.SentinelName}} [{{s.IsConnected ? "CONNECTED" : "DISCONNECTED"}}] ({{s.Description.OSVersion}})</li> </ul> |
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 :
|
1 2 3 4 |
controller.client.onUpdatePackageList (function (list) { console.log(list); }); controller.server.requestPackagesList("MySentinel"); |
- Avec l’API NG :
|
1 2 3 4 |
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 :
|
1 2 3 4 5 6 |
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” :
|
1 2 3 4 5 |
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 :
|
1 2 3 4 5 6 7 |
<ul> <li ng-repeat="s in sentinels">{{s.Description.SentinelName}} [{{s.IsConnected ? "CONNECTED" : "DISCONNECTED"}}] ({{s.Description.OSVersion}}) <ul> <li ng-repeat="p in s.Packages">{{p.Package.Name}} version {{p.PackageVersion}} [{{p.State}}]</li> </ul> </li> </ul> |
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 :
|
1 2 3 4 5 6 7 |
controller.client.onReportPackageUsage (function (usage) { console.log(usage); }); controller.client.onReportPackageState (function (usage) { console.log(usage); }); |
- Avec l’API NG :
|
1 2 3 4 5 6 7 |
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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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 :
|
1 2 3 4 5 6 7 8 9 10 11 |
<ul> <li ng-repeat="s in sentinels">{{s.Description.SentinelName}} [{{s.IsConnected ? "CONNECTED" : "DISCONNECTED"}}] ({{s.Description.OSVersion}}) <ul> <li ng-repeat="p in s.Packages">{{p.Package.Name}} version {{p.PackageVersion}} [{{p.State}}] <ul> <li>CPU: {{p.CPU | number : 0 }}% - RAM: {{p.RAM / 1024 / 1024 | number: 0}}Mo</li> </ul> </li> </ul> </li> </ul> |
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 :
|
1 2 3 4 5 |
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 :
|
1 2 3 4 5 |
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 :
|
1 |
$scope.controller = controller; |
Dans notre template ajoutons ensuite des boutons en spécifiant l’action du clic grâce à l’attribut “ng-click” :
|
1 2 3 4 |
<button ng-click="controller.start(s.Description.SentinelName, p.Package.Name)">Start</button> <button ng-click="controller.stop(s.Description.SentinelName, p.Package.Name)">Stop</button> <button ng-click="controller.reload(s.Description.SentinelName, p.Package.Name)">Reload</button> <button ng-click="controller.restart(s.Description.SentinelName, p.Package.Name)">Restart</button> |
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é :
|
1 2 3 4 |
<button ng-hide="p.State == 'Started'" ng-click="controller.start(s.Description.SentinelName, p.Package.Name)">Start</button> <button ng-show="p.State == 'Started'" ng-click="controller.stop(s.Description.SentinelName, p.Package.Name)">Stop</button> <button ng-click="controller.reload(s.Description.SentinelName, p.Package.Name)">Reload</button> <button ng-show="p.State == 'Started'" ng-click="controller.restart(s.Description.SentinelName, p.Package.Name)">Restart</button> |
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 :
|
1 2 3 |
controller.client.onReceiveLogMessage(function (log) { console.log(log); }); |
- Avec l’API NG :
|
1 2 3 |
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 :
|
1 2 3 4 5 6 |
$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 :
|
1 2 3 |
<ul> <li ng-repeat="log in logs">{{log.Date | date: 'dd/MM/yyyy HH:mm:ss' }} on {{log.SentinelName}}/{{log.PackageName}} : [{{ log.Level.toUpperCase() }}] {{log.Message}}</li> </ul> |
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 :
|
1 2 3 4 5 |
controller.client.onUpdatePackageDescriptor(function (descriptor) { console.log(descriptor); }); controller.server.requestPackageDescriptor(packageName); |
- Avec l’API NG :
|
1 2 3 4 5 |
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 :
|
1 |
<button ng-click="controller.requestPackageDescriptor(p.Package.Name)">Show MessageCallbacks</button> |
Et dans le code de notre contrôleur, de manière grossière :
|
1 2 3 4 5 6 7 |
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 :
|
1 |
controller.server.purgeStateObjects(sentinelName, packageName, name, type); |
- Avec l’API NG :
|
1 |
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 :
|
1 |
controller.server.reloadServerConfiguration(deployConfiguration); |
- Avec l’API NG :
|
1 |
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.
Démarrez la discussion sur le forum Constellation