Passer au contenu principal
ClickStack prend en charge la visualisation des événements, avec une prise en charge native des graphiques dans l’interface ClickStack UI (HyperDX). Ces graphiques peuvent être ajoutés à des tableaux de bord afin d’être partagés avec d’autres utilisateurs. Des visualisations peuvent être créées à partir de traces, de métriques, de logs ou de tout schéma d’événements wide défini par l’utilisateur.

​
Création de visualisations

L’interface Chart Explorer de HyperDX vous permet de visualiser les métriques, les traces et les logs dans le temps, ce qui facilite la création rapide de visualisations pour analyser les données. Cette interface est également réutilisée lors de la création de tableaux de bord. La section suivante explique comment créer une visualisation avec Chart Explorer. Chaque visualisation commence par la sélection d’une source de données, suivie d’une métrique, avec éventuellement des expressions de filtre et des champs de groupement. En pratique, les visualisations dans HyperDX correspondent en arrière-plan à une requête SQL GROUP BY : vous définissez les métriques à agréger selon les dimensions sélectionnées.
Génération de graphiques par IAClickStack permet également de créer des graphiques à partir de descriptions en langage naturel grâce à la fonctionnalité text-to-chart. Décrivez ce que vous souhaitez voir, et ClickStack génère automatiquement la visualisation.
Par exemple, vous pouvez représenter le nombre d’erreurs (count()) regroupé par nom de service. Pour les exemples ci-dessous, nous utilisons le jeu de données distant disponible sur sql.clickhouse.com, décrit dans le guide “Remote Demo Dataset”. Vous pouvez également reproduire ces exemples en consultant play-clickstack.clickhouse.com.
1

​
Accéder à Chart Explorer

Sélectionnez Chart Explorer dans le menu de gauche.
2

​
Créer une visualisation

Dans l’exemple ci-dessous, nous représentons la durée moyenne des requêtes dans le temps, par nom de service. Pour cela, l’utilisateur doit préciser une métrique, une colonne (qui peut être une expression SQL) et un champ d’agrégation.Sélectionnez le type de visualisation Line/Bar dans le menu supérieur, puis le jeu de données Traces (ou Demo Traces si vous utilisez play-clickstack.clickhouse.com). Renseignez les valeurs suivantes :
  • Métrique : Average
  • Colonne : Duration/1000
  • Where : <empty>
  • Group By : ServiceName
  • Alias : Average Time
Notez que vous pouvez filtrer les événements soit avec une clause SQL WHERE, soit avec la syntaxe Lucene, et définir la plage de temps sur laquelle les événements doivent être visualisés. Les visualisations avec plusieurs séries sont également prises en charge.Par exemple, filtrez sur le service frontend en ajoutant le filtre ServiceName:"frontend". Ajoutez une deuxième série pour le nombre d’événements au fil du temps avec l’alias Count en cliquant sur Add Series.Pour créer une série semblable à une série existante, vous pouvez la dupliquer au lieu de repartir de zéro. Cliquez sur l’icône de copie (Duplicate series) sur une ligne de série pour insérer une copie directement en dessous. La copie conserve les paramètres de la série source, tels que la métrique, la colonne et le filtre. Vous n’avez ensuite plus qu’à modifier les champs qui diffèrent (par exemple l’agrégation) et à donner à la copie son propre alias. La duplication est disponible partout où plusieurs séries sont prises en charge. Elle est masquée pour les types de visualisation qui n’autorisent qu’une seule série, comme Number, Pie et Heatmap.Pour créer une série semblable à une série existante, vous pouvez la dupliquer au lieu de repartir de zéro. Cliquez sur l’icône de copie (Duplicate series) sur une ligne de série pour insérer une copie directement en dessous. La copie conserve les paramètres de la série source, tels que la métrique, la colonne et le filtre. Vous n’avez ensuite plus qu’à modifier les champs qui diffèrent (par exemple l’agrégation) et à donner à la copie son propre alias. La duplication est disponible partout où plusieurs séries sont prises en charge. Elle est masquée pour les types de visualisation qui n’autorisent qu’une seule série, comme Number, Pie et Heatmap.
Les visualisations peuvent être créées à partir de n’importe quelle source de données — métriques, traces ou logs. ClickStack traite tous ces éléments comme des wide events. Toute colonne numérique peut être représentée sur un graphique dans le temps, et les colonnes chaîne, date ou numériques peuvent être utilisées pour les regroupements.Cette approche unifiée vous permet de créer des tableaux de bord couvrant différents types de données de télémétrie à l’aide d’un modèle cohérent et flexible.

