{"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\/hr\/blog\/administrirovanie\/razrabotka-plagina-dlya-grafana-istoriya-nabityh-shishek","title":{"rendered":"Razvoj dodatka za Grafana: povijest nau\u010denih lekcija","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p>Pozdrav svima! Prije nekoliko mjeseci pokrenuli smo na\u0161 novi open-source projekt u produkciji \u2014 Grafana dodatak za pra\u0107enje kubernetes-a, koji smo nazvali <b><noindex><a rel=\"nofollow\" href=\"https:\/\/grafana.com\/grafana\/plugins\/devopsprodigy-kubegraf-app\">DevOpsProdigy KubeGraf<\/a><\/noindex><\/b>. Izvorni kod dodatka dostupan je u <noindex><a rel=\"nofollow\" href=\"https:\/\/github.com\/devopsprodigy\/kubegraf\">javnom repozitoriju na GitHubu<\/a><\/noindex>. U ovom \u010dlanku \u017eelimo podijeliti s vama pri\u010du o tome kako smo razvijali dodatak, koje smo alate koristili i s kakvim se izazovima suo\u010dili tijekom razvoja. Krenimo!<br \/>\n<noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><\/p>\n<h4>Dio 0 \u2014 uvod: kako smo do ovog do\u0161li?<\/h4>\n<p>\nIdeja da napi\u0161emo vlastiti dodatak za Grafanu pojavila se sasvim slu\u010dajno. Na\u0161a tvrtka ve\u0107 vi\u0161e od 10 godina bavi se pra\u0107enjem web-projekata razli\u010dite slo\u017eenosti. Tijekom tog vremena stekli smo veliko iskustvo, zanimljive slu\u010dajeve i iskustvo kori\u0161tenja raznih sustava za pra\u0107enje. U nekom trenutku postavili smo si pitanje: \"Postoji li \u010darobni alat za pra\u0107enje Kubernetes-a, koji se mo\u017ee 'postaviti i zaboraviti'?\" Prometni standard za pra\u0107enje k8s, naravno, odavno je kombinacija Prometheus + Grafana. Za ovaj stakl postoji veliki broj razli\u010ditih alata: prometheus-operator, set nadzornih plo\u010da kubernetes-mixin, grafana-kubernetes-app. <\/p>\n<p>Najinteresantnija opcija za nas \u010dinilo se da je dodatak grafana-kubernetes-app, no on se ne podr\u017eava vi\u0161e od godinu dana i, uz to, ne mo\u017ee raditi s novim verzijama node-exportera i kube-state-metrics-a. U nekom trenutku odlu\u010dili smo: \"Za\u0161to ne bismo napravili vlastito rje\u0161enje?\"<\/p>\n<p>Koje smo ideje odlu\u010dili realizirati u vlastitom dodatku:<\/p>\n<ul>\n<li>vizualizacija 'karta aplikacije': prikladno prikazivanje aplikacija u klasteru, grupiranih prema namespace-ima, deployment-ima\u2026;<\/li>\n<li>vizualizacija odnosa tipa 'deployment \u2014 service (+ports)'.<\/li>\n<li>vizualizacija raspodjele aplikacija klastera po nodovima klastera.<\/li>\n<li>prikupljanje metrika i informacija iz vi\u0161e izvora: Prometheus i k8s api server.<\/li>\n<li>pra\u0107enje infrastrukturnog dijela (kori\u0161tenje procesorskog vremena, memorije, diskovnog sustava, mre\u017ee), kao i logike aplikacija \u2014 health-status pod-ova, broj dostupnih replika, informacije o prolasku liveness\/readyness probiranja.<\/li>\n<\/ul>\n<p><\/p>\n<h4>Dio 1: \u0160to je 'dodatak za Grafana'?<\/h4>\n<p>\nS tehni\u010dke to\u010dke gledi\u0161ta, dodatak za Grafanu je angular-kontroler, koji se pohranjuje u data-direktoriju Grafane (<i>\/var\/grafana\/plugins\/&lt;your_plugin_name&gt;\/dist\/module.js<\/i>) i mo\u017ee biti u\u010ditan kao SystemJS modul. Tako\u0111er, u ovoj direktoj mora se nalaziti datoteka plugin.json koja sadr\u017ei sve metapodatke o va\u0161em pluginu: naziv, verzija, tip plugina, linkovi na repozitorij\/web stranicu\/licencu, ovisnosti i tako dalje.<\/p>\n<p><img decoding=\"async\" alt=\"Razvoj dodatka za Grafana: povijest nau\u010denih lekcija\" 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=\"Razvoj dodatka za Grafana: povijest nau\u010denih lekcija\" src=\"\/wp-content\/uploads\/2019\/11\/1e5b780837e5a9385e5e22a27d83f567.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>plugin.json<\/i><\/p>\n<p>Kao \u0161to je prikazano na snimci, postavili smo plugin.type = app. Budu\u0107i da mogu postojati tri vrste plugina za Grafanu:<\/p>\n<p><b>panel<\/b>: naj\u010de\u0161\u0107i tip plugina \u2014 predstavlja panel za vizualizaciju raznih metrika, koristi se za izradu razli\u010ditih nadzornih plo\u010da.<br \/>\n<b>datasource<\/b>: plugin-konektor za neki izvor podataka (na primjer, Prometheus-datasource, ClickHouse-datasource, ElasticSearch-datasource).<br \/>\n<b>app<\/b>: plugin koji vam omogu\u0107uje da izradite vlastitu frontend aplikaciju unutar Grafane, stvarate vlastite HTML stranice i ru\u010dno se obra\u0107ate datasource-u za vizualizaciju raznih podataka. Tako\u0111er, kao ovisnosti mogu se koristiti pluginovi drugih tipova (datasource, panel) i razli\u010dite nadzorne plo\u010de.<\/p>\n<p><img decoding=\"async\" alt=\"Razvoj dodatka za Grafana: povijest nau\u010denih lekcija\" src=\"\/wp-content\/uploads\/2019\/11\/3cd53c7c3a2635f3f20831d52198b5f0.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Primjer ovisnosti plugina s type = app<\/i>.<\/p>\n<p>Kao programski jezik mo\u017eete koristiti i JavaScript i TypeScript (mi smo odabrali njega). Predlo\u0161ke za hello-world pluginove bilo koje vrste mo\u017eete <noindex><a rel=\"nofollow\" href=\"https:\/\/github.com\/CorpGlory\">prona\u0107i na linku<\/a><\/noindex>: u ovom repozitoriju nalazi se veliki broj starter-packova (\u010dak postoji i eksperimentalni primjer plugina na Reactu) s unaprijed instaliranim i konfiguriranim alatima. <\/p>\n<h4>Dio 2: priprema lokalnog okru\u017eenja<\/h4>\n<p>\nZa rad na pluginu, naravno, trebat \u0107e nam Kubernetes klaster sa svim unaprijed instaliranim alatima: prometheus, node-exporter, kube-state-metrics, grafana. Okru\u017eenje bi se trebalo postaviti brzo, lako i neformalno, a za osiguranje hot-reload data-direktorij Grafane trebao bi se montirati direktno s ra\u010dunala programera.<\/p>\n<p>Najprikladniji na\u010din lokalnog rada s Kubernetesom je <noindex><a rel=\"nofollow\" href=\"https:\/\/kubernetes.io\/docs\/tasks\/tools\/install-minikube\/\">minikube<\/a><\/noindex>. Sljede\u0107i korak je instalirati vezu Prometheus + Grafana putem prometheus-operatora. U <noindex><a rel=\"nofollow\" href=\"https:\/\/medium.com\/faun\/trying-prometheus-operator-with-helm-minikube-b617a2dccfa3\">ovom \u010dlanku<\/a><\/noindex> detaljno je opisan proces instalacije prometheus-operatora na minikube. Za uklju\u010divanje trajnosti potrebno je postaviti parametar <i>persistence: true<\/i> u datoteci charts\/grafana\/values.yaml, dodati svoj vlastiti PV i PVC i navesti ih u parametru persistence.existingClaim<\/p>\n<p>Kona\u010dni skript za pokretanje minikubea izgleda ovako:<\/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>Dio 3: razvoj<\/h4>\n<p>\n<b>Objektni model<\/b><\/p>\n<p>Kao pripremu za implementaciju dodatka odlu\u010dili smo opisati sve osnovne entitete Kubernetes-a s kojima \u0107emo raditi u obliku TypeScript klasa: pod, deployment, daemonset, statefulset, job, cronjob, service, node, namespace. Svaka od ovih klasa naslje\u0111uje zajedni\u010dku klasu BaseModel, koja opisuje konstruktor, destruktor, metode za a\u017euriranje i prebacivanje vidljivosti. U svakoj od klasa su opisane ugnije\u017edene veze s drugim entitetima, na primjer, popis podova unutar entiteta tipa deployment.<\/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>\nPomo\u0107u getter-a i setter-a mo\u017eemo prikazivati ili postavljati potrebne nam metrike entiteta na prikladan i \u010ditljiv na\u010din. Primjer formatiranog izlaza allocatable cpu nod-e:<\/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>Stranice<\/b><\/p>\n<p>Popis svih stranica na\u0161eg dodatka prvotno se opisuje u na\u0161em pluing.json u odjeljku sa zavisnostima:<\/p>\n<p><img decoding=\"async\" alt=\"Razvoj dodatka za Grafana: povijest nau\u010denih lekcija\" src=\"\/wp-content\/uploads\/2019\/11\/b86c74839ad0d9c64b97ffc3f2a84bdf.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nU bloku za svaku stranicu moramo navesti NAZIV STRANICE (koji \u0107e potom biti konvertiran u slug pod kojim \u0107e stranica biti dostupna); naziv komponente koja je odgovorna za rad s ovom stranicom (popis komponenti izvozi se u module.ts); ozna\u010davanje uloge korisnika kojoj je dostupno raditi s ovom stranicom i postavke navigacije za bo\u010dnu traku. <\/p>\n<p>U komponenti koja je odgovorna za rad sa stranicom moramo postaviti templateUrl, prenose\u0107i tamo putanju do html datoteke s markupom. Unutar kontrolera, putem dependency injection-a, mo\u017eemo dobiti pristup do 2 va\u017ena angular servisa:<\/p>\n<ul>\n<li>backendSrv \u2014 servis koji omogu\u0107ava interakciju s api-serverom Grafane;<\/li>\n<li>datasourceSrv \u2014 servis koji omogu\u0107ava lokalnu interakciju sa svim izvorima podataka instaliranim u va\u0161oj Grafani (na primjer, metoda .getAll() \u2014 vra\u0107a popis svih instaliranih izvora podataka; .get() \u2014 vra\u0107a objekt-instanicu konkretnog izvora podataka.<\/li>\n<\/ul>\n<p>\n<img decoding=\"async\" alt=\"Razvoj dodatka za Grafana: povijest nau\u010denih lekcija\" src=\"\/wp-content\/uploads\/2019\/11\/e616e74c2e31ca3a81b7ed91ca333208.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<img decoding=\"async\" alt=\"Razvoj dodatka za Grafana: povijest nau\u010denih lekcija\" src=\"\/wp-content\/uploads\/2019\/11\/5e1d45f570dda50774088405abb41c9f.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<img decoding=\"async\" alt=\"Razvoj dodatka za Grafana: povijest nau\u010denih lekcija\" src=\"\/wp-content\/uploads\/2019\/11\/c072867623824e799518984c7b1bee93.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<\/p>\n<h4>Dio 4: izvor podataka<\/h4>\n<p>\nPrema Grafana, datasource je plugin poput svih ostalih: ima svoju ulaznu to\u010dku module.js i datoteku s metainformacijama plugin.json. Kada razvijamo plugin tipa app, mo\u017eemo se povezati s postoje\u0107im datasourceima (na primjer, prometheus-datasource) ili s vlastitim koji mo\u017eemo pohraniti izravno u direktorij plugina (dist\/datasource\/*) ili instalirati kao ovisnost. U na\u0161em slu\u010daju, datasource dolazi zajedno s kodom plugina. Tako\u0111er je obavezno imati predlo\u017eak config.html i kontroler ConfigCtrl, koji \u0107e se koristiti za stranicu konfiguracije instance datasourcea i kontrolera Datasource, u kojem se implementira logika rada va\u0161eg datasourcea.<\/p>\n<p>U pluginu KubeGraf, iz perspektive korisni\u010dkog su\u010delja, datasource predstavlja instancu kubernetes-klastera, koja ima sljede\u0107e mogu\u0107nosti (izvorni kod je dostupan <noindex><a rel=\"nofollow\" href=\"https:\/\/github.com\/devopsprodigy\/kubegraf\/tree\/master\/src\/datasource\">na linku<\/a><\/noindex>):<\/p>\n<ul>\n<li>prikupljanje podataka iz api-servera k8s (dohva\u0107anje popisa namespacea, deploymenta\u2026)<\/li>\n<li>proksiranje zahtjeva u prometheus-datasource (koji se odabire u postavkama plugina za svaki konkretni klaster) i formatiranje odgovora za upotrebu podataka kako na stati\u010dnim stranicama, tako i na nadzornim plo\u010dama.<\/li>\n<li>a\u017euriranje podataka na stati\u010dnim stranicama plugina (s postavljenim vremenom osvje\u017eavanja).<\/li>\n<li>obrada zahtjeva za generiranje popisa predlo\u017eaka u grafana-dashboards (metoda .metriFindQuery())<\/li>\n<\/ul>\n<p>\n<img decoding=\"async\" alt=\"Razvoj dodatka za Grafana: povijest nau\u010denih lekcija\" src=\"\/wp-content\/uploads\/2019\/11\/18159bbb41144ebceb457df28b35e7b1.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<img decoding=\"async\" alt=\"Razvoj dodatka za Grafana: povijest nau\u010denih lekcija\" src=\"\/wp-content\/uploads\/2019\/11\/a62665b4409566fbe24f56f88a376d5a.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<img decoding=\"async\" alt=\"Razvoj dodatka za Grafana: povijest nau\u010denih lekcija\" src=\"\/wp-content\/uploads\/2019\/11\/7f2d61fce623ce2a3cf62feb6d0447ac.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<\/p>\n<ul>\n<li>testiranje veze s kona\u010dnim k8s-klasterom.<\/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: \"Izvor podataka je u redu\", title: \"Uspjeh\"};\n           }else{\n               return {status: \"error\", message: \"Izvor podataka nije u redu\", title: \"Gre\u0161ka\"};\n           }\n       }, error =&gt; {\n           return {status: \"error\", message: \"Izvor podataka nije u redu\", title: \"Gre\u0161ka\"};\n       })\n}<\/code><\/pre>\n<p>\nJedan zanimljiv aspekt, prema na\u0161em mi\u0161ljenju, je implementacija mehanizma autentifikacije i autorizacije za datasource. Obi\u010dno, iz kutije za konfiguraciju pristupa krajnjem izvoru podataka mo\u017eemo koristiti ugra\u0111enu komponentu Grafana \u2014 datasourceHttpSettings. Pomo\u0107u ove komponente mo\u017eemo konfigurirati pristup http-izvoru podataka, navode\u0107i URL i osnovne postavke autentifikacije\/oznake: korisni\u010dko ime lozinka, ili client-cert\/client-key. Kako bismo omogu\u0107ili konfiguraciju pristupa putem bearer-tokena (de facto standard za k8s), trebalo je malo \u201ezakuhati\u201c.<\/p>\n<p>Za rje\u0161avanje ovog zadatka mo\u017ee se koristiti ugra\u0111eni mehanizam Grafana \u201ePlugin Routes\u201c (vi\u0161e na <noindex><a rel=\"nofollow\" href=\"https:\/\/grafana.com\/docs\/plugins\/developing\/auth-for-datasources\/\">slu\u017ebenoj stranici dokumentacije<\/a><\/noindex>). U postavkama na\u0161eg datasource-a mo\u017eemo deklarirati skup pravila usmjeravanja koja \u0107e obraditi proxy poslu\u017eitelj grafana. Na primjer, za svaki pojedini endpoint postoji mogu\u0107nost postavljanja zaglavlja ili URL-a s mogu\u0107no\u0161\u0107u templatinga, a podaci za koje se mogu uzeti iz polja jsonData i secureJsonData (za pohranu lozinki ili tokena u \u0161ifriranom obliku). U na\u0161em primjeru, zahtjevi poput <i>\/__proxy\/api\/v1\/namespaces<\/i> bit \u0107e proksirani na URL poput<br \/>\n\/api\/v1\/namespaces s postavljenim zaglavljem Authorization: Bearer.<\/p>\n<p><img decoding=\"async\" alt=\"Razvoj dodatka za Grafana: povijest nau\u010denih lekcija\" src=\"\/wp-content\/uploads\/2019\/11\/ca73ff0fef62fba3edab7907c83639b6.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<img decoding=\"async\" alt=\"Razvoj dodatka za Grafana: povijest nau\u010denih lekcija\" src=\"\/wp-content\/uploads\/2019\/11\/9dab7537d7ccba90c9fb62dfa70b9fe2.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nNaravno, za rad s api-poslu\u017eiteljem k8s potreban nam je korisnik s readonly pristupima, a manifesti za njegovo kreiranje tako\u0111er se mogu prona\u0107i u <noindex><a rel=\"nofollow\" href=\"https:\/\/github.com\/devopsprodigy\/kubegraf\/tree\/master\/kubernetes\/\">izvornom kodu plugina<\/a><\/noindex>.<\/p>\n<h4>Dio 5: izdanje<\/h4>\n<p>\n<img decoding=\"async\" alt=\"Razvoj dodatka za Grafana: povijest nau\u010denih lekcija\" src=\"\/wp-content\/uploads\/2019\/11\/3991a5d412f362770157fc567bb8009c.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nNakon \u0161to napi\u0161ete vlastiti plugin za Grafanu, naravno, po\u017eeljet \u0107ete ga objaviti kao otvoreni izvor. U Grafani postoji biblioteka pluginova koja je dostupna na linku <noindex><a rel=\"nofollow\" href=\"https:\/\/grafana.com\/grafana\/plugins\">grafana.com\/grafana\/plugins<\/a><\/noindex> <\/p>\n<p>Kako bi va\u0161 plugin bio dostupan u slu\u017ebenoj trgovini, potrebno je napraviti PR u <noindex><a rel=\"nofollow\" href=\"https:\/\/github.com\/grafana\/grafana-plugin-repository\">ovaj repozitorij<\/a><\/noindex>, dodaju\u0107i u datoteku repo.json sadr\u017eaj oblika:<\/p>\n<p><img decoding=\"async\" alt=\"Razvoj dodatka za Grafana: povijest nau\u010denih lekcija\" src=\"\/wp-content\/uploads\/2019\/11\/160650bf37f8f2f3e12ef7dd291e90eb.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\ngdje je version \u2014 verzija va\u0161eg plugina, url \u2014 link na repozitorij, a commit \u2014 hash commit-a koji \u0107e omogu\u0107iti specifi\u010dnu verziju plugina. <\/p>\n<p>I na izlazu \u0107ete vidjeti prekrasnu sliku oblika:<\/p>\n<p><img decoding=\"async\" alt=\"Razvoj dodatka za Grafana: povijest nau\u010denih lekcija\" src=\"\/wp-content\/uploads\/2019\/11\/ff906396596e9c4c15c59f8d53555f52.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nPodaci za nju \u0107e se automatski izvu\u0107i iz va\u0161eg Readme.md, Changelog.md i datoteke plugin.json s opisom plugina.<\/p>\n<h4>Dio 6: umjesto zaklju\u010daka<\/h4>\n<p>\nNismo prekinuli razvoj na\u0161eg dodatka nakon objave. Trenutno radimo na pravilnom pra\u0107enju upotrebe resursa nodova klastera, implementaciji novih funkcionalnosti za pobolj\u0161anje korisni\u010dkog iskustva, kao i na rje\u0161avanju velikog broja povratnih informacija koje smo dobili nakon instalacije dodatka od na\u0161ih klijenata, kao i iz prijava na GitHubu (ako ostavite svoj issue ili pull request, bit \u0107u vrlo sretan \ud83d\ude42 ).<\/p>\n<p>Nadamo se da \u0107e vam ovaj \u010dlanak pomo\u0107i da se upoznate s ovim prekrasnim alatom kao \u0161to je Grafana i mo\u017eda napisati vlastiti dodatak. <\/p>\n<p>Hvala!)<br \/>\n<br \/>Izvor: <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.4 - 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\/hr\/blog\/administrirovanie\/razrabotka-plagina-dlya-grafana-istoriya-nabityh-shishek\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.4\" \/>\n\t\t<meta property=\"og:locale\" content=\"hr_HR\" \/>\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\/hr\/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\udd47Razvoj dodatka za Grafanu: pri\u010da o nabijenim ranama | ProHoster","description":"Pozdrav svima!","canonical_url":"https:\/\/prohoster.info\/hr\/blog\/administrirovanie\/razrabotka-plagina-dlya-grafana-istoriya-nabityh-shishek","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"hr_HR","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\/hr\/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\/hr\/wp-json\/wp\/v2\/posts\/52343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/hr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/hr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/hr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/hr\/wp-json\/wp\/v2\/comments?post=52343"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/hr\/wp-json\/wp\/v2\/posts\/52343\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/hr\/wp-json\/wp\/v2\/media?parent=52343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/hr\/wp-json\/wp\/v2\/categories?post=52343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/hr\/wp-json\/wp\/v2\/tags?post=52343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}