Créer un tableau de bord avec le widget Personnalisé dans la console Web
Important
Cette version d’Operations Manager a atteint la fin du support. Nous vous recommandons de mettre à niveau vers Operations Manager 2022.
Dans System Center Operations Manager, la console Web fournit une interface permettant l’analyse d’un groupe d’administration. Cette interface peut être ouverte sur des ordinateurs équipés d'un navigateur et qui ont une connexion au serveur de console Web. Les étapes suivantes décrivent comment ajouter un widget personnalisé à un tableau de bord dans la nouvelle console Web HTML5, qui utilise une nouvelle API basée sur REST. Il exécute le code HTML spécifié et visualise la sortie souhaitée dans différentes visualisations.
Notes
Operations Manager 2019 UR1 (et versions ultérieures) prend en charge les jetons de falsification de requête intersites (CSRF, Cross Site Request Forgery) pour empêcher les attaques CSRF. Si vous utilisez Operations Manager 2019 UR1 ou version ultérieure, vous devez initialiser le jeton CSRF. Les scripts HTML ne fonctionnent pas sans l’initialisation du jeton CSRF.
Initialiser le jeton CSRF
Action requise, qui s’applique à Operations Manager 2019 UR1 et aux versions ultérieures.
- Dans l’en-tête HTML du tableau de bord, ajoutez le code suivant :
var requestHeaders = {
Accept: 'q=0.8;application/json;q=0.9',
"Content-Type": "application/json"
};
InitializeCSRFToken();
function InitializeCSRFToken() {
var documentcookies = document.cookie.split('; ');
var result = {};
for (var i = 0; i < documentcookies.length; i++) {
var cur = documentcookies[i].split('=');
result[cur[0]] = cur[1];
}
if (result["SCOM-CSRF-TOKEN"] && result["SCOM-CSRF-TOKEN"] != null) {
requestHeaders["SCOM-CSRF-TOKEN"] = decodeURIComponent(result["SCOM-CSRF-TOKEN"]);
}
}
- Dans la fonction onload, remplacez la valeur d’en-tête par requestHeaders. Si la valeur d’en-tête n’existe pas, ajoutez-la comme indiqué ci-dessous.
Exemple :
Utiliser les informations de référence sur l’API REST Operations Manager
Utilisez la référence de l’API REST pour en savoir plus sur les opérations disponibles que vous pouvez effectuer avec le widget personnalisé pour présenter des données opérationnelles dans le tableau de bord. Si vous débutez avec l’API REST, consultez les informations sur la prise en main de cette API si vous ne l’avez pas déjà vue.
Structure du script
Un script Widget personnalisé comporte trois sections principales :
- La définition de l’API REST et de ses propriétés. Cette section définit les données à extraire d’Operations Manager pour visualisation, telles que les alertes, l’état et les données de performances.
- Spécifiez une logique métier pour identifier les résultats à présenter dans la visualisation, notamment l’identification d’une classe ou d'un groupe, les conditions telles que la gravité, l’état d’intégrité ou une instance d’objet de performance spécifique.
- Visualisation tierce, qui est des bibliothèques open source hébergées sur cloudflare.com requises pour afficher les données en fonction du type de graphique sélectionné.
Propriétés de widget
Pour que le script effectue des requêtes de données et renvoie les données dans la visualisation, le paramètre URL spécifie l’adresse de la console Web d’Operations Manager et le type de données. La syntaxe de l’URL est http://< servername>/operationsmanager/data/<dataitem> et la valeur de dataitem est l’une des suivantes :
- alert représente une alerte de surveillance
- state représente les données d’état d’intégrité d’analyse
- performance représente les données de performances d’analyse
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var criticalCounter = 0;
var informationCounter = 0;
var warningCounter = 0;
window.onload = function () {
$.ajax({
url: "/OperationsManager/data/alert",
type: "POST",
Pour limiter les données d’analyse pour chaque type de données, vous pouvez sélectionner une classe pour voir toutes les instances de cette classe ou, pour voir uniquement un sous-ensemble des objets de la classe sélectionnée, vous pouvez également inclure un groupe. Par exemple, pour spécifier tous les objets de la classe d’ordinateur contrôleur de domaine Windows Server, vous devez modifier la valeur de propriété pour classId.
Notes
Cela s’applique uniquement aux données state, pas alert ni performance. Pour les données de performances, spécifiez un groupe ou un objet supervisé.
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var criticalCounter = 0;
var informationCounter = 0;
var warningCounter = 0;
window.onload = function () {
$.ajax({
url: "/OperationsManager/data/alert",
type: "POST",
data: JSON.stringify({
"classId": "Microsoft.Windows.Library!Micr…ft.Windows.Server.DC.Computer",
"objectIds": { }),
Pour spécifier un groupe qui contient un sous-ensemble d’objets de la même classe spécifiée pour la propriété classId, modifiez la valeur objectIds et spécifiez le GUID du groupe. La valeur doit être entre guillemets.
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var criticalCounter = 0;
var informationCounter = 0;
var warningCounter = 0;
window.onload = function () {
$.ajax({
url: "/OperationsManager/data/alert",
type: "POST",
data: JSON.stringify({
"classId": null,
"objectIds": { "3c8ac4f3-475e-44dd-4163-8a97af363705": -1 }),
Une fois que vous avez spécifié la classe cible et éventuellement un groupe pour étendre davantage les résultats, vous pouvez spécifier les critères pour limiter le type de données à afficher en fonction des valeurs d’une ou de plusieurs propriétés.
Exemples de widget
Le widget prend en charge le rendu des données d'analyse dans les types de graphiques suivants :
- Graphique à barres (données d’état)
- Graphique en spline (données de performances)
- Graphique à barres (données d’alerte)
- Graphique en secteurs et en secteurs 3D
- Graphique en anneau et en anneau 3D
- Graphique combiné
- Graphique à barres empilées
Vous pouvez configurer un type de graphique pour présenter les données d’état, de performances et d’alerte. Pour chacun des exemples ci-dessous, les alertes provenant du groupe d’ordinateurs Windows sont renvoyées pour tout niveau de gravité correspondant à des états de résolution spécifique.
Sélectionnez l’onglet requis pour afficher le code HTML correspondant au type de graphique respectif :
- Graphique à barres (données d’état)
- Graphique en spline (données de performances)
- Graphique à barres (données d’alerte)
- Graphique à secteurs
- Graphique en secteurs 3D
- Graphique en anneau
- Graphique en anneau 3D
- Graphique combiné
Le code HTML suivant illustre le rendu d’un graphique à barres avec des données d’état :
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var criticalCounter = 0;
var healthyCounter = 0;
var warningCounter = 0;
var unmonitoredCounter = 0;
window.onload = function () {
$.ajax({
url: "/OperationsManager/data/state",
type: "POST",
data: JSON.stringify({
"classId": "System.Library!System.Computer",
"objectIds": {
// Key value pairs => id: 0 (For objects)/-1 (For groups)
"1d62280e-f437-1369-316b-1e8659500e9a": -1
},
"criteria": "((HealthState = '0') OR (HealthState = '1') OR (HealthState = '2') OR (HealthState = '3') OR HealthState is null)",
"displayColumns": [
"healthstate",
"displayname",
"path",
"maintenancemode"
]
}),
success: function (result) {
for (var i = 0; i < result.rows.length; i++) {
switch (result.rows[i].healthstate) {
case "critical":
criticalCounter++;
break;
case "healthy":
healthyCounter++;
break;
case "warning":
warningCounter++;
break;
case "unmonitored":
unmonitoredCounter++;
break;
}
}
renderChart();
}
});
}
function renderChart() {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Health State of Windows Computers"
},
data: [{
type: "column",
dataPoints: [
{ y: criticalCounter, label: "Critical", color: "Red" },
{ y: healthyCounter, label: "Healthy", color: "Green" },
{ y: warningCounter, label: "Warning", color: "Yellow" },
{ y: unmonitoredCounter, label: "Unmonitored", color: "Gray" }
]
}]
});
chart.render();
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
<title>CanvasJS Example</title>
</head>
<body>
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
</body>
</html>
Ajouter un widget au tableau de bord
Ouvrez un navigateur web sur un ordinateur quelconque et entrez
http://<web host>/OperationsManager
, oùhttp://<web host>/OperationsManager
est le nom de l’ordinateur qui héberge la console web.Dans le volet gauche de la console web, sélectionnez + Nouveau tableau de bord.
Sur la page Créer un tableau de bord, fournissez un nom et une description pour le tableau de bord que vous souhaitez créer.
Vous pouvez enregistrer le tableau de bord dans un pack d’administration non scellé existant en sélectionnant le pack d’administration dans la liste déroulante Pack d’administration ou vous pouvez enregistrer le tableau de bord en créant un pack d’administration en sélectionnant Nouveau en regard de la liste déroulante Pack d’administration et en fournissant un nom, une description et éventuellement un numéro de version.
Une fois que vous avez spécifié où enregistrer le nouveau tableau de bord, sélectionnez OK.
Sélectionnez Enregistrer après avoir fourni un nom et une description pour le nouveau tableau de bord.
Dans le tableau de bord vide, vous voyez les options Nom du tableau de bord, Ajouter un widget, Modifier le tableau de bord, Supprimer le tableau de bord et Afficher en plein écran en haut de la page.
Sélectionnez Widget personnalisé dans la liste déroulante Sélectionner un widget .
Dans le volet Widget personnalisé, sélectionnez critères pour le widget ajoutant le code HTML à l’aide de l’un des exemples précédents pour visualiser les données de surveillance dans l’une des visualisations de graphique prises en charge.
Pour terminer la configuration, donnez un Nom, une Description et un Intervalle d’actualisation du widget (par défaut, cinq minutes) au widget. Sélectionnez Enregistrer le widget pour enregistrer votre nouveau tableau de bord.
Une fois le widget créé, il affiche la sortie du code HTML.
Commentaires
https://aka.ms/ContentUserFeedback.
Bientôt disponible : Tout au long de 2024, nous allons supprimer progressivement GitHub Issues comme mécanisme de commentaires pour le contenu et le remplacer par un nouveau système de commentaires. Pour plus d’informations, consultezEnvoyer et afficher des commentaires pour