diff --git a/.gitignore b/.gitignore
index 8668582..ae40786 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,7 +10,7 @@
# production
/build
-dist/
+dist*/
# misc
.DS_Store
diff --git a/c9088/data/formData.js b/c9088/data/formData.js
new file mode 100644
index 0000000..1188420
--- /dev/null
+++ b/c9088/data/formData.js
@@ -0,0 +1,9 @@
+export const images = {
+ simple: {
+ "cerit.io/hubs/rstudio:4.3.1-snakemake": "RStudio with R 4.3.1 and Snakemake",
+ },
+}
+
+export const sectionTitles = {
+ simple: "Simple Jupyter Images",
+};
\ No newline at end of file
diff --git a/c9088/home.html b/c9088/home.html
new file mode 100644
index 0000000..f531736
--- /dev/null
+++ b/c9088/home.html
@@ -0,0 +1,35 @@
+
+
+
+ JupyterHub
+
+
+
+ {% block main %} {% set named_spawners =
+ user.all_spawners(include_default=False)|list %}
+
+
+
+ {% endblock main %}
+
+
diff --git a/c9088/js/Form.css b/c9088/js/Form.css
new file mode 100644
index 0000000..e6dd03b
--- /dev/null
+++ b/c9088/js/Form.css
@@ -0,0 +1,39 @@
+.wrapper {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 50%;
+ background: rgba(255, 255, 255, 0.5);
+ padding: 50px;
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ min-height: 100vh;
+}
+
+.GPU-wrapper {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+}
+
+.GPU-stats {
+ border: none;
+}
+
+@media (max-width: 768px) {
+ .wrapper {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ width: 90%;
+ padding: 5%;
+ background: rgba(255, 255, 255, 0.5);
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ min-height: 80vh;
+ }
+}
diff --git a/c9088/js/FormPage.jsx b/c9088/js/FormPage.jsx
new file mode 100644
index 0000000..9256dc4
--- /dev/null
+++ b/c9088/js/FormPage.jsx
@@ -0,0 +1,202 @@
+import "./Form.css";
+import React, { useState, useEffect } from "react";
+import ProgressiveForm from "../../src/components/Form/ProgressiveForm";
+import { EinfraFooter } from "../../src/components/FooterAndHeader/EinfraFooter";
+import { FieldHeader } from "../../src/components/FieldHeader/FieldHeader";
+import { SliderCheckBox } from "../../src/components/SliderCheckBox/SliderCheckBox";
+import { TileSelector } from "../../src/components/TileSelector/TileSelector";
+import JupyterHubHeader from "../../src/components/FooterAndHeader/JupyterHubHeader";
+import {
+ DropDownButton,
+ DropDownOption,
+} from "../../src/components/DropDownButton/DropDownButton";
+import {
+ images,
+ sectionTitles,
+} from "../data/formData";
+
+const StepOne = ({ setFormData }) => {
+ const [activeDropdownIndex, setActiveDropdownIndex] = useState(null);
+ const [selectedDropdownIndex, setSelectedDropdownIndex] = useState(null);
+ const [activeDropdownOptionIndex, setActiveDropdownOptionIndex] = useState(null);
+
+ const handleErase = (checked) => {
+ setFormData((prev) => {
+ const updatedFormData = { ...prev };
+
+ if (checked) {
+ updatedFormData.delhome = "delete";
+ } else {
+ delete updatedFormData.delhome;
+ }
+
+ return updatedFormData;
+ });
+ };
+
+ const handleSelect = (key, image, index, dindex) => {
+ setSelectedDropdownIndex(dindex);
+ setActiveDropdownOptionIndex(index);
+ setFormData((prev) => ({
+ ...prev,
+ dockerimage: image,
+ }));
+ };
+
+ const isActiveIndex = (index) => {
+ return activeDropdownIndex === index;
+ };
+
+ const isSelectedIndex = (index) => {
+ return selectedDropdownIndex === index;
+ };
+
+ let dropDownIndex = 0;
+
+ return (
+
+
Choosing Image
+ {Object.entries(images).map(([key, options], dropdownIndex) => (
+
setActiveDropdownIndex(dropdownIndex)}
+ isSelected={isSelectedIndex(dropdownIndex)}
+ title={sectionTitles[key]}
+ >
+ {Object.entries(options).map(([value, label]) => {
+ const currentIndex = dropDownIndex++;
+ return (
+
+ handleSelect(key, value, currentIndex, dropdownIndex)
+ }
+ />
+ );
+ })}
+
+ ))}
+
Choosing storage
+
+
+
+ Mounted to
+ /home/jovyan
+
+
+
+
+
Resources
+
+ The notebook is spawned only when one node fulfills all your
+ requirements.
+
+
+
+
+
+
+
+ {defaultServerActive && (
+
+
+ )}
+
+
+
+
+
+
+
+ {imagePath &&
}
+
+
+
+
+
+
Server not running
+
+
Your server is not running. Would you like to start it?
+
+
+
+
+
+
+
+
+
Your server is starting up.
+
+ You will be redirected automatically when it's ready for
+ you.
+
+
+
+
+
+
+
+
+
+ {/*
*/}
+ {/* Scheduled maintenance and reboot on 16th - 18th Dec 2024 */}
+ {/* */}
+ {/* {" "}*/}
+ {/* We will have scheduled maintenance and cluster reboot between 16th and*/}
+ {/* 17th of December 2024. All running notebooks will be interrupted and*/}
+ {/* have to be started again.{" "}*/}
+ {/*
*/}
+ {/* */}
+
+
JupyterHub
+
+
+
+
+
+
diff --git a/c9088/not_running.html b/c9088/not_running.html
new file mode 100644
index 0000000..b0f23ea
--- /dev/null
+++ b/c9088/not_running.html
@@ -0,0 +1,21 @@
+
+
+
+ JupyterHub
+
+
+
+
+
+
+
+
diff --git a/c9088/spawn.html b/c9088/spawn.html
new file mode 100644
index 0000000..7219ab8
--- /dev/null
+++ b/c9088/spawn.html
@@ -0,0 +1,21 @@
+
+
+
+ JupyterHub
+
+
+
+ {{spawner_options_form | safe}}
+
+
+
+
diff --git a/c9088/spawn_pending.html b/c9088/spawn_pending.html
new file mode 100644
index 0000000..4f6a3d8
--- /dev/null
+++ b/c9088/spawn_pending.html
@@ -0,0 +1,19 @@
+
+
+
+ JupyterHub
+
+
+
+
+
+
+
diff --git a/c9088/vite.config.js b/c9088/vite.config.js
new file mode 100644
index 0000000..34629e5
--- /dev/null
+++ b/c9088/vite.config.js
@@ -0,0 +1,37 @@
+import { defineConfig } from "vite";
+import { resolve } from "path";
+import react from "@vitejs/plugin-react";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ root: __dirname,
+ base: "/",
+ build: {
+ outDir: "../dist_c9088",
+ rollupOptions: {
+ input: {
+ spawn: resolve(__dirname, "spawn.html"),
+ login: resolve(__dirname, "login.html"),
+ spawn_pending: resolve(__dirname, "spawn_pending.html"),
+ home: resolve(__dirname, "home.html"),
+ not_running: resolve(__dirname, "not_running.html"),
+ },
+ output: {
+ entryFileNames: "static/custom-js/[name]-[hash].js",
+ chunkFileNames: "static/custom-js/[name]-[hash].js",
+ assetFileNames: ({ name }) => {
+ if (/\.(css)$/.test(name ?? "")) {
+ return "static/custom-css/[name]-[hash][extname]";
+ } else if (/\.(png|jpe?g|gif|svg)$/.test(name ?? "")) {
+ return "static/custom-css/[name]-[hash][extname]";
+ }
+ return "static/[ext]/[name]-[hash][extname]";
+ },
+ },
+ },
+ },
+ plugins: [react()],
+ server: {
+ open: process.env.ENTRY,
+ },
+});
diff --git a/cas/data/formData.js b/cas/data/formData.js
new file mode 100644
index 0000000..62d7e58
--- /dev/null
+++ b/cas/data/formData.js
@@ -0,0 +1,10 @@
+export const images = {
+ simple: {
+ "cerit.io/hubs/bioconductor:2024-11-21": "Bioconductor Jupyter",
+ "cerit.io/cerit/rstudio-bioconductor:4.3.1" : "RStudio with R 4.3.1"
+ },
+}
+
+export const sectionTitles = {
+ simple: "Simple Jupyter Images",
+};
\ No newline at end of file
diff --git a/cas/home.html b/cas/home.html
new file mode 100644
index 0000000..f531736
--- /dev/null
+++ b/cas/home.html
@@ -0,0 +1,35 @@
+
+
+
+ JupyterHub
+
+
+
+ {% block main %} {% set named_spawners =
+ user.all_spawners(include_default=False)|list %}
+
+
+
+ {% endblock main %}
+
+
diff --git a/cas/js/Form.css b/cas/js/Form.css
new file mode 100644
index 0000000..e6dd03b
--- /dev/null
+++ b/cas/js/Form.css
@@ -0,0 +1,39 @@
+.wrapper {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 50%;
+ background: rgba(255, 255, 255, 0.5);
+ padding: 50px;
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ min-height: 100vh;
+}
+
+.GPU-wrapper {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+}
+
+.GPU-stats {
+ border: none;
+}
+
+@media (max-width: 768px) {
+ .wrapper {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ width: 90%;
+ padding: 5%;
+ background: rgba(255, 255, 255, 0.5);
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ min-height: 80vh;
+ }
+}
diff --git a/cas/js/FormPage.jsx b/cas/js/FormPage.jsx
new file mode 100644
index 0000000..b1bd59c
--- /dev/null
+++ b/cas/js/FormPage.jsx
@@ -0,0 +1,202 @@
+import "./Form.css";
+import React, { useState, useEffect } from "react";
+import ProgressiveForm from "../../src/components/Form/ProgressiveForm";
+import { EinfraFooter } from "../../src/components/FooterAndHeader/EinfraFooter";
+import { FieldHeader } from "../../src/components/FieldHeader/FieldHeader";
+import { SliderCheckBox } from "../../src/components/SliderCheckBox/SliderCheckBox";
+import { TileSelector } from "../../src/components/TileSelector/TileSelector";
+import JupyterHubHeader from "../../src/components/FooterAndHeader/JupyterHubHeader";
+import {
+ DropDownButton,
+ DropDownOption,
+} from "../../src/components/DropDownButton/DropDownButton";
+import {
+ images,
+ sectionTitles,
+} from "../data/formData";
+
+const StepOne = ({ setFormData }) => {
+ const [activeDropdownIndex, setActiveDropdownIndex] = useState(null);
+ const [selectedDropdownIndex, setSelectedDropdownIndex] = useState(null);
+ const [activeDropdownOptionIndex, setActiveDropdownOptionIndex] = useState(null);
+
+ const handleErase = (checked) => {
+ setFormData((prev) => {
+ const updatedFormData = { ...prev };
+
+ if (checked) {
+ updatedFormData.delhome = "delete";
+ } else {
+ delete updatedFormData.delhome;
+ }
+
+ return updatedFormData;
+ });
+ };
+
+ const handleSelect = (key, image, index, dindex) => {
+ setSelectedDropdownIndex(dindex);
+ setActiveDropdownOptionIndex(index);
+ setFormData((prev) => ({
+ ...prev,
+ images: image,
+ }));
+ };
+
+ const isActiveIndex = (index) => {
+ return activeDropdownIndex === index;
+ };
+
+ const isSelectedIndex = (index) => {
+ return selectedDropdownIndex === index;
+ };
+
+ let dropDownIndex = 0;
+
+ return (
+
+
Choosing Image
+ {Object.entries(images).map(([key, options], dropdownIndex) => (
+
setActiveDropdownIndex(dropdownIndex)}
+ isSelected={isSelectedIndex(dropdownIndex)}
+ title={sectionTitles[key]}
+ >
+ {Object.entries(options).map(([value, label]) => {
+ const currentIndex = dropDownIndex++;
+ return (
+
+ handleSelect(key, value, currentIndex, dropdownIndex)
+ }
+ />
+ );
+ })}
+
+ ))}
+
Choosing storage
+
+
+
+ Mounted to
+ /home/jovyan
+
+
+
+
+
Resources
+
+ The notebook is spawned only when one node fulfills all your
+ requirements.
+
+
+
+
+
+
+
+ {defaultServerActive && (
+
+
+ )}
+
+
+
+
+
+
+
+ {imagePath &&
}
+
+
+
+
+
+
Server not running
+
+
Your server is not running. Would you like to start it?
+
+
+
+
+
+
+
+
+
Your server is starting up.
+
+ You will be redirected automatically when it's ready for
+ you.
+
+
+
+
+
+
+
+
+
+ {/*
*/}
+ {/* Scheduled maintenance and reboot on 16th - 18th Dec 2024 */}
+ {/* */}
+ {/* {" "}*/}
+ {/* We will have scheduled maintenance and cluster reboot between 16th and*/}
+ {/* 17th of December 2024. All running notebooks will be interrupted and*/}
+ {/* have to be started again.{" "}*/}
+ {/*
*/}
+ {/* */}
+
+
JupyterHub
+
+
+
+
+
+
diff --git a/cas/not_running.html b/cas/not_running.html
new file mode 100644
index 0000000..b0f23ea
--- /dev/null
+++ b/cas/not_running.html
@@ -0,0 +1,21 @@
+
+
+
+ JupyterHub
+
+
+
+
+
+
+
+
diff --git a/cas/spawn.html b/cas/spawn.html
new file mode 100644
index 0000000..7219ab8
--- /dev/null
+++ b/cas/spawn.html
@@ -0,0 +1,21 @@
+
+
+
+ JupyterHub
+
+
+
+ {{spawner_options_form | safe}}
+
+
+
+
diff --git a/cas/spawn_pending.html b/cas/spawn_pending.html
new file mode 100644
index 0000000..4f6a3d8
--- /dev/null
+++ b/cas/spawn_pending.html
@@ -0,0 +1,19 @@
+
+
+
+ JupyterHub
+
+
+
+
+
+
+
diff --git a/cas/vite.config.js b/cas/vite.config.js
new file mode 100644
index 0000000..fe0908d
--- /dev/null
+++ b/cas/vite.config.js
@@ -0,0 +1,37 @@
+import { defineConfig } from "vite";
+import { resolve } from "path";
+import react from "@vitejs/plugin-react";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ root: __dirname,
+ base: "/",
+ build: {
+ outDir: "../dist_cas",
+ rollupOptions: {
+ input: {
+ spawn: resolve(__dirname, "spawn.html"),
+ login: resolve(__dirname, "login.html"),
+ spawn_pending: resolve(__dirname, "spawn_pending.html"),
+ home: resolve(__dirname, "home.html"),
+ not_running: resolve(__dirname, "not_running.html"),
+ },
+ output: {
+ entryFileNames: "static/custom-js/[name]-[hash].js",
+ chunkFileNames: "static/custom-js/[name]-[hash].js",
+ assetFileNames: ({ name }) => {
+ if (/\.(css)$/.test(name ?? "")) {
+ return "static/custom-css/[name]-[hash][extname]";
+ } else if (/\.(png|jpe?g|gif|svg)$/.test(name ?? "")) {
+ return "static/custom-css/[name]-[hash][extname]";
+ }
+ return "static/[ext]/[name]-[hash][extname]";
+ },
+ },
+ },
+ },
+ plugins: [react()],
+ server: {
+ open: process.env.ENTRY,
+ },
+});
diff --git a/elter-ri/data/formData.js b/elter-ri/data/formData.js
new file mode 100644
index 0000000..550bd6a
--- /dev/null
+++ b/elter-ri/data/formData.js
@@ -0,0 +1,61 @@
+export const images = {
+ simple: {
+ "cerit.io/hubs/minimalnb:31-08-2023": "Minimal NB",
+ "cerit.io/hubs/minimalnb:26-09-2024-ssh": "Minimal NB with SSH access",
+ "cerit.io/hubs/datasciencenb:31-08-2023": "DataScience NB",
+ },
+ r: {
+ "cerit.io/hubs/jupyterhubronly:05-02-2024": "Python 3.11 and R 4.3.1 kernels",
+ "cerit.io/hubs/rstudio:11-08-2022-7": "RStudio with R 4.2.1",
+ "cerit.io/hubs/rstudio:4.2.1-rsat": "RStudio with R 4.2.1 and RSAT",
+ "cerit.io/hubs/rstudio:4.3.1": "RStudio with R 4.3.1",
+ "cerit.io/hubs/rstudio:4.4.0": "RStudio with R 4.4.0",
+ },
+ tf: {
+ "cerit.io/hubs/tensorflownb:31-08-2023": "TensorFlow 2.10 (CPU only)",
+ "cerit.io/hubs/tensorflowgpu:2.11.1": "TensorFlow 2.11.1 with GPU and TensorBoard",
+ "cerit.io/hubs/tensorflowgpu:2.12.1": "TensorFlow 2.12.1 with GPU and TensorBoard",
+ "cerit.io/hubs/tensorflowgpu:2.15.0": "TensorFlow 2.15.1 with GPU and TensorBoard",
+ },
+ matlab: {
+ "cerit.io/hubs/matlab:r2022b": "MATLAB R2022b",
+ "cerit.io/hubs/matlab:r2023a": "MATLAB R2023a",
+ },
+ various: {
+ "cerit.io/hubs/cuda-ubuntu:12.0-24.04": "CUDA 12.0",
+ },
+};
+
+export const sectionTitles = {
+ simple: "Simple Jupyter Images",
+ r: "R Images",
+ tf: "TensorFlow Images",
+ matlab: "MATLAB Images",
+ various: "Various Images",
+};
+
+export const defaultImagesName = {
+ simple: "simplenb",
+ r: "rnb",
+ tf: "tfnb",
+ matlab: "matlabnb",
+ various: "variousnb",
+};
+
+export const formImagesName = {
+ simple: "simplenbname",
+ r: "rnbname",
+ tf: "tfnbname",
+ matlab: "matlabnbname",
+ various: "varnbname",
+};
+
+export const gpu_instance = {
+ none: "None",
+ "mig-1g.10gb": "10GB part A100",
+ "mig-2g.20gb": "20GB part A100",
+ a10: "whole A10",
+ a40: "whole A40",
+ a100: "whole A100",
+ any: "any whole gpu",
+};
\ No newline at end of file
diff --git a/elter-ri/home.html b/elter-ri/home.html
new file mode 100644
index 0000000..f531736
--- /dev/null
+++ b/elter-ri/home.html
@@ -0,0 +1,35 @@
+
+
+
+ JupyterHub
+
+
+
+ {% block main %} {% set named_spawners =
+ user.all_spawners(include_default=False)|list %}
+
+
+
+ {% endblock main %}
+
+
diff --git a/elter-ri/js/Form.css b/elter-ri/js/Form.css
new file mode 100644
index 0000000..e6dd03b
--- /dev/null
+++ b/elter-ri/js/Form.css
@@ -0,0 +1,39 @@
+.wrapper {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 50%;
+ background: rgba(255, 255, 255, 0.5);
+ padding: 50px;
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ min-height: 100vh;
+}
+
+.GPU-wrapper {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+}
+
+.GPU-stats {
+ border: none;
+}
+
+@media (max-width: 768px) {
+ .wrapper {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ width: 90%;
+ padding: 5%;
+ background: rgba(255, 255, 255, 0.5);
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ min-height: 80vh;
+ }
+}
diff --git a/elter-ri/js/FormPage.jsx b/elter-ri/js/FormPage.jsx
new file mode 100644
index 0000000..8f3e28a
--- /dev/null
+++ b/elter-ri/js/FormPage.jsx
@@ -0,0 +1,662 @@
+import "./Form.css";
+import React, { useState, useEffect } from "react";
+import ProgressiveForm from "../../src/components/Form/ProgressiveForm";
+import { EinfraFooter } from "../../src/components/FooterAndHeader/EinfraFooter";
+import { FieldHeader } from "../../src/components/FieldHeader/FieldHeader";
+import { SliderCheckBox } from "../../src/components/SliderCheckBox/SliderCheckBox";
+import { DropDownMenu } from "../../src/components/DropDownMenu/DropDownMenu";
+import { TileSelector } from "../../src/components/TileSelector/TileSelector";
+import JupyterHubHeader from "../../src/components/FooterAndHeader/JupyterHubHeader";
+import {
+ DropDownButton,
+ DropDownOption,
+} from "../../src/components/DropDownButton/DropDownButton";
+import {
+ images,
+ sectionTitles,
+ formImagesName,
+ gpu_instance,
+ defaultImagesName,
+} from "../data/formData";
+import { gatherFormData } from "../scripts/gatherFormData";
+
+const StepOne = ({ setFormData, defaultFormData }) => {
+ const [activeDropdownIndex, setActiveDropdownIndex] = useState(null);
+ const [checkSsh, setCheckSsh] = useState(null);
+ const [selectedDropdownIndex, setSelectedDropdownIndex] = useState(null);
+ const [activeDropdownOptionIndex, setActiveDropdownOptionIndex] = useState(null);
+
+ useEffect(() => {
+ if (defaultFormData) {
+ if (defaultFormData.notebookImage) {
+ const text = defaultFormData.notebookImage.type;
+ if (text === "customnb") {
+ handleInputChange({
+ target: {
+ value: defaultFormData.notebookImage.selectedOption,
+ },
+ }, Object.entries(images).length + 1)
+ } else {
+ const key = Object.keys(defaultImagesName).find((key) => defaultImagesName[key] === text);
+ const dindex = Object.keys(images).indexOf(key);
+
+ const flattenedImages = Object.entries(images).flatMap(([category, options]) =>
+ Object.keys(options).map((key) => ({ category, key }))
+ );
+
+ const image = defaultFormData.notebookImage.selectedOption.value.replace("cerit.io/hubs/", "");
+ const index = flattenedImages.findIndex((entry) => entry.key === image);
+
+ handleSelect(key, image, index, dindex);
+ }
+ handleSshCheck(defaultFormData.notebookImage.sshAccess);
+ setCheckSsh(defaultFormData.notebookImage.sshAccess);
+ }
+
+ }
+ }, []);
+
+ const handleSelect = (key, image, index, dindex) => {
+ setSelectedDropdownIndex(dindex);
+ setActiveDropdownOptionIndex(index);
+ setFormData((prev) => ({
+ ...prev,
+ images: key,
+ [formImagesName[key]]: `cerit.io/hubs/${image}`,
+ }));
+ };
+
+ const handleInputChange = (e, index) => {
+ setActiveDropdownOptionIndex(null);
+ setSelectedDropdownIndex(index);
+ setFormData((prev) => ({
+ ...prev,
+ images: "custom",
+ customimage: e.target.value,
+ }));
+ };
+
+ const handleSshCheck = (checked) => {
+ setFormData((prev) => {
+ const updatedFormData = { ...prev };
+
+ if (checked) {
+ updatedFormData.sshCheck = "yes";
+ } else {
+ delete updatedFormData.sshCheck;
+ }
+
+ return updatedFormData;
+ });
+ };
+
+ const isActiveIndex = (index) => {
+ return activeDropdownIndex === index;
+ };
+
+ const isSelectedIndex = (index) => {
+ return selectedDropdownIndex === index;
+ };
+
+ let dropDownIndex = 0;
+
+ function extractName(url) {
+ const regex = /\/hub\/spawn\/[^/]+\/([^?]*)/;
+ const match = url.match(regex);
+ return match ? match[1] : null;
+ }
+
+ const extractedName = extractName(appConfig.postUrl);
+ const formattedName = extractedName ? `--${extractedName}` : "";
+
+ return (
+
+
Choosing Image
+ {Object.entries(images).map(([key, options], dropdownIndex) => (
+ setActiveDropdownIndex(dropdownIndex)}
+ isSelected={isSelectedIndex(dropdownIndex)}
+ title={sectionTitles[key]}
+ >
+ {Object.entries(options).map(([value, label]) => {
+ const currentIndex = dropDownIndex++;
+ return (
+
+ handleSelect(key, value, currentIndex, dropdownIndex)
+ }
+ />
+ );
+ })}
+
+ ))}
+
+ setActiveDropdownIndex(Object.entries(images).length + 1)
+ }
+ title="Custom Image"
+ infoText="Provide image name in format repo/image_name:tag"
+ >
+
+
+ Connection will be available at jovyan@jupyter-{appConfig.userName}{formattedName}.dyn.cloud.e-infra.cz
+
+
+ );
+};
+
+const StepTwo = ({ setFormData, formData, defaultFormData }) => {
+ const [activeDropdownIndex, setActiveDropdownIndex] = useState(null);
+ const [defaultOptionPhname, setDefaultOptionPhname] = useState(null);
+ const [checkedErased, setCheckErased] = useState(false);
+ const [checkedDirectories, setCheckedDirectories] = useState(false);
+ const [checkedStorage, setCheckedStorage] = useState(false);
+ const [defaultHome, setDefaultHome] = useState(false);
+ const [checkedMount, setCheckedMount] = useState(false);
+
+ useEffect(() => {
+ if (defaultFormData) {
+ if (defaultFormData.persistentHome) {
+
+
+ const text = defaultFormData.persistentHome.type;
+ setFormData((prev) => ({
+ ...prev,
+ phselection: text,
+ }));
+ setActiveDropdownIndex(text === "new" ? 0 : 1);
+ const check = defaultFormData.persistentHome.eraseIfExists
+ if (check) {
+ setFormData((prev) => ({
+ ...prev,
+ phCheck: check,
+ }));
+ setCheckErased(check)
+ }
+ const phname = defaultFormData.persistentHome.selectedHome
+ if (phname) {
+ const name = defaultFormData.persistentHome.selectedHome.value;
+ setFormData((prev) => ({
+ ...prev,
+ phname: name,
+ }));
+ setDefaultOptionPhname([name, name]);
+ }
+
+ const projectDirectories = defaultFormData.projectDirectories
+
+ if (projectDirectories) {
+ setFormData((prev) => ({
+ ...prev,
+ projectCheck: "yes"
+ }));
+
+ setCheckedDirectories(projectDirectories)
+ }
+
+ const metaCentrumHome = defaultFormData.metaCentrumHome
+
+ if (metaCentrumHome) {
+
+ const enabled = metaCentrumHome.enabled
+
+ if (enabled) {
+ setFormData((prev) => ({
+ ...prev,
+ storageCheck: "yes"
+ }));
+
+ setCheckedStorage(enabled)
+
+ const selectedHome = metaCentrumHome.selectedHome.value;
+
+ setFormData((prev) => ({
+ ...prev,
+ home: selectedHome
+ }));
+
+ setDefaultHome([selectedHome, selectedHome])
+
+ const mountToStorage = metaCentrumHome.mountToStorage;
+
+ if(mountToStorage) {
+ setFormData((prev) => ({
+ ...prev,
+ locationStorageCheck: "yes"
+ }));
+
+ setCheckedMount(mountToStorage)
+ }
+ }
+ }
+ }
+
+ }
+ }, []);
+
+ const handleStorage = (storage) => {
+ setFormData((prev) => ({
+ ...prev,
+ home: storage,
+ }));
+ };
+
+ const handlePersistentHome = (val) => {
+ setFormData((prev) => ({
+ ...prev,
+ phname: val,
+ }));
+ };
+
+ const handleStorageCheck = (checked) => {
+ setFormData((prev) => {
+ const updatedFormData = { ...prev };
+
+ if (checked) {
+ updatedFormData.storageCheck = "yes";
+ } else {
+ delete updatedFormData.storageCheck;
+ }
+
+ return updatedFormData;
+ });
+ };
+
+ const handleCheckboxDirectories = (checked) => {
+ setFormData((prev) => {
+ const updatedFormData = { ...prev };
+
+ if (checked) {
+ updatedFormData.projectCheck = "yes";
+ } else {
+ delete updatedFormData.projectCheck;
+ }
+
+ return updatedFormData;
+ });
+ };
+
+ const handleErase = (checked) => {
+ setFormData((prev) => {
+ const updatedFormData = { ...prev };
+
+ if (checked) {
+ updatedFormData.phCheck = "yes";
+ } else {
+ delete updatedFormData.phCheck;
+ }
+
+ return updatedFormData;
+ });
+ };
+
+ const handlePersistentNewSelect = (index) => {
+ setActiveDropdownIndex(index);
+ setFormData((prev) => ({
+ ...prev,
+ phselection: "new",
+ }));
+ };
+
+ const handleExisting = (index) => {
+ setActiveDropdownIndex(index);
+ setFormData((prev) => ({
+ ...prev,
+ phselection: false,
+ }));
+ };
+
+ const handleLocationStorageCheck = (checked) => {
+ setFormData((prev) => {
+ const updatedFormData = { ...prev };
+
+ if (checked) {
+ updatedFormData.locationStorageCheck = "yes";
+ } else {
+ delete updatedFormData.locationStorageCheck;
+ }
+
+ return updatedFormData;
+ });
+ };
+
+ const values = {};
+ const selectElement = document.getElementById("phid");
+
+ if (selectElement !== null) {
+ const options = selectElement.getElementsByTagName("option");
+ for (let option of options) {
+ values[option.value] = option.value;
+ }
+ } else {
+ values["testing"] = "testing";
+ }
+
+ return (
+
+
Choosing storage
+
+ handlePersistentNewSelect(0)}
+ primary={false}
+ title="New"
+ >
+
+ Mounted to
+ /home/jovyan
+
+
+
+
+ {defCPU !== null && defMem !== null && defGPU !== null ? ( <>
+
Resources
+
+ The notebook is spawned only when one node fulfills all your
+ requirements.
+
+
+
+
+ By default, no GPU is assigned.
+ Current GPUs Free:
+
+
+
+
+
+
+
+
+ ) : <>}
+
+
+
+
+ {defaultServerActive && (
+
+
+ )}
+
+
+
+
+
+
+
+ {imagePath &&
}
+
+
+
+
+
+
Server not running
+
+
Your server is not running. Would you like to start it?
+
+
+
+
+
+
+
+
+
Your server is starting up.
+
+ You will be redirected automatically when it's ready for
+ you.
+
+
+
+
+
+
+
+
+
+ {/*
*/}
+ {/* Scheduled maintenance and reboot on 16th - 18th Dec 2024 */}
+ {/* */}
+ {/* {" "}*/}
+ {/* We will have scheduled maintenance and cluster reboot between 16th and*/}
+ {/* 17th of December 2024. All running notebooks will be interrupted and*/}
+ {/* have to be started again.{" "}*/}
+ {/*
*/}
+ {/* */}
+
+
JupyterHub
+
+
+
+
+
+
diff --git a/elter-ri/not_running.html b/elter-ri/not_running.html
new file mode 100644
index 0000000..b0f23ea
--- /dev/null
+++ b/elter-ri/not_running.html
@@ -0,0 +1,21 @@
+
+
+
+ JupyterHub
+
+
+
+
+
+
+
+
diff --git a/elter-ri/scripts/gatherFormData.js b/elter-ri/scripts/gatherFormData.js
new file mode 100644
index 0000000..5fd98a8
--- /dev/null
+++ b/elter-ri/scripts/gatherFormData.js
@@ -0,0 +1,110 @@
+function getMemorySelection() {
+ const memSelect = document.getElementById('memselection');
+ if (memSelect) {
+ return {
+ value: memSelect.value,
+ text: memSelect.options[memSelect.selectedIndex].text
+ };
+ }
+ return null;
+}
+
+function getGpuSelection() {
+ const gpuSelect = document.getElementById('gpuid');
+ if (gpuSelect) {
+ const gpuData = {
+ value: gpuSelect.value,
+ text: gpuSelect.options[gpuSelect.selectedIndex].text
+ };
+
+ if (gpuSelect.value.startsWith('mig')) {
+ const migAmountSelect = document.getElementById('migamountselection');
+ gpuData.migAmount = migAmountSelect
+ ? {
+ value: migAmountSelect.value,
+ text: migAmountSelect.options[migAmountSelect.selectedIndex].text
+ }
+ : null;
+ }
+ return gpuData;
+ }
+ return null;
+}
+
+function getCpuSelection() {
+ const cpuInput = document.getElementById('cpuinput');
+ if (cpuInput) {
+ const cpuValue = parseInt(cpuInput.value, 10);
+ return cpuValue >= 1 && cpuValue <= 32 ? cpuValue : 'Out of range';
+ }
+ return null;
+}
+
+function getPersistentHomeSelection() {
+ const delhome = document.getElementById('delhome');
+ const delhomeData = delhome && delhome.checked
+
+ return delhomeData;
+}
+
+function getNotebookImageSelection() {
+ const checkedRadio = document.querySelector('input[name="images"]:checked');
+ const notebookImageData = { type: null, selectedOption: null, sshAccess: null };
+
+ if (checkedRadio) {
+ notebookImageData.type = checkedRadio.id;
+ const selectMap = {
+ simplenb: 'simplenblistselection',
+ rnb: 'rnblistselection',
+ tfnb: 'tfnblistselection',
+ matlabnb: 'matlabnblistselection',
+ variousnb: 'variousnblistselection',
+ customnb: 'customimage'
+ };
+ const selectId = selectMap[checkedRadio.id];
+ if (selectId) {
+ if (selectId === 'customimage') {
+ const customInput = document.getElementById(selectId);
+ if (customInput) {
+ notebookImageData.selectedOption = customInput.value;
+ }
+ } else {
+ const selectElement = document.getElementById(selectId);
+ if (selectElement) {
+ notebookImageData.selectedOption = {
+ value: selectElement.value,
+ text: selectElement.options[selectElement.selectedIndex].text
+ };
+ }
+ }
+ }
+ }
+ const sshCheckbox = document.getElementById('sshaccess');
+ notebookImageData.sshAccess = sshCheckbox && sshCheckbox.checked;
+ return notebookImageData;
+}
+
+function isEmpty(value) {
+ if (value == null) {
+ return true;
+ }
+ if (typeof value === "object" && !Array.isArray(value)) {
+ return Object.values(value).every(isEmpty);
+ }
+ return false;
+ }
+
+export function gatherFormData() {
+ const formData = {
+ memory: getMemorySelection(),
+ gpu: getGpuSelection(),
+ cpu: getCpuSelection(),
+ delhome: getPersistentHomeSelection(),
+ notebookImage: getNotebookImageSelection()
+ };
+
+ const allEmpty = Object.values(formData).every(isEmpty);
+
+ return allEmpty ? null : formData;
+}
+
diff --git a/elter-ri/spawn.html b/elter-ri/spawn.html
new file mode 100644
index 0000000..7219ab8
--- /dev/null
+++ b/elter-ri/spawn.html
@@ -0,0 +1,21 @@
+
+
+
+ JupyterHub
+
+
+
+ {{spawner_options_form | safe}}
+
+
+
+
diff --git a/elter-ri/spawn_pending.html b/elter-ri/spawn_pending.html
new file mode 100644
index 0000000..4f6a3d8
--- /dev/null
+++ b/elter-ri/spawn_pending.html
@@ -0,0 +1,19 @@
+
+
+
+ JupyterHub
+
+
+
+
+
+
+
diff --git a/elter-ri/vite.config.js b/elter-ri/vite.config.js
new file mode 100644
index 0000000..fe0908d
--- /dev/null
+++ b/elter-ri/vite.config.js
@@ -0,0 +1,37 @@
+import { defineConfig } from "vite";
+import { resolve } from "path";
+import react from "@vitejs/plugin-react";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ root: __dirname,
+ base: "/",
+ build: {
+ outDir: "../dist_cas",
+ rollupOptions: {
+ input: {
+ spawn: resolve(__dirname, "spawn.html"),
+ login: resolve(__dirname, "login.html"),
+ spawn_pending: resolve(__dirname, "spawn_pending.html"),
+ home: resolve(__dirname, "home.html"),
+ not_running: resolve(__dirname, "not_running.html"),
+ },
+ output: {
+ entryFileNames: "static/custom-js/[name]-[hash].js",
+ chunkFileNames: "static/custom-js/[name]-[hash].js",
+ assetFileNames: ({ name }) => {
+ if (/\.(css)$/.test(name ?? "")) {
+ return "static/custom-css/[name]-[hash][extname]";
+ } else if (/\.(png|jpe?g|gif|svg)$/.test(name ?? "")) {
+ return "static/custom-css/[name]-[hash][extname]";
+ }
+ return "static/[ext]/[name]-[hash][extname]";
+ },
+ },
+ },
+ },
+ plugins: [react()],
+ server: {
+ open: process.env.ENTRY,
+ },
+});
diff --git a/src/FormPage.jsx b/src/FormPage.jsx
index 32323ab..ea4e883 100644
--- a/src/FormPage.jsx
+++ b/src/FormPage.jsx
@@ -599,7 +599,7 @@ const StepThree = ({ setFormData, defaultFormData }) => {
>
- ) : <>};
+ ) : <>}
);
};
diff --git a/src/components/DropDownButton/DropDownButton.css b/src/components/DropDownButton/DropDownButton.css
index 240c1b7..11a53f9 100644
--- a/src/components/DropDownButton/DropDownButton.css
+++ b/src/components/DropDownButton/DropDownButton.css
@@ -3,7 +3,6 @@
display: flex;
flex-direction: column;
width: 100%;
- padding: 0.6rem;
}
.activeText {
@@ -46,6 +45,8 @@
grid-template-areas: "title . text . icon";
grid-template-columns: auto 25fr auto 1fr auto;
+ font-family: "Montserrat";
+
}
.dropbtn--primary.selected {
@@ -146,6 +147,8 @@
cursor: pointer;
margin-bottom: 4px;
justify-content: space-between;
+
+ font-family: "Montserrat";
}
.dropbtn--secondary.active {
diff --git a/src/components/Form/ProgressiveForm.css b/src/components/Form/ProgressiveForm.css
index 4b471ac..d4c1490 100644
--- a/src/components/Form/ProgressiveForm.css
+++ b/src/components/Form/ProgressiveForm.css
@@ -11,6 +11,7 @@
}
.btns_wrap {
+ padding: 0.5rem;
display: flex;
justify-content: flex-end;
gap: 5rem;
}
+
+