From 6e303c10e35aa4876b9c39187db0cc94a8c2a662 Mon Sep 17 00:00:00 2001
From: Brian Federle <brian@cloud.com>
Date: Thu, 1 Dec 2011 13:46:31 -0800
Subject: [PATCH] Various fixes to network section

-bug 12141: Show VM details on static NAT chart

-Move VPN actions from list view to detail view, to avoid excessive
 server calls from being made (due to needing additional calls to get
 VPN/network data)

-Fix network action refresh for list view and detail view
---
 ui/css/cloudstack3.css          |  29 ++++
 ui/index-test.html              |   1 +
 ui/index.jsp                    |   1 +
 ui/scripts/network.js           | 255 +++++++++++++++-----------------
 ui/scripts/ui-custom/ipRules.js |  49 +++++-
 5 files changed, 198 insertions(+), 137 deletions(-)

diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index 8354fe3ad96..7b64a1de7b4 100644
--- a/ui/css/cloudstack3.css
+++ b/ui/css/cloudstack3.css
@@ -5691,6 +5691,35 @@ div.panel.ui-dialog div.list-view div.fixed-header {
   top: 44px;
 }
 
+.network-chart li.static-nat-enabled .vmname {
+  /*+placement:shift 16px 41px;*/
+  position: relative;
+  left: 16px;
+  top: 41px;
+  cursor: pointer;
+  padding: 7px;
+  font-size: 14px;
+  position: absolute;
+  color: #485563;
+  font-weight: bold;
+  /*+text-shadow:0px 1px 1px #000000;*/
+  -moz-text-shadow: 0px 1px 1px #000000;
+  -webkit-text-shadow: 0px 1px 1px #000000;
+  -o-text-shadow: 0px 1px 1px #000000;
+  text-shadow: 0px 1px 1px #000000;
+  background: url(../images/bg-gradients.png) repeat-x 2px -221px;
+  color: #FFFFFF;
+  /*+border-radius:9px;*/
+  -moz-border-radius: 9px;
+  -webkit-border-radius: 9px;
+  -khtml-border-radius: 9px;
+  border-radius: 9px 9px 9px 9px;
+}
+
+.network-chart li.static-nat-enabled .vmname:hover {
+  background-position: 0px -946px;
+}
+
 .network-chart li.static-nat-enabled .name {
   background: url(../images/sprites.png) no-repeat -6px -460px;
 }
diff --git a/ui/index-test.html b/ui/index-test.html
index c90975d02ba..4340ba4357f 100644
--- a/ui/index-test.html
+++ b/ui/index-test.html
@@ -707,6 +707,7 @@
         <ul>
           <li class="static-nat-enabled">
             <div class="name"><span>Static NAT Enabled</span></div>
+            <div class="vmname"></div>
           </li>
           <li class="firewall">
             <div class="name"><span>Firewall</span></div>
diff --git a/ui/index.jsp b/ui/index.jsp
index e2fb02d51bb..000e539fd5d 100644
--- a/ui/index.jsp
+++ b/ui/index.jsp
@@ -707,6 +707,7 @@
         <ul>
           <li class="static-nat-enabled">
             <div class="name"><span>Static NAT Enabled</span></div>
+            <div class="vmname"></div>
           </li>
           <li class="firewall">
             <div class="name"><span>Firewall</span></div>
diff --git a/ui/scripts/network.js b/ui/scripts/network.js
index 4bb3f84627f..35e6f2b0d36 100644
--- a/ui/scripts/network.js
+++ b/ui/scripts/network.js
@@ -162,10 +162,13 @@
                       _custom: {
                         jobId: data.associateipaddressresponse.jobid,
                         getUpdatedItem: function(data) {
-                          return data.queryasyncjobresultresponse.jobresult.ipaddress;
+                          var newIP = data.queryasyncjobresultresponse.jobresult.ipaddress;
+                          return $.extend(newIP, {
+                            state: 'Allocated'
+                          });
                         },
-                        getActionFilter: function(args) {
-                          return ['enableStaticNAT', 'destroy'];
+                        getActionFilter: function() {
+                          return actionFilters.ipAddress;
                         }
                       }
                     });
@@ -213,75 +216,6 @@
                 poll: pollAsyncJobResult
               }
             },
-            enableVPN: {
-              label: 'Enable VPN',
-              action: function(args) {
-                $.ajax({
-                  url: createURL('createRemoteAccessVpn'),
-                  data: {
-                    publicipid: args.context.ipAddresses[0].id,
-                    domainid: args.context.ipAddresses[0].domainid
-                  },
-                  dataType: 'json',
-                  async: true,
-                  success: function(data) {
-                    args.response.success({
-                      _custom: { jobId: data.createremoteaccessvpnresponse.jobid }
-                    });
-                  }
-                });
-              },
-              messages: {
-                confirm: function(args) {
-                  return 'Please confirm that you want VPN enabled for this IP address.';
-                },
-                notification: function(args) {
-                  return 'Enabled VPN';
-                },
-                complete: function(args) {
-                  return 'VPN is now enabled for IP ' + args.publicip + '.'
-                    + '<br/>Your IPsec pre-shared key is:<br/>' + args.presharedkey;
-                }
-              },
-              notification: {
-                poll: pollAsyncJobResult
-              }
-            },
-            disableVPN: {
-              label: 'Disable VPN',
-              action: function(args) {
-                $.ajax({
-                  url: createURL('deleteRemoteAccessVpn'),
-                  data: {
-                    publicipid: args.context.ipAddresses[0].id,
-                    domainid: args.context.ipAddresses[0].domainid
-                  },
-                  dataType: 'json',
-                  async: true,
-                  success: function(data) {
-                    args.response.success({
-                      _custom: {
-                        getUpdatedItem: function(data) {
-
-                        },
-                        jobId: data.deleteremoteaccessvpnresponse.jobid
-                      }
-                    });
-                  }
-                });
-              },
-              messages: {
-                confirm: function(args) {
-                  return 'Are you sure you want to disable VPN?';
-                },
-                notification: function(args) {
-                  return 'Disabled VPN';
-                }
-              },
-              notification: {
-                poll: pollAsyncJobResult
-              }
-            },
             enableStaticNAT: {
               label: 'Enable static NAT',
               action: {
@@ -314,7 +248,11 @@
               },
               notification: {
                 poll: function(args) {
-                  args.complete();
+                  args.complete({
+                    data: {
+                      isstaticnat: true
+                    }
+                  });
                 }
               }
             },
@@ -332,10 +270,13 @@
                     args.response.success({
                       _custom: {
                         jobId: data.disablestaticnatresponse.jobid,
+                        getUpdatedItem: function(json) {
+                          return $.extend(args.context.ipAddresses[0], {
+                            isstaticnat: false
+                          });
+                        },
                         getActionFilter: function() {
-                          return function(args) {
-                            return ['enableStaticNAT'];
-                          };
+                          return actionFilters.ipAddresses;
                         }
                       }
                     });
@@ -397,7 +338,6 @@
             }
           },
 
-          //dataProvider: testData.dataProvider.listView('network'),
           dataProvider: function(args) {
             var data = {
               page: args.page,
@@ -435,46 +375,9 @@
                   return;
                 }
 
-                // Get network data
-                $(items).each(function() {
-                  var item = this;
-                  $.ajax({
-                    url: createURL('listNetworks'),
-                    data: {
-                      networkid: this.networkid
-                    },
-                    dataType: 'json',
-                    async: true,
-                    success: function(data) {
-                      // Get VPN data
-                      $.ajax({
-                        url: createURL('listRemoteAccessVpns'),
-                        data: {
-                          publicipid: item.id
-                        },
-                        dataType: 'json',
-                        async: true,
-                        success: function(vpnResponse) {
-                          var isVPNEnabled = vpnResponse.listremoteaccessvpnsresponse.count;
-                          if (isVPNEnabled) {
-                            item.vpnenabled = true;
-                            item.remoteaccessvpn = vpnResponse.listremoteaccessvpnsresponse.remoteaccessvpn[0];
-                          };
-
-                          // Check if data retrieval complete
-                          item.network = data.listnetworksresponse.network[0];
-                          processedItems++;
-
-                          if (processedItems == items.length) {
-                            args.response.success({
-                              actionFilter: actionFilters.ipAddress,
-                              data: items
-                            });
-                          }
-                        }
-                      });
-                    }
-                  });
+                args.response.success({
+                  actionFilter: actionFilters.ipAddress,
+                  data: items
                 });
               }
             });
