Another advantage to using uibuilder over manually created endpoints is that uibuilder endpoints - including their websockets - adjust to Node-RED's configuration. On my dev machine for example, your connection to the websocket does not work without adjusting the web page because I deliberately set httpNodeRoot to /nr in order to test that URL's still work.
The constant refresh also seems to do something odd to my browser giving a regular flash - I think it was coming from the Editor but it was odd.
I am not criticising your project by the way - sorry if it seemed that way. Quite the opposite, it prompted me to see how easy/hard it might be to reproduce this really useful display using uibuilder and its (about to be) new zero-code nodes.
So I managed to reproduce the core of it. I would like to do more and have a display that automatically groups different types of endpoint together (servers, storage, networking, IoT).
But here is my attempt so far. Only needs uibuilder, no other contrib nodes and no external libraries needed. It uses my existing MQTT statuses rather than doing another ping. I was already checking services and endpoints via other methods so had no need to do it again.
In case anyone wants to try it - just note that you will want the beta version of uibuilder v6.1.0 that I just pushed to GitHub because I added some standard utility classes to uibuilder's default style sheet. (That also prompted me to start documenting the style sheet! So thanks for that as well. And also thanks for some ideas on new utility styles and grid layouts 
)
[{"id":"329fd730e3b77815","type":"uibuilder","z":"343ccabd2a6a1b48","name":"","topic":"","url":"bookmarks","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank","extTemplate":"","showfolder":false,"reload":false,"sourceFolder":"src","deployedVersion":"6.1.0-beta","showMsgUib":false,"x":800,"y":760,"wires":[[],["7ec4018f86381147"]]},{"id":"bb288daf07bd8c1d","type":"mqtt in","z":"343ccabd2a6a1b48","name":"","topic":"services/+","qos":"2","datatype":"auto-detect","broker":"cc1c989613865d14","nl":false,"rap":true,"rh":0,"inputs":0,"x":240,"y":700,"wires":[["a334666d298a59fd"]]},{"id":"727b7e2e783e43c1","type":"debug","z":"343ccabd2a6a1b48","name":"debug 103","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":590,"y":700,"wires":[]},{"id":"864ff89e1f10115e","type":"inject","z":"343ccabd2a6a1b48","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"id\":\"Router\",\"name\":\"Router\",\"tag\":\"Network\",\"url\":\"https://192.168.1.1/\",\"ip\":\"192.168.1.1\",\"web\":true,\"ping\":true},{\"id\":\"NAS\",\"name\":\"NAS\",\"tag\":\"Service\",\"url\":\"https://nas.knightnet.co.uk:5001/\",\"ip\":\"nas.knightnet.co.uk:5001\",\"web\":true,\"ping\":true},{\"id\":\"nrmain\",\"name\":\"Node-RED (Admin)\",\"tag\":\"Service\",\"url\":\"https://home.knightnet.co.uk:1880/red/\",\"ip\":\"home.knightnet.co.uk:1880\",\"web\":true,\"ping\":true},{\"id\":\"Grafana\",\"name\":\"Grafana\",\"tag\":\"Service\",\"url\":\"http://home.knightnet.co.uk:3000/\",\"ip\":\"home.knightnet.co.uk:3000\",\"web\":true,\"ping\":true},{\"id\":\"Zigbee2MQTT\",\"name\":\"Zigbee2MQTT\",\"tag\":\"Service\",\"url\":\"http://home.knightnet.co.uk:8085/#/\",\"ip\":\"home.knightnet.co.uk:8085\",\"web\":true,\"ping\":true},{\"id\":\"shelly_rgbw2_01\",\"name\":\"Shelly RGB\",\"tag\":\"IoT\",\"url\":\"http://192.168.1.175/\",\"ip\":\"192.168.1.175\",\"web\":true,\"ping\":true},{\"id\":\"d1m05\",\"name\":\"Living Room Sensors\",\"tag\":\"IoT\",\"url\":\"http://192.168.1.188/\",\"ip\":\"192.168.1.188\",\"web\":true,\"ping\":true}]","payloadType":"json","x":185,"y":860,"wires":[["b16cce6360d7f32d"]],"l":false},{"id":"847b6fb6c9ee2b8b","type":"uib-element","z":"343ccabd2a6a1b48","name":"","topic":"","elementtype":"html","parent":"body","parentSource":"","parentSourceType":"str","elementid":"status","elementId":"","elementIdSourceType":"str","heading":"","headingSourceType":"str","headingLevel":"h2","position":"last","positionSourceType":"str","confData":{},"x":450,"y":860,"wires":[["329fd730e3b77815"]]},{"id":"b40901247276556f","type":"template","z":"343ccabd2a6a1b48","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<main>\n <div id=\"bookmarks\" class=\"centre grid-3\">\n {{#flow[file].bookmarks}}\n <div id=\"bm-{{id}}\" class=\"box flex surface4\">\n <div class=\"status-side-panel\"> </div>\n <div>\n <div>{{name}}</div>\n <div class=\"text-smaller\">{{ip}}</div>\n </div>\n </div>\n {{/flow[file].bookmarks}}\n\n {{!-- <div id=\"bm-router\" class=\"box flex surface4\">\n <div class=\"status-side-panel success\"> </div>\n <div>\n <div>Router</div>\n <div>192.168.0.1</div>\n </div> --}}\n </div>\n</main>\n","output":"str","x":315,"y":860,"wires":[["847b6fb6c9ee2b8b"]],"l":false},{"id":"46f9bf7027361c26","type":"change","z":"343ccabd2a6a1b48","name":"","rules":[{"t":"delete","p":"uibuilderCtrl","pt":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":985,"y":800,"wires":[["da7a7674e091bb42"]],"l":false},{"id":"7ec4018f86381147","type":"switch","z":"343ccabd2a6a1b48","name":"","property":"uibuilderCtrl","propertyType":"msg","rules":[{"t":"eq","v":"client connect","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":935,"y":800,"wires":[["46f9bf7027361c26"]],"l":false},{"id":"b16cce6360d7f32d","type":"change","z":"343ccabd2a6a1b48","name":"","rules":[{"t":"set","p":"#:(file)::bookmarks","pt":"flow","to":"payload","tot":"msg","dc":true}],"action":"","property":"","from":"","to":"","reg":false,"x":235,"y":860,"wires":[["b40901247276556f"]],"l":false},{"id":"da7a7674e091bb42","type":"link out","z":"343ccabd2a6a1b48","name":"link out 31","mode":"link","links":["cfcc9bbbbdf0e089"],"x":1035,"y":800,"wires":[]},{"id":"cfcc9bbbbdf0e089","type":"link in","z":"343ccabd2a6a1b48","name":"link in 10","links":["da7a7674e091bb42"],"x":235,"y":820,"wires":[["b40901247276556f"]]},{"id":"c5ed656cb0fd0dc6","type":"mqtt in","z":"343ccabd2a6a1b48","name":"","topic":"known_devices/+","qos":"2","datatype":"auto-detect","broker":"cc1c989613865d14","nl":false,"rap":true,"rh":0,"inputs":0,"x":220,"y":760,"wires":[["a334666d298a59fd"]]},{"id":"6b3072edc8dd8378","type":"uib-update","z":"343ccabd2a6a1b48","name":"","topic":"","mode":"update","modeSourceType":"update","cssSelector":"\"#bm-\" & $replace(topic, /known_devices\\/|services\\//, \"\") & \" .status-side-panel\"","cssSelectorType":"jsonata","slotSourceProp":"","slotSourcePropType":"msg","attribsSource":"{\t \"class\": payload in [\"active\", \"Online\", true] ? \"status-side-panel success\" : \"status-side-panel error animate-pulse\"\t}","attribsSourceType":"jsonata","slotPropMarkdown":false,"x":570,"y":740,"wires":[["329fd730e3b77815"]]},{"id":"a334666d298a59fd","type":"delay","z":"343ccabd2a6a1b48","name":"","pauseType":"delay","timeout":"2","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":400,"y":700,"wires":[["6b3072edc8dd8378","727b7e2e783e43c1"]]},{"id":"cc1c989613865d14","type":"mqtt-broker","name":"home","broker":"home.knightnet.co.uk","port":"1883","clientid":"","autoConnect":true,"usetls":false,"protocolVersion":"5","keepalive":"60","cleansession":true,"birthTopic":"wiser","birthQos":"0","birthRetain":"false","birthPayload":"Online","birthMsg":{},"closeTopic":"Offline-Disconnected","closeQos":"0","closeRetain":"false","closePayload":"","closeMsg":{},"willTopic":"Offline-Unexpected","willQos":"0","willRetain":"false","willPayload":"","willMsg":{},"sessionExpiry":""}]
This will very likely become an example in the next release. Of course, I did slightly cheat here and use a template node with Mustache to easily build the raw HTML for all of the defined endpoints. I could have done it differently but as I know HTML and Mustache, it was quicker this way.
Thanks again for sharing your project, it was a nice prompt for me to do a new page that I'd been meaning to do for ages. And really timely with the impending uibuilder v.6.1 letting me try out and demonstrate some of the zero-code features.
For those wanting to know how it works without wanting to install the flow ...
The lower-left flow builds and stores the data need to dynamically create the page (each endpoint to be shown). It is stored in permanent flow storage. The flow coming from the 2nd output of the uibuilder node filters out client connect messages and uses them to trigger sending the main page HTML to the new client.
I do have to slightly delay the incoming MQTT messages - though actually that is only really needed on a restart so that the MQTT retained messages arrive after the page is built. The incoming messages use the uib-update node and both the CSS Selector that identifies what to update and the class attributes to change use JSONata fields to format the incoming MQTT messages without needing any further processing.
Inspired by:
