NotiKube 1.0.0 Launch

.gitignore

@@ -8,6 +8,7 @@
 
 # testing
 /coverage
+cypress.env.json
 
 # next.js
 /.next/
@@ -39,4 +40,5 @@ next-env.d.ts
 package-lock.json
 
 #
-.env
+.env.local
+.env

app/Providers.tsx

@@ -0,0 +1,8 @@
+"use client"
+
+import React from 'react'
+import { SessionProvider } from "next-auth/react"
+
+export function AuthProvider({children}: {children: React.ReactNode}) {
+    return <SessionProvider>{children}</SessionProvider>
+}

app/_components/AddMemberClient.tsx

@@ -0,0 +1,39 @@
+"use client"
+import { FormEvent } from 'react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+
+
+export default function AddMemberClient() {
+
+  const router = useRouter();
+
+  async function addMember(event: FormEvent<HTMLFormElement>) {
+    event?.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    let body:{email?: string} = {}
+
+    body.email = formData.get('email')?.toString();
+
+    const response = await fetch('/api/addMember/send-invite', {
+      method: 'POST',
+      body: JSON.stringify(body),
+    })
+    const res = await response.json();
+    console.log(res);
+    alert(`Invitation sent to ${body.email}`);
+    window.location.reload();
+  }
+
+
+  return (
+    <div className='AddMember'>
+      <h3 className='font-semibold text-sm'>Invite other users to join this cluster:</h3>
+      <form className="space-x-1" onSubmit={addMember}>
+        <input className="h-10 shadow-sm max-w-64 align-middle inline-flex items-center" name='email' type='email' required placeholder='[email protected]' style={{width: 350}} ></input>
+        <button className="text-black bg-slate-200 border-black hover:border-black hover:bg-slate-500 hover:text-white focus:ring-white focus:outline-none font-medium rounded-md text-sm px-5 text-center dark:bg-slate-600 dark:hover:bg-slate-700 dark:focus:ring-slate-800 shadow-lg max-w-18 h-10 align-middle inline-flex items-center" type="submit">Submit</button>
+      </form>
+    </div>
+  )
+}

app/_components/ConnectClusterPage/ConnectClusterModal.tsx

