OpenSnitch UI layout discussion

[dmknght]

I feel like the current UI of OpenSnitch is too complex can can be more friendly so I want to discus about a new layout.
p/s: I understand that OpenSnitch has more tasks to be done so it is more like a discussion rather than request developers to change the layout. I am also working on this idea but because of not understanding the structure of current code and qt skills so i'm not able to complete it right now.

1. A task-manager like is needed for all running processes that connect to internet
   In my opinion it is extremely useful when users want to know about processes are connecting to internet. Ofc there are multiple ways to check it in Linux but i think it is more useful because OpenSnitch monitors processes anyway. And with the GUI we can do some basic features like add rules to current process / kill process / block process ....
   Basically idea is something like this
   

For now the layout of OpenSnitch is having logs of applications that connected to internet

2. The main widget can be more modern and friendly. It is not really needed but it can provide all basic information that users want to see in friendly and easy way.
Here is an example of Comodo Internet Security and imo a similar layout can be done -> Users can see:

• How many apps are connecting to internet
• How many rules
• How many blocked events
  ...
  

3. The rule editors and Rules widget
   Here is current Rules widget which is, imo, can be more simple
   
   And the layout of Kaspersky firewall rule
   
   When users show information about 1 rule, it can show other information like nodes, edited time, ...
4. The Event Dialog that prompts when new process connects to internet
   Imo it could be more simple but need to design carefully because this dialog creates rules and missing 1 entry / option can be disadvantage

[matty-r]

After having just used this for the last few days - the interface does feel a bit rough. I'd love to try and work to improve this.

[dmknght]

After having just used this for the last few days - the interface does feel a bit rough. I'd love to try and work to improve this.

It would be great! I found out the header of the Rules widget was created by

header = table_widget.horizontalHeader()
        if header:
            header.sortIndicatorChanged.connect(self._cb_table_header_clicked)
            for _, col in enumerate(resize_cols):
                header.setSectionResizeMode(col, QHeaderView.ResizeToContents)

