diff --git a/cws-ui/src/main/webapp/js/cws.js b/cws-ui/src/main/webapp/js/cws.js
index 35086aff..b0eb93f2 100644
--- a/cws-ui/src/main/webapp/js/cws.js
+++ b/cws-ui/src/main/webapp/js/cws.js
@@ -196,278 +196,6 @@ function getInstanceCSV(procInstId) {
     return outputCSV;
 };
 
-function getInstanceJSON(procInstId) {
-    var outputJSON = {};
-    var logLinesJSON = {};
-    var logLines = [];
-    var scrollId = "";
-    var baseEsReq = {
-        "from": 0,
-        "size": 20,
-        "query": { 
-            "bool": {
-                "must" :[]
-            }
-        },
-        "sort": { "@timestamp": { "order": "asc" } }
-    };
-    baseEsReq.query.bool.must.push({"query_string":{"fields":["procInstId"],"query" : "\"" + decodeURIComponent(procInstId) + "\""}});
-
-    //get process history
-    $.ajax({
-        type: "GET",
-        url: "/${base}/rest/history/" + procInstId,
-        Accept : "application/json",
-        contentType: "application/json",
-        dataType: "json",
-        async: false
-    }).success(function(data) {
-        var status = data.state;
-        if (data.state === "COMPLETED") {
-            status = "Complete";
-        }
-        else if (data.state === "ACTIVE") {
-            status = "Running";
-        }
-        var proc_info = {
-            "process_definition": data.procDefKey,
-            "process_instance": data.procInstId,
-            "start_time": data.startTime,
-            "end_time": data.endTime,
-            "duration": convertMillis(data.duration),
-            "status": status
-        };
-        outputJSON["process_info"] = proc_info;
-        for (const entry of data.details) {
-            let date = entry["date"];
-            if (entry["message"].startsWith("Ended ")) {
-                date += " ";
-            }
-            const row = [date, entry["type"], entry["activity"], outputMessage(entry["message"])];
-            logLines.push(row);
-        }
-    }).fail(function(xhr, err) {
-        console.error("Error getting instance JSON: " + xhr.responseText);
-    });
-
-    $.ajax({
-        type: "GET",
-        url: "/${base}/rest/logs/get?source=" + encodeURIComponent(JSON.stringify(baseEsReq)),
-        Accept : "application/json",
-        contentType: "application/json",
-        dataType: "json",
-        async: false
-    }).success(function(data) {
-        var finished = false;
-        scrollId = data._scroll_id;
-        if (data.hits) {
-            for (const hit of data.hits.hits) {
-                const source = hit._source;
-                const row = [source["@timestamp"], "Log", source.actInstId.split(':')[0], "<p>" + source.msgBody.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, "<br/>") + "</p>"];
-                logLines.push(row);
-                
-            }
-        }
-        while (!finished) {
-            $.ajax({
-                type: "POST",
-                url: "/${base}/rest/logs/get/scroll",
-                data: "scrollId=" + scrollId,
-                async: false,
-                success: function(data) {
-                    if (data.hits) {
-                        
-                        if (data.hits.hits.length > 0) {
-                            for (const hit of data.hits.hits) {
-                                const source = hit._source;
-                                const row = [source["@timestamp"], "Log", source.actInstId.split(':')[0], "<p>" + source.msgBody.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, "<br/>") + "</p>"];
-                                logLines.push(row);
-                            }
-                            scrollId = data._scroll_id;
-                        }
-                        else {
-                            finished = true;
-                        }
-                    }
-                },
-                error: function(e) {
-                    alert("Error retrieving history data.");
-                }
-            });
-        }
-    }).fail(function(xhr, err) {
-        console.error("Error getting instance JSON: " + xhr.responseText);
-    });
-    logLines.sort(function(a, b) {
-        var aTemp = a[0];
-        //if there is a space in the last char, remove it
-        if (aTemp.charAt(aTemp.length - 1) == " ") {
-            aTemp = aTemp.substring(0, aTemp.length - 1);
-        }
-        var bTemp = b[0];
-        //if there is a space in the last char, remove it
-        if (bTemp.charAt(bTemp.length - 1) == " ") {
-            bTemp = bTemp.substring(0, bTemp.length - 1);
-        }
-        var aDate = moment(aTemp);
-        var bDate = moment(bTemp);
-        if (aDate.isBefore(bDate)) return -1;
-        if (bDate.isBefore(aDate)) return 1;
-        return 0;
-    });
-
-    var i = 0;
-    logLines.forEach(function(row) {
-        var data = row;
-        var tmpDetails = data[3];
-        var details = "";
-        var lineJson = {};
-        var nestedJson = {};
-        //go through data[0] and if there is a space at the end, remove it
-        if (data[0].charAt(data[0].length - 1) == " ") {
-            data[0] = data[0].substring(0, data[0].length - 1);
-        }
-        if (data[3].indexOf("Setting (json)") === -1) {
-            //check if data[3] starts with "<table><tr>". If it does, remove it.
-            if (data[3].startsWith("<table><tr>")) {
-                tmpDetails = data[3].substring(11);
-            }
-            details = data[3];
-            lineJson = {
-                "time-stamp": data[0],
-                "type": data[1],
-                "source": data[2],
-                "details": details
-            };
-        } else {
-            var fixedDetails = "";
-            if (data[3].startsWith("<table><tr>")) {
-                data[3] = data[3].substring(11);
-            }
-            //we need to first separate the string from the rest of the HTML
-            if (data[3].indexOf("_in =") !== -1) {
-                details = data[3].substring(0, data[3].indexOf("_in =")+3);
-                tmpDetails = data[3].substring(data[3].indexOf("_in =")+3);
-            } else {
-                details = data[3].substring(0, data[3].indexOf("_out =")+4);
-                tmpDetails = data[3].substring(data[3].indexOf("_out =")+4);
-            }
-            //now we need to go through and get details from json string
-            //note: key is always after <tr><td ...> and value is the following td
-            while (tmpDetails.indexOf("<tr><td") !== -1) {
-                tmpDetails = tmpDetails.substring(tmpDetails.indexOf("<tr><td")+8);
-                tmpDetails = tmpDetails.substring(tmpDetails.indexOf(">")+1);
-                var key = tmpDetails.substring(0, tmpDetails.indexOf("</td>"));
-                tmpDetails = tmpDetails.substring(tmpDetails.indexOf("<td>")+4);
-                var value = tmpDetails.substring(0, tmpDetails.indexOf("</td>"));
-                nestedJson[key] = value;
-            }
-            //check/clean nested json object
-            if (nestedJson["stdout"] !== undefined) {
-                //replace all break points with new line
-                nestedJson["stdout"] = nestedJson["stdout"].replaceAll(/<br>/g, "\n");
-                //find and remove everything between <summary>  and  </summary>
-                nestedJson["stdout"] = nestedJson["stdout"].replace(/<summary>.*<\/summary>/g, "");
-            }
-            lineJson = {
-                "time-stamp": data[0],
-                "type": data[1],
-                "source": data[2],
-                "details": details,
-                "json": nestedJson
-            };
-        }
-        //check/clean details
-        if (lineJson["details"] !== "") {
-            //replace all break points with new line
-            details = details.replaceAll('<br>', "\n");
-            details = details.replaceAll('<br/>', "\n");
-            details = details.replaceAll("<p>", "");
-            details = details.replaceAll("</p>", "");
-            lineJson["details"] = details;
-        }
-        logLinesJSON[i] = lineJson;
-        i++;
-    } );
-    outputJSON["logs"] = logLinesJSON;
-    return outputJSON;
-};
-
-function outputMessage(msg) {
-
-    if (msg.startsWith("Setting (json) ")) {
-
-        var i2 = msg.indexOf("= ")
-
-        if (i2 != -1) {
-            var cmd = msg.substring(0, i2 + 1)
-            var jsonObj = JSON.parse(msg.substring(i2 + 2))
-            var output = '<table><tr>' + cmd + '<br/><br/><table id=\"logDataNest\" class=\"table table-striped table-bordered\">'
-
-            Object.keys(jsonObj).forEach(function(key) {
-                var value = jsonObj[key];
-                output += makeRow(key, value, cmd)
-            });
-
-            output += '</table>'
-
-            return output
-        }
-    }
-
-    return msg.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, "<br/>")
-}
-
-function makeRow(key, value, cmd) {
-
-    var style = 'width: 210px;'
-
-    if (cmd.endsWith('_out =')) {
-        style = 'width: 120px;'
-    }
-
-    if (key == 'stdout' || key == 'stderr') {
-        return '<tr><td style="' + style + ';font-weight:bold;">' + key + '</td><td>' + formatMsg(value) + '</td></tr>'
-    }
-    return '<tr><td style="' + style + ';font-weight:bold;">' + key + '</td><td>' + value + '</td></tr>'
-}
-
-function formatMsg(msg) {
-
-    var index = 0, count = 0, maxCount = 30
-
-    for ( ; count < maxCount && i2 != -1; count++) {
-
-        var i2 = msg.indexOf('\n', index)
-
-        if (i2 != -1) {
-            index = i2 + 1
-        }
-    }
-
-    if (count < maxCount - 1 || index > msg.length / 2) {
-        return msg.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, "<br/>")
-    }
-
-    var first = msg.substring(0, index).replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, "<br/>")
-    var rest = msg.substring(index).replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, "<br/>")
-
-    return first + '<details><summary>Show All</summary>' + rest + '</details>'
-}
-
-function convertMillis(millis) {
-
-     var x = millis / 1000
-    var seconds = Math.floor(x % 60)
-    x /= 60
-    var minutes = Math.floor(x)
-    
-    if (minutes === 0)
-        return millis / 1000 + " sec";
-
-    return minutes + " min " + seconds + " sec"
-}
-
 //Thank you to sobyte.net for the following function:
 function base64ToBlob(base64Data, mime) {
     mime = mime || "image/png";
diff --git a/install/cws-ui/history.ftl b/install/cws-ui/history.ftl
index 177547fe..46b78f16 100644
--- a/install/cws-ui/history.ftl
+++ b/install/cws-ui/history.ftl
@@ -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 src="/${base}/js/moment.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">
@@ -344,7 +345,6 @@
 	function downloadLogCSV() {
 		var dt = $('#logData').DataTable();
 		var data = dt.buttons.exportData();
-		console.log(data);
 		//number of rows
 		var csvString = "";
 		//get headers and put them as first row in CSV
@@ -356,7 +356,6 @@
 
 		dt.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
 			var data = this.data();
-			console.log(data);
 			var details = data[3];
 			var tmpDetails = "";
 			var lineString = "";
@@ -405,7 +404,6 @@
 				tmpDetails = tmpDetails.substring(0, tmpDetails.length-1);
 				tmpDetails = tmpDetails + '"';
 				lineString += tmpDetails + "\r\n";
-				console.log(lineString);
 			}
 			csvString = csvString + lineString;
 		} );
@@ -417,98 +415,13 @@
 	}
 
 	function downloadLogJSON() {
-		var dt = $('#logData').DataTable();
-		var data = dt.buttons.exportData();
-		//number of rows
-		var numRows = dt.rows().count();
-		var jsonFile = {};
-		var logInfo = {
-			"process_definition": $("#procDefKey").text(),
-			"process_instance": $("#procInstId").text(),
-			"start_time": $("#procStartTime").text(),
-			"end_time": $("#procEndTime").text(),
-			"duration": $("#procDuration").text(),
-			"status": $("#procStatus").text()
-		}
-		jsonFile["process_info"] = logInfo;
-
-		//go through each row of inputVariableTable and add to jsonFile
-		/*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;*/
-
-		var logs = {};
-
-		dt.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
-			var data = this.data();
-			var tmpDetails = data[3];
-			var details = "";
-			var lineJson = {};
-			var nestedJson = {};
-			if (data[3].indexOf("Setting (json)") === -1) {
-				details = data[3];
-				lineJson = {
-					"time-stamp": data[0],
-					"type": data[1],
-					"source": data[2],
-					"details": details
-				};
-			} else {
-				//we need to first separate the string from the rest of the HTML
-				if (data[3].indexOf("_in =") !== -1) {
-					details = data[3].substring(0, data[3].indexOf("_in =")+3);
-					tmpDetails = data[3].substring(data[3].indexOf("_in =")+3);
-				} else {
-					details = data[3].substring(0, data[3].indexOf("_out =")+4);
-					tmpDetails = data[3].substring(data[3].indexOf("_out =")+4);
-				}
-				//now we need to go through and get details from json string
-				//note: key is always after <tr><td ...> and value is the following td
-				while (tmpDetails.indexOf("<tr><td") !== -1) {
-					tmpDetails = tmpDetails.substring(tmpDetails.indexOf("<tr><td")+8);
-					tmpDetails = tmpDetails.substring(tmpDetails.indexOf(">")+1);
-					var key = tmpDetails.substring(0, tmpDetails.indexOf("</td>"));
-					tmpDetails = tmpDetails.substring(tmpDetails.indexOf("<td>")+4);
-					var value = tmpDetails.substring(0, tmpDetails.indexOf("</td>"));
-					nestedJson[key] = value;
-				}
-				//check/clean nested json object
-				if (nestedJson["stdout"] !== undefined) {
-					//replace all break points with new line
-					nestedJson["stdout"] = nestedJson["stdout"].replaceAll(/<br>/g, "\n");
-					//find and remove everything between <summary>  and  </summary>
-					nestedJson["stdout"] = nestedJson["stdout"].replace(/<summary>.*<\/summary>/g, "");
-				}
-				lineJson = {
-					"time-stamp": data[0],
-					"type": data[1],
-					"source": data[2],
-					"details": details,
-					"json": nestedJson
-				};
-			}
-			//check/clean details
-			if (lineJson["details"] !== "") {
-				//replace all break points with new line
-				details = details.replaceAll('<br>', "\n");
-				details = details.replaceAll("<p>", "");
-				details = details.replaceAll("</p>", "");
-				lineJson["details"] = details;
-			}
-			logs[numRows-rowLoop-1] = lineJson;
-		} );
-		jsonFile["logs"] = logs;
-		console.log(jsonFile);
-		$.fn.dataTable.fileSave(
-			new Blob( [ JSON.stringify(jsonFile) ] ),
-			$("#procInstId").text() + '.json'
-		);
-	}
+		console.log($("#procInstId").html());
+        var mainJSON = getInstanceJSON($('#procInstId').html(), "${base}");
+        $.fn.dataTable.fileSave(
+            new Blob([JSON.stringify(mainJSON)]),
+            'history-' + $("#procInstId").html() + '.json'
+        );
+    }
 
 	function retryIncident(procInstId) {
 		var idArr = [procInstId];
@@ -689,6 +602,280 @@
 		}
 		$("#outputVariables").html(output);
 	}
+
+	function getInstanceJSON(procInstId) {
+    var outputJSON = {};
+    var logLinesJSON = {};
+    var logLines = [];
+    var scrollId = "";
+    var baseEsReq = {
+        "from": 0,
+        "size": 20,
+        "query": { 
+            "bool": {
+                "must" :[]
+            }
+        },
+        "sort": { "@timestamp": { "order": "asc" } }
+    };
+    baseEsReq.query.bool.must.push({"query_string":{"fields":["procInstId"],"query" : "\"" + decodeURIComponent(procInstId) + "\""}});
+
+    //get process history
+    $.ajax({
+        type: "GET",
+        url: "/${base}/rest/history/" + procInstId,
+        Accept : "application/json",
+        contentType: "application/json",
+        dataType: "json",
+        async: false
+    }).success(function(data) {
+        var status = data.state;
+        if (data.state === "COMPLETED") {
+            status = "Complete";
+        }
+        else if (data.state === "ACTIVE") {
+            status = "Running";
+        }
+        var proc_info = {
+            "process_definition": data.procDefKey,
+            "process_instance": data.procInstId,
+            "start_time": data.startTime,
+            "end_time": data.endTime,
+            "duration": convertMillis(data.duration),
+            "status": status,
+            "input_variables": data.inputVariables,
+            "output_variables": data.outputVariables
+        };
+        outputJSON["process_info"] = proc_info;
+        for (const entry of data.details) {
+            let date = entry["date"];
+            if (entry["message"].startsWith("Ended ")) {
+                date += " ";
+            }
+            const row = [date, entry["type"], entry["activity"], outputMessage(entry["message"])];
+            logLines.push(row);
+        }
+    }).fail(function(xhr, err) {
+        console.error("Error getting instance JSON: " + xhr.responseText);
+    });
+
+    $.ajax({
+        type: "GET",
+        url: "/${base}/rest/logs/get?source=" + encodeURIComponent(JSON.stringify(baseEsReq)),
+        Accept : "application/json",
+        contentType: "application/json",
+        dataType: "json",
+        async: false
+    }).success(function(data) {
+        var finished = false;
+        scrollId = data._scroll_id;
+        if (data.hits) {
+            for (const hit of data.hits.hits) {
+                const source = hit._source;
+                const row = [source["@timestamp"], "Log", source.actInstId.split(':')[0], "<p>" + source.msgBody.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, "<br/>") + "</p>"];
+                logLines.push(row);
+                
+            }
+        }
+        while (!finished) {
+            $.ajax({
+                type: "POST",
+                url: "/${base}/rest/logs/get/scroll",
+                data: "scrollId=" + scrollId,
+                async: false,
+                success: function(data) {
+                    if (data.hits) {
+                        
+                        if (data.hits.hits.length > 0) {
+                            for (const hit of data.hits.hits) {
+                                const source = hit._source;
+                                const row = [source["@timestamp"], "Log", source.actInstId.split(':')[0], "<p>" + source.msgBody.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, "<br/>") + "</p>"];
+                                logLines.push(row);
+                            }
+                            scrollId = data._scroll_id;
+                        }
+                        else {
+                            finished = true;
+                        }
+                    }
+                },
+                error: function(e) {
+                    alert("Error retrieving history data.");
+                }
+            });
+        }
+    }).fail(function(xhr, err) {
+        console.error("Error getting instance JSON: " + xhr.responseText);
+    });
+    logLines.sort(function(a, b) {
+        var aTemp = a[0];
+        //if there is a space in the last char, remove it
+        if (aTemp.charAt(aTemp.length - 1) == " ") {
+            aTemp = aTemp.substring(0, aTemp.length - 1);
+        }
+        var bTemp = b[0];
+        //if there is a space in the last char, remove it
+        if (bTemp.charAt(bTemp.length - 1) == " ") {
+            bTemp = bTemp.substring(0, bTemp.length - 1);
+        }
+        var aDate = moment(aTemp);
+        var bDate = moment(bTemp);
+        if (aDate.isBefore(bDate)) return -1;
+        if (bDate.isBefore(aDate)) return 1;
+        return 0;
+    });
+
+    var i = 0;
+    logLines.forEach(function(row) {
+        var data = row;
+        var tmpDetails = data[3];
+        var details = "";
+        var lineJson = {};
+        var nestedJson = {};
+        //go through data[0] and if there is a space at the end, remove it
+        if (data[0].charAt(data[0].length - 1) == " ") {
+            data[0] = data[0].substring(0, data[0].length - 1);
+        }
+        if (data[3].indexOf("Setting (json)") === -1) {
+            //check if data[3] starts with "<table><tr>". If it does, remove it.
+            if (data[3].startsWith("<table><tr>")) {
+                tmpDetails = data[3].substring(11);
+            }
+            details = data[3];
+            lineJson = {
+                "time-stamp": data[0],
+                "type": data[1],
+                "source": data[2],
+                "details": details
+            };
+        } else {
+            var fixedDetails = "";
+            if (data[3].startsWith("<table><tr>")) {
+                data[3] = data[3].substring(11);
+            }
+            //we need to first separate the string from the rest of the HTML
+            if (data[3].indexOf("_in =") !== -1) {
+                details = data[3].substring(0, data[3].indexOf("_in =")+3);
+                tmpDetails = data[3].substring(data[3].indexOf("_in =")+3);
+            } else {
+                details = data[3].substring(0, data[3].indexOf("_out =")+4);
+                tmpDetails = data[3].substring(data[3].indexOf("_out =")+4);
+            }
+            //now we need to go through and get details from json string
+            //note: key is always after <tr><td ...> and value is the following td
+            while (tmpDetails.indexOf("<tr><td") !== -1) {
+                tmpDetails = tmpDetails.substring(tmpDetails.indexOf("<tr><td")+8);
+                tmpDetails = tmpDetails.substring(tmpDetails.indexOf(">")+1);
+                var key = tmpDetails.substring(0, tmpDetails.indexOf("</td>"));
+                tmpDetails = tmpDetails.substring(tmpDetails.indexOf("<td>")+4);
+                var value = tmpDetails.substring(0, tmpDetails.indexOf("</td>"));
+                nestedJson[key] = value;
+            }
+            //check/clean nested json object
+            if (nestedJson["stdout"] !== undefined) {
+                //replace all break points with new line
+                nestedJson["stdout"] = nestedJson["stdout"].replaceAll(/<br>/g, "\n");
+                //find and remove everything between <summary>  and  </summary>
+                nestedJson["stdout"] = nestedJson["stdout"].replace(/<summary>.*<\/summary>/g, "");
+            }
+            lineJson = {
+                "time-stamp": data[0],
+                "type": data[1],
+                "source": data[2],
+                "details": details,
+                "json": nestedJson
+            };
+        }
+        //check/clean details
+        if (lineJson["details"] !== "") {
+            //replace all break points with new line
+            details = details.replaceAll('<br>', "\n");
+            details = details.replaceAll('<br/>', "\n");
+            details = details.replaceAll("<p>", "");
+            details = details.replaceAll("</p>", "");
+            lineJson["details"] = details;
+        }
+        logLinesJSON[i] = lineJson;
+        i++;
+    } );
+    outputJSON["logs"] = logLinesJSON;
+    return outputJSON;
+};
+
+function outputMessage(msg) {
+
+    if (msg.startsWith("Setting (json) ")) {
+
+        var i2 = msg.indexOf("= ")
+
+        if (i2 != -1) {
+            var cmd = msg.substring(0, i2 + 1)
+            var jsonObj = JSON.parse(msg.substring(i2 + 2))
+            var output = '<table><tr>' + cmd + '<br/><br/><table id=\"logDataNest\" class=\"table table-striped table-bordered\">'
+
+            Object.keys(jsonObj).forEach(function(key) {
+                var value = jsonObj[key];
+                output += makeRow(key, value, cmd)
+            });
+
+            output += '</table>'
+
+            return output
+        }
+    }
+
+    return msg.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, "<br/>")
+}
+
+function makeRow(key, value, cmd) {
+
+    var style = 'width: 210px;'
+
+    if (cmd.endsWith('_out =')) {
+        style = 'width: 120px;'
+    }
+
+    if (key == 'stdout' || key == 'stderr') {
+        return '<tr><td style="' + style + ';font-weight:bold;">' + key + '</td><td>' + formatMsg(value) + '</td></tr>'
+    }
+    return '<tr><td style="' + style + ';font-weight:bold;">' + key + '</td><td>' + value + '</td></tr>'
+}
+
+function formatMsg(msg) {
+
+    var index = 0, count = 0, maxCount = 30
+
+    for ( ; count < maxCount && i2 != -1; count++) {
+
+        var i2 = msg.indexOf('\n', index)
+
+        if (i2 != -1) {
+            index = i2 + 1
+        }
+    }
+
+    if (count < maxCount - 1 || index > msg.length / 2) {
+        return msg.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, "<br/>")
+    }
+
+    var first = msg.substring(0, index).replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, "<br/>")
+    var rest = msg.substring(index).replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, "<br/>")
+
+    return first + '<details><summary>Show All</summary>' + rest + '</details>'
+}
+
+function convertMillis(millis) {
+
+     var x = millis / 1000
+    var seconds = Math.floor(x % 60)
+    x /= 60
+    var minutes = Math.floor(x)
+    
+    if (minutes === 0)
+        return millis / 1000 + " sec";
+
+    return minutes + " min " + seconds + " sec"
+}
 	</script>
 	
 
diff --git a/install/cws-ui/processes.ftl b/install/cws-ui/processes.ftl
index 1abadfd6..01030940 100644
--- a/install/cws-ui/processes.ftl
+++ b/install/cws-ui/processes.ftl
@@ -1335,6 +1335,280 @@
             'processes_export.json'
         );
     }
+
+	function getInstanceJSON(procInstId, base) {
+    var outputJSON = {};
+    var logLinesJSON = {};
+    var logLines = [];
+    var scrollId = "";
+    var baseEsReq = {
+        "from": 0,
+        "size": 20,
+        "query": { 
+            "bool": {
+                "must" :[]
+            }
+        },
+        "sort": { "@timestamp": { "order": "asc" } }
+    };
+    baseEsReq.query.bool.must.push({"query_string":{"fields":["procInstId"],"query" : "\"" + decodeURIComponent(procInstId) + "\""}});
+
+    //get process history
+    $.ajax({
+        type: "GET",
+        url: "/${base}/rest/history/" + procInstId,
+        Accept : "application/json",
+        contentType: "application/json",
+        dataType: "json",
+        async: false
+    }).success(function(data) {
+        var status = data.state;
+        if (data.state === "COMPLETED") {
+            status = "Complete";
+        }
+        else if (data.state === "ACTIVE") {
+            status = "Running";
+        }
+        var proc_info = {
+            "process_definition": data.procDefKey,
+            "process_instance": data.procInstId,
+            "start_time": data.startTime,
+            "end_time": data.endTime,
+            "duration": convertMillis(data.duration),
+            "status": status,
+            "input_variables": data.inputVariables,
+            "output_variables": data.outputVariables
+        };
+        outputJSON["process_info"] = proc_info;
+        for (const entry of data.details) {
+            let date = entry["date"];
+            if (entry["message"].startsWith("Ended ")) {
+                date += " ";
+            }
+            const row = [date, entry["type"], entry["activity"], outputMessage(entry["message"])];
+            logLines.push(row);
+        }
+    }).fail(function(xhr, err) {
+        console.error("Error getting instance JSON: " + xhr.responseText);
+    });
+
+    $.ajax({
+        type: "GET",
+        url: "/${base}/rest/logs/get?source=" + encodeURIComponent(JSON.stringify(baseEsReq)),
+        Accept : "application/json",
+        contentType: "application/json",
+        dataType: "json",
+        async: false
+    }).success(function(data) {
+        var finished = false;
+        scrollId = data._scroll_id;
+        if (data.hits) {
+            for (const hit of data.hits.hits) {
+                const source = hit._source;
+                const row = [source["@timestamp"], "Log", source.actInstId.split(':')[0], "<p>" + source.msgBody.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, "<br/>") + "</p>"];
+                logLines.push(row);
+                
+            }
+        }
+        while (!finished) {
+            $.ajax({
+                type: "POST",
+                url: "/${base}/rest/logs/get/scroll",
+                data: "scrollId=" + scrollId,
+                async: false,
+                success: function(data) {
+                    if (data.hits) {
+                        
+                        if (data.hits.hits.length > 0) {
+                            for (const hit of data.hits.hits) {
+                                const source = hit._source;
+                                const row = [source["@timestamp"], "Log", source.actInstId.split(':')[0], "<p>" + source.msgBody.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, "<br/>") + "</p>"];
+                                logLines.push(row);
+                            }
+                            scrollId = data._scroll_id;
+                        }
+                        else {
+                            finished = true;
+                        }
+                    }
+                },
+                error: function(e) {
+                    alert("Error retrieving history data.");
+                }
+            });
+        }
+    }).fail(function(xhr, err) {
+        console.error("Error getting instance JSON: " + xhr.responseText);
+    });
+    logLines.sort(function(a, b) {
+        var aTemp = a[0];
+        //if there is a space in the last char, remove it
+        if (aTemp.charAt(aTemp.length - 1) == " ") {
+            aTemp = aTemp.substring(0, aTemp.length - 1);
+        }
+        var bTemp = b[0];
+        //if there is a space in the last char, remove it
+        if (bTemp.charAt(bTemp.length - 1) == " ") {
+            bTemp = bTemp.substring(0, bTemp.length - 1);
+        }
+        var aDate = moment(aTemp);
+        var bDate = moment(bTemp);
+        if (aDate.isBefore(bDate)) return -1;
+        if (bDate.isBefore(aDate)) return 1;
+        return 0;
+    });
+
+    var i = 0;
+    logLines.forEach(function(row) {
+        var data = row;
+        var tmpDetails = data[3];
+        var details = "";
+        var lineJson = {};
+        var nestedJson = {};
+        //go through data[0] and if there is a space at the end, remove it
+        if (data[0].charAt(data[0].length - 1) == " ") {
+            data[0] = data[0].substring(0, data[0].length - 1);
+        }
+        if (data[3].indexOf("Setting (json)") === -1) {
+            //check if data[3] starts with "<table><tr>". If it does, remove it.
+            if (data[3].startsWith("<table><tr>")) {
+                tmpDetails = data[3].substring(11);
+            }
+            details = data[3];
+            lineJson = {
+                "time-stamp": data[0],
+                "type": data[1],
+                "source": data[2],
+                "details": details
+            };
+        } else {
+            var fixedDetails = "";
+            if (data[3].startsWith("<table><tr>")) {
+                data[3] = data[3].substring(11);
+            }
+            //we need to first separate the string from the rest of the HTML
+            if (data[3].indexOf("_in =") !== -1) {
+                details = data[3].substring(0, data[3].indexOf("_in =")+3);
+                tmpDetails = data[3].substring(data[3].indexOf("_in =")+3);
+            } else {
+                details = data[3].substring(0, data[3].indexOf("_out =")+4);
+                tmpDetails = data[3].substring(data[3].indexOf("_out =")+4);
+            }
+            //now we need to go through and get details from json string
+            //note: key is always after <tr><td ...> and value is the following td
+            while (tmpDetails.indexOf("<tr><td") !== -1) {
+                tmpDetails = tmpDetails.substring(tmpDetails.indexOf("<tr><td")+8);
+                tmpDetails = tmpDetails.substring(tmpDetails.indexOf(">")+1);
+                var key = tmpDetails.substring(0, tmpDetails.indexOf("</td>"));
+                tmpDetails = tmpDetails.substring(tmpDetails.indexOf("<td>")+4);
+                var value = tmpDetails.substring(0, tmpDetails.indexOf("</td>"));
+                nestedJson[key] = value;
+            }
+            //check/clean nested json object
+            if (nestedJson["stdout"] !== undefined) {
+                //replace all break points with new line
+                nestedJson["stdout"] = nestedJson["stdout"].replaceAll(/<br>/g, "\n");
+                //find and remove everything between <summary>  and  </summary>
+                nestedJson["stdout"] = nestedJson["stdout"].replace(/<summary>.*<\/summary>/g, "");
+            }
+            lineJson = {
+                "time-stamp": data[0],
+                "type": data[1],
+                "source": data[2],
+                "details": details,
+                "json": nestedJson
+            };
+        }
+        //check/clean details
+        if (lineJson["details"] !== "") {
+            //replace all break points with new line
+            details = details.replaceAll('<br>', "\n");
+            details = details.replaceAll('<br/>', "\n");
+            details = details.replaceAll("<p>", "");
+            details = details.replaceAll("</p>", "");
+            lineJson["details"] = details;
+        }
+        logLinesJSON[i] = lineJson;
+        i++;
+    } );
+    outputJSON["logs"] = logLinesJSON;
+    return outputJSON;
+};
+
+function outputMessage(msg) {
+
+    if (msg.startsWith("Setting (json) ")) {
+
+        var i2 = msg.indexOf("= ")
+
+        if (i2 != -1) {
+            var cmd = msg.substring(0, i2 + 1)
+            var jsonObj = JSON.parse(msg.substring(i2 + 2))
+            var output = '<table><tr>' + cmd + '<br/><br/><table id=\"logDataNest\" class=\"table table-striped table-bordered\">'
+
+            Object.keys(jsonObj).forEach(function(key) {
+                var value = jsonObj[key];
+                output += makeRow(key, value, cmd)
+            });
+
+            output += '</table>'
+
+            return output
+        }
+    }
+
+    return msg.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, "<br/>")
+}
+
+function makeRow(key, value, cmd) {
+
+    var style = 'width: 210px;'
+
+    if (cmd.endsWith('_out =')) {
+        style = 'width: 120px;'
+    }
+
+    if (key == 'stdout' || key == 'stderr') {
+        return '<tr><td style="' + style + ';font-weight:bold;">' + key + '</td><td>' + formatMsg(value) + '</td></tr>'
+    }
+    return '<tr><td style="' + style + ';font-weight:bold;">' + key + '</td><td>' + value + '</td></tr>'
+}
+
+function formatMsg(msg) {
+
+    var index = 0, count = 0, maxCount = 30
+
+    for ( ; count < maxCount && i2 != -1; count++) {
+
+        var i2 = msg.indexOf('\n', index)
+
+        if (i2 != -1) {
+            index = i2 + 1
+        }
+    }
+
+    if (count < maxCount - 1 || index > msg.length / 2) {
+        return msg.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, "<br/>")
+    }
+
+    var first = msg.substring(0, index).replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, "<br/>")
+    var rest = msg.substring(index).replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, "<br/>")
+
+    return first + '<details><summary>Show All</summary>' + rest + '</details>'
+}
+
+function convertMillis(millis) {
+
+     var x = millis / 1000
+    var seconds = Math.floor(x % 60)
+    x /= 60
+    var minutes = Math.floor(x)
+    
+    if (minutes === 0)
+        return millis / 1000 + " sec";
+
+    return minutes + " min " + seconds + " sec"
+}
 </script>
 
 </body>