eric/onix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added the GUI

Browse Source
This commit is contained in:
Mishalabdullah
2024-05-02 21:44:17 +05:30
parent 4ac9ce8815
commit d5ea660d7e
49 changed files with 617 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
onix-gui/app/api/install-layer2/route.js
View File

@@ -1,38 +0,0 @@
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 });
}
}

183
onix-gui/app/yaml-gen/page.js
View File

@@ -1,183 +0,0 @@
"use client";
import { useState } from "react";
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 { toast } from "react-toastify";
import Link from "next/link";
const ubuntuMono = Ubuntu_Mono({
weight: "400",
style: "normal",
subsets: ["latin"],
});
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];
const domainVersion = parts[1] || "";
const filename = `${domainNameWithoutVersion}_${domainVersion}_${versionNumber}.yaml`;
return filename;
};
const handleDownload = async () => {
const userInput = prompt("Enter the URL of the Layer 2 Config file");
try {
const response = await fetch("/api/install-layer2", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ checked, userInput }),
});
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);
}
};
const handleOnclick = async () => {
const fileName = await nameGenerator();
const toastId = toast.loading("Checking for layer2 yaml file");
try {
const response = await fetch("/api/check-layer2", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ checked, fileName }),
});
if (response.ok) {
const data = await response.json();
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}>
<button
onClick={() => window.history.back()}
className={styles.backButton}
>
Back
</button>
<div className={styles.mainContainer}>
<p className={styles.mainText}>
<b>Yaml File Checker</b>
</p>
<div className={styles.formContainer}>
<Slider
label={checked ? "BPP" : "BAP"}
checked={checked}
toggleChecked={setChecked}
/>
<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"
/>
<div className={styles.buttonsContainer}>
<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>
</>
);
}

0
onix-gui/.eslintrc.json → onix-gui/onix/.eslintrc.json
View File

0
onix-gui/.gitignore → onix-gui/onix/.gitignore vendored
View File

21
onix-gui/README.md → onix-gui/onix/README.md
View File

@@ -6,28 +6,23 @@ 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: Clone the beckn-onix-gui repo
### Step 1: Run the `start.sh` script
```
git clone https://github.com/Mishalabdullah/beckn-onix-gui.git
cd .. && ./start.sh
```
### Step 2: Change directory to the nextjs project
### Step 2: Accessing the GUI.
```
cd onix-gui
```
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.
### 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
```
### Step 3: Install and setup your network
Note: Port 3000 is being used by onix, so we're using port 3005 instead.

0
onix-gui/app/Infy_Pending.pdf → onix-gui/onix/app/Infy_Pending.pdf
View File

34
onix-gui/app/api/check-layer2/route.js → onix-gui/onix/app/api/check-layer2/route.js
View File

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

0
onix-gui/app/api/clonning-repo/route.js → onix-gui/onix/app/api/clonning-repo/route.js
View File

27
onix-gui/onix/app/api/get-network-participant/route.js Normal file
View File

@@ -0,0 +1,27 @@
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 }
);
}
}

7
onix-gui/app/api/install-bap/route.js → onix-gui/onix/app/api/install-bap/route.js
View File

@@ -47,10 +47,7 @@ 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);
@@ -94,10 +91,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"`
);

5
onix-gui/app/api/install-bpp/route.js → onix-gui/onix/app/api/install-bpp/route.js
View File

@@ -47,10 +47,7 @@ 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);

5
onix-gui/app/api/install-gateway/route.js → onix-gui/onix/app/api/install-gateway/route.js
View File

