copied new version

2024-05-03 11:10:14 +05:30
parent 80e9e7e6cb
commit ff0cd83613
49 changed files with 300 additions and 644 deletions
--- a/onix-gui/onix/README.md
+++ b/onix-gui/onix/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/)
--- a/onix-gui/onix/app/Infy_Pending.pdf
+++ b/onix-gui/onix/app/Infy_Pending.pdf
--- a/onix-gui/onix/app/api/check-layer2/route.js
+++ b/onix-gui/onix/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 containerName = checked.checked ? "bpp-network" : "bap-network";
+  const request = await req.json();
+  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'"`
    );
-
-    return new NextResponse(result);
+    if (result.trim() === "File found") {
+      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,
-    });
+      }
+    );
  }
 }
--- a/onix-gui/onix/app/api/clonning-repo/route.js
+++ b/onix-gui/onix/app/api/clonning-repo/route.js
--- a/onix-gui/onix/app/api/install-bap/route.js
+++ b/onix-gui/onix/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"`
    );
--- a/onix-gui/onix/app/api/install-bpp/route.js
+++ b/onix-gui/onix/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);
--- a/onix-gui/onix/app/api/install-gateway/route.js
+++ b/onix-gui/onix/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(
--- a/onix-gui/GUI/app/api/install-layer2/route.js
+++ b/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 });
+  }
+}
--- a/onix-gui/onix/app/api/install-registry/route.js
+++ b/onix-gui/onix/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,
--- a/onix-gui/onix/app/favicon.ico
+++ b/onix-gui/onix/app/favicon.ico
--- a/onix-gui/onix/app/globals.css
+++ b/onix-gui/onix/app/globals.css
--- a/onix-gui/onix/app/install/configure/page.js
+++ b/onix-gui/onix/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>
--- a/onix-gui/onix/app/install/create/page.js
+++ b/onix-gui/onix/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>
--- a/onix-gui/onix/app/install/join/page.js
+++ b/onix-gui/onix/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>
--- a/onix-gui/onix/app/install/local/page.js
+++ b/onix-gui/onix/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>
--- a/onix-gui/onix/app/install/merge/page.js
+++ b/onix-gui/onix/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>
--- a/onix-gui/onix/app/install/page.js
+++ b/onix-gui/onix/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>
--- a/onix-gui/onix/app/layout.js
+++ b/onix-gui/onix/app/layout.js
--- a/onix-gui/onix/app/page.js
+++ b/onix-gui/onix/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>
--- a/onix-gui/onix/app/page.module.css
+++ b/onix-gui/onix/app/page.module.css
--- a/onix-gui/onix/app/setup/bap/page.js
+++ b/onix-gui/onix/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}
--- a/onix-gui/onix/app/setup/bpp/page.js
+++ b/onix-gui/onix/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}
--- a/onix-gui/onix/app/setup/gateway/page.js
+++ b/onix-gui/onix/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>
--- a/onix-gui/onix/app/setup/registry/page.js
+++ b/onix-gui/onix/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>
--- a/onix-gui/onix/app/template.csv
+++ b/onix-gui/onix/app/template.csv
--- a/onix-gui/GUI/app/yaml-gen/install-yaml/page.js
+++ b/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>
+    </>
+  );
+}
--- a/onix-gui/onix/app/yaml-gen/check-yaml/page.js
+++ b/onix-gui/onix/app/yaml-gen/check-yaml/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;
-        console.log("YAML", yamlFile);
-        if (yamlFile == 0) {
+        const FileFound = data.message;
+        if (FileFound == false) {
+          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>
--- a/onix-gui/onix/components/Buttons/Buttons.module.css
+++ b/onix-gui/onix/components/Buttons/Buttons.module.css
--- a/onix-gui/onix/components/Buttons/PrimaryButton.js
+++ b/onix-gui/onix/components/Buttons/PrimaryButton.js
--- a/onix-gui/onix/components/Buttons/SecondaryButton.jsx
+++ b/onix-gui/onix/components/Buttons/SecondaryButton.jsx
--- a/onix-gui/onix/components/InputField/InputField.jsx
+++ b/onix-gui/onix/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}
--- a/onix-gui/onix/components/InputField/InputField.module.css
+++ b/onix-gui/onix/components/InputField/InputField.module.css
--- a/onix-gui/onix/components/Slider/Slider.jsx
+++ b/onix-gui/onix/components/Slider/Slider.jsx
--- a/onix-gui/onix/components/Slider/Slider.module.css
+++ b/onix-gui/onix/components/Slider/Slider.module.css
--- a/onix-gui/onix/jsconfig.json
+++ b/onix-gui/onix/jsconfig.json
--- a/onix-gui/onix/package-lock.json
+++ b/onix-gui/onix/package-lock.json
--- a/onix-gui/onix/package.json
+++ b/onix-gui/onix/package.json
--- a/onix-gui/onix/public/arrow.png
+++ b/onix-gui/onix/public/arrow.png
--- a/onix-gui/onix/.eslintrc.json
+++ b/onix-gui/onix/.eslintrc.json
@@ -1,3 +0,0 @@
-{
-  "extends": "next/core-web-vitals"
-}
--- a/onix-gui/onix/.gitignore
+++ b/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
--- a/onix-gui/onix/app/api/get-network-participant/route.js
+++ b/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 }
-    );
-  }
-}
--- a/onix-gui/onix/app/monitor/dashboard/page.js
+++ b/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;
--- a/onix-gui/onix/app/monitor/page.js
+++ b/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>
-    </>
-  );
-}
--- a/onix-gui/onix/app/yaml-gen/option/bap/page.js
+++ b/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>
-        </>
-    )
-}
--- a/onix-gui/onix/app/yaml-gen/option/bpp/page.js
+++ b/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>
-        </>
-    )
-}
--- a/onix-gui/onix/app/yaml-gen/option/page.js
+++ b/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>
-        </>
-    )
-}
--- a/onix-gui/onix/app/yaml-gen/page.js
+++ b/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>
-    </>
-  );
-}
--- a/onix-gui/onix/next.config.mjs
+++ b/onix-gui/onix/next.config.mjs
@@ -1,4 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
-
-export default nextConfig;
--- a/onix-gui/start.sh
+++ b/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