feat(index): add pagination controls to the bottom of the page

Author: bethesque

lib/db.rb

@@ -29,6 +29,7 @@ def self.connect db_credentials
     # logger = Logger.new($stdout)
     con = Sequel.connect(db_credentials.merge(:logger => logger, :pool_class => Sequel::ThreadedConnectionPool, :encoding => 'utf8'))
     con.extension(:connection_validator)
+    con.extension(:pagination)
     con.pool.connection_validation_timeout = -1 #Check the connection on every request
     con.timezone = :utc
     con.run("SET sql_mode='STRICT_TRANS_TABLES';") if db_credentials[:adapter].to_s =~ /mysql/

lib/pact_broker/app.rb

@@ -110,6 +110,7 @@ def configure_database_connection
       PactBroker::DB.connection.timezone = :utc
       PactBroker::DB.validate_connection_config if configuration.validate_database_connection_config
       PactBroker::DB.set_mysql_strict_mode_if_mysql
+      PactBroker::DB.connection.extension(:pagination)
       Sequel.datetime_class = DateTime
       Sequel.database_timezone = :utc # Store all dates in UTC, assume any date without a TZ is UTC
       Sequel.application_timezone = :local # Convert dates to localtime when retrieving from database

lib/pact_broker/index/page.rb

@@ -0,0 +1,12 @@
+module PactBroker
+  module Index
+    class Page < Array
+      attr_reader :pagination_record_count
+
+      def initialize(array, pagination_record_count)
+        super(array)
+        @pagination_record_count = pagination_record_count
+      end
+    end
+  end
+end

lib/pact_broker/index/service.rb

@@ -4,6 +4,7 @@
 require 'pact_broker/matrix/head_row'
 require 'pact_broker/matrix/aggregated_row'
 require 'pact_broker/repositories/helpers'
+require 'pact_broker/index/page'
 
 module PactBroker
   module Index
@@ -20,6 +21,8 @@ class Service
           Sequel.desc(:consumer_version_order),
           Sequel.asc(Sequel.function(:lower, :provider_name))
         ].freeze
+      DEFAULT_PAGE_SIZE = 30
+      DEFAULT_PAGE_NUMBER = 1
 
       # This method provides data for both the OSS server side rendered index (with and without tags)
       # and the Pactflow UI. It really needs to be broken into to separate methods, as it's getting too messy
@@ -77,6 +80,7 @@ def self.find_index_items_optimised options = {}
         webhooks = PactBroker::Webhooks::Webhook.select(:consumer_id, :provider_id).distinct.all
 
         pact_publication_ids = head_pact_publication_ids(options)
+        pagination_record_count = pact_publication_ids.pagination_record_count
 
         pact_publications = PactBroker::Pacts::PactPublication
           .where(id: pact_publication_ids)
@@ -89,7 +93,7 @@ def self.find_index_items_optimised options = {}
           .eager(latest_verification: { provider_version: :tags_with_latest_flag })
           .eager(:head_pact_tags)
 
-        pact_publications.all.collect do | pact_publication |
+        index_items = pact_publications.all.collect do | pact_publication |
           is_overall_latest_for_integration = latest_pact_publication_ids.include?(pact_publication.id)
           latest_verification = latest_verification_for_pseudo_branch(pact_publication, is_overall_latest_for_integration, latest_verifications_for_cv_tags, options[:tags])
           webhook = webhooks.find{ |webhook| webhook.is_for?(pact_publication.integration) }
@@ -106,6 +110,8 @@ def self.find_index_items_optimised options = {}
             options[:tags] && latest_verification ? latest_verification.provider_version.tags_with_latest_flag.select(&:latest?) : []
           )
         end.sort
+
+        Page.new(index_items, pagination_record_count)
       end
 
       # Worst. Code. Ever.
@@ -193,8 +199,7 @@ def self.head_pact_publication_ids(options = {})
         end
 
         query.order(*HEAD_PP_ORDER_COLUMNS)
-          .limit(options[:limit] || 50)
-          .offset(options[:offset] || 0)
+          .paginate(options[:page_number] || DEFAULT_PAGE_NUMBER, options[:page_size] || DEFAULT_PAGE_SIZE)
           .select(:id)
       end
 

lib/pact_broker/ui/controllers/index.rb

@@ -14,11 +14,27 @@ class Index < Base
           if params[:tags]
             tags = params[:tags] == 'true' ? true : [*params[:tags]].compact
           end
