1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
'use strict';
const events = require('../events.js');
const misc = require('../util/misc.js');
const views = require('../util/views.js');
const MetricList = require('../models/metric_list.js');
const mainTemplate = views.getTemplate('metric-header');
const metricItemTemplate = views.getTemplate('metric-header-item');
class MetricHeaderControl extends events.EventTarget {
constructor(hostNode, ctx) {
super();
this._ctx = ctx;
this._hostNode = hostNode;
this._selectedMetrics = new MetricList();
this._headerNode = mainTemplate(ctx);
this._metricListNode = this._headerNode.querySelector('ul.metric-list');
this._hostNode.insertBefore(
this._headerNode, this._hostNode.nextSibling);
MetricList.loadAll().then(response => {
this._ctx.allMetrics = response.results;
this._addSelectedMetrics(ctx.parameters.metrics);
this._installMetrics(response.results);
this._refreshStartSortingButton();
});
}
_addSelectedMetrics(metricsStr) {
let selectedNames = (metricsStr || '').split(' ');
for (let metric of [...this._ctx.allMetrics]) {
if (selectedNames.includes(metric.tag.names[0])) {
this._selectedMetrics.add(metric);
}
}
}
_installMetrics(metrics) {
for (let metric of metrics) {
const node = metricItemTemplate(Object.assign({},
{
metric: metric,
selected: this._selectedMetrics.includes(metric),
},
this._ctx));
node.addEventListener('click', e =>
this._evtMetricClicked(e, node, metric));
this._metricListNode.appendChild(node);
}
}
_evtMetricClicked(e, node, metric) {
e.preventDefault();
node.classList.toggle('selected');
node.querySelector('a').classList.toggle('selected');
if (this._selectedMetrics.includes(metric)) {
this._selectedMetrics.remove(metric);
} else {
this._selectedMetrics.add(metric);
}
this._ctx.parameters = Object.assign({},
this._ctx.parameters, {
metrics: this._selectedMetrics
.map(m => m.tag.names[0]).join(' '),
});
this._refreshStartSortingButton();
this.dispatchEvent(new CustomEvent('submit'));
}
_refreshStartSortingButton() {
let btn = this._hostNode.querySelector('a.sorting');
btn.hidden = !this._selectedMetrics.length;
btn.setAttribute('href', views.getMetricSorterUrl('random', this._ctx.parameters));
}
refreshQuery(query) {
this._ctx.parameters.query = query;
this._refreshStartSortingButton();
}
}
module.exports = MetricHeaderControl;
|
