Guide Template kibana-hakabana. Joshua Monier

Transcription

1 Guide Template kibana-hakabana. 1 sur 14

2 Sommaire : I. Introduction : 3 II. Ce que nous voulons : 4 III. Comment y parvenir? 5 1. Le changement de couleur de fond : 5 2. Changer la couleur du graphe : 6 3. Modification d un bloc (facette, taille, etc) : 7 4. Bouger les blocs : 9 IV. Pourquoi deux Dashboard? 13 2 sur 14

3 I. Introduction : Dans le dernier tutoriel/guide sur Haka et Hakabana, nous avons vu comment procéder pour l installation. A la fin de ce guide nous avons également vu, très rapidement, comment changer de logo pour modifier un peu le dashboard et ainsi rendre un peu plus personnel ce dernier. Ce guide a pour but de vous montrer les possibilités de modifications de notre dashboard pour vraiment le rendre plus personnel et dans mon exemple suivre une certaine charte graphique de l entreprise pour laquelle je déploie haka/hakabana. Voici à quoi ressemble actuellement mon dashboard, on voit bien le logo qui est celui de l entreprise. serval-concept.com a une charte graphique basée sur des couleurs claires et vives, les trois couleurs principales sont le bleu cyan et le rose sur un fond blanc et une écriture grisée (je ne mets pas le code couleur, ce n est pas ce qui nous intéresse). Il y a également une très mauvaise disposition des blocs de camemberts, barres, histogramme, map etc. 3 sur 14

4 II. Ce que nous voulons : Le but de ce guide est de vous montrer les différentes modifications que nous pouvons faire, sans toucher une seule partie du code source. Voici ce que moi j ai réussi à faire : Comme vous pouvez le voir c est différent et pourtant il n y a pas de difficultés à faire cela (une fois en main kibana ou une fois ce guide lu ;) ) comme vous pouvez le voir les couleurs des barres et des camemberts n ont pas changé, il y a une raison à cela, c est que c est tout simplement impossible. Kibana 3 n intègre pas cette option, hors, les développeurs ont pris en note cela et l ont intégrée à Kibana 4. Mais pour l instant Hakabana travaille avec Kibana 3, dommage pour cette option. 4 sur 14

5 III. Comment y parvenir? Nous allons procéder étape par étape. Le changement de fond, le redimensionnement des blocs, passer du camembert à des barres, tout cela est possible en quelques clics. 1. Le changement de couleur de fond : Il vous suffit de suivre les étapes, cliquez sur la roulette crantée «configure Dashboard» en haut à droite du dashboard : Vous verrez un aperçu de la partie configuration de votre dashboard, ici on s intéresse au premier onglet. Comme vous pouvez le voir vous avez la partie «Title» qui permet de renommer votre dashboard et la partie «style» ici nous avons «dark» et «light», libre à vous, si vous faites du CSS, de faire votre propre style ;), ici nous choisirons «light» pour avoir notre fond blanc. Puis «save» pour appliquer notre changement. Note importante : bien que le fait de cliquer sur «Save» nous permette de changer et d appliquer nos modifications, si vous rafraîchissez votre page vous retomberez sur votre ancien Dashboard! Pourquoi? Tout simplement car votre kibana va chercher votre fichier sur le disque dur et celui-ci nous ne l avons pas modifié. Pour avoir le changement permanent même après un rafraîchissement ou un reboot de votre machine il suffit de cliquer sur la disquette de sauvegarde en haut à droite. Notez aussi que si vous renommez le dashboard, cela fait exactement le même effet que de changer «Title» dans les paramètres vus plus haut. 5 sur 14

6 Et voici ce que nous avons : 2. Changer la couleur du graphe : Nous ne pouvons peut-être pas changer la couleur par défaut des camemberts, etc, mais le graphe qui se nomme ici «total Alerts» ne régit pas de la même façon. Voyez-vous il récupère ces données directement par des «query» (questions) que nous demandons à notre dashboard. Et ça nous pouvons totalement jouer dessus il suffit d aller dans votre panel «query» bouton bleu en haut à gauche et de jouer directement sur la couleur de la query que vous voulez modifier. 1) On clique sur QUERY 3) On choisit notre couleur 2) Puis sur la couleur (petit rond) 4) On clique sur close et voilà. 6 sur 14

