Merge pull request #90 from robur-coop/volumes_

Manage Volumes
robur-coop · Nov 12, 2024 · c2450c4 · c2450c4
2 parents c4b9868 + a17e51c
commit c2450c4
Show file tree

Hide file tree

Showing 7 changed files with 1,047 additions and 80 deletions.
diff --git a/assets/main.js b/assets/main.js
@@ -173,7 +173,7 @@ async function deployUnikernel() {
 	const binary = document.getElementById("unikernel-binary").files[0];
 	const molly_csrf = document.getElementById("molly-csrf").value;
 	const formAlert = document.getElementById("form-alert");
-	if (!name || !binary) {
+	if (!isValidName(name) || !binary) {
 		formAlert.classList.remove("hidden", "text-primary-500");
 		formAlert.classList.add("text-secondary-500");
 		formAlert.textContent = "Please fill in the required data"
@@ -529,3 +529,126 @@ async function logout() {
 		buttonLoading(logoutButton, false, "Logout")
 	}
 }
+
+async function deleteVolume(block_name) {
+	const deleteButton = document.getElementById(`delete-block-button-${block_name}`);
+	const molly_csrf = document.getElementById("molly-csrf").value;
+	const formAlert = document.getElementById("form-alert");
+	try {
+		buttonLoading(deleteButton, true, "Deleting...")
+		const response = await fetch("/api/volume/delete", {
+			method: 'POST',
+			headers: {
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify(
+				{
+					"block_name": block_name,
+					"molly_csrf": molly_csrf
+				})
+		})
+		const data = await response.json();
+		if (data.status === 200) {
+			formAlert.classList.remove("hidden", "text-secondary-500");
+			formAlert.classList.add("text-primary-500");
+			formAlert.textContent = "Successfully deleted";
+			postAlert("bg-primary-300", "Volume deleted succesfully");
+			setTimeout(() => window.location.reload(), 1000);
+			buttonLoading(deleteButton, false, "Delete")
+		} else {
+			formAlert.classList.remove("hidden", "text-primary-500");
+			formAlert.classList.add("text-secondary-500");
+			formAlert.textContent = data.data
+			buttonLoading(deleteButton, false, "Delete")
+		}
+	} catch (error) {
+		formAlert.classList.remove("hidden", "text-primary-500");
+		formAlert.classList.add("text-secondary-500");
+		formAlert.textContent = error
+		buttonLoading(deleteButton, false, "Delete")
+	}
+}
+
+async function createVolume() {
+	const createButton = document.getElementById("create-block-button");
+	const block_name = document.getElementById("block_name").value;
+	const block_size = document.getElementById("block_size").innerText;
+	const data_toggle = document.getElementById("dataToggle").checked;
+	const molly_csrf = document.getElementById("molly-csrf").value;
+	const formAlert = document.getElementById("form-alert");
+	const block_compressed = document.getElementById("block_compressed").checked;
+	const block_data = document.getElementById("block_data").files[0];
+
+	if (!isValidName(block_name)) {
+		formAlert.classList.remove("hidden", "text-primary-500");
+		formAlert.classList.add("text-secondary-500");
+		formAlert.textContent = "Please enter a name for this volume"
+		buttonLoading(createButton, false, "Create volume")
+		return;
+	}
+	if (Number(block_size) < 1) {
+		formAlert.classList.remove("hidden", "text-primary-500");
+		formAlert.classList.add("text-secondary-500");
+		formAlert.textContent = "Volume size must be 1MB or greater."
+		buttonLoading(createButton, false, "Create volume")
+		return;
+	}
+	if (data_toggle && !block_data) {
+		formAlert.classList.remove("hidden", "text-primary-500");
+		formAlert.classList.add("text-secondary-500");
+		formAlert.textContent = "You must upload a file else switch 'Dumb data to this volume' off"
+		buttonLoading(createButton, false, "Create volume")
+		return;
+	}
+
+	try {
+		buttonLoading(createButton, true, "Creating...")
+		let formData = new FormData();
+		let json_data = JSON.stringify(
+			{
+				"block_name": block_name,
+				"block_size": Number(block_size),
+				"block_compressed": block_compressed,
+				"molly_csrf": molly_csrf
+			})
+		formData.append("block_data", block_data)
+		formData.append("json_data", json_data)
+		const response = await fetch("/api/volume/create", {
+			method: 'POST',
+			body: formData
+		})
+		const data = await response.json();
+		if (data.status === 200) {
+			formAlert.classList.remove("hidden", "text-secondary-500");
+			formAlert.classList.add("text-primary-500");
+			formAlert.textContent = "Succesfully created";
+			postAlert("bg-primary-300", "Volume created succesfully");
+			setTimeout(() => window.location.reload(), 1000);
+			buttonLoading(createButton, false, "Create volume")
+		} else {
+			formAlert.classList.remove("hidden", "text-primary-500");
+			formAlert.classList.add("text-secondary-500");
+			formAlert.textContent = data.data
+			buttonLoading(createButton, false, "Create volume")
+		}
+	} catch (error) {
+		formAlert.classList.remove("hidden", "text-primary-500");
+		formAlert.classList.add("text-secondary-500");
+		formAlert.textContent = error
+		buttonLoading(createButton, false, "Create volume")
+	}
+}
+
+function isValidName(s) {
+	const length = s.length;
+	if (length === 0 || length >= 64) return false;
+	if (s[0] === '-') return false;
+	for (let i = 0; i < length; i++) {
+		const char = s[i];
+		if (!(/[a-zA-Z0-9.-]/).test(char)) {
+			return false;
+		}
+	}
+	return true;
+}
+
diff --git a/assets/style.css b/assets/style.css
diff --git a/header_layout.ml b/header_layout.ml
@@ -32,4 +32,6 @@ let header ?(page_title = "Mollymawk") ~icon () =
                 "https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js";
             ]
           (txt "");
+        (* chart.js is used for chart elements like pie charts. We use this to visualize usage data of policies*)
+        script ~a:[ a_src "https://cdn.jsdelivr.net/npm/chart.js" ] (txt "");
       ])