added readme and other changes

README.md

@@ -1,3 +1,79 @@
 This project was build on Storybook template provided by Chroma Software Inc.
 
+# Project Instructions
+
+## Getting Started
+
+To set up the project, first install the necessary dependencies:
+
+```bash
+npm install
+```
+
+## Project Structure
+
+The different pages of the website are located in the following files:
+
+- `src/FormPage.jsx`
+- `src/SpawnPending.jsx`
+- `src/NotRunning.jsx`
+- `src/LoginPage.jsx`
+- `src/HomePage.jsx`
+
+## Running the Project in Development Mode
+
+You can run individual pages in a development environment using the following commands:
+
+- For `FormPage.jsx`:
+  ```bash
+  npm run dev:form
+  ```
+- For `SpawnPending.jsx`:
+  ```bash
+  npm run dev:spawn_p
+  ```
+- For `LoginPage.jsx`:
+  ```bash
+  npm run dev:login
+  ```
+- For `NotRunning.jsx`:
+  ```bash
+  npm run dev:not_running
+  ```
+- For `HomePage.jsx`:
+  ```bash
+  npm run dev:home
+  ```
+
+## Component Development with Storybook
+
+For component development, you can start a Storybook environment:
+
+```bash
+npm run storybook
+```
+
+## Building the Project
+
+To build the project for production, use the following command:
+
+```bash
+npm run build
+```
+
+## Creating ConfigMaps
+
+If you want to create ConfigMaps from the built project, use the `create_config_maps.sh` script. Before running it, make sure it is executable:
+
+```bash
+chmod +x create_config_maps.sh
+```
+
+You can also modify the script if you only want to generate files locally instead of applying them to a Kubernetes cluster.
+Then execute the script:
+
+```bash
+./create_config_maps.sh
+```
+
 

create_config_maps.sh

@@ -10,8 +10,10 @@ create_configmap() {
   local name=$1
   local path=$2
 
+  # applying the ConfigMaps directly to cluster
   kubectl delete configmap $name --namespace $NAMESPACE --ignore-not-found
   kubectl create configmap $name --from-file=$path --namespace $NAMESPACE
+  # creating the ConfigMaps locally
   kubectl create configmap $name --from-file=$path --dry-run=client -o yaml > $name.yaml
 }
 

src/FormPage.jsx

@@ -1,30 +1,29 @@
 import "./Form.css";
+import React, { useState } from "react";
 import ProgressiveForm from "./components/Form/ProgressiveForm";
 import { EinfraFooter } from "./components/FooterAndHeader/EinfraFooter";
 import { FieldHeader } from "./components/FieldHeader/FieldHeader";
 import { SliderCheckBox } from "./components/SliderCheckBox/SliderCheckBox";
 import { DropDownMenu } from "./components/DropDownMenu/DropDownMenu";
+import { TileSelector } from "./components/TileSelector/TileSelector";
+import JupyterHubHeader from "./components/FooterAndHeader/JupyterHubHeader";
+import WarningMassage from "./components/AnouncmentMessage/AnouncmentMessage";
 import {
   DropDownButton,
   DropDownOption,
 } from "./components/DropDownButton/DropDownButton";
-import { TileSelector } from "./components/TileSelector/TileSelector";
-import React, { useState } from "react";
 import {
   selectOptionsStorage,
   images,
   sectionTitles,
   formImagesName,
   gpu_instance,
 } from "./data/formData";
-import JupyterHubHeader from "./components/FooterAndHeader/JupyterHubHeader";
-import WarningMassage from "./components/AnouncmentMessage/AnouncmentMessage";
 
 const StepOne = ({ setFormData }) => {
   const [activeDropdownIndex, setActiveDropdownIndex] = useState(null);
   const [selectedDropdownIndex, setSelectedDropdownIndex] = useState(null);
-  const [activeDropdownOptionIndex, setActiveDropdownOptionIndex] =
-    useState(null);
+  const [activeDropdownOptionIndex, setActiveDropdownOptionIndex] = useState(null);
 
   const handleSelect = (key, image, index, dindex) => {
     setSelectedDropdownIndex(dindex);
@@ -128,8 +127,7 @@ const StepOne = ({ setFormData }) => {
         title="Ensure ssh access into the notebook"
         onChange={handleSshCheck}
       >
-        Connection will be available at jovyan@jupyter-{appConfig.userName}
-        {formattedName}.dyn.cloud.e-infra.cz
+        Connection will be available at jovyan@jupyter-{appConfig.userName}{formattedName}.dyn.cloud.e-infra.cz
       </SliderCheckBox>
     </div>
   );

src/components/AnouncmentMessage/AnouncmentMessage.stories.jsx

@@ -0,0 +1,48 @@
+import AnouncmentMessage from "./AnouncmentMessage";
+import React from "react";
+
+export default {
+  title: "Example/Button",
+  component: AnouncmentMessage,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export const Primary = {
+  args: {
+    style: "warning",
+    children : ( <div>
+        <h2> Scheduled maintenance and reboot on 16th - 18th Dec 2024 </h2>
+        <p>
+        {" "}
+        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.{" "}
+        </p>
+    </div>
+    )
+  },
+};
+
+export const InputDropdown = {
+  args: {
+    title: "Input Drop Down",
+    children: <input></input>,
+  },
+};
+
+export const infoDropdown = {
+  args: {
+    title: "Info Drop Down",
+    infoText:
+      "Provide image name in format repo/image_name:tag or repo/image_name. No tag will be interpreted as latest.",
+  },
+};
+
+export const Secondary = {
+  args: {
+    title: "Secondary Drop Down",
+    primary: false,
+  },
+};

src/home.jsx

@@ -5,5 +5,4 @@ import "@fontsource/montserrat/600.css";
 import "./index.css";
 
 const root = createRoot(document.getElementById("root"));
-console.log(root);
 root.render(<HomePage />);

src/login.jsx

@@ -6,7 +6,6 @@ import "@fontsource/montserrat/600.css";
 import "./index.css";
 
 const root = createRoot(document.getElementById("root"));
-console.log(root);
 root.render(
   <div>
     <WarningMassage style="warning">

src/not_running.jsx

@@ -5,5 +5,4 @@ import "@fontsource/montserrat/600.css";
 import "./index.css";
 
 const root = createRoot(document.getElementById("root"));
-console.log(root);
 root.render(<NotRunning />);

src/spawn_pending.jsx

@@ -5,5 +5,4 @@ import "@fontsource/montserrat/600.css";
 import "./index.css";
 
 const root = createRoot(document.getElementById("root"));
-console.log(root);
 root.render(<SpawnPending />);