I've been working on a prototype web ui to visualize some of the panoptes data that uses Mojolicious::Lite and SVG::TT::Graph::TimeSeries. Note that this is functional but is still a prototype!
UPDATE: bug with SVG rendering in firefox resolved 2009-09-26
Installing Prereqs
Install the prereqs:
perl -MCPAN -e'install Mojolicious::Lite'
perl -MCPAN -e'install SVG::TT::Graph::TimeSeries'
Compatible Plugins
The web ui currently only graphs data from the following monitoring plugins:
- Panoptes-Monitor-Weather
- Panoptes-Monitor-Ping
- Panoptes-Monitor-Idle - note this plugin currently only works on OS X
In the future the web ui will be much more generic so that data stored from rules can be visualized without creating a custom interface for each table.
Enabling Monitors
Begin by configuring the monitors. These will simply poll the data. Once the data is being polled, see the 'Enabling Rules' section below.
See the 'getting started' doc for information on configuring monitors and starting the monitoring daemon. Here is an example config for all monitoring plugins supported by the web ui:
---
myhostname:
plugins:
Panoptes-Monitor-Idle:
enable: 1
Panoptes-Monitor-Weather:
mpls:
location: 55411
seattle:
location: USWA0395
tz: -2
sf:
location: USCA0987
tz: -2
Panoptes-Monitor-Ping:
router: 192.168.0.1
geekfarm: geekfarm.org
Enabling Rules
Once the monitors are enabled, you must create some rules to store the data to a SQLite database.
See the 'getting started' doc for more information on configuring rules and starting the rules engine. Here is an example config for all data supported by the web ui:
rules:
80_sqlite_idle:
condition:
plugin: Panoptes-Monitor-IdleOSX
action:
sqlite:
table: idle
schema:
active_min: int
idle_min: int
timestamp: int
80_sqlite_weather:
condition:
plugin: Panoptes-Monitor-Weather
action:
sqlite:
table: weather
schema:
feels: int
actual: int
site: string
rel_time: int
80_sqlite_ping:
condition:
plugin: Panoptes-Monitor-Ping
contains:
average: {}
action:
sqlite:
table: ping
schema:
hostname: string
average: string
loss: string
timestamp: int
Starting the Web UI
The web ui is distributed in the panoptes-view directory of the panoptes project root.
To start the web UI:
cd PANOPTES_REPO_ROOT/panoptes-view/mojo
./panoptimojo daemon
This will start Mojo's development server, which you should be able to connect to on: http://localhost:3000/
You can tweak some of the graph options by tweaking the url params. Any SVG::TT::Graph::TimeSeries options (e.g. min_scale_value, area_fill, style_sheet) can now be overridden with request params. See here for descriptions of the available options:
Some of the handlers also accept custom fields, e.g. 'days'. More info will be available as this interface matures.
Here are some examples:
- http://localhost:3000/idle.svg?height=200&width=300
- http://localhost:3000/idle.svg?height=200&width=300&days=.5
![]()

- http://localhost:3000/weather.svg?height=200&width=300
- http://localhost:3000/weather.svg?days=7×cale_divisions=24%20hours&width=400&height=200
- http://localhost:3000/weather.svg?location=mpls,portland,seattle&show=feels&days=4
![]()
![]()
Using the Web UI
Navigating to the root should give a list of the available graphs with thumbnails.
Note that you mouse over a data point on the graph and it will display the text value of that point.
There is a .css file that controls the graph colors in the public/ subdirectory of the panoptimojo script. I just hacked together a quick-and-dirty dark color theme. Feel free to edit this to your own taste. If you come up with something more agreeable, please send me a copy and I'll include it as an optional theme!
Troubleshooting
If the corresponding database table has no data then the thumbnails and the linked graphs will be missing or blank.
Make sure the monitoring engine is running. Also, make sure the rules engine is up and running.
To validate that the monitoring engine and rules engines are both running, ensure that the ~/.panoptes/sqlite/ directory was created and that it contains a sqlite file. Check that the database contains the table and data.
sqlite3 ~/.panoptes/sqlite/panoptes.sqlite
.tables
select * from idle;
select * from weather;
select * from ping;
Note that you must have several data points for each data set in the database before any graphs will be generated. For example, the weather plugin only pulls data once every 30 minutes for eac site, so if this is the only plugin you have enabled, you may have to leave the monitoring engine running for an hour and a half before enough data point are available to build a graph. By comparison, the idle plugin is updated every minute and the ping plugin every 3 minutes.
Limitations
The web ui is still a prototype. I have just started learning Mojolicious::Lite. It's awesome, btw!
Please send me any suggestions for improvement.