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