prometheus/web/static/js/graph_template.handlebar
2013-07-24 12:28:59 +02:00

120 lines
4.6 KiB
Plaintext

<div id="graph_wrapper{{id}}" class="graph_wrapper">
<form action="/api/query_range" method="GET" class="query_form">
<div class="grouping_box">
<div class="head">
<div class="expr">
<span class="input-append">
<input placeholder="Expression" type="text" name="expr" id="expr{{id}}" value="{{expr}}" class="input-xxlarge">
<input class="btn btn-primary" type="submit" value="Execute" name="submit">
</span>
<select name="insert_metric">
<option value="">- Insert Metric at Cursor -</option>
</select>
</div>
</div>
<div class="eval_stats"></div>
<img src="/static/img/ajax-loader.gif" class="spinner" alt="ajax_spinner">
</div>
<!--
TODO: Convert this to Bootstrap navbar. This requires Javascript
refresh.
-->
<div class="grouping_box tabs">
<ul>
<li><a href="#graph{{id}}">Graph</a></li>
<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>
<!-- Extracted to force grouped inputs. -->
<input type="hidden" name="range">
<div class="input-prepend input-append">
<button
class="btn btn-mini"
type="button"
name="dec_range"
title="Shrink the time range.">
<i class="icon-minus"></i>
</button>
<input
class="input-mini"
id="range_input{{id}}"
title="Time range of graph"
type="text"
name="range_input"
size="3"
value="{{range_input}}">
<button
class="btn btn-mini"
type="button"
name="inc_range"
title="Grow the time range.">
<i class="icon-plus"></i>
</button>
</div>
<!-- Extracted to force grouped inputs. -->
<input type="hidden" name="end">
<div class="input-prepend input-append">
<button
class="btn btn-mini"
type="button"
name="dec_end"
title="Rewind the end time.">
<i class="icon-backward"></i>
</button>
<input
class="input-medium"
id="end{{id}}"
title="End time of graph"
placeholder="Until"
type="text"
name="end_input"
size="16"
value="{{end}}">
<button
class="btn btn-mini"
type="button"
name="inc_end"
title="Advance the end time.">
<i class="icon-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">
<input type="hidden" name="step">
<label class="checkbox inline">
<input type="checkbox" name="stacked" {{stacked_checked}}>
Stacked
</label>
</div>
<div class="graph_area">
<div class="y_axis"></div>
<div class="graph"></div>
</div>
<div class="legend"></div>
</div>
<div id="console{{id}}" class="console reload">
<table class="table table-condensed table-bordered table-hover console_table">
<thead>
<th>Element</th>
<th>Value</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</form>
</div>