And likely it uses columns from db to create header. For now my new code failed to query the data from database to display in the widget. Hope you can help me on this :(

[Techtonictools]

I've been using opensnitch for a week or two on debian and I think the existing UI is good. It is functional with sorting, searching and automatic rule creation.

If there were changes to the UI I think it should be around the events tab so that I can select a line and have it stay selected as events continue to flow into it. Right now, I select an event and it gets highlighted but when another event arrives the selected event is knocked off of highlight so I can't copy the one I had selected. Ideally I could select multiple events, they would stay selected then I could copy them to the clipboard and paste them in my exception list.

I think some of the column names could be improved like operator_operand, but that is benign.

[themighty1]

@Techtonictools , thanks for the input.
Regarding, the event not staying selected, it happens only if the Event window hasn't been scrolled down. As soon as you scroll it down even by one line, the selection will remain fixed.

[gustavo-iniguez-goya]

I might be wrong, but we cannot achieve such GUI designs with the current graphical toolkit (Qt, QtWidgets). Maybe we could improve it somehow by using stylesheets (for example for offering a Preference option to switch between dark and light themes #303), we could colorize rules rows based on if the rules are enabled or not, etc. but I'm not sure if it's worth the effort. Besides, it's not mobile user friendly (Librem5 for instance).

Before redesigning the current UI layout, I'd be more interested in switching to something more modern, like QtQuickControls2 (only for reusing current python code, otherwise Fyne could be an option):

The Qt Quick Controls 2 module delivers the next generation user interface controls based on Qt Quick. In comparison to the desktop-oriented Qt Quick Controls 1, Qt Quick Controls 2 are an order of magnitude simpler, lighter and faster, and are primarily targeted towards embedded and mobile platforms.

[dmknght]

for example for offering a Preference option to switch between dark and light themes #303

AFAIK GTK uses current system theme so if user switches dark / light theme of system the application changes as well. But idk if it does the same for PyGtK. And i don't really like GTK to be honest. The documentation of table is just nightmare for me. QT is better

@gustavo-iniguez-goya it would be awesome if you can explain the way current GUI gets all rules from database :D i read the code but i didn't understand the current code structure so much and copy code failed showing all rules for me and it showed no error :(

[gustavo-iniguez-goya]

@gustavo-iniguez-goya it would be awesome if you can explain the way current GUI gets all rules from database :D i read the code but i didn't understand the current code structure so much and copy code failed showing all rules for me and it showed no error :(

Sure. Let's see.

First things first: the GUI uses a model/view arquitecture using QSqlQueryModel and QSqlDatabase (using sqlite at the moment, but we could use other databases):

https://doc.qt.io/archives/qtforpython-5.12/overviews/model-view-programming.html#model-view-programming
https://doc.qt.io/archives/qtforpython-5.12/PySide2/QtSql/QSqlQueryModel.html
https://doc.qt.io/archives/qtforpython-5.12/PySide2/QtSql/QSqlDatabase.html

There's an extremely useful information in those links. Read it, practice with the examples and get use to it.

Regarding how the GUI configure the views and loads the data:

When the GUI is started, a new DB object is created that is shared across all the dialogs that need it:

1. https://github.com/evilsocket/opensnitch/blob/master/ui/opensnitch/service.py#L44
2. https://github.com/evilsocket/opensnitch/blob/master/ui/opensnitch/database.py#L11

At the same time, the main dialog is created, but not shown yet:
https://github.com/evilsocket/opensnitch/blob/master/ui/opensnitch/service.py#L66

The StatsDialog init() method is invoked, and all the tables/views are configured as follow:

• With the idea that almost all the views (hosts tab, applications tab, ports tab, etc) share the same information, there's a common configuration for all the tables, where we configure the SELECT query, what fields to display, how to order the data, etc:
  https://github.com/evilsocket/opensnitch/blob/master/ui/opensnitch/dialogs/stats.py#L113

• Then for every view, we bind the SQL table from the database to the QTableView:
  https://github.com/evilsocket/opensnitch/blob/master/ui/opensnitch/dialogs/stats.py#L323

  Notice that every call to the setup_table() has as 1st and 2nd parameter a widget and an object. Those objects are the visible QTableViews that you can see if you open the stats.ui file in QtDesigner.

• The magic happens in the _setup_table() method:
  

  opensnitch/ui/opensnitch/dialogs/stats.py

  Line 1391 in e5b54f0

  def _setup_table(self, widget, tableWidget, table_name, fields="*", group_by="", order_by="2", sort_direction=SORT_ORDER[1], limit="", resize_cols=(), model=None, delegate=None, verticalScrollBar=None):

  1. A new QSqlQueryModel() object is created:

     opensnitch/ui/opensnitch/dialogs/stats.py

     Line 1394 in e5b54f0

     model = self._db.get_new_qsql_model()

  2. We assign a SQL query to this model which will be the one that will be executed whenever the table of the DB is updated, without manually having to do so.

     opensnitch/ui/opensnitch/dialogs/stats.py

     Line 1399 in e5b54f0

     self.setQuery(model, "SELECT " + fields + " FROM " + table_name + group_by + " ORDER BY " + order_by + " " + sort_direction + limit)

  3. And we set to QTableView the QSqlQueryModel:

     opensnitch/ui/opensnitch/dialogs/stats.py

     Line 1400 in e5b54f0

     tableWidget.setModel(model)

• When the user switches to another tab the setQuery() method is invoked, and the new SQL query (remember, configured previously on _setup_table()) is used to display data.

[SwampRabbit]

Along the lines of the initial post, I don't mind the having a full featured (complex) GUI myself, but overall it isn't super "new Linux user friendly". Then again it at this point it probably isn't something an average general new Linux user would be installing in the first place.

I really really like OpenSnitch, but I think the GUI should have two forms "basic" and "advanced", either from a toggle button or button that just drops you into the advanced GUI.

I haven't messed with yet, the the MX Linux team told me I should start messing around with Qt Creator at least for UI prototyping. *Just something to think about when the time comes to tinker with the UI.

Let me see if I can drum up some folks who may want to contribute, we've had quite a few discussions about OpenSnitch in general, our user base really likes it too.

[gustavo-iniguez-goya]

our user base really likes it too.

That's fantastic! I can help coding the "basic" form if needed.

Have they complained about the complexity of the GUI?

[SwampRabbit]

@gustavo-iniguez-goya no, no complaints at all. Quite a few would like to see it installed OOTB as part of MX Linux.

Note: none of these are complaints, more or less just thoughts. ;)

While many of us are fine with the GUI, I agree with @dmknght that its a bit too complex, especially OOTB for a new or general Linux user. Maybe "complex" is the wrong word... intuitive may be better. Which is why I think there should be a Basic and Advanced GUI. One for new users to Linux and OpenSnitch and one that lets you dig down and work things at the fine grained level.

With the default deny action and it being on a short timer, a new user could unintentionally restrict things that cause them to lose web browser and or internet access, there by increasing any frustration they have already by using/learning an new OS. It would just take a user walking away from their computer for a bit after a fresh install for them to be in a pickle when they get back.

As it is right now, we would spend quite a bit of time with support posts on our forums if we enabled it OOTB as is as part of MX Linux. We also don't want people coming here and opening all sorts of random issues. We could change Default Timeout and Actions on our end as part of the Distro specific packaging to avoid this a bit though.

If you look at the Kaspersky firewall rule picture dmknght posted, its very clean and simple compared to the current Rules tab.
I imagine if we added it OOTB to MX Linux, we'd be spending a lot of time telling people how to allow something to work again or teaching them how to use OpenSnitch.

[gustavo-iniguez-goya]

With the default deny action and it being on a short timer, a new user could unintentionally restrict things that cause them to lose web browser and or internet access, there by increasing any frustration they have already by using/learning an new OS.

We could change Default Timeout and Actions on our end as part of the Distro specific packaging to avoid this a bit though.

I think that's the key. As part of the installation you could personalize the GUI options and distribute some default rules to ensure the well functioning of the system (allowing system programs like dirmngr, xbrlapi, ntpd, systemd-timesyncd, allowing everything to localhost or allowing connections to your domain to check if there's network connectivity more info)

