From affff04a7446ebff3053b097c688e35d0e1892eb Mon Sep 17 00:00:00 2001 From: frederick Date: Wed, 24 Jun 2026 13:03:08 +0100 Subject: [PATCH 1/6] Adding workflows Resource component to the epsic part of imaginghub --- .../src/components/workflows/ResourceForm.tsx | 93 +++++++++++++++++++ 1 file changed, 93 insertions(+) create mode 100644 frontend/ePSIC/src/components/workflows/ResourceForm.tsx diff --git a/frontend/ePSIC/src/components/workflows/ResourceForm.tsx b/frontend/ePSIC/src/components/workflows/ResourceForm.tsx new file mode 100644 index 0000000..e6ca093 --- /dev/null +++ b/frontend/ePSIC/src/components/workflows/ResourceForm.tsx @@ -0,0 +1,93 @@ +import React, { FC, ChangeEvent, useState } from "react"; +import { + Button, + MenuItem, + IconButton, + InputLabel, + Grid, + Select, + Stack, + TextField, + Tooltip, + Typography, + NumberField +} from "@mui/material"; + +type FormRes = { cpus: string, gpus: string, nprocs: string; memory: string }; + +const initialData: FormRes = { + cpus: "1", + gpus: "0", + nprocs: "8", + memory: "16Gi", +}; + +export const ResourceForm: FC = () => { + const [res, setRes] = useState(initialData); + + return ( + + + + + Resources + + ) => { + const value = e.target.value; + setRes((prev) => ({ ...prev, cpus: value})); + }} + /> + ) => { + const value = e.target.value; + setRes((prev) => ({ ...prev, gpus: value})); + }} + /> + ) => { + const value = e.target.value; + setRes((prev) => ({ ...prev, nprocs: value})); + }} + /> + ) => { + const value = e.target.value; + setRes((prev) => ({ ...prev, memory: value})); + }} + /> + + + + ); +}; + +export default ResourceForm; From aa2389802645e7964ab8b8699f7e0b8c1541997c Mon Sep 17 00:00:00 2001 From: frederick Date: Wed, 24 Jun 2026 13:09:41 +0100 Subject: [PATCH 2/6] use new resource component in the epsic page --- frontend/ePSIC/src/App.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/ePSIC/src/App.tsx b/frontend/ePSIC/src/App.tsx index b5a41bd..b043312 100644 --- a/frontend/ePSIC/src/App.tsx +++ b/frontend/ePSIC/src/App.tsx @@ -1,9 +1,11 @@ import { WorkflowForm } from "./components/workflows/WorkflowForm"; +import { ResourceForm } from "./components/workflows/ResourceForm"; export const App: React.FC = () => { return ( <> + ); }; From 9e4bf0e2779fb1e0dc3086bdf9c0b9839a8b614f Mon Sep 17 00:00:00 2001 From: frederick Date: Wed, 24 Jun 2026 14:05:01 +0100 Subject: [PATCH 3/6] attempting a fix for the linting error --- .../ePSIC/src/components/workflows/ResourceForm.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/ePSIC/src/components/workflows/ResourceForm.tsx b/frontend/ePSIC/src/components/workflows/ResourceForm.tsx index e6ca093..2d17a47 100644 --- a/frontend/ePSIC/src/components/workflows/ResourceForm.tsx +++ b/frontend/ePSIC/src/components/workflows/ResourceForm.tsx @@ -10,10 +10,10 @@ import { TextField, Tooltip, Typography, - NumberField + NumberField, } from "@mui/material"; -type FormRes = { cpus: string, gpus: string, nprocs: string; memory: string }; +type FormRes = { cpus: string; gpus: string; nprocs: string; memory: string }; const initialData: FormRes = { cpus: "1", @@ -42,7 +42,7 @@ export const ResourceForm: FC = () => { value={res.cpus} onChange={(e: ChangeEvent) => { const value = e.target.value; - setRes((prev) => ({ ...prev, cpus: value})); + setRes((prev) => ({ ...prev, cpus: value })); }} /> { value={res.gpus} onChange={(e: ChangeEvent) => { const value = e.target.value; - setRes((prev) => ({ ...prev, gpus: value})); + setRes((prev) => ({ ...prev, gpus: value })); }} /> { value={res.nprocs} onChange={(e: ChangeEvent) => { const value = e.target.value; - setRes((prev) => ({ ...prev, nprocs: value})); + setRes((prev) => ({ ...prev, nprocs: value })); }} /> { value={res.memory} onChange={(e: ChangeEvent) => { const value = e.target.value; - setRes((prev) => ({ ...prev, memory: value})); + setRes((prev) => ({ ...prev, memory: value })); }} /> From aa1fde9a6b41b0e5ce19f13e2d7955a465f7117d Mon Sep 17 00:00:00 2001 From: frederick Date: Wed, 22 Jul 2026 10:15:03 +0100 Subject: [PATCH 4/6] moving the Resource component from ePSIC into newly created shared_components --- frontend/ePSIC/src/App.tsx | 2 +- .../workflows => shared_components}/ResourceForm.tsx | 7 +++---- 2 files changed, 4 insertions(+), 5 deletions(-) rename frontend/{ePSIC/src/components/workflows => shared_components}/ResourceForm.tsx (95%) diff --git a/frontend/ePSIC/src/App.tsx b/frontend/ePSIC/src/App.tsx index b043312..a04e7f2 100644 --- a/frontend/ePSIC/src/App.tsx +++ b/frontend/ePSIC/src/App.tsx @@ -1,5 +1,5 @@ import { WorkflowForm } from "./components/workflows/WorkflowForm"; -import { ResourceForm } from "./components/workflows/ResourceForm"; +import { ResourceForm } from "../../shared_components/ResourceForm"; export const App: React.FC = () => { return ( diff --git a/frontend/ePSIC/src/components/workflows/ResourceForm.tsx b/frontend/shared_components/ResourceForm.tsx similarity index 95% rename from frontend/ePSIC/src/components/workflows/ResourceForm.tsx rename to frontend/shared_components/ResourceForm.tsx index 2d17a47..d216085 100644 --- a/frontend/ePSIC/src/components/workflows/ResourceForm.tsx +++ b/frontend/shared_components/ResourceForm.tsx @@ -10,7 +10,6 @@ import { TextField, Tooltip, Typography, - NumberField, } from "@mui/material"; type FormRes = { cpus: string; gpus: string; nprocs: string; memory: string }; @@ -26,8 +25,8 @@ export const ResourceForm: FC = () => { const [res, setRes] = useState(initialData); return ( - - + + Resources @@ -60,7 +59,7 @@ export const ResourceForm: FC = () => { /> Date: Wed, 22 Jul 2026 11:22:47 +0100 Subject: [PATCH 5/6] changing the type of cpus, gpus and nprocs to number instead of text. also removing uneeded imports --- frontend/shared_components/ResourceForm.tsx | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/frontend/shared_components/ResourceForm.tsx b/frontend/shared_components/ResourceForm.tsx index d216085..0a8fb32 100644 --- a/frontend/shared_components/ResourceForm.tsx +++ b/frontend/shared_components/ResourceForm.tsx @@ -1,15 +1,9 @@ -import React, { FC, ChangeEvent, useState } from "react"; +import { FC, ChangeEvent, useState } from "react"; import { - Button, - MenuItem, - IconButton, InputLabel, Grid, - Select, Stack, TextField, - Tooltip, - Typography, } from "@mui/material"; type FormRes = { cpus: string; gpus: string; nprocs: string; memory: string }; @@ -37,7 +31,7 @@ export const ResourceForm: FC = () => { variant="outlined" size="small" placeholder="8" - type="text" + type="number" value={res.cpus} onChange={(e: ChangeEvent) => { const value = e.target.value; @@ -50,7 +44,7 @@ export const ResourceForm: FC = () => { variant="outlined" size="small" placeholder="1" - type="text" + type="number" value={res.gpus} onChange={(e: ChangeEvent) => { const value = e.target.value; @@ -63,7 +57,7 @@ export const ResourceForm: FC = () => { variant="outlined" size="small" placeholder="8" - type="text" + type="number" value={res.nprocs} onChange={(e: ChangeEvent) => { const value = e.target.value; From b3a9148766b226beb62f600141f58b867c3cfe22 Mon Sep 17 00:00:00 2001 From: frederick Date: Wed, 22 Jul 2026 11:25:44 +0100 Subject: [PATCH 6/6] corrected formatting --- frontend/shared_components/ResourceForm.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/frontend/shared_components/ResourceForm.tsx b/frontend/shared_components/ResourceForm.tsx index 0a8fb32..b408362 100644 --- a/frontend/shared_components/ResourceForm.tsx +++ b/frontend/shared_components/ResourceForm.tsx @@ -1,10 +1,5 @@ import { FC, ChangeEvent, useState } from "react"; -import { - InputLabel, - Grid, - Stack, - TextField, -} from "@mui/material"; +import { InputLabel, Grid, Stack, TextField } from "@mui/material"; type FormRes = { cpus: string; gpus: string; nprocs: string; memory: string };