prometheus/console_libraries/prom.lib

{{/* vim: set ft=html: */}}
{{/* Load Prometheus console library JS/CSS. Should go in <head> */}}
{{ define "prom_console_head" }}
<link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/static/vendor/rickshaw/rickshaw.min.css">
<link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/static/vendor/bootstrap-3.3.1/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/static/css/prom_console.css">
<script src="{{ pathPrefix }}/static/vendor/rickshaw/vendor/d3.v3.js"></script>
<script src="{{ pathPrefix }}/static/vendor/rickshaw/vendor/d3.layout.min.js"></script>
<script src="{{ pathPrefix }}/static/vendor/rickshaw/rickshaw.min.js"></script>
<script src="{{ pathPrefix }}/static/vendor/js/jquery.min.js"></script>
<script src="{{ pathPrefix }}/static/vendor/bootstrap-3.3.1/js/bootstrap.min.js"></script>

<script>var PATH_PREFIX = "{{ pathPrefix }}";</script>
<script src="{{ pathPrefix }}/static/js/prom_console.js"></script>
{{ end }}

{{/* Top of all pages. */}}
{{ define "head" }}
<html>
<head>
{{ template "prom_console_head" }}
</head>
<body>
{{ template "navbar" . }}
{{ template "menu" . }}
{{ end }}

{{ define "__prom_query_drilldown_noop" }}{{ . }}{{ end }}
{{ define "humanize" }}{{ humanize . }}{{ end }}
{{ define "humanizeNoSmallPrefix" }}{{ if and (lt . 1.0) (gt . -1.0) }}{{ printf "%.3g" . }}{{ else }}{{ humanize . }}{{ end }}{{ end }}
{{ define "humanize1024" }}{{ humanize1024 . }}{{ end }}
{{ define "humanizeDuration" }}{{ humanizeDuration . }}{{ end }}
{{ define "printf.1f" }}{{ printf "%.1f" . }}{{ end }}
{{ define "printf.3g" }}{{ printf "%.3g" . }}{{ end }}

{{/* prom_query_drilldown (args expr suffix? renderTemplate?)
Displays the result of the expression, with a link to /graph for it.

renderTemplate is the name of the template to use to render the value.
*/}}
{{ define "prom_query_drilldown" }}
{{ $expr := .arg0 }}{{ $suffix := (or .arg1 "") }}{{ $renderTemplate := (or .arg2 "__prom_query_drilldown_noop") }}
<a class="prom_query_drilldown" href="{{ pathPrefix }}{{ graphLink $expr }}">{{ with query $expr }}{{tmpl $renderTemplate ( . | first | value )}}{{ $suffix }}{{ else }}-{{ end }}</a>
{{ end }}

{{ define "prom_path" }}/consoles/{{ .Path }}?{{ range $param, $value := .Params }}{{ $param }}={{ $value }}&amp;{{ end }}{{ end }}"

{{ define "prom_right_table_head" }}
<div class="prom_console_rhs">
<table class="table table-bordered table-hover table-condensed">
{{ end }}
{{ define "prom_right_table_tail" }}
</table>
</div>
{{ end }}

{{/* RHS table head, pass job name. Should be used after prom_right_table_head. */}}
{{ define "prom_right_table_job_head" }}
<tr>
  <th>{{  .  }}</th>
  <th>{{  template "prom_query_drilldown" (args (printf "sum(up{job='%s'})" .))  }} / {{ template "prom_query_drilldown" (args (printf "count(up{job='%s'})" .)) }}</th>
</tr>
<tr>
  <td>CPU</td>
  <td>{{  template "prom_query_drilldown" (args (printf "avg by(job)(irate(process_cpu_seconds_total{job='%s'}[5m]))" .) "s/s" "humanizeNoSmallPrefix") }}</td>
</tr>
<tr>
  <td>Memory</td>
  <td>{{  template "prom_query_drilldown" (args (printf "avg by(job)(process_resident_memory_bytes{job='%s'})" .) "B" "humanize1024") }}</td>
</tr>
{{ end }}


