[Status Page] Simplify show tags logic

server/model/group.js

@@ -3,12 +3,12 @@ const { R } = require("redbean-node");
 
 class Group extends BeanModel {
 
-    async toPublicJSON() {
+    async toPublicJSON(showTags = false) {
         let monitorBeanList = await this.getMonitorList();
         let monitorList = [];
 
         for (let bean of monitorBeanList) {
-            monitorList.push(await bean.toPublicJSON());
+            monitorList.push(await bean.toPublicJSON(showTags));
         }
 
         return {

server/model/monitor.js

@@ -24,18 +24,22 @@ const apicache = require("../modules/apicache");
 class Monitor extends BeanModel {
 
     /**
-     * Return a object that ready to parse to JSON for public
+     * Return an object that ready to parse to JSON for public
      * Only show necessary data to public
      */
-    async toPublicJSON() {
+    async toPublicJSON(showTags = false) {
-        return {
+        let obj = {
             id: this.id,
             name: this.name,
         };
+        if (showTags) {
+            obj.tags = await this.getTags();
+        }
+        return obj;
     }
 
     /**
-     * Return a object that ready to parse to JSON
+     * Return an object that ready to parse to JSON
      */
     async toJSON() {
 
@@ -49,7 +53,7 @@ class Monitor extends BeanModel {
             notificationIDList[bean.notification_id] = true;
         }
 
-        const tags = await R.getAll("SELECT mt.*, tag.name, tag.color FROM monitor_tag mt JOIN tag ON mt.tag_id = tag.id WHERE mt.monitor_id = ?", [this.id]);
+        const tags = await this.getTags();
 
         return {
             id: this.id,
@@ -82,6 +86,10 @@ class Monitor extends BeanModel {
         };
     }
 
+    async getTags() {
+        return await R.getAll("SELECT mt.*, tag.name, tag.color FROM monitor_tag mt JOIN tag ON mt.tag_id = tag.id WHERE mt.monitor_id = ?", [this.id]);
+    }
+
     /**
      * Encode user and password to Base64 encoding
      * for HTTP "basic" auth, as per RFC-7617

server/routers/api-router.js

@@ -113,30 +113,14 @@ router.get("/api/status-page/:slug", cache("5 minutes"), async (request, respons
 
         // Public Group List
         const publicGroupList = [];
-        const tagsVisible = !!statusPage.show_tags;
+        const showTags = !!statusPage.show_tags;
+        debug("Show Tags???" + showTags);
         const list = await R.find("group", " public = 1 AND status_page_id = ? ORDER BY weight ", [
             statusPage.id
         ]);
 
         for (let groupBean of list) {
-            let monitorGroup = await groupBean.toPublicJSON();
+            let monitorGroup = await groupBean.toPublicJSON(showTags);
-            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);
         }
 

src/components/PublicGroupList.vue

@@ -41,7 +41,7 @@
                                             <Uptime :monitor="monitor.element" type="24" :pill="true" />
                                             {{ monitor.element.name }}
                                         </div>
-                                        <div class="tags">
+                                        <div v-if="showTags" class="tags">
                                             <Tag v-for="tag in monitor.element.tags" :key="tag" :item="tag" :size="'sm'" />
                                         </div>
                                     </div>
@@ -76,6 +76,9 @@ export default {
             type: Boolean,
             required: true,
         },
+        showTags: {
+            type: Boolean,
+        }
     },
     data() {
         return {

src/pages/StatusPage.vue

@@ -223,7 +223,7 @@
                     👀 {{ $t("statusPageNothing") }}
                 </div>
 
-                <PublicGroupList :edit-mode="enableEditMode" />
+                <PublicGroupList :edit-mode="enableEditMode" :show-tags="config.showTags" />
             </div>
 
             <footer class="mt-5 mb-4">
@@ -335,10 +335,6 @@ export default {
             return this.config.published;
         },
 
-        tagsVisible() {
-            return this.config.showTags;
-        },
-
         logoClass() {
             if (this.editMode) {
                 return {
@@ -419,13 +415,20 @@ export default {
             document.title = title;
         },
 
-        "config.showTags"(value) {
-            this.changeTagsVisibility(value);
-        },
-
         "$root.monitorList"() {
-            this.changeTagsVisibility(this.config.showTags);
+            let count = Object.keys(this.$root.monitorList).length;
-        },
+
+            // Since publicGroupList is getting from public rest api, monitors' tags may not present if showTags = false
+            if (count > 0) {
+                for (let group of this.$root.publicGroupList) {
+                    for (let monitor of group.monitorList) {
+                        if (monitor.tags === undefined && this.$root.monitorList[monitor.id]) {
+                            monitor.tags = this.$root.monitorList[monitor.id].tags;
+                        }
+                    }
+                }
+            }
+        }
 
     },
     async created() {
@@ -529,8 +532,6 @@ export default {
                         time = 0;
                     }
 
-                    console.log(time);
-
                     setTimeout(() => {
                         location.href = "/status/" + this.config.slug;
                     }, time);
@@ -577,29 +578,6 @@ export default {
             location.href = "/status/" + this.slug;
         },
 
-        changeTagsVisibility(show) {
-
-            // If Edit Mode
-            if (Object.keys(this.$root.monitorList).length > 0) {
-                // 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: show ? this.$root.monitorList[monitor.id].tags : []
-                            };
-                        })
-                    };
-                });
-            }
-
-        },
-
         /**
          * Crop Success
          */