2022-02-03 18:22:35 +00:00
{% import (
2022-04-19 15:26:21 +00:00
"net/url"
2022-02-03 18:22:35 +00:00
"github.com/VictoriaMetrics/VictoriaMetrics/lib/prompbmarshal"
"github.com/VictoriaMetrics/VictoriaMetrics/lib/promrelabel"
) %}
2020-12-14 11:36:48 +00:00
2021-06-18 07:53:10 +00:00
{% stripspace %}
2020-12-14 11:36:48 +00:00
2022-04-19 15:26:21 +00:00
{% func TargetsResponsePlain(jts []jobTargetsStatuses, emptyJobs []string, showOriginLabels, showOnlyUnhealthy bool, err error) %}
{% if err != nil %}
{%s= err.Error() %}
{% return %}
{% endif %}
2020-12-14 11:36:48 +00:00
{% for _, js := range jts %}
2022-04-19 15:26:21 +00:00
{% if showOnlyUnhealthy && js.upCount == js.targetsTotal %}{% continue %}{% endif %}
job={%q= js.job %} ({%d js.upCount %}/{%d js.targetsTotal %}{% space %}up)
{% newline %}
{% for _, ts := range js.targetsStatus %}
{% if showOnlyUnhealthy && ts.up %}{% continue %}{% endif %}
{%s= "\t" %}
state={% if ts.up %}up{% else %}down{% endif %},{% space %}
endpoint={%s= ts.sw.Config.ScrapeURL %},{% space %}
labels={%s= promLabelsString(promrelabel.FinalizeLabels(nil, ts.sw.Config.Labels)) %},{% space %}
{% if showOriginLabels %}originalLabels={%s= promLabelsString(ts.sw.Config.OriginalLabels) %},{% space %}{% endif %}
scrapes_total={%d ts.scrapesTotal %},{% space %}
scrapes_failed={%d ts.scrapesFailed %},{% space %}
last_scrape={%f.3 ts.getDurationFromLastScrape().Seconds() %}s ago,{% space %}
scrape_duration={%d int(ts.scrapeDuration) %}ms,{% space %}
samples_scraped={%d ts.samplesScraped %},{% space %}
error={% if ts.err != nil %}{%s= ts.err.Error() %}{% endif %}
{% newline %}
{% endfor %}
2020-12-14 11:36:48 +00:00
{% endfor %}
2021-06-18 07:53:10 +00:00
{% for _, jobName := range emptyJobs %}
job={%q= jobName %} (0/0 up)
2020-12-14 11:36:48 +00:00
{% newline %}
2021-06-18 07:53:10 +00:00
{% endfor %}
2020-12-14 11:36:48 +00:00
{% endfunc %}
2022-06-03 13:38:45 +00:00
{% func TargetsResponseHTML(scrapeTargets scrapeTargets) %}
{% code
targetsStatuses := scrapeTargets.targetsStatuses
filter := scrapeTargets.requestFilter
if filter.activeTab == "" {
filter.activeTab="targets-tab"
}
%}
2020-12-14 11:36:48 +00:00
<!DOCTYPE html>
2020-12-15 09:58:53 +00:00
<html lang="en">
<head>
2020-12-15 10:37:19 +00:00
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
2022-05-30 23:55:28 +00:00
<link href="static/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
2020-12-15 09:58:53 +00:00
<title>Scrape targets</title>
2022-02-12 16:40:29 +00:00
<script>
function collapse_all() {
2022-06-03 13:38:45 +00:00
for (var i = 0; i <= {%d len(targetsStatuses.jobTargetsStatuses) %}; i++) {
["table-"+i, "table-discovery-"+i, "table-empty-"+i].forEach((id) => {
let el = document.getElementById(id);
if (el) {
el.style.display = 'none';
}
})
2022-02-12 16:40:29 +00:00
}
}
function expand_all() {
2022-06-03 13:38:45 +00:00
for (var i = 0; i <= {%d len(targetsStatuses.jobTargetsStatuses) %}; i++) {
["table-"+i, "table-discovery-"+i, "table-empty-"+i].forEach((id) => {
let el = document.getElementById(id);
if (el) {
el.style.display = 'block';
}
});
2022-02-12 16:40:29 +00:00
}
}
</script>
2020-12-15 09:58:53 +00:00
</head>
2022-04-20 08:25:04 +00:00
<body>
<div class="navbar navbar-dark bg-dark box-shadow">
<div class="d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-center ms-3" title="The High Performance Open Source Time Series Database & Monitoring Solution ">
<svg xmlns="http://www.w3.org/2000/svg" id="VM_logo" viewBox="0 0 464.61 533.89" width="20" height="20" class="me-1"><defs><style>.cls-1{fill:#fff;}</style></defs><path class="cls-1" d="M459.86,467.77c9,7.67,24.12,13.49,39.3,13.69v0h1.68v0c15.18-.2,30.31-6,39.3-13.69,47.43-40.45,184.65-166.24,184.65-166.24,36.84-34.27-65.64-68.28-223.95-68.47h-1.68c-158.31.19-260.79,34.2-224,68.47C275.21,301.53,412.43,427.32,459.86,467.77Z" transform="translate(-267.7 -233.05)"/><path class="cls-1" d="M540.1,535.88c-9,7.67-24.12,13.5-39.3,13.7h-1.6c-15.18-.2-30.31-6-39.3-13.7-32.81-28-148.56-132.93-192.16-172.7v60.74c0,6.67,2.55,15.52,7.09,19.68,29.64,27.18,143.94,131.8,185.07,166.88,9,7.67,24.12,13.49,39.3,13.69v0h1.6v0c15.18-.2,30.31-6,39.3-13.69,41.13-35.08,155.43-139.7,185.07-166.88,4.54-4.16,7.09-13,7.09-19.68V363.18C688.66,403,572.91,507.9,540.1,535.88Z" transform="translate(-267.7 -233.05)"/><path class="cls-1" d="M540.1,678.64c-9,7.67-24.12,13.49-39.3,13.69v0h-1.6v0c-15.18-.2-30.31-6-39.3-13.69-32.81-28-148.56-132.94-192.16-172.7v60.73c0,6.67,2.55,15.53,7.09,19.69,29.64,27.17,143.94,131.8,185.07,166.87,9,7.67,24.12,13.5,39.3,13.7h1.6c15.18-.2,30.31-6,39.3-13.7,41.13-35.07,155.43-139.7,185.07-166.87,4.54-4.16,7.09-13,7.09-19.69V505.94C688.66,545.7,572.91,650.66,540.1,678.64Z" transform="translate(-267.7 -233.05)"/></svg>
<strong>VictoriaMetrics</strong>
</a>
</div>
</div>
2022-04-19 15:26:21 +00:00
<div class="container-fluid">
2022-06-03 13:38:45 +00:00
{% if targetsStatuses.err != nil %}
{%= errorNotification(targetsStatuses.err) %}
2022-04-19 15:26:21 +00:00
{% endif %}
<div class="row">
<main class="col-12">
<h1>Scrape targets</h1>
<hr />
<div class="row g-3 align-items-center mb-3">
<div class="col-auto">
2022-06-03 13:38:45 +00:00
<button id="all-btn" type="button" class="btn{% space %}{% if !filter.showOnlyUnhealthy %}btn-secondary{% else %}btn-success{% endif %}" onclick="location.href='?{%= queryArgs(map[string]string{
2022-04-19 15:26:21 +00:00
"show_only_unhealthy": "false",
2022-06-03 13:38:45 +00:00
"endpoint_search": filter.endpointSearch,
"label_search": filter.labelSearch,
"active_tab": filter.activeTab,
2022-04-19 15:26:21 +00:00
}) %}'">
All
</button>
</div>
<div class="col-auto">
2022-06-03 13:38:45 +00:00
<button id="unhealthy-btn" type="button" class="btn{% space %}{% if filter.showOnlyUnhealthy %}btn-secondary{% else %}btn-danger{% endif %}" onclick="location.href='?{%= queryArgs(map[string]string{
2022-04-19 15:26:21 +00:00
"show_only_unhealthy": "true",
2022-06-03 13:38:45 +00:00
"endpoint_search": filter.endpointSearch,
"label_search": filter.labelSearch,
"active_tab": filter.activeTab,
2022-04-19 15:26:21 +00:00
}) %}'">
Unhealthy
</button>
</div>
<div class="col-auto">
<button type="button" class="btn btn-primary" onclick="collapse_all()">
Collapse all
</button>
</div>
<div class="col-auto">
<button type="button" class="btn btn-secondary" onclick="expand_all()">
Expand all
</button>
</div>
<div class="col-auto">
2022-06-03 13:38:45 +00:00
{% if filter.endpointSearch == "" && filter.labelSearch == "" %}
2022-04-20 08:25:04 +00:00
<button type="button" class="btn btn-success" onclick="document.getElementById('filters').style.display='block'">
2022-04-19 15:26:21 +00:00
Filter targets
</button>
{% else %}
2022-04-20 08:25:04 +00:00
<button type="button" class="btn btn-danger" onclick="location.href='?'">
2022-04-19 15:26:21 +00:00
Clear target filters
</button>
{% endif %}
</div>
2022-02-03 18:22:35 +00:00
</div>
2022-06-03 13:38:45 +00:00
<div id="filters" {% if filter.endpointSearch == "" && filter.labelSearch == "" %}style="display:none"{% endif %}>
2022-04-19 15:26:21 +00:00
<form class="form-horizontal">
<div class="form-group mb-3">
<label for="endpoint_search" class="col-sm-10 control-label">Endpoint filter (<a target="_blank" href="https://github.com/google/re2/wiki/Syntax">Regexp</a> is accepted)</label>
<div class="col-sm-10">
<input type="text" id="endpoint_search" name="endpoint_search"
2022-06-03 13:38:45 +00:00
placeholder="For example, 127.0.0.1" class="form-control" value="{%s filter.endpointSearch %}"/>
2022-04-19 15:26:21 +00:00
</div>
</div>
<div class="form-group mb-3">
<label for="label_search" class="col-sm-10 control-label">Labels filter (<a target="_blank" href="https://prometheus.io/docs/prometheus/latest/querying/basics/#time-series-selectors">Arbitrary time series selectors</a> are accepted)</label>
<div class="col-sm-10">
<input type="text" id="label_search" name="label_search"
2022-06-03 13:38:45 +00:00
placeholder="For example, {instance=~'.+:9100'}" class="form-control" value="{%s filter.labelSearch %}"/>
2022-04-19 15:26:21 +00:00
</div>
</div>
2022-06-03 13:38:45 +00:00
<input type="hidden" name="show_only_unhealthy" value="{%v filter.showOnlyUnhealthy %}"/>
<input id="tab_input" type="hidden" name="active_tab" value="{%s filter.activeTab %}" />
2022-04-19 15:26:21 +00:00
<button type="submit" class="btn btn-success mb-3">Submit</button>
</form>
</div>
<hr />
2022-06-03 13:38:45 +00:00
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button id="targets-tab" class="nav-link {%if filter.activeTab=="targets-tab"%} {% space %}active {%endif%}" data-bs-toggle="tab" data-bs-target="#targets" type="button" role="tab" aria-controls="home" aria-selected="true">Targets</button>
</li>
<li class="nav-item" role="presentation">
<button id="discovery-tab" class="nav-link {%if filter.activeTab=="discovery-tab"%} {% space %}active {%endif%}" data-bs-toggle="tab" data-bs-target="#discovery" type="button" role="tab" aria-controls="profile" aria-selected="false">Service Discovery</button>
</li>
</ul>
<div class="tab-content">
<div id="targets" class="tab-pane {%if filter.activeTab=="targets-tab"%} {% space %}active{%endif%}" role="tabpanel" aria-labelledby="targets-tab">
{%= Targets(targetsStatuses.jobTargetsStatuses, targetsStatuses.emptyJobs, filter.showOnlyUnhealthy) %}
2022-04-19 15:26:21 +00:00
</div>
2022-06-03 13:38:45 +00:00
<div id="discovery" class="tab-pane {%if filter.activeTab=="discovery-tab"%} {% space %}active{%endif%}" role="tabpanel" aria-labelledby="profile-tab">
{%= ServiceDiscovery(targetsStatuses.jobTargetsStatuses, targetsStatuses.emptyJobs, filter.showOnlyUnhealthy, targetsStatuses.droppedKeyStatuses) %}
2022-04-19 15:26:21 +00:00
</div>
2022-06-03 13:38:45 +00:00
</div>
2022-04-19 15:26:21 +00:00
</main>
</div>
2021-06-18 07:53:10 +00:00
</div>
2022-06-03 13:38:45 +00:00
<script src="static/js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="static/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<script>
(function(){
const navBtns = document.querySelectorAll(".nav-link");
const tabInput = document.getElementById("tab_input");
const unhealthyBtn = document.getElementById("unhealthy-btn");
const allBtn = document.getElementById("all-btn");
navBtns.forEach((btn) => {
if (btn) {
btn.addEventListener("click", (e) => {
if (window.history.replaceState) {
var url = new URL(window.location.href);
url.searchParams.set("active_tab", e.target.id);
tabInput.value = e.target.id;
unhealthyBtn.onclick = () => {
url.searchParams.set("show_only_unhealthy", "true");
window.location.href=url;
};
allBtn.onclick = () => {
url.searchParams.set("show_only_unhealthy", "false");
window.location.href=url;
};
window.history.replaceState({}, "", url);
}
});
}
})
})()
</script>
2020-12-15 09:58:53 +00:00
</body>
2020-12-14 11:36:48 +00:00
</html>
{% endfunc %}
2022-04-19 15:26:21 +00:00
{% func queryArgs(m map[string]string) %}
{% code
qa := make(url.Values, len(m))
for k, v := range m {
qa[k] = []string{v}
}
%}
{%s qa.Encode() %}
{% endfunc %}
2020-12-14 11:36:48 +00:00
{% func formatLabel(labels []prompbmarshal.Label) %}
2021-10-11 09:40:46 +00:00
{
{% for i, label := range labels %}
{%s label.Name %}={%q label.Value %}
2021-10-13 12:59:55 +00:00
{% if i+1 < len(labels) %},{% space %}{% endif %}
2021-10-11 09:40:46 +00:00
{% endfor %}
}
2020-12-14 11:36:48 +00:00
{% endfunc %}
2020-12-15 09:58:53 +00:00
2022-04-19 15:26:21 +00:00
{% func errorNotification(err error) %}
<div class="alert alert-danger d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:">
<use xlink:href="#exclamation-triangle-fill"/></svg>
<div>
{%s err.Error() %}
</div>
</div>
{% endfunc %}
2021-06-18 07:53:10 +00:00
{% endstripspace %}
