Jimqueline/frontend refactor

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";

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>
+  )
+}

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>
+  )
+}

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>
+  )
+}

src/app/components/NewAlarmModal.tsx → src/app/instances/[name]/alarms/components/NewAlarmModal.tsx

@@ -1,6 +1,6 @@
-import { useInstanceContext } from "../instances/[name]/InstanceContext";
+import { useInstanceContext } from "../../InstanceContext";
 import { useState } from "react";
-import ErrorBanner from "@/app/components/ErrorBanner";
+import ErrorBanner from "@/app/instances/components/ErrorBanner";
 import axios from "axios";
 
 interface Props {

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>
+
+  )
+}

src/app/components/SlackModal.tsx → src/app/instances/[name]/alarms/components/SlackModal.tsx

@@ -1,7 +1,7 @@
-import { useInstanceContext } from "../instances/[name]/InstanceContext";
+import { useInstanceContext } from "../../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;

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>
+  )
+}