added Sortable headers for Pipeline Table.

fixed import order

fixed import order

fixed import order

fixed import order

Author: end-9214

dispatcher/backend/src/common/schemas/fields.py

@@ -75,3 +75,10 @@ def validate_multiple_of_100(value):
 offliner_field = String(required=False, validate=validate_offliner)
 email_field = fields.Email(required=False, validate=validate_not_empty)
 username_field = String(required=True, validate=validate_not_empty)
+
+
+def validate_sort_order(value):
+    """Validate that sort order is either 'asc' or 'desc'"""
+    if value not in ["asc", "desc"]:
+        raise ValidationError("Sort order must be either 'asc' or 'desc'")
+    return True

dispatcher/backend/src/common/schemas/parameters.py

@@ -22,6 +22,7 @@
     validate_priority,
     validate_role,
     validate_schedule_name,
+    validate_sort_order,
     validate_status,
     validate_warehouse_path,
     validate_worker_name,
@@ -56,6 +57,9 @@ class RequestedTaskSchema(Schema):
     priority = priority_field
     schedule_name = fields.List(schedule_name_field, required=False)
 
+    sort_by = fields.String(required=False)
+    sort_order = fields.String(required=False, validate=validate_sort_order)
+
     matching_cpu = fields.Integer(required=False, validate=validate_cpu)
     matching_memory = fields.Integer(required=False, validate=validate_memory)
     matching_disk = fields.Integer(required=False, validate=validate_disk)
@@ -123,6 +127,8 @@ class TasksSchema(Schema):
     limit = limit_field_20_200
     status = fields.List(String(validate=validate_status), required=False)
     schedule_name = schedule_name_field
+    sort_by = fields.String(required=False)
+    sort_order = fields.String(required=False, validate=validate_sort_order)
 
 
 # tasks POST

dispatcher/backend/src/routes/requested_tasks/requested_task.py

@@ -30,7 +30,7 @@
 from routes import auth_info_if_supplied, authenticate, require_perm, url_uuid
 from routes.base import BaseRoute
 from routes.errors import NotFound
-from routes.utils import remove_secrets_from_response
+from routes.utils import get_sort_field_and_apply_order, remove_secrets_from_response
 from utils.scheduling import find_requested_task_for, request_a_schedule
 from utils.token import AccessToken
 
@@ -73,6 +73,9 @@ def list_of_requested_tasks(session: so.Session, token: AccessToken.Payload = No
     skip, limit = request_args["skip"], request_args["limit"]
     schedule_names = request_args["schedule_name"]
     priority = request_args.get("priority")
+    # Get sorting parameters
+    sort_by = request_args.get("sort_by", "priority")
+    sort_order = request_args.get("sort_order", "desc")
 
     # get requested tasks from database
     stmt = (
@@ -93,14 +96,21 @@ def list_of_requested_tasks(session: so.Session, token: AccessToken.Payload = No
         )
         .join(dbm.Worker, dbm.RequestedTask.worker, isouter=True)
         .join(dbm.Schedule, dbm.RequestedTask.schedule, isouter=True)
-        .order_by(dbm.RequestedTask.priority.desc())
-        .order_by(
+    )
+    join_models = {"Schedule": dbm.Schedule, "Worker": dbm.Worker}
+    default_field = dbm.RequestedTask.priority
+    stmt = get_sort_field_and_apply_order(
+        model=dbm.RequestedTask,
+        sort_by=sort_by,
+        sort_order=sort_order,
+        stmt=stmt,
+        join_models=join_models,
+        fallback_field=default_field,
+    )
+    if sort_by == "priority" or not sort_by:
+        stmt = stmt.order_by(
             dbm.RequestedTask.timestamp["reserved"]["$date"].astext.cast(sa.BigInteger)
         )
-        .order_by(
-            dbm.RequestedTask.timestamp["requested"]["$date"].astext.cast(sa.BigInteger)
-        )
-    )
 
     if schedule_names:
         stmt = stmt.filter(dbm.Schedule.name.in_(schedule_names))

dispatcher/backend/src/routes/tasks/task.py

@@ -23,7 +23,7 @@
 from routes import auth_info_if_supplied, authenticate, require_perm, url_uuid
 from routes.base import BaseRoute
 from routes.errors import BadRequest
-from routes.utils import remove_secrets_from_response
+from routes.utils import get_sort_field_and_apply_order, remove_secrets_from_response
 from utils.check import raise_if, raise_if_none
 from utils.token import AccessToken
 
@@ -47,6 +47,9 @@ def get(self, session: so.Session):
         skip, limit = request_args["skip"], request_args["limit"]
         statuses = request_args.get("status")
         schedule_name = request_args.get("schedule_name")
+        # Get sorting parameters
+        sort_by = request_args.get("sort_by")
+        sort_order = request_args.get("sort_order", "desc")
 
         stmt = (
             sa.select(
@@ -65,7 +68,16 @@ def get(self, session: so.Session):
             )
             .join(dbm.Worker, dbm.Task.worker, isouter=True)
             .join(dbm.Schedule, dbm.Task.schedule, isouter=True)
-            .order_by(dbm.Task.updated_at.desc())
+        )
+        join_models = {"Schedule": dbm.Schedule, "Worker": dbm.Worker}
+        default_field = dbm.Task.updated_at
+        stmt = get_sort_field_and_apply_order(
+            model=dbm.Task,
+            sort_by=sort_by,
+            sort_order=sort_order,
+            stmt=stmt,
+            join_models=join_models,
+            fallback_field=default_field,
         )
 
         # get tasks from database

dispatcher/backend/src/routes/utils.py

@@ -2,8 +2,10 @@
 from typing import Any, Dict, List
 from urllib.parse import parse_qs, urlencode, urlsplit, urlunsplit
 
+import sqlalchemy as sa
 from common.constants import SECRET_REPLACEMENT
 from common.schemas.models import ScheduleConfigSchema
+
 from utils.offliners import build_str_command
 
 logger = logging.getLogger(__name__)
@@ -135,3 +137,59 @@ def remove_url_secrets(response: dict):
                     )
                 )
                 response[key] = response[key].replace(url, secured_url)
