☕ Support this project    Buy me a coffee takes a card and needs no account  ·  GitHub Sponsors offers monthly tiers and needs a GitHub login

Network Weathermap NG

Draw your network. Watch it breathe.

Live network weathermaps for Grafana — nodes, links, and color scales driven by your real metrics.

Documentation · Getting Started · Use Cases · Icon Reference · FAQ

A continuation of the archived knightss27-weathermap-panel, rebuilt for modern Grafana — React 18, Grafana 11→13, TypeScript 5, and a hardened, regression-tested core.

---

✨ What it does

🗺️ Maps, not charts Lay out nodes and links to match your real topology — WAN, datacenter, campus, rack, or global backbone on a world map.	🌡️ Metrics as color Links and nodes recolor live from any Grafana data source — Prometheus, InfluxDB, Zabbix, anything that returns a series.	⏪ Incident replay Scrub the built-in timeline and watch link utilization and node status replay history, step by step.
🎛️ Everything in-panel Nodes, links, VIAs, thresholds, tooltips, drill-down dashboard links — all edited inside Grafana, no external tools.	🧭 PHP Weathermap familiar Classic weathermap design language, so teams migrating from the old tooling feel at home immediately.	🖼️ 1064 bundled icons Twelve icon sets served by the plugin itself — no external image hosting, air-gap friendly.

🖼️ Gallery

Rack cabling & power redundancy	Global backbone on a world map
Incident replay (timeline slider)	Device health & status coloring

_{Eleven ready-made scenarios — each with a recipe and a runnable demo dashboard — in the Use Cases guide.}

🧩 The icon library

                     

1064 icons · 12 sets — every one served by the plugin itself

_{Browse them all in the Icon Reference. Need the official AWS/Azure/GCP architecture packs? scripts/fetch-cloud-icons.sh installs them onto your own Grafana.}

🚀 Quick start

Install (from within Grafana):

1. Go to Administration → Plugins and data → Plugins
2. Search for Network Weathermap NG and click Install

Build your first map:

1. Add panel → pick Network Weathermap NG as the visualization
2. Open the Map Editor in the panel options
3. Add nodes, draw links between them, bind each link side to a query
4. Set your color-scale thresholds — the map starts breathing 🌡️

📦 Manual install (signed release zip)

Grab the versioned zip from the latest release, then:

unzip tamirsuliman-weathermap-panel-*.zip -d /var/lib/grafana/plugins/
systemctl restart grafana-server

Every release ships a .zip.sha1 checksum, a community signature (MANIFEST.txt), and a GitHub build-provenance attestation.

🐳 Local environments — know which one you want

The repo ships two Docker Compose environments with different jobs:

	🛠️ Dev server	🐳 Demo & E2E playground
Start	npm run server (repo root)	cd testing && docker compose up --build
URL	http://localhost:3000 — admin / admin	http://localhost:3101 — anonymous admin
Contains	your local dist/ build + root provisioning/	plugin + Prometheus + simulated-WAN exporter + all demo dashboards
Use it for	plugin development (pair with npm run dev watch mode)	trying every use case, plugin review, npm run e2e:local
Pin Grafana	GRAFANA_VERSION=11.0.0 npm run server	GRAFANA_VERSION=11.0.0 docker compose up --build

The playground provisions WAN utilization, incident replay, rack boards, the world-map backbone, and more — every scenario from the Use Cases guide, ready to click through.

	Requirement	Version
📊	Grafana	11.0.0+ — tested through 13.x
⚙️	Node.js (development only)	20 – 24 (.nvmrc pins 24)

🛡️ Built to not break

This fork treats reliability as a feature. Beyond unit coverage, the suite is built around regression traps for the bugs that bite weathermaps in production:

• Hostile-data safe — malformed or partial saved options, links pointing at deleted nodes, empty data frames, overlapping nodes: the panel renders instead of crashing, guaranteed by tests.
• Immutable by construction — every editor interaction delivers new state; the test harnesses deep-freeze the options object so any in-place mutation fails CI instantly.
• Playwright E2E on real Grafana (declared minimum and latest) — weekly, on demand, and on every PR that touches the E2E surface.
• Release discipline — packaging layout checks on PRs, API-compatibility gates for Grafana 11→13, signed artifacts with checksums and provenance attestation.

🔄 What was modernized from the original

Area		Change
Grafana SDK		@grafana/data / runtime / ui updated and verified against Grafana 13
React		React 19 / findDOMNode crash fixed
TypeScript		all @ts-ignore overrides removed
Styling		stylesFactory → useStyles2 + @emotion/css
Security		URL sanitization for dashboard links, icons, and background images
E2E		deprecated @grafana/e2e → @grafana/plugin-e2e
CI/CD		signed releases, provenance attestation, docs site, API-compat matrix, packaging checks

🤝 Contributing

Issues and PRs are welcome — please open an issue first for significant changes.

🐛	Report a bug — crashes, wrong rendering, editor glitches
✨	Request a feature — new icon sets, options, integrations
🛠️	Development guide — local setup, build, and test commands
💬	Browse open issues — see what's planned or grab something to work on

🧾 Credits & license

Created and maintained by Tamir Suliman (allamiro@gmail.com). A continuation of the archived knightss27-weathermap-panel — thank you to its original author.

Icon sets bundled under their respective licenses (Simple Icons CC0, devicon MIT, circle-flags MIT, flag-icons MIT) — see NOTICE. Product names and logos are trademarks of their owners, used for identification only.

Apache-2.0 — see LICENSE. Redistributions must retain the NOTICE attribution per Apache-2.0 §4(d).

📖 Citing

If you use this project in research or publications, please cite it — GitHub's "Cite this repository" button (powered by CITATION.cff) provides APA and BibTeX entries:

@software{Suliman_Network_Weathermap_NG,
  author  = {Suliman, Tamir},
  title   = {Network Weathermap NG},
  url     = {https://github.com/allamiro/grafana-network-weathermap-ng},
  license = {Apache-2.0}
}

_{⭐ If this plugin lights up your NOC wall, a star helps others find it — and if it saved you a weekend, buy me a coffee or sponsor on GitHub.}