Merge pull request #1119 from jensneuber/uptime-badges

Add badges
2024-12-19 12:44:27 -05:00 · 2022-05-07 13:44:20 +08:00 · 2022-05-07 13:44:20 +08:00 · e488e2dc0a
commit e488e2dc0a
parent aa8ea6d398 4e3258579d
6 changed files with 416 additions and 18 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -17,6 +17,7 @@
                "@popperjs/core": "~2.10.2",
                "args-parser": "~1.3.0",
                "axios": "~0.26.1",
+                "badge-maker": "^3.3.1",
                "bcryptjs": "~2.4.3",
                "bootstrap": "5.1.3",
                "bree": "~7.1.5",
@ -24,6 +25,7 @@
                "chart.js": "~3.6.2",
                "chartjs-adapter-dayjs": "~1.0.0",
                "check-password-strength": "^2.0.5",
+                "chroma-js": "^2.1.2",
                "command-exists": "~1.2.9",
                "compare-versions": "~3.6.0",
                "dayjs": "~1.10.8",
@ -3939,6 +3941,14 @@
                "url": "https://github.com/sponsors/epoberezkin"
            }
        },
+        "node_modules/anafanafo": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/anafanafo/-/anafanafo-2.0.0.tgz",
+            "integrity": "sha512-Nlfq7NC4AOkTJerWRIZcOAiMNtIDVIGWGvQ98O7Jl6Kr2Dk0dX5u4MqN778kSRTy5KRqchpLdF2RtLFEz9FVkQ==",
+            "dependencies": {
+                "char-width-table-consumer": "^1.0.0"
+            }
+        },
        "node_modules/ansi-align": {
            "version": "3.0.1",
            "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
@ -4366,6 +4376,22 @@
            "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
            "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc="
        },
+        "node_modules/badge-maker": {
+            "version": "3.3.1",
+            "resolved": "https://registry.npmjs.org/badge-maker/-/badge-maker-3.3.1.tgz",
+            "integrity": "sha512-OO/PS7Zg2E6qaUWzHEHt21Q5VjcFBAJVA8ztgT/fIdSZFBUwoyeo0ZhA6V5tUM8Vcjq8DJl6jfGhpjESssyqMQ==",
+            "dependencies": {
+                "anafanafo": "2.0.0",
+                "css-color-converter": "^2.0.0"
+            },
+            "bin": {
+                "badge": "lib/badge-cli.js"
+            },
+            "engines": {
+                "node": ">= 10",
+                "npm": ">= 5"
+            }
+        },
        "node_modules/balanced-match": {
            "version": "1.0.2",
            "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@ -4443,6 +4469,11 @@
                "node": ">=8"
            }
        },
+        "node_modules/binary-search": {
+            "version": "1.3.6",
+            "resolved": "https://registry.npmjs.org/binary-search/-/binary-search-1.3.6.tgz",
+            "integrity": "sha512-nbE1WxOTTrUWIfsfZ4aHGYu5DOuNkbxGokjV6Z2kxfJK3uaAb8zNK1muzOeipoLHZjInT4Br88BHpzevc681xA=="
+        },
        "node_modules/bintrees": {
            "version": "1.0.1",
            "resolved": "https://registry.npmjs.org/bintrees/-/bintrees-1.0.1.tgz",
@ -4945,6 +4976,14 @@
                "node": ">=10"
            }
        },
+        "node_modules/char-width-table-consumer": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/char-width-table-consumer/-/char-width-table-consumer-1.0.0.tgz",
+            "integrity": "sha512-Fz4UD0LBpxPgL9i29CJ5O4KANwaMnX/OhhbxzvNa332h+9+nRKyeuLw4wA51lt/ex67+/AdsoBQJF3kgX2feYQ==",
+            "dependencies": {
+                "binary-search": "^1.3.5"
+            }
+        },
        "node_modules/chardet": {
            "version": "1.4.0",
            "resolved": "https://registry.npmjs.org/chardet/-/chardet-1.4.0.tgz",
@ -5004,6 +5043,29 @@
                "node": ">=10"
            }
        },
