prometheus/web/ui/static/js/graph/graph_template.handlebar
Julius Volz 3470ee1fbf
Make React UI the default, keep old UI under /classic (#8142)
The React app's assets are now served under /assets, while all old
custom web assets (including the ones for console templates) are now
served from /classic/static.

I tested different combinations of --web.external-url and
--web.route-prefix with proxies in front, and I couldn't find a problem
yet with the routing. Console templates also still work.

While migrating old endpoints to /classic, I noticed that /version was
being treated like a lot of the old UI pages, with readiness check
handler in front of it, etc. I kept it in /version and removed that
readiness wrapper, since it doesn't seem to be needed for that endpoint.

Signed-off-by: Julius Volz <julius.volz@gmail.com>
2020-11-03 14:51:48 +01:00

165 lines
7.8 KiB
Plaintext

<div id="graph_wrapper{{id}}" class="graph_wrapper">
<form class="query_form">
<div class="form-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" spellcheck="false">{{expr}}</textarea>
</div>
<div class="col-lg-2">
<div class="eval_stats float-right"></div>
<img src="{{ pathPrefix }}/classic/static/img/ajax-loader.gif?v={{ buildVersion }}" class="spinner" alt="ajax_spinner">
</div>
</div>
<div class="form-inline">
<input class="btn btn-primary execute_btn" type="submit" value="Execute" name="submit">
<select class="custom-select form-control expression_select" name="insert_metric">
<option value="">- insert metric at cursor -</option>
</select>
</div>
<div class="form-row">
<div class="col-lg-12">
<div class="error alert alert-danger"></div>
<div class="warning alert alert-warning"></div>
</div>
</div>
<!--
TODO: Convert this to Bootstrap navbar. This requires JavaScript
refresh.
-->
<div class="form-row">
<div class="col-lg-12 text-right">
<a name="remove" href="#">Remove Graph</a>
</div>
</div>
<div class="form-row">
<div class="col-lg-12">
<div class="list-group" role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation"><a class="nav-link" href="#graph{{id}}" aria-controls="graph{{id}}" role="tab" data-toggle="tab">Graph</a></li>
<li class="nav-item" role="presentation" class="active"><a class="nav-link" 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-light 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-light 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-light 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 (UTC)"
placeholder="Until"
data-format="yyyy-MM-dd"
type="text"
name="end_input"
size="16"
value="{{end}}"><!--
--><button
class="btn btn-light 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-light 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}}">
<div class="clearfix">
<!-- Extracted to force grouped inputs. -->
<div class="prometheus_input_group pull-left">
<button
class="btn btn-light pull-left"
type="button"
name="dec_moment"
title="Rewind the moment.">
<i class="glyphicon glyphicon-backward"></i>
</button>
<input
class="pull-left date_input input"
id="moment{{id}}"
title="Moment of console (UTC)"
placeholder="Moment"
data-format="yyyy-MM-dd"
type="text"
name="moment_input"
size="16"
value="{{moment}}">
<button
class="btn btn-light pull-left"
type="button"
name="inc_moment"
title="Advance the moment.">
<i class="glyphicon glyphicon-forward"></i>
</button>
</div>
</div>
<table class="table table-sm 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>