Display Monitor Tags on Status Page

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

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

src/components/PublicGroupList.vue

@@ -41,6 +41,9 @@
                                             <Uptime :monitor="monitor.element" type="24" :pill="true" />
                                             {{ monitor.element.name }}
                                         </div>
+                                        <div class="tags">
+                                            <Tag v-for="tag in monitor.element.tags" :key="tag" :item="tag" :size="'sm'" />
+                                        </div>
                                     </div>
                                     <div :key="$root.userHeartbeatBar" class="col-3 col-md-4">
                                         <HeartbeatBar size="small" :monitor-id="monitor.element.id" />
@@ -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: {

src/pages/StatusPage.vue

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