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 { .y_axis {
overflow: hidden;
position: absolute; position: absolute;
top: 1px; top: 1px;
bottom: 0; bottom: 0;
@ -198,10 +199,46 @@ select name="insert_metric" {
} }
input[name="end_input"], input[name="range_input"] { input[name="end_input"], input[name="range_input"] {
margin-left: -4px; margin-left: 4px;
margin-right: -4px; margin-right: 4px;
} }
.error { .error {
margin: 2px; 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> <li><a href="#console{{id}}">Tabular</a></li>
</ul> </ul>
<div id="graph{{id}}" class="graph_container reload"> <div id="graph{{id}}" class="graph_container reload">
<div class="config"> <div>
<label for="range_input{{id}}">Range:</label>
<!-- Extracted to force grouped inputs. --> <!-- Extracted to force grouped inputs. -->
<input type="hidden" name="range"> <input type="hidden" name="range">
<div class="input-prepend input-append"> <div class="prometheus_input_group">
<button <button
class="btn btn-mini" class="btn btn-default pull-left"
type="button" type="button"
name="dec_range" name="dec_range"
title="Shrink the time range."> title="Shrink the time range.">
<i class="icon-minus"></i> <i class="glyphicon glyphicon-minus"></i>
</button> </button>
<input <input
class="input-mini" class="pull-left input"
id="range_input{{id}}" id="range_input{{id}}"
title="Time range of graph" title="Time range of graph"
type="text" type="text"
name="range_input" name="range_input"
size="3" size="3"
value="{{range_input}}"> value="{{range_input}}">
<button <button
class="btn btn-mini" class="btn btn-default pull-left"
type="button" type="button"
name="inc_range" name="inc_range"
title="Grow the time range."> title="Grow the time range.">
<i class="icon-plus"></i> <i class="glyphicon glyphicon-plus"></i>
</button> </button>
</div> </div>
<!-- Extracted to force grouped inputs. --> <!-- Extracted to force grouped inputs. -->
<input type="hidden" name="end"> <input type="hidden" name="end">
<div class="input-prepend input-append"> <div class="prometheus_input_group">
<button <button
class="btn btn-mini" class="btn btn-default pull-left"
type="button" type="button"
name="dec_end" name="dec_end"
title="Rewind the end time."> title="Rewind the end time.">
<i class="icon-backward"></i> <i class="glyphicon glyphicon-backward"></i>
</button> </button>
<input <input
class="input-medium" class="pull-left date_input input"
id="end{{id}}" id="end{{id}}"
title="End time of graph" title="End time of graph"
placeholder="Until" placeholder="Until"
@ -83,23 +79,27 @@
value="{{end}}"> value="{{end}}">
<button <button
class="btn btn-mini" class="btn btn-default pull-left"
type="button" type="button"
name="inc_end" name="inc_end"
title="Advance the end time."> title="Advance the end time.">
<i class="icon-forward"></i> <i class="glyphicon glyphicon-forward"></i>
</button> </button>
</div> </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"> <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}}> <input type="checkbox" name="stacked" {{stacked_checked}}>
Stacked Stacked
</label> </label>
</div> </div>
</div>
<div class="graph_area"> <div class="graph_area">
<div class="y_axis"></div> <div class="y_axis"></div>