Badge generator for status pages #5572

hiagodotme · 2025-01-25T04:02:31Z

⚠️⚠️⚠️ Since we do not accept all types of pull requests and do not want to waste your time. Please be sure that you have read pull request rules:
https://github.com/louislam/uptime-kuma/blob/master/CONTRIBUTING.md#can-i-create-a-pull-request-for-uptime-kuma

Tick the checkbox if you understand [x]:

I have read and understand the pull request rules.

Description

I implemented a new feature to generate statusPage badges as discussed in issue #5507

Type of change

Please delete any options that are not relevant.

New feature (non-breaking change which adds functionality)

Checklist

My code follows the style guidelines of this project
I ran ESLint and other linters for modified files
I have performed a self-review of my own code and tested it
I have commented my code, particularly in hard-to-understand areas (including JSDoc for methods)
My changes generates no new warnings
My code needed automated testing. I have added them (this is optional task)

Screenshots (if any)

Badge style to be generated
Texts for each situation, it is better to let each user choose their text as it may be used in different places and they may prefer to change the terms.
Image preview (in current page status)

@louislam @CommanderStorm 🚀

cyril59310 · 2025-01-25T10:38:50Z

You cannot edit other language file. Only the en.json file can be modified to avoid conflicts with the Weblate translation tool.

see the contribution guide: https://github.com/louislam/uptime-kuma/blob/master/CONTRIBUTING.md#translations

hiagodotme · 2025-01-25T10:46:32Z

Você não pode editar outro arquivo de idioma. Somente o en.jsonarquivo pode ser modificado para evitar conflitos com a ferramenta de tradução Weblate.

veja o guia de contribuição: https://github.com/louislam/uptime-kuma/blob/master/CONTRIBUTING.md#translations

@cyril59310 I translated pt-BR.json because it is my native language, I misinterpreted this part of the guide line.

Is it possible to revert this by maintaining this pull request?

hiagodotme · 2025-01-25T10:56:22Z

@cyril59310 I reverted the pt-BR.json file to the last authorized commit on master using the command below.

But now I believe it is following all the guidelines.

git checkout 489b73a7a638b6bc248e79800257808a19b15253 -- src/lang/pt-BR.json

CommanderStorm

Sorry for the long wait-time.
This is a larger PR and it took me a longer time to review.

Was on my backlog for longer but got pushed back by smaller simpler to digest PRs.

CommanderStorm · 2025-03-25T00:17:04Z

src/components/BadgeBuilderDialog.vue

+                            <label for="badge-builder-badge-style" class="form-label">{{ $t("Badge Style") }}</label>
+                            <select id="badge-builder-badge-style" v-model="config.badgeStyle" class="form-select">
+                                <option value="flat">Flat</option>
+                                <option value="flat-square">Flat Square</option>
+                                <option value="for-the-badge">For The Badge</option>
+                                <option value="plastic">Plastic</option>
+                                <option value="social">Social</option>


please make sure that all values that are english are translatable ($t) and are in the translation file en.json.

If they are not, our kickass team of translators won't be able to translate them

CommanderStorm · 2025-03-25T00:25:25Z

server/model/status_page.js