+        "node_modules/chroma-js": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.1.2.tgz",
+            "integrity": "sha512-ri/ouYDWuxfus3UcaMxC1Tfp3IE9K5iQzxc2hSxbBRVNQFut1UuGAsZmiAf2mOUubzGJwgMSv9lHg+XqLaz1QQ==",
+            "dependencies": {
+                "cross-env": "^6.0.3"
+            }
+        },
+        "node_modules/chroma-js/node_modules/cross-env": {
+            "version": "6.0.3",
+            "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-6.0.3.tgz",
+            "integrity": "sha512-+KqxF6LCvfhWvADcDPqo64yVIB31gv/jQulX2NGzKS/g3GEVz6/pt4wjHFtFWsHMddebWD/sDthJemzM4MaAag==",
+            "dependencies": {
+                "cross-spawn": "^7.0.0"
+            },
+            "bin": {
+                "cross-env": "src/bin/cross-env.js",
+                "cross-env-shell": "src/bin/cross-env-shell.js"
+            },
+            "engines": {
+                "node": ">=8.0"
+            }
+        },
        "node_modules/ci-info": {
            "version": "3.3.0",
            "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
@ -5555,7 +5617,6 @@
            "version": "7.0.3",
            "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
            "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-            "dev": true,
            "dependencies": {
                "path-key": "^3.1.0",
                "shebang-command": "^2.0.0",
@ -5574,6 +5635,26 @@
                "node": ">=8"
            }
        },
+        "node_modules/css-color-converter": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/css-color-converter/-/css-color-converter-2.0.0.tgz",
+            "integrity": "sha512-oLIG2soZz3wcC3aAl/7Us5RS8Hvvc6I8G8LniF/qfMmrm7fIKQ8RIDDRZeKyGL2SrWfNqYspuLShbnjBMVWm8g==",
+            "dependencies": {
+                "color-convert": "^0.5.2",
+                "color-name": "^1.1.4",
+                "css-unit-converter": "^1.1.2"
+            }
+        },
+        "node_modules/css-color-converter/node_modules/color-convert": {
+            "version": "0.5.3",
+            "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz",
+            "integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0="
+        },
+        "node_modules/css-color-converter/node_modules/color-name": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
        "node_modules/css-functions-list": {
            "version": "3.0.1",
            "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.0.1.tgz",
@ -5583,6 +5664,11 @@
                "node": ">=12.22"
            }
        },
+        "node_modules/css-unit-converter": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
+            "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA=="
+        },
        "node_modules/cssesc": {
            "version": "3.0.0",
            "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@ -8694,8 +8780,7 @@
        "node_modules/isexe": {
            "version": "2.0.0",
            "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-            "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
-            "devOptional": true
+            "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
        },
        "node_modules/isobject": {
            "version": "3.0.1",
@ -13143,7 +13228,6 @@
            "version": "3.1.1",
            "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
            "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-            "dev": true,
            "engines": {
                "node": ">=8"
            }
@ -14689,7 +14773,6 @@
            "version": "2.0.0",
            "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
            "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-            "dev": true,
            "dependencies": {
                "shebang-regex": "^3.0.0"
            },
@ -14701,7 +14784,6 @@
            "version": "3.0.0",
            "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
            "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-            "dev": true,
            "engines": {
                "node": ">=8"
            }
@ -16532,7 +16614,6 @@
            "version": "2.0.2",
            "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
            "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-            "devOptional": true,
            "dependencies": {
                "isexe": "^2.0.0"
            },
@ -19745,6 +19826,14 @@
                "uri-js": "^4.2.2"
            }
        },
+        "anafanafo": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/anafanafo/-/anafanafo-2.0.0.tgz",
+            "integrity": "sha512-Nlfq7NC4AOkTJerWRIZcOAiMNtIDVIGWGvQ98O7Jl6Kr2Dk0dX5u4MqN778kSRTy5KRqchpLdF2RtLFEz9FVkQ==",
+            "requires": {
+                "char-width-table-consumer": "^1.0.0"
+            }
+        },
        "ansi-align": {
            "version": "3.0.1",
            "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
@ -20087,6 +20176,15 @@
            "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
            "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc="
        },
+        "badge-maker": {
+            "version": "3.3.1",
+            "resolved": "https://registry.npmjs.org/badge-maker/-/badge-maker-3.3.1.tgz",
+            "integrity": "sha512-OO/PS7Zg2E6qaUWzHEHt21Q5VjcFBAJVA8ztgT/fIdSZFBUwoyeo0ZhA6V5tUM8Vcjq8DJl6jfGhpjESssyqMQ==",
+            "requires": {
+                "anafanafo": "2.0.0",
+                "css-color-converter": "^2.0.0"
+            }
+        },
        "balanced-match": {
            "version": "1.0.2",
            "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@ -20143,6 +20241,11 @@
            "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
            "dev": true
        },
+        "binary-search": {
+            "version": "1.3.6",
+            "resolved": "https://registry.npmjs.org/binary-search/-/binary-search-1.3.6.tgz",
+            "integrity": "sha512-nbE1WxOTTrUWIfsfZ4aHGYu5DOuNkbxGokjV6Z2kxfJK3uaAb8zNK1muzOeipoLHZjInT4Br88BHpzevc681xA=="
+        },
        "bintrees": {
            "version": "1.0.1",
            "resolved": "https://registry.npmjs.org/bintrees/-/bintrees-1.0.1.tgz",
@ -20510,6 +20613,14 @@
            "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
            "dev": true
        },
+        "char-width-table-consumer": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/char-width-table-consumer/-/char-width-table-consumer-1.0.0.tgz",
+            "integrity": "sha512-Fz4UD0LBpxPgL9i29CJ5O4KANwaMnX/OhhbxzvNa332h+9+nRKyeuLw4wA51lt/ex67+/AdsoBQJF3kgX2feYQ==",
+            "requires": {
+                "binary-search": "^1.3.5"
+            }
+        },
        "chardet": {
            "version": "1.4.0",
            "resolved": "https://registry.npmjs.org/chardet/-/chardet-1.4.0.tgz",
@ -20551,6 +20662,24 @@
            "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
            "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ=="
        },
+        "chroma-js": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.1.2.tgz",
+            "integrity": "sha512-ri/ouYDWuxfus3UcaMxC1Tfp3IE9K5iQzxc2hSxbBRVNQFut1UuGAsZmiAf2mOUubzGJwgMSv9lHg+XqLaz1QQ==",
+            "requires": {
+                "cross-env": "^6.0.3"
+            },
+            "dependencies": {
+                "cross-env": {
+                    "version": "6.0.3",
+                    "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-6.0.3.tgz",
+                    "integrity": "sha512-+KqxF6LCvfhWvADcDPqo64yVIB31gv/jQulX2NGzKS/g3GEVz6/pt4wjHFtFWsHMddebWD/sDthJemzM4MaAag==",
+                    "requires": {
+                        "cross-spawn": "^7.0.0"
+                    }
+                }
+            }
+        },
        "ci-info": {
            "version": "3.3.0",
            "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
@ -20993,7 +21122,6 @@
            "version": "7.0.3",
            "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
            "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-            "dev": true,
            "requires": {
                "path-key": "^3.1.0",
                "shebang-command": "^2.0.0",
@ -21006,12 +21134,39 @@
            "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
            "dev": true
        },
+        "css-color-converter": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/css-color-converter/-/css-color-converter-2.0.0.tgz",
+            "integrity": "sha512-oLIG2soZz3wcC3aAl/7Us5RS8Hvvc6I8G8LniF/qfMmrm7fIKQ8RIDDRZeKyGL2SrWfNqYspuLShbnjBMVWm8g==",
+            "requires": {
+                "color-convert": "^0.5.2",
+                "color-name": "^1.1.4",
+                "css-unit-converter": "^1.1.2"
+            },
+            "dependencies": {
+                "color-convert": {
+                    "version": "0.5.3",
+                    "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz",
+                    "integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0="
+                },
+                "color-name": {
+                    "version": "1.1.4",
+                    "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+                    "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+                }
+            }
+        },
        "css-functions-list": {
            "version": "3.0.1",
            "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.0.1.tgz",
            "integrity": "sha512-PriDuifDt4u4rkDgnqRCLnjfMatufLmWNfQnGCq34xZwpY3oabwhB9SqRBmuvWUgndbemCFlKqg+nO7C2q0SBw==",
            "dev": true
        },
