mirror of
https://github.com/zaphar/Heracles.git
synced 2025-07-23 12:39:50 -04:00
ui: Select all for the label filters works
This commit is contained in:
parent
5a76207cca
commit
225755d6b3
@ -333,7 +333,6 @@ export class GraphPlot extends HTMLElement {
|
|||||||
* @returns {HTMLDivElement}
|
* @returns {HTMLDivElement}
|
||||||
*/
|
*/
|
||||||
buildSelectElement(key) {
|
buildSelectElement(key) {
|
||||||
// TODO(jwall): Should we have a select all?
|
|
||||||
var id = key + "-select" + Math.random();
|
var id = key + "-select" + Math.random();
|
||||||
const element = document.createElement("div");
|
const element = document.createElement("div");
|
||||||
const select = document.createElement("select");
|
const select = document.createElement("select");
|
||||||
@ -341,13 +340,14 @@ export class GraphPlot extends HTMLElement {
|
|||||||
// TODO(jwall): This is how you set boolean attributes. Use the attribute named... :-(
|
// TODO(jwall): This is how you set boolean attributes. Use the attribute named... :-(
|
||||||
select.setAttribute("multiple", "multiple");
|
select.setAttribute("multiple", "multiple");
|
||||||
const optElement = document.createElement("option");
|
const optElement = document.createElement("option");
|
||||||
const optValue = "Select " + key;
|
const optValue = "Select All: " + key;
|
||||||
optElement.innerText = optValue;
|
optElement.innerText = optValue;
|
||||||
select.appendChild(optElement);
|
select.appendChild(optElement);
|
||||||
for (var opt of this.#filterLabels[key]) {
|
for (var opt of this.#filterLabels[key]) {
|
||||||
const optElement = document.createElement("option");
|
const optElement = document.createElement("option");
|
||||||
optElement.setAttribute("value", opt);
|
optElement.setAttribute("value", opt);
|
||||||
optElement.setAttribute("selected", "selected");
|
optElement.setAttribute("selected", "selected");
|
||||||
|
optElement.selected = true;
|
||||||
optElement.innerText = opt;
|
optElement.innerText = opt;
|
||||||
select.appendChild(optElement);
|
select.appendChild(optElement);
|
||||||
}
|
}
|
||||||
@ -356,8 +356,29 @@ export class GraphPlot extends HTMLElement {
|
|||||||
select.onchange = function(evt) {
|
select.onchange = function(evt) {
|
||||||
evt.stopPropagation();
|
evt.stopPropagation();
|
||||||
var filteredValues = [];
|
var filteredValues = [];
|
||||||
for (var opt of /** @type {HTMLSelectElement} */(evt.target).selectedOptions) {
|
const selectElement = /** @type {HTMLSelectElement} */(evt.target);
|
||||||
filteredValues.push(opt.getAttribute("value"));
|
var selectAll = /** @type {?HTMLOptionElement}*/(null);
|
||||||
|
for (const optEl of selectElement.selectedOptions) {
|
||||||
|
if (optEl.value && optEl.value.startsWith("Select All: ")) {
|
||||||
|
selectAll = optEl;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (const o of selectElement.options) {
|
||||||
|
if (selectAll) {
|
||||||
|
if (o != selectAll) {
|
||||||
|
o.setAttribute("selected", "selected");
|
||||||
|
o.selected = true;
|
||||||
|
filteredValues.push(o.value);
|
||||||
|
} else {
|
||||||
|
o.removeAttribute("selected");
|
||||||
|
}
|
||||||
|
} else if (!o.selected) {
|
||||||
|
o.removeAttribute("selected");
|
||||||
|
} else {
|
||||||
|
o.setAttribute("selected", "selected");
|
||||||
|
filteredValues.push(o.value);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
self.#filteredLabelSets[key] = filteredValues;
|
self.#filteredLabelSets[key] = filteredValues;
|
||||||
self.reset(true);
|
self.reset(true);
|
||||||
@ -527,7 +548,7 @@ export class GraphPlot extends HTMLElement {
|
|||||||
columnwidth: [15, 20, 70],
|
columnwidth: [15, 20, 70],
|
||||||
header: {
|
header: {
|
||||||
align: "left",
|
align: "left",
|
||||||
values: ["Timestamp","Labels", "Log"],
|
values: ["Timestamp", "Labels", "Log"],
|
||||||
fill: { color: layout.xaxis.paper_bgcolor },
|
fill: { color: layout.xaxis.paper_bgcolor },
|
||||||
font: { color: getCssVariableValue('--text-color').trim() }
|
font: { color: getCssVariableValue('--text-color').trim() }
|
||||||
},
|
},
|
||||||
@ -556,7 +577,6 @@ export class GraphPlot extends HTMLElement {
|
|||||||
// TODO(jwall): Headers
|
// TODO(jwall): Headers
|
||||||
for (const line of lines) {
|
for (const line of lines) {
|
||||||
// For streams the timestamps are in nanoseconds
|
// For streams the timestamps are in nanoseconds
|
||||||
// TODO(zaphar): We should improve the timstamp formatting a bit
|
|
||||||
let timestamp = new Date(line.timestamp / 1000000);
|
let timestamp = new Date(line.timestamp / 1000000);
|
||||||
dateColumn.push(timestamp.toISOString());
|
dateColumn.push(timestamp.toISOString());
|
||||||
metaColumn.push(labelsName);
|
metaColumn.push(labelsName);
|
||||||
|
@ -39,6 +39,10 @@ input, textarea, select, option, button {
|
|||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
option[selected] {
|
||||||
|
background-color: var(--plot-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
body * {
|
body * {
|
||||||
padding-left: .3em;
|
padding-left: .3em;
|
||||||
padding-right: .3em;
|
padding-right: .3em;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user