mirror of
https://github.com/apache/cloudstack.git
synced 2025-10-26 08:42:29 +01:00
Update zone section
-Add new info 'bubbles' to zone chart -Add/restore Add Pod section as step 3 of zone wizard UI -Add network offering drop-down to zone wizard, for basic zone
This commit is contained in:
Brian Federle
parent
785d3af134
commit
13e217356e
@ -3514,9 +3514,6 @@ Dialogs*/
|
||||
}
|
||||
|
||||
/*System chart*/
|
||||
.system-charts {
|
||||
}
|
||||
|
||||
.system-charts .ui-tabs-nav {
|
||||
/*+placement:shift 13px 7px;*/
|
||||
position: relative;
|
||||
@ -3535,6 +3532,7 @@ Dialogs*/
|
||||
width: 100%;
|
||||
height: 589px;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
font-weight: normal;
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -3555,7 +3553,7 @@ Dialogs*/
|
||||
-webkit-border-radius: 10px;
|
||||
-khtml-border-radius: 10px;
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
width: 68%;
|
||||
width: 515px;
|
||||
margin: 18px auto 0 22px;
|
||||
padding: 0 0 11px;
|
||||
clear: both;
|
||||
@ -3652,6 +3650,7 @@ Dialogs*/
|
||||
color: #AAAAAA;
|
||||
text-decoration: line-through;
|
||||
margin-top: 10px;
|
||||
/*[empty]background:;*/
|
||||
}
|
||||
|
||||
.zone-chart ul li .view-all,
|
||||
@ -3715,6 +3714,65 @@ Dialogs*/
|
||||
text-indent: 4px;
|
||||
}
|
||||
|
||||
/*** Info area*/
|
||||
.zone-chart .side-info {
|
||||
width: 203px;
|
||||
float: right;
|
||||
margin: 58px 0 0;
|
||||
}
|
||||
|
||||
.zone-chart .side-info ul {
|
||||
display: block;
|
||||
height: 904px;
|
||||
}
|
||||
|
||||
.zone-chart .side-info ul li {
|
||||
width: 185px;
|
||||
height: 98px;
|
||||
margin-left: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.zone-chart .side-info ul li .icon {
|
||||
width: 29px;
|
||||
height: 30px;
|
||||
background: url(../images/sprites.png) -587px -1107px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.zone-chart .side-info ul li .icon span {
|
||||
color: #FFFFFF;
|
||||
/*+placement:shift 9px 6px;*/
|
||||
position: relative;
|
||||
left: 9px;
|
||||
top: 6px;
|
||||
/*+text-shadow:0px 1px 1px #313131;*/
|
||||
-moz-text-shadow: 0px 1px 1px #313131;
|
||||
-webkit-text-shadow: 0px 1px 1px #313131;
|
||||
-o-text-shadow: 0px 1px 1px #313131;
|
||||
text-shadow: 0px 1px 1px #313131;
|
||||
}
|
||||
|
||||
.zone-chart .side-info ul li .title {
|
||||
color: #9A9A9A;
|
||||
float: left;
|
||||
font-size: 17px;
|
||||
/*+placement:shift 10px 4px;*/
|
||||
position: relative;
|
||||
left: 10px;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.zone-chart .side-info ul li p {
|
||||
max-height: 113px;
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
font-size: 11px;
|
||||
line-height: 19px;
|
||||
margin: 0 0 0 38px;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
/*** NAAS*/
|
||||
.zone-chart .resources.naas {
|
||||
border: none;
|
||||
@ -3739,7 +3797,7 @@ Dialogs*/
|
||||
background: #E7E7E7;
|
||||
width: 728px;
|
||||
display: inline-block;
|
||||
padding: 4px 0 10px;
|
||||
padding: 1px 0 15px;
|
||||
}
|
||||
|
||||
.zone-chart .resources.naas .head span {
|
||||
@ -3840,6 +3898,40 @@ Dialogs*/
|
||||
background-position: -3px -944px;
|
||||
}
|
||||
|
||||
.zone-chart ul li .tooltip-icon {
|
||||
width: 18px;
|
||||
height: 19px;
|
||||
background: url(../images/sprites.png) no-repeat -592px -1066px;
|
||||
/*+placement:shift 23px 8px;*/
|
||||
position: relative;
|
||||
left: 23px;
|
||||
top: 8px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.zone-chart .resources.zone ul li .tooltip-icon {
|
||||
position: relative;
|
||||
float: left;
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
.zone-chart ul li .tooltip-icon span {
|
||||
color: #FFFFFF;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
/*+placement:shift 6px 3px;*/
|
||||
position: relative;
|
||||
left: 6px;
|
||||
top: 3px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.zone-chart .resources.zone ul li .tooltip-icon span {
|
||||
left: 6px;
|
||||
top: 3px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.zone-chart .resources.naas .system-main .network-providers li .name {
|
||||
/*+placement:shift 96px 12px;*/
|
||||
position: relative;
|
||||
@ -3882,7 +3974,8 @@ Dialogs*/
|
||||
|
||||
/*** Zone resources*/
|
||||
.zone-chart .resources.zone {
|
||||
margin-top: -18px;
|
||||
width: 519px;
|
||||
margin-top: -15px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@ -5006,12 +5099,12 @@ label.error {
|
||||
}
|
||||
|
||||
.multi-wizard.zone-wizard .progress ul li {
|
||||
width: 288px;
|
||||
width: 182px;
|
||||
padding: 0 32px 0 0;
|
||||
}
|
||||
|
||||
.multi-wizard.zone-wizard .progress ul li span.arrow {
|
||||
margin: -4px 0 0 266px;
|
||||
margin: -4px 0 0 160px;
|
||||
}
|
||||
|
||||
.multi-wizard.zone-wizard .select-network .content .section {
|
||||
@ -5152,6 +5245,7 @@ label.error {
|
||||
|
||||
.multi-wizard.zone-wizard .select-container .field .value select {
|
||||
width: 139px;
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
.multi-wizard.zone-wizard .select-container .field .value input[type=checkbox] {
|
||||
@ -5167,7 +5261,7 @@ label.error {
|
||||
|
||||
.multi-wizard.zone-wizard .select-container .field .value.multi-range span {
|
||||
float: left;
|
||||
margin: 19px 0 0;
|
||||
margin: 13px 0 0;
|
||||
}
|
||||
|
||||
/*Tree view*/
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 97 KiB |
59
ui/index.jsp
59
ui/index.jsp
@ -411,7 +411,8 @@
|
||||
<div class="progress">
|
||||
<ul>
|
||||
<li class="first"><span class="number">1</span><span>Select Type</span><span class="arrow"></span></li>
|
||||
<li class="last"><span class="number">2</span><span>Setup Zone</span></li>
|
||||
<li><span class="number">2</span><span>Setup Zone</span><span class="arrow"></span></li>
|
||||
<li class="last"><span class="number">3</span><span>Setup Pod</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="steps">
|
||||
@ -541,13 +542,25 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="conditional basic">
|
||||
<!-- Network Offering -->
|
||||
<div class="field">
|
||||
<div class="name">
|
||||
<span>Network Offering</span>
|
||||
</div>
|
||||
<div class="value">
|
||||
<select name="zone-network-offering" class="network-offering required"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3: Setup pod -->
|
||||
<div class="setup-pod disabled">
|
||||
<div class="setup-pod">
|
||||
<form>
|
||||
<div class="main-desc">Please enter the following information to add a new pod</div>
|
||||
<div class="content input-area">
|
||||
@ -812,6 +825,42 @@
|
||||
|
||||
<!-- Zone chart -->
|
||||
<div class="zone-chart">
|
||||
<!-- Side info -->
|
||||
<div class="side-info">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="icon"><span>1</span></div>
|
||||
<div class="title">Public</div>
|
||||
<p>Set up the network for Internet traffic.</p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon"><span>2</span></div>
|
||||
<div class="title">Guest</div>
|
||||
<p>Set up the network for traffic between end-user VMs.</p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon"><span>3</span></div>
|
||||
<div class="title">Clusters</div>
|
||||
<p>Define one or more clusters to group the compute hosts.</p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon"><span>4</span></div>
|
||||
<div class="title">Hosts</div>
|
||||
<p>Add hosts to clusters. Hosts run hypervisors and VMs.</p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon"><span>5</span></div>
|
||||
<div class="title">Primary Storage</div>
|
||||
<p>Add servers to store VM disk volumes in each cluster.</p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon"><span>6</span></div>
|
||||
<div class="title">Secondary Storage</div>
|
||||
<p>Add servers to store templates, ISOs, and snapshots for the whole zone.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- NAAS configuration -->
|
||||
<div class="resources naas">
|
||||
<div class="head">
|
||||
@ -819,6 +868,7 @@
|
||||
</div>
|
||||
<ul class="system-main">
|
||||
<li class="main public" rel="public">
|
||||
<div class="tooltip-icon"><span>1</span></div>
|
||||
<div class="name">Public</div>
|
||||
<div class="view-all configure">Configure</div>
|
||||
</li>
|
||||
@ -827,6 +877,7 @@
|
||||
<div class="view-all configure">Configure</div>
|
||||
</li>
|
||||
<li class="main guest" rel="guest">
|
||||
<div class="tooltip-icon"><span>2</span></div>
|
||||
<div class="name">Guest</div>
|
||||
<div class="view-all configure">Configure</div>
|
||||
</li>
|
||||
@ -844,18 +895,22 @@
|
||||
<div class="view-all" zone-target="pods">View All</div>
|
||||
</li>
|
||||
<li class="cluster">
|
||||
<div class="tooltip-icon"><span>3</span></div>
|
||||
<div class="name"><span>Clusters</span></div>
|
||||
<div class="view-all" zone-target="clusters">View All</div>
|
||||
</li>
|
||||
<li class="host">
|
||||
<div class="tooltip-icon"><span>4</span></div>
|
||||
<div class="name"><span>Hosts</span></div>
|
||||
<div class="view-all" zone-target="hosts">View All</div>
|
||||
</li>
|
||||
<li class="primary-storage">
|
||||
<div class="tooltip-icon"><span>5</span></div>
|
||||
<div class="name"><span>Primary Storage</span></div>
|
||||
<div class="view-all" zone-target="primary-storage">View All</div>
|
||||
</li>
|
||||
<li class="secondary-storage">
|
||||
<div class="tooltip-icon"><span>6</span></div>
|
||||
<div class="name"><span>Secondary Storage</span></div>
|
||||
<div class="view-all" zone-target="secondary-storage">View All</div>
|
||||
</li>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
(function($, cloudStack, testData) {
|
||||
|
||||
var zoneObjs, podObjs, clusterObjs, domainObjs;
|
||||
var zoneObjs, podObjs, clusterObjs, domainObjs, networkOfferingObjs;
|
||||
var selectedClusterObj, selectedZoneObj, selectedPublicNetworkObj, selectedManagementNetworkObj, selectedPhysicalNetworkObj, selectedGuestNetworkObj;
|
||||
var naasStatusMap = {};
|
||||
var nspMap = {};
|
||||
@ -2939,7 +2939,17 @@
|
||||
domainObjs = json.listdomainsresponse.domain;
|
||||
}
|
||||
});
|
||||
args.response.success({domains: domainObjs});
|
||||
|
||||
$.ajax({
|
||||
url: createURL("listNetworkOfferings"),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
networkOfferingObjs = json.listnetworkofferingsresponse.networkoffering;
|
||||
}
|
||||
});
|
||||
|
||||
args.response.success({domains: domainObjs, networkOfferings: networkOfferingObjs});
|
||||
},
|
||||
|
||||
// Step 3: Setup Pod
|
||||
@ -2952,6 +2962,7 @@
|
||||
],
|
||||
|
||||
action: function(args) {
|
||||
debugger;
|
||||
var array1 = [];
|
||||
|
||||
//var networktype = $thisWizard.find("#step1").find("input:radio[name=basic_advanced]:checked").val(); //"Basic", "Advanced"
|
||||
|
||||
@ -82,6 +82,8 @@
|
||||
} else if (formState['isolation-mode'] == 'security-groups') {
|
||||
$conditional.filter('.security-groups').show();
|
||||
}
|
||||
} else if (formState['network-model'] == 'Basic') {
|
||||
$conditional.filter('.basic').show();
|
||||
}
|
||||
|
||||
if (!formState['public']) {
|
||||
@ -118,6 +120,11 @@
|
||||
.appendTo($targetStep.find('select.domain'));
|
||||
});
|
||||
|
||||
$(args.networkOfferings).each(function() {
|
||||
$('<option></option>').val(this.id).html(this.name)
|
||||
.appendTo($targetStep.find('select.network-offering'));
|
||||
});
|
||||
|
||||
$targetStep.addClass('loaded');
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user