+        "css-unit-converter": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
+            "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA=="
+        },
        "cssesc": {
            "version": "3.0.0",
            "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@ -23331,8 +23486,7 @@
        "isexe": {
            "version": "2.0.0",
            "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-            "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
-            "devOptional": true
+            "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
        },
        "isobject": {
            "version": "3.0.1",
@ -26732,8 +26886,7 @@
        "path-key": {
            "version": "3.1.1",
            "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-            "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-            "dev": true
+            "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
        },
        "path-parse": {
            "version": "1.0.7",
@ -27893,7 +28046,6 @@
            "version": "2.0.0",
            "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
            "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-            "dev": true,
            "requires": {
                "shebang-regex": "^3.0.0"
            }
@ -27901,8 +28053,7 @@
        "shebang-regex": {
            "version": "3.0.0",
            "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-            "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-            "dev": true
+            "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
        },
        "signal-exit": {
            "version": "3.0.7",
@ -29304,7 +29455,6 @@
            "version": "2.0.2",
            "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
            "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-            "devOptional": true,
            "requires": {
                "isexe": "^2.0.0"
            }
--- a/package.json
+++ b/package.json
@ -68,6 +68,7 @@
        "@popperjs/core": "~2.10.2",
        "args-parser": "~1.3.0",
        "axios": "~0.26.1",
+        "badge-maker": "^3.3.1",
        "bcryptjs": "~2.4.3",
        "bootstrap": "5.1.3",
        "bree": "~7.1.5",
@ -75,6 +76,7 @@
        "chart.js": "~3.6.2",
        "chartjs-adapter-dayjs": "~1.0.0",
        "check-password-strength": "^2.0.5",
+        "chroma-js": "^2.1.2",
        "command-exists": "~1.2.9",
        "compare-versions": "~3.6.0",
        "dayjs": "~1.10.8",
--- a/server/config.js
+++ b/server/config.js
@ -1,7 +1,20 @@
 const args = require("args-parser")(process.argv);
 const demoMode = args["demo"] || false;

+const badgeConstants = {
+    naColor: "#999",
+    defaultUpColor: "#66c20a",
+    defaultDownColor: "#c2290a",
+    defaultPingColor: "blue",  // as defined by badge-maker / shields.io
+    defaultStyle: "flat",
+    defaultPingValueSuffix: "ms",
+    defaultPingLabelSuffix: "h",
+    defaultUptimeValueSuffix: "%",
+    defaultUptimeLabelSuffix: "h",
+};
+
 module.exports = {
    args,
-    demoMode
+    demoMode,
+    badgeConstants,
 };
--- a/server/routers/api-router.js
+++ b/server/routers/api-router.js
@ -1,5 +1,5 @@
 let express = require("express");
-const { allowDevAllOrigin } = require("../util-server");
+const { allowDevAllOrigin, allowAllOrigin, percentageToColor, filterAndJoin } = require("../util-server");
 const { R } = require("redbean-node");
 const apicache = require("../modules/apicache");
 const Monitor = require("../model/monitor");
@ -7,6 +7,9 @@ const dayjs = require("dayjs");
 const { UP, DOWN, flipStatus, log } = require("../../src/util");
 const StatusPage = require("../model/status_page");
 const { UptimeKumaServer } = require("../uptime-kuma-server");
+const { makeBadge } = require("badge-maker");
+const { badgeConstants } = require("../config");
+
 let router = express.Router();

 let cache = apicache.middleware;
@ -197,6 +200,182 @@ router.get("/api/status-page/heartbeat/:slug", cache("1 minutes"), async (reques
    }
 });

+router.get("/api/badge/:id/status", cache("5 minutes"), async (request, response) => {
+    allowAllOrigin(response);
+
+    const {
+        label,
+        upLabel = "Up",
+        downLabel = "Down",
+        upColor = badgeConstants.defaultUpColor,
+        downColor = badgeConstants.defaultDownColor,
+        style = badgeConstants.defaultStyle,
+        value, // for demo purpose only
+    } = request.query;
+
+    try {
+        const requestedMonitorId = parseInt(request.params.id, 10);
+        const overrideValue = value !== undefined ? parseInt(value) : undefined;
+
+        let publicMonitor = await R.getRow(`
+                SELECT monitor_group.monitor_id FROM monitor_group, \`group\`
+                WHERE monitor_group.group_id = \`group\`.id
+                AND monitor_group.monitor_id = ?
+                AND public = 1
+            `,
+        [ requestedMonitorId ]
+        );
+
+        const badgeValues = { style };
+
+        if (!publicMonitor) {
+            // return a "N/A" badge in naColor (grey), if monitor is not public / not available / non exsitant
+
+            badgeValues.message = "N/A";
+            badgeValues.color = badgeConstants.naColor;
+        } else {
+            const heartbeat = await Monitor.getPreviousHeartbeat(requestedMonitorId);
+            const state = overrideValue !== undefined ? overrideValue : heartbeat.status === 1;
+
+            badgeValues.color = state ? upColor : downColor;
+            badgeValues.message = label ?? state ? upLabel : downLabel;
+        }
+
+        // build the svg based on given values
+        const svg = makeBadge(badgeValues);
+
+        response.type("image/svg+xml");
+        response.send(svg);
+    } catch (error) {
+        send403(response, error.message);
+    }
+});
+
+router.get("/api/badge/:id/uptime/:duration?", cache("5 minutes"), async (request, response) => {
+    allowAllOrigin(response);
+
+    const {
+        label,
+        labelPrefix,
+        labelSuffix = badgeConstants.defaultUptimeLabelSuffix,
+        prefix,
+        suffix = badgeConstants.defaultUptimeValueSuffix,
+        color,
+        labelColor,
+        style = badgeConstants.defaultStyle,
+        value, // for demo purpose only
+    } = request.query;
+
+    try {
+        const requestedMonitorId = parseInt(request.params.id, 10);
+        // if no duration is given, set value to 24 (h)
+        const requestedDuration = request.params.duration !== undefined ? parseInt(request.params.duration, 10) : 24;
+        const overrideValue = value && parseFloat(value);
+
+        let publicMonitor = await R.getRow(`
+                SELECT monitor_group.monitor_id FROM monitor_group, \`group\`
+                WHERE monitor_group.group_id = \`group\`.id
+                AND monitor_group.monitor_id = ?
+                AND public = 1
+            `,
+        [ requestedMonitorId ]
+        );
+
+        const badgeValues = { style };
+
+        if (!publicMonitor) {
+            // return a "N/A" badge in naColor (grey), if monitor is not public / not available / non exsitant
+            badgeValues.message = "N/A";
+            badgeValues.color = badgeConstants.naColor;
+        } else {
+            const uptime = overrideValue ?? await Monitor.calcUptime(
+                requestedDuration,
+                requestedMonitorId
+            );
+
+            // limit the displayed uptime percentage to four (two, when displayed as percent) decimal digits
+            const cleanUptime = parseFloat(uptime.toPrecision(4));
+
+            // use a given, custom color or calculate one based on the uptime value
+            badgeValues.color = color ?? percentageToColor(uptime);
+            // use a given, custom labelColor or use the default badge label color (defined by badge-maker)
+            badgeValues.labelColor = labelColor ?? "";
+            // build a lable string. If a custom label is given, override the default one (requestedDuration)
+            badgeValues.label = filterAndJoin([ labelPrefix, label ?? requestedDuration, labelSuffix ]);
+            badgeValues.message = filterAndJoin([ prefix, `${cleanUptime * 100}`, suffix ]);
+        }
+
+        // build the SVG based on given values
+        const svg = makeBadge(badgeValues);
+
+        response.type("image/svg+xml");
+        response.send(svg);
+    } catch (error) {
+        send403(response, error.message);
+    }
+});
+
+router.get("/api/badge/:id/ping/:duration?", cache("5 minutes"), async (request, response) => {
+    allowAllOrigin(response);
+
+    const {
+        label,
+        labelPrefix,
+        labelSuffix = badgeConstants.defaultPingLabelSuffix,
+        prefix,
+        suffix = badgeConstants.defaultPingValueSuffix,
+        color = badgeConstants.defaultPingColor,
+        labelColor,
+        style = badgeConstants.defaultStyle,
+        value, // for demo purpose only
+    } = request.query;
+
+    try {
+        const requestedMonitorId = parseInt(request.params.id, 10);
+
+        // Default duration is 24 (h) if not defined in queryParam, limited to 720h (30d)
+        const requestedDuration = Math.min(request.params.duration ? parseInt(request.params.duration, 10) : 24, 720);
+        const overrideValue = value && parseFloat(value);
+
+        const publicAvgPing = parseInt(await R.getCell(`
+                SELECT AVG(ping) FROM monitor_group, \`group\`, heartbeat
+                WHERE monitor_group.group_id = \`group\`.id
+                AND heartbeat.time > DATETIME('now', ? || ' hours')
+                AND heartbeat.ping IS NOT NULL
+                AND public = 1
+                AND heartbeat.monitor_id = ?
+            `,
+        [ -requestedDuration, requestedMonitorId ]
+        ));
+
+        const badgeValues = { style };
+
+        if (!publicAvgPing) {
+            // return a "N/A" badge in naColor (grey), if monitor is not public / not available / non exsitant
+
+            badgeValues.message = "N/A";
+            badgeValues.color = badgeConstants.naColor;
+        } else {
+            const avgPing = parseInt(overrideValue ?? publicAvgPing);
+
+            badgeValues.color = color;
+            // use a given, custom labelColor or use the default badge label color (defined by badge-maker)
+            badgeValues.labelColor = labelColor ?? "";
+            // build a lable string. If a custom label is given, override the default one (requestedDuration)
+            badgeValues.label = filterAndJoin([ labelPrefix, label ?? requestedDuration, labelSuffix ]);
+            badgeValues.message = filterAndJoin([ prefix, avgPing, suffix ]);
+        }
+
+        // build the SVG based on given values
+        const svg = makeBadge(badgeValues);
+
+        response.type("image/svg+xml");
+        response.send(svg);
+    } catch (error) {
+        send403(response, error.message);
+    }
+});
+
 /**
 * Send a 403 response
 * @param {Object} res Express response object
--- a/server/util-server.js
+++ b/server/util-server.js
@ -8,6 +8,8 @@ const childProcess = require("child_process");
 const iconv = require("iconv-lite");
 const chardet = require("chardet");
 const mqtt = require("mqtt");
+const chroma = require("chroma-js");
+const { badgeConstants } = require("./config");

 // From ping-lite
 exports.WIN = /^win/.test(process.platform);
@ -522,3 +524,33 @@ exports.convertToUTF8 = (body) => {
    const str = iconv.decode(body, guessEncoding);
    return str.toString();
 };
+
+/**
+ * Returns a color code in hex format based on a given percentage:
+ * 0% => hue = 10 => red
+ * 100% => hue = 90 => green
+ *
+ * @param {number} percentage float, 0 to 1
+ * @param {number} maxHue
+ * @param {number} minHue, int
+ * @returns {string}, hex value
+ */
+exports.percentageToColor = (percentage, maxHue = 90, minHue = 10) => {
+    const hue = percentage * (maxHue - minHue) + minHue;
+    try {
+        return chroma(`hsl(${hue}, 90%, 40%)`).hex();
+    } catch (err) {
+        return badgeConstants.naColor;
+    }
+};
+
+/**
+ * Joins and array of string to one string after filtering out empty values
+ *
+ * @param {string[]} parts
+ * @param {string} connector
+ * @returns {string}
+ */
+exports.filterAndJoin = (parts, connector = "") => {
+    return parts.filter((part) => !!part && part !== "").join(connector);
+};
--- a/test/backend.spec.js
+++ b/test/backend.spec.js
@ -164,3 +164,25 @@ describe("Test reset-password", () => {
    }, 120000);
 });

+describe("The function filterAndJoin", () => {
+    it("should join and array of strings to one string", () => {
+        const result = utilServerRewire.filterAndJoin(["one", "two", "three"]);
+        expect(result).toBe("onetwothree");
+    });
+
+    it("should join strings using a given connector", () => {
+        const result = utilServerRewire.filterAndJoin(["one", "two", "three"], "-");
+        expect(result).toBe("one-two-three");
+    });
+
+    it("should filter null, undefined and empty strings before joining", () => {
+        const result = utilServerRewire.filterAndJoin([undefined, "", "three"], "--");
+        expect(result).toBe("three");
+    });
+
+    it("should return an empty string if all parts are filtered out", () => {
+        const result = utilServerRewire.filterAndJoin([undefined, "", ""], "--");
+        expect(result).toBe("");
+    });
+});
+