RepoMirrors
/
prometheus
mirror of https://github.com/prometheus/prometheus
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

graph controls

This commit is contained in:
Stuart Nelson 2015-01-09 13:55:01 +01:00
parent 8ce89f0086
commit 46f7bd2820
2 changed files with 71 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
web/static/css/graph.css
View File

@ -51,6 +51,7 @@ a:active { color: black; }
}
.y_axis {
overflow: hidden;
position: absolute;
top: 1px;
bottom: 0;
@ -198,10 +199,46 @@ select name="insert_metric" {
}
input[name="end_input"], input[name="range_input"] {
margin-left: -4px;
margin-right: -4px;
margin-left: 4px;
margin-right: 4px;
}
.error {
margin: 2px;
}
.btn {
border-radius: 0;
}
.prometheus_input_group {
display: inline-block;
margin: 10px 0;
overflow: auto;
}
.prometheus_input_group .prometheus_checkbox {
height: 25px;
line-height: 2;
}
.prometheus_input_group .input {
width: 100px;
height: 29px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.prometheus_input_group .date_input {
width: 200px;
}

38
web/static/js/graph_template.handlebar
View File

@ -28,52 +28,48 @@
<li><a href="#console{{id}}">Tabular</a></li>
</ul>
<div id="graph{{id}}" class="graph_container reload">
<div class="config">
<label for="range_input{{id}}">Range:</label>
<div>
<!-- Extracted to force grouped inputs. -->
<input type="hidden" name="range">
<div class="input-prepend input-append">
<div class="prometheus_input_group">
<button
class="btn btn-mini"
class="btn btn-default pull-left"
type="button"
name="dec_range"
title="Shrink the time range.">
<i class="icon-minus"></i>
<i class="glyphicon glyphicon-minus"></i>
</button>
<input
class="input-mini"
class="pull-left input"
id="range_input{{id}}"
title="Time range of graph"
type="text"
name="range_input"
size="3"
value="{{range_input}}">
<button
class="btn btn-mini"
class="btn btn-default pull-left"
type="button"
name="inc_range"
title="Grow the time range.">
<i class="icon-plus"></i>
<i class="glyphicon glyphicon-plus"></i>
</button>
</div>
<!-- Extracted to force grouped inputs. -->
<input type="hidden" name="end">
<div class="input-prepend input-append">
<div class="prometheus_input_group">
<button
class="btn btn-mini"
class="btn btn-default pull-left"
type="button"
name="dec_end"
title="Rewind the end time.">
<i class="icon-backward"></i>
<i class="glyphicon glyphicon-backward"></i>
</button>
<input
class="input-medium"
class="pull-left date_input input"
id="end{{id}}"
title="End time of graph"
placeholder="Until"
@ -83,23 +79,27 @@
value="{{end}}">
<button
class="btn btn-mini"
class="btn btn-default pull-left"
type="button"
name="inc_end"
title="Advance the end time.">
<i class="icon-forward"></i>
<i class="glyphicon glyphicon-forward"></i>
</button>
</div>
<input class="input-small" title="Resolution in seconds" placeholder="Res. (s)" type="text" name="step_input" id="step_input{{id}}" value="{{step_input}}" size="6">
<div class="prometheus_input_group">
<input class="input" title="Resolution in seconds" placeholder="Res. (s)" type="text" name="step_input" id="step_input{{id}}" value="{{step_input}}" size="6">
<input type="hidden" name="step">
</div>
<label class="checkbox inline">
<div class="prometheus_input_group checkbox">
<label class="prometheus_checkbox">
<input type="checkbox" name="stacked" {{stacked_checked}}>
Stacked
</label>
</div>
</div>
<div class="graph_area">
<div class="y_axis"></div>