Added Clickable hostname on status page. #1221

This should fully implement #1221 by modifying the API and adding two
new properties to the result. The `sendUrl` property denotes if the URL
is sent and `url` is included when required.
Client side checks have been implemented in order to only show a link
when the URL is vaugely correct. I.e not "" or "https://". This prevents
the link from being included if the monitor type is not HTTP without
having to publicly expose the monitor type.
The exposure of the URL is configuarable for each monitor on each
status page by clicking on the link icon.

Signed-off-by: Matthew Nickson <mnickson@sidingsmedia.com>

db/patch-add-clickable-status-page-link.sql

@@ -0,0 +1,5 @@
+-- You should not modify if this have pushed to Github, unless it does serious wrong with the db.
+BEGIN TRANSACTION;
+ALTER TABLE monitor_group
+    ADD send_url BOOLEAN DEFAULT 0 NOT NULL;
+COMMIT;

server/database.js

@@ -58,6 +58,7 @@ class Database {
         "patch-monitor-expiry-notification.sql": true,
         "patch-status-page-footer-css.sql": true,
         "patch-added-mqtt-monitor.sql": true,
+        "patch-add-clickable-status-page-link.sql": true,
     };
 
     /**

server/model/group.js

@@ -31,7 +31,7 @@ class Group extends BeanModel {
      */
     async getMonitorList() {
         return R.convertToBeans("monitor", await R.getAll(`
-            SELECT monitor.* FROM monitor, monitor_group
+            SELECT monitor.*, monitor_group.send_url FROM monitor, monitor_group
             WHERE monitor.id = monitor_group.monitor_id
             AND group_id = ?
             ORDER BY monitor_group.weight

server/model/monitor.js

@@ -34,7 +34,13 @@ class Monitor extends BeanModel {
         let obj = {
             id: this.id,
             name: this.name,
+            sendUrl: this.sendUrl,
         };
+
+        if (this.sendUrl) {
+            obj.url = this.url;
+        }
+
         if (showTags) {
             obj.tags = await this.getTags();
         }

server/socket-handlers/status-page-socket-handler.js

@@ -202,6 +202,7 @@ module.exports.statusPageSocketHandler = (socket) => {
                     relationBean.weight = monitorOrder++;
                     relationBean.group_id = groupBean.id;
                     relationBean.monitor_id = monitor.id;
+                    relationBean.send_url = monitor.sendUrl;
                     await R.store(relationBean);
                 }
 

src/components/PublicGroupList.vue

@@ -39,7 +39,21 @@
                                             <font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeMonitor(group.index, monitor.index)" />
 
                                             <Uptime :monitor="monitor.element" type="24" :pill="true" />
+                                            <a
+                                                v-if="showLink(monitor)"
+                                                :href="monitor.element.url"
+                                                class="item-name"
+                                                target="_blank"
+                                            >
                                                 {{ monitor.element.name }}
+                                            </a>
+                                            <p v-else class="item-name"> {{ monitor.element.name }} </p>
+                                            <font-awesome-icon
+                                                v-if="editMode"
+                                                :class="{'link-active': monitor.element.sendUrl}"
+                                                icon="link" class="action me-3"
+                                                @click="toggleLink(group.index, monitor.index)"
+                                            />
                                         </div>
                                         <div v-if="showTags" class="tags">
                                             <Tag v-for="tag in monitor.element.tags" :key="tag" :item="tag" :size="'sm'" />
@@ -101,6 +115,27 @@ export default {
         removeMonitor(groupIndex, index) {
             this.$root.publicGroupList[groupIndex].monitorList.splice(index, 1);
         },
+
+        /**
+         * Toggle the value of sendUrl
+         * @param {number} groupIndex Index of group monitor is member of
+         * @param {number} index Index of monitor within group
+         */
+        toggleLink(groupIndex, index) {
+            this.$root.publicGroupList[groupIndex].monitorList[index].sendUrl = !this.$root.publicGroupList[groupIndex].monitorList[index].sendUrl;
+        },
+
+        /**
+         * Should a link to the monitor be shown?
+         * Attempts to guess if a link should be shown based upon if
+         * sendUrl is set and if the URL is default or not.
+         * @param {Object} monitor Monitor to check
+         * @returns {boolean}
+         */
+        showLink(monitor) {
+            return monitor.element.sendUrl && monitor.element.url && monitor.element.url !== "https://";
+
+        },
     }
 };
 </script>
@@ -119,6 +154,17 @@ export default {
     min-height: 46px;
 }
 
+.item-name {
+    padding-left: 5px;
+    padding-right: 5px;
+    margin: 0;
+    display: inline-block;
+}
+
+.link-active {
+    color: #4caf50;
+}
+
 .flip-list-move {
     transition: transform 0.5s;
 }

src/icon.js

@@ -81,6 +81,7 @@ library.add(
     faUndo,
     faPlusCircle,
     faAngleDown,
+    faLink,
 );
 
 export { FontAwesomeIcon };