mirror of
https://github.com/LibreQoE/LibreQoS.git
synced 2025-02-25 18:55:32 -06:00
Combined dashlets are working. You can stack non-graph type dashlets on top of one another. Graph types will come shortly.
This commit is contained in:
parent
2c07968534
commit
7713ec9a59
@ -4,9 +4,11 @@ export class BaseCombinedDashlet extends BaseDashlet {
|
||||
constructor(slotNumber, dashlets) {
|
||||
super(slotNumber)
|
||||
|
||||
this.selectedIndex = 0;
|
||||
this.dashlets = dashlets;
|
||||
this.titles = [];
|
||||
this.subsciptions = [];
|
||||
this.divIds = [];
|
||||
dashlets.forEach((dash) => {
|
||||
this.titles.push(dash.title());
|
||||
this.subsciptions.push(dash.subscribeTo());
|
||||
@ -42,10 +44,21 @@ export class BaseCombinedDashlet extends BaseDashlet {
|
||||
let ul = document.createElement("ul");
|
||||
ul.classList.add("dropdown-menu");
|
||||
|
||||
let i =0;
|
||||
this.titles.forEach((t) => {
|
||||
let li1 = document.createElement("li");
|
||||
li1.innerHTML = "<a class='dropdown-item'>" + t + "</a>";
|
||||
let link = document.createElement("a");
|
||||
link.classList.add("dropdown-item");
|
||||
link.innerText = t;
|
||||
let myI = i;
|
||||
link.onclick = () => {
|
||||
this.divIds.forEach((id) => { $("#" + id).hide() });
|
||||
let divId = this.divIds[myI];
|
||||
$("#" + divId).show();
|
||||
}
|
||||
li1.appendChild(link);
|
||||
ul.appendChild(li1);
|
||||
i++;
|
||||
})
|
||||
|
||||
dd.appendChild(ul);
|
||||
@ -60,9 +73,11 @@ export class BaseCombinedDashlet extends BaseDashlet {
|
||||
buildContainer() {
|
||||
let containers = [];
|
||||
let i = 0;
|
||||
this.divIds = [];
|
||||
this.dashlets.forEach((d) => {
|
||||
d.size = 12;
|
||||
d.id = this.id + "___" + i;
|
||||
this.divIds.push(this.id + "___" + i);
|
||||
let container = document.createElement("div");
|
||||
container.id = d.id;
|
||||
containers.push(container);
|
||||
@ -74,7 +89,9 @@ export class BaseCombinedDashlet extends BaseDashlet {
|
||||
let row = document.createElement("div");
|
||||
row.classList.add("row");
|
||||
containers.forEach((c) => {
|
||||
c.style.backgroundColor = "rgba(1, 0, 0, 1)";
|
||||
if (i > 0) {
|
||||
c.style.display = "none";
|
||||
}
|
||||
row.appendChild(c);
|
||||
i++;
|
||||
});
|
||||
|
@ -1,12 +1,20 @@
|
||||
import {BaseCombinedDashlet} from "./base_combined_dashlet";
|
||||
import {Top10Downloaders} from "./top10_downloaders";
|
||||
import {Top10FlowsRate} from "./top10flows_rate";
|
||||
import {Top10FlowsBytes} from "./top10flows_bytes";
|
||||
import {Top10EndpointsByCountry} from "./endpoints_by_country";
|
||||
import {IpProtocols} from "./ip_protocols";
|
||||
import {EtherProtocols} from "./ether_protocols";
|
||||
|
||||
export class CombinedTopDashlet extends BaseCombinedDashlet {
|
||||
constructor(slot) {
|
||||
let dashlets = [
|
||||
new Top10Downloaders((slot * 1000) + 1),
|
||||
new Top10FlowsRate((slot * 1000) + 2),
|
||||
new Top10FlowsBytes((slot * 1000) + 3),
|
||||
new Top10EndpointsByCountry((slot * 1000) + 4),
|
||||
new IpProtocols((slot * 1000) + 5),
|
||||
new EtherProtocols((slot * 1000) + 6),
|
||||
]
|
||||
super(slot, dashlets);
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
import {BaseDashlet} from "./base_dashlet";
|
||||
import {theading} from "../helpers/builders";
|
||||
import {clearDashDiv, theading} from "../helpers/builders";
|
||||
import {scaleNumber, scaleNanos} from "../helpers/scaling";
|
||||
|
||||
export class Top10EndpointsByCountry extends BaseDashlet {
|
||||
@ -70,9 +70,7 @@ export class Top10EndpointsByCountry extends BaseDashlet {
|
||||
t.appendChild(tbody);
|
||||
|
||||
// Display it
|
||||
while (target.children.length > 1) {
|
||||
target.removeChild(target.lastChild);
|
||||
}
|
||||
clearDashDiv(this.id, target);
|
||||
target.appendChild(t);
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
import {BaseDashlet} from "./base_dashlet";
|
||||
import {simpleRow, theading} from "../helpers/builders";
|
||||
import {clearDashDiv, simpleRow, theading} from "../helpers/builders";
|
||||
import {scaleNumber, scaleNanos} from "../helpers/scaling";
|
||||
|
||||
export class EtherProtocols extends BaseDashlet {
|
||||
@ -67,9 +67,7 @@ export class EtherProtocols extends BaseDashlet {
|
||||
t.appendChild(tbody);
|
||||
|
||||
// Display it
|
||||
while (target.children.length > 1) {
|
||||
target.removeChild(target.lastChild);
|
||||
}
|
||||
clearDashDiv(this.id, target);
|
||||
target.appendChild(t);
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
import {BaseDashlet} from "./base_dashlet";
|
||||
import {simpleRow, theading} from "../helpers/builders";
|
||||
import {clearDashDiv, simpleRow, theading} from "../helpers/builders";
|
||||
import {scaleNumber, scaleNanos} from "../helpers/scaling";
|
||||
|
||||
export class IpProtocols extends BaseDashlet {
|
||||
@ -55,9 +55,7 @@ export class IpProtocols extends BaseDashlet {
|
||||
t.appendChild(tbody);
|
||||
|
||||
// Display it
|
||||
while (target.children.length > 1) {
|
||||
target.removeChild(target.lastChild);
|
||||
}
|
||||
clearDashDiv(this.id, target);
|
||||
target.appendChild(t);
|
||||
}
|
||||
}
|
||||
|
@ -81,7 +81,7 @@ export class Top10Downloaders extends BaseDashlet {
|
||||
t.appendChild(tbody);
|
||||
|
||||
// Display it
|
||||
clearDashDiv(this.id);
|
||||
clearDashDiv(this.id, target);
|
||||
target.appendChild(t);
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
import {BaseDashlet} from "./base_dashlet";
|
||||
import {theading} from "../helpers/builders";
|
||||
import {clearDashDiv, theading} from "../helpers/builders";
|
||||
import {scaleNumber, scaleNanos} from "../helpers/scaling";
|
||||
|
||||
export class Top10FlowsBytes extends BaseDashlet {
|
||||
@ -100,9 +100,7 @@ export class Top10FlowsBytes extends BaseDashlet {
|
||||
t.appendChild(tbody);
|
||||
|
||||
// Display it
|
||||
while (target.children.length > 1) {
|
||||
target.removeChild(target.lastChild);
|
||||
}
|
||||
clearDashDiv(this.id, target);
|
||||
target.appendChild(t);
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
import {BaseDashlet} from "./base_dashlet";
|
||||
import {theading} from "../helpers/builders";
|
||||
import {clearDashDiv, theading} from "../helpers/builders";
|
||||
import {scaleNumber, scaleNanos} from "../helpers/scaling";
|
||||
|
||||
export class Top10FlowsRate extends BaseDashlet {
|
||||
@ -100,9 +100,7 @@ export class Top10FlowsRate extends BaseDashlet {
|
||||
t.appendChild(tbody);
|
||||
|
||||
// Display it
|
||||
while (target.children.length > 1) {
|
||||
target.removeChild(target.lastChild);
|
||||
}
|
||||
clearDashDiv(this.id, target);
|
||||
target.appendChild(t);
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
import {BaseDashlet} from "./base_dashlet";
|
||||
import {simpleRow, theading} from "../helpers/builders";
|
||||
import {clearDashDiv, simpleRow, theading} from "../helpers/builders";
|
||||
import {scaleNumber, scaleNanos} from "../helpers/scaling";
|
||||
|
||||
export class TopTreeSummary extends BaseDashlet {
|
||||
@ -52,9 +52,7 @@ export class TopTreeSummary extends BaseDashlet {
|
||||
t.appendChild(tbody);
|
||||
|
||||
// Display it
|
||||
while (target.children.length > 1) {
|
||||
target.removeChild(target.lastChild);
|
||||
}
|
||||
clearDashDiv(this.id, target);
|
||||
target.appendChild(t);
|
||||
}
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
import {BaseDashlet} from "./base_dashlet";
|
||||
import {RttHistogram} from "../graphs/rtt_histo";
|
||||
import {theading} from "../helpers/builders";
|
||||
import {clearDashDiv, theading} from "../helpers/builders";
|
||||
import {scaleNumber, rttCircleSpan} from "../helpers/scaling";
|
||||
|
||||
export class Worst10Downloaders extends BaseDashlet {
|
||||
@ -81,9 +81,7 @@ export class Worst10Downloaders extends BaseDashlet {
|
||||
t.appendChild(tbody);
|
||||
|
||||
// Display it
|
||||
while (target.children.length > 1) {
|
||||
target.removeChild(target.lastChild);
|
||||
}
|
||||
clearDashDiv(this.id, target);
|
||||
target.appendChild(t);
|
||||
}
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
import {BaseDashlet} from "./base_dashlet";
|
||||
import {RttHistogram} from "../graphs/rtt_histo";
|
||||
import {theading} from "../helpers/builders";
|
||||
import {clearDashDiv, theading} from "../helpers/builders";
|
||||
import {scaleNumber, rttCircleSpan} from "../helpers/scaling";
|
||||
|
||||
export class Worst10Retransmits extends BaseDashlet {
|
||||
@ -81,9 +81,7 @@ export class Worst10Retransmits extends BaseDashlet {
|
||||
t.appendChild(tbody);
|
||||
|
||||
// Display it
|
||||
while (target.children.length > 1) {
|
||||
target.removeChild(target.lastChild);
|
||||
}
|
||||
clearDashDiv(this.id, target);
|
||||
target.appendChild(t);
|
||||
}
|
||||
}
|
||||
|
@ -16,7 +16,7 @@ export function simpleRow(text) {
|
||||
return td;
|
||||
}
|
||||
|
||||
export function clearDashDiv(id) {
|
||||
export function clearDashDiv(id, target) {
|
||||
let limit = 1;
|
||||
if (id.includes("___")) limit = 0;
|
||||
while (target.children.length > limit) {
|
||||
|
Loading…
Reference in New Issue
Block a user