[wip] feat: add session Jupyter free images - Renku 2.0

.github/workflows/acceptance-tests.yml

@@ -32,6 +32,7 @@ jobs:
       renku-notebooks: ${{ steps.deploy-comment.outputs.renku-notebooks}}
       renku-data-services: ${{ steps.deploy-comment.outputs.renku-data-services}}
       amalthea: ${{ steps.deploy-comment.outputs.amalthea}}
+      amalthea-sessions: ${{ steps.deploy-comment.outputs.amalthea-sessions}}
       test-enabled: ${{ steps.deploy-comment.outputs.test-enabled}}
       extra-values: ${{ steps.deploy-comment.outputs.extra-values}}
     steps:
@@ -90,6 +91,7 @@ jobs:
           renku_notebooks: "${{ needs.check-deploy.outputs.renku-notebooks }}"
           renku_data_services: "${{ needs.check-deploy.outputs.renku-data-services }}"
           amalthea: "${{ needs.check-deploy.outputs.amalthea }}"
+          amalthea_sessions: "${{ needs.check-deploy.outputs.amalthea-sessions }}"
           extra_values: "${{ needs.check-deploy.outputs.extra-values }}"
 
   selenium-acceptance-tests:

client/.eslintrc.json

@@ -169,6 +169,7 @@
           "jupyter",
           "katex",
           "kernelspec",
+          "kubernetes",
           "Keycloak",
           "Lausanne",
           "linkify",

client/src/components/Logs.tsx

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import React, { useEffect } from "react";
+import React, { ReactNode, useEffect } from "react";
 import {
   Button,
   Modal,
@@ -42,9 +42,9 @@ import {
 } from "../utils/helpers/HelperFunctions";
 import { Loader } from "./Loader";
 
-import "./Logs.css";
-import { ArrowRepeat, FileEarmarkArrowDown } from "react-bootstrap-icons";
 import cx from "classnames";
+import { ArrowRepeat, FileEarmarkArrowDown } from "react-bootstrap-icons";
+import "./Logs.css";
 
 export interface ILogs {
   data: Record<string, string>;
@@ -335,13 +335,27 @@ const EnvironmentLogs = ({ name, annotations }: EnvironmentLogsProps) => {
     );
   };
 
+  const cleanAnnotations = NotebooksHelper.cleanAnnotations(
+    annotations
+  ) as NotebookAnnotations;
+
+  const modalTitle = !cleanAnnotations.renkuVersion && (
+    <div className="fs-5 fw-normal">
+      <small>
+        {cleanAnnotations["namespace"]}/{cleanAnnotations["projectName"]} [
+        {cleanAnnotations["branch"]}@
+        {cleanAnnotations["commit-sha"].substring(0, 8)}]
+      </small>
+    </div>
+  );
+
   return (
     <EnvironmentLogsPresent
       fetchLogs={fetchLogs}
       toggleLogs={toggleLogs}
       logs={logs}
       name={name}
-      annotations={annotations}
+      title={modalTitle}
     />
   );
 };
