85 lines
2.8 KiB
JavaScript
85 lines
2.8 KiB
JavaScript
'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;
|