').addClass('loading-overlay').prependTo($tiers.find('li.placeholder'));
+ actions.add.action({
+ context: context,
+ data: args.data,
+ response: {
+ success: function(args) {
+ var tier = args.data;
+
+ cloudStack.ui.notifications.add(
+ // Notification
+ {
+ desc: actions.add.label,
+ poll: actions.add.notification.poll
+ },
+
+ // Success
+ function(args) {
+ $loading.remove();
+ addNewTier({
+ tier: tier,
+ $tiers: $tiers,
+ actions: actions,
+ actionPreFilter: actionPreFilter,
+ vmListView: vmListView
+ });
+ },
+
+ {},
+
+ // Error
+ function(args) {
+ $loading.remove();
+ }
+ );
+ }
+ }
+ });
+ }
+ });
+ };
+
+ cloudStack.uiCustom.vpc = function(args) {
+ var vmListView = args.vmListView;
+ var tierArgs = args.tiers;
+
+ return function(args) {
+ var context = args.context;
+ var $browser = $('#browser .container');
+ var $toolbar = $('
').addClass('toolbar');
+ var vpc = args.context.vpc[0];
+
+ $browser.cloudBrowser('addPanel', {
+ maximizeIfSelected: true,
+ title: 'Configure VPC: ' + vpc.name,
+ complete: function($panel) {
+ var $loading = $('
').addClass('loading-overlay').appendTo($panel);
+
+ $panel.append($toolbar);
+
+ // Load data
+ tierArgs.dataProvider({
+ context: context,
+ response: {
+ success: function(args) {
+ var tiers = args.data.tiers;
+ var $chart = elems.chart({
+ vmListView: vmListView,
+ context: context,
+ actions: tierArgs.actions,
+ actionPreFilter: tierArgs.actionPreFilter,
+ vpcName: vpc.name,
+ tiers: tiers
+ }).appendTo($panel);
+
+ $loading.remove();
+ $chart.fadeIn(function() {
+ });
+ }
+ }
+ });
+ }
+ });
+ };
+ };
+}(jQuery, cloudStack));
\ No newline at end of file
diff --git a/ui/scripts/vpc.js b/ui/scripts/vpc.js
new file mode 100644
index 00000000000..a3b9afb99f3
--- /dev/null
+++ b/ui/scripts/vpc.js
@@ -0,0 +1,469 @@
+(function($, cloudStack) {
+ var aclMultiEdit = {
+ noSelect: true,
+ fields: {
+ 'cidrlist': { edit: true, label: 'Source CIDR' },
+ 'protocol': {
+ label: 'Protocol',
+ select: function(args) {
+ args.$select.change(function() {
+ var $inputs = args.$form.find('input');
+ var $icmpFields = $inputs.filter(function() {
+ var name = $(this).attr('name');
+
+ return $.inArray(name, [
+ 'icmptype',
+ 'icmpcode'
+ ]) > -1;
+ });
+ var $otherFields = $inputs.filter(function() {
+ var name = $(this).attr('name');
+
+ return name != 'icmptype' && name != 'icmpcode' && name != 'cidrlist';
+ });
+
+ if ($(this).val() == 'icmp') {
+ $icmpFields.attr('disabled', false);
+ $otherFields.attr('disabled', 'disabled');
+ } else {
+ $otherFields.attr('disabled', false);
+ $icmpFields.attr('disabled', 'disabled');
+ }
+ });
+
+ args.response.success({
+ data: [
+ { name: 'tcp', description: 'TCP' },
+ { name: 'udp', description: 'UDP' },
+ { name: 'icmp', description: 'ICMP' }
+ ]
+ });
+ }
+ },
+ 'startport': { edit: true, label: 'Start Port' },
+ 'endport': { edit: true, label: 'End Port' },
+ 'icmptype': { edit: true, label: 'ICMP Type', isDisabled: true },
+ 'icmpcode': { edit: true, label: 'ICMP Code', isDisabled: true },
+ 'add-rule': {
+ label: 'Add',
+ addButton: true
+ }
+ },
+ add: {
+ label: 'Add',
+ action: function(args) {
+ setTimeout(function() {
+ args.response.success({
+ notification: {
+ label: 'Add ACL rule',
+ poll: function(args) { args.complete(); }
+ }
+ });
+ }, 500);
+ }
+ },
+ actions: {
+ destroy: {
+ label: 'Remove Rule',
+ action: function(args) {
+ setTimeout(function() {
+ args.response.success({
+ notification: {
+ label: 'Remove ACL rule',
+ poll: function(args) { args.complete(); }
+ }
+ });
+ }, 500);
+ }
+ }
+ },
+ dataProvider: function(args) {
+ setTimeout(function() {
+ args.response.success({
+ data: [
+ {
+ "id": 11,
+ "protocol": "icmp",
+ "ipaddressid": 4,
+ "ipaddress": "10.223.71.23",
+ "state": "Active",
+ "cidrlist": "0.0.0.0/0",
+ "icmptype": 2,
+ "icmpcode": 22
+ },
+ {
+ "id": 10,
+ "protocol": "udp",
+ "startport": "500",
+ "endport": "10000",
+ "ipaddressid": 4,
+ "ipaddress": "10.223.71.23",
+ "state": "Active",
+ "cidrlist": "0.0.0.0/24"
+ },
+ {
+ "id": 9,
+ "protocol": "tcp",
+ "startport": "20",
+ "endport": "200",
+ "ipaddressid": 4,
+ "ipaddress": "10.223.71.23",
+ "state": "Active",
+ "cidrlist": "0.0.0.0/24"
+ },
+ {
+ "id": 11,
+ "protocol": "icmp",
+ "ipaddressid": 4,
+ "ipaddress": "10.223.71.23",
+ "state": "Active",
+ "cidrlist": "0.0.0.0/0",
+ "icmptype": 2,
+ "icmpcode": 22
+ },
+ {
+ "id": 10,
+ "protocol": "udp",
+ "startport": "500",
+ "endport": "10000",
+ "ipaddressid": 4,
+ "ipaddress": "10.223.71.23",
+ "state": "Active",
+ "cidrlist": "0.0.0.0/24"
+ },
+ {
+ "id": 9,
+ "protocol": "tcp",
+ "startport": "20",
+ "endport": "200",
+ "ipaddressid": 4,
+ "ipaddress": "10.223.71.23",
+ "state": "Active",
+ "cidrlist": "0.0.0.0/24"
+ },
+ {
+ "id": 11,
+ "protocol": "icmp",
+ "ipaddressid": 4,
+ "ipaddress": "10.223.71.23",
+ "state": "Active",
+ "cidrlist": "0.0.0.0/0",
+ "icmptype": 2,
+ "icmpcode": 22
+ },
+ {
+ "id": 10,
+ "protocol": "udp",
+ "startport": "500",
+ "endport": "10000",
+ "ipaddressid": 4,
+ "ipaddress": "10.223.71.23",
+ "state": "Active",
+ "cidrlist": "0.0.0.0/24"
+ },
+ {
+ "id": 9,
+ "protocol": "tcp",
+ "startport": "20",
+ "endport": "200",
+ "ipaddressid": 4,
+ "ipaddress": "10.223.71.23",
+ "state": "Active",
+ "cidrlist": "0.0.0.0/24"
+ },
+ {
+ "id": 11,
+ "protocol": "icmp",
+ "ipaddressid": 4,
+ "ipaddress": "10.223.71.23",
+ "state": "Active",
+ "cidrlist": "0.0.0.0/0",
+ "icmptype": 2,
+ "icmpcode": 22
+ },
+ {
+ "id": 10,
+ "protocol": "udp",
+ "startport": "500",
+ "endport": "10000",
+ "ipaddressid": 4,
+ "ipaddress": "10.223.71.23",
+ "state": "Active",
+ "cidrlist": "0.0.0.0/24"
+ },
+ {
+ "id": 9,
+ "protocol": "tcp",
+ "startport": "20",
+ "endport": "200",
+ "ipaddressid": 4,
+ "ipaddress": "10.223.71.23",
+ "state": "Active",
+ "cidrlist": "0.0.0.0/24"
+ },
+ {
+ "id": 11,
+ "protocol": "icmp",
+ "ipaddressid": 4,
+ "ipaddress": "10.223.71.23",
+ "state": "Active",
+ "cidrlist": "0.0.0.0/0",
+ "icmptype": 2,
+ "icmpcode": 22
+ },
+ {
+ "id": 10,
+ "protocol": "udp",
+ "startport": "500",
+ "endport": "10000",
+ "ipaddressid": 4,
+ "ipaddress": "10.223.71.23",
+ "state": "Active",
+ "cidrlist": "0.0.0.0/24"
+ },
+ {
+ "id": 9,
+ "protocol": "tcp",
+ "startport": "20",
+ "endport": "200",
+ "ipaddressid": 4,
+ "ipaddress": "10.223.71.23",
+ "state": "Active",
+ "cidrlist": "0.0.0.0/24"
+ }
+ ]
+ });
+ }, 100);
+ }
+ };
+
+ cloudStack.vpc = {
+ vmListView: {
+ id: 'vpcTierInstances',
+ listView: {
+ filters: {
+ mine: { label: 'My instances' },
+ all: { label: 'All instances' },
+ running: { label: 'Running instances' },
+ destroyed: { label: 'Destroyed instances' }
+ },
+ fields: {
+ name: { label: 'Name', editable: true },
+ account: { label: 'Account' },
+ zonename: { label: 'Zone' },
+ state: {
+ label: 'Status',
+ indicator: {
+ 'Running': 'on',
+ 'Stopped': 'off',
+ 'Destroyed': 'off'
+ }
+ }
+ },
+
+ // List view actions
+ actions: {
+ restart: {
+ label: 'Restart instance',
+ action: function(args) {
+ setTimeout(function() {
+ args.response.success({
+ data: {
+ state: 'Restarting'
+ }
+ });
+ }, 1000);
+ },
+ messages: {
+ confirm: function(args) {
+ return 'Are you sure you want to restart ' + args.name + '?';
+ },
+ notification: function(args) {
+ return 'Rebooting VM: ' + args.name;
+ }
+ },
+ notification: {
+ poll: function(args) { args.complete(); }
+ }
+ },
+ stop: {
+ label: 'Stop instance',
+ action: function(args) {
+ setTimeout(function() {
+ args.response.success({
+ data: { state: 'Stopping' }
+ });
+ }, 500);
+ },
+ messages: {
+ confirm: function(args) {
+ return 'Are you sure you want to shutdown ' + args.name + '?';
+ },
+ notification: function(args) {
+ return 'Rebooting VM: ' + args.name;
+ }
+ },
+ notification: {
+ poll: function(args) { args.complete(); }
+ }
+ },
+ start: {
+ label: 'Start instance',
+ action: function(args) {
+ setTimeout(function() {
+ args.response.success({
+ data: { state: 'Starting' }
+ });
+ }, 500);
+ },
+ messages: {
+ confirm: function(args) {
+ return 'Are you sure you want to start ' + args.name + '?';
+ },
+ notification: function(args) {
+ return 'Starting VM: ' + args.name;
+ }
+ },
+ notification: {
+ poll: function(args) { args.complete(); }
+ }
+ },
+ destroy: {
+ label: 'Destroy instance',
+ messages: {
+ confirm: function(args) {
+ return 'Are you sure you want to destroy ' + args.name + '?';
+ },
+ notification: function(args) {
+ return 'Destroyed VM: ' + args.name;
+ }
+ },
+ action: function(args) {
+ setTimeout(function() {
+ args.response.success({ data: { state: 'Destroying' }});
+ }, 200);
+ },
+ notification: {
+ poll: function(args) { args.complete(); }
+ }
+ }
+ },
+ dataProvider: function(args) {
+ $.ajax({
+ url: createURL('listVirtualMachines'),
+ success: function(json) {
+ args.response.success({ data: json.listvirtualmachinesresponse.virtualmachine });
+ }
+ });
+ }
+ }
+ },
+ tiers: {
+ actionPreFilter: function(args) {
+ return ['start'];
+ },
+ actions: {
+ // Add new tier
+ add: {
+ label: 'Add new tier to VPC',
+ action: function(args) {
+ setTimeout(function() {
+ args.response.success({
+ data: {
+ name: args.data.name,
+ cidr: args.data.cidr
+ }
+ });
+ }, 500);
+ },
+
+ createForm: {
+ title: 'Add new tier',
+ desc: 'Please fill in the following to add a new VPC tier.',
+ fields: {
+ name: { label: 'label.name', validation: { required: true } },
+ cidr: { label: 'label.cidr', validation: { required: true } }
+ }
+ },
+
+ notification: {
+ poll: function(args) { args.complete(); }
+ }
+ },
+ start: {
+ label: 'Start tier',
+ shortLabel: 'Start',
+ action: function(args) {
+ args.response.success();
+ },
+ notification: {
+ poll: function(args) { args.complete(); }
+ }
+ },
+ stop: {
+ label: 'Stop tier',
+ shortLabel: 'Stop',
+ action: function(args) {
+ args.response.success();
+ },
+ notification: {
+ poll: function(args) { args.complete(); }
+ }
+ },
+ addVM: {
+ label: 'Add VM to tier',
+ shortLabel: 'Add VM',
+ action: cloudStack.uiCustom.instanceWizard(
+ cloudStack.instanceWizard
+ ),
+ notification: {
+ poll: function(args) { args.complete(); }
+ }
+ },
+ acl: {
+ label: 'Configure ACL for tier',
+ shortLabel: 'ACL',
+ multiEdit: aclMultiEdit
+ },
+ remove: {
+ label: 'Remove tier',
+ action: function(args) {
+ args.response.success();
+ },
+ notification: {
+ poll: function(args) { args.complete(); }
+ }
+ }
+ },
+
+ // Get tiers
+ dataProvider: function(args) {
+ var tiers = [ // Dummy content
+ {
+ id: 1,
+ name: 'web',
+ cidr: '192.168.0.0/24',
+ virtualMachines: [
+ { name: 'i-2-VM' },
+ { name: 'i-3-VM' }
+ ]
+ },
+ {
+ id: 2,
+ name: 'app',
+ cidr: '10.0.0.0/24',
+ virtualMachines: []
+ }
+ ];
+
+ setTimeout(function() {
+ args.response.success({
+ data: {
+ tiers: tiers
+ }
+ });
+ }, 1000);
+ }
+ }
+ };
+}(jQuery, cloudStack));