From 5a5830b383ca30634e72729a016fda25fe65b685 Mon Sep 17 00:00:00 2001
From: Jacqueline Amherst <jacqueline.amherst@icloud.com>
Date: Wed, 16 Apr 2025 14:44:23 -0500
Subject: [PATCH 01/26] move components into more specific directories

---
 src/app/components/NewAlarmModal.tsx          |   2 +-
 src/app/components/SlackModal.tsx             |   2 +-
 src/app/instances/[name]/backups/page.tsx     |   2 +-
 .../instances/[name]/configuration/page.tsx   |  27 ++-
 src/app/instances/[name]/firewall/page.tsx    |  58 +++----
 .../[name]/hardware/InstanceTypePage.tsx      |   4 +-
 .../instances/[name]/hardware/StoragePage.tsx |  15 +-
 .../components/ErrorBanner.tsx                |   0
 .../components/InstanceDetails.tsx            |   0
 .../components/StorageDetails.tsx             |   0
 .../components/SubmissionSpinner.tsx          |   0
 .../NewInstanceLoadingSkeleton.tsx            |   0
 src/app/instances/new/page.tsx                |  34 ++--
 src/app/instances/page.tsx                    | 158 +++++++++---------
 14 files changed, 149 insertions(+), 153 deletions(-)
 rename src/app/{ => instances}/components/ErrorBanner.tsx (100%)
 rename src/app/{ => instances}/components/InstanceDetails.tsx (100%)
 rename src/app/{ => instances}/components/StorageDetails.tsx (100%)
 rename src/app/{ => instances}/components/SubmissionSpinner.tsx (100%)
 rename src/app/instances/new/{ => components}/NewInstanceLoadingSkeleton.tsx (100%)

diff --git a/src/app/components/NewAlarmModal.tsx b/src/app/components/NewAlarmModal.tsx
index 6717af5..70dcedf 100644
--- a/src/app/components/NewAlarmModal.tsx
+++ b/src/app/components/NewAlarmModal.tsx
@@ -1,6 +1,6 @@
 import { useInstanceContext } from "../instances/[name]/InstanceContext";
 import { useState } from "react";
