mirror of
https://github.com/prometheus/prometheus.git
synced 2025-01-03 09:57:26 -08:00
15c58c0f3e
This enables metric name autocompletion for every word in an expression, not just the very first one. It would be great to also support all language keywords during autocompletion in the future.
126 lines
5.8 KiB
Plaintext
126 lines
5.8 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">
|
|
</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>
|