​
Création de tableaux de bord

Les tableaux de bord permettent de regrouper des visualisations liées afin de comparer les métriques et d’explorer les tendances côte à côte pour identifier les causes profondes potentielles dans vos systèmes. Ces tableaux de bord peuvent être utilisés pour des investigations ad hoc ou enregistrés pour un suivi continu. Les filtres globaux peuvent être appliqués au niveau du tableau de bord et se répercutent automatiquement sur toutes les visualisations qu’il contient. Cela permet un drill-down cohérent entre les graphiques et simplifie la corrélation des événements entre les services et les types de télémétrie. Nous créons ci-dessous un tableau de bord avec deux visualisations à l’aide des sources de données de logs et de traces. Ces étapes peuvent être reproduites sur play-clickstack.clickhouse.com ou localement en vous connectant au dataset hébergé sur sql.clickhouse.com, comme décrit dans le guide “Remote Demo Dataset”.
1

​
Accéder aux tableaux de bord

Sélectionnez Dashboards dans le menu de gauche. Cliquez ensuite sur New Dashboard pour créer un tableau de bord temporaire ou enregistré.
2

​
Créer une visualisation – temps moyen des requêtes par service

Sélectionnez Add New Tile pour ouvrir le panneau de création de visualisation.Sélectionnez le type de visualisation Line/Bar dans le menu supérieur, puis le jeu de données Traces (ou Demo Traces si vous utilisez play-clickstack.clickhouse.com). Renseignez les valeurs suivantes pour créer un graphique affichant la durée moyenne des requêtes au fil du temps pour chaque service :
  • Nom du graphique : Average duration by service
  • Métrique : Average
  • Colonne : Duration/1000
  • Où : <empty>
  • Group By : ServiceName
  • Alias : Average Time
Cliquez sur le bouton play avant de cliquer sur Save.Redimensionnez la visualisation pour qu’elle occupe toute la largeur du tableau de bord.
3

​
Créer une visualisation – événements au fil du temps par service

Sélectionnez Add New Tile pour ouvrir le panneau de création de visualisation.Sélectionnez le type de visualisation Line/Bar dans le menu supérieur, puis le jeu de données Logs (ou Demo Logs si vous utilisez play-clickstack.clickhouse.com). Renseignez les valeurs suivantes pour créer un graphique affichant le nombre d’événements au fil du temps pour chaque nom de service :
  • Chart Name : Event count by service
  • Metric : Count of Events
  • Where : <empty>
  • Group By : ServiceName
  • Alias : Count of events
Cliquez sur le bouton play avant de cliquer sur Save.Redimensionnez la visualisation pour qu’elle occupe toute la largeur du dashboard.
4

​
Ajouter une tuile Heatmap pour la durée des spans

Les tuiles Heatmap représentent, sous forme de grille colorée, le nombre d’événements présents dans chaque bucket (temps, valeur). Utilisez une heatmap lorsque vous voulez voir la forme d’une distribution dans le temps, et pas seulement la moyenne ou un percentile unique. Une heatmap de latence révèle des schémas de durée bimodaux, des regroupements dans la queue lente ou des dispersions soudaines qu’un graphique linéaire lisserait.Pour ajouter une tuile Heatmap :
  1. Sélectionnez Add New Tile.
  2. Choisissez le type de visualization Heatmap dans le menu supérieur. La liste déroulante des sources de données n’affiche que les sources dont le Source Type est Traces. Les sources de logs, de metrics et de session sont exclues, car les heatmaps nécessitent une colonne de durée de span que seules les sources de traces fournissent.
  3. Choisissez l’une de vos sources de traces par son nom. Le nom lui-même est arbitraire : seul le type compte.
Une fois une source sélectionnée, la heatmap préremplit :
  • Value : la Duration Expression de la source, mise à l’échelle selon l’unité d’affichage actuelle (par exemple (Duration)/1e6 pour convertir la durée de span de chaque événement de nanosecondes en millisecondes)
  • Count : count()
  1. Définissez un nom de graphique, puis utilisez Where pour limiter la heatmap à un service spécifique ou à un ensemble d’opérations dont vous souhaitez observer les performances.
  2. Ajustez l’intervalle de temps pour qu’il corresponde à la période voulue. Des intervalles plus larges font apparaître des variations de distribution et des schémas de latence bimodaux que des fenêtres plus courtes peuvent masquer.
