vmagent: fix js error on CollapseAll/ExpandAll buttons click (#2192)

* vmagent: fix js error on CollapseAll/ExpandAll buttons click

`Uncaught TypeError: Cannot read properties of null (reading 'style')`

Signed-off-by: hagen1778 <roman@victoriametrics.com>

* Apply suggestions from code review

Co-authored-by: Aliaksandr Valialkin <valyala@victoriametrics.com>

Updates https://github.com/VictoriaMetrics/VictoriaMetrics/issues/2021
This commit is contained in:
Roman Khavronenko 2022-02-15 12:52:48 +02:00 committed by Aliaksandr Valialkin
parent e2be41f4dd
commit 8cbcc560b9
No known key found for this signature in database
GPG key ID: A72BEC6CD3D0DED1
2 changed files with 159 additions and 153 deletions

View file

@ -45,14 +45,20 @@ job={%q= jobName %} (0/0 up)
<script>
function collapse_all() {
for (var i = 0; i < {%d len(jts) %}; i++) {
var id = "table-" + i;
document.getElementById(id).style.display = 'none';
let el = document.getElementById("table-" + i);
if (!el) {
continue;
}
el.style.display = 'none';
}
}
function expand_all() {
for (var i = 0; i < {%d len(jts) %}; i++) {
var id = "table-" + i;
document.getElementById(id).style.display = 'block';
let el = document.getElementById("table-" + i);
if (!el) {
continue;
}
el.style.display = 'block';
}
}
</script>

View file

@ -199,276 +199,276 @@ func StreamTargetsResponseHTML(qw422016 *qt422016.Writer, jts []jobTargetsStatus
//line lib/promscrape/targetstatus.qtpl:47
qw422016.N().D(len(jts))
//line lib/promscrape/targetstatus.qtpl:47
qw422016.N().S(`; i++) {var id = "table-" + i;document.getElementById(id).style.display = 'none';}}function expand_all() {for (var i = 0; i <`)
//line lib/promscrape/targetstatus.qtpl:53
qw422016.N().S(`; i++) {let el = document.getElementById("table-" + i);if (!el) {continue;}el.style.display = 'none';}}function expand_all() {for (var i = 0; i <`)
//line lib/promscrape/targetstatus.qtpl:56
qw422016.N().D(len(jts))
//line lib/promscrape/targetstatus.qtpl:53
qw422016.N().S(`; i++) {var id = "table-" + i;document.getElementById(id).style.display = 'block';}}</script></head><body class="m-3"><h1>Scrape targets</h1><div style="padding: 3px"><button type="button" class="btn`)
//line lib/promscrape/targetstatus.qtpl:63
//line lib/promscrape/targetstatus.qtpl:56
qw422016.N().S(`; i++) {let el = document.getElementById("table-" + i);if (!el) {continue;}el.style.display = 'block';}}</script></head><body class="m-3"><h1>Scrape targets</h1><div style="padding: 3px"><button type="button" class="btn`)
//line lib/promscrape/targetstatus.qtpl:69
qw422016.N().S(` `)
//line lib/promscrape/targetstatus.qtpl:63
//line lib/promscrape/targetstatus.qtpl:69
if !onlyUnhealthy {
//line lib/promscrape/targetstatus.qtpl:63
//line lib/promscrape/targetstatus.qtpl:69
qw422016.N().S(`btn-primary`)
//line lib/promscrape/targetstatus.qtpl:63
//line lib/promscrape/targetstatus.qtpl:69
} else {
//line lib/promscrape/targetstatus.qtpl:63
//line lib/promscrape/targetstatus.qtpl:69
qw422016.N().S(`btn-secondary`)
//line lib/promscrape/targetstatus.qtpl:63
//line lib/promscrape/targetstatus.qtpl:69
}
//line lib/promscrape/targetstatus.qtpl:63
//line lib/promscrape/targetstatus.qtpl:69
qw422016.N().S(`" onclick="location.href='targets'">All</button><button type="button" class="btn`)
//line lib/promscrape/targetstatus.qtpl:66
//line lib/promscrape/targetstatus.qtpl:72
qw422016.N().S(` `)
//line lib/promscrape/targetstatus.qtpl:66
//line lib/promscrape/targetstatus.qtpl:72
if onlyUnhealthy {
//line lib/promscrape/targetstatus.qtpl:66
//line lib/promscrape/targetstatus.qtpl:72
qw422016.N().S(`btn-primary`)
//line lib/promscrape/targetstatus.qtpl:66
//line lib/promscrape/targetstatus.qtpl:72
} else {
//line lib/promscrape/targetstatus.qtpl:66
//line lib/promscrape/targetstatus.qtpl:72
qw422016.N().S(`btn-secondary`)
//line lib/promscrape/targetstatus.qtpl:66
//line lib/promscrape/targetstatus.qtpl:72
}
//line lib/promscrape/targetstatus.qtpl:66
//line lib/promscrape/targetstatus.qtpl:72
qw422016.N().S(`" onclick="location.href='targets?show_only_unhealthy=true'">Unhealthy</button><button type="button" class="btn btn-primary" onclick="collapse_all()">Collapse all</button><button type="button" class="btn btn-secondary" onclick="expand_all()">Expand all</button></div>`)
//line lib/promscrape/targetstatus.qtpl:76
//line lib/promscrape/targetstatus.qtpl:82
for i, js := range jts {
//line lib/promscrape/targetstatus.qtpl:77
//line lib/promscrape/targetstatus.qtpl:83
if onlyUnhealthy && js.upCount == js.targetsTotal {
//line lib/promscrape/targetstatus.qtpl:77
//line lib/promscrape/targetstatus.qtpl:83
continue
//line lib/promscrape/targetstatus.qtpl:77
//line lib/promscrape/targetstatus.qtpl:83
}
//line lib/promscrape/targetstatus.qtpl:77
//line lib/promscrape/targetstatus.qtpl:83
qw422016.N().S(`<div><h4>`)
//line lib/promscrape/targetstatus.qtpl:80
//line lib/promscrape/targetstatus.qtpl:86
qw422016.E().S(js.job)
//line lib/promscrape/targetstatus.qtpl:80
//line lib/promscrape/targetstatus.qtpl:86
qw422016.N().S(` `)
//line lib/promscrape/targetstatus.qtpl:80
//line lib/promscrape/targetstatus.qtpl:86
qw422016.N().S(`(`)
//line lib/promscrape/targetstatus.qtpl:80
//line lib/promscrape/targetstatus.qtpl:86
qw422016.N().D(js.upCount)
//line lib/promscrape/targetstatus.qtpl:80
//line lib/promscrape/targetstatus.qtpl:86
qw422016.N().S(`/`)
//line lib/promscrape/targetstatus.qtpl:80
//line lib/promscrape/targetstatus.qtpl:86
qw422016.N().D(js.targetsTotal)
//line lib/promscrape/targetstatus.qtpl:80
//line lib/promscrape/targetstatus.qtpl:86
qw422016.N().S(` `)
//line lib/promscrape/targetstatus.qtpl:80
//line lib/promscrape/targetstatus.qtpl:86
qw422016.N().S(`up)<button type="button" class="btn btn-primary" onclick="document.getElementById('table-`)
//line lib/promscrape/targetstatus.qtpl:81
//line lib/promscrape/targetstatus.qtpl:87
qw422016.N().D(i)
//line lib/promscrape/targetstatus.qtpl:81
//line lib/promscrape/targetstatus.qtpl:87
qw422016.N().S(`').style.display='none'">collapse</button><button type="button" class="btn btn-secondary" onclick="document.getElementById('table-`)
//line lib/promscrape/targetstatus.qtpl:82
//line lib/promscrape/targetstatus.qtpl:88
qw422016.N().D(i)
//line lib/promscrape/targetstatus.qtpl:82
//line lib/promscrape/targetstatus.qtpl:88
qw422016.N().S(`').style.display='block'">expand</button></h4><div id="table-`)
//line lib/promscrape/targetstatus.qtpl:84
//line lib/promscrape/targetstatus.qtpl:90
qw422016.N().D(i)
//line lib/promscrape/targetstatus.qtpl:84
//line lib/promscrape/targetstatus.qtpl:90
qw422016.N().S(`"><table class="table table-striped table-hover table-bordered table-sm"><thead><tr><th scope="col">Endpoint</th><th scope="col">State</th><th scope="col" title="scrape target labels">Labels</th><th scope="col" title="total scrapes">Scrapes</th><th scope="col" title="total scrape errors">Errors</th><th scope="col" title="the time of the last scrape">Last Scrape</th><th scope="col" title="the duration of the last scrape">Duration</th><th scope="col" title="the number of metrics scraped during the last scrape">Samples</th><th scope="col" title="error from the last scrape (if any)">Last error</th></tr></thead><tbody>`)
//line lib/promscrape/targetstatus.qtpl:100
//line lib/promscrape/targetstatus.qtpl:106
for _, ts := range js.targetsStatus {
//line lib/promscrape/targetstatus.qtpl:102
//line lib/promscrape/targetstatus.qtpl:108
endpoint := ts.sw.Config.ScrapeURL
targetID := getTargetID(ts.sw)
lastScrapeTime := ts.getDurationFromLastScrape()
//line lib/promscrape/targetstatus.qtpl:106
//line lib/promscrape/targetstatus.qtpl:112
if onlyUnhealthy && ts.up {
//line lib/promscrape/targetstatus.qtpl:106
//line lib/promscrape/targetstatus.qtpl:112
continue
//line lib/promscrape/targetstatus.qtpl:106
//line lib/promscrape/targetstatus.qtpl:112
}
//line lib/promscrape/targetstatus.qtpl:106
//line lib/promscrape/targetstatus.qtpl:112
qw422016.N().S(`<tr`)
//line lib/promscrape/targetstatus.qtpl:107
//line lib/promscrape/targetstatus.qtpl:113
if !ts.up {
//line lib/promscrape/targetstatus.qtpl:107
//line lib/promscrape/targetstatus.qtpl:113
qw422016.N().S(` `)
//line lib/promscrape/targetstatus.qtpl:107
//line lib/promscrape/targetstatus.qtpl:113
qw422016.N().S(`class="alert alert-danger" role="alert"`)
//line lib/promscrape/targetstatus.qtpl:107
//line lib/promscrape/targetstatus.qtpl:113
}
//line lib/promscrape/targetstatus.qtpl:107
//line lib/promscrape/targetstatus.qtpl:113
qw422016.N().S(`><td><a href="`)
//line lib/promscrape/targetstatus.qtpl:108
//line lib/promscrape/targetstatus.qtpl:114
qw422016.E().S(endpoint)
//line lib/promscrape/targetstatus.qtpl:108
//line lib/promscrape/targetstatus.qtpl:114
qw422016.N().S(`" target="_blank">`)
//line lib/promscrape/targetstatus.qtpl:108
//line lib/promscrape/targetstatus.qtpl:114
qw422016.E().S(endpoint)
//line lib/promscrape/targetstatus.qtpl:108
//line lib/promscrape/targetstatus.qtpl:114
qw422016.N().S(`</a> (<a href="target_response?id=`)
//line lib/promscrape/targetstatus.qtpl:109
//line lib/promscrape/targetstatus.qtpl:115
qw422016.E().S(targetID)
//line lib/promscrape/targetstatus.qtpl:109
//line lib/promscrape/targetstatus.qtpl:115
qw422016.N().S(`" target="_blank" title="click to fetch target response on behalf of the scraper">response</a>)</td><td>`)
//line lib/promscrape/targetstatus.qtpl:111
//line lib/promscrape/targetstatus.qtpl:117
if ts.up {
//line lib/promscrape/targetstatus.qtpl:111
//line lib/promscrape/targetstatus.qtpl:117
qw422016.N().S(`UP`)
//line lib/promscrape/targetstatus.qtpl:111
//line lib/promscrape/targetstatus.qtpl:117
} else {
//line lib/promscrape/targetstatus.qtpl:111
//line lib/promscrape/targetstatus.qtpl:117
qw422016.N().S(`DOWN`)
//line lib/promscrape/targetstatus.qtpl:111
//line lib/promscrape/targetstatus.qtpl:117
}
//line lib/promscrape/targetstatus.qtpl:111
//line lib/promscrape/targetstatus.qtpl:117
qw422016.N().S(`</td><td><div title="click to show original labels" onclick="document.getElementById('original_labels_`)
//line lib/promscrape/targetstatus.qtpl:113
//line lib/promscrape/targetstatus.qtpl:119
qw422016.E().S(targetID)
//line lib/promscrape/targetstatus.qtpl:113
//line lib/promscrape/targetstatus.qtpl:119
qw422016.N().S(`').style.display='block'">`)
//line lib/promscrape/targetstatus.qtpl:114
//line lib/promscrape/targetstatus.qtpl:120
streamformatLabel(qw422016, promrelabel.FinalizeLabels(nil, ts.sw.Config.Labels))
//line lib/promscrape/targetstatus.qtpl:114
//line lib/promscrape/targetstatus.qtpl:120
qw422016.N().S(`</div><div style="display:none" id="original_labels_`)
//line lib/promscrape/targetstatus.qtpl:116
//line lib/promscrape/targetstatus.qtpl:122
qw422016.E().S(targetID)
//line lib/promscrape/targetstatus.qtpl:116
//line lib/promscrape/targetstatus.qtpl:122
qw422016.N().S(`">`)
//line lib/promscrape/targetstatus.qtpl:117
streamformatLabel(qw422016, ts.sw.Config.OriginalLabels)
//line lib/promscrape/targetstatus.qtpl:117
qw422016.N().S(`</div></td><td>`)
//line lib/promscrape/targetstatus.qtpl:120
qw422016.N().D(ts.scrapesTotal)
//line lib/promscrape/targetstatus.qtpl:120
qw422016.N().S(`</td><td>`)
//line lib/promscrape/targetstatus.qtpl:121
qw422016.N().D(ts.scrapesFailed)
//line lib/promscrape/targetstatus.qtpl:121
qw422016.N().S(`</td><td>`)
//line lib/promscrape/targetstatus.qtpl:123
if lastScrapeTime < 365*24*time.Hour {
//line lib/promscrape/targetstatus.qtpl:124
qw422016.N().FPrec(lastScrapeTime.Seconds(), 3)
//line lib/promscrape/targetstatus.qtpl:124
qw422016.N().S(`s ago`)
//line lib/promscrape/targetstatus.qtpl:125
} else {
//line lib/promscrape/targetstatus.qtpl:125
qw422016.N().S(`none`)
//line lib/promscrape/targetstatus.qtpl:127
}
//line lib/promscrape/targetstatus.qtpl:127
qw422016.N().S(`<td>`)
//line lib/promscrape/targetstatus.qtpl:128
qw422016.N().D(int(ts.scrapeDuration))
//line lib/promscrape/targetstatus.qtpl:128
qw422016.N().S(`ms</td><td>`)
//line lib/promscrape/targetstatus.qtpl:129
qw422016.N().D(ts.samplesScraped)
//line lib/promscrape/targetstatus.qtpl:129
streamformatLabel(qw422016, ts.sw.Config.OriginalLabels)
//line lib/promscrape/targetstatus.qtpl:123
qw422016.N().S(`</div></td><td>`)
//line lib/promscrape/targetstatus.qtpl:126
qw422016.N().D(ts.scrapesTotal)
//line lib/promscrape/targetstatus.qtpl:126
qw422016.N().S(`</td><td>`)
//line lib/promscrape/targetstatus.qtpl:127
qw422016.N().D(ts.scrapesFailed)
//line lib/promscrape/targetstatus.qtpl:127
qw422016.N().S(`</td><td>`)
//line lib/promscrape/targetstatus.qtpl:129
if lastScrapeTime < 365*24*time.Hour {
//line lib/promscrape/targetstatus.qtpl:130
if ts.err != nil {
//line lib/promscrape/targetstatus.qtpl:130
qw422016.E().S(ts.err.Error())
qw422016.N().FPrec(lastScrapeTime.Seconds(), 3)
//line lib/promscrape/targetstatus.qtpl:130
qw422016.N().S(`s ago`)
//line lib/promscrape/targetstatus.qtpl:131
} else {
//line lib/promscrape/targetstatus.qtpl:131
qw422016.N().S(`none`)
//line lib/promscrape/targetstatus.qtpl:133
}
//line lib/promscrape/targetstatus.qtpl:130
//line lib/promscrape/targetstatus.qtpl:133
qw422016.N().S(`<td>`)
//line lib/promscrape/targetstatus.qtpl:134
qw422016.N().D(int(ts.scrapeDuration))
//line lib/promscrape/targetstatus.qtpl:134
qw422016.N().S(`ms</td><td>`)
//line lib/promscrape/targetstatus.qtpl:135
qw422016.N().D(ts.samplesScraped)
//line lib/promscrape/targetstatus.qtpl:135
qw422016.N().S(`</td><td>`)
//line lib/promscrape/targetstatus.qtpl:136
if ts.err != nil {
//line lib/promscrape/targetstatus.qtpl:136
qw422016.E().S(ts.err.Error())
//line lib/promscrape/targetstatus.qtpl:136
}
//line lib/promscrape/targetstatus.qtpl:136
qw422016.N().S(`</td></tr>`)
//line lib/promscrape/targetstatus.qtpl:132
//line lib/promscrape/targetstatus.qtpl:138
}
//line lib/promscrape/targetstatus.qtpl:132
//line lib/promscrape/targetstatus.qtpl:138
qw422016.N().S(`</tbody></table></div></div>`)
//line lib/promscrape/targetstatus.qtpl:137
//line lib/promscrape/targetstatus.qtpl:143
}
//line lib/promscrape/targetstatus.qtpl:139
//line lib/promscrape/targetstatus.qtpl:145
for _, jobName := range emptyJobs {
//line lib/promscrape/targetstatus.qtpl:139
//line lib/promscrape/targetstatus.qtpl:145
qw422016.N().S(`<div><h4><a>`)
//line lib/promscrape/targetstatus.qtpl:142
//line lib/promscrape/targetstatus.qtpl:148
qw422016.E().S(jobName)
//line lib/promscrape/targetstatus.qtpl:142
//line lib/promscrape/targetstatus.qtpl:148
qw422016.N().S(`(0/0 up)</a></h4><table class="table table-striped table-hover table-bordered table-sm"><thead><tr><th scope="col">Endpoint</th><th scope="col">State</th><th scope="col">Labels</th><th scope="col">Last Scrape</th><th scope="col">Scrape Duration</th><th scope="col">Samples Scraped</th><th scope="col">Error</th></tr></thead></table></div>`)
//line lib/promscrape/targetstatus.qtpl:158
//line lib/promscrape/targetstatus.qtpl:164
}
//line lib/promscrape/targetstatus.qtpl:158
//line lib/promscrape/targetstatus.qtpl:164
qw422016.N().S(`</body></html>`)
//line lib/promscrape/targetstatus.qtpl:161
//line lib/promscrape/targetstatus.qtpl:167
}
//line lib/promscrape/targetstatus.qtpl:161
//line lib/promscrape/targetstatus.qtpl:167
func WriteTargetsResponseHTML(qq422016 qtio422016.Writer, jts []jobTargetsStatuses, emptyJobs []string, onlyUnhealthy bool) {
//line lib/promscrape/targetstatus.qtpl:161
//line lib/promscrape/targetstatus.qtpl:167
qw422016 := qt422016.AcquireWriter(qq422016)
//line lib/promscrape/targetstatus.qtpl:161
//line lib/promscrape/targetstatus.qtpl:167
StreamTargetsResponseHTML(qw422016, jts, emptyJobs, onlyUnhealthy)
//line lib/promscrape/targetstatus.qtpl:161
//line lib/promscrape/targetstatus.qtpl:167
qt422016.ReleaseWriter(qw422016)
//line lib/promscrape/targetstatus.qtpl:161
//line lib/promscrape/targetstatus.qtpl:167
}
//line lib/promscrape/targetstatus.qtpl:161
//line lib/promscrape/targetstatus.qtpl:167
func TargetsResponseHTML(jts []jobTargetsStatuses, emptyJobs []string, onlyUnhealthy bool) string {
//line lib/promscrape/targetstatus.qtpl:161
//line lib/promscrape/targetstatus.qtpl:167
qb422016 := qt422016.AcquireByteBuffer()
//line lib/promscrape/targetstatus.qtpl:161
//line lib/promscrape/targetstatus.qtpl:167
WriteTargetsResponseHTML(qb422016, jts, emptyJobs, onlyUnhealthy)
//line lib/promscrape/targetstatus.qtpl:161
//line lib/promscrape/targetstatus.qtpl:167
qs422016 := string(qb422016.B)
//line lib/promscrape/targetstatus.qtpl:161
//line lib/promscrape/targetstatus.qtpl:167
qt422016.ReleaseByteBuffer(qb422016)
//line lib/promscrape/targetstatus.qtpl:161
//line lib/promscrape/targetstatus.qtpl:167
return qs422016
//line lib/promscrape/targetstatus.qtpl:161
//line lib/promscrape/targetstatus.qtpl:167
}
//line lib/promscrape/targetstatus.qtpl:163
//line lib/promscrape/targetstatus.qtpl:169
func streamformatLabel(qw422016 *qt422016.Writer, labels []prompbmarshal.Label) {
//line lib/promscrape/targetstatus.qtpl:163
//line lib/promscrape/targetstatus.qtpl:169
qw422016.N().S(`{`)
//line lib/promscrape/targetstatus.qtpl:165
//line lib/promscrape/targetstatus.qtpl:171
for i, label := range labels {
//line lib/promscrape/targetstatus.qtpl:166
//line lib/promscrape/targetstatus.qtpl:172
qw422016.E().S(label.Name)
//line lib/promscrape/targetstatus.qtpl:166
//line lib/promscrape/targetstatus.qtpl:172
qw422016.N().S(`=`)
//line lib/promscrape/targetstatus.qtpl:166
//line lib/promscrape/targetstatus.qtpl:172
qw422016.E().Q(label.Value)
//line lib/promscrape/targetstatus.qtpl:167
//line lib/promscrape/targetstatus.qtpl:173
if i+1 < len(labels) {
//line lib/promscrape/targetstatus.qtpl:167
//line lib/promscrape/targetstatus.qtpl:173
qw422016.N().S(`,`)
//line lib/promscrape/targetstatus.qtpl:167
//line lib/promscrape/targetstatus.qtpl:173
qw422016.N().S(` `)
//line lib/promscrape/targetstatus.qtpl:167
//line lib/promscrape/targetstatus.qtpl:173
}
//line lib/promscrape/targetstatus.qtpl:168
//line lib/promscrape/targetstatus.qtpl:174
}
//line lib/promscrape/targetstatus.qtpl:168
//line lib/promscrape/targetstatus.qtpl:174
qw422016.N().S(`}`)
//line lib/promscrape/targetstatus.qtpl:170
//line lib/promscrape/targetstatus.qtpl:176
}
//line lib/promscrape/targetstatus.qtpl:170
//line lib/promscrape/targetstatus.qtpl:176
func writeformatLabel(qq422016 qtio422016.Writer, labels []prompbmarshal.Label) {
//line lib/promscrape/targetstatus.qtpl:170
//line lib/promscrape/targetstatus.qtpl:176
qw422016 := qt422016.AcquireWriter(qq422016)
//line lib/promscrape/targetstatus.qtpl:170
//line lib/promscrape/targetstatus.qtpl:176
streamformatLabel(qw422016, labels)
//line lib/promscrape/targetstatus.qtpl:170
//line lib/promscrape/targetstatus.qtpl:176
qt422016.ReleaseWriter(qw422016)
//line lib/promscrape/targetstatus.qtpl:170
//line lib/promscrape/targetstatus.qtpl:176
}
//line lib/promscrape/targetstatus.qtpl:170
//line lib/promscrape/targetstatus.qtpl:176
func formatLabel(labels []prompbmarshal.Label) string {
//line lib/promscrape/targetstatus.qtpl:170
//line lib/promscrape/targetstatus.qtpl:176
qb422016 := qt422016.AcquireByteBuffer()
//line lib/promscrape/targetstatus.qtpl:170
//line lib/promscrape/targetstatus.qtpl:176
writeformatLabel(qb422016, labels)
//line lib/promscrape/targetstatus.qtpl:170
//line lib/promscrape/targetstatus.qtpl:176
qs422016 := string(qb422016.B)
//line lib/promscrape/targetstatus.qtpl:170
//line lib/promscrape/targetstatus.qtpl:176
qt422016.ReleaseByteBuffer(qb422016)
//line lib/promscrape/targetstatus.qtpl:170
//line lib/promscrape/targetstatus.qtpl:176
return qs422016
//line lib/promscrape/targetstatus.qtpl:170
//line lib/promscrape/targetstatus.qtpl:176
}