Modify logout and control panel redirect for project notebooks

opendatahub-io · Dec 8, 2022 · 1105f45 · 1105f45
1 parent ae1c98b
commit 1105f45
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 20 deletions.
diff --git a/frontend/src/api/network/notebooks.ts b/frontend/src/api/network/notebooks.ts
@@ -115,7 +115,7 @@ const assembleNotebook = (data: StartNotebookData, username: string): NotebookKi
       annotations: {
         'openshift.io/display-name': notebookName,
         'openshift.io/description': description || '',
-        'notebooks.opendatahub.io/oauth-logout-url': `${origin}/notebookController/${translatedUsername}/home`,
+        'notebooks.opendatahub.io/oauth-logout-url': `${origin}/projects/${projectName}?notebook_logout=${notebookName}`,
         'notebooks.opendatahub.io/last-size-selection': notebookSize.name,
         'notebooks.opendatahub.io/last-image-selection': imageSelection,
         'notebooks.opendatahub.io/inject-oauth': 'true',
@@ -143,7 +143,7 @@ const assembleNotebook = (data: StartNotebookData, username: string): NotebookKi
                   --ServerApp.password=''
                   --ServerApp.base_url=/notebook/${projectName}/${notebookId}
                   --ServerApp.quit_button=False
-                  --ServerApp.tornado_settings={"user":"${translatedUsername}","hub_host":"${origin}","hub_prefix":"/notebookController/${translatedUsername}"}`,
+                  --ServerApp.tornado_settings={"user":"${translatedUsername}","hub_host":"${origin}","hub_prefix":"/projects/${projectName}"}`,
                 },
                 {
                   name: 'JUPYTER_IMAGE',

diff --git a/frontend/src/pages/notebookController/NotebookLogoutRedirect.tsx b/frontend/src/pages/notebookController/NotebookLogoutRedirect.tsx
@@ -3,15 +3,24 @@ import { useParams, useNavigate } from 'react-router-dom';
 import { getNotebook } from '../../services/notebookService';
 import ApplicationsPage from '../../pages/ApplicationsPage';
 import useNotification from '../../utilities/useNotification';
+import useRouteForNotebook from '../projects/notebook/useRouteForNotebook';
+import useNamespaces from './useNamespaces';
 
 const NotebookLogoutRedirect: React.FC = () => {
   const { namespace, notebookName } = useParams<{ namespace: string; notebookName: string }>();
   const notification = useNotification();
   const navigate = useNavigate();
+  const { notebookNamespace } = useNamespaces();
+  const [routeLink, loaded, error] = useRouteForNotebook(notebookName, namespace);
+
   React.useEffect(() => {
-    if (namespace && notebookName) {
+    let cancelled = false;
+    if (namespace && notebookName && namespace === notebookNamespace) {
       getNotebook(namespace, notebookName)
         .then((notebook) => {
+          if (cancelled) {
+            return;
+          }
           if (notebook?.metadata.annotations?.['opendatahub.io/link']) {
             const location = new URL(notebook.metadata.annotations['opendatahub.io/link']);
             window.location.href = `${location.origin}/oauth/sign_out`;
@@ -24,10 +33,40 @@ const NotebookLogoutRedirect: React.FC = () => {
           }
         })
         .catch((e) => {
+          if (cancelled) {
+            return;
+          }
           console.error(e);
         });
     }
-  }, [namespace, notebookName, navigate, notification]);
+    return () => {
+      cancelled = true;
+    };
+  }, [namespace, notebookName, navigate, notification, notebookNamespace]);
+
+  React.useEffect(() => {
+    if (namespace && notebookName && namespace !== notebookNamespace) {
+      if (loaded) {
+        if (error) {
+          notification.error(`Error when logging out ${notebookName}`, error.message);
+          navigate(`/projects/${namespace}`);
+        } else if (routeLink) {
+          const location = new URL(routeLink);
+          window.location.href = `${location.origin}/oauth/sign_out`;
+        }
+      }
+    }
+  }, [
+    routeLink,
+    loaded,
+    error,
+    notification,
+    namespace,
+    notebookName,
+    navigate,
+    notebookNamespace,
+  ]);
+
   return (
     <ApplicationsPage title="Logging out..." description={null} loaded={false} empty={false} />
   );

diff --git a/frontend/src/pages/projects/notebook/NotebookRouteLink.tsx b/frontend/src/pages/projects/notebook/NotebookRouteLink.tsx
@@ -21,7 +21,10 @@ const NotebookRouteLink: React.FC<NotebookRouteLinkProps> = ({
   variant,
   isLarge,
 }) => {
-  const [routeLink, loaded, error] = useRouteForNotebook(notebook);
+  const [routeLink, loaded, error] = useRouteForNotebook(
+    notebook.metadata.name,
+    notebook.metadata.namespace,
+  );
   const isStopped = hasStopAnnotation(notebook);
   const canLink = loaded && !!routeLink && !error && !isStopped && isRunning;
 

diff --git a/frontend/src/pages/projects/notebook/useRouteForNotebook.ts b/frontend/src/pages/projects/notebook/useRouteForNotebook.ts
@@ -1,33 +1,32 @@
 import * as React from 'react';
 import { getRoute } from '../../../api';
-import { NotebookKind } from '../../../k8sTypes';
 
 const useRouteForNotebook = (
-  notebook: NotebookKind,
+  notebookName?: string,
+  projectName?: string,
 ): [routeLink: string | null, loaded: boolean, loadError: Error | null] => {
   const [route, setRoute] = React.useState<string | null>(null);
   const [loaded, setLoaded] = React.useState(false);
   const [loadError, setLoadError] = React.useState<Error | null>(null);
 
-  const routeName = notebook.metadata.name;
-  const routeNamespace = notebook.metadata.namespace;
-
   React.useEffect(() => {
     let watchHandle;
     const watchRoute = () => {
-      getRoute(routeName, routeNamespace)
-        .then((route) => {
-          setRoute(`https://${route.spec.host}/notebook/${routeNamespace}/${routeName}`);
-          setLoaded(true);
-        })
-        .catch((e) => {
-          setLoadError(e);
-          watchHandle = setTimeout(watchRoute, 1000);
-        });
+      if (notebookName && projectName) {
+        getRoute(notebookName, projectName)
+          .then((route) => {
+            setRoute(`https://${route.spec.host}/notebook/${projectName}/${notebookName}`);
+            setLoaded(true);
+          })
+          .catch((e) => {
+            setLoadError(e);
+            watchHandle = setTimeout(watchRoute, 1000);
+          });
+      }
     };
     watchRoute();
     return () => clearTimeout(watchHandle);
-  }, [routeName, routeNamespace]);
+  }, [notebookName, projectName]);
 
   return [route, loaded, loadError];
 };

diff --git a/frontend/src/pages/projects/screens/detail/ProjectDetails.tsx b/frontend/src/pages/projects/screens/detail/ProjectDetails.tsx
@@ -13,6 +13,8 @@ import NotebooksList from './notebooks/NotebookList';
 import { ProjectDetailsContext } from '../../ProjectDetailsContext';
 import { getProjectDescription, getProjectDisplayName } from '../../utils';
 import { featureFlagEnabled } from '../../../../utilities/utils';
+import { useQueryParams } from '../../../../utilities/useQueryParams';
+import useNotification from '../../../../utilities/useNotification';
 
 type SectionType = {
   id: ProjectSectionID;
@@ -27,6 +29,16 @@ const ProjectDetails: React.FC = () => {
   const modelServingEnabled = featureFlagEnabled(
     dashboardConfig.spec.dashboardConfig.disableModelServing,
   );
+  const queryParams = useQueryParams();
+  const notebookLogout = queryParams.get('notebook_logout');
+  const notification = useNotification();
+
+  // TODO: this will be triggered twice, don't know why
+  React.useEffect(() => {
+    if (notebookLogout) {
+      notification.success(`Logout workbench successfully`);
+    }
+  }, [notebookLogout, notification]);
 
   const scrollableSelectorID = 'project-details-list';
   const sections: SectionType[] = [