{{ define "prom_content_head" }}
<div class="prom_console_content">
  <div class="container">
{{ template "prom_graph_timecontrol" . }}
{{ end }}
{{ define "prom_content_tail" }}
  </div>
</div>
{{ end }}

{{ define "prom_graph_timecontrol" }}
<div class="prom_graph_timecontrol">
  <div class="prom_graph_timecontrol_inner">
    <div class="prom_graph_timecontrol_group">
      <button class="btn btn-default pull-left" type="button" id="prom_graph_duration_shrink" title="Shrink the time range.">
        <i class="glyphicon glyphicon-minus"></i>
      </button>
      <input class="input pull-left" size="3" title="Time range of graph" type="text" id="prom_graph_duration">
      <button class="btn btn-default pull-left" type="button" id="prom_graph_duration_grow" title="Grow the time range.">
        <i class="glyphicon glyphicon-plus"></i>
      </button>
    </div>

    <div class="prom_graph_timecontrol_group">
      <button class="btn btn-default pull-left" type="button" id="prom_graph_time_back" title="Rewind the end time.">
        <i class="glyphicon glyphicon-backward"></i>
      </button>
      <input class="input pull-left" title="End time of graph" placeholder="Until" type="text" id="prom_graph_time_end" size="16" value="">
      <button class="btn btn-default pull-left" type="button" id="prom_graph_time_forward" title="Advance the end time.">
        <i class="glyphicon glyphicon-forward"></i>
      </button>
    </div>

    <div class="prom_graph_timecontrol_group">
      <div class="btn-group dropup prom_graph_timecontrol_refresh pull-left">
        <button type="button" class="btn btn-default pull-left" id="prom_graph_refresh_button" title="Refresh.">
          <i class="glyphicon glyphicon-repeat"></i>
          <span class="icon-repeat"></span>
          (<span id="prom_graph_refresh_button_value">Off</span>)
        </button>
        <button type="button" class="btn btn-default pull-left dropdown-toggle" data-toggle="dropdown" title="Set autorefresh." aria-expanded="false">
          <span class="caret"></span>&nbsp;
        </button>
        <ul class="dropdown-menu" id="prom_graph_refresh_intervals" role="menu">
        </ul>
      </div>
    </div>
  </div>
  <script>
  new PromConsole.TimeControl();
  </script>
</div>
{{ end }}

{{/* Bottom of all pages. */}}
{{ define "tail" }}
</body>
</html>
{{ end }}
Console templating library, including graphs. This provides the basic js, css and console template templates required to build dashboards. Included as an example are consoles for the node_exporter. Change-Id: I4cfeea5e9691a9413f74ae98ca32a908df8e4a59 2014-11-20 10:41:25 -08:00			`{{/* vim: set ft=html: */}}`
			`{{/* Load Prometheus console library JS/CSS. Should go in <head> */}}`
Add consoles for haproxy and cloudwatch. Only display jobs in the LHS if they're present. 2015-01-23 09:40:48 -08:00			`{{ define "prom_console_head" }}`
Convert pathPrefix to not have trailing slash. 2015-06-01 03:23:13 -07:00			`<link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/static/vendor/rickshaw/rickshaw.min.css">`
			`<link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/static/vendor/bootstrap-3.3.1/css/bootstrap.min.css">`
			`<link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/static/css/prom_console.css">`
			`<script src="{{ pathPrefix }}/static/vendor/rickshaw/vendor/d3.v3.js"></script>`
			`<script src="{{ pathPrefix }}/static/vendor/rickshaw/vendor/d3.layout.min.js"></script>`
			`<script src="{{ pathPrefix }}/static/vendor/rickshaw/rickshaw.min.js"></script>`
			`<script src="{{ pathPrefix }}/static/vendor/js/jquery.min.js"></script>`
			`<script src="{{ pathPrefix }}/static/vendor/bootstrap-3.3.1/js/bootstrap.min.js"></script>`
Make all paths absolute to support proxies 2015-03-24 14:04:38 -07:00
			`<script>var PATH_PREFIX = "{{ pathPrefix }}";</script>`
