Upgrade ui

.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/rule.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/static/css/alerts.css

@@ -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/graph.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/prometheus.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/rules.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;