Add ability to cancel current or queued jobs

client/platform/desktop/backend/ipcService.ts

@@ -11,6 +11,8 @@ import {
   DesktopJob,
 } from 'platform/desktop/constants';
 import { convertMedia } from 'platform/desktop/backend/native/mediaJobs';
+import { closeChildById } from 'platform/desktop/backend/native/processManager';
+import { updateJobFilesOnCancel } from 'platform/desktop/backend/native/utils';
 
 import linux from './native/linux';
 import win32 from './native/windows';
@@ -66,6 +68,17 @@ export default function register() {
     return ret;
   });
 
+  ipcMain.handle('cancel-job', async (event, job: DesktopJob) => {
+    event.sender.send('cancel-job', {
+      ...job, exitCode: -1, endTime: new Date(), cancelledJob: true,
+    });
+    // Update manifest and log file if working directory is available
+    if (job.workingDir) {
+      await updateJobFilesOnCancel(job.workingDir);
+    }
+    closeChildById(job.pid);
+  });
+
   /**
    * Platform-dependent methods
    */

client/platform/desktop/backend/native/processManager.ts

@@ -39,6 +39,22 @@ function close(child: ChildProcess): Promise<void> {
   return onclose;
 }
 
+/**
+ * Close the child process with the given pid. If no such child
+ * is found, return an empty promise.
+ *
+ * @param pid The process ID of the observed child to close.
+ * @returns an empty promise
+ */
+function closeChildById(pid: number): Promise<void> {
+  const child = children.find((child: ChildProcess) => child.pid === pid);
+  if (child) {
+    return close(child);
+  }
+  // If pid not found, no-op
+  return Promise.resolve();
+}
+
 /**
  * Stop all remaining child processes
  */
