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"
+          },
           {
             "command": "jp-vdk:menu-create-deployment"
           }

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

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2023-2023 VMware, Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import TransformJobDialog from '../components/TransformJob';
+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 TransformJobDialog(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 TransformJobDialog(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 { showTransformJobDialog } from './components/TransformJob';
 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 command
+  add_command(commands, 'jp-vdk:menu-transform','Transform','Execute VDK Transform Command', showTransformJobDialog);
+
   // 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/TransformJob.tsx

@@ -0,0 +1,92 @@
+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 { jobTransformRequest } from '../serverRequests';
+import { IJobPathProp } from './props';
+import { VdkErrorMessage } from './VdkErrorMessage';
+
+export default class TransformJobDialog 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 showTransformJobDialog() {
+  const result = await showDialog({
+    title: 'Transform Job',
+    body: (
+      <TransformJobDialog
+        jobPath={jobData.get(VdkOption.PATH)!}
+      ></TransformJobDialog>
+    ),
+    buttons: [Dialog.okButton(), Dialog.cancelButton()]
+  });
+  if (result.button.accept) {
+    const confirmation = await showDialog({
+      title: 'Transform Job',
+      body: (
+        <p>
+          Are you sure you want to transform the Data Job with path:{' '}
+          <i>{jobData.get(VdkOption.PATH)}</i>?
+        </p>
+      ),
+      buttons: [Dialog.okButton(), Dialog.cancelButton()]
+    });
+    if (confirmation.button.accept) {
+      let { message, status } = await jobTransformRequest();
+      if (status) {
+        showDialog({
+          title: 'Transform Job',
+          body: (
+            <div className="vdk-transform-dialog-message-container">
+              <p className="vdk-transform-dialog-message">
+                The job was transformed successfully!
+              </p>
+            </div>
+          ),
+          buttons: [Dialog.okButton()]
+        });
+      } else {
+        message = 'ERROR : ' + message;
+        const errorMessage = new VdkErrorMessage(message);
+        showDialog({
+          title: 'Transform Job',
+          body: (
+            <div className="vdk-transform-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/serverRequests.ts

@@ -91,6 +91,26 @@ export async function jobRequest(endPoint: string): Promise<void> {
   }
 }
 
+export async function jobTransformRequest(): Promise<{
+  message: String;
+  status: boolean;
+}> {
+  if (await checkIfVdkOptionDataIsDefined(VdkOption.PATH)) {
+    try {
+      const data = await requestAPI<serverVdkOperationResult>('transform', {
+        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
  */

projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/vdk_jupyterlab_extension/handlers.py

@@ -95,6 +95,18 @@ def post(self):
             self.finish(json.dumps({"message": f"{e}", "error": "true"}))
 
 
+class TransformJobHandler(APIHandler):
+    """
+    Class responsible for handling POST request for transforming a Data Job given the Rest API URL
+    and the path to its directory
+    """
+
+    @tornado.web.authenticated
+    def post(self):
+        # TODO fix this as part of the implementation
+        print("Successfully connected to the Transform job handler!")
+
+
 class CreateJobHandler(APIHandler):
     """
     Class responsible for handling POST request for creating a Data Job given its name, team,
@@ -178,6 +190,7 @@ def add_handler(handler, endpoint):
     add_handler(RunJobHandler, "run")
     add_handler(DeleteJobHandler, "delete")
     add_handler(DownloadJobHandler, "download")
+    add_handler(TransformJobHandler, "transform")
     add_handler(CreateJobHandler, "create")
     add_handler(LoadJobDataHandler, "job")
     add_handler(CreateDeploymentHandler, "deploy")