Skip to content

Commit

Permalink
feature: job status displayed
Browse files Browse the repository at this point in the history
  • Loading branch information
jorisvanzundert committed Dec 19, 2023
1 parent e24f46a commit fcb8cd8
Show file tree
Hide file tree
Showing 7 changed files with 148 additions and 56 deletions.
7 changes: 7 additions & 0 deletions bin/init-data/stemmarest/init_test_data.sh
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down
34 changes: 34 additions & 0 deletions frontend/www/src/js/modules/common/components/icons.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`;
Expand Down
40 changes: 9 additions & 31 deletions frontend/www/src/js/modules/common/service/stemwebService.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 } } );
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
118 changes: 95 additions & 23 deletions frontend/www/src/js/modules/dashboard/tradition/stemwebJobStatus.js
Original file line number Diff line number Diff line change
@@ -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= '';
}
}
}

Expand Down
3 changes: 2 additions & 1 deletion stemweb_mock/app.py
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
from flask import Flask, request
import time

app = Flask(__name__)

Expand Down Expand Up @@ -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":{
Expand Down

0 comments on commit fcb8cd8

Please sign in to comment.