Skip to content

Comments

docs: Add comprehensive Badges documentation#21711

Open
kanelatechnical wants to merge 28 commits intonetdata:masterfrom
kanelatechnical:add-badges-documentation
Open

docs: Add comprehensive Badges documentation#21711
kanelatechnical wants to merge 28 commits intonetdata:masterfrom
kanelatechnical:add-badges-documentation

Conversation

@kanelatechnical
Copy link
Contributor

@kanelatechnical kanelatechnical commented Feb 5, 2026

This PR adds comprehensive documentation for the Badges feature that was previously undocumented but available in the source code.

Summary

The Badges feature allows users to generate dynamic SVG badges displaying real-time metrics and alert status from any Netdata agent. This feature was mentioned in user queries on asknetdata but had no documentation, leading to unresponded queries.

Changes

  • New file: docs/dashboards-and-charts/badges.md - Complete documentation including:
    • API endpoint specification (/api/v1/badge.svg)
    • All query parameters (chart, alarm, dimensions, units, colors, etc.)
    • Usage examples for common use cases
    • Color options and conditional formatting
    • Security considerations
    • Troubleshooting guide

Technical Details

  • Source code verified at src/web/api/v1/api_v1_badge/web_buffer_svg.c
  • Supports all standard Netdata chart parameters
  • Access controlled via web_allow_badges_from in netdata.conf
  • Generates dynamic SVG images for embedding in dashboards, wikis, GitHub READMEs, etc.

Testing

  • Verify documentation renders correctly on learn.netdata.cloud
  • Confirm all API parameters are documented
  • Check that examples work with real Netdata agents

Fixes: Addresses unresponded queries about badges functionality on asknetdata


Summary by cubic

Add comprehensive documentation for Netdata Badges (/api/v1/badge.svg), covering usage, parameters, examples, color options, access control, troubleshooting, performance, auto-refresh (embed/iframe), GitHub caching limits, and a character-escaping table. Aligns the docs with source code (correct operators/defaults, text color defaults, special units, expanded grouping methods and query options, alert states including UNINITIALIZED and REMOVED) and registers the page in map.csv.

  • Bug Fixes
    • Correct CLEAR alert color to brightgreen.
    • Remove misleading mem.available dimension example.
    • Use placeholder alarm name in examples to avoid non-existent configs.
    • Remove INI-style code fence for netdata.conf.

Written for commit 43672ef. Summary will update on new commits.

Copy link
Contributor

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 issue found across 1 file (changes from recent commits).

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="docs/.map/map.csv">

<violation number="1" location="docs/.map/map.csv:227">
P2: The new map.csv row contains unquoted commas in the keywords and description fields, which splits the row into extra columns and breaks ingestion. Quote the keywords and description fields so the row stays at 6 columns.</violation>
</file>

Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.

@kanelatechnical kanelatechnical force-pushed the add-badges-documentation branch from 59fff2f to ff98e1a Compare February 5, 2026 15:26
Copy link
Contributor

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2 issues found across 1 file (changes from recent commits).

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="docs/dashboards-and-charts/badges.md">

<violation number="1" location="docs/dashboards-and-charts/badges.md:50">
P3: The optional parameters table header has an extra column separator, which will break Markdown table rendering and misalign the rows.</violation>

<violation number="2" location="docs/dashboards-and-charts/badges.md:58">
P3: The `options` example includes an unescaped pipe, which splits the table row into extra columns and breaks rendering.</violation>
</file>

Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.

Copy link
Contributor

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 issue found across 1 file (changes from recent commits).

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="docs/dashboards-and-charts/badges.md">

<violation number="1" location="docs/dashboards-and-charts/badges.md:125">
P2: The color badge examples use incomplete link syntax (`[![...](...)]`) without a link target, which renders as invalid Markdown. Use plain image syntax (`![...](...)`) or provide a link target.</violation>
</file>

Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR adds comprehensive documentation for the Badges API feature (/api/v1/badge.svg), which was previously undocumented despite being available in the source code. The documentation provides users with complete guidance on generating dynamic SVG badges to display Netdata metrics and alert statuses in external platforms like GitHub READMEs, dashboards, and documentation.

