feature: job status displayed

Author: jorisvanzundert

bin/init-data/stemmarest/init_test_data.sh

@@ -57,6 +57,9 @@ else
   echo Created tradition $BESOIN_ID
 fi
 
+echo; echo Adding stemweb_jobid 1 to Notre besoin
+$CURL --request PUT --header 'Content-Type: application/json' --data '{"stemweb_jobid":1}' $STEMMAREST_ENDPOINT/tradition/$BESOIN_ID
+
 echo ...and its stemma
 $CURL --request POST --header 'Content-Type: application/json' --data @data/besoin_stemma.json $STEMMAREST_ENDPOINT/tradition/$BESOIN_ID/stemma
 if [ $? -ne 0 ]; then
@@ -80,6 +83,8 @@ if [ -z $FLOR_ID ]; then
 else
   echo Created tradition $FLOR_ID
 fi
+echo; echo Adding stemweb_jobid 2 to Florilegium
+$CURL --request PUT --header 'Content-Type: application/json' --data '{"stemweb_jobid":2}' $STEMMAREST_ENDPOINT/tradition/$FLOR_ID
 echo Uploading three sections
 for e in w x y; do 
   $CURL --request POST --form name="section '$e'" --form file=@data/florilegium_${e}.csv --form filetype=csv $STEMMAREST_ENDPOINT/tradition/$FLOR_ID/section > /tmp/stemmarest.response
@@ -149,6 +154,8 @@ if [ -z $ASNIP_ID ]; then
 else
   echo Created tradition $ASNIP_ID
 fi
+echo; echo Adding stemweb_jobid 3 to Arabic test snippet
+$CURL --request PUT --header 'Content-Type: application/json' --data '{"stemweb_jobid":3}' $STEMMAREST_ENDPOINT/tradition/$ASNIP_ID
 # No stemma
 
 echo; echo Creating admin-owned tradition 

frontend/www/src/js/modules/common/components/icons.js

@@ -30,6 +30,40 @@ const svg_slide_indicator_active = `<svg
   <circle cx="12" cy="12" r="10"></circle>
 </svg>`;
 
+const job_running_indicator = `<svg
+  style="vertical-align: baseline;"
+  class="indicator-svg"
+  data-active="true"
+  xmlns="http://www.w3.org/2000/svg"
+  width="15"
+  height="12"
+  viewBox="0 -2 24 24"
+  fill="#aae18b"
+  stroke="currentColor"
+  stroke-width="1"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="12" r="10"></circle>
+</svg>`;
+
+const job_error_indicator = `<svg
+  style="vertical-align: baseline;"
+  class="indicator-svg"
+  data-active="true"
+  xmlns="http://www.w3.org/2000/svg"
+  width="15"
+  height="12"
+  viewBox="0 -2 24 24"
+  fill="#dc3545"
+  stroke="currentColor"
+  stroke-width="1"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="12" r="10"></circle>
+</svg>`;
+
 const google_icon = `
 <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g id="feGoogle0" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="feGoogle1" fill="currentColor" fill-rule="nonzero"><path id="feGoogle2" d="M11.99 13.9v-3.72h9.36c.14.63.25 1.22.25 2.05c0 5.71-3.83 9.77-9.6 9.77c-5.52 0-10-4.48-10-10S6.48 2 12 2c2.7 0 4.96.99 6.69 2.61l-2.84 2.76c-.72-.68-1.98-1.48-3.85-1.48c-3.31 0-6.01 2.75-6.01 6.12s2.7 6.12 6.01 6.12c3.83 0 5.24-2.65 5.5-4.22h-5.51v-.01Z"/></g></g></svg>
 `;

frontend/www/src/js/modules/common/service/stemwebService.js

@@ -142,44 +142,22 @@ class StemwebService extends BaseService {
     });
   }
 
-  /**
-   * Lists the results of all jobs that have been run on the server by this
-   * user.
-   *
-   * @returns {Promise<BaseResponse<RunJobResult[]>>}
-   */
-  listRunResults() {
-    return this.fetch(`/result`).then((response) => {
-      if (response.success) {
-        /** @type {{ results: RunJobResult[] }} } */
-        const data = response.data;
-        return data.results;
-      }
-
-      // in case of failure, just return the response with the error
-      return response;
-    });
-  }
-
   /**
    * Gets the result of a job identified by the supplied `jobid` that has been
    * run on the server by this user.
    *
    * This can be used to periodically poll the server for the result of a job.
    *
    * @param jobid {string} The job ID of the job to fetch the result for.
-   * @returns {Promise<BaseResponse<RunJobResult | null>>}
+   * @returns {Promise<BaseResponse>>}
    */
-  getRunResult(jobid) {
-    return this.fetch(`/result`, undefined, { jobid }).then((response) => {
-      if (response.success) {
-        /** @type {{ results: RunJobResult[] }} } */
-        const data = response.data;
-        return data.results.length > 0 ? data.results[0] : null;
-      }
-
-      // in case of failure, just return the response with the error
-      return response;
-    });
+  getRunResult( job_id ) {
+    if( job_id ) {
+      return this.fetch( `/algorithms/jobstatus/${job_id}` ).then((response) => {
+        return response;
+      });
+    } else {
+      return Promise.resolve( { success: true, message:'OK', data: { jobid: job_id, result: "No job id given.", status: undefined } } );
+    }
   }
 }

