prometheus/web/blob/static/js/graph_template.handlebar
Julius Volz cf2a7a7ca9 Use v1 API for querying.
Also remove hidden input fields that are not used anymore, because the
query params are now passed as JSON to the AJAX function. This also has
the wonderful side effect that we're no longer sending all the other
non-hidden fields along to the query endpoints anymore.
2015-06-25 15:05:04 +02:00

129 lines
6 KiB
Plaintext

<div id="graph_wrapper{{id}}" class="graph_wrapper">
<form class="query_form form-inline">
<div class="row">
<div class="col-lg-10">
<textarea rows="1" placeholder="Expression (press Shift+Enter for newlines)" name="expr" id="expr{{id}}" class="form-control expression_input" data-provide="typeahead" autocomplete="off">{{expr}}</textarea>
</div>
<div class="col-lg-2">
<div class="eval_stats pull-right"></div>
<img src="{{ pathPrefix }}/static/img/ajax-loader.gif" class="spinner" alt="ajax_spinner">
</div>
</div>
<div class="row">
<div class="col-lg-10">
<input class="btn btn-primary execute_btn" type="submit" value="Execute" name="submit">
<select class="form-control expression_select" name="insert_metric">
<option value="">- insert metric at cursor -</option>
</select>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="error alert alert-danger"></div>
</div>
</div>
<!--
TODO: Convert this to Bootstrap navbar. This requires Javascript
refresh.
-->
<div class="row">
<div class="col-lg-12">
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"><a href="#graph{{id}}" aria-controls="graph{{id}}" role="tab" data-toggle="tab">Graph</a></li>
<li role="presentation" class="active"><a href="#console{{id}}" aria-controls="console{{id}}" role="tab" data-toggle="tab">Console</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane graph_container reload" id="graph{{id}}">
<div class="clearfix">
<!-- Extracted to force grouped inputs. -->
<div class="prometheus_input_group range_input pull-left">
<button
class="btn btn-default pull-left"
type="button"
name="dec_range"
title="Shrink the time range.">
<i class="glyphicon glyphicon-minus"></i>
</button>
<input
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-default pull-left"
type="button"
name="inc_range"
title="Grow the time range.">
<i class="glyphicon glyphicon-plus"></i>
</button>
</div>
<!-- Extracted to force grouped inputs. -->
<div class="prometheus_input_group pull-left">
<button
class="btn btn-default pull-left"
type="button"
name="dec_end"
title="Rewind the end time.">
<i class="glyphicon glyphicon-backward"></i>
</button>
<input
class="pull-left date_input input"
id="end{{id}}"
title="End time of graph"
placeholder="Until"
data-format="yyyy-MM-dd"
type="text"
name="end_input"
size="16"
value="{{end}}">
<button
class="btn btn-default pull-left"
type="button"
name="inc_end"
title="Advance the end time.">
<i class="glyphicon glyphicon-forward"></i>
</button>
</div>
<div class="prometheus_input_group pull-left">
<input class="input" title="Resolution in seconds" placeholder="Res. (s)" type="text" name="step_input" id="step_input{{id}}" value="{{step_input}}" size="6">
</div>
<div class="prometheus_input_group pull-left">
<button type="button" class="btn btn-default stacked_btn">
<i class="glyphicon"></i> stacked
</button>
<input type="hidden" name="stacked" value="{{stacked}}">
</div>
</div>
<div class="graph_area"></div>
<div class="legend"></div>
</div>
<div role="tabpanel" class="tab-pane active console reload" id="console{{id}}">
<table class="table table-condensed table-hover console_table">
<thead>
<th>Element</th>
<th>Value</th>
</thead>
<tbody>
<tr><td colspan="2"><i>no data</i></td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</form>
</div>