feat: add environment variables when start a session (#2058)(#2066)

Fix #2058
SwissDataScienceCenter · Oct 14, 2022 · 7c6e24f · 7c6e24f
1 parent f4cb3f2
commit 7c6e24f
Show file tree

Hide file tree

Showing 9 changed files with 263 additions and 60 deletions.
diff --git a/client/src/api-client/notebook-servers.js b/client/src/api-client/notebook-servers.js
@@ -84,7 +84,7 @@ function addNotebookServersMethods(client) {
     });
   };
 
-  client.startNotebook = (namespacePath, projectPath, branchName, commitId, image, options) => {
+  client.startNotebook = (namespacePath, projectPath, branchName, commitId, image, options, env_variables = {}) => {
     const headers = client.getBasicHeaders();
     headers.append("Content-Type", "application/json");
     const url = `${client.baseUrl}/notebooks/servers`;
@@ -106,6 +106,7 @@ function addNotebookServersMethods(client) {
       commit_sha: commitId,
       branch: branchName,
       notebook,
+      environment_variables: env_variables,
       ...options
     };
     if (image)

diff --git a/client/src/api-client/utils.js b/client/src/api-client/utils.js
@@ -79,4 +79,15 @@ function fetchJson(...args) {
   return fetch(...args).then(response => response.json());
 }
 
-export { fetchJson, renkuFetch, AUTH_HEADER, RETURN_TYPES };
+function formatEnvironmentVariables(variables) {
+  const env_variables = {};
+  if (variables?.length > 0) {
+    variables.map( variable => {
+      if (variable.key && variable.value)
+        env_variables[variable.key] = variable.value;
+    });
+  }
+  return env_variables;
+}
+
+export { fetchJson, renkuFetch, formatEnvironmentVariables, AUTH_HEADER, RETURN_TYPES };
diff --git a/client/src/model/RenkuModels.js b/client/src/model/RenkuModels.js
@@ -391,6 +391,7 @@ const notebooksSchema = new Schema({
       commit: { initial: {} },
       discard: { initial: false },
       options: { initial: {} },
+      environment_variables: { initial: [] },
       objectStoresConfiguration: { initial: [] },
       includeMergedBranches: { initial: false },
       displayedCommits: { initial: 25 },
@@ -722,5 +723,5 @@ const formGeneratorSchema = new Schema({
 export {
   datasetFormSchema, datasetSchema, datasetImportFormSchema, environmentSchema,
   formGeneratorSchema, issueFormSchema, newProjectSchema, notebooksSchema, notificationsSchema,
-  projectSchema, projectsSchema, statuspageSchema, userSchema, webSocketSchema
+  projectSchema, projectsSchema, statuspageSchema, userSchema, webSocketSchema,
 };
diff --git a/client/src/notebooks/NotebookStart.present.js b/client/src/notebooks/NotebookStart.present.js
@@ -47,7 +47,8 @@ import LaunchErrorAlert from "./components/LaunchErrorAlert";
 import { NotebooksHelper } from "./index";
 import { ObjectStoresConfigurationButton, ObjectStoresConfigurationModal } from "./ObjectStoresConfig.present";
 import ProgressIndicator, { ProgressStyle, ProgressType } from "../utils/components/progress/Progress";
-
+import EnvironmentVariables from "./components/EnviromentVariables";
+import { useSelector } from "react-redux";
 
 function ProjectSessionLockAlert({ lockStatus }) {
   if (lockStatus == null) return null;
@@ -124,6 +125,11 @@ function StartNotebookServer(props) {
   const location = useLocation();
 
   const [showShareLinkModal, setShowShareLinkModal] = useState(location?.state?.showShareLinkModal ?? false);
+  const environmentVariables = useSelector(state => state.stateModel.notebooks.filters?.environment_variables);
+  const setNotebookEnvVariables = (variables) => {
+    props.handlers.setNotebookEnvVariables(variables);
+  };
+
   const toggleShareLinkModal = () => setShowShareLinkModal(!showShareLinkModal);
 
   // Show fetching status when auto-starting
@@ -153,6 +159,8 @@ function StartNotebookServer(props) {
       notebookFilePath={location?.state?.filePath}
       toggleShareLinkModal={toggleShareLinkModal}
       showShareLinkModal={showShareLinkModal}
+      setEnvironmentVariables={setNotebookEnvVariables}
+      environmentVariables={environmentVariables}
       {...props} />) :
     null;
 
@@ -835,54 +843,54 @@ class StartNotebookCommitsOptions extends Component {
   }
 }
 
-class StartNotebookOptions extends Component {
-  render() {
-    const { justStarted } = this.props;
-    if (justStarted)
-      return <Label>Starting a new session... <Loader size="14" inline="true" /></Label>;
+function StartNotebookOptions(props) {
 
-    const { all, fetched } = this.props.notebooks;
-    const { filters, options } = this.props;
-    if (!fetched)
-      return (<Label>Verifying available sessions... <Loader size="14" inline="true" /></Label>);
-
-    if (Object.keys(options.global).length === 0 || options.fetching)
-      return (<Label>Loading session parameters... <Loader size="14" inline="true" /></Label>);
-
-    if (Object.keys(all).length > 0) {
-      const currentCommit = filters.commit?.id;
-      const currentNotebook = Object.keys(all).find(k => {
-        const annotations = NotebooksHelper.cleanAnnotations(all[k].annotations, "renku.io");
-        if (annotations["commit-sha"] === currentCommit)
-          return true;
-        return false;
-      });
-      if (currentNotebook) {
-        return [
-          <StartNotebookOptionsRunning key="notebook-options-running" notebook={all[currentNotebook]}/>,
-          <ShareLinkSessionModal
-            key="shareLinkModal"
-            toggleModal={this.props.toggleShareLinkModal}
-            showModal={this.props.showShareLinkModal}
-            notebookFilePath={this.props.notebookFilePath}
-            {...this.props}
-          />
-        ];
-      }
-    }
+  const { justStarted, environmentVariables, setEnvironmentVariables } = props;
+  if (justStarted)
+    return <Label>Starting a new session... <Loader size="14" inline="true" /></Label>;
 
-    return [
-      <StartNotebookServerOptions key="options" {...this.props} />,
-      <ServerOptionLaunch key="button" {...this.props} />,
-      <ShareLinkSessionModal
-        key="shareLinkModal"
-        toggleModal={this.props.toggleShareLinkModal}
-        showModal={this.props.showShareLinkModal}
-        {...this.props}
-      />
-    ];
+  const { all, fetched } = props.notebooks;
+  const { filters, options } = props;
+  if (!fetched)
+    return (<Label>Verifying available sessions... <Loader size="14" inline="true" /></Label>);
 
+  if (Object.keys(options.global).length === 0 || options.fetching)
+    return (<Label>Loading session parameters... <Loader size="14" inline="true" /></Label>);
+
+  if (Object.keys(all).length > 0) {
+    const currentCommit = filters.commit?.id;
+    const currentNotebook = Object.keys(all).find(k => {
+      const annotations = NotebooksHelper.cleanAnnotations(all[k].annotations, "renku.io");
+      if (annotations["commit-sha"] === currentCommit)
+        return true;
+      return false;
+    });
+    if (currentNotebook) {
+      return [
+        <StartNotebookOptionsRunning key="notebook-options-running" notebook={all[currentNotebook]}/>,
+        <ShareLinkSessionModal
+          key="shareLinkModal"
+          toggleModal={props.toggleShareLinkModal}
+          showModal={props.showShareLinkModal}
+          notebookFilePath={props.notebookFilePath}
+          {...props}
+        />
+      ];
+    }
   }
+
+  return [
+    <StartNotebookServerOptions key="options" {...props} />,
+    <EnvironmentVariables key="envVariables"
+      environmentVariables={environmentVariables} setEnvironmentVariables={setEnvironmentVariables} />,
+    <ServerOptionLaunch key="button" {...props} />,
+    <ShareLinkSessionModal
+      key="shareLinkModal"
+      toggleModal={props.toggleShareLinkModal}
+      showModal={props.showShareLinkModal}
+      {...props}
+    />
+  ];
 }
 
 function Warning(props) {

diff --git a/client/src/notebooks/Notebooks.container.js b/client/src/notebooks/Notebooks.container.js
@@ -300,6 +300,11 @@ class StartNotebookServer extends Component {
     this.customNotebookFilePath = currentSearch && this.autostart && currentSearch["notebook"] ?
       currentSearch["notebook"] :
       null;
+
+    const environmentVariables = this.getEnvironmentVariablesFromSearch(currentSearch);
+    this.customEnvVariables = currentSearch && this.autostart && environmentVariables.length ?
+      environmentVariables : [];
+
     this.state = {
       autosavesCommit: false,
       autostartReady: false,
@@ -326,6 +331,7 @@ class StartNotebookServer extends Component {
       setIgnorePipeline: this.setIgnorePipeline.bind(this),
       setDisplayedCommits: this.setDisplayedCommits.bind(this),
       setServerOption: this.setServerOptionFromEvent.bind(this),
+      setNotebookEnvVariables: this.setNotebookEnvVariables.bind(this),
       startServer: this.startServer.bind(this),
       setObjectStoresConfiguration: this.setObjectStoresConfiguration.bind(this),
       toggleMergedBranches: this.toggleMergedBranches.bind(this),
@@ -340,6 +346,7 @@ class StartNotebookServer extends Component {
         this.coordinator.startNotebookPolling();
       this.coordinator.fetchAutosaves();
       this.selectNotebookFilePath(this.customNotebookFilePath);
+      this.setNotebookEnvVariables(this.customEnvVariables);
       this.refreshBranches();
     }
   }
@@ -413,6 +420,25 @@ class StartNotebookServer extends Component {
     this.coordinator.setNotebookFilePath(notebookFilePath);
   }
 
+  setNotebookEnvVariables(variables) {
+    this.coordinator.setNotebookEnvironmentVariables(variables);
+  }
+
+  getEnvironmentVariablesFromSearch(search) {
+    const variables = [];
+    Object.keys(search).map( key => {
+      if (key.startsWith("env[")) {
+        const env_key = key.split("env[").pop().split("]").shift();
+        const value = search[key];
+        if (Array.isArray(value))
+          value.forEach(val => variables.push({ key: env_key, value: val }));
+        else
+          variables.push({ key: env_key, value: search[key] });
+      }
+    });
+    return variables;
+  }
+
   async selectBranch(branchName) {
     if (this._isMounted) {
       // get the useful branchName
@@ -808,6 +834,7 @@ class StartNotebookServer extends Component {
       launchError={this.state.launchError}
       lockStatus={this.props.lockStatus}
       message={this.props.message}
+      envVariablesQueryParams={this.customEnvVariables}
       {...this.propsToChildProps()}
     />;
   }

diff --git a/client/src/notebooks/Notebooks.state.js b/client/src/notebooks/Notebooks.state.js
@@ -28,6 +28,7 @@ import _ from "lodash";
 import { API_ERRORS } from "../api-client/errors";
 import { notebooksSchema } from "../model";
 import { parseINIString, sleep } from "../utils/helpers/HelperFunctions";
+import { formatEnvironmentVariables } from "../api-client/utils";
 
 
 const POLLING_INTERVAL = 3000;
@@ -472,6 +473,10 @@ class NotebooksCoordinator {
     this.model.set(`filters.options.${option}`, value);
   }
 
+  setNotebookEnvironmentVariables(values) {
+    this.model.set(`filters.environment_variables`, values);
+  }
+
   setObjectStoresConfiguration(value) {
     this.model.set("filters.objectStoresConfiguration", value);
   }
@@ -1262,8 +1267,9 @@ class NotebooksCoordinator {
     const image = projectOptions.image ?
       projectOptions.image :
       null;
+    const env_variables = formatEnvironmentVariables(this.model.get("filters.environment_variables"));
 
-    return this.client.startNotebook(namespace, project, branch, commit, image, options);
+    return this.client.startNotebook(namespace, project, branch, commit, image, options, env_variables);
   }
 
   stopNotebook(serverName, force = false) {

diff --git a/client/src/notebooks/Notebooks.test.js b/client/src/notebooks/Notebooks.test.js
@@ -372,23 +372,29 @@ describe("rendering", () => {
     document.body.appendChild(div);
     await act(async () => {
       ReactDOM.render(
-        <MemoryRouter>
-          <StartNotebookServer {...props} />
-        </MemoryRouter>, div);
+        <Provider store={model.reduxStore}>
+          <MemoryRouter>
+            <StartNotebookServer {...props} />
+          </MemoryRouter>
+        </Provider>, div);
     });
     await act(async () => {
       ReactDOM.render(
-        <MemoryRouter>
-          <StartNotebookServer {...props} scope={scope} />
-        </MemoryRouter>, div);
+        <Provider store={model.reduxStore}>
+          <MemoryRouter>
+            <StartNotebookServer {...props} scope={scope} />
+          </MemoryRouter>
+        </Provider>, div);
     });
     // autostart session
     const autostartFakeLocation = { pathname: "", search: "autostart=1" };
     await act(async () => {
       ReactDOM.render(
-        <MemoryRouter>
-          <StartNotebookServer {...props} location={autostartFakeLocation} />
-        </MemoryRouter>, div);
+        <Provider store={model.reduxStore}>
+          <MemoryRouter>
+            <StartNotebookServer {...props} location={autostartFakeLocation} />
+          </MemoryRouter>
+        </Provider>, div);
     });
   });