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