Converted auto-refresh to a switch (#6355)

Co-authored-by: Dom G. <domgarguilo@apache.org>

Author: dlmarion

server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/css/screen.css

@@ -421,14 +421,6 @@ pre.logevent {
   left: unset;
 }
 
-.active  {
-  color: #fff;
-  text-decoration: none;
-  background-color: #337ab7;
-  outline: 0;
-}
-
-
 .btn-white-font {
   color: #fff;
   background-color: #0dcaf0;

server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/functions.js

@@ -37,6 +37,7 @@ const TABLET_SERVER_PROCESS_VIEW = 'tserversView';
 var STATUS_REQUEST = null;
 const RUNNING_COMPACTIONS_BY_TABLE = 'runningCompactionsByTable';
 const RUNNING_COMPACTIONS_BY_GROUP = 'runningCompactionsByGroup';
+const AUTO_REFRESH_KEY = 'auto-refresh';
 const MESSAGE_CATEGORIES = 'messageCategories';
 const MESSAGES = 'messages';
 
@@ -55,25 +56,17 @@ if ($.fn && $.fn.dataTable) {
  * and creates listeners for auto refresh
  */
 function setupAutoRefresh() {
-  // Sets auto refresh to true or false
-  if (!sessionStorage.autoRefresh) {
-    sessionStorage.autoRefresh = 'false';
-  }
-  // Need this to set the initial value for the autorefresh on page load
-  if (sessionStorage.autoRefresh === 'false') {
-    $('.auto-refresh').parent().removeClass('active');
+
+  var autoRefreshSwitch = $('#autoRefreshSwitch');
+  var savedValue = localStorage.getItem(AUTO_REFRESH_KEY);
+  if (savedValue === null || savedValue === 'false') {
+    autoRefreshSwitch.prop('checked', false);
   } else {
-    $('.auto-refresh').parent().addClass('active');
+    autoRefreshSwitch.prop('checked', true);
   }
   // Initializes the auto refresh on click listener
-  $('.auto-refresh').on("click", function () {
-    if ($(this).parent().attr('class') === 'active') {
-      $(this).parent().removeClass('active');
-      sessionStorage.autoRefresh = 'false';
-    } else {
-      $(this).parent().addClass('active');
-      sessionStorage.autoRefresh = 'true';
-    }
+  $('#autoRefreshSwitch').on("change", function () {
+    localStorage.setItem(AUTO_REFRESH_KEY, $(this).is(':checked'));
   });
 }
 
@@ -88,12 +81,9 @@ function refresh() {
  * Global timer that checks for auto refresh status every 5 seconds
  */
 TIMER = setInterval(function () {
-  if (sessionStorage.autoRefresh === 'true') {
-    $('.auto-refresh').parent().addClass('active');
+  if (localStorage.getItem(AUTO_REFRESH_KEY) === 'true') {
     refresh();
     refreshNavBar();
-  } else {
-    $('.auto-refresh').parent().removeClass('active');
   }
 }, 5000);
 

server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/navbar.ftl

@@ -78,7 +78,14 @@
                 <span style="font-size: 1.2em;" class="bi bi-three-dots-vertical"></span>
               </a>
               <ul class="dropdown-menu dropdown-menu-end">
-                <li><a class="dropdown-item auto-refresh" style="cursor:pointer">Auto-Refresh</a></li>
+                <li>
+                  <div class="dropdown-item d-flex justify-content-between align-items-center">
+                    <label class="mb-0" for="autoRefreshSwitch">Auto-Refresh</label>
+                    <div class="form-check form-switch mb-0 ms-3">
+                      <input id="autoRefreshSwitch" class="form-check-input mt-0" type="checkbox" role="switch">
+                    </div>
+                  </div>
+                </li>
                 <li><a class="dropdown-item" data-bs-toggle="modal" href="#aboutModal">About</a></li>
               </ul>
             </li>