copied new version

onix-gui/GUI/README.md

@@ -6,23 +6,28 @@ The GUI for the beckn-onix cli tool.
 
 1. 4 server/instances
 2. 4 sub-domains mapped to each instance
-3. Local Tunnel
-   `npm i -g localtunnel`
 
 ## User Guide
 
-### Step 1: Run the `start.sh` script
+### Step 1: Clone the beckn-onix-gui repo
 
 ```
-cd .. && ./start.sh
+git clone https://github.com/Mishalabdullah/beckn-onix-gui.git
 ```
 
-### Step 2: Accessing the GUI.
+### Step 2: Change directory to the nextjs project
 
-You will be getting a URL and password as on output of the script. Open the url in the browser and then
+```
-paste the password.
+cd onix-gui
+```
 
-### Step 3: Install and setup your network
+### Step 3: Run nextjs on port 3005
+
+For running the installation script just run this command. The sudo privilages are required when installing packages and configuring the nginx reverse proxy
+
+```
+sudo ./start.sh
+```
 
 Note: Port 3000 is being used by onix, so we're using port 3005 instead.
 
@@ -42,15 +47,6 @@ Contributions are welcome! If you'd like to contribute to the beckn-onix-gui pro
 
 The beckn-onix-gui project is licensed under the MIT License. See the LICENSE file for more information.
 
-
 ## Contact
 
 If you have any questions or issues with the beckn-onix-gui project, please don't hesitate to reach out.
