Redesign "Network Configuration" UI #300

alinefm · 2016-04-05T20:46:52Z

There are a few issues in this "Network Configuration" section:

There are scroll bars when they are not needed.
Why allow multiple selection if no actions is allowed when selecting more than one interface ?
To keep consistence, I'd suggest to have only one button 'Add'.
When selecting this Add button, a dialog to choose the network type is displayed (similar to what we have when adding a new Template in Kimchi). According to selected type, display the appropriated inputs.

Said that, my suggestion is do change this section to something like below:

| + Add |  | Refresh |                                | Filter                |

| Name      | Type       | Address Space    | MAC Address          |              
| iface 1   | Ethernet   | 1.1.1.1          | 12:34:56:78:90       |  Actions  |
| iface 2   | Vlan       |                  | 12:34:56:78:90       |  Actions  |
| iface 3   | Ethernet   | 2.3.4.6          | 90:34:56:78:90       |  Actions  |

When selecting the Actions menu, the list of available actions will be listed: Down/Up, Restart, Settings, Delete.

All the widgets used for this mockup MUST follow Wok style. The idea of this proposal is to have something similar to what we have on Network tab in Kimchi.

The text was updated successfully, but these errors were encountered:

alinefm · 2016-04-08T02:48:18Z

More details about the "Add" button behavior can be found at #308

alinefm · 2016-04-15T00:05:34Z

The 'Add' button is a feature provided by Ginger s390x. So I will move the issue #308 to the right project.

potula-chandra · 2016-04-18T11:30:04Z

@alinefm :
Q. Why multiple selection is enabled if no action can be taken?
Definitely, multiple selection will be enabled and actions can be taken based on the selections. Unfortunately all features are not implemented as per the network design pages been approved by the community.

We had trouble with python-augeas and restricted to one interface earlier. But now with code optimization multiple selection will be possible for performing certain actions.

samhenri · 2016-05-25T18:20:56Z

Hi @chandrureddy

Sorry for the delay. On my environment the multiple selection doesn't work. If I select more than one item, the Actions drop-down is disabled. I think we should at least disable the dropdown list item (adding the class .disabled and checking it with javascript) for the matched actions (If I select only interfaces that are down, then enable the "Up" action and "Restart", if I select multiple interfaces then only Restart is enabled). If this is not possible then I agree with @alinefm mockups, the interface actions button should be moved to each line and the Add and Refresh buttons to the top left of the table.

potula-chandra · 2016-05-30T06:08:35Z

Hi Samuel,

These actions are possible with the current implementations. I guess as
part of the issue we can work out the solution and fix these.

Again we intentionally not allowed earlier to avoid core dump issues by
augeas. Now since back end code optimization done we can enable multiple
selection and possible user actions against them.

Regards
Chandra

On 5/25/16 11:52 PM, Samuel wrote:

Hi @chandrureddy https://github.com/chandrureddy

Sorry for the delay. On my environment the multiple selection doesn't
work. If I select more than one item, the Actions drop-down is
disabled. I think we should at least disable the dropdown

(adding the class .disabled and checking it with javascript) for the

matched actions (If I select only interfaces that are down, then
enable the "Up" action and "Restart", if I select multiple interfaces
then only Restart is enabled). If this is not possible then I agree
with @alinefm https://github.com/alinefm mockups, the interface
actions button should be moved to each line and the Add and Refresh
buttons to the top left of the table.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#300 (comment)

danielhb · 2016-07-11T13:28:16Z

This is the proposed fix in the ML:

Note that the 'Add' and 'Refresh' buttons are on the top right side of the table. This is not compliant with the rework being made in the Global Network where, in its first version, put everything on the
top left side:

@alinefm @chandrureddy @samhenri we can't allow 2 features at the same table to have such differences in the layout. We need a consensus of where this 'Refresh' and 'Add' buttons are going to be for both Global Network and Network Settings layout.

samhenri · 2016-07-11T13:38:25Z

@danielhb I believe the current patch sent to the ML was the final patch for Network Configuration using jQuery Bootgrid. Although the title says "redesign "Network Configuration" UI" there's still work to be done. I was waiting this patch in order to work with the DataTables port.

danielhb · 2016-07-11T13:57:16Z

@samhenri are you saying that the relocation of the 'Add' and 'Refresh' button is going to be made by you in this port to DataTables?

If that's the case then I will relieve the current patch in the ML from doing it.

samhenri · 2016-07-11T14:04:23Z

I thought that this what was aligned a few scrum meetings ago, right @alinefm @chandrureddy ?

