Guía del usuario de Kibana. Visualización. Parte 6

Una quinta parte de la traducción de la documentación oficial de visualización de datos en Kibana.

Enlace al material original: Guía del usuario de Kibana [6.6] »Visualizar

Enlace a la Parte 1: Guía del usuario de Kibana. Visualización. Parte 1
Enlace a la Parte 2: Guía del usuario de Kibana. Visualización. Parte 2
Enlace a la Parte 3: Guía del usuario de Kibana. Visualización. Parte 3
Enlace a la Parte 4: Guía del usuario de Kibana. Visualización. Parte 4
Enlace a la Parte 5: Guía del usuario de Kibana. Visualización. Parte 5

Contenido:

1. Gráficos de Vega

2. Inspección de visualizaciones

Cuenta Vega

Advertencia Esta característica es experimental y puede modificarse o eliminarse en una versión futura. Elastic hará todo lo posible para solucionar cualquier problema, pero las funciones experimentales de SLA no admiten las funciones experimentales.
Puede crear visualizaciones de datos de Vega y VegaLite dentro de Kibana, tanto fuera de línea como en la parte superior del mapa. Para ver a Vega en acción, mira este breve video general .

Comienza con Vega

Siga estos pasos para crear su primera visualización de Vega.

1. En Kibana, seleccione Visualizar y agregue una visualización de Vega. Deberías ver el gráfico predeterminado.
2. Intente cambiar la mark de line a point , area , bar , circle , square , ... (consulte la documentación ).
3. Pruebe el resto de las visualizaciones de Vega o VegaLite. Es posible que necesite que las URL sean absolutas, por ejemplo, reemplace "url": "data/world-110m.json" con "url": "https://vega.imtqy.com/editor/data/world-110m.json" (ver nota más abajo).
4. Con la utilidad makelogs , cree algunos datos de logstash y pruebe los ejemplos de logstash ( no use makelogs en un clúster de producción).

Vega vs VegaLite

VegaLite es una versión simplificada de Vega, útil para un inicio rápido, pero con una serie de limitaciones. VegaLite se convierte automáticamente a Vega antes de la ejecución. Compare logstash-simple_line-vega y logstash-simple_line-vegalite (ambos usan algunos datos de logstash de Elasticsearch). Puede usar este editor para convertir VegaLite a Vega.

Consultas de Elasticsearch

Por defecto, un elemento de datos de Vega puede usar datos internos y externos con el parámetro "url" . Kibana agrega soporte para consultas directas de Elasticsearch volviendo a cargar el valor de la "url" .
Aquí hay un ejemplo de una consulta Elasticsearch que cuenta el número de documentos en todos los índices. La consulta utiliza el campo @timestamp para filtrar el rango de tiempo y dividirlo en segmentos de histograma.

 // An object instead of a string for the url value // is treated as a context-aware Elasticsearch query. url: { // Filter the time picker (upper right corner) with this field %timefield%: @timestamp // Apply dashboard context filters when set %context%: true // Which indexes to search index: _all // The body element may contain "aggs" and "query" subfields body: { aggs: { time_buckets: { date_histogram: { // Use date histogram aggregation on @timestamp field field: @timestamp // interval value will depend on the daterange picker // Use an integer to set approximate bucket count interval: { %autointerval%: true } // Make sure we get an entire range, even if it has no data extended_bounds: { min: { %timefilter%: "min" } max: { %timefilter%: "max" } } // Use this for linear (eg line, area) graphs // Without it, empty buckets will not show up min_doc_count: 0 } } } // Speed up the response by only including aggregation results size: 0 } } 