I'm more than willing to help if you decide to go down this route.

But it's true that you'll have inevitably to answer users questions, like "why Firefox is connecting to Twitter or Youtube, if I only launched the program" (fedora, debian, etc) or "what's whoopsie?" (in ubuntu).

Regarding the basic GUI, which may be a different topic than this issue, what options should it have? Something similar to gufw?

Status
[enable][disable]

Preferences - New rule - Details
Uptime - connections [allowed: 999][dropped: 999] - Rules: 30 - Version: v1.4.0rc5.

[gustavo-iniguez-goya]

We could use https://github.com/UN-GCPDS/qt-material to give the current GUI a new look.

We could also let the user choose what theme to use, dark or light, which would fix some problems #303 #335

[SwampRabbit]

@gustavo-iniguez-goya thank you very much for the info on the wiki rules example, yep, I believe a custom Distro default "white list" is a great option.

Super busy with real life work and all my work for MX Linux, but I'll brainstorm a bit on the UI/GUI when I can.

Thanks again for all your efforts on OpenSnitch!

[evilsocket]

Is there any webkit (or similar) based engine for golang with simple setup (not the usual lot of webkit dependencies)? If we could just have an HTML based UI that would allow any level of UI complexity we want, and alows way more people to contribute.

[evilsocket]

if we have HTML a fancy looking UI is just a matter of Bootstrap components plus a custom theme. And it'd always render the same.

