From fbfa5a33ed2fb44b33d8b85359ddd3654630b73a Mon Sep 17 00:00:00 2001 From: Matthew Nickson Date: Sat, 11 Jun 2022 17:23:12 +0100 Subject: [PATCH] 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 --- db/patch-add-clickable-status-page-link.sql | 5 ++ server/database.js | 1 + server/model/group.js | 2 +- server/model/monitor.js | 6 +++ .../status-page-socket-handler.js | 1 + src/components/PublicGroupList.vue | 48 ++++++++++++++++++- src/icon.js | 1 + 7 files changed, 62 insertions(+), 2 deletions(-) create mode 100644 db/patch-add-clickable-status-page-link.sql diff --git a/db/patch-add-clickable-status-page-link.sql b/db/patch-add-clickable-status-page-link.sql new file mode 100644 index 00000000..bacd669b --- /dev/null +++ b/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; diff --git a/server/database.js b/server/database.js index b17e7f4e..8c93fed6 100644 --- a/server/database.js +++ b/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, }; /** diff --git a/server/model/group.js b/server/model/group.js index 599b758b..3f3b3b12 100644 --- a/server/model/group.js +++ b/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 diff --git a/server/model/monitor.js b/server/model/monitor.js index 643d34a6..b46c0e32 100644 --- a/server/model/monitor.js +++ b/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(); } diff --git a/server/socket-handlers/status-page-socket-handler.js b/server/socket-handlers/status-page-socket-handler.js index 0a0dc686..80017e7d 100644 --- a/server/socket-handlers/status-page-socket-handler.js +++ b/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); } diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue index df94eec9..cbd8aeff 100644 --- a/src/components/PublicGroupList.vue +++ b/src/components/PublicGroupList.vue @@ -39,7 +39,21 @@ - {{ monitor.element.name }} + + {{ monitor.element.name }} + +

{{ monitor.element.name }}

+
@@ -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://"; + + }, } }; @@ -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; } diff --git a/src/icon.js b/src/icon.js index d83034fa..23513bcc 100644 --- a/src/icon.js +++ b/src/icon.js @@ -81,6 +81,7 @@ library.add( faUndo, faPlusCircle, faAngleDown, + faLink, ); export { FontAwesomeIcon };