Merge pull request #113 from vibinex/akg/orchestrator_refactor

refactor: split the orchestrator into different functions
vibinex · Sep 5, 2024 · a393b5a · a393b5a
2 parents 9e7ad40 + 048e0b7
commit a393b5a
Show file tree

Hide file tree

Showing 6 changed files with 249 additions and 182 deletions.
diff --git a/backgroundScript.js b/backgroundScript.js
@@ -14,7 +14,7 @@ chrome.runtime.onInstalled.addListener(() => {
 	// Make an API call to the backend to create a Rudderstack event when the extension is installed.
 	chrome.storage.local.get(["userId"]).then(({ userId }) => {
 		const body = {
-			userId: userId ? userId : "anonymous-id", // Use the stored userId or "anonymous-id" if not available.
+			userId: userId || "anonymous-id", // Use the stored userId or "anonymous-id" if not available.
 			function: 'chrome-extension-installed'
 		};
 		const url = `${websiteUrl}/api/extension/events`;

diff --git a/manifest.json b/manifest.json
@@ -1,6 +1,6 @@
 {
     "name": "Vibinex Code Review",
-    "version": "1.2.6",
+    "version": "1.2.8",
     "manifest_version": 3,
     "description": "Personalization and context for pull requests on GitHub & Bitbucket",
     "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAsRm6EaBdHDBxVjt9o9WKeL9EDdz1X+knDAU5uoZaRsXTmWjslhJN9DhSd7/Ys4aJOSN+s+5/HnIHcKV63P4GYaUM5FhETHEWORHlwIgjcV/1h6wD6bNbvXi06gtiygE+yMrCzzD93/Z+41XrwMElYiW2U5owNpat2Yfq4p9FDX1uBJUKsRIMp6LbRQla4vAzH/HMUtHWmeuUsmPVzcq1b6uB1QmuJqIQ1GrntIHw3UBWUlqRZ5OtxI1DCP3knglvqz26WT5Pc4GBDNlcI9+3F0vhwqwHqrdyjZpIKZ7iaQzcrovOqUKuXs1J3hDtXq8WoJELIqfIisY7rhAvq6b8jQIDAQAB",

diff --git a/popup/popup.html b/popup/popup.html
@@ -44,7 +44,7 @@
         </div>
         <div id="user_div">
             <img id="session-image" alt="User Profile Pic" class="profile_picture" />
-            <h1 id="session-name" class="title"></h1>
+            <h1 id="session-name" class="title">User</h1>
             <p class="subtitle">
                 You are logged in as <span id="session-email"></span>
             </p>
@@ -54,15 +54,21 @@ <h1 id="session-name" class="title"></h1>
                     <small>(Logout)</small>
                 </button>
             </form>
-            <div id="pr-input-div">
-                <input type="text" id="pr-url-input" placeholder="Ex: https://github.com/Alokit-Innovations/vibi-dpu/pull/1">
-                <button id="pr-url-submit-button" class="button">Trigger!</button>
+
+
+            <div class="dpu-status-container">
+                DPU Status:
+                <button id="refreshDpuHealth" class="dpu-status-indicator button">
+                    <span style="font-size: 1.25rem;">↻</span>
+                </button>
+                <span id="dpuHealthStatus" class="chip"></span>
             </div>
+
             <a href="https://www.producthunt.com/products/vibinex-code-review/reviews?utm_source=badge-product_review&utm_medium=badge&utm_souce=badge-vibinex&#0045;code&#0045;review"
                 target="_blank">
                 <img src="https://api.producthunt.com/widgets/embed-image/v1/product_review.svg?product_id=534479&theme=light"
                     alt="Vibinex&#0032;Code&#0045;Review - A&#0032;distributed&#0032;process&#0032;for&#0032;reviewing&#0032;pull&#0032;requests&#0046; | Product Hunt"
-                    class="producthunt_review_button" width="250" height="54" />
+                    class="producthunt_review_button" width="200" height="45" />
             </a>
         </div>
     </div>

diff --git a/popup/popup.js b/popup/popup.js
@@ -69,50 +69,57 @@ chrome.storage.local.get(["websiteUrl"]).then(({ websiteUrl }) => {
 					console.error("Unable to get Cookie value for session: ", err);
 				});
 
-            // Add event listener to the submit button
-			const submitButton = document.getElementById("pr-url-submit-button");
-			submitButton.addEventListener("click", () => {
-				submitButton.disabled = true;
-				const urlInput = document.getElementById("pr-url-input");
-				const url = urlInput.value.trim();
-				if (url === "") {
-					console.error("[popup/submitButton] URL cannot be empty");
-					submitButton.textContent = "Empty URL! Try Again";
-					return;
+			// Evaluating and displaying the DPU health status
+			const refreshButton = document.getElementById('refreshDpuHealth');
+			const statusChip = document.getElementById('dpuHealthStatus');
+
+			const dpuHealthStates = {
+				START: 'yellow',
+				FAILED: 'red',
+				SUCCESS: 'green',
+				INACTIVE: 'grey'
+			};
+
+			async function fetchDpuHealth() {
+				refreshButton.disabled = true;
+				refreshButton.innerHTML = '<div class="loader"></div>';
+
+				try {
+					const response = await fetch(`${websiteUrl}/api/docs/getDpuHealth`, {
+						method: 'POST',
+						headers: {
+							'Content-Type': 'application/json',
+							"Authorization": `Bearer ${tokenval}`
+						},
+						body: JSON.stringify({ user_id: user.id })
+					});
+					const data = await response.json();
+
+					const healthStatus = data.healthStatus in dpuHealthStates ? data.healthStatus : 'INACTIVE';
+					statusChip.textContent = healthStatus.charAt(0).toUpperCase() + healthStatus.slice(1);
+					statusChip.style.setProperty('--status-color', dpuHealthStates[healthStatus]);
+				} catch (error) {
+					console.error('Error fetching DPU health status:', error);
+					statusChip.textContent = 'Inactive';
+					statusChip.style.backgroundColor = dpuHealthStates.INACTIVE;
+				} finally {
+					refreshButton.disabled = false;
+					refreshButton.innerHTML = '<span style="font-size: 1.25rem;">↻</span>';
 				}
-				// Send the inputted URL through a POST call to an API
-				fetch(`${websiteUrl}/api/extension/trigger`, {
-					method: "POST",
-					headers: {
-						"Content-Type": "application/json",
-						"Authorization": `Bearer ${tokenval}`
-					},
-					body: JSON.stringify({ url: url })
-				}).then(response => {
-					if (response.ok) {
-						console.info("[popup/submitButton] URL submitted successfully");
-						submitButton.textContent = "Triggered!";
-					} else {
-						submitButton.disabled = false;
-						console.error("[popup/submitButton] Failed to submit URL", JSON.stringify(response));
-						submitButton.textContent = "Failed! Try Again";
-					}
-				}).catch(error => {
-					submitButton.disabled = false;
-					console.error("[popup/submitButton] Error while submitting URL:", error);
-					submitButton.textContent = "Failed! Try Again";
-				});
-			});			
-        } else {
-            // If no user session exists, display the login options.
-            document.querySelector("#login-div").style.display = "flex";
-        }
-    });
+			}
+
+			refreshButton.addEventListener('click', fetchDpuHealth);
+			fetchDpuHealth(); // Initial fetch
+		} else {
+			// If no user session exists, display the login options.
+			document.querySelector("#login-div").style.display = "flex";
+		}
+	});
 });
 
 // Display the extension version on window load.
 window.addEventListener('load', () => {
-    const manifestData = chrome.runtime.getManifest();
-    const version_p = document.getElementById("version");
-    version_p.innerHTML = "v" + manifestData.version;
+	const manifestData = chrome.runtime.getManifest();
+	const version_p = document.getElementById("version");
+	version_p.innerHTML = "v" + manifestData.version;
 });
diff --git a/popup/popup_css.css b/popup/popup_css.css
@@ -141,8 +141,8 @@ li {
 }
 
 .producthunt_review_button {
-	width: 250px;
-	height: 54px;
+	width: 200px;
+	height: 45px;
 	margin-top: 16px;
 	margin-bottom: 16px;
 }
@@ -182,4 +182,42 @@ li {
 	100% {
 		transform: rotate(360deg);
 	}
+}
+
+.dpu-status-container {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	border: 1px solid #e4e4e7;
+	border-radius: 9999px;
+	padding: 0.5rem;
+	margin-top: 16px;
+}
+
+.dpu-status-indicator {
+	width: 1rem;
+	height: 1rem;
+	border: 0;
+	margin-top: 0;
+}
+
+.chip {
+	--status-color: gray;
+	display: inline-flex;
+	align-items: center;
+	padding: 0.25rem 0.75rem;
+	border-radius: 9999px;
+	font-size: 0.875rem;
+	outline: 1px solid #cbd5e0;
+	margin-left: 0.5rem;
+}
+
+.chip::before {
+	content: '';
+	width: 0.75rem;
+	height: 0.75rem;
+	border-radius: 50%;
+	margin-right: 0.5rem;
+	background-color: var(--status-color);
 }