From 2a13268fe3d332028634997a712ad75da5847f8d Mon Sep 17 00:00:00 2001 From: Brian Federle Date: Wed, 9 Nov 2011 16:12:30 -0800 Subject: [PATCH] Add system configuration forms for public, management, guest; add list view support for network providers --- ui/scripts-test/system.js | 411 +++++++++++++++++++++++------- ui/scripts/ui-custom/zoneChart.js | 69 ++++- 2 files changed, 380 insertions(+), 100 deletions(-) diff --git a/ui/scripts-test/system.js b/ui/scripts-test/system.js index 64c3b97c01c..b1cce5ddce1 100644 --- a/ui/scripts-test/system.js +++ b/ui/scripts-test/system.js @@ -48,6 +48,57 @@ dataProvider: function(args) { args.response.success({ data: testData.data.networks[0] }); } + }, + ipAddresses: { + title: 'IP Addresses', + custom: function(args) { + return $('
').multiEdit({ + noSelect: true, + fields: { + 'gateway': { edit: true, label: 'Gateway' }, + 'netmask': { edit: true, label: 'Netmask' }, + 'vlanid': { edit: true, label: 'VLAN' }, + 'startip': { edit: true, label: 'Start IP' }, + 'endip': { edit: true, label: 'End IP' }, + 'add-rule': { label: 'Add', addButton: true } + }, + add: { + label: 'Add', + action: function(args) { + setTimeout(function() { + args.response.success({ + notification: { + label: 'Added IP address', + poll: testData.notifications.testPoll + } + }); + }, 500); + } + }, + actions: { + destroy: { + label: 'Remove Rule', + action: function(args) { + setTimeout(function() { + args.response.success({ + notification: { + label: 'Removed IP address', + poll: testData.notifications.testPoll + } + }); + }, 500); + } + } + }, + dataProvider: function(args) { + setTimeout(function() { + args.response.success({ + data: [] + }); + }, 100); + } + }); + } } } } @@ -82,6 +133,121 @@ dataProvider: function(args) { args.response.success({ data: testData.data.networks[0] }); } + }, + cidr: { + title: 'CIDR', + custom: function(args) { + return $('
').multiEdit({ + noSelect: true, + fields: { + 'cidr': { edit: true, label: 'CIDR' }, + 'add-rule': { + label: 'Add', + addButton: true + } + }, + add: { + label: 'Add', + action: function(args) { + setTimeout(function() { + args.response.success({ + notification: { + label: 'Added VLAN range', + poll: testData.notifications.testPoll + } + }); + }, 500); + } + }, + actions: { + destroy: { + label: 'Remove Rule', + action: function(args) { + setTimeout(function() { + args.response.success({ + notification: { + label: 'Removed VLAN range', + poll: testData.notifications.testPoll + } + }); + }, 500); + } + } + }, + dataProvider: function(args) { + setTimeout(function() { + args.response.success({ + data: [ + { + cidr: '0.0.0.0/0', + startvlanrange: '1480', endvlanrange: '1559' + } + ] + }); + }, 100); + } + }); + } + }, + vlanRanges: { + title: 'VLAN Ranges', + custom: function(args) { + return $('
').multiEdit({ + noSelect: true, + fields: { + 'startvlanrange': { + edit: true, label: 'Start VLAN' + }, + 'endvlanrange': { + edit: true, label: 'End VLAN' + }, + 'add-rule': { + label: 'Add', + addButton: true + } + }, + add: { + label: 'Add', + action: function(args) { + setTimeout(function() { + args.response.success({ + notification: { + label: 'Added VLAN range', + poll: testData.notifications.testPoll + } + }); + }, 500); + } + }, + actions: { + destroy: { + label: 'Remove Rule', + action: function(args) { + setTimeout(function() { + args.response.success({ + notification: { + label: 'Removed VLAN range', + poll: testData.notifications.testPoll + } + }); + }, 500); + } + } + }, + dataProvider: function(args) { + setTimeout(function() { + args.response.success({ + data: [ + { + cidr: '0.0.0.0/0', + startvlanrange: '1480', endvlanrange: '1559' + } + ] + }); + }, 100); + } + }); + } } } } @@ -134,7 +300,7 @@ }, types: { - // Virtual router + // Virtual router list view virtualRouter: { label: 'Virtual Router', fields: { @@ -143,29 +309,31 @@ state: { label: 'Status' } }, dataProvider: function(args) { - args.response.success({ - data: [ - { - name: 'Router0001S', - ipaddress: '192.168.1.1', - state: 'Enabled' - }, - { - name: 'Router0001B', - ipaddress: '192.168.1.155', - state: 'Enabled' - }, - { - name: 'Router0002', - ipaddress: '192.168.1.13', - state: 'Enabled' - } - ] - }); + setTimeout(function() { + args.response.success({ + data: [ + { + name: 'Router0001S', + ipaddress: '192.168.1.1', + state: 'Enabled' + }, + { + name: 'Router0001B', + ipaddress: '192.168.1.155', + state: 'Enabled' + }, + { + name: 'Router0002', + ipaddress: '192.168.1.13', + state: 'Enabled' + } + ] + }); + }, 500); } }, - // NetScaler + // NetScaler list view netscaler: { label: 'NetScaler', fields: { @@ -173,30 +341,71 @@ ipaddress: { label: 'IP Address' }, state: { label: 'Status' } }, - dataProvider: function(args) { - args.response.success({ - data: [ - { - name: 'Router0001S', - ipaddress: '192.168.1.1', - state: 'Enabled' - }, - { - name: 'Router0001B', - ipaddress: '192.168.1.155', - state: 'Enabled' - }, - { - name: 'Router0002', - ipaddress: '192.168.1.13', - state: 'Enabled' + actions: { + add: { + label: 'Add new NetScaler', + createForm: { + title: 'Add NetScaler Device', + desc: 'Please enter your NetScaler device\'s information to add it to your network.', + fields: { + name: { + label: 'Name', + validation: { required: true } + }, + ipaddress: { + label: 'IP Address', + validation: { required: true } + }, + supportedServices: { + label: 'Supported Services', + isBoolean: true, + multiArray: { + serviceA: { label: 'Service A' }, + serviceB: { label: 'Service B' }, + serviceC: { label: 'Service C' } + } + } } - ] - }); + }, + action: function(args) { + args.response.success(); + }, + messages: { + notification: function(args) { + return 'Added new NetScaler'; + } + }, + notification: { + poll: testData.notifications.testPoll + } + } + }, + dataProvider: function(args) { + setTimeout(function() { + args.response.success({ + data: [ + { + name: 'Router0001S', + ipaddress: '192.168.1.1', + state: 'Enabled' + }, + { + name: 'Router0001B', + ipaddress: '192.168.1.155', + state: 'Enabled' + }, + { + name: 'Router0002', + ipaddress: '192.168.1.13', + state: 'Enabled' + } + ] + }); + }, 500); } }, - // F5 + // F5 list view f5: { label: 'F5', fields: { @@ -205,29 +414,31 @@ state: { label: 'Status' } }, dataProvider: function(args) { - args.response.success({ - data: [ - { - name: 'Router0001S', - ipaddress: '192.168.1.1', - state: 'Enabled' - }, - { - name: 'Router0001B', - ipaddress: '192.168.1.155', - state: 'Enabled' - }, - { - name: 'Router0002', - ipaddress: '192.168.1.13', - state: 'Enabled' - } - ] - }); + setTimeout(function() { + args.response.success({ + data: [ + { + name: 'Router0001S', + ipaddress: '192.168.1.1', + state: 'Enabled' + }, + { + name: 'Router0001B', + ipaddress: '192.168.1.155', + state: 'Enabled' + }, + { + name: 'Router0002', + ipaddress: '192.168.1.13', + state: 'Enabled' + } + ] + }); + }, 500); } }, - // SRX + // SRX list view srx: { label: 'SRX', fields: { @@ -236,29 +447,31 @@ state: { label: 'Status' } }, dataProvider: function(args) { - args.response.success({ - data: [ - { - name: 'Router0001S', - ipaddress: '192.168.1.1', - state: 'Enabled' - }, - { - name: 'Router0001B', - ipaddress: '192.168.1.155', - state: 'Enabled' - }, - { - name: 'Router0002', - ipaddress: '192.168.1.13', - state: 'Enabled' - } - ] + setTimeout(function() { + args.response.success({ + data: [ + { + name: 'Router0001S', + ipaddress: '192.168.1.1', + state: 'Enabled' + }, + { + name: 'Router0001B', + ipaddress: '192.168.1.155', + state: 'Enabled' + }, + { + name: 'Router0002', + ipaddress: '192.168.1.13', + state: 'Enabled' + } + ] + }); }); } }, - // Security groups + // Security groups list view securityGroups: { label: 'Security Groups', fields: { @@ -267,24 +480,26 @@ state: { label: 'Status' } }, dataProvider: function(args) { - args.response.success({ - data: [ - { - name: 'Router0001S', - ipaddress: '192.168.1.1', - state: 'Enabled' - }, - { - name: 'Router0001B', - ipaddress: '192.168.1.155', - state: 'Enabled' - }, - { - name: 'Router0002', - ipaddress: '192.168.1.13', - state: 'Enabled' - } - ] + setTimeout(function() { + args.response.success({ + data: [ + { + name: 'Router0001S', + ipaddress: '192.168.1.1', + state: 'Enabled' + }, + { + name: 'Router0001B', + ipaddress: '192.168.1.155', + state: 'Enabled' + }, + { + name: 'Router0002', + ipaddress: '192.168.1.13', + state: 'Enabled' + } + ] + }); }); } } diff --git a/ui/scripts/ui-custom/zoneChart.js b/ui/scripts/ui-custom/zoneChart.js index 15d546f5400..aca960b5a83 100644 --- a/ui/scripts/ui-custom/zoneChart.js +++ b/ui/scripts/ui-custom/zoneChart.js @@ -34,13 +34,14 @@ var status = networkStatus[name]; var $item = $('
  • ').addClass('provider') + .attr('rel', name) + .attr('network-status', status) .addClass(name).addClass(status) .appendTo($networkProviders) .append($('
    ').addClass('name').html(type.label)) .append($('
    ').addClass('status') .append($('').html(status))) - .append($('
    ').addClass('view-all normal').html('View all')) - .append($('
    ').addClass('view-all enable').html('Enable')); + .append($('
    ').addClass('view-all configure').html('Configure')); }); // View all action @@ -242,6 +243,7 @@ $browser.cloudBrowser('addPanel', { title: itemID + ' details', + maximizeIfSelected: true, complete: function($newPanel) { $newPanel.detailView( naas.mainNetworks[itemID].detailView @@ -251,6 +253,69 @@ return false; }); + + // Provider configure event + $tabContent.find('li.provider .view-all.configure').click(function() { + var $li = $(this).closest('li'); + var itemID = $li.attr('rel'); + var status = $li.attr('network-status'); + var networkProviderArgs = naas.networkProviders.types[itemID]; + var createForm = networkProviderArgs.actions.add.createForm; + var action = networkProviderArgs.actions.add; + + $browser.cloudBrowser('addPanel', { + title: itemID + ' details', + maximizeIfSelected: true, + complete: function($newPanel) { + if (status == 'disabled') { + // Create form + var formData = cloudStack.dialog.createForm({ + form: createForm, + context: { zones: listViewArgs.context.physicalResources }, + after: function(args) { + action.action($.extend(args, { + response: { + success: function(args) { + $('div.notifications').notifications('add', { + desc: action.messages.notification({}), + interval: 1000, + poll: action.notification.poll + }); + $newPanel.html('').listView({ + listView: naas.networkProviders.types[itemID] + }); + } + } + })); + }, + noDialog: true + }); + + var $formContainer = formData.$formContainer; + var $form = $formContainer.find('form'); + var completeAction = formData.completeAction; + + $newPanel.append( + $.merge( + $formContainer, + $('
    ') + .addClass('button submit') + .append($('').html('Add')) + .click(function() { + if ($form.valid()) { + completeAction($formContainer); + } + }) + ) + ); + } else { + $newPanel.listView({ + listView: naas.networkProviders.types[itemID] + }); + } + } + }); + }); }); $tabMain.tabs();