Skip to content

Commit

Permalink
make time change during execution
Browse files Browse the repository at this point in the history
  • Loading branch information
@ZihengSun
ZihengSun committed Jan 15, 2024
1 parent 42c05be commit d8c397c
Show file tree
Hide file tree
Showing 5 changed files with 149 additions and 31 deletions.
158 changes: 134 additions & 24 deletions src/main/resources/static/js/gw.history.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,59 @@
/**
*
* author: Z.S.
* date: Mar 12 2021
*
*/

GW.history = {

history_table_interval_id: null,

active_process_history_list: [],

startActiveTimer: function(){

GW.history.history_table_interval_id = setInterval(function() {

if(GW.history.active_process_history_list.length>0){

GW.history.active_process_history_list.forEach(history_row => {

console.log()
$("#timerBadge_"+history_row.history_id).html(
GW.history.calculate_duration(history_row.history_begin_time,
history_row.history_end_time,
history_row.indicator)
)

})

}else{

GW.history.stopAllTimers()

}

}, 1000);

},

stopAllTimers: function(){

if(GW.history.history_table_interval_id != null){

// GW.history.interval_list.forEach(intervalId => clearInterval(intervalId));

// GW.history.interval_list = []

clearInterval(GW.history.history_table_interval_id)

GW.history.history_table_interval_id = null

}

},

stopOneTimer: function(history_id){

GW.history.active_process_history_list = GW.history.active_process_history_list.filter(item => item.history_id !== history_id);

},

deleteAllJupyter: function(hostid, callback){

if(confirm("WARNING: Are you sure to remove all the history? This is permanent and cannot be recovered.")){
Expand Down Expand Up @@ -100,6 +147,54 @@ GW.history = {

},

calculate_duration: function(start_time, end_time, process_indicator){

var startTime = new Date(start_time).getTime();
var endTime = new Date(end_time).getTime();
var currentTime = new Date().getTime();

if(process_indicator != "Running"){
currentTime = endTime;
}

var elapsedTime = Math.floor((currentTime - startTime) / 1000);

var days = Math.floor(elapsedTime / (24 * 3600));
var hours = Math.floor((elapsedTime % (24 * 3600)) / 3600);
var minutes = Math.floor((elapsedTime % 3600) / 60);
var seconds = elapsedTime % 60;

// Format the time based on non-zero values
var formattedTime = '';

if (days > 0) {
formattedTime += days + 'd';
}

if (hours > 0) {
formattedTime += hours + 'h';
}

if (minutes > 0) {
formattedTime += minutes + 'm';
}

if (seconds > 0) {
formattedTime += seconds + 's';
}else if(formattedTime == ""){
formattedTime += '0s';
}

return formattedTime

},

padZero: function (number) {
return number < 10 ? '0' + number : number;
},



/**
* Generates an HTML table with process execution history data.
*
Expand All @@ -108,39 +203,54 @@ GW.history = {
*/
getProcessHistoryTable: function(msg){

var content = "<table class=\"table table-color\" id=\"process_history_table\"> "+
" <thead> "+
" <tr> "+
" <th scope=\"col\">Execution Id</th> "+
" <th scope=\"col\">Begin Time</th> "+
" <th scope=\"col\">End Time</th> "+
" <th scope=\"col\">Notes (Click to Edit)</th> "+
" <th scope=\"col\">Status</th> "+
" <th scope=\"col\">Action</th> "+
" </tr> "+
" </thead> "+
" <tbody> ";
var content = `<table class=\"table table-color\" id=\"process_history_table\">
<thead>
<tr>
<th scope=\"col\">Execution Id</th>
<th scope=\"col\">Begin Time</th>
<th scope=\"col\">Duration</th>
<th scope=\"col\">Notes (Click to Edit)</th>
<th scope=\"col\">Status</th>
<th scope=\"col\">Action</th>
</tr>
</thead>
<tbody> `;

for(var i=0;i<msg.length;i++){

var status_col = this.getProcessStatusCol(msg[i].history_id, msg[i].indicator);

content += " <tr> "+
" <td>"+msg[i].history_id+"</td> "+
" <td>"+GW.general.toDateString(msg[i].history_begin_time)+"</td> "+
" <td>"+GW.general.toDateString(msg[i].history_end_time)+"</td> "+
" <td>"+msg[i].history_notes+"</td>"+
" <td>"+GW.general.toDateString(msg[i].history_begin_time)+"</td> ";

// create duration column and make it changing if the status is active
//content += " <td>"+GW.general.toDateString(msg[i].history_end_time)+"</td> ";
content += `<td><span class="badge badge-primary" id="timerBadge_`+msg[i].history_id+`">`+
GW.history.calculate_duration(msg[i].history_begin_time, msg[i].history_end_time, msg[i].indicator)+
`</span></td>`
if(msg[i].indicator == "Running"){
GW.history.active_process_history_list.push(msg[i])
}

content += " <td>"+msg[i].history_notes+"</td>"+
status_col;


if(!GW.process.sidepanel.isPresent()){
content += " <td><a href=\"javascript: GW.process.showHistoryDetails('"+msg[i].history_id+"')\">Details</a> &nbsp;";
content += " <td><a href=\"javascript: GW.process.showHistoryDetails('"+
msg[i].history_id+"')\">Details</a> &nbsp;";
}else{
content += " <td><a href=\"javascript: GW.process.sidepanel.showHistoryDetails('"+msg[i].history_id+"')\">Details</a> &nbsp;";
content += " <td><a href=\"javascript: GW.process.sidepanel.showHistoryDetails('"+
msg[i].history_id+"')\">Details</a> &nbsp;";
}

// code to display the view changes option if in case 'i' > 0
if(i!=msg.length-1) content += " <a href=\"javascript: GW.process.showHistoryDifference('"+msg[i].history_id+"','"+ msg[i+1].history_id+"')\">View Changes</a> &nbsp;";
if(i!=msg.length-1)
content += " <a href=\"javascript: GW.process.showHistoryDifference('"+
msg[i].history_id+"','"+
msg[i+1].history_id+
"')\">View Changes</a> &nbsp;";

if(msg[i].indicator == "Running"){
content += " <a href=\"javascript: void(0)\" id=\"stopbtn_"+msg[i].history_id+"\" onclick=\"GW.process.stop('"+msg[i].history_id+"')\">Stop</a>";
Expand Down
10 changes: 7 additions & 3 deletions src/main/resources/static/js/gw.process.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -911,6 +911,8 @@ GW.process = {
// <span id=\"status_"+msg[i].id+"\" class=\"label label-warning\">Pending</span>

$("#status_" + history_id).html("<span class=\"label label-default\">Stopped</span>");

GW.history.stopOneTimer(history_id)

}else{

Expand Down Expand Up @@ -1418,7 +1420,7 @@ GW.process = {
<button class="btn pull-right" onclick="GW.process.bottomDock()" ><i class="fas fa-window-maximize"></i></button>
<button class="btn pull-right" onclick="GW.process.leftDock()" ><i class="fas fa-window-maximize fa-rotate-270"></i></i></button>
</div>
<div id="main-process-info-code" class="tabcontent-process generalshadow" style="height:calc(100% - 180px);left:0; margin:0; padding: 0; ">
<div id="main-process-info-code" class="tabcontent-process generalshadow" style="height:calc(100% - 150px);left:0; margin:0; padding: 0; ">
<div class="code__container" style="font-size: 12px; margin:0; height:100%;" id="process-code-history-section">
<div id="process_code_window" class="container__left" style="height:100%; padding:0; scrollbar-color: rgb(28, 28, 28);" >
<div class="col col-md-6" id="code-embed" style="width:100%; margin-top:5px; padding: 0px; margin: 0px; height: calc(100%-50px);" ></div>
Expand All @@ -1436,7 +1438,7 @@ GW.process = {
</div>
</div>`;

content += `<div id="main-process-info-history" class="tabcontent-process generalshadow" style="height:calc(100% - 180px); overflow-y: scroll; left:0; margin:0; padding: 0; display:none;">
content += `<div id="main-process-info-history" class="tabcontent-process generalshadow" style="height:calc(100% - 150px); overflow-y: scroll; left:0; margin:0; padding: 0; display:none;">
<div class="row" id="process-history-container" style="padding:0; color:white; margin:0; background-color:rgb(28, 28, 28);" ></div>
<div id="history-tab-loader-main-detail" style="display: flex; flex: 1; height: 100px; width: 100px; position: absolute; top: -100px; bottom: 0; left: 0; right: 0; margin: auto; flex-direction: column;">
<img src="../gif/loading-spinner-black.gif" style="height: 6rem;" alt="loading..." />
Expand Down Expand Up @@ -1498,7 +1500,9 @@ GW.process = {

openCity: function(evt, name){

GW.process.switchTab(evt.currentTarget, name);
GW.process.switchTab(evt.currentTarget, name)

GW.history.stopAllTimers()

},

Expand Down
4 changes: 4 additions & 0 deletions src/main/resources/static/js/gw.process.util.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -368,9 +368,13 @@ GW.process.util = {
}

msg = GW.general.parseResponse(msg);

GW.history.stopAllTimers();

$(process_history_container_id).html(GW.history.getProcessHistoryTable(msg));

GW.history.startActiveTimer();

GW.history.applyBootstrapTable(process_history_table_id);

GW.chart.renderProcessHistoryChart(msg);
Expand Down
6 changes: 3 additions & 3 deletions src/main/resources/static/js/gw.workflow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,12 +173,12 @@ GW.workflow = {

workFlowID+`', '` + workFlowName+`')">History</button>
</div>
<div id="main-workflow-info-code" class="tabcontent-workflow generalshadow" style="height:calc(100% - 205px); overflow-y: scroll; left:0; margin:0; padding: 5px; ">
<div id="main-workflow-info-code" class="tabcontent-workflow generalshadow" style="height:calc(100% - 185px); overflow-y: scroll; left:0; margin:0; padding: 5px; ">
<div class="row" style="height:100%;margin:0;">`+
info_body+
` </div>
</div>
<div id="main-workflow-info-history" class="tabcontent-workflow generalshadow" style="height:calc(100% - 205px); overflow-y: scroll; left:0; margin:0; padding: 5px; display:none;">
<div id="main-workflow-info-history" class="tabcontent-workflow generalshadow" style="height:calc(100% - 185px); overflow-y: scroll; left:0; margin:0; padding: 5px; display:none;">
<div class="row" id="workflow-history-container" style="padding:0px;margin:0px; " >
</div>
Expand Down Expand Up @@ -728,7 +728,7 @@ GW.workflow = {
$("#current_workflow_na").html(name);

},

/**
* Start to collect information to run the workflow
*/
Expand Down
2 changes: 1 addition & 1 deletion src/main/resources/templates/geoweaver.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -658,7 +658,7 @@ <h3>Processing your import</h3>

<div class="cd-panel cd-panel--from-right js-cd-panel-main" id="prompt-panel">
<header class="cd-panel__header">
<h3>Process Details</h3>
<h3 style="margin:5px;">Process Details</h3>

<div onclick="GW.process.sidepanel.close()" class="prompt-panel-close-btn">
<img src="../img/close-sidenav.png" alt="close" width="20" height="20" />
Expand Down

0 comments on commit d8c397c

Please sign in to comment.