@@ -484,6 +387,25 @@
           detailView: {
             name: 'IP address detail',
             tabFilter: function(args) {
+              var item = args.context.ipAddresses[0];
+              
+              // Get VPN data
+              $.ajax({
+                url: createURL('listRemoteAccessVpns'),
+                data: {
+                  publicipid: item.id
+                },
+                dataType: 'json',
+                async: false,
+                success: function(vpnResponse) {
+                  var isVPNEnabled = vpnResponse.listremoteaccessvpnsresponse.count;
+                  if (isVPNEnabled) {
+                    item.vpnenabled = true;
+                    item.remoteaccessvpn = vpnResponse.listremoteaccessvpnsresponse.remoteaccessvpn[0];
+                  };
+                }
+              });
+              
               var disabledTabs = [];
               var ipAddress = args.context.ipAddresses[0];
 
@@ -508,7 +430,18 @@
                     async: true,
                     success: function(data) {
                       args.response.success({
-                        _custom: { jobId: data.createremoteaccessvpnresponse.jobid }
+                        _custom: {
+                          getUpdatedItem: function(json) {
+                            return {
+                              vpn: json.queryasyncjobresultresponse.jobresult.remoteaccessvpn,
+                              vpnenabled: true
+                            };
+                          },
+                          getActionFilter: function() {
+                            return actionFilters.ipAddress;
+                          },
+                          jobId: data.createremoteaccessvpnresponse.jobid
+                        }
                       });
                     }
                   });
@@ -521,8 +454,8 @@
                     return 'Enabled VPN';
                   },
                   complete: function(args) {
-                    return 'VPN is now enabled for IP ' + args.publicip + '.'
-                      + '<br/>Your IPsec pre-shared key is:<br/>' + args.presharedkey;
+                    return 'VPN is now enabled for IP ' + args.vpn.publicip + '.'
+                      + '<br/>Your IPsec pre-shared key is:<br/>' + args.vpn.presharedkey;
                   }
                 },
                 notification: {
@@ -544,8 +477,11 @@
                       args.response.success({
                         _custom: {
                           getUpdatedItem: function(data) {
-
+                            return {
+                              vpnenabled: false
+                            };
                           },
+                          getActionFilter: function() { return actionFilters.ipAddress; },
                           jobId: data.deleteremoteaccessvpnresponse.jobid
                         }
                       });
@@ -587,16 +523,17 @@
                   })
                 },
                 messages: {
-                  confirm: function(args) {
-                    return 'Are you sure you want to enable static NAT?';
-                  },
                   notification: function(args) {
                     return 'Enabled Static NAT';
                   }
                 },
                 notification: {
                   poll: function(args) {
-                    args.complete();
+                    args.complete({
+                      data: {
+                        isstaticnat: true
+                      }
+                    });
                   }
                 }
               },
