etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'ui-add-remove-nics'

This commit is contained in:
Brian Federle 2013-04-30 11:59:07 -07:00
parent ce7dc70b1d eacbb4cb2d
commit c7143be7c9
5 changed files with 307 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/WEB-INF/classes/resources/messages.properties
View File

@ -14,7 +14,8 @@
# KIND, either express or implied. See the License for the
# specific language governing permissions and limitations
# under the License.
label.action.delete.nic=Remove NIC
message.action.delete.nic=Please confirm that want to remove this NIC, which will also remove the associated network from the VM.
changed.item.properties=Changed item properties
confirm.enable.s3=Please fill in the following information to enable support for S3-backed Secondary Storage
confirm.enable.swift=Please fill in the following information to enable support for Swift

62
ui/css/cloudstack3.css
View File

@ -1699,6 +1699,8 @@ div.list-view td.state.off span {
max-height: 407px;
overflow: auto;
overflow-x: hidden;
width: 100%;
/*[empty]padding:;*/
margin-right: 12px;
}
@ -1776,6 +1778,23 @@ div.list-view td.state.off span {
background-position: 100% -431px;
}
.detail-view .detail-group .button.add {
clear: both;
margin: 0px 21px 13px 0 !important;
}
.detail-view .details.group-multiple {
float: left;
width: 100%;
margin-bottom: 30px;
}
.detail-view .details.group-multiple .main-groups {
overflow: visible;
width: 98%;
margin-bottom: 35px;
}
/*List-view: subselect dropdown*/
.list-view .subselect {
width: 116px;
@ -2002,6 +2021,40 @@ div.detail-group.actions td {
vertical-align: middle;
}
.details.group-multiple div.detail-group.actions {
float: right;
max-width: 75%;
height: 23px;
position: relative;
margin: -15px 0 -5px;
}
.details.group-multiple div.detail-group.actions table {
background: none;
}
.details.group-multiple div.detail-group.actions td.detail-actions {
background: none;
display: block;
height: 35px;
float: right;
padding: 0;
}
.details.group-multiple div.detail-group.actions .detail-actions .action {
float: left;
width: 32px;
/*+placement:shift 11px 7px;*/
position: relative;
left: 11px;
top: 7px;
}
.details.group-multiple div.detail-group.actions .detail-actions .action a {
background: none;
width: 31px;
}
.detail-group table td.detail-actions {
width: 59%;
height: 26px;
@ -2768,7 +2821,8 @@ div.toolbar div.button.add,
div.toolbar div.button.refresh,
div.toolbar div.button.add,
div.toolbar div.button.main-action,
.toolbar div.button.header-action {
.toolbar div.button.header-action,
.detail-group .button.add {
/*+placement:shift 0px 5px;*/
position: relative;
left: 0px;
@ -2800,7 +2854,8 @@ div.toolbar div.button.main-action,
div.toolbar div.button.add:hover,
div.toolbar div.button.refresh:hover,
div.toolbar div.button.main-action:hover,
.toolbar div.button.header-action:hover {
.toolbar div.button.header-action:hover,
.detail-group .button.add:hover {
background-position: 0 -132px;
border-left: 1px solid #585D60;
}
@ -2830,7 +2885,8 @@ div.toolbar div.button.refresh span {
background-repeat: no-repeat;
}
div.toolbar div.button.add span {
div.toolbar div.button.add span,
.detail-group .button.add span.icon {
padding: 0px 0 0px 18px;
background: url(../images/icons.png) no-repeat -626px -209px;
/*+placement:shift 0px 0px;*/

2
ui/dictionary.jsp
View File

@ -25,6 +25,8 @@ under the License.
<% long now = System.currentTimeMillis(); %>
<script language="javascript">
dictionary = {
'label.action.delete.nic': '<fmt:message key="label.action.delete.nic" />',
'message.action.delete.nic': '<fmt:message key="message.action.delete.nic" />',
'changed.item.properties': '<fmt:message key="changed.item.properties" />',
'confirm.enable.s3': '<fmt:message key="confirm.enable.s3" />',
'confirm.enable.swift': '<fmt:message key="confirm.enable.swift" />',

161
ui/scripts/instances.js
View File

@ -1434,8 +1434,124 @@
nics: {
title: 'label.nics',
multiple: true,
actions: {
add: {
label: 'Add network to VM',
messages: {
confirm: function(args) {
return 'Please confirm that you would like to add a new VM NIC for this network.';
},
notification: function(args) {
return 'Add network to VM';
}
},
createForm: {
title: 'Add network to VM',
desc: 'Please specify the network that you would like to add this VM to. A new NIC will be added for this network.',
fields: {
networkid: {
label: 'label.network',
select: function(args) {
$.ajax({
url: createURL('listNetworks'),
data: {
listAll: true,
zoneid: args.context.instances[0].zoneid
},
success: function(json) {
args.response.success({
data: $.map(json.listnetworksresponse.network, function(network) {
return {
id: network.id,
description: network.name
};
})
});
}
});
}
}
}
},
action: function(args) {
$.ajax({
url: createURL('addNicToVirtualMachine'),
data: {
virtualmachineid: args.context.instances[0].id,
networkid: args.data.networkid
},
success: function(json) {
args.response.success({
_custom: { jobId: json.addnictovirtualmachineresponse.jobid }
});
}
});
},
notification: { poll: pollAsyncJobResult }
},
makeDefault: {
label: 'Set default NIC',
messages: {
confirm: function() {
return 'Please confirm that you would like to make this NIC the default for this VM.';
},
notification: function(args) {
return 'Set default NIC'
}
},
action: function (args) {
$.ajax({
url: createURL('updateDefaultNicForVirtualMachine'),
data: {
virtualmachineid: args.context.instances[0].id,
nicid: args.context.nics[0].id
},
success: function(json) {
args.response.success({
_custom: { jobId: json.updatedefaultnicforvirtualmachineresponse.jobid }
});
}
});
},
notification: {
poll: pollAsyncJobResult
}
},
// Remove NIC/Network from VM
remove: {
label: 'label.action.delete.nic',
messages: {
confirm: function(args) {
return 'message.action.delete.nic';
},
notification: function(args) {
return 'label.action.delete.nic';
}
},
action: function(args) {
$.ajax({
url: createURL('removeNicFromVirtualMachine'),
data: {
virtualmachineid: args.context.instances[0].id,
nicid: args.context.nics[0].id
},
success: function(json) {
args.response.success({
_custom: { jobId: json.removenicfromvirtualmachineresponse.jobid }
})
}
});
},
notification: {
poll: pollAsyncJobResult
}
}
},
fields: [
{
id: { label: 'ID' },
name: { label: 'label.name', header: true },
networkname: {label: 'Network Name' },
type: { label: 'label.type' },
@ -1465,26 +1581,33 @@
}
},
dataProvider: function(args) {
$.ajax({
url:createURL("listVirtualMachines&details=nics&id=" + args.context.instances[0].id),
dataType: "json",
async:true,
success:function(json) {
// Handling the display of network name for a VM under the NICS tabs
args.response.success({
data: $.map(json.listvirtualmachinesresponse.virtualmachine[0].nic, function(nic, index) {
var name = 'NIC ' + (index + 1);
if (nic.isdefault) {
name += ' (' + _l('label.default') + ')';
}
return $.extend(nic, {
$.ajax({
url:createURL("listVirtualMachines&details=nics&id=" + args.context.instances[0].id),
dataType: "json",
async:true,
success:function(json) {
// Handling the display of network name for a VM under the NICS tabs
args.response.success({
actionFilter: function(args) {
if (args.context.item.isdefault) {
return [];
} else {
return ['remove', 'makeDefault'];
}
},
data: $.map(json.listvirtualmachinesresponse.virtualmachine[0].nic, function(nic, index) {
var name = 'NIC ' + (index + 1);
if (nic.isdefault) {
name += ' (' + _l('label.default') + ')';
}
return $.extend(nic, {
name: name
});
})
});
}
});
}
});
})
});
}
});
}
},
/**

132
ui/scripts/ui/widgets/detailView.js
View File

@ -62,13 +62,15 @@
* Default behavior for actions -- just show a confirmation popup and add notification
*/
standard: function($detailView, args, additional) {
var action = args.actions[args.actionName];
var tab = args.tabs[args.activeTab];
var isMultiple = tab.multiple;
var action = isMultiple ? tab.actions[args.actionName] : args.actions[args.actionName];
var preAction = action.preAction;
var notification = action.notification ?
action.notification : {};
var messages = action.messages;
var id = args.id;
var context = $detailView.data('view-args').context;
var context = args.context ? args.context : $detailView.data('view-args').context;
var _custom = $detailView.data('_custom');
var customAction = action.action.custom;
var noAdd = action.noAdd;
@ -178,7 +180,7 @@
data: data,
_custom: _custom,
ref: options.ref,
context: $detailView.data('view-args').context,
context: context,
$form: $form,
response: {
success: function(args) {
@ -197,7 +199,11 @@
$loading.remove();
if (!noRefresh && !viewArgs.compact) {
updateTabContent(args.data? args.data : args2.data);
if (isMultiple) {
$detailView.find('.refresh').click();
} else {
updateTabContent(args.data? args.data : args2.data);
}
}
}
@ -286,43 +292,50 @@
after: function(args) {
performAction(args.data, {
ref: args.ref,
context: $detailView.data('view-args').context,
context: context,
$form: args.$form
});
},
ref: {
id: id
},
context: $detailView.data('view-args').context
context: context
});
}
}
},
remove: function($detailView, args) {
var tab = args.tabs[args.activeTab];
var isMultiple = tab.multiple;
uiActions.standard($detailView, args, {
noRefresh: true,
complete: function(args) {
var $browser = $('#browser .container');
var $panel = $detailView.closest('.panel');
if (isMultiple && $detailView.is(':visible')) {
$detailView.find('.refresh').click(); // Reload tab
} else {
var $browser = $('#browser .container');
var $panel = $detailView.closest('.panel');
if ($detailView.is(':visible')) {
$browser.cloudBrowser('selectPanel', {
panel: $panel.prev()
});
}
if($detailView.data("list-view-row") != null) {
var $row = $detailView.data('list-view-row');
var $tbody = $row.closest('tbody');
$row.remove();
if(!$tbody.find('tr').size()) {
$("<tr>").addClass('empty').append(
$("<td>").html(_l('label.no.data'))
).appendTo($tbody);
if ($detailView.is(':visible')) {
$browser.cloudBrowser('selectPanel', {
panel: $panel.prev()
});
}
if($detailView.data("list-view-row") != null) {
var $row = $detailView.data('list-view-row');
var $tbody = $row.closest('tbody');
$row.remove();
if(!$tbody.find('tr').size()) {
$("<tr>").addClass('empty').append(
$("<td>").html(_l('label.no.data'))
).appendTo($tbody);
}
$tbody.closest('table').dataTable('refresh');
}
$tbody.closest('table').dataTable('refresh');
}
}
});
@ -707,7 +720,10 @@
$.each(actions, function(key, value) {
if ($.inArray(key, allowedActions) == -1 ||
(key == 'edit' && options.compact)) return true;
(options.ignoreAddAction && key == 'add') ||
(key == 'edit' && options.compact)) {
return true;
}
var $action = $('<div></div>')
.addClass('action').addClass(key)
@ -778,11 +794,13 @@
var detailViewArgs = $detailView.data('view-args');
var fields = tabData.fields;
var hiddenFields;
var context = detailViewArgs ? detailViewArgs.context : cloudStack.context;
var context = $.extend(true, {}, detailViewArgs ? detailViewArgs.context : cloudStack.context);
var isMultiple = tabData.multiple || tabData.isMultiple;
var actions = tabData.actions;
if (isMultiple) {
context[tabData.id] = data;
context[tabData.id] = [data];
$detailGroups.data('item-context', context);
}
// Make header
@ -992,7 +1010,8 @@
$tabContent.html('');
var targetTabID = $tabContent.data('detail-view-tab-id');
var tabs = args.tabs[targetTabID];
var tabList = args.tabs;
var tabs = tabList[targetTabID];
var dataProvider = tabs.dataProvider;
var isMultiple = tabs.multiple || tabs.isMultiple;
var viewAllArgs = args.viewAll;
@ -1073,7 +1092,11 @@
tabData.viewAll.path,
{
updateContext: function(args) {
return { nics: [item] };
var obj = {};
obj[targetTabID] = [item];
return obj;
},
title: tabData.viewAll.title
}
@ -1081,8 +1104,52 @@
})
);
}
// Add action bar
if (tabData.multiple && tabData.actions) {
var $actions = makeActionButtons(tabData.actions, {
actionFilter: actionFilter,
data: item,
context: $.extend(true, {}, $detailView.data('view-args').context, {
item: [item]
}),
ignoreAddAction: true
});
$fieldContent.find('th').append($actions);
}
});
// Add item action
if (tabData.multiple && tabData.actions && tabData.actions.add) {
$tabContent.prepend(
$('<div>').addClass('button add').append(
$('<span>').addClass('icon').html('&nbsp;'),
$('<span>').html(_l(tabData.actions.add.label))
).click(function() {
uiActions.standard(
$detailView,
{
tabs: tabList,
activeTab: targetTabID,
actions: tabData.actions,
actionName: 'add'
}, {
noRefresh: true,
complete: function(args) {
if ($detailView.is(':visible')) {
loadTabContent(
$detailView.find('div.detail-group:visible'),
$detailView.data('view-args')
);
}
}
}
)
})
);
}
return true;
}
@ -1301,9 +1368,10 @@
var $action = $target.closest('.action').find('[detail-action]');
var actionName = $action.attr('detail-action');
var actionCallback = $action.data('detail-view-action-callback');
var detailViewArgs = $action.closest('div.detail-view').data('view-args');
var detailViewArgs = $.extend(true, {}, $action.closest('div.detail-view').data('view-args'));
var additionalArgs = {};
var actionSet = uiActions;
var $details = $action.closest('.details');
var uiCallback = actionSet[actionName];
if (!uiCallback)
@ -1311,6 +1379,10 @@
detailViewArgs.actionName = actionName;
if ($details.data('item-context')) {
detailViewArgs.context = $details.data('item-context');
}
uiCallback($target.closest('div.detail-view'), detailViewArgs, additionalArgs);
return false;