Skip to content

Xymon 5.0.0 Facelift HTML5+Bootstrap+FontAwesome

Pre-release
Pre-release

Choose a tag to compare

View all tags
@spiderr spiderr released this 27 May 04:44
· 48 commits to html5-bootstrap since this release
5.0.0
8a7a747
xymon-HTML-5 0 0

I love Xymon. I've been staring a these damn smiley's for 25 years, but the Web 1.0 UI has got to go and I have been hoping someone would get 'er done.

So.. I guess I'll do it. But I haven't wrtten .c since the 90's so I'm gonna cheat with claude's help. So here's a full HTML5/Bootstrap 5 web UI replacement for Xymon 4.3.30. Same look, same behavior.

💽 Code is at https://github.com/spiderr/xymon/tree/html5-bootstrap

./configure; make; make install; 🍹

This is not a Bootstrap-generic makeover; it's the same interface with standards-compliant HTML5. Or the more technical explanation: I gave the page generation files an HTML5 enema.

Does it work?

I am running it in production with ~50 clients. I'm in CentOS/RedHat/Rocky land, so I've built this fork from the distro's .spec and JCleaver's awesome terabithia .spec, and simply executed:

dnf update ls ~/rpmbuild/RPMS/x86_64/xymon-5.0.0-1.x86_64.rpm

The only thing I've only noticed how glorious it is to look at the sharp, crisp icons and graphs. 🕶️

What it looks like

It looks just like it always has, (.woff) smiley's and all. Why mess with perfection?

🟢 The goal was fidelity to the Xymon 4.x user experience, not a redesign. The status grid, color semantics, page flow, and navigation structure are all preserved. The "classic" Xymon aesthetic — dark navigation bar, status-colored page backgrounds, dense information layout — is intentional and carried forward.

🧭 I did fix that navbar. That thing has always been unwieldy. Nothing was added, nothing removed. I just rearranged the deck chairs. If you want to go old school, you can always rock out in /etc/xymon/xymonmenu.cfg
xymon-5-home

🧳 Everything is self-contained. No CDN blah blah crap. It's all self-hosted and on-prem. What effin' good is your monitoring tool if the interface is broken because net access is down.

🧐 HI-REZ graphs are now available.

# HiDPI/Retina graph rendering. When set, passes --zoom to rrdtool, which scales
# the entire graph (data area, fonts, line widths) proportionally. The browser
# scales the image back to fit the page, giving crisp rendering on high-DPI screens.
# Requires rrdtool 1.2+. Leave unset for standard 1x rendering (default).
RRDGRAPHZOOM="2"
xymon-5-xymongen

☝️ And one more thing...

It works on mobile. Dives into the rage metal mosh pit 🤘🎸

100% UI changes, 0% everything else.

My hard rule was every daemon, protocol, data format, CGI API, URL, and query string is identical to 4.3.30. Scripts, bookmarks, and integrations will not notice the difference. The only thing that changed is the HTML that comes out of the CGIs and page generator.

This is a large refactor so I presumptuously dubbed it 5.0.0, because... HTML5 + Bootstrap 5 = Xymon 5... see what I did there? And, let's be honest, this project needs shot of activity. A major rev like this is warrants a major rev bump, and for all the whiney 8-bit GIF'ers out there... 4.3.X can live on in eternal pyscho-smiley glory (or... make yerself a 5.0.0 theme that uses the old smiley .gifs er, spoiler alert. more on that in a bit..)

Template architecture

I reorganized the messy xymond/webfiles/ into per-page subdirectories. All pages use a xymond/webfiles/shared/ master template — consistent <head>, navbar, and footer everywhere

Each template gets three fragment files injected by the master at render time:

xymond/webfiles/
├── shared/
│   ├── header          ← DOCTYPE, <head>, navbar, container open — used by all pages
│   └── footer          ← container close, JS includes
├── hostsvc/            ← status log (svcstatus.cgi)
│   ├── head_inc        ← <meta http-equiv="refresh"> if needed; empty otherwise
│   ├── body_header_inc ← page <h1> + action buttons (e.g. Ack, Disable)
│   └── footer_inc      ← page-specific JS
├── hist/               ← history timeline (history.cgi)
│   ├── head_inc
│   └── body_header_inc
├── event/              ← event log (eventlog.cgi)
│   ├── head_inc
│   ├── body_header_inc
│   └── form            ← filter form HTML
└── ...                 ← one subdir per template; 30+ pages covered

Token resolution in headfoot.c:

Token Loads Content
&PAGEHEAD <template>/head_inc meta refresh; empty for most pages
&XYMONPAGEHEADER <template>/body_header_inc <h1> + action buttons
&PAGEFOOTER <template>/footer_inc page-specific JS