frontend/www/src/js/modules/dashboard/tradition/editProperties.js

@@ -113,7 +113,6 @@ class EditProperties extends HTMLElement {
   static #handleUpdateTraditionMetadataResponse(resp) {
     if (resp.success) {
       StemmawebAlert.show('Metadata properties updated.', 'success');
-      // @todo: Should the next line be wrapped in a try..catch?
       TRADITION_STORE.updateTradition(resp.data);
       return Promise.resolve({
         success: true,

frontend/www/src/js/modules/dashboard/tradition/stemwebFrontend.js

@@ -189,6 +189,7 @@ class StemwebFrontend {
   handleRunAlgorithmResponse( resp ) {
     if (resp.success) {
       StemmawebAlert.show('Job added.', 'success');
+      console.log( 'handleRunAlgorithmResponse =>', resp.data );
       // // @todo: Should the next line be wrapped in a try..catch?
       // TRADITION_STORE.updateTradition(resp.data);
       return Promise.resolve({

frontend/www/src/js/modules/dashboard/tradition/stemwebJobStatus.js

@@ -1,33 +1,105 @@
 
 class StemwebJobStatus extends HTMLElement {
+
     constructor() {
         super();
-    }
-  
+        // Whenever a new tradition / related stemma is selected, update the table
+        STEMMA_STORE.subscribe(({ parentTradition, selectedStemma }) => {
+            this.renderJobStatus( parentTradition.stemweb_jobid );
+        });
+      }
+      
     connectedCallback() {
-        this.render();
+        // this.render();
+    }
+    
+    renderJobStatus( job_id ) {
+        stemwebService.getRunResult( job_id )
+            .then( this.handleJobStatusResponse )
+            .then( (resp_data) => { this.render( resp_data ) } );
+    }
+
+    handleJobStatusResponse( resp ) {
+        if ( resp.success ) {
+            return new Promise( ( resolve, reject ) => {
+                resolve( resp.data );
+            });
+        } else {
+            StemmawebAlert.show(`Error: ${resp.message}`, 'danger');
+            return new Promise( ( resolve, reject ) => {
+                resolve( undefined );
+            });
+        }
+    }
+
+
+
+    statusTexts = {
+        0: `Done`,
+        1: `${job_running_indicator} Running`
+    }
+
+    mapStatus( status ) {
+        return this.statusTexts[ status ] || `${job_error_indicator} Error`
+    }
+
+    jobStatusLabels = {
+        job_id: 'Job',
+        status: 'Status',
+        result: 'Result'
+    };
+
+    metadataFromJobStatus( resp_data ) {
+        const labels = this.jobStatusLabels;
+        return [
+          {
+            label: labels.job_id,
+            value: resp_data.jobid
+          },
+          {
+            label: labels.status,
+            value: this.mapStatus( resp_data.status )
+          },
+          { label: labels.result,
+            value: resp_data.result
+          }
+        ]
+    }
+
+
+    renderJobStatusItem(item) {
+        return `
+            <tr>
+              <td class="tradition-property-label-cell">${item.label}</td>
+              <td class="tradition-property-value-cell">${item.value}</td>
+            </tr>
+          `;
     }
 
-    render() {
-        const jobStatus = 'Hello World!'
-        this.innerHTML = `
-        <div class="position-sticky pt-3">
-        <h6
-            class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted"
-        >
-            <span>Job status</span>
-            <!--maybe-goes-here-a-button/-->
-        </h6>
-        <div class="table-responsive px-3 py-3">
-            <table class="table table-striped table-sm">
-            <tbody id="job_status">
-            ${jobStatus}
-            </tbody>
-            </table>
-        </div>
-
-        </div>
-        `;
+    render( resp_data ) {
+        if ( resp_data.jobid ) {
+            const statusItems = this.metadataFromJobStatus( resp_data );
+            this.innerHTML = `
+            <div class="position-sticky pt-3">
+            <h6
+                class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted"
+            >
+                <span>Job status</span>
+                <!--maybe-goes-here-a-button/-->
+            </h6>
+            <div class="table-responsive px-3 py-3">
+                <table class="table table-striped table-sm">
+                <tbody id="job_status">
+                ${statusItems.map( this.renderJobStatusItem).join('\n') }
+                </tbody>
+                </table>
+            </div>
+
+            </div>
+            `;
+        } else {
+            this.innerHTML= '';
+        }
     }
   }
 

stemweb_mock/app.py

@@ -1,4 +1,5 @@
 from flask import Flask, request
+import time
 
 app = Flask(__name__)
 
@@ -151,7 +152,7 @@ def run_job(algo):
 
 
 # Allow query of a job ID.
-@app.get('/algorithms/jobstatus/<jobid>')
+@app.get('/algorithms/jobstatus/<jobid>/')
 def query_job(jobid):
     if jobid == '1':
         return {"jobid":1,"status":0,"result":{