SNMP front-end

openprotest · Mar 21, 2024 · 91e28c0 · 91e28c0
1 parent fcc22d0
commit 91e28c0
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 10 deletions.
diff --git a/Protest/Front/snmp.css b/Protest/Front/snmp.css
@@ -6,7 +6,7 @@
 	top: 8px;
 	height: 122px;
 	display: grid;
-	grid-template-columns: 96px auto minmax(96px, 112px) 64px 64px;
+	grid-template-columns: 96px auto 100px 56px 56px;
 	grid-template-rows: 32px 32px 32px 24px;
 	transition: .2s;
 }

diff --git a/Protest/Front/snmp.js b/Protest/Front/snmp.js
@@ -25,6 +25,7 @@ class Snmp extends Window {
 		this.targetInput.type = "text";
 		this.targetInput.placeholder = "hostname or ip";
 		this.targetInput.style.gridArea = "1 / 2 / 1 / 4";
+		this.targetInput.style.minWidth = "50px";
 		if (this.params.target != null) this.targetInput.value = this.params.target;
 		snmpInput.appendChild(this.targetInput);
 
@@ -34,12 +35,21 @@ class Snmp extends Window {
 		authLabel.textContent = "Community:";
 		snmpInput.appendChild(authLabel);
 
-		this.authInput = document.createElement("input");
-		this.authInput.type = "text";
-		this.authInput.placeholder = "public";
-		this.authInput.style.gridArea = "2 / 2";
-		this.authInput.style.marginRight = "0";
-		snmpInput.appendChild(this.authInput);
+		this.communityInput = document.createElement("input");
+		this.communityInput.type = "text";
+		this.communityInput.placeholder = "public";
+		this.communityInput.style.gridArea = "2 / 2";
+		this.communityInput.style.marginRight = "0";
+		this.communityInput.style.minWidth = "50px";
+		snmpInput.appendChild(this.communityInput);
+
+
+		this.credentialsInput = document.createElement("select");
+		this.credentialsInput.style.gridArea = "2 / 2";
+		this.credentialsInput.style.marginRight = "0";
+		this.credentialsInput.style.minWidth = "50px";
+		this.credentialsInput.style.display = "none";
+		snmpInput.appendChild(this.credentialsInput);
 
 		this.versionInput = document.createElement("select");
 		this.versionInput.style.gridArea = "2 / 3";
@@ -64,21 +74,22 @@ class Snmp extends Window {
 		this.oidInput.placeholder = "1.3.6.1.2.1.1.5.0";
 		this.oidInput.style.gridArea = "3 / 2 / 5 / 4";
 		this.oidInput.style.resize = "none";
+		this.oidInput.style.minWidth = "50px";
 		if (this.params.oid !== null) this.oidInput.value = this.params.oid;
 		snmpInput.appendChild(this.oidInput);
 
 		this.getButton = document.createElement("input");
 		this.getButton.type = "button";
 		this.getButton.value = "Get";
-		this.getButton.style.width = this.getButton.style.minWidth = "58px";
+		this.getButton.style.minWidth = "40px";
 		this.getButton.style.height = "auto";
 		this.getButton.style.gridArea = "3 / 4 / 5 / 4";
 		snmpInput.appendChild(this.getButton);
 
 		this.setButton = document.createElement("input");
 		this.setButton.type = "button";
 		this.setButton.value = "Set";
-		this.setButton.style.width = this.setButton.style.minWidth = "58px";
+		this.setButton.style.minWidth = "40px";
 		this.setButton.style.height = "auto";
 		this.setButton.style.gridArea = "3 / 5 / 5 / 5";
 		snmpInput.appendChild(this.setButton);
@@ -95,6 +106,17 @@ class Snmp extends Window {
 		this.targetInput.oninput = ()=> { this.params.target = this.targetInput.value };
 		this.oidInput.oninput = ()=> { this.params.oid = this.oidInput.value };
 
+		this.versionInput.onchange = ()=> {
+			if (this.versionInput.value == 3) {
+				authLabel.textContent = "Credentials:";
+				this.credentialsInput.style.display = "block";
+			}
+			else {
+				authLabel.textContent = "Community:";
+				this.credentialsInput.style.display = "none";
+			}
+		};
+
 		this.getButton.onclick = ()=> { this.GetQuery() };
 		this.setButton.onclick = ()=> { this.SetQuery() };
 
@@ -129,7 +151,51 @@ class Snmp extends Window {
 			return;
 		}
 
-		//TODO:
+		const spinner = document.createElement("div");
+		spinner.className = "spinner";
+		spinner.style.textAlign = "left";
+		spinner.style.marginTop = "160px";
+		spinner.style.marginBottom = "32px";
+		spinner.appendChild(document.createElement("div"));
+		this.content.appendChild(spinner);
+
+		this.targetInput.value = this.targetInput.value.trim();
+		this.getButton.disabled = true;
+		this.setButton.disabled = true;
+		this.plotBox.style.display = "none";
+		this.plotBox.textContent = "";
+
+		console.log(this.versionInput.value);
+
+		try {
+			let url;
+			if (this.versionInput.value == 3) {
+				url = `snmp/get?target=${encodeURIComponent(this.targetInput.value)}&ver=3&cred=${this.credentialsInput.value}`;
+			}
+			else {
+				url = `snmp/get?target=${encodeURIComponent(this.targetInput.value)}&ver=${this.versionInput.value}&community=${encodeURIComponent(this.credentialsInput.value)}`;
+			}
+
+			const response = await fetch(url, {
+				method: "POST",
+				body: this.oidInput.value.trim()
+			});
+
+			if (response.status !== 200) LOADER.HttpErrorHandler(response.status);
+
+			const text = await response.text();
+			//TODO:
+
+		}
+		catch (ex) {
+			this.ConfirmBox(ex, true, "mono/error.svg");
+		}
+		finally {
+			this.getButton.disabled = false;
+			this.setButton.disabled = false;
+			this.plotBox.style.display = "block";
+			this.content.removeChild(spinner);
+		}
 	}
 
 	async SetQuery() {