{"id":26623,"date":"2020-06-03T00:00:00","date_gmt":"2020-06-02T22:00:00","guid":{"rendered":"https:\/\/blexin.com\/?p=26623"},"modified":"2021-05-21T18:56:28","modified_gmt":"2021-05-21T16:56:28","slug":"creare-dashboard-con-elasticsearch-e-kibana","status":"publish","type":"post","link":"https:\/\/blexin.com\/it\/blog\/creare-dashboard-con-elasticsearch-e-kibana\/","title":{"rendered":"Creare Dashboard con ElasticSearch e Kibana"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Nei miei precedenti articoli (qui il primo<\/a> e il secondo<\/a>), ho mostrato come utilizzare ElasticSearch come motore di ricerca full-text in un e-commerce del settore tecnologico, visto alcune configurazioni avanzate e realizzato un indice products<\/code> su cui sono stati salvati tutti i prodotti.<\/p>\n\n\n\n

A fini dimostrativi, abbiamo utilizzato la libreria Bogus per la generazione dinamica di prodotti e la libreria NEST per la CRUD sull\u2019indice di ElasticSearch.<\/p>\n\n\n\n

La nostra classe di modello Product \u00e8 cos\u00ec definita:<\/p>\n\n\n

\npublic class Product\n{\n\u00a0\u00a0\u00a0\u00a0public int Id { get; set; }\n\u00a0\u00a0\u00a0\u00a0public string Ean { get; set; }\n\u00a0\u00a0\u00a0\u00a0public string Name { get; set; }\n\u00a0\u00a0\u00a0\u00a0public string Description { get; set; }\n\u00a0\u00a0\u00a0\u00a0public Brand Brand { get; set; }\n\u00a0\u00a0\u00a0\u00a0public Category Category { get; set; }\n\u00a0\u00a0\u00a0\u00a0public Store Store { get; set; }\n\u00a0\u00a0\u00a0\u00a0public decimal Price { get; set; }\n\u00a0\u00a0\u00a0\u00a0public string Currency { get; set; }\n\u00a0\u00a0\u00a0\u00a0public int Quantity { get; set; }\n\u00a0\u00a0\u00a0\u00a0public float Rating { get; set; }\n\u00a0\u00a0\u00a0\u00a0public DateTime ReleaseDate { get; set; }\n\u00a0\u00a0\u00a0\u00a0public string Image { get; set; }\n\u00a0\u00a0\u00a0\u00a0public List<review> Reviews { get; set; }\n}\n<\/pre><\/div>\n\n\n
dove le classi Brand, Category, Store, Review e User sono rispettivamente:<\/p>\n\n\n
\npublic class Brand\n{\n\u00a0\u00a0\u00a0\u00a0public int Id { get; set; }\n\u00a0\u00a0\u00a0\u00a0public string Name { get; set; }\n\u00a0\u00a0\u00a0\u00a0public string Description { get; set; }\n}\n\u00a0\npublic class Category\n{\n\u00a0\u00a0\u00a0\u00a0public int Id { get; set; }\n\u00a0\u00a0\u00a0\u00a0public string Name { get; set; }\n\u00a0\u00a0\u00a0\u00a0public string Description { get; set; }\n}\n\u00a0\npublic class Store\n{\n\u00a0\u00a0\u00a0\u00a0public int Id { get; set; }\n\u00a0\u00a0\u00a0\u00a0public string Name { get; set; }\n\u00a0\u00a0\u00a0\u00a0public string Description { get; set; }\n}\n\u00a0\npublic class Review\n{\n\u00a0\u00a0\u00a0\u00a0public int Id { get; set; }\n\u00a0\u00a0\u00a0\u00a0public short Rating { get; set; }\n\u00a0\u00a0\u00a0\u00a0public string Description { get; set; }\n\u00a0\u00a0\u00a0\u00a0public User User { get; set; }\n}\n\u00a0\npublic class User\n{\n\u00a0\u00a0\u00a0\u00a0public int Id { get; set; }\n\u00a0\u00a0\u00a0\u00a0public string FirstName { get; set; }\n\u00a0\u00a0\u00a0\u00a0public string LastName { get; set; }\n\u00a0\u00a0\u00a0\u00a0public string IPAddress { get; set; }\n\u00a0\u00a0\u00a0\u00a0public GeoIp GeoIp { get; set; }\n}\n<\/pre><\/div>\n\n\n
GeoIP \u00e8 una classe della libreria NEST utilizzata per i riferimenti geografici.<\/p>\n\n\n\n
Come step successivo, mostriamo come creare una dashboard su cui possano essere visualizzate in maniera efficace i prodotti e le ricerche effettuate su di essi, al fine di elaborare statistiche pi\u00f9 o meno avanzate.<\/p>\n\n\n\n
Piuttosto che sviluppare una soluzione custom con determinati effort in termini di tempo, abbiamo deciso di utilizzare Kibana<\/a>, un\u2019applicazione front end che fa parte dello stack di ElasticSearch e che ci fornisce la possibilit\u00e0 di visualizzare i dati e le ricerche per tutti i dati indicizzati, oltre che tracciare graficamente il carico delle query.<\/p>\n\n\n\n
Kibana pu\u00f2 anche essere utilizzata per il monitoraggio, la gestione e la sicurezza dello stesso stack.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Per l\u2019installazione e la configurazione, basta andare sulla pagina https:\/\/www.elastic.co\/downloads\/kibana<\/a>, dove possiamo trovare gli installer per tutte le piattaforme, e scaricare quello adatto alle nostre esigenze.<\/p>\n\n\n\n
Una volta scaricato e decompresso in una cartella di riferimento, nel nostro caso C:\\ElasticSearch\\Kibana, apriamo il file config\/kibana.yml e settiamo il parametro elasticsearch.hosts affinch\u00e8 punti alla nostra istanza di ElasticSearch (per le versioni locali, ricordiamo che \u00e8 http:\/\/localhost:9200<\/a>):<\/p>\n\n\n\n
elasticsearch.hosts: [\"http:\/\/localhost:9200\"]<\/code><\/p>\n\n\n\n
Eseguiamo bin\/kibana.bat e apriamo da browser la pagina http:\/\/localhost:5601<\/a>. La pagina che visualizziamo \u00e8 questa:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
L\u2019interfaccia di Kibana \u00e8 divisa in sezioni.<\/p>\n\n\n\n
Nella versione open source sono disponibili: Discover (esplora interattivamente i dati), Visualize (analizza i dati in grafici, tabelle, tag), Dashboards (crea viste complesse con i dati), Canvas (crea documenti), Maps (analizza i dati georeferenziati), Dev Tools (fornisce strumenti per elaborare ed analizzare le query), e Management (gestione di indici e cluster).<\/p>\n\n\n\n
\u00c8 possibile installare, inoltre, il plugin X-Pack per utilizzare le sezioni Graph and Monitoring.<\/p>\n\n\n\n
Andiamo nella sezione Management -> Elasticsearch -> Index Management per verificare che gli indici Elasticsearch siano stati rilevati correttamente:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Il nostro indice products<\/code>, \u00e8 presente, e possiamo verificarne il mapping e la corrispondenza col nostro modello dei dati:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Per creare un indice Kibana, basta andare nella sezione Management -> Kibana -> Index Patterns e digitare un testo che consenta di collegare il nuovo indice a uno o pi\u00f9 indici di ElasticSearch.<\/p>\n\n\n\n
Nel nostro caso, digitiamo products<\/code>, cos\u00ec da creare il nostro indice Kibana.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Una volta creato l\u2019indice, nella sezione Discover \u00e8 possibile filtrare i dati per data, per uno o pi\u00f9 campi:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Tramite la barra di ricerca, possiamo effettuare query tra i prodotti utilizzando il linguaggio KQL (Kibana Query language), che consente in maniera semplice di effettuare query utilizzando anche l\u2019autocomplete. Ad esempio, potremmo digitare:<\/p>\n\n\n\n
category.name : Games AND rating > 0.5<\/code><\/p>\n\n\n\n
per conoscere tutti i prodotti della categoria Games che hanno un rating superiore a 0.5.<\/p>\n\n\n\n
Per visualizzare solo alcuni campi, basta aggiungerli a Selected fields, in modo da avere una vista customizzata.<\/p>\n\n\n\n
Una volta aggiunto l\u2019indice e verificato il corretto funzionamento delle query su di esso, possiamo creare nuove visualizzazioni di dati.<\/p>\n\n\n\n
Le visualizzazioni consistono in grafici di vario tipo (a barre, torte), tabelle, indicatori, metriche, tag cloud e, naturalmente, supportano le aggregazioni dei dati.<\/p>\n\n\n\n
Nella sezione Visualize possiamo creare una nuova visualizzazione dei dati sotto forma di grafici di vario tipo.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Creiamo, ai fini statistici, alcuni grafici dei prodotti raggruppati per categoria, brand, utilizzando dei semplici grafici a barre verticali. Otterremo risultati simili alla foto seguente<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u00c8 possibile aggiungere dei filtri a questa visualizzazione. Ad esempio, nel nostro caso vogliamo vedere solo prodotti disponibili nello store, e digitiamo quantity > 0<\/code> nella barra dei filtri. Clicchiamo su Save e salviamo la nostra visualizzazione.<\/p>\n\n\n\n
Un\u2019altra utile visualizzazione \u00e8 quella dei prodotti per fasce di prezzo. In questo caso definiamo dei bucket sul campo price e li utilizziamo per un grafico a torta. Dividiamo i prodotti per le seguenti fasce di prezzo:<\/p>\n\n\n\n
0     50
50    100
100   200
200   400
400   800
800<\/code><\/p>\n\n\n\n
Il risultato \u00e8 simile al seguente:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Possiamo aggiungere dei sub-bucket per avere dati aggregati ed una visualizzazione innestata.<\/p>\n\n\n\n
Per visualizzare contenuti georeferenziati vengono utilizzate le Elastic Maps, che sono mappe multilayer accessibili nella sezione Maps.<\/p>\n\n\n\n
Cliccando su Add layer, possiamo aggiungere dati dal nostro indice, specificando quale campo contiene informazioni geografiche (nel nostro caso geoIp.location<\/code>).<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Una volta create le visualizzazioni, passiamo alla nostra prima Dashboard, ovvero un insieme di visualizzazioni, ricerche e mappe, solitamente in tempo reale, che fornisce informazioni di alto livello sui dati dell\u2019indice.<\/p>\n\n\n\n
Nella sezione Dashboard clicchiamo su Create a new dashboard. Clicchiamo su Add e inseriamo le visualizzazioni appena create:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Le aggiungiamo tutte e le disponiamo sulla dashboard. Il risultato finale \u00e8 simile al seguente:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Le dashboard possono essere filtrate tramite query KQL, e la visualizzazione rimane sempre dinamica. \u00c8 possibile inoltre condividerle ed integrarle all\u2019interno delle nostre Web application, tramite iframe. Se clicchiamo su Share -> Copy Iframe Code otterremo un link da copiare:<\/p>\n\n\n\n
<iframe src=\"http:\/\/localhost:5601\/app\/kibana#\/dashboard?embed=true\" height=\"600\" width=\"800\"><\/iframe><\/code><\/p>\n\n\n\n
Un\u2019altra interessante funzionalit\u00e0 di Kibana \u00e8 Canvas, uno strumento per la visualizzazione e la presentazione dei dati che, come la Dashboard, mostra dati in tempo reale e li combina con colori, immagini e testo per creare viste dinamiche.<\/p>\n\n\n\n
Nella sezione Canvas, clicchiamo su Create workpad e iniziamo ad aggiungere le metriche. Nel nostro caso, inseriamo metriche per i prodotti e gli articoli disponibili, i brand e le categorie presenti, un grafico a torta per la coppia brand-categoria e una media dei prezzi degli articoli per brand.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Una volta creato il workpad pu\u00f2 essere condiviso come file JSON o scaricato come report PDF.<\/p>\n\n\n\n
Altre interessanti funzionalit\u00e0 sono:<\/p>\n\n\n\n