Changes:

  • Added docs/dashboards-and-charts/badges.md with complete API specification, usage examples, troubleshooting guide, and advanced configuration options
  • Registered the new documentation page in docs/.map/map.csv for proper rendering on learn.netdata.cloud
  • Documented all query parameters, color options, grouping methods, alert states, URL escaping requirements, and performance characteristics

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 6 comments.

File Description
docs/dashboards-and-charts/badges.md Comprehensive Badges API documentation covering endpoint specification, parameters, examples, color options, security, troubleshooting, and advanced usage patterns
docs/.map/map.csv Registration entry for the badges documentation page with appropriate metadata and keywords

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

kanelatechnical and others added 13 commits February 6, 2026 19:03
Add documentation for the Badges feature (/api/v1/badge.svg) that allows
generating SVG badges displaying real-time metrics and alert status.

This addresses unresponded user queries about badges functionality.

Source code verified at src/web/api/v1/api_v1_badge/web_buffer_svg.c
Add badges.md to Dashboards and Charts section for proper learn.netdata.cloud
rendering. Placement rationale: Badges are a visualization/output feature for
embedding SVG images in dashboards and external sites, not a developer API.
Corrected discrepancies discovered during source code review:

1. Fixed conditional color operators:  is equality (not inequality),
    is the inequality operator
2. Corrected default  value:  (chart-dependent)
   instead of
3. Added missing parameters:  and
4. Corrected  default from 'Auto' to '-1 (auto)'
5. Updated examples to use correct conditional color syntax

Source: src/web/api/v1/api_v1_badge/web_buffer_svg.c
Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
Cross-verified against src/web/api/v1/api_v1_badge/web_buffer_svg.c and
src/web/api/queries/query.h:

1. Expanded grouping methods table to include: trimmed-mean, percentile,
   ses, des, cv, countif, extremes (source has ~50 methods)
2. Added UNINITIALIZED alert status (handled at line 1084-1085)
3. Fixed troubleshooting typo: color>threshold → color<threshold

All claims now align with source of truth.
Cross-verified against:
- src/web/api/v1/api_v1_badge/web_buffer_svg.c (main implementation)
- src/web/api/queries/query.h (grouping methods)
- src/daemon/config/netdata-conf-web.c (access control)

Corrections made:

1. Text color defaults: Changed from 'white' to 'grey' (fallback) - source
   uses 'fff' (white) only when explicitly passed, defaults to '555' (grey)

2. Empty value troubleshooting: Clarified that '-' appears when data is
   too old (staleness check) rather than just "no data"

3. Added Special Units Formats section documenting: seconds/minutes/hours
   (with _ago variants), on/off, up/down, ok/error, ok/failed, percentage,
   empty/null - all from badge_units_formatters array

4. Confirmed access control: 'allow badges from' in [web] section with
   default '*' (verified in netdata-conf-web.c:86-87)

All claims now align with source of truth.
Visual color indicators (spheres) added next to each predefined color
for easier identification when choosing badge colors.
Replaced non-rendering HTML spans with Unicode emoji circles that
render reliably in markdown tables.
Added asterisk marker to green sample and clarified in legend that
brightgreen is richer while green is lighter/yellowish.
Replaced emoji samples with actual colored boxes showing each hex code,
providing true visual representation of each badge color.
- Fix WARNING alert color from yellow to orange (matches source code)
- Add REMOVED alert status (grey, occurs during shutdown/disconnect)
- Fix broken documentation links to correct paths
- Add URL escaping table
- Add performance section (2000 badges/sec, ~0.5ms per badge)
- Add JavaScript auto-refresh methods
- Add GitHub limitations section
- Add query options details (display_absolute, min2max, unaligned)
- Add note about escaping slashes in units
Convert troubleshooting section to use <details>/<summary> accordion format for better UX
- Remove extra column separator from table header
- Escape pipe character in options example
Text color defaults are 'fff' (white), not 'grey'
Replace static color table with inline badge images showing actual colors for better visual reference
Remove square brackets from image links to fix invalid markdown syntax. Use plain image syntax ![]() for standalone images
URL-encode the label parameter: Net%20In instead of Net+In (plus sign breaks URLs)
- Change chart=system.ram to mem.available for universal availability
- Clarify that allow badges from parameter goes under [web] section in netdata.conf
- Clarify "current CPU usage" as real-time from user dimension
- Remove divide parameter from Memory example (use precision instead)
- Change system.load to system.cpu for Status badge example
- Fix Network label (NetTraffic instead of Net In)
- Update CPU Alert example to use plausible alarm name (system.cpu_usage)
- Add note about alarm names being configuration-dependent