@@ -64,8 +64,7 @@ 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}`
);
@@ -76,7 +75,7 @@ export async function POST(req, res) {
);
console.log("Result 3:", result3);
const result4 = await executeCommand(`sleep 2`);
const result4 = await executeCommand(`sleep 10`);
console.log("Result 4:", result4);
const result5 = await executeCommand(

14
onix-gui/app/api/install-registry/route.js → onix-gui/onix/app/api/install-registry/route.js
View File

@@ -111,20 +111,6 @@ 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,

0
onix-gui/app/favicon.ico → onix-gui/onix/app/favicon.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

0
onix-gui/app/globals.css → onix-gui/onix/app/globals.css
View File

8
onix-gui/app/install/configure/page.js → onix-gui/onix/app/install/configure/page.js
View File

@@ -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}>
<Image alt="arrow" width={20} height={20} src="/arrow.png" />
<img 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}>
<Image alt="arrow" width={20} height={20} src="/arrow.png" />
<img 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}>
<Image alt="arrow" width={20} height={20} src="/arrow.png" />
<img src="/arrow.png" />
<p className={styles.boxText}>BPP Adapter</p>
</div>
</Link>

10
onix-gui/app/install/create/page.js → onix-gui/onix/app/install/create/page.js
View File

@@ -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}>
<Image alt="arrow" width={20} height={20} src="/arrow.png" />
<img 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" }}
>
<Image alt="arrow" width={20} height={20} src="/arrow.png" />
<img 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" }}
>
<Image alt="arrow" width={20} height={20} src="/arrow.png" />
<img 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}>
<Image alt="arrow" width={20} height={20} src="/arrow.png" />
<img src="/arrow.png" />
<p className={styles.boxText}>Registry</p>
</div>
</Link>

8
onix-gui/app/install/join/page.js → onix-gui/onix/app/install/join/page.js
View File

@@ -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}>
<Image alt="arrow" width={20} height={20} src="/arrow.png" />
<img src="/arrow.png" />
<p className={styles.boxText}>Gateway</p>
</div>
</Link>
@@ -44,7 +44,7 @@ export default function Home() {
}}
>
<div className={styles.box}>
<Image alt="arrow" width={20} height={20} src="/arrow.png" />
<img src="/arrow.png" />
<p className={styles.boxText}>BAP Adapter</p>
</div>
</Link>
@@ -56,7 +56,7 @@ export default function Home() {
}}
>
<div className={styles.box}>
<Image alt="arrow" width={20} height={20} src="/arrow.png" />
<img src="/arrow.png" />
<p className={styles.boxText}>BPP Adapter</p>
</div>
</Link>

8
onix-gui/app/install/local/page.js → onix-gui/onix/app/install/local/page.js
View File

@@ -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}>
<Image alt="arrow" width={20} height={20} src="/arrow.png" />
<img 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}>
<Image alt="arrow" width={20} height={20} src="/arrow.png" />
<img 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}>
<Image alt="arrow" width={20} height={20} src="/arrow.png" />
<img src="/arrow.png" />
<p className={styles.boxText}>BPP Adapter</p>
</div>
</Link>

15
onix-gui/app/install/merge/page.js → onix-gui/onix/app/install/merge/page.js
View File

@@ -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,12 +15,7 @@ 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
@@ -28,7 +23,7 @@ export default function Home() {
style={{ textDecoration: "underline", color: "white" }}
>
<div className={styles.box}>
<Image alt="arrow" width={20} height={20} src="/arrow.png" />
<img src="/arrow.png" />
<p className={styles.boxText}>Gateway</p>
</div>
</Link>
@@ -37,7 +32,7 @@ export default function Home() {
style={{ textDecoration: "underline", color: "white" }}
>
<div className={styles.box}>
<Image alt="arrow" width={20} height={20} src="/arrow.png" />
<img src="/arrow.png" />
<p className={styles.boxText}>BAP</p>
</div>
</Link>
@@ -46,7 +41,7 @@ export default function Home() {
style={{ textDecoration: "underline", color: "white" }}
>
<div className={styles.box}>
<Image alt="arrow" width={20} height={20} src="/arrow.png" />
<img src="/arrow.png" />
<p className={styles.boxText}>BPP</p>
</div>
</Link>

35
onix-gui/app/install/page.js → onix-gui/onix/app/install/page.js
View File

@@ -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}>
<Image alt="arrow" width={20} height={20} src="/arrow.png" />
<img src="/arrow.png" />
<p className={styles.boxText}>Join an existing network</p>
</div>
</Link>
@@ -42,10 +42,39 @@ export default function Home() {
style={{ textDecoration: "underline", color: "white" }}
>
<div className={styles.box}>
<Image alt="arrow" width={20} height={20} src="/arrow.png" />
<img 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>

0
onix-gui/app/layout.js → onix-gui/onix/app/layout.js
View File

95
onix-gui/onix/app/monitor/dashboard/page.js Normal file
View File

@@ -0,0 +1,95 @@
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;

74
onix-gui/onix/app/monitor/page.js Normal file
View File

@@ -0,0 +1,74 @@
"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>
</>
);
}

14
onix-gui/app/page.js → onix-gui/onix/app/page.js
View File

@@ -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}>
<Image alt="arrow" width={20} height={20} src="/arrow.png" />
<img 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}>
<Image alt="arrow" width={5} height={3} src="/arrow.png" />
<img src="/arrow.png" />
<p className={styles.boxText}>Network Monitor</p>
</div>
</Link> */}
</Link>
<Link
href="/yaml-gen/"
href="/yaml-gen/check-yaml"
style={{ textDecoration: "underline", color: "white" }}
>
<div className={styles.box}>
<Image alt="arrow" width={20} height={20} src="/arrow.png" />
<img src="/arrow.png" />
<p className={styles.boxText}>Layer 2 Tester </p>
</div>
</Link>

0
onix-gui/app/page.module.css → onix-gui/onix/app/page.module.css
View File

2
onix-gui/app/setup/bap/page.js → onix-gui/onix/app/setup/bap/page.js
View File

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

2
onix-gui/app/setup/bpp/page.js → onix-gui/onix/app/setup/bpp/page.js
View File

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

2
onix-gui/app/setup/gateway/page.js → onix-gui/onix/app/setup/gateway/page.js
View File

@@ -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>

2
onix-gui/app/setup/registry/page.js → onix-gui/onix/app/setup/registry/page.js
View File

@@ -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>

0
onix-gui/app/template.csv → onix-gui/onix/app/template.csv
View File

60
onix-gui/app/yaml-gen/install-yaml/page.js → onix-gui/onix/app/yaml-gen/check-yaml/page.js
View File

@@ -1,12 +1,12 @@
"use client";
import SecondaryButton from "@/components/Buttons/SecondaryButton";
import styles from "../../page.module.css";
import { useState } from "react";
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 Slider from "@/components/Slider/Slider";
import styles from "../../page.module.css";
import { toast } from "react-toastify";
import Link from "next/link";
const ubuntuMono = Ubuntu_Mono({
weight: "400",
@@ -14,34 +14,30 @@ const ubuntuMono = Ubuntu_Mono({
subsets: ["latin"],
});
export default function InstallYaml() {
const [yamlUrl, setYamlUrl] = useState("");
export default function CheckYaml() {
const [checked, setChecked] = useState(false);
const [propertyLink, setPropertyLink] = useState("");
const container = checked ? "bpp-network" : "bap-network";
const handleRegistryUrlChange = (event) => {
setYamlUrl(event.target.value);
const handleYamlChange = (event) => {
setPropertyLink(event.target.value);
};
const installYaml = useCallback(async () => {
const toastId = toast.loading("Installing Layer 2 Config file...");
const handleOnclick = async () => {
const toastId = toast.loading("Checking for layer2 yaml file");
try {
const response = await fetch("/api/install-layer2", {
const response = await fetch("/api/check-layer2", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ container, yamlUrl }),
body: JSON.stringify({ checked }),
});
if (response.ok) {
const data = await response.json();
console.log(data);
const FileFound = data.message;
if (FileFound == false) {
setShowDownloadLayer2Button(true);
const yamlFile = data;
console.log("YAML", yamlFile);
if (yamlFile == 0) {
toast.update(toastId, {
render: "No Layer 2 Config Present 🤯",
type: "error",
@@ -68,19 +64,22 @@ export default function InstallYaml() {
} 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.mainContainer}>
<p className={styles.mainText}>
<b>Yaml File Checker</b>
</p>
<div className={styles.formContainer}>
<Slider
label={checked ? "BPP" : "BAP"}
@@ -88,14 +87,17 @@ export default function InstallYaml() {
toggleChecked={setChecked}
/>
<InputField
label={"Enter Layer 2 URL"}
value={yamlUrl}
onChange={handleRegistryUrlChange}
placeholder="https://github/user/repo/blob/main/layer2.yaml"
label={"Container Name"}
value={checked ? "bpp-network" : "bap-network"}
/>
{/* <InputField
label={"Yaml Link"}
value={propertyLink}
onChange={handleYamlChange}
/> */}
<div className={styles.buttonsContainer}>
{/* <SecondaryButton text={"Cancel"} /> */}
<PrimaryButton onClick={installYaml} text={"Continue"} />
<PrimaryButton text={"Continue"} onClick={handleOnclick} />
</div>
</div>
</div>

64
onix-gui/onix/app/yaml-gen/option/bap/page.js Normal file
View File

@@ -0,0 +1,64 @@
"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>
</>
)
}

64
onix-gui/onix/app/yaml-gen/option/bpp/page.js Normal file
View File

@@ -0,0 +1,64 @@
"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>
</>
)
}

43
onix-gui/onix/app/yaml-gen/option/page.js Normal file
View File

@@ -0,0 +1,43 @@
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>
</>
)
}

122
onix-gui/onix/app/yaml-gen/page.js Normal file
View File

@@ -0,0 +1,122 @@
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>
</>
);
}

0
onix-gui/components/Buttons/Buttons.module.css → onix-gui/onix/components/Buttons/Buttons.module.css
View File

0
onix-gui/components/Buttons/PrimaryButton.js → onix-gui/onix/components/Buttons/PrimaryButton.js
View File

0
onix-gui/components/Buttons/SecondaryButton.jsx → onix-gui/onix/components/Buttons/SecondaryButton.jsx
View File

4
onix-gui/components/InputField/InputField.jsx → onix-gui/onix/components/InputField/InputField.jsx
View File

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

0
onix-gui/components/InputField/InputField.module.css → onix-gui/onix/components/InputField/InputField.module.css
View File

0
onix-gui/components/Slider/Slider.jsx → onix-gui/onix/components/Slider/Slider.jsx
View File

0
onix-gui/components/Slider/Slider.module.css → onix-gui/onix/components/Slider/Slider.module.css
View File

0
onix-gui/jsconfig.json → onix-gui/onix/jsconfig.json
View File

0
onix-gui/next.config.mjs → onix-gui/onix/next.config.mjs
View File

0
onix-gui/package-lock.json → onix-gui/onix/package-lock.json generated
View File

0
onix-gui/package.json → onix-gui/onix/package.json
View File

0
onix-gui/public/arrow.png → onix-gui/onix/public/arrow.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 261 B

After

Width:  |  Height:  |  Size: 261 B

3
onix-gui/scripts/start.sh → onix-gui/start.sh
View File

@@ -1,11 +1,10 @@
#!/bin/bash
# Set script variables
PROJECT_DIR="onix-gui"
PROJECT_DIR="onix"
PORT=3005
TUNNEL_SERVICE="lt"
npm install -g "$TUNNEL_SERVICE" &&
# Change to the project directory
cd "$PROJECT_DIR" || exit
npm i &&