+ 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{" "}
+
+ RabbitMQ documentation
+ {" "}
+ for more details.
+
+
+ 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.
+
- 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{" "}
-
- RabbitMQ documentation
- {" "}
- for more details.
-
-
- 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.
-
+ Below are the RabbitMQ server configurations. For detailed explanations
+ of each setting, refer to the{" "}
+
+ RabbitMQ Configuration Guide
+
+ .
+
+
+ )
+}
diff --git a/src/app/instances/[name]/configuration/page.tsx b/src/app/instances/[name]/configuration/page.tsx
index f6cabea..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/components/ErrorBanner";
-import Link from "next/link";
-import SubmissionSpinner from "@/app/components/SubmissionSpinner";
+import ErrorBanner from "@/app/instances/components/ErrorBanner";
+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}
>
-
- Configuration
-
-
- Below are the RabbitMQ server configurations. For detailed explanations
- of each setting, refer to the{" "}
-
- RabbitMQ Configuration Guide
-
- .
-
+
{errors.length > 0 && (
@@ -125,96 +109,14 @@ export default function ConfigurationPage() {
+ 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.
+
+
+ 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.
+
+ )
+}
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 (
+
+ {[...Array(3)].map((_, index) => (
+
+
+
+
+
+
+
+
+ ))}
+
+ )
+}
diff --git a/src/app/instances/[name]/firewall/page.tsx b/src/app/instances/[name]/firewall/page.tsx
index c33c1d7..1bc4069 100644
--- a/src/app/instances/[name]/firewall/page.tsx
+++ b/src/app/instances/[name]/firewall/page.tsx
@@ -5,18 +5,22 @@ 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 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 "@/app/components/SubmissionSpinner";
+import SubmissionSpinner from "../../components/SubmissionSpinner";
export default function FirewallPage() {
const { instance } = useInstanceContext();
@@ -241,7 +245,7 @@ export default function FirewallPage() {
}
try {
- await addNotification({
+ addNotification({
type: "firewall",
status: "pending",
instanceName: instance.name,
@@ -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}
>
-
- Firewall Settings
-
-
- 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.
-
-
- 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.
-