Add base VPC chart

ui/modules/modules.js

@@ -16,5 +16,6 @@
 // under the License.
 (function($, cloudStack) {
   cloudStack.modules = [
+    'vpc'
   ];
 }(jQuery, cloudStack));

ui/modules/vpc/vpc.css

@@ -0,0 +1,100 @@
+/*[fmt]1C20-1C0D-E*/
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+.vpc-network-chart {
+}
+
+.vpc-network-chart .tiers {
+}
+
+.vpc-network-chart .tier-item {
+  border: 1px solid #477FB4;
+  overflow: hidden;
+  width: 326px;
+  height: 182px;
+  margin: 18px;
+  /*+border-radius:4px;*/
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -khtml-border-radius: 4px;
+  border-radius: 4px;
+  background: #8DB1D3;
+}
+
+.vpc-network-chart .tier-item .header {
+  padding: 7px 0 6px;
+  /*+box-shadow:inset 0px 1px 1px #FFFFFF;*/
+  -moz-box-shadow: inset 0px 1px 1px #FFFFFF;
+  -webkit-box-shadow: inset 0px 1px 1px #FFFFFF;
+  -o-box-shadow: inset 0px 1px 1px #FFFFFF;
+  box-shadow: inset 0px 1px 1px #FFFFFF;
+  background: #69839D;
+  border-bottom: 1px solid #40639E;
+}
+
+.vpc-network-chart .tier-item .header .title {
+  margin-left: 9px;
+  max-width: 268px;
+  overflow: hidden;
+}
+
+.vpc-network-chart .tier-item .header .title span {
+  font-size: 20px;
+  color: #FFFFFF;
+  /*+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;
+}
+
+.vpc-network-chart .tier-item .content {
+  width: 100%;
+  height: 83%;
+  /*+box-shadow:inset 0px 1px 1px #FFFFFF;*/
+  -moz-box-shadow: inset 0px 1px 1px #FFFFFF;
+  -webkit-box-shadow: inset 0px 1px 1px #FFFFFF;
+  -o-box-shadow: inset 0px 1px 1px #FFFFFF;
+  box-shadow: inset 0px 1px 1px #FFFFFF;
+  border-bottom: 1px solid #8DB1D3;
+}
+
+.vpc-network-chart .tier-item .content .dashboard {
+  height: 117px;
+}
+
+.vpc-network-chart .tier-item .content .info {
+  padding: 7px 0 10px 9px;
+}
+
+.vpc-network-chart .tier-item .content .info .cidr-label {
+  font-size: 10px;
+  color: #1860A7;
+}
+
+.vpc-network-chart .tier-item .content .info .cidr {
+  color: #364553;
+  font-size: 10px;
+  /*+text-shadow:0px 1px #C7D8E9;*/
+  -moz-text-shadow: 0px 1px #C7D8E9;
+  -webkit-text-shadow: 0px 1px #C7D8E9;
+  -o-text-shadow: 0px 1px #C7D8E9;
+  text-shadow: 0px 1px #C7D8E9;
+}
+

ui/modules/vpc/vpc.js

@@ -0,0 +1,70 @@
+(function($, cloudStack) {
+  var elems = {
+    chart: {
+      tier: function(args) {
+        var tier = args.tier;
+        var $tier = $('<div>').addClass('tier-item');
+        var $header = $('<div>').addClass('header');
+        var $title = $('<div>').addClass('title').append($('<span>'));
+        var $content = $('<div>').addClass('content');
+        var $dashboard = $('<div>').addClass('dashboard');
+        var $info = $('<div>').addClass('info');
+        var $cidrLabel = $('<span>').addClass('cidr-label');
+        var $cidr = $('<span>').addClass('cidr');
+
+        $cidrLabel.html('CIDR: ');
+        $cidr.html(tier.cidr);
+        $title.find('span').html(tier.displayname ? tier.displayname : tier.name);
+        $header.append($title);
+        $info.append($cidrLabel, $cidr);
+        $content.append($dashboard, $info);
+        $tier.append($header, $content);
+
+        return $tier;
+      }
+    }
+  };
+
+  cloudStack.modules.vpc = function(module) {
+    var vpc = cloudStack.vpc;
+    var vpcSection = cloudStack.sections.network.sections.vpc;
+    var listConfigureAction = vpcSection.listView.actions.configureVpc.action;
+    var detailsConfigureAction = vpcSection.listView.detailView.actions.configureVpc.action;
+
+    var vpcChart = function(args) {
+      var context = args.context;
+      var vpcItem = context.vpc[0];
+      var $chart = $('<div>').addClass('vpc-network-chart');
+      var $tiers = $('<div>').addClass('tiers');
+
+      $tiers.appendTo($chart);
+      
+      // Get tiers
+      vpc.tiers.dataProvider({
+        context: context,
+        response: {
+          success: function(data) {
+            var tiers = data.tiers;
+
+            $(tiers).map(function(index, tier) {
+              var $tier = elems.chart.tier({ tier: tier });
+
+              $tier.appendTo($tiers);
+            });
+          }
+        }
+      });
+      
+      $('#browser .container').cloudBrowser('addPanel', {
+        title: vpcItem.displaytext ? vpcItem.displaytext : vpcItem.name,
+        maximizeIfSelected: true,
+        complete: function($panel) {
+          $chart.appendTo($panel);
+        }
+      });
+    };
+
+    listConfigureAction.custom = vpcChart;
+    detailsConfigureAction.custom = vpcChart;
+  };
+}(jQuery, cloudStack));