From 5ff964de72fe07eec2970ac7e68f7406dc60dfbd Mon Sep 17 00:00:00 2001
From: Brian Federle <brian.federle@citrix.com>
Date: Fri, 10 Aug 2012 12:58:17 -0700
Subject: [PATCH] VPC UI: New ACL flow

-Remove the ACL action from the tier chart item

-Adds an ACL overview list view under the VPC configure menu which
 displays each tier and their total # of ACLs.

-Add ACL edit to tier detail view

- (misc) Also add IP address tab to tier detail view
---
 ui/css/cloudstack3.css             |  37 ++++++
 ui/scripts/ui-custom/vpc.js        | 144 ++++++++++++++++++----
 ui/scripts/ui/widgets/multiEdit.js |   1 +
 ui/scripts/vpc.js                  | 190 +++++++++++++++++++++++++----
 4 files changed, 324 insertions(+), 48 deletions(-)

diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index 2f5afa747d7..65df2fc4f9c 100644
--- a/ui/css/cloudstack3.css
+++ b/ui/css/cloudstack3.css
@@ -9695,6 +9695,43 @@ div.panel.ui-dialog div.list-view div.fixed-header {
   max-width: 184px !important;
 }
 
+div.ui-dialog div.acl div.multi-edit table.multi-edit thead tr th,
+div.ui-dialog div.acl div.multi-edit table.multi-edit tbody tr td {
+  min-width: 75px;
+}
+
+div.ui-dialog div.acl div.multi-edit div.data div.data-body div.data-item table tbody tr td {
+  width: 100%;
+  min-width: 77px;
+}
+
+.detail-view .acl .multi-edit {
+}
+
+.detail-view .acl .multi-edit th,
+.detail-view .acl .multi-edit td {
+  padding-right: 0px !important;
+  min-width: 25px !important;
+}
+
+.detail-view .acl .multi-edit th {
+  font-size: 10px;
+}
+
+.detail-view .acl .multi-edit input {
+  width: 50px;
+}
+
+.detail-view .acl .multi-edit .add-vm {
+  width: 51px;
+  text-indent: 0px;
+  padding-right: 0px;
+}
+
+.detail-view .acl .multi-edit td.multi-actions {
+  width: 65px;
+}
+
 /*Autoscaler*/
 .ui-dialog div.autoscaler {
   overflow: auto;
diff --git a/ui/scripts/ui-custom/vpc.js b/ui/scripts/ui-custom/vpc.js
index 5e4a5580f33..5d3a5dc5e11 100644
--- a/ui/scripts/ui-custom/vpc.js
+++ b/ui/scripts/ui-custom/vpc.js
@@ -10,21 +10,53 @@
 // limitations under the License.
 (function($, cloudStack) {
   var elems = {
+    aclDialog: function(args) {
+      var isDialog = args.isDialog;
+      var actionArgs = args.actionArgs;
+      var context = args.context;
+      var $acl = $('<div>').addClass('acl').multiEdit(
+        $.extend(true, {}, actionArgs.multiEdit, {
+          context: context
+        })
+      );
+
+      // Show ACL dialog
+      if (isDialog) {
+        $acl.dialog({
+          title: 'Configure ACL',
+          dialogClass: 'configure-acl',
+          width: 900,
+          height: 600,
+          buttons: {
+            'Done': function() {
+              $(':ui-dialog').remove();
+              $('.overlay').remove();
+            }
+          }
+        });
+      }
+
+      return $acl;
+    },
     vpcConfigureTooltip: function(args) {
+      var context = args.context;
       var $browser = args.$browser;
       var $chart = args.$chart;
       var ipAddresses = args.ipAddresses;
+      var acl = args.acl;
       var gateways = args.gateways;
       var siteToSiteVPN = args.siteToSiteVPN;
       var links = {
         'ip-addresses': 'IP Addresses',
         'gateways': 'Private Gateway',
-        'site-to-site-vpn': 'Site-to-site VPN'
+        'site-to-site-vpn': 'Site-to-site VPN',
+        'network-acls':  'ACLs'
       };
       var $links = $('<ul>').addClass('links');
       var $tooltip = $('<div>').addClass('vpc-configure-tooltip').append(
         $('<div>').addClass('arrow')
       );
+      var tierDetailView = args.tierDetailView;
 
       // Make links
       $.map(links, function(label, id) {
@@ -37,6 +69,37 @@
         // Link event
         $link.click(function() {
           switch (id) {
+          case 'network-acls':
+              $browser.cloudBrowser('addPanel', {
+              title: 'Network ACLs',
+              maximizeIfSelected: true,
+              complete: function($panel) {
+                $panel.listView(
+                  $.extend(true, {}, acl.listView, {
+                    listView: {
+                      actions: {
+                        add: {
+                          label: 'Add network ACL',
+                          action: {
+                            custom: function() {
+                              elems.aclDialog({
+                                isDialog: true,
+                                actionArgs: acl,
+                                context: context
+                              });
+                            }
+                          }
+                        }
+                      },
+                      detailView: tierDetailView
+                    }
+                  }),
+                  { context: acl.context }
+                );
+              }
+            });
+            break;
+
           case 'ip-addresses':
             $browser.cloudBrowser('addPanel', {
               title: 'IP Addresses',
@@ -194,24 +257,30 @@
       return $tooltip;
     },
     vpcConfigureArea: function(args) {
+      var context = args.context;
       var $browser = args.$browser;
       var $chart = args.$chart;
       var ipAddresses = args.ipAddresses;
+      var acl = args.acl;
       var gateways = args.gateways;
       var siteToSiteVPN = args.siteToSiteVPN;
       var $config = $('<div>').addClass('config-area');
       var $configIcon = $('<span>').addClass('icon').html('&nbsp');
-
+      var tierDetailView = args.tierDetailView;
+      
       $config.append($configIcon);
 
       // Tooltip event
       $configIcon.mouseover(function() {
         var $tooltip = elems.vpcConfigureTooltip({
+          context: context,
           $browser: $browser,
           $chart: $chart,
           ipAddresses: ipAddresses,
           gateways: gateways,
-          siteToSiteVPN: siteToSiteVPN
+          acl: acl,
+          siteToSiteVPN: siteToSiteVPN,
+          tierDetailView: tierDetailView
         });
 
         // Make sure tooltip is center aligned with icon
@@ -234,6 +303,8 @@
       return $router;
     },
     tier: function(args) {
+      var ipAddresses = args.ipAddresses;
+      var acl = args.acl;
       var name = args.name;
       var cidr = args.cidr;
       var context = args.context;
@@ -310,7 +381,7 @@
       if (isPlaceholder) {
         $tier.addClass('placeholder');
         $title.html('Create Tier');
-      } else {
+      } else {        
         $title.html(
           cloudStack.concat(name, 8)
         );
@@ -379,6 +450,7 @@
     },
     chart: function(args) {
       var $browser = args.$browser;
+      var acl = args.acl;
       var ipAddresses = args.ipAddresses;
       var gateways = args.gateways;
       var siteToSiteVPN = args.siteToSiteVPN;
@@ -398,11 +470,14 @@
             )
             .append(
               elems.vpcConfigureArea({
+                context: context,
                 $browser: $browser,
                 $chart: $chart,
                 ipAddresses: $.extend(ipAddresses, {context: context}),
                 gateways: $.extend(gateways, {context: context}),
-                siteToSiteVPN: $.extend(siteToSiteVPN, {context: context})
+                siteToSiteVPN: $.extend(siteToSiteVPN, {context: context}),
+                acl: $.extend(acl, {context: context}),
+                tierDetailView: tierDetailView
               })
             );
 
@@ -412,9 +487,11 @@
         }
 
         addTierDialog({
+          ipAddresses: ipAddresses,
           $browser: $browser,
           tierDetailView: tierDetailView,
           $tiers: $tiers,
+          acl: acl,
           context: context,
           actions: actions,
           vmListView: vmListView,
@@ -427,6 +504,8 @@
       if (tiers != null && tiers.length > 0) {
         $(tiers).map(function(index, tier) {
           var $tier = elems.tier({
+            ipAddresses: ipAddresses,
+            acl: acl,
             $browser: $browser,
             detailView: tierDetailView,
             name: tier.name,
@@ -590,22 +669,10 @@
       });
       break;
     case 'acl':
-      // Show ACL dialog
-      $('<div>').addClass('acl').multiEdit(
-        $.extend(true, {}, actionArgs.multiEdit, {
-          context: context
-        })
-      ).dialog({
-        title: 'Configure ACL for tier: ' + $tier.find('.title').attr('title'),
-        dialogClass: 'configure-acl',
-        width: 900,
-        height: 600,
-        buttons: {
-          'Done': function() {
-            $(':ui-dialog').remove();
-            $('.overlay').remove();
-          }
-        }
+      elems.aclDialog({
+        isDialog: true,
+        actionArgs: actionArgs,
+        context: context  
       }).closest('.ui-dialog').overlay();
       break;
     default:
@@ -623,6 +690,8 @@
 
   // Appends a new tier to chart
   var addNewTier = function(args) {
+    var ipAddresses = args.ipAddresses;
+    var acl = args.acl;
     var actions = args.actions;
     var vmListView = args.vmListView;
     var actionPreFilter = args.actionPreFilter;
@@ -630,12 +699,14 @@
     var $browser = args.$browser;
     var tierDetailView = args.tierDetailView;
     var tier = $.extend(args.tier, {
+      ipAddresses: ipAddresses,
       $browser: $browser,
       detailView: tierDetailView,
       context: context,
       vmListView: vmListView,
       actions: actions,
       actionPreFilter: actionPreFilter,
+      acl: acl,
       virtualMachines: []
     });
     var $tiers = args.$tiers;
@@ -650,6 +721,7 @@
 
   // Renders the add tier form, in a dialog
   var addTierDialog = function(args) {
+    var ipAddresses = args.ipAddresses;
     var actions = args.actions;
     var context = args.context;
     var vmListView = args.vmListView;
@@ -657,6 +729,7 @@
     var $tiers = args.$tiers;
     var $browser = args.$browser;
     var tierDetailView = args.tierDetailView;
+    var acl = args.acl;
 
     cloudStack.dialog.createForm({
       context: context,
@@ -680,12 +753,14 @@
                 function(args) {
                   $loading.remove();
                   addNewTier({
+                    ipAddresses: ipAddresses,
                     $browser: $browser,
                     tierDetailView: tierDetailView,
                     context: $.extend(true, {}, context, {
                       networks: [tier]
                     }),
                     tier: tier,
+                    acl: acl,
                     $tiers: $tiers,
                     actions: actions,
                     actionPreFilter: actionPreFilter,
@@ -716,6 +791,7 @@
     var tierArgs = args.tiers;
     var ipAddresses = args.ipAddresses;
     var gateways = args.gateways;
+    var acl = args.acl;
     var siteToSiteVPN = args.siteToSiteVPN;
 
     return function(args) {
@@ -737,12 +813,36 @@
             context: context,
             response: {
               success: function(args) {
+                // Setup detail view tabs
+                var tierDetailView = $.extend(true, {}, tierArgs.detailView, {
+                  tabs: {
+                    acl: {
+                      custom: function(args) {
+                        var $acl = elems.aclDialog({
+                          isDialog: false,
+                          actionArgs: acl,
+                          context: args.context
+                        });
+                        
+                        return $acl;
+                      }
+                    },
+                    ipAddresses: {
+                      custom: function(args) {
+                        return $('<div>').listView(ipAddresses.listView(),
+                                                   {context: args.context});
+                      }
+                    }
+                  }
+                });
+                
                 var tiers = args.tiers;
                 var $chart = elems.chart({
                   $browser: $browser,
                   ipAddresses: ipAddresses,
                   gateways: gateways,
-                  tierDetailView: tierArgs.detailView,
+                  acl: acl,
+                  tierDetailView: tierDetailView,
                   siteToSiteVPN: siteToSiteVPN,
                   vmListView: vmListView,
                   context: context,
diff --git a/ui/scripts/ui/widgets/multiEdit.js b/ui/scripts/ui/widgets/multiEdit.js
index 291820fed9f..7868428f7a7 100644
--- a/ui/scripts/ui/widgets/multiEdit.js
+++ b/ui/scripts/ui/widgets/multiEdit.js
@@ -913,6 +913,7 @@
           context: context,
           data: data,
           itemData: itemData,
+          $multi: $multi,
           response: {
             success: function(successArgs) {
               var notification = successArgs ? successArgs.notification : null;
diff --git a/ui/scripts/vpc.js b/ui/scripts/vpc.js
index 103948d449f..ce9b779a58d 100644
--- a/ui/scripts/vpc.js
+++ b/ui/scripts/vpc.js
@@ -59,6 +59,42 @@
       },
       'startport': { edit: true, label: 'label.start.port' },
       'endport': { edit: true, label: 'label.end.port' },
+      'networkid': {
+        label: 'Select Tier',
+        select: function(args) {
+          var data = {
+            listAll: true,
+            vpcid: args.context.vpc[0].id
+          };
+
+          // Only show selected tier, if viewing from detail view
+          if (args.context.networks &&
+              args.context.networks[0] &&
+              args.context.networks[0].vpcid) {
+            $.extend(data, {
+              id: args.context.networks[0].id
+            });
+          }
+          
+          //  Ajax Call to display the Tiers
+          $.ajax({
+            url: createURL('listNetworks'),
+            data: data,
+            success: function(json) {
+              var networks = json.listnetworksresponse.network;
+              
+              args.response.success({
+                data: $(networks).map(function(index, network) {
+                  return {
+                    name: network.id,
+                    description: network.name
+                  };
+                })
+              });
+            }
+          });
+        }
+      },
       'icmptype': { edit: true, label: 'ICMP.type', isDisabled: true },
       'icmpcode': { edit: true, label: 'ICMP.code', isDisabled: true },
       'traffictype' : {
@@ -83,16 +119,31 @@
     add: {
       label: 'Add',
       action: function(args) {
+        var $multi = args.$multi;
+        
         $.ajax({
           url: createURL('createNetworkACL'),
           data: $.extend(args.data, {
-            networkid: args.context.networks[0].id
+            networkid: args.data.networkid
           }),
           dataType: 'json',
           success: function(data) {
             args.response.success({
               _custom: {
-                jobId: data.createnetworkaclresponse.jobid
+                jobId: data.createnetworkaclresponse.jobid,
+                getUpdatedItem: function(json) {
+                  var networkName = $multi.find('select[name=networkid] option[value=' + args.data.networkid + ']').html();
+                  var data = $.extend(json.queryasyncjobresultresponse.jobresult.networkacl, {
+                    networkid: networkName
+                  });
+                  var aclRules = $multi.data('acl-rules');
+                  
+                  aclRules.push(data);
+                  $multi.data('acl-rules', aclRules);
+                  $(window).trigger('cloudStack.fullRefresh');
+
+                  return data;
+                }
               },
               notification: {
                 label: 'Add ACL',
@@ -121,7 +172,10 @@
               var jobID = data.deletenetworkaclresponse.jobid;
               args.response.success({
                 _custom: {
-                  jobId: jobID
+                  jobId: jobID,
+                  getUpdatedItem: function() {
+                    $(window).trigger('cloudStack.fullRefresh');
+                  }
                 },
                 notification: {
                   label: 'Remove ACL',
@@ -137,23 +191,42 @@
       }
     },
     dataProvider: function(args) {
-      $.ajax({
-        url: createURL('listNetworkACLs'),
-        data: {
-          listAll: true,
-          networkid: args.context.networks[0].id
-        },
-        dataType: 'json',
-        async: true,
-        success: function(json) {
-          args.response.success({
-            data: json.listnetworkaclsresponse.networkacl
-          });
-        },
-        error: function(XMLHttpResponse) {
-          args.response.error(parseXMLHttpResponse(XMLHttpResponse));
-        }
-      });
+      var $multi = args.$multi;
+      var data = {
+        vpcid: args.context.vpc[0].id,
+        listAll: true
+      };
+
+      if (!$multi.data('acl-rules')) {
+        $multi.data('acl-rules', []);
+      }
+
+      if (args.context.networks &&
+          args.context.networks[0] &&
+          args.context.networks[0].vpcid) {
+        data.networkid = args.context.networks[0].id;
+
+        $.ajax({
+          url: createURL('listNetworkACLs'),
+          data: data,
+          dataType: 'json',
+          async: true,
+          success: function(json) {
+            args.response.success({
+              data: $(json.listnetworkaclsresponse.networkacl).map(function(index, acl) {
+                return $.extend(acl, {
+                  networkid: args.context.networks[0].name
+                });
+              })
+            });
+          },
+          error: function(XMLHttpResponse) {
+            args.response.error(parseXMLHttpResponse(XMLHttpResponse));
+          }
+        });
+      } else {
+        args.response.success({ data: $multi.data('acl-rules') });
+      }
     }
   };
 
@@ -437,6 +510,54 @@
         return cloudStack.sections.network.sections.ipAddresses;
       }
     },
+    acl: {
+      multiEdit: aclMultiEdit,
+      
+      listView: {
+        listView: {
+          id: 'networks',
+          fields: {
+            tierName: { label: 'Tier' },
+            aclTotal: { label: 'ACL Total' }
+          },
+          dataProvider: function(args) {
+            $.ajax({
+              url: createURL('listNetworks'),
+              data: {
+                listAll: true,
+                vpcid: args.context.vpc[0].id
+              },
+              success: function(json) {
+                args.response.success({
+                  data: $.map(json.listnetworksresponse.network, function(tier) {
+                    var aclTotal = 0;
+                    
+                    // Get ACL total
+                    $.ajax({
+                      url: createURL('listNetworkACLs'),
+                      async: false,
+                      data: {
+                        listAll: true,
+                        networkid: tier.id
+                      },
+                      success: function(json) {
+                        aclTotal = json.listnetworkaclsresponse.networkacl ?
+                          json.listnetworkaclsresponse.networkacl.length : 0;
+                      }
+                    });
+                    
+                    return $.extend(tier, {
+                      tierName: tier.name,
+                      aclTotal: aclTotal
+                    });
+                  })
+                });
+              }
+            });
+          }
+        }      
+      }
+    },
     gateways: {
       add: {
         preCheck: function(args) {
@@ -1427,7 +1548,7 @@
         isMaximized: true,
         tabs: {
           details: {
-            title: 'label.tier.details',
+            title: 'Network Details',
             preFilter: function(args) {
               var hiddenFields = [];
               var zone;
@@ -1569,6 +1690,22 @@
             }
           },
 
+          acl: {
+            title: 'Network ACL',
+            custom: function(args) {
+              // Widget renders ACL multi-edit, overriding this fn
+              return $('<div>');
+            }
+          },
+
+          ipAddresses: {
+            title: 'label.menu.ipaddresses',
+            custom: function(args) {
+              // Widget renders IP addresses, overriding this fn
+              return $('<div>');
+            }
+          },
+
           addloadBalancer: {
             title: 'label.add.load.balancer',
             custom: function(args) {
@@ -1925,13 +2062,14 @@
             poll: pollAsyncJobResult
           }
         },
-
-        acl: {
+        
+        // Removing ACL buttons from the tier chart
+        /* acl: {
           label: 'Configure ACL for tier',
           shortLabel: 'ACL',
-          multiEdit: aclMultiEdit
-        },
-
+         multiEdit: aclMultiEdit
+        }, */
+            
         remove: {
           label: 'Remove tier',
           action: function(args) {