mirror of https://github.com/apache/cloudstack.git
Add base VPC UI
** Note: this is a work-in-progress, and only contains dummy content Implement UI for managing VPC tiers, via a custom chart-like UI list tiers and allowing the management of VMs associated with the VPCs.
This commit is contained in:
Brian Federle
parent
e6a6f84361
commit
c347c6bd09
|
|
@ -8837,6 +8837,346 @@ div.panel.ui-dialog div.list-view div.fixed-header {
|
|||
background: #DFE1E3;
|
||||
}
|
||||
|
||||
/*VPC / vApps*/
|
||||
.vpc-chart {
|
||||
width: 100%;
|
||||
height: 93%;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
margin: 30px 0 0;
|
||||
}
|
||||
|
||||
.vpc-chart .vpc-title {
|
||||
font-size: 24px;
|
||||
/*+placement:shift 50px 40px;*/
|
||||
position: relative;
|
||||
left: 50px;
|
||||
top: 40px;
|
||||
position: absolute;
|
||||
color: #5F768A;
|
||||
}
|
||||
|
||||
.vpc-chart ul.tiers {
|
||||
padding: 0 0 0 26px;
|
||||
margin: 79px 0 0 232px;
|
||||
border-left: 3px solid #CCC;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier {
|
||||
display: block;
|
||||
width: 258px;
|
||||
height: 107px;
|
||||
margin: -55px 0 90px;
|
||||
/*+border-radius:4px;*/
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
-khtml-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #50545A;
|
||||
background: url(../images/bg-gradients.png) 0px -2637px;
|
||||
/*+placement:shift 0px 58px;*/
|
||||
position: relative;
|
||||
left: 0px;
|
||||
top: 58px;
|
||||
position: relative;
|
||||
/*+box-shadow:0px 5px 7px #DADADA;*/
|
||||
-moz-box-shadow: 0px 5px 7px #DADADA;
|
||||
-webkit-box-shadow: 0px 5px 7px #DADADA;
|
||||
-o-box-shadow: 0px 5px 7px #DADADA;
|
||||
box-shadow: 0px 5px 7px #DADADA;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier .loading-overlay {
|
||||
/*+border-radius:4px;*/
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
-khtml-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier .connect-line {
|
||||
position: absolute;
|
||||
width: 28px;
|
||||
height: 3px;
|
||||
background: #CCCCCC 0px -8px;
|
||||
/*+placement:shift -29px 49px;*/
|
||||
position: relative;
|
||||
left: -29px;
|
||||
top: 49px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier span.title {
|
||||
color: #FFFFFF;
|
||||
/*+placement:shift 11px 13px;*/
|
||||
position: relative;
|
||||
left: 11px;
|
||||
top: 13px;
|
||||
position: absolute;
|
||||
font-size: 24px;
|
||||
/*+text-shadow:1px 2px 2px #000000;*/
|
||||
-moz-text-shadow: 1px 2px 2px #000000;
|
||||
-webkit-text-shadow: 1px 2px 2px #000000;
|
||||
-o-text-shadow: 1px 2px 2px #000000;
|
||||
text-shadow: 1px 2px 2px #000000;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier span.cidr {
|
||||
/*+placement:shift 12px 46px;*/
|
||||
position: relative;
|
||||
left: 12px;
|
||||
top: 46px;
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
/*+text-shadow:0px -1px 1px #343E4C;*/
|
||||
-moz-text-shadow: 0px -1px 1px #343E4C;
|
||||
-webkit-text-shadow: 0px -1px 1px #343E4C;
|
||||
-o-text-shadow: 0px -1px 1px #343E4C;
|
||||
text-shadow: 0px -1px 1px #343E4C;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier .actions {
|
||||
width: 258px;
|
||||
height: 35px;
|
||||
background: #CCC;
|
||||
/*+border-radius:0 0 4px 4px;*/
|
||||
-moz-border-radius: 0 0 4px 4px;
|
||||
-webkit-border-radius: 0 0 4px 4px;
|
||||
-khtml-border-radius: 0 0 4px 4px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
/*+placement:shift -1px 71px;*/
|
||||
position: relative;
|
||||
left: -1px;
|
||||
top: 71px;
|
||||
position: absolute;
|
||||
/*+box-shadow:inset 0px 1px #FFFFFF;*/
|
||||
-moz-box-shadow: inset 0px 1px #FFFFFF;
|
||||
-webkit-box-shadow: inset 0px 1px #FFFFFF;
|
||||
-o-box-shadow: inset 0px 1px #FFFFFF;
|
||||
box-shadow: inset 0px 1px #FFFFFF;
|
||||
border: 1px solid #808080;
|
||||
border-top: 1px solid #4C545E;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier .actions .action {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
width: 50px;
|
||||
height: 24px;
|
||||
text-align: center;
|
||||
/*+border-radius:4px;*/
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
-khtml-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
margin: 4px 0px 4px 4px;
|
||||
border: 1px solid #909090;
|
||||
color: #4B637A;
|
||||
font-weight: bold;
|
||||
/*+text-shadow:0px 1px 1px #FFFFFF;*/
|
||||
-moz-text-shadow: 0px 1px 1px #FFFFFF;
|
||||
-webkit-text-shadow: 0px 1px 1px #FFFFFF;
|
||||
-o-text-shadow: 0px 1px 1px #FFFFFF;
|
||||
text-shadow: 0px 1px 1px #FFFFFF;
|
||||
background: url(../images/bg-gradients.png) 0px -2533px;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier .actions .action.disabled,
|
||||
.vpc-chart li.tier .actions .action.disabled:hover {
|
||||
color: #9D9D9D;
|
||||
background: #CFCFCF;
|
||||
/*+text-shadow:none;*/
|
||||
-moz-text-shadow: none;
|
||||
-webkit-text-shadow: none;
|
||||
-o-text-shadow: none;
|
||||
text-shadow: none;
|
||||
border-color: #B5B5B5;
|
||||
cursor: not-allowed;
|
||||
/*+box-shadow:none;*/
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
-o-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier .actions .action:hover {
|
||||
border: 1px solid #7A8B9A;
|
||||
background-position: 0px -106px;
|
||||
color: #5B7A96;
|
||||
/*+box-shadow:inset 1px 2px 4px #808080;*/
|
||||
-moz-box-shadow: inset 1px 2px 4px #808080;
|
||||
-webkit-box-shadow: inset 1px 2px 4px #808080;
|
||||
-o-box-shadow: inset 1px 2px 4px #808080;
|
||||
box-shadow: inset 1px 2px 4px #808080;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier .actions .action span.label {
|
||||
/*+placement:shift 1px 3px;*/
|
||||
position: relative;
|
||||
left: 1px;
|
||||
top: 3px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier .actions .action.remove,
|
||||
.vpc-chart li.tier .actions .action.remove:hover {
|
||||
background: none;
|
||||
width: 30px;
|
||||
padding: 0;
|
||||
float: right;
|
||||
border: none;
|
||||
/*+placement:shift -3px -2px;*/
|
||||
position: relative;
|
||||
left: -3px;
|
||||
top: -2px;
|
||||
/*+box-shadow:none;*/
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
-o-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier .action span.icon {
|
||||
background-image: url(../images/sprites.png);
|
||||
cursor: pointer;
|
||||
width: 37px;
|
||||
height: 23px;
|
||||
float: left;
|
||||
/*+placement:shift 1px 3px;*/
|
||||
position: relative;
|
||||
left: 1px;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier .vm-count {
|
||||
font-size: 23px;
|
||||
left: 134px;
|
||||
top: 3px;
|
||||
position: absolute;
|
||||
color: #FFFFFF;
|
||||
/*+text-shadow:1px 2px 2px #000000;*/
|
||||
-moz-text-shadow: 1px 2px 2px #000000;
|
||||
-webkit-text-shadow: 1px 2px 2px #000000;
|
||||
-o-text-shadow: 1px 2px 2px #000000;
|
||||
text-shadow: 1px 2px 2px #000000;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
border: 1px solid transparent;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier .vm-count:hover {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #4C545E;
|
||||
background: url(../images/bg-gradients.png) 0px -2751px;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier .vm-count .total {
|
||||
padding-right: 4px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier.placeholder {
|
||||
background: #ECECEC;
|
||||
border: dotted #ACACAC;
|
||||
/*+border-radius:4px;*/
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
-khtml-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
/*+box-shadow:none;*/
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
-o-box-shadow: none;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier.placeholder:hover {
|
||||
background: #D3D3D3;
|
||||
/*+box-shadow:0px 2px 8px #A7A7A7;*/
|
||||
-moz-box-shadow: 0px 2px 8px #A7A7A7;
|
||||
-webkit-box-shadow: 0px 2px 8px #A7A7A7;
|
||||
-o-box-shadow: 0px 2px 8px #A7A7A7;
|
||||
box-shadow: 0px 2px 8px #A7A7A7;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier.placeholder span {
|
||||
top: 40px;
|
||||
left: 66px;
|
||||
color: #9F9F9F;
|
||||
/*+text-shadow:none;*/
|
||||
-moz-text-shadow: none;
|
||||
-webkit-text-shadow: none;
|
||||
-o-text-shadow: none;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier.placeholder:hover span {
|
||||
color: #000000;
|
||||
/*+text-shadow:0px 0px 7px #FFFFFF;*/
|
||||
-moz-text-shadow: 0px 0px 7px #FFFFFF;
|
||||
-webkit-text-shadow: 0px 0px 7px #FFFFFF;
|
||||
-o-text-shadow: 0px 0px 7px #FFFFFF;
|
||||
text-shadow: 0px 0px 7px #FFFFFF;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier.virtual-router {
|
||||
margin: 0px;
|
||||
width: 222px;
|
||||
height: 65px;
|
||||
/*+placement:shift 17px -36px;*/
|
||||
position: relative;
|
||||
left: 17px;
|
||||
top: -36px;
|
||||
background-position: 0px -2519px;
|
||||
border: 1px solid #ADADAD;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier.virtual-router span {
|
||||
color: #586E82;
|
||||
font-size: 18px;
|
||||
/*+text-shadow:0px 1px 3px #FFFFFF;*/
|
||||
-moz-text-shadow: 0px 1px 3px #FFFFFF;
|
||||
-webkit-text-shadow: 0px 1px 3px #FFFFFF;
|
||||
-o-text-shadow: 0px 1px 3px #FFFFFF;
|
||||
text-shadow: 0px 1px 3px #FFFFFF;
|
||||
/*+placement:shift 53px 22px;*/
|
||||
position: relative;
|
||||
left: 53px;
|
||||
top: 22px;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier.virtual-router .connect-line {
|
||||
/*+placement:shift -47px 14px;*/
|
||||
position: relative;
|
||||
left: -47px;
|
||||
top: 14px;
|
||||
width: 46px;
|
||||
}
|
||||
|
||||
/*Configure ACL dialog*/
|
||||
.ui-dialog.configure-acl {
|
||||
}
|
||||
|
||||
.ui-dialog.configure-acl .ui-dialog-buttonpane {
|
||||
/*+placement:shift 709px -2px;*/
|
||||
position: relative;
|
||||
left: 709px;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.ui-dialog.configure-acl .multi-edit .data {
|
||||
width: 807px;
|
||||
height: 370px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/*Action icons*/
|
||||
.action.edit .icon {
|
||||
background-position: 1px -1px;
|
||||
|
|
@ -9005,13 +9345,15 @@ div.panel.ui-dialog div.list-view div.fixed-header {
|
|||
|
||||
.create .icon,
|
||||
.createTemplate .icon,
|
||||
.enableSwift .icon {
|
||||
.enableSwift .icon,
|
||||
.addVM .icon {
|
||||
background-position: -69px -63px;
|
||||
}
|
||||
|
||||
.create:hover .icon,
|
||||
.createTemplate:hover .icon,
|
||||
.enableSwift:hover .icon {
|
||||
.enableSwift:hover .icon,
|
||||
.addVM:hover .icon {
|
||||
background-position: -69px -645px;
|
||||
}
|
||||
|
||||
|
|
@ -9073,11 +9415,13 @@ div.panel.ui-dialog div.list-view div.fixed-header {
|
|||
background-position: -167px -648px;
|
||||
}
|
||||
|
||||
.generateKeys .icon {
|
||||
.generateKeys .icon,
|
||||
.networkACL .icon {
|
||||
background-position: -167px -95px;
|
||||
}
|
||||
|
||||
.generateKeys:hover .icon {
|
||||
.generateKeys:hover .icon,
|
||||
.networkACL:hover .icon {
|
||||
background-position: -167px -677px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 8.1 KiB After Width: | Height: | Size: 7.4 KiB |
|
|
@ -1629,11 +1629,14 @@
|
|||
<script type="text/javascript" src="scripts/projects.js?t=<%=now%>"></script>
|
||||
<script type="text/javascript" src="scripts/dashboard.js?t=<%=now%>"></script>
|
||||
<script type="text/javascript" src="scripts/ui-custom/instanceWizard.js?t=<%=now%>"></script>
|
||||
<script type="text/javascript" src="scripts/instanceWizard.js?t=<%=now%>"></script>
|
||||
<script type="text/javascript" src="scripts/instances.js?t=<%=now%>"></script>
|
||||
<script type="text/javascript" src="scripts/events.js?t=<%=now%>"></script>
|
||||
<script type="text/javascript" src="scripts/ui-custom/ipRules.js?t=<%=now%>"></script>
|
||||
<script type="text/javascript" src="scripts/ui-custom/enableStaticNAT.js?t=<%=now%>"></script>
|
||||
<script type="text/javascript" src="scripts/ui-custom/securityRules.js?t=<%=now%>"></script>
|
||||
<script type="text/javascript" src="scripts/ui-custom/vpc.js?t=<%=now%>"></script>
|
||||
<script type="text/javascript" src="scripts/vpc.js?t=<%=now%>"></script>
|
||||
<script type="text/javascript" src="scripts/network.js?t=<%=now%>"></script>
|
||||
<script type="text/javascript" src="scripts/ui-custom/recurringSnapshots.js?t=<%=now%>"></script>
|
||||
<script type="text/javascript" src="scripts/ui-custom/uploadVolume.js?t=<%=now%>"></script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,513 @@
|
|||
(function($, cloudStack) {
|
||||
var zoneObjs, hypervisorObjs, featuredTemplateObjs, communityTemplateObjs, myTemplateObjs, featuredIsoObjs, community
|
||||
var selectedZoneObj, selectedTemplateObj, selectedHypervisor, selectedDiskOfferingObj;
|
||||
var step5ContainerType = 'nothing-to-select'; //'nothing-to-select', 'select-network', 'select-security-group'
|
||||
|
||||
cloudStack.instanceWizard = {
|
||||
maxDiskOfferingSize: function() {
|
||||
return g_capabilities.customdiskofferingmaxsize;
|
||||
},
|
||||
steps: [
|
||||
// Step 1: Setup
|
||||
function(args) {
|
||||
$.ajax({
|
||||
url: createURL("listZones&available=true"),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
zoneObjs = json.listzonesresponse.zone;
|
||||
args.response.success({ data: {zones: zoneObjs}});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// Step 2: Select template
|
||||
function(args) {
|
||||
$(zoneObjs).each(function(){
|
||||
if(this.id == args.currentData.zoneid) {
|
||||
selectedZoneObj = this;
|
||||
return false; //break the $.each() loop
|
||||
}
|
||||
});
|
||||
if(selectedZoneObj == null) {
|
||||
alert("error: can't find matched zone object");
|
||||
return;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: createURL("listHypervisors&zoneid="+args.currentData.zoneid),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
hypervisorObjs = json.listhypervisorsresponse.hypervisor;
|
||||
}
|
||||
});
|
||||
|
||||
//***** get templates/ISOs (begin) *****
|
||||
var selectedTemplate = args.currentData['select-template'];
|
||||
if (selectedTemplate == 'select-template') {
|
||||
var hypervisorArray = [];
|
||||
$(hypervisorObjs).each(function(index, item) {
|
||||
hypervisorArray.push(item.name);
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
url: createURL("listTemplates&templatefilter=featured&zoneid="+args.currentData.zoneid),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
featuredTemplateObjs = $.grep(json.listtemplatesresponse.template, function(item, index) {
|
||||
if($.inArray(item.hypervisor, hypervisorArray) > -1)
|
||||
return true;
|
||||
});
|
||||
}
|
||||
});
|
||||
$.ajax({
|
||||
url: createURL("listTemplates&templatefilter=community&zoneid="+args.currentData.zoneid),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
communityTemplateObjs = $.grep(json.listtemplatesresponse.template, function(item, index) {
|
||||
if($.inArray(item.hypervisor, hypervisorArray) > -1)
|
||||
return true;
|
||||
});
|
||||
}
|
||||
});
|
||||
$.ajax({
|
||||
url: createURL("listTemplates&templatefilter=selfexecutable&zoneid="+args.currentData.zoneid),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
myTemplateObjs = $.grep(json.listtemplatesresponse.template, function(item, index) {
|
||||
if($.inArray(item.hypervisor, hypervisorArray) > -1)
|
||||
return true;
|
||||
});
|
||||
}
|
||||
});
|
||||
} else if (selectedTemplate == 'select-iso') {
|
||||
$.ajax({
|
||||
url: createURL("listIsos&isofilter=featured&zoneid=" + args.currentData.zoneid + "&bootable=true"),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
featuredIsoObjs = json.listisosresponse.iso;
|
||||
}
|
||||
});
|
||||
$.ajax({
|
||||
url: createURL("listIsos&isofilter=community&zoneid=" + args.currentData.zoneid + "&bootable=true"),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
communityIsoObjs = json.listisosresponse.iso;
|
||||
}
|
||||
});
|
||||
$.ajax({
|
||||
url: createURL("listIsos&isofilter=selfexecutable&zoneid=" + args.currentData.zoneid + "&bootable=true"),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
myIsoObjs = json.listisosresponse.iso;
|
||||
}
|
||||
});
|
||||
}
|
||||
//***** get templates/ISOs (end) *****
|
||||
|
||||
|
||||
var templatesObj = {};
|
||||
if (selectedTemplate == 'select-template') {
|
||||
templatesObj = {
|
||||
featuredtemplates: featuredTemplateObjs,
|
||||
communitytemplates: communityTemplateObjs,
|
||||
mytemplates: myTemplateObjs
|
||||
}
|
||||
} else if (selectedTemplate == 'select-iso') {
|
||||
templatesObj = {
|
||||
featuredisos: featuredIsoObjs,
|
||||
communityisos: communityIsoObjs,
|
||||
myisos: myIsoObjs
|
||||
}
|
||||
}
|
||||
args.response.success({
|
||||
hypervisor: {
|
||||
idField: 'name',
|
||||
nameField: 'name'
|
||||
},
|
||||
data: {
|
||||
templates: templatesObj,
|
||||
hypervisors: hypervisorObjs
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// Step 3: Service offering
|
||||
function(args) {
|
||||
if(args.currentData["select-template"] == "select-template") {
|
||||
if(featuredTemplateObjs != null && featuredTemplateObjs.length > 0) {
|
||||
for(var i=0; i < featuredTemplateObjs.length; i++) {
|
||||
if(featuredTemplateObjs[i].id == args.currentData.templateid) {
|
||||
selectedTemplateObj = featuredTemplateObjs[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if(selectedTemplateObj == null) {
|
||||
if(communityTemplateObjs != null && communityTemplateObjs.length > 0) {
|
||||
for(var i=0; i < communityTemplateObjs.length; i++) {
|
||||
if(communityTemplateObjs[i].id == args.currentData.templateid) {
|
||||
selectedTemplateObj = communityTemplateObjs[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if(selectedTemplateObj == null) {
|
||||
if(myTemplateObjs != null && myTemplateObjs.length > 0) {
|
||||
for(var i=0; i < myTemplateObjs.length; i++) {
|
||||
if(myTemplateObjs[i].id == args.currentData.templateid) {
|
||||
selectedTemplateObj = myTemplateObjs[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if(selectedTemplateObj == null)
|
||||
alert("unable to find matched template object");
|
||||
else
|
||||
selectedHypervisor = selectedTemplateObj.hypervisor;
|
||||
}
|
||||
else { //(args.currentData["select-template"] == "select-iso"
|
||||
selectedHypervisor = args.currentData.hypervisorid;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: createURL("listServiceOfferings&issystem=false"),
|
||||
dataType: "json",
|
||||
async: true,
|
||||
success: function(json) {
|
||||
serviceOfferingObjs = json.listserviceofferingsresponse.serviceoffering;
|
||||
args.response.success({
|
||||
data: {serviceOfferings: serviceOfferingObjs}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// Step 4: Data disk offering
|
||||
function(args) {
|
||||
var isRequred = (args.currentData["select-template"] == "select-iso"? true: false);
|
||||
$.ajax({
|
||||
url: createURL("listDiskOfferings"),
|
||||
dataType: "json",
|
||||
async: true,
|
||||
success: function(json) {
|
||||
diskOfferingObjs = json.listdiskofferingsresponse.diskoffering;
|
||||
args.response.success({
|
||||
required: isRequred,
|
||||
customFlag: 'iscustomized', // Field determines if custom slider is shown
|
||||
data: {diskOfferings: diskOfferingObjs}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// Step 5: Network
|
||||
function(args) {
|
||||
if(diskOfferingObjs != null && diskOfferingObjs.length > 0) {
|
||||
for(var i=0; i < diskOfferingObjs.length; i++) {
|
||||
if(diskOfferingObjs[i].id == args.currentData.diskofferingid) {
|
||||
selectedDiskOfferingObj = diskOfferingObjs[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (selectedZoneObj.networktype == "Advanced") { //Advanced zone. Show network list.
|
||||
step5ContainerType = 'select-network';
|
||||
}
|
||||
else { //Basic zone. Show securigy group list or nothing(when no SecurityGroup service in guest network)
|
||||
var includingSecurityGroupService = false;
|
||||
$.ajax({
|
||||
url: createURL("listNetworks&trafficType=Guest&zoneId=" + selectedZoneObj.id),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
//basic zone should have only one guest network returned in this API call
|
||||
var items = json.listnetworksresponse.network;
|
||||
if(items != null && items.length > 0) {
|
||||
var networkObj = items[0]; //basic zone has only one guest network
|
||||
var serviceObjArray = networkObj.service;
|
||||
for(var k = 0; k < serviceObjArray.length; k++) {
|
||||
if(serviceObjArray[k].name == "SecurityGroup") {
|
||||
includingSecurityGroupService = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if(includingSecurityGroupService == false || selectedHypervisor == "VMware") {
|
||||
step5ContainerType = 'nothing-to-select';
|
||||
}
|
||||
else {
|
||||
step5ContainerType = 'select-security-group';
|
||||
}
|
||||
}
|
||||
|
||||
//step5ContainerType = 'nothing-to-select'; //for testing only, comment it out before checking in
|
||||
if(step5ContainerType == 'select-network') {
|
||||
var defaultNetworkArray = [], optionalNetworkArray = [];
|
||||
var networkData = {
|
||||
zoneId: args.currentData.zoneid
|
||||
};
|
||||
|
||||
if (!(cloudStack.context.projects && cloudStack.context.projects[0])) {
|
||||
networkData.domainid = g_domainid;
|
||||
networkData.account = g_account;
|
||||
}
|
||||
|
||||
var networkObjs;
|
||||
$.ajax({
|
||||
url: createURL('listNetworks'),
|
||||
data: networkData,
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
networkObjs = json.listnetworksresponse.network ? json.listnetworksresponse.network : [];
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var apiCmd = "listNetworkOfferings&guestiptype=Isolated&supportedServices=sourceNat&state=Enabled&specifyvlan=false&zoneid=" + args.currentData.zoneid ;
|
||||
var array1 = [];
|
||||
var guestTrafficTypeTotal = 0;
|
||||
|
||||
$.ajax({
|
||||
url: createURL(apiCmd + array1.join("")), //get the network offering for isolated network with sourceNat
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
networkOfferingObjs = json.listnetworkofferingsresponse.networkoffering;
|
||||
}
|
||||
});
|
||||
//get network offerings (end) ***
|
||||
|
||||
|
||||
args.response.success({
|
||||
type: 'select-network',
|
||||
data: {
|
||||
myNetworks: [], //not used any more
|
||||
sharedNetworks: networkObjs,
|
||||
securityGroups: [],
|
||||
networkOfferings: networkOfferingObjs
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
else if(step5ContainerType == 'select-security-group') {
|
||||
var securityGroupArray = [];
|
||||
var data = {
|
||||
domainid: g_domainid,
|
||||
account: g_account
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
url: createURL("listSecurityGroups"),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
data: cloudStack.context.projects ? {} : data,
|
||||
success: function(json) {
|
||||
var items = json.listsecuritygroupsresponse.securitygroup;
|
||||
if (items != null && items.length > 0) {
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
if(items[i].name != "default") //exclude default security group because it is always applied
|
||||
securityGroupArray.push(items[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
args.response.success({
|
||||
type: 'select-security-group',
|
||||
data: {
|
||||
myNetworks: [], //not used any more
|
||||
sharedNetworks: [],
|
||||
securityGroups: securityGroupArray,
|
||||
networkOfferings: []
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
else if(step5ContainerType == 'nothing-to-select') {
|
||||
args.response.success({
|
||||
type: 'nothing-to-select',
|
||||
data: {
|
||||
myNetworks: [], //not used any more
|
||||
sharedNetworks: [],
|
||||
securityGroups: [],
|
||||
networkOfferings: []
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// Step 6: Review
|
||||
function(args) {
|
||||
return false;
|
||||
}
|
||||
],
|
||||
action: function(args) {
|
||||
/*
|
||||
var isValid = true;
|
||||
isValid &= validateString("Name", $thisPopup.find("#wizard_vm_name"), $thisPopup.find("#wizard_vm_name_errormsg"), true); //optional
|
||||
isValid &= validateString("Group", $thisPopup.find("#wizard_vm_group"), $thisPopup.find("#wizard_vm_group_errormsg"), true); //optional
|
||||
if (!isValid)
|
||||
return;
|
||||
*/
|
||||
|
||||
// Create a new VM!!!!
|
||||
var array1 = [];
|
||||
|
||||
//step 1 : select zone
|
||||
array1.push("&zoneId=" + args.data.zoneid);
|
||||
|
||||
//step 2: select template
|
||||
array1.push("&templateId=" + args.data.templateid);
|
||||
array1.push("&hypervisor=" + selectedHypervisor);
|
||||
|
||||
//step 3: select service offering
|
||||
array1.push("&serviceOfferingId=" + args.data.serviceofferingid);
|
||||
|
||||
//step 4: select disk offering
|
||||
if(args.data.diskofferingid != null && args.data.diskofferingid != "0") {
|
||||
array1.push("&diskOfferingId=" + args.data.diskofferingid);
|
||||
if(selectedDiskOfferingObj.iscustomized == true)
|
||||
array1.push("&size=" + args.data.size);
|
||||
}
|
||||
|
||||
//step 5: select network
|
||||
if (step5ContainerType == 'select-network') {
|
||||
var array2 = [];
|
||||
var defaultNetworkId = args.data.defaultNetwork; //args.data.defaultNetwork might be equal to string "new-network" or a network ID
|
||||
|
||||
var checkedNetworkIdArray;
|
||||
if(typeof(args.data["my-networks"]) == "object" && args.data["my-networks"].length != null) { //args.data["my-networks"] is an array of string, e.g. ["203", "202"],
|
||||
checkedNetworkIdArray = args.data["my-networks"];
|
||||
}
|
||||
else if(typeof(args.data["my-networks"]) == "string" && args.data["my-networks"].length > 0) { //args.data["my-networks"] is a string, e.g. "202"
|
||||
checkedNetworkIdArray = [];
|
||||
checkedNetworkIdArray.push(args.data["my-networks"]);
|
||||
}
|
||||
else { // typeof(args.data["my-networks"]) == null
|
||||
checkedNetworkIdArray = [];
|
||||
}
|
||||
|
||||
//create new network starts here
|
||||
if(args.data["new-network"] == "create-new-network") {
|
||||
var isCreateNetworkSuccessful = true;
|
||||
$.ajax({
|
||||
url: createURL("createNetwork&networkOfferingId="+args.data["new-network-networkofferingid"]+"&name="+todb(args.data["new-network-name"])+"&displayText="+todb(args.data["new-network-name"])+"&zoneId="+selectedZoneObj.id),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
newNetwork = json.createnetworkresponse.network;
|
||||
checkedNetworkIdArray.push(newNetwork.id);
|
||||
if(defaultNetworkId == "new-network")
|
||||
defaultNetworkId = newNetwork.id;
|
||||
},
|
||||
error: function(XMLHttpResponse) {
|
||||
isCreateNetworkSuccessful = false;
|
||||
var errorMsg = "Failed to create new network, unable to proceed to deploy VM. Error: " + parseXMLHttpResponse(XMLHttpResponse);
|
||||
//alert(errorMsg);
|
||||
args.response.error(errorMsg); //args.response.error(errorMsg) here doesn't show errorMsg. Waiting for Brian to fix it. use alert(errorMsg) to show errorMsg for now.
|
||||
}
|
||||
});
|
||||
if(isCreateNetworkSuccessful == false)
|
||||
return;
|
||||
}
|
||||
//create new network ends here
|
||||
|
||||
//add default network first
|
||||
if(defaultNetworkId != null && defaultNetworkId.length > 0)
|
||||
array2.push(defaultNetworkId);
|
||||
|
||||
//then, add other checked networks
|
||||
if(checkedNetworkIdArray.length > 0) {
|
||||
for(var i=0; i < checkedNetworkIdArray.length; i++) {
|
||||
if(checkedNetworkIdArray[i] != defaultNetworkId) //exclude defaultNetworkId that has been added to array2
|
||||
array2.push(checkedNetworkIdArray[i]);
|
||||
}
|
||||
}
|
||||
|
||||
array1.push("&networkIds=" + array2.join(","));
|
||||
}
|
||||
else if (step5ContainerType == 'select-security-group') {
|
||||
var checkedSecurityGroupIdArray;
|
||||
if(typeof(args.data["security-groups"]) == "object" && args.data["security-groups"].length != null) { //args.data["security-groups"] is an array of string, e.g. ["2375f8cc-8a73-4b8d-9b26-50885a25ffe0", "27c60d2a-de7f-4bb7-96e5-a602cec681df","c6301d77-99b5-4e8a-85e2-3ea2ab31c342"],
|
||||
checkedSecurityGroupIdArray = args.data["security-groups"];
|
||||
}
|
||||
else if(typeof(args.data["security-groups"]) == "string" && args.data["security-groups"].length > 0) { //args.data["security-groups"] is a string, e.g. "2375f8cc-8a73-4b8d-9b26-50885a25ffe0"
|
||||
checkedSecurityGroupIdArray = [];
|
||||
checkedSecurityGroupIdArray.push(args.data["security-groups"]);
|
||||
}
|
||||
else { // typeof(args.data["security-groups"]) == null
|
||||
checkedSecurityGroupIdArray = [];
|
||||
}
|
||||
|
||||
if(checkedSecurityGroupIdArray.length > 0)
|
||||
array1.push("&securitygroupids=" + checkedSecurityGroupIdArray.join(","));
|
||||
}
|
||||
|
||||
var displayname = args.data.displayname;
|
||||
if(displayname != null && displayname.length > 0) {
|
||||
array1.push("&displayname="+todb(displayname));
|
||||
array1.push("&name="+todb(displayname));
|
||||
}
|
||||
|
||||
var group = args.data.groupname;
|
||||
if (group != null && group.length > 0)
|
||||
array1.push("&group="+todb(group));
|
||||
|
||||
//array1.push("&startVm=false"); //for testing only, comment it out before checking in
|
||||
|
||||
$.ajax({
|
||||
url: createURL("deployVirtualMachine"+array1.join("")),
|
||||
dataType: "json",
|
||||
success: function(json) {
|
||||
var jid = json.deployvirtualmachineresponse.jobid;
|
||||
var vmid = json.deployvirtualmachineresponse.id;
|
||||
args.response.success(
|
||||
{_custom:
|
||||
{jobId: jid,
|
||||
getUpdatedItem: function(json) {
|
||||
var item = json.queryasyncjobresultresponse.jobresult.virtualmachine;
|
||||
if (item.password != null)
|
||||
alert("Password of new VM " + item.displayname + " is " + item.password);
|
||||
return item;
|
||||
},
|
||||
getActionFilter: function() {
|
||||
return vmActionfilter;
|
||||
},
|
||||
getUpdatedItemWhenAsyncJobFails: function() {
|
||||
var item;
|
||||
$.ajax({
|
||||
url: createURL("listVirtualMachines&id="+vmid),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
item = json.listvirtualmachinesresponse.virtualmachine[0];
|
||||
}
|
||||
});
|
||||
return item;
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
error: function(XMLHttpResponse) {
|
||||
args.response.error(parseXMLHttpResponse(XMLHttpResponse)); //wait for Brian to implement
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
}(jQuery, cloudStack));
|
||||
|
|
@ -15,11 +15,6 @@
|
|||
// specific language governing permissions and limitations
|
||||
// under the License.
|
||||
(function($, cloudStack) {
|
||||
|
||||
var zoneObjs, hypervisorObjs, featuredTemplateObjs, communityTemplateObjs, myTemplateObjs, featuredIsoObjs, communityIsoObjs, myIsoObjs, serviceOfferingObjs, diskOfferingObjs, networkOfferingObjs, physicalNetworkObjs;
|
||||
var selectedZoneObj, selectedTemplateObj, selectedHypervisor, selectedDiskOfferingObj;
|
||||
var step5ContainerType = 'nothing-to-select'; //'nothing-to-select', 'select-network', 'select-security-group'
|
||||
|
||||
cloudStack.sections.instances = {
|
||||
title: 'label.instances',
|
||||
id: 'instances',
|
||||
|
|
@ -69,513 +64,7 @@
|
|||
label: 'label.vm.add',
|
||||
|
||||
action: {
|
||||
custom: cloudStack.instanceWizard({
|
||||
maxDiskOfferingSize: function() {
|
||||
return g_capabilities.customdiskofferingmaxsize;
|
||||
},
|
||||
steps: [
|
||||
// Step 1: Setup
|
||||
function(args) {
|
||||
$.ajax({
|
||||
url: createURL("listZones&available=true"),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
zoneObjs = json.listzonesresponse.zone;
|
||||
args.response.success({ data: {zones: zoneObjs}});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// Step 2: Select template
|
||||
function(args) {
|
||||
$(zoneObjs).each(function(){
|
||||
if(this.id == args.currentData.zoneid) {
|
||||
selectedZoneObj = this;
|
||||
return false; //break the $.each() loop
|
||||
}
|
||||
});
|
||||
if(selectedZoneObj == null) {
|
||||
alert("error: can't find matched zone object");
|
||||
return;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: createURL("listHypervisors&zoneid="+args.currentData.zoneid),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
hypervisorObjs = json.listhypervisorsresponse.hypervisor;
|
||||
}
|
||||
});
|
||||
|
||||
//***** get templates/ISOs (begin) *****
|
||||
var selectedTemplate = args.currentData['select-template'];
|
||||
if (selectedTemplate == 'select-template') {
|
||||
var hypervisorArray = [];
|
||||
$(hypervisorObjs).each(function(index, item) {
|
||||
hypervisorArray.push(item.name);
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
url: createURL("listTemplates&templatefilter=featured&zoneid="+args.currentData.zoneid),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
featuredTemplateObjs = $.grep(json.listtemplatesresponse.template, function(item, index) {
|
||||
if($.inArray(item.hypervisor, hypervisorArray) > -1)
|
||||
return true;
|
||||
});
|
||||
}
|
||||
});
|
||||
$.ajax({
|
||||
url: createURL("listTemplates&templatefilter=community&zoneid="+args.currentData.zoneid),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
communityTemplateObjs = $.grep(json.listtemplatesresponse.template, function(item, index) {
|
||||
if($.inArray(item.hypervisor, hypervisorArray) > -1)
|
||||
return true;
|
||||
});
|
||||
}
|
||||
});
|
||||
$.ajax({
|
||||
url: createURL("listTemplates&templatefilter=selfexecutable&zoneid="+args.currentData.zoneid),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
myTemplateObjs = $.grep(json.listtemplatesresponse.template, function(item, index) {
|
||||
if($.inArray(item.hypervisor, hypervisorArray) > -1)
|
||||
return true;
|
||||
});
|
||||
}
|
||||
});
|
||||
} else if (selectedTemplate == 'select-iso') {
|
||||
$.ajax({
|
||||
url: createURL("listIsos&isofilter=featured&zoneid=" + args.currentData.zoneid + "&bootable=true"),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
featuredIsoObjs = json.listisosresponse.iso;
|
||||
}
|
||||
});
|
||||
$.ajax({
|
||||
url: createURL("listIsos&isofilter=community&zoneid=" + args.currentData.zoneid + "&bootable=true"),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
communityIsoObjs = json.listisosresponse.iso;
|
||||
}
|
||||
});
|
||||
$.ajax({
|
||||
url: createURL("listIsos&isofilter=selfexecutable&zoneid=" + args.currentData.zoneid + "&bootable=true"),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
myIsoObjs = json.listisosresponse.iso;
|
||||
}
|
||||
});
|
||||
}
|
||||
//***** get templates/ISOs (end) *****
|
||||
|
||||
|
||||
var templatesObj = {};
|
||||
if (selectedTemplate == 'select-template') {
|
||||
templatesObj = {
|
||||
featuredtemplates: featuredTemplateObjs,
|
||||
communitytemplates: communityTemplateObjs,
|
||||
mytemplates: myTemplateObjs
|
||||
}
|
||||
} else if (selectedTemplate == 'select-iso') {
|
||||
templatesObj = {
|
||||
featuredisos: featuredIsoObjs,
|
||||
communityisos: communityIsoObjs,
|
||||
myisos: myIsoObjs
|
||||
}
|
||||
}
|
||||
args.response.success({
|
||||
hypervisor: {
|
||||
idField: 'name',
|
||||
nameField: 'name'
|
||||
},
|
||||
data: {
|
||||
templates: templatesObj,
|
||||
hypervisors: hypervisorObjs
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// Step 3: Service offering
|
||||
function(args) {
|
||||
if(args.currentData["select-template"] == "select-template") {
|
||||
if(featuredTemplateObjs != null && featuredTemplateObjs.length > 0) {
|
||||
for(var i=0; i < featuredTemplateObjs.length; i++) {
|
||||
if(featuredTemplateObjs[i].id == args.currentData.templateid) {
|
||||
selectedTemplateObj = featuredTemplateObjs[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if(selectedTemplateObj == null) {
|
||||
if(communityTemplateObjs != null && communityTemplateObjs.length > 0) {
|
||||
for(var i=0; i < communityTemplateObjs.length; i++) {
|
||||
if(communityTemplateObjs[i].id == args.currentData.templateid) {
|
||||
selectedTemplateObj = communityTemplateObjs[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if(selectedTemplateObj == null) {
|
||||
if(myTemplateObjs != null && myTemplateObjs.length > 0) {
|
||||
for(var i=0; i < myTemplateObjs.length; i++) {
|
||||
if(myTemplateObjs[i].id == args.currentData.templateid) {
|
||||
selectedTemplateObj = myTemplateObjs[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if(selectedTemplateObj == null)
|
||||
alert("unable to find matched template object");
|
||||
else
|
||||
selectedHypervisor = selectedTemplateObj.hypervisor;
|
||||
}
|
||||
else { //(args.currentData["select-template"] == "select-iso"
|
||||
selectedHypervisor = args.currentData.hypervisorid;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: createURL("listServiceOfferings&issystem=false"),
|
||||
dataType: "json",
|
||||
async: true,
|
||||
success: function(json) {
|
||||
serviceOfferingObjs = json.listserviceofferingsresponse.serviceoffering;
|
||||
args.response.success({
|
||||
data: {serviceOfferings: serviceOfferingObjs}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// Step 4: Data disk offering
|
||||
function(args) {
|
||||
var isRequred = (args.currentData["select-template"] == "select-iso"? true: false);
|
||||
$.ajax({
|
||||
url: createURL("listDiskOfferings"),
|
||||
dataType: "json",
|
||||
async: true,
|
||||
success: function(json) {
|
||||
diskOfferingObjs = json.listdiskofferingsresponse.diskoffering;
|
||||
args.response.success({
|
||||
required: isRequred,
|
||||
customFlag: 'iscustomized', // Field determines if custom slider is shown
|
||||
data: {diskOfferings: diskOfferingObjs}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// Step 5: Network
|
||||
function(args) {
|
||||
if(diskOfferingObjs != null && diskOfferingObjs.length > 0) {
|
||||
for(var i=0; i < diskOfferingObjs.length; i++) {
|
||||
if(diskOfferingObjs[i].id == args.currentData.diskofferingid) {
|
||||
selectedDiskOfferingObj = diskOfferingObjs[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (selectedZoneObj.networktype == "Advanced") { //Advanced zone. Show network list.
|
||||
step5ContainerType = 'select-network';
|
||||
}
|
||||
else { //Basic zone. Show securigy group list or nothing(when no SecurityGroup service in guest network)
|
||||
var includingSecurityGroupService = false;
|
||||
$.ajax({
|
||||
url: createURL("listNetworks&trafficType=Guest&zoneId=" + selectedZoneObj.id),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
//basic zone should have only one guest network returned in this API call
|
||||
var items = json.listnetworksresponse.network;
|
||||
if(items != null && items.length > 0) {
|
||||
var networkObj = items[0]; //basic zone has only one guest network
|
||||
var serviceObjArray = networkObj.service;
|
||||
for(var k = 0; k < serviceObjArray.length; k++) {
|
||||
if(serviceObjArray[k].name == "SecurityGroup") {
|
||||
includingSecurityGroupService = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if(includingSecurityGroupService == false || selectedHypervisor == "VMware") {
|
||||
step5ContainerType = 'nothing-to-select';
|
||||
}
|
||||
else {
|
||||
step5ContainerType = 'select-security-group';
|
||||
}
|
||||
}
|
||||
|
||||
//step5ContainerType = 'nothing-to-select'; //for testing only, comment it out before checking in
|
||||
if(step5ContainerType == 'select-network') {
|
||||
var defaultNetworkArray = [], optionalNetworkArray = [];
|
||||
var networkData = {
|
||||
zoneId: args.currentData.zoneid
|
||||
};
|
||||
|
||||
if (!(cloudStack.context.projects && cloudStack.context.projects[0])) {
|
||||
networkData.domainid = g_domainid;
|
||||
networkData.account = g_account;
|
||||
}
|
||||
|
||||
var networkObjs;
|
||||
$.ajax({
|
||||
url: createURL('listNetworks'),
|
||||
data: networkData,
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
networkObjs = json.listnetworksresponse.network ? json.listnetworksresponse.network : [];
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var apiCmd = "listNetworkOfferings&guestiptype=Isolated&supportedServices=sourceNat&state=Enabled&specifyvlan=false&zoneid=" + args.currentData.zoneid ;
|
||||
var array1 = [];
|
||||
var guestTrafficTypeTotal = 0;
|
||||
|
||||
$.ajax({
|
||||
url: createURL(apiCmd + array1.join("")), //get the network offering for isolated network with sourceNat
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
networkOfferingObjs = json.listnetworkofferingsresponse.networkoffering;
|
||||
}
|
||||
});
|
||||
//get network offerings (end) ***
|
||||
|
||||
|
||||
args.response.success({
|
||||
type: 'select-network',
|
||||
data: {
|
||||
myNetworks: [], //not used any more
|
||||
sharedNetworks: networkObjs,
|
||||
securityGroups: [],
|
||||
networkOfferings: networkOfferingObjs
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
else if(step5ContainerType == 'select-security-group') {
|
||||
var securityGroupArray = [];
|
||||
var data = {
|
||||
domainid: g_domainid,
|
||||
account: g_account
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
url: createURL("listSecurityGroups"),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
data: cloudStack.context.projects ? {} : data,
|
||||
success: function(json) {
|
||||
var items = json.listsecuritygroupsresponse.securitygroup;
|
||||
if (items != null && items.length > 0) {
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
if(items[i].name != "default") //exclude default security group because it is always applied
|
||||
securityGroupArray.push(items[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
args.response.success({
|
||||
type: 'select-security-group',
|
||||
data: {
|
||||
myNetworks: [], //not used any more
|
||||
sharedNetworks: [],
|
||||
securityGroups: securityGroupArray,
|
||||
networkOfferings: []
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
else if(step5ContainerType == 'nothing-to-select') {
|
||||
args.response.success({
|
||||
type: 'nothing-to-select',
|
||||
data: {
|
||||
myNetworks: [], //not used any more
|
||||
sharedNetworks: [],
|
||||
securityGroups: [],
|
||||
networkOfferings: []
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// Step 6: Review
|
||||
function(args) {
|
||||
return false;
|
||||
}
|
||||
],
|
||||
action: function(args) {
|
||||
/*
|
||||
var isValid = true;
|
||||
isValid &= validateString("Name", $thisPopup.find("#wizard_vm_name"), $thisPopup.find("#wizard_vm_name_errormsg"), true); //optional
|
||||
isValid &= validateString("Group", $thisPopup.find("#wizard_vm_group"), $thisPopup.find("#wizard_vm_group_errormsg"), true); //optional
|
||||
if (!isValid)
|
||||
return;
|
||||
*/
|
||||
|
||||
// Create a new VM!!!!
|
||||
var array1 = [];
|
||||
|
||||
//step 1 : select zone
|
||||
array1.push("&zoneId=" + args.data.zoneid);
|
||||
|
||||
//step 2: select template
|
||||
array1.push("&templateId=" + args.data.templateid);
|
||||
array1.push("&hypervisor=" + selectedHypervisor);
|
||||
|
||||
//step 3: select service offering
|
||||
array1.push("&serviceOfferingId=" + args.data.serviceofferingid);
|
||||
|
||||
//step 4: select disk offering
|
||||
if(args.data.diskofferingid != null && args.data.diskofferingid != "0") {
|
||||
array1.push("&diskOfferingId=" + args.data.diskofferingid);
|
||||
if(selectedDiskOfferingObj.iscustomized == true)
|
||||
array1.push("&size=" + args.data.size);
|
||||
}
|
||||
|
||||
//step 5: select network
|
||||
if (step5ContainerType == 'select-network') {
|
||||
var array2 = [];
|
||||
var defaultNetworkId = args.data.defaultNetwork; //args.data.defaultNetwork might be equal to string "new-network" or a network ID
|
||||
|
||||
var checkedNetworkIdArray;
|
||||
if(typeof(args.data["my-networks"]) == "object" && args.data["my-networks"].length != null) { //args.data["my-networks"] is an array of string, e.g. ["203", "202"],
|
||||
checkedNetworkIdArray = args.data["my-networks"];
|
||||
}
|
||||
else if(typeof(args.data["my-networks"]) == "string" && args.data["my-networks"].length > 0) { //args.data["my-networks"] is a string, e.g. "202"
|
||||
checkedNetworkIdArray = [];
|
||||
checkedNetworkIdArray.push(args.data["my-networks"]);
|
||||
}
|
||||
else { // typeof(args.data["my-networks"]) == null
|
||||
checkedNetworkIdArray = [];
|
||||
}
|
||||
|
||||
//create new network starts here
|
||||
if(args.data["new-network"] == "create-new-network") {
|
||||
var isCreateNetworkSuccessful = true;
|
||||
$.ajax({
|
||||
url: createURL("createNetwork&networkOfferingId="+args.data["new-network-networkofferingid"]+"&name="+todb(args.data["new-network-name"])+"&displayText="+todb(args.data["new-network-name"])+"&zoneId="+selectedZoneObj.id),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
newNetwork = json.createnetworkresponse.network;
|
||||
checkedNetworkIdArray.push(newNetwork.id);
|
||||
if(defaultNetworkId == "new-network")
|
||||
defaultNetworkId = newNetwork.id;
|
||||
},
|
||||
error: function(XMLHttpResponse) {
|
||||
isCreateNetworkSuccessful = false;
|
||||
var errorMsg = "Failed to create new network, unable to proceed to deploy VM. Error: " + parseXMLHttpResponse(XMLHttpResponse);
|
||||
//alert(errorMsg);
|
||||
args.response.error(errorMsg); //args.response.error(errorMsg) here doesn't show errorMsg. Waiting for Brian to fix it. use alert(errorMsg) to show errorMsg for now.
|
||||
}
|
||||
});
|
||||
if(isCreateNetworkSuccessful == false)
|
||||
return;
|
||||
}
|
||||
//create new network ends here
|
||||
|
||||
//add default network first
|
||||
if(defaultNetworkId != null && defaultNetworkId.length > 0)
|
||||
array2.push(defaultNetworkId);
|
||||
|
||||
//then, add other checked networks
|
||||
if(checkedNetworkIdArray.length > 0) {
|
||||
for(var i=0; i < checkedNetworkIdArray.length; i++) {
|
||||
if(checkedNetworkIdArray[i] != defaultNetworkId) //exclude defaultNetworkId that has been added to array2
|
||||
array2.push(checkedNetworkIdArray[i]);
|
||||
}
|
||||
}
|
||||
|
||||
array1.push("&networkIds=" + array2.join(","));
|
||||
}
|
||||
else if (step5ContainerType == 'select-security-group') {
|
||||
var checkedSecurityGroupIdArray;
|
||||
if(typeof(args.data["security-groups"]) == "object" && args.data["security-groups"].length != null) { //args.data["security-groups"] is an array of string, e.g. ["2375f8cc-8a73-4b8d-9b26-50885a25ffe0", "27c60d2a-de7f-4bb7-96e5-a602cec681df","c6301d77-99b5-4e8a-85e2-3ea2ab31c342"],
|
||||
checkedSecurityGroupIdArray = args.data["security-groups"];
|
||||
}
|
||||
else if(typeof(args.data["security-groups"]) == "string" && args.data["security-groups"].length > 0) { //args.data["security-groups"] is a string, e.g. "2375f8cc-8a73-4b8d-9b26-50885a25ffe0"
|
||||
checkedSecurityGroupIdArray = [];
|
||||
checkedSecurityGroupIdArray.push(args.data["security-groups"]);
|
||||
}
|
||||
else { // typeof(args.data["security-groups"]) == null
|
||||
checkedSecurityGroupIdArray = [];
|
||||
}
|
||||
|
||||
if(checkedSecurityGroupIdArray.length > 0)
|
||||
array1.push("&securitygroupids=" + checkedSecurityGroupIdArray.join(","));
|
||||
}
|
||||
|
||||
var displayname = args.data.displayname;
|
||||
if(displayname != null && displayname.length > 0) {
|
||||
array1.push("&displayname="+todb(displayname));
|
||||
array1.push("&name="+todb(displayname));
|
||||
}
|
||||
|
||||
var group = args.data.groupname;
|
||||
if (group != null && group.length > 0)
|
||||
array1.push("&group="+todb(group));
|
||||
|
||||
//array1.push("&startVm=false"); //for testing only, comment it out before checking in
|
||||
|
||||
$.ajax({
|
||||
url: createURL("deployVirtualMachine"+array1.join("")),
|
||||
dataType: "json",
|
||||
success: function(json) {
|
||||
var jid = json.deployvirtualmachineresponse.jobid;
|
||||
var vmid = json.deployvirtualmachineresponse.id;
|
||||
args.response.success(
|
||||
{_custom:
|
||||
{jobId: jid,
|
||||
getUpdatedItem: function(json) {
|
||||
var item = json.queryasyncjobresultresponse.jobresult.virtualmachine;
|
||||
if (item.password != null)
|
||||
alert("Password of new VM " + item.displayname + " is " + item.password);
|
||||
return item;
|
||||
},
|
||||
getActionFilter: function() {
|
||||
return vmActionfilter;
|
||||
},
|
||||
getUpdatedItemWhenAsyncJobFails: function() {
|
||||
var item;
|
||||
$.ajax({
|
||||
url: createURL("listVirtualMachines&id="+vmid),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
item = json.listvirtualmachinesresponse.virtualmachine[0];
|
||||
}
|
||||
});
|
||||
return item;
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
error: function(XMLHttpResponse) {
|
||||
args.response.error(parseXMLHttpResponse(XMLHttpResponse)); //wait for Brian to implement
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
custom: cloudStack.uiCustom.instanceWizard(cloudStack.instanceWizard)
|
||||
},
|
||||
|
||||
messages: {
|
||||
|
|
|
|||
|
|
@ -177,7 +177,7 @@
|
|||
}
|
||||
});
|
||||
|
||||
var sectionsToShow = ['networks'];
|
||||
var sectionsToShow = ['networks', 'vpc'];
|
||||
if(havingSecurityGroupNetwork == true)
|
||||
sectionsToShow.push('securityGroups');
|
||||
|
||||
|
|
@ -3105,6 +3105,91 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
vpc: {
|
||||
type: 'select',
|
||||
title: 'VPC',
|
||||
id: 'vpc',
|
||||
listView: {
|
||||
id: 'vpc',
|
||||
label: 'VPC',
|
||||
fields: {
|
||||
name: { label: 'Name' },
|
||||
zone: { label: 'Zone' },
|
||||
cidr: { label: 'CIDR' }
|
||||
},
|
||||
dataProvider: function(args) {
|
||||
args.response.success({
|
||||
data: [
|
||||
{
|
||||
name: 'VPC 1',
|
||||
zone: 'San Jose',
|
||||
cidr: '0.0.0.0/0',
|
||||
networkdomain: 'testdomain',
|
||||
accountdomain: 'testdomain'
|
||||
},
|
||||
{
|
||||
name: 'VPC 2',
|
||||
zone: 'San Jose',
|
||||
cidr: '0.0.0.0/0',
|
||||
networkdomain: 'testdomain',
|
||||
accountdomain: 'testdomain'
|
||||
},
|
||||
{
|
||||
name: 'VPC 3',
|
||||
zone: 'Cupertino',
|
||||
cidr: '0.0.0.0/0',
|
||||
networkdomain: 'testdomain',
|
||||
accountdomain: 'testdomain'
|
||||
},
|
||||
{
|
||||
name: 'VPC 4',
|
||||
zone: 'San Jose',
|
||||
cidr: '0.0.0.0/0',
|
||||
networkdomain: 'testdomain',
|
||||
accountdomain: 'testdomain'
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
actions: {
|
||||
add: {
|
||||
label: 'Add VPC',
|
||||
createForm: {
|
||||
title: 'Add new VPC',
|
||||
fields: {
|
||||
name: { label: 'Name', validation: { required: true } },
|
||||
zone: {
|
||||
label: 'Zone',
|
||||
validation: { required: true },
|
||||
select: function(args) {
|
||||
args.response.success({
|
||||
data: [
|
||||
{ id: 'zone1', description: 'Zone 1' },
|
||||
{ id: 'zone2', description: 'Zone 2' },
|
||||
{ id: 'zone3', description: 'Zone 3' }
|
||||
]
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
messages: {
|
||||
notification: function(args) { return 'Add new VPC'; }
|
||||
},
|
||||
action: function(args) {
|
||||
args.response.success();
|
||||
},
|
||||
notification: { poll: function(args) { args.complete(); } }
|
||||
},
|
||||
editVpc: {
|
||||
label: 'Edit VPC',
|
||||
action: {
|
||||
custom: cloudStack.uiCustom.vpc(cloudStack.vpc)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
/**
|
||||
* Instance wizard
|
||||
*/
|
||||
cloudStack.instanceWizard = function(args) {
|
||||
cloudStack.uiCustom.instanceWizard = function(args) {
|
||||
return function(listViewArgs) {
|
||||
var context = listViewArgs.context;
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,404 @@
|
|||
(function($, cloudStack) {
|
||||
var elems = {
|
||||
router: function() {
|
||||
var $router = $('<li>').addClass('tier virtual-router');
|
||||
var $title = $('<span>').addClass('title').html('Virtual Router');
|
||||
|
||||
$router.append($title);
|
||||
|
||||
// Append horizontal chart line
|
||||
$router.append($('<div>').addClass('connect-line'));
|
||||
|
||||
return $router;
|
||||
},
|
||||
tier: function(args) {
|
||||
var name = args.name;
|
||||
var cidr = args.cidr;
|
||||
var context = args.context;
|
||||
var vmListView = args.vmListView;
|
||||
var disabledActions = args.actionPreFilter ? args.actionPreFilter({
|
||||
context: context
|
||||
}) : true;
|
||||
var actions = $.map(
|
||||
args.actions ? args.actions : {}, function(value, key) {
|
||||
return {
|
||||
id: key,
|
||||
action: value,
|
||||
isDisabled: $.isArray(disabledActions) &&
|
||||
$.inArray(key, disabledActions) != -1
|
||||
};
|
||||
}
|
||||
);
|
||||
var isPlaceholder = args.isPlaceholder;
|
||||
var virtualMachines = args.virtualMachines;
|
||||
var $tier = $('<li>').addClass('tier');
|
||||
var $title = $('<span>').addClass('title');
|
||||
var $cidr = $('<span>').addClass('cidr');
|
||||
var $vmCount = $('<span>').addClass('vm-count');
|
||||
var $actions = $('<div>').addClass('actions');
|
||||
|
||||
// Ignore special actions
|
||||
// -- Add tier action is handled separately
|
||||
actions = $.grep(actions, function(action) {
|
||||
return action.id != 'add';
|
||||
});
|
||||
|
||||
// VM count shows instance list
|
||||
$vmCount.click(function() {
|
||||
var $dialog = $('<div>');
|
||||
var $listView = $('<div>').listView($.extend(true, {}, vmListView, {
|
||||
context: context
|
||||
}));
|
||||
|
||||
$dialog.append($listView);
|
||||
$dialog.dialog({
|
||||
title: 'VMs in this tier',
|
||||
dialogClass: 'multi-edit-add-list panel configure-acl',
|
||||
width: 825,
|
||||
height: 600,
|
||||
buttons: {
|
||||
'Done': function() {
|
||||
$(':ui-dialog').remove();
|
||||
$('.overlay').remove();
|
||||
}
|
||||
}
|
||||
}).closest('.ui-dialog').overlay();
|
||||
});
|
||||
|
||||
if (isPlaceholder) {
|
||||
$tier.addClass('placeholder');
|
||||
$title.html('Create Tier');
|
||||
} else {
|
||||
$title.html(name);
|
||||
$cidr.html(cidr);
|
||||
$vmCount.append(
|
||||
$('<span>').addClass('total').html(virtualMachines.length),
|
||||
' VMs'
|
||||
);
|
||||
$tier.append($actions);
|
||||
|
||||
// Build action buttons
|
||||
$(actions).map(function(index, action) {
|
||||
var $action = $('<div>').addClass('action');
|
||||
var shortLabel = action.action.shortLabel;
|
||||
var label = action.action.label;
|
||||
var isDisabled = action.isDisabled;
|
||||
|
||||
$action.addClass(action.id);
|
||||
|
||||
if (action.id != 'remove') {
|
||||
$action.append($('<span>').addClass('label').html(shortLabel));
|
||||
} else {
|
||||
$action.append($('<span>').addClass('icon').html(' '));
|
||||
}
|
||||
$actions.append($action);
|
||||
$action.attr('title', label);
|
||||
|
||||
if (isDisabled) $action.addClass('disabled');
|
||||
|
||||
// Action event
|
||||
$action.click(function() {
|
||||
if (isDisabled) {
|
||||
return false;
|
||||
}
|
||||
|
||||
tierAction({
|
||||
action: action,
|
||||
context: context,
|
||||
$tier: $tier
|
||||
});
|
||||
|
||||
return true;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
$tier.prepend($title);
|
||||
|
||||
if (!isPlaceholder) {
|
||||
$tier.append($title, $cidr, $vmCount);
|
||||
}
|
||||
|
||||
// Append horizontal chart line
|
||||
$tier.append($('<div>').addClass('connect-line'));
|
||||
|
||||
return $tier;
|
||||
},
|
||||
chart: function(args) {
|
||||
var tiers = args.tiers;
|
||||
var vmListView = args.vmListView;
|
||||
var actions = args.actions;
|
||||
var actionPreFilter = args.actionPreFilter;
|
||||
var vpcName = args.vpcName;
|
||||
var context = args.context;
|
||||
var $tiers = $('<ul>').addClass('tiers');
|
||||
var $router = elems.router();
|
||||
var $chart = $('<div>').addClass('vpc-chart');
|
||||
var $title = $('<div>').addClass('vpc-title').html(vpcName);
|
||||
|
||||
var showAddTierDialog = function() {
|
||||
if ($(this).find('.loading-overlay').size()) {
|
||||
return false;
|
||||
}
|
||||
|
||||
addTierDialog({
|
||||
$tiers: $tiers,
|
||||
context: context,
|
||||
actions: actions,
|
||||
vmListView: vmListView,
|
||||
actionPreFilter: actionPreFilter
|
||||
});
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
if (tiers.length) {
|
||||
$(tiers).map(function(index, tier) {
|
||||
var $tier = elems.tier({
|
||||
name: tier.name,
|
||||
cidr: tier.cidr,
|
||||
virtualMachines: tier.virtualMachines,
|
||||
vmListView: vmListView,
|
||||
actions: actions,
|
||||
actionPreFilter: actionPreFilter,
|
||||
context: $.extend(true, {}, context, {
|
||||
tiers: [tier]
|
||||
})
|
||||
});
|
||||
|
||||
$tier.appendTo($tiers);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
elems.tier({ isPlaceholder: true }).appendTo($tiers)
|
||||
.click(showAddTierDialog);
|
||||
$tiers.prepend($router);
|
||||
$chart.append($title, $tiers);
|
||||
|
||||
if (!tiers || !tiers.length) {
|
||||
showAddTierDialog();
|
||||
}
|
||||
|
||||
return $chart;
|
||||
}
|
||||
};
|
||||
|
||||
// Handles tier action, including UI effects
|
||||
var tierAction = function(args) {
|
||||
var $tier = args.$tier;
|
||||
var $loading = $('<div>').addClass('loading-overlay');
|
||||
var actionArgs = args.action.action;
|
||||
var action = actionArgs.action;
|
||||
var actionID = args.action.id;
|
||||
var notification = actionArgs.notification;
|
||||
var label = actionArgs.label;
|
||||
var context = args.context;
|
||||
|
||||
var success = function(args) {
|
||||
var remove = args ? args.remove : false;
|
||||
|
||||
cloudStack.ui.notifications.add(
|
||||
// Notification
|
||||
{
|
||||
desc: label,
|
||||
poll: notification.poll
|
||||
},
|
||||
|
||||
// Success
|
||||
function(args) {
|
||||
if (remove) {
|
||||
$tier.remove();
|
||||
} else {
|
||||
$loading.remove();
|
||||
}
|
||||
|
||||
if (actionID == 'addVM') {
|
||||
// Increment VM total
|
||||
var $total = $tier.find('.vm-count .total');
|
||||
var prevTotal = parseInt($total.html());
|
||||
var newTotal = prevTotal + 1;
|
||||
|
||||
$total.html(newTotal);
|
||||
}
|
||||
},
|
||||
|
||||
{},
|
||||
|
||||
// Error
|
||||
function(args) {
|
||||
$loading.remove();
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
switch(actionID) {
|
||||
case 'addVM':
|
||||
action({
|
||||
context: context,
|
||||
complete: function(args) {
|
||||
$loading.appendTo($tier);
|
||||
success(args);
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'remove':
|
||||
$loading.appendTo($tier);
|
||||
action({
|
||||
context: context,
|
||||
response: {
|
||||
success: function(args) {
|
||||
success({ remove: true });
|
||||
}
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'acl':
|
||||
// Show ACL dialog
|
||||
$('<div>').multiEdit(
|
||||
$.extend(true, {}, actionArgs.multiEdit, {
|
||||
context: context
|
||||
})
|
||||
).dialog({
|
||||
title: 'Configure ACL',
|
||||
dialogClass: 'configure-acl',
|
||||
width: 820,
|
||||
height: 600,
|
||||
buttons: {
|
||||
'Done': function() {
|
||||
$(':ui-dialog').remove();
|
||||
$('.overlay').remove();
|
||||
}
|
||||
}
|
||||
}).closest('.ui-dialog').overlay();
|
||||
break;
|
||||
default:
|
||||
$loading.appendTo($tier);
|
||||
action({
|
||||
context: context,
|
||||
complete: success,
|
||||
response: {
|
||||
success: success,
|
||||
error: function(args) { $loading.remove(); }
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Appends a new tier to chart
|
||||
var addNewTier = function(args) {
|
||||
var actions = args.actions;
|
||||
var vmListView = args.vmListView;
|
||||
var actionPreFilter = args.actionPreFilter;
|
||||
var tier = $.extend(args.tier, {
|
||||
vmListView: vmListView,
|
||||
actions: actions,
|
||||
actionPreFilter: actionPreFilter,
|
||||
virtualMachines: []
|
||||
});
|
||||
var $tiers = args.$tiers;
|
||||
|
||||
$tiers.find('li.placeholder')
|
||||
.before(
|
||||
elems.tier(tier)
|
||||
.hide()
|
||||
.fadeIn('slow')
|
||||
);
|
||||
};
|
||||
|
||||
// Renders the add tier form, in a dialog
|
||||
var addTierDialog = function(args) {
|
||||
var actions = args.actions;
|
||||
var context = args.context;
|
||||
var vmListView = args.vmListView;
|
||||
var actionPreFilter = args.actionPreFilter;
|
||||
var $tiers = args.$tiers;
|
||||
|
||||
cloudStack.dialog.createForm({
|
||||
form: actions.add.createForm,
|
||||
after: function(args) {
|
||||
var $loading = $('<div>').addClass('loading-overlay').prependTo($tiers.find('li.placeholder'));
|
||||
actions.add.action({
|
||||
context: context,
|
||||
data: args.data,
|
||||
response: {
|
||||
success: function(args) {
|
||||
var tier = args.data;
|
||||
|
||||
cloudStack.ui.notifications.add(
|
||||
// Notification
|
||||
{
|
||||
desc: actions.add.label,
|
||||
poll: actions.add.notification.poll
|
||||
},
|
||||
|
||||
// Success
|
||||
function(args) {
|
||||
$loading.remove();
|
||||
addNewTier({
|
||||
tier: tier,
|
||||
$tiers: $tiers,
|
||||
actions: actions,
|
||||
actionPreFilter: actionPreFilter,
|
||||
vmListView: vmListView
|
||||
});
|
||||
},
|
||||
|
||||
{},
|
||||
|
||||
// Error
|
||||
function(args) {
|
||||
$loading.remove();
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
cloudStack.uiCustom.vpc = function(args) {
|
||||
var vmListView = args.vmListView;
|
||||
var tierArgs = args.tiers;
|
||||
|
||||
return function(args) {
|
||||
var context = args.context;
|
||||
var $browser = $('#browser .container');
|
||||
var $toolbar = $('<div>').addClass('toolbar');
|
||||
var vpc = args.context.vpc[0];
|
||||
|
||||
$browser.cloudBrowser('addPanel', {
|
||||
maximizeIfSelected: true,
|
||||
title: 'Configure VPC: ' + vpc.name,
|
||||
complete: function($panel) {
|
||||
var $loading = $('<div>').addClass('loading-overlay').appendTo($panel);
|
||||
|
||||
$panel.append($toolbar);
|
||||
|
||||
// Load data
|
||||
tierArgs.dataProvider({
|
||||
context: context,
|
||||
response: {
|
||||
success: function(args) {
|
||||
var tiers = args.data.tiers;
|
||||
var $chart = elems.chart({
|
||||
vmListView: vmListView,
|
||||
context: context,
|
||||
actions: tierArgs.actions,
|
||||
actionPreFilter: tierArgs.actionPreFilter,
|
||||
vpcName: vpc.name,
|
||||
tiers: tiers
|
||||
}).appendTo($panel);
|
||||
|
||||
$loading.remove();
|
||||
$chart.fadeIn(function() {
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
};
|
||||
}(jQuery, cloudStack));
|
||||
|
|
@ -0,0 +1,469 @@
|
|||
(function($, cloudStack) {
|
||||
var aclMultiEdit = {
|
||||
noSelect: true,
|
||||
fields: {
|
||||
'cidrlist': { edit: true, label: 'Source CIDR' },
|
||||
'protocol': {
|
||||
label: 'Protocol',
|
||||
select: function(args) {
|
||||
args.$select.change(function() {
|
||||
var $inputs = args.$form.find('input');
|
||||
var $icmpFields = $inputs.filter(function() {
|
||||
var name = $(this).attr('name');
|
||||
|
||||
return $.inArray(name, [
|
||||
'icmptype',
|
||||
'icmpcode'
|
||||
]) > -1;
|
||||
});
|
||||
var $otherFields = $inputs.filter(function() {
|
||||
var name = $(this).attr('name');
|
||||
|
||||
return name != 'icmptype' && name != 'icmpcode' && name != 'cidrlist';
|
||||
});
|
||||
|
||||
if ($(this).val() == 'icmp') {
|
||||
$icmpFields.attr('disabled', false);
|
||||
$otherFields.attr('disabled', 'disabled');
|
||||
} else {
|
||||
$otherFields.attr('disabled', false);
|
||||
$icmpFields.attr('disabled', 'disabled');
|
||||
}
|
||||
});
|
||||
|
||||
args.response.success({
|
||||
data: [
|
||||
{ name: 'tcp', description: 'TCP' },
|
||||
{ name: 'udp', description: 'UDP' },
|
||||
{ name: 'icmp', description: 'ICMP' }
|
||||
]
|
||||
});
|
||||
}
|
||||
},
|
||||
'startport': { edit: true, label: 'Start Port' },
|
||||
'endport': { edit: true, label: 'End Port' },
|
||||
'icmptype': { edit: true, label: 'ICMP Type', isDisabled: true },
|
||||
'icmpcode': { edit: true, label: 'ICMP Code', isDisabled: true },
|
||||
'add-rule': {
|
||||
label: 'Add',
|
||||
addButton: true
|
||||
}
|
||||
},
|
||||
add: {
|
||||
label: 'Add',
|
||||
action: function(args) {
|
||||
setTimeout(function() {
|
||||
args.response.success({
|
||||
notification: {
|
||||
label: 'Add ACL rule',
|
||||
poll: function(args) { args.complete(); }
|
||||
}
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
destroy: {
|
||||
label: 'Remove Rule',
|
||||
action: function(args) {
|
||||
setTimeout(function() {
|
||||
args.response.success({
|
||||
notification: {
|
||||
label: 'Remove ACL rule',
|
||||
poll: function(args) { args.complete(); }
|
||||
}
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
},
|
||||
dataProvider: function(args) {
|
||||
setTimeout(function() {
|
||||
args.response.success({
|
||||
data: [
|
||||
{
|
||||
"id": 11,
|
||||
"protocol": "icmp",
|
||||
"ipaddressid": 4,
|
||||
"ipaddress": "10.223.71.23",
|
||||
"state": "Active",
|
||||
"cidrlist": "0.0.0.0/0",
|
||||
"icmptype": 2,
|
||||
"icmpcode": 22
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"protocol": "udp",
|
||||
"startport": "500",
|
||||
"endport": "10000",
|
||||
"ipaddressid": 4,
|
||||
"ipaddress": "10.223.71.23",
|
||||
"state": "Active",
|
||||
"cidrlist": "0.0.0.0/24"
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"protocol": "tcp",
|
||||
"startport": "20",
|
||||
"endport": "200",
|
||||
"ipaddressid": 4,
|
||||
"ipaddress": "10.223.71.23",
|
||||
"state": "Active",
|
||||
"cidrlist": "0.0.0.0/24"
|
||||
},
|
||||
{
|
||||
"id": 11,
|
||||
"protocol": "icmp",
|
||||
"ipaddressid": 4,
|
||||
"ipaddress": "10.223.71.23",
|
||||
"state": "Active",
|
||||
"cidrlist": "0.0.0.0/0",
|
||||
"icmptype": 2,
|
||||
"icmpcode": 22
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"protocol": "udp",
|
||||
"startport": "500",
|
||||
"endport": "10000",
|
||||
"ipaddressid": 4,
|
||||
"ipaddress": "10.223.71.23",
|
||||
"state": "Active",
|
||||
"cidrlist": "0.0.0.0/24"
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"protocol": "tcp",
|
||||
"startport": "20",
|
||||
"endport": "200",
|
||||
"ipaddressid": 4,
|
||||
"ipaddress": "10.223.71.23",
|
||||
"state": "Active",
|
||||
"cidrlist": "0.0.0.0/24"
|
||||
},
|
||||
{
|
||||
"id": 11,
|
||||
"protocol": "icmp",
|
||||
"ipaddressid": 4,
|
||||
"ipaddress": "10.223.71.23",
|
||||
"state": "Active",
|
||||
"cidrlist": "0.0.0.0/0",
|
||||
"icmptype": 2,
|
||||
"icmpcode": 22
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"protocol": "udp",
|
||||
"startport": "500",
|
||||
"endport": "10000",
|
||||
"ipaddressid": 4,
|
||||
"ipaddress": "10.223.71.23",
|
||||
"state": "Active",
|
||||
"cidrlist": "0.0.0.0/24"
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"protocol": "tcp",
|
||||
"startport": "20",
|
||||
"endport": "200",
|
||||
"ipaddressid": 4,
|
||||
"ipaddress": "10.223.71.23",
|
||||
"state": "Active",
|
||||
"cidrlist": "0.0.0.0/24"
|
||||
},
|
||||
{
|
||||
"id": 11,
|
||||
"protocol": "icmp",
|
||||
"ipaddressid": 4,
|
||||
"ipaddress": "10.223.71.23",
|
||||
"state": "Active",
|
||||
"cidrlist": "0.0.0.0/0",
|
||||
"icmptype": 2,
|
||||
"icmpcode": 22
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"protocol": "udp",
|
||||
"startport": "500",
|
||||
"endport": "10000",
|
||||
"ipaddressid": 4,
|
||||
"ipaddress": "10.223.71.23",
|
||||
"state": "Active",
|
||||
"cidrlist": "0.0.0.0/24"
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"protocol": "tcp",
|
||||
"startport": "20",
|
||||
"endport": "200",
|
||||
"ipaddressid": 4,
|
||||
"ipaddress": "10.223.71.23",
|
||||
"state": "Active",
|
||||
"cidrlist": "0.0.0.0/24"
|
||||
},
|
||||
{
|
||||
"id": 11,
|
||||
"protocol": "icmp",
|
||||
"ipaddressid": 4,
|
||||
"ipaddress": "10.223.71.23",
|
||||
"state": "Active",
|
||||
"cidrlist": "0.0.0.0/0",
|
||||
"icmptype": 2,
|
||||
"icmpcode": 22
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"protocol": "udp",
|
||||
"startport": "500",
|
||||
"endport": "10000",
|
||||
"ipaddressid": 4,
|
||||
"ipaddress": "10.223.71.23",
|
||||
"state": "Active",
|
||||
"cidrlist": "0.0.0.0/24"
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"protocol": "tcp",
|
||||
"startport": "20",
|
||||
"endport": "200",
|
||||
"ipaddressid": 4,
|
||||
"ipaddress": "10.223.71.23",
|
||||
"state": "Active",
|
||||
"cidrlist": "0.0.0.0/24"
|
||||
}
|
||||
]
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
};
|
||||
|
||||
cloudStack.vpc = {
|
||||
vmListView: {
|
||||
id: 'vpcTierInstances',
|
||||
listView: {
|
||||
filters: {
|
||||
mine: { label: 'My instances' },
|
||||
all: { label: 'All instances' },
|
||||
running: { label: 'Running instances' },
|
||||
destroyed: { label: 'Destroyed instances' }
|
||||
},
|
||||
fields: {
|
||||
name: { label: 'Name', editable: true },
|
||||
account: { label: 'Account' },
|
||||
zonename: { label: 'Zone' },
|
||||
state: {
|
||||
label: 'Status',
|
||||
indicator: {
|
||||
'Running': 'on',
|
||||
'Stopped': 'off',
|
||||
'Destroyed': 'off'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// List view actions
|
||||
actions: {
|
||||
restart: {
|
||||
label: 'Restart instance',
|
||||
action: function(args) {
|
||||
setTimeout(function() {
|
||||
args.response.success({
|
||||
data: {
|
||||
state: 'Restarting'
|
||||
}
|
||||
});
|
||||
}, 1000);
|
||||
},
|
||||
messages: {
|
||||
confirm: function(args) {
|
||||
return 'Are you sure you want to restart ' + args.name + '?';
|
||||
},
|
||||
notification: function(args) {
|
||||
return 'Rebooting VM: ' + args.name;
|
||||
}
|
||||
},
|
||||
notification: {
|
||||
poll: function(args) { args.complete(); }
|
||||
}
|
||||
},
|
||||
stop: {
|
||||
label: 'Stop instance',
|
||||
action: function(args) {
|
||||
setTimeout(function() {
|
||||
args.response.success({
|
||||
data: { state: 'Stopping' }
|
||||
});
|
||||
}, 500);
|
||||
},
|
||||
messages: {
|
||||
confirm: function(args) {
|
||||
return 'Are you sure you want to shutdown ' + args.name + '?';
|
||||
},
|
||||
notification: function(args) {
|
||||
return 'Rebooting VM: ' + args.name;
|
||||
}
|
||||
},
|
||||
notification: {
|
||||
poll: function(args) { args.complete(); }
|
||||
}
|
||||
},
|
||||
start: {
|
||||
label: 'Start instance',
|
||||
action: function(args) {
|
||||
setTimeout(function() {
|
||||
args.response.success({
|
||||
data: { state: 'Starting' }
|
||||
});
|
||||
}, 500);
|
||||
},
|
||||
messages: {
|
||||
confirm: function(args) {
|
||||
return 'Are you sure you want to start ' + args.name + '?';
|
||||
},
|
||||
notification: function(args) {
|
||||
return 'Starting VM: ' + args.name;
|
||||
}
|
||||
},
|
||||
notification: {
|
||||
poll: function(args) { args.complete(); }
|
||||
}
|
||||
},
|
||||
destroy: {
|
||||
label: 'Destroy instance',
|
||||
messages: {
|
||||
confirm: function(args) {
|
||||
return 'Are you sure you want to destroy ' + args.name + '?';
|
||||
},
|
||||
notification: function(args) {
|
||||
return 'Destroyed VM: ' + args.name;
|
||||
}
|
||||
},
|
||||
action: function(args) {
|
||||
setTimeout(function() {
|
||||
args.response.success({ data: { state: 'Destroying' }});
|
||||
}, 200);
|
||||
},
|
||||
notification: {
|
||||
poll: function(args) { args.complete(); }
|
||||
}
|
||||
}
|
||||
},
|
||||
dataProvider: function(args) {
|
||||
$.ajax({
|
||||
url: createURL('listVirtualMachines'),
|
||||
success: function(json) {
|
||||
args.response.success({ data: json.listvirtualmachinesresponse.virtualmachine });
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
tiers: {
|
||||
actionPreFilter: function(args) {
|
||||
return ['start'];
|
||||
},
|
||||
actions: {
|
||||
// Add new tier
|
||||
add: {
|
||||
label: 'Add new tier to VPC',
|
||||
action: function(args) {
|
||||
setTimeout(function() {
|
||||
args.response.success({
|
||||
data: {
|
||||
name: args.data.name,
|
||||
cidr: args.data.cidr
|
||||
}
|
||||
});
|
||||
}, 500);
|
||||
},
|
||||
|
||||
createForm: {
|
||||
title: 'Add new tier',
|
||||
desc: 'Please fill in the following to add a new VPC tier.',
|
||||
fields: {
|
||||
name: { label: 'label.name', validation: { required: true } },
|
||||
cidr: { label: 'label.cidr', validation: { required: true } }
|
||||
}
|
||||
},
|
||||
|
||||
notification: {
|
||||
poll: function(args) { args.complete(); }
|
||||
}
|
||||
},
|
||||
start: {
|
||||
label: 'Start tier',
|
||||
shortLabel: 'Start',
|
||||
action: function(args) {
|
||||
args.response.success();
|
||||
},
|
||||
notification: {
|
||||
poll: function(args) { args.complete(); }
|
||||
}
|
||||
},
|
||||
stop: {
|
||||
label: 'Stop tier',
|
||||
shortLabel: 'Stop',
|
||||
action: function(args) {
|
||||
args.response.success();
|
||||
},
|
||||
notification: {
|
||||
poll: function(args) { args.complete(); }
|
||||
}
|
||||
},
|
||||
addVM: {
|
||||
label: 'Add VM to tier',
|
||||
shortLabel: 'Add VM',
|
||||
action: cloudStack.uiCustom.instanceWizard(
|
||||
cloudStack.instanceWizard
|
||||
),
|
||||
notification: {
|
||||
poll: function(args) { args.complete(); }
|
||||
}
|
||||
},
|
||||
acl: {
|
||||
label: 'Configure ACL for tier',
|
||||
shortLabel: 'ACL',
|
||||
multiEdit: aclMultiEdit
|
||||
},
|
||||
remove: {
|
||||
label: 'Remove tier',
|
||||
action: function(args) {
|
||||
args.response.success();
|
||||
},
|
||||
notification: {
|
||||
poll: function(args) { args.complete(); }
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Get tiers
|
||||
dataProvider: function(args) {
|
||||
var tiers = [ // Dummy content
|
||||
{
|
||||
id: 1,
|
||||
name: 'web',
|
||||
cidr: '192.168.0.0/24',
|
||||
virtualMachines: [
|
||||
{ name: 'i-2-VM' },
|
||||
{ name: 'i-3-VM' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'app',
|
||||
cidr: '10.0.0.0/24',
|
||||
virtualMachines: []
|
||||
}
|
||||
];
|
||||
|
||||
setTimeout(function() {
|
||||
args.response.success({
|
||||
data: {
|
||||
tiers: tiers
|
||||
}
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
};
|
||||
}(jQuery, cloudStack));
|
||||
Loading…
Reference in New Issue