From 2f718aac8dedaf4cc6ee760febd6abe2a61cc8a7 Mon Sep 17 00:00:00 2001
From: Igor Gaponenko <gapon@slac.stanford.edu>
Date: Thu, 5 Sep 2024 21:53:34 -0700
Subject: [PATCH] Web Dashboard: improved the ingest contributions display

---
 src/www/qserv/js/IngestContributions.js | 64 +++++++++++++++----------
 1 file changed, 40 insertions(+), 24 deletions(-)

diff --git a/src/www/qserv/js/IngestContributions.js b/src/www/qserv/js/IngestContributions.js
index cdd0194eb..17db15ffc 100644
--- a/src/www/qserv/js/IngestContributions.js
+++ b/src/www/qserv/js/IngestContributions.js
@@ -20,16 +20,12 @@ function(CSSLoader,
             this._data = undefined;
         }
 
-        /// @see FwkApplication.fwk_app_on_show
         fwk_app_on_show() {
             this.fwk_app_on_update();
         }
 
-        /// @see FwkApplication.fwk_app_on_hide
-        fwk_app_on_hide() {
-        }
+        fwk_app_on_hide() {}
 
-        /// @see FwkApplication.fwk_app_on_update
         fwk_app_on_update() {
             if (this.fwk_app_visible) {
                 this._init();
@@ -123,27 +119,28 @@ function(CSSLoader,
           <option value="1">ASYNC</option>
         </select>
       </div>
-      <div class="form-group col-md-1">
+      <div class="form-group col-md-2">
         <label for="contrib-status">Status:</label>
         <select id="contrib-status" class="form-control filter">
-          <option value="" selected></option>
-          <option value="IN_PROGRESS">IN_PROGRESS</option>
+          <option value="">&lt;any&gt;</option>
+          <option value="IN_PROGRESS" selected>IN_PROGRESS</option>
           <option value="CREATE_FAILED">CREATE_FAILED</option>
           <option value="START_FAILED">START_FAILED</option>
           <option value="READ_FAILED">READ_FAILED</option>
           <option value="LOAD_FAILED">LOAD_FAILED</option>
           <option value="CANCELLED">CANCELLED</option>
           <option value="FINISHED">FINISHED</option>
-          <option value="!FINISHED">! FINISHED</option>
+          <option value="!FINISHED">!&nbsp;FINISHED</option>
         </select>
       </div>
       <div class="form-group col-md-2">
-        <label for="contrib-stage">Stage (IN_PROGRESS):</label>
+        <label for="contrib-stage">IN_PROGRESS stage:</label>
         <select id="contrib-stage" class="form-control filter">
-          <option value="" selected></option>
-          <option value="1:QUEUED">1:QUEUED</option>
-          <option value="2:READING_DATA">2:READING_DATA</option>
-          <option value="3:LOADING_MYSQL">3:LOADING_MYSQL</option>
+          <option value="">&lt;any&gt;</option>
+          <option value="QUEUED">QUEUED</option>
+          <option value="!QUEUED" selected>!&nbsp;QUEUED</option>
+          <option value="READING_DATA">READING_DATA</option>
+          <option value="LOADING_MYSQL">LOADING_MYSQL</option>
         </select>
       </div>
       <div class="form-group col-md-1">
@@ -251,16 +248,24 @@ function(CSSLoader,
   </div>
 </div>`;
             let cont = this.fwk_app_container.html(html);
-            cont.find("#update-interval").change(() => {
+            cont.find("#update-interval").on("change", () => {
                 this._load();
             });
-            cont.find(".loader").change(() => {
+            cont.find(".loader").on("change", () => {
                 this._load();
             });
-            cont.find(".filter").change(() => {
+            cont.find(".filter").on("change", (ev) => {
+                if (ev.target.id === "contrib-status") {
+                    if (this._get_status() === "IN_PROGRESS") {
+                        this._disable_stage(false);
+                    } else {
+                      this._disable_stage(true);
+                      this._set_stage("");
+                    }
+                }
                 if (!_.isUndefined(this._data)) this._display(this._data);
             });
-            cont.find(".sorter").change(() => {
+            cont.find(".sorter").on("change", () => {
                 if (!_.isUndefined(this._data)) this._display(this._data);
             });
             cont.find("button#contrib-reset").click(() => {
@@ -330,8 +335,9 @@ function(CSSLoader,
             this._form_control('input',  'contrib-chunk').val('');
             this._form_control('select', 'contrib-overlap').val('');
             this._form_control('select', 'contrib-async').val('');
-            this._form_control('select', 'contrib-status').val('');
-            this._form_control('select', 'contrib-stage').val('');
+            this._set_status('IN_PROGRESS');
+            this._set_stage('!QUEUED');
+            this._disable_stage(false);
         }
         _disable_controls(disable) {
             this.fwk_app_container.find(".form-control").prop('disabled', disable);
@@ -355,8 +361,14 @@ function(CSSLoader,
         _get_chunk() { return this._form_control('input', 'contrib-chunk').val(); }
         _get_overlap() { return this._form_control('select', 'contrib-overlap').val(); }
         _get_async() { return this._form_control('select', 'contrib-async').val(); }
+
         _get_status() { return this._form_control('select', 'contrib-status').val(); }
+        _set_status(val) { this._form_control('select', 'contrib-status').val(val); }
+
         _get_stage() { return this._form_control('select', 'contrib-stage').val(); }
+        _set_stage(val) { this._form_control('select', 'contrib-stage').val(val); }
+        _disable_stage(yes) { this._form_control('select', 'contrib-stage').prop('disabled', yes); }
+
         _get_sort_by_column() { return this._form_control('select', 'contrib-sort-column').val(); }
         _get_sort_order() { return this._form_control('select', 'contrib-sort-order').val(); }
         _update_interval_sec() { return this._form_control('select', 'update-interval').val(); }
@@ -455,9 +467,9 @@ function(CSSLoader,
                                 // Compute the 'stage' attribute of the IN_PROGRESS contribution requests
                                 // based on the timestamps.
                                 if (file.status === 'IN_PROGRESS') {
-                                    if      (!file.start_time) file.stage = '1:QUEUED';
-                                    else if (!file.read_time)  file.stage = '2:READING_DATA';
-                                    else if (!file.load_time)  file.stage = '3:LOADING_MYSQL';
+                                    if      (!file.start_time) file.stage = 'QUEUED';
+                                    else if (!file.read_time)  file.stage = 'READING_DATA';
+                                    else if (!file.load_time)  file.stage = 'LOADING_MYSQL';
                                 } else {
                                     file.stage = '';
                                 }
@@ -552,7 +564,11 @@ function(CSSLoader,
                         if (file.status === 'FINISHED') continue;
                     } else if (file.status !== status) continue;
                 }
-                if (stageIsSet && (file.status === 'IN_PROGRESS') && (file.stage !== stage)) continue;
+                if (stageIsSet && (file.status === 'IN_PROGRESS')) {
+                    if (stage === '!QUEUED') {
+                        if ((file.stage !== 'READING_DATA') && (file.stage !== 'LOADING_MYSQL')) continue;
+                    } else if (file.stage !== stage) continue;
+                }
                 numSelect++;
                 const overlapStr = file.overlap ? 1 : 0;
                 const asyncStr = file.async ? 'ASYNC' : 'SYNC';