Amélioration_plugin_Grafana_info4_2019_2020.md 14.9 KB
Newer Older
1
# Fiche de suivi, plugins Grafana (INFO4, 2019-2020)
2

3
4
5
## Semaine 0 : 27/01 - 02/02

Cours sur LoraWan où nous avons pu poser quelques questions sur notre objectif.
6
7
8
9
10
11
12
13
14
15
16
17

Nous devons modifier un plugin de Grafana, TrackMap afin de :

 - Importer des données/documents [GeoJSON](https://air.imag.fr/index.php/GeoJSON) et afficher des points
 - Afficher des polygones fermés (bâtiments) dans le panel
 - Ajout de popup avec les valeurs d'une requête lors du survol d'un point de cartes ou des panels adjacents
 - Créer des objets (points, lignes, formes) sur la carte un peu comme sur geojson.io sans passer par une importation

Deuxième plugin, à créer :

 - Afficher chronologiquement les images prises de camera IP (still image) comme les DLink DCS 5222L (dispo au fablab fabMSTIC).

18
19
*TODO :* 

20
21
22
  - Regarder comment fonctionne [Leaflet](https://leafletjs.com/)
  - Fiche à faire sur le dépôt GitLab (README.md)

23
## Semaine 1 : 03/02 - 09/02
24

25
26
27
Installation de [Grafana](https://grafana.com/grafana/download) ([Github](https://github.com/grafana/grafana), [Getting started](https://grafana.com/docs/grafana/latest/guides/getting_started/)),
des plugins [Track Map](https://grafana.com/grafana/plugins/alexandra-trackmap-panel) ([Github](https://github.com/alexandrainst/alexandra-trackmap-panel/blob/master/LICENSE))
et [Trackmap](https://grafana.com/grafana/plugins/pr0ps-trackmap-panel/installation) ([Github](https://github.com/pR0Ps/grafana-trackmap-panel)).
28

29
30
On utilisera plutôt le deuxième (sans espace), du moins dans un premier temps, car c'est ce qui était prévu.
Cependant, le premier (avec espace) paraît intéressant étant donné qu'il permet l'importation de données en GeoJSON.
31

32
Il nous sera sûrement utile pour comprendre comment importer des données GeoJSON.
33
34
35

Accès au [Dashboard Grafana](http://localhost:3000/) en local.

36
37
On a mis en place une page [Notion](https://www.notion.so/Am-lioration-de-greffons-Grafana-66a8e42c16bd4bc3ac3f50d1273b2adf) pour garder une trace de ce qu'on fait pendant le projet,
centraliser les ressources et organiser les tâches à faire.
38

39
40
41
*TODO :*
 
- Regarder comment fonctionne InfluxDB
42
43
    - Comment le lancer
    - Comment mettre/récupérer des données
44
45
 - Mettre à jour la page Wiki AIR avec les instructions d'installation de Grafana
 (page [Download](https://grafana.com/grafana/download) et [Configuration](https://grafana.com/docs/grafana/latest/installation/configuration/))
46

47
## Semaine 2 : 10/02 - 16/02
48
49

Installation de InfluxDB :
50

51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
```bash
# Si la précédente installation d'InfluxDB n'a pas fonctionné
sudo apt remove influxdb
sudo apt update
sudo apt upgrade
sudo apt autoremove
sudo apt autoclean
sudo dpkg --configure -a
sudo rm -f /var/lib/dpkg/info/influxdb.postinst
sudo apt clean
# Si c'est la première installation d'InfluxDB
wget https://dl.influxdata.com/influxdb/releases/influxdb_1.7.9_amd64.deb
sudo dpkg -i influxdb_1.7.9_amd64.deb
# Pour tester
sudo influxd # dans un terminal qui devra rester ouvert
influx
```

Importation d'une BDD : [https://docs.influxdata.com/influxdb/v1.7/query_language/data_download/](https://docs.influxdata.com/influxdb/v1.7/query_language/data_download/)

71
Nous avons créé une base de donnée `Test` avec une table `Location` et pour représenter les points, des champs `latitude` et `longitude`. 
72

73
Nous avons réussi à utiliser TrackMap sur la base de donnée que nous avions créée avec InfluxDB.
74
75

TrackMap (lignes) :
76

77
78
79
80
```bash
SELECT median("latitude"), median("longitude") FROM "location" WHERE $timeFilter GROUP BY time($interval)
```

81
82
83
84
85
86
87
88
*TODO :*

- Demander au groupe de La Mure (Aleck et Myriam) un accès au dashboard de La Mure.
- Faire en sorte que les utilisateurs puissent ajouter des données GeoJSON pour décorer la carte sur laquelle il y a les traces des points
(borne incendie, bâtiment, poubelle...) pour voir par exemple à côté de quelle poubelle le camion est passé. 
- Juste faire la copie du GeoJSON sur la carte de Grafana. Soit en copiant collant, soit en important un fichier. 
- Fournir une page sur laquelle on peut soit copier/coller soit charger un fichier JSON.
- Utiliser Leaflet pour afficher les données GeoJSON sur la carte. 
89

90
91
92
Il faudra forker le projet du plugin existant et faire une pull request quand nos modification seront propres et bien testées.

## Semaine 3 : 16/02 - 23/02
93
94
95
96
97
98
99

Documentation Grafana : [https://grafana.com/docs/grafana/latest/](https://grafana.com/docs/grafana/latest/)

Grafana developer guide : [https://grafana.com/docs/grafana/latest/plugins/developing/development/](https://grafana.com/docs/grafana/latest/plugins/developing/development/)

Grafana styling : [https://github.com/grafana/grafana/tree/master/public/sass](https://github.com/grafana/grafana/tree/master/public/sass)

100
101
Nous avons cherché comment créer et utiliser un plugin personnalisé :
pour cela, il suffit de créer un dossier dans `/var/lib/grafana/plugins/` et de redémarrer le serveur.
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

```bash
# Installation du plugin custom
sudo chmod -R 777 /var/lib/grafana/plugins
cd /var/lib/grafana/plugins
git clone https://github.com/micamur/grafana-trackmap-panel pr0ps-trackmap-panel
cd pr0ps-trackmap-panel
npm install grunt-cli

# dans le .zshrc rajouter à la fin :
# export PATH="/usr/local/share/npm/bin:$PATH"

# Compilation à faire à chaque modification
npm run build
```

118
119
120
Mica a cherché comment importer un fichier geoJSON :
tutoriel panel horloge ([1](https://grafana.com/blog/2016/04/08/timing-is-everything.-writing-the-clock-panel-plugin-for-grafana-3.0/),
[2](https://grafana.com/blog/2016/04/15/timing-is-everything.-editor-mode-in-grafana-3.0-for-the-clock-panel-plugin/)), dans la patie "Editor Mode"
121

122
Les différentes parties les plus importantes du plugin :
123

124
125
126
- Code du panel : [https://github.com/pR0Ps/grafana-trackmap-panel/blob/master/src/partials/options.html](https://github.com/pR0Ps/grafana-trackmap-panel/blob/master/src/partials/options.html)
- Style du panel : [https://github.com/pR0Ps/grafana-trackmap-panel/blob/master/src/partials/module.css](https://github.com/pR0Ps/grafana-trackmap-panel/blob/master/src/partials/module.css)
- Code du plugin : [https://github.com/pR0Ps/grafana-trackmap-panel/blob/master/src/trackmap_ctrl.js](https://github.com/pR0Ps/grafana-trackmap-panel/blob/master/src/trackmap_ctrl.js)
127

128
Claire a cherché comment afficher des données GeoJSON sur la carte (recherche sur Leaflet) : il faut utiliser `L.geoJSON(geojsonFeature).addTo(map);`
129

130
131
Définition d'un nouvel objectif : ajouter un QR code vers un dashboard.
Dans un dashboard > Settings > Links > Add Dashboard Link > Ajouter un 3ème type qui permettrait de mettre un lien de type QR code.
132

133
### Résultats
134

135
Nous avons réussi à ajouter un bouton pour importer un fichier GeoJSON (pour l'instant seulement le bouton, il ne fait rien).
136

137
Nous avons réussi à ajouter une boîte de texte dans laquelle on peut copier/coller du code GeoJSON et lorsqu'on colle on affiche sur la carte les formes.
138

139
Nous avons forké le projet déjà existant et y avons ajouté nos modifications. 
140

141
## Semaine 4 : 02/03 - 08/03
142
143
144

Nous avons recherché comment importer un fichier dans les options à partir du système. Nous avons trouvé comment cela a été fait de deux manières différentes :

145
146
- [importation d'un Dashboard dans Grafana](https://github.com/grafana/grafana/blob/master/public/app/features/manage-dashboards/components/UploadDashboard/uploadDashboardDirective.ts)
- [exemple minimal en Angular](https://embed.plnkr.co/plunk/2vgnFe)
147

Claire Velut's avatar
Claire Velut committed
148
Nous avons cherché le code qui correspondait à l'importation d'un dashboard, et nous avons essayer de comprendre comment il fonctionnait.
149

150
151
Nous nous sommes également renseingnées sur Angular et Javascript, et nous avons essayer de comprendre comment nous pourrions faire avec un exemple
car comprendre sur le code du projet Grafana fut compliqué.
152

153
154
Nous avons également lu la charte de style des plugins Grafana :
[https://grafana.com/docs/grafana/latest/plugins/developing/code-styleguide/](https://grafana.com/docs/grafana/latest/plugins/developing/code-styleguide/)
155

156
157
*Article intéressant à propos du futur style de Grafana :
[https://grafana.com/blog/2019/10/30/new-form-styles-coming-to-grafana/](https://grafana.com/blog/2019/10/30/new-form-styles-coming-to-grafana/)*
158

159
160
Article à propos du mode Édition d'un plugin :
[https://grafana.com/docs/grafana/latest/plugins/developing/defaults-and-editor-mode/](https://grafana.com/docs/grafana/latest/plugins/developing/defaults-and-editor-mode/)
161

162
163
Première page de la section "Développement de plugins" :
[https://grafana.com/docs/grafana/latest/plugins/developing/development/](https://grafana.com/docs/grafana/latest/plugins/developing/development/)
Claire Velut's avatar
Claire Velut committed
164

165
## Semaine 5 : 09/03 - 15/03
Claire Velut's avatar
Claire Velut committed
166

167
Nous avons fait la présentation de mi-projet et nous avons également regardé la présentation d'autres groupes.
Claire Velut's avatar
Claire Velut committed
168

169
170
Nous avons cherché comment ajouter un fichier GeoJSON à la carte via le bouton.
Après plusieurs recherches nous avons d'abord essayé d'utiliser l'exemple de ce site [https://embed.plnkr.co/plunk/2vgnFe](https://embed.plnkr.co/plunk/2vgnFe).
Claire Velut's avatar
Claire Velut committed
171

172
173
174
Après plusieurs essais nous avons utilisé les informations sur ce site [How to open file dialog via js?](https://stackoverflow.com/questions/16215771/how-open-select-file-dialog-via-js/16215950).
Nous avons pu lancer, au clic du bouton, une fenêtre sur laquelle nous pouvons cliquer sur un fichier.
Nous avons ajouté la fonctionnalité qui permet à l'utilisateur de ne selectionner qu'un fichier `.json`. 
Claire Velut's avatar
Claire Velut committed
175
176
Nous verrons plus tard si cette fonctionnalité est pertinente ou pas.

177
178
179
Pour l'instant nous n'avons pas encore récupéré le contenu du fichier pour l'ajouter à la carte.
Une fois que nous aurons compris comment récupérer le contenu du fichier,
la suite ne sera pas compliquée puisqu'elle pourra certainement être gérée de la même façon que les données dans la zone de texte.
Claire Velut's avatar
week 6    
Claire Velut committed
180

181
182
183
184
En parallèle nous avons remarqué que si le code mis dans la zone de texte est effacé, le dessin reste sur la carte.
Nous avons essayé de chercher comment mettre à jour la carte en fonction du contenu de la zone de texte.
En effet cela peut être intérressant d'ajouter plusieurs formes une à une via la zone de texte mais cela ne permet donc que d'ajouter et pas de retirer des formes.
C'est donc une fonctionnalité à laquelle nous devront réflechir. 
Claire Velut's avatar
week 6    
Claire Velut committed
185

186
## Semaine 6 : 16/03 - 22/03
Claire Velut's avatar
week 6    
Claire Velut committed
187

188
189
Nous sommes toujours bloquées sur ces 2 derniers aspects que nous nous sommes répartis :
récupération du contenu d'un fichier et mise à jour de l'affichage lors d'un changement dans la zone de texte.
Claire Velut's avatar
Week 7    
Claire Velut committed
190

191
192
193
194
195
Du côté du bouton permettant l'ajout d'un fichier `.json`, nous avons réussi à récupérer le contenu du fichier dans le code HTML
et à l'afficher sur Grafana (juste le texte du fichier), mais nous n'arrivons pas à passer le fichier depuis le fichier `.html`
à la classe `TrackMapCtrl` qui permet de faire l'affichage des objets avec Leaflet.
Comme le problème vient du fait que nous ne connaissons pas assez Javascript et AngularJS nous sous sommes renseignées sur ces technologies cette semaine.
En espérant pouvoir nous débloquer rapidement. 
Claire Velut's avatar
Week 7    
Claire Velut committed
196

197
Pour l'instant, l'implémentation intuitive qui permet de retirer un objet GeoJSON inséré via la zone de texte ne fonctionne pas après plusieurs essais.
Claire Velut's avatar
Week 7    
Claire Velut committed
198

199
## Semaine 7 : 23/03 - 29/03
Claire Velut's avatar
Week 7    
Claire Velut committed
200

201
Nous avons réussi à implémenter l'importation d'un fichier et l'affichage de son contenu sur la carte. 
Claire Velut's avatar
Week 7    
Claire Velut committed
202

203
204
Nous n'avons pas pu utiliser le data binding d'AngularJS via `ng-model` car il n'est pas supporté pour *input[file]* 
([voir ici](https://docs.angularjs.org/api/ng/directive/input))
Claire Velut's avatar
Week 7    
Claire Velut committed
205

206
Nous avons récupéré le fichier grâce à la méthode `getElementById` et nous avons lu son contenu grâce à un `FileReader()`.
Mica Murphy's avatar
Mica Murphy committed
207
208
209
210

Nous avons réglé le problème de carte qui ne s'actualisait pas en même temps que le contenu de la `textarea`.
Le souci était que nous ne stockions pas la bonne donnée en mémoire pour la supprimer lorsque le texte était modifié,
c'était donc un nouvel objet (créé à partir de cette donnée et qui n'avait par conséquent jamais été ajouté à la carte) qui était "supprimé".
Mica Murphy's avatar
Mica Murphy committed
211
212
Maintenant lorsque le code de l'overlay est modifié, la carte est actualisée en temps réel.

Claire Velut's avatar
Claire Velut committed
213
## Semaine 8 : 30/03 - 05/04
Mica Murphy's avatar
Mica Murphy committed
214
215
216
217
218
219
220
221
222
223
224
225

Cette semaine nous avons réussi à faire une première version de liste d'overlays :
en-dessous de la `textarea` se trouve un bouton "Save" et lorsqu'on clique dessus le contenu de la `textarea` est sauvegardé comme un nouvel élément de la liste.
De plus, à côté du nom (pour l'instant c'est l'identifiant Leaflet) se trouvent 3 boutons (pour le moment inactifs) 
qui permettront de supprimer un élément, l'éditer (dans la `textarea`) ou le télécharger (en tant que fichier).

*TODO :*

- Implémenter les fonctions des 3 boutons
- Ajouter comme deuxième remote le Gitlab afin de pouvoir push sur les deux
([Github](https://github.com/micamur/grafana-trackmap-panel) et [Gitlab](https://gricad-gitlab.univ-grenoble-alpes.fr/Projets-INFO4/19-20/12/grafana-trackmap-panel))
- Éditer le fichier README.md du projet afin de documenter nos ajouts
Claire Velut's avatar
Claire Velut committed
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
- Faire bientôt une pull request avec un MVP (Minimum Viable Product)

## Semaine 9 : 06/04 - 12/04

Cette semaine nous avons commencé l'implémentation des fonctions correspondantes aux 3 boutons des la liste des overlays.
On peut maintenant télécharger et supprimer un overlay.

Nous avons également amélioré l'aspect graphique du bouton qui permet d'ajouter un overlay GeoJson depuis un fichier pour qu'il corresponde au style graphique du plugin.
Nous avons également amélioré l'ajout du fichier, avant il fallait cliquer sur le bouton `browse` pour récupérer un fichier puis sur le bouton `import` pour l'ajouter à la carte.
Maintenant il n'y a qu'un seul bouton pour les deux opérations, lorsque le fichier est séléctionné il est automatiquement ajouté à la carte.

## Semaine 10 : 13/04 - 19/04

Cette semaine nous avons commencé la fonction qui permet l'édition d'un overlay de la liste.
Et nous avons ajouté les popups qui permettent d'afficher les `properties` du fichier geojson lors d'un clique sur l'overlay.
Nous avons aussi commencé à chercher comment faire notre propre plugin grafana pour implémenter l'ajout du QRcode.
Claire Velut's avatar
Claire Velut committed
242
243
244
245
[How to start your own plugin](https://grafana.com/docs/grafana/v6.6/plugins/developing/development/)

## Semaine 11 : 27/04 - 03/05

246
247
248
249
250
251
252
253
Cette semaine nous nous sommes rendues compte d'une erreur lors de la sauvegarde du dashboard.
Nous sommes donc remontées dans les commits pour voir où apparaissait l'erreur et trouver d'où elle provenait. 
Mica s'est chargé de corriger cette erreur, cela provenait du fait que certaines données (notamment les objets Leaflet) ne sont pas bien sérialisées avec AngularJS et Javascript.
Pour contourner le problème nous avons utilisé des listes annexes.

Pendant ce temps, Claire s'est chargée de créer un nouveau panel en suivant les étapes données [ici](https://grafana.com/tutorials/build-a-panel-plugin/#1) et a implémenté la génération d'un QR code pour le dashboard courant.

Nous avons décidé de ne pas aller au bout de la fonction d'édition pour le plugin Trackmap car nous n'avons pas pu la finir dans les temps.