[Dashboard] Add a simple status filter. (#4253)

skypilot-org · Nov 4, 2024 · 65efcd0 · 65efcd0
1 parent f1cf2e2
commit 65efcd0
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 5 deletions.
diff --git a/sky/jobs/dashboard/dashboard.py b/sky/jobs/dashboard/dashboard.py
@@ -74,11 +74,14 @@ def home():
     # Remove filler rows ([''], ..., ['-']).
     rows = [row for row in rows if ''.join(map(str, row)) != '']
 
+    # Get all unique status values.
+    status_values = sorted(list(set(row[-5] for row in rows)))
     rendered_html = flask.render_template(
         'index.html',
         columns=columns,
         rows=rows,
         last_updated_timestamp=timestamp,
+        status_values=status_values,
     )
     return rendered_html
 

diff --git a/sky/jobs/dashboard/templates/index.html b/sky/jobs/dashboard/templates/index.html
@@ -44,6 +44,22 @@
         .clickable {
            cursor: pointer; /* This makes the cursor a pointer when hovering over the element */
         }
+
+        .filter-controls {
+            display: flex;
+            gap: 10px;
+            align-items: center;  /* This ensures vertical alignment */
+            margin-top: 1rem;
+            position: relative;
+            z-index: 2;
+        }
+
+        /* Customize the select focus/hover states */
+        .form-select:focus {
+            border-color: #dee2e6;
+            box-shadow: 0 0 0 0.1rem rgba(0,0,0,0.1);
+        }
+
     </style>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
     <script
@@ -54,12 +70,21 @@
 <body>
     <div class="container">
         <header>
-            <h1>Managed jobs</h1>
+            <h1>SkyPilot managed jobs</h1>
             <p class="text-muted mt-4" id="last-updated"></p>
             <div class="form-check form-switch">
                 <input class="form-check-input" type="checkbox" id="refresh-toggle" checked>
                 <label class="form-check-label" for="refresh-toggle">Auto-refresh (every 30s)</label>
             </div>
+            <div class="filter-controls">
+                <span class="fw-medium fs-6">Filter by status:</span>
+                <select class="form-select" id="status-filter" style="width: auto;">
+                    <option value="">All statuses</option>
+                    {% for status in status_values %}
+                    <option value="{{ status }}">{{ status }}</option>
+                    {% endfor %}
+                </select>
+            </div>
         </header>
 
         <table class="table table-hover table-hover-selected fixed-header-table" id="jobs-table">
@@ -204,17 +229,25 @@ <h1>Managed jobs</h1>
     </script>
     <script>
         function filterStatus(status) {
-            var rows = document.querySelectorAll("#spot-jobs-table tbody tr");
-            rows.forEach(function (row) {
-                var statusCell = row.querySelector("td:nth-child(9)");
+            var rows = document.querySelectorAll("#jobs-table tbody tr");
+            rows.forEach(function(row) {
+                var statusCell = row.querySelector("td:nth-child(10)"); // Status is in the 10th column
+                var statusText = statusCell.textContent.trim().split(' ')[0]; // Get first word of status
 
-                if (status === '' || statusCell.textContent === status) {
+                if (status === '' || statusText === status) {
                     row.style.display = "";
                 } else {
                     row.style.display = "none";
                 }
             });
         }
+
+        // Add event listener for the status filter
+        document.addEventListener("DOMContentLoaded", function() {
+            document.getElementById("status-filter").addEventListener("change", function() {
+                filterStatus(this.value);
+            });
+        });
     </script>
 
 </body>