+
+
+def get_sort_field_and_apply_order(
+    model, sort_by, sort_order, stmt, join_models=None, fallback_field=None
+):
+    """
+    Determines the sort field based on the model and sort_by parameter,
+    then applies the sort order to the statement.
+    """
+    join_models = join_models or {}
+
+    def apply_default_sort():
+        if fallback_field:
+            return stmt.order_by(
+                fallback_field.desc() if sort_order == "desc" else fallback_field.asc()
+            )
+        return stmt
+
+    if not sort_by:
+        return apply_default_sort()
+    try:
+        if "." in sort_by:
+            field_parts = sort_by.split(".")
+            parent, child = field_parts[0], field_parts[1]
+            if parent == "timestamp":
+                sort_field = model.timestamp[child]["$date"].astext.cast(sa.BigInteger)
+            else:
+                logger.warning(f"Unsupported field with dot notation: {sort_by}")
+                return apply_default_sort()
+        elif sort_by in ("worker", "worker_name"):
+            if "Worker" in join_models:
+                sort_field = join_models["Worker"].name
+            else:
+                logger.warning(
+                    f"Cannot sort by {sort_by}: Worker relationship not found"
+                )
+                return apply_default_sort()
+        elif sort_by == "schedule_name":
+            if "Schedule" in join_models:
+                sort_field = join_models["Schedule"].name
+            else:
+                logger.warning(
+                    "Cannot sort by schedule_name: Schedule relationship not found"
+                )
+                return apply_default_sort()
+        elif hasattr(model, sort_by):
+            sort_field = getattr(model, sort_by)
+        else:
+            logger.warning(f"Field {sort_by} not recognized")
+            return apply_default_sort()
+        return stmt.order_by(
+            sort_field.desc() if sort_order == "desc" else sort_field.asc()
+        )
+    except Exception as e:
+        logger.error(f"Error applying sorting: {e}")
+        return apply_default_sort()

dispatcher/frontend-ui/src/components/PipelineTable.vue

@@ -13,22 +13,84 @@
       </caption>
       <thead v-if="selectedTable == 'todo'">
         <tr>
-          <th>Schedule</th>
-          <th>Requested</th>
-          <th>By</th>
+          <th @click="sortBy('schedule_name')" class="sortable">
+            Schedule
+            <span v-if="sortColumn === 'schedule_name'" class="sort-icon">{{ sortOrder === 'asc' ? '▲' : '▼' }}</span>
+          </th>
+          <th @click="sortBy('timestamp.requested')" class="sortable">
+            Requested
+            <span v-if="sortColumn === 'timestamp.requested'" class="sort-icon">{{ sortOrder === 'asc' ? '▲' : '▼' }}</span>
+          </th>
+          <th @click="sortBy('requested_by')" class="sortable">
+            By
+            <span v-if="sortColumn === 'requested_by'" class="sort-icon">{{ sortOrder === 'asc' ? '▲' : '▼' }}</span>
+          </th>
           <th>Resources</th>
-          <th>Worker</th>
+          <th @click="sortBy('worker')" class="sortable">
+            Worker
+            <span v-if="sortColumn === 'worker'" class="sort-icon">{{ sortOrder === 'asc' ? '▲' : '▼' }}</span>
+          </th>
           <th v-show="canUnRequestTasks">Remove</th>
         </tr>
       </thead>
       <thead v-if="selectedTable == 'doing'">
