From fbfa5a33ed2fb44b33d8b85359ddd3654630b73a Mon Sep 17 00:00:00 2001 From: Matthew Nickson Date: Sat, 11 Jun 2022 17:23:12 +0100 Subject: [PATCH 1/3] 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 000000000..bacd669bd --- /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 b17e7f4ed..8c93fed6a 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 599b758bc..3f3b3b129 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 643d34a6f..b46c0e323 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 0a0dc6865..80017e7d2 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 df94eec98..cbd8aeffe 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 d83034fa7..23513bccf 100644 --- a/src/icon.js +++ b/src/icon.js @@ -81,6 +81,7 @@ library.add( faUndo, faPlusCircle, faAngleDown, + faLink, ); export { FontAwesomeIcon }; From 6f57c4195a8129d8c61005ce26fbd5cbce28a443 Mon Sep 17 00:00:00 2001 From: Louis Lam Date: Mon, 4 Jul 2022 18:33:38 +0800 Subject: [PATCH 2/3] Slightly improve css --- src/components/PublicGroupList.vue | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue index 7c1dad7af..854fe5d39 100644 --- a/src/components/PublicGroupList.vue +++ b/src/components/PublicGroupList.vue @@ -48,12 +48,15 @@ {{ monitor.element.name }}

{{ monitor.element.name }}

- + + +
@@ -173,8 +176,13 @@ export default { display: inline-block; } +.btn-link { + color: #bbbbbb; + margin-left: 5px; +} + .link-active { - color: #4caf50; + color: $primary; } .flip-list-move { From 1b120f8a6f02363af0da802ebeafb2ac25402319 Mon Sep 17 00:00:00 2001 From: Matthew Nickson Date: Mon, 4 Jul 2022 13:31:05 +0100 Subject: [PATCH 3/3] Made link icon only show for http and keyword The option to enable links to the monitors is now only available for http and keyword monitor types. The link will also no longer be shown on the edit page to prevent issues with the url not being present if the monitor was not already enabled for sendUrl Signed-off-by: Matthew Nickson --- src/components/PublicGroupList.vue | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue index 854fe5d39..e8ed57d80 100644 --- a/src/components/PublicGroupList.vue +++ b/src/components/PublicGroupList.vue @@ -48,7 +48,10 @@ {{ monitor.element.name }}

{{ monitor.element.name }}

- +