danielhb · 2016-07-11T14:18:00Z

@samhenri Ok, I'll inform that in the ML

alinefm · 2016-07-11T14:53:14Z

Correct, @samhenri and @danielhb

- Disable scroll bars when they are not needed - Enable Actions button when selecting more than one interface Required js,css,scss changes in Ginger for above mentioned issue. v1 : Fix for code review comment(icon is too close to checkbox)

alinefm · 2016-07-22T17:31:07Z

Sorry, seems more changes are needed to close this issue.

samhenri · 2016-08-05T19:43:16Z

I'm currently working on this redesign but I'll keep the "Actions" drop-down since the multi-selection is now working. I think the first button should be the Actions drop-down and then the Add drop-down, like this:

| Actions v |  | + Add v |  | Refresh |                              | Filter                |

| Name      | Type       | Address Space    | RDMA enabled   | MAC Address                   |
| iface 1   | Ethernet   | 1.1.1.1          | No             | 12:34:56:78:90                |
| iface 2   | Vlan       |                  | No             | 12:34:56:78:90                |
| iface 3   | Ethernet   | 2.3.4.6          | No             | 90:34:56:78:90                |

I'm having problems to add a new Bond or Interface, can someone show me a valid PUT request when the user hits the "Save" button? The "Parent Interface" and "Bond Members" selects are empty for me.

samhenri · 2016-08-08T20:09:46Z

Hi, I'm unable to Add a Bond and Add a VLAN with the current code. The JSON from cfginterfaces looks like this:

[
  {
    "IPV4_INFO":{
      "PEERROUTES":"yes",
      "IPV4INIT":"yes",
      "DEFROUTE":"yes",
      "PEERDNS":"yes",
      "IPV4_FAILURE_FATAL":"no",
      "IPV4Addresses":[
        {
          "PREFIX":"255.255.255.0",
          "IPADDR":"10.10.71.45",
          "GATEWAY":"10.10.71.1"
        }
      ],
      "BOOTPROTO":"static"
    },
    "BASIC_INFO":{
      "UUID":"6b4d4616-5a39-48a1-b73e-58bef428a1b5",
      "MTU":"1500",
      "HWADDR":"1A:6B:53:EE:BB:29",
      "TYPE":"Ethernet",
      "ONBOOT":"yes",
      "NAME":"ens3"
    },
    "IPV6_INFO":{
      "IPV6INIT":"yes",
      "IPV6_PEERDNS":"yes",
      "IPV6_DEFROUTE":"yes",
      "IPV6_AUTOCONF":"yes",
      "IPV6_FAILURE_FATAL":"no",
      "IPV6_PEERROUTES":"yes"
    }
  }
]

I've checked the JS code and found this:

if ("BASIC_INFO" in interfaceInfo && "DEVICE" in (interfaceInfo.BASIC_INFO)) {
...
}

Is this correct? My CFG file doesn't seem to have the device key in BASIC_INFO.

danielhb · 2016-08-08T20:13:55Z

"BASIC_INFO" is a grouping of the following parameters:

* BASIC_INFO: Basic information of network interface:
    * NAME: Name of the interface.
    * DEVICE: Device name of the interface.
    * ONBOOT: 'Yes' if interface is to be brought up during boot,
              'No' if interface should not be brought up during boot.
    * TYPE: Interface type ('nic', 'bonding', 'vlan')
    * MACADDR: Mac address of ethernet device.
    * VLAN: 'Yes' If its vlan device.
    * VLAN_ID: vlan id of the vlan device.
    * PHYSDEV: physical device associated with the vlan device.
    * BONDING_OPTS: Bonding parameters of the Bond device.
    * BONDING_MASTER: 'yes' if its bond device.
    * SLAVES: Returns slaves associated with the bond.
    * NETTYPE(system z): Returns network device driver type
    * SUBCHANNELS(system z):List of sub channels(network triplets) of
                            the interface

samhenri · 2016-08-08T20:30:41Z

@danielhb I've updated my comment. The BASIC_INFO object is there but I don't have the DEVICE, so the select / comboboxes for Bonds and VLANS are always empty. Is this correct? Can't I look for the interface name instead of the device name if the DEVICE key is not available or is it a problem with my CFG file?

      if ("BASIC_INFO" in interfaceInfo && "DEVICE" in (interfaceInfo.BASIC_INFO)) {
        interfaceDetails["value"] = interfaceList[i].BASIC_INFO.DEVICE;
        interfaceDetails["text"] = interfaceList[i].BASIC_INFO.DEVICE;
        memberOptions.push(interfaceDetails);
      }