@@ -614,6 +551,11 @@
                       args.response.success({
                         _custom: {
                           jobId: data.disablestaticnatresponse.jobid,
+                          getUpdatedItem: function() {
+                            return {
+                              isstaticnat: false
+                            };
+                          },
                           getActionFilter: function() {
                             return function(args) {
                               return ['enableStaticNAT'];
@@ -695,18 +637,49 @@
 
                 //dataProvider: testData.dataProvider.detailView('network')
                 dataProvider: function(args) {
+                  var items = args.context.ipAddresses;
+
+                  // Get network data
                   $.ajax({
                     url: createURL("listPublicIpAddresses&id="+args.id),
                     dataType: "json",
                     async: true,
                     success: function(json) {
-                      var items = json.listpublicipaddressesresponse.publicipaddress;
-                      if(items != null && items.length > 0) {
-                        args.response.success({
-                          actionFilter: actionFilters.ipAddress,
-                          data: items[0]
-                        });
-                      }
+                      var item = items[0];
+                      $.ajax({
+                        url: createURL('listNetworks'),
+                        data: {
+                          networkid: this.networkid
+                        },
+                        dataType: 'json',
+                        async: true,
+                        success: function(data) {
+                          // Get VPN data
+                          $.ajax({
+                            url: createURL('listRemoteAccessVpns'),
+                            data: {
+                              publicipid: item.id
+                            },
+                            dataType: 'json',
+                            async: true,
+                            success: function(vpnResponse) {
+                              var isVPNEnabled = vpnResponse.listremoteaccessvpnsresponse.count;
+                              if (isVPNEnabled) {
+                                item.vpnenabled = true;
+                                item.remoteaccessvpn = vpnResponse.listremoteaccessvpnsresponse.remoteaccessvpn[0];
+                              };
+
+                              // Check if data retrieval complete
+                              item.network = data.listnetworksresponse.network[0];
+
+                              args.response.success({
+                                actionFilter: actionFilters.ipAddress,
+                                data: item
+                              });
+                            }
+                          });
+                        }
+                      });
                     }
                   });
                 }
@@ -841,6 +814,24 @@
                     }
                   },
 
+                  vmDataProvider: function(args) {
+                    $.ajax({
+                      url: createURL('listVirtualMachines'),
+                      data: {
+                        id: args.context.ipAddresses[0].virtualmachineid
+                      },
+                      dataType: 'json',
+                      async: true,
+                      success: function(data) {
+                        args.response.success({
+                          data: data.listvirtualmachinesresponse.virtualmachine[0]
+                        });
+                      }
+                    });
+                  },
+
+                  vmDetails: cloudStack.sections.instances.listView.detailView,
+
                   staticNAT: {
                     noSelect: true,
                     fields: {
diff --git a/ui/scripts/ui-custom/ipRules.js b/ui/scripts/ui-custom/ipRules.js
index 416963e4231..960627ceff6 100644
--- a/ui/scripts/ui-custom/ipRules.js
+++ b/ui/scripts/ui-custom/ipRules.js
@@ -2,7 +2,7 @@
   cloudStack.ipRules = function(args) {
     return function(detailArgs) {
       var context = detailArgs.context;
-      
+
       var portMultiEdit = function(args) {
         return $('<div>').multiEdit(args);
       };
@@ -10,7 +10,7 @@
       var makeMultiEditPanel = function($item, options) {
         if (!options) options = {};
         if ($item.closest('li').hasClass('disabled')) return false;
-        
+
         var targetId = $item.attr('net-target');
         var targetName = $item.parent().find('.name').find('span').html();
         var target = args[targetId];
@@ -44,11 +44,50 @@
 
       var staticNATChart = function(args) {
         var $chart = $('#template').find('.network-chart.static-nat').clone();
+        var $vmName = $chart.find('li.static-nat-enabled .vmname');
+        var $browser = $('#browser .container');
+        var vmID = context.ipAddresses[0].virtualmachineid;
+        var vmName = context.ipAddresses[0].virtualmachinename;
+        var vmDetails = args.vmDetails;
+        var vmDataProvider = args.vmDataProvider;
 
         $chart.find('li.firewall .view-details').click(function() {
           makeMultiEditPanel($(this), { title: 'NAT Port Range'});
         });
-        
+
+        $vmName.append(
+          $('<span>').html('VM: ' + vmName)
+        );
+
+        $vmName.click(function() {
+          $browser.cloudBrowser('addPanel', {
+            title: 'Static NAT VM Details',
+            complete: function($newPanel) {
+              vmDataProvider({
+                context: context,
+                response: {
+                  success: function(args) {
+                    var instance = args.data;
+                    var detailViewArgs = $.extend(true, {}, vmDetails, {
+                      $browser: $browser,
+                      context: $.extend(true, {}, context, {
+                        instances: [instance]
+                      }),
+                      jsonObj: instance,
+                      id: instance.id
+                    });
+
+                    // No actions available
+                    detailViewArgs.actions = {};
+
+                    $newPanel.detailView(detailViewArgs);
+                  }
+                }
+              });
+            }
+          });
+        });
+
         return $chart;
       };
 
@@ -67,11 +106,11 @@
           } else {
             $(preFilter).each(function() {
               var id = this;
-              
+
               var $li = $chart.find('li').filter(function() {
                 return $(this).hasClass(id);
               }).addClass('disabled');
-            });            
+            });
           }
         }