@@ -50,5 +66,6 @@ function closeAll() {
 export {
   observeChild,
   close,
+  closeChildById,
   closeAll,
 };

client/platform/desktop/backend/native/utils.ts

@@ -121,6 +121,42 @@ function splitExt(input: string): [string, string] {
   return [path.basename(input, ext), ext];
 }
 
+const DiveJobManifestName = 'dive_job_manifest.json';
+
+async function updateJobManifestOnCancel(workingDir: string): Promise<void> {
+  const manifestPath = path.join(workingDir, DiveJobManifestName);
+  if (!fs.existsSync(manifestPath)) {
+    // Manifest doesn't exist, nothing to update
+    return;
+  }
+  try {
+    const manifestContent = await fs.readJson(manifestPath);
+    manifestContent.cancelledJob = true;
+    manifestContent.exitCode = -1;
+    manifestContent.endTime = new Date();
+    await fs.writeJson(manifestPath, manifestContent, { spaces: 2 });
+  } catch (err) {
+    console.error(`Failed to update job manifest at ${manifestPath}:`, err);
+  }
+}
+
+async function appendCancelMessageToLog(workingDir: string): Promise<void> {
+  const logPath = path.join(workingDir, 'runlog.txt');
+  const cancelMessage = `\n[${moment().format('YYYY-MM-DD HH:mm:ss')}] Job cancelled by user\n`;
+  try {
+    await fs.appendFile(logPath, cancelMessage);
+  } catch (err) {
+    console.error(`Failed to append cancellation message to log at ${logPath}:`, err);
+  }
+}
+
+async function updateJobFilesOnCancel(workingDir: string): Promise<void> {
+  await Promise.all([
+    updateJobManifestOnCancel(workingDir),
+    appendCancelMessageToLog(workingDir),
+  ]);
+}
+
 export {
   isDev,
   getBinaryPath,
@@ -129,4 +165,5 @@ export {
   createCustomWorkingDirectory,
   spawnResult,
   splitExt,
+  updateJobFilesOnCancel,
 };

client/platform/desktop/constants.ts

@@ -231,6 +231,8 @@ export interface DesktopJob {
   startTime: Date;
   // endTime time of process exit
   endTime?: Date;
+  // cancelledJob
+  cancelledJob?: boolean;
 }
 
 export interface DesktopMediaImportResponse extends MediaImportResponse {

client/platform/desktop/frontend/api.ts

@@ -20,6 +20,7 @@ import {
   DesktopMetadata, NvidiaSmiReply,
   RunPipeline, RunTraining, ExportTrainedPipeline, ExportDatasetArgs, ExportConfigurationArgs,
   DesktopMediaImportResponse, ConversionArgs, JobType,
+  DesktopJob,
 } from 'platform/desktop/constants';
 
 import { gpuJobQueue, cpuJobQueue } from './store/jobs';
@@ -200,6 +201,10 @@ async function exportConfiguration(id: string): Promise<string> {
   return '';
 }
 
+async function cancelJob(job: DesktopJob): Promise<void> {
+  return ipcRenderer.invoke('cancel-job', job);
+}
+
 /**
  * REST api for larger-body messages
  */
@@ -271,4 +276,5 @@ export {
   importMultiCam,
   openLink,
   nvidiaSmi,
+  cancelJob,
 };

client/platform/desktop/frontend/components/JobsHistory.vue

@@ -8,6 +8,7 @@ import {
 } from 'vue';
 
 import { DesktopJob } from 'platform/desktop/constants';
+import { cancelJob } from 'platform/desktop/frontend/api';
 
 import BrowserLink from './BrowserLink.vue';
 import NavigationBar from './NavigationBar.vue';
@@ -41,6 +42,12 @@ export default defineComponent({
       if (job.workingDir) shell.openPath(job.workingDir);
     }
 
+    async function cancelInProgressJob(job: DesktopJob): Promise<void> {
+      if (job.exitCode === null && !job.cancelledJob) {
+        await cancelJob(job);
+      }
+    }
+
     return {
       clockDriver,
       datasets,
@@ -53,6 +60,7 @@ export default defineComponent({
       /* methods */
       openPath,
       toggleVisibleOutput,
+      cancelInProgressJob,
     };
   },
 });
@@ -69,7 +77,7 @@ export default defineComponent({
           </h1>
           <v-card
             v-for="job in recentHistory.slice().reverse()"
-            :key="job.job.key"
+            :key="`${job.job.key}_${job.job.exitCode}_${job.job.cancelledJob}`"
             class=" mb-4"
             min-width="100%"
           >
@@ -95,6 +103,12 @@ export default defineComponent({
                   >
                     mdi-check-circle
                   </v-icon>
+                  <v-icon
+                    v-else-if="job.job.cancelledJob"
+                    color="warning"
+                  >
+                    mdi-cancel
+                  </v-icon>
                   <v-icon
                     v-else
                     color="error"
@@ -183,6 +197,22 @@ export default defineComponent({
                     }}
                   </span>
                 </div>
+                <div v-if="job.job.exitCode === null">
+                  <v-btn
+                    text
+                    small
+                    class="mb-2 error--text text--lighten-3 text-decoration-none"
+                    @click="cancelInProgressJob(job.job)"
+                  >
+                    <v-icon
+                      color="error lighten-3"
+                      class="pr-2"
+                    >
+                      mdi-cancel
+                    </v-icon>
+                    Cancel Job
+                  </v-btn>
+                </div>
                 <v-btn
                   text
                   small

client/platform/desktop/frontend/components/JobsQueued.vue

@@ -13,6 +13,8 @@ import {
 import {
   queuedCpuJobs,
   queuedGpuJobs,
+  removeJobFromQueue,
+  // removeJobFromQueue,
 } from 'platform/desktop/frontend/store/jobs';
 import { datasets } from '../store/dataset';
 
@@ -69,6 +71,7 @@ export default defineComponent({
       datasets,
       getQueuedJobTitle,
       getJobDatasets,
+      removeJobFromQueue,
     };
   },
 });
@@ -86,36 +89,56 @@ export default defineComponent({
             v-for="jobSpec, index in queuedJobSpecs"
             :key="index"
           >
-            <v-card-title class="primary--text text--lighten-3 text-decoration-none pt-0">
-              <v-icon class="pr-4">
-                mdi-timer-sand
-              </v-icon>
-              {{ getQueuedJobTitle(jobSpec) }}
-            </v-card-title>
-            <v-card-text>
-              <table class="key-value-table">
-                <tr v-if="jobSpec.type === JobType.RunPipeline || jobSpec.type === JobType.ExportTrainedPipeline">
-                  <td>Pipe</td>
-                  <td>{{ jobSpec.pipeline.name }}</td>
-                </tr>
-                <tr v-if="getJobDatasets(jobSpec).length > 0">
-                  <td>Datasets</td>
-                  <td>
-                    <span
-                      v-for="dataset in getJobDatasets(jobSpec)"
-                      :key="dataset"
-                    >
-                      <router-link
-                        class="mr-1"
-                        :to="{ name: 'viewer', params: { id: dataset } }"
-                      >
-                        {{ datasets[dataset].name }}
-                      </router-link>
-                    </span>
-                  </td>
-                </tr>
-              </table>
-            </v-card-text>
+            <v-row>
+              <v-col cols="9">
+                <v-card-title class="primary--text text--lighten-3 text-decoration-none pt-0">
+                  <v-icon class="pr-4">
+                    mdi-timer-sand
+                  </v-icon>
+                  {{ getQueuedJobTitle(jobSpec) }}
+                </v-card-title>
+                <v-card-text>
+                  <table class="key-value-table">
+                    <tr v-if="jobSpec.type === JobType.RunPipeline || jobSpec.type === JobType.ExportTrainedPipeline">
+                      <td>Pipe</td>
+                      <td>{{ jobSpec.pipeline.name }}</td>
+                    </tr>
+                    <tr v-if="getJobDatasets(jobSpec).length > 0">
+                      <td>Datasets</td>
+                      <td>
+                        <span
+                          v-for="dataset in getJobDatasets(jobSpec)"
+                          :key="dataset"
+                        >
+                          <router-link
+                            class="mr-1"
+                            :to="{ name: 'viewer', params: { id: dataset } }"
+                          >
+                            {{ datasets[dataset].name }}
+                          </router-link>
+                        </span>
+                      </td>
+                    </tr>
+                  </table>
+                </v-card-text>
+              </v-col>
+              <v-col cols="3">
+                <v-btn
+                  text
+                  small
+                  class="mb-2 error--text text--lighten-3 tet-decoration-none"
+                  @click="removeJobFromQueue(jobSpec)"
+                >
+                  <v-icon
+                    color="error lighten-3"
+                    class="pr-2"
+                  >
+                    mdi-cancel
+                  </v-icon>
+                  Cancel Job
+                </v-btn>
+              </v-col>
+            </v-row>
           </v-card>
         </v-col>
       </v-row>