VNF: fix UI bugs and polish (#8227)

api/src/main/java/com/cloud/network/VNF.java

@@ -68,7 +68,6 @@ public class VNF {
     }
 
     public enum VnfDetail {
-        ICON,
         VERSION,
         VENDOR,
         MAINTAINER

api/src/main/java/com/cloud/server/ResourceTag.java

@@ -30,7 +30,7 @@ public interface ResourceTag extends ControlledEntity, Identity, InternalIdentit
     public enum ResourceObjectType {
         UserVm(true, true, true),
         Template(true, true, true),
-        VnfTemplate(true, true, true),
+        VnfTemplate(false, false, true),
         ISO(true, false, true),
         Volume(true, true),
         Snapshot(true, false),

server/src/main/java/com/cloud/tags/ResourceManagerUtilImpl.java

@@ -81,6 +81,7 @@ public class ResourceManagerUtilImpl implements ResourceManagerUtil {
         s_typeMap.put(ResourceTag.ResourceObjectType.UserVm, UserVmVO.class);
         s_typeMap.put(ResourceTag.ResourceObjectType.Volume, VolumeVO.class);
         s_typeMap.put(ResourceTag.ResourceObjectType.Template, VMTemplateVO.class);
+        s_typeMap.put(ResourceTag.ResourceObjectType.VnfTemplate, VMTemplateVO.class);
         s_typeMap.put(ResourceTag.ResourceObjectType.ISO, VMTemplateVO.class);
         s_typeMap.put(ResourceTag.ResourceObjectType.Snapshot, SnapshotVO.class);
         s_typeMap.put(ResourceTag.ResourceObjectType.Network, NetworkVO.class);

ui/public/locales/en.json

@@ -2208,7 +2208,7 @@
 "label.vnf.appliance": "VNF Appliance",
 "label.vnf.appliances": "VNF appliances",
 "label.vnf.appliance.add": "Add VNF Appliance",
-"label.vnf.appliance.access.methods": "Management access information of this VNF appliance",
+"label.vnf.appliance.access.methods": "Management access information for this VNF appliance",
 "label.vnf.app.action.destroy": "Destroy VNF appliance",
 "label.vnf.app.action.edit": "Edit VNF appliance",
 "label.vnf.app.action.expunge": "Expunge VNF appliance",
@@ -2220,24 +2220,25 @@
 "label.vnf.app.action.stop": "Stop VNF appliance",
 "label.vnf.app.action.reboot": "Reboot VNF appliance",
 "label.vnf.app.action.reinstall": "Reinstall VNF appliance",
-"label.vnf.cidr.list": "Source cidr list of rules",
+"label.vnf.cidr.list": "CIDR from which access to the VNF appliance’s Management interface should be allowed from",
 "label.vnf.cidr.list.tooltip": "the CIDR list to forward traffic from to the VNF management interface. Multiple entries must be separated by a single comma character (,). The default value is 0.0.0.0/0.",
-"label.vnf.configure.management": "Configure rules for VNF management interfaces",
+"label.vnf.configure.management": "Configure Firewall and Port Forwarding rules for VNF's management interfaces",
-"label.vnf.configure.management.tooltip": "True by default, security group or network rules (source nat and firewall rules) will be configured for VNF management interfaces. False otherwise.",
+"label.vnf.configure.management.tooltip": "True by default, security group or network rules (source nat and firewall rules) will be configured for VNF management interfaces. False otherwise. Learn what rules are configured at http://docs.cloudstack.apache.org/en/latest/adminguide/networking/vnf_templates_appliances.html#deploying-vnf-appliances",
 "label.vnf.detail.add": "Add VNF detail",
 "label.vnf.detail.remove": "Remove VNF detail",
-"label.vnf.details": "VNF details",
+"label.vnf.details": "VNF Details",
 "label.vnf.nic.add": "Add VNF nic",
 "label.vnf.nic.delete": "Delete VNF nic",
 "label.vnf.nic.description": "Description of VNF nic",
-"label.vnf.nic.deviceid": "Device ID of VNF nic. It starts with 0",
+"label.vnf.nic.deviceid": "Device ID of VNF nic. It starts with 0. The NIC with deviceid as 0 for VNF appliance will be the default NIC.",
 "label.vnf.nic.edit": "Edit VNF nic",
 "label.vnf.nic.management": "Management NIC",
 "label.vnf.nic.management.description": "True if the VNF nic is a management interface. False otherwise",
+"label.vnf.nic.mappings": "VNF NIC mappings",
 "label.vnf.nic.name": "Name of VNF nic",
 "label.vnf.nic.remove": "Remove VNF nic",
 "label.vnf.nic.required": "True if VNF nic is required. Otherwise optional",
-"label.vnf.nics": "VNF nics",
+"label.vnf.nics": "VNF Nics",
 "label.vnf.settings": "VNF settings",
 "label.vnf.templates": "VNF templates",
 "label.vnf.template.register": "Register VNF template",
@@ -2494,6 +2495,8 @@
 "message.config.health.monitor.failed": "Configure Health Monitor failed",
 "message.config.sticky.policy.failed": "Failed to configure sticky policy.",
 "message.config.sticky.policy.processing": "Updating sticky policy...",
+"message.configure.network.ip.and.mac": "Please configure the IP address and mac address of networks if needed.",
+"message.configure.network.select.default.network": "Please configure the IP address and mac address of networks if needed. Please select a network as the default network.",
 "message.configuring.guest.traffic": "Configuring guest traffic",
 "message.configuring.physical.networks": "Configuring physical Networks",
 "message.configuring.public.traffic": "Configuring public traffic",
@@ -3198,17 +3201,19 @@
 "message.vm.state.stopped": "Instance is stopped.",
 "message.vm.state.stopping": "Instance is being stopped.",
 "message.vm.state.unknown": "Instance state is unknown.",
-"message.vnf.appliance.networks": "Please select Networks for the new VNF appliance.",
+"message.vnf.appliance.networks": "Please select the networks for the new VNF appliance.",
 "message.vnf.credentials.change": "Please change the password(s) of the VNF appliance immediately.",
 "message.vnf.credentials.default": "The default credentials(s) of the VNF appliance",
 "message.vnf.credentials.in.template.vnf.details": "Please find the default credentials for this VNF in the details of the VNF template.",
-"message.vnf.error.deviceid.should.be.continuous": "The deviceid of selected VNF NICs should be continuous.",
+"message.vnf.error.deviceid.should.be.consecutive": "The deviceid of selected VNF NICs should be consecutive.",
 "message.vnf.error.network.is.already.used": "Network has been used by multiple NICs of the new VNF appliance.",
-"message.vnf.error.no.networks": "Please select networks for NICs of the new VNF appliance.",
+"message.vnf.error.network.should.be.used": "All selected networks should be used as VNF Nics",
+"message.vnf.error.no.networks": "Please select the networks for the new VNF appliance.",
 "message.vnf.error.no.network.for.required.deviceid": "Please select a Network for required NIC of the new VNF appliance.",
 "message.vnf.nic.move.up.fail": "Failed to move up this NIC",
 "message.vnf.nic.move.down.fail": "Failed to move down this NIC",
-"message.vnf.select.networks": "Please select a Network for each VNF nic. ",
+"message.vnf.no.credentials": "No credentials found for the VNF appliance.",
+"message.vnf.select.networks": "Please select the relevant network for each VNF NIC.",
 "message.volume.state.allocated": "The volume is allocated but has not been created yet.",
 "message.volume.state.attaching": "The volume is attaching to a volume from Ready state.",
 "message.volume.state.copying": "The volume is being copied from the image store to primary storage, in case it's an uploaded volume.",

ui/src/components/header/CreateMenu.vue

@@ -133,6 +133,25 @@
             </a-row>
           </router-link>
         </a-menu-item>
+        <a-menu-item style="width: 100%; padding: 12px" v-if="'deployVnfAppliance' in $store.getters.apis">
+          <router-link :to="{ path: '/action/deployVnfAppliance'}">
+            <a-row>
+              <a-col style="margin-right: 12px">
+                <a-avatar :style="{ backgroundColor: $config.theme['@primary-color'] }">
+                  <template #icon>
+                    <font-awesome-icon :icon="['fa-solid', 'fa-dharmachakra']" />
+                  </template>
+                </a-avatar>
+              </a-col>
+              <a-col>
+                <h3 style="margin-bottom: 0px;">
+                  {{ $t('label.vnf.appliance') }}
+                </h3>
+                <small>{{ $t('label.vnf.appliance.add') }}</small>
+              </a-col>
+            </a-row>
+          </router-link>
+        </a-menu-item>
       </a-menu>
     </template>
     <a-button type="primary">

ui/src/components/view/DetailsTab.vue

@@ -207,9 +207,11 @@ export default {
         }
 
         const managementDeviceIds = []
-        for (const vnfnic of this.resource.vnfnics) {
+        if (this.resource.vnfnics) {
-          if (vnfnic.management) {
+          for (const vnfnic of this.resource.vnfnics) {
-            managementDeviceIds.push(vnfnic.deviceid)
+            if (vnfnic.management) {
+              managementDeviceIds.push(vnfnic.deviceid)
+            }
           }
         }
         const managementIps = []

ui/src/config/section/network.js

@@ -325,6 +325,7 @@ export default {
       title: 'label.vnf.appliances',
       icon: 'gateway-outlined',
       permission: ['listVirtualMachinesMetrics'],
+      resourceType: 'UserVm',
       params: () => {
         return { details: 'servoff,tmpl,nics', isvnf: true }
       },

ui/src/views/compute/DeployVnfAppliance.vue

@@ -365,7 +365,7 @@
                 </template>
               </a-step>
               <a-step
-                :title="$t('label.vnf.nics')"
+                :title="$t('label.vnf.nic.mappings')"
                 :status="zoneSelected ? 'process' : 'wait'"
                 v-if="showVnfNicsSection">
                 <template #description>
@@ -1906,7 +1906,6 @@ export default {
       }
     },
     updateDefaultNetworks (id) {
-      this.defaultnetworkid = id
       this.form.defaultnetworkid = id
     },
     updateNetworkConfig (networks) {
@@ -2038,7 +2037,7 @@ export default {
               if (templateVnfNic.deviceid !== nextDeviceId) {
                 this.$notification.error({
                   message: this.$t('message.request.failed'),
-                  description: this.$t('message.vnf.error.deviceid.should.be.continuous')
+                  description: this.$t('message.vnf.error.deviceid.should.be.consecutive')
                 })
                 return
               }
@@ -2316,7 +2315,11 @@ export default {
                 if (vm.password) {
                   credentials.push('New password : ' + vm.password)
                 }
-                credentials.push(this.$t('message.vnf.credentials.change'))
+                if (credentials.length > 0) {
+                  credentials.push(this.$t('message.vnf.credentials.change'))
+                } else {
+                  credentials.push(this.$t('message.vnf.no.credentials'))
+                }
                 this.$notification.success({
                   message: `${this.$t('message.vnf.credentials.default')} ` + name,
                   description: (<span v-html={credentials.join('<br>')}></span>),

ui/src/views/compute/MigrateVMStorage.vue

@@ -134,7 +134,7 @@ export default {
     },
     submitForm () {
       var isUserVm = true
-      if (this.$route.meta.name !== 'vm') {
+      if (this.$route.meta.resourceType !== 'UserVm') {
         isUserVm = false
       }
       var migrateApi = isUserVm ? 'migrateVirtualMachine' : 'migrateSystemVm'

ui/src/views/compute/MigrateWizard.vue

@@ -197,7 +197,7 @@ export default {
   },
   computed: {
     isUserVm () {
-      return this.$route.meta.name === 'vm'
+      return this.$route.meta.resourceType === 'UserVm'
     }
   },
   watch: {

ui/src/views/compute/wizard/NetworkConfiguration.vue

@@ -16,6 +16,12 @@
 // under the License.
 
 <template>
+  <div style="margin-top: 10px;" v-if="this.vnf">
+    <label>{{ $t('message.configure.network.ip.and.mac') }}</label>
+  </div>
+  <div style="margin-top: 10px;" v-else>
+    <label>{{ $t('message.configure.network.select.default.network') }}</label>
+  </div>
   <a-form
     :ref="formRef"
     :model="form"
@@ -107,7 +113,7 @@ export default {
         {
           key: 'name',
           dataIndex: 'name',
-          title: this.$t('label.defaultnetwork'),
+          title: this.$t('label.network'),
           width: '30%'
         },
         {

ui/src/views/image/TemplateVnfSettings.vue

@@ -758,8 +758,9 @@ export default {
     updateVnfDetail (index) {
       if (Array.isArray(this.vnfDetails[index].values) && this.vnfDetails[index].values.length > 0) {
         this.vnfDetails[index].value = this.vnfDetails[index].values.join(',')
+      } else {
+        this.vnfDetails[index].value = this.vnfDetails[index].displayvalue
       }
-      this.vnfDetails[index].value = this.vnfDetails[index].displayvalue
       this.vnfDetails[index].displayvalue = this.getDisplayValue(this.vnfDetails[index].name, this.vnfDetails[index].value)
       this.updateVnfTemplateDetails()
     },

ui/tests/mockData/MigrateWizard.mock.json

@@ -52,6 +52,7 @@
       "path": "/test-router-1",
       "meta": {
         "name": "vm",
+        "resourceType": "UserVm",
         "icon": "play-circle-outlined"
       },
       "component": {}
@@ -61,6 +62,7 @@
       "path": "/test-router-2",
       "meta": {
         "name": "vm",
+        "resourceType": "UserVm",
         "icon": "play-circle-outlined"
       },
       "component": {}
@@ -70,6 +72,7 @@
       "path": "/test-router-3",
       "meta": {
         "name": "test-router-3",
+        "resourceType": "SystemVm",
         "icon": "play-circle-outlined"
       },
       "component": {}
@@ -79,6 +82,7 @@
       "path": "/test-router-4",
       "meta": {
         "name": "vm",
+        "resourceType": "UserVm",
         "icon": "play-circle-outlined"
       },
       "component": {}
@@ -88,6 +92,7 @@
       "path": "/test-router-5",
       "meta": {
         "name": "vm",
+        "resourceType": "UserVm",
         "icon": "play-circle-outlined"
       },
       "component": {}
@@ -97,6 +102,7 @@
       "path": "/test-router-6",
       "meta": {
         "name": "vm",
+        "resourceType": "UserVm",
         "icon": "play-circle-outlined"
       },
       "component": {}