Convert pathPrefix to not have trailing slash. 2015-06-01 03:23:13 -07:00			`<script src="{{ pathPrefix }}/static/js/prom_console.js"></script>`
Add consoles for haproxy and cloudwatch. Only display jobs in the LHS if they're present. 2015-01-23 09:40:48 -08:00			`{{ end }}`
Console templating library, including graphs. This provides the basic js, css and console template templates required to build dashboards. Included as an example are consoles for the node_exporter. Change-Id: I4cfeea5e9691a9413f74ae98ca32a908df8e4a59 2014-11-20 10:41:25 -08:00
			`{{/* Top of all pages. */}}`
Add consoles for haproxy and cloudwatch. Only display jobs in the LHS if they're present. 2015-01-23 09:40:48 -08:00			`{{ define "head" }}`
Console templating library, including graphs. This provides the basic js, css and console template templates required to build dashboards. Included as an example are consoles for the node_exporter. Change-Id: I4cfeea5e9691a9413f74ae98ca32a908df8e4a59 2014-11-20 10:41:25 -08:00			`<html>`
			`<head>`
Add consoles for haproxy and cloudwatch. Only display jobs in the LHS if they're present. 2015-01-23 09:40:48 -08:00			`{{ template "prom_console_head" }}`
Console templating library, including graphs. This provides the basic js, css and console template templates required to build dashboards. Included as an example are consoles for the node_exporter. Change-Id: I4cfeea5e9691a9413f74ae98ca32a908df8e4a59 2014-11-20 10:41:25 -08:00			`</head>`
			`<body>`
Add consoles for haproxy and cloudwatch. Only display jobs in the LHS if they're present. 2015-01-23 09:40:48 -08:00			`{{ template "navbar" . }}`
			`{{ template "menu" . }}`
			`{{ end }}`
Console templating library, including graphs. This provides the basic js, css and console template templates required to build dashboards. Included as an example are consoles for the node_exporter. Change-Id: I4cfeea5e9691a9413f74ae98ca32a908df8e4a59 2014-11-20 10:41:25 -08:00
			`{{ define "__prom_query_drilldown_noop" }}{{ . }}{{ end }}`
			`{{ define "humanize" }}{{ humanize . }}{{ end }}`
			`{{ define "humanizeNoSmallPrefix" }}{{ if and (lt . 1.0) (gt . -1.0) }}{{ printf "%.3g" . }}{{ else }}{{ humanize . }}{{ end }}{{ end }}`
			`{{ define "humanize1024" }}{{ humanize1024 . }}{{ end }}`
			`{{ define "humanizeDuration" }}{{ humanizeDuration . }}{{ end }}`
Add cpu count to rhs table Also fix formatting of bounded values to be more readable. 2015-02-19 02:06:23 -08:00			`{{ define "printf.1f" }}{{ printf "%.1f" . }}{{ end }}`
Console templating library, including graphs. This provides the basic js, css and console template templates required to build dashboards. Included as an example are consoles for the node_exporter. Change-Id: I4cfeea5e9691a9413f74ae98ca32a908df8e4a59 2014-11-20 10:41:25 -08:00			`{{ define "printf.3g" }}{{ printf "%.3g" . }}{{ end }}`

			`{{/* prom_query_drilldown (args expr suffix? renderTemplate?)`
			`Displays the result of the expression, with a link to /graph for it.`

			`renderTemplate is the name of the template to use to render the value.`
			`*/}}`
			`{{ define "prom_query_drilldown" }}`
Add cassandra console. Add a template for standard up/total, cpu and memory via standard exports. 2015-01-30 03:27:52 -08:00			`{{ $expr := .arg0 }}{{ $suffix := (or .arg1 "") }}{{ $renderTemplate := (or .arg2 "__prom_query_drilldown_noop") }}`
fix graph links with path prefix 2015-05-18 10:44:40 -07:00			`<a class="prom_query_drilldown" href="{{ pathPrefix }}{{ graphLink $expr }}">{{ with query $expr }}{{tmpl $renderTemplate ( . \| first \| value )}}{{ $suffix }}{{ else }}-{{ end }}</a>`
Console templating library, including graphs. This provides the basic js, css and console template templates required to build dashboards. Included as an example are consoles for the node_exporter. Change-Id: I4cfeea5e9691a9413f74ae98ca32a908df8e4a59 2014-11-20 10:41:25 -08:00			`{{ end }}`

