prometheus: modernize console + alerts

Signed-off-by: Robert Günzler <r@gnzler.io>

1 files changed, 190 insertions, 0 deletions

diff --git a/bundles/prometheus/files/console_assets/prom_console.css b/bundles/prometheus/files/console_assets/prom_console.css
new file mode 100644
index 0000000..e5b8be7
--- /dev/null
+++ b/bundles/prometheus/files/console_assets/prom_console.css
@@ -0,0 +1,190 @@
+.navbar {
+  margin-bottom: 20px;
+}
+
+div.prom_lhs_menu {
+  float: left;
+  margin-right: 2ex;
+  background: #222;
+  min-height: 100%;
+  overflow: auto;
+  width: auto;
+  margin-left: -40px;
+  margin-top: 55px;
+  height: 100%;
+}
+.prom_lhs_menu_nav {
+  padding-right: 0;
+}
+.prom_lhs_menu ul {
+  list-style: none;
+  padding-left: .5ex;
+  margin-left: .5ex;
+}
+.prom_lhs_menu li {
+  padding-right: 1ex;
+  padding-left: 1ex;
+  font-size: 0.9rem;
+}
+.prom_lhs_menu a,
+.prom_lhs_menu li {
+  color: #999999;
+  display: block;
+}
+.prom_lhs_menu a {
+  text-decoration: none;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.prom_lhs_menu_selected a {
+  pointer-events: none;
+  cursor: default;
+}
+li.prom_lhs_menu_selected {
+  background: #555555;
+  background-clip: padding-box;
+}
+.prom_lhs_menu li:hover {
+  background: #666666;
+}
+
+.prom_console_rhs {
+  float: right;
+  margin-left: 1ex;
+  height: 100%;
+  padding-top: 55px;
+}
+.prom_console_rhs table {
+  margin-top: 1ex;
+  margin-bottom: 32px;  /* Space for time control. */
+}
+.prom_console_rhs th {
+  text-align: center;
+}
+.prom_console_rhs td:nth-child(2) {
+  text-align: right;
+}
+
+.prom_console_content {
+  overflow: visible;
+  margin-bottom: 32px;  /* Space for time control. */
+  padding-top: 70px;   /* Space for navbar */
+}
+
+a.prom_query_drilldown {
+  text-decoration: none;
+  color: black;
+}
+a.prom_query_drilldown:hover, a.prom_query_drilldown:active {
+  text-decoration: underline;
+}
+
+#samplesGraph {
+  width: 100%;
+}
+
+.prom_content_div {
+  width: 80%;
+}
+
+.prom_graph_table {
+}
+.rickshaw_legend {
+ padding: 2px;
+ margin-top: 1px;
+}
+.rickshaw_legend li {
+ min-width: 0;
+}
+.rickshaw_legend ul li {
+ list-style-type: none;
+ display: inline-block;
+}
+.rickshaw_graph {
+  width: 100%;
+  padding: 0;
+}
+.prom_graph_hover_flipped.x_label {
+  right: 0;
+}
+.prom_graph_hover_flipped.item {
+  right: 10px;
+}
+.rickshaw_graph .detail .prom_graph_hover_flipped.item:before {
+  content: "\25b8";
+  left: auto;
+  right: 1px;
+  font-size: 0.8em;
+}
+.prom_graph_ytitle {
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  font-size: 11px;
+  font-family: Arial;
+  max-width: 13px;
+  white-space: nowrap;
+}
+.prom_graph_xtitle {
+  text-align: center;
+  font-size: 11px;
+  font-family: Arial;
+}
+.prom_graph_loading {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+.prom_graph_error {
+  font-family: Arial;
+  text-align: center;
+}
+a.prom_graph_link {
+  text-decoration: none;
+  color: black;
+}
+
+
+.prom_graph_timecontrol {
+  background: #222;
+  position: fixed;
+  padding: 2px;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  width: 100%;
+}
+
+.prom_graph_timecontrol_inner {
+  text-align: center;
+  height: 31px;
+}
+
+.prom_graph_timecontrol_group {
+  display: inline-block;
+  margin: 1px 5px;
+}
+.prom_graph_timecontrol_group .btn {
+  font-size: 0.8em;
+  border-radius: 0;
+  height: 29px;
+  border-color: #ccc;
+}
+
+.prom_graph_timecontrol_group .input {
+  height: 29px;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #555;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #ccc;
+  text-align: center;
+}
+
+.prom_graph_timecontrol_group .dropdown-menu {
+  min-width: 90px;
+}
+.prom_graph_timecontrol_group .dropdown-menu li {
+  text-align: center;
+}