Add filter and search to instance list

src/servala/frontend/forms/service.py

@@ -1,7 +1,13 @@
 from django import forms
 from django.utils.translation import gettext_lazy as _
 
-from servala.core.models import CloudProvider, ControlPlane, ServiceCategory
+from servala.core.models import (
+    CloudProvider,
+    ControlPlane,
+    Service,
+    ServiceCategory,
+    ServiceOffering,
+)
 
 
 class ServiceFilterForm(forms.Form):
@@ -33,3 +39,52 @@ class ControlPlaneSelectForm(forms.Form):
     def __init__(self, *args, planes=None, **kwargs):
         super().__init__(*args, **kwargs)
         self.fields["control_plane"].queryset = planes
+
+
+class ServiceInstanceFilterForm(forms.Form):
+    name = forms.CharField(required=False, label=_("Name"))
+    service = forms.ModelChoiceField(
+        queryset=Service.objects.all(), required=False, label=_("Service")
+    )
+    provider = forms.ModelChoiceField(
+        queryset=ServiceOffering.objects.all()
+        .values_list("provider", flat=True)
+        .distinct(),
+        required=False,
+        label=_("Provider"),
+    )
+    control_plane = forms.ModelChoiceField(
+        queryset=ControlPlane.objects.all(),
+        required=False,
+        label=_("Service Provider Zone"),
+    )
+    status = forms.ChoiceField(
+        choices=(
+            ("active", _("Active")),
+            ("deleted", _("Deleted")),
+        ),
+        required=False,
+        label=_("Status"),
+    )
+
+    def filter_queryset(self, queryset):
+        if self.is_valid():
+            data = self.cleaned_data
+            if data["name"]:
+                queryset = queryset.filter(name__icontains=data["name"])
+            if data["service"]:
+                queryset = queryset.filter(
+                    context__service_definition__service=data["service"]
+                )
+            if data["provider"]:
+                queryset = queryset.filter(
+                    context__service_offering__provider=data["provider"]
+                )
+            if data["control_plane"]:
+                queryset = queryset.filter(context__control_plane=data["control_plane"])
+            if data["status"]:
+                if data["status"] == "active":
+                    queryset = queryset.filter(is_deleted=False)
+                else:
+                    queryset = queryset.filter(is_deleted=True)
+        return queryset

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

@@ -5,41 +5,59 @@
         {% translate "Instances" %}
     {% endblock page_title %}
 {% endblock html_title %}
-{% block card_content %}
-    <table class="table table-striped">
-        <thead>
-            <tr>
-                <th>{% translate "Name" %}</th>
-                <th>{% translate "Service" %}</th>
-                <th>{% translate "Service Provider" %}</th>
-                <th>{% translate "Service Provider Zone" %}</th>
-                <th>{% translate "Created At" %}</th>
-                <th>{% translate "Status" %}</th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for instance in instances %}
-                <tr>
-                    <td>
-                        <a href="{{ instance.urls.base }}">{{ instance.name }}</a>
-                    </td>
-                    <td>{{ instance.context.service_definition.service.name }}</td>
-                    <td>{{ instance.context.service_offering.provider.name }}</td>
-                    <td>{{ instance.context.control_plane.name }}</td>
-                    <td>{{ instance.created_at|date:"SHORT_DATETIME_FORMAT" }}</td>
-                    <td>
-                        {% if instance.is_deleted %}
-                            <span class="badge text-bg-secondary">{% translate "Deleted" %}</span>
-                        {% else %}
-                            <span class="badge text-bg-success">{% translate "Active" %}</span>
-                        {% endif %}
-                    </td>
-                </tr>
-            {% empty %}
-                <tr>
-                    <td colspan="6">{% translate "No service instances found." %}</td>
-                </tr>
-            {% endfor %}
-        </tbody>
-    </table>
+{% block content %}
+    <section class="section">
+        <div class="card">
+            <div class="card-content">
+                <div class="card-body">
+                    <form class="search-form" auto-submit>
+                        {{ filter_form }}
+                    </form>
+                </div>
+            </div>
+        </div>
+        <div class="card">
+            <div class="card-content">
+                <div class="card-body">
+                    <table class="table table-striped">
+                        <thead>
+                            <tr>
+                                <th>{% translate "Name" %}</th>
+                                <th>{% translate "Service" %}</th>
+                                <th>{% translate "Service Provider" %}</th>
+                                <th>{% translate "Service Provider Zone" %}</th>
+                                <th>{% translate "Created At" %}</th>
+                                <th>{% translate "Status" %}</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {% for instance in instances %}
+                                <tr>
+                                    <td>
+                                        <a href="{{ instance.urls.base }}">{{ instance.name }}</a>
+                                    </td>
+                                    <td>{{ instance.context.service_definition.service.name }}</td>
+                                    <td>{{ instance.context.service_offering.provider.name }}</td>
+                                    <td>{{ instance.context.control_plane.name }}</td>
+                                    <td>{{ instance.created_at|date:"SHORT_DATETIME_FORMAT" }}</td>
+                                    <td>
+                                        {% if instance.is_deleted %}
+                                            <span class="badge text-bg-secondary">{% translate "Deleted" %}</span>
+                                        {% else %}
+                                            <span class="badge text-bg-success">{% translate "Active" %}</span>
+                                        {% endif %}
+                                    </td>
+                                </tr>
+                            {% empty %}
+                                <tr>
+                                    <td colspan="6">{% translate "No service instances found." %}</td>
+                                </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </section>
+    <script src="{% static "js/autosubmit.js" %}" defer></script>
 {% endblock %}

src/servala/frontend/views/service.py

@@ -10,7 +10,11 @@ from servala.core.models import (
     ServiceInstance,
     ServiceOffering,
 )
-from servala.frontend.forms.service import ControlPlaneSelectForm, ServiceFilterForm
+from servala.frontend.forms.service import (
+    ControlPlaneSelectForm,
+    ServiceFilterForm,
+    ServiceInstanceFilterForm,
+)
 from servala.frontend.views.mixins import HtmxViewMixin, OrganizationViewMixin
 
 
@@ -151,11 +155,21 @@ class ServiceInstanceListView(OrganizationViewMixin, ListView):
     model = ServiceInstance
     permission_type = "view"
 
+    @cached_property
+    def filter_form(self):
+        return ServiceInstanceFilterForm(data=self.request.GET or None)
+
     def get_queryset(self):
-        """Return all service instances for the current organization."""
-        return ServiceInstance.objects.filter(organization=self.request.organization)
+        """Return all service instances for the current organization with filtering."""
+        queryset = ServiceInstance.objects.filter(
+            organization=self.request.organization
+        )
+        if self.filter_form.is_valid():
+            queryset = self.filter_form.filter_queryset(queryset)
+        return queryset
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         context["organization"] = self.request.organization
+        context["filter_form"] = self.filter_form
         return context