10 astuces pour un tableau de bord avancé dans Splunk. Partie 1

Bon après-midi

Aujourd'hui, nous voulons partager avec vous un initié de l'événement annuel à grande échelle Splunk .conf18, qui a eu lieu début octobre. Splunk .conf est l'endroit où les experts et les développeurs Splunk partagent leurs expériences, diverses pièces et des outils utiles pour travailler.

Dans deux articles, nous parlerons de 10 hacks de vie pour les développeurs de tableaux de bord qui ont été proposés lors de la conférence. Pourquoi parlons-nous de cela? Parce que plus l’application est belle, plus les informations y sont perçues. Afin de créer de très bons tableaux de bord, il existe déjà de nombreux outils intégrés ou facilement intégrables, bien que tout le monde ne sache pas où et comment les trouver. En savoir plus sur eux et comment les utiliser, voir sous la coupe.

Afin de développer des tableaux de bord avancés dans Splunk, il est conseillé de se familiariser au moins avec les choses suivantes:

• XML simple
• Javascript
• CSS
• jQuery

Mais même si vous n'êtes pas familier, pour des choses pas très compliquées (mais toujours au-delà de la portée de la visualisation automatique de base), vous pouvez trouver des exemples, des blancs ou rapidement le découvrir vous-même.

0. Exemples de tableaux de bord Splunk

Avant de passer à des puces spécifiques, il convient de noter qu'il existe une application spéciale avec des exemples de tableaux de bord de complexité variable, ainsi que des scripts qui se trouvent derrière ces tableaux de bord. Après avoir parcouru cette application, vous pouvez obtenir des idées, voir comment un graphique particulier est implémenté, trouver des modèles de script css et js, en général, une chose utile.



Vous pouvez télécharger le lien .

1. Mode de développement

Pour éviter de nombreux bogues lors du développement des tableaux de bord, en particulier lors des tests de CSS et JS, il est recommandé d'apporter des modifications au processus de mise en cache et de mise à jour.

Web.conf

Vous devez créer (ou modifier) ​​le fichier de configuration /etc/system/local/web.conf, en ajoutant les paramètres suivants:

[settings]
minify_js = False
minify_css = False
js_no_cache = True
cacheEntriesLimit = 0
cacheBytesLimit = 0
enableWebDebug = True

Navigateur

Désactivez la mise en cache dans le navigateur.

Par exemple, pour Google Chrome, cela peut être fait dans la section "Code de page":

Mise à jour sélective

Il convient de noter que vous pouvez redémarrer Splunk non seulement via la ligne de commande ou l'interface Web, mais également via l'URL:

http://localhost:8000/en-US/debug/refresh

En conséquence, vous obtiendrez un rapport indiquant qu'une centaine d'éléments ont été mis à jour (cela prend parfois beaucoup de temps)


Mais il n'est pas toujours nécessaire de tout mettre à jour, donc en cas de mise à jour via / debug / refresh, vous pouvez spécifier des éléments spécifiques qui doivent être rechargés.

Un exemple d'URL qui vous permet de recharger uniquement les fichiers de navigation et les tableaux de bord eux-mêmes:

http://localhost:8000/en-US/debug/refresh?entity=data/ui/views&entity=data/ui/nav

Rapport:

Entity refresh control page
===========================
'''
Forces a refresh on splunkd resources

This method calls a splunkd refresh on all registered EAI handlers that
advertise a reload function. Alternate entities can be specified by appending
them via URI parameters. For example,

http://localhost:8000/debug/refresh?entity=admin/conf-times&entity=data/ui/manager

will request a refresh on only 'admin/conf-times' and 'data/ui/manager'.

1) not all splunkd endpoints support refreshing.
2) auth-services is excluded from the default set, as refreshing that system will
logout the current user; use the 'entity' param to force it
'''

Refreshing data/ui/views OK
Refreshing data/ui/nav OK
DONE

2. Contenu dynamique

Souvent, les données sont hétérogènes, loin de toujours tous les graphiques sont pertinents en mode constant. Comment s'assurer de ne pas regarder, par exemple, une carte vierge? (Ou tout autre diagramme pour lequel à un moment donné il n'y a pas assez d'informations)



Cet exemple est basé sur la commande iplocation, qui donne la latitude et la longitude par adresse IP, qui sont ensuite mappées. Mais si soudain notre recherche est basée sur une adresse IP "grise", par exemple 127.0.0.1, alors l'équipe ne nous donnera pas le résultat et il n'y aura rien sur la carte.

Afin de ne pas regarder la carte vide, des jetons viendront à la rescousse.

