persist option in query UI

Signed-off-by: yeya24 <yb532204897@gmail.com>
thanos-io · Dec 11, 2019 · 13c3660 · 13c3660
1 parent 51d584e
commit 13c3660
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 52 deletions.
diff --git a/pkg/ui/bindata.go b/pkg/ui/bindata.go
diff --git a/pkg/ui/static/js/graph.js b/pkg/ui/static/js/graph.js
@@ -194,46 +194,62 @@ Prometheus.Graph.prototype.initialize = function() {
     self.updateGraph();
   });
 
+  // Toggle functions.
+  self.toggleOn = function(targetEl, item) {
+    $(targetEl).addClass('glyphicon-check').removeClass('glyphicon-unchecked');
+    localStorage.setItem(item, '1');
+  };
+  self.toggleOff = function(targetEl, item) {
+    $(targetEl).addClass('glyphicon-unchecked').removeClass('glyphicon-check');
+    localStorage.setItem(item, '0');
+  };
+
   // Deduplication.
+  let dedup_icon = self.dedupBtn.find('.glyphicon');
   self.isDedupEnabled = function() {
-      return self.enableDedup.val() === '1';
-  };
-  var styleDedupBtn = function() {
-      var icon = self.dedupBtn.find('.glyphicon');
-      if (self.isDedupEnabled()) {
-          icon.addClass("glyphicon-check");
-          icon.removeClass("glyphicon-unchecked");
-      } else {
-          icon.addClass("glyphicon-unchecked");
-          icon.removeClass("glyphicon-check");
-      }
+    let v = localStorage.getItem('enable-dedup');
+
+    // If not set in localstorage, make it enabled.
+    return v === '1' || v === null;
   };
-  styleDedupBtn();
+
+  if (self.isDedupEnabled()) {
+    self.toggleOn(dedup_icon, 'enable-dedup');
+  } else {
+    self.toggleOff(dedup_icon, 'enable-dedup');
+  }
 
   self.dedupBtn.click(function() {
     self.enableDedup.val(self.isDedupEnabled() ? '0' : '1');
-    styleDedupBtn();
+    if (dedup_icon.hasClass('glyphicon-unchecked')) {
+      self.toggleOn(dedup_icon, 'enable-dedup');
+    } else if (dedup_icon.hasClass('glyphicon-check')) {
+      self.toggleOff(dedup_icon, 'enable-dedup');
+    }
   });
 
   // Partial response.
+  let partial_response_icon = self.partialResponseBtn.find('.glyphicon');
   self.isPartialResponseEnabled = function() {
-    return self.partialResponse.val() === '1';
-  };
-  var stylePartialResponseBtn = function() {
-    var icon = self.partialResponseBtn.find('.glyphicon');
-    if (self.isPartialResponseEnabled()) {
-      icon.addClass("glyphicon-check");
-      icon.removeClass("glyphicon-unchecked");
-    } else {
-      icon.addClass("glyphicon-unchecked");
-      icon.removeClass("glyphicon-check");
-    }
+    let v = localStorage.getItem('enable-partial-response');
+
+    // If not set in localstorage, make it enabled.
+    return v === '1' || v === null;
   };
-  stylePartialResponseBtn();
+
+  if (self.isPartialResponseEnabled()) {
+    self.toggleOn(partial_response_icon, 'enable-partial-response');
+  } else {
+    self.toggleOff(partial_response_icon, 'enable-partial-response');
+  }
 
   self.partialResponseBtn.click(function() {
     self.partialResponse.val(self.isPartialResponseEnabled() ? '0' : '1');
-    stylePartialResponseBtn();
+    if (partial_response_icon.hasClass('glyphicon-unchecked')) {
+      self.toggleOn(partial_response_icon, 'enable-partial-response');
+    } else if (partial_response_icon.hasClass('glyphicon-check')) {
+      self.toggleOff(partial_response_icon, 'enable-partial-response');
+    }
   });
 
   self.maxSourceResolutionInput.val(self.options.max_source_resolution);

diff --git a/pkg/ui/templates/query_menu.html b/pkg/ui/templates/query_menu.html
@@ -1,25 +1,25 @@
 {{define "nav"}}
     <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-dark">
-      <div class="container-fluid">
-        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-content" aria-expanded="false" aria-controls="nav-content" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon"></span>
-        </button>
-        <a class="navbar-brand" href="{{ pathPrefix }}/">Thanos</a>
-        <div id="nav-content" class="navbar-collapse collapse">
-          <ul class="navbar-nav">
-            <li class="nav-item"><a class="nav-link" href="{{ pathPrefix }}/graph">Graph</a></li>
-            <li class="nav-item"><a class="nav-link" href="{{ pathPrefix }}/stores">Stores</a></li>
-	    <li class="nav-item dropdown">
-              <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Status <span class="caret"></span></a>
-              <div class="dropdown-menu">
-                <a class="dropdown-item" href="{{ pathPrefix }}/status">Runtime &amp; Build Information</a>
-              </div>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="https://thanos.io/getting-started.md/" target="_blank">Help</a>
-            </li>
-          </ul>
+        <div class="container-fluid">
+            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-content" aria-expanded="false" aria-controls="nav-content" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <a class="navbar-brand" href="{{ pathPrefix }}/">Thanos</a>
+            <div id="nav-content" class="navbar-collapse collapse">
+                <ul class="navbar-nav">
+                    <li class="nav-item"><a class="nav-link" href="{{ pathPrefix }}/graph">Graph</a></li>
+                    <li class="nav-item"><a class="nav-link" href="{{ pathPrefix }}/stores">Stores</a></li>
+                    <li class="nav-item dropdown">
+                        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Status <span class="caret"></span></a>
+                        <div class="dropdown-menu">
+                            <a class="dropdown-item" href="{{ pathPrefix }}/status">Runtime &amp; Build Information</a>
+                        </div>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="https://thanos.io/getting-started.md/" target="_blank">Help</a>
+                    </li>
+                </ul>
+            </div>
         </div>
-      </div>
     </nav>
 {{end}}