From 5e6d945095f0923c4fb748a8fbfe94312a7bc021 Mon Sep 17 00:00:00 2001 From: Jasper Miller-Waugh Date: Wed, 27 Oct 2021 23:06:06 +1300 Subject: [PATCH 01/10] Most hacked in POC --- server/routers/api-router.js | 8 ++++++-- src/components/PublicGroupList.vue | 3 +++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/server/routers/api-router.js b/server/routers/api-router.js index fbe8136e..be186ccc 100644 --- a/server/routers/api-router.js +++ b/server/routers/api-router.js @@ -141,9 +141,13 @@ router.get("/api/status-page/monitor-list", cache("5 minutes"), async (_request, await checkPublished(); const publicGroupList = []; let list = await R.find("group", " public = 1 ORDER BY weight "); - for (let groupBean of list) { - publicGroupList.push(await groupBean.toPublicJSON()); + let monitor_info = await groupBean.toPublicJSON() + monitor_info.monitorList = await Promise.all(monitor_info.monitorList.map( async (monitor)=>{ + let tags = await R.getAll("SELECT mt.monitor_id,mt.value, tag.name, tag.color FROM monitor_tag mt JOIN tag ON mt.tag_id = tag.id WHERE mt.monitor_id = ?", [monitor.id]); + return {...monitor,tags: tags} + })) + publicGroupList.push(monitor_info); } response.json(publicGroupList); diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue index 23d19e6c..39fb342e 100644 --- a/src/components/PublicGroupList.vue +++ b/src/components/PublicGroupList.vue @@ -40,6 +40,7 @@ {{ monitor.element.name }} +
@@ -59,12 +60,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: { From 9143b73f844ebd1214c2160a6e1319fa91191b6f Mon Sep 17 00:00:00 2001 From: Jasper Miller-Waugh Date: Thu, 28 Oct 2021 14:53:27 +1300 Subject: [PATCH 02/10] Styling for tags --- src/assets/app.scss | 4 ++++ src/components/PublicGroupList.vue | 3 +++ 2 files changed, 7 insertions(+) diff --git a/src/assets/app.scss b/src/assets/app.scss index e1a5d052..ae1ff687 100644 --- a/src/assets/app.scss +++ b/src/assets/app.scss @@ -346,6 +346,10 @@ textarea.form-control { &.active { background-color: #cdf8f4; } + // Removes margin to line up tags list with uptime percentage + .tags, .tag-wrapper:first-child { + margin-left: 0 !important; + } } } diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue index 39fb342e..97441d50 100644 --- a/src/components/PublicGroupList.vue +++ b/src/components/PublicGroupList.vue @@ -40,6 +40,9 @@ {{ monitor.element.name }} + +
+
From 348c5ec995c34d7d17f1e44297e205f04858d787 Mon Sep 17 00:00:00 2001 From: Jasper Miller-Waugh Date: Thu, 28 Oct 2021 15:07:19 +1300 Subject: [PATCH 03/10] Match lint settings --- server/routers/api-router.js | 7 ++++--- src/components/PublicGroupList.vue | 1 - 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/server/routers/api-router.js b/server/routers/api-router.js index be186ccc..bf0cc54c 100644 --- a/server/routers/api-router.js +++ b/server/routers/api-router.js @@ -142,12 +142,13 @@ router.get("/api/status-page/monitor-list", cache("5 minutes"), async (_request, const publicGroupList = []; let list = await R.find("group", " public = 1 ORDER BY weight "); for (let groupBean of list) { - let monitor_info = await groupBean.toPublicJSON() - monitor_info.monitorList = await Promise.all(monitor_info.monitorList.map( async (monitor)=>{ + let monitorGroup = await groupBean.toPublicJSON() + 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 let tags = await R.getAll("SELECT mt.monitor_id,mt.value, tag.name, tag.color FROM monitor_tag mt JOIN tag ON mt.tag_id = tag.id WHERE mt.monitor_id = ?", [monitor.id]); return {...monitor,tags: tags} })) - publicGroupList.push(monitor_info); + publicGroupList.push(monitorGroup); } response.json(publicGroupList); diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue index 97441d50..f30edcef 100644 --- a/src/components/PublicGroupList.vue +++ b/src/components/PublicGroupList.vue @@ -40,7 +40,6 @@ {{ monitor.element.name }} -
From 24664cde2c204f5809c193643837b097cdce81af Mon Sep 17 00:00:00 2001 From: Jasper Miller-Waugh Date: Thu, 28 Oct 2021 15:22:35 +1300 Subject: [PATCH 04/10] Smarter CSS to fix Mobile alignment --- src/assets/app.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/assets/app.scss b/src/assets/app.scss index ae1ff687..db01e12d 100644 --- a/src/assets/app.scss +++ b/src/assets/app.scss @@ -346,9 +346,9 @@ textarea.form-control { &.active { background-color: #cdf8f4; } - // Removes margin to line up tags list with uptime percentage - .tags, .tag-wrapper:first-child { - margin-left: 0 !important; + .tags { + // Removes margin to line up tags list with uptime percentage + margin-left: -0.25rem; } } } From b32bfb3ff1578483dd3b8f10e3a05aa83a1fc3cf Mon Sep 17 00:00:00 2001 From: Jasper Miller-Waugh Date: Fri, 29 Oct 2021 18:19:24 +1300 Subject: [PATCH 05/10] Added toggle for tag visibility --- server/routers/api-router.js | 18 +++++++++++++----- src/pages/StatusPage.vue | 31 +++++++++++++++++++++++++++++++ 2 files changed, 44 insertions(+), 5 deletions(-) diff --git a/server/routers/api-router.js b/server/routers/api-router.js index bf0cc54c..b58c4a00 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 = "hidden"; + } + if (! config.title) { config.title = "Uptime Kuma"; } @@ -143,11 +147,15 @@ router.get("/api/status-page/monitor-list", cache("5 minutes"), async (_request, let list = await R.find("group", " public = 1 ORDER BY weight "); for (let groupBean of list) { let monitorGroup = await groupBean.toPublicJSON() - 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 - let tags = await R.getAll("SELECT mt.monitor_id,mt.value, tag.name, tag.color FROM monitor_tag mt JOIN tag ON mt.tag_id = tag.id WHERE mt.monitor_id = ?", [monitor.id]); - return {...monitor,tags: tags} - })) + console.log("\n\nsettings", await getSettings("statusPage")) + if ((await getSettings("statusPage")).statusPageTags=="visible") { + 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 + let tags = await R.getAll("SELECT mt.monitor_id,mt.value, tag.name, tag.color FROM monitor_tag mt JOIN tag ON mt.tag_id = tag.id WHERE mt.monitor_id = ?", [monitor.id]); + return {...monitor,tags: tags} + })) + } + publicGroupList.push(monitorGroup); } diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue index 87634f35..4ee810c7 100644 --- a/src/pages/StatusPage.vue +++ b/src/pages/StatusPage.vue @@ -77,6 +77,16 @@ {{ $t("Switch to Dark Theme") }} + + + +
@@ -292,6 +302,10 @@ export default { return this.config.statusPageTheme; }, + tagsVisible() { + return this.config.statusPageTags + }, + logoClass() { if (this.editMode) { return { @@ -472,6 +486,23 @@ export default { changeTheme(name) { this.config.statusPageTheme = name; }, + changeTagsVisibilty(newState) { + this.config.statusPageTags = newState; + + // On load, if 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==="visible" ? this.$root.monitorList[monitor.id].tags : [] + } + }) + } + }); + }, /** * Crop Success From 74688e69aa6313c14a87bab53a5712f900bd0b20 Mon Sep 17 00:00:00 2001 From: Jasper Miller-Waugh Date: Sat, 30 Oct 2021 00:58:46 +1300 Subject: [PATCH 06/10] Remove debug statement in server/routers/api-router.js Co-authored-by: Adam Stachowicz --- server/routers/api-router.js | 1 - 1 file changed, 1 deletion(-) diff --git a/server/routers/api-router.js b/server/routers/api-router.js index b58c4a00..a5d12450 100644 --- a/server/routers/api-router.js +++ b/server/routers/api-router.js @@ -147,7 +147,6 @@ router.get("/api/status-page/monitor-list", cache("5 minutes"), async (_request, let list = await R.find("group", " public = 1 ORDER BY weight "); for (let groupBean of list) { let monitorGroup = await groupBean.toPublicJSON() - console.log("\n\nsettings", await getSettings("statusPage")) if ((await getSettings("statusPage")).statusPageTags=="visible") { 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 From 4004926e643e63a2a8d6915cef6af6992225aa9f Mon Sep 17 00:00:00 2001 From: Jasper Miller-Waugh Date: Mon, 1 Nov 2021 12:52:21 +1300 Subject: [PATCH 07/10] Small formatting changes from code-review Co-authored-by: deef --- src/pages/StatusPage.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue index 4ee810c7..06be1616 100644 --- a/src/pages/StatusPage.vue +++ b/src/pages/StatusPage.vue @@ -493,10 +493,12 @@ export default { // 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, + 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, + return { + ...monitor, tags: newState==="visible" ? this.$root.monitorList[monitor.id].tags : [] } }) From 12ef9f39c51fac03f5a18ba4182a9a81328c662f Mon Sep 17 00:00:00 2001 From: Jasper Miller-Waugh Date: Mon, 1 Nov 2021 13:23:46 +1300 Subject: [PATCH 08/10] Merged buttons, cleaned up SS tag retrieval and made tagsVisible a bool. Also to note: due to the transition of tagsVisible this breaks compatibility with the previous commits, delete the tagsVisible setting in the database to fix. --- server/routers/api-router.js | 19 +++++++++++++------ src/pages/StatusPage.vue | 19 ++++++++++--------- 2 files changed, 23 insertions(+), 15 deletions(-) diff --git a/server/routers/api-router.js b/server/routers/api-router.js index a5d12450..30f6a828 100644 --- a/server/routers/api-router.js +++ b/server/routers/api-router.js @@ -102,7 +102,7 @@ router.get("/api/status-page/config", async (_request, response) => { } if (! config.statusPageTags) { - config.statusPageTags = "hidden"; + config.statusPageTags = false; } if (! config.title) { @@ -144,15 +144,22 @@ 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) { - let monitorGroup = await groupBean.toPublicJSON() - if ((await getSettings("statusPage")).statusPageTags=="visible") { + 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 - let tags = await R.getAll("SELECT mt.monitor_id,mt.value, tag.name, tag.color FROM monitor_tag mt JOIN tag ON mt.tag_id = tag.id WHERE mt.monitor_id = ?", [monitor.id]); + 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); diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue index 06be1616..1320f093 100644 --- a/src/pages/StatusPage.vue +++ b/src/pages/StatusPage.vue @@ -78,14 +78,15 @@ {{ $t("Switch to Dark Theme") }} - - - @@ -499,7 +500,7 @@ export default { // We only include the tags if visible so we can reuse the logic to hide the tags on disable return { ...monitor, - tags: newState==="visible" ? this.$root.monitorList[monitor.id].tags : [] + tags: newState ? this.$root.monitorList[monitor.id].tags : [] } }) } From 191b81ee07ab919123427d6ef1998969350b5d8f Mon Sep 17 00:00:00 2001 From: Jasper Miller-Waugh Date: Mon, 1 Nov 2021 22:14:41 +1300 Subject: [PATCH 09/10] Fix grammer in comment Co-authored-by: Nelson Chan --- src/pages/StatusPage.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue index 1320f093..70367cc9 100644 --- a/src/pages/StatusPage.vue +++ b/src/pages/StatusPage.vue @@ -490,7 +490,7 @@ export default { changeTagsVisibilty(newState) { this.config.statusPageTags = newState; - // On load, if the status page will not include tags if it's not enabled for security reasons + // 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)=>{ From e5d6410cafc1afbff3991f37a1ffb69ad45f51f4 Mon Sep 17 00:00:00 2001 From: Jasper Miller-Waugh Date: Wed, 3 Nov 2021 11:46:53 +1300 Subject: [PATCH 10/10] Apply formatting suggestions from code review Co-authored-by: Adam Stachowicz --- server/routers/api-router.js | 4 ++-- src/pages/StatusPage.vue | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/server/routers/api-router.js b/server/routers/api-router.js index 30f6a828..79e82837 100644 --- a/server/routers/api-router.js +++ b/server/routers/api-router.js @@ -149,7 +149,7 @@ router.get("/api/status-page/monitor-list", cache("5 minutes"), async (_request, for (let groupBean of list) { let monitorGroup = await groupBean.toPublicJSON(); if (tagsVisible) { - monitorGroup.monitorList = await Promise.all(monitorGroup.monitorList.map( async (monitor)=>{ + 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 @@ -158,7 +158,7 @@ router.get("/api/status-page/monitor-list", cache("5 minutes"), async (_request, ON monitor_tag.tag_id = tag.id WHERE monitor_tag.monitor_id = ?`, [monitor.id] ); - return {...monitor,tags: tags} + return {...monitor, tags: tags} })); } diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue index 70367cc9..ce0f94b5 100644 --- a/src/pages/StatusPage.vue +++ b/src/pages/StatusPage.vue @@ -493,10 +493,10 @@ export default { // 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)=>{ + this.$root.publicGroupList = this.$root.publicGroupList.map((group) => { return { ...group, - monitorList: group.monitorList.map((monitor)=> { + 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,