From 846ea56eebc43faa9d687acfc242197402243543 Mon Sep 17 00:00:00 2001
From: Thomas L Fagermyr <thomas.fagermyr@bouvet.no>
Date: Thu, 24 Oct 2024 15:28:27 +0200
Subject: [PATCH 1/2] chore: Fixed typo

---
 src/components/AreaCoordinates/AreaCoordinates.tsx | 4 ++--
 src/components/ConfirmDialog/ConfirmDialog.tsx     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/AreaCoordinates/AreaCoordinates.tsx b/src/components/AreaCoordinates/AreaCoordinates.tsx
index 61cf83f0..0c2808f3 100644
--- a/src/components/AreaCoordinates/AreaCoordinates.tsx
+++ b/src/components/AreaCoordinates/AreaCoordinates.tsx
@@ -259,7 +259,7 @@ export const AreaCoordinates = ({
     setEdit(!edit);
   };
 
-  const handleCancleEdit = () => {
+  const handleCancelEdit = () => {
     fallbackAreaCoordinate &&
       setAreaCoordinate(cloneDeep(fallbackAreaCoordinate));
 
@@ -352,7 +352,7 @@ export const AreaCoordinates = ({
                 {edit ? (
                   <>
                     <Button onClick={handleSubmit}>Save coordinates</Button>
-                    <Button variant="outlined" onClick={handleCancleEdit}>
+                    <Button variant="outlined" onClick={handleCancelEdit}>
                       Cancel
                     </Button>
                   </>
diff --git a/src/components/ConfirmDialog/ConfirmDialog.tsx b/src/components/ConfirmDialog/ConfirmDialog.tsx
index 6b004e9b..3e81fe67 100644
--- a/src/components/ConfirmDialog/ConfirmDialog.tsx
+++ b/src/components/ConfirmDialog/ConfirmDialog.tsx
@@ -25,7 +25,7 @@ export const ConfirmDialog = ({
           color={danger ? 'danger' : undefined}
           onClick={() => setIsOpen(false)}
         >
-          {'Cancle'}
+          {'Cancel'}
         </Button>
         <Button color={danger ? 'danger' : undefined} onClick={confirmAction}>
           {danger ? 'Delete' : 'Ok'}

From c4a24399aaa4a8d3db18327521fbe3b9f47df649 Mon Sep 17 00:00:00 2001
From: Thomas L Fagermyr <thomas.fagermyr@bouvet.no>
Date: Fri, 25 Oct 2024 12:23:00 +0200
Subject: [PATCH 2/2] feat: Added cancel button on running  job

---
 src/api/generated/index.ts                    |  3 ++
 src/api/generated/models/CancelJobDto.ts      | 15 +++++++++
 .../generated/models/PostCancelJobCommand.ts  | 10 ++++++
 .../models/PostCancelJobCommandResponse.ts    | 15 +++++++++
 src/api/generated/services/JobsService.ts     | 23 +++++++++++++
 .../CaseGroup/CaseButtons/CaseButtons.tsx     | 12 ++++---
 .../Compute/CaseGroup/CaseRow/CaseRow.tsx     | 32 ++++++++++++++++++-
 src/pages/Browse/Browse.tsx                   |  2 --
 8 files changed, 104 insertions(+), 8 deletions(-)
 create mode 100644 src/api/generated/models/CancelJobDto.ts
 create mode 100644 src/api/generated/models/PostCancelJobCommand.ts
 create mode 100644 src/api/generated/models/PostCancelJobCommandResponse.ts

diff --git a/src/api/generated/index.ts b/src/api/generated/index.ts
index 91914d6b..a48b0a92 100644
--- a/src/api/generated/index.ts
+++ b/src/api/generated/index.ts
@@ -28,6 +28,7 @@ export type { AnalogueModelDetail } from './models/AnalogueModelDetail';
 export type { AnalogueModelImageDto } from './models/AnalogueModelImageDto';
 export type { AnalogueModelList } from './models/AnalogueModelList';
 export { AnalogueModelSourceType } from './models/AnalogueModelSourceType';
+export type { CancelJobDto } from './models/CancelJobDto';
 export type { ComputeCaseComputeMethodDto } from './models/ComputeCaseComputeMethodDto';
 export type { ComputeCaseDto } from './models/ComputeCaseDto';
 export type { ComputeCaseInputSettingsDto } from './models/ComputeCaseInputSettingsDto';
@@ -119,6 +120,8 @@ export type { ParameterList } from './models/ParameterList';
 export type { PatchAnalogueModelCommandResponse } from './models/PatchAnalogueModelCommandResponse';
 export type { PatchAnalogueModelDto } from './models/PatchAnalogueModelDto';
 export type { PercentilesDto } from './models/PercentilesDto';
+export type { PostCancelJobCommand } from './models/PostCancelJobCommand';
+export type { PostCancelJobCommandResponse } from './models/PostCancelJobCommandResponse';
 export type { PrepareChunkedUploadCommandResponse } from './models/PrepareChunkedUploadCommandResponse';
 export type { PrepareChunkedUploadDto } from './models/PrepareChunkedUploadDto';
 export type { ProblemDetails } from './models/ProblemDetails';
diff --git a/src/api/generated/models/CancelJobDto.ts b/src/api/generated/models/CancelJobDto.ts
new file mode 100644
index 00000000..829b4545
--- /dev/null
+++ b/src/api/generated/models/CancelJobDto.ts
@@ -0,0 +1,15 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+import type { JobStatus } from './JobStatus';
+import type { JobType } from './JobType';
+
+export type CancelJobDto = {
+    jobId: string;
+    name: string;
+    jobStatus: JobStatus;
+    jobType: JobType;
+};
+
diff --git a/src/api/generated/models/PostCancelJobCommand.ts b/src/api/generated/models/PostCancelJobCommand.ts
new file mode 100644
index 00000000..418b925b
--- /dev/null
+++ b/src/api/generated/models/PostCancelJobCommand.ts
@@ -0,0 +1,10 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+export type PostCancelJobCommand = {
+    modelId: string;
+    computeCaseId: string;
+};
+
diff --git a/src/api/generated/models/PostCancelJobCommandResponse.ts b/src/api/generated/models/PostCancelJobCommandResponse.ts
new file mode 100644
index 00000000..2faf6054
--- /dev/null
+++ b/src/api/generated/models/PostCancelJobCommandResponse.ts
@@ -0,0 +1,15 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+import type { CancelJobDto } from './CancelJobDto';
+
+export type PostCancelJobCommandResponse = {
+    success?: boolean;
+    count?: number | null;
+    message?: string | null;
+    validationErrors?: Array<string> | null;
+    data: CancelJobDto;
+};
+
diff --git a/src/api/generated/services/JobsService.ts b/src/api/generated/services/JobsService.ts
index d4ea1898..1b703a04 100644
--- a/src/api/generated/services/JobsService.ts
+++ b/src/api/generated/services/JobsService.ts
@@ -14,6 +14,8 @@ import type { GetCurrentJobStatusCommandResponse } from '../models/GetCurrentJob
 import type { GetCurrentJobStatusListCommand } from '../models/GetCurrentJobStatusListCommand';
 import type { GetJobDetailQueryResponse } from '../models/GetJobDetailQueryResponse';
 import type { GetJobListQueryResponse } from '../models/GetJobListQueryResponse';
+import type { PostCancelJobCommand } from '../models/PostCancelJobCommand';
+import type { PostCancelJobCommandResponse } from '../models/PostCancelJobCommandResponse';
 
 import type { CancelablePromise } from '../core/CancelablePromise';
 import { OpenAPI } from '../core/OpenAPI';
@@ -95,6 +97,27 @@ export class JobsService {
         });
     }
 
+    /**
+     * Cancel the running job.
+     * @param requestBody
+     * @returns PostCancelJobCommandResponse Accepted
+     * @throws ApiError
+     */
+    public static postApiJobsCancel(
+        requestBody?: PostCancelJobCommand,
+    ): CancelablePromise<PostCancelJobCommandResponse> {
+        return __request(OpenAPI, {
+            method: 'POST',
+            url: '/api/jobs/cancel',
+            body: requestBody,
+            mediaType: 'application/json-patch+json',
+            errors: {
+                403: `Forbidden`,
+                404: `Not Found`,
+            },
+        });
+    }
+
     /**
      * Convert AnalogueModels to the internal format used by PEPM in order to perform calculations.
      * @param requestBody
diff --git a/src/features/Compute/CaseGroup/CaseButtons/CaseButtons.tsx b/src/features/Compute/CaseGroup/CaseButtons/CaseButtons.tsx
index 64f65227..c6a1c1fb 100644
--- a/src/features/Compute/CaseGroup/CaseButtons/CaseButtons.tsx
+++ b/src/features/Compute/CaseGroup/CaseButtons/CaseButtons.tsx
@@ -146,14 +146,17 @@ export const CaseButtons = ({
               }
             >
               <Button
-                color={caseStatus === 'Failed' ? 'danger' : undefined}
+                color={
+                  caseStatus === 'Failed' || caseStatus === 'Running'
+                    ? 'danger'
+                    : undefined
+                }
                 variant="outlined"
                 onClick={saved ? runCase : saveCase}
                 disabled={
                   !isProcessed ||
                   caseStatus === 'Created' ||
                   caseStatus === 'Waiting' ||
-                  caseStatus === 'Running' ||
                   !isOwner()
                 }
               >
@@ -161,7 +164,7 @@ export const CaseButtons = ({
                 {caseStatus === 'Created' ||
                 caseStatus === 'Waiting' ||
                 caseStatus === 'Running'
-                  ? 'Running ... '
+                  ? 'Cancel'
                   : caseStatus === 'Failed'
                   ? 'Re-run'
                   : 'Run'}
@@ -206,7 +209,6 @@ export const CaseButtons = ({
                   id.length < 3 ||
                   caseStatus === 'Created' ||
                   caseStatus === 'Waiting' ||
-                  caseStatus === 'Running' ||
                   !isOwner()
                 }
               >
@@ -214,7 +216,7 @@ export const CaseButtons = ({
                 {caseStatus === 'Created' ||
                 caseStatus === 'Waiting' ||
                 caseStatus === 'Running'
-                  ? 'Running ... '
+                  ? 'Cancel'
                   : caseStatus === 'Failed'
                   ? 'Re-run'
                   : 'Run'}
diff --git a/src/features/Compute/CaseGroup/CaseRow/CaseRow.tsx b/src/features/Compute/CaseGroup/CaseRow/CaseRow.tsx
index fbe0f588..74d44926 100644
--- a/src/features/Compute/CaseGroup/CaseRow/CaseRow.tsx
+++ b/src/features/Compute/CaseGroup/CaseRow/CaseRow.tsx
@@ -4,11 +4,14 @@
 import { useState } from 'react';
 import {
   ComputeCaseDto,
+  ComputeJobStatus,
   CreateComputeCaseCommandResponse,
   CreateComputeCaseInputSettingsForm,
+  JobsService,
   ListComputeCasesByAnalogueModelIdQueryResponse,
   ListComputeSettingsInputDto,
   ListComputeSettingsMethodDto,
+  PostCancelJobCommand,
   UpdateComputeCaseInputSettingsForm,
 } from '../../../../api/generated';
 import { CaseButtons } from '../CaseButtons/CaseButtons';
@@ -19,6 +22,9 @@ import { useCaseParameters } from './hooks/useCaseParameters';
 import { useGetParameterList } from './hooks/useGetParameterList';
 import { useModelArea } from './hooks/useModelArea';
 import { useSetSaved } from './hooks/useSetSaved';
+import { useMutation } from '@tanstack/react-query';
+import { queryClient } from '../../../../auth/queryClient';
+import { useParams } from 'react-router-dom';
 
 export const CaseRow = ({
   rowCase,
@@ -62,6 +68,7 @@ export const CaseRow = ({
   isOwner: () => boolean;
 }) => {
   const [caseError, setCaseError] = useState<string>('');
+  const { modelId } = useParams<{ modelId: string }>();
 
   const indicatorSettings = settingsFilter('Indicator');
   const netToGrossSettings = settingsFilter('Net-To-Gross');
@@ -111,8 +118,31 @@ export const CaseRow = ({
     selectedVariogramModels,
   );
 
+  const cancelJob = useMutation({
+    mutationFn: JobsService.postApiJobsCancel,
+    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ['model-cases'] });
+    },
+  });
+
+  const runCancelJob = async (computeCaseId: string) => {
+    if (!modelId) return;
+    const requestBody: PostCancelJobCommand = {
+      modelId: modelId,
+      computeCaseId: computeCaseId,
+    };
+
+    const res = await cancelJob.mutateAsync(requestBody);
+
+    if (res.success) {
+      setAlertMessage('Canceled computing case');
+    }
+  };
+
   const runRowCase = () => {
-    if (id) runCase(id);
+    if (id && rowCase.jobStatus === ComputeJobStatus.RUNNING)
+      return runCancelJob(id);
+    if (id) return runCase(id);
   };
 
   const handleSaveCase = async (id: string) => {
diff --git a/src/pages/Browse/Browse.tsx b/src/pages/Browse/Browse.tsx
index b065adaf..dc0c1fb2 100644
--- a/src/pages/Browse/Browse.tsx
+++ b/src/pages/Browse/Browse.tsx
@@ -20,8 +20,6 @@ export const Browse = () => {
     navigate('/add-model');
   }
 
-  
-
   return (
     <>
       <Styled.BrowseWrapper>