Nous imposons la condition que si la valeur du champ lat (latitude) est vide, alors il n'y aura pas de jeton, et si la valeur est présente, nous mettrons le jeton à une certaine valeur.

  <search id="map_search"> <query> | makeresults | eval ipaddr="$ipaddr$" | iplocation ipaddr </query> <progress> <condition match='$result.lat$!=""'> <set token="show_map">true</set> </condition> <condition> <unset token="show_map"></unset> </condition> </progress> </search> 

Et puis on établit la dépendance du panel avec la carte sur ce token.

  <panel depends="$show_map$"> <map> <title>The map shows up if geostats can determine lat and lon</title> <search base="map_search"> <query>geostats count by ipaddr</query> </search> </map> </panel> 

Voici ce qui s'est passé:





Les jetons sont un outil très puissant pour créer des tableaux de bord dynamiques. Vous pouvez en savoir plus à leur sujet ici.

3. Bootstrap

Bootstrap est un ensemble gratuit d'outils pour créer des sites Web et des applications Web. Comprend des modèles de conception HTML et CSS pour la typographie, les formulaires Web, les boutons, les balises, les blocs de navigation et d'autres composants d'interface Web, y compris les extensions JavaScript.

Avec lui, vous pouvez simplement obtenir beaucoup de fitch cool pour vos tableaux de bord hors de la boîte. De plus, Bootstrap est reconnu par Splunk lui-même comme un outil pour travailler avec ses tableaux de bord.

Par exemple, à l'aide d'un modèle, ajoutez une boîte de dialogue à notre tableau de bord.



Pour ce faire, nous allons ajouter un bouton qui fait apparaître une boîte de dialogue utilisant le code suivant:

 <panel> <html> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true"/> </button> </div> <div class="modal-body"> 204.107.141.22 is a San Francisco IP address. </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </html> </panel> 

Vous pouvez trouver ce code sur getbootstrap.com via le lien .

Veillez à ce que le code fonctionne correctement et que les éléments apparaissent sur le tableau de bord, le code doit être à l'intérieur du panneau et vous devez également indiquer qu'il s'agit de html.

 <panel> <html>   … </html> </panel> 

Outre les boîtes de dialogue, il y a bien plus. Nous vous conseillons d'étudier attentivement le site getbootstrap.com et tous les outils présentés.

4. Sources statiques

Quelles sont les sources statiques? Ce sont différentes images, icônes, styles, scripts que vous pouvez placer ou appliquer sur des tableaux de bord.

Ils doivent être stockés dans le système de fichiers:
$SPLUNK_HOME/etc/apps/<your_app>/appserver/static/<your_resource>

L'accès peut également être obtenu via l'URL:
http://splunk_adress :splunk_port/static/app/<your_app>/<your_resource>

Par exemple, ajoutez une icône à l'en-tête du tableau.



Pour ce faire, vous devez convertir le titre du panneau en html et utiliser la balise title et y ajouter une icône à l'aide de la balise image.

  <panel> <html> <h3 class="dashboard-element-title">IP Address Details <img src="/static/app/dashboard_tips/info.png"/> </h3> </html> <table> <search base="map_search"></search> </table> </panel> 

Vous pouvez également ajouter une image / icône, du texte, un code, etc. à un panneau vide:

  <panel> <html> <p> <img src="/static/app/dashboard_tips/info.png"/> This image lives here on the file system: <code>$SPLUNK_HOME/etc/apps/APP_NAME/appserver/static</code> </p> </html> </panel> 

5. Guide de style Splunk

Ceci est un guide des couleurs, des icônes, des tailles de police, etc. qui peuvent être utilisés pour les tableaux de bord Splunk afin de ne pas sortir de la conception globale. Les éléments peuvent être référencés en tant que classe et utilisés dans leurs tableaux de bord.

Vous pouvez trouver le Guide de style à l'URL suivante:
http:// splunk_adress:splunk_port /en-US/static/docs/style/style-guide.html





Ajoutons une icône d'utilisateur du Guide de style au tableau de bord, en modifiant encore sa taille et sa couleur.



Pour ce faire, nous utilisons le code suivant:

  <panel> <html> <p> Check it out: <br /> <i class="icon-user"></i> </p> <p> Change the font size: <br /><br /> <i class="icon-user" style="font-size:3em"></i> </p> <p> Change the color: <br /><br /> <i class="icon-user" style="font-size:3em; color: #5CC05C"></i> </p> </html> </panel> 

Dans cet article, nous avons examiné des exemples simples de la façon dont vous pouvez configurer la dynamique sur un tableau de bord, y placer différents éléments, comment rechercher et ajouter différents modèles. Dans le prochain article, nous allons passer à l'implémentation de choses plus complexes en utilisant JavaScript.

Une application avec les exemples présentés peut être trouvée sur GitHub .