syncthing icon indicating copy to clipboard operation
syncthing copied to clipboard

Show connection type in Remote Devices

Open Redsandro opened this issue 2 years ago • 15 comments

Problem

I've noticed that more often than I'd expect, I have devices connected over a (slow) relay when they can have a (fast) local connection. It's easy to miss, but when big syncs take a long time, you'll start looking. I've seen this multiple times, for a variety of reasons. One time I entered the wrong tcp://ip-address so dynamic was used. Another time I used a laptop at the office first and the 24/7 online home server never used the local ip when I was on the home wifi, until I restarted syncthing on the home server. And just now I noticed that a remote connection with a very fast optical fiber was using a slow relay for the past year.

Feature

It would help to see a label, icon or indicator of sorts to show if a relay was used, or a direct remote connection, or a LAN connection, and some polite way of indicating that a direct connection is better than a relay. This way you'd immediately see if it is what you expected or not. This illustrates what I mean:

Remote Devices

[[device1] [LAN 🤩] [Up to Date]] [[device2] [LAN 🤩] [Up to Date]] [[device3] [direct 😄] [Up to Date]] [[device4] [relay 🙂] [Up to Date]]

Encouraging users to check their connections this way also alleviates relays that provide an invaluable service from peers that unknowingly unnecessarily burden those relays when all they need to do is a restart, config change or port forward. This way they get a faster sync, and the relays are free to service users that really need it.

Redsandro avatar Mar 30 '22 23:03 Redsandro

You can already see the address it used to infer the type of connection, so its already done as far as I am concerned. You also don't need to restart things if better connections are available, syncthing will switch itself.

I don't think we want to be a kindergarten to start using crayons and emojis to expose this information that is already exposed.

AudriusButkevicius avatar Mar 31 '22 06:03 AudriusButkevicius

The emojis are probably a no-go, but I'd personally very much like to have a clear and visible indicator about what kind of connection is being currently used. Just the address isn't really enough, as non-technical users have absolutely no idea whether addresses like 192.168.x.x or 10.0.0.x are local or remote. At the moment, there is a pop-up shown on hover which does contain information like tcp-server, relay-server, etc. but these are still way too technical for "average" users to understand.

tomasz1986 avatar Mar 31 '22 08:03 tomasz1986

Wholeheartedly agree with @tomasz1986

A clear indicator for non-technical users would be very appreciated.

bt90 avatar Mar 31 '22 08:03 bt90

I think understanding URLs is enough steps above kindergarden that it warrants a ui enhancement requst for a small, non-emoji status indication about what kind of connection is active besides the URL (which as explained does indicate that information already, so it's just a user aid).

imsodin avatar Mar 31 '22 09:03 imsodin

I don't think non technical users will understand the difference between whatever indication we put, as they don't understand how the internet works. Lan/wan or the benefits of one or the other has no meaning to them.

This is only meaningful to technical users who can already infer it from the address.

AudriusButkevicius avatar Mar 31 '22 09:03 AudriusButkevicius

Even more technically inclined users might not understand the implications of e.g QUIC vs TCP or direct vs relay

A simple good/better/best indicator would be enough IMHO.

Most people have no idea about NAT but most games will give you a NAT rating and people know if things are good or if they need to reach out for help if not.

bt90 avatar Mar 31 '22 09:03 bt90

Lan/wan or the benefits of one or the other has no meaning to them.

Yeah, but from my experience, even non-technical users are aware of the implications when they are told that the current connection is a "direct connection through the local network, i.e. potentially the fastest possible" and an "indirect connection through a remote relay server, i.e. potentially slow", etc. Basically, as long as overly technical language is avoided and no fancy abbreviations are used, people do understand 🙂.

tomasz1986 avatar Mar 31 '22 09:03 tomasz1986

We could use something commonly understood like a signal strength indicator. One bar is a relay connection, two bars is a quic connection, three bars a tcp connection to a random address, four bars a tcp connection to a LAN-like address, five bars a tcp connection to a directly connected network, or something like that.

calmh avatar Mar 31 '22 10:03 calmh

https://icons.getbootstrap.com/icons/reception-1/ up to https://icons.getbootstrap.com/icons/reception-4/ maybe?

bt90 avatar Mar 31 '22 11:03 bt90

I didn't mean to suggest literally adding emoji's, it was just the quickest way of illustrating what I meant with a "polite way of indicating". :sweat_smile:

What I'm looking for is an indicator directly in the overview, preferably without having to drill down (i.e. click things) and analyse/compare an address to calculate if it's your ISP (fast) or a Relay (slow). So that in a single glance, you can see all your devices and judge if they are the type of connection you'd expect.

I would like to see something that indicates the distinction between relay, WAN and LAN, and my choice would be to use color-coded labels for this purpose. But every alternative suggestion above sounds like an improvement to me.

Labels using the keywords mentioned above, e.g.: image

Or no color-code on LAN but distinguish between NAT success (direct) or NAT fail (relay) upon WAN connection: image

Or a mix: image

Or an icon set, these are the bootstrap reception icons mentioned in a comment above: image

Just visualizing some of the ideas for brainstorm purposes.

Redsandro avatar Mar 31 '22 16:03 Redsandro

IMHO reception bars paired with color coding (orange to green) would take the least space while offering a quick overview.

bt90 avatar Mar 31 '22 16:03 bt90

IMHO reception bars paired with color coding (orange to green) would take the least space while offering a quick overview.

I'd also vote for the bars, perhaps with a tooltip on hover with a detailed explanation. The keyword labels like LAN, WAN, etc. are still alien to non-tech people. Is colouring necessary though? Most systems (e.g. Windows, Android) seem to just stick to the monochrome regarding reception bars.

tomasz1986 avatar Mar 31 '22 17:03 tomasz1986

A good tooltip with a link to the docs should get rid of a few forum topics as people might ask how to improve things like "is 2 out of 5 bars bad?!"

bt90 avatar Mar 31 '22 19:03 bt90

Bars without colors sounds good too. So for people who don't care, it's easy on the eyes. For people who do care, they can look up what the bars mean. Perhaps the alien words like LAN, WAN and relay can be used in the tooltip.

In my limited knowledge we only need three. I don't know how QUIC relates to TCP for example. There is room for 5 in the icon set referenced by @bt90.

image

Redsandro avatar Mar 31 '22 22:03 Redsandro

I left out the first variant on purpose as this indicates "no connection" and we already have a concept to display that.

My proposal:

  1. Relay
  2. QUIC
  3. WAN TCP
  4. LAN TCP

One could argue that QUIC connections can also be distinguished by LAN/WAN but if local firewalls aren't completely misconfigured, we should always end up with a TCP connection in a LAN environment.

bt90 avatar Apr 01 '22 05:04 bt90

I think the display of the connection type is good but would like to suggest a different way of display. The bars instinctively indicate a connection quality of the same type of connection, but this is not the case. It is now as if 4 bars on the smartphone stand for WLAN and 1 bar for GSM. In addition, in my opinion, a connection should not look inadequate just because it is not possible directly.

kuzmandi avatar Nov 07 '22 08:11 kuzmandi

I did spend some time trying to understand since when LTE connectivity was added to the docker container :)

