diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css index b971cbf729c..da8e4480f61 100644 --- a/ui/css/cloudstack3.css +++ b/ui/css/cloudstack3.css @@ -2281,6 +2281,34 @@ div.detail-group.actions td { top: 13px; } +/** Zone filter (mixed zone management)*/ +#header .zone-filter { + float: left; + width: 111px; + margin: 9px 20px 0 2px; +} + +#header .zone-filter label { + position: absolute; + top: -3px; + color: #FFFFFF; + font-size: 11px; +} + +#header .zone-filter select { + width: 100%; + font-size: 12px; + border: 1px solid #000000; + border-bottom: #FFFFFF; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + background: #ECECEC; + margin-top: 2px; +} + /*Navigation*/ #navigation, #browser { @@ -8854,6 +8882,7 @@ div.ui-dialog div.multi-edit-add-list div.view div.data-table table.body tbody t left: 0px; top: -10px; margin-right: 9px; + display: none; } #header div.view-switcher.alt { @@ -8920,6 +8949,34 @@ div.ui-dialog div.multi-edit-add-list div.view div.data-table table.body tbody t padding: 3px 0 4px; } +/*** View switcher (drop-down)*/ +.project-switcher { + float: left; + width: 141px; + padding: 9px 17px 0 0; +} + +.project-switcher label { + position: absolute; + top: -2px; + color: #FFFFFF; + font-size: 11px; +} + +.project-switcher select { + width: 100%; + font-size: 12px; + border: 1px solid #000000; + border-bottom: #FFFFFF; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + background: #ECECEC; + margin-top: 2px; +} + /*** Select project*/ .project-selector { display: inline-block; @@ -11385,7 +11442,7 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it border-bottom: 1px solid #FFFFFF; height: 28px; float: left; - margin: 4px 13px 0 0; + margin: 5px 13px 0 0; cursor: pointer; /*+box-shadow:inset 0px 1px 1px #000000;*/ -moz-box-shadow: inset 0px 1px 1px #000000; diff --git a/ui/index.jsp b/ui/index.jsp index 5e5a7f2becf..9e1743e7d1a 100644 --- a/ui/index.jsp +++ b/ui/index.jsp @@ -1678,7 +1678,9 @@ under the License. - + + + diff --git a/ui/scripts/instanceWizard.js b/ui/scripts/instanceWizard.js index e1aeafde67c..13828c848b6 100644 --- a/ui/scripts/instanceWizard.js +++ b/ui/scripts/instanceWizard.js @@ -70,14 +70,19 @@ steps: [ // Step 1: Setup - function(args) { - if(args.initArgs.pluginForm != null && args.initArgs.pluginForm.name == "vpcTierInstanceWizard") { //from VPC Tier chart - //populate only one zone to the dropdown, the zone which the VPC is under. - zoneObjs = [{ - id: args.context.vpc[0].zoneid, - name: args.context.vpc[0].zonename, - networktype: 'Advanced' - }]; + function(args) { + if(args.initArgs.pluginForm != null && args.initArgs.pluginForm.name == "vpcTierInstanceWizard") { //from VPC Tier chart (VPC is only available in Advanced zone) + if(args.context.zoneType == 'Basic'){ //Basic type + zoneObjs = []; + } + else { //Advanced type or all types + //populate only one zone to the dropdown, the zone which the VPC is under. (networktype should be 'Advanced' since VPC is only available in Advanced zone) + zoneObjs = [{ + id: args.context.vpc[0].zoneid, + name: args.context.vpc[0].zonename, + networktype: 'Advanced' + }]; + } args.response.success({ data: {zones: zoneObjs}}); } else { //from Instance page @@ -85,8 +90,20 @@ url: createURL("listZones&available=true"), dataType: "json", async: false, - success: function(json) { - zoneObjs = json.listzonesresponse.zone; + success: function(json) { + if(args.context.zoneType == null || args.context.zoneType == '') { //all types + zoneObjs = json.listzonesresponse.zone; + } + else { //Basic type or Advanced type + zoneObjs = []; + var items = json.listzonesresponse.zone; + if(items != null) { + for(var i = 0; i < items.length; i++) { + if(items[i].networktype == args.context.zoneType) + zoneObjs.push(items[i]); + } + } + } args.response.success({ data: {zones: zoneObjs}}); } }); diff --git a/ui/scripts/network.js b/ui/scripts/network.js index a759fb29211..f9a8778a806 100755 --- a/ui/scripts/network.js +++ b/ui/scripts/network.js @@ -281,29 +281,7 @@ id: 'network', sectionSelect: { preFilter: function(args) { - var havingSecurityGroupNetwork = false; - var havingBasicZones = false; - var havingAdvancedZones = true; - - // Get zone types - $.ajax({ - url: createURL('listZones'), - async: false, - success: function(json) { - var zones = json.listzonesresponse.zone ? - json.listzonesresponse.zone : []; - var basicZones = $.grep(zones, function(zone) { - return zone.networktype == 'Basic'; - }); - var advancedZones = $.grep(zones, function(zone) { - return zone.networktype == 'Advanced'; - }); - - - havingBasicZones = basicZones.length ? true : false; - havingAdvancedZones = advancedZones.length ? true : false; - } - }); + var havingSecurityGroupNetwork = false; $.ajax({ url: createURL('listNetworks', { ignoreProject: true }), @@ -322,11 +300,10 @@ var sectionsToShow = ['networks']; - if (havingAdvancedZones) { + if(args.context.zoneType != 'Basic') { //Advanced type or all types sectionsToShow.push('vpc'); sectionsToShow.push('vpnCustomerGateway'); } - if(havingSecurityGroupNetwork == true) sectionsToShow.push('securityGroups'); @@ -343,21 +320,14 @@ title: 'label.guest.networks', listView: { actions: { - add: { + add: { //add Isolated guest network (can't add Shared guest network here) label: 'label.add.guest.network', - preFilter: function(args) { - var advSgDisabledZones; - $.ajax({ - url: createURL('listZones'), - async: false, - success: function(json) { - advSgDisabledZones = $.grep(json.listzonesresponse.zone, function(zone) { - return (zone.networktype == 'Advanced' && zone.securitygroupsenabled != true); //Isolated networks can only be created in Advanced SG-disabled zone (but not in Basic zone nor Advanced SG-enabled zone) - }); - } - }); - return (advSgDisabledZones != null && advSgDisabledZones.length > 0); + preFilter: function(args) { //Isolated networks is only supported in Advanced (SG-disabled) zone + if(args.context.zoneType != 'Basic') + return true; + else + return false; }, createForm: { diff --git a/ui/scripts/storage.js b/ui/scripts/storage.js index 8fd95944290..1acc9c792e4 100644 --- a/ui/scripts/storage.js +++ b/ui/scripts/storage.js @@ -88,9 +88,22 @@ url: createURL("listZones&available=true"), dataType: "json", async: true, - success: function(json) { - var items = json.listzonesresponse.zone; - args.response.success({descriptionField: 'name', data: items}); + success: function(json) { + var zoneObjs; + if(args.context.zoneType == null || args.context.zoneType == '') { //all types + zoneObjs = json.listzonesresponse.zone; + } + else { //Basic type or Advanced type + zoneObjs = []; + var items = json.listzonesresponse.zone; + if(items != null) { + for(var i = 0; i < items.length; i++) { + if(items[i].networktype == args.context.zoneType) + zoneObjs.push(items[i]); + } + } + } + args.response.success({descriptionField: 'name', data: zoneObjs}); } }); } @@ -208,16 +221,29 @@ availabilityZone: { label: 'label.availability.zone', docID: 'helpUploadVolumeZone', - select: function(args) { - $.ajax({ + select: function(args) { + $.ajax({ url: createURL("listZones&available=true"), dataType: "json", async: true, - success: function(json) { - var items = json.listzonesresponse.zone; - args.response.success({descriptionField: 'name', data: items}); + success: function(json) { + var zoneObjs; + if(args.context.zoneType == null || args.context.zoneType == '') { //all types + zoneObjs = json.listzonesresponse.zone; + } + else { //Basic type or Advanced type + zoneObjs = []; + var items = json.listzonesresponse.zone; + if(items != null) { + for(var i = 0; i < items.length; i++) { + if(items[i].networktype == args.context.zoneType) + zoneObjs.push(items[i]); + } + } + } + args.response.success({descriptionField: 'name', data: zoneObjs}); } - }); + }); } }, format: { diff --git a/ui/scripts/templates.js b/ui/scripts/templates.js index 6268f6b29b5..52e1135c681 100644 --- a/ui/scripts/templates.js +++ b/ui/scripts/templates.js @@ -115,16 +115,32 @@ url: createURL("listZones&available=true"), dataType: "json", async: true, - success: function(json) { - var zoneObjs = json.listzonesresponse.zone; - var items = []; - if (isAdmin() && !(cloudStack.context.projects && - cloudStack.context.projects[0])) - items.push({id: -1, description: "All Zones"}); - $(zoneObjs).each(function() { - items.push({id: this.id, description: this.name}); - }); - args.response.success({data: items}); + success: function(json) { + var zoneObjs; + if(args.context.zoneType == null || args.context.zoneType == '') { //all types + zoneObjs = []; + var items = json.listzonesresponse.zone; + if(items != null) { + for(var i = 0; i < items.length; i++) { + zoneObjs.push({id: items[i].id, description: items[i].name}); + } + } + } + else { //Basic type or Advanced type + zoneObjs = []; + var items = json.listzonesresponse.zone; + if(items != null) { + for(var i = 0; i < items.length; i++) { + if(items[i].networktype == args.context.zoneType) { + zoneObjs.push({id: items[i].id, description: items[i].name}); + } + } + } + } + if (isAdmin() && !(cloudStack.context.projects && cloudStack.context.projects[0])){ + zoneObjs.unshift({id: -1, description: "All Zones"}); + } + args.response.success({data: zoneObjs}); } }); } @@ -531,13 +547,29 @@ dataType: "json", async: true, success: function(json) { - var zoneObjs = json.listzonesresponse.zone; - var items = []; - $(zoneObjs).each(function() { - if(this.id != args.context.templates[0].zoneid) - items.push({id: this.id, description: this.name}); - }); - args.response.success({data: items}); + var zoneObjs = []; + var items = json.listzonesresponse.zone; + if(args.context.zoneType == null || args.context.zoneType == '') { //all types + if(items != null) { + for(var i = 0; i < items.length; i++) { + if(items[i].id != args.context.templates[0].zoneid) { //destination zone must be different from source zone + zoneObjs.push({id: items[i].id, description: items[i].name}); + } + } + } + } + else { //Basic type or Advanced type + if(items != null) { + for(var i = 0; i < items.length; i++) { + if(items[i].networktype == args.context.zoneType) { //type must be matched + if(items[i].id != args.context.templates[0].zoneid) { //destination zone must be different from source zone + zoneObjs.push({id: items[i].id, description: items[i].name}); + } + } + } + } + } + args.response.success({data: zoneObjs}); } }); } @@ -861,16 +893,32 @@ url: createURL("listZones&available=true"), dataType: "json", async: true, - success: function(json) { - var zoneObjs = json.listzonesresponse.zone; - var items = []; - if (isAdmin() && !(cloudStack.context.projects && - cloudStack.context.projects[0])) - items.push({id: -1, description: "All Zones"}); - $(zoneObjs).each(function() { - items.push({id: this.id, description: this.name}); - }); - args.response.success({data: items}); + success: function(json) { + var zoneObjs; + if(args.context.zoneType == null || args.context.zoneType == '') { //all types + zoneObjs = []; + var items = json.listzonesresponse.zone; + if(items != null) { + for(var i = 0; i < items.length; i++) { + zoneObjs.push({id: items[i].id, description: items[i].name}); + } + } + } + else { //Basic type or Advanced type + zoneObjs = []; + var items = json.listzonesresponse.zone; + if(items != null) { + for(var i = 0; i < items.length; i++) { + if(items[i].networktype == args.context.zoneType) { + zoneObjs.push({id: items[i].id, description: items[i].name}); + } + } + } + } + if (isAdmin() && !(cloudStack.context.projects && cloudStack.context.projects[0])){ + zoneObjs.unshift({id: -1, description: "All Zones"}); + } + args.response.success({data: zoneObjs}); } }); } @@ -1174,14 +1222,30 @@ url: createURL("listZones&available=true"), dataType: "json", async: true, - success: function(json) { - var zoneObjs = json.listzonesresponse.zone; - var items = []; - $(zoneObjs).each(function() { - if(this.id != args.context.isos[0].zoneid) - items.push({id: this.id, description: this.name}); - }); - args.response.success({data: items}); + success: function(json) { + var zoneObjs = []; + var items = json.listzonesresponse.zone; + if(args.context.zoneType == null || args.context.zoneType == '') { //all types + if(items != null) { + for(var i = 0; i < items.length; i++) { + if(items[i].id != args.context.isos[0].zoneid) { //destination zone must be different from source zone + zoneObjs.push({id: items[i].id, description: items[i].name}); + } + } + } + } + else { //Basic type or Advanced type + if(items != null) { + for(var i = 0; i < items.length; i++) { + if(items[i].networktype == args.context.zoneType) { //type must be matched + if(items[i].id != args.context.isos[0].zoneid) { //destination zone must be different from source zone + zoneObjs.push({id: items[i].id, description: items[i].name}); + } + } + } + } + } + args.response.success({data: zoneObjs}); } }); } diff --git a/ui/scripts/ui-custom/projectSelect.js b/ui/scripts/ui-custom/projectSelect.js new file mode 100644 index 00000000000..82d02c174b7 --- /dev/null +++ b/ui/scripts/ui-custom/projectSelect.js @@ -0,0 +1,66 @@ +// 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. + +(function($, cloudStack) { + $(window).bind('cloudStack.ready', function() { + var $header = $('#header .controls'); + var $projectSwitcher = $('