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

28
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";
const ViewAgentPage = () => {
const [useVpn, setUseVpn] = useState(true);
const [enableLoki, setEnableLoki] = useState(true);
const [useVpn, setUseVpn] = useState(false);
const [enableLoki, setEnableLoki] = useState(false);
const {
register,
handleSubmit,
@@ -90,11 +90,12 @@ const ViewAgentPage = () => {
</>
}
/>
{/* Agent endpoint */}
{useVpn ? (
<>
<div className={createAgentStyle.inputContainer}>
<div className={createAgentStyle.labelContainer}>
<p>Tailscale Device Prefix</p>
{/* <p className={createAgentStyle.required}>*</p> */}
<p className={createAgentStyle.required}>*</p>
</div>
<TextField
placeHolder="doks-onecbdev-agent"
@@ -103,10 +104,11 @@ const ViewAgentPage = () => {
/>
<Prompts show={false} />
</div>
<div className={createAgentStyle.inputContainer}>
<div className={createAgentStyle.labelContainer}>
<p>Tailscale Port</p>
{/* <p className={createAgentStyle.required}>*</p> */}
<p className={createAgentStyle.required}>*</p>
</div>
<TextField
placeHolder="6969"
@@ -115,10 +117,24 @@ const ViewAgentPage = () => {
/>
<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>
<div className={createAgentStyle.lokiContainer}>
{/* Header */}
<div className={createAgentStyle.headerContainer}>
<div className={createAgentStyle.headerTxt}>
<p>Loki Integration (Optional)</p>

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

@@ -48,7 +48,6 @@ const AddAgentPage = () => {
onSubmit={handleSubmit(onSubmit)}
>
<div className={createAgentStyle.createAgentContainer}>
<div className={createAgentStyle.div}></div>
<div className={createAgentStyle.inputMainContainer}>
{/* AGENT FORM */}
<div className={createAgentStyle.headerContainer}>
@@ -93,7 +92,35 @@ const AddAgentPage = () => {
</>
}
/>
{/* Agent endpoint */}
{useVpn ? (
<>
<div className={createAgentStyle.inputContainer}>
<div className={createAgentStyle.labelContainer}>
<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>
@@ -106,6 +133,7 @@ const AddAgentPage = () => {
/>
<Prompts show={false} />
</div>
)}
</div>
<div className={createAgentStyle.lokiContainer}>

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

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