L’exemple ci-dessous montre un seul service sur une fenêtre de 24 heures, avec les chemins rapides et lents de la durée de ses spans clairement séparés en deux bandes horizontales.Pour personnaliser davantage la heatmap, cliquez sur Display Settings pour ouvrir un drawer permettant de configurer l’expression Scale (Log ou Linear), Value et Count. La liste complète des options est documentée dans Customize the heatmap sur la page Event Deltas. Le même drawer est réutilisé.Cliquez sur Run pour prévisualiser le graphique, puis sur Save.La tuile enregistrée s’affiche sous forme de heatmap sur le dashboard. Survolez n’importe quelle cellule pour voir les bornes du bucket et le nombre d’événements.
Deux requêtes ClickHouse par heatmapLa heatmap s’exécute en deux queries séquentielles : une petite requête de bornes qui détermine la plage de valeurs, puis une requête heatmap qui compte les événements par bucket. Les deux queries sont visibles dans l’éditeur sous Generated SQL si vous voulez les examiner ou les copier.

​
Approfondir dans Event Deltas

Cliquez sur n’importe quelle cellule d’une tuile Heatmap affichée pour ouvrir l’action View in Event Deltas.En la sélectionnant, vous ouvrez la vue Event Deltas avec la source de données de la tuile, la clause Where et l’intervalle de temps conservés. Vous pouvez alors examiner la même distribution de manière interactive, la découper par attribute pour voir ce qui distingue les spans lents des rapides, et inspecter les spans individuels derrière n’importe quelle cellule, sans reconstruire la query à la main.
5

​
Filtrer un tableau de bord

Des filtres Lucene ou SQL, ainsi que l’intervalle de temps, peuvent être appliqués au niveau du tableau de bord et seront automatiquement répercutés sur toutes les visualisations.Pour illustrer cela, appliquez le filtre Lucene ServiceName:"frontend" au tableau de bord et modifiez la fenêtre temporelle pour qu’elle couvre les 3 dernières heures. Notez que les visualisations n’affichent désormais que les données du service frontend.Le tableau de bord sera enregistré automatiquement. Pour définir son nom, sélectionnez le titre et modifiez-le avant de cliquer sur Save Name.

​
Tableaux de bord - modifier les visualisations

Pour supprimer, modifier ou dupliquer une visualisation, survolez-la, puis utilisez les boutons d’action correspondants. Les tableaux de bord sont accessibles depuis la page des tableaux de bord. Ils sont organisés par tag et intègrent des fonctions de recherche et de filtrage permettant de retrouver rapidement des tableaux de bord spécifiques. Les tableaux de bord peuvent être ajoutés aux favoris pour y accéder facilement depuis la barre latérale et en haut de la page de liste. Les favoris sont propres à chaque utilisateur.

​
Tableaux de bord - ajout d’étiquettes

Vous pouvez ajouter des tags aux tableaux de bord et aux recherches enregistrées pour mieux les organiser. Les tags offrent un moyen souple de les classer et de les filtrer selon vos besoins.

​
Fonctionnement des tags

  • Organisation : les tags apparaissent dans la barre latérale de gauche, où les tableaux de bord et les recherches enregistrées sont regroupés selon les tags qui leur sont attribués
  • Tags multiples : vous pouvez ajouter un ou plusieurs tags à un même élément pour mieux le catégoriser
  • Création automatique : si vous attribuez un tag qui n’existe pas encore, il sera créé automatiquement
  • Gestion simplifiée : vous pouvez ajouter ou supprimer des tags à tout moment pour adapter votre structure d’organisation
Il devient ainsi facile de retrouver les éléments associés et de garder un workspace organisé à mesure que votre collection s’agrandit. Vous pouvez également sélectionner plusieurs tags pour filtrer et afficher des éléments de différentes catégories :

​
Filtres personnalisés

En plus des filtres en texte libre disponibles sur tous les tableaux de bord, les tableaux de bord enregistrés prennent en charge des filtres déroulants personnalisés alimentés par des données interrogées dans ClickHouse. Ils offrent des contrôles de filtrage réutilisables, utilisables en quelques clics, afin que les utilisateurs des tableaux de bord puissent filtrer sans avoir à écrire manuellement des expressions. Les étapes suivantes montrent comment ajouter un filtre personnalisé au tableau de bord créé dans la section « Création de tableaux de bord ».
1

​
Ouvrir la boîte de dialogue Modifier les filtres

Ouvrez un tableau de bord enregistré et sélectionnez Edit Filters dans la barre d’outils.
2

​
Ajouter un nouveau filtre