danielhb · 2016-08-08T20:46:18Z

If you're running in a Fedora/RHEL you should have the 'DEVICE' attribute in the cfgfile of a network card. It refers to the device as listed by ifconfig.

You can put a workaround in the UI to find for NAME if DEVICE isn't found and see if it works though. In some distros DEVICE and NAME are interchangeable.

samhenri · 2016-08-08T21:01:16Z

Yes, i'm running Fedora 23 this time and found this. It seems is happening with some Ubuntu machines but I still need to confirm. I'll make a workaround to use the interface name if device is not available then.

jay-katta · 2016-08-09T14:24:31Z

Hi @samhenri , as @danielhb said if you are running in Fedora/RHEL you should have DEVICE attribute in ifcfg file of network interface.
As of now cfginterfaces does not support Ubuntu.
To understand more, can you share your operating system and ifcfg content details.

samhenri · 2016-08-16T21:03:56Z

Hi @chandrureddy @alinefm @danielhb,, I'm almost finishing the redesigned panel but I have a question regarding the buttons.
Since I've added the _lodash library, I can filter arrays by values so I can check if all the selected items have the same network type, module, etc. For SR-IOV I know I can't display the option with multiple selected items because it opens a modal window and the user has to input the parameters to each network interface.
But for the Delete button, I think I could enable the button if the user selected networks that aren't "nic" type. In this case I would display a wok.confirm() dialog to remove the selected interfaces, including the ones that were selected on the other pages. What do you think?

danielhb · 2016-08-18T19:17:17Z

On 08/16/2016 06:03 PM, Samuel wrote:

Hi @chandrureddy https://github.com/chandrureddy @alinefm
https://github.com/alinefm @danielhb https://github.com/danielhb,,
I'm almost finishing the redesigned panel but I have a question
regarding the buttons.
Since I've added the _lodash library, I can filter arrays by values so
I can check if all the selected items have the same network type,
module, etc. For SR-IOV I know I can't display the option with
multiple selected items because it opens a modal window and the user
has to input the parameters to each network interface.
But for the Delete button, I think I could enable the button if the
user selected networks that aren't "nic" type. In this case I would
display a wok.confirm() dialog to remove the selected interfaces,
including the ones that were selected on the other pages. What do you
think?

Go for it

Another question, when the current script checks if the selected row
has the the mlx5-core module installed, we have the following line:

|if ((selectedIf[0]["module"] != 'mlx5_core' && selectedIf[0]["module"]
!= 'mlx5-core') || (selectedIf[0]["nic_type"] === 'virtual' )) { ... } |

Is this correct? Why do we have to check for mlx5_core twice? As for
this feature, I can't test it because I'm running on a virtual
environment but I can mock an object and show the option to check if
the modal window is at least working.

Because the module sometimes appears as 'mlx5_core' and in others
'mlx5-core'. This happened
a lot with the former mlx4_core driver.

I'll be honest and say that I am not seeing 'mlx5-core' anymore but it's
better to be on the safe side.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#300 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA053GNwv1p7mlMc9G0WtBq0oDHgtG8aks5qgiW9gaJpZM4IAeaa.

potula-chandra · 2016-08-19T10:03:30Z

@samhenri @danielhb in case of platform s390x interfaces of type 'nic' can also be deleted. So we have enable 'Delete' option in case of s390x for the interfaces of type 'nic' too.

samhenri · 2016-08-19T14:09:21Z

@chandrureddy does the current implementation already checks s390x interfaces?

potula-chandra · 2016-08-19T15:39:02Z

@samhenri I guess so. Removal of interfaces of type 'nic' should currently works on s390x.

samhenri · 2016-08-19T15:40:55Z

I meant, how to check if the user is running a s390x or default ginger with JavaScript?

potula-chandra · 2016-08-19T18:27:50Z

I guess recent patch by commit 84f43d5 disables button 'Delete'. But I suppose we have to enable 'Delete' in case of s390x.

May be @atreyeemukhopadhyay can help us here better as she recently done such changes and code handling in case of s390x.

potula-chandra · 2016-08-19T18:33:06Z

We can rely on the API call of gingerbase : /plugins/gingerbase/host to know about the architecture. For more details : https://github.com/kimchi-project/gingerbase/blob/master/docs/API.md

In case of s390x you get the following details:

