Feature: Headscale Service Widget

[erelender]

Proposed change

Added service widget for headscale, as requested by this discussion.

Closes # (issue)

Type of change

• New service widget
• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Documentation only
• Other (please explain)

Checklist:

• If applicable, I have added corresponding documentation changes.
• If applicable, I have reviewed the feature and / or service widget guidelines.
• I have checked that all code style checks pass using pre-commit hooks and linting checks.
• If applicable, I have tested my code for new features & regressions on both mobile & desktop devices, using the latest version of major browsers.

[shamoon]

Thanks, please post an example api output. Getting an actual node up is more work than I'd like just to test this

[erelender]

Here is an example api output:

{ "node": { "id": "1", "machineKey": "mkey:redacted_64_char_hex", "nodeKey": "nodekey:redacted_64_char_hex", "discoKey": "discokey:redacted_64_char_hex", "ipAddresses": [ "100.64.0.1", "fd7a:115c:a1e0::1" ], "name": "DESKTOP-PCXXXXX", "user": { "id": "1", "name": "headscale_username", "createdAt": "2024-10-28T06:44:43.632091788Z" }, "lastSeen": "2024-11-05T16:33:28.298743230Z", "expiry": "2025-04-27T12:19:31.592423067Z", "preAuthKey": null, "createdAt": "2024-10-28T06:44:43.633344166Z", "registerMethod": "REGISTER_METHOD_OIDC", "forcedTags": [], "invalidTags": [], "validTags": [], "givenName": "pc", "online": true } }

I can easily add/remove some fields if you think they would be useful. I can also make "Last Seen/Online" fields automatically toggle so that "Last Seen" is not displayed when node is online.

On another note, I would like to implement another configuration for this widget where multiple nodes can be listed in a single container like below:

This config would get the info for all nodes with a single api call, and I believe would be useful in a setup with a lot of nodes. I could not find such an implementation in other widgets though. Would that be possible?

[shamoon]

Thanks

As for the multi-node one, I am assuming that requires hitting the node API endpoint for each one which is a "no-no" for us, because that can be a lot of API calls (infinite I suppose) and besides trying to minimize calls for performance reasons, we're not trying to DDoS our users =)

[erelender]

There is another endpoint (same endpoint without the nodeid as the final path parameter) that can be used to query the same data type in an array for all nodes at once and here is a sample output:
{ "nodes": [ { "id": "1", "machineKey": "mkey:redacted_64_char_hex", "nodeKey": "nodekey:redacted_64_char_hex", "discoKey": "discokey:redacted_64_char_hex", "ipAddresses": [ "100.64.0.1", "fd7a:115c:a1e0::1" ], "name": "DESKTOP-PCXXXX", "user": { "id": "1", "name": "headscale_username", "createdAt": "2024-10-28T06:44:43.632091788Z" }, "lastSeen": "2024-11-05T16:45:16.170589707Z", "expiry": "2025-04-27T12:19:31.592423067Z", "preAuthKey": null, "createdAt": "2024-10-28T06:44:43.633344166Z", "registerMethod": "REGISTER_METHOD_OIDC", "forcedTags": [], "invalidTags": [], "validTags": [], "givenName": "pc", "online": true }, { "id": "2", "machineKey": "mkey:redacted_64_char_hex", "nodeKey": "nodekey:redacted_64_char_hex", "discoKey": "discokey:redacted_64_char_hex", "ipAddresses": [ "100.64.0.2", "fd7a:115c:a1e0::2" ], "name": "hostname-aaaaaaa", "user": { "id": "1", "name": "headscale_username", "createdAt": "2024-10-28T06:44:43.632091788Z" }, "lastSeen": "2024-11-04T05:51:32.927228518Z", "expiry": "2025-04-26T06:57:18.472746500Z", "preAuthKey": null, "createdAt": "2024-10-28T06:57:18.475281374Z", "registerMethod": "REGISTER_METHOD_OIDC", "forcedTags": [], "invalidTags": [], "validTags": [], "givenName": "vps", "online": true } ] }

Using the widget in this mode would reduce the number of API calls to just one.

[shamoon]

That is the endpoint this should have been built with then.

[erelender]

I couldn't find any info or sample on how to represent multiple nodes in a single widget like the (photoshopped) screenshot i posted. I tried multiple <Container>'s, <div>'s or even <br>'s to no avail. If someone can point me towards some sample code to divide <Block>'s into multiple lines so that I can represent multiple nodes in a single widget, we can revert this PR and I can rework the widget in a couple days.

[shamoon]

Ah, no we dont allow that. There is a list widget type but generally we dont allow widgets to use that. The alternative would be to show the current iteration if theres 1 node (and / or if nodeId is given) otherwise to collect some overall statistics, etc. But it may be the case for tailscale that it's not so useful to see some kind of overall stats. I haven't thought too much about that question since I dont personally use it

[erelender]

I've managed to get a widget that can display multiple nodes with a single api call working. I found how to use a div to achieve this look by examining existing widgets that seems to have implemented such code structures in the past (e.g. coinmarketcap, emby, stocks widgets).

I believe there is a really valid use case for this type of widget in the context of headscale or similar applications. I can refactor the widget to work in both styles (single or multi node views, filtering by nodeIds or status). Or I can also provide it as another widget if desired.

[shamoon]

There are no widgets that do it like that. as I mentioned there is the list style which looks a bit different, and could be added if there is interest in it (I think determining that would be best served by a feature request)

[erelender]

I've opened a discussion