Web UI QoL improvements (#5201)

1. Added an ability to resize text area on mouseclick
2. Remember selected target status button on page reload

Signed-off-by: Maria Nemtinova <nemtinovamasha@gmail.com>

web/ui/static/js/graph/index.js

@@ -62,6 +62,12 @@ Prometheus.Graph.prototype.initialize = function() {
   var graphWrapper = self.el.find("#graph_wrapper" + self.id);
   self.queryForm = graphWrapper.find(".query_form");
 
+  // Auto-resize the text area on input or mouseclick
+  var resizeTextarea = function(el) {
+    var offset = el.offsetHeight - el.clientHeight;
+    $(el).css('height', 'auto').css('height', el.scrollHeight + offset);
+  };
+
   self.expr = graphWrapper.find("textarea[name=expr]");
   self.expr.keypress(function(e) {
     const enter = 13;
@@ -69,14 +75,13 @@ Prometheus.Graph.prototype.initialize = function() {
       self.queryForm.submit();
       e.preventDefault();
     }
-
-    // Auto-resize the text area on input.
-    var offset = this.offsetHeight - this.clientHeight;
-    var resizeTextarea = function(el) {
-        $(el).css('height', 'auto').css('height', el.scrollHeight + offset);
-    };
     $(this).on('keyup input', function() { resizeTextarea(this); });
   });
+
+  self.expr.click(function(e) {
+    resizeTextarea(this);
+  });
+
   self.expr.change(self.handleChange);
 
   self.rangeInput = self.queryForm.find("input[name=range_input]");

web/ui/static/js/targets.js

@@ -21,6 +21,14 @@ function showUnhealthy(_, container) {
 }
 
 function init() {
+  if (!localStorage.selectedTab || localStorage.selectedTab == "all-targets"){
+    $("#all-targets").parent().addClass("active");
+    $(".table-container").each(showAll);
+  } else if (localStorage.selectedTab == "unhealthy-targets") {
+    $("#unhealthy-targets").parent().addClass("active");
+    $(".table-container").each(showUnhealthy);
+  }
+
   $("button.targets").click(function () {
     const tableTitle = $(this).closest("h2").find("a").attr("id");
 
@@ -45,8 +53,10 @@ function init() {
 
     if (target === "all-targets") {
       $(".table-container").each(showAll);
+      localStorage.setItem("selectedTab", "all-targets");
     } else if (target === "unhealthy-targets") {
       $(".table-container").each(showUnhealthy);
+      localStorage.setItem("selectedTab", "unhealthy-targets");
     }
   });
 }

web/ui/templates/targets.html

@@ -8,7 +8,7 @@
   <div class="container-fluid">
     <h1>Targets</h1>
     <div id="showTargets" class="btn-group" data-toggle="buttons">
-      <label class="btn btn-primary active">
+      <label class="btn btn-primary">
         <input type="radio" name="targets" id="all-targets" autocomplete="off" checked> All
       </label>
       <label class="btn btn-primary">