Updated Branches:
  refs/heads/ui-vpc-redesign 2a966f35f -> 04cc92dee

WIP chart connector lines


Project: http://git-wip-us.apache.org/repos/asf/cloudstack/repo
Commit: http://git-wip-us.apache.org/repos/asf/cloudstack/commit/04cc92de
Tree: http://git-wip-us.apache.org/repos/asf/cloudstack/tree/04cc92de
Diff: http://git-wip-us.apache.org/repos/asf/cloudstack/diff/04cc92de

Branch: refs/heads/ui-vpc-redesign
Commit: 04cc92deee848f2c82bb69fa0a350ddce955bfdd
Parents: 2a966f3
Author: Brian Federle <[email protected]>
Authored: Thu May 30 14:58:34 2013 -0700
Committer: Brian Federle <[email protected]>
Committed: Thu May 30 14:58:34 2013 -0700

----------------------------------------------------------------------
 ui/modules/vpc/vpc.css |   45 ++++++++++++++++++++++++++++++------
 ui/modules/vpc/vpc.js  |   52 ++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 83 insertions(+), 14 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/cloudstack/blob/04cc92de/ui/modules/vpc/vpc.css
----------------------------------------------------------------------
diff --git a/ui/modules/vpc/vpc.css b/ui/modules/vpc/vpc.css
index 51c3f7e..e558e4b 100644
--- a/ui/modules/vpc/vpc.css
+++ b/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 {
+}
+

http://git-wip-us.apache.org/repos/asf/cloudstack/blob/04cc92de/ui/modules/vpc/vpc.js
----------------------------------------------------------------------
diff --git a/ui/modules/vpc/vpc.js b/ui/modules/vpc/vpc.js
index a6037c0..1f6745f 100644
--- a/ui/modules/vpc/vpc.js
+++ b/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);
             }
           }
         });

Reply via email to