Add cassandra console. Add a template for standard up/total, cpu and memory via standard exports. 2015-01-30 03:27:52 -08:00			`{{ define "prom_path" }}/consoles/{{ .Path }}?{{ range $param, $value := .Params }}{{ $param }}={{ $value }}&{{ end }}{{ end }}"`
Console templating library, including graphs. This provides the basic js, css and console template templates required to build dashboards. Included as an example are consoles for the node_exporter. Change-Id: I4cfeea5e9691a9413f74ae98ca32a908df8e4a59 2014-11-20 10:41:25 -08:00
Add consoles for haproxy and cloudwatch. Only display jobs in the LHS if they're present. 2015-01-23 09:40:48 -08:00			`{{ define "prom_right_table_head" }}`
Console templating library, including graphs. This provides the basic js, css and console template templates required to build dashboards. Included as an example are consoles for the node_exporter. Change-Id: I4cfeea5e9691a9413f74ae98ca32a908df8e4a59 2014-11-20 10:41:25 -08:00			`<div class="prom_console_rhs">`
			`<table class="table table-bordered table-hover table-condensed">`
Add consoles for haproxy and cloudwatch. Only display jobs in the LHS if they're present. 2015-01-23 09:40:48 -08:00			`{{ end }}`
			`{{ define "prom_right_table_tail" }}`
Console templating library, including graphs. This provides the basic js, css and console template templates required to build dashboards. Included as an example are consoles for the node_exporter. Change-Id: I4cfeea5e9691a9413f74ae98ca32a908df8e4a59 2014-11-20 10:41:25 -08:00			`</table>`
			`</div>`
Add cassandra console. Add a template for standard up/total, cpu and memory via standard exports. 2015-01-30 03:27:52 -08:00			`{{ end }}`
Console templating library, including graphs. This provides the basic js, css and console template templates required to build dashboards. Included as an example are consoles for the node_exporter. Change-Id: I4cfeea5e9691a9413f74ae98ca32a908df8e4a59 2014-11-20 10:41:25 -08:00
Add cassandra console. Add a template for standard up/total, cpu and memory via standard exports. 2015-01-30 03:27:52 -08:00			`{{/* RHS table head, pass job name. Should be used after prom_right_table_head. */}}`
			`{{ define "prom_right_table_job_head" }}`
			`<tr>`
			`<th>{{ . }}</th>`
			`<th>{{ template "prom_query_drilldown" (args (printf "sum(up{job='%s'})" .)) }} / {{ template "prom_query_drilldown" (args (printf "count(up{job='%s'})" .)) }}</th>`
			`</tr>`
			`<tr>`
			`<td>CPU</td>`
promql: Add irate() function irate is a rate function that only looks at the most recent two data points, and calucaltes a per-second value from that. This produces much more granular graphs for fast moving data, and works sanely across many scrape intervals. It doesn't do so well for slowly moving data. 2015-10-09 09:58:43 -07:00			`<td>{{ template "prom_query_drilldown" (args (printf "avg by(job)(irate(process_cpu_seconds_total{job='%s'}[5m]))" .) "s/s" "humanizeNoSmallPrefix") }}</td>`
Add cassandra console. Add a template for standard up/total, cpu and memory via standard exports. 2015-01-30 03:27:52 -08:00			`</tr>`
			`<tr>`
			`<td>Memory</td>`
			`<td>{{ template "prom_query_drilldown" (args (printf "avg by(job)(process_resident_memory_bytes{job='%s'})" .) "B" "humanize1024") }}</td>`
			`</tr>`