Page titles are centralized in a lookup table in headfoot.c — no template file sets the <title>, and the XYMONPAGEACTIONS env var is gone. To change a page's heading or action buttons, edit body_header_inc; no recompile needed.

File resolution is 4-tier and backward-compatible: per-URL-path → per-template subdir → legacy flat path → shared fallback. Existing local overrides at flat paths still resolve (I think... I don't override that stuff so if you have tricked out overrides, that definitely should be tested).

Theming

☝️☝️And one more one more thing ... I implemented themes.

One variable in /etc/xymon/xymonserver.cfg:

XYMONTHEME="classic"

That's the entire activation mechanism. No recompile. No restart. systemctl reload xymon picks it up. Three themes ship out of the box:

xymond/wwwfiles/themes/
├── default/       ← clean dark base; all other themes @import this
│   └── xymon.css
│   └── preview.html
├── classic/       ← ships as the default for new installs
│   └── xymon.css
│   └── preview.html
└── monsters/      ← Halloween theme (because why not)
    ├── xymon.css
    └── preview.html
xymon-theme-default xymon-theme-classic xymon-theme-monsters

How it works under the hood:

lib/headfoot.c resolves &XYMONSTYLESSHEET to {XYMONSERVERWWWURL}/themes/{XYMONTHEME}/xymon.css. That CSS is the last <link> in shared/header, so it wins the cascade over Bootstrap and the base layout. A theme file is one CSS file that starts with @import url("../default/xymon.css") and overrides whatever it wants.

Template HTML contains only semantic class names — no Bootstrap spacing or layout utilities (mb-3, gap-2, p-2, etc.) appear in any template or C-emitted HTML. Everything dimensional is in xymon.css. This is what makes themes work cleanly: the HTML is neutral, the CSS owns all the visuals.

The classic theme ships as the configured default for new installs. It emulates the expressive personality of the original Xymon GIFs: stable green is a diamond, stable yellow is a pulsing exclamation triangle, stable red is a jolting circle-X, and recently-changed states get face expressions (smile, meh, angry, dizzy, rolling-eyes). The classic theme is the spirit of the 5.0.0 release — same Xymon personality, standards-compliant HTML.

EXISTING INSTALLS should add the following to their xymonserver.cfg else you'll get the boring default... unless boring is the way you roll.

XYMONTHEME="classic"

The monsters theme is a Halloween icon set I threw in: black cat = OK, spider = warning, skull = critical, moon = maintenance, eye = no data, wizard hat = untested. Stable states are silent. Recently-changed states are animated — the spider scurries, the skull rattles, the eye triple-blinks. There's a tiled SVG spider web baked into the CSS background via a data URI (no image file). Set XYMONTHEME="monsters" and reload.

Rolling your own theme:

/* mytheme/xymon.css */
@import url("../default/xymon.css");

/* override icon contract — lib/color.c emits:               */
/* <i class="xymon-icon xymon-{color} xymon-{state}"></i>   */
.xymon-green.xymon-stable::before { content: "\f005"; }  /* fa-star */
/* ... */

One file. The CSS icon contract is stable — xymon-{color} + xymon-{state} class combinations, override ::before content and add animation rules. Each shipped theme includes a preview.html — a standalone icon test page that loads ./xymon.css relative to itself, no CGI needed:

/xymon/themes/default/preview.html   ← base icon set; shows shape-encodes-state logic
/xymon/themes/classic/preview.html   ← highlights which cells override default vs inherit
/xymon/themes/monsters/preview.html  ← shows all animations live

When building a custom theme, drop a preview.html alongside your xymon.css using the same pattern.

Upgrading from 4.3.30

  • xymond/webfiles/ is reorganized. Local template overrides at flat paths still resolve (tier 3 of the 4-tier lookup), but migrating them to the new subdir layout is recommended.
  • GIF assets in xymond/wwwfiles/gifs/ are still installed; they're just not referenced. Leave them in place.
  • Bootstrap 5.3 + FontAwesome 6 are self-hosted under xymond/wwwfiles/externals/. No CDN calls, no external dependencies at runtime. Your monitoring UI works when the internet doesn't.
  • RRDWIDTH / RRDHEIGHT in xymonserver.cfg work as always (defaults: 576×120).
  • Everything else — xymond, xymonnet, xymongen, client agents, hosts.cfg, alerts.cfg, RRD data — is untouched.

Feedback

Tested in production against a mid-size host inventory. Most interested in reports from sites with: large host counts, custom template overrides, or CGI wrappers that parse HTML output. The template backward-compat path should handle most override scenarios but hasn't been tested against every variation.

Assets 2
Loading