VPC UI, chart: Color connector lines for tiers w/ public network

srinivasnd · Jun 4, 2013 · 934cee4 · 934cee4
1 parent 73c381a
commit 934cee4
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 4 deletions.
diff --git a/ui/modules/vpc/vpc.css b/ui/modules/vpc/vpc.css
@@ -25,8 +25,30 @@
   position: relative;
 }
 
+.vpc-network-chart .info-box {
+  font-size: 12px;
+  color: #6E6B6B;
+  padding: 9px 1px 10px 20px;
+  background: #FFFFFF;
+  border: 1px dotted #808080;
+  position: absolute;
+  top: 42px;
+  left: 10px;
+  width: 737px;
+}
+
+.vpc-network-chart .info-box .color-key {
+  display: block;
+  background: #2983E3;
+  padding: 1px;
+  float: left;
+  width: 10px;
+  height: 10px;
+  margin: 0px 9px 1px 0px;
+}
+
 .vpc-network-chart .tiers {
-  margin: 40px 46px 0 0;
+  margin: 66px 46px 0 0;
   width: 362px;
   float: right;
 }
@@ -249,8 +271,10 @@
   float: left;
   /*+placement:shift 10px 176px;*/
   position: relative;
+  left: 10px;
+  top: 176px;
   left: 0px;
-  top: 214px;
+  top: 240px;
 }
 
 .vpc-network-chart .tier-item.router .header {
@@ -325,6 +349,12 @@
   background: #CCCCCC;
 }
 
+.vpc-network-chart .connector-line.highlighted .connector-start,
+.vpc-network-chart .connector-line.highlighted .connector-mid,
+.vpc-network-chart .connector-line.highlighted .connector-end {
+  background: #2983E3;
+}
+
 .vpc-network-chart .connector-line .connector-start,
 .vpc-network-chart .connector-line .connector-end {
   height: 3px;

diff --git a/ui/modules/vpc/vpc.js b/ui/modules/vpc/vpc.js
@@ -117,12 +117,17 @@
       var $connector = $('<div></div>').addClass('connector-line');
       var $router = args.$router;
       var $tier = args.$tier;
+      var isHighlighted = args.isHighlighted;
       var $connectorStart = $('<div></div>').addClass('connector-start');
       var $connectorMid = $('<div></div>').addClass('connector-mid');
       var $connectorEnd = $('<div></div>').addClass('connector-end');
 
       $connector.append($connectorStart, $connectorMid, $connectorEnd);
 
+      if (isHighlighted) {
+        $connector.addClass('highlighted');
+      }
+
       var posStartOffsetLeft = 5;
       var posStartOffsetTop = 10;
       var posStart = {
@@ -309,6 +314,7 @@
         var $chart = $('<div>').addClass('vpc-network-chart');
         var $tiers = $('<div>').addClass('tiers');
         var $toolbar = $('<div>').addClass('toolbar');
+        var $info = $('<div>').addClass('info-box');
 
         $toolbar.appendTo($chart);
         $tiers.appendTo($chart);
@@ -344,7 +350,11 @@
                 // -- Needs to execute after chart generation is complete,
                 //    so that chart elements have positioning in place.
                 $chart.bind('cloudStack.vpc.chartReady', function() {
-                  elems.connectorLine({ $tier: $tier, $router: $router }).appendTo($chart);
+                  elems.connectorLine({
+                    $tier: $tier,
+                    $router: $router,
+                    isHighlighted: tier._highlighted
+                  }).appendTo($chart);
                 });
               });
 
@@ -362,6 +372,13 @@
               if (args.complete) {
                 args.complete($chart);
               }
+
+              if ($chart.find('.connector-line.highlighted').size()) {
+                $info.appendTo($chart).append(
+                  $('<span>').addClass('color-key'),
+                  $('<span>').html('= Contains a public network')
+                );
+              }
             }
           }
         });

diff --git a/ui/scripts/vpc.js b/ui/scripts/vpc.js
@@ -3379,7 +3379,18 @@
                     error = true;
                   }
                 });
-
+
+                // Highlight if any tier VM contains guest network
+                $.grep(
+                  virtualMachines.virtualmachine ? virtualMachines.virtualmachine : [],
+                  function(vm) {
+                    return $.grep(vm.nic,
+                                  function(nic) {
+                                    return nic.type == 'Shared';
+                                  }).length;
+                  }
+                ).length ? tier._highlighted = true : tier._highlighted = false;
+
                 return $.extend(tier, {
                   _dashboardItems: [
                     {