vdk-jupyter: introduce Task Runner, a polling mechanism that runs tasks in the background and tracks their status

projects/vdk-plugins/vdk-ipython/README.md

@@ -11,7 +11,7 @@ See more about magic commands: https://ipython.readthedocs.io/en/stable/interact
 
 To use the extension it must be firstly installed with pip as a python package.
 ```
-pip install vkd-ipython
+pip install vdk-ipython
 ```
 
 ## Usage

projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/commandsAndMenu.tsx

@@ -12,9 +12,9 @@ import { IDocumentManager } from '@jupyterlab/docmanager';
 import { FileBrowser } from '@jupyterlab/filebrowser';
 import { INotebookTracker } from '@jupyterlab/notebook';
 import { StatusButton } from './components/StatusButton';
-import {  ERROR_LABEL  } from './utils';
+import { ERROR_LABEL } from './utils';
 import { showErrorDialog } from './components/props';
-import {showLogin2Dialog} from "./components/Login2";
+import { showLogin2Dialog } from './components/Login2';
 
 export var runningVdkOperation = '';
 
@@ -25,11 +25,11 @@ export function updateVDKMenu(
   notebookTracker: INotebookTracker,
   statusButton: StatusButton
 ) {
-
   commands.addCommand('jp-vdk:menu-login', {
     label: 'Login',
     caption: 'Execute VDK Login Command',
-    execute: showLogin2Dialog });
+    execute: showLogin2Dialog
+  });
 
   // Add Run job command
   add_command(

projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/components/ConvertJobToNotebook.tsx

@@ -81,13 +81,14 @@ export async function showConvertJobToNotebookDialog(
     });
     if (confirmation.button.accept) {
       statusButton?.show('Convert', jobData.get(VdkOption.PATH)!);
-      let { message, status } = await jobConvertToNotebookRequest();
-      if (status) {
-        const transformjobResult = JSON.parse(message);
-        notebookContent = initializeNotebookContent(
-          transformjobResult['code_structure'],
-          transformjobResult['removed_files']
-        );
+      let { message, isSuccessful } = await jobConvertToNotebookRequest();
+      if (isSuccessful) {
+        if (typeof message !== 'string') {
+          notebookContent = initializeNotebookContent(
+            message.code_structure,
+            message.removed_files
+          );
+        }
         await createTranformedNotebook(commands, fileBrowser, notebookTracker);
         await showDialog({
           title: CONVERT_JOB_TO_NOTEBOOK_BUTTON_LABEL,

projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/components/CreateJob.tsx

@@ -6,7 +6,7 @@ import { Dialog, showDialog } from '@jupyterlab/apputils';
 import { jobRequest } from '../serverRequests';
 import { IJobFullProps } from './props';
 import { CREATE_JOB_BUTTON_LABEL } from '../utils';
-import {StatusButton} from "./StatusButton";
+import { StatusButton } from './StatusButton';
 
 export default class CreateJobDialog extends Component<IJobFullProps> {
   /**
@@ -41,7 +41,7 @@ export default class CreateJobDialog extends Component<IJobFullProps> {
           value={this.props.jobPath}
           label="Path to job directory:"
           tooltip="Specify the directory for the new job folder, e.g., 'x/y' with job name 'foo' becomes 'x/y/foo'. If left blank, it defaults to the Jupyter's main directory."
-          ></VDKTextInput>
+        ></VDKTextInput>
       </>
     );
   }

projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/components/DeployJob.tsx

@@ -5,7 +5,11 @@ import VDKTextInput from './VdkTextInput';
 import { Dialog, showDialog, showErrorMessage } from '@jupyterlab/apputils';
 import { jobRequest, jobRunRequest } from '../serverRequests';
 import { IJobFullProps } from './props';
-import { CREATE_DEP_BUTTON_LABEL, RUN_JOB_BUTTON_LABEL, RUN_LOG_FILE } from '../utils';
+import {
+  CREATE_DEP_BUTTON_LABEL,
+  RUN_JOB_BUTTON_LABEL,
+  RUN_LOG_FILE
+} from '../utils';
 import { VdkErrorMessage } from './VdkErrorMessage';
 import { VDKCheckbox } from './VdkCheckbox';
 import { StatusButton } from './StatusButton';
@@ -54,7 +58,10 @@ export default class DeployJobDialog extends Component<IJobFullProps> {
   }
 }
 
-export async function showCreateDeploymentDialog(docManager?: IDocumentManager, statusButton?: StatusButton) {
+export async function showCreateDeploymentDialog(
+  docManager?: IDocumentManager,
+  statusButton?: StatusButton
+) {
   let runBeforeDeploy = true;
 
   const result = await showDialog({

projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/components/Login2.tsx

@@ -1,23 +1,23 @@
 import React, { Component } from 'react';
-import {requestAPI} from "../handler";
-import {Dialog, showDialog} from "@jupyterlab/apputils";
+import { requestAPI } from '../handler';
+import { Dialog, showDialog } from '@jupyterlab/apputils';
 import {
-    LOGIN2_BUTTON_CLASS,
-    LOGIN2_DIALOG_CLASS,
-    LOGIN2_INPUT_CLASS,
-    LOGIN_BUTTON_LABEL,
-} from "../utils";
+  LOGIN2_BUTTON_CLASS,
+  LOGIN2_DIALOG_CLASS,
+  LOGIN2_INPUT_CLASS,
+  LOGIN_BUTTON_LABEL
+} from '../utils';
 
 // Enum representing different states of authentication
 enum AuthStatus {
-    NONE,
-    WINDOW_OPENED,
-    SUCCESS,
-    FAILURE
+  NONE,
+  WINDOW_OPENED,
+  SUCCESS,
+  FAILURE
 }
 
 interface ManualOAuth2FlowState {
-    authStatus: AuthStatus;
+  authStatus: AuthStatus;
 }
 
 /**
@@ -44,112 +44,136 @@ interface ManualOAuth2FlowState {
  * 5. The component's state is updated based on the success or failure of the authentication.
  *
  */
-export default class ManualOAuth2Flow extends Component<{}, ManualOAuth2FlowState>  {
-    private authWindow: Window | null = null;
+export default class ManualOAuth2Flow extends Component<
+  {},
+  ManualOAuth2FlowState
+> {
+  private authWindow: Window | null = null;
 
-    constructor(props: {}) {
-        super(props);
-        this.state = {
-            authStatus: AuthStatus.NONE
-        };
-    }
-
-
-    openAuthWindow = async () => {
-        try {
-            const redirect_url = await requestAPI<any>(
-                'login',
-                {
-                    method: 'GET'
-                }
-            );
-            console.debug("Authorization redirect URL is" + redirect_url);
+  constructor(props: {}) {
+    super(props);
+    this.state = {
+      authStatus: AuthStatus.NONE
+    };
+  }
 
-            this.authWindow = window.open(redirect_url, 'authWindow', 'width=600,height=400');
-            this.setState({authStatus: AuthStatus.WINDOW_OPENED});
-        } catch(error) {
-            console.error("Error during start of authentication:", error);
-            this.setState({ authStatus: AuthStatus.FAILURE });
-        }
+  openAuthWindow = async () => {
+    try {
+      const redirect_url = await requestAPI<any>('login', {
+        method: 'GET'
+      });
+      console.debug('Authorization redirect URL is' + redirect_url);
 
+      this.authWindow = window.open(
+        redirect_url,
+        'authWindow',
+        'width=600,height=400'
+      );
+      this.setState({ authStatus: AuthStatus.WINDOW_OPENED });
+    } catch (error) {
+      console.error('Error during start of authentication:', error);
+      this.setState({ authStatus: AuthStatus.FAILURE });
     }
+  };
 
-    closeAuthWindow = () => {
-        if (this.authWindow && !this.authWindow.closed) {
-            this.authWindow.close();
-        }
+  closeAuthWindow = () => {
+    if (this.authWindow && !this.authWindow.closed) {
+      this.authWindow.close();
     }
+  };
 
-    handleURLInput = async (e: { target: { value: any; }; }) => {
-        const redirectURI = e.target.value;
-        const code = new URL(redirectURI).searchParams.get('code');
-        if (code) {
-            try {
-                await requestAPI<any>(
-                    'login?code=' + code,
-                    {
-                        method: 'GET'
-                    }
-                );
-                this.closeAuthWindow();
-                this.setState({ authStatus: AuthStatus.SUCCESS });
-            } catch (error) {
-                this.closeAuthWindow();
-                console.error("Error during authentication:", error);
-                this.setState({ authStatus: AuthStatus.FAILURE });
-            }
-        }
+  handleURLInput = async (e: { target: { value: any } }) => {
+    const redirectURI = e.target.value;
+    const code = new URL(redirectURI).searchParams.get('code');
+    if (code) {
+      try {
+        await requestAPI<any>('login?code=' + code, {
+          method: 'GET'
+        });
+        this.closeAuthWindow();
+        this.setState({ authStatus: AuthStatus.SUCCESS });
+      } catch (error) {
+        this.closeAuthWindow();
+        console.error('Error during authentication:', error);
+        this.setState({ authStatus: AuthStatus.FAILURE });
+      }
     }
+  };
 
-    render() {
-        return (
-            <div className={LOGIN2_DIALOG_CLASS}>
-                {this.state.authStatus === AuthStatus.NONE &&
-                    <div>
-                        <p>Authenticate process will start. After you clik a new window will be opened.</p>
-                        <ul>
-                            <li>Please <b>wait</b> for the authentication window to redirect you back to 127.0.0.1.</li>
-                            <li><b>Ignore</b> the failed connection error message.</li>
-                            <li>And then <b>copy and paste</b> the full URL you are redirected to.</li>
-                        </ul>
+  render() {
+    return (
+      <div className={LOGIN2_DIALOG_CLASS}>
+        {this.state.authStatus === AuthStatus.NONE && (
+          <div>
+            <p>
+              Authenticate process will start. After you clik a new window will
+              be opened.
+            </p>
+            <ul>
+              <li>
+                Please <b>wait</b> for the authentication window to redirect you
+                back to 127.0.0.1.
+              </li>
+              <li>
+                <b>Ignore</b> the failed connection error message.
+              </li>
+              <li>
+                And then <b>copy and paste</b> the full URL you are redirected
+                to.
+              </li>
+            </ul>
 
-                        <button className={LOGIN2_BUTTON_CLASS} onClick={this.openAuthWindow}>Click here to start.</button>
-                    </div>
-                }
-                {this.state.authStatus === AuthStatus.WINDOW_OPENED &&
-                    <div>
-                        <p>A new authentication window has been opened.</p>
-                        <ul>
-                            <li>Please <b>wait</b> for the authentication window to redirect you back to 127.0.0.1.</li>
-                            <li><b>Ignore</b> the failed connection error message.</li>
-                            <li>And then <b>copy and paste</b> the full URL you are redirected to in here:</li>
-                        </ul>
-                        <input type="text" className={LOGIN2_INPUT_CLASS} onChange={this.handleURLInput} />
-                    </div>
-                }
-                {this.state.authStatus === AuthStatus.SUCCESS &&
-                    <div>
-                        <p>Authentication successful!</p>
-                    </div>
-                }
-                {this.state.authStatus === AuthStatus.FAILURE &&
-                    <div>
-                        <p>Authentication failed!</p>
-                    </div>
-                }
-            </div>
-        );
-    }
+            <button
+              className={LOGIN2_BUTTON_CLASS}
+              onClick={this.openAuthWindow}
+            >
+              Click here to start.
+            </button>
+          </div>
+        )}
+        {this.state.authStatus === AuthStatus.WINDOW_OPENED && (
+          <div>
+            <p>A new authentication window has been opened.</p>
+            <ul>
+              <li>
+                Please <b>wait</b> for the authentication window to redirect you
+                back to 127.0.0.1.
+              </li>
+              <li>
+                <b>Ignore</b> the failed connection error message.
+              </li>
+              <li>
+                And then <b>copy and paste</b> the full URL you are redirected
+                to in here:
+              </li>
+            </ul>
+            <input
+              type="text"
+              className={LOGIN2_INPUT_CLASS}
+              onChange={this.handleURLInput}
+            />
+          </div>
+        )}
+        {this.state.authStatus === AuthStatus.SUCCESS && (
+          <div>
+            <p>Authentication successful!</p>
+          </div>
+        )}
+        {this.state.authStatus === AuthStatus.FAILURE && (
+          <div>
+            <p>Authentication failed!</p>
+          </div>
+        )}
+      </div>
+    );
+  }
 }
 
-
 export async function showLogin2Dialog() {
-    await showDialog({
-        title: LOGIN_BUTTON_LABEL,
-        body: (
-            <ManualOAuth2Flow></ManualOAuth2Flow>
-        ),
-        buttons: [Dialog.cancelButton({label: "Close"})],
-        hasClose: false
-    });
+  await showDialog({
+    title: LOGIN_BUTTON_LABEL,
+    body: <ManualOAuth2Flow></ManualOAuth2Flow>,
+    buttons: [Dialog.cancelButton({ label: 'Close' })],
+    hasClose: false
+  });
 }