-          options = { tags: tags, limit: params[:limit]&.to_i, offset: params[:offset]&.to_i }
+          page_number = params[:page]&.to_i || 1
+          page_size = params[:pageSize]&.to_i || 30
+          options = {
+            tags: tags,
+            page_number: page_number,
+            page_size: page_size
+          }
+
           options[:optimised] = true if params[:optimised] == 'true'
-          view_model = ViewDomain::IndexItems.new(index_service.find_index_items(options))
+          index_items = ViewDomain::IndexItems.new(index_service.find_index_items(options))
+
           page = tags ? :'index/show-with-tags' : :'index/show'
-          haml page, {locals: {index_items: view_model, title: "Pacts"}, layout: :'layouts/main'}
+          locals = {
+            index_items: index_items, title: "Pacts",
+            page_number: page_number,
+            page_size: page_size,
+            pagination_record_count: index_items.pagination_record_count,
+            current_page_size: index_items.size
+          }
+
+          haml page, {locals: locals, layout: :'layouts/main'}
         end
 
         def set_headers

lib/pact_broker/ui/view_models/index_items.rb

@@ -5,26 +5,28 @@ module UI
     module ViewDomain
       class IndexItems
 
+        attr_reader :pagination_record_count
+
         def initialize index_items
+          # Why are we sorting twice!?
           @index_items = index_items.collect{ |index_item| IndexItem.new(index_item) }.sort
+          # until the feature flag is turned on
+          @pagination_record_count = index_items.size
+          @pagination_record_count = index_items.pagination_record_count if index_items.respond_to?(:pagination_record_count)
         end
 
         def each(&block)
           index_items.each(&block)
         end
 
-        def size_label
-          case index_items.size
-          when 1 then "1 pact"
-          else
-            "#{index_items.size} pacts"
-          end
-        end
-
         def empty?
           index_items.empty?
         end
 
+        def size
+          index_items.size
+        end
+
         private
 
         attr_reader :index_items

lib/pact_broker/ui/views/index/_pagination.haml

@@ -0,0 +1,31 @@
+%script{type: 'text/javascript', src:'/javascripts/pagination.js'}
+
+:javascript
+  const PAGE_NUMBER = #{page_number};
+  const PAGE_SIZE = #{page_size};
+  const TOTAL_NUMBER = #{pagination_record_count}
+  const CURRENT_PAGE_SIZE = #{current_page_size}
+
+  $(document).ready(function(){
+    function createPageLink(pageNumber, pageSize) {
+      const url = new URL(window.location)
+      url.searchParams.set('page', pageNumber)
+      url.searchParams.set('pageSize', pageSize)
+      return url.toString()
+    }
+
+    function createFooter(currentPage, totalPage, totalNumber) {
+      return `<div class='nav-footer'>${CURRENT_PAGE_SIZE} of ${totalNumber} pacts</div>`
+    }
+
+    $('div.pagination').pagination({
+        dataSource: [],
+        totalNumber: TOTAL_NUMBER,
+        pageNumber: PAGE_NUMBER,
+        pageSize: PAGE_SIZE,
+        pageRange: 2,
+        pageLink: createPageLink,
+        ulClassName: 'pagination',
+        footer: createFooter
+    })
+  });

lib/pact_broker/ui/views/index/show-with-tags.haml

@@ -82,8 +82,11 @@
             %td
               - if index_item.show_settings?
                 %span.integration-settings.glyphicon.glyphicon-option-horizontal{ 'aria-hidden': true }
-    %div.relationships-size
-      = index_items.size_label
+
+    %div.pagination
+
+    - pagination_locals = { page_number: page_number, page_size: page_size, pagination_record_count: pagination_record_count, current_page_size: current_page_size }
+    = render :haml, :'index/_pagination', :layout => false, locals: pagination_locals
 
   :javascript
     $(function(){

lib/pact_broker/ui/views/index/show.haml

@@ -55,8 +55,11 @@
                   %span.glyphicon.glyphicon-warning-sign{ 'aria-hidden': true }
             %td
               %span.integration-settings.glyphicon.glyphicon-option-horizontal{ 'aria-hidden': true }
-    %div.relationships-size
-      = index_items.size_label
+    %div.pagination
+
+    - pagination_locals = { page_number: page_number, page_size: page_size, pagination_record_count: pagination_record_count, current_page_size: current_page_size }
+    = render :haml, :'index/_pagination', :layout => false, locals: pagination_locals
+
 
   :javascript
     $(function(){