Basic Information
s390x
Architecture
KVM for IBM z Systems
OS Distro
1.1.3
OS Version
Z
OS Code Name
IBM/2827/743 H43
Processor
Online: 2 Offline: 2
Book(s): 4 Socket(s): 6 Core(s) per Socket: 6 Thread(s) per Core: 1
CPU(s)
Shared: 2 Dedicated: 0
Core(s)
Online: 4GiB Offline: 0B
Memory
Name: CSTLIN1 ID: 55
LPAR Details
Name: PR/SM Vendor: IBM
Hypervisor Details

Signed-off-by: Samuel Guimarães <[email protected]>

alinefm added the UI label Apr 5, 2016

alinefm mentioned this issue Apr 8, 2016

Redesign "Add" dialog in "Network Configuration" section #308

Closed

alinefm mentioned this issue Apr 15, 2016

Redesign "Add" dialog in "Network Configuration" section kimchi-project/gingers390x#53

Open

alinefm added this to the Ginger 2.3 milestone Jul 22, 2016

alinefm assigned samhenri Jul 22, 2016

alinefm closed this as completed Jul 22, 2016

alinefm reopened this Jul 22, 2016

danielhb pushed a commit that referenced this issue Aug 29, 2016

Issue #300: Redesign Network Configuration

ea19737

Signed-off-by: Samuel Guimarães <[email protected]>

alinefm closed this as completed Sep 21, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Redesign "Network Configuration" UI #300

Redesign "Network Configuration" UI #300

alinefm commented Apr 5, 2016

alinefm commented Apr 8, 2016

alinefm commented Apr 15, 2016

potula-chandra commented Apr 18, 2016

samhenri commented May 25, 2016 •

edited

Loading

potula-chandra commented May 30, 2016

(adding the class .disabled and checking it with javascript) for the

danielhb commented Jul 11, 2016

samhenri commented Jul 11, 2016

danielhb commented Jul 11, 2016

samhenri commented Jul 11, 2016

danielhb commented Jul 11, 2016

alinefm commented Jul 11, 2016

alinefm commented Jul 22, 2016

samhenri commented Aug 5, 2016

samhenri commented Aug 8, 2016 •

edited

Loading

danielhb commented Aug 8, 2016

samhenri commented Aug 8, 2016

danielhb commented Aug 8, 2016

samhenri commented Aug 8, 2016

jay-katta commented Aug 9, 2016 •

edited

Loading

samhenri commented Aug 16, 2016 •

edited

Loading

danielhb commented Aug 18, 2016

potula-chandra commented Aug 19, 2016

samhenri commented Aug 19, 2016

potula-chandra commented Aug 19, 2016 •

edited

Loading

samhenri commented Aug 19, 2016

potula-chandra commented Aug 19, 2016

potula-chandra commented Aug 19, 2016 •

edited

Loading

Redesign "Network Configuration" UI #300

Redesign "Network Configuration" UI #300

Comments

alinefm commented Apr 5, 2016

alinefm commented Apr 8, 2016

alinefm commented Apr 15, 2016

potula-chandra commented Apr 18, 2016

samhenri commented May 25, 2016 • edited Loading

potula-chandra commented May 30, 2016

(adding the class .disabled and checking it with javascript) for the

danielhb commented Jul 11, 2016

samhenri commented Jul 11, 2016

danielhb commented Jul 11, 2016

samhenri commented Jul 11, 2016

danielhb commented Jul 11, 2016

alinefm commented Jul 11, 2016

alinefm commented Jul 22, 2016

samhenri commented Aug 5, 2016

samhenri commented Aug 8, 2016 • edited Loading

danielhb commented Aug 8, 2016

samhenri commented Aug 8, 2016

danielhb commented Aug 8, 2016

samhenri commented Aug 8, 2016

jay-katta commented Aug 9, 2016 • edited Loading

samhenri commented Aug 16, 2016 • edited Loading

danielhb commented Aug 18, 2016

potula-chandra commented Aug 19, 2016

samhenri commented Aug 19, 2016

potula-chandra commented Aug 19, 2016 • edited Loading

samhenri commented Aug 19, 2016

potula-chandra commented Aug 19, 2016

potula-chandra commented Aug 19, 2016 • edited Loading

samhenri commented May 25, 2016 •

edited

Loading

samhenri commented Aug 8, 2016 •

edited

Loading

jay-katta commented Aug 9, 2016 •

edited

Loading

samhenri commented Aug 16, 2016 •

edited

Loading

potula-chandra commented Aug 19, 2016 •

edited

Loading

potula-chandra commented Aug 19, 2016 •

edited

Loading