@@ -353,38 +367,24 @@ const EnvironmentLogs = ({ name, annotations }: EnvironmentLogsProps) => {
  * @param {function} toggleLogs - toggle logs visibility and fetch logs on show
  * @param {object} logs - log object from redux store enhanced with `show` property
  * @param {string} name - server name
- * @param {object} annotations - list of annotations
+ * @param {ReactNode | string} title - modal title
  */
 interface EnvironmentLogsPresentProps {
-  annotations: Record<string, unknown>;
+  title: ReactNode | string;
   fetchLogs: IFetchableLogs["fetchLogs"];
   logs?: ILogs;
   name: string;
   toggleLogs: (name: string) => unknown;
 }
-const EnvironmentLogsPresent = ({
+function EnvironmentLogsPresent({
   logs,
   name,
   toggleLogs,
   fetchLogs,
-  annotations,
-}: EnvironmentLogsPresentProps) => {
+  title,
+}: EnvironmentLogsPresentProps) {
   if (!logs?.show || logs?.show !== name || !logs) return null;
 
-  const cleanAnnotations = NotebooksHelper.cleanAnnotations(
-    annotations
-  ) as NotebookAnnotations;
-
-  const modalTitle = !cleanAnnotations.renkuVersion && (
-    <div className="fs-5 fw-normal">
-      <small>
-        {cleanAnnotations["namespace"]}/{cleanAnnotations["projectName"]} [
-        {cleanAnnotations["branch"]}@
-        {cleanAnnotations["commit-sha"].substring(0, 8)}]
-      </small>
-    </div>
-  );
-
   return (
     <Modal
       isOpen={!!logs.show}
@@ -400,8 +400,7 @@ const EnvironmentLogsPresent = ({
           toggleLogs(name);
         }}
       >
-        <div>Logs</div>
-        {modalTitle}
+        {title}
       </ModalHeader>
       <ModalBody>
         <div className="mx-2">
@@ -410,6 +409,6 @@ const EnvironmentLogsPresent = ({
       </ModalBody>
     </Modal>
   );
-};
+}
 
 export { EnvironmentLogs, EnvironmentLogsPresent, SessionLogs };

client/src/components/LogsV2.tsx

@@ -0,0 +1,57 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { displaySlice } from "../features/display";
+import useAppDispatch from "../utils/customHooks/useAppDispatch.hook";
+import useAppSelector from "../utils/customHooks/useAppSelector.hook";
+import { useGetSessionLogsV2 } from "../utils/customHooks/UseGetSessionLogs";
+import { EnvironmentLogsPresent } from "./Logs";
+
+/**
+ * Sessions logs container integrating state and actions V2
+ *
+ * @param {string} name - server name
+ */
+interface EnvironmentLogsPropsV2 {
+  name: string;
+}
+export default function EnvironmentLogsV2({ name }: EnvironmentLogsPropsV2) {
+  const displayModal = useAppSelector(
+    ({ display }) => display.modals.sessionLogs
+  );
+  const { logs, fetchLogs } = useGetSessionLogsV2(
+    displayModal.targetServer,
+    displayModal.show
+  );
+  const dispatch = useAppDispatch();
+  const toggleLogs = function (target: string) {
+    dispatch(
+      displaySlice.actions.toggleSessionLogsModal({ targetServer: target })
+    );
+  };
+
+  return (
+    <EnvironmentLogsPresent
+      fetchLogs={fetchLogs}
+      toggleLogs={toggleLogs}
+      logs={logs}
+      name={name}
+      title="Logs"
+    />
+  );
+}

client/src/components/MoreInfo.tsx

@@ -0,0 +1,46 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import cx from "classnames";
+import { ReactNode, useRef } from "react";
+import { InfoCircleFill } from "react-bootstrap-icons";
+import { PopoverBody, UncontrolledPopover } from "reactstrap";
+
+export function MoreInfo({
+  trigger = "hover focus",
+  children,
+}: {
+  trigger?: string;
+  children?: ReactNode;
+}) {
+  const ref = useRef<HTMLSpanElement>(null);
+
+  return (
+    <>
+      <span ref={ref}>
+        <InfoCircleFill
+          className={cx("bi", "ms-1", "cursor-pointer", "text-light-emphasis")}
+          tabIndex={0}
+        />
+      </span>
+      <UncontrolledPopover target={ref} placement="right" trigger={trigger}>
+        <PopoverBody>{children}</PopoverBody>
+      </UncontrolledPopover>
+    </>
+  );
+}

client/src/features/admin/AddSessionEnvironmentButton.tsx

@@ -35,6 +35,7 @@ import SessionEnvironmentFormContent, {
   SessionEnvironmentForm,
 } from "./SessionEnvironmentFormContent";
 import { useAddSessionEnvironmentMutation } from "./adminSessions.api";
+import { safeParseJSONStringArray } from "../sessionsV2/session.utils";
 
 export default function AddSessionEnvironmentButton() {
   const [isOpen, setIsOpen] = useState(false);
@@ -79,12 +80,22 @@ function AddSessionEnvironmentModal({
   });
   const onSubmit = useCallback(
     (data: SessionEnvironmentForm) => {
-      addSessionEnvironment({
-        container_image: data.container_image,
-        name: data.name,
-        default_url: data.default_url.trim() ? data.default_url : undefined,
-        description: data.description.trim() ? data.description : undefined,
-      });
+      const commandParsed = safeParseJSONStringArray(data.command);
+      const argsParsed = safeParseJSONStringArray(data.args);
+      if (commandParsed.parsed && argsParsed.parsed)
+        addSessionEnvironment({
+          container_image: data.container_image,
+          name: data.name,
+          default_url: data.default_url?.trim() || undefined,
+          description: data.description?.trim() || undefined,
+          port: data.port ?? undefined,
+          working_directory: data.working_directory?.trim() || undefined,
+          mount_directory: data.mount_directory?.trim() || undefined,
+          uid: data.uid ?? undefined,
+          gid: data.gid ?? undefined,
+          command: commandParsed.data,
+          args: argsParsed.data,
+        });
     },
     [addSessionEnvironment]
   );
@@ -120,7 +131,6 @@ function AddSessionEnvironmentModal({
         <ModalHeader toggle={toggle}>Add session environment</ModalHeader>
         <ModalBody>
           {result.error && <RtkErrorAlert error={result.error} />}
-
           <SessionEnvironmentFormContent control={control} errors={errors} />
         </ModalBody>
         <ModalFooter>

client/src/features/admin/SessionEnvironmentAdvancedFields.tsx

@@ -0,0 +1,73 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import cx from "classnames";
+import { useCallback, useState } from "react";
+import { Control, FieldErrors } from "react-hook-form";
+import { Collapse } from "reactstrap";
+import ChevronFlippedIcon from "../../components/icons/ChevronFlippedIcon";
+import { SessionEnvironmentForm } from "./SessionEnvironmentFormContent";
+import { AdvancedSettingsFields } from "../sessionsV2/components/SessionForm/AdvancedSettingsFields";
+
+interface SessionEnvironmentAdvancedFieldsProps {
+  control: Control<SessionEnvironmentForm, unknown>;
+  errors: FieldErrors<SessionEnvironmentForm>;
+}
+
+export default function SessionEnvironmentAdvancedFields({
+  control,
+  errors,
+}: SessionEnvironmentAdvancedFieldsProps) {
+  const [isAdvancedSettingOpen, setIsAdvancedSettingsOpen] = useState(false);
+  const toggleIsOpen = useCallback(
+    () =>
+      setIsAdvancedSettingsOpen(
+        (isAdvancedSettingOpen) => !isAdvancedSettingOpen
+      ),
+    []
+  );
+  return (
+    <>
+      <div>
+        <button
+          className={cx(
+            "d-flex",
+            "align-items-center",
+            "w-100",
+            "bg-transparent",
+            "border-0",
+            "fw-bold"
+          )}
+          type="button"
+          onClick={toggleIsOpen}
+        >
+          Advanced settings{" "}
+          <ChevronFlippedIcon flipped={isAdvancedSettingOpen} />
+        </button>
+      </div>
+      <Collapse isOpen={isAdvancedSettingOpen}>
+        <div className="mt-3">
+          <AdvancedSettingsFields<SessionEnvironmentForm>
+            control={control}
+            errors={errors}
+          />
+        </div>
+      </Collapse>
+    </>
+  );
+}