140 lines
5.1 KiB
JavaScript
140 lines
5.1 KiB
JavaScript
"use client";
|
|
import React, { useState } from "react";
|
|
import TextField from "@/app/components/fields/textfield";
|
|
import TopHeader from "@/app/components/topHeader/TopHeader";
|
|
import TopToolTip from "@/app/components/topToolTip/TopToolTip";
|
|
import globalStyle from "../../globalStyle.module.css";
|
|
import createAgentStyle from "./styles.module.css";
|
|
import Prompts from "@/app/components/prompts/Prompts";
|
|
import useAgentForm from "@/app/hooks/useAgentForm";
|
|
import Alert from "@/app/components/alerts/Alert";
|
|
|
|
const AddAgentPage = () => {
|
|
const [isChecked, setIsChecked] = useState(false);
|
|
|
|
const handleCheckboxChange = (e) => {
|
|
setIsChecked(e.target.checked);
|
|
};
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
errors,
|
|
onSubmit,
|
|
triggerAlert,
|
|
setTriggerAlert,
|
|
} = useAgentForm();
|
|
|
|
return (
|
|
<div className={globalStyle.section}>
|
|
{triggerAlert && (
|
|
<Alert
|
|
setTriggerAlert={setTriggerAlert}
|
|
onClick={() => setEditState(true)}
|
|
title="Create New Agent"
|
|
/>
|
|
)}
|
|
<div className={globalStyle.mainContainer}>
|
|
<div className={globalStyle.container}>
|
|
<TopHeader
|
|
buttonText="Save"
|
|
cancelButtonText="Cancel"
|
|
topbarTitle="Create New Agent"
|
|
state="add"
|
|
requiredButtons={["title", "save"]}
|
|
/>
|
|
{/* Create agent Container */}
|
|
<div className={createAgentStyle.createAgentContainer}>
|
|
<TopToolTip />
|
|
<form
|
|
className={createAgentStyle.inputMainContainer}
|
|
id="form"
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
>
|
|
{/* Header */}
|
|
<div className={createAgentStyle.headerContainer}>
|
|
<div className={createAgentStyle.headerTxt}>
|
|
<p>Agent Details</p>
|
|
</div>
|
|
</div>
|
|
{/* Agent name input */}
|
|
<div className={createAgentStyle.inputContainer}>
|
|
{/* Label */}
|
|
<div className={createAgentStyle.labelContainer}>
|
|
<p>Agent Name</p>
|
|
<p className={createAgentStyle.required}>*</p>
|
|
</div>
|
|
{/* Input Field */}
|
|
<TextField
|
|
placeHolder="Enter agent name"
|
|
{...register("agentName", { required: true })}
|
|
hasError={!!errors.agentName}
|
|
/>
|
|
<Prompts show={false} />
|
|
</div>
|
|
{/* Kubernetes API input */}
|
|
<div className={createAgentStyle.inputContainer}>
|
|
{/* Label */}
|
|
<div className={createAgentStyle.labelContainer}>
|
|
<p>Kubernetes API Proxy Name</p>
|
|
<p className={createAgentStyle.required}>*</p>
|
|
</div>
|
|
{/* Input Field */}
|
|
<TextField
|
|
placeHolder="Enter proxy name"
|
|
{...register("proxyName", { required: true })}
|
|
hasError={!!errors.proxyName}
|
|
/>
|
|
<Prompts show={false} />
|
|
</div>
|
|
{/* Checkbox */}
|
|
<div className={createAgentStyle.checkboxMainContainer}>
|
|
<div className={createAgentStyle.checkboxContainer}>
|
|
<div className={createAgentStyle.checkbox}>
|
|
{/* Checkbox */}
|
|
<div className={createAgentStyle.check}>
|
|
<input
|
|
type="checkbox"
|
|
checked={isChecked}
|
|
onChange={handleCheckboxChange}
|
|
className={createAgentStyle.hiddenCheckbox}
|
|
/>
|
|
</div>
|
|
{/* List */}
|
|
<div className={createAgentStyle.list}>
|
|
<p className={createAgentStyle.placeholderTxt}>
|
|
Use Tailscale VPN
|
|
</p>
|
|
<p className={createAgentStyle.secondaryTxt}>
|
|
Enable Tailscale for secure private networking. When
|
|
enabled, <br /> the endpoint will be automatically
|
|
resolved from Tailscale.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* Agent endpoint */}
|
|
<div className={createAgentStyle.inputContainer}>
|
|
{/* Label */}
|
|
<div className={createAgentStyle.labelContainer}>
|
|
<p>Agent Endpoint</p>
|
|
<p className={createAgentStyle.required}>*</p>
|
|
</div>
|
|
{/* Input Field */}
|
|
<TextField
|
|
placeHolder="e.g., http://agent-01.example.com:8080"
|
|
{...register("agentEndpoint", { required: true })}
|
|
hasError={!!errors.agentEndpoint}
|
|
/>
|
|
<Prompts show={false} />
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AddAgentPage;
|