<div id="graph_wrapper{{id}}" class="graph_wrapper"> <form action="/api/query_range" method="GET" class="query_form"> <div class="grouping_box"> <div class="head"> <div class="expr"> <span class="input-append"> <input placeholder="Expression" type="text" name="expr" id="expr{{id}}" value="{{expr}}" class="input-xxlarge"> <input class="btn btn-primary" type="submit" value="Execute" name="submit"> </span> <select name="insert_metric"> <option value="">- Insert Metric at Cursor -</option> </select> </div> </div> <div class="eval_stats"></div> <img src="/static/img/ajax-loader.gif" class="spinner" alt="ajax_spinner"> </div> <!-- TODO: Convert this to Bootstrap navbar. This requires Javascript refresh. --> <div class="grouping_box tabs"> <ul> <li><a href="#graph{{id}}">Graph</a></li> <li><a href="#console{{id}}">Tabular</a></li> </ul> <div id="graph{{id}}" class="graph_container reload"> <div class="config"> <label for="range_input{{id}}">Range:</label> <!-- Extracted to force grouped inputs. --> <input type="hidden" name="range"> <div class="input-prepend input-append"> <button class="btn btn-mini" type="button" name="dec_range" title="Shrink the time range."> <i class="icon-minus"></i> </button> <input class="input-mini" id="range_input{{id}}" title="Time range of graph" type="text" name="range_input" size="3" value="{{range_input}}"> <button class="btn btn-mini" type="button" name="inc_range" title="Grow the time range."> <i class="icon-plus"></i> </button> </div> <!-- Extracted to force grouped inputs. --> <input type="hidden" name="end"> <div class="input-prepend input-append"> <button class="btn btn-mini" type="button" name="dec_end" title="Rewind the end time."> <i class="icon-backward"></i> </button> <input class="input-medium" id="end{{id}}" title="End time of graph" placeholder="Until" type="text" name="end_input" size="16" value="{{end}}"> <button class="btn btn-mini" type="button" name="inc_end" title="Advance the end time."> <i class="icon-forward"></i> </button> </div> <input class="input-small" title="Resolution in seconds" placeholder="Res. (s)" type="text" name="step_input" id="step_input{{id}}" value="{{step_input}}" size="6"> <input type="hidden" name="step"> <label class="checkbox inline"> <input type="checkbox" name="stacked" {{stacked_checked}}> Stacked </label> </div> <div class="graph_area"> <div class="y_axis"></div> <div class="graph"></div> </div> <div class="legend"></div> </div> <div id="console{{id}}" class="console reload"> <table class="table table-condensed table-bordered table-hover console_table"> <thead> <th>Element</th> <th>Value</th> </thead> <tbody> </tbody> </table> </div> </div> </form> </div>