add quick filters for easy data consumption without scrolling through many pages

app/assets/javascripts/scrollPosition.js

@@ -0,0 +1,13 @@
+document.querySelectorAll('.usa-button-group a, .usa-pagination a').forEach(function(button) {
+  button.addEventListener('click', function() {
+    sessionStorage.setItem('scrollPosition', window.pageYOffset);
+  });
+});
+
+document.addEventListener('DOMContentLoaded', function() {
+  var scrollPosition = sessionStorage.getItem('scrollPosition');
+  if (scrollPosition !== null) {
+    window.scrollTo(0, parseInt(scrollPosition));
+    sessionStorage.removeItem('scrollPosition');
+  }
+});

app/main/views/activity.py

@@ -44,7 +44,22 @@ def get_download_availability(service_id):
 def all_jobs_activity(service_id):
     service_data_retention_days = 7
     page = get_page_from_request()
-    jobs = job_api_client.get_page_of_jobs(service_id, page=page)
+
+    filter_type = request.args.get('filter')
+
+    limit_days = None
+    if filter_type == '24hours':
+        limit_days = 1
+    elif filter_type == '3days':
+        limit_days = 3
+    elif filter_type == '7days':
+        limit_days = 7
+
+    if limit_days:
+        jobs = job_api_client.get_page_of_jobs(service_id, page=page, limit_days=limit_days)
+    else:
+        jobs = job_api_client.get_page_of_jobs(service_id, page=page)
+
     all_jobs_dict = generate_job_dict(jobs)
     prev_page, next_page, pagination = handle_pagination(jobs, service_id, page)
     message_type = ("sms",)

app/templates/views/activity/all-activity.html

@@ -58,6 +58,36 @@
     <h1 class="usa-sr-only">All activity</h1>
     <h2 class="font-body-2xl line-height-sans-2 margin-0">All activity</h2>
     <h2 class="margin-top-4 margin-bottom-1">Sent jobs</h2>
+    <div class="flex-wrap gap-3 display-flex flex-align-start margin-top-2">
+      <div class="flex-1">
+        <ul class="usa-button-group usa-button-group--segmented">
+          <li class="usa-button-group__item">
+            <a href="{{ url_for('main.all_jobs_activity', service_id=current_service.id) }}"
+               class="usa-button usa-button--small {% if not request.args.get('filter') %}{% else %}usa-button--outline{% endif %}">
+              All
+            </a>
+          </li>
+          <li class="usa-button-group__item">
+            <a href="{{ url_for('main.all_jobs_activity', service_id=current_service.id, filter='24hours') }}"
+               class="usa-button usa-button--small {% if request.args.get('filter') == '24hours' %}{% else %}usa-button--outline{% endif %}">
+              Last 24 hours
+            </a>
+          </li>
+          <li class="usa-button-group__item">
+            <a href="{{ url_for('main.all_jobs_activity', service_id=current_service.id, filter='3days') }}"
+               class="usa-button usa-button--small {% if request.args.get('filter') == '3days' %}{% else %}usa-button--outline{% endif %}">
+              Last 3 days
+            </a>
+          </li>
+          <li class="usa-button-group__item">
+            <a href="{{ url_for('main.all_jobs_activity', service_id=current_service.id, filter='7days') }}"
+               class="usa-button usa-button--small {% if request.args.get('filter') == '7days' %}{% else %}usa-button--outline{% endif %}">
+              Last 7 days
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
     <div class="usa-table-container--scrollable-mobile">
       <table class="usa-table usa-table--compact job-table">
         <caption class="usa-sr-only">Table showing all sent jobs for this service</caption>

gulpfile.js

@@ -81,6 +81,7 @@ const javascripts = () => {
     paths.src + 'javascripts/sidenav.js',
     paths.src + 'javascripts/validation.js',
     paths.src + 'javascripts/socketio.js',
+    paths.src + 'javascripts/scrollPosition.js',
   ])
     .pipe(plugins.prettyerror())
     .pipe(