Feat/cancel running job

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';

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;
+};
+

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;
+};
+

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;
+};
+

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

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>
                   </>

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'}

src/features/Compute/CaseGroup/CaseButtons/CaseButtons.tsx

@@ -146,22 +146,25 @@ 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()
                 }
               >
                 <Icon data={PLAY} size={18}></Icon>
                 {caseStatus === 'Created' ||
                 caseStatus === 'Waiting' ||
                 caseStatus === 'Running'
-                  ? 'Running ... '
+                  ? 'Cancel'
                   : caseStatus === 'Failed'
                   ? 'Re-run'
                   : 'Run'}
@@ -206,15 +209,14 @@ export const CaseButtons = ({
                   id.length < 3 ||
                   caseStatus === 'Created' ||
                   caseStatus === 'Waiting' ||
-                  caseStatus === 'Running' ||
                   !isOwner()
                 }
               >
                 <Icon data={PLAY} size={18}></Icon>
                 {caseStatus === 'Created' ||
                 caseStatus === 'Waiting' ||
                 caseStatus === 'Running'
-                  ? 'Running ... '
+                  ? 'Cancel'
                   : caseStatus === 'Failed'
                   ? 'Re-run'
                   : 'Run'}

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) => {

src/pages/Browse/Browse.tsx

@@ -20,8 +20,6 @@ export const Browse = () => {
     navigate('/add-model');
   }
 
-
-
   return (
     <>
       <Styled.BrowseWrapper>