From ea1973732085e9db7d45da4966d45d75ae85cd65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Samuel=20Guimar=C3=A3es?= Date: Wed, 24 Aug 2016 19:06:19 -0300 Subject: [PATCH] Issue #300: Redesign Network Configuration MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Samuel Guimarães --- ui/css/ginger.css | 68 + ui/css/src/modules/_network.scss | 78 ++ ui/js/host-network-bond.js | 47 +- ui/js/host-network-enable-sriov.js | 14 +- ui/js/host-network-settings.js | 12 +- ui/js/host-network-vlan.js | 48 +- ui/js/host-network.js | 1739 ++++++++++++++------------ ui/pages/i18n.json.tmpl | 16 +- ui/pages/tabs/host-network.html.tmpl | 101 +- 9 files changed, 1254 insertions(+), 869 deletions(-) diff --git a/ui/css/ginger.css b/ui/css/ginger.css index f324b677..d56d59da 100644 --- a/ui/css/ginger.css +++ b/ui/css/ginger.css @@ -1136,6 +1136,74 @@ min-width: 147px; } +#network-configuration-content-area > .row { + min-height: 391px; +} + +#network-configuration-content-area .wok-mask { + z-index: 3; +} + +#network-configuration-content-area .enable-sriov-status { + background: #ddd; + padding: 15px; + margin: 10px 0; +} + +#network-configuration-content-area .enable-sriov-status > div { + background: #fff; +} + +#network-configuration-content-area .enable-sriov-status h3 { + margin: 0; + padding: 10px; +} + +#network-configuration-content-area .enable-sriov-status h3 a { + text-decoration: none; +} + +#network-configuration-content-area .enable-sriov-status h3 .fa { + transition: transform 0.3s ease-in-out; +} + +#network-configuration-content-area .enable-sriov-status h3 a[aria-expanded=true] .fa-chevron-down { + transform: rotate(-90deg); +} + +#network-configuration-content-area .enable-sriov-status .collapse { + margin-top: 5px; + width: 100%; +} + +#network-configuration-content-area .enable-sriov-status textarea { + width: 100%; + border: 0; + padding-left: 10px; + resize: vertical; +} + +#network-configuration-content-area .dataTables_wrapper table td { + vertical-align: middle; +} + +#network-configuration-content-area .dataTables_wrapper .nw-config-align-center { + text-align: center; +} + +#network-configuration-content-area .dataTables_wrapper .nw-interface-status-enabled, +#network-configuration-content-area .dataTables_wrapper .nw-interface-status-disabled { + font-size: 23px; +} + +#network-configuration-content-area .dataTables_wrapper .nw-interface-status-enabled { + color: #a8d46f; +} + +#network-configuration-content-area .dataTables_wrapper .nw-interface-status-disabled { + color: #999; +} + #host-storage-root-container .accordion { margin: 12px 20px 12px 60px; padding-bottom: 18px; diff --git a/ui/css/src/modules/_network.scss b/ui/css/src/modules/_network.scss index 399a8afc..7dda21b0 100644 --- a/ui/css/src/modules/_network.scss +++ b/ui/css/src/modules/_network.scss @@ -310,3 +310,81 @@ } } + +#network-configuration-content-area { + + > .row { + min-height: 391px; + } + + .wok-mask { + z-index: 3; + } + + .enable-sriov-status { + background: $nav-tabs-border-color; + padding: 15px; + margin: 10px 0; + + > div { + background: $table-bg; + } + + h3 { + margin: 0; + padding: 10px; + + a { + text-decoration: none; + } + + .fa { + transition: transform 0.3s ease-in-out; + } + + a[aria-expanded=true] .fa-chevron-down { + transform: rotate(-90deg); + } + + } + + .collapse { + margin-top: 5px; + width: 100%; + } + + textarea { + width: 100%; + border: 0; + padding-left: 10px; + resize: vertical; + } + } + + // Everything related to Datatables must go here + .dataTables_wrapper { + + table td { + vertical-align: middle; + } + + .nw-config-align-center { + text-align: center; + } + + .nw-interface-status-enabled, + .nw-interface-status-disabled { + font-size: 23px; + } + + .nw-interface-status-enabled { + color: $fa-green; + } + + .nw-interface-status-disabled { + color: $gray-light; + } + + } + +} diff --git a/ui/js/host-network-bond.js b/ui/js/host-network-bond.js index 24027455..8fbd07c6 100755 --- a/ui/js/host-network-bond.js +++ b/ui/js/host-network-bond.js @@ -73,12 +73,12 @@ $('#nw-bond-button-cancel').on('click', function() { wok.window.close(); - ginger.refreshInterfaces(); + ginger.listNetworkConfig.refreshNetworkConfigurationDatatable(); }); $('#nw-bond-button-close').on('click', function() { wok.window.close(); - ginger.refreshInterfaces(); + ginger.listNetworkConfig.refreshNetworkConfigurationDatatable(); }); nwGeneralForm.on('submit',function(e){ @@ -87,14 +87,6 @@ }; -ginger.refreshInterfaces = function() { - ginger.getInterfaces(function(result) { - ginger.loadBootgridData("nwConfigGrid", result); - }, function(error) { - ginger.hideBootgridLoading(opts); - }); -}; - var applyOnClick = function() { // on Apply button click @@ -272,10 +264,14 @@ var applyOnClick = function() { getIpv6InfoData(); //Commented for now as getting some issue from backend if (ginger.selectedInterface == null) { ginger.createCfgInterface(data, function(result) { - var message = i18n['GINNET0026M'] + " " + result.BASIC_INFO.DEVICE + " " + i18n['GINNET0020M'] - wok.message.success(message, '#alert-nw-bond-modal-container'); + if(result.BASIC_INFO.DEVICE) { + var message = i18n['GINNET0087M'].replace("%1", '' + result.BASIC_INFO.DEVICE + ''); + }else { + var message = i18n['GINNET0087M'].replace("%1", '' + result.BASIC_INFO.NAME + ''); + } + wok.message.success(message, '#alert-nw-bond-modal-container', true); $(nwApplyButton).prop('disabled', false); - ginger.refreshInterfaces(); + ginger.listNetworkConfig.refreshNetworkConfigurationDatatable(); wok.window.close(); }, function(err) { wok.message.error(err.responseJSON.reason, '#alert-nw-bond-modal-container', true); @@ -283,10 +279,14 @@ var applyOnClick = function() { }); } else { ginger.updateCfgInterface(interfaceDevice, data, function(result) { - var message = i18n['GINNET0027M'] + " " + result.BASIC_INFO.DEVICE + " " + i18n['GINNET0020M'] - wok.message.success(message, '#alert-nw-bond-modal-container'); + if(result.BASIC_INFO.DEVICE) { + var message = i18n['GINNET0089M'].replace("%1", '' + result.BASIC_INFO.DEVICE + ''); + }else { + var message = i18n['GINNET0089M'].replace("%1", '' + result.BASIC_INFO.NAME + ''); + } + wok.message.success(message, '#alert-nw-bond-modal-container', true); $(nwApplyButton).prop('disabled', false); - ginger.refreshInterfaces(); + ginger.listNetworkConfig.refreshNetworkConfigurationDatatable(); wok.window.close(); }, function(err) { wok.message.error(err.responseJSON.reason, '#alert-nw-bond-modal-container', true); @@ -311,6 +311,10 @@ var populateGeneralTab = function(interface) { interfaceDetails["value"] = interfaceList[i].BASIC_INFO.DEVICE; interfaceDetails["text"] = interfaceList[i].BASIC_INFO.DEVICE; memberOptions.push(interfaceDetails); + }else if("BASIC_INFO" in interfaceInfo && "NAME" in (interfaceInfo.BASIC_INFO)) { + interfaceDetails["value"] = interfaceList[i].BASIC_INFO.NAME; + interfaceDetails["text"] = interfaceList[i].BASIC_INFO.NAME; + memberOptions.push(interfaceDetails); } } ginger.bondMemberOption = memberOptions; @@ -342,6 +346,9 @@ var populateGeneralTab = function(interface) { if (interface.BASIC_INFO.DEVICE) { nwBondDeviceTextbox.val(interface.BASIC_INFO.DEVICE); nwBondDeviceTextbox.prop("disabled", true); + }else if (interface.BASIC_INFO.NAME) { + nwBondDeviceTextbox.val(interface.BASIC_INFO.NAME); + nwBondDeviceTextbox.prop("disabled", true); } bondMode.val(interface.BASIC_INFO.BONDINFO.BONDING_OPTS.mode); @@ -470,6 +477,14 @@ var createBondMembersGrid = function(interface) { $('select', selectField).append($("") .attr("value", (interfaceList[i].BASIC_INFO.DEVICE).replace(/"/g, "")) .text((interfaceList[i].BASIC_INFO.DEVICE).replace(/"/g, ""))); + }else if ("BASIC_INFO" in interfacedetails && "NAME" in (interfacedetails.BASIC_INFO)) { if ((interface != null) && + (interfaceList[i].BASIC_INFO.NAME == interface.BASIC_INFO.NAME)) { + continue; + } + $('select', selectField).append($("") + .attr("value", (interfaceList[i].BASIC_INFO.NAME).replace(/"/g, "")) + .text((interfaceList[i].BASIC_INFO.NAME).replace(/"/g, ""))); + } } $('').appendTo($('tr:last', '#nw-bond-member-grid')); diff --git a/ui/js/host-network-enable-sriov.js b/ui/js/host-network-enable-sriov.js index a04559b1..8ecee94d 100644 --- a/ui/js/host-network-enable-sriov.js +++ b/ui/js/host-network-enable-sriov.js @@ -17,7 +17,7 @@ */ ginger.initEnableSriov = function() { - $("#modal-interface-name").text(ginger.selectedInterface['device']); + $("#modal-interface-name").text(ginger.selectedInterface); ginger.enableJustNumbers(); var message = ''; @@ -25,13 +25,13 @@ ginger.initEnableSriov = function() { if (result['status'] == 'finished') { message = 'FINISHED: \n' + result['message']; - $("#action-dropdown-button-nw-configuration-actions").prop("disabled", false); + $("#nw-configuration-action > .btn").prop("disabled", false); } else if (result['status'] == 'failed') { message = 'FAILED: \n' + result['message']; - $("#action-dropdown-button-nw-configuration-actions").prop("disabled", false); + $("#nw-configuration-action > .btn").prop("disabled", false); } else if(result['status'] == 'running') { message += result['message'] + '\n'; - $("#action-dropdown-button-nw-configuration-actions").prop("disabled", true); + $("#nw-configuration-action > .btn").prop("disabled", true); } $('#status-sriov').text(message); @@ -47,13 +47,13 @@ ginger.initEnableSriov = function() { }; $('#enable-sriov-progress-container').show(); wok.window.close(); - ginger.enableNetworkSRIOV(data, ginger.selectedInterface['device'], function(result){ + ginger.enableNetworkSRIOV(data, ginger.selectedInterface, function(result){ setTimeout(function() { reloadProgressArea(result); }, 700); - ginger.initNetworkConfigGridData(); + ginger.listNetworkConfig.refreshNetworkConfigurationDatatable(); }, function(error){ - wok.message.error(error.responseJSON.reason, '#message-nw-container-area', true); + wok.message.error(error.responseJSON.reason, '#message-network-configuration-container-area', true); }, reloadProgressArea); }); diff --git a/ui/js/host-network-settings.js b/ui/js/host-network-settings.js index 59a9be3c..a069e968 100644 --- a/ui/js/host-network-settings.js +++ b/ui/js/host-network-settings.js @@ -72,24 +72,16 @@ ginger.initNwInterfaceSettings = function() { $('#nw-interface-settings-button-cancel').on('click', function() { wok.window.close(); - ginger.refreshInterfaces(); + ginger.listNetworkConfig.refreshNetworkConfigurationDatatable(); }); $('#nw-interface-settings-button-close').on('click', function() { wok.window.close(); - ginger.refreshInterfaces(); + ginger.listNetworkConfig.refreshNetworkConfigurationDatatable(); }); }; -ginger.refreshInterfaces = function() { - ginger.getInterfaces(function(result) { - ginger.loadBootgridData("nwConfigGrid", result); - }, function(error) { - ginger.hideBootgridLoading(opts); - }); -}; - ginger.action_apply_nwsettings = function() { // on Apply button click diff --git a/ui/js/host-network-vlan.js b/ui/js/host-network-vlan.js index 17000248..9509e771 100644 --- a/ui/js/host-network-vlan.js +++ b/ui/js/host-network-vlan.js @@ -79,23 +79,15 @@ ginger.initVLANInterfaceSettings = function() { $('#nw-vlan-button-cancel').on('click', function() { wok.window.close(); - ginger.refreshInterfaces(); + ginger.listNetworkConfig.refreshNetworkConfigurationDatatable(); }); $('#nw-vlan-button-close').on('click', function() { wok.window.close(); - ginger.refreshInterfaces(); + ginger.listNetworkConfig.refreshNetworkConfigurationDatatable(); }); } -ginger.refreshInterfaces = function() { - ginger.getInterfaces(function(result) { - ginger.loadBootgridData("nwConfigGrid", result); - }, function(error) { - ginger.hideBootgridLoading(opts); - }); -}; - var applyOnClick = function() { // on Apply button click @@ -284,10 +276,10 @@ var applyOnClick = function() { if (ginger.selectedInterface == null) { ginger.createCfgInterface(data, function(result) { - var message = i18n['GINNET0026M'] + " " + nwVLANInterfaceTextbox.val() + " " + i18n['GINNET0020M'] - wok.message.success(message, '#alert-nw-vlan-modal-container'); + var message = i18n['GINNET0087M'].replace("%1", '' + nwVLANInterfaceTextbox.val() + ''); + wok.message.success(message, '#alert-nw-vlan-modal-container',true); $(nwApplyButton).prop('disabled', false); - ginger.refreshInterfaces(); + ginger.listNetworkConfig.refreshNetworkConfigurationDatatable(); wok.window.close(); }, function(err) { wok.message.error(err.responseJSON.reason, '#alert-nw-vlan-modal-container', true); @@ -295,10 +287,10 @@ var applyOnClick = function() { }); } else { ginger.updateCfgInterface(interfaceDevice, data, function(result) { - var message = i18n['GINNET0027M'] + " " + nwVLANInterfaceTextbox.val() + " " + i18n['GINNET0020M'] - wok.message.success(message, '#alert-nw-vlan-modal-container'); + var message = i18n['GINNET0089M'].replace("%1", '' + nwVLANInterfaceTextbox.val() + ''); + wok.message.success(message, '#alert-nw-vlan-modal-container',true); $(nwApplyButton).prop('disabled', false); - ginger.refreshInterfaces(); + ginger.listNetworkConfig.refreshNetworkConfigurationDatatable(); wok.window.close(); }, function(err) { wok.message.error(err.responseJSON.reason, '#alert-nw-vlan-modal-container', true); @@ -322,6 +314,14 @@ var populateGeneralTab = function(interface) { parentInterfaceSelect.append($("") .attr("value", (result[i].BASIC_INFO.DEVICE).replace(/"/g, "")) .text((result[i].BASIC_INFO.DEVICE).replace(/"/g, ""))); + }else if (result[i].BASIC_INFO.NAME) { + if ((interface != null) && + (result[i].BASIC_INFO.NAME == interface.BASIC_INFO.NAME)) { + continue; + } + parentInterfaceSelect.append($("") + .attr("value", (result[i].BASIC_INFO.NAME).replace(/"/g, "")) + .text((result[i].BASIC_INFO.NAME).replace(/"/g, ""))); } } @@ -347,8 +347,13 @@ var populateGeneralTab = function(interface) { if (interface == null) { nwTitle.append(i18n['GINNWS0014M']); } else { - nwTitle.append(interface.BASIC_INFO.DEVICE); - nwVLANInterfaceTextbox.val(interface.BASIC_INFO.DEVICE); + if(interface.BASIC_INFO.DEVICE){ + nwTitle.append(interface.BASIC_INFO.DEVICE); + nwVLANInterfaceTextbox.val(interface.BASIC_INFO.DEVICE); + }else { + nwTitle.append(interface.BASIC_INFO.NAME); + nwVLANInterfaceTextbox.val(interface.BASIC_INFO.NAME); + } if (interface.BASIC_INFO.HWADDR) nwHwaddressTextbox.val(interface.BASIC_INFO.HWADDR); @@ -359,8 +364,11 @@ var populateGeneralTab = function(interface) { if (interface.BASIC_INFO.VLANINFO.VLAN_ID) nwVLANIDTextbox.val(interface.BASIC_INFO.VLANINFO.VLAN_ID); - if (interface.BASIC_INFO.DEVICE) - nwVLANInterfaceTextbox.val(interface.BASIC_INFO.DEVICE) + if (interface.BASIC_INFO.DEVICE){ + nwVLANInterfaceTextbox.val(interface.BASIC_INFO.DEVICE); + }else if (interface.BASIC_INFO.NAME){ + nwVLANInterfaceTextbox.val(interface.BASIC_INFO.NAME); + } if (interface.BASIC_INFO.ONBOOT == "\"yes\"" || interface.BASIC_INFO.ONBOOT == "yes") { onBootCheckbox.prop('checked', true); diff --git a/ui/js/host-network.js b/ui/js/host-network.js index 1c7fc222..b79a6b19 100644 --- a/ui/js/host-network.js +++ b/ui/js/host-network.js @@ -21,30 +21,30 @@ ginger.selectedNWInterface = null; ginger.initOvsBridges = function() { - if(ginger.ovsbridges !== undefined && !ginger.ovsbridges){ - $('#ovsbridge-container').remove(); - }else { - $('#ovsbridge-container').removeClass('hidden'); - var ovsAccordion = wok.substitute($('#ovsBridgesPanel').html()); - $('#ovsbridge-container').append(ovsAccordion); - ginger.listOvsBridges(); - ginger.initOvsClickHandler(); - } + if (ginger.ovsbridges !== undefined && !ginger.ovsbridges) { + $('#ovsbridge-container').remove(); + } else { + $('#ovsbridge-container').removeClass('hidden'); + var ovsAccordion = wok.substitute($('#ovsBridgesPanel').html()); + $('#ovsbridge-container').append(ovsAccordion); + ginger.listOvsBridges(); + ginger.initOvsClickHandler(); + } } ginger.refreshOvsBridges = function() { - if($("#ovsbridgeList .collapse.in").length > 0) { - $("#ovsbridgeList .collapse.in").one('hidden.bs.collapse',function(e){ - e.stopPropagation(); - ginger.refreshOvsBridgesUi(); - }); - $("#ovsbridgeList .collapse.in").collapse("hide"); - }else { - ginger.refreshOvsBridgesUi(); - } + if ($("#ovsbridgeList .collapse.in").length > 0) { + $("#ovsbridgeList .collapse.in").one('hidden.bs.collapse', function(e) { + e.stopPropagation(); + ginger.refreshOvsBridgesUi(); + }); + $("#ovsbridgeList .collapse.in").collapse("hide"); + } else { + ginger.refreshOvsBridgesUi(); + } } -ginger.refreshOvsBridgesUi = function(){ +ginger.refreshOvsBridgesUi = function() { $('#ovsbridgeList').height($('#ovsbridgeList').innerHeight()); $('#ovsbridge-content-area .wok-mask').removeClass('hidden'); $('#ovsbridgeList').empty(); @@ -53,746 +53,833 @@ ginger.refreshOvsBridgesUi = function(){ ginger.listOvsBridges = function() { ginger.getOvsBridges(function(result) { - if (result && result.length) { - result.sort(function(a, b) { - return a.name.localeCompare( b.name ); - }); - $.each(result, function(i,value){ - var id = i + 1 + '-' + value.name.toLowerCase(); - var collapse_target = 'bridge-'+id+'-interfaces'; - var name = value.name; - var bonds = []; - var interfaces = []; - var interfaceCount = ''; - var bondCount = ''; - var interfacePlus = ''; - var bondPlus = ''; - var empty_bond_stat = $(); - var empty_iface_stat = $(); - var emptyPortHtml = ''+i18n['GINNET0056M']+''; - $('#bridge-'+id+' > .column-bonds, #bridge-'+id+' > .column-interfaces').empty().append(emptyPortHtml); - if(Object.keys(value.ports).length){ - $.each(value.ports, function(j,interface){ - if(interface.type === 'bond') { - bonds.push(interface.name); - $.each(interface.interfaces, function(k,bondiface){ - var state = (bondiface.admin_state === 'up' && bondiface.link_state === 'up' ) ? i18n['GINNET0040M'] : i18n['GINNET0041M']; - var stateClass = (bondiface.admin_state === 'up' && bondiface.link_state === 'up' ) ? 'up' : 'down'; - var bondIfaceStatItem = $.parseHTML(wok.substitute($("#interfaceBodyTmpl").html(), { - id: bondiface.name, - name: bondiface.name + ' ('+interface.name+')', - state: state, - stateClass: stateClass, - rxBytes: bondiface.statistics.rx_bytes, - txBytes: bondiface.statistics.tx_bytes, - rxPackets: bondiface.statistics.rx_packets, - txPackets: bondiface.statistics.tx_packets, - rxErr: bondiface.statistics.rx_errors, - txErr: bondiface.statistics.tx_errors - })); - empty_bond_stat = empty_bond_stat.add(bondIfaceStatItem); - }); - }else if(interface.type === 'interface'){ - interfaces.push(interface.name); - var state = (interface.admin_state === 'up' && interface.link_state === 'up' ) ? i18n['GINNET0040M'] : i18n['GINNET0041M']; - var stateClass = (interface.admin_state === 'up' && interface.link_state === 'up' ) ? 'up' : 'down'; - var IfaceStatItem = $.parseHTML(wok.substitute($("#interfaceBodyTmpl").html(), { - id: interface.name, - name: interface.name, - state: state, - stateClass: stateClass, - rxBytes: interface.statistics.rx_bytes, - txBytes: interface.statistics.tx_bytes, - rxPackets: interface.statistics.rx_packets, - txPackets: interface.statistics.tx_packets, - rxErr: interface.statistics.rx_errors, - txErr: interface.statistics.tx_errors - })); - empty_iface_stat = empty_iface_stat.add(IfaceStatItem); - } - }); - } - if(interfaces.length){ - if(interfaces.length > 3){ - interfacePlus = i18n['GINNET0061M'].replace("%1", (interfaces.length - 3)); - interfaces = interfaces.slice(0,3); - interfaces[2] = interfaces[2]+'...'; - } - interfaceCount = interfaces.join(', '); - }else { - interfaceCount = i18n['GINNET0056M']; - interfacePlus = i18n['GINNET0056M']; - } - if(bonds.length){ - if(bonds.length > 3){ - bondPlus = i18n['GINNET0060M'].replace("%1", (bonds.length - 3)); - bonds = bonds.slice(0,3); - bonds[2] = bonds[2]+'...'; - } - bondCount = bonds.join(', '); - }else { - bondCount = i18n['GINNET0056M']; - bondPlus = i18n['GINNET0056M']; - } - var ovsbridgeItem = $.parseHTML(wok.substitute($("#ovsbridgeTmpl").html(), { - id: id, - name: name, - bonds: bondCount, - interfaces: interfaceCount, - bondPlus: bondPlus, - interfacePlus: interfacePlus - })); - if(empty_bond_stat.length){ - $('.bridge-interfaces-body', ovsbridgeItem).append(empty_bond_stat); - } - if(empty_iface_stat.length){ - $('.bridge-interfaces-body', ovsbridgeItem).append(empty_iface_stat); - } - if(empty_iface_stat.length || empty_bond_stat.length){ - var stat_handle = $(''); - $('.column-statistics', ovsbridgeItem).append(stat_handle); - $('.bridge-interface', ovsbridgeItem).dataGrid({enableSorting: false}); - }else { - $('.column-statistics', ovsbridgeItem).append('--'); + if (result && result.length) { + result.sort(function(a, b) { + return a.name.localeCompare(b.name); + }); + $.each(result, function(i, value) { + var id = i + 1 + '-' + value.name.toLowerCase(); + var collapse_target = 'bridge-' + id + '-interfaces'; + var name = value.name; + var bonds = []; + var interfaces = []; + var interfaceCount = ''; + var bondCount = ''; + var interfacePlus = ''; + var bondPlus = ''; + var empty_bond_stat = $(); + var empty_iface_stat = $(); + var emptyPortHtml = '' + i18n['GINNET0056M'] + ''; + $('#bridge-' + id + ' > .column-bonds, #bridge-' + id + ' > .column-interfaces').empty().append(emptyPortHtml); + if (Object.keys(value.ports).length) { + $.each(value.ports, function(j, interface) { + if (interface.type === 'bond') { + bonds.push(interface.name); + $.each(interface.interfaces, function(k, bondiface) { + var state = (bondiface.admin_state === 'up' && bondiface.link_state === 'up') ? i18n['GINNET0040M'] : i18n['GINNET0041M']; + var stateClass = (bondiface.admin_state === 'up' && bondiface.link_state === 'up') ? 'up' : 'down'; + var bondIfaceStatItem = $.parseHTML(wok.substitute($("#interfaceBodyTmpl").html(), { + id: bondiface.name, + name: bondiface.name + ' (' + interface.name + ')', + state: state, + stateClass: stateClass, + rxBytes: bondiface.statistics.rx_bytes, + txBytes: bondiface.statistics.tx_bytes, + rxPackets: bondiface.statistics.rx_packets, + txPackets: bondiface.statistics.tx_packets, + rxErr: bondiface.statistics.rx_errors, + txErr: bondiface.statistics.tx_errors + })); + empty_bond_stat = empty_bond_stat.add(bondIfaceStatItem); + }); + } else if (interface.type === 'interface') { + interfaces.push(interface.name); + var state = (interface.admin_state === 'up' && interface.link_state === 'up') ? i18n['GINNET0040M'] : i18n['GINNET0041M']; + var stateClass = (interface.admin_state === 'up' && interface.link_state === 'up') ? 'up' : 'down'; + var IfaceStatItem = $.parseHTML(wok.substitute($("#interfaceBodyTmpl").html(), { + id: interface.name, + name: interface.name, + state: state, + stateClass: stateClass, + rxBytes: interface.statistics.rx_bytes, + txBytes: interface.statistics.tx_bytes, + rxPackets: interface.statistics.rx_packets, + txPackets: interface.statistics.tx_packets, + rxErr: interface.statistics.rx_errors, + txErr: interface.statistics.tx_errors + })); + empty_iface_stat = empty_iface_stat.add(IfaceStatItem); + } + }); + } + if (interfaces.length) { + if (interfaces.length > 3) { + interfacePlus = i18n['GINNET0061M'].replace("%1", (interfaces.length - 3)); + interfaces = interfaces.slice(0, 3); + interfaces[2] = interfaces[2] + '...'; + } + interfaceCount = interfaces.join(', '); + } else { + interfaceCount = i18n['GINNET0056M']; + interfacePlus = i18n['GINNET0056M']; + } + if (bonds.length) { + if (bonds.length > 3) { + bondPlus = i18n['GINNET0060M'].replace("%1", (bonds.length - 3)); + bonds = bonds.slice(0, 3); + bonds[2] = bonds[2] + '...'; + } + bondCount = bonds.join(', '); + } else { + bondCount = i18n['GINNET0056M']; + bondPlus = i18n['GINNET0056M']; + } + var ovsbridgeItem = $.parseHTML(wok.substitute($("#ovsbridgeTmpl").html(), { + id: id, + name: name, + bonds: bondCount, + interfaces: interfaceCount, + bondPlus: bondPlus, + interfacePlus: interfacePlus + })); + if (empty_bond_stat.length) { + $('.bridge-interfaces-body', ovsbridgeItem).append(empty_bond_stat); + } + if (empty_iface_stat.length) { + $('.bridge-interfaces-body', ovsbridgeItem).append(empty_iface_stat); + } + if (empty_iface_stat.length || empty_bond_stat.length) { + var stat_handle = $(''); + $('.column-statistics', ovsbridgeItem).append(stat_handle); + $('.bridge-interface', ovsbridgeItem).dataGrid({ enableSorting: false }); + } else { + $('.column-statistics', ovsbridgeItem).append('--'); + } + $('#ovsbridgeList').height('auto').append(ovsbridgeItem); + }); + $('#add_ovsbridge_button').prop('disabled', false); + $('#ovs_search_input').prop('disabled', false); + if ($('#ovsbridgeGrid').hasClass('wok-datagrid')) { + $('#ovsbridgeGrid').dataGrid('destroy'); } - $('#ovsbridgeList').height('auto').append(ovsbridgeItem); - }); - $('#add_ovsbridge_button').prop('disabled',false); - $('#ovs_search_input').prop('disabled',false); - if($('#ovsbridgeGrid').hasClass('wok-datagrid')) { - $('#ovsbridgeGrid').dataGrid('destroy'); - } - $('#ovsbridgeGrid').dataGrid({enableSorting: false}); - $('#ovsbridge-content-area .wok-mask').addClass('hidden'); - $('#ovsbridgeGrid').removeClass('hidden'); - $("#ovsbridgeList > .wok-datagrid-row> span > [data-toggle=collapse]").click(function(e){ - e.preventDefault(); - e.stopPropagation(); - $("#ovsbridgeList > .wok-datagrid-row > div > .collapse.in").collapse("hide"); - $($(this).attr("data-target")).collapse("show"); - }); - var ovsBridgeOptions = { - valueNames: ['name-filter', 'bond-filter', 'interface-filter'] - }; - var ovsBridgeFilterList = new List('ovsbridge-content-area', ovsBridgeOptions); + $('#ovsbridgeGrid').dataGrid({ enableSorting: false }); + $('#ovsbridge-content-area .wok-mask').addClass('hidden'); + $('#ovsbridgeGrid').removeClass('hidden'); + $("#ovsbridgeList > .wok-datagrid-row> span > [data-toggle=collapse]").click(function(e) { + e.preventDefault(); + e.stopPropagation(); + $("#ovsbridgeList > .wok-datagrid-row > div > .collapse.in").collapse("hide"); + $($(this).attr("data-target")).collapse("show"); + }); + var ovsBridgeOptions = { + valueNames: ['name-filter', 'bond-filter', 'interface-filter'] + }; + var ovsBridgeFilterList = new List('ovsbridge-content-area', ovsBridgeOptions); - ovsBridgeFilterList.sort('name-filter', { - order: "asc" - }); + ovsBridgeFilterList.sort('name-filter', { + order: "asc" + }); - }else { - var emptyIList = '
'+i18n['GINNET0056M']+''; - $('#ovsbridgeList').append(emptyIList); - if($('#ovsbridgeGrid').hasClass('wok-datagrid')) { - $('#ovsbridgeGrid').dataGrid('destroy'); + } else { + var emptyIList = '
' + i18n['GINNET0056M'] + ''; + $('#ovsbridgeList').append(emptyIList); + if ($('#ovsbridgeGrid').hasClass('wok-datagrid')) { + $('#ovsbridgeGrid').dataGrid('destroy'); + } + $('#ovsbridgeGrid').dataGrid({ enableSorting: false }); + $('#ovsbridgeGrid').removeClass('hidden'); + $('#ovsbridge-content-area .wok-mask').addClass('hidden'); } - $('#ovsbridgeGrid').dataGrid({enableSorting: false}); - $('#ovsbridgeGrid').removeClass('hidden'); - $('#ovsbridge-content-area .wok-mask').addClass('hidden'); - } }, function(err) { - $('#add_ovsbridge_button').prop('disabled',true); - $('#ovs_search_input').prop('disabled',true); + $('#add_ovsbridge_button').prop('disabled', true); + $('#ovs_search_input').prop('disabled', true); $('#ovsbridge-content-area .wok-mask').addClass('hidden'); - wok.message.error(err.responseJSON.reason,'#ovs-alert-container'); + wok.message.error(err.responseJSON.reason, '#ovs-alert-container'); }); } ginger.initOvsClickHandler = function() { - $('#add_ovsbridge_button').on('click',function(e){ - e.preventDefault(); - e.stopPropagation(); - wok.window.open('plugins/ginger/host-network-ovs-add.html'); - }); - $('#ovsbridgeGrid').on('click','.edit-bridge',function(e){ - e.preventDefault(); - e.stopPropagation(); - ginger.selectedBridge = $(this).data('name'); - wok.window.open('plugins/ginger/host-network-ovs-edit.html'); - }); - $('#ovsbridgeGrid').on('click','.remove-bridge',function(e){ - e.preventDefault(); - e.stopPropagation(); - ginger.selectedBridge = $(this).data('name'); - var settings = { - title: i18n['GINNET0048M'], - content: i18n['GINNET0049M'].replace("%1", ''+ginger.selectedBridge+''), - confirm: i18n['GINNET0045M'], - cancel: i18n['GINNET0046M'] - }; - wok.confirm(settings, function() { - ginger.delOvsBridge(ginger.selectedBridge, function() { - var bridgeItem = $('div.wok-datagrid-row[data-name="'+ginger.selectedBridge+'"'); - wok.message.success(i18n['GINNET0050M'].replace("%1", ''+ginger.selectedBridge+''),'#ovs-alert-container'); - bridgeItem.remove(); - $('body').animate({ scrollTop: 0 }, 1000); - }, function(err) { - wok.message.error(err.responseJSON.reason,'#ovs-alert-container'); - $('body').animate({ scrollTop: 0 }, 1000); - }); - }, function() {}); - }); + $('#add_ovsbridge_button').on('click', function(e) { + e.preventDefault(); + e.stopPropagation(); + wok.window.open('plugins/ginger/host-network-ovs-add.html'); + }); + $('#ovsbridgeGrid').on('click', '.edit-bridge', function(e) { + e.preventDefault(); + e.stopPropagation(); + ginger.selectedBridge = $(this).data('name'); + wok.window.open('plugins/ginger/host-network-ovs-edit.html'); + }); + $('#ovsbridgeGrid').on('click', '.remove-bridge', function(e) { + e.preventDefault(); + e.stopPropagation(); + ginger.selectedBridge = $(this).data('name'); + var settings = { + title: i18n['GINNET0048M'], + content: i18n['GINNET0049M'].replace("%1", '' + ginger.selectedBridge + ''), + confirm: i18n['GINNET0045M'], + cancel: i18n['GINNET0046M'] + }; + wok.confirm(settings, function() { + ginger.delOvsBridge(ginger.selectedBridge, function() { + var bridgeItem = $('div.wok-datagrid-row[data-name="' + ginger.selectedBridge + '"'); + wok.message.success(i18n['GINNET0050M'].replace("%1", '' + ginger.selectedBridge + ''), '#ovs-alert-container'); + bridgeItem.remove(); + $('body').animate({ scrollTop: 0 }, 1000); + }, function(err) { + wok.message.error(err.responseJSON.reason, '#ovs-alert-container'); + $('body').animate({ scrollTop: 0 }, 1000); + }); + }, function() {}); + }); } -ginger.addOvsBridgeModal = function(){ - $('#addButton').prop('disabled',true); - $('input#bridge[name="name"]').on('keyup', function(){ - if($(this).val().length !=0) { - $('#addButton').prop('disabled', false); - } else{ - $('#addButton').prop('disabled',true); - } - }); - $('#addButton').on('click',function(){ - $('form[name="ovsbridgeadd"]').submit(); - }); - $('form[name="ovsbridgeadd"]').on('submit',function(e){ - e.preventDefault(); - var name = $("#bridge").val(); - var data = {}; - data = { - name: name - }; - ginger.addOvsBridge(data, function() { - $('form[name="ovsbridgeadd"] input').prop('disabled', true); - $('#addButton').prop('disabled',true); - ginger.refreshOvsBridges(); - wok.window.close(); - $('body').animate({ scrollTop: 0 }, 1000); - }, function(err) { - wok.message.error(err.responseJSON.reason, '#alert-modal-container'); - $('form[name="ovsbridgeadd"] input').prop('disabled', false); - $('#addButton').prop('disabled',false); - $("#bridge").focus(); - }); - }); +ginger.addOvsBridgeModal = function() { + $('#addButton').prop('disabled', true); + $('input#bridge[name="name"]').on('keyup', function() { + if ($(this).val().length != 0) { + $('#addButton').prop('disabled', false); + } else { + $('#addButton').prop('disabled', true); + } + }); + $('#addButton').on('click', function() { + $('form[name="ovsbridgeadd"]').submit(); + }); + $('form[name="ovsbridgeadd"]').on('submit', function(e) { + e.preventDefault(); + var name = $("#bridge").val(); + var data = {}; + data = { + name: name + }; + ginger.addOvsBridge(data, function() { + $('form[name="ovsbridgeadd"] input').prop('disabled', true); + $('#addButton').prop('disabled', true); + ginger.refreshOvsBridges(); + wok.window.close(); + $('body').animate({ scrollTop: 0 }, 1000); + }, function(err) { + wok.message.error(err.responseJSON.reason, '#alert-modal-container'); + $('form[name="ovsbridgeadd"] input').prop('disabled', false); + $('#addButton').prop('disabled', false); + $("#bridge").focus(); + }); + }); } ginger.initNetworkConfig = function() { - ginger.opts_nw_if = {}; - ginger.opts_nw_if['id'] = 'nw-configuration'; - ginger.opts_nw_if['gridId'] = "nwConfigGrid"; - ginger.opts_nw_if['identifier'] = "device"; - ginger.opts_nw_if['loadingMessage'] = i18n['GINNET0025M']; - - ginger.listNetworkConfig(); + // Redesigned Network Configuration table + //ginger.renderNetworkConfig(); + ginger.listNetworkConfig = ginger.renderNetworkConfig(); } -ginger.loadBootgridNWActions = function() { - - var addActionsId = "nw-configuration-add"; - var tabActionsId = "nw-configuration-actions"; - // Add actions for Network Configuration - var addButton = [{ - id: 'nw-add-bond-button', - class: 'fa fa-plus-circle', - label: i18n['GINNET0006M'], - onClick: function(event) { - ginger.selectedInterface = null; - wok.window.open('plugins/ginger/host-network-bond.html'); - } - }, { - id: 'nw-add-vlan-button', - class: 'fa fa-plus-circle', - label: i18n['GINNET0007M'], - onClick: function(event) { - ginger.selectedInterface = null; - wok.window.open('plugins/ginger/host-network-vlan.html'); - } - }]; - - // Actions for Network Configuration - var actionButton = [{ - id: 'nw-up-button', - class: 'fa fa-power-off', - label: i18n['GINNET0009M'], - onClick: function(event) { - var selectedIf = ginger.getSelectedRowsData(ginger.opts_nw_if); - if ((selectedIf && selectedIf.length == 1) && (selectedIf[0]["status"] == "down")) { - ginger.showBootgridLoading(ginger.opts_nw_if); - ginger.enableInterface(selectedIf[0]["device"], "up", function(result) { - var message = i18n['GINNET0016M'] + " " + selectedIf[0]["device"] + " " + i18n['GINNET0020M']; - wok.message.success(message, '#message-nw-container-area'); - ginger.getInterfaces(function(result) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - ginger.loadBootgridData(ginger.opts_nw_if['gridId'], result); - }, function(error) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - }); - }, function(error) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - wok.message.error(error.responseJSON.reason, '#message-nw-container-area', true); +ginger.renderNetworkConfig = function() { + var networkConfigTable; + var nwConfigDataSet = new Array(); + var rows_indexes = new Array(); + + var updateDataTableSelectAllCtrl = function(table) { + updateDataTableSelectAllCtrl = function() {}; + var $table = networkConfigTable.table().node(); + var $chkbox_all = $('tbody input[type="checkbox"]', $table); + var $chkbox_checked = $('tbody input[type="checkbox"]:checked', $table); + var chkbox_select_all = $('thead input[name="select_all"]', $table).get(0); + + // If none of the checkboxes are checked + if ($chkbox_checked.length === 0) { + chkbox_select_all.checked = false; + if ('indeterminate' in chkbox_select_all) { + chkbox_select_all.indeterminate = false; + } + + // If all of the checkboxes are checked + } else if ($chkbox_checked.length === $chkbox_all.length) { + chkbox_select_all.checked = true; + if ('indeterminate' in chkbox_select_all) { + chkbox_select_all.indeterminate = false; + } + + // If some of the checkboxes are checked + } else { + chkbox_select_all.checked = true; + if ('indeterminate' in chkbox_select_all) { + chkbox_select_all.indeterminate = true; + } + } + }; + + var updateButtonStatus = function() { + if (rows_indexes.length && rows_indexes.length === 1) { + ginger.nwConfiguration.enableActions(); + var networkStatus = networkConfigTable.row(rows_indexes[0]).data()[1]; + var networkType = networkConfigTable.row(rows_indexes[0]).data()[3]; + var networkNicType = networkConfigTable.row(rows_indexes[0]).data()[4]; + var networkModule = networkConfigTable.row(rows_indexes[0]).data()[7]; + // 1 - Enable settings button + ginger.nwConfiguration.enableSettings(); + if (networkStatus === 'up' || networkStatus === 'unknown') { + // 2 - Disable up button, enable down & restart + ginger.nwConfiguration.disableUp(); + ginger.nwConfiguration.enableDown(); + ginger.nwConfiguration.enableRestart(); + } else { + // 2 - Disable down button, enable down & restart + ginger.nwConfiguration.enableUp(); + ginger.nwConfiguration.disableDown(); + ginger.nwConfiguration.disableRestart(); + } + if ((networkModule !== 'mlx5_core' && networkModule === 'mlx5-core') || networkNicType === 'virtual') { + // 3 - Hide and disable SR-IOV + ginger.nwConfiguration.showSrIov(); + } else { + ginger.nwConfiguration.hideSrIov(); + } + if (networkType.toLowerCase() === 'nic') { + // 4 - Disable delete button + ginger.nwConfiguration.disableDelete(); + } else { + ginger.nwConfiguration.enableDelete(); + } + } else if (rows_indexes.length && rows_indexes.length > 1) { + var networkType = 0; + ginger.nwConfiguration.enableActions(); + // 1 - Disable settings button; + ginger.nwConfiguration.disableSettings(); + ginger.nwConfiguration.disableSrIov(); + $.each(rows_indexes, function(key, value) { + if (networkConfigTable.row(rows_indexes[key]).data()[3] == "nic") { + networkType = 1; + } + if (networkConfigTable.row(rows_indexes[key]).data()[1] == "up" || networkConfigTable.row(rows_indexes[key]).data()[1] == "unknown") { + // 2 - Disable up button, enable down & restart + ginger.nwConfiguration.disableUp(); + ginger.nwConfiguration.enableDown(); + ginger.nwConfiguration.enableRestart(); + } else if (networkConfigTable.row(rows_indexes[key]).data()[1] == "down") { + // 2 - Disable down button, enable down & restart + ginger.nwConfiguration.enableUp(); + ginger.nwConfiguration.disableDown(); + ginger.nwConfiguration.disableRestart(); + + } + }); + if (networkType === 1) { + ginger.nwConfiguration.disableDelete(); + } + } else { + ginger.nwConfiguration.disableActions(); + } + }; + + var loadNetworkConfigDatatable = function(nwConfigDataSet) { + networkConfigTable = $('#network-configuration').DataTable({ + "processing": true, + "data": nwConfigDataSet, + "order": [], + "dom": '<"row"<"col-sm-12 filter"<"pull-left buttons"<"#network-configuration-actions.row.grid-control">><"pull-right"f>>><"row"<"col-sm-12"t>><"row datatable-footer"<"col-sm-6 pages"p><"col-sm-6 info"i>>', + "scrollY": "269px", + "columnDefs": [{ + "targets": 0, + "searchable": false, + "orderable": false, + "width": "2%", + "className": "nw-config-align-center", + "render": function(data, type, full, meta) { + return ''; + } + }, { + "targets": 1, + "searchable": false, + "orderable": false, + "width": "4%", + "className": "nw-config-align-center", + "render": function(data, type, full, meta) { + if (data === 'up') { + return ''; + } else { + return ''; + } + } + }, { + "targets": 2, + "width": "10%" + }, { + "targets": 3, + "width": "7%" + }, { + "targets": 4, + "width": "7%" + }, { + "targets": 5, + 'type': 'ip-address', + "className": "tabular-data", + "width": "23%" + }, { + "targets": 6, + "searchable": true, + "orderable": true, + "width": "13%", + "render": function(data, type, full, meta) { + if (data === true) { + return i18n['GINNET0077M']; + } else { + return i18n['GINNET0078M']; + } + } + }, { + "targets": 7, + "width": "8%" + }, { + "targets": 8, + "className": "tabular-data", + "width": "25%" + }], + "initComplete": function(settings, json) { + wok.initCompleteDataTableCallback(settings); + $('#network-configuration-content-area > .wok-mask').addClass('hidden'); + } }); - } else if (selectedIf && selectedIf.length > 1) { - $.each(selectedIf, function(key, value) { - if (value.status == "down") { - ginger.showBootgridLoading(ginger.opts_nw_if); - ginger.enableInterface(value.device, "up", function(result) { - var message = i18n['GINNET0016M'] + " " + value.device + " " + i18n['GINNET0020M']; - wok.message.success(message, '#message-nw-container-area'); - ginger.getInterfaces(function(result) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - ginger.loadBootgridData(ginger.opts_nw_if['gridId'], result); - }, function(error) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - }); - }, function(error) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - var message = i18n['GINNET0016M'] + " " + value.device + " " + i18n['GINNET0021M']; - wok.message.error(message + " " + error.responseJSON.reason, '#message-nw-container-area', true); - }); - } - }); - } else { - var settings = { - content: i18n["GINNET0022M"], - confirm: i18n["GINNET0015M"] - }; - wok.confirm(settings, function() {}); - } - } - }, { - id: 'nw-down-button', - class: 'fa fa-ban', - label: i18n['GINNET0010M'], - onClick: function(event) { - var selectedIf = ginger.getSelectedRowsData(ginger.opts_nw_if); - if ((selectedIf && selectedIf.length == 1) && - ((selectedIf[0]["status"] == "up") || (selectedIf[0]["status"] == "unknown"))) { - ginger.showBootgridLoading(ginger.opts_nw_if); - ginger.enableInterface(selectedIf[0]["device"], "down", function(result) { - var message = i18n['GINNET0017M'] + " " + selectedIf[0]["device"] + " " + i18n['GINNET0020M']; - wok.message.success(message, '#message-nw-container-area'); - ginger.getInterfaces(function(result) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - ginger.loadBootgridData(ginger.opts_nw_if['gridId'], result); - }, function(error) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - }); - }, function(error) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - var message = i18n['GINNET0017M'] + " " + selectedIf[0]["device"] + " " + i18n['GINNET0021M']; - wok.message.error(message + " " + error.responseJSON.reason, '#message-nw-container-area', true); + //$(globalNetworkConfigTable.column('1').header()).wrapInner(''); + $('input[name="select_all"]', networkConfigTable.table().container()).prop('checked', false); + var buttons = $.parseHTML(wok.substitute($("#networkConfigButtonsTmpl").html(), {})); + $('#network-configuration-actions').append(buttons); + ginger.nwConfiguration.enableRefresh(); + ginger.nwConfiguration.toggleAdd(); + //tableAdd(); + + // Handle click on checkbox + $('#network-configuration tbody').on('click', 'input[type="checkbox"]', function(e) { + var $row = $(this).closest('tr'); + + // Get row ID + var rowId = networkConfigTable.row($row).index(); + + // Determine whether row ID is in the list of selected row IDs + var index = $.inArray(rowId, rows_indexes); + + // If checkbox is checked and row ID is not in list of selected row IDs + if (this.checked && index === -1) { + rows_indexes.push(rowId); + + // Otherwise, if checkbox is not checked and row ID is in list of selected row IDs + } else if (!this.checked && index !== -1) { + rows_indexes.splice(index, 1); + } + + if (this.checked) { + $row.addClass('active'); + } else { + $row.removeClass('active'); + } + + // Update state of "Select all" control + updateDataTableSelectAllCtrl(networkConfigTable); + updateButtonStatus(); + + // Prevent click event from propagating to parent + e.stopPropagation(); }); - } else if (selectedIf && selectedIf.length > 1) { - $.each(selectedIf, function(key, value) { - if ((value.status == "up") || (value.status == "unknown")) { - ginger.showBootgridLoading(ginger.opts_nw_if); - ginger.enableInterface(value.device, "down", function(result) { - var message = i18n['GINNET0017M'] + " " + value.device + " " + i18n['GINNET0020M']; - wok.message.success(message, '#message-nw-container-area'); - ginger.getInterfaces(function(result) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - ginger.loadBootgridData(ginger.opts_nw_if['gridId'], result); - }, function(error) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - }); - }, function(error) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - var message = i18n['GINNET0017M'] + " " + value.device + " " + i18n['GINNET0021M']; - wok.message.error(message + " " + error.responseJSON.reason, '#message-nw-container-area', true); - }); - } - }); - } else { - var settings = { - content: i18n["GINNET0022M"], - confirm: i18n["GINNET0015M"] - }; - wok.confirm(settings, function() {}); - } - } - }, { - id: 'nw-restart-button', - class: 'fa fa-undo', - label: i18n['GINNET0011M'], - onClick: function(event) { - var selectedIf = ginger.getSelectedRowsData(ginger.opts_nw_if); - if ((selectedIf && selectedIf.length == 1) && - ((selectedIf[0]["status"] == "up") || (selectedIf[0]["status"] == "unknown"))) { - ginger.showBootgridLoading(ginger.opts_nw_if); - // First Bring down the interface - ginger.enableInterface(selectedIf[0]["device"], "down", function(result) { - // Second Bring the interface up back again - ginger.enableInterface(selectedIf[0]["device"], "up", function(result) { - var message = i18n['GINNET0018M'] + " " + selectedIf[0]["device"] + " " + i18n['GINNET0020M']; - wok.message.success(message, '#message-nw-container-area'); - ginger.getInterfaces(function(result) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - ginger.loadBootgridData(ginger.opts_nw_if['gridId'], result); - }, function(error) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - }); - }, function(error) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - var message = i18n['GINNET0018M'] + " " + selectedIf[0]["device"] + " " + i18n['GINNET0021M']; - wok.message.error(message + " " + error.responseJSON.reason, '#message-nw-container-area', true); - }); - }, function(error) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - var message = "Failed to brought down the interface " + selectedIf[0]["device"]; - wok.message.error(message + " " + error.responseJSON.reason, '#message-nw-container-area', true); + + // Handle click on table cells with checkboxes + $('#network-configuration').on('click', 'tbody td, thead th:first-child', function(e) { + $(this).parent().find('input[type="checkbox"]').trigger('click'); + }); + + // Handle click on "Select all" control + $('input[name="select_all"]', networkConfigTable.table().container()).on('click', function(e) { + if (this.checked) { + $('tbody input[type="checkbox"]:not(:checked)', networkConfigTable.table().container()).trigger('click'); + } else { + $('tbody input[type="checkbox"]:checked', networkConfigTable.table().container()).trigger('click'); + } + + // Prevent click event from propagating to parent + e.stopPropagation(); }); - } else if (selectedIf && selectedIf.length == 1 && (selectedIf[0]["status"] == "down")) { - ginger.showBootgridLoading(ginger.opts_nw_if); - // Assuming interface is down already and just needs to brought up - ginger.enableInterface(selectedIf[0]["device"], "up", function(result) { - var message = i18n['GINNET0018M'] + " " + selectedIf[0]["device"] + " " + i18n['GINNET0020M']; - wok.message.success(message, '#message-nw-container-area'); - ginger.getInterfaces(function(result) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - ginger.loadBootgridData(ginger.opts_nw_if['gridId'], result); - }, function(error) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - }); + + // Handle table draw event + networkConfigTable.on('draw', function() { + // Update state of "Select all" control + updateDataTableSelectAllCtrl(networkConfigTable); + }); + + }; + + var getNetworkConfiguration = function(callback) { + ginger.getInterfaces(function(result) { + nwConfigDataSet.length = 0; + for (var i = 0; i < result.length; i++) { + var tempArr = []; + tempArr.push(""); + tempArr.push(result[i].status); + tempArr.push(result[i].device); + tempArr.push(result[i].type); + tempArr.push(result[i].nic_type); + tempArr.push(result[i].ipaddr); + tempArr.push(result[i].rdma_enabled); + tempArr.push(result[i].module); + tempArr.push(result[i].macaddr); + nwConfigDataSet.push(tempArr); + } + if (callback !== 'refresh') { + loadNetworkConfigDatatable(nwConfigDataSet); + } }, function(error) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - var message = i18n['GINNET0018M'] + " " + selectedIf[0]["device"] + " " + i18n['GINNET0021M']; - wok.message.error(message + " " + error.responseJSON.reason, '#message-nw-container-area', true); + errmsg = i18n['GINNET0035E'] + ' ' + error.responseJSON.reason; + wok.message.error(errmsg, '#message-network-configuration-container-area', true); }); - }else if (selectedIf && selectedIf.length > 1) { - $.each(selectedIf, function(key, value) { - //this is for up - if (value.status == 'up' || value.status == "unknown") { - ginger.showBootgridLoading(ginger.opts_nw_if); - // First Bring down the interface - ginger.enableInterface(value.device, "down", function(result) { - // Second Bring the interface up back again - ginger.enableInterface(value.device, "up", function(result) { - var message = i18n['GINNET0018M'] + " " + value.device + " " + i18n['GINNET0020M']; - wok.message.success(message, '#message-nw-container-area'); - ginger.getInterfaces(function(result) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - ginger.loadBootgridData(ginger.opts_nw_if['gridId'], result); - }, function(error) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - }); - }, function(error) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - var message = i18n['GINNET0018M'] + " " + value.device + " " + i18n['GINNET0021M']; - wok.message.error(message + " " + error.responseJSON.reason, '#message-nw-container-area', true); - }); - }, function(error) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - var message = "Failed to brought down the interface " + value.device; - wok.message.error(message + " " + error.responseJSON.reason, '#message-nw-container-area', true); - }); - } else if (value.status == 'down') { - ginger.showBootgridLoading(ginger.opts_nw_if); - // Assuming interface is down already and just needs to brought up - ginger.enableInterface(value.device, "up", function(result) { - var message = i18n['GINNET0018M'] + " " + value.device + " " + i18n['GINNET0020M']; - wok.message.success(message, '#message-nw-container-area'); - ginger.getInterfaces(function(result) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - ginger.loadBootgridData(ginger.opts_nw_if['gridId'], result); - }, function(error) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - }); - }, function(error) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - var message = i18n['GINNET0018M'] + " " + value.device + " " + i18n['GINNET0021M']; - wok.message.error(message + " " + error.responseJSON.reason, '#message-nw-container-area', true); - }); - } - }); - } else { - var settings = { - content: i18n["GINNET0022M"], - confirm: i18n["GINNET0015M"] - }; - wok.confirm(settings, function() {}); - } } - }, { - id: 'nw-settings-button', - class: 'fa fa-cog', - label: i18n['GINNET0012M'], - onClick: function(event) { - var selectedIf = ginger.getSelectedRowsData(ginger.opts_nw_if); - if (selectedIf && (selectedIf.length == 1)) { - ginger.selectedInterface = (selectedIf[0]["device"] == "undefined" ? null : selectedIf[0]["device"]); - ginger.retrieveCfgInterface(ginger.selectedInterface, function (result) { - if ((selectedIf[0]["type"]).toLowerCase() == "vlan") { - wok.window.open('plugins/ginger/host-network-vlan.html'); - } else if ((selectedIf[0]["type"]).toLowerCase() == "bonding") { - wok.window.open('plugins/ginger/host-network-bond.html'); - } else if (((selectedIf[0]["type"]).toLowerCase() == "ethernet") || ((selectedIf[0]["type"]).toLowerCase() == "nic")) { - // condition nic should go away if #104 to be correct and resolved - wok.window.open('plugins/ginger/host-network-settings.html'); + getNetworkConfiguration(); + + var refreshNetworkConfigurationDatatable = function() { + rows_indexes = []; + $('#network-configuration tbody').off('click', 'input[type="checkbox"]'); + $('#network-configuration').off('click', 'tbody td, thead th:first-child'); + $('#network-configuration').off('click', 'input[name="select_all"]'); + networkConfigTable.destroy(); + getNetworkConfiguration('refresh'); + loadNetworkConfigDatatable(nwConfigDataSet); + }; + + var networkConfigurationClickHandler = function() { + // Refresh Button + $('#network-configuration-content-area').on('click', '#nw-config-refresh-btn', function(e) { + e.preventDefault(); + e.stopPropagation(); + refreshNetworkConfigurationDatatable(); + }); + + // Network Up Button + $('#network-configuration-content-area').on('click', '.nw-up', function(e) { + e.preventDefault(); + e.stopPropagation(); + if (!$(this).parent().is('.disabled')) { + $('.nw-configuration-action > .dropdown-toggle').dropdown('toggle'); + if ((rows_indexes && rows_indexes.length === 1)) { + var selectedIf = networkConfigTable.row(rows_indexes[0]).data(); + var ifStatus = selectedIf[1]; + var ifDevice = selectedIf[2]; + if (ifStatus === "down") { + $('#network-configuration-content-area > .wok-mask').removeClass('hidden'); + ginger.enableInterface(ifDevice, "up", function(result) { + var message = i18n['GINNET0081M'].replace('%1', '' + ifDevice + ''); + wok.message.success(message, '#message-network-configuration-container-area'); + refreshNetworkConfigurationDatatable(); + }, function(err) { + $('#network-configuration-content-area > .wok-mask').addClass('hidden'); + var message = i18n['GINNET0082M'].replace('%1', '' + ifDevice + ''); + wok.message.error(message + " " + err.responseJSON.reason, '#message-network-configuration-container-area', true); + }); + } + } else if (rows_indexes && rows_indexes.length > 1) { + $.each(rows_indexes, function(key, value) { + var ifStatus = networkConfigTable.row(rows_indexes[key]).data()[1]; + var ifDevice = networkConfigTable.row(rows_indexes[key]).data()[2]; + if (ifStatus === "down") { + $('#network-configuration-content-area > .wok-mask').removeClass('hidden'); + ginger.enableInterface(ifDevice, "up", function(result) { + var message = i18n['GINNET0081M'].replace('%1', '' + ifDevice + ''); + wok.message.success(message, '#message-network-configuration-container-area'); + refreshNetworkConfigurationDatatable(); + }, function(err) { + $('#network-configuration-content-area > .wok-mask').addClass('hidden'); + var message = i18n['GINNET0082M'].replace('%1', '' + ifDevice + ''); + wok.message.error(message + " " + err.responseJSON.reason, '#message-network-configuration-container-area', true); + }); + } + }); + } else { + var settings = { + content: i18n["GINNET0022M"], + confirm: i18n["GINNET0015M"] + }; + wok.confirm(settings, function() {}); + } + } else { + return false; } - }, function(error){ - wok.message.error(i18n['GINNET0034E'].replace("%1", ginger.selectedInterface), '#message-nw-container-area', true); - //Re-load the network interfaces after to clear other inactive interfaces without ifcfg files - ginger.initNetworkConfigGridData(); }); - } else { - var settings = { - content: i18n["GINNET0022M"], - confirm: i18n["GINNET0015M"] - }; - wok.confirm(settings, function() {}); - } - } - },{ - id: 'nw-enable-sriov', - class: 'fa fa-minus-circle', - label: i18n['GINNET0037E'], - onClick: function(event) { - var selectedIf = ginger.getSelectedRowsData(ginger.opts_nw_if); - ginger.selectedInterface = selectedIf[0]; - wok.window.open('plugins/ginger/host-network-enable-sriov.html'); - } - },{ - id: 'nw-delete-button', - class: 'fa fa-minus-circle', - label: i18n['GINNET0013M'], - critical: true, - onClick: function(event) { - var selectedIf = ginger.getSelectedRowsData(ginger.opts_nw_if); - if (selectedIf && (selectedIf.length == 1) && (selectedIf[0]["type"]).toLowerCase() != 'nic') { - ginger.selectedNWInterface = selectedIf[0]["device"]; - var settings = { - content: i18n['GINNET0028M'].replace("%1", ginger.selectedNWInterface), - confirm: i18n["GINNET0015M"] - }; - wok.confirm(settings, function() { - ginger.showBootgridLoading(ginger.opts_nw_if); - ginger.deleteInterface(ginger.selectedNWInterface, function(result) { - var message = i18n['GINNET0019M'] + " " + ginger.selectedNWInterface + " " + i18n['GINNET0020M']; - wok.message.success(message, '#message-nw-container-area'); - - //Re-load the network interfaces after delete action - ginger.getInterfaces(function(result) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - ginger.loadBootgridData(ginger.opts_nw_if['gridId'], result); - }, function(error) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - }); - }, function(error) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - var message = i18n['GINNET0019M'] + " " + ginger.selectedNWInterface + " " + i18n['GINNET0021M']; - wok.message.error(message + " " + error.responseJSON.reason, '#message-nw-container-area', true); - }); - }, function() { - ginger.hideBootgridLoading(ginger.opts_nw_if); - }); - } else if (selectedIf && selectedIf.length > 1) { - var checkNetworkType = 0; - $.each(selectedIf, function(key, value) { - if ((value.type).toLowerCase() == "nic") { - checkNetworkType = 1; - } - }); - if (checkNetworkType == 0) { - $.each(selectedIf, function(key, value) { - ginger.selectedNWInterface = value.device; - var settings = { - content: i18n['GINNET0028M'].replace("%1", ginger.selectedNWInterface), - confirm: i18n["GINNET0015M"] - }; - wok.confirm(settings, function() { - ginger.showBootgridLoading(ginger.opts_nw_if); - ginger.deleteInterface(ginger.selectedNWInterface, function(result) { - var message = i18n['GINNET0019M'] + " " + ginger.selectedNWInterface + " " + i18n['GINNET0020M']; - wok.message.success(message, '#message-nw-container-area'); - - //Re-load the network interfaces after delete action - ginger.getInterfaces(function(result) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - ginger.loadBootgridData(ginger.opts_nw_if['gridId'], result); - }, function(error) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - }); - }, function(error) { - ginger.hideBootgridLoading(ginger.opts_nw_if); - var message = i18n['GINNET0019M'] + " " + ginger.selectedNWInterface + " " + i18n['GINNET0021M']; - wok.message.error(message + " " + error.responseJSON.reason, '#message-nw-container-area', true); - }); - }, function() { - ginger.hideBootgridLoading(ginger.opts_nw_if); - }); - }); - } - } - } - }]; - - ginger.opts_nw_if['addButtons'] = JSON.stringify(addButton); - ginger.opts_nw_if['actions'] = JSON.stringify(actionButton); - - var addListSettings = { - panelID: addActionsId, - buttons: addButton, - type: 'add' - }; - - var actionListSettings = { - panelID: tabActionsId, - buttons: actionButton, - type: 'action' - }; - - ginger.createActionList(addListSettings); - - // Hide button "Add VLAN" and "Add BOND "in case of capability "cfginterfaces" false - if (ginger.cfginterfaces != undefined && !ginger.cfginterfaces) { - $('#nw-add-bond-button').hide(); - $('#nw-add-vlan-button').hide(); - $('#nw-configuration-add').hide(); - } else { - $('#nw-add-bond-button').show(); - $('#nw-add-vlan-button').show(); - $('#nw-configuration-add').show(); - } - - ginger.createActionList(actionListSettings); - - $("#nw-configuration-refresh-btn").on('click', function() { - ginger.networkConfiguration.disableAllButtons(); - ginger.initNetworkConfigGridData(); - }); - ginger.networkConfiguration.disableActions(); -} -ginger.listNetworkConfig = function() { - - var nwGrid = []; - var gridFields = []; - - ginger.loadBootgridNWActions(); - //Network Configuration grid columns - gridFields = [{ - "column-id": 'status', - "type": 'string', - "width": "3%", - "formatter": "nw-interface-status", - "title": "" - }, { - "column-id": 'device', - "type": 'string', - "width": "10%", - "identifier": true, - "title": i18n['GINNET0001M'] - }, { - "column-id": 'type', - "type": 'string', - "width": "7%", - "title": i18n['GINNET0003M'] - }, { - "column-id": 'nic_type', - "type": 'string', - "width": "7%", - "title": i18n['GINNET0062M'] - }, { - "column-id": 'ipaddr', - "formatter": "nw-address-space", - "type": 'string', - "width": "23%", - "title": i18n['GINNET0004M'] - }, - { - "column-id": 'rdma_enabled', - "type": 'string', - "width": "13%", - "title": i18n['GINNET0039E'] - }, - { - "column-id": 'module', - "type": 'string', - "width": "8%", - "title": i18n['GINNET0036E'] - }, - { - "column-id": 'macaddr', - "type": 'string', - "width": "25%", - "title": i18n['GINNET0005M'] - } - ]; - - ginger.opts_nw_if['gridFields'] = JSON.stringify(gridFields); - - nwGrid = ginger.createBootgrid(ginger.opts_nw_if); - ginger.hideBootgridLoading(ginger.opts_nw_if); - - nwGrid.bootgrid().on("selected.rs.jquery.bootgrid", function(e, rows) { - changeActionButtonsState(); - }).on("deselected.rs.jquery.bootgrid", function(e, rows) { - changeActionButtonsState(); - }).on("loaded.rs.jquery.bootgrid", function(e, rows) { - changeActionButtonsState(); - }); - - var changeActionButtonsState = function() { - // By default enable them all - ginger.changeButtonStatus(["nw-up-button", "nw-down-button", "nw-restart-button", "nw-delete-button", "nw-enable-sriov" - ], true); - //hide or show settings button based on cfginterfaces value - ginger.changeButtonStatus(["nw-settings-button"], ginger.cfginterfaces); - // Based on the interface status hide/show the right buttons - var selectedIf = ginger.getSelectedRowsData(ginger.opts_nw_if); - if (selectedIf && selectedIf.length == 1) { - ginger.networkConfiguration.enableActions(); - if (selectedIf && (selectedIf[0]["status"] == 'up' || selectedIf[0]["status"] == 'unknown')) { - ginger.changeButtonStatus(["nw-up-button"], false); - } else { - ginger.changeButtonStatus(["nw-down-button"], false); - } - if ((selectedIf[0]["module"] != 'mlx5_core' && selectedIf[0]["module"] != 'mlx5-core') || (selectedIf[0]["nic_type"] === 'virtual' )) { - ginger.changeButtonStatus(["nw-enable-sriov"], false); - } - if ((selectedIf[0]["type"]).toLowerCase() == 'nic') { - ginger.changeButtonStatus(["nw-delete-button"], false); - } - } else if(selectedIf && selectedIf.length > 1){ - ginger.networkConfiguration.enableActions(); - var networkType = 0; - ginger.changeButtonStatus(["nw-enable-sriov"], false); - ginger.changeButtonStatus(["nw-settings-button"], false); - $.each(selectedIf, function(key, value){ - if((value.type).toLowerCase() == 'nic'){ - networkType = 1; - } - }); - - if(networkType == 1){ - ginger.changeButtonStatus(["nw-delete-button"], false); - } - } - else{ - ginger.networkConfiguration.disableActions(); - } - }; - ginger.initNetworkConfigGridData(); -}; + // Network Down Button + $('#network-configuration-content-area').on('click', '.nw-down', function(e) { + e.preventDefault(); + e.stopPropagation(); + if (!$(this).parent().is('.disabled')) { + $('.nw-configuration-action > .dropdown-toggle').dropdown('toggle'); + if ((rows_indexes && rows_indexes.length === 1)) { + var selectedIf = networkConfigTable.row(rows_indexes[0]).data(); + var ifStatus = selectedIf[1]; + var ifDevice = selectedIf[2]; + if (ifStatus === "up" || ifStatus === "unknown") { + $('#network-configuration-content-area > .wok-mask').removeClass('hidden'); + ginger.enableInterface(ifDevice, "down", function(result) { + var message = i18n['GINNET0079M'].replace('%1', '' + ifDevice + ''); + wok.message.success(message, '#message-network-configuration-container-area'); + refreshNetworkConfigurationDatatable(); + }, function(err) { + $('#network-configuration-content-area > .wok-mask').addClass('hidden'); + var message = i18n['GINNET0080M'].replace('%1', '' + ifDevice + ''); + wok.message.error(message + " " + err.responseJSON.reason, '#message-network-configuration-container-area', true); + }); + } + } else if (rows_indexes && rows_indexes.length > 1) { + $.each(rows_indexes, function(key, value) { + var ifStatus = networkConfigTable.row(rows_indexes[key]).data()[1]; + var ifDevice = networkConfigTable.row(rows_indexes[key]).data()[2]; + if ((ifStatus === "up") || (ifStatus === "unknown")) { + $('#network-configuration-content-area > .wok-mask').removeClass('hidden'); + ginger.enableInterface(ifDevice, "down", function(result) { + var message = i18n['GINNET0079M'].replace('%1', '' + ifDevice + ''); + wok.message.success(message, '#message-network-configuration-container-area'); + refreshNetworkConfigurationDatatable(); + }, function(err) { + $('#network-configuration-content-area > .wok-mask').addClass('hidden'); + var message = i18n['GINNET0080M'].replace('%1', '' + ifDevice + ''); + wok.message.error(message + " " + err.responseJSON.reason, '#message-network-configuration-container-area', true); + }); + } + }); + } else { + var settings = { + content: i18n["GINNET0022M"], + confirm: i18n["GINNET0015M"] + }; + wok.confirm(settings, function() {}); + } + } else { + return false; + } + }); -ginger.initNetworkConfigGridData = function() { - ginger.clearBootgridData(ginger.opts_nw_if['gridId']); - ginger.hideBootgridData(ginger.opts_nw_if); - ginger.showBootgridLoading(ginger.opts_nw_if); + // Network Restart Button + $('#network-configuration-content-area').on('click', '.nw-restart', function(e) { + e.preventDefault(); + e.stopPropagation(); + if (!$(this).parent().is('.disabled')) { + $('.nw-configuration-action > .dropdown-toggle').dropdown('toggle'); + if ((rows_indexes && rows_indexes.length === 1)) { + var selectedIf = networkConfigTable.row(rows_indexes[0]).data(); + var ifStatus = selectedIf[1]; + var ifDevice = selectedIf[2]; + if (ifStatus === "up" || ifStatus === "unknown") { + $('#network-configuration-content-area > .wok-mask').removeClass('hidden'); + // First Bring down the interface + ginger.enableInterface(ifDevice, "down", function(result) { + // Second Bring the interface up back again + ginger.enableInterface(ifDevice, "up", function(result) { + var message = i18n['GINNET0084M'].replace('%1', '' + ifDevice + ''); + wok.message.success(message, '#message-network-configuration-container-area', true); + refreshNetworkConfigurationDatatable(); + }, function(err) { + $('#network-configuration-content-area > .wok-mask').addClass('hidden'); + var message = i18n['GINNET0084M'].replace('%1', '' + ifDevice + ''); + wok.message.error(message + " " + err.responseJSON.reason, '#message-network-configuration-container-area', true); + }); + }, function(err) { + $('#network-configuration-content-area > .wok-mask').addClass('hidden'); + var message = i18n['GINNET0084M'].replace('%1', '' + ifDevice + ''); + wok.message.error(message + " " + err.responseJSON.reason, '#message-network-configuration-container-area', true); + }); + } else if (ifStatus === "down") { + $('#network-configuration-content-area > .wok-mask').addClass('hidden'); + // Assuming interface is down already and just needs to brought up + ginger.enableInterface(ifDevice, "up", function(result) { + var message = i18n['GINNET0083M'].replace('%1', '' + ifDevice + ''); + wok.message.success(message, '#message-network-configuration-container-area', true); + refreshNetworkConfigurationDatatable(); + }, function(err) { + $('#network-configuration-content-area > .wok-mask').addClass('hidden'); + var message = i18n['GINNET0084M'].replace('%1', '' + ifDevice + ''); + wok.message.error(message + " " + err.responseJSON.reason, '#message-network-configuration-container-area', true); + }); + } + } else if (rows_indexes && rows_indexes.length > 1) { + $.each(rows_indexes, function(key, value) { + var ifStatus = networkConfigTable.row(rows_indexes[key]).data()[1]; + var ifDevice = networkConfigTable.row(rows_indexes[key]).data()[2]; + //this is for up + if (ifStatus === 'up' || ifStatus === "unknown") { + $('#network-configuration-content-area > .wok-mask').removeClass('hidden'); + // First Bring down the interface + ginger.enableInterface(value.device, "down", function(result) { + // Second Bring the interface up back again + ginger.enableInterface(value.device, "up", function(result) { + var message = i18n['GINNET0083M'].replace('%1', '' + ifDevice + ''); + wok.message.success(message, '#message-network-configuration-container-area', true); + }, function(err) { + $('#network-configuration-content-area > .wok-mask').addClass('hidden'); + var message = i18n['GINNET0084M'].replace('%1', '' + ifDevice + ''); + wok.message.error(message + " " + err.responseJSON.reason, '#message-network-configuration-container-area', true); + }); + }, function(err) { + $('#network-configuration-content-area > .wok-mask').addClass('hidden'); + var message = i18n['GINNET0084M'].replace('%1', '' + ifDevice + ''); + wok.message.error(message + " " + err.responseJSON.reason, '#message-network-configuration-container-area', true); + }); + } else if (value.status == 'down') { + // Assuming interface is down already and just needs to brought up + ginger.enableInterface(value.device, "up", function(result) { + var message = i18n['GINNET0083M'].replace('%1', '' + ifDevice + ''); + wok.message.success(message, '#message-network-configuration-container-area', true); + }, function(err) { + $('#network-configuration-content-area > .wok-mask').addClass('hidden'); + var message = i18n['GINNET0084M'].replace('%1', '' + ifDevice + ''); + wok.message.error(message + " " + error.responseJSON.reason, '#message-network-configuration-container-area', true); + }); + } + }); + } else { + var settings = { + content: i18n["GINNET0022M"], + confirm: i18n["GINNET0015M"] + }; + wok.confirm(settings, function() {}); + } + } else { + return false; + } + }); - ginger.getInterfaces(function(result) { + // Network SR-IOV Button + $('#network-configuration-content-area').on('click', '.nw-sriov', function(e) { + e.preventDefault(); + e.stopPropagation(); + if (!$(this).parent().is('.disabled') && (rows_indexes && rows_indexes.length === 1)) { + var selectedIf = networkConfigTable.row(rows_indexes[0]).data(); + ginger.selectedInterface = selectedIf[2]; + wok.window.open('plugins/ginger/host-network-enable-sriov.html'); + } else { + return false; + } + }); - $.each(result, function(index, value){ - if(value.rdma_enabled) { - value.rdma_enabled = 'Yes'; - } else { - value.rdma_enabled = 'No'; - } - }); + // Network Delete Button + $('#network-configuration-content-area').on('click', '.nw-delete', function(e) { + e.preventDefault(); + e.stopPropagation(); + if (!$(this).parent().is('.disabled')) { + var selectedIf = networkConfigTable.row(rows_indexes[0]).data(); + var ifDevice = selectedIf[2]; + var ifType = selectedIf[3]; + $('.nw-configuration-action > .dropdown-toggle').dropdown('toggle'); + if (ifDevice && (rows_indexes.length == 1) && (ifType).toLowerCase() != 'nic') { + ginger.selectedNWInterface = ifDevice; + var settings = { + content: i18n['GINNET0028M'].replace("%1", '' + ginger.selectedNWInterface + ''), + confirm: i18n["GINNET0015M"] + }; + wok.confirm(settings, function() { + $('#network-configuration-content-area > .wok-mask').removeClass('hidden'); + ginger.deleteInterface(ginger.selectedNWInterface, function(result) { + var message = i18n['GINNET0085M'].replace('%1', '' + ginger.selectedNWInterface + ''); + wok.message.success(message, '#message-network-configuration-container-area', true); + //Re-load the network interfaces after delete action + refreshNetworkConfigurationDatatable(); + }, function(err) { + $('#network-configuration-content-area > .wok-mask').addClass('hidden'); + var message = i18n['GINNET0086M'].replace('%1', '' + ginger.selectedNWInterface + ''); + wok.message.error(message + " " + err.responseJSON.reason, '#message-network-configuration-container-area', true); + }); + }, function() { + $('#network-configuration-content-area > .wok-mask').addClass('hidden'); + }); + } else if (rows_indexes && rows_indexes.length > 1) { + var checkNetworkType = 0; + $.each(rows_indexes, function(key, value) { + selectedIf = networkConfigTable.row(rows_indexes[key]).data(); + ifDevice = selectedIf[2]; + ifType = selectedIf[3]; + if ((ifType).toLowerCase() == "nic") { + checkNetworkType = 1; + } + }); + if (checkNetworkType == 0) { + $.each(rows_indexes, function(key, value) { + ginger.selectedNWInterface = networkConfigTable.row(rows_indexes[key]).data()[2]; + var settings = { + content: i18n['GINNET0028M'].replace("%1", '' + ginger.selectedNWInterface + ''), + confirm: i18n["GINNET0015M"] + }; + wok.confirm(settings, function() { + $('#network-configuration-content-area > .wok-mask').removeClass('hidden'); + ginger.deleteInterface(ginger.selectedNWInterface, function(result) { + var message = i18n['GINNET0085M'].replace('%1', '' + ginger.selectedNWInterface + ''); + wok.message.success(message, '#message-network-configuration-container-area', true); + refreshNetworkConfigurationDatatable(); + }, function(err) { + $('#network-configuration-content-area > .wok-mask').addClass('hidden'); + var message = i18n['GINNET0086M'].replace('%1', '' + ginger.selectedNWInterface + ''); + wok.message.error(message + " " + err.responseJSON.reason, '#message-network-configuration-container-area', true); + }); + }, function() { + $('#network-configuration-content-area > .wok-mask').addClass('hidden'); + }); + }); + } + } + } else { + return false; + } + }); - ginger.loadBootgridData(ginger.opts_nw_if['gridId'], result); - ginger.showBootgridData(ginger.opts_nw_if); - ginger.hideBootgridLoading(ginger.opts_nw_if); - ginger.networkConfiguration.enableAllButtons(); - }, function(error) { - var errmessage = i18n['GINNET0033E']; - wok.message.error(errmessage + " " + error.responseJSON.reason, '#message-nw-container-area', true); - ginger.hideBootgridLoading(ginger.opts_nw_if); - ginger.networkConfiguration.enableAllButtons(); - }); -}; + // Network Settings Button + $('#network-configuration-content-area').on('click', '.nw-settings', function(e) { + e.preventDefault(); + e.stopPropagation(); + if (!$(this).parent().is('.disabled')) { + $('.nw-configuration-action > .dropdown-toggle').dropdown('toggle'); + if ((rows_indexes && rows_indexes.length === 1)) { + var selectedIf = networkConfigTable.row(rows_indexes[0]).data(); + var ifDevice = selectedIf[2]; + var ifType = selectedIf[3]; + ginger.selectedInterface = (ifDevice === "undefined" ? null : ifDevice); + ginger.retrieveCfgInterface(ginger.selectedInterface, function(result) { + if ((ifType).toLowerCase() == "vlan") { + wok.window.open('plugins/ginger/host-network-vlan.html'); + } else if ((ifType).toLowerCase() == "bonding") { + wok.window.open('plugins/ginger/host-network-bond.html'); + } else if (((ifType).toLowerCase() == "ethernet") || ((ifType).toLowerCase() == "nic")) { + // condition nic should go away if #104 to be correct and resolved + wok.window.open('plugins/ginger/host-network-settings.html'); + } + }, function(error) { + wok.message.error(i18n['GINNET0034E'].replace("%1", '' + ginger.selectedInterface + ''), '#message-network-configuration-container-area', true); + //Re-load the network interfaces after to clear other inactive interfaces without ifcfg files + refreshNetworkConfigurationDatatable(); + }); + } else { + var settings = { + content: i18n["GINNET0022M"], + confirm: i18n["GINNET0015M"] + }; + wok.confirm(settings, function() {}); + } + } else { + return false; + } + }); + + // Network Add Bond + $('#network-configuration-content-area').on('click', '.nw-add-bond', function(e) { + e.preventDefault(); + e.stopPropagation(); + wok.window.open('plugins/ginger/host-network-bond.html'); + }); + + // Network VLAN + $('#network-configuration-content-area').on('click', '.nw-add-vlan', function(e) { + e.preventDefault(); + e.stopPropagation(); + wok.window.open('plugins/ginger/host-network-vlan.html'); + }); + + } + networkConfigurationClickHandler(); + return { + refreshNetworkConfigurationDatatable: refreshNetworkConfigurationDatatable + }; +} ginger.loadGlobalNetworkConfig = function() { var globalNetworkConfigTable; @@ -1078,15 +1165,15 @@ ginger.loadGlobalNetworkConfig = function() { var gatewayInputValidation = function() { $('#global-network-config-gateway').on('keyup', function(e) { - var gatewayIP = $('#global-network-config-gateway').val(); - - if(gatewayIP.trim() == "") { - $(this).parent().toggleClass('has-error',true); - $('#nw-global-config-apply-btn').prop('disabled', true); - } else { - $(this).parent().toggleClass("has-error", !((ginger.isValidIPv6(gatewayIP)) || ginger.validateIp(gatewayIP))); - $('#nw-global-config-apply-btn').prop('disabled', !((ginger.isValidIPv6(gatewayIP)) || ginger.validateIp(gatewayIP))); - } + var gatewayIP = $('#global-network-config-gateway').val(); + + if (gatewayIP.trim() == "") { + $(this).parent().toggleClass('has-error', true); + $('#nw-global-config-apply-btn').prop('disabled', true); + } else { + $(this).parent().toggleClass("has-error", !((ginger.isValidIPv6(gatewayIP)) || ginger.validateIp(gatewayIP))); + $('#nw-global-config-apply-btn').prop('disabled', !((ginger.isValidIPv6(gatewayIP)) || ginger.validateIp(gatewayIP))); + } }); } gatewayInputValidation(); @@ -1116,65 +1203,153 @@ ginger.loadGlobalNetworkConfig = function() { ginger.initNetwork = function() { - $(".content-area", "#gingerHostNetwork").css("height", "100%"); - ginger.getHostDetails(function(result) { - ginger.hostarch = result["architecture"]; - ginger.getCapabilities(function(result) { - $.each(result, function(enableItem, capability) { - var itemLowCase = enableItem.toLowerCase(); - switch (itemLowCase) { - case "network": - ginger.initNetworkConfig(); - ginger.loadGlobalNetworkConfig(); - break; - case "cfginterfaces": - ginger.cfginterfaces = capability; - ginger.changeButtonStatus(["nw-add-bond-button", "nw-add-vlan-button", "nw-configuration-add"], capability); - break; - case "ovsbridges": - ginger.ovsbridges = capability; - ginger.initOvsBridges(); - break; - } - }); + $(".content-area", "#gingerHostNetwork").css("height", "100%"); + ginger.getHostDetails(function(result) { + ginger.hostarch = result["architecture"]; + ginger.getCapabilities(function(result) { + $.each(result, function(enableItem, capability) { + var itemLowCase = enableItem.toLowerCase(); + switch (itemLowCase) { + case "network": + ginger.initNetworkConfig(); + ginger.loadGlobalNetworkConfig(); + break; + case "cfginterfaces": + ginger.cfginterfaces = capability; + ginger.cfginterfaces; + break; + case "ovsbridges": + ginger.ovsbridges = capability; + ginger.initOvsBridges(); + break; + } + }); + }); }); - }); }; -ginger.networkConfiguration = {}; +// Redesigned Network Configuration cfginterfaces Button status handlers -ginger.networkConfiguration.enableAllButtons = function(){ - ginger.networkConfiguration.enableActions(); - ginger.networkConfiguration.enableRefresh(); - ginger.networkConfiguration.enableAdd(); +ginger.changeButtonStatus = function(buttonIds, state) { + $.each(buttonIds, function(i, buttonId) { + if (state) { + $('#' + buttonId).show(); + } else { + $('#' + buttonId).hide(); + } + }); } -ginger.networkConfiguration.disableAllButtons = function(){ - ginger.networkConfiguration.disableActions(); - ginger.networkConfiguration.disableRefresh(); - ginger.networkConfiguration.disableAdd(); +// Redesigned Network Configuration Button status handlers + +ginger.nwConfiguration = {}; + +ginger.nwConfiguration.enableAllButtons = function() { + ginger.nwConfiguration.enableActions(); + ginger.nwConfiguration.enableRefresh(); + ginger.nwConfiguration.enableAdd(); } -ginger.networkConfiguration.enableActions = function (){ - $("#action-dropdown-button-nw-configuration-actions").prop("disabled", false); +ginger.nwConfiguration.disableAllButtons = function() { + ginger.nwConfiguration.disableActions(); + ginger.nwConfiguration.disableRefresh(); + ginger.nwConfiguration.disableAdd(); +} + +ginger.nwConfiguration.enableActions = function() { + $(".nw-configuration-action > .btn").prop("disabled", false); +}; + +ginger.nwConfiguration.disableActions = function() { + $(".nw-configuration-action").removeClass('open'); + $(".nw-configuration-action > .btn").prop("disabled", true); +}; + +ginger.nwConfiguration.enableUp = function() { + $('.nw-configuration-action .nw-up').parent().removeClass('disabled'); +}; + +ginger.nwConfiguration.disableUp = function() { + $('.nw-configuration-action .nw-up').parent().addClass('disabled'); +}; + +ginger.nwConfiguration.enableDown = function() { + $('.nw-configuration-action .nw-down').parent().removeClass('disabled'); +}; + +ginger.nwConfiguration.disableDown = function() { + $('.nw-configuration-action .nw-down').parent().addClass('disabled'); +}; + +ginger.nwConfiguration.enableRestart = function() { + $('.nw-configuration-action .nw-restart').parent().removeClass('disabled'); +}; + +ginger.nwConfiguration.disableRestart = function() { + $('.nw-configuration-action .nw-restart').parent().addClass('disabled'); +}; + +ginger.nwConfiguration.showSrIov = function() { + $('.nw-configuration-action .nw-sriov').parent().removeClass('hidden'); +}; + +ginger.nwConfiguration.hideSrIov = function() { + $('.nw-configuration-action .nw-sriov').parent().addClass('hidden'); +}; +ginger.nwConfiguration.enableSrIov = function() { + $('.nw-configuration-action .nw-sriov').parent().removeClass('disabled'); +}; + +ginger.nwConfiguration.disableSrIov = function() { + $('.nw-configuration-action .nw-sriov').parent().addClass('disabled'); +}; + +ginger.nwConfiguration.enableDelete = function() { + $('.nw-configuration-action .nw-delete').parent().removeClass('disabled'); +}; + +ginger.nwConfiguration.disableDelete = function() { + $('.nw-configuration-action .nw-delete').parent().addClass('disabled'); +}; + +ginger.nwConfiguration.enableSettings = function() { + $('.nw-configuration-action .nw-settings').parent().removeClass('disabled'); }; -ginger.networkConfiguration.disableActions = function (){ - $("#action-dropdown-button-nw-configuration-actions").parent().removeClass('open'); - $("#action-dropdown-button-nw-configuration-actions").prop("disabled", true); +ginger.nwConfiguration.disableSettings = function() { + $('.nw-configuration-action .nw-settings').parent().addClass('disabled'); }; -ginger.networkConfiguration.enableRefresh = function (){ - $("#nw-configuration-refresh-btn").prop("disabled", false); +ginger.nwConfiguration.enableRefresh = function() { + $("#nw-config-refresh-btn").prop("disabled", false); }; -ginger.networkConfiguration.disableRefresh = function (){ - $("#nw-configuration-refresh-btn").prop("disabled", true); +ginger.nwConfiguration.disableRefresh = function() { + $("#nw-config-refresh-btn").prop("disabled", true); }; -ginger.networkConfiguration.enableAdd = function (){ - $("#action-dropdown-button-nw-configuration-add").prop("disabled", false); + +ginger.nwConfiguration.enableAdd = function() { + $(".nw-configuration-add > .btn").prop("disabled", false); }; -ginger.networkConfiguration.disableAdd = function (){ - $("#action-dropdown-button-nw-configuration-add").prop("disabled", true); +ginger.nwConfiguration.disableAdd = function() { + $(".nw-configuration-add > .btn").prop("disabled", true); +}; + +ginger.nwConfiguration.showAdd = function() { + ginger.nwConfiguration.enableAdd(); + $(".nw-configuration-add").show(); +}; + +ginger.nwConfiguration.hideAdd = function() { + ginger.nwConfiguration.disableAdd(); + $(".nw-configuration-add").hide(); +}; + +ginger.nwConfiguration.toggleAdd = function() { + if (ginger.cfginterfaces) { + ginger.nwConfiguration.showAdd(); + } else { + ginger.nwConfiguration.hideAdd(); + } }; diff --git a/ui/pages/i18n.json.tmpl b/ui/pages/i18n.json.tmpl index 9ef5e69d..e1c8ce68 100644 --- a/ui/pages/i18n.json.tmpl +++ b/ui/pages/i18n.json.tmpl @@ -48,7 +48,7 @@ "GINNET0018M": "$_("Restart interface")", "GINNET0019M": "$_("Delete interface")", "GINNET0020M": "$_("successfully")", - "GINNET0021M": "$_("failed !")", + "GINNET0021M": "$_("failed!")", "GINNET0022M": "$_("Either no network interface or multiple network interfaces selected. Please select one.")", "GINNET0024M": "$_("Global DNS and Gateway applied ")", "GINNET0025M": "$_("Please wait...")", @@ -100,6 +100,20 @@ "GINNET0074M": "$_("Edit")", "GINNET0075M": "$_("Ok")", "GINNET0076M": "$_("You have unsaved changes and this will discard them. Do you want to continue?")", + "GINNET0077M": "$_("Yes")", + "GINNET0078M": "$_("No")", + "GINNET0079M": "$_("Successfully brought down the interface %1.")", + "GINNET0080M": "$_("Failed to bring down the interface %1.")", + "GINNET0081M": "$_("Successfully brought up the interface %1.")", + "GINNET0082M": "$_("Failed to bring up the interface %1.")", + "GINNET0083M": "$_("Successfully restarted the interface %1.")", + "GINNET0084M": "$_("Failed to restart the interface %1.")", + "GINNET0085M": "$_("Successfully deleted the interface %1.")", + "GINNET0086M": "$_("Failed to delete the interface %1.")", + "GINNET0087M": "$_("Successfully created the interface %1.")", + "GINNET0088M": "$_("Failed to create the interface %1.")", + "GINNET0089M": "$_("Successfully updated the interface %1.")", + "GINNET0090M": "$_("Failed to update the interface %1.")", "GINBG00001M": "$_("Loading...")", "GINBG00002M": "$_("Filter")", diff --git a/ui/pages/tabs/host-network.html.tmpl b/ui/pages/tabs/host-network.html.tmpl index 6c041be1..985f3779 100644 --- a/ui/pages/tabs/host-network.html.tmpl +++ b/ui/pages/tabs/host-network.html.tmpl @@ -48,7 +48,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA

- + $_("Global Network Configuration") @@ -67,7 +67,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA

- +
@@ -77,7 +77,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
$_("DNS")
-