Show additional ControlPlane information to users

src/servala/core/admin.py

@@ -191,6 +191,15 @@ class ControlPlaneAdmin(admin.ModelAdmin):
                 ),
             },
         ),
+        (
+            _("User Information"),
+            {
+                "fields": ("user_info",),
+                "description": _(
+                    "Key-value information displayed to users when selecting this control plane."
+                ),
+            },
+        ),
     )
 
     def get_exclude(self, request, obj=None):

src/servala/core/forms.py

@@ -1,8 +1,20 @@
 from django import forms
 from django.utils.translation import gettext_lazy as _
+from django_jsonform.widgets import JSONFormWidget
 
 from servala.core.models import ControlPlane, ServiceDefinition
 
+CONTROL_PLANE_USER_INFO_SCHEMA = {
+    "type": "object",
+    "properties": {
+        "cname": {
+            "title": "CNAME Record",
+            "type": "string",
+        },
+    },
+    "additionalProperties": {"type": "string"},
+}
+
 
 class ControlPlaneAdminForm(forms.ModelForm):
     certificate_authority_data = forms.CharField(
@@ -23,6 +35,7 @@ class ControlPlaneAdminForm(forms.ModelForm):
     class Meta:
         model = ControlPlane
         fields = "__all__"
+        widgets = {"user_info": JSONFormWidget(schema=CONTROL_PLANE_USER_INFO_SCHEMA)}
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)

src/servala/core/migrations/0006_add_controlplane_user_info.py

@@ -0,0 +1,23 @@
+# Generated by Django 5.2.4 on 2025-09-04 11:29
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("core", "0005_organization_sale_order_fields"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="controlplane",
+            name="user_info",
+            field=models.JSONField(
+                blank=True,
+                help_text="Key-value information displayed to users when selecting this control plane",
+                null=True,
+                verbose_name="User Information",
+            ),
+        ),
+    ]

src/servala/core/models/service.py

@@ -144,6 +144,14 @@ class ControlPlane(ServalaModelMixin, models.Model):
         related_name="control_planes",
         verbose_name=_("Cloud provider"),
     )
+    user_info = models.JSONField(
+        null=True,
+        blank=True,
+        verbose_name=_("User Information"),
+        help_text=_(
+            "Key-value information displayed to users when selecting this control plane"
+        ),
+    )
 
     class Meta:
         verbose_name = _("Control plane")

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

@@ -58,8 +58,8 @@
                     </div>
                 </div>
             </div>
-            {% if instance.status_conditions %}
+            <div class="col-12 col-md-7">
-                <div class="col-12 col-md-7">
+                {% if instance.status_conditions %}
                     <div class="card">
                         <div class="card-header">
                             <h4>{% translate "Status" %}</h4>
@@ -101,8 +101,29 @@
                             </div>
                         </div>
                     </div>
-                </div>
+                {% endif %}
-            {% endif %}
+                {% if instance.context.control_plane.user_info %}
+                    <div class="card">
+                        <div class="card-header">
+                            <h4 class="card-title">{% translate "Service Provider Information" %}</h4>
+                        </div>
+                        <div class="card-content">
+                            <div class="table-responsive">
+                                <table class="table mb-0 table-lg">
+                                    <tbody>
+                                        {% for key, value in instance.context.control_plane.user_info.items %}
+                                            <tr>
+                                                <th>{{ key }}</th>
+                                                <td>{{ value }}</td>
+                                            </tr>
+                                        {% endfor %}
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    </div>
+                {% endif %}
+            </div>
             {% if instance.spec and spec_fieldsets %}
                 <div class="col-12">
                     <div class="card">

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

@@ -7,6 +7,29 @@
         {{ offering }}
     {% endblock page_title %}
 {% endblock html_title %}
+{% partialdef control-plane-info %}
+{% if selected_plane and selected_plane.user_info %}
+    <div class="card">
+        <div class="card-header">
+            <h4 class="card-title">{% translate "Service Provider Information" %}</h4>
+        </div>
+        <div class="card-content">
+            <div class="table-responsive">
+                <table class="table mb-0 table-lg">
+                    <tbody>
+                        {% for key, value in selected_plane.user_info.items %}
+                            <tr>
+                                <th>{{ key }}</th>
+                                <td>{{ value }}</td>
+                            </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+{% endif %}
+{% endpartialdef %}
 {% partialdef service-form %}
 {% if service_form %}
     <div class="card">
@@ -25,57 +48,69 @@
 {% endpartialdef %}
 {% block content %}
     <section class="section">
