Skip to content

Instantly share code, notes, and snippets.

@roidelapluie

roidelapluie/dashboard.html.tpl

Last active August 9, 2018 13:44
Show Gist options
  • Save roidelapluie/bd97820af671da44b994a09be06b08a0 to your computer and use it in GitHub Desktop.
Save roidelapluie/bd97820af671da44b994a09be06b08a0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
dashboard.html.tpl
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="/dashboard/style.css">
</head>
<body>
{{ $business := .Params["sector"] }}
<div id="wrapper">
<nav class="navbar navbar-static-top m-b-0 navbar-default">
<div class="navbar-header">
<ul class="nav navbar-top-links navbar-left pull-left">
<li>
<a href="#">
Dashboard
</a>
</li>
</ul>
</div>
</nav>
<div id="page-wrapper">
<div class="row bg-title">
</div>
<div class="container-fluid">
{{if and (ne $business "s01") (ne $business "s02") (ne $business "s03") (ne $business "s04")}}
<h4 style="margin-top: 0em;margin-bottom: .5em;" class="text-center">
Choose a business
</h4>
<div class="text-center">
<div class="btn-group-vertical" role="group" aria-label="Sector">
<a class="btn btn-secondary" href="?sector=s01">Business 1</a>
<a class="btn btn-secondary" href="?sector=s02">Business 2</a>
<a class="btn btn-secondary" href="?sector=s03">Business 3</a>
<a class="btn btn-secondary" href="?sector=s04">Business 4</a>
</div>
</div>
{{else}}
<h4 style="margin-top: 0em;margin-bottom: .5em;" class="text-center">
{{if eq $business "s01"}}Sect01{{end}}
{{if eq $business "s02"}}Sect02{{end}}
{{if eq $business "s03"}}Sect03{{end}}
{{if eq $business "s04"}}Sect04{{end}}
</h4>
{{ $q := printf "public_dashboard:msg{sectors=~'.*%s.*'}" $business }}
{{ range query $q }}
<div class="alert alert-{{ .Labels.level }}">{{ .Labels.text }}</div>
{{ end }}
{{ $q := printf "public_service{sectors=~'.*%s.*'}" $business }}
{{ range query $q }}
{{ $prettyname := .Labels.pretty_name }}
{{ $name := .Labels.name }}
<table class="table white-box">
<thead class="thead-light">
<tr>
<th colspan="2" scope="col">{{$prettyname}}</th>
</tr>
</thead>
<tbody>
{{ $avq := printf "abs(min(min_over_time(public_dashboard{kind='availability',name='%s'}[5m]))) %% 10 or absent(public_dashboard{kind='availability',name='%s'})" $name $name}}
{{ $av := query $avq }}
{{ $avd := printf "public_legend:availability == %f" ($av | first| value)}}
{{ $avt := query $avd }}
<tr>
<th scope="row" class="alert alert-{{($avt | first).Labels.color}}">Availaibility</th>
<td class="text-right alert alert-{{($avt | first).Labels.color}}">{{($avt | first).Labels.text}}</td>
</tr>
{{ $raq := printf "abs(min(min_over_time(public_dashboard{kind='responsetime',name='%s'}[5m]))) %% 10 or absent(public_dashboard{kind='responsetime',name='%s'})" $name $name}}
{{ $ra := query $raq }}
{{ $rad := printf "public_legend:responsetime == %f" ($ra | first| value)}}
{{ $rat := query $rad }}
<tr>
<th scope="row" class="alert alert-{{($rat | first).Labels.color}}">Response Time</th>
<td class="text-right alert alert-{{($rat | first).Labels.color}}">{{($rat | first).Labels.text}}</span></td>
</tr>
</tbody>
</table>
{{end}}
{{end}}
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment