Badge Image for Status Page #3876

Open
opened 2026-02-28 03:43:50 -05:00 by deekerman · 6 comments
Owner

Originally created by @hiagodotme on GitHub (Jan 8, 2025).

This is not linked to an issue, but could be used as a workaround in issue #1928 for example.

🏷️ Feature Request Type

Status-page, Other

🔖 Feature description

The status page has a general status, which informs that all services are operational, unavailable or partially available.

The idea would be to have an endpoint for:

  • Status page
  • Group
  • Resource

This way you could link this to HTML pages or MD files, where the href would be of an image dynamically generated by the uptime backend.

✔️ Solution

In both the status page, group or resource settings, there would be a button to generate a badge. The badge would follow standard parameters and the generator would only be used to style it (passing the styles via queryParam).

After having the URL of the final image generated, I could use it either in my README.md or even in the Zabbix dashboards that perform internal server monitoring.

Alternatives

I didn't think of any alternatives, it would be a simple feature that would be great for exporting the status without the person having to access the link.

📝 Additional Context

No response

Originally created by @hiagodotme on GitHub (Jan 8, 2025). ### 📑 I have found these related issues/pull requests This is not linked to an issue, but could be used as a workaround in issue #1928 for example. ### 🏷️ Feature Request Type Status-page, Other ### 🔖 Feature description The status page has a general status, which informs that all services are operational, unavailable or partially available. The idea would be to have an endpoint for: - Status page - Group - Resource This way you could link this to HTML pages or MD files, where the href would be of an image dynamically generated by the uptime backend. ### ✔️ Solution In both the status page, group or resource settings, there would be a button to generate a badge. The badge would follow standard parameters and the generator would only be used to style it (passing the styles via queryParam). After having the URL of the final image generated, I could use it either in my README.md or even in the Zabbix dashboards that perform internal server monitoring. ### ❓ Alternatives I didn't think of any alternatives, it would be a simple feature that would be great for exporting the status without the person having to access the link. ### 📝 Additional Context _No response_
Author
Owner

@CommanderStorm commented on GitHub (Jan 8, 2025):

So the same status page url should return both pngs and html?

We might be able do do this via the Accept-Header, not sure how reliable this is though.
Do you know of another monitoring solution that does this?

@CommanderStorm commented on GitHub (Jan 8, 2025): So the same status page url should return both pngs and html? We might be able do do this via the `Accept`-Header, not sure how reliable this is though. Do you know of another monitoring solution that does this?
Author
Owner

@hiagodotme commented on GitHub (Jan 8, 2025):

Good idea to use the status page itself! But how would the Accept header be passed in the HTML img tag, for example?

I only use Zabbix and Uptime! I monitor my infrastructure from within my network with Zabbix, and I monitor the uptime services externally on a VPS that is on another cloud provider.

I actually wanted the status page in an iFrame in Zabbix, but that is not currently possible. So I figured that if there were tags, I could put an iFrame directly loading the image.

That way, the internal Zabbix dashboards would also show the uptime status (which, let's face it, is very simple to monitor http services).

@hiagodotme commented on GitHub (Jan 8, 2025): Good idea to use the status page itself! But how would the Accept header be passed in the HTML img tag, for example? I only use Zabbix and Uptime! I monitor my infrastructure from within my network with Zabbix, and I monitor the uptime services externally on a VPS that is on another cloud provider. I actually wanted the status page in an iFrame in Zabbix, but that is not currently possible. So I figured that if there were tags, I could put an iFrame directly loading the image. That way, the internal Zabbix dashboards would also show the uptime status (which, let's face it, is very simple to monitor http services).
Author
Owner

@CommanderStorm commented on GitHub (Jan 8, 2025):

As hinted above, browsers do add an Accept-Header onto requests. For img that is usually a wild mix. I have not made the research how unified this is among browsers, but likely good enough.

For what you want this likely won't solve your issue. Badges don't auto-update.

@CommanderStorm commented on GitHub (Jan 8, 2025): As hinted above, browsers do add an `Accept`-Header onto requests. For `img` that is usually a wild mix. I have not made the research how unified this is among browsers, but likely good enough. For what you want this likely won't solve your issue. Badges don't auto-update.
Author
Owner

@froger commented on GitHub (Jan 20, 2025):

Hi! Would love to see this feature <3
Looking at how GitLab does it, we could use the extension .svg to the status page url to get the badge?
like:

  • /status/my-statuspage => returns the status page in html
  • /status/my-statuspage.svg => returns the status page badge

I guess serving a SVG as badge will get the implementation much easier as we won't need any image processing.

@froger commented on GitHub (Jan 20, 2025): Hi! Would love to see this feature <3 Looking at how GitLab does it, we could use the extension `.svg` to the status page url to get the badge? like: - `/status/my-statuspage` => returns the status page in `html` - `/status/my-statuspage.svg` => returns the status page badge I guess serving a SVG as badge will get the implementation much easier as we won't need any image processing.
Author
Owner

@hiagodotme commented on GitHub (Jan 24, 2025):

@froger I implemented it based on your suggestion, I just made some changes to allow customization.

@hiagodotme commented on GitHub (Jan 24, 2025): @froger I implemented it based on your suggestion, I just made some changes to allow customization.
Author
Owner

@froger commented on GitHub (Jan 25, 2025):

Awesome @hiagodotme , thanks!

@froger commented on GitHub (Jan 25, 2025): Awesome @hiagodotme , thanks!
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/uptime-kuma#3876
No description provided.