Gantt Chart in Vega for tracing time spent per label (kubernetes.container_name.keyword) for a given search

readme.md

kibana/vega timeline/gantt/flow chart

Creates a horizontal bar chart that plots: min & max @timestamp per label (kubernetes.container_name.keyword in this case)

• For series where the min and max is the same, a dot will be plotted (e.g. label-d)
  • N.B. This is a dirty hack: the dot is always plotted, it's just white when the min and max timestamps are different, so you'll probably notice some weirdness if you use darktheme :)
• Y axis is sorted by descending start time

| Label-A
| -----------
|    Label-B
|    --------------------
|     Label-C
|     --------------
|          Label-D
|          .
|          Label-E
|          -------------
|------------------------------------------------------time

Usage: you probably want this visualisation on a dashboard that accepts an Input which identifies a particular transaction in your system. Fox maximum utility, this should probbalu be an MDC transaction ID or similar,. that is logged by every service in the transaction context.

Todo: Show the current time when mousing over the graph.

definition.hjson

{
  $schema: https://vega.github.io/schema/vega/v3.0.json
  "padding": 5,
  "title": "Trace by App", 
  data: [
    {
      name: events
      url: {
      %context%: true
      %timefield%: @timestamp
      index: kubernetes-*
      body: {
        aggs: {
          app: {
            terms: {field: "kubernetes.container_name.keyword"}
            aggs: {
              starttime: {
                min: {field: "@timestamp"}
              }
              endtime: {
                max: {field: "@timestamp"}
              }
            }
          }
        }
      }
    }
    format: {property: "aggregations.app.buckets"}

    transform: [
        { "type": "collect", "sort": {"field": "starttime.value"}}
    ]
    }
  ]
  
    axes: [
    {"orient": "bottom", "scale": "xscale", "format": "%H:%M:%S-%L", "zindex": 1, "tickCount":  {"interval": "millisecond", "step": 100}, "tickExtra": true}
  ]
  
  scales: [
    {
      "name": "yscale",
      "type": "band",
      "range": [0, {"signal": "height"}],
      "domain": {"data": "events", "field": "key", "sort": {"field": "endtime", "order": "ascending"}}
    },
    {
      "name": "xscale",
      "type": "time",
      "range": "width",
      "round": true,
      "domain": {"data": "events", "fields": ["starttime.value", "endtime.value"]}, "nice":true
    }
  ]
  marks:  [
    {
      "type": "symbol",
      "from": {"data": "events"},
      "encode": {
        "enter": {
          "size": {"value": 100},
          "stroke": {"value": "#fff"}
        },
        "update": {
          "x": {"scale": "xscale", "field": "starttime.value"},
          "y": {"scale": "yscale", "field": "key", "offset": -1},
          "fill": [{
            "test": "datum.starttime.value == datum.endtime.value",
            "value": "black"},
            {"value": "white"
            }]
        }
      }
    },
    {
      "type": "text",
      "from": {"data": "events"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "starttime.value", "offset": 5},
          "y": {"scale": "yscale", "field": "key", "offset": -3},
          "fill": {"value": "#000"},
          "text": {"field": "key"},
          "fontSize": {"value": 10}
        }
      }
    },
    {
      "type": "rect",
      "from": {"data": "events"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "starttime.value"},
          "x2": {"scale": "xscale", "field": "endtime.value"},
          "y": {"scale": "yscale", "field": "key"},
          "height": {"value": 10}
        }
      }
    }
  ]
}