7 3. Modification d un bloc (facette, taille, etc) : À présent nous voulons modifier notre camembert qui se nomme «Severity» en effet il n y a que deux termes présents et au pire trois (Low, Medium, High) et la présence d un camembert n est pas utile, de simples barres verticales suffiront largement et prendront moins de place (donc moins de ressources graphiques ;) ) Chaque bloc dispose d'une roue crantée, qui permet la configuration. Comme pour la page de configuration principale, un bandeau apparaît avec plusieurs onglets : «General», «Panel» et «Queries», dans ce guide nous allons surtout voir les deux premiers. Commençons par «General» : 7 sur 14

8 Ici comme d habitude un champ «Title» pour donner un titre à notre bloc, et surtout un champ «Span» qui, lui, joue sur la largeur du bloc. Voyons ce que cela donne si je mets le maximum 12 : La largeur du bloc a grandement augmenté! Si je mets le minimum j aurai le droit à un tout petit camembert. Par défaut laissons-le à 3. Ensuite allons sur le deuxième onglet mais occupons-nous seulement de la partie «View options»; Dans Style vous avez «Pie (camembert)», «table (tableau basique)», et «Bar (les barres que nous voulons). «Legend», c est la légende. On peut choisir de la mettre au-dessus (above), en-dessous (below) ou pas du tout la mettre (none). «Legend format», si vous voulez lister votre légende de façon horizontale ou verticale. «Missing», ajout des informations qui devaient être présentes mais qui ont été perdues. «Other» sont des informations qui ne sont pas prises en compte dans la configuration de bloc, mais qui sont bien présentes, par exemple si on traque les protocoles utilisés et qu on veut les protocoles UPD, TCP, ICMP et c est tout. En cochant «Other» nous aurons dans ce champ tous les autres protocole non pris en compte. «Donut» nous permet de mettre un trou dans le camembert ou non, d où le nom «donut» :) «Tilt» donne un effet au camembert de profondeur/écrasé. «Labels» lui, affiche les noms des champs, ici, Low, Médium, High. 8 sur 14

9 Donc nous voulons un bloc de «Severity» avec des barres et non un donut ; Il suffit de continuer nos changements sur les autres blocs, jouer avec les tailles, etc pour avoir ce que nous voulons, un dashboard clair, lisible et léger. 4. Bouger les blocs : Avant de vous montrer comment bouger les blocs, il faut savoir que tous les blocs ici présents appartiennent à des rangées (row), les rangées sont juste des dossiers pour bien organiser nos blocs et ne pas tout mélanger, avoir un certain ordre de rangement. Pour configurer ces rangées il suffit de regarder à gauche des premiers blocs et y voir trois couleurs : bleu, orange et vert. Le bleu permet de masquer la rangée ou la faire apparaître. L orange permet de la configurer. Le vert permet d ajouter un nouveau bloc. 9 sur 14

10 Tiens, et si l on masquait tout pour voir vraiment ce que cela donne? : Vous pouvez à présent bouger vos blocs à volonté et surtout les déplacer d une rangée à une autre, les rangées sont vraiment juste là pour ordonner vos blocs. Pour déplacer un bloc (panel) il suffit juste de maintenir le clic sur le bouton «Drag here To move» et le faire glisser là où vous le désirez. 10 sur 14

11 On glisse Et on lâche J ai fait exprès de réduire la fenêtre de mon navigateur internet pour que vous voyez que notre bloc s adapte à la largeur de l écran, pensez donc à prendre cela en compte ;) 11 sur 14

12 Il ne vous reste plus qu à vous amuser, laisser place à vos désirs et à votre imagination, voici en ce qui me concerne mes deux Dashboard : 12 sur 14

13 13 sur 14

14 IV. Pourquoi deux Dashboard? Oui, pourquoi ne pas tout mettre en un seul dashboard? Déjà, Kibana fonctionne en java et prend donc énormément de ressources. Si en plus vous lui demandez de surveiller le trafic http, les protocoles et en plus de cela surveiller les alertes ICMP, TCP leurs niveaux, etc, votre navigateur va très vite ramer. De plus, certains dashboards fonctionnent avec un index bien particulier d elasticsearch tandis que d'autres fonctionnent avec un autre index, ils ne sont donc pas compatibles les uns avec les autres. Pensez donc à bien catégoriser vos dashboards, ici j ai un dashboard alerte et un dashboard trafic web. ;) 14 sur 14