Skip to content

Add basic support for network configuration#260

Merged
imobachgs merged 56 commits intomasterfrom
feature/network-overview
Oct 27, 2022
Merged

Add basic support for network configuration#260
imobachgs merged 56 commits intomasterfrom
feature/network-overview

Conversation

@dgdavid
Copy link
Contributor

@dgdavid dgdavid commented Oct 17, 2022

Problem

So far, D-Installer does not offer a way to either, see how the network will end up configured or a way to change it.

Solution

Add a bare minimum and interactive summary in the installation overview.

We have been playing with several approaches (see one of them here) to be able to interact with the NetworkManager D-Bus API while keeping the summary simpler enough. Consequently, this first proposal only displays ETHERNET and WiFi active connections, allowing to change only the formers.

The basic support to interact with the wireless networks will be added as part of https://trello.com/c/SFpwJaU7/ (internal link).

Caveat

Of course, nothing is written in stone (yet :P) and this UI could be subject to change in favor of a better UX in the next iterations. Thus, take this PR as a starting point, which has helped a lot to understand how we want to interact with Network Manager DBus API and to have a big picture that will help continue the implementation of network features in D-Installer.

Testing

  • Added a few new unit tests (still missing others, to be written once the UI is more consolidated)
  • Tested manually

Screenshots

Overview Setting up a wired connection
Network overview Editing a wired connection

|

@dgdavid dgdavid force-pushed the feature/network-overview branch 2 times, most recently from 60ff072 to fa09b63 Compare October 18, 2022 07:31
dgdavid and others added 20 commits October 18, 2022 08:32
Co-Authored-By: Knut Anderssen <kanderssen@suse.com>
Co-Authored-By: Knut Anderssen <kanderssen@suse.com>
Co-Authored-By: Knut Anderssen <kanderssen@suse.com>
Let's start with a simple form in a popup until came with a better
section/UI in the near future.

Co-Authored-By: Knut Anderssen <kanderssen@suse.com>
To allow having "height-fixed" Popups, useful to avoid Popups chaging
their size while adding or deleting dynamic elements, such addresses
when configuring a wired connection.
Drops initial and incomplete support for ipv6 too.
By not displaying the connected or not connected "headers".
Although there is a lot of room for improvements in both, ready and
pending tests. Something to be addressed in next iterations.
By providing all connection properties. Maybe some of them should be
optional.
Copy link
Contributor Author

@dgdavid dgdavid left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please, take this PR as a starting point for having a network overview and adding a basic support for its configuration. We know that there are plenty of improvements and nice features that can be added…. but we need to sort and planning them before continue to avoid still walking in circles 😉

const activeWiredConnections = connections.filter(c => c.type === CONNECTION_TYPES.ETHERNET);
const activeWifiConnections = connections.filter(c => c.type === CONNECTION_TYPES.WIFI);

return (
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When there are none active connection

  • Return an explanatory message (i.e., "Network cannot be configured", "No network connections available"), or
  • Display a list of devices that can be configured to have an active connection

Something to do in next iterations, after having a more clear vision about the desired UI for that Network Overview component (please, try to avoid making it too complex; we could have a Network Section component for an advanced network setup).

EOS_SOFTWARE as OverviewIcon,
EOS_TRANSLATE as LanguagesSelectionIcon,
EOS_VOLUME as HardDriveIcon,
EOS_SETTINGS_ETHERNET as NetworkIcon,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A better icon is more than welcome. But remember that we are using https://eos-icons.com/, so have a look there for consistence. (Spoiler: although it is listed there, EOS_LAN actually is not available; in fact, would be nice to use it to visually identify listed wired connections)

<Button variant="link" onClick={open}>
{ label }
<Button variant="link" onClick={open} isDisabled={ips.length === 1}>
{firstIp} {hostname && <Text component="small">({hostname})</Text>}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ NOTE

Despite we have a Network overview in the installation summary now, we have kept this component because it is interesting to have a way to quickly identify the machine we have dealing with. For example, think of someone performing multiple installations at the same time… they must be able to distinguish between these machines no matter which section is displayed (product selection, storage section, etc)

Of course, we can do a lot of things to improve the current presentation, but let's book some time to think/discuss about it later.

Comment on lines +209 to +216
.medium-modal-popup {
min-block-size: 55vh;
max-block-size: 55vh;
}

.large-modal-popup {
min-block-size: 85vh;
max-block-size: 85vh;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These height sizes were added to have height-fixed popups, which is useful to avoid having a popup that changes its height while adding or removing dynamic fields, as happens now with the Connection Settings.

If you think other sizes are more appropriated, please speak up 😉

@dgdavid dgdavid changed the title WIP: Add basic support for network configuration Add basic support for network configuration Oct 19, 2022
@coveralls
Copy link

coveralls commented Oct 19, 2022

Coverage Status

Coverage decreased (-12.3%) to 64.063% when pulling 119bc45 on feature/network-overview into fa6eba5 on master.

@imobachgs imobachgs marked this pull request as ready for review October 26, 2022 16:17
@imobachgs imobachgs mentioned this pull request Oct 26, 2022
Copy link
Contributor

@joseivanlopez joseivanlopez left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Very good work guys! Congrats.

BTW, having the list of IPs in the summary looks a bit weird, but I think we still have to refine the UI. So far so good. Thanks!

@imobachgs imobachgs merged commit 1f871c3 into master Oct 27, 2022
@imobachgs imobachgs deleted the feature/network-overview branch October 27, 2022 11:43
@imobachgs imobachgs mentioned this pull request Nov 16, 2022
@imobachgs imobachgs restored the feature/network-overview branch November 23, 2022 09:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants