diff --git a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/base_combined_dashlet.js b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/base_combined_dashlet.js new file mode 100644 index 00000000..48f4045f --- /dev/null +++ b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/base_combined_dashlet.js @@ -0,0 +1,99 @@ +import {BaseDashlet} from "./base_dashlet"; + +export class BaseCombinedDashlet extends BaseDashlet { + constructor(slotNumber, dashlets) { + super(slotNumber) + + this.dashlets = dashlets; + this.titles = []; + this.subsciptions = []; + dashlets.forEach((dash) => { + this.titles.push(dash.title()); + this.subsciptions.push(dash.subscribeTo()); + }); + } + + subscribeTo() { + return this.subsciptions; + } + + #base() { + let div = document.createElement("div"); + div.id = this.id; + let sizeClasses = this.sizeClasses(); + for (let i=0; i { + let li1 = document.createElement("li"); + li1.innerHTML = "" + t + ""; + ul.appendChild(li1); + }) + + dd.appendChild(ul); + + title.appendChild(dd); + + div.appendChild(title); + + return div; + } + + buildContainer() { + let containers = []; + let i = 0; + this.dashlets.forEach((d) => { + d.size = 12; + d.id = this.id + "___" + i; + let container = document.createElement("div"); + container.id = d.id; + containers.push(container); + i++; + }); + + let base = this.#base(); + i = 0; + let row = document.createElement("div"); + row.classList.add("row"); + containers.forEach((c) => { + c.style.backgroundColor = "rgba(1, 0, 0, 1)"; + row.appendChild(c); + i++; + }); + base.appendChild(row); + + return base; + } + + setup() { + super.setup(); + this.dashlets.forEach((d) => { + d.size = this.size; + d.setup(); + }) + } + + onMessage(msg) { + this.dashlets.forEach((d) => { + d.onMessage(msg); + }) + } +} \ No newline at end of file diff --git a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/combined_top_dash.js b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/combined_top_dash.js new file mode 100644 index 00000000..4e95772b --- /dev/null +++ b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/combined_top_dash.js @@ -0,0 +1,17 @@ +import {BaseCombinedDashlet} from "./base_combined_dashlet"; +import {Top10Downloaders} from "./top10_downloaders"; +import {Top10FlowsRate} from "./top10flows_rate"; + +export class CombinedTopDashlet extends BaseCombinedDashlet { + constructor(slot) { + let dashlets = [ + new Top10Downloaders((slot * 1000) + 1), + new Top10FlowsRate((slot * 1000) + 2), + ] + super(slot, dashlets); + } + + title() { + return "Top-10 Downloaders"; + } +} \ No newline at end of file diff --git a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/dashlet_index.js b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/dashlet_index.js index 68722753..07f57de3 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/dashlet_index.js +++ b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/dashlet_index.js @@ -15,6 +15,7 @@ import {Worst10Retransmits} from "./worst10_retransmits"; import {CpuDash} from "./cpu_dash"; import {RamDash} from "./ram_dash"; import {TopTreeSummary} from "./top_tree_summary"; +import {CombinedTopDashlet} from "./combined_top_dash"; export const DashletMenu = [ { name: "Throughput Bits/Second", tag: "throughputBps", size: 3 }, @@ -31,9 +32,10 @@ export const DashletMenu = [ { name: "Top 10 Endpoints by Country", tag: "top10endpointsCountry", size: 6 }, { name: "Ether Protocols", tag: "etherProtocols", size: 6 }, { name: "IP Protocols", tag: "ipProtocols", size: 6 }, - { name: "CPU Utilization", tag: "cpu", size: 6 }, - { name: "RAM Utilization", tag: "ram", size: 6 }, + { name: "CPU Utilization", tag: "cpu", size: 3 }, + { name: "RAM Utilization", tag: "ram", size: 3 }, { name: "Network Tree Summary", tag: "treeSummary", size: 6 }, + { name: "Combined Top 10 Box", tag: "combinedTop10", size: 3 }, ]; export function widgetFactory(widgetName, count) { @@ -56,6 +58,7 @@ export function widgetFactory(widgetName, count) { case "cpu" : widget = new CpuDash(count); break; case "ram" : widget = new RamDash(count); break; case "treeSummary" : widget = new TopTreeSummary(count); break; + case "combinedTop10" : widget = new CombinedTopDashlet(count); break; default: { console.log("I don't know how to construct a widget of type [" + widgetName + "]"); return null; diff --git a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/top10_downloaders.js b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/top10_downloaders.js index a5a9cd7c..85e60b31 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/top10_downloaders.js +++ b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/top10_downloaders.js @@ -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 Top10Downloaders extends BaseDashlet { @@ -81,9 +81,7 @@ export class Top10Downloaders extends BaseDashlet { t.appendChild(tbody); // Display it - while (target.children.length > 1) { - target.removeChild(target.lastChild); - } + clearDashDiv(this.id); target.appendChild(t); } } diff --git a/src/rust/lqosd/src/node_manager/js_build/src/helpers/builders.js b/src/rust/lqosd/src/node_manager/js_build/src/helpers/builders.js index e5ce5e10..9ae4f449 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/helpers/builders.js +++ b/src/rust/lqosd/src/node_manager/js_build/src/helpers/builders.js @@ -14,4 +14,12 @@ export function simpleRow(text) { let td = document.createElement("td"); td.innerText = text; return td; +} + +export function clearDashDiv(id) { + let limit = 1; + if (id.includes("___")) limit = 0; + while (target.children.length > limit) { + target.removeChild(target.lastChild); + } } \ No newline at end of file