{"id":52343,"date":"2019-11-06T00:00:00","date_gmt":"2019-11-05T21:00:00","guid":{"rendered":"https:\/\/prohoster.info\/blog\/blog_prohoster\/razrabotka-plagina-dlya-grafana-istoriya-nabityh-shishek"},"modified":"2020-02-18T14:00:02","modified_gmt":"2020-02-18T11:00:02","slug":"razrabotka-plagina-dlya-grafana-istoriya-nabityh-shishek","status":"publish","type":"post","link":"https:\/\/prohoster.info\/hu\/blog\/administrirovanie\/razrabotka-plagina-dlya-grafana-istoriya-nabityh-shishek","title":{"rendered":"Grafana plugin fejleszt\u00e9s: a tapasztalatok t\u00f6rt\u00e9nete","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p>\u00dcdv mindenkinek! N\u00e9h\u00e1ny h\u00f3nappal ezel\u0151tt elind\u00edtottuk \u00faj open-source projekt\u00fcnket \u2014 Grafana plugint a Kubernetes monitoroz\u00e1s\u00e1hoz, amit a k\u00f6vetkez\u0151 n\u00e9ven h\u00edvtunk: <b><noindex><a rel=\"nofollow\" href=\"https:\/\/grafana.com\/grafana\/plugins\/devopsprodigy-kubegraf-app\">DevOpsProdigy KubeGraf<\/a><\/noindex><\/b>. A plugin forr\u00e1sk\u00f3dja el\u00e9rhet\u0151 a <noindex><a rel=\"nofollow\" href=\"https:\/\/github.com\/devopsprodigy\/kubegraf\">nyilv\u00e1nos GitHub t\u00e1rol\u00f3ban<\/a><\/noindex>. Ebben a cikkben szeretn\u00e9nk megosztani veletek a t\u00f6rt\u00e9netet arr\u00f3l, hogyan k\u00e9sz\u00edtett\u00fck el a plugint, milyen eszk\u00f6z\u00f6ket haszn\u00e1ltunk \u00e9s milyen buktat\u00f3kkal tal\u00e1lkoztunk a fejleszt\u00e9s sor\u00e1n. Kezdj\u00fck!<br \/>\n<noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><\/p>\n<h4>0. r\u00e9sz \u2014 bevezet\u00e9s: hogyan jutottunk el id\u00e1ig?<\/h4>\n<p>\nAz \u00f6tlet, hogy saj\u00e1t Grafana plugint k\u00e9sz\u00edts\u00fcnk, teljesen v\u00e9letlen\u00fcl sz\u00fcletett meg. C\u00e9g\u00fcnk m\u00e1r t\u00f6bb mint 10 \u00e9ve foglalkozik webprojektek monitoroz\u00e1s\u00e1val, k\u00fcl\u00f6nb\u00f6z\u0151 bonyolults\u00e1gi szinteken. Ez id\u0151 alatt jelent\u0151s tapasztalatot \u00e9s \u00e9rdekes esettanulm\u00e1nyokat halmoztunk fel, tapasztalatokat k\u00fcl\u00f6nb\u00f6z\u0151 monitoroz\u00f3 rendszerek haszn\u00e1lat\u00e1val. \u00c9s egy ponton felvetett\u00fck a k\u00e9rd\u00e9st: \u201eVan-e var\u00e1zsszersz\u00e1m a Kubernetes monitoroz\u00e1s\u00e1ra, amivel, ahogy mondani szokt\u00e1k, csak felrakod \u00e9s megfeledkezel r\u00f3la?\u201d... A Kubernetes monitoroz\u00e1s\u00e1nak ipari szabv\u00e1nya term\u00e9szetesen r\u00e9g\u00f3ta a Prometheus + Grafana kombin\u00e1ci\u00f3. K\u00fcl\u00f6nf\u00e9le k\u00e9sz megold\u00e1sok sokas\u00e1ga \u00e1ll rendelkez\u00e9sre ehhez a stackhez: prometheus-operator, a kubernetes-mixin dashboardok gy\u0171jtem\u00e9nye, grafana-kubernetes-app. <\/p>\n<p>A leg\u00e9rdekesebb lehet\u0151s\u00e9g sz\u00e1munkra a grafana-kubernetes-app plugin volt, de ezt m\u00e1r t\u00f6bb mint egy \u00e9ve nem t\u00e1mogatj\u00e1k, \u00e9s emellett nem m\u0171k\u00f6dik az \u00faj node-exporter \u00e9s kube-state-metrics verzi\u00f3kkal. Egy ponton \u00fagy d\u00f6nt\u00f6tt\u00fcnk: \u201eMi\u00e9rt ne k\u00e9sz\u00edthetn\u00e9nk el saj\u00e1t megold\u00e1sunkat?\u201d<\/p>\n<p>Milyen \u00f6tleteket val\u00f3s\u00edtottunk meg a saj\u00e1t pluginunkban:<\/p>\n<ul>\n<li>alkalmaz\u00e1s-t\u00e9rk\u00e9p vizualiz\u00e1l\u00e1sa: k\u00e9nyelmes megjelen\u00edt\u00e9s a klaszterben l\u00e9v\u0151 alkalmaz\u00e1sokr\u00f3l, namespace-ek \u00e9s deployments szerint csoportos\u00edtva...<\/li>\n<li>a \u201edeployment \u2014 service (+ports)\u201d t\u00edpus\u00fa kapcsolatok vizualiz\u00e1l\u00e1sa.<\/li>\n<li>a klaszter alkalmaz\u00e1sainak eloszl\u00e1s\u00e1nak vizualiz\u00e1l\u00e1sa a klaszter nodjai szerint.<\/li>\n<li>metrik\u00e1k \u00e9s inform\u00e1ci\u00f3k gy\u0171jt\u00e9se t\u00f6bb forr\u00e1sb\u00f3l: Prometheus \u00e9s k8s API szerver.<\/li>\n<li>monitoroz\u00e1s az infrastrukt\u00fara r\u00e9sz\u00e9nek (processzorid\u0151, mem\u00f3ria, t\u00e1rol\u00f3 alrendszer, h\u00e1l\u00f3zat haszn\u00e1lata) \u00e9s az alkalmaz\u00e1sok logik\u00e1j\u00e1nak \u2014 pod-ok health-statusa, el\u00e9rhet\u0151 replik\u00e1k sz\u00e1ma, liveness\/readyness pr\u00f3b\u00e1k teljes\u00edt\u00e9se \u2014 figyelemmel k\u00eds\u00e9r\u00e9s\u00e9vel.<\/li>\n<\/ul>\n<p><\/p>\n<h4>1. r\u00e9sz: Mi az a \u201eGrafana plugin\u201d?<\/h4>\n<p>\nM\u0171szaki szempontb\u00f3l a Grafana plugin egy Angular-vez\u00e9rl\u0151, amely a Grafana data k\u00f6nyvt\u00e1r\u00e1ban tal\u00e1lhat\u00f3 (<i>\/var\/grafana\/plugins\/&lt;your_plugin_name&gt;\/dist\/module.js<\/i>) \u00e9s bet\u00f6lthet\u0151 mint SystemJS-modul. Ezen a mapp\u00e1n bel\u00fcl egy plugin.json f\u00e1jlnak is helyet kell kapnia, amely tartalmazza a b\u0151v\u00edtm\u00e9nyed metaadatait: n\u00e9v, verzi\u00f3, b\u0151v\u00edtm\u00e9ny t\u00edpusa, linkek a rep\u00f3hoz\/weboldalhoz\/enged\u00e9lyhez, f\u00fcgg\u0151s\u00e9gek \u00e9s \u00edgy tov\u00e1bb.<\/p>\n<p><img decoding=\"async\" alt=\"Grafana plugin fejleszt\u00e9s: a tapasztalatok t\u00f6rt\u00e9nete\" src=\"\/wp-content\/uploads\/2019\/11\/5993fec77a3904ed8b9e19a5addbb6ea.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>module.ts<\/i><\/p>\n<p><img decoding=\"async\" alt=\"Grafana plugin fejleszt\u00e9s: a tapasztalatok t\u00f6rt\u00e9nete\" src=\"\/wp-content\/uploads\/2019\/11\/1e5b780837e5a9385e5e22a27d83f567.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>plugin.json<\/i><\/p>\n<p>Ahogy a k\u00e9perny\u0151k\u00e9pen l\u00e1that\u00f3, a plugin.type = app \u00e9rt\u00e9ket \u00e1ll\u00edtottuk be. Mivel a Grafana b\u0151v\u00edtm\u00e9nyei h\u00e1romf\u00e9lek\u00e9ppen oszthat\u00f3k meg:<\/p>\n<p><b>panel<\/b>: a legelterjedtebb b\u0151v\u00edtm\u00e9nyt\u00edpus \u2014 egy panelt jelent, amely k\u00fcl\u00f6nb\u00f6z\u0151 metrik\u00e1k vizualiz\u00e1l\u00e1s\u00e1ra szolg\u00e1l, \u00e9s k\u00fcl\u00f6nb\u00f6z\u0151 m\u0171szerfalak l\u00e9trehoz\u00e1s\u00e1ra haszn\u00e1lj\u00e1k.<br \/>\n<b>datasource<\/b>: egy b\u0151v\u00edtm\u00e9ny-kapcsol\u00f3 valamilyen adatforr\u00e1shoz (p\u00e9ld\u00e1ul Prometheus-datasource, ClickHouse-datasource, ElasticSearch-datasource).<br \/>\n<b>app<\/b>: egy b\u0151v\u00edtm\u00e9ny, amely lehet\u0151v\u00e9 teszi, hogy saj\u00e1t frontend alkalmaz\u00e1st \u00e9p\u00edts Grafana-n bel\u00fcl, saj\u00e1t html-oldalakat hozz l\u00e9tre, \u00e9s manu\u00e1lisan h\u00edvj meg adatforr\u00e1st, hogy k\u00fcl\u00f6nb\u00f6z\u0151 adatokat vizualiz\u00e1lj. Tov\u00e1bb\u00e1 m\u00e1s t\u00edpus\u00fa b\u0151v\u00edtm\u00e9nyek (datasource, panel) \u00e9s k\u00fcl\u00f6nb\u00f6z\u0151 m\u0171szerfalak is haszn\u00e1lhat\u00f3k mint f\u00fcgg\u0151s\u00e9gek.<\/p>\n<p><img decoding=\"async\" alt=\"Grafana plugin fejleszt\u00e9s: a tapasztalatok t\u00f6rt\u00e9nete\" src=\"\/wp-content\/uploads\/2019\/11\/3cd53c7c3a2635f3f20831d52198b5f0.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>P\u00e9lda egy b\u0151v\u00edtm\u00e9ny f\u00fcgg\u0151s\u00e9geire, ahol a type = app<\/i>.<\/p>\n<p>A programoz\u00e1si nyelv lehet JavaScript vagy TypeScript (mi ut\u00f3bbit v\u00e1lasztottuk). V\u00e1lasztott p\u00e9ld\u00e1k hello-world b\u0151v\u00edtm\u00e9nyekhez b\u00e1rmilyen t\u00edpusban <noindex><a rel=\"nofollow\" href=\"https:\/\/github.com\/CorpGlory\">megtal\u00e1lhat\u00f3k a linken<\/a><\/noindex>: ebben a rep\u00f3ban sz\u00e1mos starter-pack tal\u00e1lhat\u00f3 (m\u00e9g egy k\u00eds\u00e9rleti React alap\u00fa b\u0151v\u00edtm\u00e9ny p\u00e9ld\u00e1t is tal\u00e1lni lehet) el\u0151re telep\u00edtett \u00e9s konfigur\u00e1lt \u00f6ssze\u00e1ll\u00edt\u00f3kkal. <\/p>\n<h4>2. r\u00e9sz: a helyi k\u00f6rnyezet el\u0151k\u00e9sz\u00edt\u00e9se<\/h4>\n<p>\nA b\u0151v\u00edtm\u00e9ny fejleszt\u00e9s\u00e9hez term\u00e9szetesen sz\u00fcks\u00e9g\u00fcnk van egy kubernetes klaszterre, amely teljes k\u00f6r\u0171en rendelkezik az el\u0151re telep\u00edtett eszk\u00f6z\u00f6kkel: prometheus, node-exporter, kube-state-metrics, grafana. A k\u00f6rnyezetnek gyorsan, k\u00f6nnyen \u00e9s z\u00f6kken\u0151mentesen kell telep\u00fclnie, \u00e9s a hot-reload biztos\u00edt\u00e1sa \u00e9rdek\u00e9ben a Grafana data-mapp\u00e1j\u00e1t k\u00f6zvetlen\u00fcl a fejleszt\u0151 g\u00e9p\u00e9r\u0151l kell csatolni.<\/p>\n<p>A legk\u00e9nyelmesebb megold\u00e1s a helyi munk\u00e1ra a kubernetes eset\u00e9ben <noindex><a rel=\"nofollow\" href=\"https:\/\/kubernetes.io\/docs\/tasks\/tools\/install-minikube\/\">minikube<\/a><\/noindex>. A k\u00f6vetkez\u0151 l\u00e9p\u00e9sben telep\u00edtj\u00fck a Prometheus + Grafana csomagot a prometheus-operator seg\u00edts\u00e9g\u00e9vel. A <noindex><a rel=\"nofollow\" href=\"https:\/\/medium.com\/faun\/trying-prometheus-operator-with-helm-minikube-b617a2dccfa3\">k\u00f6vetkez\u0151 cikkben<\/a><\/noindex> folyamat r\u00e9szletes le\u00edr\u00e1sa megtal\u00e1lhat\u00f3 a prometheus-operator minikube-ra val\u00f3 telep\u00edt\u00e9s\u00e9ben. A perzisztencia aktiv\u00e1l\u00e1s\u00e1hoz be kell \u00e1ll\u00edtani a parameter <i>persistence: true<\/i> \u00e9rt\u00e9kre a charts\/grafana\/values.yaml f\u00e1jlban, saj\u00e1t PV-t \u00e9s PVC-t kell l\u00e9trehozni, \u00e9s azokat meg kell adni a persistence.existingClaim parameter-ben.<\/p>\n<p>A minikube ind\u00edt\u00f3 skript v\u00e9gs\u0151 form\u00e1ja a k\u00f6vetkez\u0151k\u00e9ppen n\u00e9z ki:<\/p>\n<pre><code class=\"plaintext\">minikube start --kubernetes-version=v1.13.4 --memory=4096 --bootstrapper=kubeadm --extra-config=scheduler.address=0.0.0.0 --extra-config=controller-manager.address=0.0.0.0\nminikube mount \n\/home\/sergeisporyshev\/Projects\/Grafana:\/var\/grafana --gid=472 --uid=472 --9p-version=9p2000.L<\/code><\/pre>\n<p><\/p>\n<h4>3. r\u00e9sz: k\u00f6zvetlen\u00fcl a fejleszt\u00e9s<\/h4>\n<p>\n<b>Objektum modell<\/b><\/p>\n<p>A plugin megval\u00f3s\u00edt\u00e1s\u00e1nak el\u0151k\u00e9sz\u00edt\u00e9sek\u00e9nt \u00fagy d\u00f6nt\u00f6tt\u00fcnk, hogy le\u00edrjuk azokat az alapvet\u0151 Kubernetes entit\u00e1sokat, amelyekkel dolgozni fogunk TypeScript-oszt\u00e1lyok form\u00e1j\u00e1ban: pod, deployment, daemonset, statefulset, job, cronjob, service, node, namespace. Mindegyik oszt\u00e1ly \u00f6r\u00f6kli a BaseModel k\u00f6z\u00f6s oszt\u00e1lyt, amely tartalmazza az konstruktort, destruktort, friss\u00edt\u0151 \u00e9s l\u00e1that\u00f3s\u00e1gi v\u00e1lt\u00f3 m\u00f3dszereket. Minden oszt\u00e1lyban le van \u00edrva a m\u00e1s entit\u00e1sokkal val\u00f3 be\u00e1gyazott kapcsolat, p\u00e9ld\u00e1ul a deployment t\u00edpus\u00fa entit\u00e1s pod-jainak list\u00e1ja.<\/p>\n<pre><code class=\"plaintext\">import {Pod} from \".\/pod\";\nimport {Service} from \".\/service\";\nimport {BaseModel} from '.\/traits\/baseModel';\n\nexport class Deployment extends BaseModel{\n   pods: Array;\n   services: Array;\n\n   constructor(data: any){\n       super(data);\n       this.pods = [];\n       this.services = [];\n   }\n}<\/code><\/pre>\n<p>\nA getterek \u00e9s setterek r\u00e9v\u00e9n k\u00e9nyelmes \u00e9s olvashat\u00f3 m\u00f3don megjelen\u00edthetj\u00fck vagy be\u00e1ll\u00edthatjuk a sz\u00fcks\u00e9ges entit\u00e1sm\u00e9r\u0151sz\u00e1mokat. P\u00e9ld\u00e1ul a form\u00e1zott kimenet az allocatable CPU nod-r\u00f3l:<\/p>\n<pre><code class=\"plaintext\">get cpuAllocatableFormatted(){\n   let cpu = this.data.status.allocatable.cpu;\n   if(cpu.indexOf('m') &gt; -1){\n       cpu = parseInt(cpu)\/1000;\n   }\n   return cpu;\n}<\/code><\/pre>\n<p>\n<b>Oldalak<\/b><\/p>\n<p>A pluginunk \u00f6sszes oldal\u00e1nak list\u00e1ja kezdetben a pluing.json f\u00e1jlunkon bel\u00fcl a f\u00fcgg\u0151s\u00e9gek szakasz\u00e1ban van le\u00edrva:<\/p>\n<p><img decoding=\"async\" alt=\"Grafana plugin fejleszt\u00e9s: a tapasztalatok t\u00f6rt\u00e9nete\" src=\"\/wp-content\/uploads\/2019\/11\/b86c74839ad0d9c64b97ffc3f2a84bdf.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nMinden oldal blokkban meg kell adnunk az OLDAL NEV\u00c9T (ezut\u00e1n slug-ra lesz konvert\u00e1lva, amelyen kereszt\u00fcl az oldal el\u00e9rhet\u0151 lesz); a lap m\u0171k\u00f6d\u00e9s\u00e9\u00e9rt felel\u0151s komponens nev\u00e9t (a komponensek list\u00e1ja a module.ts f\u00e1jlba van export\u00e1lva); a felhaszn\u00e1l\u00f3 szerep\u00e9nek megjel\u00f6l\u00e9s\u00e9t, akinek hozz\u00e1f\u00e9r\u00e9se van ehhez az oldalhoz, valamint a navig\u00e1ci\u00f3 be\u00e1ll\u00edt\u00e1sait az oldals\u00e1vhoz. <\/p>\n<p>A lap m\u0171k\u00f6d\u00e9s\u00e9\u00e9rt felel\u0151s komponensben meg kell adnunk a templateUrl-t, \u00e1tadva az html-f\u00e1jl \u00fatvonal\u00e1t a kin\u00e9zethez. A kontrollerben, a dependency injection r\u00e9v\u00e9n, hozz\u00e1f\u00e9rhet\u00fcnk 2 fontos angular-szolg\u00e1ltat\u00e1shoz:<\/p>\n<ul>\n<li>backendSrv \u2014 a Grafana api-szerver\u00e9vel val\u00f3 interakci\u00f3t biztos\u00edt\u00f3 szolg\u00e1ltat\u00e1s;<\/li>\n<li>datasourceSrv \u2014 a Grafana-n\u00e1l telep\u00edtett \u00f6sszes datasource helyi interakci\u00f3j\u00e1t biztos\u00edt\u00f3 szolg\u00e1ltat\u00e1s (p\u00e9ld\u00e1ul a .getAll() m\u00f3dszer \u2014 visszaadja az \u00f6sszes telep\u00edtett datasource list\u00e1j\u00e1t; .get() \u2014 visszaadja a konkr\u00e9t datasource objektum p\u00e9ld\u00e1ny\u00e1t.<\/li>\n<\/ul>\n<p>\n<img decoding=\"async\" alt=\"Grafana plugin fejleszt\u00e9s: a tapasztalatok t\u00f6rt\u00e9nete\" src=\"\/wp-content\/uploads\/2019\/11\/e616e74c2e31ca3a81b7ed91ca333208.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<img decoding=\"async\" alt=\"Grafana plugin fejleszt\u00e9s: a tapasztalatok t\u00f6rt\u00e9nete\" src=\"\/wp-content\/uploads\/2019\/11\/5e1d45f570dda50774088405abb41c9f.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<img decoding=\"async\" alt=\"Grafana plugin fejleszt\u00e9s: a tapasztalatok t\u00f6rt\u00e9nete\" src=\"\/wp-content\/uploads\/2019\/11\/c072867623824e799518984c7b1bee93.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<\/p>\n<h4>4. r\u00e9sz: datasource<\/h4>\n<p>\nGrafana szempontj\u00e1b\u00f3l a datasource pontosan olyan plugint k\u00e9pvisel, mint a t\u00f6bbi: van egy entry point-ja module.js, valamint egy plugin.json f\u00e1jl metaadatokkal. App t\u00edpus\u00fa plugin fejleszt\u00e9sekor k\u00f6lcs\u00f6nhat\u00e1sba l\u00e9phet\u00fcnk megl\u00e9v\u0151 datasource-okkal (p\u00e9ld\u00e1ul prometheus-datasource), illetve saj\u00e1t magunk \u00e1ltal l\u00e9trehozottakkal is, amelyeket k\u00f6zvetlen\u00fcl a plugin k\u00f6nyvt\u00e1r\u00e1ban (dist\/datasource\/*) t\u00e1rolhatunk vagy mint f\u00fcgg\u0151s\u00e9get telep\u00edthet\u00fcnk. A mi eset\u00fcnkben a datasource egy\u00fctt \u00e9rkezik a plugin k\u00f3dj\u00e1val. Ezenk\u00edv\u00fcl k\u00f6telez\u0151 a config.html sablon megl\u00e9te, \u00e9s a ConfigCtrl vez\u00e9rl\u0151, amelyek a datasource p\u00e9ld\u00e1ny\u00e1nak konfigur\u00e1l\u00e1s\u00e1ra \u00e9s a Datasource vez\u00e9rl\u0151 logik\u00e1j\u00e1nak megval\u00f3s\u00edt\u00e1s\u00e1ra szolg\u00e1lnak.<\/p>\n<p>A KubeGraf pluginban, a felhaszn\u00e1l\u00f3i fel\u00fclet szempontj\u00e1b\u00f3l a datasource egy kubernetes klaszter p\u00e9ld\u00e1ny\u00e1t jelenti, amely a k\u00f6vetkez\u0151 funkci\u00f3kat val\u00f3s\u00edtja meg (a forr\u00e1sk\u00f3d el\u00e9rhet\u0151 <noindex><a rel=\"nofollow\" href=\"https:\/\/github.com\/devopsprodigy\/kubegraf\/tree\/master\/src\/datasource\">a linken<\/a><\/noindex>):<\/p>\n<ul>\n<li>adatok beszerz\u00e9se a k8s api-server\u00e9b\u0151l (namespace-ok, deployment-ek list\u00e1j\u00e1nak lek\u00e9r\u00e9se\u2026)<\/li>\n<li>k\u00e9r\u00e9sek proxiz\u00e1l\u00e1sa a prometheus-datasource fel\u00e9 (amely minden egyes klaszter eset\u00e9ben a plugin be\u00e1ll\u00edt\u00e1sain\u00e1l v\u00e1laszthat\u00f3) \u00e9s a v\u00e1laszok form\u00e1z\u00e1sa statikus oldalak \u00e9s m\u0171szerfalak haszn\u00e1lat\u00e1hoz.<\/li>\n<li>adatok friss\u00edt\u00e9se a plugin statikus oldalaiban (meghat\u00e1rozott friss\u00edt\u00e9si id\u0151vel).<\/li>\n<li>k\u00e9r\u00e9sek kezel\u00e9se a template lista grafana-dashboards form\u00e1l\u00e1s\u00e1hoz (a .metriFindQuery() met\u00f3dus).<\/li>\n<\/ul>\n<p>\n<img decoding=\"async\" alt=\"Grafana plugin fejleszt\u00e9s: a tapasztalatok t\u00f6rt\u00e9nete\" src=\"\/wp-content\/uploads\/2019\/11\/18159bbb41144ebceb457df28b35e7b1.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<img decoding=\"async\" alt=\"Grafana plugin fejleszt\u00e9s: a tapasztalatok t\u00f6rt\u00e9nete\" src=\"\/wp-content\/uploads\/2019\/11\/a62665b4409566fbe24f56f88a376d5a.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<img decoding=\"async\" alt=\"Grafana plugin fejleszt\u00e9s: a tapasztalatok t\u00f6rt\u00e9nete\" src=\"\/wp-content\/uploads\/2019\/11\/7f2d61fce623ce2a3cf62feb6d0447ac.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<\/p>\n<ul>\n<li>kapcsolat tesztel\u00e9se a c\u00e9l k8s klaszterrel.<\/li>\n<\/ul>\n<pre><code class=\"plaintext\">testDatasource(){\n   let url = '\/api\/v1\/namespaces';\n   let _url = this.url;\n   if(this.accessViaToken)\n       _url += '\/__proxy';\n   _url += url;\n   return this.backendSrv.datasourceRequest({\n       url: _url,\n       method: \"GET\",\n       headers: {\"Content-Type\": 'application\/json'}\n   })\n       .then(response =&gt; {\n           if (response.status === 200) {\n               return {status: \"success\", message: \"A data source rendben van\", title: \"Siker\"};\n           }else{\n               return {status: \"error\", message: \"A data source nem rendben van\", title: \"Hiba\"};\n           }\n       }, error =&gt; {\n           return {status: \"error\", message: \"A data source nem rendben van\", title: \"Hiba\"};\n       })\n}<\/code><\/pre>\n<p>\n\u00c9rdekes szempont, hogy szerint\u00fcnk hogyan val\u00f3sul meg az adatforr\u00e1sok hiteles\u00edt\u00e9si \u00e9s enged\u00e9lyez\u00e9si mechanizmusa. \u00c1ltal\u00e1ban a v\u00e9gs\u0151 adatforr\u00e1shoz val\u00f3 hozz\u00e1f\u00e9r\u00e9s konfigur\u00e1l\u00e1s\u00e1hoz a Grafana be\u00e9p\u00edtett komponens\u00e9t, a datasourceHttpSettings-t haszn\u00e1lhatjuk. Ezzel a komponenssel be\u00e1ll\u00edthatjuk a http-adatforr\u00e1shoz val\u00f3 hozz\u00e1f\u00e9r\u00e9st, megadva az URL-t \u00e9s az alapvet\u0151 hiteles\u00edt\u00e9si\/enged\u00e9lyez\u00e9si be\u00e1ll\u00edt\u00e1sokat: felhaszn\u00e1l\u00f3n\u00e9v-jelsz\u00f3, vagy client-cert\/client-key. A bearer-token haszn\u00e1lat\u00e1nak be\u00e1ll\u00edt\u00e1s\u00e1hoz (de facto szabv\u00e1ny a k8s-hez) kiss\u00e9 \u201ekreat\u00edvnak\u201d kellett lenn\u00fcnk.<\/p>\n<p>E feladat megold\u00e1s\u00e1hoz haszn\u00e1lhatjuk a Grafana be\u00e9p\u00edtett \u201ePlugin Routes\u201d mechanizmus\u00e1t (tov\u00e1bbi r\u00e9szletek a <noindex><a rel=\"nofollow\" href=\"https:\/\/grafana.com\/docs\/plugins\/developing\/auth-for-datasources\/\">hivatalos dokument\u00e1ci\u00f3s oldalon<\/a><\/noindex>). Az adatforr\u00e1sunk be\u00e1ll\u00edt\u00e1saiban deklar\u00e1lhatunk egy szab\u00e1lyok halmaz\u00e1t, amelyeket a grafana proxy-szerver kezel. P\u00e9ld\u00e1ul minden egyes v\u00e9gpont eset\u00e9ben lehet\u0151s\u00e9g van fejl\u00e9c vagy URL megad\u00e1s\u00e1ra, amelyek sablonozhat\u00f3k, \u00e9s az ezekhez sz\u00fcks\u00e9ges adatok jsonData \u00e9s secureJsonData mez\u0151kb\u0151l sz\u00e1rmazhatnak (jelszavak vagy tokenek titkos t\u00e1rol\u00e1s\u00e1ra). P\u00e9ld\u00e1nkban az ilyen t\u00edpus\u00fa k\u00e9r\u00e9sek <i>\/__proxy\/api\/v1\/namespaces<\/i> \u00e1t lesznek ir\u00e1ny\u00edtva egy ilyen URL-re<br \/>\n\/api\/v1\/namespaces seg\u00edts\u00e9g\u00e9vel, az Authorization: Bearer fejl\u00e9c megad\u00e1s\u00e1val.<\/p>\n<p><img decoding=\"async\" alt=\"Grafana plugin fejleszt\u00e9s: a tapasztalatok t\u00f6rt\u00e9nete\" src=\"\/wp-content\/uploads\/2019\/11\/ca73ff0fef62fba3edab7907c83639b6.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<img decoding=\"async\" alt=\"Grafana plugin fejleszt\u00e9s: a tapasztalatok t\u00f6rt\u00e9nete\" src=\"\/wp-content\/uploads\/2019\/11\/9dab7537d7ccba90c9fb62dfa70b9fe2.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nTerm\u00e9szetesen a k8s API-szerver\u00e9vel val\u00f3 m\u0171k\u00f6d\u00e9shez sz\u00fcks\u00e9g\u00fcnk van egy readonly hozz\u00e1f\u00e9r\u00e9ssel rendelkez\u0151 felhaszn\u00e1l\u00f3ra, amelynek l\u00e9trehoz\u00e1s\u00e1hoz sz\u00fcks\u00e9ges manifeszt f\u00e1jlokat szint\u00e9n megtal\u00e1lhatja a <noindex><a rel=\"nofollow\" href=\"https:\/\/github.com\/devopsprodigy\/kubegraf\/tree\/master\/kubernetes\/\">plugin forr\u00e1sk\u00f3dj\u00e1ban.<\/a><\/noindex>.<\/p>\n<h4>5. r\u00e9sz: kiad\u00e1s<\/h4>\n<p>\n<img decoding=\"async\" alt=\"Grafana plugin fejleszt\u00e9s: a tapasztalatok t\u00f6rt\u00e9nete\" src=\"\/wp-content\/uploads\/2019\/11\/3991a5d412f362770157fc567bb8009c.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nMiut\u00e1n meg\u00edrta a saj\u00e1t Grafana pluginj\u00e1t, term\u00e9szetesen szeretn\u00e9 k\u00f6zz\u00e9tenni ny\u00edlt forr\u00e1sk\u00f3d\u00fak\u00e9nt. A Grafana plugin k\u00f6nyvt\u00e1ra el\u00e9rhet\u0151 a <noindex><a rel=\"nofollow\" href=\"https:\/\/grafana.com\/grafana\/plugins\">grafana.com\/grafana\/plugins<\/a><\/noindex> <\/p>\n<p>oldalon. Ahhoz, hogy a pluginnak a hivatalos boltban el\u00e9rhet\u0151nek kell lennie, PR-t kell tennie a <noindex><a rel=\"nofollow\" href=\"https:\/\/github.com\/grafana\/grafana-plugin-repository\">ez a repozit\u00f3rium<\/a><\/noindex>, hozz\u00e1adva a repo.json f\u00e1jlhoz az al\u00e1bbi form\u00e1tum\u00fa tartalmat:<\/p>\n<p><img decoding=\"async\" alt=\"Grafana plugin fejleszt\u00e9s: a tapasztalatok t\u00f6rt\u00e9nete\" src=\"\/wp-content\/uploads\/2019\/11\/160650bf37f8f2f3e12ef7dd291e90eb.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nahol a version a plugin verzi\u00f3j\u00e1t, az url a repository linkj\u00e9t, a commit pedig a commit hash-j\u00e9t jelenti, amelyen az adott verzi\u00f3 el\u00e9rhet\u0151. <\/p>\n<p>A v\u00e9g\u00e9n egy csod\u00e1s k\u00e9pet fog l\u00e1tni, mint<\/p>\n<p><img decoding=\"async\" alt=\"Grafana plugin fejleszt\u00e9s: a tapasztalatok t\u00f6rt\u00e9nete\" src=\"\/wp-content\/uploads\/2019\/11\/ff906396596e9c4c15c59f8d53555f52.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nAz adatok automatikusan a Readme.md, Changelog.md \u00e9s a plugin.json f\u00e1jlban tal\u00e1lhat\u00f3 le\u00edr\u00e1sb\u00f3l fognak sz\u00e1rmazni.<\/p>\n<h4>6. r\u00e9sz: a k\u00f6vetkeztet\u00e9sek helyett<\/h4>\n<p>\nA kiad\u00e1s ut\u00e1n sem hagytuk abba a pluginunk fejleszt\u00e9s\u00e9t. Jelenleg is azon dolgozunk, hogy helyesen nyomon k\u00f6vethess\u00fck a klaszter csom\u00f3pontjainak er\u0151forr\u00e1s-haszn\u00e1lat\u00e1t, \u00faj funkci\u00f3kat vezess\u00fcnk be a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny jav\u00edt\u00e1sa \u00e9rdek\u00e9ben, valamint kezelj\u00fck a plugin telep\u00edt\u00e9se ut\u00e1n be\u00e9rkezett rengeteg visszajelz\u00e9st, melyet \u00fcgyfeleinkt\u0151l \u00e9s a GitHubon tal\u00e1lhat\u00f3 issues-okt\u00f3l kaptunk (ha hagysz egy issue-t vagy pull requestet, nagyon \u00f6r\u00fcln\u00e9k \ud83d\ude42 ).<\/p>\n<p>Rem\u00e9lj\u00fck, hogy ez a cikk seg\u00edt meg\u00e9rteni ezt a csod\u00e1latos eszk\u00f6zt, mint a Grafana, \u00e9s lehet, hogy saj\u00e1t pluginodat is meg tudod \u00edrni. <\/p>\n<p>K\u00f6sz\u00f6nj\u00fck!)<br \/>\n<br \/>Forr\u00e1s: <a content=\"nofollow\" rel=\"nofollow\" href=\"https:\/\/habr.com\/ru\/company\/itsumma\/blog\/474500\/\">habr.com<\/a><\/p>","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"<p>\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0441\u044f\u0446\u0435\u0432 \u043d\u0430\u0437\u0430\u0434 \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0438 \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d \u043d\u0430\u0448 \u043d\u043e\u0432\u044b\u0439 open-source \u043f\u0440\u043e\u0435\u043a\u0442 \u2014 Grafana-\u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0430 kubernetes, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0437\u0432\u0430\u043b\u0438 DevOpsProdigy KubeGraf. \u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u043d\u0430 GitHub. \u0410 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u0435\u0439 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0438 \u043f\u043b\u0430\u0433\u0438\u043d, \u043a\u0430\u043a\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0438 \u0441 \u043a\u0430\u043a\u0438\u043c\u0438 \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u043c\u0438 \u043a\u0430\u043c\u043d\u044f\u043c\u0438 [&hellip;]<\/p>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[688],"tags":[],"class_list":["post-52343","post","type-post","status-publish","format-standard","hentry","category-administrirovanie"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.3 - aioseo.com -->\n\t<meta name=\"description\" content=\"\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442!\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Yuri Gagarin\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/prohoster.info\/hu\/blog\/administrirovanie\/razrabotka-plagina-dlya-grafana-istoriya-nabityh-shishek\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.3\" \/>\n\t\t<meta property=\"og:locale\" content=\"hu_HU\" \/>\n\t\t<meta property=\"og:site_name\" content=\"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"\ud83e\udd47\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0434\u043b\u044f Grafana: \u0438\u0441\u0442\u043e\u0440\u0438\u044f \u043d\u0430\u0431\u0438\u0442\u044b\u0445 \u0448\u0438\u0448\u0435\u043a | ProHoster\" \/>\n\t\t<meta property=\"og:description\" content=\"\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442!\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/prohoster.info\/hu\/blog\/administrirovanie\/razrabotka-plagina-dlya-grafana-istoriya-nabityh-shishek\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"350\" \/>\n\t\t<meta property=\"og:image:height\" content=\"350\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-11-05T21:00:00+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2020-02-18T11:00:02+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"\ud83e\udd47 Grafana plugin fejleszt\u00e9s: a tanult leck\u00e9k t\u00f6rt\u00e9nete | ProHoster","description":"Mindenkinek szia!","canonical_url":"https:\/\/prohoster.info\/hu\/blog\/administrirovanie\/razrabotka-plagina-dlya-grafana-istoriya-nabityh-shishek","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"hu_HU","og:site_name":"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b","og:type":"article","og:title":"\ud83e\udd47\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0434\u043b\u044f Grafana: \u0438\u0441\u0442\u043e\u0440\u0438\u044f \u043d\u0430\u0431\u0438\u0442\u044b\u0445 \u0448\u0438\u0448\u0435\u043a | ProHoster","og:description":"\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442!","og:url":"https:\/\/prohoster.info\/hu\/blog\/administrirovanie\/razrabotka-plagina-dlya-grafana-istoriya-nabityh-shishek","og:image":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:secure_url":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:width":350,"og:image:height":350,"article:published_time":"2019-11-05T21:00:00+00:00","article:modified_time":"2020-02-18T11:00:02+00:00","article:publisher":"https:\/\/www.facebook.com\/prohoster","article:author":"https:\/\/www.facebook.com\/prohoster"},"aioseo_meta_data":{"post_id":"52343","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"seo_analyzer_scan_date":"2026-01-24 03:18:19","breadcrumb_settings":null,"limit_modified_date":false,"reviewed_by":null,"ai":null,"created":"2021-02-28 20:45:28","updated":"2026-01-24 03:18:19","focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/posts\/52343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/comments?post=52343"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/posts\/52343\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/media?parent=52343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/categories?post=52343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/tags?post=52343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}