[sunrez]

All,

I tried OpenSnitch out about 6 months ago and found the UI very challenging to do basic white list / block access to domains upon connection . Example, I wanted to let Firefox download plug-ins, browse sites "normally" but block telemetry, access to Pocket, etc. This meant editing rules to allow some domains (addons.mozilla.org) but blocking other (detectportal.firefox.com, push.services.mozilla.com, etc) manually in the rules editor rather than via the first pop-up.

I know everyone has UI suggestions ; as someone who's been working with application firewalls for a VERY long time, I have to say the macOS LittleSnitch UI seems to capture almost all typical use-cases without an overburdened UI. I'd really like to suggest taking some heavy inspiration from there.

In LittleSnitch's the initial pop gives you options to:

• Allow/Deny connection to a : destination port, specific site/domain or specific site/domain plus the destination port. Having domain rather than IP address is really key since the advent of CDN/DNS tricks makes IP based rules very problematic
• Provides a time limit for the connection (once, 1 min, 5 min, etc)
• Provides details on the process, owner, etc

I'm adding a few screen shots for those who may not have seen it:

Pop-up:

Interactive rule editor: let's you expand rules to networks, ranges of IP addresses, ranges of ports, etc

[gustavo-iniguez-goya]

Hi @sunrez ,

Thank you for the feedback. I like the pop-up's details view of the connection, it looks really nice. Separating it into its own view allows to offer a simple view, and advanced view, without bloating up the GUI 📝

I don't know if you tried out a very early version of opensnitch, or maybe you mean something different, but we offer all the options you mention to create rules from the pop-ups:

In LittleSnitch's the initial pop gives you options to:

Allow/Deny connection to a : 

destination port, specific site/domain or specific site/domain plus the destination port. Having domain rather than IP address is really key since the advent of CDN/DNS tricks makes IP based rules very problematic

You can select domains or subdomains, destination port / IP / ranges:

Clicking on the [+] button (2) expands the "advanced view", so besides the default filtering option (1) you can select more parameters of a connection to filter (2,3,4):

[gustavo-iniguez-goya]

Finally I added support for customize gui's appearance:

In order to use it, install qt-material: $ pip3 install qt-material.
If it's not installed it'll default to system's theme.

There're 15 different themes that you can select from the Preferences dialog.
Besides these themes, you can create your own by creating a XML file under ~/.config/opensnitch/themes/ or /usr/lib/python3/dist-packages/opensnitch/themes/ and customizing the colours: https://github.com/UN-GCPDS/qt-material#custom-colors

Besides colours, there're more options that can be customized: https://github.com/UN-GCPDS/qt-material#alternative-qpushbuttons-and-custom-fonts , but I haven't added support for it. It'd be easy, so if someone is willing to play with it just drop a comment.

[bthylafh]

Please implement choosing a different font. I'd really like to try using Atkinson Hyperlegible.

[RokeJulianLockhart]

#424 (comment)

@bthylafh, does your DE not allow that? Why make it the purview of the application?

[bthylafh]

It does, but only if I use the 'system' theme. Perhaps you could try reading for comprehension?

Besides colours, there're more options that can be customized: https://github.com/UN-GCPDS/qt-material#alternative-qpushbuttons-and-custom-fonts , but I haven't added support for it. It'd be easy, so if someone is willing to play with it just drop a comment.

[RokeJulianLockhart]

#424 (comment)

@bthylafh, disparagement shan't do you any good. Don't speak in that manner. Regarding the issue at hand, I don't know what https://github.com/UN-GCPDS/qt-material/blob/cb1375407e896fc62d8fbbdb72121308ca5c23e9/README.md#alternative-qpushbuttons-and-custom-fonts demonstrates in relation to what you've stated, but what you've described sounds like a bug with the other themes. Wouldn't it be better to file an issue explaining that all themes except system don't inherit the system's font?