Skip to content

Commit c731756

Browse files
viktoriaasviktoriaas
committed
finish gatherDataFromScript
1 parent d2d9427 commit c731756

File tree

2 files changed

+96
-10
lines changed

2 files changed

+96
-10
lines changed

‎src/FormPage.jsx‎

Lines changed: 59 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ import {
2121
defaultImagesName,
2222
} from "./data/formData";
2323
import { gatherFormData } from "./scripts/gatherFormData";
24-
impimport { faCodePullRequest } from "@fortawesome/free-solid-svg-icons";
24+
import { faCodePullRequest } from "@fortawesome/free-solid-svg-icons";
25+
import {ListObjectsCommand, S3Client} from "@aws-sdk/client-s3";
2526

2627
const StepOne = ({ setFormData, defaultFormData }) => {
2728
const [activeDropdownIndex, setActiveDropdownIndex] = useState(null);
@@ -30,15 +31,17 @@ const StepOne = ({ setFormData, defaultFormData }) => {
3031
const [activeDropdownOptionIndex, setActiveDropdownOptionIndex] = useState(null);
3132

3233
useEffect(() => {
33-
if (defaultFormData) {
34-
if (defaultFormData.notebookImage) {
34+
if (defaultFormData && defaultFormData.notebookImage) {
35+
3536
const text = defaultFormData.notebookImage.type;
3637
if (text === "customnb") {
3738
handleInputChange({
3839
target: {
3940
value: defaultFormData.notebookImage.selectedOption,
4041
},
4142
}, Object.entries(images).length + 1)
43+
} else if (text === null){
44+
return
4245
} else {
4346
const key = Object.keys(defaultImagesName).find((key) => defaultImagesName[key] === text);
4447
const dindex = Object.keys(images).indexOf(key);
@@ -55,8 +58,6 @@ const StepOne = ({ setFormData, defaultFormData }) => {
5558
handleSshCheck(defaultFormData.notebookImage.sshAccess);
5659
setCheckSsh(defaultFormData.notebookImage.sshAccess);
5760
}
58-
59-
}
6061
}, []);
6162

6263
const handleSelect = (key, image, index, dindex) => {
@@ -169,22 +170,23 @@ const StepOne = ({ setFormData, defaultFormData }) => {
169170
);
170171
};
171172

172-
const StepTwo = ({ setFormData, formData, defaultFormData, checkedS3Storage, handleS3Check, s3SelectionType, setS3SelectionType, s3values}) => {
173+
const StepTwo = ({ setFormData, formData, defaultFormData, checkedS3Storage, setCheckedS3Storage, handleS3Check, s3SelectionType, setS3SelectionType, s3values}) => {
173174
const [activeDropdownIndex, setActiveDropdownIndex] = useState(null);
174175
const [s3activeDropdownIndex, sets3ActiveDropdownIndex] = useState(null);
175176
const [defaultOptionPhname, setDefaultOptionPhname] = useState(null);
176177
const [checkedErased, setCheckErased] = useState(false);
177178
const [checkedDirectories, setCheckedDirectories] = useState(false);
178179
const [checkedStorage, setCheckedStorage] = useState(false);
180+
const [defaultOptionS3name, setDefaultOptionS3name] = useState(false);
179181

180182
const [defaultHome, setDefaultHome] = useState(false);
181183
const [checkedMount, setCheckedMount] = useState(false);
182184

185+
183186
useEffect(() => {
184187
if (defaultFormData) {
185188
if (defaultFormData.persistentHome) {
186189

187-
188190
const text = defaultFormData.persistentHome.type;
189191
setFormData((prev) => ({
190192
...prev,
@@ -257,6 +259,43 @@ const StepTwo = ({ setFormData, formData, defaultFormData, checkedS3Storage, han
257259
}
258260
}
259261

262+
const s3enabled = defaultFormData.s3Storage;
263+
264+
if (s3enabled) {
265+
const enabled = s3enabled.enabled
266+
if (enabled) {
267+
setFormData((prev) => ({
268+
...prev,
269+
s3check: "yes"
270+
}));
271+
}
272+
setCheckedS3Storage(enabled);
273+
274+
const s3TypeText = defaultFormData.s3Storage.type;
275+
setFormData((prev) => ({
276+
...prev,
277+
s3selection: s3TypeText,
278+
}));
279+
sets3ActiveDropdownIndex(s3TypeText === "new" ? 1 : 0);
280+
const existingS3 = defaultFormData.s3Storage.existings3;
281+
if (existingS3) {
282+
setS3SelectionType('existing');
283+
const name = defaultFormData.s3Storage.existings3.value;
284+
setFormData((prev) => ({
285+
...prev,
286+
s3name: name,
287+
}));
288+
setDefaultOptionS3name([name, name]);
289+
}
290+
const newS3 = defaultFormData.s3Storage.news3;
291+
if (newS3) {
292+
setS3SelectionType('new');
293+
setS3Url(newS3.s3Url);
294+
setS3Bucket(newS3.s3Bucket);
295+
setS3AccessKey(newS3.s3AccessKey);
296+
setS3SecretKey(newS3.s3SecretKey);
297+
}
298+
}
260299
}
261300
}, []);
262301

@@ -514,6 +553,7 @@ const StepTwo = ({ setFormData, formData, defaultFormData, checkedS3Storage, han
514553
formSelect={handleS3Buckets}
515554
title="Select S3 Bucket"
516555
menuOptions={s3values}
556+
defaultOption={defaultOptionS3name}
517557
></DropDownMenu>
518558
</DropDownButton>
519559

@@ -535,8 +575,10 @@ const StepTwo = ({ setFormData, formData, defaultFormData, checkedS3Storage, han
535575
<input
536576
title="S3 URL"
537577
type="text"
538-
onChange={(e) => setS3Url(e.target.value)}
578+
value={formData.s3url}
579+
// value = ""https://s3.cloud.e-infra.cz"
539580
placeholder="https://s3.cloud.e-infra.cz"
581+
onChange={(e) => setS3Url(e.target.value)}
540582
className="custom-option"
541583
style={{
542584
border: '1px solid #ccc', // Solid line border
@@ -550,6 +592,7 @@ const StepTwo = ({ setFormData, formData, defaultFormData, checkedS3Storage, han
550592
<input
551593
title="Bucket Name"
552594
type="text"
595+
value={formData.s3bucket}
553596
onChange={(e) => setS3Bucket(e.target.value)}
554597
placeholder="example-bucket"
555598
className="custom-option"
@@ -566,6 +609,7 @@ const StepTwo = ({ setFormData, formData, defaultFormData, checkedS3Storage, han
566609
title="Access Key"
567610
type="text"
568611
onChange={(e) => setS3AccessKey(e.target.value)}
612+
value={formData.s3accesskey}
569613
placeholder="s3AccessKey"
570614
className="custom-option"
571615
style={{
@@ -580,6 +624,7 @@ const StepTwo = ({ setFormData, formData, defaultFormData, checkedS3Storage, han
580624
<input
581625
title="Secret Key"
582626
type="text"
627+
value={formData.s3secretkey}
583628
onChange={(e) => setS3SecretKey(e.target.value)}
584629
placeholder="s3SecretKey"
585630
className="custom-option"
@@ -863,6 +908,10 @@ function FormPage() {
863908
cpuselection: 1,
864909
gpuselection: "none",
865910
migamount: 1,
911+
s3url: "https://s3.cloud.e-infra.cz",
912+
s3bucket: "",
913+
s3accesskey: "",
914+
s3secretkey: "",
866915
});
867916

868917
const submitForm = async () => {
@@ -911,7 +960,7 @@ function FormPage() {
911960
if (checkedS3Storage && s3SelectionType === "new") {
912961
const response = await validateS3Credentials();
913962
if (!response) {
914-
setError("Invalid S3 credentials/bucket/S3 url. Check if inputs are correct.");
963+
setError("Invalid S3 credentials/bucket/S3 url - cannot connect to the bucket.\n\nCheck inputs are correct.");
915964
return;
916965
}
917966
}
@@ -946,7 +995,7 @@ function FormPage() {
946995
const steps = [
947996
<StepOne key={0} formData={formData} setFormData={setFormData} defaultFormData={defaultFormData} />,
948997
<StepTwo key={1} formData={formData} setFormData={setFormData} defaultFormData={defaultFormData}
949-
checkedS3Storage={checkedS3Storage} handleS3Check={handleS3Check} s3SelectionType={s3SelectionType}
998+
checkedS3Storage={checkedS3Storage} setCheckedS3Storage={setCheckedS3Storage} handleS3Check={handleS3Check} s3SelectionType={s3SelectionType}
950999
setS3SelectionType={setS3SelectionType} s3values={s3values}/>,
9511000
<StepThree key={2} formData={formData} setFormData={setFormData} defaultFormData={defaultFormData} />,
9521001
];

‎src/scripts/gatherFormData.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,41 @@ function getPersistentHomeSelection() {
9191
return null;
9292
}
9393

94+
function getS3StorageSelection() {
95+
const checkedS3 = document.getElementById('s3check')
96+
97+
const s3data = {
98+
enabled: checkedS3 && checkedS3.checked
99+
}
100+
101+
if (checkedS3 && checkedS3.checked) {
102+
const s3TypeField = document.getElementById('ss3id')
103+
// const s3TypeField = document.querySelector('input[name="s3selection"]:checked');
104+
if (s3TypeField) {
105+
s3data.type = s3TypeField.value;
106+
if (s3TypeField.value === "new") {
107+
s3data.news3 = {
108+
s3Url : document.getElementById('s3url').value,
109+
s3Bucket : document.getElementById('s3bucket').value,
110+
s3AccessKey : document.getElementById('s3accesskey').value,
111+
s3SecretKey : document.getElementById('s3secretkey').value,
112+
}
113+
} else if (s3TypeField.value === "existing") {
114+
const s3ExistingPvcField = document.getElementById("s3id")
115+
if (s3ExistingPvcField) {
116+
s3data.existings3 = {
117+
value: s3ExistingPvcField.value,
118+
text: s3ExistingPvcField.options[s3ExistingPvcField.selectedIndex].text
119+
}
120+
}
121+
}
122+
}
123+
return s3data;
124+
}
125+
126+
return null;
127+
}
128+
94129
function getNotebookImageSelection() {
95130
const checkedRadio = document.querySelector('input[name="images"]:checked');
96131
const notebookImageData = { type: null, selectedOption: null, sshAccess: null };
@@ -147,8 +182,10 @@ export function gatherFormData() {
147182
metaCentrumHome: getMetaCentrumHomeSelection(),
148183
projectDirectories: getProjectSelection(),
149184
persistentHome: getPersistentHomeSelection(),
185+
s3Storage: getS3StorageSelection(),
150186
notebookImage: getNotebookImageSelection()
151187
};
188+
console.log('defaultFormData:', formData);
152189

153190
const allEmpty = Object.values(formData).every(isEmpty);
154191

0 commit comments

Comments
 (0)