From 55065b6000e5a64f9c7cae185c8d9b9800091c3a Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@alleninstitute.org>
Date: Tue, 13 Aug 2024 16:51:06 -0700
Subject: [PATCH 01/14] feat: filter jobs by status

---
 src/aind_data_transfer_service/models.py      |  8 +++++--
 src/aind_data_transfer_service/server.py      |  4 ++++
 .../templates/job_status.html                 | 23 ++++++++++++++++++-
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/aind_data_transfer_service/models.py b/src/aind_data_transfer_service/models.py
index 5e3a656..69f6b56 100644
--- a/src/aind_data_transfer_service/models.py
+++ b/src/aind_data_transfer_service/models.py
@@ -1,5 +1,5 @@
 """Module for data models used in application"""
-
+import ast
 from datetime import datetime
 from typing import List, Optional
 
@@ -37,12 +37,16 @@ class AirflowDagRunsRequestParameters(BaseModel):
 
     limit: int = 25
     offset: int = 0
+    state: Optional[list[str]] = []
     order_by: str = "-start_date"
 
     @classmethod
     def from_query_params(cls, query_params: dict):
         """Maps the query parameters to the model"""
-        return cls(**query_params)
+        params = dict(query_params)
+        if 'state' in params and isinstance(params['state'], str):
+            params['state'] = ast.literal_eval(params['state'])
+        return cls(**params)
 
 
 class JobStatus(BaseModel):
diff --git a/src/aind_data_transfer_service/server.py b/src/aind_data_transfer_service/server.py
index ff8f815..c4d5735 100644
--- a/src/aind_data_transfer_service/server.py
+++ b/src/aind_data_transfer_service/server.py
@@ -486,6 +486,9 @@ async def jobs(request: Request):
     default_offset = AirflowDagRunsRequestParameters.model_fields[
         "offset"
     ].default