Add consoles for haproxy and cloudwatch. Only display jobs in the LHS if they're present. 2015-01-23 09:40:48 -08:00			`{{ end }}`
Console templating library, including graphs. This provides the basic js, css and console template templates required to build dashboards. Included as an example are consoles for the node_exporter. Change-Id: I4cfeea5e9691a9413f74ae98ca32a908df8e4a59 2014-11-20 10:41:25 -08:00
Add cassandra console. Add a template for standard up/total, cpu and memory via standard exports. 2015-01-30 03:27:52 -08:00
Add consoles for haproxy and cloudwatch. Only display jobs in the LHS if they're present. 2015-01-23 09:40:48 -08:00			`{{ define "prom_content_head" }}`
Console templating library, including graphs. This provides the basic js, css and console template templates required to build dashboards. Included as an example are consoles for the node_exporter. Change-Id: I4cfeea5e9691a9413f74ae98ca32a908df8e4a59 2014-11-20 10:41:25 -08:00			`<div class="prom_console_content">`
Adjust for bootstrap3. Remove long lists from LHS menu. Put in a table on the node page instead. 2015-01-22 02:39:41 -08:00			`<div class="container">`
Add consoles for haproxy and cloudwatch. Only display jobs in the LHS if they're present. 2015-01-23 09:40:48 -08:00			`{{ template "prom_graph_timecontrol" . }}`
			`{{ end }}`
			`{{ define "prom_content_tail" }}`
Adjust for bootstrap3. Remove long lists from LHS menu. Put in a table on the node page instead. 2015-01-22 02:39:41 -08:00			`</div>`
Console templating library, including graphs. This provides the basic js, css and console template templates required to build dashboards. Included as an example are consoles for the node_exporter. Change-Id: I4cfeea5e9691a9413f74ae98ca32a908df8e4a59 2014-11-20 10:41:25 -08:00			`</div>`
Add consoles for haproxy and cloudwatch. Only display jobs in the LHS if they're present. 2015-01-23 09:40:48 -08:00			`{{ end }}`
Console templating library, including graphs. This provides the basic js, css and console template templates required to build dashboards. Included as an example are consoles for the node_exporter. Change-Id: I4cfeea5e9691a9413f74ae98ca32a908df8e4a59 2014-11-20 10:41:25 -08:00
Add consoles for haproxy and cloudwatch. Only display jobs in the LHS if they're present. 2015-01-23 09:40:48 -08:00			`{{ define "prom_graph_timecontrol" }}`
Console templating library, including graphs. This provides the basic js, css and console template templates required to build dashboards. Included as an example are consoles for the node_exporter. Change-Id: I4cfeea5e9691a9413f74ae98ca32a908df8e4a59 2014-11-20 10:41:25 -08:00			`<div class="prom_graph_timecontrol">`
			`<div class="prom_graph_timecontrol_inner">`
Adjust for bootstrap3. Remove long lists from LHS menu. Put in a table on the node page instead. 2015-01-22 02:39:41 -08:00			`<div class="prom_graph_timecontrol_group">`
			`<button class="btn btn-default pull-left" type="button" id="prom_graph_duration_shrink" title="Shrink the time range.">`
			`<i class="glyphicon glyphicon-minus"></i>`
Console templating library, including graphs. This provides the basic js, css and console template templates required to build dashboards. Included as an example are consoles for the node_exporter. Change-Id: I4cfeea5e9691a9413f74ae98ca32a908df8e4a59 2014-11-20 10:41:25 -08:00			`</button>`
Adjust for bootstrap3. Remove long lists from LHS menu. Put in a table on the node page instead. 2015-01-22 02:39:41 -08:00			`<input class="input pull-left" size="3" title="Time range of graph" type="text" id="prom_graph_duration">`
			`<button class="btn btn-default pull-left" type="button" id="prom_graph_duration_grow" title="Grow the time range.">`
			`<i class="glyphicon glyphicon-plus"></i>`
Console templating library, including graphs. This provides the basic js, css and console template templates required to build dashboards. Included as an example are consoles for the node_exporter. Change-Id: I4cfeea5e9691a9413f74ae98ca32a908df8e4a59 2014-11-20 10:41:25 -08:00			`</button>`
			`</div>`
Adjust for bootstrap3. Remove long lists from LHS menu. Put in a table on the node page instead. 2015-01-22 02:39:41 -08:00
			`<div class="prom_graph_timecontrol_group">`
			`<button class="btn btn-default pull-left" type="button" id="prom_graph_time_back" title="Rewind the end time.">`
			`<i class="glyphicon glyphicon-backward"></i>`
