Diferència entre revisions de la pàgina «Ús de Grafana llegint dades de MariaDB»

De binefa.com
Salta a la navegació Salta a la cerca
m
 
(Hi ha 7 revisions intermèdies del mateix usuari que no es mostren)
Línia 2: Línia 2:
  
 
= Accés a Grafana =
 
= Accés a Grafana =
Hi ha tres tipus d'usuario a [https://grafana.com/ Grafana]: ''Administrador'', ''Editor'' i ''Visualitzador''.
+
Hi ha tres tipus d'usuari a [https://grafana.com/ Grafana]: ''Administrador'', ''Editor'' i ''Visualitzador''.
  
[[Image:28grafanaAdminUsers012023.png|center|Exemple d'usuarios a Grafana]]
+
[[Image:28grafanaAdminUsers012023.png|center|Exemple d'usuaris a Grafana]]
  
 
El primer cop que entreu a Grafana (port 3000 del localhost: http://localhost:3000) les credencials d'accés són ''admin''/''admin'' i es requereix un canvi de contrasenya. El segon cop ja hi heu d'accedir amb la nova contrasenya.
 
El primer cop que entreu a Grafana (port 3000 del localhost: http://localhost:3000) les credencials d'accés són ''admin''/''admin'' i es requereix un canvi de contrasenya. El segon cop ja hi heu d'accedir amb la nova contrasenya.
Línia 15: Línia 15:
 
[[Image:24grafanaAdminDataSource2023.png|center|Establiment de l'origen de dades]]
 
[[Image:24grafanaAdminDataSource2023.png|center|Establiment de l'origen de dades]]
  
 +
Canvieu '''aula206''' per '''aula508''':
  
 
[[Image:25grafanaAdminDataSource022023.png|center|Establiment de l'origen de dades]]
 
[[Image:25grafanaAdminDataSource022023.png|center|Establiment de l'origen de dades]]
  
 
== Usuaris ==
 
== Usuaris ==
 +
[[Image:27grafanaAdminUsers002023.png|center|Nous usuaris]]
 +
= Edició =
 +
Entreu amb el vostre usuari.
 +
== Creació d'un tauler de control ==
 +
=== Creació d'un nou tauler de control ===
 +
[[Image:22grafanaCreateDashboard2023.png|center|Creació d'un nou tauler de control]]
 +
=== Heu de treure el límit de 50 punts per gràfica ===
 +
Treure el límit de 50 punts per gràfica (seleccioneu el commutador '''Order''' i esborreu el número 50):
 +
 +
[[Image:23grafanaCreateDashboard2023.png|center|Treure el límit de 50 punts per gràfica]]
 +
 +
=== Origen de dades ('''Dataset''') ===
 +
Origen de dades a visualitzar ('''Dataset''' <-- ''aula508''):
 +
[[Image:24grafanaCreateDashboard2023.png|center|Selecció de l'origen de dades]]
 +
==== Generació de dades per a visualitzar ====
 +
Aprofitant l'exercici ''Aleatorizació controlada pel tauler de control'', farem servir les dades generades i emmagatzemades a MariaDB per a visualitzar-les a Grafana.
 +
 +
[[Image:25nodoMariaDbNodeRed.png|center|Generació de dadess aleatòries]]
  
[[Image:27grafanaAdminUsers002023.png|center|Nous usuaris]]
+
Al seleccionar el commutador (''switch'') '''Randomize''' comença la generació de dades aleatòries. Al deseleccionar-lo s'atura la generació de dades.
 +
 
 +
[[Image:26nodoMariaDbNodeRed.png|center|Generació de dades aleatòries]]
 +
 
 +
[https://www.binefa.cat/training/upcSchool/2023/20230415/26nodeRedRandomUi.nodered.json Codi del NodeRED que genera dues dades aleatòries]
 +
 
 +
=== Selecció de taula i dades a visualitzar ===
 +
Seleccioneu una taula vista amb '''time''' amb format d''''època UNIX'''. Després seleccioneu la columna '''time''' i les dades a visualitzar ('''valueT''')
 +
[[Image:25grafanaCreateDashboard2023.png|center|Selecció de taula i dades a visualitzar]]
 +
 
 +
Afegiu més dades a visualitzar (afegiu '''valueRH''')
 +
[[Image:26grafanaCreateDashboard2023.png|center|Selecció de taula i dades a visualitzar]]
 +
 
 +
== Paràmetres de la gràfica ==
 +
 
 +
[[Image:30grafanaPanelSettings2023.png|center|Paràmetres]]
 +
 
 +
 
 +
[[Image:31grafanaPanelSettings2023.png|center|Paràmetres]]
 +
 
 +
 
 +
[[Image:32grafanaPanelSettings2023.png|center|Paràmetres]]
 +
 
 +
 
 +
[[Image:33grafanaPanelSettings2023.png|center|Paràmetres]]
 +
 
 +
== Paràmetres de l'estat (''stat'') ==
 +
[[Image:34grafanaStat2023.png|center|Paràmetres de l'estat]]
 +
 
 +
== Paràmetres del rellotge de visualització (''gauge'') ==
 +
 
 +
[[Image:35grafanaGauge2023.png|center|Paràmetres del rellotge de visualització]]
 +
 
 +
== Visualització final amb 3 elements ==
 +
Deseu el tauler de control a una carpeta:
 +
[[Image:38grafana3elements2023.png|center|Visualització final amb 3 elements]]

Revisió de 20:17, 21 gen 2024

Exemple de visualització a Grafana

Accés a Grafana[modifica]

Hi ha tres tipus d'usuari a Grafana: Administrador, Editor i Visualitzador.

Exemple d'usuaris a Grafana

El primer cop que entreu a Grafana (port 3000 del localhost: http://localhost:3000) les credencials d'accés són admin/admin i es requereix un canvi de contrasenya. El segon cop ja hi heu d'accedir amb la nova contrasenya.

Primera pantalla de Grafana com a administrador

Administració[modifica]

Establiment de l'origen de dades[modifica]

Establiment de l'origen de dades

Canvieu aula206 per aula508:

Establiment de l'origen de dades

Usuaris[modifica]

Nous usuaris

Edició[modifica]

Entreu amb el vostre usuari.

Creació d'un tauler de control[modifica]

Creació d'un nou tauler de control[modifica]

Creació d'un nou tauler de control

Heu de treure el límit de 50 punts per gràfica[modifica]

Treure el límit de 50 punts per gràfica (seleccioneu el commutador Order i esborreu el número 50):

Treure el límit de 50 punts per gràfica

Origen de dades (Dataset)[modifica]

Origen de dades a visualitzar (Dataset <-- aula508):

Selecció de l'origen de dades

Generació de dades per a visualitzar[modifica]

Aprofitant l'exercici Aleatorizació controlada pel tauler de control, farem servir les dades generades i emmagatzemades a MariaDB per a visualitzar-les a Grafana.

Generació de dadess aleatòries

Al seleccionar el commutador (switch) Randomize comença la generació de dades aleatòries. Al deseleccionar-lo s'atura la generació de dades.

Generació de dades aleatòries

Codi del NodeRED que genera dues dades aleatòries

Selecció de taula i dades a visualitzar[modifica]

Seleccioneu una taula vista amb time amb format d'època UNIX. Després seleccioneu la columna time i les dades a visualitzar (valueT)

Selecció de taula i dades a visualitzar

Afegiu més dades a visualitzar (afegiu valueRH)

Selecció de taula i dades a visualitzar

Paràmetres de la gràfica[modifica]

Paràmetres


Paràmetres


Paràmetres


Paràmetres

Paràmetres de l'estat (stat)[modifica]

Paràmetres de l'estat

Paràmetres del rellotge de visualització (gauge)[modifica]

Paràmetres del rellotge de visualització

Visualització final amb 3 elements[modifica]

Deseu el tauler de control a una carpeta:

Visualització final amb 3 elements