Skip to content

Commit

Permalink
Update history page to use new custom input fetch
Browse files Browse the repository at this point in the history
  • Loading branch information
wcgunter committed Jul 18, 2023
1 parent c866df7 commit a24228c
Show file tree
Hide file tree
Showing 4 changed files with 83 additions and 72 deletions.
4 changes: 4 additions & 0 deletions cws-service/src/main/java/jpl/cws/scheduler/LogHistory.java
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
package jpl.cws.scheduler;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class LogHistory {

Expand All @@ -13,4 +15,6 @@ public class LogHistory {
public Long duration = 0L;

public List<HistoryDetail> details = new ArrayList<HistoryDetail>();
public Map<String, String> inputVariables = new HashMap<String, String>();
public Map<String, String> outputVariables = new HashMap<String, String>();
}
Original file line number Diff line number Diff line change
Expand Up @@ -573,6 +573,9 @@ public LogHistory getHistoryForProcess(String processInstanceId) {
history.duration = instance.getDurationInMillis();
}

history.inputVariables = getInputVariablesForProcess(processInstanceId);
history.outputVariables = getOutputVariablesForProcess(processInstanceId);

getHistoryIncidentDetails(history.details, processInstanceId);
getHistoryActivityDetails(history.details, processInstanceId);
getHistoryVarDetails(history.details, processInstanceId);
Expand Down
2 changes: 2 additions & 0 deletions cws-ui/src/main/webapp/css/dashboard.css
Original file line number Diff line number Diff line change
Expand Up @@ -327,8 +327,10 @@ div[class*="bar-"]{
transition: all 0.3s ease-in-out;
position: relative;
z-index: 5;
height:inherit;
}

.grow:hover {
transform: scale(2.0);
z-index: 6;
}
146 changes: 74 additions & 72 deletions install/cws-ui/history.ftl
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<script src="/${base}/js/docs.min.js"></script>
<script src="/${base}/js/bootstrap-datepicker.min.js"></script>
<script src="/${base}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/${base}/js/cws.js"></script>
<link href="/${base}/css/bootstrap.min.css" rel="stylesheet">
<link href="/${base}/css/bootstrap-datepicker.min.css" rel="stylesheet">
<link rel="stylesheet" href="/${base}/js/DataTables/datatables.css" />
Expand All @@ -22,6 +23,13 @@
summary {
width: 100px;
}
.historyLimitSize {
max-height: 150px;
}
.thumbnail {
margin-top: 5px !important;
margin-bottom: 0px !important;
}
</style>
<script>
Expand Down Expand Up @@ -217,10 +225,6 @@
if (entry["message"].startsWith("Ended ")) {
date += " ";
}
if(entry["activity"] === data.procInstId) {
inputVarRows.push(entry);
}
const row = "<tr><td>"+ date + "</td>" +
"<td>"+ entry["type"] + "</td>"+
Expand Down Expand Up @@ -311,7 +315,7 @@
});
}
setInputVariableTable(inputVarRows);
setInputVariableTable(data.inputVariables);
return tableRows;
}
Expand Down Expand Up @@ -428,14 +432,14 @@
jsonFile["process_info"] = logInfo;
//go through each row of inputVariableTable and add to jsonFile
var inputVariables = {};
/*var inputVariables = {};
$("#inputVariableTable tr").each(function() {
var key = $(this).find("td").eq(0).text();
var value = $(this).find("td").eq(1).text();
inputVariables[key] = value;
});
delete inputVariables[""];
jsonFile["input_variables"] = inputVariables;
jsonFile["input_variables"] = inputVariables;*/
var logs = {};
Expand Down Expand Up @@ -595,54 +599,49 @@
}); //END OF DOCUMENT.READY
function setInputVariableTable(historyRows) {
if (historyRows.length == 0) {
function setInputVariableTable(data) {
if (jQuery.isEmptyObject(data)) {
$("#inputVariables").html("None");
} else {
//declare new map of <string, string>
var inputVarObj = {};
for (var i = 0; i < historyRows.length; i++) {
var message = historyRows[i].message;
var varType = message.substring(message.indexOf("("), message.indexOf(")")+1);
console.log(varType);
var varName = message.substring(message.indexOf(")")+2);
varName = varName.substring(0, varName.indexOf("=")-1) + " " + varType;
var varValue = message.substring(message.indexOf("=")+2);
inputVarObj[varName] = varValue;
}
var output = "";
var before = "";
var after = "";
var putAllAfter = 0;
var count = 0;
for (const [key, value] of Object.entries(inputVarObj)) {
if (key === "workerId") {
continue;
}
if (count > 3) {
putAllAfter = 1;
}
var temp = "<div><div style=\"width: 85%; min-height: 25px; float:left; overflow-wrap: break-word;\"><b>" + key + ":</b> " + value + "</div><div class=\"copySpan\" style=\"width: 15%; float:right\">"
+ "<span aria-label=\"Copy to clipboard\" data-microtip-position=\"top-left\" role=\"tooltip\" class=\"copy\" data-copyValue=\"" + value + "\" onClick=''>"
+ "<img src=\"images/copy.svg\" class=\"copy-icon clipboard\">"
+ "</span></div></div><br>";
if (key === "startedOnWorkerId") {
after = after + temp;
putAllAfter = 1;
} else if (putAllAfter === 0) {
before = before + temp;
} else {
after = after + temp;
}
count++;
var before = "";
var after = "";
var putAllAfter = 0;
var count = 0;
for (const [key, value] of Object.entries(data)) {
var temp = "";
var tempVal = value;
var tempKey = key;
if (tempKey === "workerId") {
continue;
}
if (after.length < 0) {
output = before;
if (count > 3) {
putAllAfter = 1;
}
if (key.includes("(file, image")) {
temp = `<div style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 10px;"><div style="flex-grow: 1; align-self: start"><b>` + tempKey + `: </b><img class="grow historyLimitSize" src="` + tempVal + `"></div><div style="align-self: start; margin-top: auto; margin-bottom: auto;"><span aria-label="Copy to clipboard" data-microtip-position="top-left" role="tooltip" class="copy" data-isImage="true" data-copyValue="` + tempVal + `" onClick=''><img src="images/copy.svg" class="copy-icon clipboard"></span></div></div><br>`;
} else if (checkForURL(tempVal)) {
temp = `<div style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 10px;"><div style="flex-grow: 1; align-self: start"><b>` + tempKey + `: </b><a href="` + tempVal + `">` + tempVal + `</a></div><div style="align-self: start; margin-top: auto; margin-bottom: auto;"><span aria-label="Copy to clipboard" data-microtip-position="top-left" role="tooltip" class="copy" data-isImage="true" data-copyValue="` + tempVal + `" onClick=''><img src="images/copy.svg" class="copy-icon clipboard"></span></div></div><br>`;
} else {
temp = `<div style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 10px;"><div style="flex-grow: 1; align-self: start"><b>` + tempKey + `: </b>` + tempVal + `</a></div><div style="align-self: start; margin-top: auto; margin-bottom: auto;"><span aria-label="Copy to clipboard" data-microtip-position="top-left" role="tooltip" class="copy" data-isImage="true" data-copyValue="` + tempVal + `" onClick=''><img src="images/copy.svg" class="copy-icon clipboard"></span></div></div><br>`;
}
if (tempKey === "startedOnWorkerId") {
after = after + temp;
putAllAfter = 1;
} else if (putAllAfter === 0) {
before = before + temp;
} else {
output = before + "<details><summary><b>Show All</b></summary>" + after + "</details>";
after = after + temp;
}
$("#inputVariables").html(output);
count++;
}
if (after.length == 0) {
output = before;
} else {
output = before + "<details><summary><b> Show All</b></summary>" + after + "</details>";
}
}
$("#inputVariables").html(output);
}
function copyInput(varValue) {
Expand Down Expand Up @@ -696,29 +695,33 @@

<h2 class="sub-header">History</h2>
<div class="row">
<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>
<tr>
<td style="font-weight:bold;">Input Variables</td><td id="inputVariables"></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>
<tr>
<td style="font-weight:bold;">Input Variables</td><td id="inputVariables"></td>
</tr>
</table>
</div>
<div class="row">
<table align="center" class="table table-bordered" style="width: 50%; font-size: 95%">
</table>
</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>
Expand Down Expand Up @@ -747,6 +750,5 @@
</div>
<a id="downloadAnchorElement" style="display:none"></a>
</div>
<script type="text/javascript" src="/${base}/js/cws.js"></script>
</body>
</html>

0 comments on commit a24228c

Please sign in to comment.