GUI for onix
This commit is contained in:
Mishalabdullah
132
onix-gui/app/setup/bap/page.js
Normal file
132
onix-gui/app/setup/bap/page.js
Normal file
@@ -0,0 +1,132 @@
|
||||
"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 { useState, useCallback } from "react";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
const ubuntuMono = Ubuntu_Mono({
|
||||
weight: "400",
|
||||
style: "normal",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export default function Home() {
|
||||
const [subscriberUrl, setSubscriberUrl] = useState("");
|
||||
const [subscriberId, setSubscriberId] = useState("");
|
||||
const [registryUrl, setRegistryUrl] = useState("");
|
||||
const [buttonDisable, setButtonDisable] = useState(false);
|
||||
const [networkconfigurl, setNetworkconfigurl] = useState("");
|
||||
|
||||
const handleSubscriberUrlChange = (event) => {
|
||||
setSubscriberUrl(event.target.value);
|
||||
};
|
||||
|
||||
const handleSubscriberIdChange = (event) => {
|
||||
setSubscriberId(event.target.value);
|
||||
};
|
||||
|
||||
const handleRegistryUrlChange = (event) => {
|
||||
setRegistryUrl(event.target.value);
|
||||
};
|
||||
|
||||
const handleNetworkconfigurlChange = (event) => {
|
||||
setNetworkconfigurl(event.target.value);
|
||||
};
|
||||
const installBap = useCallback(async () => {
|
||||
const toastId = toast.loading("Installing BAP...");
|
||||
setButtonDisable(true);
|
||||
try {
|
||||
const response = await fetch("/api/install-bap", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
subscriberUrl,
|
||||
subscriberId,
|
||||
registryUrl,
|
||||
networkconfigurl,
|
||||
}),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
console.log("BPP installed successfully");
|
||||
toast.update(toastId, {
|
||||
render: "BPP installed successfully 👌",
|
||||
type: "success",
|
||||
isLoading: false,
|
||||
autoClose: 5000,
|
||||
});
|
||||
} else {
|
||||
console.error("Failed to install BAP");
|
||||
toast.update(toastId, {
|
||||
render: "Failed to install BAP 🤯",
|
||||
type: "error",
|
||||
isLoading: false,
|
||||
autoClose: 5000,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("An error occurred:", error);
|
||||
toast.update(toastId, {
|
||||
render: "Bap installation done",
|
||||
type: "success",
|
||||
isLoading: false,
|
||||
autoClose: 5000,
|
||||
});
|
||||
}
|
||||
setButtonDisable(false);
|
||||
}, [subscriberUrl, subscriberId, registryUrl, networkconfigurl]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<main className={ubuntuMono.className}>
|
||||
<div className={styles.mainContainer}>
|
||||
<button
|
||||
onClick={() => window.history.back()}
|
||||
className={styles.backButton}
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<p className={styles.mainText}>BAP</p>
|
||||
<div className={styles.formContainer}>
|
||||
<InputField
|
||||
label={"Subscriber ID"}
|
||||
value={subscriberId}
|
||||
onChange={handleSubscriberIdChange}
|
||||
/>
|
||||
<InputField
|
||||
label={"Subscriber URL"}
|
||||
value={subscriberUrl}
|
||||
onChange={handleSubscriberUrlChange}
|
||||
/>
|
||||
|
||||
<InputField
|
||||
label={"Registry URL"}
|
||||
value={registryUrl}
|
||||
onChange={handleRegistryUrlChange}
|
||||
/>
|
||||
<InputField
|
||||
label={"Network Configuration URL"}
|
||||
value={networkconfigurl}
|
||||
onChange={handleNetworkconfigurlChange}
|
||||
/>
|
||||
|
||||
<div className={styles.buttonsContainer}>
|
||||
{/* <SecondaryButton text={"Cancel"} /> */}
|
||||
<PrimaryButton
|
||||
disabled={buttonDisable}
|
||||
onClick={installBap}
|
||||
text={"Continue"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
146
onix-gui/app/setup/bpp/page.js
Normal file
146
onix-gui/app/setup/bpp/page.js
Normal file
@@ -0,0 +1,146 @@
|
||||
"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 { useState, useCallback } from "react";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
const ubuntuMono = Ubuntu_Mono({
|
||||
weight: "400",
|
||||
style: "normal",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export default function Home() {
|
||||
const [subscriberUrl, setSubscriberUrl] = useState("");
|
||||
const [subscriberId, setSubscriberId] = useState("");
|
||||
const [registryUrl, setRegistryUrl] = useState("");
|
||||
const [networkconfigurl, setNetworkconfigurl] = useState("");
|
||||
const [webhookUrl, setWebhookUrl] = useState("");
|
||||
const [buttonDisable, setButtonDisable] = useState(false);
|
||||
const handleSubscriberUrlChange = (event) => {
|
||||
setSubscriberUrl(event.target.value);
|
||||
};
|
||||
|
||||
const handleSubscriberIdChange = (event) => {
|
||||
setSubscriberId(event.target.value);
|
||||
};
|
||||
|
||||
const handleRegistryUrlChange = (event) => {
|
||||
setRegistryUrl(event.target.value);
|
||||
};
|
||||
const handleNetworkconfigurlChange = (event) => {
|
||||
setNetworkconfigurl(event.target.value);
|
||||
};
|
||||
const handleWebhookUrlChange = (event) => {
|
||||
setWebhookUrl(event.target.value);
|
||||
};
|
||||
|
||||
const installBpp = useCallback(async () => {
|
||||
const toastId = toast.loading("Installing BPP...");
|
||||
setButtonDisable(true);
|
||||
try {
|
||||
const response = await toast.promise(
|
||||
fetch("/api/install-bpp", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
subscriberUrl: subscriberUrl,
|
||||
subscriberId: subscriberId,
|
||||
registryUrl: registryUrl,
|
||||
networkconfigurl: networkconfigurl,
|
||||
webhookUrl: webhookUrl,
|
||||
}),
|
||||
}),
|
||||
{
|
||||
success: "BPP installed successfully 👌",
|
||||
error: "Failed to install BPP 🤯",
|
||||
}
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
console.log("BPP installed successfully");
|
||||
toast.update(toastId, {
|
||||
render: "BPP installed successfully 👌",
|
||||
type: "success",
|
||||
isLoading: false,
|
||||
autoClose: 5000,
|
||||
});
|
||||
} else {
|
||||
console.error("Failed to install BPP");
|
||||
toast.update(toastId, {
|
||||
render: "Failed to install BPP 🤯",
|
||||
type: "error",
|
||||
isLoading: false,
|
||||
autoClose: 5000,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("An error occurred:", error);
|
||||
toast.update(toastId, {
|
||||
render: "An error occurred while installing BPP 😥",
|
||||
type: "error",
|
||||
isLoading: false,
|
||||
autoClose: 5000,
|
||||
});
|
||||
}
|
||||
setButtonDisable(false);
|
||||
}, [subscriberUrl, subscriberId, registryUrl, networkconfigurl, webhookUrl]);
|
||||
return (
|
||||
<>
|
||||
<main className={ubuntuMono.className}>
|
||||
<div className={styles.mainContainer}>
|
||||
<button
|
||||
onClick={() => window.history.back()}
|
||||
className={styles.backButton}
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<p className={styles.mainText}>BPP</p>
|
||||
<div className={styles.formContainer}>
|
||||
<InputField
|
||||
label={"Subscriber ID"}
|
||||
value={subscriberId}
|
||||
onChange={handleSubscriberIdChange}
|
||||
/>
|
||||
<InputField
|
||||
label={"Subscriber URL"}
|
||||
value={subscriberUrl}
|
||||
onChange={handleSubscriberUrlChange}
|
||||
/>
|
||||
|
||||
<InputField
|
||||
label={"Registry URL"}
|
||||
value={registryUrl}
|
||||
onChange={handleRegistryUrlChange}
|
||||
/>
|
||||
<InputField
|
||||
label={"Webhook URL"}
|
||||
value={webhookUrl}
|
||||
onChange={handleWebhookUrlChange}
|
||||
/>
|
||||
<InputField
|
||||
label={"Network Configuration URL"}
|
||||
value={networkconfigurl}
|
||||
onChange={handleNetworkconfigurlChange}
|
||||
/>
|
||||
|
||||
<div className={styles.buttonsContainer}>
|
||||
{/* <SecondaryButton text={"Cancel"} /> */}
|
||||
<PrimaryButton
|
||||
disable={buttonDisable}
|
||||
onClick={installBpp}
|
||||
text={"Continue"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
126
onix-gui/app/setup/gateway/page.js
Normal file
126
onix-gui/app/setup/gateway/page.js
Normal file
@@ -0,0 +1,126 @@
|
||||
"use client";
|
||||
|
||||
import InputField from "@/components/InputField/InputField";
|
||||
import styles from "../../page.module.css";
|
||||
import { Ubuntu_Mono } from "next/font/google";
|
||||
import { useState, useCallback } from "react";
|
||||
import SecondaryButton from "@/components/Buttons/SecondaryButton";
|
||||
import PrimaryButton from "@/components/Buttons/PrimaryButton";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
const ubuntuMono = Ubuntu_Mono({
|
||||
weight: "400",
|
||||
style: "normal",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export default function Home() {
|
||||
let pathname = usePathname();
|
||||
const [gatewayUrl, setGatewayUrl] = useState("");
|
||||
const [registryUrl, setRegistryUrl] = useState("");
|
||||
const [networkconfigurl, setNetworkconfigurl] = useState("");
|
||||
|
||||
const handleGatewayUrlChange = (event) => {
|
||||
setGatewayUrl(event.target.value);
|
||||
};
|
||||
const handleRegistryUrlChange = (event) => {
|
||||
setRegistryUrl(event.target.value);
|
||||
};
|
||||
const handleNetworkconfigurlChange = (event) => {
|
||||
setNetworkconfigurl(event.target.value);
|
||||
};
|
||||
|
||||
const installGateway = useCallback(async () => {
|
||||
const toastId = toast.loading("Installing gateway...");
|
||||
|
||||
try {
|
||||
const response = await toast.promise(
|
||||
fetch("/api/install-gateway", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
gatewayUrl: gatewayUrl,
|
||||
registryUrl: registryUrl,
|
||||
networkconfigurl: networkconfigurl,
|
||||
}),
|
||||
}),
|
||||
{
|
||||
success: "gateway installed successfully 👌",
|
||||
error: "Failed to install BAP 🤯",
|
||||
}
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
console.log("Gateway installed successfully");
|
||||
toast.update(toastId, {
|
||||
render: "Gateway installed successfully 👌",
|
||||
type: "success",
|
||||
isLoading: false,
|
||||
autoClose: 5000,
|
||||
});
|
||||
} else {
|
||||
console.error("Failed to install gateway");
|
||||
toast.update(toastId, {
|
||||
render: "Failed to install gateway 🤯",
|
||||
type: "error",
|
||||
isLoading: false,
|
||||
autoClose: 5000,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("An error occurred:", error);
|
||||
toast.update(toastId, {
|
||||
render: "An error occurred while installing the gateway 😥",
|
||||
type: "error",
|
||||
isLoading: false,
|
||||
autoClose: 5000,
|
||||
});
|
||||
}
|
||||
}, [gatewayUrl, registryUrl, networkconfigurl]);
|
||||
return (
|
||||
<>
|
||||
<main className={ubuntuMono.className}>
|
||||
<div className={styles.mainContainer}>
|
||||
<button
|
||||
onClick={() => window.history.back()}
|
||||
className={styles.backButton}
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<p className={styles.mainText}>Gateway</p>
|
||||
<div className={styles.formContainer}>
|
||||
{/* To do todo
|
||||
1. Create a check function so that the url formats are correct
|
||||
2. Send response when installing and also erros that happen when an envet happens to the user
|
||||
3. a gear dialog where the user's can specify to where the beckn repo to be cloned.
|
||||
*/}
|
||||
|
||||
<InputField
|
||||
label={"Publicly Accessible Gateway URL"}
|
||||
value={gatewayUrl}
|
||||
onChange={handleGatewayUrlChange}
|
||||
/>
|
||||
<InputField
|
||||
label={"Registry URL"}
|
||||
value={registryUrl}
|
||||
onChange={handleRegistryUrlChange}
|
||||
/>
|
||||
<InputField
|
||||
label={"Network Configuration URL"}
|
||||
value={networkconfigurl}
|
||||
onChange={handleNetworkconfigurlChange}
|
||||
/>
|
||||
|
||||
<div className={styles.buttonsContainer}>
|
||||
{/* <SecondaryButton text={"Cancel"} /> */}
|
||||
<PrimaryButton onClick={installGateway} text={"Continue"} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
96
onix-gui/app/setup/registry/page.js
Normal file
96
onix-gui/app/setup/registry/page.js
Normal file
@@ -0,0 +1,96 @@
|
||||
"use client";
|
||||
import SecondaryButton from "@/components/Buttons/SecondaryButton";
|
||||
import styles from "../../page.module.css";
|
||||
import { Ubuntu_Mono } from "next/font/google";
|
||||
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 Home() {
|
||||
const [registryUrl, setRegistryUrl] = useState("");
|
||||
|
||||
const handleRegistryUrlChange = (event) => {
|
||||
setRegistryUrl(event.target.value);
|
||||
};
|
||||
|
||||
const installRegistry = useCallback(async () => {
|
||||
const toastId = toast.loading("Installing registry...");
|
||||
|
||||
try {
|
||||
const response = await toast.promise(
|
||||
fetch("/api/install-registry", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ registryUrl: registryUrl }),
|
||||
}),
|
||||
{
|
||||
success: "registry installed successfully 👌",
|
||||
error: "Failed to install registry 🤯",
|
||||
}
|
||||
);
|
||||
console.log("console.log of response", response);
|
||||
|
||||
if (response.ok) {
|
||||
console.log("Repository cloned successfully");
|
||||
toast.update(toastId, {
|
||||
render: "Registry installed successfully 👌",
|
||||
type: "success",
|
||||
isLoading: false,
|
||||
autoClose: 5000,
|
||||
});
|
||||
} else {
|
||||
console.error("Failed to clone repository");
|
||||
toast.update(toastId, {
|
||||
render: "Failed to install registry 🤯",
|
||||
type: "error",
|
||||
isLoading: false,
|
||||
autoClose: 5000,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("An error occurred:", error);
|
||||
toast.update(toastId, {
|
||||
render: "An error occurred while installing the registry 😥",
|
||||
type: "error",
|
||||
isLoading: false,
|
||||
autoClose: 5000,
|
||||
});
|
||||
}
|
||||
}, [registryUrl]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<main className={ubuntuMono.className}>
|
||||
<div className={styles.mainContainer}>
|
||||
<button
|
||||
onClick={() => window.history.back()}
|
||||
className={styles.backButton}
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<p className={styles.mainText}>Registry</p>
|
||||
<div className={styles.formContainer}>
|
||||
<InputField
|
||||
label={"Public Registry URL"}
|
||||
value={registryUrl}
|
||||
onChange={handleRegistryUrlChange}
|
||||
/>
|
||||
<div className={styles.buttonsContainer}>
|
||||
{/* <SecondaryButton text={"Cancel"} /> */}
|
||||
<PrimaryButton onClick={installRegistry} text={"Continue"} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user