mirror of
https://github.com/prometheus/prometheus.git
synced 2024-11-09 23:24:05 -08:00
Adjust for bootstrap3. Remove long lists from LHS menu.
Put in a table on the node page instead.
This commit is contained in:
Brian Brazil
parent
39d20140c8
commit
2d8bfa0ced
|
|
@ -2,29 +2,38 @@
|
|||
|
||||
{{/* Navbar, should be passed . */}}
|
||||
{{ define "navbar" }}
|
||||
<div class="navbar navbar-inverse navbar-static-top">
|
||||
<div class="navbar-inner">
|
||||
<ul class="navbar-nav nav">
|
||||
<a class="brand" href="/">Prometheus</a>
|
||||
<li><a href="/alerts">Alerts</a></li>
|
||||
<!-- Add in navbar links here -->
|
||||
<li><a href="https://pagerduty.com/">PagerDuty</a></li>
|
||||
<nav class="navbar navbar-inverse navbar-static-top">
|
||||
<div class="container-fluid">
|
||||
<!-- Brand and toggle get grouped for better mobile display -->
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="/">Prometheus</a>
|
||||
</div>
|
||||
|
||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
||||
<ul class="nav navbar-nav">
|
||||
<li><a href="/alerts">Alerts</a></li>
|
||||
<li><a href="https://www.pagerduty.com/">PagerDuty</a></li>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{{ end }}
|
||||
|
||||
{{/* LHS menu, should be passed . */}}
|
||||
{{ define "menu" }}
|
||||
<div class="prom_lhs_menu">
|
||||
<ul>
|
||||
{{ $dot := . }}
|
||||
|
||||
{{ template "_menuItem" (args . "index.html.example" "Overview") }}
|
||||
{{ template "_menuItem" (args . "node.html" "Node") }}
|
||||
{{ if match "^node" .Path }}
|
||||
<ul>
|
||||
{{ if .Params.instance }}
|
||||
<ul>
|
||||
<li {{ if eq .Path "node-overview.html" }}class="prom_lhs_menu_selected"{{end}}>
|
||||
<a href="node-overview.html?instance={{ .Params.instance }}">{{ reReplaceAll "(.*?://)([^:/]+?)(:\\d+)?/.*" "$2" .Params.instance }}</a>
|
||||
</li>
|
||||
|
|
@ -36,12 +45,8 @@
|
|||
<a href="node-disk.html?instance={{ .Params.instance }}">Disk</a>
|
||||
</li>
|
||||
</ul>
|
||||
{{ else }}
|
||||
{{ range query "up{job='node'}" | sortByLabel "instance" }}
|
||||
<li><a href="node-overview.html?instance={{ .Labels.instance }}">{{ reReplaceAll "(.*?://)([^:/]+?)(:\\d+)?/.*" "$2" .Labels.instance }}</a></li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
{{/* Load Prometheus console library JS/CSS. Should go in <head> */}}
|
||||
{{define "prom_console_head"}}
|
||||
<link type="text/css" rel="stylesheet" href="/static/vendor/rickshaw/rickshaw.min.css">
|
||||
<link type="text/css" rel="stylesheet" href="/static/vendor/bootstrap/css/bootstrap.css">
|
||||
<link type="text/css" rel="stylesheet" href="/static/vendor/bootstrap-3.3.1/css/bootstrap.css">
|
||||
<link type="text/css" rel="stylesheet" href="/static/css/prom_console.css">
|
||||
<script src="/static/vendor/rickshaw/vendor/d3.min.js"></script>
|
||||
<script src="/static/vendor/rickshaw/vendor/d3.layout.min.js"></script>
|
||||
<script src="/static/vendor/rickshaw/rickshaw.min.js"></script>
|
||||
<script src="/static/vendor/js/jquery.min.js"></script>
|
||||
<script src="/static/vendor/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="/static/vendor/bootstrap-3.3.1/js/bootstrap.min.js"></script>
|
||||
<script src="/static/js/prom_console.js"></script>
|
||||
{{end}}
|
||||
|
||||
|
|
@ -42,7 +42,6 @@ renderTemplate is the name of the template to use to render the value.
|
|||
|
||||
{{ define "prom_path" }}/consoles/{{.Path}}?{{range $param, $value := .Params}}{{$param}}={{$value}}&{{end}}{{ end }}"
|
||||
|
||||
{{/* Top and bottom of table on RHS */}}
|
||||
{{define "prom_right_table_head"}}
|
||||
<div class="prom_console_rhs">
|
||||
<table class="table table-bordered table-hover table-condensed">
|
||||
|
|
@ -53,45 +52,47 @@ renderTemplate is the name of the template to use to render the value.
|
|||
|
||||
{{end}}
|
||||
|
||||
{{/* Top and bottom of main content */}}
|
||||
{{define "prom_content_head"}}
|
||||
<div class="prom_console_content">
|
||||
<div class="container">
|
||||
{{template "prom_graph_timecontrol" .}}
|
||||
{{end}}
|
||||
{{define "prom_content_tail"}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{define "prom_graph_timecontrol"}}
|
||||
<div class="prom_graph_timecontrol">
|
||||
<div class="prom_graph_timecontrol_inner">
|
||||
<label for="prom_graph_duration">Range:</label>
|
||||
<div class="input-prepend input-append">
|
||||
<button class="btn btn-mini" type="button" id="prom_graph_duration_shrink" title="Shrink the time range.">
|
||||
<i class="icon-minus"></i>
|
||||
<div class="prom_graph_timecontrol_group">
|
||||
<button class="btn btn-default pull-left" type="button" id="prom_graph_duration_shrink" title="Shrink the time range.">
|
||||
<i class="glyphicon glyphicon-minus"></i>
|
||||
</button>
|
||||
<input class="input-mini" title="Time range of graph" type="text" id="prom_graph_duration">
|
||||
<button class="btn btn-mini" type="button" id="prom_graph_duration_grow" title="Grow the time range.">
|
||||
<i class="icon-plus"></i>
|
||||
<input class="input pull-left" size="3" title="Time range of graph" type="text" id="prom_graph_duration">
|
||||
<button class="btn btn-default pull-left" type="button" id="prom_graph_duration_grow" title="Grow the time range.">
|
||||
<i class="glyphicon glyphicon-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
<label for="prom_graph_duration">End:</label>
|
||||
<div class="input-prepend input-append">
|
||||
<button class="btn btn-mini" type="button" id="prom_graph_time_back" title="Rewind the end time.">
|
||||
<i class="icon-backward"></i>
|
||||
|
||||
<div class="prom_graph_timecontrol_group">
|
||||
<button class="btn btn-default pull-left" type="button" id="prom_graph_time_back" title="Rewind the end time.">
|
||||
<i class="glyphicon glyphicon-backward"></i>
|
||||
</button>
|
||||
<input class="input-medium" title="End time of graph" placeholder="Until" type="text" id="prom_graph_time_end" size="16" value="">
|
||||
<button class="btn btn-mini" type="button" id="prom_graph_time_forward" title="Advance the end time.">
|
||||
<i class="icon-forward"></i>
|
||||
<input class="input pull-left" title="End time of graph" placeholder="Until" type="text" id="prom_graph_time_end" size="16" value="">
|
||||
<button class="btn btn-default pull-left" type="button" id="prom_graph_time_forward" title="Advance the end time.">
|
||||
<i class="glyphicon glyphicon-forward"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="input-prepend input-append">
|
||||
<div class="btn-group dropup prom_graph_timecontrol_refresh">
|
||||
<button type="button" class="btn btn-mini" id="prom_graph_refresh_button">
|
||||
<span class="icon-repeat"></span>
|
||||
(<span id="prom_graph_refresh_button_value">Off</span>)
|
||||
</div>
|
||||
|
||||
<div class="prom_graph_timecontrol_group">
|
||||
<div class="btn-group dropup prom_graph_timecontrol_refresh pull-left">
|
||||
<button type="button" class="btn btn-default pull-left" id="prom_graph_refresh_button" title="Refresh.">
|
||||
<i class="glyphicon glyphicon-repeat"></i>
|
||||
<span class="icon-repeat"></span>
|
||||
(<span id="prom_graph_refresh_button_value">Off</span>)
|
||||
</button>
|
||||
<button type="button" class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
|
||||
<button type="button" class="btn btn-default pull-left dropdown-toggle" data-toggle="dropdown" title="Set autorefresh." aria-expanded="false">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" id="prom_graph_refresh_intervals" role="menu">
|
||||
|
|
|
|||
|
|
@ -10,7 +10,25 @@
|
|||
{{template "prom_content_head" .}}
|
||||
<h1>Node</h1>
|
||||
|
||||
Choose an instance on the left.
|
||||
<table class="table table-condensed table-striped table-bordered" style="width: 0%">
|
||||
<tr>
|
||||
<th>Node</th>
|
||||
<th>Up</th>
|
||||
<th>CPU<br/>Used</th>
|
||||
<th>Memory<br/> Available</th>
|
||||
</tr>
|
||||
{{ range query "up{job='node'}" | sortByLabel "instance" }}
|
||||
<tr>
|
||||
<td><a href="node-overview.html?instance={{ .Labels.instance }}">{{ reReplaceAll "(.*?://)([^:/]+?)(:\\d+)?/.*" "$2" .Labels.instance }}</a></td>
|
||||
<td{{ if eq (. | value) 1.0 }}>Yes{{ else }} class="alert-danger">No{{ end }}</td>
|
||||
<td>{{ template "prom_query_drilldown" (args (printf "100 * (1 - avg by(instance)(rate(node_cpu{job='node',mode='idle',instance='%s'}[5m])))" .Labels.instance) "%" "printf.3g") }}</td>
|
||||
<td>{{ template "prom_query_drilldown" (args (printf "node_memory_MemTotal{job='node',instance='%s'} - node_memory_MemFree{job='node',instance='%s'} - node_memory_Cached{job='node',instance='%s'}" .Labels.instance .Labels.instance .Labels.instance) "B" "humanize1024") }}</td>
|
||||
</tr>
|
||||
{{ else }}
|
||||
<tr><td colspan=4>No nodes found.</td></tr>
|
||||
{{ end }}
|
||||
|
||||
|
||||
{{template "prom_content_tail" .}}
|
||||
|
||||
{{template "tail"}}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
.prom_lhs_menu {
|
||||
.navbar {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
div.prom_lhs_menu {
|
||||
float: left;
|
||||
margin-right: 2ex;
|
||||
background: #000000;
|
||||
background: #222;
|
||||
min-height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
@ -26,12 +30,11 @@
|
|||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
.prom_lhs_menu_selected {
|
||||
li.prom_lhs_menu_selected {
|
||||
background: #555555;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.prom_lhs_menu span:hover,
|
||||
.prom_lhs_menu a:hover {
|
||||
.prom_lhs_menu li:hover {
|
||||
background: #666666;
|
||||
}
|
||||
|
||||
|
|
@ -56,15 +59,17 @@
|
|||
margin-bottom: 32px; /* Space for time control. */
|
||||
}
|
||||
|
||||
.prom_query_drilldown {
|
||||
a.prom_query_drilldown {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
.prom_query_drilldown:hover, a.prom_query_drilldown:active {
|
||||
a.prom_query_drilldown:hover, a.prom_query_drilldown:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
.prom_graph_table {
|
||||
}
|
||||
.rickshaw_legend {
|
||||
padding: 2px;
|
||||
margin-top: 1px;
|
||||
|
|
@ -121,56 +126,45 @@ a.prom_graph_link {
|
|||
|
||||
|
||||
.prom_graph_timecontrol {
|
||||
background: #000000;
|
||||
background: #222;
|
||||
position: fixed;
|
||||
padding: 2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
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 button {
|
||||
font-size: 10pt;
|
||||
margin-right: .3em;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
.prom_graph_timecontrol_group .btn {
|
||||
font-size: 0.8em;
|
||||
border-radius: 0;
|
||||
height: 29px;
|
||||
}
|
||||
.prom_graph_timecontrol_refresh button {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
.prom_graph_timecontrol_refresh .dropdown-menu {
|
||||
min-width: 70px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.prom_graph_timecontrol input {
|
||||
font-size: 10pt;
|
||||
margin-left: -4px;
|
||||
margin-right: -4px;
|
||||
|
||||
.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 label {
|
||||
display: inline;
|
||||
color: #999999;
|
||||
|
||||
.prom_graph_timecontrol_group .dropdown-menu {
|
||||
min-width: 90px;
|
||||
}
|
||||
.prom_graph_timecontrol .input-append {
|
||||
margin: 2px;
|
||||
}
|
||||
.prom_graph_timecontrol .input-append .btn:first-child i {
|
||||
margin-right: 4px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.prom_graph_timecontrol .input-append .btn:last-child i {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.prom_graph_timecontrol .input-append i {
|
||||
padding-top: -4px;
|
||||
margin-top: 0;
|
||||
.prom_graph_timecontrol_group .dropdown-menu li {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue