DASHBOARD ANALYTICS
Interface Vue.js pour la visualisation de logs Elasticsearch en temps réel.
Contexte
Logs applicatifs existants étaient consultables uniquement via Kibana (complexe et over-featured). J'ai voulu créer une interface épurée, orientée développeurs, permettant à l'équipe de comprendre ce qui se passe en prod en temps réel.
Méthodologie d'Apprentissage
- 1
Apprentissage API Elasticsearch : search, aggregations, scroll
- 2
Prototypage rapide Vue.js Composition API pour valider l'approche
- 3
Temps réel via Server-Sent Events (plus simple que WebSockets pour read-only)
- 4
Design itératif TailwindCSS avec feedback utilisateur
- 5
Optimisation requêtes Elasticsearch avec agrégations multi-niveaux
Défis Techniques
Volume de données massive (100k+ résultats)
Performance dégradée. Solution : virtualised scrolling avec vue-virtual-scroller (milliers de lignes sans lag).
Requêtes Elasticsearch complexes et contre-intuitives
Agrégations multi-niveaux par service/niveau/heure. Solution : tests unitaires pour chaque requête DSL, documentation.
Responsive design pour tableaux de données
Illisible sur mobile. Refonte : card-based layout pour écrans <768px.
Résultats
Dashboard temps réel (latency ~500ms)
100% adoption équipe vs 20% Kibana avant
Compétence data visualization + optimisation Elasticsearch
Framework Vue.js maîtrisé (Composition API, state management)
Explore More