image

Regression: 0 bars look like 'Disconnected...', indicating that Syncthing is actively trying to connect or in progress of establishing a connection.

jtagcat avatar Nov 09 '22 16:11 jtagcat

Regression: 0 bars look like 'Disconnected...', indicating that Syncthing is actively trying to connect or in progress of establishing a connection.

This should look a little better in future versions, as the icon alignment and size has been tweaked in the meantime. Especially concerning the dots, they will be bigger, so hopefully they won't be confused for an ellipsis.

tomasz1986 avatar Nov 09 '22 17:11 tomasz1986

Not my first choice, but I am very happy with this. :+1:

Redsandro avatar Nov 09 '22 17:11 Redsandro

For me, it does not fit into the picture at all that one thing is displayed as text (Up to date, Disconnected) and one as a symbol (connection quality as a bar).

Honestly, I'm skeptical. This type of display is strange. But I like to be positively surprised in the future...

kuzmandi avatar Nov 09 '22 18:11 kuzmandi

A bit of friendly criticism from a user perspective, if I may.

Today I noticed these new icons, and was completely flabbergasted as to what they meant. Connectivity issues? Latency? Connection speed? Network stability? Percentage of uptime? I opened the device info, and could not find anything related (now I know where to look, but I didn't then). I went to documentation, no mention there either (since the docs are still 1.22.0). From the changelog I found this discussion, and I can definitely say that using a "better-worse" connectivity kind of bar is not the best idea. I think, different kinds of connections should simply have different kinds of icons. For example (from the top of my head), a network icon 🖧 for LAN (maybe of different colours for TCP and QUIC), a world icon 🌐 for WAN (also same colour-coding for the protocol types), a link icon 🔗 for relay… A "prohibited" icon 🚫 for disconnected… And tooltips explaining what these icons mean.

Of course, tooltips would also help with the current design, but the current concept seems a bit inappropriate to me. We are too used to low bars meaning a bad signal. So 1 bar for relay makes me think that the device is on the brink of disappearing — but it's a perfectly working and stable configuration. Also, it's not clear for me why TCP WAN is "better" than QUIC WAN.

CaptainFlint avatar Nov 15 '22 20:11 CaptainFlint

In response to the dissatisfaction with the icon type, I see that Bootstrap also has numbered labels in their icon set.

E.g.: image

Perhaps that is a better indicator, as long as there is a tooltip explaining the number?

image image

(PS - I recommend to color-code them as well, this is just a quick edited screenshot from the icons page)

You could also use 0 1 2 3 for disconnected relay wan lan, and use the inverse fill icon for QUIC.

To the volunteers that built this implementation: Thank you. I'm satisfied with the current icons. Just hoping to address the dissatisfaction and find something that everyone can live with.

@CaptainFlint commented:

Also, it's not clear for me why TCP WAN is "better" than QUIC WAN.

The new indicator made you curious about something. That's always a good result, no? :smile:

So unless things have changed, TCP was benchmarked to be considerably faster than QUIC (for Syncthing). QUIC implementation is experimental and its intended usecase is UDP holepunching where one can establish a connection even when both sides are firewalled without port forwarding. So if the superior TCP does not work and downgrades your connection to a Relay, QUIC just might work to set up a direct connection, which is faster than a Relay.

Redsandro avatar Nov 15 '22 22:11 Redsandro

@Redsandro Thank you for the details; that's indeed new information for me; I always thought that QUIC would be a better protocol, being a more recent invention, designed specifically to be fast and overcome the restrictions of TCP...

The new indicator made you curious about something. That's always a good result, no?

I've just realized that I may have sounded like I didn't like the idea in general. That's definitley not the case, sorry for not saying it out loud. I do like the idea of having the status icons, and I'm all for it! It's a nice little touch.

I just don't feel so enthusiastic about this particular design, that's all. Neither do I think that 0-5 would be clear enough. I still am of the opinion that relay=1 being so close to disconnected=0 (whether it's it in the form of a "connectivity bar", or a number), is not the kind of impression that users need to receive. Neither can you say, for instance, that TCP WAN connection is 4 times "better" than relay connection. That's why I suggested some different form which would not imply direct numerical comparisons of different connection types. In reality, these numbers don't represent the actual measurable "amount of quality" — but they look like they do, and this may confuse users. Real connection quality and speed depend on many more factors than just the connection type. In reality, LAN connection could be even worse than a relay connection (if you, for example, happen to have another device attached to a Wi-Fi behind two solid walls, in a very noisy radio environment, making is unrelyable and slow; while a relayed device can be connected via stable and fast cabled Internet routes). Maybe it's not the most frequent situation, I admit, but not totally unthought of.

If you still think that "directly comparable" connection types are more preferrable, we need to at least have a signficant gap between the disconnected state and the relay state, so that relayed device did not look to the users like it is about to drop dead. Maybe instead of numbers it could be a simple figure (like a circle) with a colour, defining the connection type. For example: red=bad=disconnected, blue=normal=relay, teal=a bit better=QUIC, cyan=better=WAN, green=best=LAN. This way you still have the quality range and direct comparison between them, and at the same time the relay connection type does not look like it's almost the same as "disconnected".

CaptainFlint avatar Nov 15 '22 23:11 CaptainFlint

One more thing to consider, being on a LAN cannot be detected really reliably. I usually see all my devices classified with three bars and as TCP WAN, while they are actually connected to the same gigabit switch on my desk. But they get globally valid IPv4 addresses from DHCP server, not from the unroutable private address range. I'm not even sure how the distinction could be made for IPv6, since globally routable addresses are much more common because of e.g. router prefix delegation. AFAIK we don't prefer link-local addresses specifically, so getting a TCP LAN classification on IPv6 is rather unlikely.

In effect, all this should be taken with several grains of salt. It's just a rough indication.

acolomb avatar Nov 16 '22 06:11 acolomb

Well you could factor in the source and target addresses. At least for IPv6 the same subnet equates to LAN.

bt90 avatar Nov 16 '22 06:11 bt90

True, but how do we know the subnet prefix length? Maybe this discussion should move on to the forum, as no longer strictly related to the issue.

acolomb avatar Nov 16 '22 07:11 acolomb

Feel free to discuss: https://forum.syncthing.net/t/towards-better-connection-type-icons/19333

bt90 avatar Nov 16 '22 20:11 bt90

Try to pass along the relevant information to the user:

  • connection type (e.g. relay / QUIC / TCP)
  • available end-to-end bandwidth (how fast will larger amounts of data get transferred)
  • end-to-end latency (how fast will lots of small changes/checks/... go )
  • end-to-end connection stability (aka packet drop percentage, how good is your connection)

All those things are very different. There is no way to merge all that into a single icon.

igpit avatar Nov 17 '22 11:11 igpit

There is no way to merge all that into a single icon.

That's okay, no one is asking for that. The last 3 points are unrelated to this issue. We just want to communicate the connection type at a glance so you can confirm quickly that your devices are connected as intended, and not downgraded due to reasons.

Redsandro avatar Nov 18 '22 02:11 Redsandro

The conversation has already continued in the forum topic linked above, please contribute there: https://forum.syncthing.net/t/towards-better-connection-type-icons/19333

This issue was actioned - any further improvement/changes are currently discussed in the forum and if a consensus to change something arises, we'll open a new ticket (referencing this one).

imsodin avatar Nov 18 '22 08:11 imsodin