@@ -0,0 +1,156 @@
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import React from 'react';
+
+export default function ConnectClusterModal({
+  isModalVisible,
+  toggleModal,
+}: any) {
+  const router = useRouter();
+  const [clusterName, setClusterName] = useState("");
+  const [clusterIp, setClusterIp] = useState("");
+  const [error, setError] = useState("");
+
+  const resetFields = () => {
+    setClusterName("");
+    setClusterIp("");
+    setError("");
+  };
+
+  // This function takes the passed in form data and sends it to the server
+  async function newCluster(e: React.FormEvent) {
+    e.preventDefault();
+
+    // Prepare the data to be sent
+    const clusterData = {
+      clusterName,
+      clusterIp,
+    };
+
+    // POST REQUEST TO ADD CLUSTER NAME AND CLUSTER IP TO DATABASE
+    try {
+      let res = await fetch("/api/connect-cluster", {
+        method: "POST",
+        body: JSON.stringify(clusterData),
+        headers: { "Content-Type": "application/json" },
+      });
+      const data = await res.json();
+      if (!data.newCluster) {
+        setError(data.error);
+      } else {
+        router.push("/dashboard");
+        toggleModal();
+        resetFields();
+      }
+    } catch (error) {
+      setError("An error occurred while adding your cluster. Please try again");
+      console.error("Error sending data:", error);
+    }
+  }
+
+  const handleClose = () => {
+    toggleModal();
+    resetFields();
+  };
+
+  return (
+    <div className={`modal ${isModalVisible ? "is-active" : ""}`}>
+      <div className="modal-background" onClick={toggleModal}></div>
+      {/* Modal content here */}
+      <div
+        id="defaultModal"
+        tabIndex={-1}
+        aria-hidden="true"
+        className={`${
+          isModalVisible
+            ? "fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+            : "hidden"
+        } overflow-y-auto overflow-x-hidden z-50 w-full max-w-2xl`}
+      >
+        <div className="relative p-4 w-full max-w-2xl h-full md:h-auto">
+          {/* Modal content */}
+          <div className="relative p-4 bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5">
+            {/* Modal header */}
+            <div className="flex justify-between items-center pb-4 mb-4 rounded-t border-b sm:mb-5 dark:border-gray-600">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                Connect a Cluster
+              </h3>
+              <button
+                type="button"
+                className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+                onClick={handleClose}
+              >
+                <svg
+                  aria-hidden="true"
+                  className="w-5 h-5"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                    clipRule="evenodd"
+                  ></path>
+                </svg>
+                <span className="sr-only">Close modal</span>
+              </button>
+            </div>
+            {/* <!-- Modal body --> */}
+            <form onSubmit={newCluster}>
+              <div className="grid gap-4 mb-4 sm:grid-cols-2">
+                {/* Cluster Name Input Field */}
+                <div className="sm:col-span-2">
+                  <label
+                    htmlFor="clusterName"
+                    className="block mb-2 text-sm text-left font-medium text-gray-900 dark:text-white"
+                  >
+                    Cluster Name
+                  </label>
+                  <input
+                    type="text"
+                    id="clusterName"
+                    value={clusterName}
+                    onChange={(e) => setClusterName(e.target.value)}
+                    className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+                    placeholder="required"
+                  />
+                </div>
+                {/* IP Address Input Field */}
+                <div className="sm:col-span-2">
+                  <label
+                    htmlFor="clusterIp"
+                    className="block mb-2 text-sm text-left font-medium text-gray-900 dark:text-white"
+                  >
+                    IP Address
+                  </label>
+                  <input
+                    type="text"
+                    id="clusterIp"
+                    value={clusterIp}
+                    onChange={(e) => setClusterIp(e.target.value)}
+                    className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+                    placeholder="required"
+                  />
+                </div>
+              </div>
+
+              {/* This error populates when the fetch request sends back an error */}
+              {error && (
+                <p className="text-NotikubeRed text-xs pb-4">{error}</p>
+              )}
+
+              {/* Save Button */}
+              <button
+                type="submit"
+                className="text-white inline-flex items-center bg-primary-500 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-500 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
+              >
+                Save
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/_components/ConnectClusterPage/EditCluster.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import { FormEvent } from 'react';
+import React from 'react';
+
+export default function EditCluster (props: {clusterName:string, clusterIp:string, cluster_id?:string, change_cluster: Function, change_edit: Function}) {
+
+
+  async function editCluster(event: FormEvent<HTMLFormElement>) {
+    event?.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    let body:{cluster_name?: string, cluster_ip?: string, cluster_id?:string} = {}
+
+    body.cluster_name = formData.get('cluster_name')?.toString();
+    body.cluster_ip = formData.get('cluster_ip')?.toString();
+    body.cluster_id = props.cluster_id
+
+    if (body !== undefined) {
+      const response = await fetch('/api/updateCluster/edit', {
+      method: 'POST',
+      body: JSON.stringify(body),
+      })
+      let res = await response.json()
+      console.log(res)
+    }
+
+
+  props.change_cluster(body.cluster_name, body.cluster_ip);
+
+  alert('Changes saved')
+
+  props.change_edit();
+
+}
+
+    return (
+
+      <div className="w-screen" >
+        <form onSubmit={editCluster}>
+          <div className="grid grid-cols-2 gap-8 w-4/5 resize">
+            <div className="w-screen">
+              <p className="font-bold pb-2 text-xl mt-5">Cluster Name:</p>
+              <input name="cluster_name" className="border-2 border-red-800 p-2 pl-4 rounded-md w-1/3" defaultValue={props.clusterName} />
+              <br></br>
+              <br></br>
+              <p className="font-bold pb-2 text-xl">Cluster IP:</p>
+              <input name="cluster_ip" className="border-2 border-red-800 p-2 pl-4 rounded-md w-1/3" defaultValue={props.clusterIp} />
+              <br></br>
+              <button className="text-white bg-primary-500 hover:bg-primary-600 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-3 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 w-36 mt-8 shadow-lg" type="submit">Save</button>
+            </div>
+          </div>
+        </form>
+      </div>
+
+    )
+
+}

app/_components/ConnectClusterPage/UserClusters.tsx

@@ -0,0 +1,40 @@
+"use client"
+import React from 'react';
+
+export default function UserClusters(props: { owner?: string; clusterName: string; clusterIp: string; edit: string }) {
+
+  return (
+    <div className="w-full overflow-x-auto shadow-lg sm:rounded-lg">
+      <table className="w-full text-md text-left rtl:text-right text-gray-500 dark:text-gray-400">
+        <thead className="text-md text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+          <tr>
+            <th scope="col" className="px-10 py-3">
+              Cluster Name
+            </th>
+            <th scope="col" className="px-5 py-3">
+              Cluster IP
+            </th>
+            <th scope="col" className="px-10 py-3 text-right">
+              User Permissions
+            </th>
+          </tr>
+        </thead>
+
+        {/* Table Body Rendered with Users Corresponding Clusters */}
+        <tbody>
+          <tr className="text-mdodd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
+            <th
+              scope="row"
+              className="px-10 py-8 font-medium text-gray-900 whitespace-nowrap dark:text-white"
+            >
+              {props.clusterName}
+            </th>
+            <td className="px-5 py-8">{props.clusterIp}</td>
+            <td className="px-10 py-5 text-right font-semibold text-gray-900">{props.owner}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}