Skip to content

Commit

Permalink
UI - Update history page for clarity and interactability (#157)
Browse files Browse the repository at this point in the history 
* Display more detail on status on history page

* Add "mark as resolved" button to history page

* Update processes test

* Remove unnecessary API call
  • Loading branch information
@wcgunter
wcgunter authored Jul 6, 2023
1 parent 93192d8 commit 48b7b7f
Show file tree
Hide file tree
Showing 3 changed files with 161 additions and 60 deletions.
16 changes: 14 additions & 2 deletions cws-service/src/main/java/jpl/cws/controller/RestService.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1120,7 +1120,20 @@ public GsonUTCDateAdapter() {
}
return size;
}


@RequestMapping(value="/history/getStatus/{procInstId}", method = GET)
public @ResponseBody String getStatusByProcInstId(
@PathVariable String procInstId) {
List<CwsProcessInstance> instances = null;
instances = cwsConsoleService.getFilteredProcessInstancesCamunda(
null, procInstId, null, null, null, null, "DESC", 1);
if (instances.size() == 0) {
return null;
} else {
return instances.get(0).getStatus();
}
}


/**
* REST method used to get Processes table JSON
Expand Down Expand Up @@ -1306,7 +1319,6 @@ public GsonUTCDateAdapter() {
return ResponseEntity.ok("{ \"status\" : \"success\", \"message\" : \"Updated " + numRowsUpdated + " rows.\"}");
}


/**
*
*
Expand Down
6 changes: 3 additions & 3 deletions cws-test/src/test/java/jpl/cws/test/integration/ui/ProcessesTestIT.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,15 +64,15 @@ public void runStatusCompleteTest() throws IOException {
log.info("------ START ProcessesTestIT:runStatusCompleteTest ------");

goToPage("processes");

log.info("Getting info from table...");
wait.until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.tagName("table")));
WebElement myTable = driver.findElement(By.tagName("table"));
wait.until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.tagName("tr")));
List<WebElement> myRows = myTable.findElements(By.tagName("tr"));

sleep(8000);
log.info("Locating Test Processes Page from table rows and verifying that it completed.");
waitForElementXPath("//div[@id=\'processes-table_filter\']/label/input");

Expand All @@ -92,7 +92,7 @@ public void runStatusCompleteTest() throws IOException {
scriptPass = false;
}
log.info("------ END ProcessesTestIT:runStatusCompleteTest:runStatusCompleteTest ------");
}
}
catch (Throwable e) {
System.out.println(e.toString());
scriptPass = false;
Expand Down
199 changes: 144 additions & 55 deletions install/cws-ui/history.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
<!-- Custom styles for this template -->
<link href="/${base}/css/dashboard.css" rel="stylesheet">
<style>
.dataTables_wrapper .filter .dataTables_filter{float:right; margin-top: 15px; display: inline; margin-right: 15px;}
.dataTables_wrapper .filter .dataTables_filter{float:right; padding-top: 15px; display: inline; margin-right: 15px;}
.dataTables_wrapper .download-button {padding-top: 15px;}
.dataTables_wrapper .button {float:left; display: inline; margin-top: 15px; margin-right: 15px;}
.dataTables_wrapper {margin-left: 5px; margin-right: -10px;}
</style>
Expand Down Expand Up @@ -224,16 +225,76 @@
$('#procDuration').html(convertMillis(data.duration));
}
var status = data.state;
if (data.state === "COMPLETED") {
status = "Complete";
}
else if (data.state === "ACTIVE") {
status = "Running";
$.ajax({
type: "GET",
url: "/${base}/rest/history/getStatus/" + data.procInstId,
success: function(data) {
var status = data;
switch (data) {
case "pending":
status = "Pending";
$("#procStatus").css("color", "blue");
break;
case "disabled":
status = "<b>Disabled</b>";
$("#procStatus").css("color", "red");
break;
case "failedToSchedule":
status = "<b>Failed to schedule</b>";
$("#procStatus").css("color", "red");
break;
case "claimedByWorker":
status = "Claimed by Worker";
$("#procStatus").css("color", "blue");
break;
case "failedToStart":
status = "<b>Failed to start</b>";
$("#procStatus").css("color", "red");
break;
case "running":
status = "Running";
$("#procStatus").css("color", "blue");
break;
case "complete":
status = "Complete";
$("#procStatus").css("color", "green");
break;
case "resolved":
status = "Resolved";
$("#procStatus").css("color", "green");
break;
case "fail":
status = "<b>Failed</b>";
$("#procStatus").css("color", "red");
break;
case "incident":
status = "<b>Incident</b>";
$("#procStatus").css("color", "red");
break;
default:
status = "<b>Unknown</b>";
$("#procStatus").css("color", "red");
break;
}
$('#procStatus').html(status);
if ($("#procStatus").text() == "Failed") {
$("#resolveButtonDiv").show();
$("#resolveButton").show();
$("#retryIncidentButton").hide();
} else if ($("#procStatus").text() == "Incident") {
$("#resolveButtonDiv").show();
$("#retryIncidentButton").show();
$("#resolveButton").hide();
} else {
$("#resolveButtonDiv").hide();
$("#resolveButton").hide();
$("#retryIncidentButton").hide();
}
},
error: function(e) {
$("procStatus").html("Error fetching status - please try again later.");
}
$('#procStatus').html(status);
});
}
setInputVariableTable(inputVarRows);
Expand Down Expand Up @@ -429,24 +490,62 @@
$("#procInstId").text() + '.json'
);
}
function retryIncident(procInstId) {
var idArr = [procInstId];
$.ajax({
type: "POST",
url: "/${base}/rest/processes/retryIncidentRows",
Accept : "application/json",
contentType: "application/json",
dataType: "json",
data: JSON.stringify(idArr),
})
.done(function(msg) {
console.log(msg);
location.reload();
})
.fail(function(xhr, err) {
console.err(msg);
});
}
function markAsResolved(procInstId) {
var idArr = [procInstId];
$.ajax({
type: "POST",
url: "/${base}/rest/processes/markResolved",
Accept : "application/json",
contentType: "application/json",
dataType: "json",
data: JSON.stringify(idArr),
})
.done(function(msg) {
console.log(msg);
location.reload();
})
.fail(function(xhr, err) {
console.err(xhr.responseTextmsg.message);
});
}
$( document ).ready(function() {
$("#logData").DataTable({
order: [[0, 'asc']],
order: [[0, 'desc']],
paging: false,
dom: "<'row'<'col-sm-2 button'><'col-sm-auto filter'f>>" + "ti",
dom: "<'row'<'col-sm-2 download-button'><'col-sm-10 filter'f>>" + "tip",
});
$(`<div class="dropdown" style="display:inline;">`
+ `<button id="downloadButton" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">&nbsp;Download &nbsp;`
+ `<span class="caret"></span>`
+ `</button>`
+ `<ul id="action-list" class="dropdown-menu" role="menu" aria-labelledby="menu3">`
+ `<li id="action_download_json" class="enabled" role="presentation"><a id="json-bttn" role="menuitem" href="#">Download as JSON</a></li>`
+ `<li id="action_download_csv" class="enabled" role="presentation"><a id="csv-bttn" role="menuitem" href="#">Download as CSV</a></li>`
+ `</ul>`
+ `</div>`).appendTo("div.button");
$('<div class="dropdown" style="display:inline;">'
+ '<button id="downloadButton" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">&nbsp;Download &nbsp;'
+ '<span class="caret"></span>'
+ '</button>'
+ '<ul id="action-list" class="dropdown-menu" role="menu" aria-labelledby="menu3">'
+ '<li id="action_download_json" class="enabled" role="presentation"><a id="json-bttn" role="menuitem" href="#">Download as JSON</a></li>'
+ '<li id="action_download_csv" class="enabled" role="presentation"><a id="csv-bttn" role="menuitem" href="#">Download as CSV</a></li>'
+ '</ul>'
+ '</div>').appendTo(".download-button");
// Get query string values
params = getQueryString();
Expand Down Expand Up @@ -554,26 +653,26 @@

<h2 class="sub-header">History</h2>
<div class="row">
<table align="center" class="table table-bordered " style="width: 95%; font-size:95%">
<tr>
<td style="font-weight:bold;">Process Definition</td><td id="procDefKey">Unknown</td>
</tr>
<tr>
<td style="font-weight:bold;">Process Instance ID</td><td id="procInstId">Unknown</td>
</tr>
<tr>
<td style="font-weight:bold;">Start Time</td><td id="procStartTime">N/A</td>
</tr>
<tr>
<td style="font-weight:bold;">End Time</td><td id="procEndTime">N/A</td>
</tr>
<tr>
<td style="font-weight:bold;">Duration</td><td id="procDuration">N/A</td>
</tr>
<tr>
<td style="font-weight:bold;">Status</td><td id="procStatus">Unknown</td>
</tr>
</table>
<table align="center" class="table table-bordered " style="width: 50%; font-size:95%">
<tr>
<td style="font-weight:bold;">Process Definition</td><td id="procDefKey">Unknown</td>
</tr>
<tr>
<td style="font-weight:bold;">Process Instance ID</td><td id="procInstId">Unknown</td>
</tr>
<tr>
<td style="font-weight:bold;">Start Time</td><td id="procStartTime">N/A</td>
</tr>
<tr>
<td style="font-weight:bold;">End Time</td><td id="procEndTime">N/A</td>
</tr>
<tr>
<td style="font-weight:bold;">Duration</td><td id="procDuration">N/A</td>
</tr>
<tr>
<td style="font-weight:bold;">Status</td><td id="procStatus"></td>
</tr>
</table>
</div>
<div class="row">
<table align="center" class="table table-bordered " style="width: 95%; font-size:95%" id="inputVariableTable">
Expand All @@ -585,20 +684,10 @@
</tbody>
</table>
</div>
<!--
<div class="col-sm-12 main">
<p>Select file type:</p>
<div id="downloadRadios">
<form class="fileType">
<input type="radio" name="fileType" value="json" checked>
<label for="json">JSON</label><br>
<input type="radio" name="fileType" value="csv">
<label for="csv">CSV</label><br>
</form>
</div>
<button class="btn btn-primary" role="button" onclick="downloadLog()">Download Log</button>
</div>
-->
<div id="resolveButtonDiv" class="row" style="text-align: center; display: none;">
<button id="resolveButton" class="btn btn-primary" type="button" onclick="markAsResolved($('#procInstId').text())">Mark as Resolved</button>
<button id="retryIncidentButton" class="btn btn-primary" type="button" onclick="retryIncident($('#procInstId').text())">Retry Incident</button>
</div>
</div>

<div class="row">
Expand Down

0 comments on commit 48b7b7f

Please sign in to comment.