Laux/Frontend-Internal-Developer-Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed agents add and view desktop

Browse Source
This commit is contained in:
benzbarquilla
2026-03-19 09:29:25 +08:00
parent 14884f6b3a
commit 8c776a5491
3 changed files with 87 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
frontend/src/app/agents/[agentsId]/page.jsx
View File

@@ -11,8 +11,8 @@ import Alert from "@/app/components/alerts/Alert";
import Checkbox from "@/app/components/customCheckbox/Checkbox"; import Checkbox from "@/app/components/customCheckbox/Checkbox";
const ViewAgentPage = () => { const ViewAgentPage = () => {
const [useVpn, setUseVpn] = useState(true); const [useVpn, setUseVpn] = useState(false);
const [enableLoki, setEnableLoki] = useState(true); const [enableLoki, setEnableLoki] = useState(false);
const { const {
register, register,
handleSubmit, handleSubmit,
@@ -90,35 +90,51 @@ const ViewAgentPage = () => {
</> </>
} }
/> />
{/* Agent endpoint */} {useVpn ? (
<div className={createAgentStyle.inputContainer}> <>
<div className={createAgentStyle.labelContainer}> <div className={createAgentStyle.inputContainer}>
<p>Tailscale Device Prefix</p> <div className={createAgentStyle.labelContainer}>
{/* <p className={createAgentStyle.required}>*</p> */} <p>Tailscale Device Prefix</p>
<p className={createAgentStyle.required}>*</p>
</div>
<TextField
placeHolder="doks-onecbdev-agent"
{...register("agentEndpoint", { required: true })}
hasError={!!errors.agentEndpoint}
/>
<Prompts show={false} />
</div>
<div className={createAgentStyle.inputContainer}>
<div className={createAgentStyle.labelContainer}>
<p>Tailscale Port</p>
<p className={createAgentStyle.required}>*</p>
</div>
<TextField
placeHolder="6969"
{...register("agentEndpoint", { required: true })}
hasError={!!errors.agentEndpoint}
/>
<Prompts show={false} />
</div>
</>
) : (
<div className={createAgentStyle.inputContainer}>
<div className={createAgentStyle.labelContainer}>
<p>Agent Endpoint</p>
<p className={createAgentStyle.required}>*</p>
</div>
<TextField
placeHolder="e.g., http://agent-01.example.com:8080"
{...register("agentEndpoint", { required: true })}
hasError={!!errors.agentEndpoint}
/>
<Prompts show={false} />
</div> </div>
<TextField )}
placeHolder="doks-onecbdev-agent"
{...register("agentEndpoint", { required: true })}
hasError={!!errors.agentEndpoint}
/>
<Prompts show={false} />
</div>
<div className={createAgentStyle.inputContainer}>
<div className={createAgentStyle.labelContainer}>
<p>Tailscale Port</p>
{/* <p className={createAgentStyle.required}>*</p> */}
</div>
<TextField
placeHolder="6969"
{...register("agentEndpoint", { required: true })}
hasError={!!errors.agentEndpoint}
/>
<Prompts show={false} />
</div>
</div> </div>
<div className={createAgentStyle.lokiContainer}> <div className={createAgentStyle.lokiContainer}>
{/* Header */}
<div className={createAgentStyle.headerContainer}> <div className={createAgentStyle.headerContainer}>
<div className={createAgentStyle.headerTxt}> <div className={createAgentStyle.headerTxt}>
<p>Loki Integration (Optional)</p> <p>Loki Integration (Optional)</p>

54
frontend/src/app/agents/add/page.jsx
View File

@@ -48,7 +48,6 @@ const AddAgentPage = () => {
onSubmit={handleSubmit(onSubmit)} onSubmit={handleSubmit(onSubmit)}
> >
<div className={createAgentStyle.createAgentContainer}> <div className={createAgentStyle.createAgentContainer}>
<div className={createAgentStyle.div}></div>
<div className={createAgentStyle.inputMainContainer}> <div className={createAgentStyle.inputMainContainer}>
{/* AGENT FORM */} {/* AGENT FORM */}
<div className={createAgentStyle.headerContainer}> <div className={createAgentStyle.headerContainer}>
@@ -93,19 +92,48 @@ const AddAgentPage = () => {
</> </>
} }
/> />
{/* Agent endpoint */} {useVpn ? (
<div className={createAgentStyle.inputContainer}> <>
<div className={createAgentStyle.labelContainer}> <div className={createAgentStyle.inputContainer}>
<p>Agent Endpoint</p> <div className={createAgentStyle.labelContainer}>
<p className={createAgentStyle.required}>*</p> <p>Tailscale Device Prefix</p>
<p className={createAgentStyle.required}>*</p>
</div>
<TextField
placeHolder="doks-onecbdev-agent"
{...register("agentEndpoint", { required: true })}
hasError={!!errors.agentEndpoint}
/>
<Prompts show={false} />
</div>
<div className={createAgentStyle.inputContainer}>
<div className={createAgentStyle.labelContainer}>
<p>Tailscale Port</p>
<p className={createAgentStyle.required}>*</p>
</div>
<TextField
placeHolder="6969"
{...register("agentEndpoint", { required: true })}
hasError={!!errors.agentEndpoint}
/>
<Prompts show={false} />
</div>
</>
) : (
<div className={createAgentStyle.inputContainer}>
<div className={createAgentStyle.labelContainer}>
<p>Agent Endpoint</p>
<p className={createAgentStyle.required}>*</p>
</div>
<TextField
placeHolder="e.g., http://agent-01.example.com:8080"
{...register("agentEndpoint", { required: true })}
hasError={!!errors.agentEndpoint}
/>
<Prompts show={false} />
</div> </div>
<TextField )}
placeHolder="e.g., http://agent-01.example.com:8080"
{...register("agentEndpoint", { required: true })}
hasError={!!errors.agentEndpoint}
/>
<Prompts show={false} />
</div>
</div> </div>
<div className={createAgentStyle.lokiContainer}> <div className={createAgentStyle.lokiContainer}>

14
frontend/src/app/agents/add/styles.module.css
View File

@@ -4,7 +4,6 @@
align-items: flex-start; align-items: flex-start;
gap: 10px; gap: 10px;
flex: 1 0 0; flex: 1 0 0;
padding-top: 48px;
align-self: stretch; align-self: stretch;
} }
@@ -14,9 +13,10 @@
align-items: flex-start; align-items: flex-start;
align-self: stretch; align-self: stretch;
/* Ibalhin ni ang padding sa formcontainer maoang nasa figma */ /* Ibalhin ni ang padding sa formcontainer maoang nasa figma */
padding-top: 48px;
gap: 16px; gap: 16px;
flex: 1 1 auto; flex: 1 1 auto;
height: calc(100vh - 100px - 48px - 110px); height: calc(100vh - 100px - 5px - 110px);
overflow-y: auto; overflow-y: auto;
scrollbar-width: none; scrollbar-width: none;
} }
@@ -31,17 +31,9 @@
.headerContainer { .headerContainer {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 17px;
align-self: stretch; align-self: stretch;
} }
.headerContainer > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 5px;
flex: 1 0 0;
}
.headerTxt > p { .headerTxt > p {
/* width: 163px; */ /* width: 163px; */
align-self: stretch; align-self: stretch;