Customize Layout

Vaping allows users to customize its layout by supplying a new layout config file.

In the example below, the detail layout is changed to show 4 smokestack graphs instead of 3.

Working directory matters for this example

To test example below, please execute the command from the vaping root directory. The example provides a relative path to the layout file and will not find it otherwise.

vaping start --home=examples/custom_layout --debug

Configuration

To customize the layout, edit the default config from graphsrv as needed.

For additional documentation on layout config attributes, please refer to the graphsrv documentation on the subject.

examples/custom_layout/layouts.yaml


layouts:

  ## INDEX #####################################################################

  index:
    type: index
    grid: 3x3
    graph:
      config: multitarget
      fit: 'yes'
      targets: all

  ## DETAIL ####################################################################

  detail:
    type: custom
    layout:

    # row 1 (multi-target graph that will plot a line graph for all targets)
    - cols:
      # col 1, render a graph
      - graph:

          config: multitarget

          # fit to column
          fit: 'yes'

          # render all targets to this graph
          targets: all

          # custom graph id
          id: multitarget-1

        # 100% width (12/12 columns)
        width: 12

      # adjust the height of the multitarget graph to 50% (down from 75%)
      # to make room for the additional row of smokestack graphs
      height: 50

    # row 2 (2 smokestack graphs side by side)
    - cols:
      - graph:
          fit: 'yes'
          config: smokestack
          targets: all
          id: smokestack-1

        # 50% width (6/12 columns)
        width: 6

      - graph:
          fit: 'yes'
          config: smokestack
          targets: all
          id: smokestack-2

        # 50% width (6/12 columns)
        width: 6

      # 25% height for the first row of smokestack graphs
      height: 25

    # row 3 (2 smokestack graphs side by side)
    - cols:
      - graph:
          fit: 'yes'
          config: smokestack
          targets: all
          id: smokestack-1

        # 50% width (6/12 columns)
        width: 6
      - graph:
          fit: 'yes'
          config: smokestack
          targets: all
          id: smokestack-2

       # 50% width (6/12 columns)
        width: 6

      # 25% heigh for the second row of smokestack graphs
      height: 25

Then, specify a custom layout file should be loaded by setting the apps.graphsrv.layout_config_file config attribute in the vaping config.

examples/custom_layout/config.yaml

probes:
  - name: latency
    type: std_fping
    output:
      - vodka

    groups:
      - name: public_dns
        hosts:
          - host: 8.8.8.8
            name: Google
            color: red
          - host: 4.2.2.1
            name: Level(3)
            color: blue
          - host: 208.67.222.222
            name: OpenDNS
            color: orange
          - host: 1.1.1.1
            name: Cloudflare
            color: purple

plugins:
  - name: std_fping
    type: fping
    count: 10
    interval: 3s
    output:
      - vodka

  - name: vodka
    type: vodka

    data:
      - type: fping
        handlers:
          - type: index
            index: host
          - type: store
            container: list
            limit: 500

    apps:
      graphsrv:
        enabled: true
        # point to custom layout config
        layout_config_file: examples/custom_layout/layouts.yaml
        graphs:
          multitarget:
            id_field: host
            type: multitarget
            plot_y: avg
            format_y: ms

          smokestack:
            id_field: host
            type: smokestack
            plot_y: avg

    plugins:

      - name: http
        type: flask
        bind: 0.0.0.0:7021
        debug: true
        static_url_path: /static
        server: self
        async: thread
        routes:
          /targets : graphsrv->targets
          /graph_data :
            methods:
              - POST
              - GET
            target: graphsrv->graph_data
          /graph : graphsrv->graph_view
          /overview_read_file : graphsrv->overview_read_file
          /: graphsrv->overview_view


logging:
  version: 1
  formatters:
    simple:
      format: '%(asctime)s - %(name)s - %(levelname)s: %(message)s'
  handlers:
    console:
      class: logging.StreamHandler
      level: DEBUG
      formatter: simple
      stream: ext://sys.stdout

    #file:
    #  class: logging.FileHandler
    #  level: DEBUG
    #  formatter: simple
    #  filename: /home/dev/sandbox/vaping/vaping.log

  loggers:
    vaping:
      level: DEBUG
      handlers:
        - console
        #- file
    vodka:
      level: DEBUG
      handlers:
        - console
        #- file