ui: recommend adv zone to new users and show basic zone as bottom option (apache#5496)

* ui: recommend adv zone to new users and show basic zone as bottom option

This shows the adv zone option in the create zone wizard before the basic
zone option and recommends it for new users. This is because adv zone
can offer more flexible and network topology options including what
basic zone offers in form of shared network (with/without security
groups).

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

* let's see if this ticks advanced by default

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

Author: yadvr

ui/public/locales/en.json

@@ -2797,7 +2797,7 @@
 "message.deleting.vm": "Deleting VM",
 "message.deployasis": "Selected template is Deploy As-Is i.e., the VM is deployed by importing an OVA with vApps directly into vCenter. Root disk(s) resize is allowed only on stopped VMs for such templates.",
 "message.desc.add.new.lb.sticky.rule": "Add new LB sticky rule",
-"message.desc.advanced.zone": "For more sophisticated network topologies. This network model provides the most flexibility in defining guest networks and providing custom network offerings such as firewall, VPN, or load balancer support.",
+"message.desc.advanced.zone": "This is recommended and allows more sophisticated network topologies. This network model provides the most flexibility in defining guest networks and providing custom network offerings such as firewall, VPN, or load balancer support.",
 "message.desc.basic.zone": "Provide a single network where each VM instance is assigned an IP directly from the network. Guest isolation can be provided through layer-3 means such as security groups (IP address source filtering).",
 "message.desc.cluster": "Each pod must contain one or more clusters, and we will add the first cluster now. A cluster provides a way to group hosts. The hosts in a cluster all have identical hardware, run the same hypervisor, are on the same subnet, and access the same shared storage. Each cluster consists of one or more hosts and one or more primary storage servers.",
 "message.desc.create.ssh.key.pair": "Please fill in the following data to create or register a ssh key pair.<br><br>(1) If public key is set, CloudStack will register the public key. You can use it through your private key.<br><br>(2) If public key is not set, CloudStack will create a new SSH Key pair. In this case, please copy and save the private key. CloudStack will not keep it.<br>",

ui/src/views/infra/zone/ZoneWizardZoneTypeStep.vue

@@ -31,14 +31,6 @@
               initialValue: zoneType
             }]
           }]">
-          <a-card :gutter="12" class="card-item" v-if="$config.basicZoneEnabled">
-            <a-col :md="6" :lg="6">
-              <a-radio class="card-form-item" value="Basic">{{ $t('label.basic') }}</a-radio>
-            </a-col>
-            <a-col :md="18" :lg="18">
-              <a-card class="ant-form-text zone-support">{{ $t(zoneDescription.Basic) }}</a-card>
-            </a-col>
-          </a-card>
           <a-card :gutter="12" class="card-item">
             <a-col :md="6" :lg="6">
               <a-radio class="card-form-item" value="Advanced" v-if="$config.basicZoneEnabled">{{ $t('label.advanced') }}</a-radio>
@@ -68,6 +60,14 @@
               <a-card class="zone-support">{{ $t(zoneDescription.SecurityGroups) }}</a-card>
             </a-col>
           </a-card>
+          <a-card :gutter="12" class="card-item" v-if="$config.basicZoneEnabled">
+            <a-col :md="6" :lg="6">
+              <a-radio class="card-form-item" value="Basic">{{ $t('label.basic') }}</a-radio>
+            </a-col>
+            <a-col :md="18" :lg="18">
+              <a-card class="ant-form-text zone-support">{{ $t(zoneDescription.Basic) }}</a-card>
+            </a-col>
+          </a-card>
         </a-radio-group>
       </a-form-item>
     </a-form>
@@ -118,7 +118,7 @@ export default {
       return this.zoneType === 'Advanced'
     },
     zoneType () {
-      return this.prefillContent.zoneType ? this.prefillContent.zoneType.value : (this.$config.basicZoneEnabled ? 'Basic' : 'Advanced')
+      return this.prefillContent.zoneType ? this.prefillContent.zoneType.value : 'Advanced'
     },
     securityGroupsEnabled () {
       return this.isAdvancedZone && (this.prefillContent.securityGroupsEnabled ? this.prefillContent.securityGroupsEnabled.value : false)