VNF: ui polish part1

- remove button "Register VNF template"
- remove credentials, add a message instead.
- add link of http/https URL

ui/public/locales/en.json

@@ -3142,6 +3142,7 @@
 "message.vm.state.stopping": "VM is being stopped.",
 "message.vm.state.unknown": "VM state is unknown.",
 "message.vnf.appliance.networks": "Please select networks for the new VNF appliance.",
+"message.vnf.credentials.in.template.vnf.details": "Please find the credentials in the VNF details of the template.",
 "message.vnf.error.deviceid.should.be.continuous": "The deviceid of selected VNF nics should be continuous.",
 "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.",

ui/src/components/view/DetailsTab.vue

@@ -173,9 +173,15 @@ export default {
         const sshPort = this.resource.vnfdetails?.ssh_port || 22
         const sshUsername = this.resource.vnfdetails?.ssh_user || null
         const sshPassword = this.resource.vnfdetails?.ssh_password || null
-        const httpPath = this.resource.vnfdetails?.http_path || null
+        let httpPath = this.resource.vnfdetails?.http_path || ''
+        if (!httpPath.startsWith('/')) {
+          httpPath = '/' + httpPath
+        }
         const httpPort = this.resource.vnfdetails?.http_port || null
-        const httpsPath = this.resource.vnfdetails?.https_path || null
+        let httpsPath = this.resource.vnfdetails?.https_path || ''
+        if (!httpsPath.startsWith('/')) {
+          httpsPath = '/' + httpsPath
+        }
         const httpsPort = this.resource.vnfdetails?.https_port || null
         const webUsername = this.resource.vnfdetails?.web_user || null
         const webPassword = this.resource.vnfdetails?.web_password || null
@@ -215,7 +221,6 @@ export default {
         if (this.resource.publicip && managementDeviceIds.includes(0)) {
           managementIps.push(this.resource.publicip)
         }
-        console.log('managementIps = ' + managementIps)
 
         if (accessMethods) {
           const accessMethodsArray = accessMethods.split(',')
@@ -228,23 +233,21 @@ export default {
               accessMethodsDescription.push('- SSH with key' + (sshPort ? ' (SSH port is ' + sshPort + ').' : '.'))
             } else if (accessMethod === 'http') {
               for (const managementIp of managementIps) {
-                accessMethodsDescription.push('- Webpage: http://' + managementIp + (httpPort ? ':' + httpPort : '') + (httpPath ? '/' + httpPath : ''))
+                const url = 'http://' + managementIp + (httpPort ? ':' + httpPort : '') + httpPath
+                accessMethodsDescription.push('- Webpage: <a href="' + url + '" target="_blank>">' + url + '</a>')
               }
             } else if (accessMethod === 'https') {
               for (const managementIp of managementIps) {
-                accessMethodsDescription.push('- Webpage: https://' + managementIp + (httpsPort ? ':' + httpsPort : '') + (httpsPath ? '/' + httpsPath : ''))
+                const url = 'https://' + managementIp + (httpsPort ? ':' + httpsPort : '') + httpsPath
+                accessMethodsDescription.push('- Webpage: <a href="' + url + '" target="_blank">' + url + '</a>')
               }
             }
           }
         } else {
           accessMethodsDescription.push('- VM Console.')
         }
         if (credentials) {
-          accessMethodsDescription.push('')
-          accessMethodsDescription.push('- Credentials:')
-          for (const credential of credentials) {
-            accessMethodsDescription.push('* ' + credential)
-          }
+          accessMethodsDescription.push('<br>' + this.$t('message.vnf.credentials.in.template.vnf.details'))
         }
         return accessMethodsDescription.join('<br>')
       }

ui/src/config/section/network.js

@@ -342,18 +342,7 @@ export default {
           fields.push('order')
         }
         return fields
-      },
-      actions: [
-        {
-          api: 'registerVnfTemplate',
-          icon: 'plus-outlined',
-          label: 'label.vnf.template.register',
-          docHelp: 'adminguide/templates.html#uploading-templates-from-a-remote-http-server',
-          listView: true,
-          popup: true,
-          component: shallowRef(defineAsyncComponent(() => import('@/views/image/RegisterOrUploadTemplate.vue')))
-        }
-      ]
+      }
     },
     {
       name: 'vnfapp',