+    default_state = AirflowDagRunsRequestParameters.model_fields[
+        "state"
+    ].default
     return templates.TemplateResponse(
         name="job_status.html",
         context=(
@@ -493,6 +496,7 @@ async def jobs(request: Request):
                 "request": request,
                 "default_limit": default_limit,
                 "default_offset": default_offset,
+                "default_state": default_state,
                 "project_names_url": os.getenv(
                     "AIND_METADATA_SERVICE_PROJECT_NAMES_URL"
                 ),
diff --git a/src/aind_data_transfer_service/templates/job_status.html b/src/aind_data_transfer_service/templates/job_status.html
index 75890f7..8c0694e 100644
--- a/src/aind_data_transfer_service/templates/job_status.html
+++ b/src/aind_data_transfer_service/templates/job_status.html
@@ -48,6 +48,21 @@ <h2 class="mb-3">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
                 </select>
                 <span class="input-group-text">jobs per page</span>
             </div>
+            <div class="input-group">
+                <select class="form-select" onchange="updateJobStatusTableState(this.value);this.blur();">
+                    {% for s in [
+                        {"label": "all", "value": []},
+                        {"label": "running", "value": ['running']},
+                        {"label": "failed", "value": ['failed']},
+                        {"label": "success", "value": ['success']},
+                    ] %}
+                    {% if s.value==default_state %}<option value="{{ s.value }}" selected>{{ s.label }}</option>
+                    {% else %}<option value="{{ s.value }}">{{ s.label }}</option>
+                    {% endif %}
+                    {% endfor %}
+                </select>
+                <span class="input-group-text">status</span>
+            </div>
             <div class="btn-group" role="group">
                 <!-- display current jobs range e.g, "1 to 10 of 100" -->
                 <span id="jobs-iframe-showing" class="btn" style="cursor:default;"></span>
@@ -65,7 +80,7 @@ <h2 class="mb-3">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
             </div>
         </div>
         <!-- iframe to display paginated job status table -->
-        <iframe id="jobs-iframe" src="{{ url_for('job_status_table').include_query_params(limit=default_limit, offset=default_offset)}}"></iframe>
+        <iframe id="jobs-iframe" src="{{ url_for('job_status_table').include_query_params(limit=default_limit, offset=default_offset,state=default_state)}}"></iframe>
     </div>
     <script>
         const PaginateTo = {
@@ -74,6 +89,12 @@ <h2 class="mb-3">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
             FIRST: 'first',
             LAST: 'last'
         };
+        function updateJobStatusTableState(newState) {
+            var iframe = document.getElementById('jobs-iframe');
+            var currentUrl = new URL(iframe.src);
+            currentUrl.searchParams.set('state', newState);
+            iframe.src = currentUrl.toString();
+        }
         function updateJobStatusTableLimit(newLimit) {
             var iframe = document.getElementById('jobs-iframe');
             var currentUrl = new URL(iframe.src);

From ab658e758ea840a341ba887c13fdd0f401ec668d Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@alleninstitute.org>
Date: Wed, 14 Aug 2024 18:07:00 -0700
Subject: [PATCH 02/14] feat: filter jobs by submit time window

---
 src/aind_data_transfer_service/models.py      |  3 +-
 .../templates/job_status.html                 | 37 +++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/aind_data_transfer_service/models.py b/src/aind_data_transfer_service/models.py
index 69f6b56..a61059c 100644
--- a/src/aind_data_transfer_service/models.py
+++ b/src/aind_data_transfer_service/models.py
@@ -39,12 +39,13 @@ class AirflowDagRunsRequestParameters(BaseModel):
     offset: int = 0
     state: Optional[list[str]] = []
     order_by: str = "-start_date"
+    execution_date_gte: Optional[str] = None
 
     @classmethod
     def from_query_params(cls, query_params: dict):
         """Maps the query parameters to the model"""
         params = dict(query_params)
-        if 'state' in params and isinstance(params['state'], str):
+        if 'state' in params:
             params['state'] = ast.literal_eval(params['state'])
         return cls(**params)
 
diff --git a/src/aind_data_transfer_service/templates/job_status.html b/src/aind_data_transfer_service/templates/job_status.html
index 8c0694e..ae786ba 100644
--- a/src/aind_data_transfer_service/templates/job_status.html
+++ b/src/aind_data_transfer_service/templates/job_status.html
@@ -63,6 +63,23 @@ <h2 class="mb-3">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
                 </select>
                 <span class="input-group-text">status</span>
             </div>
+            <div class="input-group">
+                <select class="form-select" onchange="updateJobStatusTableSubmitTimeWindow(this.value);this.blur();">
+                    {% for t in [
+                        {"label": "all", "value": "all"},
+                        {"label": "last 6 hours", "value": "6h"},
+                        {"label": "last 1 day", "value": "1d"},
+                        {"label": "last 3 days", "value": "3d"},
+                        {"label": "last 7 days", "value": "7d"},
+                        {"label": "last 14 days", "value": "14d" },
+                    ] %}
+                    {% if t.value=="all" %}<option value="{{ t.value }}" selected>{{ t.label }}</option>
+                    {% else %}<option value="{{ t.value }}">{{ t.label }}</option>
+                    {% endif %}
+                    {% endfor %}
+                </select>
+                <span class="input-group-text">submit time</span>
+            </div>
             <div class="btn-group" role="group">
                 <!-- display current jobs range e.g, "1 to 10 of 100" -->
                 <span id="jobs-iframe-showing" class="btn" style="cursor:default;"></span>
@@ -83,6 +100,7 @@ <h2 class="mb-3">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
         <iframe id="jobs-iframe" src="{{ url_for('job_status_table').include_query_params(limit=default_limit, offset=default_offset,state=default_state)}}"></iframe>
     </div>
     <script>
+        const SUBMIT_TIME_WINDOW_REGEX = /(\d+)([hd])/;
         const PaginateTo = {
             NEXT: 'next',
             PREV: 'prev',
@@ -95,6 +113,25 @@ <h2 class="mb-3">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
             currentUrl.searchParams.set('state', newState);
             iframe.src = currentUrl.toString();
         }
+        function updateJobStatusTableSubmitTimeWindow(newWindow) {
+            var iframe = document.getElementById('jobs-iframe');
+            var currentUrl = new URL(iframe.src);
+            if (newWindow === "all") {
+                currentUrl.searchParams.delete('execution_date_gte');
+                console.log("currentUrl", currentUrl.toString());
+            } else {
+                // set new execution_date_gte for jobs submitted within the time window (e.g., 6h, 3d)
+                const match = newWindow.match(SUBMIT_TIME_WINDOW_REGEX);
+                if (!match) {
+                    console.error("Invalid time window format. Expected format: <number><h|d> (e.g., 6h, 1d, 3d, 7d, 14d)");
+                    return;
+                }
+                const [_, amount, unit] = match;
+                const execution_date_gte = moment().subtract(parseInt(amount), unit).toISOString();
+                currentUrl.searchParams.set('execution_date_gte', execution_date_gte);
+            }
+            iframe.src = currentUrl.toString();
+        }
         function updateJobStatusTableLimit(newLimit) {
             var iframe = document.getElementById('jobs-iframe');
             var currentUrl = new URL(iframe.src);

From e2e13868f053a921bdeb739c17c7e30b36e4d451 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@alleninstitute.org>
Date: Mon, 19 Aug 2024 10:45:35 -0700
Subject: [PATCH 03/14] fix: sort jobs by submit time instead of start time

---
 src/aind_data_transfer_service/models.py | 3 ++-
 tests/test_server.py                     | 7 +------
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/aind_data_transfer_service/models.py b/src/aind_data_transfer_service/models.py
index a61059c..ec1ce27 100644
--- a/src/aind_data_transfer_service/models.py
+++ b/src/aind_data_transfer_service/models.py
@@ -1,4 +1,5 @@
 """Module for data models used in application"""
+
 import ast
 from datetime import datetime
 from typing import List, Optional
@@ -38,7 +39,7 @@ class AirflowDagRunsRequestParameters(BaseModel):
     limit: int = 25
     offset: int = 0
     state: Optional[list[str]] = []
-    order_by: str = "-start_date"
+    order_by: str = "-execution_date"
     execution_date_gte: Optional[str] = None
 
     @classmethod
diff --git a/tests/test_server.py b/tests/test_server.py
index 01162cb..a5a4601 100644
--- a/tests/test_server.py
+++ b/tests/test_server.py
@@ -541,8 +541,7 @@ def test_get_job_status_list_default(
         expected_default_params = {
             "limit": 25,
             "offset": 0,
-            "start_date_gte": "mock_start_date_gte",
-            "order_by": "-start_date",
+            "order_by": "-execution_date",
         }
         expected_job_status_list = [
             {
@@ -594,10 +593,6 @@ def test_get_job_status_list_default(
         with TestClient(app) as client:
             response = client.get("/api/v1/get_job_status_list")
         response_content = response.json()
-        # small hack to mock the date
-        response_content["data"]["params"][
-            "start_date_gte"
-        ] = "mock_start_date_gte"
         self.assertEqual(response.status_code, 200)
         self.assertEqual(
             response_content,

From 1a7705edcd4c66c2f3ddbe725fd347e200d76081 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@alleninstitute.org>
Date: Mon, 19 Aug 2024 11:40:07 -0700
Subject: [PATCH 04/14] feat: display filters card at top

---
 .../templates/job_status.html                 | 70 ++++++++++---------
 1 file changed, 38 insertions(+), 32 deletions(-)

diff --git a/src/aind_data_transfer_service/templates/job_status.html b/src/aind_data_transfer_service/templates/job_status.html
index ae786ba..8acd4e4 100644
--- a/src/aind_data_transfer_service/templates/job_status.html
+++ b/src/aind_data_transfer_service/templates/job_status.html
@@ -36,6 +36,44 @@
     <div class="content">
         <!-- display total entries from child iframe -->
         <h2 class="mb-3">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
+        <!-- filters for job status results-->
+        <div class="card">
+            <div class="card-header">Filter by</div>
+            <div class="card-body">
+                <div class="input-group">
+                    <span class="input-group-text">status</span>
+                    <select class="form-select" onchange="updateJobStatusTableState(this.value);this.blur();">
+                        {% for s in [
+                            {"label": "all", "value": []},
+                            {"label": "running", "value": ['running']},
+                            {"label": "failed", "value": ['failed']},
+                            {"label": "success", "value": ['success']},
+                        ] %}
+                        {% if s.value==default_state %}<option value="{{ s.value }}" selected>{{ s.label }}</option>
+                        {% else %}<option value="{{ s.value }}">{{ s.label }}</option>
+                        {% endif %}
+                        {% endfor %}
+                    </select>
+                </div>
+                <div class="input-group">
+                    <span class="input-group-text">submit time</span>
+                    <select class="form-select" onchange="updateJobStatusTableSubmitTimeWindow(this.value);this.blur();">
+                        {% for t in [
+                            {"label": "all", "value": "all"},
+                            {"label": "last 6 hours", "value": "6h"},
+                            {"label": "last 1 day", "value": "1d"},
+                            {"label": "last 3 days", "value": "3d"},
+                            {"label": "last 7 days", "value": "7d"},
+                            {"label": "last 14 days", "value": "14d" },
+                        ] %}
+                        {% if t.value=="all" %}<option value="{{ t.value }}" selected>{{ t.label }}</option>
+                        {% else %}<option value="{{ t.value }}">{{ t.label }}</option>
+                        {% endif %}
+                        {% endfor %}
+                    </select>
+                </div>
+            </div>
+        </div>
         <!-- toolbar to change jobs per page and navigate pages -->
         <div id="jobs-toolbar" class="btn-toolbar justify-content-between mb-2" role="toolbar">
             <div class="input-group">
@@ -48,38 +86,6 @@ <h2 class="mb-3">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
                 </select>
                 <span class="input-group-text">jobs per page</span>
             </div>
-            <div class="input-group">
-                <select class="form-select" onchange="updateJobStatusTableState(this.value);this.blur();">
-                    {% for s in [
-                        {"label": "all", "value": []},
-                        {"label": "running", "value": ['running']},
-                        {"label": "failed", "value": ['failed']},
-                        {"label": "success", "value": ['success']},
-                    ] %}
-                    {% if s.value==default_state %}<option value="{{ s.value }}" selected>{{ s.label }}</option>
-                    {% else %}<option value="{{ s.value }}">{{ s.label }}</option>
-                    {% endif %}
-                    {% endfor %}
-                </select>
-                <span class="input-group-text">status</span>
-            </div>
-            <div class="input-group">
-                <select class="form-select" onchange="updateJobStatusTableSubmitTimeWindow(this.value);this.blur();">
-                    {% for t in [
-                        {"label": "all", "value": "all"},
-                        {"label": "last 6 hours", "value": "6h"},
-                        {"label": "last 1 day", "value": "1d"},
-                        {"label": "last 3 days", "value": "3d"},
-                        {"label": "last 7 days", "value": "7d"},
-                        {"label": "last 14 days", "value": "14d" },
-                    ] %}
-                    {% if t.value=="all" %}<option value="{{ t.value }}" selected>{{ t.label }}</option>
-                    {% else %}<option value="{{ t.value }}">{{ t.label }}</option>
-                    {% endif %}
-                    {% endfor %}
-                </select>
-                <span class="input-group-text">submit time</span>
-            </div>
             <div class="btn-group" role="group">
                 <!-- display current jobs range e.g, "1 to 10 of 100" -->
                 <span id="jobs-iframe-showing" class="btn" style="cursor:default;"></span>

From ff3850b044192a7b3904955285d1f0390ee91e6f Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@alleninstitute.org>
Date: Mon, 19 Aug 2024 13:51:21 -0700
Subject: [PATCH 05/14] feat: jobs filters styling

---
 .../templates/job_status.html                 | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/aind_data_transfer_service/templates/job_status.html b/src/aind_data_transfer_service/templates/job_status.html
index 8acd4e4..aff3ec6 100644
--- a/src/aind_data_transfer_service/templates/job_status.html
+++ b/src/aind_data_transfer_service/templates/job_status.html
@@ -16,7 +16,7 @@
         }
         .content {
             width: 100%;
-            height: calc(100vh - 200px);
+            height: calc(100vh - 300px);
             iframe {
                 border: none;
                 width: 100%;
@@ -35,28 +35,28 @@
     </nav>
     <div class="content">
         <!-- display total entries from child iframe -->
-        <h2 class="mb-3">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
+        <h2 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
         <!-- filters for job status results-->
-        <div class="card">
-            <div class="card-header">Filter by</div>
-            <div class="card-body">
-                <div class="input-group">
-                    <span class="input-group-text">status</span>
+        <div class="card mb-4" style="width:350px">
+            <div class="card-header py-1">Filter by</div>
+            <div class="card-body p-2">
+                <div class="input-group input-group-sm mb-1">
+                    <span class="input-group-text" style="width:40%">status</span>
                     <select class="form-select" onchange="updateJobStatusTableState(this.value);this.blur();">
                         {% for s in [
                             {"label": "all", "value": []},
-                            {"label": "running", "value": ['running']},
-                            {"label": "failed", "value": ['failed']},
-                            {"label": "success", "value": ['success']},
+                            {"label": "running", "value": ['running'], "class": "text-info"},
+                            {"label": "failed", "value": ['failed'], "class": "text-danger"},
+                            {"label": "success", "value": ['success'], "class": "text-success"},
                         ] %}
-                        {% if s.value==default_state %}<option value="{{ s.value }}" selected>{{ s.label }}</option>
-                        {% else %}<option value="{{ s.value }}">{{ s.label }}</option>
+                        {% if s.value==default_state %}<option class="{{ s.class }}" value="{{ s.value }}" selected>{{ s.label }}</option>
+                        {% else %}<option class="{{ s.class }}" value="{{ s.value }}">{{ s.label }}</option>
                         {% endif %}
                         {% endfor %}
                     </select>
                 </div>
-                <div class="input-group">
-                    <span class="input-group-text">submit time</span>
+                <div class="input-group input-group-sm">
+                    <span class="input-group-text" style="width:40%">submit time</span>
                     <select class="form-select" onchange="updateJobStatusTableSubmitTimeWindow(this.value);this.blur();">
                         {% for t in [
                             {"label": "all", "value": "all"},

From eed3dcd67bdb05d21926624dbe58e8803ba6a4bb Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@alleninstitute.org>
Date: Mon, 19 Aug 2024 18:40:16 -0700
Subject: [PATCH 06/14] feat: custom range for submit time filters

---
 src/aind_data_transfer_service/models.py      |  7 +-
 .../templates/job_status.html                 | 65 +++++++++----------
 2 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/src/aind_data_transfer_service/models.py b/src/aind_data_transfer_service/models.py
index ec1ce27..1b09cda 100644
--- a/src/aind_data_transfer_service/models.py
+++ b/src/aind_data_transfer_service/models.py
@@ -39,15 +39,16 @@ class AirflowDagRunsRequestParameters(BaseModel):
     limit: int = 25
     offset: int = 0
     state: Optional[list[str]] = []
-    order_by: str = "-execution_date"
     execution_date_gte: Optional[str] = None
+    execution_date_lte: Optional[str] = None 
+    order_by: str = "-execution_date"
 
     @classmethod
     def from_query_params(cls, query_params: dict):
         """Maps the query parameters to the model"""
         params = dict(query_params)
-        if 'state' in params:
-            params['state'] = ast.literal_eval(params['state'])
+        if "state" in params:
+            params["state"] = ast.literal_eval(params["state"])
         return cls(**params)
 
 
diff --git a/src/aind_data_transfer_service/templates/job_status.html b/src/aind_data_transfer_service/templates/job_status.html
index aff3ec6..d8e7835 100644
--- a/src/aind_data_transfer_service/templates/job_status.html
+++ b/src/aind_data_transfer_service/templates/job_status.html
@@ -5,6 +5,9 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
     <title>{% block title %} {% endblock %} AIND Data Transfer Service Jobs</title>
     <style>
         body {
@@ -37,11 +40,11 @@
         <!-- display total entries from child iframe -->
         <h2 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
         <!-- filters for job status results-->
-        <div class="card mb-4" style="width:350px">
+        <div class="card mb-4" style="width:380px">
             <div class="card-header py-1">Filter by</div>
             <div class="card-body p-2">
                 <div class="input-group input-group-sm mb-1">
-                    <span class="input-group-text" style="width:40%">status</span>
+                    <span class="input-group-text" style="width:35%">Status</span>
                     <select class="form-select" onchange="updateJobStatusTableState(this.value);this.blur();">
                         {% for s in [
                             {"label": "all", "value": []},
@@ -56,21 +59,8 @@ <h2 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
                     </select>
                 </div>
                 <div class="input-group input-group-sm">
-                    <span class="input-group-text" style="width:40%">submit time</span>
-                    <select class="form-select" onchange="updateJobStatusTableSubmitTimeWindow(this.value);this.blur();">
-                        {% for t in [
-                            {"label": "all", "value": "all"},
-                            {"label": "last 6 hours", "value": "6h"},
-                            {"label": "last 1 day", "value": "1d"},
-                            {"label": "last 3 days", "value": "3d"},
-                            {"label": "last 7 days", "value": "7d"},
-                            {"label": "last 14 days", "value": "14d" },
-                        ] %}
-                        {% if t.value=="all" %}<option value="{{ t.value }}" selected>{{ t.label }}</option>
-                        {% else %}<option value="{{ t.value }}">{{ t.label }}</option>
-                        {% endif %}
-                        {% endfor %}
-                    </select>
+                    <span class="input-group-text" style="width:35%">Submit Time</span>
+                    <div id="submit-date-range" class="form-select"><span id="submit-date-range-text"></span></div>
                 </div>
             </div>
         </div>
@@ -106,36 +96,45 @@ <h2 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
         <iframe id="jobs-iframe" src="{{ url_for('job_status_table').include_query_params(limit=default_limit, offset=default_offset,state=default_state)}}"></iframe>
     </div>
     <script>
-        const SUBMIT_TIME_WINDOW_REGEX = /(\d+)([hd])/;
         const PaginateTo = {
             NEXT: 'next',
             PREV: 'prev',
             FIRST: 'first',
             LAST: 'last'
         };
+        // initialize date range picker for submit time
+        $(function () {
+            var today = moment();
+            var twoWeeksAgo = moment().subtract(13, 'days');
+            $('#submit-date-range').daterangepicker({
+                startDate: twoWeeksAgo,
+                endDate: today,
+                maxDate: today,
+                ranges: {
+                    'Today': [today, today],
+                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+                    'Last 3 Days': [moment().subtract(2, 'days'), today],
+                    'Last 7 Days': [moment().subtract(6, 'days'), today],
+                    'Last 14 Days': [twoWeeksAgo, today],
+                }
+            }, updateJobStatusTableSubmitTimeRange);
+            updateJobStatusTableSubmitTimeRange(twoWeeksAgo, today);
+        });
+        // event handlers for updating job status table
         function updateJobStatusTableState(newState) {
             var iframe = document.getElementById('jobs-iframe');
             var currentUrl = new URL(iframe.src);
             currentUrl.searchParams.set('state', newState);
             iframe.src = currentUrl.toString();
         }
-        function updateJobStatusTableSubmitTimeWindow(newWindow) {
+        function updateJobStatusTableSubmitTimeRange(start, end) {
+            document.getElementById('submit-date-range-text').innerText = `${start.format('YYYY-MM-DD')} to ${end.format('YYYY-MM-DD')}`;
+            var startDate = start.startOf('day').toISOString();
+            var endDate = end.endOf('day').toISOString();
             var iframe = document.getElementById('jobs-iframe');
             var currentUrl = new URL(iframe.src);
-            if (newWindow === "all") {
-                currentUrl.searchParams.delete('execution_date_gte');
-                console.log("currentUrl", currentUrl.toString());
-            } else {
-                // set new execution_date_gte for jobs submitted within the time window (e.g., 6h, 3d)
-                const match = newWindow.match(SUBMIT_TIME_WINDOW_REGEX);
-                if (!match) {
-                    console.error("Invalid time window format. Expected format: <number><h|d> (e.g., 6h, 1d, 3d, 7d, 14d)");
-                    return;
-                }
-                const [_, amount, unit] = match;
-                const execution_date_gte = moment().subtract(parseInt(amount), unit).toISOString();
-                currentUrl.searchParams.set('execution_date_gte', execution_date_gte);
-            }
+            currentUrl.searchParams.set('execution_date_gte', startDate);
+            currentUrl.searchParams.set('execution_date_lte', endDate);
             iframe.src = currentUrl.toString();
         }
         function updateJobStatusTableLimit(newLimit) {

From 4261e14b461bdab334dcc9cbeaf541c0877fa8b0 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@alleninstitute.org>
Date: Tue, 20 Aug 2024 16:18:10 -0700
Subject: [PATCH 07/14] feat: only show jobs within last 2 weeks

---
 src/aind_data_transfer_service/models.py          | 15 +++++++++++----
 .../templates/job_status.html                     |  1 +
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/aind_data_transfer_service/models.py b/src/aind_data_transfer_service/models.py
index 1b09cda..d0d507c 100644
--- a/src/aind_data_transfer_service/models.py
+++ b/src/aind_data_transfer_service/models.py
@@ -1,10 +1,10 @@
 """Module for data models used in application"""
 
 import ast
-from datetime import datetime
+from datetime import datetime, timedelta, timezone
 from typing import List, Optional
 
-from pydantic import AwareDatetime, BaseModel, Field
+from pydantic import AwareDatetime, BaseModel, Field, field_validator
 
 
 class AirflowDagRun(BaseModel):
@@ -39,10 +39,17 @@ class AirflowDagRunsRequestParameters(BaseModel):
     limit: int = 25
     offset: int = 0
     state: Optional[list[str]] = []
-    execution_date_gte: Optional[str] = None
-    execution_date_lte: Optional[str] = None 
+    execution_date_gte: Optional[str] = (datetime.now(timezone.utc) - timedelta(weeks=2)).isoformat()
+    execution_date_lte: Optional[str] = None
     order_by: str = "-execution_date"
 
+    @field_validator("execution_date_gte", mode="after")
+    def validate_min_execution_date(cls, execution_date_gte: str):
+        """Validate the earliest submit date filter is within 2 weeks"""
+        if datetime.fromisoformat(execution_date_gte) < datetime.now(timezone.utc) - timedelta(weeks=2):
+            raise ValueError("execution_date_gte must be within the last 2 weeks")
+        return execution_date_gte
+
     @classmethod
     def from_query_params(cls, query_params: dict):
         """Maps the query parameters to the model"""
diff --git a/src/aind_data_transfer_service/templates/job_status.html b/src/aind_data_transfer_service/templates/job_status.html
index d8e7835..83b2956 100644
--- a/src/aind_data_transfer_service/templates/job_status.html
+++ b/src/aind_data_transfer_service/templates/job_status.html
@@ -109,6 +109,7 @@ <h2 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
             $('#submit-date-range').daterangepicker({
                 startDate: twoWeeksAgo,
                 endDate: today,
+                minDate: twoWeeksAgo,
                 maxDate: today,
                 ranges: {
                     'Today': [today, today],

From b7a40b3f4035ad0ae0284fb0031b5388c10e08ee Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@alleninstitute.org>
Date: Tue, 20 Aug 2024 16:35:38 -0700
Subject: [PATCH 08/14] refactor: jobs status page

---
 .../templates/job_status.html                 | 79 +++++++++++--------
 .../templates/job_status_table.html           |  3 +-
 2 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/src/aind_data_transfer_service/templates/job_status.html b/src/aind_data_transfer_service/templates/job_status.html
index 83b2956..b9f4ddc 100644
--- a/src/aind_data_transfer_service/templates/job_status.html
+++ b/src/aind_data_transfer_service/templates/job_status.html
@@ -45,12 +45,13 @@ <h2 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
             <div class="card-body p-2">
                 <div class="input-group input-group-sm mb-1">
                     <span class="input-group-text" style="width:35%">Status</span>
-                    <select class="form-select" onchange="updateJobStatusTableState(this.value);this.blur();">
+                    <select class="form-select" onchange="filterJobsByStatus(this.value);this.blur();">
                         {% for s in [
-                            {"label": "all", "value": []},
-                            {"label": "running", "value": ['running'], "class": "text-info"},
-                            {"label": "failed", "value": ['failed'], "class": "text-danger"},
-                            {"label": "success", "value": ['success'], "class": "text-success"},
+                            {"label": "all", "value": [], "class": "text-dark"},
+                            {"label": "queued", "value": ["queued"], "class": "text-secondary"},
+                            {"label": "running", "value": ["running"], "class": "text-info"},
+                            {"label": "failed", "value": ["failed"], "class": "text-danger"},
+                            {"label": "success", "value": ["success"], "class": "text-success"},
                         ] %}
                         {% if s.value==default_state %}<option class="{{ s.class }}" value="{{ s.value }}" selected>{{ s.label }}</option>
                         {% else %}<option class="{{ s.class }}" value="{{ s.value }}">{{ s.label }}</option>
@@ -60,7 +61,7 @@ <h2 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
                 </div>
                 <div class="input-group input-group-sm">
                     <span class="input-group-text" style="width:35%">Submit Time</span>
-                    <div id="submit-date-range" class="form-select"><span id="submit-date-range-text"></span></div>
+                    <input id="submit-date-range" class="form-select" type="text" />
                 </div>
             </div>
         </div>
@@ -93,7 +94,7 @@ <h2 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
             </div>
         </div>
         <!-- iframe to display paginated job status table -->
-        <iframe id="jobs-iframe" src="{{ url_for('job_status_table').include_query_params(limit=default_limit, offset=default_offset,state=default_state)}}"></iframe>
+        <iframe id="jobs-iframe" src=""></iframe>
     </div>
     <script>
         const PaginateTo = {
@@ -102,10 +103,11 @@ <h2 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
             FIRST: 'first',
             LAST: 'last'
         };
-        // initialize date range picker for submit time
-        $(function () {
-            var today = moment();
-            var twoWeeksAgo = moment().subtract(13, 'days');
+        $(document).ready(function() {
+            const today = moment();
+            const twoWeeksAgo = moment().subtract(13, 'days');
+            
+            // initialize daterangepicker for submit date filter
             $('#submit-date-range').daterangepicker({
                 startDate: twoWeeksAgo,
                 endDate: today,
@@ -113,36 +115,48 @@ <h2 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
                 maxDate: today,
                 ranges: {
                     'Today': [today, today],
-                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                     'Last 3 Days': [moment().subtract(2, 'days'), today],
                     'Last 7 Days': [moment().subtract(6, 'days'), today],
                     'Last 14 Days': [twoWeeksAgo, today],
                 }
-            }, updateJobStatusTableSubmitTimeRange);
-            updateJobStatusTableSubmitTimeRange(twoWeeksAgo, today);
+            }, filterJobsBySubmitTimeRange);
+
+            // initialize job status table with default values
+            const initialParams = {
+                limit: "{{ default_limit }}",
+                offset: "{{ default_offset }}",
+                state: "{{ default_state }}",
+                // set default submit date range client-side for browser's local time
+                execution_date_gte: twoWeeksAgo.startOf('day').toISOString(),
+                execution_date_lte: today.endOf('day').toISOString(),
+            };
+            updateJobStatusTable(initialParams, true);
         });
-        // event handlers for updating job status table
-        function updateJobStatusTableState(newState) {
+        // EVENT HANDLERS ------------------------------------------------
+        function updateJobStatusTable(newParams, isInitial=false) {
             var iframe = document.getElementById('jobs-iframe');
-            var currentUrl = new URL(iframe.src);
-            currentUrl.searchParams.set('state', newState);
+            var currentUrl = isInitial ?  new URL("{{ url_for('job_status_table') }}") : new URL(iframe.src);
+            Object.entries(newParams).forEach(([key, value]) => {
+                currentUrl.searchParams.set(key, value);
+            });
             iframe.src = currentUrl.toString();
         }
-        function updateJobStatusTableSubmitTimeRange(start, end) {
-            document.getElementById('submit-date-range-text').innerText = `${start.format('YYYY-MM-DD')} to ${end.format('YYYY-MM-DD')}`;
-            var startDate = start.startOf('day').toISOString();
-            var endDate = end.endOf('day').toISOString();
-            var iframe = document.getElementById('jobs-iframe');
-            var currentUrl = new URL(iframe.src);
-            currentUrl.searchParams.set('execution_date_gte', startDate);
-            currentUrl.searchParams.set('execution_date_lte', endDate);
-            iframe.src = currentUrl.toString();
+        function filterJobsByStatus(newStatus) {
+            updateJobStatusTable({
+                state: newStatus,
+                offset: 0 // reset to first page
+            });
+        }
+        function filterJobsBySubmitTimeRange(start, end) {
+            // NOTE: daterangepicker already has 00:00:00.000 and 23:59:59.999 for start and end
+            updateJobStatusTable({
+                execution_date_gte: start.toISOString(),
+                execution_date_lte: end.toISOString(),
+                offset: 0 // reset to first page
+            });
         }
         function updateJobStatusTableLimit(newLimit) {
-            var iframe = document.getElementById('jobs-iframe');
-            var currentUrl = new URL(iframe.src);
-            currentUrl.searchParams.set('limit', newLimit);
-            iframe.src = currentUrl.toString();
+            updateJobStatusTable({limit: newLimit});
         }
         function updateJobStatusTablePage(paginateTo) {
             var iframe = document.getElementById('jobs-iframe');
@@ -165,8 +179,7 @@ <h2 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
                     offset = Math.floor(totalEntries / limit) * limit;
                     break;
             }
-            currentUrl.searchParams.set('offset', offset);
-            iframe.src = currentUrl.toString();
+            updateJobStatusTable({offset: offset});
         }
     </script>
     </body>
diff --git a/src/aind_data_transfer_service/templates/job_status_table.html b/src/aind_data_transfer_service/templates/job_status_table.html
index 9d26b4d..85c67f1 100644
--- a/src/aind_data_transfer_service/templates/job_status_table.html
+++ b/src/aind_data_transfer_service/templates/job_status_table.html
@@ -27,6 +27,7 @@
       <td class="{% if job_status.job_state == 'success' %}table-success
                 {% elif job_status.job_state == 'failed' %}table-danger
                 {% elif job_status.job_state == 'running' %}table-info
+                {% elif job_status.job_state == 'queued' %}table-secondary
                 {% endif %}">{{job_status.job_state}}</td>
       <td class="datetime_to_be_adjusted">{{job_status.submit_time}}</td>
       <td class="datetime_to_be_adjusted">{{job_status.start_time}}</td>
@@ -63,7 +64,7 @@ <h4 class="alert-heading">{{ message }}</h4>
         limit = parseInt('{{limit}}');
         total_entries = parseInt('{{total_entries}}');
         parent.document.getElementById('jobs-iframe-total-entries').innerText = '{{total_entries}}';
-        parent.document.getElementById('jobs-iframe-showing').innerText = `${offset + 1} to ${Math.min(offset + limit, total_entries)} of ${total_entries}`;
+        parent.document.getElementById('jobs-iframe-showing').innerText = `${(total_entries > 0) ? (offset + 1) : offset} to ${Math.min(offset + limit, total_entries)} of ${total_entries}`;
         // also update the pagination buttons
         isFirst = (offset == 0);
         isLast = (offset + limit >= total_entries);

From 0442525f112787d81e7144d5dab1ae1e7acb6ac0 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@alleninstitute.org>
Date: Tue, 20 Aug 2024 19:36:37 -0700
Subject: [PATCH 09/14] feat: search by exact dag_run_id

---
 src/aind_data_transfer_service/server.py      | 51 +++++++++++++------
 .../templates/job_status.html                 | 44 +++++++++++++++-
 .../templates/job_status_table.html           |  8 +--
 3 files changed, 83 insertions(+), 20 deletions(-)

diff --git a/src/aind_data_transfer_service/server.py b/src/aind_data_transfer_service/server.py
index c4d5735..017a7b0 100644
--- a/src/aind_data_transfer_service/server.py
+++ b/src/aind_data_transfer_service/server.py
@@ -30,6 +30,7 @@
 from aind_data_transfer_service.hpc.client import HpcClient, HpcClientConfigs
 from aind_data_transfer_service.hpc.models import HpcJobSubmitSettings
 from aind_data_transfer_service.models import (
+    AirflowDagRun,
     AirflowDagRunsRequestParameters,
     AirflowDagRunsResponse,
     JobStatus,
@@ -390,23 +391,43 @@ async def get_job_status_list(request: Request):
     """Get status of jobs with default pagination of limit=25 and offset=0."""
     # TODO: Use httpx async client
     try:
-        params = AirflowDagRunsRequestParameters.from_query_params(
-            request.query_params
-        )
-        params_dict = json.loads(params.model_dump_json())
-        response_jobs = requests.get(
-            url=os.getenv("AIND_AIRFLOW_SERVICE_JOBS_URL"),
-            auth=(
-                os.getenv("AIND_AIRFLOW_SERVICE_USER"),
-                os.getenv("AIND_AIRFLOW_SERVICE_PASSWORD"),
-            ),
-            params=params_dict,
-        )
+        get_one_job = request.query_params.get("dag_run_id") is not None
+        if get_one_job:
+            dag_run_id = request.query_params["dag_run_id"]
+            params_dict = {"dag_run_id": dag_run_id} # only for returning to client
+            response_jobs = requests.get(
+                url=f'{os.getenv("AIND_AIRFLOW_SERVICE_JOBS_URL")}/{dag_run_id}',
+                auth=(
+                    os.getenv("AIND_AIRFLOW_SERVICE_USER"),
+                    os.getenv("AIND_AIRFLOW_SERVICE_PASSWORD"),
+                ),
+            )
+        else:
+            params = AirflowDagRunsRequestParameters.from_query_params(
+                request.query_params
+            )
+            params_dict = json.loads(params.model_dump_json())
+            response_jobs = requests.get(
+                url=os.getenv("AIND_AIRFLOW_SERVICE_JOBS_URL"),
+                auth=(
+                    os.getenv("AIND_AIRFLOW_SERVICE_USER"),
+                    os.getenv("AIND_AIRFLOW_SERVICE_PASSWORD"),
+                ),
+                params=params_dict,
+            )
         status_code = response_jobs.status_code
         if response_jobs.status_code == 200:
-            dag_runs = AirflowDagRunsResponse.model_validate_json(
-                json.dumps(response_jobs.json())
-            )
+            if get_one_job:
+                dag_run = AirflowDagRun.model_validate_json(
+                    json.dumps(response_jobs.json())
+                )
+                dag_runs = AirflowDagRunsResponse(
+                    dag_runs=[dag_run], total_entries=1
+                )
+            else:
+                dag_runs = AirflowDagRunsResponse.model_validate_json(
+                    json.dumps(response_jobs.json())
+                )
             job_status_list = [
                 JobStatus.from_airflow_dag_run(d) for d in dag_runs.dag_runs
             ]
diff --git a/src/aind_data_transfer_service/templates/job_status.html b/src/aind_data_transfer_service/templates/job_status.html
index b9f4ddc..13d9081 100644
--- a/src/aind_data_transfer_service/templates/job_status.html
+++ b/src/aind_data_transfer_service/templates/job_status.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
@@ -43,6 +44,7 @@ <h2 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
         <div class="card mb-4" style="width:380px">
             <div class="card-header py-1">Filter by</div>
             <div class="card-body p-2">
+                <!-- filter by job status -->
                 <div class="input-group input-group-sm mb-1">
                     <span class="input-group-text" style="width:35%">Status</span>
                     <select class="form-select" onchange="filterJobsByStatus(this.value);this.blur();">
@@ -59,10 +61,29 @@ <h2 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
                         {% endfor %}
                     </select>
                 </div>
+                <!-- filter by job submitted date range -->
                 <div class="input-group input-group-sm">
                     <span class="input-group-text" style="width:35%">Submit Time</span>
                     <input id="submit-date-range" class="form-select" type="text" />
                 </div>
+                <!-- search by job id (exact match only) -->
+                <div class="d-flex align-items-center">
+                    <hr class="flex-grow-1 border-secondary">
+                    <span class="mx-2"><small class="d-block">or</small></span>
+                    <hr class="flex-grow-1 border-secondary">
+                </div>
+                <form onsubmit="searchByJobId(event)">
+                    <div class="input-group input-group-sm">
+                        <span class="input-group-text" style="width:35%">Job ID</span>
+                        <input id="job-id-input" type="text" class="form-control" placeholder="exact match only">
+                        <button class="btn btn-outline-secondary" type="submit" title="Search">
+                            <i class="bi bi-search"></i>
+                        </button>
+                        <button class="btn btn-outline-secondary" type="button" onclick="clearJobIdResult(event)" title="Clear">
+                            <i class="bi bi-x-lg"></i>
+                        </button>
+                    </div>
+                </form>
             </div>
         </div>
         <!-- toolbar to change jobs per page and navigate pages -->
@@ -130,17 +151,23 @@ <h2 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
                 execution_date_gte: twoWeeksAgo.startOf('day').toISOString(),
                 execution_date_lte: today.endOf('day').toISOString(),
             };
-            updateJobStatusTable(initialParams, true);
+            updateJobStatusTable(initialParams, false, true);
         });
         // EVENT HANDLERS ------------------------------------------------
-        function updateJobStatusTable(newParams, isInitial=false) {
+        function updateJobStatusTable(newParams, isSearchJobId=false, isInitial=false) {
             var iframe = document.getElementById('jobs-iframe');
             var currentUrl = isInitial ?  new URL("{{ url_for('job_status_table') }}") : new URL(iframe.src);
             Object.entries(newParams).forEach(([key, value]) => {
                 currentUrl.searchParams.set(key, value);
             });
+            // reset job_id filter
+            if (!isSearchJobId) {
+                document.getElementById('job-id-input').value = '';
+                currentUrl.searchParams.delete('dag_run_id');
+            }
             iframe.src = currentUrl.toString();
         }
+        // Filters
         function filterJobsByStatus(newStatus) {
             updateJobStatusTable({
                 state: newStatus,
@@ -155,6 +182,19 @@ <h2 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
                 offset: 0 // reset to first page
             });
         }
+        function searchByJobId(event) {
+            event.preventDefault();
+            // search by job id and reset to first page
+            const jobId = document.getElementById('job-id-input').value;
+            console.log('Searching for job ID:', jobId);
+            updateJobStatusTable({ dag_run_id: jobId, offset: 0}, true);
+        }
+        function clearJobIdResult(event) {
+            event.preventDefault();
+            // clear job id filter and reset to first page
+            updateJobStatusTable({ offset: 0 }, false);
+        }
+        // Pagination
         function updateJobStatusTableLimit(newLimit) {
             updateJobStatusTable({limit: newLimit});
         }
diff --git a/src/aind_data_transfer_service/templates/job_status_table.html b/src/aind_data_transfer_service/templates/job_status_table.html
index 85c67f1..b283c7f 100644
--- a/src/aind_data_transfer_service/templates/job_status_table.html
+++ b/src/aind_data_transfer_service/templates/job_status_table.html
@@ -64,10 +64,12 @@ <h4 class="alert-heading">{{ message }}</h4>
         limit = parseInt('{{limit}}');
         total_entries = parseInt('{{total_entries}}');
         parent.document.getElementById('jobs-iframe-total-entries').innerText = '{{total_entries}}';
-        parent.document.getElementById('jobs-iframe-showing').innerText = `${(total_entries > 0) ? (offset + 1) : offset} to ${Math.min(offset + limit, total_entries)} of ${total_entries}`;
+        parent.document.getElementById('jobs-iframe-showing').innerText = (total_entries > 1)
+          ? `${offset + 1} to ${Math.min(offset + limit, total_entries)} of ${total_entries}`
+          : `${total_entries} to ${total_entries} of ${total_entries}`;
         // also update the pagination buttons
-        isFirst = (offset == 0);
-        isLast = (offset + limit >= total_entries);
+        isFirst = (total_entries > 1) ? (offset == 0) : true;
+        isLast = (total_entries > 1) ? (offset + limit >= total_entries) : true;
         parent.document.getElementById('jobs-page-btn-first').disabled = isFirst;
         parent.document.getElementById('jobs-page-btn-prev').disabled = isFirst;
         parent.document.getElementById('jobs-page-btn-next').disabled = isLast;

From d9d1262b439179ea65afede50e0e10f754c1a67a Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@alleninstitute.org>
Date: Tue, 20 Aug 2024 20:05:07 -0700
Subject: [PATCH 10/14] feat: collapsable filters

---
 .../templates/job_status.html                         | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/aind_data_transfer_service/templates/job_status.html b/src/aind_data_transfer_service/templates/job_status.html
index 13d9081..1fa71e0 100644
--- a/src/aind_data_transfer_service/templates/job_status.html
+++ b/src/aind_data_transfer_service/templates/job_status.html
@@ -20,7 +20,7 @@
         }
         .content {
             width: 100%;
-            height: calc(100vh - 300px);
+            height: calc(100vh - 250px);
             iframe {
                 border: none;
                 width: 100%;
@@ -41,9 +41,12 @@
         <!-- display total entries from child iframe -->
         <h2 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
         <!-- filters for job status results-->
-        <div class="card mb-4" style="width:380px">
-            <div class="card-header py-1">Filter by</div>
-            <div class="card-body p-2">
+        <div class="card mb-4" style="width:400px">
+            <div class="card-header py-1" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-filters" aria-expanded="false" aria-controls="collapse-filters">
+                <i class="bi bi-filter"></i><span class="ms-2">Filter by</span>
+                <i class="bi bi-chevron-expand float-end"></i>
+            </div>
+            <div id="collapse-filters" class="collapse card-body p-2">
                 <!-- filter by job status -->
                 <div class="input-group input-group-sm mb-1">
                     <span class="input-group-text" style="width:35%">Status</span>

From c106402588f580eb8837358d7199a208826eb39f Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@alleninstitute.org>
Date: Tue, 20 Aug 2024 20:56:25 -0700
Subject: [PATCH 11/14] test: unit tests for job filters

---
 tests/test_server.py | 117 +++++++++++++++++++++++++++++++++++++------
 1 file changed, 102 insertions(+), 15 deletions(-)

diff --git a/tests/test_server.py b/tests/test_server.py
index a5a4601..eace5f5 100644
--- a/tests/test_server.py
+++ b/tests/test_server.py
@@ -4,7 +4,7 @@
 import os
 import unittest
 from copy import deepcopy
-from datetime import datetime
+from datetime import datetime, timedelta, timezone
 from io import BytesIO
 from pathlib import Path, PurePosixPath
 from unittest.mock import MagicMock, patch
@@ -43,9 +43,12 @@
 NEW_SAMPLE_CSV = TEST_DIRECTORY / "resources" / "new_sample.csv"
 MALFORMED_SAMPLE2_CSV = TEST_DIRECTORY / "resources" / "sample_malformed_2.csv"
 
-DAG_RUN_RESPONSE = (
+LIST_DAG_RUNS_RESPONSE = (
     TEST_DIRECTORY / "resources" / "airflow_dag_runs_response.json"
 )
+GET_DAG_RUN_RESPONSE = (
+    TEST_DIRECTORY / "resources" / "airflow_dag_run_response.json"
+)
 
 
 class TestServer(unittest.TestCase):
@@ -69,6 +72,7 @@ class TestServer(unittest.TestCase):
         "HPC_AWS_PARAM_STORE_NAME": "/some/param/store",
         "OPEN_DATA_AWS_SECRET_ACCESS_KEY": "open_data_aws_key",
         "OPEN_DATA_AWS_ACCESS_KEY_ID": "open_data_aws_key_id",
+        "AIND_AIRFLOW_SERVICE_JOBS_URL": "airflow_jobs_url",
     }
 
     with open(SAMPLE_CSV, "r") as file:
@@ -77,8 +81,11 @@ class TestServer(unittest.TestCase):
     with open(MOCK_DB_FILE) as f:
         json_contents = json.load(f)
 
-    with open(DAG_RUN_RESPONSE) as f:
-        dag_run_response = json.load(f)
+    with open(LIST_DAG_RUNS_RESPONSE) as f:
+        list_dag_runs_response = json.load(f)
+
+    with open(GET_DAG_RUN_RESPONSE) as f:
+        get_dag_run_response = json.load(f)
 
     expected_job_configs = deepcopy(TestJobConfigs.expected_job_configs)
     for config in expected_job_configs:
@@ -534,13 +541,16 @@ def test_get_job_status_list_default(
         mock_dag_runs_response = Response()
         mock_dag_runs_response.status_code = 200
         mock_dag_runs_response._content = json.dumps(
-            self.dag_run_response
+            self.list_dag_runs_response
         ).encode("utf-8")
         mock_get.return_value = mock_dag_runs_response
         expected_message = "Retrieved job status list from airflow"
         expected_default_params = {
             "limit": 25,
             "offset": 0,
+            "state": [],
+            "execution_date_gte": "mock_execution_date_gte",
+            "execution_date_lte": None,
             "order_by": "-execution_date",
         }
         expected_job_status_list = [
@@ -593,6 +603,10 @@ def test_get_job_status_list_default(
         with TestClient(app) as client:
             response = client.get("/api/v1/get_job_status_list")
         response_content = response.json()
+        # small hack to mock the date
+        response_content["data"]["params"][
+            "execution_date_gte"
+        ] = "mock_execution_date_gte"
         self.assertEqual(response.status_code, 200)
         self.assertEqual(
             response_content,
@@ -600,7 +614,9 @@ def test_get_job_status_list_default(
                 "message": expected_message,
                 "data": {
                     "params": expected_default_params,
-                    "total_entries": self.dag_run_response["total_entries"],
+                    "total_entries": self.list_dag_runs_response[
+                        "total_entries"
+                    ],
                     "job_status_list": expected_job_status_list,
                 },
             },
@@ -617,13 +633,20 @@ def test_get_job_status_list_query_params(
         mock_dag_runs_response = Response()
         mock_dag_runs_response.status_code = 200
         mock_dag_runs_response._content = json.dumps(
-            self.dag_run_response
+            self.list_dag_runs_response
         ).encode("utf-8")
         mock_get.return_value = mock_dag_runs_response
         expected_message = "Retrieved job status list from airflow"
         with TestClient(app) as client:
             response = client.get(
-                "/api/v1/get_job_status_list?limit=10&offset=5"
+                "/api/v1/get_job_status_list",
+                params={
+                    "limit": 10,
+                    "offset": 5,
+                    "execution_date_gte": (
+                        datetime.now(timezone.utc) - timedelta(days=2)
+                    ).strftime("%Y-%m-%dT%H:%M:%SZ"),
+                },
             )
         response_content = response.json()
         self.assertEqual(response.status_code, 200)
@@ -632,22 +655,86 @@ def test_get_job_status_list_query_params(
         self.assertEqual(response_content["data"]["params"]["offset"], 5)
 
     @patch.dict(os.environ, EXAMPLE_ENV_VAR1, clear=True)
+    @patch("requests.get")
     @patch("logging.error")
     def test_get_job_status_list_validation_error(
         self,
         mock_log_error: MagicMock,
+        mock_get,
     ):
         """Tests get_job_status_list when query_params are invalid."""
+        invalid_queries = [
+            {"limit": "invalid", "offset": 5},
+            {"limit": 5, "offset": "invalid"},
+            {
+                "execution_date_gte": (
+                    datetime.now(timezone.utc)
+                    - timedelta(weeks=2)
+                    - timedelta(minutes=1)
+                ).strftime("%Y-%m-%dT%H:%M:%SZ")
+            },
+        ]
+        for query in invalid_queries:
+            with TestClient(app) as client:
+                response = client.get(
+                    "/api/v1/get_job_status_list", params=query
+                )
+            response_content = response.json()
+            self.assertEqual(response.status_code, 406)
+            self.assertEqual(
+                response_content["message"],
+                "Error validating request parameters",
+            )
+        mock_log_error.assert_called()
+        mock_get.assert_not_called()
+
+    @patch.dict(os.environ, EXAMPLE_ENV_VAR1, clear=True)
+    @patch("requests.get")
+    def test_get_job_status_list_dag_run_id(
+        self,
+        mock_get,
+    ):
+        """Tests get_job_status_list gets 1 dagRun from airflow when dag_run_id
+        is provided."""
+        dag_run_id = "manual__2024-05-18T22:08:52.286765+00:00"
+        mock_dag_run_response = Response()
+        mock_dag_run_response.status_code = 200
+        mock_dag_run_response._content = json.dumps(
+            self.get_dag_run_response
+        ).encode("utf-8")
+        mock_get.return_value = mock_dag_run_response
+        expected_message = "Retrieved job status list from airflow"
+        expected_params = {
+            "dag_run_id": dag_run_id,
+        }
+        expected_job_status_list = [
+            {
+                "end_time": "2024-05-18T22:09:28.530534Z",
+                "job_id": "manual__2024-05-18T22:08:52.286765+00:00",
+                "job_state": "failed",
+                "name": "",
+                "comment": None,
+                "start_time": "2024-05-18T22:08:52.637098Z",
+                "submit_time": "2024-05-18T22:08:52.286765Z",
+            },
+        ]
         with TestClient(app) as client:
             response = client.get(
-                "/api/v1/get_job_status_list?limit=invalid&offset=5"
+                "/api/v1/get_job_status_list", params=expected_params
             )
         response_content = response.json()
-        self.assertEqual(response.status_code, 406)
+        self.assertEqual(response.status_code, 200)
         self.assertEqual(
-            response_content["message"], "Error validating request parameters"
+            response_content,
+            {
+                "message": expected_message,
+                "data": {
+                    "params": expected_params,
+                    "total_entries": 1,
+                    "job_status_list": expected_job_status_list,
+                },
+            },
         )
-        mock_log_error.assert_called_once()
 
     @patch.dict(os.environ, EXAMPLE_ENV_VAR1, clear=True)
     @patch("logging.error")
@@ -690,9 +777,9 @@ def test_jobs_table_success(self, mock_get: MagicMock):
         """Tests that job status table renders as expected."""
         mock_response = Response()
         mock_response.status_code = 200
-        mock_response._content = json.dumps(self.dag_run_response).encode(
-            "utf-8"
-        )
+        mock_response._content = json.dumps(
+            self.list_dag_runs_response
+        ).encode("utf-8")
         mock_get.return_value = mock_response
         with TestClient(app) as client:
             response = client.get("/job_status_table")

From 67ebe9e9c7e6f6a683d35074d8fbca7cf017ae55 Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@alleninstitute.org>
Date: Tue, 20 Aug 2024 20:58:17 -0700
Subject: [PATCH 12/14] refactor: run linters

---
 src/aind_data_transfer_service/models.py      | 11 ++--
 src/aind_data_transfer_service/server.py      |  8 +--
 tests/resources/airflow_dag_run_response.json | 51 +++++++++++++++++++
 3 files changed, 64 insertions(+), 6 deletions(-)
 create mode 100644 tests/resources/airflow_dag_run_response.json

diff --git a/src/aind_data_transfer_service/models.py b/src/aind_data_transfer_service/models.py
index d0d507c..88bca6e 100644
--- a/src/aind_data_transfer_service/models.py
+++ b/src/aind_data_transfer_service/models.py
@@ -39,15 +39,20 @@ class AirflowDagRunsRequestParameters(BaseModel):
     limit: int = 25
     offset: int = 0
     state: Optional[list[str]] = []
-    execution_date_gte: Optional[str] = (datetime.now(timezone.utc) - timedelta(weeks=2)).isoformat()
+    execution_date_gte: Optional[str] = (
+        datetime.now(timezone.utc) - timedelta(weeks=2)
+    ).isoformat()
     execution_date_lte: Optional[str] = None
     order_by: str = "-execution_date"
 
     @field_validator("execution_date_gte", mode="after")
     def validate_min_execution_date(cls, execution_date_gte: str):
         """Validate the earliest submit date filter is within 2 weeks"""
-        if datetime.fromisoformat(execution_date_gte) < datetime.now(timezone.utc) - timedelta(weeks=2):
-            raise ValueError("execution_date_gte must be within the last 2 weeks")
+        min_execution_date = datetime.now(timezone.utc) - timedelta(weeks=2)
+        if datetime.fromisoformat(execution_date_gte) < min_execution_date:
+            raise ValueError(
+                "execution_date_gte must be within the last 2 weeks"
+            )
         return execution_date_gte
 
     @classmethod
diff --git a/src/aind_data_transfer_service/server.py b/src/aind_data_transfer_service/server.py
index 017a7b0..2e3fe8a 100644
--- a/src/aind_data_transfer_service/server.py
+++ b/src/aind_data_transfer_service/server.py
@@ -391,12 +391,14 @@ async def get_job_status_list(request: Request):
     """Get status of jobs with default pagination of limit=25 and offset=0."""
     # TODO: Use httpx async client
     try:
+        url = os.getenv("AIND_AIRFLOW_SERVICE_JOBS_URL").strip("/")
         get_one_job = request.query_params.get("dag_run_id") is not None
         if get_one_job:
             dag_run_id = request.query_params["dag_run_id"]
-            params_dict = {"dag_run_id": dag_run_id} # only for returning to client
+            # params_dict is only for returning to client
+            params_dict = {"dag_run_id": dag_run_id}
             response_jobs = requests.get(
-                url=f'{os.getenv("AIND_AIRFLOW_SERVICE_JOBS_URL")}/{dag_run_id}',
+                url=f"{url}/{dag_run_id}",
                 auth=(
                     os.getenv("AIND_AIRFLOW_SERVICE_USER"),
                     os.getenv("AIND_AIRFLOW_SERVICE_PASSWORD"),
@@ -408,7 +410,7 @@ async def get_job_status_list(request: Request):
             )
             params_dict = json.loads(params.model_dump_json())
             response_jobs = requests.get(
-                url=os.getenv("AIND_AIRFLOW_SERVICE_JOBS_URL"),
+                url=url,
                 auth=(
                     os.getenv("AIND_AIRFLOW_SERVICE_USER"),
                     os.getenv("AIND_AIRFLOW_SERVICE_PASSWORD"),
diff --git a/tests/resources/airflow_dag_run_response.json b/tests/resources/airflow_dag_run_response.json
new file mode 100644
index 0000000..a18698e
--- /dev/null
+++ b/tests/resources/airflow_dag_run_response.json
@@ -0,0 +1,51 @@
+{
+  "conf": {
+     "acq_datetime": "2000-01-01T01:40:03",
+     "force_cloud_sync": false,
+     "metadata_dir": null,
+     "metadata_dir_force": false,
+     "modalities": [
+        {
+           "compress_raw_data": true,
+           "extra_configs": null,
+           "modality": {
+              "abbreviation": "ecephys",
+              "name": "Extracellular electrophysiology"
+           },
+           "slurm_settings": null,
+           "source": "/a_source/ecephys"
+        },
+        {
+           "compress_raw_data": false,
+           "extra_configs": null,
+           "modality": {
+              "abbreviation": "behavior-videos",
+              "name": "Behavior videos"
+           },
+           "slurm_settings": null,
+           "source": "/b_source/ecephys"
+        }
+     ],
+     "platform": {
+        "abbreviation": "ecephys",
+        "name": "Electrophysiology platform"
+     },
+     "process_capsule_id": null,
+     "project_name": "Ephys Platform",
+     "s3_bucket": "private",
+     "subject_id": "655019"
+  },
+  "dag_id": "transform_and_upload",
+  "dag_run_id": "manual__2024-05-18T22:08:52.286765+00:00",
+  "data_interval_end": "2024-05-18T22:08:52.286765+00:00",
+  "data_interval_start": "2024-05-18T22:08:52.286765+00:00",
+  "end_date": "2024-05-18T22:09:28.530534+00:00",
+  "execution_date": "2024-05-18T22:08:52.286765+00:00",
+  "external_trigger": true,
+  "last_scheduling_decision": "2024-05-18T22:09:28.527134+00:00",
+  "logical_date": "2024-05-18T22:08:52.286765+00:00",
+  "note": null,
+  "run_type": "manual",
+  "start_date": "2024-05-18T22:08:52.637098+00:00",
+  "state": "failed"
+}
\ No newline at end of file

From c10c16755f418fa77d802952aab543560b63a2da Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@alleninstitute.org>
Date: Wed, 21 Aug 2024 11:23:26 -0700
Subject: [PATCH 13/14] refactor: code cleanup

---
 src/aind_data_transfer_service/server.py | 39 ++++++++++++------------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/aind_data_transfer_service/server.py b/src/aind_data_transfer_service/server.py
index 2e3fe8a..19398b2 100644
--- a/src/aind_data_transfer_service/server.py
+++ b/src/aind_data_transfer_service/server.py
@@ -391,32 +391,24 @@ async def get_job_status_list(request: Request):
     """Get status of jobs with default pagination of limit=25 and offset=0."""
     # TODO: Use httpx async client
     try:
-        url = os.getenv("AIND_AIRFLOW_SERVICE_JOBS_URL").strip("/")
+        url = os.getenv("AIND_AIRFLOW_SERVICE_JOBS_URL", "").strip("/")
         get_one_job = request.query_params.get("dag_run_id") is not None
         if get_one_job:
             dag_run_id = request.query_params["dag_run_id"]
-            # params_dict is only for returning to client
-            params_dict = {"dag_run_id": dag_run_id}
-            response_jobs = requests.get(
-                url=f"{url}/{dag_run_id}",
-                auth=(
-                    os.getenv("AIND_AIRFLOW_SERVICE_USER"),
-                    os.getenv("AIND_AIRFLOW_SERVICE_PASSWORD"),
-                ),
-            )
         else:
             params = AirflowDagRunsRequestParameters.from_query_params(
                 request.query_params
             )
             params_dict = json.loads(params.model_dump_json())
-            response_jobs = requests.get(
-                url=url,
-                auth=(
-                    os.getenv("AIND_AIRFLOW_SERVICE_USER"),
-                    os.getenv("AIND_AIRFLOW_SERVICE_PASSWORD"),
-                ),
-                params=params_dict,
-            )
+        # Send request to Airflow to ListDagRuns or GetDagRun
+        response_jobs = requests.get(
+            url=f"{url}/{dag_run_id}" if get_one_job else url,
+            auth=(
+                os.getenv("AIND_AIRFLOW_SERVICE_USER"),
+                os.getenv("AIND_AIRFLOW_SERVICE_PASSWORD"),
+            ),
+            params=None if get_one_job else params_dict,
+        )
         status_code = response_jobs.status_code
         if response_jobs.status_code == 200:
             if get_one_job:
@@ -435,7 +427,9 @@ async def get_job_status_list(request: Request):
             ]
             message = "Retrieved job status list from airflow"
             data = {
-                "params": params_dict,
+                "params": (
+                    {"dag_run_id": dag_run_id} if get_one_job else params_dict
+                ),
                 "total_entries": dag_runs.total_entries,
                 "job_status_list": [
                     json.loads(j.model_dump_json()) for j in job_status_list
@@ -443,7 +437,12 @@ async def get_job_status_list(request: Request):
             }
         else:
             message = "Error retrieving job status list from airflow"
-            data = {"params": params_dict, "errors": [response_jobs.json()]}
+            data = {
+                "params": (
+                    {"dag_run_id": dag_run_id} if get_one_job else params_dict
+                ),
+                "errors": [response_jobs.json()],
+            }
     except ValidationError as e:
         logging.error(e)
         status_code = 406

From 850e00cc5921208fb9e78d0ed7d99fdebda666be Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@alleninstitute.org>
Date: Wed, 21 Aug 2024 12:36:40 -0700
Subject: [PATCH 14/14] fix: datetime.fromisoformat for py<3.11

---
 src/aind_data_transfer_service/models.py | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/aind_data_transfer_service/models.py b/src/aind_data_transfer_service/models.py
index 88bca6e..36d4a2d 100644
--- a/src/aind_data_transfer_service/models.py
+++ b/src/aind_data_transfer_service/models.py
@@ -49,7 +49,9 @@ class AirflowDagRunsRequestParameters(BaseModel):
     def validate_min_execution_date(cls, execution_date_gte: str):
         """Validate the earliest submit date filter is within 2 weeks"""
         min_execution_date = datetime.now(timezone.utc) - timedelta(weeks=2)
-        if datetime.fromisoformat(execution_date_gte) < min_execution_date:
+        # datetime.fromisoformat does not support Z in python < 3.11
+        date_to_check = execution_date_gte.replace("Z", "+00:00")
+        if datetime.fromisoformat(date_to_check) < min_execution_date:
             raise ValueError(
                 "execution_date_gte must be within the last 2 weeks"
             )