WIP chart connector lines

ui/modules/vpc/vpc.css

@@ -255,21 +255,21 @@
   padding: 15px 0 14px;
   border-bottom: 1px solid #808080;
   background: #C3C6C9;
-/*Old browsers*/
+  /*Old browsers*/
   background: -moz-linear-gradient(top, #c3c6c9 0%, #909497 100%);
-/*FF3.6+*/
+  /*FF3.6+*/
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c3c6c9), color-stop(100%,#909497));
-/*Chrome,Safari4+*/
+  /*Chrome,Safari4+*/
   background: -webkit-linear-gradient(top, #c3c6c9 0%,#909497 100%);
-/*Chrome10+,Safari5.1+*/
+  /*Chrome10+,Safari5.1+*/
   background: -o-linear-gradient(top, #c3c6c9 0%,#909497 100%);
-/*Opera 11.10+*/
+  /*Opera 11.10+*/
   background: -ms-linear-gradient(top, #c3c6c9 0%,#909497 100%);
-/*IE10+*/
+  /*IE10+*/
   background: linear-gradient(to bottom, #c3c6c9 0%,#909497 100%);
-/*W3C*/
+  /*W3C*/
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3c6c9', endColorstr='#909497',GradientType=0 );
-/*IE6-8*/
+  /*IE6-8*/
 }
 
 .vpc-network-chart .tier-item.router .header .title {
@@ -311,3 +311,32 @@
   background-color: #818181;
 }
 
+.vpc-network-chart .connector-line {
+}
+
+.vpc-network-chart .connector-line .connector-start,
+.vpc-network-chart .connector-line .connector-mid,
+.vpc-network-chart .connector-line .connector-end {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  background: #CCCCCC;
+}
+
+.vpc-network-chart .connector-line .connector-start,
+.vpc-network-chart .connector-line .connector-end {
+  height: 3px;
+}
+
+.vpc-network-chart .connector-line .connector-start {
+  width: 50px;
+  margin-left: 18px;
+}
+
+.vpc-network-chart .connector-line .connector-mid {
+  width: 3px;
+}
+
+.vpc-network-chart .connector-line .connector-end {
+}
+

ui/modules/vpc/vpc.js

@@ -113,6 +113,42 @@
       return $tier;
     },
 
+    connectorLine: function(args) {
+      var $connector = $('<div></div>').addClass('connector-line');
+      var $router = args.$router;
+      var $tier = args.$tier;
+      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);
+
+      // Start line (next to router)
+      $connectorStart.css({
+        top: $router.position().top + ($router.outerHeight() / 2 + ($tier.index() * 30)),
+        left: $router.position().left + $router.outerWidth()
+      });
+      $connectorStart.width(50 + ($tier.index() * 10));
+
+      // End line (next to tier)
+      $connectorEnd.width(50);
+      $connectorEnd.css({
+        top: $tier.position().top + ($tier.outerHeight() / 2),
+        left: $tier.position().left - $connectorEnd.width()
+      });
+
+      // Mid line (connect start->end)
+      $connectorMid.css({
+        left: $connectorEnd.position().left,
+        top: $connectorEnd.position().top
+      });
+      $connectorMid.height(
+        $connectorStart.position().top - $connectorEnd.position().top
+      );
+
+      return $connector;
+    },
+
     router: function(args) {
       var $router = elems.tier({
         context: args.context,
@@ -262,10 +298,17 @@
           response: {
             success: function(data) {
               var tiers = data.tiers;
+              var $router;
               var $placeholder = elems.tierPlaceholder({
                 context: context
               });
 
+              // Router
+              $router = elems.router({
+                context: context,
+                dashboardItems: data.routerDashboard
+              }).appendTo($chart);
+
               $(tiers).map(function(index, tier) {
                 var $tier = elems.tier({
                   context: context,
@@ -273,6 +316,9 @@
                   dashboardItems: tier._dashboardItems
                 });
                 $tier.appendTo($tiers);
+
+                // Connect tier to router via line
+                elems.connectorLine({ $tier: $tier, $router: $router }).appendTo($chart);
               });
 
               // Add placeholder tier
@@ -289,12 +335,6 @@
               if (args.complete) {
                 args.complete($chart);
               }
-
-              // Router
-              elems.router({
-                context: context,
-                dashboardItems: data.routerDashboard
-              }).appendTo($chart);
             }
           }
         });