Amélioration du rendu des axes des graphiques et de la granularité automatique
Démo par @brandon-pereira
Une série d’améliorations du confort d’utilisation des graphiques, proposées par @arj22. Merci pour ces correctifs !
Auparavant, les libellés de durée pouvaient être tronqués, car ils dépassaient l’espace disponible sur l’axe. Les graphiques utilisent désormais le même formateur de durée compact que les heatmaps :
7.38min devient ainsi 7.4m et tient dans l’espace disponible. La commande hdx chart de la CLI applique le même formatage.
Les libellés des axes sont également plus précis. Auparavant, des valeurs telles que 1050 et 1450 pouvaient toutes deux s’afficher sous la forme 1k, ce qui rendait difficile la distinction entre des valeurs proches. Le formateur utilise désormais la plus grande précision possible dans l’espace disponible, jusqu’à deux décimales, et supprime les zéros non significatifs. Ces valeurs s’affichent désormais sous la forme 1.05k et 1.45k, sans élargir les libellés.
Les graduations de l’axe Y restent désormais régulièrement espacées sur les graphiques de faible hauteur. Auparavant, Recharts pouvait supprimer certaines graduations pour éviter que les libellés ne se chevauchent, ce qui produisait une séquence irrégulière telle que 0, 300, 1k. Les graphiques proposent désormais des graduations candidates régulièrement espacées, tout en conservant le même nombre de graduations.
Un nouveau paramètre Minimum Auto Granularity est également disponible pour les sources de metrics, dans Team Settings → Sources. Auparavant, la granularité automatique choisissait la taille des buckets uniquement en fonction de l’intervalle de temps sélectionné. Pour une metric collectée une fois par minute, un intervalle de temps court pouvait produire des buckets de 30 secondes, où valeurs et lacunes alternaient, donnant à une metric constante l’apparence d’une onde.
Définir ce minimum sur l’intervalle de collecte permet d’éviter ces lacunes. Ce paramètre fonctionne comme l’intervalle minimum par source de données de Grafana et ne s’applique que lorsque la granularité est réglée sur Auto. Les tuiles dont la granularité est définie explicitement conservent leur comportement actuel.
Pour l’instant, ce minimum s’applique uniquement aux tableaux de bord et aux tuiles. Les alertes, l’API externe, la CLI et les outils de requête MCP ne prennent pas encore ce paramètre en compte.
PR associées : #3148 Faire passer les graduations de l’axe de durée par le formateur compact, #3158 Conserver des graduations compactes sur l’axe de durée dans les graphiques du terminal, #3162 Ne plus supprimer les décimales des graduations des axes pour les grands nombres, #3172 Conserver un espacement régulier des graduations de l’axe Y lorsque Recharts en réduit le nombre pour éviter les chevauchements, #3149 Ajouter un seuil minimal par source pour la granularité automatique
Liste des tableaux de bord avec onglets, tri et filtres par tags
Démonstration par @elizabetdev
La liste des tableaux de bord a été repensée. Auparavant, les tableaux de bord prédéfinis et les favoris s’affichaient sous forme de rangées de cartes au-dessus du tableau, ce qui repoussait la liste vers le bas de la page. Les favoris disposent désormais de leur propre onglet, aux côtés de All et My dashboards, tandis que les boutons Import et New dashboard se trouvent dans l’en-tête de la page.
Chaque tableau de bord n’apparaît désormais qu’une seule fois, quel que soit le nombre de tags qui lui sont associés. Auparavant, un tableau de bord apparaissait sous chacun de ses tags, et ceux sans tag étaient regroupés en bas de la liste. Les tags fonctionnent maintenant comme un filtre à sélection multiple, accessible via un bouton Tags de largeur fixe doté d’un badge indiquant le nombre de tags sélectionnés. Si vous sélectionnez deux tags, seuls les tableaux de bord possédant les deux s’affichent.
Par défaut, la liste est triée par date de dernière modification ; le tri par nom et par date de création la plus récente est également disponible. Le tri par dernière consultation n’est pas proposé, car ce timestamp n’est pas enregistré pour le moment.
Les filtres, l’onglet sélectionné et l’ordre de tri sont conservés dans l’URL : vous pouvez ainsi recharger ou partager une vue filtrée. L’onglet My dashboards est masqué lorsqu’aucun e-mail n’est associé à l’utilisateur courant, y compris en mode local.
PR associées : #3199 Refonte de la liste des tableaux de bord avec onglets, tri et filtres par tags
Disposition du tableau des résultats de recherche et paramètres des colonnes
Démonstration par @elizabetdev
Il s’agit d’un travail exploratoire, sans engagement de mise en production.
Nous travaillons sur une nouvelle disposition du tableau des résultats de recherche afin de résoudre des problèmes signalés par plusieurs clients. Actuellement, les actions du tableau partagent une ligne avec le dernier champ de requête et se retrouvent à l’étroit lorsque le
SELECT contient de nombreuses colonnes. Ce prototype local place les actions sur une ligne dédiée.
L’ajout de colonnes est la question qui revient le plus souvent. Aujourd’hui, les utilisateurs doivent modifier le SELECT, mais beaucoup l’ignorent. Le prototype ajoute un contrôle Columns qui permet de choisir et d’appliquer des colonnes sans modifier la requête.
Un panneau de paramètres regroupe les options d’affichage. Actuellement, la sélection de lignes réserve de l’espace pour les cases à cocher à gauche de chaque ligne, même lorsque celles-ci n’apparaissent qu’au survol. Sélectionner des lignes ajoute en outre d’autres actions au tableau. Le prototype permet de choisir si les cases à cocher sont toujours visibles, apparaissent au survol ou sont entièrement masquées. Le retour à la ligne dispose d’un contrôle plus clair, et il reste de la place pour de futures options, comme une disposition plus compacte permettant d’afficher davantage de lignes à l’écran.
Ce travail est toujours en cours et aucune PR n’a encore été ouverte. N’hésitez pas à nous faire part de vos retours sur son fonctionnement.
PR associées : aucune pour l’instant ; il s’agit d’une exploration et non d’une fonctionnalité livrée. La sélection de lignes qu’elle remanie a été livrée dans #3140 (sélection multiple de lignes de recherche pour le téléchargement et la copie) et #3164 (affichage des cases à cocher au survol).
Champs de requête multilignes et surcouche qui s’agrandit au focus
Démo par @elizabetdev
Il s’agit d’un travail exploratoire, sans engagement de mise en production.
L’affichage des requêtes multilignes dans la barre de recherche fait l’objet de plaintes depuis longtemps. Auparavant, une requête se réduisait à une seule ligne lorsque le champ perdait le focus : il fallait donc cliquer de nouveau dedans pour lire la requête complète.
Ce problème a été corrigé récemment. Les champs SQL, Lucene et PromQL restent désormais entièrement visibles lorsqu’ils n’ont pas le focus, et la disposition s’agrandit à mesure qu’ils s’allongent. Le sélecteur de période et le bouton Run restent alignés sur la première ligne. L’étiquette
WHERE, redondante, et l’indicateur de touche / ont également été supprimés, mais / et s donnent toujours le focus au champ de saisie.
Cette hauteur supplémentaire n’est toutefois pas sans inconvénients. Les champs SELECT et ORDER BY s’agrandissent eux aussi et, sur un écran client classique, même un ORDER BY court peut tenir sur deux lignes. Dans le Chart Explorer, plusieurs séries peuvent provoquer l’agrandissement simultané de nombreux champs, si bien que l’éditeur occupe beaucoup d’espace vertical.
Le brouillon propose de limiter les champs à une seule ligne lorsqu’ils sont inactifs. Lorsqu’un champ reçoit le focus, la requête complète s’ouvre dans une surcouche qui recouvre le contenu situé en dessous, sans déplacer la barre d’outils ni les résultats. La surcouche se ferme lorsque le champ perd le focus, sauf si vous l’épinglez avec Keep expanded. Vous pouvez ainsi lire une longue requête tout en consultant les résultats. Le sélecteur de langage s’agrandit avec la surcouche, et un collage dans un champ réduit laisse la première ligne et les contrôles visibles.
À ce stade, nous penchons plutôt pour ne pas fusionner ce brouillon. Des champs qui s’agrandissent pendant la saisie ou au moindre mouvement de la souris peuvent être déroutants. N’ouvrir la surcouche qu’au clic dans un champ limite ce problème, mais la zone de texte qui s’agrandit avec son contenu est déjà en production et fonctionne. Une autre possibilité consisterait à sortir les contrôles des colonnes et de ORDER BY de la barre de recherche. Seul le champ WHERE s’agrandirait alors, et le comportement actuel suffirait.
La gestion des saisies volumineuses ailleurs, notamment dans le Chart Explorer, reste une question ouverte. N’hésitez pas à nous faire part de vos retours sur ce comportement.
PR associées : #3150 Maintenir visibles les champs de requête multilignes sans focus, #3151 Aligner en haut les barres d’outils à côté des champs de requête qui s’agrandissent, #3168 Supprimer l’étiquette WHERE et l’indicateur de touche / de la barre de recherche, #3175 Afficher les champs de requête multilignes dans une surcouche au focus (ouverte). La #3175 est le brouillon présenté dans la démo ; les trois PR fusionnées correspondent au comportement « toujours visible », déjà en production, qu’elle remplacerait.