Creación de visualizaciones
GROUP BY: se definen métricas para agregarlas en las dimensiones seleccionadas.
Por ejemplo, podrías crear un gráfico con el número de errores (count()) agrupados por nombre de servicio.
Para los ejemplos siguientes, usamos el conjunto de datos remoto disponible en sql.clickhouse.com, descrito en la guía “Conjunto de datos de demostración remoto”. También puedes reproducir estos ejemplos visitando play-clickstack.clickhouse.com.
2
Crear visualización
En el ejemplo siguiente, creamos un gráfico de la duración media de las solicitudes a lo largo del tiempo por nombre de servicio. Para ello, el usuario debe especificar una métrica, una columna (que puede ser una expresión SQL) y un campo de agregación.Selecciona el tipo de visualización
Line/Bar en el menú superior y, a continuación, el conjunto de datos Traces (o Demo Traces si usas play-clickstack.clickhouse.com). Completa los siguientes valores:- Metric:
Average - Column:
Duration/1000 - Where:
<empty> - Group By:
ServiceName - Alias:
Average Time
WHERE o sintaxis Lucene, y establecer el intervalo de tiempo en el que deben visualizarse. También se admiten varias series.Por ejemplo, filtra por el servicio frontend añadiendo el filtro ServiceName:"frontend". Agrega una segunda serie para el recuento de eventos a lo largo del tiempo con el alias Count haciendo clic en Add Series.Para crear una serie similar a una existente, puedes duplicarla en lugar de empezar desde cero. Haz clic en el icono de copia (Duplicate series) en una fila de serie para insertar una copia directamente debajo. La copia conserva la configuración de la serie de origen, como la métrica, la columna y el filtro. Después, solo tienes que cambiar los campos que sean distintos (por ejemplo, la agregación) y asignarle a la copia su propio alias. La duplicación está disponible siempre que se admitan varias series. Está oculta en los tipos de visualización que solo permiten una serie, como Number, Pie y Heatmap.Las visualizaciones pueden crearse a partir de cualquier fuente de datos: métricas, traza o logs. ClickStack trata todos estos datos como eventos wide. Cualquier columna numérica puede representarse en un gráfico a lo largo del tiempo, y las columnas de tipo cadena, fecha o numérico pueden usarse para agrupaciones.Este enfoque unificado permite crear dashboards en distintos tipos de telemetría utilizando un modelo coherente y flexible.
Creación de dashboards
2
Crear una visualización: tiempo promedio de solicitud por servicio
Selecciona
Add New Tile para abrir el panel de creación de visualizaciones.Selecciona el tipo de visualización Line/Bar en el menú superior y, a continuación, el dataset Traces (o Demo Traces si usas play-clickstack.clickhouse.com). Completa los siguientes valores para crear un gráfico que muestre la duración promedio de las solicitudes a lo largo del tiempo para cada nombre de servicio:- Nombre del gráfico:
Average duration by service - Métrica:
Average - Columna:
Duration/1000 - Where:
<empty> - Agrupar por:
ServiceName - Alias:
Average Time
Save.Cambia el tamaño de la visualización para que ocupe todo el ancho del dashboard.3
Crear una visualización: eventos a lo largo del tiempo por servicio
Seleccione
Add New Tile para abrir el panel de creación de visualizaciones.Seleccione el tipo de visualización Line/Bar en el menú superior y, a continuación, el conjunto de datos Logs (o Demo Logs si usa play-clickstack.clickhouse.com). Complete los siguientes valores para crear un gráfico que muestre el recuento de eventos a lo largo del tiempo por nombre de servicio:- Nombre del gráfico:
Event count by service - Métrica:
Count of Events - Where:
<empty> - Agrupar por:
ServiceName - Alias:
Count of events
Save.Cambie el tamaño de la visualización para que ocupe todo el ancho del dashboard.4
Agrega un tile de heatmap para la duración de spans
Los tiles de heatmap muestran el recuento de eventos que caen en cada bucket de (tiempo, valor) como una cuadrícula coloreada. Usa un heatmap cuando quieras ver la forma de una distribución a lo largo del tiempo, no solo el promedio o un único percentil. Un heatmap de latencia revela patrones de duración bimodales, agrupaciones en la cola lenta o dispersiones repentinas que un gráfico de líneas promediaría y ocultaría.Para agregar un tile de heatmap:
- Selecciona
Add New Tile. - Elige el tipo de visualización
Heatmapen el menú superior. El menú desplegable de fuentes de datos solo muestra fuentes cuyo tipo de source esTraces. Las fuentes de logs, metrics y session se excluyen, ya que los heatmaps necesitan una columna de duración de span que solo proporcionan las fuentes de traces. - Elige cualquiera de tus fuentes de traces por nombre. El nombre en sí es arbitrario; solo importa el tipo.
- Value: la
Duration Expressionde la fuente, ajustada a la unidad de visualización actual (por ejemplo,(Duration)/1e6para convertir la duración de span de cada evento de nanosegundos a milisegundos) - Count:
count()
- Define un nombre para el gráfico y usa
Wherepara limitar el heatmap a un servicio específico o a un conjunto de operaciones cuyo rendimiento quieras observar. - Ajusta el intervalo de tiempo para que coincida con el período de interés. Los intervalos más amplios muestran cambios en la distribución y patrones de latencia bimodales que las ventanas más cortas pueden ocultar.
Run para obtener una vista previa del gráfico y luego en Save.El tile guardado se muestra como un heatmap en el dashboard. Pasa el cursor sobre cualquier celda para ver los límites del bucket y el recuento de eventos.Profundiza en Event Deltas
Haz clic en cualquier celda de un tile de heatmap ya renderizado para abrir la acción View in Event Deltas.Al seleccionarla, se abre la vista de Event Deltas con la fuente de datos del tile, la cláusulaWhere y el intervalo de tiempo transferidos. Desde allí puedes examinar la misma distribución de forma interactiva, segmentar por attribute para ver qué hace que los spans lentos sean distintos de los rápidos e inspeccionar los spans individuales detrás de cualquier celda, sin tener que reconstruir manualmente la consulta.5
Filtrar el dashboard
Se pueden aplicar filtros de Lucene o SQL, junto con el intervalo de tiempo, a nivel del dashboard, y se propagarán automáticamente a todas las visualizaciones.Para demostrarlo, aplique el filtro de Lucene
ServiceName:"frontend" al dashboard y ajuste el intervalo de tiempo para que abarque las últimas 3 horas. Observe cómo las visualizaciones ahora reflejan únicamente datos del servicio frontend.El dashboard se guardará automáticamente. Para definir el nombre del dashboard, seleccione el título y modifíquelo antes de hacer clic en Save Name.Dashboards - edición de visualizaciones
Configuración de visualización del tile
Color del tile numérico
Tokens semánticos (orientados al estado):
Use tokens semánticos cuando el número represente un estado (por ejemplo, un recuento de errores con
chart-error o una tasa saludable con chart-success). Use tokens categóricos cuando desee distinguir visualmente entre tiles de KPI relacionados sin implicar un estado.
Las configuraciones antiguas pueden seguir almacenando tokens numéricos heredados (de chart-1 a chart-10). ClickStack los asigna a los tokens con nombres de tonos indicados anteriormente al cargar un dashboard.
La misma paleta también permite definir reglas de color opcionales en el mismo panel lateral: condiciones ordenadas que se evalúan con respecto al valor mostrado (prevalece la última coincidencia). Cuando ninguna regla coincide, se aplica el color estático y, después, el color de texto predeterminado.
Gráfico de fondo del tile numérico
API de Dashboards: color de un tile numérico
POST / PUT /api/v2/dashboards), establezca color en la configuración de un tile numérico del constructor con un token de paleta. No se admiten valores hex sin procesar.
color acepta cualquier token de las listas categóricas y semánticas anteriores (por ejemplo, chart-blue o chart-success). De forma opcional, backgroundChart.color sobrescribe el color de la minigráfica con el mismo token de la enumeración. Consulta la referencia de la API de ClickStack para obtener información sobre la autenticación y las URL base.
Dashboards: listado y búsqueda
Dashboards - etiquetado
- Organización: Las etiquetas aparecen en la barra lateral izquierda, donde los dashboards y las búsquedas guardadas se agrupan según las etiquetas asignadas
- Múltiples etiquetas: Puedes añadir una o varias etiquetas a un mismo elemento para categorizarlo mejor
- Creación automática: Si asignas una etiqueta que aún no existe, se creará automáticamente
- Gestión sencilla: Puedes añadir o quitar etiquetas en cualquier momento para ajustar la estructura de tu organización
Filtros personalizados y variables
- Broadcast: aplica la selección como condición de filtro en los tiles coincidentes. No es necesario actualizar los tiles para que hagan referencia al filtro.
- Variable: expone la selección a las consultas de los tiles como
$variableName, de modo que cada tile decide dónde y cómo se usa el valor.
1
Abrir el cuadro de diálogo Edit Filters
Abra un dashboard guardado y seleccione Edit Filters and Variables en la barra de herramientas.
2
Añadir un filtro nuevo
Haga clic en Add new filter. Configure el filtro indicando un Display Name, seleccionando una Data source e introduciendo una Filter expression: una columna o expresión SQL cuyos valores distintos rellenarán la lista desplegable. Haga clic en Save filter.Por ejemplo, para añadir un filtro de servicio a datos de traza, use
ServiceName como expresión de filtro con la fuente de datos Traces. El “Dropdown values filter” es opcional y permite restringir qué valores aparecen en la lista desplegable.El mismo cuadro de diálogo también controla si el filtro difunde su valor y si está disponible como variable, ambas opciones se describen a continuación.El modal Filters muestra todos los filtros configurados para el dashboard. Desde aquí puede editar o eliminar filtros existentes, o añadir más.3
Usar el filtro
Cierre el modal Filters. El nuevo filtro desplegable aparece debajo de la barra de búsqueda. Haga clic en él para ver los valores disponibles y, a continuación, seleccione uno para filtrar todas las visualizaciones del dashboard.
4
(Opcional) Guardar los valores del filtro como predeterminados
Para conservar una selección de filtro como valor predeterminado del dashboard, elija Save Query & Filters as Default en el menú del dashboard. El dashboard siempre se abrirá con los filtros seleccionados aplicados. Para restablecerlo, seleccione Remove Default Query & Filters en el mismo menú.
Los filtros personalizados en listas desplegables están disponibles en los dashboard guardados. Para ver un ejemplo de este patrón en uso, consulte el dashboard de Kubernetes, que proporciona filtros desplegables integrados para pod de Kubernetes, Implementación, nombre del nodo, Espacio de nombres y clúster.
Difusión
$__filters y tener una fuente seleccionada, ya que ClickStack no puede inferir dónde debe aplicarse la condición en una consulta escrita manualmente.
Variables
$variableName. El Nombre de variable usa de forma predeterminada el nombre visible del filtro, sin los caracteres no permitidos, pero se puede sobrescribir. Los nombres deben comenzar con una letra y solo pueden contener letras, dígitos y guiones bajos.
Use una variable cuando no quiera aplicar una condición WHERE a todas las consultas; por ejemplo, para incluir el valor en una expresión SELECT, una cláusula HAVING o una clave de join, o para filtrar un tile por una columna distinta de la expresión del propio filtro.
Referencia a una variable
Como
$name se representa como NULL antes de seleccionar algún valor, use las siguientes macros siempre que se espere un predicado SQL. Ambas macros se expanden a 1=1 mientras la variable no tenga ninguna selección, por lo que la consulta sigue siendo válida:
Uso de variables en tiles del constructor de gráficos
SELECT y expresiones por serie, WHERE, GROUP BY y HAVING. El editor autocompleta las variables del dashboard y muestra en qué se expande cada referencia para la selección actual.
Se recomienda usar las macros $__filter y $__conditionalAll en el modo SQL para que las consultas sigan siendo válidas cuando no se seleccionen valores de variables. Las macros no están disponibles en las entradas de Lucene; en su lugar, haga referencia directamente a las variables (p. ej., ServiceName:$service).
En una entrada de Lucene, poner o no entre comillas la propia referencia de variable determina cómo se aplica la coincidencia cuando se seleccionan varios valores. Si se selecciona $service como a,b:
Ponga la referencia de variable entre comillas —
Field:"$var" — cuando los valores seleccionados deban coincidir exactamente con Field, en lugar de como subcadenas.
Uso de variables en tiles de Raw SQL
Las alertas de un tile que hace referencia a una variable del dashboard se evalúan con todas las variables en su estado vacío, no con los valores seleccionados en el dashboard.
Desglosar en Search
- Ver todos los eventos — navega a la página Search y muestra todos los eventos de la ventana de tiempo seleccionada.
- Filtrar por grupo — navega a la página Search filtrada por una serie específica.
Preconfiguraciones
Dashboard de ClickHouse
Acceso requerido a las tablas del sistemaEste dashboard consulta las tablas del sistema de ClickHouse para mostrar métricas clave. Se requieren los siguientes permisos:
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