rule & querier: Upgrade UI to Prometheus 2.9.1 version (#1066)

* Upgrade Thanos ui

Signed-off-by: jojohappy <sarahdj0917@gmail.com>

* Upgrade thanos ui

Signed-off-by: jojohappy <sarahdj0917@gmail.com>

* Add CHANGELOG

Signed-off-by: jojohappy <sarahdj0917@gmail.com>

* Update gitignore

Signed-off-by: jojohappy <sarahdj0917@gmail.com>

* Fixed missing template function

Signed-off-by: jojohappy <sarahdj0917@gmail.com>

* Update CHANGELOG

Signed-off-by: jojohappy <sarahdj0917@gmail.com>

Author: jojohappy

.gitignore

@@ -1,6 +1,6 @@
 /prometheus
 /thanos
-vendor/
+/vendor/
 
 # Ignore minikube setup working dirs.
 kube/bin

CHANGELOG.md

@@ -11,7 +11,23 @@ We use *breaking* word for marking changes that are not backward compatible (rel
 
 ## Unreleased
 
+### Changed
+
+- [#1066](https://github.com/improbable-eng/thanos/pull/1066) Upgrade Thanos ui to Prometheus v2.9.1.
+
+  Changes from the upstream:
+  * query:
+    - [ENHANCEMENT] Update moment.js and moment-timezone.js [PR #4679](https://github.com/prometheus/prometheus/pull/4679)
+    - [ENHANCEMENT] Support to query elements by a specific time [PR #4764](https://github.com/prometheus/prometheus/pull/4764)
+    - [ENHANCEMENT] Update to Bootstrap 4.1.3 [PR #5192](https://github.com/prometheus/prometheus/pull/5192)
+    - [BUGFIX] Limit number of merics in prometheus UI [PR #5139](https://github.com/prometheus/prometheus/pull/5139)
+    - [BUGFIX] Web interface Quality of Life improvements [PR #5201](https://github.com/prometheus/prometheus/pull/5201)
+  * rule:
+    - [ENHANCEMENT] Improve rule views by wrapping lines [PR #4702](https://github.com/prometheus/prometheus/pull/4702)
+    - [ENHANCEMENT] Show rule evaluation errors on rules page [PR #4457](https://github.com/prometheus/prometheus/pull/4457)
+    
 ### Fixed
+
 - [#1144](https://github.com/improbable-eng/thanos/pull/1144) Query/API: properly pass the downsampling parameter. Before this, wrong max resolution of the metrics data might have been selected.
 
 ## [v0.4.0](https://github.com/improbable-eng/thanos/releases/tag/v0.4.0) - 2019.05.3

pkg/ui/bindata.go

@@ -8,6 +8,7 @@ import (
 	"path"
 	"regexp"
 	"sort"
+	"time"
 
 	"github.com/go-kit/kit/log"
 	thanosrule "github.com/improbable-eng/thanos/pkg/rule"
@@ -37,6 +38,9 @@ func NewRuleUI(logger log.Logger, ruleManagers map[storepb.PartialResponseStrate
 
 func ruleTmplFuncs(queryURL string) template.FuncMap {
 	return template.FuncMap{
+		"since": func(t time.Time) time.Duration {
+			return time.Since(t) / time.Millisecond * time.Millisecond
+		},
 		"alertStateToClass": func(as rules.AlertState) string {
 			switch as {
 			case rules.StateInactive:
@@ -49,6 +53,16 @@ func ruleTmplFuncs(queryURL string) template.FuncMap {
 				panic("unknown alert state")
 			}
 		},
+		"ruleHealthToClass": func(rh rules.RuleHealth) string {
+			switch rh {
+			case rules.HealthUnknown:
+				return "warning"
+			case rules.HealthGood:
+				return "success"
+			default:
+				return "danger"
+			}
+		},
 		"queryURL": func() string { return queryURL },
 		"reReplaceAll": func(pattern, repl, text string) string {
 			re := regexp.MustCompile(pattern)

pkg/ui/rule.go

@@ -21,6 +21,7 @@ div.show-annotations button {
   border: none;
   outline: none;
   padding: 0;
+  color: inherit;
 }
 
 div.show-annotations.is-checked {

pkg/ui/static/css/alerts.css

@@ -6,6 +6,31 @@ body {
   font-size: 11px;
 }
 
+div.query-history {
+  font-size: 0.8em;
+  padding-top: 1em;
+}
+
+div.query-history:hover {
+  cursor: pointer;
+}
+
+div.query-history button {
+  background-color: transparent;
+  border: none;
+  outline: none;
+  padding: 0;
+  color: inherit;
+}
+
+div.query-history.is-checked {
+  color: #286090;
+}
+
+div.page-options {
+  display: flex;
+}
+
 .graph_wrapper {
   margin-top: 12px;
 }
@@ -130,12 +155,7 @@ input[name="end_input"], input[name="range_input"] {
   margin-right: -1px;
 }
 
-.error {
-  padding: 5px;
-  margin: 2px;
-}
-
-.warnings {
+.error, .warning {
   padding: 5px;
   margin: 2px;
 }
@@ -160,12 +180,16 @@ input[name="end_input"], input[name="range_input"] {
 
 .prometheus_input_group .btn {
   font-size: 0.8em;
+  border-color: #ccc;
+}
+
+.prometheus_input_group .timepicker-picker .btn {
+  border-color: transparent;
 }
 
 .prometheus_input_group .input {
   width: 100px;
-  height: 29px;
-  padding: 6px 12px;
+  padding: 5px 12px 6px 12px;
   font-size: 14px;
   line-height: 1.42857143;
   color: #555;
@@ -189,11 +213,15 @@ input[name="end_input"], input[name="range_input"] {
 }
 
 .expression_select {
-  width: 210px !important;
+  width: 220px !important;
   margin-left: 7px;
 }
 
 .graph_container .rickshaw_legend {
   background-color: #222222;
   border-radius: 0;
 }
+
+li.active, .dropdown-item:focus, .dropdown-item:hover {
+  background-color: steelblue;
+}

pkg/ui/static/css/graph.css

@@ -1,6 +1,6 @@
-/* Move down content because we have a fixed navbar that is 50px tall */
+/* Move down content because we have a fixed navbar that is 50px tall with 20px padding */
 body {
-  padding-top: 50px;
+  padding-top: 70px;
   padding-bottom: 20px;
 }
 
@@ -20,3 +20,12 @@ body {
   max-width: none;
   text-align: left;
 }
+
+.label {
+  white-space: normal;
+}
+
+/* The navbar adds horizontal padding already */
+.navbar .container-fluid {
+    padding: 0;
+}

pkg/ui/static/css/prometheus.css

@@ -5,7 +5,7 @@ table th tr td h2 {
   font-size: 26px;
 }
 .rule_cell {
- white-space: pre;
+ white-space: pre-wrap;
  background-color: #F5F5F5;
  display: block;
  font-family: monospace;