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="/static/vendor/rickshaw/rickshaw.min.css">
<link type="text/css" rel="stylesheet" href="/static/vendor/bootstrap-3.3.1/css/bootstrap.css">
<link type="text/css" rel="stylesheet" href="/static/css/prom_console.css">
<script src="/static/vendor/rickshaw/vendor/d3.min.js"></script>
<script src="/static/vendor/rickshaw/vendor/d3.layout.min.js"></script>
<script src="/static/vendor/rickshaw/rickshaw.min.js"></script>
<script src="/static/vendor/js/jquery.min.js"></script>
<script src="/static/vendor/bootstrap-3.3.1/js/bootstrap.min.js"></script>
<script src="/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.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="{{ 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 }}

{{ 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" }}`
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			`<link type="text/css" rel="stylesheet" href="/static/vendor/rickshaw/rickshaw.min.css">`
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			`<link type="text/css" rel="stylesheet" href="/static/vendor/bootstrap-3.3.1/css/bootstrap.css">`
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			`<link type="text/css" rel="stylesheet" href="/static/css/prom_console.css">`
			`<script src="/static/vendor/rickshaw/vendor/d3.min.js"></script>`
			`<script src="/static/vendor/rickshaw/vendor/d3.layout.min.js"></script>`
			`<script src="/static/vendor/rickshaw/rickshaw.min.js"></script>`
			`<script src="/static/vendor/js/jquery.min.js"></script>`
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			`<script src="/static/vendor/bootstrap-3.3.1/js/bootstrap.min.js"></script>`
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			`<script src="/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 }}`
			`{{ 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 consoles for haproxy and cloudwatch. Only display jobs in the LHS if they're present. 2015-01-23 09:40:48 -08:00			`{{ $expr := .arg0 }}{{ $suffix := (or .arg1 "")}}{{ $renderTemplate := (or .arg2 "__prom_query_drilldown_noop")}}`
			`<a class="prom_query_drilldown" href="{{ 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 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_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 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_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>`
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>`

			`<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 }}`