-import ErrorBanner from "@/app/components/ErrorBanner";
+import ErrorBanner from "@/app/instances/components/ErrorBanner";
 import axios from "axios";
 
 interface Props {
diff --git a/src/app/components/SlackModal.tsx b/src/app/components/SlackModal.tsx
index bc41260..4576e17 100644
--- a/src/app/components/SlackModal.tsx
+++ b/src/app/components/SlackModal.tsx
@@ -1,7 +1,7 @@
 import { useInstanceContext } from "../instances/[name]/InstanceContext";
 import { useState } from "react";
 import axios from "axios";
-import ErrorBanner from "@/app/components/ErrorBanner";
+import ErrorBanner from "@/app/instances/components/ErrorBanner";
 
 interface Props {
   url: string;
diff --git a/src/app/instances/[name]/backups/page.tsx b/src/app/instances/[name]/backups/page.tsx
index 033446f..0a174bd 100644
--- a/src/app/instances/[name]/backups/page.tsx
+++ b/src/app/instances/[name]/backups/page.tsx
@@ -2,7 +2,7 @@
 import React, { useEffect, useState } from "react";
 import axios from "axios";
 import { useInstanceContext } from "../InstanceContext";
-import SubmissionSpinner from "@/app/components/SubmissionSpinner";
+import SubmissionSpinner from "../../components/SubmissionSpinner";
 import { useNotificationsContext } from "@/app/NotificationContext";
 
 interface Backup {
diff --git a/src/app/instances/[name]/configuration/page.tsx b/src/app/instances/[name]/configuration/page.tsx
index e8d2e1c..b86521e 100644
--- a/src/app/instances/[name]/configuration/page.tsx
+++ b/src/app/instances/[name]/configuration/page.tsx
@@ -6,9 +6,9 @@ import { useInstanceContext } from "../InstanceContext";
 import { useNotificationsContext } from "@/app/NotificationContext";
 import { configItems } from "@/types/configuration";
 import { validateConfiguration } from "@/utils/validateConfig";
-import ErrorBanner from "@/app/components/ErrorBanner";
+import ErrorBanner from "@/app/instances/components/ErrorBanner";
 import Link from "next/link";
-import SubmissionSpinner from "@/app/components/SubmissionSpinner";
+import SubmissionSpinner from "../../components/SubmissionSpinner";
 
 interface Configuration {
   [key: string]: string;
@@ -50,12 +50,12 @@ export default function ConfigurationPage() {
     e.preventDefault();
     const validationErrors = validateConfiguration(configuration);
     setErrors(validationErrors);
-  
+
     if (validationErrors.length > 0) {
       configSectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
       return;
     }
-  
+
     if (!instance || !instance.name) {
       throw new Error("No instance found");
     };
@@ -80,14 +80,14 @@ export default function ConfigurationPage() {
       console.error("Error saving configuration:", error);
     }
   };
-  
+
 
   const resetError = (msg: string) => {
     setErrors((prev) => prev.filter((e) => e !== msg));
   };
 
   return (
-    <div 
+    <div
       className="max-w-4xl mx-auto p-6 bg-card text-pagetext1 rounded-sm shadow-md mt-8"
       ref={configSectionRef}
     >
@@ -183,16 +183,15 @@ export default function ConfigurationPage() {
           <button
             type="submit"
             disabled={formPending()}
-            className={`px-4 py-2 text-mainbg1 font-semibold rounded-sm ${
-              formPending()
-                ? "bg-btnhover1 opacity-70 cursor-not-allowed"
-                : "bg-btn1 hover:bg-btnhover1 flex items-center justify-center hover:shadow-[0_0_10px_#87d9da] transition-all duration-200"
-            }`}
+            className={`px-4 py-2 text-mainbg1 font-semibold rounded-sm ${formPending()
+              ? "bg-btnhover1 opacity-70 cursor-not-allowed"
+              : "bg-btn1 hover:bg-btnhover1 flex items-center justify-center hover:shadow-[0_0_10px_#87d9da] transition-all duration-200"
+              }`}
           >
-            {formPending() ? 
+            {formPending() ?
               <span className="flex items-center gap-2">
-                  <SubmissionSpinner />
-                  Saving ...
+                <SubmissionSpinner />
+                Saving ...
               </span>
               : "Save"}
           </button>
diff --git a/src/app/instances/[name]/firewall/page.tsx b/src/app/instances/[name]/firewall/page.tsx
index 699466c..db7be00 100644
--- a/src/app/instances/[name]/firewall/page.tsx
+++ b/src/app/instances/[name]/firewall/page.tsx
@@ -5,14 +5,14 @@ import axios from "axios";
 import React from "react";
 import { useInstanceContext } from "../InstanceContext";
 import { FirewallRule } from "@/types/firewall";
-import ErrorBanner from "@/app/components/ErrorBanner";
+import ErrorBanner from "@/app/instances/components/ErrorBanner";
 import { isValidDescription, isValidSourceIp, isInRangeCustomPort } from "@/utils/firewallValidation";
 import { COMMON_PORTS } from "@/utils/firewallConstants";
 import { Info } from "lucide-react";
 import { Trash2 } from "lucide-react";
 
 import { useNotificationsContext } from "@/app/NotificationContext";
-import SubmissionSpinner from "@/app/components/SubmissionSpinner";
+import SubmissionSpinner from "../../components/SubmissionSpinner";
 
 export default function FirewallPage() {
   const { instance } = useInstanceContext();
@@ -59,15 +59,15 @@ export default function FirewallPage() {
     setRules((prevRules) => {
       const updatedRules = [...prevRules];
       updatedRules[index] = { ...updatedRules[index], description: value };
-  
+
       const error = validateDescription(value);
       resetError(`Description must be 255 characters or fewer, and cannot contain the following characters: ^, ", ', %, &, <, >, |, \``);
-  
+
       if (error) addError(error);
       return updatedRules;
     });
   };
-  
+
   const handleSourceIpChange = (index: number, value: string) => {
     setRules((prevRules) => {
       const updatedRules = [...prevRules];
@@ -83,7 +83,7 @@ export default function FirewallPage() {
     resetError("Invalid Source IP format.");
     if (error) addError(error);
   };
-  
+
   const handleCustomPortsChange = (index: number, value: string) => {
     setRules((prevRules) => {
       const updatedRules = [...prevRules];
@@ -143,51 +143,51 @@ export default function FirewallPage() {
     }
     return null;
   }
-  
+
   const validateSourceIp = (sourceIp: string): string | null => {
     const inputError =
       "Invalid Source IP format. Use CIDR block notation, e.g. '192.168.0.0/24' or '10.0.0.1/32'.";
-      
+
     if (sourceIp.trim() !== "" && !isValidSourceIp(sourceIp)) {
       return inputError;
     }
-  
+
     return null;
   };
-  
+
   const validateCustomPorts = (customPorts: string, commonPorts: string[]): string[] => {
     const errors: string[] = [];
-  
+
     const portList = customPorts
       .split(",")
       .map((port) => port.trim())
       .filter((port) => port !== "");
-  
+
     const nonNumericPorts = portList.filter((port) => !/^\d+$/.test(port));
-  
+
     if (nonNumericPorts.length > 0) {
       errors.push("Custom ports must be a comma-separated list of numbers.");
       return errors;
     }
-  
+
     if (!isInRangeCustomPort(customPorts)) {
       errors.push("Ports must be between 1 and 65535.");
     }
-  
+
     const repeated = findCommonAndCustomPortOverlap(customPorts, commonPorts);
     if (repeated.length > 0) {
       errors.push("Port is already listed as a common port.");
     }
-  
+
     return errors;
   };
-  
+
   const findCommonAndCustomPortOverlap = (customPorts: string, commonPorts: string[]): string[] => {
     const customList = customPorts
       .split(",")
       .map((port) => port.trim())
       .filter((port) => port !== "");
-  
+
     const commonPortNumbers = COMMON_PORTS.filter(({ name }) => commonPorts.includes(name)).map((p) => p.port.toString());
     return customList.filter((port) => commonPortNumbers.includes(port));
   }
@@ -204,33 +204,33 @@ export default function FirewallPage() {
     });
 
     const validationErrors: string[] = [];
-  
+
     rules.forEach((rule) => {
       const descError = validateDescription(rule.description);
       const sourceIpError = validateSourceIp(rule.sourceIp);
       const customPortErrors = validateCustomPorts(rule.customPorts, rule.commonPorts);
-  
+
       if (descError) validationErrors.push(descError);
       if (sourceIpError) validationErrors.push(sourceIpError);
       validationErrors.push(...customPortErrors);
     });
-  
+
     setErrors(validationErrors);
-  
+
     if (validationErrors.length > 0) return;
-  
+
     try {
       const { data } = await axios.put(
         `/api/instances/${instance?.name}/firewall?region=${instance?.region}`,
         { rules }
       );
-  
+
       setRules(data);
     } catch (error) {
       console.error("Error saving rules:", error);
     }
   };
-  
+
   const handleReset = async () => {
     setIsLoading(true);
     try {
@@ -427,12 +427,12 @@ export default function FirewallPage() {
               disabled={errors.length > 0 || formPending()}
               className="font-heading1 bg-btn1 text-mainbg1 font-semibold px-4 py-2 rounded-sm hover:bg-btnhover1 cursor-pointer flex items-center justify-center hover:shadow-[0_0_10px_#87d9da] transition-all duration-200"
             >
-            {formPending() ? 
-              <span className="flex items-center gap-2">
+              {formPending() ?
+                <span className="flex items-center gap-2">
                   <SubmissionSpinner />
                   Saving ...
-              </span>
-              : "Save"}
+                </span>
+                : "Save"}
             </button>
           </div>
         </div>
diff --git a/src/app/instances/[name]/hardware/InstanceTypePage.tsx b/src/app/instances/[name]/hardware/InstanceTypePage.tsx
index f3d8ec0..4b0882e 100644
--- a/src/app/instances/[name]/hardware/InstanceTypePage.tsx
+++ b/src/app/instances/[name]/hardware/InstanceTypePage.tsx
@@ -3,8 +3,8 @@
 import { useInstanceContext } from "../InstanceContext";
 import { useEffect, useState } from "react";
 import axios from "axios";
-import ErrorBanner from "@/app/components/ErrorBanner";
-import SubmissionSpinner from "@/app/components/SubmissionSpinner";
+import ErrorBanner from "@/app/instances/components/ErrorBanner";
+import SubmissionSpinner from "../../components/SubmissionSpinner";
 
 type InstanceTypes = Record<string, string[]>;
 
diff --git a/src/app/instances/[name]/hardware/StoragePage.tsx b/src/app/instances/[name]/hardware/StoragePage.tsx
index 47012b8..64a1a84 100644
--- a/src/app/instances/[name]/hardware/StoragePage.tsx
+++ b/src/app/instances/[name]/hardware/StoragePage.tsx
@@ -8,9 +8,9 @@ import { useInstanceContext } from "../InstanceContext";
 import axios from "axios";
 import { useRouter } from "next/navigation";
 import React from "react";
-import { StorageDetails } from "@/app/components/StorageDetails";
-import ErrorBanner from "@/app/components/ErrorBanner";
-import SubmissionSpinner from "@/app/components/SubmissionSpinner";
+import { StorageDetails } from "../../components/StorageDetails";
+import ErrorBanner from "@/app/instances/components/ErrorBanner";
+import SubmissionSpinner from "../../components/SubmissionSpinner";
 
 export function StoragePage() {
   const router = useRouter();
@@ -166,11 +166,10 @@ export function StoragePage() {
         <div className="font-heading1 text-sm flex justify-end gap-4">
           <button
             className={`font-heading1 px-4 py-2 text-mainbg1 font-semibold rounded-sm
-                  ${
-                    formPending()
-                      ? "bg-btnhover1 opacity-70 cursor-not-allowed"
-                      : "px-4 py-2 bg-btn1 hover:bg-btnhover1 text-mainbg1 font-semibold rounded-sm flex items-center justify-center hover:shadow-[0_0_10px_#87d9da] transition-all duration-200"
-                  }
+                  ${formPending()
+                ? "bg-btnhover1 opacity-70 cursor-not-allowed"
+                : "px-4 py-2 bg-btn1 hover:bg-btnhover1 text-mainbg1 font-semibold rounded-sm flex items-center justify-center hover:shadow-[0_0_10px_#87d9da] transition-all duration-200"
+              }
                 `}
             disabled={formPending()}
             onClick={async (e) => {
diff --git a/src/app/components/ErrorBanner.tsx b/src/app/instances/components/ErrorBanner.tsx
similarity index 100%
rename from src/app/components/ErrorBanner.tsx
rename to src/app/instances/components/ErrorBanner.tsx
diff --git a/src/app/components/InstanceDetails.tsx b/src/app/instances/components/InstanceDetails.tsx
similarity index 100%
rename from src/app/components/InstanceDetails.tsx
rename to src/app/instances/components/InstanceDetails.tsx
diff --git a/src/app/components/StorageDetails.tsx b/src/app/instances/components/StorageDetails.tsx
similarity index 100%
rename from src/app/components/StorageDetails.tsx
rename to src/app/instances/components/StorageDetails.tsx
diff --git a/src/app/components/SubmissionSpinner.tsx b/src/app/instances/components/SubmissionSpinner.tsx
similarity index 100%
rename from src/app/components/SubmissionSpinner.tsx
rename to src/app/instances/components/SubmissionSpinner.tsx
diff --git a/src/app/instances/new/NewInstanceLoadingSkeleton.tsx b/src/app/instances/new/components/NewInstanceLoadingSkeleton.tsx
similarity index 100%
rename from src/app/instances/new/NewInstanceLoadingSkeleton.tsx
rename to src/app/instances/new/components/NewInstanceLoadingSkeleton.tsx
diff --git a/src/app/instances/new/page.tsx b/src/app/instances/new/page.tsx
index f6ad3cd..4cd3095 100644
--- a/src/app/instances/new/page.tsx
+++ b/src/app/instances/new/page.tsx
@@ -8,11 +8,11 @@ import axios from "axios";
 import Link from "next/link";
 import { Lightbulb } from "lucide-react";
 
-import { StorageDetails } from "@/app/components/StorageDetails";
-import { InstanceDetails } from "@/app/components/InstanceDetails";
-import ErrorBanner from "@/app/components/ErrorBanner";
-import NewInstanceLoadingSkeleton from "./NewInstanceLoadingSkeleton";
-import SubmissionSpinner from "@/app/components/SubmissionSpinner";
+import { StorageDetails } from "../components/StorageDetails";
+import { InstanceDetails } from "../components/InstanceDetails";
+import ErrorBanner from "@/app/instances/components/ErrorBanner";
+import NewInstanceLoadingSkeleton from "./components/NewInstanceLoadingSkeleton";
+import SubmissionSpinner from "../components/SubmissionSpinner";
 
 import { useNotificationsContext } from "@/app/NotificationContext";
 
@@ -67,37 +67,37 @@ export default function NewInstancePage() {
   const validateName = (name: string) =>
     !/^[a-z0-9-_]{3,64}$/i.test(name)
       ? [
-          "Instance name must be 3–64 characters long and use only letters, numbers, hyphens, or underscores.",
-        ]
+        "Instance name must be 3–64 characters long and use only letters, numbers, hyphens, or underscores.",
+      ]
       : [];
 
   const validateRegion = (region: string) =>
     !region
       ? ["Please select a region."]
       : !availableRegions.includes(region)
-      ? ["Selected region is not valid."]
-      : [];
+        ? ["Selected region is not valid."]
+        : [];
 
   const validateInstanceType = (type: string) =>
     !type
       ? ["Please select an instance type."]
       : !(type in instanceTypes)
-      ? ["Selected instance type is not valid."]
-      : [];
+        ? ["Selected instance type is not valid."]
+        : [];
 
   const validateSize = (size: string) =>
     !size
       ? ["Please select an instance size."]
       : !filteredInstanceTypes.includes(size)
-      ? ["Selected instance size is not valid."]
-      : [];
+        ? ["Selected instance size is not valid."]
+        : [];
 
   const validateUsername = (u: string) =>
     !u
       ? ["Username is required."]
       : u.length < 6
-      ? ["Username must be at least 6 characters long."]
-      : [];
+        ? ["Username must be at least 6 characters long."]
+        : [];
 
   const validatePassword = (p: string) =>
     !p
@@ -106,10 +106,10 @@ export default function NewInstancePage() {
         !/[a-zA-Z]/.test(p) ||
         !/[0-9]/.test(p) ||
         !/[!@#$%^&*]/.test(p)
-      ? [
+        ? [
           "Password must be at least 8 characters long and include a letter, a number, and a special character.",
         ]
-      : [];
+        : [];
 
   const validateStorageSize = (size: number) =>
     isNaN(size) || size < 8 || size > 16000
diff --git a/src/app/instances/page.tsx b/src/app/instances/page.tsx
index 2552368..35446a5 100644
--- a/src/app/instances/page.tsx
+++ b/src/app/instances/page.tsx
@@ -5,7 +5,7 @@ import axios from "axios";
 import { Trash2 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useNotificationsContext } from "../NotificationContext";
-import SubmissionSpinner from "../components/SubmissionSpinner";
+import SubmissionSpinner from "./components/SubmissionSpinner";
 
 interface Instance {
   state: string;
@@ -142,96 +142,94 @@ export default function Home() {
         <tbody className={isLoading ? "" : "animate-fade-in"}>
           {isLoading
             ? Array.from({ length: 3 }).map((_, idx) => (
-                <tr
-                  key={idx}
-                  className="bg-card border border-gray-500/30 animate-pulse"
-                >
-                  <td className="px-4 py-3">
-                    <div className="w-full h-4 bg-gray-600 rounded"></div>
-                  </td>
-                  <td className="px-4 py-3">
-                    <div className="w-full h-4 bg-gray-600 rounded"></div>
-                  </td>
-                  <td className="px-4 py-3">
-                    <div className="w-full h-4 bg-gray-600 rounded"></div>
-                  </td>
-                  <td className="px-4 py-3">
-                    <div className="w-full h-4 bg-gray-600 rounded"></div>
-                  </td>
-                  <td className="px-4 py-3 text-right">
-                    <div className="w-5 h-4 bg-gray-600 rounded ml-auto"></div>
-                  </td>
-                </tr>
-              ))
+              <tr
+                key={idx}
+                className="bg-card border border-gray-500/30 animate-pulse"
+              >
+                <td className="px-4 py-3">
+                  <div className="w-full h-4 bg-gray-600 rounded"></div>
+                </td>
+                <td className="px-4 py-3">
+                  <div className="w-full h-4 bg-gray-600 rounded"></div>
+                </td>
+                <td className="px-4 py-3">
+                  <div className="w-full h-4 bg-gray-600 rounded"></div>
+                </td>
+                <td className="px-4 py-3">
+                  <div className="w-full h-4 bg-gray-600 rounded"></div>
+                </td>
+                <td className="px-4 py-3 text-right">
+                  <div className="w-5 h-4 bg-gray-600 rounded ml-auto"></div>
+                </td>
+              </tr>
+            ))
             : instances.map((instance) => (
-                <tr
-                  key={instance.name}
-                  className="bg-card border border-gray-500/30"
-                >
-                  <td className="px-4 py-3 relative">
-                    {instance.state === "pending" ||
+              <tr
+                key={instance.name}
+                className="bg-card border border-gray-500/30"
+              >
+                <td className="px-4 py-3 relative">
+                  {instance.state === "pending" ||
                     instance.state === "shutting-down" ||
                     instance.state === "terminated" ||
                     instancePending(instance.name) ? (
-                      <span className="text-pagetext1 truncate block group cursor-not-allowed">
-                        {instance.name}
-                      </span>
-                    ) : (
-                      <Link
-                        href={`/instances/${instance.name}?region=${instance.region}`}
-                        className="text-pagetext1 hover:text-btnhover1 truncate block"
-                      >
-                        {instance.name}
-                      </Link>
-                    )}
-                  </td>
-                  <td className="px-4 py-3 text-pagetext1 truncate">
-                    {instance.id}
-                  </td>
-                  <td className="px-4 py-3 text-pagetext1">
-                    {instance.region}
-                  </td>
-                  <td
-                    className={`px-4 py-3 ${
-                      instance.state === "running"
-                        ? "text-btnhover1"
-                        : instance.state === "pending" ||
-                          instance.state === "initializing"
-                        ? "text-btn1 italic"
-                        : instance.state === "stopped" ||
-                          instance.state === "stopping"
+                    <span className="text-pagetext1 truncate block group cursor-not-allowed">
+                      {instance.name}
+                    </span>
+                  ) : (
+                    <Link
+                      href={`/instances/${instance.name}?region=${instance.region}`}
+                      className="text-pagetext1 hover:text-btnhover1 truncate block"
+                    >
+                      {instance.name}
+                    </Link>
+                  )}
+                </td>
+                <td className="px-4 py-3 text-pagetext1 truncate">
+                  {instance.id}
+                </td>
+                <td className="px-4 py-3 text-pagetext1">
+                  {instance.region}
+                </td>
+                <td
+                  className={`px-4 py-3 ${instance.state === "running"
+                    ? "text-btnhover1"
+                    : instance.state === "pending" ||
+                      instance.state === "initializing"
+                      ? "text-btn1 italic"
+                      : instance.state === "stopped" ||
+                        instance.state === "stopping"
                         ? "text-red-300"
                         : instance.state === "shutting-down" ||
                           instance.state === "terminated"
-                        ? "text-pagetext1 italic"
-                        : ""
+                          ? "text-pagetext1 italic"
+                          : ""
                     }`}
-                  >
-                    {instance.state}
-                  </td>
-                  <td className="px-4 py-3 text-right">
-                    <button
-                      onClick={() => openDeleteModal(instance)}
-                      className={`
+                >
+                  {instance.state}
+                </td>
+                <td className="px-4 py-3 text-right">
+                  <button
+                    onClick={() => openDeleteModal(instance)}
+                    className={`
                   text-gray-400 
-                  ${
-                    instance.state === "pending" ||
-                    instance.state === "shutting-down"
-                      ? "cursor-not-allowed"
-                      : "hover:text-btnhover1 hover:shadow-btnhover1"
-                  }
-                `}
-                      aria-label="Delete instance"
-                      disabled={
-                        instance.state === "pending" ||
+                  ${instance.state === "pending" ||
                         instance.state === "shutting-down"
+                        ? "cursor-not-allowed"
+                        : "hover:text-btnhover1 hover:shadow-btnhover1"
                       }
-                    >
-                      <Trash2 size={20} />
-                    </button>
-                  </td>
-                </tr>
-              ))}
+                `}
+                    aria-label="Delete instance"
+                    disabled={
+                      instance.state === "pending" ||
+                      instance.state === "shutting-down"
+                    }
+                  >
+                    <Trash2 size={20} />
+                  </button>
+                </td>
+              </tr>
+            ))}
         </tbody>
       </table>
       {!isLoading && instances.length === 0 && (

From daa97f1bb8e8d54d80893b91d4d1c03e6500be47 Mon Sep 17 00:00:00 2001
From: Jacqueline Amherst <jacqueline.amherst@icloud.com>
Date: Wed, 16 Apr 2025 14:49:31 -0500
Subject: [PATCH 02/26] move alarms components

---
 .../{ => instances/[name]/alarms}/components/Dropdown.tsx   | 0
 .../[name]/alarms}/components/NewAlarmModal.tsx             | 0
 .../{ => instances/[name]/alarms}/components/SlackModal.tsx | 0
 src/app/instances/[name]/alarms/page.tsx                    | 6 +++---
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename src/app/{ => instances/[name]/alarms}/components/Dropdown.tsx (100%)
 rename src/app/{ => instances/[name]/alarms}/components/NewAlarmModal.tsx (100%)
 rename src/app/{ => instances/[name]/alarms}/components/SlackModal.tsx (100%)

diff --git a/src/app/components/Dropdown.tsx b/src/app/instances/[name]/alarms/components/Dropdown.tsx
similarity index 100%
rename from src/app/components/Dropdown.tsx
rename to src/app/instances/[name]/alarms/components/Dropdown.tsx
diff --git a/src/app/components/NewAlarmModal.tsx b/src/app/instances/[name]/alarms/components/NewAlarmModal.tsx
similarity index 100%
rename from src/app/components/NewAlarmModal.tsx
rename to src/app/instances/[name]/alarms/components/NewAlarmModal.tsx
diff --git a/src/app/components/SlackModal.tsx b/src/app/instances/[name]/alarms/components/SlackModal.tsx
similarity index 100%
rename from src/app/components/SlackModal.tsx
rename to src/app/instances/[name]/alarms/components/SlackModal.tsx
diff --git a/src/app/instances/[name]/alarms/page.tsx b/src/app/instances/[name]/alarms/page.tsx
index b37a558..941c413 100644
--- a/src/app/instances/[name]/alarms/page.tsx
+++ b/src/app/instances/[name]/alarms/page.tsx
@@ -2,9 +2,9 @@
 
 import { useInstanceContext } from "../InstanceContext";
 import { useEffect, useState } from "react";
-import { NewAlarmModal } from "@/app/components/NewAlarmModal";
-import { SlackModal } from "@/app/components/SlackModal";
-import Dropdown from "@/app/components/Dropdown";
+import { NewAlarmModal } from "./components/NewAlarmModal";
+import { SlackModal } from "./components/SlackModal";
+import Dropdown from "./components/Dropdown";
 import axios from "axios";
 
 interface Alarm {

From 6b2e555df8eeeda814117115b60a81053a9a6d32 Mon Sep 17 00:00:00 2001
From: Jacqueline Amherst <jacqueline.amherst@icloud.com>
Date: Wed, 16 Apr 2025 19:07:00 -0500
Subject: [PATCH 03/26] add CreateNewInstanceButton

---
 .../components/CreateNewInstanceButton.tsx    | 22 ++++++++++
 src/app/instances/page.tsx                    | 41 ++++++-------------
 2 files changed, 35 insertions(+), 28 deletions(-)
 create mode 100644 src/app/instances/components/CreateNewInstanceButton.tsx

diff --git a/src/app/instances/components/CreateNewInstanceButton.tsx b/src/app/instances/components/CreateNewInstanceButton.tsx
new file mode 100644
index 0000000..7fe429b
--- /dev/null
+++ b/src/app/instances/components/CreateNewInstanceButton.tsx
@@ -0,0 +1,22 @@
+import Link from "next/link";
+
+export default function CreateNewInstanceButton({ isGlowing }: { isGlowing: boolean }) {
+  return (
+    <div className="flex justify-between items-center mb-6">
+      <h1 className="font-heading1 text-2xl text-headertext1">Instances</h1>
+      <Link href="/instances/new">
+        <button
+          className={`
+              font-heading1 font-semibold py-2 px-6 bg-btn1
+              text-mainpage1 rounded-sm hover:bg-btnhover1 transition-all duration-200
+              text-md
+              hover:shadow-[0_0_8px_3px_rgba(135,217,218,0.5)]
+              ${isGlowing ? "pulse-glow" : ""}
+            `}
+        >
+          + Create New Instance
+        </button>
+      </Link>
+    </div>
+  )
+}
diff --git a/src/app/instances/page.tsx b/src/app/instances/page.tsx
index 9d8de2b..30a5edd 100644
--- a/src/app/instances/page.tsx
+++ b/src/app/instances/page.tsx
@@ -7,6 +7,7 @@ import { useCallback, useEffect, useState } from "react";
 import { useNotificationsContext } from "../NotificationContext";
 import SubmissionSpinner from "./components/SubmissionSpinner";
 import { StatusLegend } from "../components/statusLegend";
+import CreateNewInstanceButton from "./components/CreateNewInstanceButton";
 
 interface Instance {
   state: string;
@@ -122,23 +123,7 @@ export default function Home() {
 
   return (
     <div className="mt-15 ml-20 mr-20">
-      <div className="flex justify-between items-center mb-6">
-        <h1 className="font-heading1 text-2xl text-headertext1">Instances</h1>
-        <Link href="/instances/new">
-          <button
-            className={`
-              font-heading1 font-semibold py-2 px-6 bg-btn1
-              text-mainpage1 rounded-sm hover:bg-btnhover1 transition-all duration-200
-              text-md
-              hover:shadow-[0_0_8px_3px_rgba(135,217,218,0.5)]
-              ${!isLoading && instances.length === 0 ? "pulse-glow" : ""}
-            `}
-          >
-            + Create New Instance
-          </button>
-        </Link>
-      </div>
-
+      <CreateNewInstanceButton isGlowing={!isLoading && instances.length === 0} />
       <table className="table-fixed w-full text-sm font-text1 border-separate border-spacing-y-3">
         <thead>
           <tr className="text-headertext1 font-text1 text-md bg-background">
@@ -205,17 +190,17 @@ export default function Home() {
                 </td>
                 <td
                   className={`px-4 py-3 ${instance.state === "running"
-                      ? "text-btnhover1"
-                      : instance.state === "pending" ||
-                        instance.state === "initializing"
-                        ? "text-btn1 italic"
-                        : instance.state === "stopped" ||
-                          instance.state === "stopping"
-                          ? "text-red-300"
-                          : instance.state === "shutting-down" ||
-                            instance.state === "terminated"
-                            ? "text-pagetext1 italic"
-                            : ""
+                    ? "text-btnhover1"
+                    : instance.state === "pending" ||
+                      instance.state === "initializing"
+                      ? "text-btn1 italic"
+                      : instance.state === "stopped" ||
+                        instance.state === "stopping"
+                        ? "text-red-300"
+                        : instance.state === "shutting-down" ||
+                          instance.state === "terminated"
+                          ? "text-pagetext1 italic"
+                          : ""
                     }`}
                 >
                   {instance.state}

From 94118f6f4cc5e058eb7ad819a8bf825c7dba52f3 Mon Sep 17 00:00:00 2001
From: Jacqueline Amherst <jacqueline.amherst@icloud.com>
Date: Wed, 16 Apr 2025 19:39:15 -0500
Subject: [PATCH 04/26] extract instance table

---
 src/app/instances/components/InstanceRow.tsx  |  77 +++++++++++
 .../instances/components/InstancesTable.tsx   |  58 +++++++++
 src/app/instances/page.tsx                    | 123 +-----------------
 src/app/instances/types/Instance.ts           |   7 +
 src/app/instances/types/InstanceTableTypes.ts |  14 ++
 5 files changed, 163 insertions(+), 116 deletions(-)
 create mode 100644 src/app/instances/components/InstanceRow.tsx
 create mode 100644 src/app/instances/components/InstancesTable.tsx
 create mode 100644 src/app/instances/types/Instance.ts
 create mode 100644 src/app/instances/types/InstanceTableTypes.ts

diff --git a/src/app/instances/components/InstanceRow.tsx b/src/app/instances/components/InstanceRow.tsx
new file mode 100644
index 0000000..d4f00d6
--- /dev/null
+++ b/src/app/instances/components/InstanceRow.tsx
@@ -0,0 +1,77 @@
+import { Trash2 } from "lucide-react";
+import Link from "next/link";
+import { InstanceRowProps } from "../types/InstanceTableTypes";
+
+export default function InstanceRow({
+  instance,
+  openDeleteModal
+}: InstanceRowProps) {
+  return (
+    <tr
+      key={instance.name}
+      className="bg-card border border-gray-500/30"
+    >
+      <td className="px-4 py-3 relative">
+        {instance.state === "pending" ||
+          instance.state === "shutting-down" ||
+          instance.state === "terminated" ? (
+          <span className="text-pagetext1 truncate block group cursor-not-allowed">
+            {instance.name}
+          </span>
+        ) : (
+          <Link
+            href={`/instances/${instance.name}?region=${instance.region}`}
+            className="text-pagetext1 hover:text-btnhover1 truncate block"
+          >
+            {instance.name}
+          </Link>
+        )}
+      </td>
+      <td className="px-4 py-3 text-pagetext1 truncate">
+        {instance.id}
+      </td>
+      <td className="px-4 py-3 text-pagetext1">
+        {instance.region}
+      </td>
+      <td
+        className={`px-4 py-3 ${instance.state === "running"
+          ? "text-btnhover1"
+          : instance.state === "pending" ||
+            instance.state === "initializing"
+            ? "text-btn1 italic"
+            : instance.state === "stopped" ||
+              instance.state === "stopping"
+              ? "text-red-300"
+              : instance.state === "shutting-down" ||
+                instance.state === "terminated"
+                ? "text-pagetext1 italic"
+                : ""
+          }`}
+      >
+        {instance.state}
+      </td>
+      <td className="px-4 py-3 text-right">
+        <button
+          onClick={() => openDeleteModal(instance)}
+          className={`
+                  text-gray-400 
+                  ${instance.state === "pending" ||
+              instance.state === "shutting-down" ||
+              instance.state === "terminated"
+              ? "cursor-not-allowed"
+              : "hover:text-btnhover1 hover:shadow-btnhover1"
+            }
+                `}
+          aria-label="Delete instance"
+          disabled={
+            instance.state === "pending" ||
+            instance.state === "shutting-down" ||
+            instance.state === "terminated"
+          }
+        >
+          <Trash2 size={20} />
+        </button>
+      </td>
+    </tr>
+  )
+}
diff --git a/src/app/instances/components/InstancesTable.tsx b/src/app/instances/components/InstancesTable.tsx
new file mode 100644
index 0000000..791d958
--- /dev/null
+++ b/src/app/instances/components/InstancesTable.tsx
@@ -0,0 +1,58 @@
+import { StatusLegend } from "@/app/components/statusLegend"
+import { InstancesTableProps } from "../types/InstanceTableTypes"
+import InstanceRow from "./InstanceRow"
+
+export default function InstancesTable({
+  isLoading,
+  instances,
+  openDeleteModal
+}: InstancesTableProps) {
+  return (
+    <table className="table-fixed w-full text-sm font-text1 border-separate border-spacing-y-3">
+      <thead>
+        <tr className="text-headertext1 font-text1 text-md bg-background">
+          <th className="text-left w-[12%] px-4 py-2">Name</th>
+          <th className="text-left w-[12%] px-4 py-2">Instance ID</th>
+          <th className="text-left w-[10%] px-4 py-2">Data Center</th>
+          <th className="text-left w-[10%] px-4 py-2">
+            Status <StatusLegend />
+          </th>
+          <th className="w-[5%]"></th>
+        </tr>
+      </thead>
+
+      <tbody className={isLoading ? "" : "animate-fade-in"}>
+        {isLoading
+          ? Array.from({ length: 3 }).map((_, idx) => (
+            <tr
+              key={idx}
+              className="bg-card border border-gray-500/30 animate-pulse"
+            >
+              <td className="px-4 py-3">
+                <div className="w-full h-4 bg-gray-600 rounded"></div>
+              </td>
+              <td className="px-4 py-3">
+                <div className="w-full h-4 bg-gray-600 rounded"></div>
+              </td>
+              <td className="px-4 py-3">
+                <div className="w-full h-4 bg-gray-600 rounded"></div>
+              </td>
+              <td className="px-4 py-3">
+                <div className="w-full h-4 bg-gray-600 rounded"></div>
+              </td>
+              <td className="px-4 py-3 text-right">
+                <div className="w-5 h-4 bg-gray-600 rounded ml-auto"></div>
+              </td>
+            </tr>
+          ))
+          : instances.map((instance) => (
+            <InstanceRow
+              key={instance.name}
+              instance={instance}
+              openDeleteModal={openDeleteModal}
+            />
+          ))}
+      </tbody>
+    </table>
+  )
+}
diff --git a/src/app/instances/page.tsx b/src/app/instances/page.tsx
index 30a5edd..8e4c836 100644
--- a/src/app/instances/page.tsx
+++ b/src/app/instances/page.tsx
@@ -1,20 +1,12 @@
 "use client";
 
-import Link from "next/link";
 import axios from "axios";
-import { Trash2 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { useNotificationsContext } from "../NotificationContext";
 import SubmissionSpinner from "./components/SubmissionSpinner";
-import { StatusLegend } from "../components/statusLegend";
 import CreateNewInstanceButton from "./components/CreateNewInstanceButton";
-
-interface Instance {
-  state: string;
-  name: string;
-  id: string;
-  region: string;
-}
+import InstancesTable from "./components/InstancesTable";
+import { Instance } from "./types/Instance";
 
 export default function Home() {
   const [instances, setInstances] = useState<Instance[]>([]);
@@ -124,113 +116,12 @@ export default function Home() {
   return (
     <div className="mt-15 ml-20 mr-20">
       <CreateNewInstanceButton isGlowing={!isLoading && instances.length === 0} />
-      <table className="table-fixed w-full text-sm font-text1 border-separate border-spacing-y-3">
-        <thead>
-          <tr className="text-headertext1 font-text1 text-md bg-background">
-            <th className="text-left w-[12%] px-4 py-2">Name</th>
-            <th className="text-left w-[12%] px-4 py-2">Instance ID</th>
-            <th className="text-left w-[10%] px-4 py-2">Data Center</th>
-            <th className="text-left w-[10%] px-4 py-2">
-              Status <StatusLegend />
-            </th>
-            <th className="w-[5%]"></th>
-          </tr>
-        </thead>
+      <InstancesTable
+        isLoading={isLoading}
+        instances={instances}
+        openDeleteModal={openDeleteModal}
+      />
 
-        <tbody className={isLoading ? "" : "animate-fade-in"}>
-          {isLoading
-            ? Array.from({ length: 3 }).map((_, idx) => (
-              <tr
-                key={idx}
-                className="bg-card border border-gray-500/30 animate-pulse"
-              >
-                <td className="px-4 py-3">
-                  <div className="w-full h-4 bg-gray-600 rounded"></div>
-                </td>
-                <td className="px-4 py-3">
-                  <div className="w-full h-4 bg-gray-600 rounded"></div>
-                </td>
-                <td className="px-4 py-3">
-                  <div className="w-full h-4 bg-gray-600 rounded"></div>
-                </td>
-                <td className="px-4 py-3">
-                  <div className="w-full h-4 bg-gray-600 rounded"></div>
-                </td>
-                <td className="px-4 py-3 text-right">
-                  <div className="w-5 h-4 bg-gray-600 rounded ml-auto"></div>
-                </td>
-              </tr>
-            ))
-            : instances.map((instance) => (
-              <tr
-                key={instance.name}
-                className="bg-card border border-gray-500/30"
-              >
-                <td className="px-4 py-3 relative">
-                  {instance.state === "pending" ||
-                    instance.state === "shutting-down" ||
-                    instance.state === "terminated" ? (
-                    <span className="text-pagetext1 truncate block group cursor-not-allowed">
-                      {instance.name}
-                    </span>
-                  ) : (
-                    <Link
-                      href={`/instances/${instance.name}?region=${instance.region}`}
-                      className="text-pagetext1 hover:text-btnhover1 truncate block"
-                    >
-                      {instance.name}
-                    </Link>
-                  )}
-                </td>
-                <td className="px-4 py-3 text-pagetext1 truncate">
-                  {instance.id}
-                </td>
-                <td className="px-4 py-3 text-pagetext1">
-                  {instance.region}
-                </td>
-                <td
-                  className={`px-4 py-3 ${instance.state === "running"
-                    ? "text-btnhover1"
-                    : instance.state === "pending" ||
-                      instance.state === "initializing"
-                      ? "text-btn1 italic"
-                      : instance.state === "stopped" ||
-                        instance.state === "stopping"
-                        ? "text-red-300"
-                        : instance.state === "shutting-down" ||
-                          instance.state === "terminated"
-                          ? "text-pagetext1 italic"
-                          : ""
-                    }`}
-                >
-                  {instance.state}
-                </td>
-                <td className="px-4 py-3 text-right">
-                  <button
-                    onClick={() => openDeleteModal(instance)}
-                    className={`
-                  text-gray-400 
-                  ${instance.state === "pending" ||
-                        instance.state === "shutting-down" ||
-                        instance.state === "terminated"
-                        ? "cursor-not-allowed"
-                        : "hover:text-btnhover1 hover:shadow-btnhover1"
-                      }
-                `}
-                    aria-label="Delete instance"
-                    disabled={
-                      instance.state === "pending" ||
-                      instance.state === "shutting-down" ||
-                      instance.state === "terminated"
-                    }
-                  >
-                    <Trash2 size={20} />
-                  </button>
-                </td>
-              </tr>
-            ))}
-        </tbody>
-      </table>
       {!isLoading && instances.length === 0 && (
         <p className="font-text1 text-lg text-pagetext1 mt-10 text-center">
           No instances yet. Let’s spin one up!
diff --git a/src/app/instances/types/Instance.ts b/src/app/instances/types/Instance.ts
new file mode 100644
index 0000000..3fd5e30
--- /dev/null
+++ b/src/app/instances/types/Instance.ts
@@ -0,0 +1,7 @@
+export interface Instance {
+  state: string;
+  name: string;
+  id: string;
+  region: string;
+}
+
diff --git a/src/app/instances/types/InstanceTableTypes.ts b/src/app/instances/types/InstanceTableTypes.ts
new file mode 100644
index 0000000..91e6982
--- /dev/null
+++ b/src/app/instances/types/InstanceTableTypes.ts
@@ -0,0 +1,14 @@
+import { Instance } from "./Instance";
+
+export interface InstancesTableProps {
+  isLoading: boolean;
+  instances: Instance[];
+  openDeleteModal: (instance: Instance) => void;
+}
+
+export interface InstanceRowProps {
+  instance: Instance;
+  openDeleteModal: (instance: Instance) => void;
+}
+
+

From 9343b8cafe27ade1f69d5eddcfb438d7ca8c12c4 Mon Sep 17 00:00:00 2001
From: Jacqueline Amherst <jacqueline.amherst@icloud.com>
Date: Wed, 16 Apr 2025 20:02:37 -0500
Subject: [PATCH 05/26] change font loading from swap to optional to appease
 Chrome

---
 src/app/layout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index ce35648..ceeec7c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -13,14 +13,14 @@ interface RootLayoutProps {
 const montserrat = Montserrat({
   weight: ["400", "600", "700"],
   subsets: ["latin"],
-  display: "swap",
+  display: "optional",
   variable: "--font-montserrat",
 });
 
 const metrophobic = Metrophobic({
   weight: ["400"],
   subsets: ["latin"],
-  display: "swap",
+  display: "optional",
   variable: "--font-metrophobic",
 });
 

From 88edb001bfd24f84e418cf96c58d721e470ca4e4 Mon Sep 17 00:00:00 2001
From: Jacqueline Amherst <jacqueline.amherst@icloud.com>
Date: Wed, 16 Apr 2025 20:10:20 -0500
Subject: [PATCH 06/26] change type file names to match convention

---
 src/app/instances/components/InstanceRow.tsx    | 2 +-
 src/app/instances/components/InstancesTable.tsx | 2 +-
 src/app/instances/page.tsx                      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/instances/components/InstanceRow.tsx b/src/app/instances/components/InstanceRow.tsx
index d4f00d6..8b3e064 100644
--- a/src/app/instances/components/InstanceRow.tsx
+++ b/src/app/instances/components/InstanceRow.tsx
@@ -1,6 +1,6 @@
 import { Trash2 } from "lucide-react";
 import Link from "next/link";
-import { InstanceRowProps } from "../types/InstanceTableTypes";
+import { InstanceRowProps } from "../types/instanceTableTypes";
 
 export default function InstanceRow({
   instance,
diff --git a/src/app/instances/components/InstancesTable.tsx b/src/app/instances/components/InstancesTable.tsx
index 791d958..efbb2e1 100644
--- a/src/app/instances/components/InstancesTable.tsx
+++ b/src/app/instances/components/InstancesTable.tsx
@@ -1,5 +1,5 @@
 import { StatusLegend } from "@/app/components/statusLegend"
-import { InstancesTableProps } from "../types/InstanceTableTypes"
+import { InstancesTableProps } from "../types/instanceTableTypes"
 import InstanceRow from "./InstanceRow"
 
 export default function InstancesTable({
diff --git a/src/app/instances/page.tsx b/src/app/instances/page.tsx
index 8e4c836..12edf07 100644
--- a/src/app/instances/page.tsx
+++ b/src/app/instances/page.tsx
@@ -6,7 +6,7 @@ import { useNotificationsContext } from "../NotificationContext";
 import SubmissionSpinner from "./components/SubmissionSpinner";
 import CreateNewInstanceButton from "./components/CreateNewInstanceButton";
 import InstancesTable from "./components/InstancesTable";
-import { Instance } from "./types/Instance";
+import { Instance } from "./types/instance";
 
 export default function Home() {
   const [instances, setInstances] = useState<Instance[]>([]);

From 9c83fd10bcaa14a0d4d5f396a80c1835c1af7405 Mon Sep 17 00:00:00 2001
From: Jacqueline Amherst <jacqueline.amherst@icloud.com>
Date: Wed, 16 Apr 2025 20:50:25 -0500
Subject: [PATCH 07/26] extract delete instance modal

---
 .../components/DeleteInstanceModal.tsx        | 65 +++++++++++++++++++
 src/app/instances/components/InstanceRow.tsx  |  8 ++-
 .../instances/components/InstancesTable.tsx   |  9 ++-
 src/app/instances/page.tsx                    | 48 +-------------
 src/app/instances/types/InstanceTableTypes.ts | 14 ----
 5 files changed, 82 insertions(+), 62 deletions(-)
 create mode 100644 src/app/instances/components/DeleteInstanceModal.tsx
 delete mode 100644 src/app/instances/types/InstanceTableTypes.ts

diff --git a/src/app/instances/components/DeleteInstanceModal.tsx b/src/app/instances/components/DeleteInstanceModal.tsx
new file mode 100644
index 0000000..60fda13
--- /dev/null
+++ b/src/app/instances/components/DeleteInstanceModal.tsx
@@ -0,0 +1,65 @@
+import { useState } from "react";
+import SubmissionSpinner from "../components/SubmissionSpinner";
+import { Instance } from "../types/instance";
+
+interface DeleteInstanceModalProps {
+  selectedInstance: Instance;
+  onClose: () => void;
+  handleDelete: () => void;
+  isDeleting: boolean;
+}
+
+export default function DeleteInstanceModal({
+  selectedInstance,
+  onClose,
+  handleDelete,
+  isDeleting,
+}: DeleteInstanceModalProps) {
+  const [inputText, setInputText] = useState("");
+
+  return (
+    <div className="fixed inset-0 backdrop-blur-xs bg-white/5 flex justify-center items-center z-50">
+      <div className="bg-card text-pagetext1 p-6 rounded-md shadow-lg w-full max-w-md">
+        <h2 className="font-heading1 text-xl text-headertext1 mb-4">
+          Delete {selectedInstance.name}?
+        </h2>
+        <p className="font-text1 text-sm text-red-300 mb-6">
+          Deleting this instance is permanent and will result in the loss of
+          all data stored on it. This action cannot be undone.
+        </p>
+        <p className="font-text1 text-sm mb-2">
+          Type <strong>{selectedInstance.name}</strong> to confirm deletion.
+        </p>
+        <input
+          className="w-full p-2 border rounded-sm font-text1 text-btnhover1 border-pagetext1 focus:outline-none"
+          type="text"
+          value={inputText}
+          onChange={(e) => setInputText(e.target.value)}
+        />
+        <div className="flex justify-end mt-6 gap-4">
+          <button
+            className="px-4 py-2 bg-card border border-btn1 text-btn1 rounded-sm hover:shadow-[0_0_8px_#87d9da]"
+            onClick={onClose}
+          >
+            Cancel
+          </button>
+          <button
+            className="px-4 py-2 bg-btn1 text-mainbg1 font-semibold rounded-sm hover:bg-btnhover1 hover:shadow-[0_0_10px_#87d9da]"
+            onClick={handleDelete}
+            disabled={inputText !== selectedInstance.name || isDeleting}
+          >
+            {isDeleting ? (
+              <span className="flex items-center gap-2">
+                <SubmissionSpinner />
+                Deleting ...
+              </span>
+            ) : (
+              "Delete"
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+
+  )
+}
diff --git a/src/app/instances/components/InstanceRow.tsx b/src/app/instances/components/InstanceRow.tsx
index 8b3e064..c7a6cd0 100644
--- a/src/app/instances/components/InstanceRow.tsx
+++ b/src/app/instances/components/InstanceRow.tsx
@@ -1,6 +1,12 @@
 import { Trash2 } from "lucide-react";
 import Link from "next/link";
-import { InstanceRowProps } from "../types/instanceTableTypes";
+import { Instance } from "../types/instance";
+
+interface InstanceRowProps {
+  instance: Instance;
+  openDeleteModal: (instance: Instance) => void;
+}
+
 
 export default function InstanceRow({
   instance,
diff --git a/src/app/instances/components/InstancesTable.tsx b/src/app/instances/components/InstancesTable.tsx
index efbb2e1..fd6156f 100644
--- a/src/app/instances/components/InstancesTable.tsx
+++ b/src/app/instances/components/InstancesTable.tsx
@@ -1,6 +1,13 @@
 import { StatusLegend } from "@/app/components/statusLegend"
-import { InstancesTableProps } from "../types/instanceTableTypes"
 import InstanceRow from "./InstanceRow"
+import { Instance } from "../types/instance";
+
+interface InstancesTableProps {
+  isLoading: boolean;
+  instances: Instance[];
+  openDeleteModal: (instance: Instance) => void;
+}
+
 
 export default function InstancesTable({
   isLoading,
diff --git a/src/app/instances/page.tsx b/src/app/instances/page.tsx
index 12edf07..790eb0f 100644
--- a/src/app/instances/page.tsx
+++ b/src/app/instances/page.tsx
@@ -3,7 +3,7 @@
 import axios from "axios";
 import { useCallback, useEffect, useState } from "react";
 import { useNotificationsContext } from "../NotificationContext";
-import SubmissionSpinner from "./components/SubmissionSpinner";
+import DeleteInstanceModal from "./components/DeleteInstanceModal";
 import CreateNewInstanceButton from "./components/CreateNewInstanceButton";
 import InstancesTable from "./components/InstancesTable";
 import { Instance } from "./types/instance";
@@ -15,7 +15,6 @@ export default function Home() {
   const [selectedInstance, setSelectedInstance] = useState<Instance | null>(
     null
   );
-  const [inputText, setInputText] = useState("");
   const [isDeleting, setIsDeleting] = useState(false);
   const {
     notifications,
@@ -72,14 +71,12 @@ export default function Home() {
 
   const openDeleteModal = (instance: Instance) => {
     setSelectedInstance(instance);
-    setInputText("");
     setShowModal(true);
   };
 
   const closeDeleteModal = () => {
     setShowModal(false);
     setSelectedInstance(null);
-    setInputText("");
   };
 
   const handleDelete = async () => {
@@ -129,48 +126,7 @@ export default function Home() {
       )}
 
       {showModal && selectedInstance && (
-        <div className="fixed inset-0 backdrop-blur-xs bg-white/5 flex justify-center items-center z-50">
-          <div className="bg-card text-pagetext1 p-6 rounded-md shadow-lg w-full max-w-md">
-            <h2 className="font-heading1 text-xl text-headertext1 mb-4">
-              Delete {selectedInstance.name}?
-            </h2>
-            <p className="font-text1 text-sm text-red-300 mb-6">
-              Deleting this instance is permanent and will result in the loss of
-              all data stored on it. This action cannot be undone.
-            </p>
-            <p className="font-text1 text-sm mb-2">
-              Type <strong>{selectedInstance.name}</strong> to confirm deletion.
-            </p>
-            <input
-              className="w-full p-2 border rounded-sm font-text1 text-btnhover1 border-pagetext1 focus:outline-none"
-              type="text"
-              value={inputText}
-              onChange={(e) => setInputText(e.target.value)}
-            />
-            <div className="flex justify-end mt-6 gap-4">
-              <button
-                className="px-4 py-2 bg-card border border-btn1 text-btn1 rounded-sm hover:shadow-[0_0_8px_#87d9da]"
-                onClick={closeDeleteModal}
-              >
-                Cancel
-              </button>
-              <button
-                className="px-4 py-2 bg-btn1 text-mainbg1 font-semibold rounded-sm hover:bg-btnhover1 hover:shadow-[0_0_10px_#87d9da]"
-                onClick={handleDelete}
-                disabled={inputText !== selectedInstance.name || isDeleting}
-              >
-                {isDeleting ? (
-                  <span className="flex items-center gap-2">
-                    <SubmissionSpinner />
-                    Deleting ...
-                  </span>
-                ) : (
-                  "Delete"
-                )}
-              </button>
-            </div>
-          </div>
-        </div>
+        <DeleteInstanceModal selectedInstance={selectedInstance} onClose={closeDeleteModal} handleDelete={handleDelete} isDeleting={isDeleting} />
       )}
 
       <style jsx>{`
diff --git a/src/app/instances/types/InstanceTableTypes.ts b/src/app/instances/types/InstanceTableTypes.ts
deleted file mode 100644
index 91e6982..0000000
--- a/src/app/instances/types/InstanceTableTypes.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Instance } from "./Instance";
-
-export interface InstancesTableProps {
-  isLoading: boolean;
-  instances: Instance[];
-  openDeleteModal: (instance: Instance) => void;
-}
-
-export interface InstanceRowProps {
-  instance: Instance;
-  openDeleteModal: (instance: Instance) => void;
-}
-
-

From 88b20e9929df5c8b76a26e1a1b96f8ce55155477 Mon Sep 17 00:00:00 2001
From: Jacqueline Amherst <jacqueline.amherst@icloud.com>
Date: Wed, 16 Apr 2025 22:30:53 -0500
Subject: [PATCH 08/26] extract each field from the new instance page

---
 .../new/components/InstanceNameField.tsx      |  40 ++++
 .../new/components/InstanceSizeField.tsx      |  39 ++++
 .../new/components/InstanceTypeField.tsx      |  36 ++++
 .../new/components/PasswordField.tsx          |  28 +++
 .../instances/new/components/RegionField.tsx  |  36 ++++
 .../new/components/StorageSizeField.tsx       |  28 +++
 .../new/components/UsernameField.tsx          |  28 +++
 src/app/instances/new/page.tsx                | 194 ++++--------------
 8 files changed, 279 insertions(+), 150 deletions(-)
 create mode 100644 src/app/instances/new/components/InstanceNameField.tsx
 create mode 100644 src/app/instances/new/components/InstanceSizeField.tsx
 create mode 100644 src/app/instances/new/components/InstanceTypeField.tsx
 create mode 100644 src/app/instances/new/components/PasswordField.tsx
 create mode 100644 src/app/instances/new/components/RegionField.tsx
 create mode 100644 src/app/instances/new/components/StorageSizeField.tsx
 create mode 100644 src/app/instances/new/components/UsernameField.tsx

diff --git a/src/app/instances/new/components/InstanceNameField.tsx b/src/app/instances/new/components/InstanceNameField.tsx
new file mode 100644
index 0000000..1b186fa
--- /dev/null
+++ b/src/app/instances/new/components/InstanceNameField.tsx
@@ -0,0 +1,40 @@
+interface InstanceNameFieldProps {
+  instanceName: string;
+  onGenerate: () => void;
+  onChange: (name: string) => void;
+}
+
+export default function InstanceNameField({
+  instanceName,
+  onGenerate,
+  onChange,
+}: InstanceNameFieldProps) {
+  return (
+    <div className="flex items-center gap-4">
+      <label
+        htmlFor="instanceName"
+        className="font-heading1 text-md text-headertext1 w-1/4"
+      >
+        Instance Name:
+      </label>
+      <div className="flex gap-2 w-3/4">
+        <input
+          id="instanceName"
+          name="instanceName"
+          type="text"
+          value={instanceName}
+          onChange={(e) => onChange(e.target.value)}
+          className="font-text1 text-btnhover1 w-9/16 p-2 border border-pagetext1 rounded-md text-sm"
+        />
+        <button
+          type="button"
+          onClick={onGenerate}
+          className="font-heading1 text-xs ml-2 px-6 py-2 bg-card border-1 border-btn1 text-btn1 rounded-sm text-center hover:shadow-[0_0_8px_#87d9da] transition-all duration-200 hover:bg-card"
+        >
+          Generate random name
+        </button>
+      </div>
+    </div>
+
+  )
+}
diff --git a/src/app/instances/new/components/InstanceSizeField.tsx b/src/app/instances/new/components/InstanceSizeField.tsx
new file mode 100644
index 0000000..1a24e1d
--- /dev/null
+++ b/src/app/instances/new/components/InstanceSizeField.tsx
@@ -0,0 +1,39 @@
+interface InstanceSizeFieldProps {
+  selectedInstanceSize: string;
+  selectedInstanceType: string;
+  filteredInstanceTypes: string[];
+  onChange: (size: string) => void;
+}
+
+export default function InstanceSizeField({
+  selectedInstanceSize,
+  selectedInstanceType,
+  filteredInstanceTypes,
+  onChange,
+}: InstanceSizeFieldProps) {
+  return (
+    <div className="flex items-center gap-4">
+      <label
+        htmlFor="instanceSize"
+        className="font-heading1 text-md text-headertext1 w-1/4"
+      >
+        Instance Size:
+      </label>
+      <select
+        id="instanceSize"
+        name="instanceSize"
+        value={selectedInstanceSize}
+        onChange={(e) => onChange(e.target.value)}
+        disabled={!selectedInstanceType}
+        className="font-text1 w-3/4 p-2 border rounded-md text-sm"
+      >
+        <option value="">Select an instance size</option>
+        {filteredInstanceTypes.map((size) => (
+          <option key={size} value={size}>
+            {size}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}
diff --git a/src/app/instances/new/components/InstanceTypeField.tsx b/src/app/instances/new/components/InstanceTypeField.tsx
new file mode 100644
index 0000000..c2b0159
--- /dev/null
+++ b/src/app/instances/new/components/InstanceTypeField.tsx
@@ -0,0 +1,36 @@
+interface InstanceTypeFieldProps {
+  selectedInstanceType: string;
+  instanceTypes: Record<string, string[]>;
+  onChange: (type: string) => void;
+}
+
+export default function InstanceTypeField({
+  selectedInstanceType,
+  instanceTypes,
+  onChange,
+}: InstanceTypeFieldProps) {
+  return (
+    <div className="flex items-center gap-4">
+      <label
+        htmlFor="instanceType"
+        className="font-heading1 text-md text-headertext1 w-1/4"
+      >
+        Instance Type:
+      </label>
+      <select
+        id="instanceType"
+        name="instanceType"
+        value={selectedInstanceType}
+        onChange={(e) => onChange(e.target.value)}
+        className="font-text1 w-3/4 p-2 border rounded-md text-sm"
+      >
+        <option value="">Select an instance type</option>
+        {Object.keys(instanceTypes).map((type) => (
+          <option key={type} value={type}>
+            {type}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}
diff --git a/src/app/instances/new/components/PasswordField.tsx b/src/app/instances/new/components/PasswordField.tsx
new file mode 100644
index 0000000..0b5f327
--- /dev/null
+++ b/src/app/instances/new/components/PasswordField.tsx
@@ -0,0 +1,28 @@
+interface PasswordFieldProps {
+  password: string;
+  onChange: (password: string) => void;
+}
+
+export default function PasswordField({
+  password,
+  onChange,
+}: PasswordFieldProps) {
+  return (
+    <div className="flex items-center gap-4">
+      <label
+        htmlFor="password"
+        className="font-heading1 text-md text-headertext1 w-1/4"
+      >
+        Password:
+      </label>
+      <input
+        id="password"
+        name="password"
+        type="password"
+        value={password}
+        onChange={(e) => onChange(e.target.value)}
+        className="font-text1 w-3/4 p-2 border rounded-md text-sm"
+      />
+    </div>
+  )
+}
diff --git a/src/app/instances/new/components/RegionField.tsx b/src/app/instances/new/components/RegionField.tsx
new file mode 100644
index 0000000..924c9a2
--- /dev/null
+++ b/src/app/instances/new/components/RegionField.tsx
@@ -0,0 +1,36 @@
+interface RegionFieldProps {
+  selectedRegion: string;
+  availableRegions: string[];
+  onChange: (region: string) => void;
+}
+
+export default function RegionField({
+  selectedRegion,
+  availableRegions,
+  onChange,
+}: RegionFieldProps) {
+  return (
+    <div className="flex items-center gap-4">
+      <label
+        htmlFor="region"
+        className="font-heading1 text-md text-headertext1 w-1/4"
+      >
+        Region:
+      </label>
+      <select
+        id="region"
+        name="region"
+        value={selectedRegion}
+        onChange={(e) => onChange(e.target.value)}
+        className="font-text1 w-3/4 p-2 border rounded-md text-sm"
+      >
+        <option value="">Select a region</option>
+        {availableRegions.map((region) => (
+          <option key={region} value={region}>
+            {region}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}
diff --git a/src/app/instances/new/components/StorageSizeField.tsx b/src/app/instances/new/components/StorageSizeField.tsx
new file mode 100644
index 0000000..e2df868
--- /dev/null
+++ b/src/app/instances/new/components/StorageSizeField.tsx
@@ -0,0 +1,28 @@
+interface StorageSizeFieldProps {
+  storageSize: number;
+  onChange: (size: number) => void;
+}
+
+export default function StorageSizeField({
+  storageSize,
+  onChange,
+}: StorageSizeFieldProps) {
+  return (
+    <div className="flex items-center gap-4">
+      <label
+        htmlFor="storageSize"
+        className="font-heading1 text-md text-headertext1 w-1/4"
+      >
+        Storage Size (GB):
+      </label>
+      <input
+        id="storageSize"
+        name="storageSize"
+        type="number"
+        value={storageSize}
+        onChange={(e) => onChange(Number(e.target.value))}
+        className="font-text1 w-3/4 p-2 border rounded-md text-sm"
+      />
+    </div>
+  )
+}
diff --git a/src/app/instances/new/components/UsernameField.tsx b/src/app/instances/new/components/UsernameField.tsx
new file mode 100644
index 0000000..301be09
--- /dev/null
+++ b/src/app/instances/new/components/UsernameField.tsx
@@ -0,0 +1,28 @@
+interface UsernameFieldProps {
+  username: string;
+  onChange: (username: string) => void;
+}
+
+export default function UsernameField({
+  username,
+  onChange,
+}: UsernameFieldProps) {
+  return (
+    <div className="flex items-center gap-4">
+      <label
+        htmlFor="username"
+        className="font-heading1 text-md text-headertext1 w-1/4"
+      >
+        Username:
+      </label>
+      <input
+        id="username"
+        name="username"
+        type="text"
+        value={username}
+        onChange={(e) => onChange(e.target.value)}
+        className="font-text1 w-3/4 p-2 border rounded-md text-sm"
+      />
+    </div>
+  )
+}
diff --git a/src/app/instances/new/page.tsx b/src/app/instances/new/page.tsx
index 81c37a2..0b48b90 100644
--- a/src/app/instances/new/page.tsx
+++ b/src/app/instances/new/page.tsx
@@ -15,6 +15,13 @@ import NewInstanceLoadingSkeleton from "./components/NewInstanceLoadingSkeleton"
 import SubmissionSpinner from "../components/SubmissionSpinner";
 
 import { useNotificationsContext } from "@/app/NotificationContext";
+import InstanceNameField from "./components/InstanceNameField";
+import RegionField from "./components/RegionField";
+import InstanceTypeField from "./components/InstanceTypeField";
+import InstanceSizeField from "./components/InstanceSizeField";
+import StorageSizeField from "./components/StorageSizeField";
+import UsernameField from "./components/UsernameField";
+import PasswordField from "./components/PasswordField";
 
 type InstanceTypes = Record<string, string[]>;
 
@@ -147,7 +154,7 @@ export default function NewInstancePage() {
     }
 
     try {
-      await addNotification({
+      addNotification({
         type: "newInstance",
         status: "pending",
         instanceName,
@@ -174,8 +181,10 @@ export default function NewInstancePage() {
   };
 
   const handleGenerate = () => setInstanceName(generateName());
-  const dismissError = (i: number) =>
+
+  const dismissError = (i: number) => {
     setErrorMessages((prev) => prev.filter((_, idx) => idx !== i));
+  };
 
   return (
     <div
@@ -207,168 +216,54 @@ export default function NewInstancePage() {
       ) : (
         <form onSubmit={handleSubmit} className="space-y-4 m-5">
           <fieldset disabled={instantiating} className="space-y-4">
-            {/* Instance Name */}
-            <div className="flex items-center gap-4">
-              <label
-                htmlFor="instanceName"
-                className="font-heading1 text-md text-headertext1 w-1/4"
-              >
-                Instance Name:
-              </label>
-              <div className="flex gap-2 w-3/4">
-                <input
-                  id="instanceName"
-                  name="instanceName"
-                  type="text"
-                  value={instanceName}
-                  onChange={(e) => setInstanceName(e.target.value)}
-                  className="font-text1 text-btnhover1 w-9/16 p-2 border border-pagetext1 rounded-md text-sm"
-                />
-                <button
-                  type="button"
-                  onClick={handleGenerate}
-                  className="font-heading1 text-xs ml-2 px-6 py-2 bg-card border-1 border-btn1 text-btn1 rounded-sm text-center hover:shadow-[0_0_8px_#87d9da] transition-all duration-200 hover:bg-card"
-                >
-                  Generate random name
-                </button>
-              </div>
-            </div>
+            <InstanceNameField
+              instanceName={instanceName}
+              onGenerate={handleGenerate}
+              onChange={setInstanceName}
+            />
 
-            {/* Region */}
-            <div className="flex items-center gap-4">
-              <label
-                htmlFor="region"
-                className="font-heading1 text-md text-headertext1 w-1/4"
-              >
-                Region:
-              </label>
-              <select
-                id="region"
-                name="region"
-                value={selectedRegion}
-                onChange={(e) => setSelectedRegion(e.target.value)}
-                className="font-text1 w-3/4 p-2 border rounded-md text-sm"
-              >
-                <option value="">Select a region</option>
-                {availableRegions.map((region) => (
-                  <option key={region} value={region}>
-                    {region}
-                  </option>
-                ))}
-              </select>
-            </div>
+            <RegionField
+              selectedRegion={selectedRegion}
+              availableRegions={availableRegions}
+              onChange={setSelectedRegion}
+            />
 
             <InstanceDetails />
 
-            {/* Instance Type */}
-            <div className="flex items-center gap-4">
-              <label
-                htmlFor="instanceType"
-                className="font-heading1 text-md text-headertext1 w-1/4"
-              >
-                Instance Type:
-              </label>
-              <select
-                id="instanceType"
-                name="instanceType"
-                value={selectedInstanceType}
-                onChange={(e) => setSelectedInstanceType(e.target.value)}
-                className="font-text1 w-3/4 p-2 border rounded-md text-sm"
-              >
-                <option value="">Select an instance type</option>
-                {Object.keys(instanceTypes).map((type) => (
-                  <option key={type} value={type}>
-                    {type}
-                  </option>
-                ))}
-              </select>
-            </div>
+            <InstanceTypeField
+              selectedInstanceType={selectedInstanceType}
+              instanceTypes={instanceTypes}
+              onChange={setSelectedInstanceType}
+            />
 
-            {/* Instance Size */}
-            <div className="flex items-center gap-4">
-              <label
-                htmlFor="instanceSize"
-                className="font-heading1 text-md text-headertext1 w-1/4"
-              >
-                Instance Size:
-              </label>
-              <select
-                id="instanceSize"
-                name="instanceSize"
-                value={selectedInstanceSize}
-                onChange={(e) => setSelectedInstanceSize(e.target.value)}
-                disabled={!selectedInstanceType}
-                className="font-text1 w-3/4 p-2 border rounded-md text-sm"
-              >
-                <option value="">Select an instance size</option>
-                {filteredInstanceTypes.map((size) => (
-                  <option key={size} value={size}>
-                    {size}
-                  </option>
-                ))}
-              </select>
-            </div>
+            <InstanceSizeField
+              selectedInstanceSize={selectedInstanceSize}
+              selectedInstanceType={selectedInstanceType}
+              filteredInstanceTypes={filteredInstanceTypes}
+              onChange={setSelectedInstanceSize}
+            />
 
             <StorageDetails />
 
-            {/* Storage Size */}
-            <div className="flex items-center gap-4">
-              <label
-                htmlFor="storageSize"
-                className="font-heading1 text-md text-headertext1 w-1/4"
-              >
-                Storage Size (GB):
-              </label>
-              <input
-                id="storageSize"
-                name="storageSize"
-                type="number"
-                value={storageSize}
-                onChange={(e) => setStorageSize(Number(e.target.value))}
-                className="font-text1 w-3/4 p-2 border rounded-md text-sm"
-              />
-            </div>
+            <StorageSizeField
+              storageSize={storageSize}
+              onChange={setStorageSize}
+            />
 
             <p className="py-4 bg-card font-text1 text-sm text-pagetext1 flex items-center gap-2">
               <Lightbulb className="w-6 h-6 text-btnhover1" />
               Create a username and password for logging into your RabbitMQ Management UI.
             </p>
 
-            {/* Username */}
-            <div className="flex items-center gap-4">
-              <label
-                htmlFor="username"
-                className="font-heading1 text-md text-headertext1 w-1/4"
-              >
-                Username:
-              </label>
-              <input
-                id="username"
-                name="username"
-                type="text"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-                className="font-text1 w-3/4 p-2 border rounded-md text-sm"
-              />
-            </div>
+            <UsernameField
+              username={username}
+              onChange={setUsername}
+            />
 
-            {/* Password */}
-            <div className="flex items-center gap-4">
-              <label
-                htmlFor="password"
-                className="font-heading1 text-md text-headertext1 w-1/4"
-              >
-                Password:
-              </label>
-              <input
-                id="password"
-                name="password"
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className="font-text1 w-3/4 p-2 border rounded-md text-sm"
-              />
-            </div>
+            <PasswordField
+              password={password}
+              onChange={setPassword}
+            />
 
             <p className="pl-47 bg-card font-text1 text-xs text-pagetext1">
               Password must be at least 8 characters long and include one letter, one number, and one special character ( !@#$%^&* ) .
@@ -376,7 +271,6 @@ export default function NewInstancePage() {
 
             <div className="border-t border-headertext1 my-6"></div>
 
-            {/* Buttons */}
             <div className="font-heading1 text-sm flex justify-end gap-4 mt-6">
               <Link
                 href="/"

From f5bc82a20c18096273d0989595a0893108f75bc0 Mon Sep 17 00:00:00 2001
From: Jacqueline Amherst <jacqueline.amherst@icloud.com>
Date: Wed, 16 Apr 2025 22:39:05 -0500
Subject: [PATCH 09/26] remove unnecessary file

---
 src/types/alarms.ts | 11 -----------
 1 file changed, 11 deletions(-)
 delete mode 100644 src/types/alarms.ts

diff --git a/src/types/alarms.ts b/src/types/alarms.ts
deleted file mode 100644
index 1194bb8..0000000
--- a/src/types/alarms.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export interface AlarmThresholds {
-  memoryThreshold: number;
-  storageThreshold: number;
-  reminderInterval: number;
-}
-
-export interface Alarm {
-  id: string;
-  data: AlarmThresholds;
-}
-

From 30f82e4c4507b02745b27cc67fd4486a70c2df03 Mon Sep 17 00:00:00 2001
From: Jacqueline Amherst <jacqueline.amherst@icloud.com>
Date: Thu, 17 Apr 2025 15:26:10 -0500
Subject: [PATCH 10/26] extract info components from [name] page

---
 .../[name]/components/InstanceInfo.tsx        |  52 +++++
 .../[name]/components/ServerInfo.tsx          | 137 ++++++++++++++
 src/app/instances/[name]/page.tsx             | 179 +-----------------
 3 files changed, 196 insertions(+), 172 deletions(-)
 create mode 100644 src/app/instances/[name]/components/InstanceInfo.tsx
 create mode 100644 src/app/instances/[name]/components/ServerInfo.tsx

diff --git a/src/app/instances/[name]/components/InstanceInfo.tsx b/src/app/instances/[name]/components/InstanceInfo.tsx
new file mode 100644
index 0000000..bdb9be0
--- /dev/null
+++ b/src/app/instances/[name]/components/InstanceInfo.tsx
@@ -0,0 +1,52 @@
+import formatDate from "@/utils/formatDate";
+import { Instance } from "@/types/instance";
+
+export default function InstanceInfo({
+  instance }: { instance: Instance }) {
+  return (
+    <div>
+      <h2 className="font-heading1 text-headertext1 text-md pb-4">
+        Instance Info
+      </h2>
+      <table className="text-sm w-full table-auto mb-6">
+        <colgroup>
+          <col className="w-1/5" />
+          <col />
+        </colgroup>
+        <tbody className="font-text1">
+          <tr>
+            <td className="py-2">Status:</td>
+            <td
+              className={
+                instance?.state === "running"
+                  ? "text-btnhover1"
+                  : instance?.state === "stopped" ||
+                    instance?.state === "stopping"
+                    ? "text-red-300"
+                    : instance?.state === "shutting-down"
+                      ? "text-pagetext1 italic"
+                      : ""
+              }
+            >
+              {instance?.state}
+            </td>
+          </tr>
+          <tr className="border-t border-gray-300">
+            <td className="py-2">Host:</td>
+            <td className="py-2">{instance?.publicDns}</td>
+          </tr>
+          <tr className="border-t border-gray-300">
+            <td className="py-2">Created at:</td>
+            <td className="py-2">
+              {instance?.launchTime && formatDate(instance?.launchTime)}
+            </td>
+          </tr>
+          <tr className="border-t border-gray-300">
+            <td className="py-2">Data Center:</td>
+            <td className="py-2">{instance?.region}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  )
+}
diff --git a/src/app/instances/[name]/components/ServerInfo.tsx b/src/app/instances/[name]/components/ServerInfo.tsx
new file mode 100644
index 0000000..c87fbf7
--- /dev/null
+++ b/src/app/instances/[name]/components/ServerInfo.tsx
@@ -0,0 +1,137 @@
+import { useState } from "react";
+import { Copy, Eye, EyeOff } from "lucide-react";
+import { Instance } from "@/types/instance";
+
+export default function ServerInfo({ instance }: { instance: Instance }) {
+  const [showCopied, setShowCopied] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showUrlPassword, setShowUrlPassword] = useState(false);
+  const handleCopy = async () => {
+    if (!instance?.endpointUrl) return;
+    await navigator.clipboard.writeText(instance.endpointUrl);
+    setShowCopied(true);
+    setTimeout(() => setShowCopied(false), 2000);
+  };
+  const togglePassword = () => {
+    setShowPassword((prev) => !prev);
+  };
+
+  const toggleUrlPassword = () => {
+    setShowUrlPassword((prev) => !prev);
+  };
+
+
+  const secureWindow = () => {
+    return (
+      window !== undefined &&
+      (new RegExp(/^https/).test(window.location.href) ||
+        new RegExp(/^http:\/\/localhost/).test(window.location.href))
+    );
+  };
+  const getDisplayedEndpointUrl = (): string => {
+    if (!instance || !instance.endpointUrl) return "";
+
+    try {
+      const full = instance.endpointUrl;
+
+      const protocolSplit = full.split("://");
+      if (protocolSplit.length !== 2) return full;
+
+      const protocol = protocolSplit[0] + "://";
+      const rest = protocolSplit[1];
+
+      const atIndex = rest.lastIndexOf("@");
+      if (atIndex === -1) return full;
+
+      const credentials = rest.slice(0, atIndex);
+      const hostAndPath = rest.slice(atIndex + 1);
+
+      const [username, rawPassword] = credentials.split(":");
+
+      if (!username || !rawPassword) return full;
+
+      const displayedPassword = showUrlPassword
+        ? decodeURIComponent(rawPassword)
+        : "•".repeat(decodeURIComponent(rawPassword).length || 8);
+
+      return `${protocol}${username}:${displayedPassword}@${hostAndPath}`;
+    } catch (error) {
+      console.error("Error parsing endpoint URL:", error);
+      return instance.endpointUrl;
+    }
+  };
+
+
+  return (
+    <div>
+      <h2 className="font-heading1 text-headertext1 text-md pb-4">
+        RabbitMQ Server Info:
+      </h2>
+      <table className="text-sm w-full table-auto mb-6">
+        <colgroup>
+          <col className="w-1/5" />
+          <col />
+        </colgroup>
+        <tbody className="font-text1">
+          <tr>
+            <td className="py-2">Port:</td>
+            <td className="py-2">{instance?.port}</td>
+          </tr>
+          <tr className="border-t border-gray-300">
+            <td className="py-2">User:</td>
+            <td className="py-2">{instance?.user}</td>
+          </tr>
+          <tr className="border-t border-gray-300">
+            <td className="py-2">Password:</td>
+            <td className="py-2 flex items-center gap-2">
+              <span className="font-mono">
+                {showPassword
+                  ? instance?.password
+                  : "•".repeat(instance?.password?.length || 8)}
+              </span>
+              <button
+                onClick={togglePassword}
+                className="text-btn1 hover:text-checkmark p-1"
+                aria-label={showPassword ? "Hide password" : "Show password"}
+              >
+                {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+              </button>
+            </td>
+          </tr>
+          <tr className="border-t border-gray-300">
+            <td className="py-2">RabbitMQ Connection URL:</td>
+            <td className="py-2 relative">
+              <div className="flex items-center gap-2">
+                <span>{getDisplayedEndpointUrl()}</span>
+                <button
+                  onClick={toggleUrlPassword}
+                  className="text-btn1 hover:text-checkmark p-1"
+                  aria-label={
+                    showUrlPassword ? "Hide URL password" : "Show URL password"
+                  }
+                >
+                  {showUrlPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                </button>
+                <div className="relative">
+                  {secureWindow() && (
+                    <button
+                      onClick={handleCopy}
+                      className="text-btn1 hover:text-checkmark p-1"
+                    >
+                      <Copy size={16} />
+                    </button>
+                  )}
+                  {showCopied && (
+                    <div className="absolute top-full left-1/2 -translate-x-1/2 mt-0.5 bg-black text-white text-xs px-2 py-1 rounded shadow z-10 whitespace-nowrap">
+                      RabbitMQ URL copied to clipboard
+                    </div>
+                  )}
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  )
+}
diff --git a/src/app/instances/[name]/page.tsx b/src/app/instances/[name]/page.tsx
index 084cca0..cb714b5 100644
--- a/src/app/instances/[name]/page.tsx
+++ b/src/app/instances/[name]/page.tsx
@@ -1,72 +1,16 @@
 "use client";
 
 import React from "react";
-import formatDate from "@/utils/formatDate";
 import { useInstanceContext } from "./InstanceContext";
-import { Copy, Eye, EyeOff } from "lucide-react";
-import { useState } from "react";
+import InstanceInfo from "./components/InstanceInfo";
+import ServerInfo from "./components/ServerInfo";
 
 export default function InstancePage() {
   const { instance } = useInstanceContext();
-  const [showCopied, setShowCopied] = useState(false);
-  const [showPassword, setShowPassword] = useState(false);
-  const [showUrlPassword, setShowUrlPassword] = useState(false);
 
-  const handleCopy = async () => {
-    if (!instance?.endpointUrl) return;
-    await navigator.clipboard.writeText(instance.endpointUrl);
-    setShowCopied(true);
-    setTimeout(() => setShowCopied(false), 2000);
-  };
-
-  const secureWindow = () => {
-    return (
-      window !== undefined &&
-      (new RegExp(/^https/).test(window.location.href) ||
-        new RegExp(/^http:\/\/localhost/).test(window.location.href))
-    );
-  };
-
-  const togglePassword = () => {
-    setShowPassword((prev) => !prev);
-  };
-
-  const toggleUrlPassword = () => {
-    setShowUrlPassword((prev) => !prev);
-  };
-
-  const getDisplayedEndpointUrl = (): string => {
-    if (!instance || !instance.endpointUrl) return "";
-
-    try {
-      const full = instance.endpointUrl;
-
-      const protocolSplit = full.split("://");
-      if (protocolSplit.length !== 2) return full;
-
-      const protocol = protocolSplit[0] + "://";
-      const rest = protocolSplit[1];
-
-      const atIndex = rest.lastIndexOf("@");
-      if (atIndex === -1) return full;
-
-      const credentials = rest.slice(0, atIndex);
-      const hostAndPath = rest.slice(atIndex + 1);
-
-      const [username, rawPassword] = credentials.split(":");
-
-      if (!username || !rawPassword) return full;
-
-      const displayedPassword = showUrlPassword
-        ? decodeURIComponent(rawPassword)
-        : "•".repeat(decodeURIComponent(rawPassword).length || 8);
-
-      return `${protocol}${username}:${displayedPassword}@${hostAndPath}`;
-    } catch (error) {
-      console.error("Error parsing endpoint URL:", error);
-      return instance.endpointUrl;
-    }
-  };
+  if (!instance) {
+    throw new Error("Instance not found");
+  }
 
   return (
     <div className="text-pagetext1 flex-1 max-w-7xl mx-auto p-6 bg-card rounded-sm shadow-md">
@@ -74,117 +18,8 @@ export default function InstancePage() {
         {instance?.name}
       </h1>
 
-      <h2 className="font-heading1 text-headertext1 text-md pb-4">
-        Instance Info
-      </h2>
-      <table className="text-sm w-full table-auto mb-6">
-        <colgroup>
-          <col className="w-1/5" />
-          <col />
-        </colgroup>
-        <tbody className="font-text1">
-          <tr>
-            <td className="py-2">Status:</td>
-            <td
-              className={
-                instance?.state === "running"
-                  ? "text-btnhover1"
-                  : instance?.state === "stopped" ||
-                    instance?.state === "stopping"
-                  ? "text-red-300"
-                  : instance?.state === "shutting-down"
-                  ? "text-pagetext1 italic"
-                  : ""
-              }
-            >
-              {instance?.state}
-            </td>
-          </tr>
-          <tr className="border-t border-gray-300">
-            <td className="py-2">Host:</td>
-            <td className="py-2">{instance?.publicDns}</td>
-          </tr>
-          <tr className="border-t border-gray-300">
-            <td className="py-2">Created at:</td>
-            <td className="py-2">
-              {instance?.launchTime && formatDate(instance?.launchTime)}
-            </td>
-          </tr>
-          <tr className="border-t border-gray-300">
-            <td className="py-2">Data Center:</td>
-            <td className="py-2">{instance?.region}</td>
-          </tr>
-        </tbody>
-      </table>
-
-      <h2 className="font-heading1 text-headertext1 text-md pb-4">
-        RabbitMQ Server Info:
-      </h2>
-      <table className="text-sm w-full table-auto mb-6">
-        <colgroup>
-          <col className="w-1/5" />
-          <col />
-        </colgroup>
-        <tbody className="font-text1">
-          <tr>
-            <td className="py-2">Port:</td>
-            <td className="py-2">{instance?.port}</td>
-          </tr>
-          <tr className="border-t border-gray-300">
-            <td className="py-2">User:</td>
-            <td className="py-2">{instance?.user}</td>
-          </tr>
-          <tr className="border-t border-gray-300">
-            <td className="py-2">Password:</td>
-            <td className="py-2 flex items-center gap-2">
-              <span className="font-mono">
-                {showPassword
-                  ? instance?.password
-                  : "•".repeat(instance?.password?.length || 8)}
-              </span>
-              <button
-                onClick={togglePassword}
-                className="text-btn1 hover:text-checkmark p-1"
-                aria-label={showPassword ? "Hide password" : "Show password"}
-              >
-                {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
-              </button>
-            </td>
-          </tr>
-          <tr className="border-t border-gray-300">
-            <td className="py-2">RabbitMQ Connection URL:</td>
-            <td className="py-2 relative">
-              <div className="flex items-center gap-2">
-                <span>{getDisplayedEndpointUrl()}</span>
-                <button
-                  onClick={toggleUrlPassword}
-                  className="text-btn1 hover:text-checkmark p-1"
-                  aria-label={
-                    showUrlPassword ? "Hide URL password" : "Show URL password"
-                  }
-                >
-                  {showUrlPassword ? <EyeOff size={16} /> : <Eye size={16} />}
-                </button>
-                <div className="relative">
-                  {secureWindow() && (
-                    <button
-                      onClick={handleCopy}
-                      className="text-btn1 hover:text-checkmark p-1"
-                    >
-                      <Copy size={16} />
-                    </button>
-                  )}
-                  {showCopied && (
-                    <div className="absolute top-full left-1/2 -translate-x-1/2 mt-0.5 bg-black text-white text-xs px-2 py-1 rounded shadow z-10 whitespace-nowrap">
-                      RabbitMQ URL copied to clipboard
-                    </div>
-                  )}
-                </div>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <InstanceInfo instance={instance} />
+      <ServerInfo instance={instance} />
     </div>
   );
 }

From f24378718bd2e255282b51f16226e6543b991ff8 Mon Sep 17 00:00:00 2001
From: Jacqueline Amherst <jacqueline.amherst@icloud.com>
Date: Thu, 17 Apr 2025 20:10:17 -0500
Subject: [PATCH 11/26] extract components from alarms page

---
 .../alarms/components/CreateAlarmButton.tsx   |  15 ++
 .../alarms/components/LoadingSkeleton.tsx     |  14 ++
 .../alarms/components/MemoryAlarmsSection.tsx |  68 ++++++
 .../alarms/components/SlackEndpointCard.tsx   |  45 ++++
 .../components/StorageAlarmsSection.tsx       |  68 ++++++
 src/app/instances/[name]/alarms/page.tsx      | 202 +++---------------
 .../instances/[name]/alarms/types/alarm.ts    |   8 +
 7 files changed, 248 insertions(+), 172 deletions(-)
 create mode 100644 src/app/instances/[name]/alarms/components/CreateAlarmButton.tsx
 create mode 100644 src/app/instances/[name]/alarms/components/LoadingSkeleton.tsx
 create mode 100644 src/app/instances/[name]/alarms/components/MemoryAlarmsSection.tsx
 create mode 100644 src/app/instances/[name]/alarms/components/SlackEndpointCard.tsx
 create mode 100644 src/app/instances/[name]/alarms/components/StorageAlarmsSection.tsx
 create mode 100644 src/app/instances/[name]/alarms/types/alarm.ts

diff --git a/src/app/instances/[name]/alarms/components/CreateAlarmButton.tsx b/src/app/instances/[name]/alarms/components/CreateAlarmButton.tsx
new file mode 100644
index 0000000..575e690
--- /dev/null
+++ b/src/app/instances/[name]/alarms/components/CreateAlarmButton.tsx
@@ -0,0 +1,15 @@
+export default function CreateAlarmButton({ onClick }: { onClick: () => void }) {
+  return (
+    <div className="font-heading1 text-sm flex justify-end gap-4 mt-6">
+      <button
+        className="px-4 py-2 bg-btn1 hover:bg-btnhover1 text-sm text-mainbg1 font-semibold rounded-sm flex items-center justify-center hover:shadow-[0_0_10px_#87d9da] transition-all duration-200"
+        onClick={(e) => {
+          e.preventDefault();
+          onClick();
+        }}
+      >
+        Create Alarm
+      </button>
+    </div>
+  )
+}
diff --git a/src/app/instances/[name]/alarms/components/LoadingSkeleton.tsx b/src/app/instances/[name]/alarms/components/LoadingSkeleton.tsx
new file mode 100644
index 0000000..8401552
--- /dev/null
+++ b/src/app/instances/[name]/alarms/components/LoadingSkeleton.tsx
@@ -0,0 +1,14 @@
+export default function LoadingSkeleton() {
+  return (
+    <div className="animate-pulse">
+      <div className="space-y-4">
+        <div className="flex items-center gap-4">
+          <div className="w-full h-6 bg-gray-600 rounded-sm"></div>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="w-full h-6 bg-gray-600 rounded-sm"></div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/instances/[name]/alarms/components/MemoryAlarmsSection.tsx b/src/app/instances/[name]/alarms/components/MemoryAlarmsSection.tsx
new file mode 100644
index 0000000..d98c0a8
--- /dev/null
+++ b/src/app/instances/[name]/alarms/components/MemoryAlarmsSection.tsx
@@ -0,0 +1,68 @@
+import Dropdown from "./Dropdown"
+import Alarm from "../types/alarm";
+
+interface Props {
+  memoryAlarms: Alarm[];
+  onDelete: (type: "storage" | "memory", id: string) => void;
+  onTrigger: (type: "storage" | "memory", alarm: Alarm) => void;
+}
+
+export default function MemoryAlarmsSection({
+  memoryAlarms,
+  onDelete,
+  onTrigger,
+}: Props) {
+  return (
+    <div className="mb-15">
+      <h2 className="text-md font-heading1 text-headertext1 mb-2">
+        Memory Alarms
+      </h2>
+      <div className="overflow-visible">
+        <table className="font-heading1 text-sm w-full border-collapse">
+          <thead>
+            <tr>
+              <th className="p-2 text-left border-b">
+                Reminder Interval
+              </th>
+              <th className="p-2 text-left border-b">
+                Memory Threshold
+              </th>
+              <th className="p-2 text-left border-b">
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody className="font-text1 text-sm text-pagetext1">
+            {memoryAlarms.length === 0 ? (
+              <tr>
+                <td colSpan={4} className="p-2 text-center text-gray-600">
+                  No memory alarms yet.
+                </td>
+              </tr>
+            ) : (
+              memoryAlarms.map((alarm) => (
+                <tr key={alarm.id}>
+                  <td className="p-2 border-b">
+                    {alarm.data.reminderInterval}
+                  </td>
+                  <td className="p-2 border-b">
+                    {alarm.data.memoryThreshold}
+                  </td>
+                  <td className="p-2 border-b">
+                    <Dropdown
+                      label="Actions"
+                      options={{
+                        Delete: () => onDelete("memory", alarm.id),
+                        Trigger: () => onTrigger("memory", alarm),
+                      }}
+                    />
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/instances/[name]/alarms/components/SlackEndpointCard.tsx b/src/app/instances/[name]/alarms/components/SlackEndpointCard.tsx
new file mode 100644
index 0000000..c97bc86
--- /dev/null
+++ b/src/app/instances/[name]/alarms/components/SlackEndpointCard.tsx
@@ -0,0 +1,45 @@
+interface Props {
+  webhookUrl: string;
+  onClick: () => void;
+}
+
+export default function SlackEndpointCard({
+  webhookUrl,
+  onClick,
+}: Props) {
+  return (
+    <div className="max-w-4xl mx-auto p-6 bg-card text-pagetext1 rounded-sm shadow-md mt-8">
+      <h1 className="font-heading1 text-headertext1 text-2xl mb-10">Slack Endpoint</h1>
+      {webhookUrl ? (
+        <table className="text-sm w-full table-auto mb-6">
+          <colgroup>
+            <col className="w-1/5" />
+            <col />
+          </colgroup>
+          <tbody className="font-text1">
+            <tr>
+              <td className="py-2">Webhook URL:</td>
+              <td className="py-2">{webhookUrl}</td>
+            </tr>
+          </tbody>
+        </table>
+      ) : (
+        <p className="font-text1 text-sm mb-6">
+          You must set up a slack endpoint before creating alarms.
+        </p>
+      )}
+      <div className="font-heading1 text-sm flex justify-end gap-4 mt-6">
+        <button
+          className="px-4 py-2 bg-card border-1 border-btn1 text-btn1 rounded-sm text-center hover:shadow-[0_0_8px_#87d9da] transition-all duration-200 hover:bg-card"
+          onClick={(e) => {
+            e.preventDefault();
+            onClick();
+          }}
+        >
+          Setup Slack
+        </button>
+      </div>
+    </div>
+
+  )
+}
diff --git a/src/app/instances/[name]/alarms/components/StorageAlarmsSection.tsx b/src/app/instances/[name]/alarms/components/StorageAlarmsSection.tsx
new file mode 100644
index 0000000..d978db9
--- /dev/null
+++ b/src/app/instances/[name]/alarms/components/StorageAlarmsSection.tsx
@@ -0,0 +1,68 @@
+import Dropdown from "./Dropdown"
+import Alarm from "../types/alarm";
+
+interface Props {
+  storageAlarms: Alarm[];
+  onDelete: (type: "storage" | "memory", id: string) => void;
+  onTrigger: (type: "storage" | "memory", alarm: Alarm) => void;
+}
+
+export default function StorageAlarmsSection({
+  storageAlarms,
+  onDelete,
+  onTrigger,
+}: Props) {
+  return (
+    <div className="mb-15">
+      <h2 className="text-md font-heading1 text-headertext1 mb-2">
+        Storage Alarms
+      </h2>
+      <div className="overflow-visible">
+        <table className="font-heading1 text-sm w-full border-collapse">
+          <thead>
+            <tr>
+              <th className="p-2 text-left border-b">
+                Storage Threshold
+              </th>
+              <th className="p-2 text-left border-b">
+                Reminder Interval
+              </th>
+              <th className="p-2 text-left border-b">
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody className="font-text1 text-sm text-pagetext1">
+            {storageAlarms.length === 0 ? (
+              <tr>
+                <td colSpan={4} className="p-2 text-md text-center text-gray-600">
+                  No storage alarms yet.
+                </td>
+              </tr>
+            ) : (
+              storageAlarms.map((alarm) => (
+                <tr key={alarm.id}>
+                  <td className="p-2 border-b">
+                    {alarm.data.storageThreshold}
+                  </td>
+                  <td className="p-2 border-b">
+                    {alarm.data.reminderInterval}
+                  </td>
+                  <td className="p-2 border-b">
+                    <Dropdown
+                      label="Actions"
+                      options={{
+                        Delete: () => onDelete("storage", alarm.id),
+                        Trigger: () => onTrigger("storage", alarm),
+                      }}
+                    />
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/instances/[name]/alarms/page.tsx b/src/app/instances/[name]/alarms/page.tsx
index 941c413..41cbe19 100644
--- a/src/app/instances/[name]/alarms/page.tsx
+++ b/src/app/instances/[name]/alarms/page.tsx
@@ -1,20 +1,17 @@
 "use client";
 
+import axios from "axios";
 import { useInstanceContext } from "../InstanceContext";
 import { useEffect, useState } from "react";
 import { NewAlarmModal } from "./components/NewAlarmModal";
 import { SlackModal } from "./components/SlackModal";
-import Dropdown from "./components/Dropdown";
-import axios from "axios";
+import SlackEndpointCard from "./components/SlackEndpointCard";
+import StorageAlarmsSection from "./components/StorageAlarmsSection";
+import MemoryAlarmsSection from "./components/MemoryAlarmsSection";
+import LoadingSkeleton from "./components/LoadingSkeleton";
+import CreateAlarmButton from "./components/CreateAlarmButton";
+import Alarm from "./types/alarm";
 
-interface Alarm {
-  id: string;
-  data: {
-    memoryThreshold: number;
-    storageThreshold: number;
-    reminderInterval: number;
-  };
-}
 
 export default function AlarmsPage() {
   const { instance } = useInstanceContext();
@@ -74,8 +71,11 @@ export default function AlarmsPage() {
       await axios.delete(
         `/api/instances/${instance?.name}/alarms?region=${instance?.region}&type=${type}&id=${id}`,
       );
-      setStorageAlarms((prev) => prev.filter((alarm) => alarm.id !== id));
-      setMemoryAlarms((prev) => prev.filter((alarm) => alarm.id !== id));
+      if (type === "storage") {
+        setStorageAlarms((prev) => prev.filter((alarm) => alarm.id !== id));
+      } else {
+        setMemoryAlarms((prev) => prev.filter((alarm) => alarm.id !== id));
+      }
     } catch (error) {
       console.error("Error deleting alarm:", error);
     }
@@ -101,39 +101,10 @@ export default function AlarmsPage() {
 
   return (
     <>
-      {/* Slack Endpoint Card */}
-      <div className="max-w-4xl mx-auto p-6 bg-card text-pagetext1 rounded-sm shadow-md mt-8">
-        <h1 className="font-heading1 text-headertext1 text-2xl mb-10">Slack Endpoint</h1>
-        {webhookUrl ? (
-          <table className="text-sm w-full table-auto mb-6">
-            <colgroup>
-              <col className="w-1/5" />
-              <col />
-            </colgroup>
-            <tbody className="font-text1">
-              <tr>
-                <td className="py-2">Webhook URL:</td>
-                <td className="py-2">{webhookUrl}</td>
-              </tr>
-            </tbody>
-          </table>
-        ) : (
-          <p className="font-text1 text-sm mb-6">
-            You must set up a slack endpoint before creating alarms.
-          </p>
-        )}
-        <div className="font-heading1 text-sm flex justify-end gap-4 mt-6">
-          <button
-            className="px-4 py-2 bg-card border-1 border-btn1 text-btn1 rounded-sm text-center hover:shadow-[0_0_8px_#87d9da] transition-all duration-200 hover:bg-card"
-            onClick={(e) => {
-              e.preventDefault();
-              setShowSlackModal(true);
-            }}
-          >
-            Setup Slack
-          </button>
-        </div>
-      </div>
+      <SlackEndpointCard
+        webhookUrl={webhookUrl}
+        onClick={() => setShowSlackModal(true)}
+      />
 
       {webhookUrl &&
         <>
@@ -144,135 +115,22 @@ export default function AlarmsPage() {
               You can set up alarms to receive notifications via Slack using the button below.
             </p>
             {isLoading ? (
-              <div className="animate-pulse">
-                <div className="space-y-4">
-                  <div className="flex items-center gap-4">
-                    <div className="w-full h-6 bg-gray-600 rounded-sm"></div>
-                  </div>
-                  <div className="flex items-center gap-4">
-                    <div className="w-full h-6 bg-gray-600 rounded-sm"></div>
-                  </div>
-                </div>
-              </div>
+              <LoadingSkeleton />
             ) : (
               <>
-                {/* Storage Alarms Section */}
-                <div className="mb-15">
-                  <h2 className="text-md font-heading1 text-headertext1 mb-2">
-                    Storage Alarms
-                  </h2>
-                  <div className="overflow-visible">
-                    <table className="font-heading1 text-sm w-full border-collapse">
-                      <thead>
-                        <tr>
-                          <th className="p-2 text-left border-b">
-                            Storage Threshold
-                          </th>
-                          <th className="p-2 text-left border-b">
-                            Reminder Interval
-                          </th>
-                          <th className="p-2 text-left border-b">
-                            Actions
-                          </th>
-                        </tr>
-                      </thead>
-                      <tbody className="font-text1 text-sm text-pagetext1">
-                        {storageAlarms.length === 0 ? (
-                          <tr>
-                            <td colSpan={4} className="p-2 text-md text-center text-gray-600">
-                              No storage alarms yet.
-                            </td>
-                          </tr>
-                        ) : (
-                          storageAlarms.map((alarm) => (
-                            <tr key={alarm.id}>
-                              <td className="p-2 border-b">
-                                {alarm.data.storageThreshold}
-                              </td>
-                              <td className="p-2 border-b">
-                                {alarm.data.reminderInterval}
-                              </td>
-                              <td className="p-2 border-b">
-                                <Dropdown
-                                  label="Actions"
-                                  options={{
-                                    Delete: () => handleDelete("storage", alarm.id),
-                                    Trigger: () => handleTrigger("storage", alarm),
-                                  }}
-                                />
-                              </td>
-                            </tr>
-                          ))
-                        )}
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-
-                {/* Memory Alarms Section */}
-                <div className="mb-15">
-                  <h2 className="text-md font-heading1 text-headertext1 mb-2">
-                    Memory Alarms
-                  </h2>
-                  <div className="overflow-visible">
-                    <table className="font-heading1 text-sm w-full border-collapse">
-                      <thead>
-                        <tr>
-                          <th className="p-2 text-left border-b">
-                            Reminder Interval
-                          </th>
-                          <th className="p-2 text-left border-b">
-                            Memory Threshold
-                          </th>
-                          <th className="p-2 text-left border-b">
-                            Actions
-                          </th>
-                        </tr>
-                      </thead>
-                      <tbody className="font-text1 text-sm text-pagetext1">
-                        {memoryAlarms.length === 0 ? (
-                          <tr>
-                            <td colSpan={4} className="p-2 text-center text-gray-600">
-                              No memory alarms yet.
-                            </td>
-                          </tr>
-                        ) : (
-                          memoryAlarms.map((alarm) => (
-                            <tr key={alarm.id}>
-                              <td className="p-2 border-b">
-                                {alarm.data.reminderInterval}
-                              </td>
-                              <td className="p-2 border-b">
-                                {alarm.data.memoryThreshold}
-                              </td>
-                              <td className="p-2 border-b">
-                                <Dropdown
-                                  label="Actions"
-                                  options={{
-                                    Delete: () => handleDelete("memory", alarm.id),
-                                    Trigger: () => handleTrigger("memory", alarm),
-                                  }}
-                                />
-                              </td>
-                            </tr>
-                          ))
-                        )}
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-
-                <div className="font-heading1 text-sm flex justify-end gap-4 mt-6">
-                  <button
-                    className="px-4 py-2 bg-btn1 hover:bg-btnhover1 text-sm text-mainbg1 font-semibold rounded-sm flex items-center justify-center hover:shadow-[0_0_10px_#87d9da] transition-all duration-200"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      setShowNewAlarmModal(true);
-                    }}
-                  >
-                    Create Alarm
-                  </button>
-                </div>
+                <StorageAlarmsSection
+                  storageAlarms={storageAlarms}
+                  onDelete={handleDelete}
+                  onTrigger={handleTrigger}
+                />
+
+                <MemoryAlarmsSection
+                  memoryAlarms={memoryAlarms}
+                  onDelete={handleDelete}
+                  onTrigger={handleTrigger}
+                />
+
+                <CreateAlarmButton onClick={() => setShowNewAlarmModal(true)} />
               </>
             )}
           </div>
diff --git a/src/app/instances/[name]/alarms/types/alarm.ts b/src/app/instances/[name]/alarms/types/alarm.ts
new file mode 100644
index 0000000..a1cc8a7
--- /dev/null
+++ b/src/app/instances/[name]/alarms/types/alarm.ts
@@ -0,0 +1,8 @@
+export default interface Alarm {
+  id: string;
+  data: {
+    memoryThreshold: number;
+    storageThreshold: number;
+    reminderInterval: number;
+  };
+}

From 98bd7e7975972b5cb9bbc3a3f908bdee6cfc351c Mon Sep 17 00:00:00 2001
From: Jacqueline Amherst <jacqueline.amherst@icloud.com>
Date: Thu, 17 Apr 2025 20:13:14 -0500
Subject: [PATCH 12/26] fix import statements

---
 src/app/instances/[name]/alarms/components/NewAlarmModal.tsx | 2 +-
 src/app/instances/[name]/alarms/components/SlackModal.tsx    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/instances/[name]/alarms/components/NewAlarmModal.tsx b/src/app/instances/[name]/alarms/components/NewAlarmModal.tsx
index 70dcedf..9a5dd14 100644
--- a/src/app/instances/[name]/alarms/components/NewAlarmModal.tsx
+++ b/src/app/instances/[name]/alarms/components/NewAlarmModal.tsx
@@ -1,4 +1,4 @@
-import { useInstanceContext } from "../instances/[name]/InstanceContext";
+import { useInstanceContext } from "../../InstanceContext";
 import { useState } from "react";
 import ErrorBanner from "@/app/instances/components/ErrorBanner";
 import axios from "axios";
diff --git a/src/app/instances/[name]/alarms/components/SlackModal.tsx b/src/app/instances/[name]/alarms/components/SlackModal.tsx
index 4576e17..167a089 100644
--- a/src/app/instances/[name]/alarms/components/SlackModal.tsx
+++ b/src/app/instances/[name]/alarms/components/SlackModal.tsx
@@ -1,4 +1,4 @@
-import { useInstanceContext } from "../instances/[name]/InstanceContext";
+import { useInstanceContext } from "../../InstanceContext";
 import { useState } from "react";
 import axios from "axios";
 import ErrorBanner from "@/app/instances/components/ErrorBanner";

From c10ad5c9da0c3fceeb13f0f409100d2fcc453a12 Mon Sep 17 00:00:00 2001
From: Jacqueline Amherst <jacqueline.amherst@icloud.com>
Date: Thu, 17 Apr 2025 21:24:59 -0500
Subject: [PATCH 13/26] extract components from backups page

---
 .../backups/components/BackupsDescription.tsx |  26 +++
 .../backups/components/BackupsTable.tsx       |  81 +++++++++
 .../backups/components/LoadingSkeleton.tsx    |  42 +++++
 .../backups/components/ManualBackupButton.tsx |  30 ++++
 src/app/instances/[name]/backups/page.tsx     | 169 +++---------------
 .../instances/[name]/backups/types/backup.ts  |   7 +
 6 files changed, 206 insertions(+), 149 deletions(-)
 create mode 100644 src/app/instances/[name]/backups/components/BackupsDescription.tsx
 create mode 100644 src/app/instances/[name]/backups/components/BackupsTable.tsx
 create mode 100644 src/app/instances/[name]/backups/components/LoadingSkeleton.tsx
 create mode 100644 src/app/instances/[name]/backups/components/ManualBackupButton.tsx
 create mode 100644 src/app/instances/[name]/backups/types/backup.ts

diff --git a/src/app/instances/[name]/backups/components/BackupsDescription.tsx b/src/app/instances/[name]/backups/components/BackupsDescription.tsx
new file mode 100644
index 0000000..5518319
--- /dev/null
+++ b/src/app/instances/[name]/backups/components/BackupsDescription.tsx
@@ -0,0 +1,26 @@
+export default function BackupsDescription() {
+  return (
+    <>
+      <h1 className="font-heading1 text-headertext1 text-2xl mb-6">Backups</h1>
+      <p className="font-text1 text-sm mb-4">
+        A “definition” in RabbitMQ is a snapshot of your server’s configuration
+        — including exchanges, queues, users, and permissions. We refer to these
+        as “backups”. See{" "}
+        <a
+          href="https://www.rabbitmq.com/docs/definitions"
+          className="underline hover:text-headertext1"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          RabbitMQ documentation
+        </a>{" "}
+        for more details.
+      </p>
+      <p className="font-text1 text-sm mb-10">
+        Below, you can manually create and download backups for safekeeping or
+        migration. All backups are also securely stored in the cloud, so they’ll
+        be available anytime you return to this page.
+      </p>
+    </>
+  )
+}
diff --git a/src/app/instances/[name]/backups/components/BackupsTable.tsx b/src/app/instances/[name]/backups/components/BackupsTable.tsx
new file mode 100644
index 0000000..272dd99
--- /dev/null
+++ b/src/app/instances/[name]/backups/components/BackupsTable.tsx
@@ -0,0 +1,81 @@
+import Backup from "../types/backup";
+import { Instance } from "@/types/instance";
+
+interface Props {
+  backups: Backup[];
+  instance: Instance;
+}
+
+export default function BackupsTable({
+  backups,
+  instance,
+}: Props) {
+  const handleDownload = (backup: Backup) => {
+    const jsonString = JSON.stringify(backup.definitions, null, 2);
+
+    const blob = new Blob([jsonString], { type: "application/json" });
+
+    const url = window.URL.createObjectURL(blob);
+
+    const link = document.createElement("a");
+    link.href = url;
+    link.setAttribute("download", `${instance?.name}-${backup.timestamp}.json`);
+    document.body.appendChild(link);
+    link.click();
+
+    window.URL.revokeObjectURL(url);
+    link.remove();
+  };
+
+  return (
+    <div className="overflow-x-auto text-sm">
+      <table className="w-full border-collapse">
+        <thead className="font-heading1">
+          <tr>
+            <th className="p-2 text-left border-b border-gray-300">
+              Date Created
+            </th>
+            <th className="p-2 text-left border-b border-gray-300">
+              RabbitMQ Version
+            </th>
+            <th className="p-2 text-left border-b border-gray-300">
+              Trigger
+            </th>
+            <th className="p-2 text-left border-b border-gray-300"></th>
+          </tr>
+        </thead>
+        <tbody className="font-text1">
+          {backups.length === 0 ? (
+            <tr>
+              <td colSpan={4} className="p-2 text-gray-600">
+                No backups found.
+              </td>
+            </tr>
+          ) : (
+            backups.map((backup, idx) => (
+              <tr key={idx}>
+                <td className="p-2 border-b border-gray-300">
+                  {backup.timestamp}
+                </td>
+                <td className="p-2 border-b border-gray-300">
+                  {backup.rabbitmq_version}
+                </td>
+                <td className="p-2 border-b border-gray-300">
+                  {backup.trigger}
+                </td>
+                <td className="p-2 border-b border-gray-300">
+                  <button
+                    onClick={() => handleDownload(backup)}
+                    className="px-3 py-1 bg-card border-1 border-btn1 text-btn1 rounded-sm text-center hover:shadow-[0_0_8px_#87d9da] transition-all duration-200 hover:bg-card"
+                  >
+                    Download
+                  </button>
+                </td>
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  )
+}
diff --git a/src/app/instances/[name]/backups/components/LoadingSkeleton.tsx b/src/app/instances/[name]/backups/components/LoadingSkeleton.tsx
new file mode 100644
index 0000000..643e8bb
--- /dev/null
+++ b/src/app/instances/[name]/backups/components/LoadingSkeleton.tsx
@@ -0,0 +1,42 @@
+export default function LoadingSkeleton() {
+  return (
+    <div className="animate-pulse space-y-4 text-sm">
+      <div className="overflow-x-auto">
+        <table className="w-full border-collapse">
+          <thead className="font-heading1">
+            <tr>
+              <th className="p-2 text-left border-b border-gray-600">
+                Date Created
+              </th>
+              <th className="p-2 text-left border-b border-gray-600">
+                RabbitMQ Version
+              </th>
+              <th className="p-2 text-left border-b border-gray-600">
+                Trigger
+              </th>
+              <th className="p-2 text-left border-b border-gray-600"></th>
+            </tr>
+          </thead>
+          <tbody className="font-text1">
+            {[...Array(3)].map((_, index) => (
+              <tr key={index}>
+                <td className="p-2 border-b border-gray-600">
+                  <div className="h-4 w-24 bg-gray-600 rounded-sm" />
+                </td>
+                <td className="p-2 border-b border-gray-600">
+                  <div className="h-4 w-32 bg-gray-600 rounded-sm" />
+                </td>
+                <td className="p-2 border-b border-gray-600">
+                  <div className="h-4 w-20 bg-gray-600 rounded-sm" />
+                </td>
+                <td className="p-2 border-b border-gray-600">
+                  <div className="h-6 w-24 bg-gray-600 rounded-sm" />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/instances/[name]/backups/components/ManualBackupButton.tsx b/src/app/instances/[name]/backups/components/ManualBackupButton.tsx
new file mode 100644
index 0000000..ce57757
--- /dev/null
+++ b/src/app/instances/[name]/backups/components/ManualBackupButton.tsx
@@ -0,0 +1,30 @@
+import SubmissionSpinner from "@/app/instances/components/SubmissionSpinner";
+
+interface Props {
+  onClick: () => void;
+  disabled: boolean;
+}
+
+export default function ManualBackupButton({
+  onClick,
+  disabled,
+}: Props) {
+  return (
+    <div className="flex justify-between items-center mb-4">
+      <button
+        onClick={onClick}
+        disabled={disabled}
+        className="font-heading1 text-sm px-4 py-2 mb-8 bg-btn1 hover:bg-btnhover1 text-mainbg1 font-semibold rounded-sm flex items-center justify-center hover:shadow-[0_0_10px_#87d9da] transition-all duration-200"
+      >
+        {disabled ? (
+          <span className="flex items-center gap-2">
+            <SubmissionSpinner />
+            Adding Manual Backup...
+          </span>
+        ) : (
+          "+ Add Manual Backup"
+        )}
+      </button>
+    </div>
+  )
+}
diff --git a/src/app/instances/[name]/backups/page.tsx b/src/app/instances/[name]/backups/page.tsx
index 0a174bd..2538d70 100644
--- a/src/app/instances/[name]/backups/page.tsx
+++ b/src/app/instances/[name]/backups/page.tsx
@@ -2,19 +2,20 @@
 import React, { useEffect, useState } from "react";
 import axios from "axios";
 import { useInstanceContext } from "../InstanceContext";
-import SubmissionSpinner from "../../components/SubmissionSpinner";
 import { useNotificationsContext } from "@/app/NotificationContext";
-
-interface Backup {
-  timestamp: string;
-  rabbitmq_version: string;
-  trigger: string;
-  definitions: Record<string, unknown>;
-}
+import BackupsDescription from "./components/BackupsDescription";
+import ManualBackupButton from "./components/ManualBackupButton";
+import LoadingSkeleton from "./components/LoadingSkeleton";
+import BackupsTable from "./components/BackupsTable";
+import Backup from "./types/backup";
 
 export default function BackupsPage() {
   const { instance } = useInstanceContext();
 
+  if (!instance) {
+    throw new Error("Instance not found");
+  }
+
   const { addNotification, formPending } = useNotificationsContext();
 
   const [backups, setBackups] = useState<Backup[]>([]);
@@ -42,7 +43,7 @@ export default function BackupsPage() {
 
   const handleManualBackup = async () => {
     if (!instance?.name) return;
-    await addNotification({
+    addNotification({
       type: "backup",
       status: "pending",
       instanceName: instance?.name,
@@ -66,151 +67,21 @@ export default function BackupsPage() {
     }
   };
 
-  const handleDownload = (backup: Backup) => {
-    const jsonString = JSON.stringify(backup.definitions, null, 2);
-
-    const blob = new Blob([jsonString], { type: "application/json" });
-
-    const url = window.URL.createObjectURL(blob);
-
-    const link = document.createElement("a");
-    link.href = url;
-    link.setAttribute("download", `${instance?.name}-${backup.timestamp}.json`);
-    document.body.appendChild(link);
-    link.click();
-
-    window.URL.revokeObjectURL(url);
-    link.remove();
-  };
-
   return (
     <div className="max-w-4xl mx-auto p-6 bg-card rounded-sm shadow-md mt-8 text-pagetext1">
-      <h1 className="font-heading1 text-headertext1 text-2xl mb-6">Backups</h1>
-      <p className="font-text1 text-sm mb-4">
-        A “definition” in RabbitMQ is a snapshot of your server’s configuration
-        — including exchanges, queues, users, and permissions. We refer to these
-        as “backups”. See{" "}
-        <a
-          href="https://www.rabbitmq.com/docs/definitions"
-          className="underline hover:text-headertext1"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          RabbitMQ documentation
-        </a>{" "}
-        for more details.
-      </p>
-      <p className="font-text1 text-sm mb-10">
-        Below, you can manually create and download backups for safekeeping or
-        migration. All backups are also securely stored in the cloud, so they’ll
-        be available anytime you return to this page.
-      </p>
-      <div className="flex justify-between items-center mb-4">
-        <button
-          onClick={handleManualBackup}
-          disabled={formPending()}
-          className="font-heading1 text-sm px-4 py-2 mb-8 bg-btn1 hover:bg-btnhover1 text-mainbg1 font-semibold rounded-sm flex items-center justify-center hover:shadow-[0_0_10px_#87d9da] transition-all duration-200"
-        >
-          {formPending() ? (
-            <span className="flex items-center gap-2">
-              <SubmissionSpinner />
-              Adding Manual Backup...
-            </span>
-          ) : (
-            "+ Add Manual Backup"
-          )}
-        </button>
-      </div>
+      <BackupsDescription />
+      <ManualBackupButton
+        onClick={handleManualBackup}
+        disabled={formPending()}
+      />
 
       {isLoading ? (
-        <div className="animate-pulse space-y-4 text-sm">
-          <div className="overflow-x-auto">
-            <table className="w-full border-collapse">
-              <thead className="font-heading1">
-                <tr>
-                  <th className="p-2 text-left border-b border-gray-600">
-                    Date Created
-                  </th>
-                  <th className="p-2 text-left border-b border-gray-600">
-                    RabbitMQ Version
-                  </th>
-                  <th className="p-2 text-left border-b border-gray-600">
-                    Trigger
-                  </th>
-                  <th className="p-2 text-left border-b border-gray-600"></th>
-                </tr>
-              </thead>
-              <tbody className="font-text1">
-                {[...Array(3)].map((_, index) => (
-                  <tr key={index}>
-                    <td className="p-2 border-b border-gray-600">
-                      <div className="h-4 w-24 bg-gray-600 rounded-sm" />
-                    </td>
-                    <td className="p-2 border-b border-gray-600">
-                      <div className="h-4 w-32 bg-gray-600 rounded-sm" />
-                    </td>
-                    <td className="p-2 border-b border-gray-600">
-                      <div className="h-4 w-20 bg-gray-600 rounded-sm" />
-                    </td>
-                    <td className="p-2 border-b border-gray-600">
-                      <div className="h-6 w-24 bg-gray-600 rounded-sm" />
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
+        <LoadingSkeleton />
       ) : (
-        <div className="overflow-x-auto text-sm">
-          <table className="w-full border-collapse">
-            <thead className="font-heading1">
-              <tr>
-                <th className="p-2 text-left border-b border-gray-300">
-                  Date Created
-                </th>
-                <th className="p-2 text-left border-b border-gray-300">
-                  RabbitMQ Version
-                </th>
-                <th className="p-2 text-left border-b border-gray-300">
-                  Trigger
-                </th>
-                <th className="p-2 text-left border-b border-gray-300"></th>
-              </tr>
-            </thead>
-            <tbody className="font-text1">
-              {backups.length === 0 ? (
-                <tr>
-                  <td colSpan={4} className="p-2 text-gray-600">
-                    No backups found.
-                  </td>
-                </tr>
-              ) : (
-                backups.map((backup, idx) => (
-                  <tr key={idx}>
-                    <td className="p-2 border-b border-gray-300">
-                      {backup.timestamp}
-                    </td>
-                    <td className="p-2 border-b border-gray-300">
-                      {backup.rabbitmq_version}
-                    </td>
-                    <td className="p-2 border-b border-gray-300">
-                      {backup.trigger}
-                    </td>
-                    <td className="p-2 border-b border-gray-300">
-                      <button
-                        onClick={() => handleDownload(backup)}
-                        className="px-3 py-1 bg-card border-1 border-btn1 text-btn1 rounded-sm text-center hover:shadow-[0_0_8px_#87d9da] transition-all duration-200 hover:bg-card"
-                      >
-                        Download
-                      </button>
-                    </td>
-                  </tr>
-                ))
-              )}
-            </tbody>
-          </table>
-        </div>
+        <BackupsTable
+          backups={backups}
+          instance={instance}
+        />
       )}
     </div>
   );
diff --git a/src/app/instances/[name]/backups/types/backup.ts b/src/app/instances/[name]/backups/types/backup.ts
new file mode 100644
index 0000000..4adfe10
--- /dev/null
+++ b/src/app/instances/[name]/backups/types/backup.ts
@@ -0,0 +1,7 @@
+export default interface Backup {
+  timestamp: string;
+  rabbitmq_version: string;
+  trigger: string;
+  definitions: Record<string, unknown>;
+}
+

From 4cbd560b369b1fe11f1ac3880afd33f6edcca21f Mon Sep 17 00:00:00 2001
From: Jacqueline Amherst <jacqueline.amherst@icloud.com>
Date: Thu, 17 Apr 2025 22:00:31 -0500
Subject: [PATCH 14/26] extract components from config page

---
 .../components/ComponentsForm.tsx             |  76 +++++++++++
 .../components/ComponentsFormRow.tsx          |  62 +++++++++
 .../components/ConfigurationDescription.tsx   |  22 ++++
 .../instances/[name]/configuration/page.tsx   | 120 ++----------------
 .../configuration/types/configuration.ts      |   0
 src/types/configuration.ts                    |   2 +-
 6 files changed, 173 insertions(+), 109 deletions(-)
 create mode 100644 src/app/instances/[name]/configuration/components/ComponentsForm.tsx
 create mode 100644 src/app/instances/[name]/configuration/components/ComponentsFormRow.tsx
 create mode 100644 src/app/instances/[name]/configuration/components/ConfigurationDescription.tsx
 create mode 100644 src/app/instances/[name]/configuration/types/configuration.ts

diff --git a/src/app/instances/[name]/configuration/components/ComponentsForm.tsx b/src/app/instances/[name]/configuration/components/ComponentsForm.tsx
new file mode 100644
index 0000000..8cff449
--- /dev/null
+++ b/src/app/instances/[name]/configuration/components/ComponentsForm.tsx
@@ -0,0 +1,76 @@
+import { configItems } from "@/types/configuration";
+import Link from "next/link";
+import SubmissionSpinner from "@/app/instances/components/SubmissionSpinner";
+import ComponentsFormRow from "./ComponentsFormRow";
+
+interface Props {
+  configuration: Record<string, string>;
+  isLoading: boolean;
+  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
+  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+  disabled: boolean;
+  pending: boolean;
+}
+
+export default function ComponentsForm({
+  configuration,
+  isLoading,
+  onChange,
+  onSubmit,
+  disabled,
+  pending,
+}: Props) {
+  return (
+    <form onSubmit={onSubmit}>
+      <table className="w-full border-collapse">
+        <thead className="font-heading1 text-headertext1 text-sm">
+          <tr>
+            <th className="p-2 text-left border-b">Setting</th>
+            <th className="p-2 text-left border-b">Description</th>
+            <th className="p-2 text-left border-b">Value</th>
+          </tr>
+        </thead>
+        <tbody
+          className={`font-text1 text-sm ${isLoading ? "" : "animate-fade-in"
+            }`}
+        >
+          {configItems.map((item) => (
+            <ComponentsFormRow
+              key={item.key}
+              item={item}
+              configuration={configuration}
+              isLoading={isLoading}
+              onChange={onChange}
+            />
+          ))}
+        </tbody>
+      </table>
+
+      <div className="font-heading1 text-sm flex justify-end gap-4 mt-6">
+        <Link
+          href="/"
+          className="px-4 py-2 bg-card border-1 border-btn1 text-btn1 rounded-sm text-center hover:shadow-[0_0_8px_#87d9da] transition-all duration-200 hover:bg-card"
+        >
+          Cancel
+        </Link>
+        <button
+          type="submit"
+          disabled={disabled}
+          className={`px-4 py-2 text-mainbg1 font-semibold rounded-sm ${pending}
+            ? "bg-btnhover1 opacity-70 cursor-not-allowed"
+            : "bg-btn1 hover:bg-btnhover1 flex items-center justify-center hover:shadow-[0_0_10px_#87d9da] transition-all duration-200"
+            }`}
+        >
+          {disabled ? (
+            <span className="flex items-center gap-2">
+              <SubmissionSpinner />
+              Saving ...
+            </span>
+          ) : (
+            "Save"
+          )}
+        </button>
+      </div>
+    </form>
+  )
+}
diff --git a/src/app/instances/[name]/configuration/components/ComponentsFormRow.tsx b/src/app/instances/[name]/configuration/components/ComponentsFormRow.tsx
new file mode 100644
index 0000000..5fe8df1
--- /dev/null
+++ b/src/app/instances/[name]/configuration/components/ComponentsFormRow.tsx
@@ -0,0 +1,62 @@
+import { ConfigItem } from "@/types/configuration";
+
+interface Props {
+  item: ConfigItem;
+  configuration: Record<string, string>;
+  isLoading: boolean;
+  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
+}
+
+export default function ComponentsFormRow({
+  item,
+  configuration,
+  isLoading,
+  onChange,
+}: Props) {
+  return (
+    <tr key={item.key} className="p-2">
+      <td className="p-2 border-b">
+        {isLoading ? (
+          <div className="w-32 h-4 bg-gray-600 rounded-sm animate-pulse"></div>
+        ) : (
+          item.key
+        )}
+      </td>
+      <td className="p-2 border-b">
+        {isLoading ? (
+          <div className="w-48 h-4 bg-gray-600 rounded-sm animate-pulse"></div>
+        ) : (
+          item.description
+        )}
+      </td>
+      <td className="p-2 border-b w-1/6 text-center">
+        {isLoading ? (
+          <div className="w-24 h-4 bg-gray-600 rounded-sm animate-pulse"></div>
+        ) : item.type === "dropdown" && Array.isArray(item.options) ? (
+          <select
+            name={item.key}
+            value={configuration[item.key] ?? ""}
+            onChange={onChange}
+            className="w-full p-1 border rounded-sm text-sm"
+          >
+            {item.options.map((option) => (
+              <option key={option} value={option}>
+                {option}
+              </option>
+            ))}
+          </select>
+        ) : (
+          <input
+            type={item.type}
+            name={item.key}
+            aria-label={item.key}
+            readOnly={Boolean(item.readOnly)}
+            value={configuration[item.key] ?? ""}
+            onChange={onChange}
+            className="text-sm w-full py-1 pl-2 pr-1 border rounded-md"
+          />
+        )}
+      </td>
+    </tr>
+  )
+}
diff --git a/src/app/instances/[name]/configuration/components/ConfigurationDescription.tsx b/src/app/instances/[name]/configuration/components/ConfigurationDescription.tsx
new file mode 100644
index 0000000..e915867
--- /dev/null
+++ b/src/app/instances/[name]/configuration/components/ConfigurationDescription.tsx
@@ -0,0 +1,22 @@
+export default function ConfigurationDescription() {
+  return (
+    <>
+      <h1 className="font-heading1 text-headertext1 text-2xl mb-10">
+        Configuration
+      </h1>
+      <p className="font-text1 text-sm text-pagetext1 mb-6">
+        Below are the RabbitMQ server configurations. For detailed explanations
+        of each setting, refer to the{" "}
+        <a
+          href="https://www.rabbitmq.com/docs/configure"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="underline text-pagetext1 hover:text-headertext1"
+        >
+          RabbitMQ Configuration Guide
+        </a>
+        .
+      </p>
+    </>
+  )
+}
diff --git a/src/app/instances/[name]/configuration/page.tsx b/src/app/instances/[name]/configuration/page.tsx
index 5b07e5c..3556ac9 100644
--- a/src/app/instances/[name]/configuration/page.tsx
+++ b/src/app/instances/[name]/configuration/page.tsx
@@ -4,11 +4,10 @@ import axios from "axios";
 import { useEffect, useState } from "react";
 import { useInstanceContext } from "../InstanceContext";
 import { useNotificationsContext } from "@/app/NotificationContext";
-import { configItems } from "@/types/configuration";
 import { validateConfiguration } from "@/utils/validateConfig";
 import ErrorBanner from "@/app/instances/components/ErrorBanner";
-import Link from "next/link";
-import SubmissionSpinner from "../../components/SubmissionSpinner";
+import ConfigurationDescription from "./components/ConfigurationDescription";
+import ComponentsForm from "./components/ComponentsForm";
 
 interface Configuration {
   [key: string]: string;
@@ -69,7 +68,7 @@ export default function ConfigurationPage() {
     }
 
     try {
-      await addNotification({
+      addNotification({
         type: "configuration",
         status: "pending",
         instanceName: instance.name,
@@ -96,22 +95,7 @@ export default function ConfigurationPage() {
       className="max-w-4xl mx-auto p-6 bg-card text-pagetext1 rounded-sm shadow-md mt-8"
       ref={configSectionRef}
     >
-      <h1 className="font-heading1 text-headertext1 text-2xl mb-10">
-        Configuration
-      </h1>
-      <p className="font-text1 text-sm text-pagetext1 mb-6">
-        Below are the RabbitMQ server configurations. For detailed explanations
-        of each setting, refer to the{" "}
-        <a
-          href="https://www.rabbitmq.com/docs/configure"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="underline text-pagetext1 hover:text-headertext1"
-        >
-          RabbitMQ Configuration Guide
-        </a>
-        .
-      </p>
+      <ConfigurationDescription />
 
       {errors.length > 0 && (
         <div className="mb-6 space-y-2">
@@ -125,94 +109,14 @@ export default function ConfigurationPage() {
         </div>
       )}
 
-      <form onSubmit={handleSubmit}>
-        <table className="w-full border-collapse">
-          <thead className="font-heading1 text-headertext1 text-sm">
-            <tr>
-              <th className="p-2 text-left border-b">Setting</th>
-              <th className="p-2 text-left border-b">Description</th>
-              <th className="p-2 text-left border-b">Value</th>
-            </tr>
-          </thead>
-          <tbody
-            className={`font-text1 text-sm ${isLoading ? "" : "animate-fade-in"
-              }`}
-          >
-            {configItems.map((item) => (
-              <tr key={item.key} className="p-2">
-                <td className="p-2 border-b">
-                  {isLoading ? (
-                    <div className="w-32 h-4 bg-gray-600 rounded-sm animate-pulse"></div>
-                  ) : (
-                    item.key
-                  )}
-                </td>
-                <td className="p-2 border-b">
-                  {isLoading ? (
-                    <div className="w-48 h-4 bg-gray-600 rounded-sm animate-pulse"></div>
-                  ) : (
-                    item.description
-                  )}
-                </td>
-                <td className="p-2 border-b w-1/6 text-center">
-                  {isLoading ? (
-                    <div className="w-24 h-4 bg-gray-600 rounded-sm animate-pulse"></div>
-                  ) : item.type === "dropdown" && item.options ? (
-                    <select
-                      name={item.key}
-                      value={configuration[item.key] ?? ""}
-                      onChange={handleChange}
-                      className="w-full p-1 border rounded-sm text-sm"
-                    >
-                      {item.options.map((option) => (
-                        <option key={option} value={option}>
-                          {option}
-                        </option>
-                      ))}
-                    </select>
-                  ) : (
-                    <input
-                      type={item.type}
-                      name={item.key}
-                      aria-label={item.key}
-                      readOnly={item.readOnly}
-                      value={configuration[item.key] ?? ""}
-                      onChange={handleChange}
-                      className="text-sm w-full py-1 pl-2 pr-1 border rounded-md"
-                    />
-                  )}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-
-        <div className="font-heading1 text-sm flex justify-end gap-4 mt-6">
-          <Link
-            href="/"
-            className="px-4 py-2 bg-card border-1 border-btn1 text-btn1 rounded-sm text-center hover:shadow-[0_0_8px_#87d9da] transition-all duration-200 hover:bg-card"
-          >
-            Cancel
-          </Link>
-          <button
-            type="submit"
-            disabled={formPending()}
-            className={`px-4 py-2 text-mainbg1 font-semibold rounded-sm ${formPending()
-              ? "bg-btnhover1 opacity-70 cursor-not-allowed"
-              : "bg-btn1 hover:bg-btnhover1 flex items-center justify-center hover:shadow-[0_0_10px_#87d9da] transition-all duration-200"
-              }`}
-          >
-            {formPending() ? (
-              <span className="flex items-center gap-2">
-                <SubmissionSpinner />
-                Saving ...
-              </span>
-            ) : (
-              "Save"
-            )}
-          </button>
-        </div>
-      </form>
+      <ComponentsForm
+        configuration={configuration}
+        isLoading={isLoading}
+        onChange={handleChange}
+        onSubmit={handleSubmit}
+        disabled={errors.length > 0 || formPending()}
+        pending={formPending()}
+      />
     </div>
   );
 }
diff --git a/src/app/instances/[name]/configuration/types/configuration.ts b/src/app/instances/[name]/configuration/types/configuration.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/types/configuration.ts b/src/types/configuration.ts
index 7dc8a07..0a00ea1 100644
--- a/src/types/configuration.ts
+++ b/src/types/configuration.ts
@@ -1,4 +1,4 @@
-interface ConfigItem {
+export interface ConfigItem {
   key: string;
   description: string;
   type: "text" | "number" | "dropdown";

From aeaab6fac33168a8751f18866513d496af8643c0 Mon Sep 17 00:00:00 2001
From: Jacqueline Amherst <jacqueline.amherst@icloud.com>
Date: Fri, 18 Apr 2025 16:34:48 -0500
Subject: [PATCH 15/26] extract components from firewalls page

---
 .../components/FirewallDescription.tsx        |  33 ++++
 .../components/FirewallRuleCommonPorts.tsx    |  47 +++++
 .../components/FirewallRuleCustomPorts.tsx    |  45 +++++
 .../components/FirewallRuleDescription.tsx    |  29 +++
 .../components/FirewallRuleSourceIp.tsx       |  32 ++++
 .../firewall/components/LoadingSkeleton.tsx   |  19 ++
 src/app/instances/[name]/firewall/page.tsx    | 177 ++++--------------
 7 files changed, 243 insertions(+), 139 deletions(-)
 create mode 100644 src/app/instances/[name]/firewall/components/FirewallDescription.tsx
 create mode 100644 src/app/instances/[name]/firewall/components/FirewallRuleCommonPorts.tsx
 create mode 100644 src/app/instances/[name]/firewall/components/FirewallRuleCustomPorts.tsx
 create mode 100644 src/app/instances/[name]/firewall/components/FirewallRuleDescription.tsx
 create mode 100644 src/app/instances/[name]/firewall/components/FirewallRuleSourceIp.tsx
 create mode 100644 src/app/instances/[name]/firewall/components/LoadingSkeleton.tsx

diff --git a/src/app/instances/[name]/firewall/components/FirewallDescription.tsx b/src/app/instances/[name]/firewall/components/FirewallDescription.tsx
new file mode 100644
index 0000000..dbb4ee3
--- /dev/null
+++ b/src/app/instances/[name]/firewall/components/FirewallDescription.tsx
@@ -0,0 +1,33 @@
+export default function FirewallDescription() {
+  return (
+    <>
+      <h1 className="font-heading1 text-headertext1 text-2xl mb-10">
+        Firewall Settings
+      </h1>
+      <p className="font-text1 text-sm text-pagetext1 mb-6">
+        Configuring firewall rules allows you to manage access to both your AWS
+        EC2 instance and the RabbitMQ server. Adjusting these settings updates
+        AWS security groups and configures the necessary plugins and ports on
+        the RabbitMQ server.
+      </p>
+      <p className="font-text1 text-sm text-pagetext1 mb-6">
+        The Common Ports section offers a list of protocols that can be enabled
+        with a click, while the Custom Ports section allows specifying
+        additional ports as a comma-separated list. Please note that only IPv4
+        is supported for the Source IP at this time.
+      </p>
+      <p className="font-text1 text-sm text-pagetext1 mb-6">
+        For more details on supported protocols, refer to the{" "}
+        <a
+          href="https://www.rabbitmq.com/docs/protocols"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="underline text-pagetext1 hover:text-headertext1"
+        >
+          RabbitMQ Supported Protocols
+        </a>
+        .
+      </p>
+    </>
+  )
+}
diff --git a/src/app/instances/[name]/firewall/components/FirewallRuleCommonPorts.tsx b/src/app/instances/[name]/firewall/components/FirewallRuleCommonPorts.tsx
new file mode 100644
index 0000000..aff211c
--- /dev/null
+++ b/src/app/instances/[name]/firewall/components/FirewallRuleCommonPorts.tsx
@@ -0,0 +1,47 @@
+import { COMMON_PORTS } from "@/utils/firewallConstants";
+import { Info } from "lucide-react";
+import { FirewallRule } from "@/types/firewall";
+
+interface Props {
+  rule: FirewallRule;
+  index: number;
+  onChange: (index: number, port: string) => void;
+}
+
+export default function FirewallRuleCommonPorts({
+  rule,
+  index,
+  onChange,
+}: Props) {
+  return (
+    <div className="col-span-4">
+      <label className="text-xs text-headertext1 mb-1 flex items-center">
+        Common Ports
+      </label>
+      <div className="flex flex-wrap gap-2">
+        {COMMON_PORTS.map(({ name, port, desc }) => (
+          <div
+            key={name}
+            className="flex items-center space-x-2 relative group"
+          >
+            <input
+              type="checkbox"
+              checked={rule.commonPorts.includes(name)}
+              onChange={() => onChange(index, name)}
+              className="font-text1 bg-checkmark h-3 w-3"
+            />
+            <span className="text-xs">{name}</span>
+
+            {/* Tooltip Icon */}
+            <Info className="h-4 w-4 text-gray-500 cursor-pointer group-hover:text-gray-700" />
+
+            {/* Tooltip Box */}
+            <div className="absolute left-0 bottom-full mb-2 hidden w-64 p-2 bg-navbar1 text-headertext1 text-xs rounded-md shadow-md group-hover:block">
+              <strong>Port {port}:</strong> {desc}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/instances/[name]/firewall/components/FirewallRuleCustomPorts.tsx b/src/app/instances/[name]/firewall/components/FirewallRuleCustomPorts.tsx
new file mode 100644
index 0000000..f229c33
--- /dev/null
+++ b/src/app/instances/[name]/firewall/components/FirewallRuleCustomPorts.tsx
@@ -0,0 +1,45 @@
+import { FirewallRule } from "@/types/firewall";
+import { Trash2 } from "lucide-react";
+
+interface Props {
+  rule: FirewallRule;
+  index: number;
+  onChange: (index: number, value: string) => void;
+  removeRule: (index: number) => void;
+}
+
+export default function FirewallRuleCustomPortds({
+  rule,
+  index,
+  onChange,
+  removeRule,
+}: Props) {
+  return (
+    <div className="col-span-3">
+      <label className="block text-xs text-headertext1 mb-1">
+        Custom Ports
+      </label>
+      <div className="flex items-center">
+        <input
+          type="text"
+          placeholder="5671, 8080"
+          value={rule.customPorts}
+          onChange={(e) =>
+            onChange(index, e.target.value)
+          }
+          className="font-text1 flex-grow h-9 text-xs p-2 border rounded"
+        />
+
+        {/* Drop Button */}
+        <div className="pl-2">
+          <button
+            onClick={() => removeRule(index)}
+            className="font-heading1 text-pagetext1 text-xs h-9 px-2 rounded hover:text-btnhover1 cursor-pointer"
+          >
+            <Trash2 size={18} />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/instances/[name]/firewall/components/FirewallRuleDescription.tsx b/src/app/instances/[name]/firewall/components/FirewallRuleDescription.tsx
new file mode 100644
index 0000000..90e6b5e
--- /dev/null
+++ b/src/app/instances/[name]/firewall/components/FirewallRuleDescription.tsx
@@ -0,0 +1,29 @@
+import { FirewallRule } from "@/types/firewall";
+
+interface Props {
+  rule: FirewallRule;
+  index: number;
+  onChange: (index: number, value: string) => void;
+}
+
+export default function FirewallRuleDescription({
+  rule,
+  index,
+  onChange,
+}: Props) {
+  return (
+    <div className="col-span-2">
+      <label className="block text-xs text-headertext1 mb-1">
+        Description
+      </label>
+      <input
+        type="text"
+        value={rule.description}
+        onChange={(e) =>
+          onChange(index, e.target.value)
+        }
+        className="font-text1 w-full h-9 text-xs p-2 border rounded"
+      />
+    </div>
+  )
+}
diff --git a/src/app/instances/[name]/firewall/components/FirewallRuleSourceIp.tsx b/src/app/instances/[name]/firewall/components/FirewallRuleSourceIp.tsx
new file mode 100644
index 0000000..d94282b
--- /dev/null
+++ b/src/app/instances/[name]/firewall/components/FirewallRuleSourceIp.tsx
@@ -0,0 +1,32 @@
+import { FirewallRule } from "@/types/firewall";
+interface Props {
+  rule: FirewallRule;
+  index: number;
+  onChange: (index: number, value: string) => void;
+  onBlur: (value: string) => void;
+}
+
+export default function SourceIp({
+  rule,
+  index,
+  onChange,
+  onBlur,
+}: Props) {
+  return (
+    <div className="col-span-2">
+      <label className="block text-xs text-headertext1 mb-1">
+        Source IP
+      </label>
+      <input
+        type="text"
+        placeholder="0.0.0.0/0"
+        value={rule.sourceIp}
+        onChange={(e) =>
+          onChange(index, e.target.value)
+        }
+        onBlur={() => onBlur(rule.sourceIp)}
+        className="font-text1 w-full h-9 text-xs p-2 border rounded"
+      />
+    </div>
+  )
+}
diff --git a/src/app/instances/[name]/firewall/components/LoadingSkeleton.tsx b/src/app/instances/[name]/firewall/components/LoadingSkeleton.tsx
new file mode 100644
index 0000000..919bcaa
--- /dev/null
+++ b/src/app/instances/[name]/firewall/components/LoadingSkeleton.tsx
@@ -0,0 +1,19 @@
+export default function LoadingSkeleton() {
+  return (
+    <div className="space-y-4">
+      {[...Array(3)].map((_, index) => (
+        <div
+          key={index}
+          className="animate-pulse py-2 px-3 border-[0.5] border-gray-700 rounded-md"
+        >
+          <div className="font-text1 grid grid-cols-12 gap-4 items-start">
+            <div className="col-span-2 bg-gray-600 h-6 rounded-sm" />
+            <div className="col-span-2 bg-gray-600 h-6 rounded-sm" />
+            <div className="col-span-4 bg-gray-600 h-6 rounded-sm" />
+            <div className="col-span-3 bg-gray-600 h-6 rounded-sm" />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/src/app/instances/[name]/firewall/page.tsx b/src/app/instances/[name]/firewall/page.tsx
index a4f28fa..1bc4069 100644
--- a/src/app/instances/[name]/firewall/page.tsx
+++ b/src/app/instances/[name]/firewall/page.tsx
@@ -12,8 +12,12 @@ import {
   isInRangeCustomPort,
 } from "@/utils/firewallValidation";
 import { COMMON_PORTS } from "@/utils/firewallConstants";
-import { Info } from "lucide-react";
-import { Trash2 } from "lucide-react";
+import FirewallDescription from "./components/FirewallDescription";
+import LoadingSkeleton from "./components/LoadingSkeleton";
+import FirewallRuleDescription from "./components/FirewallRuleDescription";
+import FirewallRuleSourceIp from "./components/FirewallRuleSourceIp";
+import FirewallRuleCommonPorts from "./components/FirewallRuleCommonPorts";
+import FirewallRuleCustomPort from "./components/FirewallRuleCustomPorts";
 
 import { useNotificationsContext } from "@/app/NotificationContext";
 import SubmissionSpinner from "../../components/SubmissionSpinner";
@@ -279,33 +283,7 @@ export default function FirewallPage() {
       className="max-w-4xl mx-auto p-6 bg-card rounded-md shadow-md mt-8 text-pagetext1"
       ref={configSectionRef}
     >
-      <h1 className="font-heading1 text-headertext1 text-2xl mb-10">
-        Firewall Settings
-      </h1>
-      <p className="font-text1 text-sm text-pagetext1 mb-6">
-        Configuring firewall rules allows you to manage access to both your AWS
-        EC2 instance and the RabbitMQ server. Adjusting these settings updates
-        AWS security groups and configures the necessary plugins and ports on
-        the RabbitMQ server.
-      </p>
-      <p className="font-text1 text-sm text-pagetext1 mb-6">
-        The Common Ports section offers a list of protocols that can be enabled
-        with a click, while the Custom Ports section allows specifying
-        additional ports as a comma-separated list. Please note that only IPv4
-        is supported for the Source IP at this time.
-      </p>
-      <p className="font-text1 text-sm text-pagetext1 mb-6">
-        For more details on supported protocols, refer to the{" "}
-        <a
-          href="https://www.rabbitmq.com/docs/protocols"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="underline text-pagetext1 hover:text-headertext1"
-        >
-          RabbitMQ Supported Protocols
-        </a>
-        .
-      </p>
+      <FirewallDescription />
 
       {errors.length > 0 && (
         <div className="mb-6 space-y-2">
@@ -322,21 +300,7 @@ export default function FirewallPage() {
       <form onSubmit={(e) => e.preventDefault()}>
         <div className="space-y-4">
           {isLoading ? (
-            <div className="space-y-4">
-              {[...Array(3)].map((_, index) => (
-                <div
-                  key={index}
-                  className="animate-pulse py-2 px-3 border-[0.5] border-gray-700 rounded-md"
-                >
-                  <div className="font-text1 grid grid-cols-12 gap-4 items-start">
-                    <div className="col-span-2 bg-gray-600 h-6 rounded-sm" />
-                    <div className="col-span-2 bg-gray-600 h-6 rounded-sm" />
-                    <div className="col-span-4 bg-gray-600 h-6 rounded-sm" />
-                    <div className="col-span-3 bg-gray-600 h-6 rounded-sm" />
-                  </div>
-                </div>
-              ))}
-            </div>
+            <LoadingSkeleton />
           ) : (
             rules.map((rule, index) => (
               <div
@@ -344,96 +308,31 @@ export default function FirewallPage() {
                 className="py-2 px-3 border-[0.5] border-gray-700 rounded-md"
               >
                 <div className="font-text1 grid grid-cols-12 gap-4 items-start">
-                  {/* Description */}
-                  <div className="col-span-2">
-                    <label className="block text-xs text-headertext1 mb-1">
-                      Description
-                    </label>
-                    <input
-                      type="text"
-                      value={rule.description}
-                      onChange={(e) =>
-                        handleDescriptionChange(index, e.target.value)
-                      }
-                      className="font-text1 w-full h-9 text-xs p-2 border rounded"
-                    />
-                  </div>
-
-                  {/* Source IP */}
-                  <div className="col-span-2">
-                    <label className="block text-xs text-headertext1 mb-1">
-                      Source IP
-                    </label>
-                    <input
-                      type="text"
-                      placeholder="0.0.0.0/0"
-                      value={rule.sourceIp}
-                      onChange={(e) =>
-                        handleSourceIpChange(index, e.target.value)
-                      }
-                      onBlur={() => handleSourceIpBlur(rule.sourceIp)}
-                      className="font-text1 w-full h-9 text-xs p-2 border rounded"
-                    />
-                  </div>
-
-                  {/* Common Ports */}
-                  <div className="col-span-4">
-                    <label className="text-xs text-headertext1 mb-1 flex items-center">
-                      Common Ports
-                    </label>
-                    <div className="flex flex-wrap gap-2">
-                      {COMMON_PORTS.map(({ name, port, desc }) => (
-                        <div
-                          key={name}
-                          className="flex items-center space-x-2 relative group"
-                        >
-                          <input
-                            type="checkbox"
-                            checked={rule.commonPorts.includes(name)}
-                            onChange={() => handlePortToggle(index, name)}
-                            className="font-text1 bg-checkmark h-3 w-3"
-                          />
-                          <span className="text-xs">{name}</span>
-
-                          {/* Tooltip Icon */}
-                          <Info className="h-4 w-4 text-gray-500 cursor-pointer group-hover:text-gray-700" />
-
-                          {/* Tooltip Box */}
-                          <div className="absolute left-0 bottom-full mb-2 hidden w-64 p-2 bg-navbar1 text-headertext1 text-xs rounded-md shadow-md group-hover:block">
-                            <strong>Port {port}:</strong> {desc}
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-
-                  {/* Custom Ports */}
-                  <div className="col-span-3">
-                    <label className="block text-xs text-headertext1 mb-1">
-                      Custom Ports
-                    </label>
-                    <div className="flex items-center">
-                      <input
-                        type="text"
-                        placeholder="5671, 8080"
-                        value={rule.customPorts}
-                        onChange={(e) =>
-                          handleCustomPortsChange(index, e.target.value)
-                        }
-                        className="font-text1 flex-grow h-9 text-xs p-2 border rounded"
-                      />
-
-                      {/* Drop Button */}
-                      <div className="pl-2">
-                        <button
-                          onClick={() => removeRule(index)}
-                          className="font-heading1 text-pagetext1 text-xs h-9 px-2 rounded hover:text-btnhover1 cursor-pointer"
-                        >
-                          <Trash2 size={18} />
-                        </button>
-                      </div>
-                    </div>
-                  </div>
+                  <FirewallRuleDescription
+                    rule={rule}
+                    index={index}
+                    onChange={handleDescriptionChange}
+                  />
+
+                  <FirewallRuleSourceIp
+                    rule={rule}
+                    index={index}
+                    onChange={handleSourceIpChange}
+                    onBlur={handleSourceIpBlur}
+                  />
+
+                  <FirewallRuleCommonPorts
+                    rule={rule}
+                    index={index}
+                    onChange={handlePortToggle}
+                  />
+
+                  <FirewallRuleCustomPort
+                    rule={rule}
+                    index={index}
+                    onChange={handleCustomPortsChange}
+                    removeRule={removeRule}
+                  />
                 </div>
               </div>
             ))
@@ -470,10 +369,10 @@ export default function FirewallPage() {
               ) : (
                 "Save"
               )}
-            </button >
-          </div >
-        </div >
-      </form >
-    </div >
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
   );
 }

From 464dda2bb66c01f8bb0810662708fac45fddf190 Mon Sep 17 00:00:00 2001
From: Jacqueline Amherst <jacqueline.amherst@icloud.com>
Date: Fri, 18 Apr 2025 17:09:50 -0500
Subject: [PATCH 16/26] extract components from logs page

---
 .../{ => components}/InstanceTypePage.tsx     |  4 +-
 .../hardware/{ => components}/StoragePage.tsx |  6 +-
 src/app/instances/[name]/hardware/page.tsx    |  4 +-
 .../[name]/hardware/storageSize.test.tsx      |  2 +-
 .../logs/components/CopyableLogSection.tsx    | 51 ++++++++++++++++
 .../logs/components/LoadingSkeleton.tsx       |  9 +++
 .../logs/components/LogsDescription.tsx       | 14 +++++
 src/app/instances/[name]/logs/page.tsx        | 60 ++++---------------
 8 files changed, 94 insertions(+), 56 deletions(-)
 rename src/app/instances/[name]/hardware/{ => components}/InstanceTypePage.tsx (98%)
 rename src/app/instances/[name]/hardware/{ => components}/StoragePage.tsx (96%)
 create mode 100644 src/app/instances/[name]/logs/components/CopyableLogSection.tsx
 create mode 100644 src/app/instances/[name]/logs/components/LoadingSkeleton.tsx
 create mode 100644 src/app/instances/[name]/logs/components/LogsDescription.tsx

diff --git a/src/app/instances/[name]/hardware/InstanceTypePage.tsx b/src/app/instances/[name]/hardware/components/InstanceTypePage.tsx
similarity index 98%
rename from src/app/instances/[name]/hardware/InstanceTypePage.tsx
rename to src/app/instances/[name]/hardware/components/InstanceTypePage.tsx
index 4b0882e..478f882 100644
--- a/src/app/instances/[name]/hardware/InstanceTypePage.tsx
+++ b/src/app/instances/[name]/hardware/components/InstanceTypePage.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { useInstanceContext } from "../InstanceContext";
+import { useInstanceContext } from "../../InstanceContext";
 import { useEffect, useState } from "react";
 import axios from "axios";
 import ErrorBanner from "@/app/instances/components/ErrorBanner";
-import SubmissionSpinner from "../../components/SubmissionSpinner";
+import SubmissionSpinner from "../../../components/SubmissionSpinner";
 
 type InstanceTypes = Record<string, string[]>;
 
diff --git a/src/app/instances/[name]/hardware/StoragePage.tsx b/src/app/instances/[name]/hardware/components/StoragePage.tsx
similarity index 96%
rename from src/app/instances/[name]/hardware/StoragePage.tsx
rename to src/app/instances/[name]/hardware/components/StoragePage.tsx
index 64a1a84..36a2349 100644
--- a/src/app/instances/[name]/hardware/StoragePage.tsx
+++ b/src/app/instances/[name]/hardware/components/StoragePage.tsx
@@ -3,14 +3,14 @@
 import { useEffect, useState } from "react";
 
 import { useNotificationsContext } from "@/app/NotificationContext";
-import { useInstanceContext } from "../InstanceContext";
+import { useInstanceContext } from "../../InstanceContext";
 
 import axios from "axios";
 import { useRouter } from "next/navigation";
 import React from "react";
-import { StorageDetails } from "../../components/StorageDetails";
+import { StorageDetails } from "../../../components/StorageDetails";
 import ErrorBanner from "@/app/instances/components/ErrorBanner";
-import SubmissionSpinner from "../../components/SubmissionSpinner";
+import SubmissionSpinner from "../../../components/SubmissionSpinner";
 
 export function StoragePage() {
   const router = useRouter();
diff --git a/src/app/instances/[name]/hardware/page.tsx b/src/app/instances/[name]/hardware/page.tsx
index 8fd227c..0b627ee 100644
--- a/src/app/instances/[name]/hardware/page.tsx
+++ b/src/app/instances/[name]/hardware/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { StoragePage } from "./StoragePage";
-import { InstanceTypePage } from "./InstanceTypePage";
+import { StoragePage } from "./components/StoragePage";
+import { InstanceTypePage } from "./components/InstanceTypePage";
 
 export default function HardwarePage() {
   return (
diff --git a/src/app/instances/[name]/hardware/storageSize.test.tsx b/src/app/instances/[name]/hardware/storageSize.test.tsx
index ed9343d..2b41788 100644
--- a/src/app/instances/[name]/hardware/storageSize.test.tsx
+++ b/src/app/instances/[name]/hardware/storageSize.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen, waitFor } from "@testing-library/react";
 import { Suspense } from "react";
-import { StoragePage } from "./StoragePage";
+import { StoragePage } from "./components/StoragePage";
 import { NotificationsContext } from "@/app/NotificationContext";
 
 import axios from "axios";
diff --git a/src/app/instances/[name]/logs/components/CopyableLogSection.tsx b/src/app/instances/[name]/logs/components/CopyableLogSection.tsx
new file mode 100644
index 0000000..4f60019
--- /dev/null
+++ b/src/app/instances/[name]/logs/components/CopyableLogSection.tsx
@@ -0,0 +1,51 @@
+import { Copy } from "lucide-react";
+
+interface Props {
+  logs: string;
+  copied: boolean;
+  onCopy: () => void;
+  scrollContainerRef: React.RefObject<HTMLDivElement | null>;
+}
+
+export default function CopyableLogSection({
+  logs,
+  copied,
+  onCopy,
+  scrollContainerRef,
+}: Props) {
+  const secureWindow = () => {
+    return (
+      window !== undefined &&
+      (new RegExp(/^https/).test(window.location.href) ||
+        new RegExp(/^http:\/\/localhost/).test(window.location.href))
+    );
+  };
+
+  return (
+    <div className="relative">
+      {secureWindow() && (
+        <button
+          onClick={onCopy}
+          className="font-heading1 absolute top-2 right-2 p-2 text-xs bg-mainbg1 text-btn1 rounded-sm text-center hover:text-checkmark transition-all duration-200"
+        >
+          <Copy size={18} />
+        </button>
+      )}
+
+      {copied && (
+        <div className="absolute top-8 right-2 text-xs bg-gray-800 text-white p-1 rounded-md">
+          Copied logs to clipboard
+        </div>
+      )}
+
+      <div
+        ref={scrollContainerRef}
+        className="overflow-auto max-h-[400px] scrollbar-thin scrollbar-thumb-btn1 scrollbar-track-gray-100"
+      >
+        <pre className="bg-mainbg1 p-4 rounded-lg whitespace-pre-wrap font-text1 text-gray-300 text-sm">
+          {logs}
+        </pre>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/instances/[name]/logs/components/LoadingSkeleton.tsx b/src/app/instances/[name]/logs/components/LoadingSkeleton.tsx
new file mode 100644
index 0000000..e4fda55
--- /dev/null
+++ b/src/app/instances/[name]/logs/components/LoadingSkeleton.tsx
@@ -0,0 +1,9 @@
+export default function LoadingSkeleton() {
+  return (
+    <div className="animate-pulse space-y-2">
+      {Array.from({ length: 20 }).map((_, index) => (
+        <div key={index} className="bg-gray-600 h-4 rounded w-7/8"></div>
+      ))}
+    </div>
+  )
+}
diff --git a/src/app/instances/[name]/logs/components/LogsDescription.tsx b/src/app/instances/[name]/logs/components/LogsDescription.tsx
new file mode 100644
index 0000000..a7bdb4c
--- /dev/null
+++ b/src/app/instances/[name]/logs/components/LogsDescription.tsx
@@ -0,0 +1,14 @@
+export default function LogsDescription() {
+  return (
+    <>
+      <h1 className="font-heading1 text-headertext1 text-2xl mb-10">
+        RabbitMQ Logs
+      </h1>
+      <p className="font-text1 text-sm text-pagetext1 mb-6">
+        The following logs are fetched from the RabbitMQ server on your running
+        instance. They are displayed here for convenient debugging. You can also
+        copy your logs as needed.
+      </p>
+    </>
+  )
+}
diff --git a/src/app/instances/[name]/logs/page.tsx b/src/app/instances/[name]/logs/page.tsx
index 2d7a3c1..9fa0716 100644
--- a/src/app/instances/[name]/logs/page.tsx
+++ b/src/app/instances/[name]/logs/page.tsx
@@ -3,7 +3,9 @@
 import { useEffect, useState, useRef } from "react";
 import { useInstanceContext } from "../InstanceContext";
 import axios from "axios";
-import { Copy } from "lucide-react";
+import LogsDescription from "./components/LogsDescription";
+import LoadingSkeleton from "./components/LoadingSkeleton";
+import CopyableLogSection from "./components/CopyableLogSection";
 
 export default function LogsPage() {
   const { instance } = useInstanceContext();
@@ -11,7 +13,7 @@ export default function LogsPage() {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [copied, setCopied] = useState(false);
-  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const fetchLogs = async () => {
@@ -45,14 +47,6 @@ export default function LogsPage() {
     }
   }, [logs]);
 
-  const secureWindow = () => {
-    return (
-      window !== undefined &&
-      (new RegExp(/^https/).test(window.location.href) ||
-        new RegExp(/^http:\/\/localhost/).test(window.location.href))
-    );
-  };
-
   const handleCopy = () => {
     navigator.clipboard.writeText(logs);
     setCopied(true);
@@ -61,49 +55,19 @@ export default function LogsPage() {
 
   return (
     <div className="max-w-full mx-auto p-6 bg-card rounded-sm shadow-md mt-8 text-pagetext1">
-      <h1 className="font-heading1 text-headertext1 text-2xl mb-10">
-        RabbitMQ Logs
-      </h1>
-      <p className="font-text1 text-sm text-pagetext1 mb-6">
-        The following logs are fetched from the RabbitMQ server on your running
-        instance. They are displayed here for convenient debugging. You can also
-        copy your logs as needed.
-      </p>
+      <LogsDescription />
 
       {isLoading ? (
-        <div className="animate-pulse space-y-2">
-          {Array.from({ length: 20 }).map((_, index) => (
-            <div key={index} className="bg-gray-600 h-4 rounded w-7/8"></div>
-          ))}
-        </div>
+        <LoadingSkeleton />
       ) : error ? (
         <p className="text-red-600">{error}</p>
       ) : (
-        <div className="relative">
-          {secureWindow() && (
-            <button
-              onClick={handleCopy}
-              className="font-heading1 absolute top-2 right-2 p-2 text-xs bg-mainbg1 text-btn1 rounded-sm text-center hover:text-checkmark transition-all duration-200"
-            >
-              <Copy size={18} />
-            </button>
-          )}
-
-          {copied && (
-            <div className="absolute top-8 right-2 text-xs bg-gray-800 text-white p-1 rounded-md">
-              Copied logs to clipboard
-            </div>
-          )}
-
-          <div
-            ref={scrollContainerRef}
-            className="overflow-auto max-h-[400px] scrollbar-thin scrollbar-thumb-btn1 scrollbar-track-gray-100"
-          >
-            <pre className="bg-mainbg1 p-4 rounded-lg whitespace-pre-wrap font-text1 text-gray-300 text-sm">
-              {logs}
-            </pre>
-          </div>
-        </div>
+        <CopyableLogSection
+          logs={logs}
+          copied={copied}
+          onCopy={handleCopy}
+          scrollContainerRef={scrollContainerRef}
+        />
       )}
     </div>
   );

From 9cc53c93c60878fe41a086b54a8f32211b35bb64 Mon Sep 17 00:00:00 2001
From: Jacqueline Amherst <jacqueline.amherst@icloud.com>
Date: Fri, 18 Apr 2025 17:26:30 -0500
Subject: [PATCH 17/26] extract components from plugins page

---
 .../plugins/components/LoadingSkeleton.tsx    | 20 +++++
 .../[name]/plugins/components/PluginEntry.tsx | 56 ++++++++++++
 .../plugins/components/PluginsDescription.tsx | 22 +++++
 src/app/instances/[name]/plugins/page.tsx     | 85 +++----------------
 4 files changed, 110 insertions(+), 73 deletions(-)
 create mode 100644 src/app/instances/[name]/plugins/components/LoadingSkeleton.tsx
 create mode 100644 src/app/instances/[name]/plugins/components/PluginEntry.tsx
 create mode 100644 src/app/instances/[name]/plugins/components/PluginsDescription.tsx

diff --git a/src/app/instances/[name]/plugins/components/LoadingSkeleton.tsx b/src/app/instances/[name]/plugins/components/LoadingSkeleton.tsx
new file mode 100644
index 0000000..99ad266
--- /dev/null
+++ b/src/app/instances/[name]/plugins/components/LoadingSkeleton.tsx
@@ -0,0 +1,20 @@
+export default function LoadingSkeleton({ length }: { length: number }) {
+  return (
+    <div className="space-y-4">
+      {[...Array(length)].map((_, index) => (
+        <div
+          key={index}
+          className="flex flex-col md:flex-row items-center justify-between border-b border-gray-300 pb-4 animate-pulse"
+        >
+          <div className="mb-2 md:mb-0">
+            <div className="w-32 h-4 bg-gray-600 rounded-sm"></div>
+            <div className="w-48 h-3 bg-gray-60 rounded-sm mt-2"></div>
+          </div>
+          <div className="flex items-center gap-4">
+            <div className="w-8 h-4 bg-gray-600 rounded-full animate-pulse"></div>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/src/app/instances/[name]/plugins/components/PluginEntry.tsx b/src/app/instances/[name]/plugins/components/PluginEntry.tsx
new file mode 100644
index 0000000..e51b850
--- /dev/null
+++ b/src/app/instances/[name]/plugins/components/PluginEntry.tsx
@@ -0,0 +1,56 @@
+import { Plugin } from "@/types/plugins";
+
+interface Props {
+  plugin: Plugin;
+  onSubmit: (e: React.FormEvent<HTMLFormElement>, pluginName: string) => void;
+  isEnabled: boolean;
+  disabled: boolean;
+}
+
+export default function PluginEntry({
+  plugin,
+  onSubmit,
+  isEnabled,
+  disabled,
+}: Props) {
+  return (
+    <form
+      key={plugin.name}
+      onSubmit={(e) => onSubmit(e, plugin.name)}
+      className="flex flex-col md:flex-row items-center justify-between border-b border-gray-300 pb-4"
+    >
+      <div className="mb-2 md:mb-0">
+        <h2
+          className={`font-heading1 text-sm ${isEnabled ? "text-btnhover1" : "text-pagetext1"
+            }`}
+        >
+          {plugin.name}
+        </h2>
+        <p className="font-text1 text-xs text-gray-500">
+          {plugin.description}
+        </p>
+      </div>
+      <div className="flex items-center gap-4">
+        <label className="relative inline-flex items-center cursor-pointer">
+          <input
+            type="checkbox"
+            checked={isEnabled}
+            aria-label={plugin.name}
+            onChange={(e) => e.currentTarget.form?.requestSubmit()}
+            className="sr-only peer"
+            disabled={disabled}
+          />
+          <div
+            className="w-8 h-4 bg-pagetext1/60 rounded-full
+               peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300
+               peer-checked:bg-btnhover1
+               peer-checked:after:translate-x-4 peer-checked:after:border-white
+               after:content-[''] after:absolute after:top-0.5 after:left-[2px]
+               after:bg-white after:border-gray-300 after:border after:rounded-full
+               after:h-3 after:w-3 after:transition-all"
+          ></div>
+        </label>
+      </div>
+    </form>
+  )
+}
diff --git a/src/app/instances/[name]/plugins/components/PluginsDescription.tsx b/src/app/instances/[name]/plugins/components/PluginsDescription.tsx
new file mode 100644
index 0000000..d2c4a79
--- /dev/null
+++ b/src/app/instances/[name]/plugins/components/PluginsDescription.tsx
@@ -0,0 +1,22 @@
+export default function PluginsDescription() {
+  return (
+    <>
+      <h1 className="font-heading1 text-2xl text-headertext1 mb-10">Plugins</h1>
+      <p className="font-text1 text-sm text-pagetext1 mb-6">
+        Below is a list of RabbitMQ plugins that you can enable or disable.
+        Toggling a plugin will immediately update its status on this page and
+        within your RabbitMQ instance. For more detailed information on RabbitMQ
+        plugins and their management, refer to the{" "}
+        <a
+          href="https://www.rabbitmq.com/docs/plugins"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="underline text-pagetext1 hover:text-headertext1"
+        >
+          RabbitMQ Plugins Guide
+        </a>
+        .
+      </p>
+    </>
+  )
+}
diff --git a/src/app/instances/[name]/plugins/page.tsx b/src/app/instances/[name]/plugins/page.tsx
index 382a23c..5719b71 100644
--- a/src/app/instances/[name]/plugins/page.tsx
+++ b/src/app/instances/[name]/plugins/page.tsx
@@ -5,6 +5,9 @@ import { useEffect, useState } from "react";
 import { plugins, Plugin } from "@/types/plugins";
 import { useInstanceContext } from "../InstanceContext";
 import { useNotificationsContext } from "@/app/NotificationContext";
+import PluginsDescription from "./components/PluginsDescription";
+import LoadingSkeleton from "./components/LoadingSkeleton";
+import PluginEntry from "./components/PluginEntry";
 
 export default function PluginsPage() {
   const { instance } = useInstanceContext();
@@ -46,7 +49,7 @@ export default function PluginsPage() {
     const currentlyEnabled = enabledPlugins.includes(pluginName);
     const newValue = !currentlyEnabled;
 
-    await addNotification({
+    addNotification({
       type: "plugin",
       status: "pending",
       instanceName: instance?.name,
@@ -54,8 +57,6 @@ export default function PluginsPage() {
       message: `${newValue ? "Enabling" : "Disabling"} ${pluginName}`,
     });
 
-    //update the state immediately,
-    // we do this so that the toggle button updates immediately.
     setEnabledPlugins((prev) =>
       newValue ? [...prev, pluginName] : prev.filter((p) => p !== pluginName)
     );
@@ -82,84 +83,22 @@ export default function PluginsPage() {
 
   return (
     <div className="max-w-4xl mx-auto p-6 bg-card rounded-sm shadow-md mt-8">
-      <h1 className="font-heading1 text-2xl text-headertext1 mb-10">Plugins</h1>
-      <p className="font-text1 text-sm text-pagetext1 mb-6">
-        Below is a list of RabbitMQ plugins that you can enable or disable.
-        Toggling a plugin will immediately update its status on this page and
-        within your RabbitMQ instance. For more detailed information on RabbitMQ
-        plugins and their management, refer to the{" "}
-        <a
-          href="https://www.rabbitmq.com/docs/plugins"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="underline text-pagetext1 hover:text-headertext1"
-        >
-          RabbitMQ Plugins Guide
-        </a>
-        .
-      </p>
+      <PluginsDescription />
 
       {isLoading ? (
-        <div className="space-y-4">
-          {[...Array(plugins.length)].map((_, index) => (
-            <div
-              key={index}
-              className="flex flex-col md:flex-row items-center justify-between border-b border-gray-300 pb-4 animate-pulse"
-            >
-              <div className="mb-2 md:mb-0">
-                <div className="w-32 h-4 bg-gray-600 rounded-sm"></div>
-                <div className="w-48 h-3 bg-gray-60 rounded-sm mt-2"></div>
-              </div>
-              <div className="flex items-center gap-4">
-                <div className="w-8 h-4 bg-gray-600 rounded-full animate-pulse"></div>
-              </div>
-            </div>
-          ))}
-        </div>
+        <LoadingSkeleton length={plugins.length} />
       ) : (
         <div className="space-y-4">
           {plugins.map((plugin: Plugin) => {
             const isEnabled = enabledPlugins.includes(plugin.name);
             return (
-              <form
+              <PluginEntry
                 key={plugin.name}
-                onSubmit={(e) => handleSubmit(e, plugin.name)}
-                className="flex flex-col md:flex-row items-center justify-between border-b border-gray-300 pb-4"
-              >
-                <div className="mb-2 md:mb-0">
-                  <h2
-                    className={`font-heading1 text-sm ${
-                      isEnabled ? "text-btnhover1" : "text-pagetext1"
-                    }`}
-                  >
-                    {plugin.name}
-                  </h2>
-                  <p className="font-text1 text-xs text-gray-500">
-                    {plugin.description}
-                  </p>
-                </div>
-                <div className="flex items-center gap-4">
-                  <label className="relative inline-flex items-center cursor-pointer">
-                    <input
-                      type="checkbox"
-                      checked={isEnabled}
-                      aria-label={plugin.name}
-                      onChange={(e) => e.currentTarget.form?.requestSubmit()}
-                      className="sr-only peer"
-                      disabled={formPending()}
-                    />
-                    <div
-                      className="w-8 h-4 bg-pagetext1/60 rounded-full
-               peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300
-               peer-checked:bg-btnhover1
-               peer-checked:after:translate-x-4 peer-checked:after:border-white
-               after:content-[''] after:absolute after:top-0.5 after:left-[2px]
-               after:bg-white after:border-gray-300 after:border after:rounded-full
-               after:h-3 after:w-3 after:transition-all"
-                    ></div>
-                  </label>
-                </div>
-              </form>
+                plugin={plugin}
+                onSubmit={handleSubmit}
+                isEnabled={isEnabled}
+                disabled={formPending()}
+              />
             );
           })}
         </div>

From 360fd099091adf4721df9aa8f5f29313915e152c Mon Sep 17 00:00:00 2001
From: Jacqueline Amherst <jacqueline.amherst@icloud.com>
Date: Fri, 18 Apr 2025 17:40:27 -0500
Subject: [PATCH 18/26] extract components from plugins page

---
 .../versions/components/LoadingSkeleton.tsx   | 22 ++++++++++
 .../components/VersionsDescription.tsx        | 23 ++++++++++
 src/app/instances/[name]/versions/page.tsx    | 44 +++----------------
 3 files changed, 51 insertions(+), 38 deletions(-)
 create mode 100644 src/app/instances/[name]/versions/components/LoadingSkeleton.tsx
 create mode 100644 src/app/instances/[name]/versions/components/VersionsDescription.tsx

diff --git a/src/app/instances/[name]/versions/components/LoadingSkeleton.tsx b/src/app/instances/[name]/versions/components/LoadingSkeleton.tsx
new file mode 100644
index 0000000..6ceac41
--- /dev/null
+++ b/src/app/instances/[name]/versions/components/LoadingSkeleton.tsx
@@ -0,0 +1,22 @@
+export default function LoadingSkeleton() {
+  return (
+    <>
+      <tr>
+        <td className="px-4 py-3">
+          <div className="w-full h-6 bg-gray-600 rounded-sm"></div>
+        </td>
+        <td className="px-4 py-3">
+          <div className="w-full h-6 bg-gray-600 rounded-sm"></div>
+        </td>
+      </tr>
+      <tr>
+        <td className="px-4 py-3">
+          <div className="w-full h-6 bg-gray-600 rounded-sm"></div>
+        </td>
+        <td className="px-4 py-3">
+          <div className="w-full h-6 bg-gray-600 rounded-sm"></div>
+        </td>
+      </tr>
+    </>
+  )
+}
diff --git a/src/app/instances/[name]/versions/components/VersionsDescription.tsx b/src/app/instances/[name]/versions/components/VersionsDescription.tsx
new file mode 100644
index 0000000..711f704
--- /dev/null
+++ b/src/app/instances/[name]/versions/components/VersionsDescription.tsx
@@ -0,0 +1,23 @@
+export default function VersionsDescription() {
+  return (
+    <>
+      <h1 className="font-heading1 text-headertext1 text-2xl mb-10">
+        Versions
+      </h1>
+      <p className="text-pagetext1 text-sm mb-6">
+        Currently, this interface does not support upgrading RabbitMQ versions.
+        For detailed instructions on how to manually upgrade RabbitMQ, please
+        refer to the official RabbitMQ upgrade guide:{" "}
+        <a
+          href="https://www.rabbitmq.com/upgrade.html"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="underline hover:text-headertext1"
+        >
+          RabbitMQ Upgrade Guide
+        </a>
+        .
+      </p>
+    </>
+  )
+}
diff --git a/src/app/instances/[name]/versions/page.tsx b/src/app/instances/[name]/versions/page.tsx
index 6e73f6c..00a0f1a 100644
--- a/src/app/instances/[name]/versions/page.tsx
+++ b/src/app/instances/[name]/versions/page.tsx
@@ -3,6 +3,8 @@ import React from "react";
 import axios from "axios";
 import { useEffect, useState } from "react";
 import { useInstanceContext } from "../InstanceContext";
+import VersionsDescription from "./components/VersionsDescription";
+import LoadingSkeleton from "./components/LoadingSkeleton";
 
 interface Version {
   rabbitmq: string;
@@ -44,23 +46,7 @@ export default function VersionsPage() {
 
   return (
     <div className="max-w-4xl mx-auto p-6 bg-card text-pagetext1 rounded-sm shadow-md mt-8">
-      <h1 className="font-heading1 text-headertext1 text-2xl mb-10">
-        Versions
-      </h1>
-      <p className="text-pagetext1 text-sm mb-6">
-        Currently, this interface does not support upgrading RabbitMQ versions.
-        For detailed instructions on how to manually upgrade RabbitMQ, please
-        refer to the official RabbitMQ upgrade guide:{" "}
-        <a
-          href="https://www.rabbitmq.com/upgrade.html"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="underline hover:text-headertext1"
-        >
-          RabbitMQ Upgrade Guide
-        </a>
-        .
-      </p>
+      <VersionsDescription />
       <div className="max-w-md">
         <table className="w-full border-collapse">
           <thead>
@@ -70,29 +56,11 @@ export default function VersionsPage() {
             </tr>
           </thead>
           <tbody
-            className={`text-pagetext1 px-4 py-2 ${
-              isLoading ? "" : "animate-fade-in"
-            }`}
+            className={`text-pagetext1 px-4 py-2 ${isLoading ? "" : "animate-fade-in"
+              }`}
           >
             {isLoading ? (
-              <>
-                <tr>
-                  <td className="px-4 py-3">
-                    <div className="w-full h-6 bg-gray-600 rounded-sm"></div>
-                  </td>
-                  <td className="px-4 py-3">
-                    <div className="w-full h-6 bg-gray-600 rounded-sm"></div>
-                  </td>
-                </tr>
-                <tr>
-                  <td className="px-4 py-3">
-                    <div className="w-full h-6 bg-gray-600 rounded-sm"></div>
-                  </td>
-                  <td className="px-4 py-3">
-                    <div className="w-full h-6 bg-gray-600 rounded-sm"></div>
-                  </td>
-                </tr>
-              </>
+              <LoadingSkeleton />
             ) : versions ? (
               <>
                 <tr className="font-text1 border-t border-gray-300">

From 55d4d7da97956205154e3933df0f63c89b039d94 Mon Sep 17 00:00:00 2001
From: Jacqueline Amherst <jacqueline.amherst@icloud.com>
Date: Fri, 18 Apr 2025 17:51:01 -0500
Subject: [PATCH 19/26] fix alarms route import

---
 src/app/api/instances/[name]/alarms/route.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/api/instances/[name]/alarms/route.ts b/src/app/api/instances/[name]/alarms/route.ts
index 98a4c26..9d910c5 100644
--- a/src/app/api/instances/[name]/alarms/route.ts
+++ b/src/app/api/instances/[name]/alarms/route.ts
@@ -1,7 +1,7 @@
 import { EC2Client } from "@aws-sdk/client-ec2";
 import { NextRequest, NextResponse } from "next/server";
 import { fetchInstance } from "@/utils/AWS/EC2/fetchInstance";
-import { Alarm } from "@/types/alarms";
+import Alarm from "@/app/instances/[name]/alarms/types/alarm";
 import { startMetricsMonitoring } from "@/utils/RabbitMQ/monitorMetrics";
 import { decrypt } from "@/utils/encrypt";
 import { stopMetricsMonitoring } from "@/utils/RabbitMQ/monitorMetrics";

From ee030dc672f938340d03b06c28bc5fe338bb3a83 Mon Sep 17 00:00:00 2001
From: Jacqueline Amherst <jacqueline.amherst@icloud.com>
Date: Fri, 18 Apr 2025 17:56:19 -0500
Subject: [PATCH 20/26] fix another import

---
 src/app/instances/components/DeleteInstanceModal.tsx | 2 +-
 src/app/instances/types/Instance.ts                  | 7 -------
 2 files changed, 1 insertion(+), 8 deletions(-)
 delete mode 100644 src/app/instances/types/Instance.ts

diff --git a/src/app/instances/components/DeleteInstanceModal.tsx b/src/app/instances/components/DeleteInstanceModal.tsx
index 60fda13..e6c04e3 100644
--- a/src/app/instances/components/DeleteInstanceModal.tsx
+++ b/src/app/instances/components/DeleteInstanceModal.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import SubmissionSpinner from "../components/SubmissionSpinner";
-import { Instance } from "../types/instance";
+import { Instance } from "@/types/instance";
 
 interface DeleteInstanceModalProps {
   selectedInstance: Instance;
diff --git a/src/app/instances/types/Instance.ts b/src/app/instances/types/Instance.ts
deleted file mode 100644
index 3fd5e30..0000000
--- a/src/app/instances/types/Instance.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export interface Instance {
-  state: string;
-  name: string;
-  id: string;
-  region: string;
-}
-

From 92bdf27dc42ce2f8d366e84353de370f65925f78 Mon Sep 17 00:00:00 2001
From: Jacqueline Amherst <jacqueline.amherst@icloud.com>
Date: Fri, 18 Apr 2025 22:25:15 -0500
Subject: [PATCH 21/26] and another

---
 src/app/instances/components/InstanceRow.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/instances/components/InstanceRow.tsx b/src/app/instances/components/InstanceRow.tsx
index c7a6cd0..9441a26 100644
--- a/src/app/instances/components/InstanceRow.tsx
+++ b/src/app/instances/components/InstanceRow.tsx
@@ -1,6 +1,6 @@
 import { Trash2 } from "lucide-react";
 import Link from "next/link";
-import { Instance } from "../types/instance";
+import { Instance } from "@/types/instance";
 
 interface InstanceRowProps {
   instance: Instance;

From 78bff5cebc7e672997666450d007003edfea085c Mon Sep 17 00:00:00 2001
From: Jacqueline Amherst <jacqueline.amherst@icloud.com>
Date: Sat, 19 Apr 2025 13:11:16 -0500
Subject: [PATCH 22/26] ...

---
 src/app/instances/components/InstancesTable.tsx | 2 +-
 src/app/instances/page.tsx                      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/instances/components/InstancesTable.tsx b/src/app/instances/components/InstancesTable.tsx
index fd6156f..dc1a8b5 100644
--- a/src/app/instances/components/InstancesTable.tsx
+++ b/src/app/instances/components/InstancesTable.tsx
@@ -1,6 +1,6 @@
 import { StatusLegend } from "@/app/components/statusLegend"
 import InstanceRow from "./InstanceRow"
-import { Instance } from "../types/instance";
+import { Instance } from "@/types/instance";
 
 interface InstancesTableProps {
   isLoading: boolean;
diff --git a/src/app/instances/page.tsx b/src/app/instances/page.tsx
index 790eb0f..114dd00 100644
--- a/src/app/instances/page.tsx
+++ b/src/app/instances/page.tsx
@@ -6,7 +6,7 @@ import { useNotificationsContext } from "../NotificationContext";
 import DeleteInstanceModal from "./components/DeleteInstanceModal";
 import CreateNewInstanceButton from "./components/CreateNewInstanceButton";
 import InstancesTable from "./components/InstancesTable";
-import { Instance } from "./types/instance";
+import { Instance } from "@/types/instance";
 
 export default function Home() {
   const [instances, setInstances] = useState<Instance[]>([]);

From 34a454e0e45ea909e0254b6e9c8e3717a003c320 Mon Sep 17 00:00:00 2001
From: Jacqueline Amherst <jacqueline.amherst@icloud.com>
Date: Sat, 19 Apr 2025 13:38:24 -0500
Subject: [PATCH 23/26] ...

---
 src/types/alarms.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 src/types/alarms.ts

diff --git a/src/types/alarms.ts b/src/types/alarms.ts
new file mode 100644
index 0000000..1194bb8
--- /dev/null
+++ b/src/types/alarms.ts
@@ -0,0 +1,11 @@
+export interface AlarmThresholds {
+  memoryThreshold: number;
+  storageThreshold: number;
+  reminderInterval: number;
+}
+
+export interface Alarm {
+  id: string;
+  data: AlarmThresholds;
+}
+

From 4afa888d675db398cfd3e72ab831eaf0285f2814 Mon Sep 17 00:00:00 2001
From: Jacqueline Amherst <jacqueline.amherst@icloud.com>
Date: Sat, 19 Apr 2025 13:43:56 -0500
Subject: [PATCH 24/26] ...

---
 src/app/api/instances/[name]/alarms/route.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/app/api/instances/[name]/alarms/route.ts b/src/app/api/instances/[name]/alarms/route.ts
index 9d910c5..0b14ce7 100644
--- a/src/app/api/instances/[name]/alarms/route.ts
+++ b/src/app/api/instances/[name]/alarms/route.ts
@@ -2,9 +2,8 @@ import { EC2Client } from "@aws-sdk/client-ec2";
 import { NextRequest, NextResponse } from "next/server";
 import { fetchInstance } from "@/utils/AWS/EC2/fetchInstance";
 import Alarm from "@/app/instances/[name]/alarms/types/alarm";
-import { startMetricsMonitoring } from "@/utils/RabbitMQ/monitorMetrics";
+import { startMetricsMonitoring, stopMetricsMonitoring } from "@/utils/RabbitMQ/monitorMetrics";
 import { decrypt } from "@/utils/encrypt";
-import { stopMetricsMonitoring } from "@/utils/RabbitMQ/monitorMetrics";
 import {
   appendAlarmsSettings,
   deleteAlarmFromDynamoDB,

From 2a0cf0408ff57dfc5701e46f831561700bfe84a1 Mon Sep 17 00:00:00 2001
From: Jacqueline Amherst <jacqueline.amherst@icloud.com>
Date: Mon, 21 Apr 2025 14:44:49 -0500
Subject: [PATCH 25/26] change config button color

---
 .../[name]/configuration/components/ComponentsForm.tsx     | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/app/instances/[name]/configuration/components/ComponentsForm.tsx b/src/app/instances/[name]/configuration/components/ComponentsForm.tsx
index 8cff449..1a47b16 100644
--- a/src/app/instances/[name]/configuration/components/ComponentsForm.tsx
+++ b/src/app/instances/[name]/configuration/components/ComponentsForm.tsx
@@ -56,10 +56,11 @@ export default function ComponentsForm({
         <button
           type="submit"
           disabled={disabled}
-          className={`px-4 py-2 text-mainbg1 font-semibold rounded-sm ${pending}
+          className={`px-4 py-2 ${disabled
             ? "bg-btnhover1 opacity-70 cursor-not-allowed"
-            : "bg-btn1 hover:bg-btnhover1 flex items-center justify-center hover:shadow-[0_0_10px_#87d9da] transition-all duration-200"
-            }`}
+            : "bg-btn1 hover:bg-btnhover1 text-mainbg1 font-semibold rounded-sm flex items-center justify-center hover:shadow-[0_0_10px_#87d9da] transition-all duration-200"
+            }`
+          }
         >
           {disabled ? (
             <span className="flex items-center gap-2">

From 7fa7181f37fef198a7b92eea4ccdf5be1b1e23f6 Mon Sep 17 00:00:00 2001
From: Jacqueline Amherst <jacqueline.amherst@icloud.com>
Date: Mon, 21 Apr 2025 14:59:12 -0500
Subject: [PATCH 26/26] fix lint error

---
 .../instances/[name]/configuration/components/ComponentsForm.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/instances/[name]/configuration/components/ComponentsForm.tsx b/src/app/instances/[name]/configuration/components/ComponentsForm.tsx
index 1a47b16..2e4629c 100644
--- a/src/app/instances/[name]/configuration/components/ComponentsForm.tsx
+++ b/src/app/instances/[name]/configuration/components/ComponentsForm.tsx
@@ -18,7 +18,6 @@ export default function ComponentsForm({
   onChange,
   onSubmit,
   disabled,
-  pending,
 }: Props) {
   return (
     <form onSubmit={onSubmit}>