framework: register api and fix UI

Author: weizhouapache

framework/extensions/src/main/java/org/apache/cloudstack/framework/extensions/manager/ExtensionsManagerImpl.java

@@ -2260,6 +2260,7 @@ public List<Class<?>> getCommands() {
         cmds.add(UpdateExtensionCmd.class);
         cmds.add(RegisterExtensionCmd.class);
         cmds.add(UnregisterExtensionCmd.class);
+        cmds.add(UpdateRegisteredExtensionCmd.class);
         return cmds;
     }
 

ui/src/views/extension/AddCustomAction.vue

@@ -34,8 +34,25 @@
             api="listExtensions"
             :apiParams="extensionsApiParams"
             resourceType="extension"
+            @change-option="updateResourceTypeByExtension"
             defaultIcon="appstore-add-outlined" />
       </a-form-item>
+      <a-form-item name="resourcetype" ref="resourcetype">
+        <template #label>
+          <tooltip-label :title="$t('label.resourcetype')" :tooltip="apiParams.resourcetype.description"/>
+        </template>
+        <a-select
+          v-model:value="form.resourcetype"
+          :placeholder="apiParams.resourcetype.description"
+          optionFilterProp="label"
+          :filterOption="(input, option) => {
+            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
+          <a-select-option v-for="opt in resourceTypeOptions" :key="opt" :label="opt">
+            {{ opt }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
       <a-form-item name="name" ref="name">
         <template #label>
           <tooltip-label :title="$t('label.name')" :tooltip="apiParams.name.description"/>
@@ -152,6 +169,7 @@ export default {
   data () {
     return {
       roleTypes: [],
+      resourceTypeOptions: ['VirtualMachine', 'Network'],
       loading: false
     }
   },
@@ -165,6 +183,7 @@ export default {
     this.initForm()
     if (this.extension) {
       this.form.extensionid = this.extension.id
+      this.updateResourceTypeByExtension(this.extension)
     }
     this.roleTypes = this.$fetchCustomActionRoleTypes()
   },
@@ -173,13 +192,30 @@ export default {
       this.formRef = ref()
       this.form = reactive({
         enabled: true,
-        timeout: 5
+        timeout: 5,
+        resourcetype: 'VirtualMachine'
       })
       this.rules = reactive({
         extensionid: [{ required: true, message: `${this.$t('message.error.select')}` }],
-        name: [{ required: true, message: `${this.$t('message.error.name')}` }]
+        name: [{ required: true, message: `${this.$t('message.error.name')}` }],
+        resourcetype: [{ required: true, message: `${this.$t('message.error.select')}` }]
       })
     },
+    updateResourceTypeByExtension (selectedExtension) {
+      const type = selectedExtension?.type
+      if (type === 'NetworkOrchestrator') {
+        this.resourceTypeOptions = ['Network']
+        this.form.resourcetype = 'Network'
+      } else if (type === 'Orchestrator') {
+        this.resourceTypeOptions = ['VirtualMachine']
+        this.form.resourcetype = 'VirtualMachine'
+      } else {
+        this.resourceTypeOptions = ['VirtualMachine', 'Network']
+        if (!this.form.resourcetype) {
+          this.form.resourcetype = 'VirtualMachine'
+        }
+      }
+    },
     handleSubmit (e) {
       e.preventDefault()
       if (this.loading) return
@@ -189,6 +225,7 @@ export default {
         const params = {
           extensionid: values.extensionid || this.extension.id,
           name: values.name,
+          resourcetype: values.resourcetype,
           enabled: values.enabled
         }
         const keys = ['description', 'allowedroletypes', 'successmessage', 'errormessage', 'timeout']

ui/src/views/extension/ExtensionResourcesTab.vue

@@ -36,7 +36,6 @@
         <template v-if="column.key === 'actions'">
           <span style="margin-right: 5px">
             <tooltip-button
-              v-if="'updateRegisteredExtension' in $store.getters.apis"
               :tooltip="$t('label.action.update.extension.resource')"
               type="default"
               icon="edit-outlined"
@@ -70,6 +69,7 @@
     <a-modal
       v-if="updateModalVisible"
       :visible="updateModalVisible"
+      :width="600"
       :title="$t('label.action.update.extension.resource')"
       :closable="true"
       :footer="null"

ui/src/views/offering/AddVpcOffering.vue

@@ -160,8 +160,8 @@
                   <CheckBoxSelectPair
                     :resourceKey="item.name"
                     :checkBoxLabel="item.description"
-                    :forExternalNetProvider="form.provider === 'NSX' || form.provider === 'Netris'"
-                    :defaultCheckBoxValue="form.provider === 'NSX' || form.provider === 'Netris'"
+                    :forExternalNetProvider="form.provider === 'NSX' || form.provider === 'Netris' || isExternalNetworkProvider"
+                    :defaultCheckBoxValue="form.provider === 'NSX' || form.provider === 'Netris' || isExternalNetworkProvider"
                     :selectOptions="item.provider"
                     @handle-checkselectpair-change="handleSupportedServiceChange"/>
                 </a-list-item>
@@ -336,13 +336,20 @@ export default {
         description: 'Netris',
         enabled: true
       },
+      externalNetworkProviderObj: {
+        name: '',
+        description: 'External Network',
+        enabled: true
+      },
+      externalNetworkSupportedServicesMap: {},
       nsxSupportedServicesMap: {},
       availableExtensionProviders: []
     }
   },
   computed: {
     isExternalNetworkProvider () {
-      return this.availableExtensionProviders.some(e => e.name === this.provider)
+      const selectedProvider = this.form?.provider || this.provider
+      return this.availableExtensionProviders.some(e => e.name === selectedProvider)
     }
   },
   beforeCreate () {
@@ -457,7 +464,18 @@ export default {
     },
     fetchSupportedServiceData () {
       var services = []
-      if (this.provider === 'NSX') {
+      if (this.isExternalNetworkProvider) {
+        const serviceMap = this._buildExternalVpcServiceMap()
+        Object.keys(serviceMap).forEach(serviceName => {
+          services.push({
+            name: serviceName,
+            enabled: true,
+            provider: Array.isArray(serviceMap[serviceName])
+              ? serviceMap[serviceName]
+              : [serviceMap[serviceName]]
+          })
+        })
+      } else if (this.provider === 'NSX') {
         services.push({
           name: 'Dhcp',
           enabled: true,
@@ -648,9 +666,76 @@ export default {
       if (this.provider === 'NSX') {
         this.form.nsxsupportlb = true
         this.handleNsxLbService(true)
+      } else if (this.isExternalNetworkProvider) {
+        this._buildExternalVpcServiceMap()
       }
       this.fetchSupportedServiceData()
     },
+    _getExtensionServices (extDef) {
+      if (!extDef || !extDef.details) {
+        return []
+      }
+
+      const capsJson = extDef.details['network.capabilities']
+      if (capsJson) {
+        try {
+          const caps = JSON.parse(capsJson)
+          if (caps && Array.isArray(caps.services)) {
+            return caps.services
+          }
+        } catch (e) {
+          // Ignore malformed capabilities and fallback to network.services.
+        }
+      }
+
+      const servicesCsv = extDef.details['network.services']
+      if (servicesCsv && typeof servicesCsv === 'string') {
+        return servicesCsv.split(',').map(x => x.trim()).filter(x => x.length > 0)
+      }
+      return []
+    },
+    _buildExternalVpcServiceMap () {
+      const selectedProvider = this.form?.provider || this.provider
+      const extProviderObj = {
+        name: selectedProvider,
+        description: selectedProvider,
+        enabled: true
+      }
+      const extWithFallbackProviders = [
+        { name: selectedProvider },
+        { name: 'VpcVirtualRouter' },
+        { name: 'ConfigDrive' }
+      ]
+      const serviceMap = {
+        Dhcp: extWithFallbackProviders,
+        Dns: extWithFallbackProviders,
+        UserData: extWithFallbackProviders
+      }
+
+      const extDef = this.availableExtensionProviders.find(e => e.name === selectedProvider)
+      const services = this._getExtensionServices(extDef)
+      const allowedVpcServices = new Set([
+        'Gateway', 'Lb', 'StaticNat', 'SourceNat', 'NetworkACL', 'PortForwarding', 'Vpn'
+      ])
+
+      services.forEach(service => {
+        if (allowedVpcServices.has(service)) {
+          serviceMap[service] = [{ name: selectedProvider }]
+        }
+      })
+
+      // Fallback for older extensions that only declare partial details.
+      if (Object.keys(serviceMap).length <= 3) {
+        serviceMap.SourceNat = [{ name: selectedProvider }]
+        serviceMap.StaticNat = [{ name: selectedProvider }]
+        serviceMap.PortForwarding = [{ name: selectedProvider }]
+        serviceMap.NetworkACL = [{ name: selectedProvider }]
+      }
+
+      this.externalNetworkProviderObj = extProviderObj
+      this.externalNetworkSupportedServicesMap = serviceMap
+      return serviceMap
+    },
     handleNsxLbService (supportLb) {
       console.log(supportLb)
       if (!supportLb) {