Added toggle for tag visibility

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);
         }
 

src/pages/StatusPage.vue

@@ -77,6 +77,16 @@
                     <font-awesome-icon icon="save" />
                     {{ $t("Switch to Dark Theme") }}
                 </button>
+
+                <button v-if="tagsVisible == 'hidden'" class="btn btn-secondary me-2" @click="changeTagsVisibilty('visible')">
+                    <font-awesome-icon icon="eye" />
+                    {{ $t("Show Tags") }}
+                </button>
+
+                <button v-if="tagsVisible == 'visible'" class="btn btn-secondary me-2" @click="changeTagsVisibilty('hidden')">
+                    <font-awesome-icon icon="eye-slash" />
+                    {{ $t("Hide Tags") }}
+                </button>
             </div>
         </div>
 
@@ -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