Cliquez sur Add new filter. Configurez le filtre en renseignant un Name, en sélectionnant une Data source, puis en saisissant une Filter expression — une colonne SQL ou une expression dont les valeurs distinctes alimenteront la liste déroulante. Cliquez sur Save filter.Par exemple, pour ajouter un filtre de service pour les données de traces, utilisez ServiceName comme expression de filtre avec la source de données Traces. Le champ « Dropdown values filter » est facultatif et permet de restreindre les valeurs affichées dans la liste déroulante.La fenêtre modale Filters affiche tous les filtres configurés pour le tableau de bord. Depuis cette fenêtre, vous pouvez modifier ou supprimer des filtres existants, ou en ajouter d’autres.
3

​
Utiliser le filtre

Fermez la fenêtre modale Filters. Le nouveau filtre déroulant apparaît sous la barre de recherche. Cliquez dessus pour afficher les valeurs disponibles, puis sélectionnez-en une pour filtrer toutes les visualisations du tableau de bord.
4

​
(Facultatif) Enregistrer les valeurs du filtre par défaut

Pour conserver une sélection de filtre comme valeur par défaut du tableau de bord, choisissez Save Query & Filters as Default dans le menu du tableau de bord. Le tableau de bord s’ouvrira toujours avec les filtres sélectionnés appliqués. Pour réinitialiser, sélectionnez Remove Default Query & Filters dans ce même menu.
Les filtres déroulants personnalisés sont disponibles sur les tableaux de bord enregistrés. Pour voir un exemple concret de ce fonctionnement, consultez le tableau de bord Kubernetes, qui fournit des filtres déroulants intégrés pour le pod, le déploiement, le nom du nœud, l’espace de noms et le cluster.
Les tuiles de tableau de bord prennent en charge l’exploration détaillée vers la page Search. Cliquez sur un point de données dans une visualisation pour ouvrir un menu contextuel proposant les options suivantes :
  • Afficher tous les événements — ouvre la page Search en affichant tous les événements de la fenêtre de temps sélectionnée.
  • Filtrer par groupe — ouvre la page Search avec un filtre appliqué à une série spécifique.
C’est utile pour examiner des pics ou anomalies spécifiques repérés dans un tableau de bord : vous pouvez rapidement passer d’une vue agrégée aux événements individuels sous-jacents.

​
Préréglages

HyperDX est fourni avec des tableaux de bord prêts à l’emploi.

​
Tableau de bord ClickHouse

Ce tableau de bord propose des visualisations pour surveiller ClickHouse. Pour y accéder, sélectionnez-le dans le menu de gauche. Ce tableau de bord utilise des onglets pour distinguer le suivi de Selects, Inserts et de ClickHouse Infrastructure.
Accès requis aux tables systèmeCe tableau de bord interroge les tables système de ClickHouse pour afficher les principales métriques. Les autorisations suivantes sont requises :GRANT SHOW COLUMNS, SELECT(CurrentMetric_MemoryTracking, CurrentMetric_S3Requests, ProfileEvent_OSCPUVirtualTimeMicroseconds, ProfileEvent_OSReadChars, ProfileEvent_OSWriteChars, ProfileEvent_S3GetObject, ProfileEvent_S3ListObjects, ProfileEvent_S3PutObject, ProfileEvent_S3UploadPart, event_time) ON system.metric_logGRANT SHOW COLUMNS, SELECT(active, database, partition, rows, table) ON system.partsGRANT SHOW COLUMNS, SELECT(event_date, event_time, memory_usage, normalized_query_hash, query, query_duration_ms, query_kind, read_rows, tables, type, written_bytes, written_rows) ON system.query_logGRANT SHOW COLUMNS, SELECT(event_date, event_time, hostname, metric, value) ON system.transposed_metric_log

​
Tableau de bord des services

Le tableau de bord des services affiche les services actuellement actifs à partir des données de traces. Cela nécessite d’avoir collecté des traces et configuré une source de données Traces valide. Les noms des services sont détectés automatiquement à partir des données de traces, avec une série de visualisations prédéfinies réparties sur trois onglets : Services HTTP, Base de données et Erreurs. Les visualisations peuvent être filtrées à l’aide de la syntaxe Lucene ou SQL, et la fenêtre de temps peut être ajustée pour une analyse ciblée.

​
Tableau de bord Kubernetes

Ce tableau de bord vous permet d’explorer les événements Kubernetes collectés via OpenTelemetry. Il propose des options de filtrage avancées pour filtrer par pod Kubernetes, déploiement, nom de nœud, espace de noms et cluster, ainsi que pour effectuer des recherches en texte libre. Les données Kubernetes sont organisées en trois onglets pour faciliter la navigation : Pods, Nœuds et Espaces de noms.
Dernière modification le 25 juin 2026