+            response.set("Content-Type", "image/svg+xml");
+            response.send(await StatusPage.renderSVG(slug, config, statusPage));
+        } else {
+            response.status(404).send(await StatusPage.renderSVG(slug, config, null));


In cases of 404s, aborting early is usually a good call.

aborting here also has downstream effects in the code of renderSVG and upstream in the html

Suggested change

response.status(404).send(await StatusPage.renderSVG(slug, config, null));

response.status(404).send(UptimeKumaServer.getInstance().indexHTML);

CommanderStorm · 2025-03-25T00:26:50Z

src/components/BadgeBuilderDialog.vue

+                        <div class="mb-3">
+                            <label for="badge-not-found-text" class="form-label">{{ $t("Return to not found") }}</label>
+                            <input
+                                id="badge-not-found-text" v-model="config.notFoundText" type="text"
+                                class="form-control"
+                            >
+                        </div>
+


I don't think this is nessesary, please remove it here and in all references to notFoundText or Return to not found

Suggested change

<div class="mb-3">

<label for="badge-not-found-text" class="form-label">{{ $t("Return to not found") }}</label>

<input

id="badge-not-found-text" v-model="config.notFoundText" type="text"

class="form-control"

>

</div>

CommanderStorm · 2025-03-25T00:27:13Z

src/components/BadgeBuilderDialog.vue

+
+    computed: {
+    },
+
+    watch: {
+    },


not nessesary

Suggested change

computed: {

},

watch: {

},

CommanderStorm · 2025-03-25T00:30:10Z

src/pages/StatusPage.vue

@@ -19,7 +19,10 @@
                <!-- Description -->
                <div class="my-3">
                    <label for="description" class="form-label">{{ $t("Description") }}</label>
-                    <textarea id="description" v-model="config.description" class="form-control" data-testid="description-input"></textarea>
+                    <textarea


please remove all accidental changes to this file.
It is a large enough PR as is.

CommanderStorm · 2025-03-25T00:36:32Z

server/model/status_page.js

+            // calculate RSS feed description
+            let status = StatusPage.overallStatus(heartbeats);
+
+            switch (status) {


not a status page and not a description. lets inline

Suggested change

// calculate RSS feed description

let status = StatusPage.overallStatus(heartbeats);

switch (status) {

switch (StatusPage.overallStatus(heartbeats)) {

CommanderStorm · 2025-03-25T00:38:42Z

src/components/BadgeBuilderDialog.vue

+
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-primary" @click="copyImageURL()">
+                            <!-- <div v-if="processing" class="spinner-border spinner-border-sm me-1"></div> -->


Suggested change

CommanderStorm · 2025-03-25T00:40:35Z

src/components/BadgeBuilderDialog.vue

@@ -0,0 +1,152 @@
+<template>


Please rename this component StatusPageSVGBadgeDialog.vue to reflect the tight focus of this component.

CommanderStorm · 2025-03-25T00:45:44Z

src/components/BadgeBuilderDialog.vue

+                        </h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
+                    </div>
+                    <div class="modal-body">


Please add an info alert here to inform users that

Note that adding badges at a monitor level is possible too if they are on any public status page

CommanderStorm · 2025-03-25T00:49:46Z

server/model/status_page.js

+            switch (status) {
+                case STATUS_PAGE_ALL_DOWN:
+                    return makeBadge({
+                        message: userConfig.allDownText ?? "all down",


please stick to the options we defined on https://github.com/louislam/uptime-kuma/wiki/Badge where possible.

Different options for different apis is okay, but explaining this difference is a bit too confusing imo.

Ionys320 · 2025-06-29T16:09:58Z

@CommanderStorm If this PR brings a new feature, it may not be necessary blocking 2.0.0-beta4. May this be in 2.1.0 instead?

CommanderStorm · 2025-06-29T16:28:07Z

True, I was a bit sloppy in #5177.
I distinctly remember another PR doing work in this area though.

hiagodotme added 4 commits January 25, 2025 00:24

feat: generate badge from a status page

5bd9835

fix: lint problems

a9e59fd

fix: lint problems

4fb371b

fix: lang files formatation

56ae3f0

fix: revert file to last commit to follow guide lines

c4f4548

Merge branch 'master' into master

15d7bef

CommanderStorm added the pr:needs review this PR needs a review by maintainers or other community members label Feb 16, 2025

github-actions bot added the needs:resolve-merge-conflict label Mar 14, 2025

CommanderStorm requested changes Mar 25, 2025

View reviewed changes

CommanderStorm added pr:please address review comments this PR needs a bit more work to be mergable and removed pr:needs review this PR needs a review by maintainers or other community members labels Mar 25, 2025

CommanderStorm mentioned this pull request Jun 29, 2025

[Looking for help] Adopt Badge API to the new database schemas #5177

Closed

CommanderStorm added this to the 2.0.0-beta.4 milestone Jun 29, 2025

CommanderStorm modified the milestones: 2.0.0-beta.4, 2.1.0 Jun 29, 2025

	response.status(404).send(await StatusPage.renderSVG(slug, config, null));
	response.status(404).send(UptimeKumaServer.getInstance().indexHTML);

Uh oh!

Badge generator for status pages #5572

Are you sure you want to change the base?

Badge generator for status pages #5572

Uh oh!

Conversation

hiagodotme commented Jan 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of change

Checklist

Screenshots (if any)

Uh oh!

cyril59310 commented Jan 25, 2025

Uh oh!

hiagodotme commented Jan 25, 2025

Uh oh!

hiagodotme commented Jan 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

CommanderStorm left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Ionys320 commented Jun 29, 2025

Uh oh!

CommanderStorm commented Jun 29, 2025

Uh oh!

Uh oh!

hiagodotme commented Jan 25, 2025 •

edited

Loading

hiagodotme commented Jan 25, 2025 •

edited

Loading