Skip to content

Commit

Permalink
Issue #300: Redesign Network Configuration
Browse files Browse the repository at this point in the history 
Signed-off-by: Samuel Guimarães <[email protected]>
  • Loading branch information
@samhenri @danielhb
samhenri authored and danielhb committed Aug 29, 2016
1 parent 349c55b commit ea19737
Show file tree
Hide file tree
Showing 9 changed files with 1,254 additions and 869 deletions.
68 changes: 68 additions & 0 deletions ui/css/ginger.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
78 changes: 78 additions & 0 deletions ui/css/src/modules/_network.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

}

}
47 changes: 31 additions & 16 deletions ui/js/host-network-bond.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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){
Expand All @@ -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
Expand Down Expand Up @@ -272,21 +264,29 @@ 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", '<strong>' + result.BASIC_INFO.DEVICE + '</strong>');
}else {
var message = i18n['GINNET0087M'].replace("%1", '<strong>' + result.BASIC_INFO.NAME + '</strong>');
}
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);
$(nwApplyButton).prop('disabled', false);
});
} 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", '<strong>' + result.BASIC_INFO.DEVICE + '</strong>');
}else {
var message = i18n['GINNET0089M'].replace("%1", '<strong>' + result.BASIC_INFO.NAME + '</strong>');
}
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);
Expand All @@ -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;
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -470,6 +477,14 @@ var createBondMembersGrid = function(interface) {
$('select', selectField).append($("<option></option>")
.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($("<option></option>")
.attr("value", (interfaceList[i].BASIC_INFO.NAME).replace(/"/g, ""))
.text((interfaceList[i].BASIC_INFO.NAME).replace(/"/g, "")));

}
}
$('<td><span class=\"fa fa-floppy-o new-row-save\"></span><span class=\"fa fa-trash-o new-row-delete\"></span></td>').appendTo($('tr:last', '#nw-bond-member-grid'));
Expand Down
14 changes: 7 additions & 7 deletions ui/js/host-network-enable-sriov.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,21 +17,21 @@
*/

ginger.initEnableSriov = function() {
$("#modal-interface-name").text(ginger.selectedInterface['device']);
$("#modal-interface-name").text(ginger.selectedInterface);
ginger.enableJustNumbers();

var message = '';
var reloadProgressArea = function(result) {

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);
Expand All @@ -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);
});

Expand Down
12 changes: 2 additions & 10 deletions ui/js/host-network-settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading

0 comments on commit ea19737

Please sign in to comment.