Improve pagination in web ui

[Rishi-source]

Add pagination to VCIO & SCIO #1616 #1617 #1618

This change aligns Package Search functionality and Vulnerability Search, improving consistency across the application and enhancing user control over result display.

For Package Search:

For Vulnerability Search:

Signed-off-by: Rishi Garg [email protected]

[Rishi-source]

Hi @pombredanne @TG1999 @keshav-space @Hritik14 , Can you please review this PR It has passed all workflow tests and was also working fine on my local server. Thank you

[pombredanne]

@TG1999 ping .... @tdruez input welcomed too, as eventually we want to use the same approach across all projects.

[Rishi-source]

@tdruez please see the changes now workflow tests are also successful .

[Rishi-source]

@tdruez I would request you to please review the PR I have made changes In the code after you requested some changes after first review.

[Rishi-source]

See the various comments. Generally, this implementation seems too complex and not "reusable" enough at it requires to many moving parts.

@tdruez what do you mean by "reusable" here. I would code the implementation again to make it more simpler and satisfy the required needs.

[tdruez]

@tdruez what do you mean by "reusable" here. I would code the implementation again to make it more simpler and satisfy the required needs.

@pombredanne as eventually we want to use the same approach across all projects.

@Rishi-source Let's say I want to add this pagination on another Django view, could you document the few steps I need to do with this current implementation? This would help to figure out where we can improve the "reusability".

[Rishi-source]

Hi @tdruez , I have altered code to improve the reusability for that I have made a file pagination_mixin.py which contains PaginatedListViewMixin class . This logic can convert and ListView into a paginated class and can improve the reusability as now you would have to just add this class to you views.

[tdruez]

@Rishi-source Thanks but looking at multiple comments is hard to follow. Could you also provide a combined documentation of the few steps required to reuse this pagination in another app?

[Rishi-source]

Pagination Implementation Documentation

Core Components of Code

1. Pagination Mixin (in pagination_mixins.py):
2. Pagination Template (in templates/includes/pagination.html):

Implementation Steps

1. Copy the Mixin

   • Create pagination_mixins.py in your app directory
   • Copy the PaginatedListViewMixin class code into it

2. Create the Template

   • Create pagination.html in your templates directory
   • Copy the pagination template code into it

3. Use PaginatedListViewMixin in Your View

from django.views.generic import ListView
from .pagination_mixins import PaginatedListViewMixin # Make sure to import the mixin

class MyListView(PaginatedListViewMixin, ListView): # Please make sure to put "PaginatedListViewMixin" Above all the mixins in case if there are 2 or more mixins are already their as position  of mixin will matter here
    model = MyModel
    template_name = "my_template.html"
    
    def get_queryset(self):
        return super().get_queryset().order_by('id') 

4. Include in Your Pagination Template

{% extends "base.html" %}

{% block content %}

    {# Like This #}
    {% if is_paginated %}
        {% include 'pagination.html' with page_obj=page_obj %}
    {% endif %}

{% endblock %}

Customization Options

1. Change Page Sizes

class MyListView(PaginatedListViewMixin, ListView):
    PAGE_SIZE_CHOICES = [
        {"value": 10, "label": "10 per page"},
        {"value": 25, "label": "25 per page"},
        {"value": 50, "label": "50 per page"},
    ]
    paginate_by = 20  # Set the Default size

2. Adjust Window Size

def get_context_data(self, **kwargs):
    # Change window variable to show more/fewer pages around current page
    context = super().get_context_data(**kwargs)
    context['page_range'] = self._get_page_range(
        context['paginator'], 
        context['page_obj'].number,
        window=3  # Show 3 pages on each side i.e. left and right   
    return context

Notes

• JavaScript is embedded directly in the template via the onchange handler
• All pagination state is managed through URL parameters
• All Filter terms are preserved across pagination
• The mixin automatically handles invalid page numbers and sizes

Common Issues and Solutions

1. Missing Page Numbers

   • Check that page_range is being passed correctly in context

2. URL Parameters Not Preserved

   • Check template URLs include all necessary parameters
   • Verify parameter names match in views and templates

3. Page Size Not Working

   • Verify page_size parameter is being passed correctly
   • Check get_paginate_by implementation in mixin

4. Styling Issues

   • Ensure Bulma CSS is included if using default styling
   • Or customize template classes to match your CSS framework

Remember that this implementation assumes:

• You're using Django's class-based views
• You want URL parameter-based pagination
• You're handling search through GET parameters

[Rishi-source]

@tdruez Here’s the documentation on implementing pagination using this approach. Please review and let me know if any changes are required.

[Rishi-source]

Hi @tdruez and @pombredanne , I have implemented this pagination code in both VCIO and SCIO and it is working nice.It preserved all the filter and add a option for the user to select the items per page. I have already shared the screenshot for the VCIO pagination view here are the screenshot for SCIO pagination.

@tdruez you just have to follow the steps which I have provided in the Documentation for implementing this pagination.

[Rishi-source]

Hi @TG1999 @tdruez , I request you to please review this PR I have completed the code .

[Rishi-source]

Hello @tdruez, please review this pull request I have made all the changes required.

[Rishi-source]

Hi @pombredanne please review this PR I have added tests and also addressed all the given review points.