-        <div class="card">
+        <div class="row">
-            <div class="card-header d-flex align-items-center">
+            <div class="col-12 col-lg-8">
-                {% if service.logo %}
+                <div class="card">
-                    <img src="{{ service.logo.url }}"
+                    <div class="card-header d-flex align-items-center">
-                         alt="{{ service.name }}"
+                        {% if service.logo %}
-                         class="me-3"
+                            <img src="{{ service.logo.url }}"
-                         style="max-width: 48px;
+                                 alt="{{ service.name }}"
-                                max-height: 48px">
+                                 class="me-3"
-                {% endif %}
+                                 style="max-width: 48px;
-                <div class="d-flex flex-column">
+                                        max-height: 48px">
-                    <h4 class="mb-0">{{ offering }}</h4>
+                        {% endif %}
-                    <small class="text-muted">{{ offering.service.category }}</small>
+                        <div class="d-flex flex-column">
-                </div>
+                            <h4 class="mb-0">{{ offering }}</h4>
-            </div>
+                            <small class="text-muted">{{ offering.service.category }}</small>
-            <div class="card-body">
-                {% if offering.description %}
-                    <div class="row mb-3">
-                        <div class="col-12">
-                            <p>{{ offering.description|urlize }}</p>
                         </div>
                     </div>
-                {% endif %}
+                    <div class="card-body">
-                {% if not has_control_planes %}
+                        {% if offering.description %}
-                    <p>{% translate "We currently cannot offer this service, sorry!" %}</p>
+                            <div class="row mb-3">
-                {% else %}
+                                <div class="col-12">
-                    <form hx-trigger="change"
+                                    <p>{{ offering.description|urlize }}</p>
-                          hx-get="{{ request.path }}?fragment=service-form"
+                                </div>
-                          hx-target="#service-form">
-                        {{ select_form }}
-                    </form>
-                {% endif %}
-                {% if service.external_links %}
-                    <div class="row mt-3">
-                        <div class="col-12">
-                            <h6 class="mb-3">{% translate "External Links" %}</h6>
-                            <div class="d-flex flex-wrap gap-2">
-                                {% for link in service.external_links %}
-                                    <a href="{{ link.url }}"
-                                       target="_blank"
-                                       rel="noopener noreferrer"
-                                       class="btn btn-outline-primary btn-sm">
-                                        {{ link.title }}
-                                        <i class="bi bi-box-arrow-up-right ms-1"></i>
-                                    </a>
-                                {% endfor %}
                             </div>
-                        </div>
+                        {% endif %}
+                        {% if not has_control_planes %}
+                            <p>{% translate "We currently cannot offer this service, sorry!" %}</p>
+                        {% else %}
+                            <form hx-trigger="change"
+                                  hx-get="{{ request.path }}?fragment=service-form"
+                                  hx-target="#service-form"
+                                  hx-swap="outerHTML">
+                                {{ select_form }}
+                            </form>
+                        {% endif %}
+                        {% if service.external_links %}
+                            <div class="row mt-3">
+                                <div class="col-12">
+                                    <h6 class="mb-3">{% translate "External Links" %}</h6>
+                                    <div class="d-flex flex-wrap gap-2">
+                                        {% for link in service.external_links %}
+                                            <a href="{{ link.url }}"
+                                               target="_blank"
+                                               rel="noopener noreferrer"
+                                               class="btn btn-outline-primary btn-sm">
+                                                {{ link.title }}
+                                                <i class="bi bi-box-arrow-up-right ms-1"></i>
+                                            </a>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                            </div>
+                        {% endif %}
                     </div>
+                </div>
+                <div id="service-form">{% partial service-form %}</div>
+            </div>
+            <div class="col-12 col-lg-4">
+                {% if has_control_planes %}
+                    <div id="control-plane-info"
+                         hx-trigger="load, change from:form"
+                         hx-get="{{ request.path }}?fragment=control-plane-info">{% partial control-plane-info %}</div>
                 {% endif %}
             </div>
         </div>
-        <div id="service-form">{% partial service-form %}</div>
     </section>
 {% endblock content %}

src/servala/frontend/views/service.py

@@ -73,7 +73,7 @@ class ServiceOfferingDetailView(OrganizationViewMixin, HtmxViewMixin, DetailView
     context_object_name = "offering"
     model = ServiceOffering
     permission_type = "view"
-    fragments = ("service-form",)
+    fragments = ("service-form", "control-plane-info")
 
     def has_permission(self):
         return self.has_organization_permission()