Βασικό εργαστήριο 2 — Grafana: μια πηγή, ένα panel, ένας πίνακας ελέγχου

Διάρκεια

20 λεπτά

Ενότητα

1/7

Προαπαιτούμενα

το εργαστήριο τρέχει τουλάχιστον δύο λεπτά (το etat εμφανίζει 8/8 cibles up), το Grafana ανοιχτό στο http://localhost:3000 με admin / aiopsatlas2026, το εργαστήριο 1 ολοκληρωμένο (ξέρεις τι επιστρέφει το count(up))

Θα κατασκευάσεις

έναν πίνακα ελέγχου με ένα μόνο panel, δημιουργημένο με το χέρι στη διεπαφή, αποθηκευμένο, ξαναδιαβασμένο σε JSON, και μετά διαγραμμένο

Παραδοτέο

το μπλοκ JSON του panel όπως το αποθήκευσε το Grafana (βήμα 9), με τρεις λέξεις κυκλωμένες: τον τύπο οπτικοποίησης, το ερώτημα, την πηγή δεδομένων

Πώς να διαβάσεις αυτή τη σελίδα. Δέκα βήματα, μία κίνηση τη φορά. Για καθένα: πού να κάνεις κλικ, τι εμφανίζει το Grafana λέξη προς λέξη, και τι πρέπει να κοιτάξεις. Οι ετικέτες της διεπαφής είναι στα αγγλικά στο Grafana 13.2.2 (αυτό του kit)· παρατίθενται ως έχουν, με έντονα γράμματα. Οι αριθμοί θα είναι διαφορετικοί σε σένα· οι μορφές (αριθμός σειρών, τιμή του panel, μηνύματα) πρέπει να είναι οι ίδιες. Τα μπλοκ «Για να καταλάβεις καλά» είναι προαιρετικά. Αν το εργαστήριο δεν έχει ξεκινήσει, γύρνα στην καθοδηγούμενη πρακτική: η ενότητα Εν συντομία δίνει τις εντολές, μαζί με το kit (https://github.com/hrhouma2/aiopsatlas-observabilite-labo-fr). Όλα όσα δημιουργείς εδώ καταστρέφονται στο βήμα 10: οι τρεις πίνακες ελέγχου που παραδίδονται με το kit δεν αγγίζονται.

Στόχος

Στην καθοδηγούμενη πρακτική, πληκτρολόγησες οκτώ ερωτήματα στο Explore και κοίταξες τρεις έτοιμους πίνακες ελέγχου. Ξέρεις λοιπόν να διαβάζεις το Grafana. Αλλά αν σου ζητήσουν να προσθέσεις έναν αριθμό σε έναν πίνακα, ξέρεις από πού να ξεκινήσεις; Εδώ, ξεκινάς από το μηδέν και συναρμολογείς εσύ ο ίδιος τα τρία αντικείμενα του Grafana, από το μικρότερο στο μεγαλύτερο: μια πηγή δεδομένων (το Grafana δεν αποθηκεύει τίποτα, ρωτά τον Prometheus), ένα panel (ένα ερώτημα πλέον έναν τρόπο να το σχεδιάσεις), έναν πίνακα ελέγχου (panels τοποθετημένα σε ένα πλέγμα, με ένα όνομα και μια διεύθυνση). Ένα βήμα είναι μια εκούσια παγίδα: σπας ένα ερώτημα για να δεις πώς το σφάλμα του Prometheus διαπερνά το Grafana. Στο τέλος, διαβάζεις το JSON που το Grafana έγραψε για σένα και ξαναβρίσκεις εκεί τα τρία αντικείμενα, και μετά διαγράφεις τα πάντα.

Το λεξιλόγιο σε μια εικόνα

Το Grafana είναι μια ψηφιακή κορνίζα. Δεν βγάζει καμία φωτογραφία: πηγαίνει να τις πάρει από έναν φωτογράφο (την πηγή δεδομένων: Prometheus, Loki) και τις εμφανίζει. Κάθε φωτογραφία είναι ένα panel: μια ερώτηση που τίθεται στον φωτογράφο (το ερώτημα) και μια μορφή εμφάνισης (ένας αριθμός, μια καμπύλη, ένα gauge). Η ίδια η κορνίζα, με τις φωτογραφίες της τοποθετημένες σε ένα πλέγμα, είναι ο πίνακας ελέγχου: έχει ένα όνομα, μια διεύθυνση, και είναι αποθηκευμένος στη βάση του Grafana με τη μορφή ενός εγγράφου JSON.

Πού να κάνεις κλικ, και πώς να διαβάζεις μια απόκριση

Άνοιξε το http://localhost:3000. Το κύριο μενού είναι το εικονίδιο με τις τρεις γραμμές πάνω αριστερά: δίνει πρόσβαση στα Dashboards, Explore και Connections. Η διαδρομή πλοήγησης (breadcrumb) στο πάνω μέρος (για παράδειγμα Dashboards › New dashboard) λέει πάντα πού βρίσκεσαι. Όταν μια ενέργεια πετυχαίνει, το Grafana εμφανίζει για λίγα δευτερόλεπτα ένα μπάνερ κάτω δεξιά (ένα toast): Dashboard saved, Dashboard deleted. Όταν ένα ερώτημα αποτυγχάνει, εμφανίζει ένα κόκκινο κουτί κάτω από το πεδίο ερωτήματος, με το μήνυμα του Prometheus αντιγραμμένο ως έχει.

Μόλις αποθηκευτεί ο πίνακας, θα τον ξαναδιαβάσεις σε JSON μέσω του API του Grafana. Σε PowerShell ή σε τερματικό Linux, η ίδια εντολή:

curl -s -u admin:aiopsatlas2026 http://localhost:3000/api/dashboards/uid/<uid>

Το <uid> είναι το αναγνωριστικό που το Grafana έδωσε στον πίνακά σου· θα το διαβάσεις στη διεύθυνση της σελίδας στο βήμα 8.

Βήμα 1 — Έλεγχος της πηγής δεδομένων

Κύριο μενού → Connections → Data sources. Τρεις πηγές παρατίθενται: Alertmanager, Loki και Prometheus (σημειωμένη ως default). Κάνε κλικ στο Prometheus. Ανοίγει η σελίδα Settings, με το Prometheus server URL συμπληρωμένο: http://prometheus:9090. Μην αλλάξεις τίποτα. Κατέβα τελείως κάτω και κάνε κλικ στο Save & test.

Successfully queried the Prometheus API.
Next, you can start to visualize data by building a dashboard from scratch or by querying data in the Explore view.

Τι να κοιτάξεις: το πράσινο μπάνερ. Το Grafana μόλις έστειλε ένα ερώτημα στον Prometheus και ο Prometheus απάντησε. Είναι το πρώτο αντικείμενο: μια πηγή δεδομένων είναι μια διεύθυνση και ένας τύπος. Η διεύθυνση είναι http://prometheus:9090 και όχι http://localhost:9090: το Grafana τρέχει σε ένα container, και από αυτό το container, ο Prometheus ονομάζεται prometheus. Ο browser σου, από την άλλη, τον φτάνει μέσω localhost:9090. Δύο ονόματα για την ίδια μηχανή, ανάλογα με το ποιος μιλά.

Βήμα 2 — Ερώτημα στην πηγή μέσα από το Explore

Κύριο μενού → Explore. Στο πάνω μέρος, ο επιλογέας πηγής εμφανίζει Prometheus. Δεξιά από το πεδίο, πέρασε σε Code (και όχι Builder). Πληκτρολόγησε:

up

μετά Run query (ή Shift+Enter).

up{instance="alertmanager:9093", job="alertmanager"}
up{instance="alloy:12345", job="alloy"}
up{instance="api:8000", job="api", service="api"}
up{instance="cadvisor:8080", job="cadvisor"}
up{instance="grafana:3000", job="grafana"}
up{instance="localhost:9090", job="prometheus"}
up{instance="loki:3100", job="loki"}
up{instance="node-exporter:9100", job="node-exporter"}

Τι να κοιτάξεις: οκτώ γραμμές στο υπόμνημα κάτω από το γράφημα, οι οκτώ σειρές του βήματος 2 του εργαστηρίου 1, σε αλφαβητική σειρά του instance. Το ερώτημα είναι ακριβώς αυτό που πληκτρολόγησες στον Prometheus· το Grafana το μετέδωσε και σχεδίασε την απόκριση. Το Explore είναι ένα πρόχειρο: τίποτα δεν αποθηκεύεται εκεί, είναι το μέρος όπου τελειοποιείς ένα ερώτημα πριν το τοποθετήσεις σε ένα panel.

Βήμα 3 — Η παγίδα: μια παρένθεση λιγότερη

Πάντα στο Explore, αντικατάστησε το ερώτημα με μια λάθος έκδοση, επίτηδες:

count(up

Run query:

bad_data: invalid parameter "query": 1:9: parse error: unclosed left parenthesis

Τι να κοιτάξεις: ένα κόκκινο κουτί κάτω από το πεδίο, και No data στο γράφημα. Το μήνυμα δεν είναι του Grafana: το parse error και η θέση 1:9 είναι του Prometheus, που έμαθες να διαβάζεις στο εργαστήριο 1. Το Grafana προσθέτει μόνο το πρόθεμα bad_data:, την κατηγορία σφάλματος που επιστρέφει το API του Prometheus. Κανόνας: όταν ένα panel του Grafana εμφανίζει ένα σφάλμα PromQL, διόρθωσέ το πρώτα στον Prometheus (http://localhost:9090), και μετά αντίγραψέ το στο Grafana. Κλείσε την παρένθεση, Run query: μία μόνο γραμμή στο υπόμνημα, που το Grafana ονομάζει count(up) ελλείψει labels (ο Prometheus, από την άλλη, έγραφε {}), στο 8. Είναι το ερώτημα που θα τοποθετήσεις στο panel σου.

Βήμα 4 — Δημιουργία ενός κενού πίνακα ελέγχου

Κύριο μενού → Dashboards. Η σελίδα παραθέτει έναν μόνο φάκελο, Labo observabilite, που περιέχει τους τρεις πίνακες του kit. Πάνω δεξιά, New → New dashboard.

New dashboard
Add a panel to visualize your data

Τι να κοιτάξεις: η διαδρομή πλοήγησης λέει Dashboards › New dashboard, η σελίδα είναι κενή, και το κουμπί Save είναι ήδη εκεί πάνω δεξιά. Τίποτα δεν έχει αποθηκευτεί ακόμη: αν κλείσεις την καρτέλα τώρα, δεν μένει τίποτα. Ένας πίνακας ελέγχου υπάρχει μόνο από τη στιγμή που αποθηκεύεται (βήμα 8). Δεξιά, ένα πλευρικό panel Add προτείνει Panel («Drag or click to add a panel»).

Βήμα 5 — Προσθήκη ενός panel χωρίς ερώτημα

Στο πλευρικό panel Add, κάνε κλικ στο Panel. Ένα πλαίσιο εμφανίζεται στο πλέγμα, με τίτλο New panel, με το κείμενο No visualization configured. Δεξιά, το πεδίο Title περιέχει New panel: αντικατάστησέ το με:

Cibles surveillées

Τι να κοιτάξεις: ο τίτλος του πλαισίου αλλάζει ζωντανά. Έχεις ένα panel, αλλά είναι κενό: ούτε ερώτημα, ούτε οπτικοποίηση. Είναι το δεύτερο αντικείμενο, στο ελάχιστό του: μια θέση στο πλέγμα και ένα όνομα. Κάνε κλικ στο Edit visualization στο πλευρικό panel: ανοίγει η σελίδα Edit panel, με κάτω την καρτέλα Queries 1 και, δεξιά, Suggestions / All visualizations.

Βήμα 6 — Τοποθέτηση του ερωτήματος

Στο Queries, η γραμμή A είναι ήδη συνδεδεμένη με Data source : Prometheus (η προεπιλεγμένη πηγή). Πέρασε σε Code, πληκτρολόγησε στο πεδίο Enter a PromQL query…:

count(up)

μετά Run queries (ή Shift+Enter).

Suggestions
Time series · Stat · Gauge · Bar gauge · Table · State timeline · Heatmap · Histogram

Τι να κοιτάξεις: το δεξί τμήμα αλλάζει: κάτω από το Suggestions, το Grafana προτείνει καμιά δεκαριά οπτικοποιήσεις, και κάθε μικρογραφία εμφανίζει ήδη το δεδομένο σου: count(up) και 8. Το πάνω panel, από την άλλη, λέει ακόμη «Run a query to visualize it here or go to all visualizations»: έχει το ερώτημα, δεν έχει ακόμη επιλέξει πώς να το σχεδιάσει. Ερώτημα και οπτικοποίηση είναι δύο ξεχωριστές ρυθμίσεις του ίδιου panel.

Βήμα 7 — Επιλογή της οπτικοποίησης

Στο Suggestions, κάνε κλικ στη μικρογραφία Stat.

Stat
Value options
  Calculate | All values
  Calculation: Last *
Thresholds
  80  (rouge)
  Base  (vert)

Τι να κοιτάξεις: το πάνω panel εμφανίζει τώρα ένα μεγάλο πράσινο 8, με τη μικρή καμπύλη στο φόντο. Το δεξί τμήμα παραθέτει τις επιλογές του Stat, από τις οποίες δύο πρέπει να γνωρίζεις: κάτω από το Value options, το Calculate είναι τσεκαρισμένο και το Calculation ισούται με Last * (το panel δείχνει την τελευταία τιμή της σειράς, όχι έναν μέσο όρο)· κάτω από το Thresholds, δύο βαθμίδες, Base σε πράσινο και 80 σε κόκκινο: η τιμή θα γινόταν κόκκινη από το 80 και πάνω. Αυτά τα κατώφλια είναι αυτά που βάζει το Grafana από προεπιλογή σε κάθε νέο panel· δεν έχουν κανένα νόημα για μια καταμέτρηση στόχων (θα έβλεπες κόκκινο στους 80 στόχους), θα τα διάβαζες και θα τα άλλαζες σε έναν πραγματικό πίνακα. Εδώ, άφησέ τα: αυτό που μετρά είναι να τα αναγνωρίσεις στο JSON.

Βήμα 8 — Αποθήκευση: ένα όνομα, μια διεύθυνση

Πάνω δεξιά, Save. Ανοίγει ο διάλογος Save dashboard, με δύο καρτέλες, Details και Changes 3, και τρία πεδία: Title (New dashboard), Description, Folder (Dashboards).

Τι να κοιτάξεις πρώτα: σβήσε τον τίτλο και κάνε κλικ στο Save: η λέξη Required εμφανίζεται με κόκκινο κάτω από το Title και το κουμπί Save γίνεται γκρι. Ένας πίνακας ελέγχου έχει υποχρεωτικά ένα όνομα. Πληκτρολόγησε:

Atelier M1 - Cibles Prometheus

Το κουμπί επανενεργοποιείται. Κάνε κλικ στο Save.

Dashboard saved

Τι να κοιτάξεις μετά: το μπάνερ Dashboard saved, και μετά τη διεύθυνση της σελίδας:

http://localhost:3000/d/adc947c/atelier-m1-cibles-prometheus?orgId=1&from=now-6h&to=now&timezone=browser

Τρία πράγματα σε αυτή τη διεύθυνση. Το adc947c είναι το uid, που κληρώθηκε τυχαία από το Grafana: είναι η ταυτότητα του πίνακα, σημείωσέ το. Το atelier-m1-cibles-prometheus είναι ο τίτλος μορφοποιημένος ως διεύθυνση· χρησιμεύει μόνο για αναγνωσιμότητα. Το from=now-6h&to=now είναι η εμφανιζόμενη περίοδος, Last 6 hours από προεπιλογή για έναν νέο πίνακα. Το μολύβι πάνω δεξιά (Edit) αντικατέστησε το Save: βρίσκεσαι σε ανάγνωση. Κύριο μενού → Dashboards: ο πίνακάς σου είναι στη λίστα, στη ρίζα, δίπλα στον φάκελο Labo observabilite.

Βήμα 9 — Ξαναδιάβασε το JSON: τα τρία αντικείμενα είναι μέσα

Σε ένα τερματικό, με το δικό σου uid στη θέση του adc947c:

curl -s -u admin:aiopsatlas2026 http://localhost:3000/api/dashboards/uid/adc947c

Η απόκριση είναι ένα έγγραφο JSON. Το μέρος meta του:

"meta": {
  "slug": "atelier-m1-cibles-prometheus",
  "url": "/d/adc947c/atelier-m1-cibles-prometheus",
  "created": "2026-09-15T21:21:02Z",
  "version": 1,
  "folderTitle": "General"
}

Και μέσα στο dashboard, ο πίνακας panels περιέχει ένα μόνο στοιχείο, το panel σου (συντομευμένο στα πεδία που μετρούν):

{
  "type": "stat",
  "title": "Cibles surveillées",
  "datasource": { "type": "prometheus", "uid": "prometheus" },
  "targets": [
    {
      "datasource": { "type": "prometheus", "uid": "prometheus" },
      "editorMode": "code",
      "expr": "count(up)",
      "legendFormat": "__auto",
      "range": true,
      "refId": "A"
    }
  ],
  "fieldConfig": {
    "defaults": {
      "color": { "mode": "thresholds" },
      "thresholds": {
        "mode": "absolute",
        "steps": [
          { "color": "green", "value": 0 },
          { "color": "red", "value": 80 }
        ]
      }
    }
  },
  "options": {
    "colorMode": "value",
    "graphMode": "area",
    "reduceOptions": { "calcs": ["lastNotNull"], "fields": "", "values": false }
  },
  "gridPos": { "h": 8, "w": 12, "x": 0, "y": 0 },
  "id": 1,
  "pluginVersion": "13.2.2"
}

Τι να κοιτάξεις: τα τρία αντικείμενα του εργαστηρίου, γραμμένα ξεκάθαρα. Η πηγή: "datasource": { "type": "prometheus", "uid": "prometheus" }, το uid του αρχείου provisioning του βήματος 1. Το ερώτημα: "expr": "count(up)", μέσα στο targets, με "refId": "A" (το γράμμα της γραμμής στο Queries) και "editorMode": "code". Η οπτικοποίηση: "type": "stat", και οι ρυθμίσεις της από το βήμα 7: το "calcs": ["lastNotNull"] είναι το Last * της οθόνης, τα steps είναι τα δύο Thresholds, green στη βάση και red στο 80. Το gridPos λέει πού είναι το πλαίσιο στο πλέγμα: πάνω αριστερά, 12 στήλες πλάτος από 24, 8 γραμμές ύψος. Ένας πίνακας ελέγχου Grafana δεν είναι παρά αυτό: αυτό το έγγραφο, αποθηκευμένο κάτω από ένα uid. Αυτό είναι το παραδοτέο σου: αυτό το μπλοκ, με stat, count(up) και prometheus κυκλωμένα.

Βήμα 10 — Διαγραφή των πάντων, και απόδειξη

Στη σελίδα του πίνακα, Edit → Options → View all settings. Ανοίγει η σελίδα Settings (καρτέλες General, Annotations, Variables, Links, Versions, Permissions, JSON Model). Τελείως κάτω, το κόκκινο κουμπί Delete dashboard.

Delete
Do you want to delete this dashboard?
Atelier M1 - Cibles Prometheus
Type "Delete" to confirm

Τι να κοιτάξεις: το κουμπί Delete του διαλόγου είναι γκρι όσο δεν έχεις πληκτρολογήσει τη λέξη Delete στο πεδίο. Πληκτρολόγησέ τη, κάνε κλικ στο Delete.

Dashboard deleted
View deleted dashboards

Το Grafana σε επιστρέφει στην αρχική σελίδα. Απόδειξη μέσω του API, με το δικό σου uid:

curl -s -u admin:aiopsatlas2026 http://localhost:3000/api/dashboards/uid/adc947c

{"message":"Dashboard not found"}

Και η πλήρης λίστα των πινάκων ελέγχου:

curl -s -u admin:aiopsatlas2026 "http://localhost:3000/api/search?type=dash-db"

Τρεις καταχωρίσεις, οι τρεις του kit, όλες στον φάκελο Labo observabilite: api-catalogue («API catalogue — signaux dorés», δηλ. API καταλόγου — χρυσά σήματα), hote-conteneurs («Hôte et conteneurs», δηλ. Host και containers), journaux-api («Journaux de l'API», δηλ. Logs του API). Ο δικός σου δεν είναι πλέον εκεί. Ο διάλογος διαγραφής το έλεγε: το Grafana κρατά τους διαγραμμένους πίνακες σε ένα ιστορικό έως δώδεκα μήνες (Recently deleted στη σελίδα Dashboards), από όπου μπορούν να αποκατασταθούν· για αυτό που κάνεις σε αυτό το μάθημα, διαγραμμένο σημαίνει διαγραμμένο.

Τελικός έλεγχος

Ξαναπιάσε τις δέκα κινήσεις από μνήμης, με τη σειρά, και τσέκαρε:

• Connections → Data sources → Prometheus → Save & test επιστρέφει Successfully queried the Prometheus API.
• Στο Explore, το up σε λειτουργία Code επιστρέφει 8 σειρές.
• Το count(up επιστρέφει ένα κόκκινο κουτί bad_data: … parse error: unclosed left parenthesis· το count(up) επιστρέφει {} και 8.
• Dashboards → New → New dashboard ανοίγει μια κενή σελίδα New dashboard, με το Save ήδη ορατό.
• Add → Panel δημιουργεί New panel· το πεδίο Title μετονομάζει το πλαίσιο ζωντανά.
• Το count(up) και μετά Run queries γεμίζει το Suggestions με την τιμή 8 σε κάθε μικρογραφία.
• Η μικρογραφία Stat εμφανίζει ένα μεγάλο 8· το Calculation ισούται με Last *· Thresholds: Base πράσινο, 80 κόκκινο.
• Κενός τίτλος: Required και Save γκρι· τίτλος Atelier M1 - Cibles Prometheus: μπάνερ Dashboard saved και ένα uid στη διεύθυνση.
• Το curl … /api/dashboards/uid/<uid> περιέχει "type": "stat", "expr": "count(up)", "uid": "prometheus".
• Μετά το Delete dashboard, το ίδιο curl επιστρέφει {"message":"Dashboard not found"} και το /api/search?type=dash-db παραθέτει ακριβώς τρεις πίνακες.

Από την πλευρά του εργαστηρίου, τίποτα δεν κουνήθηκε: το etat εμφανίζει πάντα 10/10 services, 8/8 cibles up, 0 alertes actives. Το Grafana έγραψε και μετά έσβησε μια γραμμή στη δική του βάση· ο Prometheus δεν είδε τίποτα να περνά.

Αν κολλήσει