-
-### Made with ❤️
-
-built by the [Mulearn Team](https://mulearn.org/)
-1. [Mishal Abdullah](https://github.com/Mishalabdullah/)
-2. [Aswin Asok](https://github.com/AswinAsok)
-3. [Viraj Prabhu ](https://github.com/viraka)
-4. [Adasrsh](https://adarshmohanks.framer.website/)

onix-gui/GUI/app/api/check-layer2/route.js

@@ -2,8 +2,9 @@ import { exec } from "child_process";
 import { NextResponse } from "next/server";
 
 export async function POST(req) {
-  const checked = await req.json();
+  const request = await req.json();
-  const containerName = checked.checked ? "bpp-network" : "bap-network";
+  const containerName = request.checked ? "bpp-network" : "bap-network";
+  const fileToCheck = request.fileName;
 
   const executeShellCommand = (command) => {
     return new Promise((resolve, reject) => {
@@ -13,13 +14,11 @@ export async function POST(req) {
           reject(error);
           return;
         }
-
         if (stderr) {
           console.error("Error:", stderr);
           reject(new Error(stderr));
           return;
         }
-
         const output = stdout;
         console.log("Output:", output);
         resolve(output);
@@ -31,7 +30,6 @@ export async function POST(req) {
     const containerExists = await executeShellCommand(
       `docker ps -a --filter "name=${containerName}" --format "{{.Names}}"`
     );
-
     if (!containerExists.trim()) {
       return new NextResponse(`Error: ${containerName} server not present`, {
         status: 500,
@@ -39,14 +37,30 @@ export async function POST(req) {
     }
 
     const result = await executeShellCommand(
-      `docker exec ${containerName} ls /usr/src/app/schemas/ | grep -v "core" | grep ".yaml" | wc -l`
+      `docker exec ${containerName} /bin/sh -c "[ -f '/usr/src/app/schemas/${fileToCheck}' ] && echo 'File found' || echo 'File not found'"`
     );
-
+    if (result.trim() === "File found") {
-    return new NextResponse(result);
+      return NextResponse.json(
+        { message: true },
+        {
+          status: 200,
+        }
+      );
+    } else {
+      return NextResponse.json(
+        { message: false },
+        {
+          status: 200,
+        }
+      );
+    }
   } catch (error) {
     console.error(`exec error: ${error}`);
-    return new NextResponse(`Error executing shell command: ${error}`, {
+    return NextResponse.json(
+      { message: `Error executing shell command: ${error}` },
+      {
         status: 500,
-    });
+      }
+    );
   }
 }

onix-gui/GUI/app/api/install-bap/route.js

@@ -47,7 +47,10 @@ export async function startSupportServices() {
       `docker-compose -f ${pathDir}/install/docker-compose-app.yml up -d redis_db`
     );
     console.log("Result 3:", result3);
-
+    await executeCommand("docker volume create registry_data_volume");
+    await executeCommand("docker volume create registry_database_volume");
+    await executeCommand("docker volume create gateway_data_volume");
+    await executeCommand("docker volume create gateway_database_volume");
     return NextResponse.json({ result1, result2, result3 });
   } catch (error) {
     console.error("An error occurred:", error);
@@ -91,10 +94,10 @@ export async function POST(req) {
     const bppSubscriberId = data.subscriberId;
     const bppSubscriberUrl = data.subscriberUrl;
     const networkconfigurl = data.networkconfigurl;
+
     let updateBppConfigCommand = `bash ${pathDir}/install/scripts/update_bap_config.sh  ${registryUrl} ${bppSubscriberId}  ${bppSubscriberUrl} ${networkconfigurl}`;
     const result1 = await executeCommand(updateBppConfigCommand);
     console.log("Result 1:", result1);
-
     const result3 = await executeCommand(
       `docker-compose -f ${pathDir}/install/docker-compose-v2.yml up -d  "bap-client"`
     );

onix-gui/GUI/app/api/install-bpp/route.js

@@ -47,7 +47,10 @@ export async function startSupportServices() {
       `docker-compose -f ${pathDir}/install/docker-compose-app.yml up -d redis_db`
     );
     console.log("Result 3:", result3);
-
+    await executeCommand("docker volume create registry_data_volume");
+    await executeCommand("docker volume create registry_database_volume");
+    await executeCommand("docker volume create gateway_data_volume");
+    await executeCommand("docker volume create gateway_database_volume");
     return NextResponse.json({ result1, result2, result3 });
   } catch (error) {
     console.error("An error occurred:", error);

onix-gui/GUI/app/api/install-gateway/route.js

@@ -64,7 +64,8 @@ export async function POST(req, res) {
       `bash ${pathDir}/install/scripts/package_manager.sh`
     );
     console.log("Result 1:", result1);
-
+    await executeCommand("docker volume create registry_data_volume");
+    await executeCommand("docker volume create registry_database_volume");
     const result2 = await executeCommand(
       ` bash ${pathDir}/install/scripts/update_gateway_details.sh ${data.registryUrl} ${data.gatewayUrl}`
     );
@@ -75,7 +76,7 @@ export async function POST(req, res) {
     );
     console.log("Result 3:", result3);
 
-    const result4 = await executeCommand(`sleep 10`);
+    const result4 = await executeCommand(`sleep 2`);
     console.log("Result 4:", result4);
 
     const result5 = await executeCommand(

onix-gui/GUI/app/api/install-layer2/route.js

@@ -0,0 +1,38 @@
+import { exec } from "child_process";
+import { NextResponse } from "next/server";
+
+export async function POST(req) {
+  const request = await req.json();
+  const fileURL = request.yamlUrl;
+  const containerName = request.container;
+
+  const executeShellCommand = (command) => {
+    return new Promise((resolve, reject) => {
+      exec(command, (error, stdout, stderr) => {
+        if (error) {
+          console.error("Error:", error);
+          reject(error);
+          return;
+        }
+        if (stderr) {
+          console.error("Error:", stderr);
+          reject(new Error(stderr));
+          return;
+        }
+        const output = stdout;
+        console.log("Output:", output);
+        resolve(output);
+      });
+    });
+  };
+
+  try {
+    await executeShellCommand(
+      `docker exec ${containerName} wget -P /usr/src/app/schemas/  ${fileURL}`
+    );
+    return NextResponse.json({ status: 200 });
+  } catch (error) {
+    console.error(`exec error: ${error}`);
+    return NextResponse.json({ status: 500 });
+  }
+}

onix-gui/GUI/app/api/install-registry/route.js

@@ -111,6 +111,20 @@ export async function POST(req, res) {
 
       await fs.writeFile(tempFile, updatedConfigData);
       await fs.rename(tempFile, configFile);
+      await executeCommand("docker volume create registry_data_volume");
+      await executeCommand("docker volume create registry_database_volume");
+      await executeCommand("docker volume create gateway_data_volume");
+      await executeCommand("docker volume create gateway_database_volume");
+      await executeCommand(
+        `docker run --rm -v ${join(
+          pathDir,
+          "install",
+          "registry_data",
+          "config"
+        )}:/source -v registry_data_volume:/target busybox sh -c "cp /source/envvars /target/ && cp /source/logger.properties /target/ && cp /source/swf.properties /target/"`
+      );
+
+      // Start the registry container
       await executeCommand(
         `docker-compose -f ${join(
           pathDir,

onix-gui/GUI/app/install/configure/page.js

@@ -3,7 +3,7 @@
 import Link from "next/link";
 import styles from "../../page.module.css";
 import { Ubuntu_Mono } from "next/font/google";
-
+import Image from "next/image";
 const ubuntuMono = Ubuntu_Mono({
   weight: "400",
   style: "normal",
@@ -28,7 +28,7 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <img src="/arrow.png" />
+                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
                 <p className={styles.boxText}>Gateway</p>
               </div>
             </Link>
@@ -37,7 +37,7 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <img src="/arrow.png" />
+                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
                 <p className={styles.boxText}>BAP Adapter</p>
               </div>
             </Link>
@@ -46,7 +46,7 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <img src="/arrow.png" />
+                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
                 <p className={styles.boxText}>BPP Adapter</p>
               </div>
             </Link>

onix-gui/GUI/app/install/create/page.js

@@ -3,7 +3,7 @@
 import Link from "next/link";
 import styles from "../../page.module.css";
 import { Ubuntu_Mono } from "next/font/google";
-
+import Image from "next/image";
 const ubuntuMono = Ubuntu_Mono({
   weight: "400",
   style: "normal",
@@ -28,7 +28,7 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <img src="/arrow.png" />
+                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
                 <p className={styles.boxText}>Gateway</p>
               </div>
             </Link>
@@ -37,7 +37,7 @@ export default function Home() {
                 className={styles.box}
                 style={{ textDecoration: "underline", color: "white" }}
               >
-                <img src="/arrow.png" />
+                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
                 <p className={styles.boxText}>BAP Adapter</p>
               </div>
             </Link>
@@ -46,7 +46,7 @@ export default function Home() {
                 className={styles.box}
                 style={{ textDecoration: "underline", color: "white" }}
               >
-                <img src="/arrow.png" />
+                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
                 <p className={styles.boxText}>BPP Adapter</p>
               </div>
             </Link>
@@ -55,7 +55,7 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <img src="/arrow.png" />
+                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
                 <p className={styles.boxText}>Registry</p>
               </div>
             </Link>

onix-gui/GUI/app/install/join/page.js

@@ -3,7 +3,7 @@
 import Link from "next/link";
 import styles from "../../page.module.css";
 import { Ubuntu_Mono } from "next/font/google";
-
+import Image from "next/image";
 const ubuntuMono = Ubuntu_Mono({
   weight: "400",
   style: "normal",
@@ -32,7 +32,7 @@ export default function Home() {
               }}
             >
               <div className={styles.box}>
-                <img src="/arrow.png" />
+                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
                 <p className={styles.boxText}>Gateway</p>
               </div>
             </Link>
@@ -44,7 +44,7 @@ export default function Home() {
               }}
             >
               <div className={styles.box}>
-                <img src="/arrow.png" />
+                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
                 <p className={styles.boxText}>BAP Adapter</p>
               </div>
             </Link>
@@ -56,7 +56,7 @@ export default function Home() {
               }}
             >
               <div className={styles.box}>
-                <img src="/arrow.png" />
+                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
                 <p className={styles.boxText}>BPP Adapter</p>
               </div>
             </Link>

onix-gui/GUI/app/install/local/page.js

@@ -3,7 +3,7 @@
 import Link from "next/link";
 import styles from "../../page.module.css";
 import { Ubuntu_Mono } from "next/font/google";
-
+import Image from "next/image";
 const ubuntuMono = Ubuntu_Mono({
   weight: "400",
   style: "normal",
@@ -30,7 +30,7 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <img src="/arrow.png" />
+                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
                 <p className={styles.boxText}>Gateway</p>
               </div>
             </Link>
@@ -39,7 +39,7 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <img src="/arrow.png" />
+                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
                 <p className={styles.boxText}>BAP Adapter</p>
               </div>
             </Link>
@@ -48,7 +48,7 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <img src="/arrow.png" />
+                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
                 <p className={styles.boxText}>BPP Adapter</p>
               </div>
             </Link>

onix-gui/GUI/app/install/merge/page.js

@@ -3,7 +3,7 @@
 import Link from "next/link";
 import styles from "../../page.module.css";
 import { Ubuntu_Mono } from "next/font/google";
-
+import Image from "next/image";
 const ubuntuMono = Ubuntu_Mono({
   weight: "400",
   style: "normal",
@@ -15,7 +15,12 @@ export default function Home() {
     <>
       <main className={ubuntuMono.className}>
         <div className={styles.mainContainer}>
-        <button onClick={() => window.history.back()} className={styles.backButton}>Back</button>
+          <button
+            onClick={() => window.history.back()}
+            className={styles.backButton}
+          >
+            Back
+          </button>
           <p className={styles.mainText}>Merge multiple networks</p>
           <div className={styles.boxesContainer}>
             <Link
@@ -23,7 +28,7 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <img src="/arrow.png" />
+                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
                 <p className={styles.boxText}>Gateway</p>
               </div>
             </Link>
@@ -32,7 +37,7 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <img src="/arrow.png" />
+                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
                 <p className={styles.boxText}>BAP</p>
               </div>
             </Link>
@@ -41,7 +46,7 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <img src="/arrow.png" />
+                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
                 <p className={styles.boxText}>BPP</p>
               </div>
             </Link>

onix-gui/GUI/app/install/page.js

@@ -3,7 +3,7 @@
 import Link from "next/link";
 import styles from "../page.module.css";
 import { Ubuntu_Mono } from "next/font/google";
-
+import Image from "next/image";
 const ubuntuMono = Ubuntu_Mono({
   weight: "400",
   style: "normal",
@@ -33,7 +33,7 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <img src="/arrow.png" />
+                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
                 <p className={styles.boxText}>Join an existing network</p>
               </div>
             </Link>
@@ -42,39 +42,10 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <img src="/arrow.png" />
+                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
                 <p className={styles.boxText}>Create new production network</p>
               </div>
             </Link>
-            <Link
-              href="/install/local"
-              style={{ textDecoration: "underline", color: "white" }}
-            >
-              <div className={styles.box}>
-                <img src="/arrow.png" />
-                <p className={styles.boxText}>
-                  Set up a network on your local machine
-                </p>
-              </div>
-            </Link>
-            {/* <Link
-              href="/install/merge"
-              style={{ textDecoration: "underline", color: "white" }}
-            >
-              <div className={styles.box}>
-                <img src="/arrow.png" />
-                <p className={styles.boxText}>Merge multiple networks</p>
-              </div>
-            </Link>
-            <Link
-              href="/install/configure"
-              style={{ textDecoration: "underline", color: "white" }}
-            >
-              <div className={styles.box}>
-                <img src="/arrow.png" />
-                <p className={styles.boxText}>Configure Existing Network</p>
-              </div>
-            </Link> */}
           </div>
         </div>
       </main>

onix-gui/GUI/app/page.js

@@ -1,7 +1,7 @@
 import Link from "next/link";
 import styles from "./page.module.css";
 import { Ubuntu_Mono } from "next/font/google";
-
+import Image from "next/image";
 const ubuntuMono = Ubuntu_Mono({
   weight: "400",
   style: "normal",
@@ -25,25 +25,25 @@ export default function Home() {
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <img src="/arrow.png" />
+                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
                 <p className={styles.boxText}>Installation Wizard</p>
               </div>
             </Link>
-            <Link
+            {/* <Link
               href="/monitor"
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <img src="/arrow.png" />
+                <Image alt="arrow" width={5} height={3} src="/arrow.png" />
                 <p className={styles.boxText}>Network Monitor</p>
               </div>
-            </Link>
+            </Link> */}
             <Link
-              href="/yaml-gen/check-yaml"
+              href="/yaml-gen/"
               style={{ textDecoration: "underline", color: "white" }}
             >
               <div className={styles.box}>
-                <img src="/arrow.png" />
+                <Image alt="arrow" width={20} height={20} src="/arrow.png" />
                 <p className={styles.boxText}>Layer 2 Tester </p>
               </div>
             </Link>

onix-gui/GUI/app/setup/bap/page.js

@@ -117,7 +117,7 @@ export default function Home() {
             />
 
             <div className={styles.buttonsContainer}>
-              <SecondaryButton text={"Cancel"} />
+              {/* <SecondaryButton text={"Cancel"} /> */}
               <PrimaryButton
                 disabled={buttonDisable}
                 onClick={installBap}

onix-gui/GUI/app/setup/bpp/page.js

@@ -131,7 +131,7 @@ export default function Home() {
             />
 
             <div className={styles.buttonsContainer}>
-              <SecondaryButton text={"Cancel"} />
+              {/* <SecondaryButton text={"Cancel"} /> */}
               <PrimaryButton
                 disable={buttonDisable}
                 onClick={installBpp}

onix-gui/GUI/app/setup/gateway/page.js

@@ -115,7 +115,7 @@ export default function Home() {
             />
 
             <div className={styles.buttonsContainer}>
-              <SecondaryButton text={"Cancel"} />
+              {/* <SecondaryButton text={"Cancel"} /> */}
               <PrimaryButton onClick={installGateway} text={"Continue"} />
             </div>
           </div>

onix-gui/GUI/app/setup/registry/page.js

@@ -85,7 +85,7 @@ export default function Home() {
               onChange={handleRegistryUrlChange}
             />
             <div className={styles.buttonsContainer}>
-              <SecondaryButton text={"Cancel"} />
+              {/* <SecondaryButton text={"Cancel"} /> */}
               <PrimaryButton onClick={installRegistry} text={"Continue"} />
             </div>
           </div>

onix-gui/GUI/app/yaml-gen/install-yaml/page.js

@@ -0,0 +1,105 @@
+"use client";
+import SecondaryButton from "@/components/Buttons/SecondaryButton";
+import styles from "../../page.module.css";
+import { Ubuntu_Mono } from "next/font/google";
+import Slider from "@/components/Slider/Slider";
+import PrimaryButton from "@/components/Buttons/PrimaryButton";
+import InputField from "@/components/InputField/InputField";
+import { useState, useCallback } from "react";
+import { toast } from "react-toastify";
+
+const ubuntuMono = Ubuntu_Mono({
+  weight: "400",
+  style: "normal",
+  subsets: ["latin"],
+});
+
+export default function InstallYaml() {
+  const [yamlUrl, setYamlUrl] = useState("");
+  const [checked, setChecked] = useState(false);
+
+  const container = checked ? "bpp-network" : "bap-network";
+
+  const handleRegistryUrlChange = (event) => {
+    setYamlUrl(event.target.value);
+  };
+
+  const installYaml = useCallback(async () => {
+    const toastId = toast.loading("Installing Layer 2 Config file...");
+
+    try {
+      const response = await fetch("/api/install-layer2", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ container, yamlUrl }),
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        console.log(data);
+        const FileFound = data.message;
+        if (FileFound == false) {
+          setShowDownloadLayer2Button(true);
+          toast.update(toastId, {
+            render: "No Layer 2 Config Present 🤯",
+            type: "error",
+            isLoading: false,
+            autoClose: 5000,
+          });
+        } else {
+          toast.update(toastId, {
+            render: "Yaml File Present 👌",
+            type: "success",
+            isLoading: false,
+            autoClose: 5000,
+          });
+        }
+      } else {
+        console.error("Failed to check yaml");
+        toast.update(toastId, {
+          render: "Container Not Found 🤯",
+          type: "error",
+          isLoading: false,
+          autoClose: 5000,
+        });
+      }
+    } catch (error) {
+      console.error("An error occurred:", error);
+    }
+  });
+
+  return (
+    <>
+      <main className={ubuntuMono.className}>
+        <div className={styles.mainContainer}>
+          <button
+            onClick={() => window.history.back()}
+            className={styles.backButton}
+          >
+            Back
+          </button>
+          <p className={styles.mainText}>Install Yaml</p>
+          <div className={styles.formContainer}>
+            <Slider
+              label={checked ? "BPP" : "BAP"}
+              checked={checked}
+              toggleChecked={setChecked}
+            />
+            <InputField
+              label={"Enter Layer 2 URL"}
+              value={yamlUrl}
+              onChange={handleRegistryUrlChange}
+              placeholder="https://github/user/repo/blob/main/layer2.yaml"
+            />
+            <div className={styles.buttonsContainer}>
+              {/* <SecondaryButton text={"Cancel"} /> */}
+              <PrimaryButton onClick={installYaml} text={"Continue"} />
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}

onix-gui/GUI/app/yaml-gen/page.js

@@ -4,8 +4,9 @@ import { Ubuntu_Mono } from "next/font/google";
 import PrimaryButton from "@/components/Buttons/PrimaryButton";
 import InputField from "@/components/InputField/InputField";
 import Slider from "@/components/Slider/Slider";
-import styles from "../../page.module.css";
+import styles from "../page.module.css";
 import { toast } from "react-toastify";
+
 import Link from "next/link";
 
 const ubuntuMono = Ubuntu_Mono({
@@ -15,14 +16,37 @@ const ubuntuMono = Ubuntu_Mono({
 });
 
 export default function CheckYaml() {
+  const [domainName, setDomainName] = useState("");
+  const [versionNumber, setversionNumber] = useState("");
   const [checked, setChecked] = useState(false);
+  const [showDownloadLayer2Button, setShowDownloadLayer2Button] =
+    useState(false);
   const [propertyLink, setPropertyLink] = useState("");
 
   const handleYamlChange = (event) => {
     setPropertyLink(event.target.value);
   };
+  const handledomainNameChange = (event) => {
+    setDomainName(event.target.value);
+  };
+  const handleVersionChange = (event) => {
+    setversionNumber(event.target.value);
+  };
+  const nameGenerator = async () => {
+    const parts = domainName.split(":");
+    const domainNameWithoutVersion = parts[0];
+    let filename;
+    if (parts[1] === undefined || parts[1] === "") {
+      filename = `${domainNameWithoutVersion}_${versionNumber}.yaml`;
+    } else {
+      filename = `${domainNameWithoutVersion}_${parts[1]}_${versionNumber}.yaml`;
+    }
+    console.log(filename);
+    return filename;
+  };
 
   const handleOnclick = async () => {
+    const fileName = await nameGenerator();
     const toastId = toast.loading("Checking for layer2 yaml file");
     try {
       const response = await fetch("/api/check-layer2", {
@@ -30,14 +54,14 @@ export default function CheckYaml() {
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify({ checked }),
+        body: JSON.stringify({ checked, fileName }),
       });
 
       if (response.ok) {
         const data = await response.json();
-        const yamlFile = data;
+        const FileFound = data.message;
-        console.log("YAML", yamlFile);
+        if (FileFound == false) {
-        if (yamlFile == 0) {
+          setShowDownloadLayer2Button(true);
           toast.update(toastId, {
             render: "No Layer 2 Config Present 🤯",
             type: "error",
@@ -89,16 +113,29 @@ export default function CheckYaml() {
             <InputField
               label={"Container Name"}
               value={checked ? "bpp-network" : "bap-network"}
+              readOnly
+            />
+            <InputField
+              label={"Domain Name"}
+              value={domainName}
+              onChange={handledomainNameChange}
+              placeholder="Retail"
+            />
+            <InputField
+              label={"Version Number"}
+              value={versionNumber}
+              onChange={handleVersionChange}
+              placeholder="1.0.0"
             />
-            {/* <InputField
-              label={"Yaml  Link"}
-              value={propertyLink}
-              onChange={handleYamlChange}
-            /> */}
 
             <div className={styles.buttonsContainer}>
-              <PrimaryButton text={"Continue"} onClick={handleOnclick} />
+              <PrimaryButton label={"Check"} onClick={handleOnclick} />
             </div>
+            {showDownloadLayer2Button && (
+              <div className={styles.buttonsContainer}>
+                <a href={`/yaml-gen/install-yaml`}>Download Layer 2 Config</a>
+              </div>
+            )}
           </div>
         </div>
       </main>

onix-gui/GUI/components/InputField/InputField.jsx

@@ -1,12 +1,12 @@
 import React from "react";
 import styles from "./InputField.module.css";
 
-const InputField = ({ label, value, onChange }) => {
+const InputField = ({ label, value, onChange, placeholder = "Input Text" }) => {
   return (
     <div className={styles.inputContainer}>
       <label className={styles.inputLabel}>{label}</label>
       <input
-        placeholder="Input Text"
+        placeholder={placeholder}
         className={styles.inputField}
         type="text"
         value={value}

onix-gui/onix/.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": "next/core-web-vitals"
-}

onix-gui/onix/.gitignore

@@ -1,36 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-.yarn/install-state.gz
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts

onix-gui/onix/app/api/get-network-participant/route.js

@@ -1,27 +0,0 @@
-import { NextResponse } from "next/server";
-
-export async function POST(req, res) {
-  const request = await req.json();
-  const registryUrl = request.registryUrl;
-  const body = { type: "BPP" };
-
-  try {
-    const response = await fetch(registryUrl, {
-      method: "POST",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(body),
-    });
-
-    const data = await response.json();
-    return NextResponse.json(data, { status: 200 });
-  } catch (error) {
-    console.error(error);
-    return NextResponse.json(
-      { error: "Error making request to registry" },
-      { status: 500 }
-    );
-  }
-}

onix-gui/onix/app/monitor/dashboard/page.js

@@ -1,95 +0,0 @@
-import styles from "../../page.module.css";
-
-const page = () => {
-    const data = [
-        {
-            ip: "192.168.1.1",
-            status: "Live",
-            cpu: "2%",
-            memory: "18.8 MB",
-            uptime: "10 days",
-        },
-        {
-            ip: "10.0.0.1",
-            status: "404",
-            cpu: "0%",
-            memory: "0 MB",
-            uptime: "5 days",
-        },
-        {
-            ip: "172.16.0.1",
-            status: "Live",
-            cpu: "6%",
-            memory: "56.4 MB",
-            uptime: "15 days",
-        },
-        {
-            ip: "192.0.2.1",
-            status: "Live",
-            cpu: "69%",
-            memory: "648.6 MB",
-            uptime: "20 days",
-        },
-        {
-            ip: "198.51.100.1",
-            status: "404",
-            cpu: "0%",
-            memory: "0 MB",
-            uptime: "3 days",
-        },
-        {
-            ip: "203.0.113.1",
-            status: "Live",
-            cpu: ".4%",
-            memory: "3.7 MB",
-            uptime: "8 days",
-        },
-    ];
-    return (
-        <div className={styles.dashboard}>
-            <div className={styles.counts}>
-                <p
-                    style={{
-                        textAlign: "left",
-                    }}
-                    className={styles.count}
-                >
-                    Uptime Network Participants: 10
-                </p>
-                <p
-                    style={{
-                        textAlign: "right",
-                    }}
-                    className={styles.count}
-                >
-                    Uptime Network Participants: 10
-                </p>
-            </div>
-            <h2 className={styles.dashboardHeading}>Dashboard</h2>
-            <table className={styles.dashboardTable}>
-                <thead>
-                    <tr>
-                        <th>S/N</th>
-                        <th>IP / Domain Name</th>
-                        <th>Status</th>
-                        <th>CPU</th>
-                        <th>Memory</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {data.map((item, index) => (
-                        <tr key={index}>
-                            <td>{index + 1}</td>
-                            <td>{item.ip}</td>
-                            <td>{item.status}</td>
-                            <td>{item.cpu}</td>
-                            <td>{item.memory}</td>
-                        </tr>
-                    ))}
-                </tbody>
-            </table>
-        </div>
-    );
-};
-
-export default page;

onix-gui/onix/app/monitor/page.js

@@ -1,74 +0,0 @@
-"use client";
-import { useState } from "react";
-import InputField from "@/components/InputField/InputField";
-import styles from "../page.module.css";
-import { Ubuntu_Mono } from "next/font/google";
-import SecondaryButton from "@/components/Buttons/SecondaryButton";
-import PrimaryButton from "@/components/Buttons/PrimaryButton";
-import { useRouter } from "next/navigation";
-const ubuntuMono = Ubuntu_Mono({
-  weight: "400",
-  style: "normal",
-  subsets: ["latin"],
-});
-
-export default function Home() {
-  const [registryUrl, setRegistryUrl] = useState("");
-  const router = useRouter();
-  const handleRegistryUrlChange = (event) => {
-    setRegistryUrl(event.target.value);
-  };
-  const handleContinue = async () => {
-    try {
-      const response = await fetch("/api/get-network-participant", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ registryUrl }),
-      });
-
-      if (response.ok) {
-        const networkParticipantsData = await response.json();
-        router.push("/monitor/dashboard");
-        // redirecting to the dashboard page
-      } else {
-        console.log("error fetching participant data");
-      }
-    } catch (error) {
-      console.error("Error:", error);
-    }
-  };
-
-  return (
-    <>
-      <main className={ubuntuMono.className}>
-        <div className={styles.mainContainer}>
-          <button
-            onClick={() => window.history.back()}
-            className={styles.backButton}
-          >
-            Back
-          </button>
-          {/* <p className={styles.currentRoute}>ONIX{pathname}</p> */}
-          <p className={styles.mainText}>Network Registry</p>
-          <div className={styles.formContainer}>
-            <InputField
-              value={registryUrl}
-              onChange={handleRegistryUrlChange}
-              label={"Registry URL"}
-            />
-            {/* <InputField label={"Subscriber Id"} /> */}
-            {/* <InputField label={"UniqueKey Id"} /> */}
-            {/* <InputField label={"Network configuration URL"} /> */}
-
-            <div className={styles.buttonsContainer}>
-              {/* <SecondaryButton text={"Cancel"} /> */}
-              <PrimaryButton onClick={handleContinue} text={"Continue"} />
-            </div>
-          </div>
-        </div>
-      </main>
-    </>
-  );
-}

onix-gui/onix/app/yaml-gen/option/bap/page.js

@@ -1,64 +0,0 @@
-"use client";
-
-import InputField from "@/components/InputField/InputField";
-import styles from "../../../page.module.css";
-import { Ubuntu_Mono } from "next/font/google";
-import SecondaryButton from "@/components/Buttons/SecondaryButton";
-import PrimaryButton from "@/components/Buttons/PrimaryButton";
-import { usePathname } from "next/navigation";
-import { useState, useCallback } from "react";
-import Slider from "@/components/Slider/Slider"
-
-const ubuntuMono = Ubuntu_Mono({
-    weight: "400",
-    style: "normal",
-    subsets: ["latin"],
-});
-
-
-export default function Bap() {
-
-    const [checked, setChecked] = useState(false);
-    const [propertyName, setPropertyName] = useState("");
-    const [propertyLink, setPropertyLink] = useState("");
-    const [propertyOption, setPropertyOption] = useState("");
-
-    return (
-        <>
-            <main className={ubuntuMono.className}>
-                <div className={styles.mainContainer}>
-                    <p className={styles.mainText}>BAP</p>
-                    <div className={styles.formContainer}>
-                        <InputField
-                            label={"Property Name"}
-                            value={propertyName}
-                            onChange={setPropertyName}
-                        />
-                        <InputField
-                            label={"Property Link"}
-                            value={propertyLink}
-                            onChange={setPropertyLink}
-                        />
-
-                        <InputField
-                            label={"Property Option"}
-                            value={propertyOption}
-                            onChange={setPropertyOption}
-                        />
-
-                        <Slider
-                            label={"Is this property mandatory?"}
-                            checked={checked}
-                            toggleChecked={setChecked}
-                        />
-
-                        <div className={styles.buttonsContainer}>
-                            <SecondaryButton text={"Cancel"} />
-                            <PrimaryButton text={"Continue"} />
-                        </div>
-                    </div>
-                </div>
-            </main>
-        </>
-    )
-}

onix-gui/onix/app/yaml-gen/option/bpp/page.js

@@ -1,64 +0,0 @@
-"use client";
-
-import InputField from "@/components/InputField/InputField";
-import styles from "../../../page.module.css";
-import { Ubuntu_Mono } from "next/font/google";
-import SecondaryButton from "@/components/Buttons/SecondaryButton";
-import PrimaryButton from "@/components/Buttons/PrimaryButton";
-import { usePathname } from "next/navigation";
-import { useState, useCallback } from "react";
-import Slider from "@/components/Slider/Slider"
-
-const ubuntuMono = Ubuntu_Mono({
-    weight: "400",
-    style: "normal",
-    subsets: ["latin"],
-});
-
-
-export default function Bpp() {
-
-    const [checked, setChecked] = useState(false);
-    const [propertyName, setPropertyName] = useState("");
-    const [propertyLink, setPropertyLink] = useState("");
-    const [propertyOption, setPropertyOption] = useState("");
-
-    return (
-        <>
-            <main className={ubuntuMono.className}>
-                <div className={styles.mainContainer}>
-                    <p className={styles.mainText}>BPP</p>
-                    <div className={styles.formContainer}>
-                        <InputField
-                            label={"Property Name"}
-                            value={propertyName}
-                            onChange={setPropertyName}
-                        />
-                        <InputField
-                            label={"Property Link"}
-                            value={propertyLink}
-                            onChange={setPropertyLink}
-                        />
-
-                        <InputField
-                            label={"Property Option"}
-                            value={propertyOption}
-                            onChange={setPropertyOption}
-                        />
-
-                        <Slider
-                            label={"Is this property mandatory?"}
-                            checked={checked}
-                            toggleChecked={setChecked}
-                        />
-
-                        <div className={styles.buttonsContainer}>
-                            <SecondaryButton text={"Cancel"} />
-                            <PrimaryButton text={"Continue"} />
-                        </div>
-                    </div>
-                </div>
-            </main>
-        </>
-    )
-}

onix-gui/onix/app/yaml-gen/option/page.js

@@ -1,43 +0,0 @@
-import Link from "next/link";
-import styles from "../../page.module.css";
-import { Ubuntu_Mono } from "next/font/google";
-
-const ubuntuMono = Ubuntu_Mono({
-    weight: "400",
-    style: "normal",
-    subsets: ["latin"],
-});
-
-
-export default function Option() {
-    return (
-        <>
-            <main className={ubuntuMono.className}>
-                <div className={styles.mainContainer}>
-                    <p className={styles.mainText}><b>Yaml File Generator</b></p>
-                    <div className={styles.boxesContainer}>
-                        <Link
-                            href="./option/bap"
-                            style={{ textDecoration: "underline", color: "white" }}
-                        >
-                            <div className={styles.box}>
-                                <img src="/arrow.png" />
-                                <p className={styles.boxText}>BAP</p>
-                            </div>
-                        </Link>
-                        <Link
-                            href="./option/bpp"
-                            style={{ textDecoration: "underline", color: "white" }}
-                        >
-                            <div className={styles.box}>
-                                <img src="/arrow.png" />
-                                <p className={styles.boxText}>BPP</p>
-                            </div>
-                        </Link>
-                    </div>
-
-                </div>
-            </main>
-        </>
-    )
-}

onix-gui/onix/app/yaml-gen/page.js

@@ -1,122 +0,0 @@
-import Link from "next/link";
-import styles from "../page.module.css";
-import { Ubuntu_Mono } from "next/font/google";
-import btnstyles from "@/components/Buttons/Buttons.module.css";
-const ubuntuMono = Ubuntu_Mono({
-  weight: "400",
-  style: "normal",
-  subsets: ["latin"],
-});
-
-export default function YamlGen() {
-  return (
-    <>
-      <main className={ubuntuMono.className}>
-        <div className={styles.mainContainer}>
-          <p className={styles.mainText}>
-            <b>Yaml File Generator</b>
-          </p>
-          <div className={styles.boxesContainer}>
-            <Link
-              href="yaml-gen/option"
-              style={{ textDecoration: "underline", color: "white" }}
-            >
-              <div className={styles.smallbox}>
-                <img src="/arrow.png" />
-                <p className={styles.boxText}>Search</p>
-              </div>
-            </Link>
-            <Link
-              href="yaml-gen/option"
-              style={{ textDecoration: "underline", color: "white" }}
-            >
-              <div className={styles.smallbox}>
-                <img src="/arrow.png" />
-                <p className={styles.boxText}>Select</p>
-              </div>
-            </Link>
-            <Link
-              href="yaml-gen/option"
-              style={{ textDecoration: "underline", color: "white" }}
-            >
-              <div className={styles.smallbox}>
-                <img src="/arrow.png" />
-                <p className={styles.boxText}>Init</p>
-              </div>
-            </Link>
-            <Link
-              href="yaml-gen/option"
-              style={{ textDecoration: "underline", color: "white" }}
-            >
-              <div className={styles.smallbox}>
-                <img src="/arrow.png" />
-                <p className={styles.boxText}>Confirm</p>
-              </div>
-            </Link>
-            <Link
-              href="yaml-gen/option"
-              style={{ textDecoration: "underline", color: "white" }}
-            >
-              <div className={styles.smallbox}>
-                <img src="/arrow.png" />
-                <p className={styles.boxText}>Status</p>
-              </div>
-            </Link>
-          </div>
-          <div className={styles.secondBoxesContainer}>
-            <Link
-              href="yaml-gen/option"
-              style={{ textDecoration: "underline", color: "white" }}
-            >
-              <div className={styles.smallbox}>
-                <img src="/arrow.png" />
-                <p className={styles.boxText}>Track</p>
-              </div>
-            </Link>
-            <Link
-              href="yaml-gen/option"
-              style={{ textDecoration: "underline", color: "white" }}
-            >
-              <div className={styles.smallbox}>
-                <img src="/arrow.png" />
-                <p className={styles.boxText}>Cancel</p>
-              </div>
-            </Link>
-            <Link
-              href="yaml-gen/option"
-              style={{ textDecoration: "underline", color: "white" }}
-            >
-              <div className={styles.smallbox}>
-                <img src="/arrow.png" />
-                <p className={styles.boxText}>Update</p>
-              </div>
-            </Link>
-            <Link
-              href="yaml-gen/option"
-              style={{ textDecoration: "underline", color: "white" }}
-            >
-              <div className={styles.smallbox}>
-                <img src="/arrow.png" />
-                <p className={styles.boxText}>Rating</p>
-              </div>
-            </Link>
-            <Link
-              href="yaml-gen/option"
-              style={{ textDecoration: "underline", color: "white" }}
-            >
-              <div className={styles.smallbox}>
-                <img src="/arrow.png" />
-                <p className={styles.boxText}>Support</p>
-              </div>
-            </Link>
-          </div>
-        </div>
-        <div style={{ padding: "20px" }}>
-          <a className={btnstyles.primaryButton} href="/yaml-gen/check-yaml">
-            Check Yaml Config
-          </a>
-        </div>
-      </main>
-    </>
-  );
-}

onix-gui/onix/next.config.mjs

@@ -1,4 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
-
-export default nextConfig;

onix-gui/start.sh

@@ -1,7 +1,7 @@
 #!/bin/bash
 
 # Set script variables
-PROJECT_DIR="onix"
+PROJECT_DIR="GUI"
 PORT=3005
 TUNNEL_SERVICE="lt"
 
@@ -14,6 +14,7 @@ echo "installing Dependencies"
 echo "Building and starting Next.js app..."
 npx next build &&
 echo "Builing Web App = True"
+sleep 3
 npx next start -p "$PORT" > /dev/null 2>&1 &
 
 # Wait for the Next.js app to start