vdk-jupyter: add Convert Job To Notebook UI button

projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/schema/plugin.json

@@ -24,6 +24,9 @@
           {
             "command": "jp-vdk:menu-download"
           },
+          {
+            "command": "jp-vdk:menu-transform-job-to-notebook"
+          },
           {
             "command": "jp-vdk:menu-create-deployment"
           }

projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/__tests__/transform-job-to-notebook-component.spec.ts

@@ -0,0 +1,38 @@
+/*
+ * Copyright 2023-2023 VMware, Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import TransformJobToNotebookDialog from '../components/TransformJobToNotebook';
+import { render, fireEvent } from '@testing-library/react';
+import { jobData } from '../jobData';
+import { VdkOption } from '../vdkOptions/vdk_options';
+import { IJobPathProp } from '../components/props';
+
+const defaultProps: IJobPathProp = {
+  jobPath: 'test-path'
+};
+
+// created with the expectation to compare a rendered value with expected value parsed from config.ini
+// yet to be implemented
+describe('#render()', () => {
+  it('should return contain job path input with placeholder equal to jobPath from props', () => {
+    const component = render(
+      new TransformJobToNotebookDialog(defaultProps).render()
+    );
+    const input = component.getByPlaceholderText(defaultProps.jobPath);
+    expect(input).toBe(
+      component.getAllByLabelText('Path to job directory:')[0]
+    );
+  });
+});
+
+describe('#onPathChange', () => {
+  it('should change the path in jobData', () => {
+    const component = render(
+      new TransformJobToNotebookDialog(defaultProps).render()
+    );
+    const input = component.getByPlaceholderText(defaultProps.jobPath);
+    fireEvent.change(input, { target: { value: 'other/path' } });
+    expect(jobData.get(VdkOption.PATH)).toEqual('other/path');
+  });
+});

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

@@ -5,6 +5,7 @@ import { jobData, setJobDataToDefault } from './jobData';
 import { showCreateDeploymentDialog } from './components/DeployJob';
 import { showCreateJobDialog } from './components/CreateJob';
 import { showDownloadJobDialog } from './components/DownloadJob';
+import { showTransformJobToNotebookDialog } from './components/TransformJobToNotebook';
 import { showDeleteJobDialog } from './components/DeleteJob';
 import { jobdDataRequest } from './serverRequests';
 import { VdkOption } from './vdkOptions/vdk_options';
@@ -26,6 +27,9 @@ export function updateVDKMenu(commands: CommandRegistry, docManager: IDocumentMa
   // Add Download job command
   add_command(commands, 'jp-vdk:menu-download','Download','Execute VDK Download Command', showDownloadJobDialog);
 
+  // Add Transform Job To Notebook command
+  add_command(commands, 'jp-vdk:menu-transform-job-to-notebook', 'Transform Job To Notebook', 'Transform Data Job To Jupyter Notebook', showTransformJobToNotebookDialog);
+
   // Add Create Deployment command
   add_command(commands, 'jp-vdk:menu-create-deployment','Deploy','Create deployment of a VDK job', showCreateDeploymentDialog);
 }

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

@@ -5,7 +5,7 @@ import VDKTextInput from './VdkTextInput';
 import { Dialog, showDialog } from '@jupyterlab/apputils';
 import { jobRequest } from '../serverRequests';
 import { IJobFullProps } from './props';
-
+import { CREATE_JOB_BUTTON_LABEL } from '../utils';
 
 export default class CreateJobDialog extends Component<(IJobFullProps)> {
   /**
@@ -110,7 +110,7 @@ export default class CreateJobDialog extends Component<(IJobFullProps)> {
 
 export async function showCreateJobDialog() {
   const result = await showDialog({
-    title: 'Create Job',
+    title: CREATE_JOB_BUTTON_LABEL,
     body: (
       <CreateJobDialog
         jobPath={jobData.get(VdkOption.PATH)!}

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

@@ -5,7 +5,7 @@ import { Dialog, showDialog, showErrorMessage } from '@jupyterlab/apputils';
 import { jobData } from '../jobData';
 import { jobRequest } from '../serverRequests';
 import { IJobNameAndTeamProps } from './props';
-
+import { DELETE_JOB_BUTTON_LABEL } from '../utils';
 
 export default class DeleteJobDialog extends Component<IJobNameAndTeamProps> {
   /**
@@ -42,7 +42,7 @@ export default class DeleteJobDialog extends Component<IJobNameAndTeamProps> {
 
 export async function showDeleteJobDialog() {
   const result = await showDialog({
-    title: 'Delete Job',
+    title: DELETE_JOB_BUTTON_LABEL,
     body: (
       <DeleteJobDialog
         jobName={jobData.get(VdkOption.NAME)!}
@@ -54,7 +54,7 @@ export async function showDeleteJobDialog() {
   if (result.button.accept) {
     try {
       const finalResult = await showDialog({
-        title: 'Delete a data job',
+        title: DELETE_JOB_BUTTON_LABEL,
         body:
           'Do you really want to delete the job with name ' +
           jobData.get(VdkOption.NAME) +

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

@@ -5,9 +5,9 @@ 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 } from '../utils';
 
-
-export default class DeployJobDialog extends Component<(IJobFullProps)> {
+export default class DeployJobDialog extends Component<IJobFullProps> {
   /**
    * Returns a React component for rendering a Deploy menu.
    *
@@ -65,7 +65,7 @@ export default class DeployJobDialog extends Component<(IJobFullProps)> {
    */
   private onEnableClick() {
     return (event: React.MouseEvent) => {
-      let checkbox = document.getElementById('enable');
+      const checkbox = document.getElementById('enable');
       if (checkbox?.classList.contains('checked')) {
         checkbox.classList.remove('checked');
         jobData.set(VdkOption.DEPLOY_ENABLE, '');
@@ -79,7 +79,7 @@ export default class DeployJobDialog extends Component<(IJobFullProps)> {
 
 export async function showCreateDeploymentDialog() {
   const result = await showDialog({
-    title: 'Create Deployment',
+    title: CREATE_DEP_BUTTON_LABEL,
     body: (
       <DeployJobDialog
         jobName={jobData.get(VdkOption.NAME)!}
@@ -93,18 +93,20 @@ export async function showCreateDeploymentDialog() {
   if (resultButtonClicked) {
     try {
       const runConfirmationResult = await showDialog({
-        title: 'Create deployment',
+        title: CREATE_DEP_BUTTON_LABEL,
         body: 'The job will be executed once before deployment.',
         buttons: [
           Dialog.cancelButton({ label: 'Cancel' }),
           Dialog.okButton({ label: 'Continue' })
         ]
       });
       if (runConfirmationResult.button.accept) {
-        let { message, status } = await jobRunRequest();
+        const { message, status } = await jobRunRequest();
         if (status) {
-          if (await checkIfVdkOptionDataIsDefined(VdkOption.DEPLOYMENT_REASON)){
-            await jobRequest("deploy");
+          if (
+            await checkIfVdkOptionDataIsDefined(VdkOption.DEPLOYMENT_REASON)
+          ) {
+            await jobRequest('deploy');
           }
         } else {
           showErrorMessage(

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

@@ -5,7 +5,7 @@ import { Dialog, showDialog } from '@jupyterlab/apputils';
 import { jobRequest } from '../serverRequests';
 import { IJobPathProp } from './props';
 import { jobData } from '../jobData';
-
+import { DOWNLOAD_JOB_BUTTON_LABEL } from '../utils';
 
 export default class DownloadJobDialog extends Component<IJobPathProp> {
   /**
@@ -47,7 +47,7 @@ export default class DownloadJobDialog extends Component<IJobPathProp> {
 
 export async function showDownloadJobDialog() {
   const result = await showDialog({
-    title: 'Download Job',
+    title: DOWNLOAD_JOB_BUTTON_LABEL,
     body: (
       <DownloadJobDialog
         jobPath={jobData.get(VdkOption.PATH)!}

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

@@ -7,6 +7,7 @@ import { getNotebookInfo, jobRunRequest } from '../serverRequests';
 import { IJobPathProp } from './props';
 import { VdkErrorMessage } from './VdkErrorMessage';
 import { IDocumentManager } from '@jupyterlab/docmanager';
+import { RUN_FAILED_BUTTON_LABEL, RUN_JOB_BUTTON_LABEL } from '../utils';
 
 export default class RunJobDialog extends Component<IJobPathProp> {
   /**
@@ -73,15 +74,15 @@ export default class RunJobDialog extends Component<IJobPathProp> {
 
 export async function showRunJobDialog(docManager?: IDocumentManager) {
   const result = await showDialog({
-    title: 'Run Job',
+    title: RUN_JOB_BUTTON_LABEL,
     body: <RunJobDialog jobPath={jobData.get(VdkOption.PATH)!}></RunJobDialog>,
     buttons: [Dialog.okButton(), Dialog.cancelButton()]
   });
   if (result.button.accept) {
     let { message, status } = await jobRunRequest();
     if (status) {
       showDialog({
-        title: 'Run Job',
+        title: RUN_JOB_BUTTON_LABEL,
         body: (
           <div className="vdk-run-dialog-message-container">
             <p className="vdk-run-dialog-message">
@@ -99,7 +100,7 @@ export async function showRunJobDialog(docManager?: IDocumentManager) {
         !(await handleErrorsProducedByNotebookCell(errorMessage, docManager))
       ) {
         showDialog({
-          title: 'Run Job',
+          title: RUN_JOB_BUTTON_LABEL,
           body: (
             <div className="vdk-run-error-message ">
               <p>{errorMessage.exception_message}</p>
@@ -178,7 +179,7 @@ export const findFailingCellInNotebookCells = async (
   const cells = element.children;
   if (failingCellIndex > cells.length) {
     showDialog({
-      title: 'Run Failed',
+      title: RUN_FAILED_BUTTON_LABEL,
       body: (
         <div>
           <p>
@@ -234,7 +235,7 @@ export const handleErrorsProducedByNotebookCell = async (
       };
 
       const result = await showDialog({
-        title: 'Run Job',
+        title: RUN_JOB_BUTTON_LABEL,
         body: (
           <div className="vdk-run-error-message ">
             <p>{message.exception_message}</p>

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

@@ -0,0 +1,94 @@
+import React, { Component } from 'react';
+import { jobData } from '../jobData';
+import { VdkOption } from '../vdkOptions/vdk_options';
+import VDKTextInput from './VdkTextInput';
+import { Dialog, showDialog } from '@jupyterlab/apputils';
+import { jobTransformToNotebookRequest } from '../serverRequests';
+import { IJobPathProp } from './props';
+import { VdkErrorMessage } from './VdkErrorMessage';
+import { TRANSFORM_JOB_TO_NOTEBOOK_BUTTON_LABEL } from '../utils';
+
+export default class TransformJobToNotebookDialog extends Component<IJobPathProp> {
+  /**
+   * Returns a React component for rendering a transform menu.
+   *
+   * @param props - component properties
+   * @returns React component
+   */
+  constructor(props: IJobPathProp) {
+    super(props);
+  }
+  /**
+   * Renders a dialog for transforming a data job.
+   *
+   * @returns React element
+   */
+  render(): React.ReactElement {
+    return (
+      <>
+        <VDKTextInput
+          option={VdkOption.PATH}
+          value={this.props.jobPath}
+          label="Path to job directory:"
+        ></VDKTextInput>
+      </>
+    );
+  }
+}
+
+export async function showTransformJobToNotebookDialog() {
+  const result = await showDialog({
+    title: TRANSFORM_JOB_TO_NOTEBOOK_BUTTON_LABEL,
+    body: (
+      <TransformJobToNotebookDialog
+        jobPath={jobData.get(VdkOption.PATH)!}
+      ></TransformJobToNotebookDialog>
+    ),
+    buttons: [Dialog.okButton(), Dialog.cancelButton()]
+  });
+  if (result.button.accept) {
+    const confirmation = await showDialog({
+      title: TRANSFORM_JOB_TO_NOTEBOOK_BUTTON_LABEL,
+      body: (
+        <p>
+          Are you sure you want to transform the Data Job with path:{' '}
+          <i>{jobData.get(VdkOption.PATH)}</i> to notebook?
+        </p>
+      ),
+      buttons: [Dialog.okButton(), Dialog.cancelButton()]
+    });
+    if (confirmation.button.accept) {
+      let { message, status } = await jobTransformToNotebookRequest();
+      if (status) {
+        await showDialog({
+          title: TRANSFORM_JOB_TO_NOTEBOOK_BUTTON_LABEL,
+          body: (
+            <div className="vdk-transform-to-notebook-dialog-message-container">
+              <p className="vdk-transform-to-notebook-dialog-message">
+                The Data Job with path <i>{jobData.get(VdkOption.PATH)}</i> was
+                transformed to notebook successfully!
+              </p>
+            </div>
+          ),
+          buttons: [Dialog.okButton()]
+        });
+      } else {
+        message = 'ERROR : ' + message;
+        const errorMessage = new VdkErrorMessage(message);
+        await showDialog({
+          title: TRANSFORM_JOB_TO_NOTEBOOK_BUTTON_LABEL,
+          body: (
+            <div className="vdk-transform-to-notebook-error-message ">
+              <p>{errorMessage.exception_message}</p>
+              <p>{errorMessage.what_happened}</p>
+              <p>{errorMessage.why_it_happened}</p>
+              <p>{errorMessage.consequences}</p>
+              <p>{errorMessage.countermeasures}</p>
+            </div>
+          ),
+          buttons: [Dialog.okButton()]
+        });
+      }
+    }
+  }
+}

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

@@ -1,21 +1,19 @@
-
-
 export type IJobPathProp = {
-    /**
-     * Current Job path or the path to job's parent directory
-     */
-    jobPath: string;
-}
+  /**
+   * Current Job path or the path to job's parent directory
+   */
+  jobPath: string;
+};
 
 export type IJobNameAndTeamProps = {
-    /**
-     * Current Job name
-     */
-    jobName: string;
-    /**
-     * Current Team name
-     */
-    jobTeam: string;
-}
+  /**
+   * Current Job name
+   */
+  jobName: string;
+  /**
+   * Current Team name
+   */
+  jobTeam: string;
+};
 
 export type IJobFullProps = IJobPathProp & IJobNameAndTeamProps;

projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/serverRequests.ts

@@ -91,6 +91,29 @@ export async function jobRequest(endPoint: string): Promise<void> {
   }
 }
 
+export async function jobTransformToNotebookRequest(): Promise<{
+  message: String;
+  status: boolean;
+}> {
+  if (await checkIfVdkOptionDataIsDefined(VdkOption.PATH)) {
+    try {
+      const data = await requestAPI<serverVdkOperationResult>(
+        'transformJobToNotebook',
+        {
+          body: JSON.stringify(getJobDataJsonObject()),
+          method: 'POST'
+        }
+      );
+      return { message: data['message'], status: data['message'] == '0' };
+    } catch (error) {
+      showError(error);
+      return { message: '', status: false };
+    }
+  } else {
+    return { message: '', status: false };
+  }
+}
+
 /**
  * Sent a POST request to the server to get information about the data job of current directory
  */