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:
Herbert Wolverson 2024-06-28 09:00:54 -05:00
parent 2c07968534
commit 7713ec9a59
12 changed files with 45 additions and 36 deletions

View File

@ -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++;
});

View File

@ -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);
}

View File

@ -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);
}
}

View File

@ -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);
}
}

View File

@ -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);
}
}

View File

@ -81,7 +81,7 @@ export class Top10Downloaders extends BaseDashlet {
t.appendChild(tbody);
// Display it
clearDashDiv(this.id);
clearDashDiv(this.id, target);
target.appendChild(t);
}
}

View File

@ -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);
}
}

View File

@ -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);
}
}

View File

@ -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);
}
}

View File

@ -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);
}
}

View File

@ -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);
}
}

View File

@ -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) {