UI - Persistent states

cws-ui/src/main/webapp/js/cws.js

@@ -42,4 +42,5 @@ function getQueryString(){
     }
 
     return params;
-}
+}
+

install/cws-ui/deployments.ftl

@@ -9,6 +9,13 @@
 	<!-- Custom styles for this template -->
 	<link href="/${base}/css/dashboard.css" rel="stylesheet">
 	<script>
+
+		//STATE PERSISTANCE CONSTS
+		const username = "username"; //temporary, hardcoded value for now
+		const lastNumHoursVar = "CWS_DASH_DEPLOY_LAST_NUM_HOURS" + username;
+		const refreshRateVar = "CWS_DASH_DEPLOY_REFRESH_RATE" + username;
+		const hideSusVar = "CWS_DASH_DEPLOY_HIDE_SUS" + username;
+
 		var statsVal = {};
 		var statsTotalVal = {};
 
@@ -242,9 +249,13 @@
 			if (refreshing) return;
 
 			refreshing = true;
+
+			//grab the value here so we don't have to do it multiple times
+			var statsCookieValue = parseInt(localStorage.getItem(lastNumHoursVar));
+
 			$.ajax({ 
 				url: "/${base}/rest/stats/processInstanceStatsJSON",
-				data: lastNumHours ? "lastNumHours=" + lastNumHours : "",
+				data: statsCookieValue ? "lastNumHours=" + statsCookieValue : "",
 				success: function( data ) {
 
 					statsTotalVal.pending = 0;
@@ -317,6 +328,7 @@
 				}
 			});
 		}
+
 		$( document ).ready(function() {
 			// DISPLAY MESSAGE AT TOP OF PAGE
 			//
@@ -329,9 +341,19 @@
 					$('#statusMessageDiv').fadeOut(refreshRate, "linear");
 				}
 			}
+
+			// State persistance for refresh rate and show stats for last x hours
+			$("#refresh-rate").val(localStorage.getItem(refreshRateVar)/1000);
+
+			if (localStorage.getItem(lastNumHoursVar) != null) {
+				$("#stats-last-num-hours").val(localStorage.getItem(lastNumHoursVar));
+			} else {
+				$("#stats-last-num-hours").val(24);
+			}
+
 
 			refreshStats();
-			pageRefId  = setInterval(pageRefresh, refreshRate);
+			pageRefId  = setInterval(pageRefresh, parseInt(localStorage.getItem(refreshRateVar)));
 			idleTimer  = setInterval(idleMode, idleInterval);
 
 			$("#resume-refresh").click(function(){
@@ -536,7 +558,7 @@
 					<option value="3">3 second refresh rate</option>
 					<option value="1">1 second refresh rate</option>
 					<option value="0">Stop auto-refresh</option>
-				</select>
+					</select>
 			</div>
 			<br>
 			<div>
@@ -869,14 +891,26 @@
 	$("#hide-sus-btn").click(function(){
 		if($(this).prop("checked")){
 			$("#process-table tr.disabled").hide(100);
+			localStorage.setItem(hideSusVar, "1");
 			hideall=true;
 		}
 		else{
 			$("#process-table tr.disabled").show(100);
+			localStorage.setItem(hideSusVar, "0");
 			hideall=true;
 		}
 	});
-	$( "#hide-sus-btn" ).click(); // check by default
+
+	if(parseInt(localStorage.getItem(hideSusVar)) == 0) {
+		$("#hide-sus-btn").prop("checked", false);
+		$("#process-table tr.disabled").show(100);
+		hideall==true;
+	}
+	else {
+		$("#hide-sus-btn").prop("checked", true);
+		$("#process-table tr.disabled").hide(100);
+	}
+
 
 	function listWorkersInModal(dataProcKey){
 		$.get("/${base}/rest/worker/"+dataProcKey+"/getWorkersForProc", function(data){
@@ -933,17 +967,22 @@
 		}
 	});
 
+
+	//Handles refresh rate for stats
 	$("#refresh-rate").on('change',function(){
 		refreshRate = parseInt($(this).val()) * 1000;
+		localStorage.setItem(refreshRateVar, refreshRate.toString());
 		clearInterval(pageRefId);
 		if(refreshRate == 0)
 			return;
 		refreshStats();
-		pageRefId = setInterval(pageRefresh, refreshRate);
+		pageRefId = setInterval(pageRefresh, parseInt(localStorage.getItem(refreshRateVar)));
 	});
 
+
 	$("#stats-last-num-hours").on('change',function(){
 		lastNumHours = parseInt($(this).val()) | null;
+		localStorage.setItem(lastNumHoursVar, lastNumHours.toString());
 		refreshStats();
 	});
 

install/cws-ui/logs.ftl

@@ -13,6 +13,18 @@
 	<link href="/${base}/css/dashboard.css" rel="stylesheet">
 	<script>
 
+	//STATE PERSISTANCE CONSTS
+	const username = "username"; //temporary, hardcoded value for now
+	const cwsHostVar = "CWS_DASH_LOGS_CWSHOST" + username;
+	const cwsWIDVar = "CWS_DASH_LOGS_CWSWID" + username;
+	const logLevelVar = "CWS_DASH_LOGS_LOGLVL" + username;
+	const thnVar = "CWS_DASH_LOGS_THN" + username;
+	const pdkVar = "CWS_DASH_LOGS_PDK" + username;
+	const pidVar = "CWS_DASH_LOGS_PID" + username;
+	const refreshRateVar = "CWS_DASH_LOGS_REFRESH_RATE" + username;
+	const refreshVar = "CWS_DASH_LOGS_REFRESH" + username;
+	const qstringVar = "CWS_DASH_LOGS_QSTRING" + username;
+
 	// Global vars
 	var params;
 	var FETCH_COUNT = 200;
@@ -162,6 +174,33 @@
 	}
 
 	$( document ).ready(function() {
+
+		//go through the local storage and set checkboxes accordingly
+		if (localStorage.getItem(cwsHostVar) === "1") {
+			collapseColumn(2);
+			$("#cwshost-chkbox").prop("checked", true);
+		}
+		if (localStorage.getItem(cwsWIDVar) === "1") {
+			collapseColumn(3);
+			$("#cwswid-chkbox").prop("checked", true);
+		}
+		if (localStorage.getItem(logLevelVar) === "1") {
+			collapseColumn(4);
+			$("#loglvl-chkbox").prop("checked", true);
+		}
+		if (localStorage.getItem(thnVar) === "1") {
+			collapseColumn(5);
+			$("#thn-chkbox").prop("checked", true);
+		}
+		if (localStorage.getItem(pdkVar) === "1") {
+			collapseColumn(6);
+			$("#pdk-chkbox").prop("checked", true);
+		}
+		if (localStorage.getItem(pidVar) === "1") {
+			collapseColumn(7);
+			$("#pid-chkbox").prop("checked", true);
+		}
+
 		// DISPLAY MESSAGE AT TOP OF PAGE
 		//
 		if ($("#statusMessageDiv:contains('ERROR:')").length >= 1) {
@@ -173,6 +212,38 @@
 				$('#statusMessageDiv').fadeOut(5000, "linear");
 			}
 		}
+
+		if (localStorage.getItem(refreshRateVar) === null) {
+		localStorage.setItem(refreshRateVar, "10000");
+		}
+
+		$("#refresh-rate").val((parseInt(localStorage.getItem(refreshRateVar))/1000).toString());
+
+
+
+		if(localStorage.getItem(refreshVar) === "1") {
+			$("#refresh-checkbox").prop("checked", true);
+			refreshRate = parseInt(localStorage.getItem(refreshRateVar));
+			refID = setInterval(refreshLogs, refreshRate);
+		}
+		else{
+			$("#refresh-checkbox").prop("checked", false);
+		}
+
+		//get our current url
+		var currentUrl = window.location.href;
+		//get our local storage url
+		var localStorageUrl = localStorage.getItem(qstringVar);
+		//check if a cookie has been stored (indicating we can restore state)
+		if(localStorageUrl != null) {
+			//remove everything before ?
+			currentUrl = currentUrl.substring(currentUrl.indexOf("logs")+4);
+			//compare against what is in local storage
+			if (currentUrl != localStorageUrl) {
+				//if they are different, go to the one in local storage (essentially restoring from last time used)
+				window.location="/${base}/logs" + localStorageUrl;
+			}
+		}
 
 		//
 		// INITIAL LOG SET
@@ -456,6 +527,7 @@
 			qstring += p+"="+params[p]+"&";
 		}
 		qstring = qstring.substring(0,qstring.length-1);
+		localStorage.setItem(qstringVar, qstring);
 		//console.log(encodeURI(qstring));
 		window.location="/${base}/logs" + qstring;
 	});
@@ -480,44 +552,53 @@
 	// AUTO-REFRESH SETTING
 	//
 	var refID;
-	var refreshRate = 5000;
 	$("#refresh-checkbox").click(function(){
 		if($(this).prop("checked")){
-			refreshRate = $("#refresh-rate").val() * 1000;
+			localStorage.setItem(refreshVar, "1");
+			refreshRate = parseInt(localStorage.getItem(refreshRateVar));
 			refreshLogs();
 			refID = setInterval(refreshLogs, refreshRate);
 		}
 		else{
+			localStorage.setItem(refreshVar, "0");
 			clearInterval(refID);
 		}
 	});
 
 	$("#refresh-rate").on('change', function(){
+		refreshRate = parseInt($(this).val()) * 1000;
+		localStorage.setItem(refreshRateVar, refreshRate.toString());
 		if($("#refresh-checkbox").prop("checked")){
-			refreshRate = parseInt($(this).val()) * 1000;
 			clearInterval(refID);
 			refID = setInterval(refreshLogs, refreshRate);
 		}
 	});
 
-	var logDataTableHeaders =
-		"<tr>"+
-			'<th class="sort" style="width: 190px">Time Stamp</th>'+
-			'<th class="'+$("#logData tr th:nth-child(2)").attr('class')+'">CWS Host</th>'+
-			'<th class="'+$("#logData tr th:nth-child(3)").attr('class')+'">CWS Worker ID</th>'+
-			'<th class="'+$("#logData tr th:nth-child(4)").attr('class')+'">Log Level</th>'+
-			'<th class="'+$("#logData tr th:nth-child(5)").attr('class')+'">Thread Name</th>'+
-			'<th class="'+$("#logData tr th:nth-child(6)").attr('class')+'">Proc Def Key</th>'+
-			'<th class="'+$("#logData tr th:nth-child(7)").attr('class')+'">Proc Inst ID</th>'+
-			'<th>Message</th>'+
-		"</tr>";
-
 	function refreshLogs(){
+		var logDataTableHeaders = $("#logData").html().substring(0, $("#logData").html().indexOf("</tr>")+5).split("<th ");
+		logDataTableHeaders.shift();
+		logDataTableHeaders.shift();
+		for (i = 0; i < logDataTableHeaders.length; i++) {
+			pos = logDataTableHeaders[i].indexOf(`=\"`) + 2;
+			logDataTableHeaders[i] = logDataTableHeaders[i].substring(pos, logDataTableHeaders[i].indexOf(`\">`, pos));
+		}
+
+		var logDataHeader = "<tr>"+
+				'<th class="sort" style="width: 190px">Time Stamp</th>'+
+				'<th class="'+logDataTableHeaders[0]+'">CWS Host</th>'+
+				'<th class="'+logDataTableHeaders[1]+'">CWS Worker ID</th>'+
+				'<th class="'+logDataTableHeaders[2]+'">Log Level</th>'+
+				'<th class="'+logDataTableHeaders[3]+'">Thread Name</th>'+
+				'<th class="'+logDataTableHeaders[4]+'">Proc Def Key</th>'+
+				'<th class="'+logDataTableHeaders[5]+'">Proc Inst ID</th>'+
+				'<th>Message</th>'+
+			"</tr>";
+
 		$(".ajax-spinner").show();
 
 		// CLEAR OUT LOG DATA TABLE
 		//
-		$("#logData").html(logDataTableHeaders);
+		$("#logData").html(logDataHeader);
 
 		if (params == null) {
 			loadDefaultLog();
@@ -534,28 +615,44 @@
 	$("#sh-cols div input").click(function(){
 		switch ($(this).attr('id') ){
 			case 'cwshost-chkbox':
+				toggleLocalStorage(cwsHostVar);
 				collapseColumn(2);
 				break;
 			case 'cwswid-chkbox':
+				toggleLocalStorage(cwsWIDVar);
 				collapseColumn(3);
 				break;
 			case 'loglvl-chkbox':
+				toggleLocalStorage(logLevelVar);
 				collapseColumn(4);
 				break;
 			case 'thn-chkbox':
+				toggleLocalStorage(thnVar);
 				collapseColumn(5);
 				break;
 			case 'pdk-chkbox':
+				toggleLocalStorage(pdkVar);
 				collapseColumn(6);
 				break;
 			case 'pid-chkbox':
+				toggleLocalStorage(pidVar);
 				collapseColumn(7);
 				break;
 
 			default:break;
 		}
 	});
 
+function toggleLocalStorage(key) {
+	if (localStorage.getItem(key) == null) {
+		localStorage.setItem(key, "1");
+	} else if (localStorage.getItem(key) == "1") {
+		localStorage.setItem(key, "0");
+	} else {
+		localStorage.setItem(key, "1");
+	}
+}
+
 function collapseColumn(nth){
 	$("#logData tr th:nth-child("+nth+")").toggleClass('collapse');
 	$("#logData tr td:nth-child("+nth+")").toggleClass('collapse');

install/cws-ui/processes.ftl

@@ -16,11 +16,6 @@
 			font-size: 90%;
 		}
 	</style>
-
-	<script>
-
-
-	</script>
 
 	<!-- Just for debugging purposes. Don't actually copy this line! -->
 	<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
@@ -195,11 +190,29 @@
 
 <script type="text/javascript">
 
+	//STATE PERSISTANCE CONSTS
+	const username = "username"; //temporary, hardcoded value for now
+	const qstringVar = "CWS_DASH_PROC_QSTRING" + username; 
+
 	var params = {};
 	var rows;
 	var MAX_ROWS = 100;
 
 	$( document ).ready(function() {
+		//get our current url
+		var currentUrl = window.location.href;
+		//get our local storage url
+		var localStorageUrl = localStorage.getItem(qstringVar);
+		//check if a cookie has been stored (indicating we can restore state)
+		if(localStorageUrl != null) {
+			//remove everything before ?
+			currentUrl = currentUrl.substring(currentUrl.indexOf("?"));
+			//compare against what is in local storage
+			if (currentUrl != localStorageUrl) {
+				//if they are different, go to the one in local storage (essentially restoring from last time used)
+				window.location="/${base}/processes" + localStorageUrl;
+			}
+		}
 
 		$("#filters-btn").click(function(){
 			if($("#filters-div").is(":visible"))
@@ -323,6 +336,7 @@
 			}
 		}
 		qstring = qstring.substring(0,qstring.length-1);
+		localStorage.setItem(qstringVar, qstring);
 		console.log(encodeURI(qstring));
 		window.location="/${base}/processes" + qstring;
 	}