-        <tr><th>Schedule</th><th>Started</th><th>Worker</th></tr>
+        <tr>
+          <th @click="sortBy('schedule_name')" class="sortable">
+            Schedule
+            <span v-if="sortColumn === 'schedule_name'" class="sort-icon">{{ sortOrder === 'asc' ? '▲' : '▼' }}</span>
+          </th>
+          <th @click="sortBy('timestamp.reserved')" class="sortable">
+            Started
+            <span v-if="sortColumn === 'timestamp.reserved'" class="sort-icon">{{ sortOrder === 'asc' ? '▲' : '▼' }}</span>
+          </th>
+          <th @click="sortBy('worker')" class="sortable">
+            Worker
+            <span v-if="sortColumn === 'worker'" class="sort-icon">{{ sortOrder === 'asc' ? '▲' : '▼' }}</span>
+          </th>
+        </tr>
       </thead>
       <thead v-if="selectedTable == 'done'">
-        <tr><th>Schedule</th><th>Completed</th><th>Worker</th><th>Duration</th></tr>
+        <tr>
+          <th @click="sortBy('schedule_name')" class="sortable">
+            Schedule
+            <span v-if="sortColumn === 'schedule_name'" class="sort-icon">{{ sortOrder === 'asc' ? '▲' : '▼' }}</span>
+          </th>
+          <th @click="sortBy('updated_at')" class="sortable">
+            Completed
+            <span v-if="sortColumn === 'updated_at'" class="sort-icon">{{ sortOrder === 'asc' ? '▲' : '▼' }}</span>
+          </th>
+          <th @click="sortBy('worker')" class="sortable">
+            Worker
+            <span v-if="sortColumn === 'worker'" class="sort-icon">{{ sortOrder === 'asc' ? '▲' : '▼' }}</span>
+          </th>
+          <th>
+            Duration
+          </th>
+        </tr>
       </thead>
       <thead v-if="selectedTable == 'failed'">
-        <tr><th>Schedule</th><th>Stopped</th><th>Worker</th><th>Duration</th><th>Status</th><th>Last Run</th></tr>
+        <tr>
+          <th @click="sortBy('schedule_name')" class="sortable">
+            Schedule
+            <span v-if="sortColumn === 'schedule_name'" class="sort-icon">{{ sortOrder === 'asc' ? '▲' : '▼' }}</span>
+          </th>
+          <th @click="sortBy('updated_at')" class="sortable">
+            Stopped
+            <span v-if="sortColumn === 'updated_at'" class="sort-icon">{{ sortOrder === 'asc' ? '▲' : '▼' }}</span>
+          </th>
+          <th @click="sortBy('worker')" class="sortable">
+            Worker
+            <span v-if="sortColumn === 'worker'" class="sort-icon">{{ sortOrder === 'asc' ? '▲' : '▼' }}</span>
+          </th>
+          <th>
+            Duration
+          </th>
+          <th @click="sortBy('status')" class="sortable">
+            Status
+            <span v-if="sortColumn === 'status'" class="sort-icon">{{ sortOrder === 'asc' ? '▲' : '▼' }}</span>
+          </th>
+          <th>Last Run</th>
+        </tr>
       </thead>
       <tbody>
         <tr v-for="task in tasks" :key="task._id">
@@ -97,6 +159,8 @@
         loading: false,
         schedules_last_runs: {}, // last runs for all schedule_names of tasks
         last_runs_loaded: false,  // used to trigger render() on last_run cell
+        sortColumn: null,
+        sortOrder: 'desc',
       };
     },
     computed: {
@@ -128,6 +192,12 @@
         let parent = this;
         parent.toggleLoader("fetching tasks…");
         parent.loading = true;
+        if (this.sortColumn) {
+          params.sort_by = this.sortColumn;
+          params.sort_order = this.sortOrder;
+          if (params.sort) delete params.sort;
+          if (params.order) delete params.order;
+        }
         this.queryAPI('get', url, {params})
           .then(function (response) {
               parent.resetData();
@@ -207,6 +277,15 @@
         parent.last_runs_loaded = true;
         parent.toggleLoader(false);
       },
+      sortBy(column) {
+        if (this.sortColumn === column) {
+          this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
+        } else {
+          this.sortColumn = column;
+          this.sortOrder = 'desc';
+        }
+        this.loadData();
+      },
     },
     mounted() {
       this.loadData();
@@ -222,3 +301,17 @@
     }
   };
 </script>
+<style>
+.sortable {
+  cursor: pointer;
+  position: relative;
+  user-select: none;
+}
+.sortable:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.sort-icon {
+  margin-left: 5px;
+  font-size: 0.8em;
+}
+</style>