Skip to content

Commit db77e6c

Browse files
veniwareveniware
committed
Topology
- dynamically generate buttons - interactive highlighting for end-point - fix auth env. bug
1 parent 58fc688 commit db77e6c

File tree

3 files changed

+111
-77
lines changed

3 files changed

+111
-77
lines changed

‎Protest/Front/dhcpdiscover.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ class DhcpDiscover extends Window {
201201
acceptLabel.style.textAlign = "right";
202202
acceptLabel.style.gridRow = "4";
203203
acceptLabel.style.gridColumn = "2";
204-
204+
205205
const acceptBox = document.createElement("div");
206206
acceptBox.style.gridRow = "4";
207207
acceptBox.style.gridColumn = "3";

‎Protest/Front/topology.js‎

Lines changed: 109 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ class Topology extends Window {
1111
static VIEW_PADDING_X = 50;
1212
static VIEW_PADDING_Y = 50;
1313
static DEVICE_WIDTH = 100;
14-
static ROW_HEIGHT = 250;
14+
static ROW_HEIGHT = 200;
1515
static MAX_WIDTH = 1500;
1616

1717
constructor(args) {
@@ -654,7 +654,7 @@ class Topology extends Window {
654654

655655
for (const location in groups) {
656656
const length = groups[location].length;
657-
const width = length * Topology.DEVICE_WIDTH;
657+
const width = length * (Topology.DEVICE_WIDTH);
658658

659659
if (this.globalX + width > Topology.MAX_WIDTH) {
660660
this.globalX = Topology.VIEW_PADDING_X;
@@ -663,7 +663,7 @@ class Topology extends Window {
663663

664664
for (let i=0; i<groups[location].length; i++) {
665665
const element = groups[location][i].element;
666-
let x = this.globalX + i * Topology.DEVICE_WIDTH;
666+
let x = this.globalX + i * (Topology.DEVICE_WIDTH);
667667
let y = this.globalY;
668668
this.MoveDeviceElement(element, x, y);
669669
}
@@ -758,7 +758,7 @@ class Topology extends Window {
758758
}
759759

760760
this.MoveDeviceElement(device.element, groups[i].x + x, y);
761-
x += Topology.DEVICE_WIDTH;
761+
x += Topology.DEVICE_WIDTH + 50;
762762

763763
const nextLevel = {};
764764
for (const port in device.links) {
@@ -1318,15 +1318,15 @@ class Topology extends Window {
13181318
trafficBox.style.overflow = "hidden";
13191319
this.navPane.appendChild(trafficBox);
13201320

1321-
const inLabel = document.createElement("div");
1322-
inLabel.style.gridArea = "1 / 2";
1323-
inLabel.textContent = "Inbound";
1324-
trafficBox.appendChild(inLabel);
1321+
const rxLabel = document.createElement("div");
1322+
rxLabel.style.gridArea = "1 / 2";
1323+
rxLabel.textContent = "RX";
1324+
trafficBox.appendChild(rxLabel);
13251325

1326-
const outLabel = document.createElement("div");
1327-
outLabel.style.gridArea = "1 / 3";
1328-
outLabel.textContent = "Outbound";
1329-
trafficBox.appendChild(outLabel);
1326+
const txLabel = document.createElement("div");
1327+
txLabel.style.gridArea = "1 / 3";
1328+
txLabel.textContent = "TX";
1329+
trafficBox.appendChild(txLabel);
13301330

13311331

13321332
const bytesLabel = document.createElement("div");
@@ -1650,15 +1650,15 @@ class Topology extends Window {
16501650
errorBox.style.overflow = "hidden";
16511651
this.navPane.appendChild(errorBox);
16521652

1653-
const inLabel = document.createElement("div");
1654-
inLabel.style.gridArea = "1 / 2";
1655-
inLabel.textContent = "Inbound";
1656-
errorBox.appendChild(inLabel);
1653+
const rxLabel = document.createElement("div");
1654+
rxLabel.style.gridArea = "1 / 2";
1655+
rxLabel.textContent = "RX";
1656+
errorBox.appendChild(rxLabel);
16571657

1658-
const outLabel = document.createElement("div");
1659-
outLabel.style.gridArea = "1 / 3";
1660-
outLabel.textContent = "Outbound";
1661-
errorBox.appendChild(outLabel);
1658+
const txLabel = document.createElement("div");
1659+
txLabel.style.gridArea = "1 / 3";
1660+
txLabel.textContent = "TX";
1661+
errorBox.appendChild(txLabel);
16621662

16631663

16641664
const errorLabel = document.createElement("div");
@@ -2599,6 +2599,12 @@ class Topology extends Window {
25992599

26002600
if (this.selected) {
26012601
this.selected.element.highlight.classList.remove("topology-selected");
2602+
2603+
if (this.selected.endpoint && this.selected.endpoint.dot) {
2604+
for (const p in this.selected.endpoint.dot) {
2605+
this.selected.endpoint.dot[p].setAttribute("stroke", "none");
2606+
}
2607+
}
26022608
}
26032609

26042610
device.element.highlight.classList.add("topology-selected");
@@ -2668,32 +2674,12 @@ class Topology extends Window {
26682674
databaseButton.style.backgroundPosition = "center";
26692675
databaseButton.style.backgroundRepeat = "no-repeat";
26702676
databaseButton.style.backgroundImage = "url(mono/database.svg)";
2671-
2672-
const httpButton = document.createElement("button");
2673-
httpButton.style.minWidth = "unset";
2674-
httpButton.style.width = "36px";
2675-
httpButton.style.height = "36px";
2676-
httpButton.style.backgroundColor = "var(--clr-control)";
2677-
httpButton.style.backgroundSize = "28px 28px";
2678-
httpButton.style.backgroundPosition = "center";
2679-
httpButton.style.backgroundRepeat = "no-repeat";
2680-
httpButton.style.backgroundImage = "url(mono/earth.svg)";
2681-
2682-
const sshButton = document.createElement("button");
2683-
sshButton.style.minWidth = "unset";
2684-
sshButton.style.width = "36px";
2685-
sshButton.style.height = "36px";
2686-
sshButton.style.backgroundColor = "var(--clr-control)";
2687-
sshButton.style.backgroundSize = "28px 28px";
2688-
sshButton.style.backgroundPosition = "center";
2689-
sshButton.style.backgroundRepeat = "no-repeat";
2690-
sshButton.style.backgroundImage = "url(mono/ssh.svg)";
2691-
2692-
optionsBox.append(databaseButton, httpButton, sshButton);
2677+
databaseButton.onclick = ()=> LOADER.OpenDeviceByFile(initial.file);
2678+
optionsBox.appendChild(databaseButton);
26932679

26942680
const overwriteProtocol = {};
26952681
const dbEntry = LOADER.devices.data[device.initial.file];
2696-
2682+
26972683
let host = null;
26982684
if (device.initial.ip) {
26992685
host = device.initial.ip.split(";")[0].trim();
@@ -2713,38 +2699,75 @@ class Topology extends Window {
27132699
});
27142700
}
27152701

2716-
databaseButton.onclick = ()=> LOADER.OpenDeviceByFile(initial.file);
2702+
if (overwriteProtocol.http || ports.includes(80)) {
2703+
const httpButton = document.createElement("button");
2704+
httpButton.style.minWidth = "unset";
2705+
httpButton.style.width = "36px";
2706+
httpButton.style.height = "36px";
2707+
httpButton.style.backgroundColor = "var(--clr-control)";
2708+
httpButton.style.backgroundSize = "28px 28px";
2709+
httpButton.style.backgroundPosition = "center";
2710+
httpButton.style.backgroundRepeat = "no-repeat";
2711+
httpButton.style.backgroundImage = "url(mono/earth.svg)";
2712+
optionsBox.appendChild(httpButton);
2713+
2714+
httpButton.onclick = () => {
2715+
if (overwriteProtocol.http) { //http
2716+
const link = document.createElement("a");
2717+
link.href = "http://" + host + ":" + overwriteProtocol.http;
2718+
link.target = "_blank";
2719+
link.click();
2720+
}
2721+
else if (ports.includes(80)) { //http
2722+
const link = document.createElement("a");
2723+
link.href = "http://" + host;
2724+
link.target = "_blank";
2725+
link.click();
2726+
}
2727+
};
2728+
}
27172729

2718-
httpButton.onclick = ()=> {
2719-
if (overwriteProtocol.https) { //https
2720-
const link = document.createElement("a");
2721-
link.href = "https://" + host + ":" + overwriteProtocol.https;
2722-
link.target = "_blank";
2723-
link.click();
2724-
}
2725-
else if (ports.includes(443)) { //https
2726-
const link = document.createElement("a");
2727-
link.href = "https://" + host;
2728-
link.target = "_blank";
2729-
link.click();
2730-
}
2731-
else if (overwriteProtocol.http) { //http
2732-
const link = document.createElement("a");
2733-
link.href = "http://" + host + ":" + overwriteProtocol.http;
2734-
link.target = "_blank";
2735-
link.click();
2730+
if (overwriteProtocol.https || ports.includes(443)) {
2731+
const httpButton = document.createElement("button");
2732+
httpButton.style.minWidth = "unset";
2733+
httpButton.style.width = "36px";
2734+
httpButton.style.height = "36px";
2735+
httpButton.style.backgroundColor = "var(--clr-control)";
2736+
httpButton.style.backgroundSize = "28px 28px";
2737+
httpButton.style.backgroundPosition = "center";
2738+
httpButton.style.backgroundRepeat = "no-repeat";
2739+
httpButton.style.backgroundImage = "url(mono/earth.svg)";
2740+
optionsBox.append(httpButton);
2741+
2742+
httpButton.onclick = ()=> {
2743+
if (overwriteProtocol.https) { //https
2744+
const link = document.createElement("a");
2745+
link.href = "https://" + host + ":" + overwriteProtocol.https;
2746+
link.target = "_blank";
2747+
link.click();
2748+
}
2749+
else if (ports.includes(443)) { //https
2750+
const link = document.createElement("a");
2751+
link.href = "https://" + host;
2752+
link.target = "_blank";
2753+
link.click();
2754+
}
2755+
};
2756+
}
27362757

2737-
}
2738-
else if (ports.includes(80)) { //http
2739-
const link = document.createElement("a");
2740-
link.href = "http://" + host;
2741-
link.target = "_blank";
2742-
link.click();
2743-
}
2744-
};
2758+
if (overwriteProtocol.ssh || ports.includes(22)) {
2759+
const sshButton = document.createElement("button");
2760+
sshButton.style.minWidth = "unset";
2761+
sshButton.style.width = "36px";
2762+
sshButton.style.height = "36px";
2763+
sshButton.style.backgroundColor = "var(--clr-control)";
2764+
sshButton.style.backgroundSize = "28px 28px";
2765+
sshButton.style.backgroundPosition = "center";
2766+
sshButton.style.backgroundRepeat = "no-repeat";
2767+
sshButton.style.backgroundImage = "url(mono/ssh.svg)";
2768+
optionsBox.appendChild(sshButton);
27452769

2746-
sshButton.onclick = () => {
2747-
if (overwriteProtocol.ssh || ports.includes(22)) {
2770+
sshButton.onclick = () => {
27482771
let sshHost = null;
27492772
if (overwriteProtocol.ssh) {
27502773
sshHost = `${host}:${overwriteProtocol.ssh}`;
@@ -2762,8 +2785,8 @@ class Topology extends Window {
27622785
}
27632786

27642787
new Ssh({ host: sshHost, username: username, file: device.initial.file });
2765-
}
2766-
};
2788+
};
2789+
}
27672790
}
27682791

27692792
if (device.nosnmp) {
@@ -2989,7 +3012,7 @@ class Topology extends Window {
29893012

29903013
if (file === null) {
29913014
remoteBox.classList.add("topology-untracked");
2992-
remoteBox.style.backgroundImage = `url(mono/untracked.svg), radial-gradient(circle,rgb(232,118,0) 0%, rgb(232,118,0) 80%, rgba(0, 0, 0, 0) 100%)`;
3015+
remoteBox.style.backgroundImage = `url(mono/untracked.svg), radial-gradient(circle,rgb(232,118,0) 0%, rgb(232,118,0) 80%, #000 100%)`;
29933016
}
29943017

29953018
dbFile = file;
@@ -3108,6 +3131,17 @@ class Topology extends Window {
31083131
this.infoBox.textContent = "";
31093132
this.infoPopup.textContent = "";
31103133

3134+
if (device.endpoint) {
3135+
for (const p in device.endpoint.dot) {
3136+
device.endpoint.dot[p].setAttribute("stroke", "none");
3137+
}
3138+
3139+
if (portIndex in device.endpoint.dot) {
3140+
device.endpoint.dot[portIndex].setAttribute("stroke-width", "2");
3141+
device.endpoint.dot[portIndex].setAttribute("stroke", "var(--clr-accent)");
3142+
}
3143+
}
3144+
31113145
if (this.infoPopup.parentElement.style.display === "none") {
31123146
this.infoBox.style.visibility = "visible";
31133147
this.infoBox.style.opacity = "1";

‎Protest/Http/Auth.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -396,7 +396,7 @@ private static HashSet<string> PopulateAccessPath(string[] accessList) {
396396
path.Add("/issues/start");
397397
break;
398398

399-
case "settings:write":
399+
case "environment:write":
400400
path.Add("/config/zones/list");
401401
path.Add("/config/zones/save");
402402
path.Add("/config/dhcprange/list");

0 commit comments

Comments
 (0)