El resultado completo tiene el siguiente tipo de estructura:

 { "aggregations": { "time_buckets": { "buckets": [{ "key_as_string": "2015-11-30T22:00:00.000Z", "key": 1448920800000, "doc_count": 28 }, { "key_as_string": "2015-11-30T23:00:00.000Z", "key": 1448924400000, "doc_count": 330 }, ... 

Tenga en cuenta que "key" es una marca de tiempo de Unix y puede ser utilizada sin conversión por expresiones de fecha de Vega.

Para la mayoría de los gráficos, solo necesitamos una lista de valores de segmento, por lo que usamos el format: {property: "aggregations.time_buckets.buckets"} expresión format: {property: "aggregations.time_buckets.buckets"} para enfocarnos solo en los datos que necesitamos.

La solicitud se puede especificar con un rango individual y un panel de información contextual. Esta consulta es equivalente a "%context%": true, "%timefield%": "@timestamp" , excepto para cambiar el rango de tiempo hace 10 minutos.

 { body: { query: { bool: { must: [ // This string will be replaced // with the auto-generated "MUST" clause "%dashboard_context-must_clause%" { range: { // apply timefilter (upper right corner) // to the @timestamp variable @timestamp: { // "%timefilter%" will be replaced with // the current values of the time filter // (from the upper right corner) "%timefilter%": true // Only work with %timefilter% // Shift current timefilter by 10 units back shift: 10 // week, day (default), hour, minute, second unit: minute } } } ] must_not: [ // This string will be replaced with // the auto-generated "MUST-NOT" clause "%dashboard_context-must_not_clause%" ] } } } } 

"%timefilter%" también se puede utilizar para determinar un único valor mínimo o máximo. Como se muestra arriba, los límites extended_bounds en date_histogram se pueden establecer con dos valores: mínimo y máximo. En lugar de codificar el valor, puede usar "min": {"%timefilter%": "min"} , que se sobrescribirá al comienzo del rango de tiempo actual. shift valores de shift y unit también son compatibles. El "intervalo" se puede establecer dinámicamente, dependiendo del rango seleccionado actualmente: "interval": {"%autointerval%": 10} intentará obtener aproximadamente 10-15 puntos de datos (segmentos).

Archivos de mapas elásticos

Esta es la capacidad de acceder a los archivos de Elastic Map Service de acuerdo con algún mecanismo.

 url: { // "type" defaults to "elasticsearch" otherwise type: emsfile // Name of the file, exactly as in the Region map visualization name: World Countries } // The result is a geojson file, get its features to use // this data source with the "shape" marks // https://vega.imtqy.com/vega/docs/marks/shape/ format: {property: "features"} 

Vega con mapa

El mapa de Kibana por defecto se puede utilizar como base para el gráfico de Vega. Para habilitar, el gráfico debe definir type=map en la configuración del host.

 { "config": { "kibana": { "type": "map", // Initial map position "latitude": 40.7, // default 0 "longitude": -74, // default 0 "zoom": 7, // default 2 // defaults to "default". Use false to disable base layer. "mapStyle": false, // default 0 "minZoom": 5, // defaults to the maximum for the given style, // or 25 when base is disabled "maxZoom": 13, // defaults to true, shows +/- buttons to zoom in/out "zoomControl": false, // defaults to true, disables mouse wheel zoom "scrollWheelZoom": false, // When false, repaints on each move frame. // Makes the graph slower when moving the map "delayRepaint": true, // default true } }, /* the rest of Vega JSON */ } 

Esta visualización incorporará automáticamente una proyección llamada "projection" . Use esto para calcular la posición de todas las etiquetas geo-orientadas. Además, puede usar longitud, latitud y escala. Estas señales se pueden usar en el gráfico o se pueden actualizar para cambiar la posición del mapa.

Depuración

Consola de depuración del navegador

Use las herramientas del navegador para la depuración (por ejemplo, F12 o Ctrl + Shift + J en Chrome) para inspeccionar la variable VEGA_DEBUG : * view - acceda a Ver el objeto Vega. Consulte la Guía de depuración de Vega para ver cómo inspeccionar datos y señales en tiempo de ejecución. Para VegaLite, VEGA_DEBUG.view.data('source_0') obtiene el conjunto de datos principal. Para Vega, esto usa un nombre de datos, que está específicamente en su especificación de Vega. * especificación vega_spec del gráfico Vega JSON después de algunas modificaciones de Kibana. En el caso de VegaLite, esta es la salida del compilador VegaLite. * vegalite_spec : si se trata de un gráfico VegaLite, la especificación JSON del gráfico antes de compilar VegaLite

Datos

Si está utilizando una consulta Elasticsearch, asegúrese de que los datos recibidos sean los que esperaba. La forma más fácil de ver esto es mediante el uso de la pestaña "redes" en las herramientas de depuración de su navegador (por ejemplo, F12). Modifique un poco el gráfico para que realice una consulta de búsqueda y observe la respuesta del servidor. Otro enfoque es usar la pestaña Herramientas de desarrollo de Kibana : coloque el nombre del índice dentro de la primera línea: GET <INDEX_NAME>/_search , y agregue su consulta con la siguiente línea (solo el valor del campo "query" ).
Si necesita compartir el gráfico con alguien, puede copiar la respuesta de la cadena de datos a gist.github.com , posiblemente con la extensión .json, use el botón [raw] y use esta URL directamente en su gráfico.
Para evitar que Vega use fuentes de datos que no sean ES, agregue vega.enableExternalUrls: false al archivo kibana.yml.

Enlaces utiles

• Editor : incluye ejemplos para Vega y VegaLite, pero no admite funciones específicas de Kibana, como consultas Elasticsearch y mapas base interactivos.
• Tutoriales , documentos y ejemplos de VegaLite.
• Libros de texto , documentos y ejemplos de Vega.

Uso de ejemplos de Vega y VegaLite

Al usar los ejemplos de Vega y VegaLite , debe modificar la sección de "datos" para usar una URL absoluta. Por ejemplo, reemplace "url": "data/world-110m.json" con "url": "https://vega.imtqy.com/editor/data/world-110m.json" . Además, en los ejemplos regulares de Vega, usan el modelo de diseño de "autosize": "pad" , y Kibana usa fit . Elimine todos los valores de autosize , width y height . Ver abajo dimensiones y posicionamiento.

Opciones de configuración adicionales

Estas opciones son específicas de Kibana. El soporte de tarjeta tiene opciones de configuración adicionales.

 { config: { kibana: { // Placement of the Vega-defined signal bindings. // Can be `left`, `right`, `top`, or `bottom` (default). controlsLocation: top // Can be `vertical` or `horizontal` (default). controlsDirection: vertical // If true, hides most of Vega and VegaLite warnings hideWarnings: true // Vega renderer to use: `svg` or `canvas` (default) renderer: canvas } } /* the rest of Vega code */ } 

Tamaño y posición

Vega y VegaLite.

Por defecto, los gráficos de Vega en Kibana usarán el modelo de diseño autosize autosize = { type: 'fit', contains: 'padding' } para los gráficos de Vega y VegaLite. El modelo de fit utiliza todo el espacio disponible, ignorando los valores de width y height , pero tiene en cuenta los valores de sangría. Puede anular este comportamiento especificando un valor de autosize diferente.

Vega en el mapa.

Todos los gráficos de Vega ignorarán el autosize , el width , la height y el padding utilizando el modelo de fit sangría cero.

Inspección de visualización

Muchas visualizaciones le permiten inspeccionar los datos subyacentes a la visualización.
Para inspeccionar la visualización, haga clic en el botón Inspeccionar en el editor o seleccione Inspeccionar en el menú del panel Panel.

La pantalla inicial muestra los datos básicos para la visualización. Puede cargar datos como un archivo de valores separados por comas (CSV) en formatos con formato o sin formato. Formateado carga datos en formato de tabla. Raw carga los datos tal como se presentan: fechas como marcas de tiempo, números sin separadores milésimos, etc.

Para ver las solicitudes que recopilan datos, seleccione Solicitudes en el menú Ver en la esquina superior derecha.

Las vistas disponibles dependen de la visualización inspeccionada.