prometheus/web/static/graph.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Prometheus Expression Browser</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" />

    <link type="text/css" rel="stylesheet" href="css/prometheus.css">
    <link type="text/css" rel="stylesheet" href="css/graph.css">

    <script src="vendor/jquery-simple-datetimepicker/jquery.simple-dtpicker.js"></script>
    <link type="text/css" rel="stylesheet" href="vendor/jquery-simple-datetimepicker/jquery.simple-dtpicker.css">

    <!-- copy all these CSSen/JSen to our own location -->
    <link type="text/css" rel="stylesheet" href="http://code.shutterstock.com/rickshaw/rickshaw.min.css">
    <script src="http://code.shutterstock.com/rickshaw/vendor/d3.min.js"></script>
    <script src="http://code.shutterstock.com/rickshaw/vendor/d3.layout.min.js"></script>
    <script src="http://code.shutterstock.com/rickshaw/rickshaw.min.js"></script>

    <script src="vendor/js/handlebars.js"></script>
    <script src="vendor/js/jquery.selection.js"></script>
    <script src="vendor/js/jquery.hotkeys.js"></script>

    <script src="js/graph.js"></script>

    <script id="graph_template" type="text/x-handlebars-template">
      <div id="graph_wrapper{{id}}">
        <div class="grouping_box">
          <form action="/api/query_range" method="GET" class="query_form">
            <div class="head">
              <div class="expr">
                <input placeholder="Expression" type="text" name="expr" id="expr{{id}}" size="80" value="{{expr}}">
                <select name="insert_metric">
                    <option value="">- Insert Metric -</option>
                </select>
              </div>
              <div class="config">
                <label for="range_input{{id}}">Range:</label>
                <input type="button" value="-" name="dec_range">
                <input type="text" name="range_input" id="range_input{{id}}" size="2" value="{{range_input}}">
                <input type="hidden" name="range">
                <input type="button" value="+" name="inc_range">

                <input type="button" value="&larr;" name="dec_end">
                <input placeholder="Until" type="text" name="end_input" id="end{{id}}" size="16" value="{{end}}">
                <input type="button" value="&rarr;" name="inc_end">
                <input type="hidden" name="end">

                <input placeholder="Resolution (s)" type="text" name="step_input" id="step_input{{id}}" value="{{step_input}}" size="10">
                <input type="hidden" name="step">
                <span class="opts">
                  <input type="checkbox" name="stacked" id="stacked{{id}}" {{stacked_checked}}>
                  <label for="stacked{{id}}">Stacked</label>
                  <input type="submit" value="Graph" name="submit">
                </span>
              </div>
            </div>
            <div class="eval_stats"></div>
          </form>
          <img src="img/ajax-loader.gif" class="spinner" alt="ajax_spinner">
        </div>
        <div class="grouping_box">
          <div class="graph_container">
            <div class="graph"></div>
            <div class="legend"></div>
          </div>
        </div>
      </div>
    </script>
  </head>

  <body>
    <div id="graph_container">
    </div>
    <div><input type="button" value="Add Graph" id="add_graph"></div>
  </body>
</html>