1        <div id="graph_wrapper{{id}}" class="graph_wrapper">
2          <form class="query_form form-inline">
3            <div class="row">
4              <div class="col-lg-10">
5                <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>
6              </div>
7              <div class="col-lg-2">
8                <div class="eval_stats pull-right"></div>
9                <img src="{{ pathPrefix }}/static/img/ajax-loader.gif?v={{ buildVersion }}" class="spinner" alt="ajax_spinner">
10              </div>
11            </div>
12            <div class="row">
13              <div class="col-lg-10">
14                <input class="btn btn-primary execute_btn" type="submit" value="Execute" name="submit">
15                <select class="form-control expression_select" name="insert_metric">
16                  <option value="">- insert metric at cursor -</option>
17                </select>
18              </div>
19            </div>
20            <div class="row">
21              <div class="col-lg-12">
22                <div class="error alert alert-danger"></div>
23              </div>
24            </div>
25
26            <!--
27              TODO: Convert this to Bootstrap navbar.  This requires Javascript
28                    refresh.
29              -->
30            <div class="row">
31              <div class="col-lg-12">
32                <div role="tabpanel">
33                  <ul class="nav nav-tabs" role="tablist">
34                    <li role="presentation"><a href="#graph{{id}}" aria-controls="graph{{id}}" role="tab" data-toggle="tab">Graph</a></li>
35                    <li role="presentation" class="active"><a href="#console{{id}}" aria-controls="console{{id}}" role="tab" data-toggle="tab">Console</a></li>
36                  </ul>
37                  <div class="tab-content">
38                    <div role="tabpanel" class="tab-pane graph_container reload" id="graph{{id}}">
39                      <div class="clearfix">
40                        <!-- Extracted to force grouped inputs. -->
41                        <div class="prometheus_input_group range_input pull-left">
42                          <button
43                            class="btn btn-default pull-left"
44                            type="button"
45                            name="dec_range"
46                            title="Shrink the time range.">
47                            <i class="glyphicon glyphicon-minus"></i>
48                          </button>
49                          <input
50                            class="pull-left input"
51                            id="range_input{{id}}"
52                            title="Time range of graph"
53                            type="text"
54                            name="range_input"
55                            size="3"
56                            value="{{range_input}}">
57                          <button
58                              class="btn btn-default pull-left"
59                              type="button"
60                              name="inc_range"
61                              title="Grow the time range.">
62                            <i class="glyphicon glyphicon-plus"></i>
63                          </button>
64                        </div>
65
66                        <!-- Extracted to force grouped inputs. -->
67                        <div class="prometheus_input_group pull-left">
68
69                          <button
70                              class="btn btn-default pull-left"
71                              type="button"
72                              name="dec_end"
73                              title="Rewind the end time.">
74                            <i class="glyphicon glyphicon-backward"></i>
75                          </button>
76
77                          <input
78                              class="pull-left date_input input"
79                              id="end{{id}}"
80                              title="End time of graph (UTC)"
81                              placeholder="Until"
82                              data-format="yyyy-MM-dd"
83                              type="text"
84                              name="end_input"
85                              size="16"
86                              value="{{end}}">
87
88                          <button
89                              class="btn btn-default pull-left"
90                              type="button"
91                              name="inc_end"
92                              title="Advance the end time.">
93                            <i class="glyphicon glyphicon-forward"></i>
94                          </button>
95                        </div>
96
97                        <div class="prometheus_input_group pull-left">
98                          <input class="input" title="Resolution in seconds" placeholder="Res. (s)" type="text" name="step_input" id="step_input{{id}}" value="{{step_input}}" size="6">
99                        </div>
100
101                        <div class="prometheus_input_group pull-left">
102                          <button type="button" class="btn btn-default stacked_btn">
103                            <i class="glyphicon"></i> stacked
104                          </button>
105                          <input type="hidden" name="stacked" value="{{stacked}}">
106                        </div>
107                      </div>
108
109                      <div class="graph_area"></div>
110                      <div class="legend"></div>
111                    </div>
112                    <div role="tabpanel" class="tab-pane active console reload" id="console{{id}}">
113                      <table class="table table-condensed table-hover console_table">
114                        <thead>
115                          <th>Element</th>
116                          <th>Value</th>
117                        </thead>
118                        <tbody>
119                          <tr><td colspan="2"><i>no data</i></td></tr>
120                        </tbody>
121                      </table>
122                    </div>
123                  </div>
124                </div>
125              </div>
126            </div>
127            <div class="row">
128              <div class="col-lg-12 text-right">
129                    <a name="remove" href="#">Remove Graph</a>
130              </div>
131            </div>
132          </form>
133        </div>
134