src/servala/core/models/service.py

@@ -961,5 +961,21 @@ class ServiceInstance(ServalaModelMixin, models.Model):
         except Exception as e:
             return {"error": str(e)}
 
+    @property
+    def fqdn_url(self):
+        try:
+            fqdn = self.spec.get("parameters", {}).get("service", {}).get("fqdn")
+            if not fqdn:
+                return None
+
+            if isinstance(fqdn, list):
+                return fqdn[0]
+            elif isinstance(fqdn, str):
+                return fqdn
+            else:
+                return None
+        except (AttributeError, KeyError, IndexError):
+            return None
+
 
 auditlog.register(ServiceInstance, exclude_fields=["updated_at"], serialize_data=True)

src/servala/frontend/templates/frontend/organizations/service_instance_detail.html

@@ -7,8 +7,8 @@
 {% endblock html_title %}
 {% block page_title_extra %}
     <div>
-        {% if instance.spec.parameters.service.fqdn %}
-            <a href="https://{{ instance.spec.parameters.service.fqdn.0 }}"
+        {% if instance.fqdn_url %}
+            <a href="https://{{ instance.fqdn_url }}"
                target="_blank"
                rel="noopener noreferrer"
                class="btn btn-success me-1 mb-1">

src/servala/static/js/fqdn.js

@@ -1,9 +1,21 @@
 
 const initializeFqdnGeneration = (prefix) => {
     const nameField = document.querySelector(`input#id_${prefix}-name`);
+    if (!nameField) return
+
+    // Try to find array input first (DynamicArrayWidget), then fallback to regular text input
     const fqdnFieldContainer = document.getElementById(`${prefix}-spec.parameters.service.fqdn_container`)
-    if (!nameField || !fqdnFieldContainer) return
-    const fqdnField = fqdnFieldContainer.querySelector('input.array-item-input');
+    let fqdnField = null;
+    let isArrayField = true;
+
+    if (fqdnFieldContainer) {
+        let fqdnField = fqdnFieldContainer.querySelector('input.array-item-input');
+    } else {
+        fqdnField = document.getElementById(`id_${prefix}-spec.parameters.service.fqdn`);
+        isArrayField = false;
+    }
+
+    if (!fqdnField) return
 
     if (nameField && fqdnField) {
         const generateFqdn = (instanceName) => {
@@ -14,9 +26,12 @@ const initializeFqdnGeneration = (prefix) => {
         nameField.addEventListener('input', function() {
             if (!fqdnField.dataset.manuallyEdited) {
                 fqdnField.value = generateFqdn(this.value);
-                const container = fqdnField.closest('.dynamic-array-widget');
-                if (container && window.updateHiddenInput) {
-                    window.updateHiddenInput(container);
+                if (isArrayField) {
+                    // Update hidden input for array fields
+                    const container = fqdnField.closest('.dynamic-array-widget');
+                    if (container && window.updateHiddenInput) {
+                        window.updateHiddenInput(container);
+                    }
                 }
             }
         });
@@ -27,9 +42,12 @@ const initializeFqdnGeneration = (prefix) => {
 
         if (nameField.value && !fqdnField.value) {
             fqdnField.value = generateFqdn(nameField.value);
-            const container = fqdnField.closest('.dynamic-array-widget');
-            if (container && window.updateHiddenInput) {
-                window.updateHiddenInput(container);
+            if (isArrayField) {
+                // Update hidden input for array fields
+                const container = fqdnField.closest('.dynamic-array-widget');
+                if (container && window.updateHiddenInput) {
+                    window.updateHiddenInput(container);
+                }
             }
         }
     }