Console templating library, including graphs. This provides the basic js, css and console template templates required to build dashboards. Included as an example are consoles for the node_exporter. Change-Id: I4cfeea5e9691a9413f74ae98ca32a908df8e4a59 2014-11-20 10:41:25 -08:00			`</button>`
Adjust for bootstrap3. Remove long lists from LHS menu. Put in a table on the node page instead. 2015-01-22 02:39:41 -08:00			`<input class="input pull-left" title="End time of graph" placeholder="Until" type="text" id="prom_graph_time_end" size="16" value="">`
			`<button class="btn btn-default pull-left" type="button" id="prom_graph_time_forward" title="Advance the end time.">`
			`<i class="glyphicon glyphicon-forward"></i>`
Console templating library, including graphs. This provides the basic js, css and console template templates required to build dashboards. Included as an example are consoles for the node_exporter. Change-Id: I4cfeea5e9691a9413f74ae98ca32a908df8e4a59 2014-11-20 10:41:25 -08:00			`</button>`
Add cassandra console. Add a template for standard up/total, cpu and memory via standard exports. 2015-01-30 03:27:52 -08:00			`</div>`
Adjust for bootstrap3. Remove long lists from LHS menu. Put in a table on the node page instead. 2015-01-22 02:39:41 -08:00
			`<div class="prom_graph_timecontrol_group">`
			`<div class="btn-group dropup prom_graph_timecontrol_refresh pull-left">`
			`<button type="button" class="btn btn-default pull-left" id="prom_graph_refresh_button" title="Refresh.">`
			`<i class="glyphicon glyphicon-repeat"></i>`
			`<span class="icon-repeat"></span>`
			`(<span id="prom_graph_refresh_button_value">Off</span>)`
Console templating library, including graphs. This provides the basic js, css and console template templates required to build dashboards. Included as an example are consoles for the node_exporter. Change-Id: I4cfeea5e9691a9413f74ae98ca32a908df8e4a59 2014-11-20 10:41:25 -08:00			`</button>`
Adjust for bootstrap3. Remove long lists from LHS menu. Put in a table on the node page instead. 2015-01-22 02:39:41 -08:00			`<button type="button" class="btn btn-default pull-left dropdown-toggle" data-toggle="dropdown" title="Set autorefresh." aria-expanded="false">`
Console templating library, including graphs. This provides the basic js, css and console template templates required to build dashboards. Included as an example are consoles for the node_exporter. Change-Id: I4cfeea5e9691a9413f74ae98ca32a908df8e4a59 2014-11-20 10:41:25 -08:00			`<span class="caret"></span> `
			`</button>`
			`<ul class="dropdown-menu" id="prom_graph_refresh_intervals" role="menu">`
			`</ul>`
			`</div>`
			`</div>`
			`</div>`
			`<script>`
			`new PromConsole.TimeControl();`
			`</script>`
			`</div>`
Add consoles for haproxy and cloudwatch. Only display jobs in the LHS if they're present. 2015-01-23 09:40:48 -08:00			`{{ end }}`
Console templating library, including graphs. This provides the basic js, css and console template templates required to build dashboards. Included as an example are consoles for the node_exporter. Change-Id: I4cfeea5e9691a9413f74ae98ca32a908df8e4a59 2014-11-20 10:41:25 -08:00
			`{{/* Bottom of all pages. */}}`
Add consoles for haproxy and cloudwatch. Only display jobs in the LHS if they're present. 2015-01-23 09:40:48 -08:00			`{{ define "tail" }}`
Console templating library, including graphs. This provides the basic js, css and console template templates required to build dashboards. Included as an example are consoles for the node_exporter. Change-Id: I4cfeea5e9691a9413f74ae98ca32a908df8e4a59 2014-11-20 10:41:25 -08:00			`</body>`
			`</html>`
Add consoles for haproxy and cloudwatch. Only display jobs in the LHS if they're present. 2015-01-23 09:40:48 -08:00			`{{ end }}`