New UI for editing NICs

Hello,

I've pushed a PR [1] that updates UI for editing network interfaces. The
aim was to have the form better arranged and get rid of scrolling down
to see the interface details.

NICs are initially rendered in a table and the edit form was moved into
a modal window. The fields for a primary interface remain unchanged for
the time being. Our plan is to move them into the table in (near) future.

Some screenshots of the new look and feel are at:
https://tstrachota.fedorapeople.org/screenshots/nics_ui/

Please test. Usability comments are welcome.

Cheers
Tomas

[1] https://github.com/theforeman/foreman/pull/1888

OK, that looks freaking sweet. I'm really impressed. Including the MAC of
each NIC would really help me setting up hosts with multiple NICs.

··· On Friday, October 31, 2014 6:12:04 AM UTC-4, Tomas Strachota wrote: > > Hello, > > I've pushed a PR [1] that updates UI for editing network interfaces. The > aim was to have the form better arranged and get rid of scrolling down > to see the interface details. > > NICs are initially rendered in a table and the edit form was moved into > a modal window. The fields for a primary interface remain unchanged for > the time being. Our plan is to move them into the table in (near) future. > > Some screenshots of the new look and feel are at: > https://tstrachota.fedorapeople.org/screenshots/nics_ui/ > > Please test. Usability comments are welcome. > > Cheers > Tomas > > > [1] https://github.com/theforeman/foreman/pull/1888 >

+1, I really like this. My systems have many NICs and its a pain to scroll
down.

+1

Looking forward to have "unmanaged" NICs in Foreman. :slight_smile:

Thanks!

Arnold

0xE2356889.asc (3.06 KB)

··· -- Arnold Bechtoldt

Karlsruhe, Germany

On 31.10.14 11:12, Tomas Strachota wrote:

Hello,

I’ve pushed a PR [1] that updates UI for editing network interfaces. The
aim was to have the form better arranged and get rid of scrolling down
to see the interface details.

NICs are initially rendered in a table and the edit form was moved into
a modal window. The fields for a primary interface remain unchanged for
the time being. Our plan is to move them into the table in (near) future.

Some screenshots of the new look and feel are at:
https://tstrachota.fedorapeople.org/screenshots/nics_ui/

Please test. Usability comments are welcome.

Cheers
Tomas

[1] https://github.com/theforeman/foreman/pull/1888

> Hello,
>
> I've pushed a PR [1] that updates UI for editing network interfaces. The
> aim was to have the form better arranged and get rid of scrolling down to
> see the interface details.
>
> NICs are initially rendered in a table and the edit form was moved into a
> modal window. The fields for a primary interface remain unchanged for the
> time being. Our plan is to move them into the table in (near) future.
>
> Some screenshots of the new look and feel are at:
> https://tstrachota.fedorapeople.org/screenshots/nics_ui/
>
> Please test. Usability comments are welcome.
>

  1. I saw you separated the General settings and the primary interface
    Settings, yet on non primary interface edit you see them all in one form,
    why? :slight_smile:
  2. I would consider moving status into an icon and within one of the
    existing td, maybe the first one? (not sure if type or identifier should be
    first).
  3. edit / delete btn are not consistent with the rest of the application,
    we use a non blue edit (not primary btn) and instead of remove we usually
    have delete. and last, they are usually in a dropdown/ btn-group.
  4. nitpick: insufficient space between interfaces title and the new btn,
    maybe space them out a bit, or move the new to the left corner.
  5. consider adding autoscroll on edit?
  6. on validation error, please change the border to red, this will
    highlight the entire line.

looking good! thanks,
Ohad

··· On Fri, Oct 31, 2014 at 12:12 PM, Tomas Strachota wrote:

Cheers
Tomas

[1] https://github.com/theforeman/foreman/pull/1888


You received this message because you are subscribed to the Google Groups
"Foreman users" group.
To unsubscribe from this group and stop receiving emails from it, send an
email to foreman-users+unsubscribe@googlegroups.com.
To post to this group, send email to foreman-users@googlegroups.com.
Visit this group at http://groups.google.com/group/foreman-users.
For more options, visit https://groups.google.com/d/optout.

>
>
>
> Hello,
>
> I've pushed a PR [1] that updates UI for editing network interfaces.
> The aim was to have the form better arranged and get rid of
> scrolling down to see the interface details.
>
> NICs are initially rendered in a table and the edit form was moved
> into a modal window. The fields for a primary interface remain
> unchanged for the time being. Our plan is to move them into the
> table in (near) future.
>
> Some screenshots of the new look and feel are at:
> https://tstrachota.__fedorapeople.org/screenshots/__nics_ui/
> <https://tstrachota.fedorapeople.org/screenshots/nics_ui/>
>
> Please test. Usability comments are welcome.
>
>
> 1. I saw you separated the General settings and the primary interface
> Settings, yet on non primary interface edit you see them all in one
> form, why? :slight_smile:

I actually haven't touched this part of the form yet. It's the original
state. It will probably go away soon, when we merge the primary
interface rework.

> 2. I would consider moving status into an icon and within one of the
> existing td, maybe the first one? (not sure if type or identifier should
> be first).

Done. I added a status icon and re-ordered the columns.

> 3. edit / delete btn are not consistent with the rest of the
> application, we use a non blue edit (not primary btn) and instead of
> remove we usually have delete. and last, they are usually in a dropdown/
> btn-group.
> 4. nitpick: insufficient space between interfaces title and the new btn,
> maybe space them out a bit, or move the new to the left corner.

Updated, "Edit" is now standard button and "New Interface" got more spacing.

> 5. consider adding autoscroll on edit?

Not sure what you mean here. I played a bit with scrolling on the modal
window. Current state when we display it without any scrolling of the
page came out to be the best to me.

> 6. on validation error, please change the border to red, this will
> highlight the entire line.

After discussion with Marek I made whole backgrounds of invalid rows
light red. It should be distinct enough.
There's also new message when one of the interfaces is invalid.

··· On 11/02/2014 01:16 PM, Ohad Levy wrote: > On Fri, Oct 31, 2014 at 12:12 PM, Tomas Strachota > wrote:

looking good! thanks,
Ohad

Cheers
Tomas


[1] https://github.com/theforeman/__foreman/pull/1888
<https://github.com/theforeman/foreman/pull/1888>

--
You received this message because you are subscribed to the Google
Groups "Foreman users" group.
To unsubscribe from this group and stop receiving emails from it,
send an email to foreman-users+unsubscribe@__googlegroups.com
<mailto:foreman-users%2Bunsubscribe@googlegroups.com>.
To post to this group, send email to foreman-users@googlegroups.com
<mailto:foreman-users@googlegroups.com>__.
Visit this group at http://groups.google.com/__group/foreman-users
<http://groups.google.com/group/foreman-users>.
For more options, visit https://groups.google.com/d/__optout
<https://groups.google.com/d/optout>.


You received this message because you are subscribed to the Google
Groups “Foreman users” group.
To unsubscribe from this group and stop receiving emails from it, send
an email to foreman-users+unsubscribe@googlegroups.com
mailto:foreman-users+unsubscribe@googlegroups.com.
To post to this group, send email to foreman-users@googlegroups.com
mailto:foreman-users@googlegroups.com.
Visit this group at http://groups.google.com/group/foreman-users.
For more options, visit https://groups.google.com/d/optout.