Skip to content

Commit 392d55d

Browse files
bfederlebfederle
committed
Add base VPC chart
1 parent b29449b commit 392d55d

3 files changed

Lines changed: 171 additions & 0 deletions

File tree

‎ui/modules/modules.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,6 @@
1616
// under the License.
1717
(function($, cloudStack) {
1818
cloudStack.modules = [
19+
'vpc'
1920
];
2021
}(jQuery, cloudStack));

‎ui/modules/vpc/vpc.css‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/*[fmt]1C20-1C0D-E*/
2+
/*
3+
* Licensed to the Apache Software Foundation (ASF) under one
4+
* or more contributor license agreements. See the NOTICE file
5+
* distributed with this work for additional information
6+
* regarding copyright ownership. The ASF licenses this file
7+
* to you under the Apache License, Version 2.0 (the
8+
* "License"); you may not use this file except in compliance
9+
* with the License. You may obtain a copy of the License at
10+
*
11+
* http://www.apache.org/licenses/LICENSE-2.0
12+
*
13+
* Unless required by applicable law or agreed to in writing,
14+
* software distributed under the License is distributed on an
15+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
16+
* KIND, either express or implied. See the License for the
17+
* specific language governing permissions and limitations
18+
* under the License.
19+
*/
20+
.vpc-network-chart {
21+
}
22+
23+
.vpc-network-chart .tiers {
24+
}
25+
26+
.vpc-network-chart .tier-item {
27+
border: 1px solid #477FB4;
28+
overflow: hidden;
29+
width: 326px;
30+
height: 182px;
31+
margin: 18px;
32+
/*+border-radius:4px;*/
33+
-moz-border-radius: 4px;
34+
-webkit-border-radius: 4px;
35+
-khtml-border-radius: 4px;
36+
border-radius: 4px;
37+
background: #8DB1D3;
38+
}
39+
40+
.vpc-network-chart .tier-item .header {
41+
padding: 7px 0 6px;
42+
/*+box-shadow:inset 0px 1px 1px #FFFFFF;*/
43+
-moz-box-shadow: inset 0px 1px 1px #FFFFFF;
44+
-webkit-box-shadow: inset 0px 1px 1px #FFFFFF;
45+
-o-box-shadow: inset 0px 1px 1px #FFFFFF;
46+
box-shadow: inset 0px 1px 1px #FFFFFF;
47+
background: #69839D;
48+
border-bottom: 1px solid #40639E;
49+
}
50+
51+
.vpc-network-chart .tier-item .header .title {
52+
margin-left: 9px;
53+
max-width: 268px;
54+
overflow: hidden;
55+
}
56+
57+
.vpc-network-chart .tier-item .header .title span {
58+
font-size: 20px;
59+
color: #FFFFFF;
60+
/*+text-shadow:0px 1px 1px #000000;*/
61+
-moz-text-shadow: 0px 1px 1px #000000;
62+
-webkit-text-shadow: 0px 1px 1px #000000;
63+
-o-text-shadow: 0px 1px 1px #000000;
64+
text-shadow: 0px 1px 1px #000000;
65+
}
66+
67+
.vpc-network-chart .tier-item .content {
68+
width: 100%;
69+
height: 83%;
70+
/*+box-shadow:inset 0px 1px 1px #FFFFFF;*/
71+
-moz-box-shadow: inset 0px 1px 1px #FFFFFF;
72+
-webkit-box-shadow: inset 0px 1px 1px #FFFFFF;
73+
-o-box-shadow: inset 0px 1px 1px #FFFFFF;
74+
box-shadow: inset 0px 1px 1px #FFFFFF;
75+
border-bottom: 1px solid #8DB1D3;
76+
}
77+
78+
.vpc-network-chart .tier-item .content .dashboard {
79+
height: 117px;
80+
}
81+
82+
.vpc-network-chart .tier-item .content .info {
83+
padding: 7px 0 10px 9px;
84+
}
85+
86+
.vpc-network-chart .tier-item .content .info .cidr-label {
87+
font-size: 10px;
88+
color: #1860A7;
89+
}
90+
91+
.vpc-network-chart .tier-item .content .info .cidr {
92+
color: #364553;
93+
font-size: 10px;
94+
/*+text-shadow:0px 1px #C7D8E9;*/
95+
-moz-text-shadow: 0px 1px #C7D8E9;
96+
-webkit-text-shadow: 0px 1px #C7D8E9;
97+
-o-text-shadow: 0px 1px #C7D8E9;
98+
text-shadow: 0px 1px #C7D8E9;
99+
}
100+

‎ui/modules/vpc/vpc.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
(function($, cloudStack) {
2+
var elems = {
3+
chart: {
4+
tier: function(args) {
5+
var tier = args.tier;
6+
var $tier = $('<div>').addClass('tier-item');
7+
var $header = $('<div>').addClass('header');
8+
var $title = $('<div>').addClass('title').append($('<span>'));
9+
var $content = $('<div>').addClass('content');
10+
var $dashboard = $('<div>').addClass('dashboard');
11+
var $info = $('<div>').addClass('info');
12+
var $cidrLabel = $('<span>').addClass('cidr-label');
13+
var $cidr = $('<span>').addClass('cidr');
14+
15+
$cidrLabel.html('CIDR: ');
16+
$cidr.html(tier.cidr);
17+
$title.find('span').html(tier.displayname ? tier.displayname : tier.name);
18+
$header.append($title);
19+
$info.append($cidrLabel, $cidr);
20+
$content.append($dashboard, $info);
21+
$tier.append($header, $content);
22+
23+
return $tier;
24+
}
25+
}
26+
};
27+
28+
cloudStack.modules.vpc = function(module) {
29+
var vpc = cloudStack.vpc;
30+
var vpcSection = cloudStack.sections.network.sections.vpc;
31+
var listConfigureAction = vpcSection.listView.actions.configureVpc.action;
32+
var detailsConfigureAction = vpcSection.listView.detailView.actions.configureVpc.action;
33+
34+
var vpcChart = function(args) {
35+
var context = args.context;
36+
var vpcItem = context.vpc[0];
37+
var $chart = $('<div>').addClass('vpc-network-chart');
38+
var $tiers = $('<div>').addClass('tiers');
39+
40+
$tiers.appendTo($chart);
41+
42+
// Get tiers
43+
vpc.tiers.dataProvider({
44+
context: context,
45+
response: {
46+
success: function(data) {
47+
var tiers = data.tiers;
48+
49+
$(tiers).map(function(index, tier) {
50+
var $tier = elems.chart.tier({ tier: tier });
51+
52+
$tier.appendTo($tiers);
53+
});
54+
}
55+
}
56+
});
57+
58+
$('#browser .container').cloudBrowser('addPanel', {
59+
title: vpcItem.displaytext ? vpcItem.displaytext : vpcItem.name,
60+
maximizeIfSelected: true,
61+
complete: function($panel) {
62+
$chart.appendTo($panel);
63+
}
64+
});
65+
};
66+
67+
listConfigureAction.custom = vpcChart;
68+
detailsConfigureAction.custom = vpcChart;
69+
};
70+
}(jQuery, cloudStack));

0 commit comments

Comments
 (0)