Reported issues and fixes:
1. Current vs dimension clarification
2. Memory divide parameter removed
3. system.load replaced with system.cpu
4. Network label fixed
5. Alert name updated to realistic example
Changes:
- Clarify Basic Metric Badge to explain single vs aggregated dimensions
- Clarify Memory badge behavior (total without dimensions)
- Explain system.load multi-dimension behavior
- Improve Alert Status Badge section with better description
- Add comprehensive "Notes on Chart and Alert Behavior" section
- Fix all issues raised by ilyam about chart/dimension/alarm behavior
- Fix divide parameter example (1024 for MiB→MB, not bytes→GiB)
- Fix options parameter example to use %7C URL encoding
- Add <> as inequality operator alongside !
- Document system.ram chart for memory dimensions
- Document missing chart parameter behavior (HTTP 400)
- Document invalid chart behavior (placeholder badge)
- Expand troubleshooting section with resolution steps
@kanelatechnical kanelatechnical force-pushed the add-badges-documentation branch from be47c13 to 1b5d107 Compare February 6, 2026 17:06
Fixes ilyam8 review comment - system.load has 3 dimensions (load1, load5, load15)
and showing all 3 summed doesn't make sense. Changed to dimension=load1 for 1-min load.
@kanelatechnical kanelatechnical force-pushed the add-badges-documentation branch from ebafc1c to 75670fa Compare February 6, 2026 17:10
Clarifies that alarm badges show BOTH status AND value, not 'instead of'.
Updates Alert Badges section to reflect this behavior.
Fixes lint warnings - all system.load examples now specify dimension=load1

1. Edit `netdata.conf`:

```ini
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kanelatechnical netdata.conf is not ini, don't use ini for it.

Example:

```markdown
![CPU Alert](http://localhost:19999/api/v1/badge.svg?chart=system.cpu&alarm=system.cpu_usage&label=CPU+Alert)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

system.cpu_usage

Pame pali: this alert doesn't exist. Please do manual verification too.


### Alert Status Badge

The badge displays the alert status text (like "OK", "WARNING", "CRITICAL") with the configured color. The alarm name must match your Netdata health configuration.
Copy link
Member

@ilyam8 ilyam8 Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The badge displays the alert status text

How to do that? Doesn't work for me. Does it work for you? Can you share a screenshot?

Image

![Memory](http://localhost:19999/api/v1/badge.svg?chart=mem.available&label=RAM&precision=1)
```

**Note:** The `mem.available` chart shows total available memory when no dimension is specified. To display specific memory components, check if your Netdata configuration provides dimensions like `free` or `used`:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is just wrong.mem.available doesn't have free and used dimensions.

Copy link
Member

@ilyam8 ilyam8 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A lot of wrong info. Needs manual verification. I unchecked "Check that examples work with real Netdata agents". Please check when done.

- Add character escaping table
- Add embed/iframe refresh example
- Add refresh parameter usage example
- Fix CLEAR alert color: brightgreen instead of green
- Remove misleading mem.available dimension example (doesn't have dimensions)
- Use placeholder alarm name instead of potentially non-existent example
- Remove ini code fence (netdata.conf is not INI format)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants