Skip to content

Commit

Permalink
UI - Persistent states (#151)
Browse files Browse the repository at this point in the history 
* Added cookies for drop down persistance on deployments page.

* Update comments, remove excessive cookie calls

* Move cookie functions to cws.js

* Persist state for hide susp. process checkbox

* Add variable to control cookie expiry dates

* Update workers page with checkbox state

* replace cookies with local storage

* Added persistant state for search filters in proc

* Add persistant states to log page

* Merge from develop

* Move local storage names to vars for future

* Updated local storage var names, changed defaults

* Fix issue with subprocess window being overridden
  • Loading branch information
@wcgunter
wcgunter authored Jun 13, 2023
1 parent d54ed7d commit 4b8d9d1
Show file tree
Hide file tree
Showing 5 changed files with 205 additions and 27 deletions.
3 changes: 2 additions & 1 deletion cws-ui/src/main/webapp/js/cws.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,4 +42,5 @@ function getQueryString(){
}

return params;
}
}

53 changes: 48 additions & 5 deletions install/cws-ui/deployments.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 hideSuspendedProcVar = "CWS_DASH_DEPLOY_HIDE_SUS-" + username;
var statsVal = {};
var statsTotalVal = {};
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -317,6 +328,7 @@
}
});
}
$( document ).ready(function() {
// DISPLAY MESSAGE AT TOP OF PAGE
//
Expand All @@ -329,9 +341,23 @@
$('#statusMessageDiv').fadeOut(refreshRate, "linear");
}
}
// State persistance for refresh rate and show stats for last x hours
if (localStorage.getItem(refreshRateVar) !== null) {
$("#refresh-rate").val(localStorage.getItem(refreshRateVar)/1000);
} else {
$("#refresh-rate").val("5");
}
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(){
Expand Down Expand Up @@ -536,7 +562,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>
Expand Down Expand Up @@ -869,14 +895,26 @@
$("#hide-sus-btn").click(function(){
if($(this).prop("checked")){
$("#process-table tr.disabled").hide(100);
localStorage.setItem(hideSuspendedProcVar, "1");
hideall=true;
}
else{
$("#process-table tr.disabled").show(100);
localStorage.setItem(hideSuspendedProcVar, "0");
hideall=true;
}
});
$( "#hide-sus-btn" ).click(); // check by default
if(parseInt(localStorage.getItem(hideSuspendedProcVar)) == 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){
Expand Down Expand Up @@ -933,17 +971,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();
});
Expand Down
129 changes: 113 additions & 16 deletions install/cws-ui/logs.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 threadNameVar = "CWS_DASH_LOGS_THN-" + username;
const processDefKeyVar = "CWS_DASH_LOGS_PDK-" + username;
const processInstIDVar = "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;
Expand Down Expand Up @@ -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(threadNameVar) === "1") {
collapseColumn(5);
$("#thn-chkbox").prop("checked", true);
}
if (localStorage.getItem(processDefKeyVar) === "1") {
collapseColumn(6);
$("#pdk-chkbox").prop("checked", true);
}
if (localStorage.getItem(processInstIDVar) === "1") {
collapseColumn(7);
$("#pid-chkbox").prop("checked", true);
}
// DISPLAY MESSAGE AT TOP OF PAGE
//
if ($("#statusMessageDiv:contains('ERROR:')").length >= 1) {
Expand All @@ -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
Expand Down Expand Up @@ -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;
});
Expand All @@ -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();
Expand All @@ -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(threadNameVar);
collapseColumn(5);
break;
case 'pdk-chkbox':
toggleLocalStorage(processDefKeyVar);
collapseColumn(6);
break;
case 'pid-chkbox':
toggleLocalStorage(processInstIDVar);
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');
Expand Down
28 changes: 23 additions & 5 deletions install/cws-ui/processes.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]-->
Expand Down Expand Up @@ -195,11 +190,33 @@
<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) {
//check if we are viewing subprocs (if we are, we don't want to restore state)
var subprocs = currentUrl.indexOf("superProcInstId") + 16;
if(subprocs === "null") {
//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"))
Expand Down Expand Up @@ -323,6 +340,7 @@
}
}
qstring = qstring.substring(0,qstring.length-1);
localStorage.setItem(qstringVar, qstring);
console.log(encodeURI(qstring));
window.location="/${base}/processes" + qstring;
}
Expand Down
Loading

0 comments on commit 4b8d9d1

Please sign in to comment.