diff --git a/server/routers/api-router.js b/server/routers/api-router.js index fbe8136e5..79e828378 100644 --- a/server/routers/api-router.js +++ b/server/routers/api-router.js @@ -101,6 +101,10 @@ router.get("/api/status-page/config", async (_request, response) => { config.statusPagePublished = true; } + if (! config.statusPageTags) { + config.statusPageTags = false; + } + if (! config.title) { config.title = "Uptime Kuma"; } @@ -140,10 +144,25 @@ router.get("/api/status-page/monitor-list", cache("5 minutes"), async (_request, try { await checkPublished(); const publicGroupList = []; - let list = await R.find("group", " public = 1 ORDER BY weight "); - + const tagsVisible = (await getSettings("statusPage")).statusPageTags; + const list = await R.find("group", " public = 1 ORDER BY weight "); for (let groupBean of list) { - publicGroupList.push(await groupBean.toPublicJSON()); + let monitorGroup = await groupBean.toPublicJSON(); + if (tagsVisible) { + monitorGroup.monitorList = await Promise.all(monitorGroup.monitorList.map(async (monitor) => { + // Includes tags as an array in response, allows for tags to be displayed on public status page + const tags = await R.getAll( + `SELECT monitor_tag.monitor_id, monitor_tag.value, tag.name, tag.color + FROM monitor_tag + JOIN tag + ON monitor_tag.tag_id = tag.id + WHERE monitor_tag.monitor_id = ?`, [monitor.id] + ); + return {...monitor, tags: tags} + })); + } + + publicGroupList.push(monitorGroup); } response.json(publicGroupList); diff --git a/src/assets/app.scss b/src/assets/app.scss index 89639fd95..5578946bd 100644 --- a/src/assets/app.scss +++ b/src/assets/app.scss @@ -346,6 +346,10 @@ textarea.form-control { &.active { background-color: #cdf8f4; } + .tags { + // Removes margin to line up tags list with uptime percentage + margin-left: -0.25rem; + } } } diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue index 23d19e6cd..f30edcef5 100644 --- a/src/components/PublicGroupList.vue +++ b/src/components/PublicGroupList.vue @@ -41,6 +41,9 @@ {{ monitor.element.name }} +
+ +
@@ -59,12 +62,14 @@ import Draggable from "vuedraggable"; import HeartbeatBar from "./HeartbeatBar.vue"; import Uptime from "./Uptime.vue"; +import Tag from "./Tag.vue"; export default { components: { Draggable, HeartbeatBar, Uptime, + Tag, }, props: { editMode: { diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue index 87634f35a..ce0f94b55 100644 --- a/src/pages/StatusPage.vue +++ b/src/pages/StatusPage.vue @@ -77,6 +77,17 @@ {{ $t("Switch to Dark Theme") }} + +
@@ -292,6 +303,10 @@ export default { return this.config.statusPageTheme; }, + tagsVisible() { + return this.config.statusPageTags + }, + logoClass() { if (this.editMode) { return { @@ -472,6 +487,25 @@ export default { changeTheme(name) { this.config.statusPageTheme = name; }, + changeTagsVisibilty(newState) { + this.config.statusPageTags = newState; + + // On load, the status page will not include tags if it's not enabled for security reasons + // Which means if we enable tags, it won't show in the UI until saved + // So we have this to enhance UX and load in the tags from the authenticated source instantly + this.$root.publicGroupList = this.$root.publicGroupList.map((group) => { + return { + ...group, + monitorList: group.monitorList.map((monitor) => { + // We only include the tags if visible so we can reuse the logic to hide the tags on disable + return { + ...monitor, + tags: newState ? this.$root.monitorList[monitor.id].tags : [] + } + }) + } + }); + }, /** * Crop Success