feat: Concurrent executions with indexedDB

client/src/AppProvider.tsx

@@ -4,6 +4,7 @@ import AuthProvider from 'route/auth/AuthProvider';
 import * as React from 'react';
 import { Provider } from 'react-redux';
 import store from 'store/store';
+import ExecutionHistoryLoader from 'preview/components/execution/ExecutionHistoryLoader';
 
 const mdTheme: Theme = createTheme({
   palette: {
@@ -17,6 +18,7 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
       <ThemeProvider theme={mdTheme}>
         <AuthProvider>
           <CssBaseline />
+          <ExecutionHistoryLoader />
           {children}
         </AuthProvider>
       </ThemeProvider>

client/src/preview/services/indexedDBService.ts → client/src/database/digitalTwins.ts

@@ -1,9 +1,26 @@
-import { DB_CONFIG, ExecutionHistoryEntry } from '../model/executionHistory';
+import {
+  DB_CONFIG,
+  ExecutionHistoryEntry,
+} from '../model/backend/gitlab/types/executionHistory';
 
 /**
- * Service for interacting with IndexedDB
+ * Interface for IndexedDB operations
  */
-class IndexedDBService {
+export interface IIndexedDBService {
+  init(): Promise<void>;
+  addExecutionHistory(entry: ExecutionHistoryEntry): Promise<string>;
+  updateExecutionHistory(entry: ExecutionHistoryEntry): Promise<void>;
+  getExecutionHistoryById(id: string): Promise<ExecutionHistoryEntry | null>;
+  getExecutionHistoryByDTName(dtName: string): Promise<ExecutionHistoryEntry[]>;
+  getAllExecutionHistory(): Promise<ExecutionHistoryEntry[]>;
+  deleteExecutionHistory(id: string): Promise<void>;
+  deleteExecutionHistoryByDTName(dtName: string): Promise<void>;
+}
+
+/**
+ * For interacting with IndexedDB
+ */
+class IndexedDBService implements IIndexedDBService {
   private db: IDBDatabase | null = null;
 
   private dbName: string;

client/src/model/backend/gitlab/execution/interfaces.ts

@@ -0,0 +1,23 @@
+import { Dispatch, SetStateAction } from 'react';
+import { ThunkDispatch, Action } from '@reduxjs/toolkit';
+import { RootState } from 'store/store';
+import DigitalTwin from 'preview/util/digitalTwin';
+
+export interface PipelineStatusParams {
+  setButtonText: Dispatch<SetStateAction<string>>;
+  digitalTwin: DigitalTwin;
+  setLogButtonDisabled: Dispatch<SetStateAction<boolean>>;
+  dispatch: ReturnType<typeof import('react-redux').useDispatch>;
+  executionId?: string;
+}
+
+export type PipelineHandlerDispatch = ThunkDispatch<
+  RootState,
+  unknown,
+  Action<string>
+>;
+
+export interface JobLog {
+  jobName: string;
+  log: string;
+}

client/src/preview/route/digitaltwins/execute/pipelineChecks.ts → client/src/model/backend/gitlab/execution/pipelineChecks.ts

@@ -1,23 +1,20 @@
 import { Dispatch, SetStateAction } from 'react';
 import { useDispatch } from 'react-redux';
 import DigitalTwin, { formatName } from 'preview/util/digitalTwin';
-import indexedDBService from 'preview/services/indexedDBService';
+import indexedDBService from 'database/digitalTwins';
 import {
   fetchJobLogs,
   updatePipelineStateOnCompletion,
-} from 'preview/route/digitaltwins/execute/pipelineUtils';
+} from 'model/backend/gitlab/execution/pipelineUtils';
 import { showSnackbar } from 'preview/store/snackbar.slice';
 import { MAX_EXECUTION_TIME } from 'model/backend/gitlab/constants';
-import { ExecutionStatus } from 'preview/model/executionHistory';
-import { updateExecutionStatus } from 'preview/store/executionHistory.slice';
-
-interface PipelineStatusParams {
-  setButtonText: Dispatch<SetStateAction<string>>;
-  digitalTwin: DigitalTwin;
-  setLogButtonDisabled: Dispatch<SetStateAction<boolean>>;
-  dispatch: ReturnType<typeof useDispatch>;
-  executionId?: string;
-}
+import { ExecutionStatus } from 'model/backend/gitlab/types/executionHistory';
+import { updateExecutionStatus } from 'model/backend/gitlab/state/executionHistory.slice';
+import {
+  setPipelineCompleted,
+  setPipelineLoading,
+} from 'model/backend/gitlab/state/digitalTwin.slice';
+import { PipelineStatusParams } from './interfaces';
 
 export const delay = (ms: number) =>
   new Promise((resolve) => {
@@ -136,18 +133,67 @@ export const handlePipelineCompletion = async (
   pipelineStatus: 'success' | 'failed',
   executionId?: string,
 ) => {
-  const jobLogs = await fetchJobLogs(digitalTwin.gitlabInstance, pipelineId);
-  await updatePipelineStateOnCompletion(
-    digitalTwin,
-    jobLogs,
-    setButtonText,
-    setLogButtonDisabled,
-    dispatch,
-    executionId,
+  const status =
     pipelineStatus === 'success'
       ? ExecutionStatus.COMPLETED
-      : ExecutionStatus.FAILED,
-  );
+      : ExecutionStatus.FAILED;
+
+  if (!executionId) {
+    // For backward compatibility
+    const jobLogs = await fetchJobLogs(digitalTwin.gitlabInstance, pipelineId);
+    await updatePipelineStateOnCompletion(
+      digitalTwin,
+      jobLogs,
+      setButtonText,
+      setLogButtonDisabled,
+      dispatch,
+      undefined,
+      status,
+    );
+  } else {
+    // For concurrent executions, use the new helper function
+    const { fetchLogsAndUpdateExecution } = await import('./pipelineUtils');
+
+    // Fetch logs and update execution
+    const logsUpdated = await fetchLogsAndUpdateExecution(
+      digitalTwin,
+      pipelineId,
+      executionId,
+      status,
+      dispatch,
+    );
+
+    if (!logsUpdated) {
+      await delay(5000);
+      await handlePipelineCompletion(
+        pipelineId,
+        digitalTwin,
+        setButtonText,
+        setLogButtonDisabled,
+        dispatch,
+        pipelineStatus,
+        executionId,
+      );
+      return;
+    }
+
+    setButtonText('Start');
+    setLogButtonDisabled(false);
+
+    // For backward compatibility
+    dispatch(
+      setPipelineCompleted({
+        assetName: digitalTwin.DTName,
+        pipelineCompleted: true,
+      }),
+    );
+    dispatch(
+      setPipelineLoading({
+        assetName: digitalTwin.DTName,
+        pipelineLoading: false,
+      }),
+    );
+  }
 
   if (pipelineStatus === 'failed') {
     dispatch(

client/src/preview/route/digitaltwins/execute/pipelineHandler.ts → client/src/model/backend/gitlab/execution/pipelineHandler.ts

@@ -1,20 +1,21 @@
 import { Dispatch, SetStateAction } from 'react';
 import DigitalTwin, { formatName } from 'preview/util/digitalTwin';
-import { useDispatch } from 'react-redux';
 import { showSnackbar } from 'preview/store/snackbar.slice';
+import { fetchExecutionHistory } from 'model/backend/gitlab/state/executionHistory.slice';
 import {
   startPipeline,
   updatePipelineState,
   updatePipelineStateOnStop,
 } from './pipelineUtils';
 import { startPipelineStatusCheck } from './pipelineChecks';
+import { PipelineHandlerDispatch } from './interfaces';
 
 export const handleButtonClick = (
   buttonText: string,
   setButtonText: Dispatch<SetStateAction<string>>,
   digitalTwin: DigitalTwin,
   setLogButtonDisabled: Dispatch<SetStateAction<boolean>>,
-  dispatch: ReturnType<typeof useDispatch>,
+  dispatch: PipelineHandlerDispatch,
 ) => {
   if (buttonText === 'Start') {
     handleStart(
@@ -34,7 +35,7 @@ export const handleStart = async (
   setButtonText: Dispatch<SetStateAction<string>>,
   digitalTwin: DigitalTwin,
   setLogButtonDisabled: Dispatch<SetStateAction<boolean>>,
-  dispatch: ReturnType<typeof useDispatch>,
+  dispatch: PipelineHandlerDispatch,
   executionId?: string,
 ) => {
   if (buttonText === 'Start') {
@@ -49,6 +50,8 @@ export const handleStart = async (
     );
 
     if (newExecutionId) {
+      dispatch(fetchExecutionHistory(digitalTwin.DTName));
+
       const params = {
         setButtonText,
         digitalTwin,
@@ -72,7 +75,7 @@ export const handleStart = async (
 export const handleStop = async (
   digitalTwin: DigitalTwin,
   setButtonText: Dispatch<SetStateAction<string>>,
-  dispatch: ReturnType<typeof useDispatch>,
+  dispatch: PipelineHandlerDispatch,
   executionId?: string,
 ) => {
   try {
@@ -119,7 +122,7 @@ export const stopPipelines = async (
         executionId,
       );
     } else if (digitalTwin.pipelineId) {
-      // For backward compatibility, stop the current execution
+      //  backward compatibility, stop the current execution
       await digitalTwin.stop(
         digitalTwin.gitlabInstance.projectId,
         'parentPipeline',

client/src/preview/route/digitaltwins/execute/pipelineUtils.ts → client/src/model/backend/gitlab/execution/pipelineUtils.ts

@@ -6,23 +6,22 @@ import {
   setJobLogs,
   setPipelineCompleted,
   setPipelineLoading,
-} from 'preview/store/digitalTwin.slice';
+} from 'model/backend/gitlab/state/digitalTwin.slice';
 import { useDispatch } from 'react-redux';
 import { showSnackbar } from 'preview/store/snackbar.slice';
-import { ExecutionStatus, JobLog } from 'preview/model/executionHistory';
+import { ExecutionStatus } from 'model/backend/gitlab/types/executionHistory';
 import {
   updateExecutionLogs,
   updateExecutionStatus,
   setSelectedExecutionId,
-} from 'preview/store/executionHistory.slice';
-
-/**
- * Start a pipeline execution and create an execution history entry
- * @param digitalTwin The Digital Twin to execute
- * @param dispatch Redux dispatch function
- * @param setLogButtonDisabled Function to set the log button disabled state
- * @returns The execution ID
- */
+} from 'model/backend/gitlab/state/executionHistory.slice';
+import { JobLog } from './interfaces';
+
+export const delay = (ms: number) =>
+  new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+
 export const startPipeline = async (
   digitalTwin: DigitalTwin,
   dispatch: ReturnType<typeof useDispatch>,
@@ -56,12 +55,6 @@ export const startPipeline = async (
   return digitalTwin.currentExecutionId;
 };
 
-/**
- * Update the pipeline state in the Redux store
- * @param digitalTwin The Digital Twin
- * @param dispatch Redux dispatch function
- * @param executionId Optional execution ID for concurrent executions
- */
 export const updatePipelineState = (
   digitalTwin: DigitalTwin,
   dispatch: ReturnType<typeof useDispatch>,
@@ -91,16 +84,6 @@ export const updatePipelineState = (
   }
 };
 
-/**
- * Update the pipeline state on completion
- * @param digitalTwin The Digital Twin
- * @param jobLogs The job logs
- * @param setButtonText Function to set the button text
- * @param setLogButtonDisabled Function to set the log button disabled state
- * @param dispatch Redux dispatch function
- * @param executionId Optional execution ID for concurrent executions
- * @param status Optional status for the execution
- */
 export const updatePipelineStateOnCompletion = async (
   digitalTwin: DigitalTwin,
   jobLogs: JobLog[],
@@ -146,13 +129,6 @@ export const updatePipelineStateOnCompletion = async (
   setButtonText('Start');
 };
 
-/**
- * Update the pipeline state on stop
- * @param digitalTwin The Digital Twin
- * @param setButtonText Function to set the button text
- * @param dispatch Redux dispatch function
- * @param executionId Optional execution ID for concurrent executions
- */
 export const updatePipelineStateOnStop = (
   digitalTwin: DigitalTwin,
   setButtonText: Dispatch<SetStateAction<string>>,
@@ -186,12 +162,6 @@ export const updatePipelineStateOnStop = (
   }
 };
 
-/**
- * Fetch job logs from GitLab
- * @param gitlabInstance The GitLab instance
- * @param pipelineId The pipeline ID
- * @returns Promise that resolves with an array of job logs
- */
 export const fetchJobLogs = async (
   gitlabInstance: GitlabInstance,
   pipelineId: number,
@@ -230,3 +200,44 @@ export const fetchJobLogs = async (
   });
   return (await Promise.all(logPromises)).reverse();
 };
+
+export const fetchLogsAndUpdateExecution = async (
+  digitalTwin: DigitalTwin,
+  pipelineId: number,
+  executionId: string,
+  status: ExecutionStatus,
+  dispatch: ReturnType<typeof useDispatch>,
+): Promise<boolean> => {
+  try {
+    const jobLogs = await fetchJobLogs(digitalTwin.gitlabInstance, pipelineId);
+
+    if (
+      jobLogs.length === 0 ||
+      jobLogs.every((log) => !log.log || log.log.trim() === '')
+    ) {
+      return false;
+    }
+
+    await digitalTwin.updateExecutionLogs(executionId, jobLogs);
+
+    await digitalTwin.updateExecutionStatus(executionId, status);
+
+    dispatch(
+      updateExecutionLogs({
+        id: executionId,
+        logs: jobLogs,
+      }),
+    );
+
+    dispatch(
+      updateExecutionStatus({
+        id: executionId,
+        status,
+      }),
+    );
+
+    return true;
+  } catch (_error) {
+    return false;
+  }
+};

client/src/preview/store/digitalTwin.slice.ts → client/src/model/backend/gitlab/state/digitalTwin.slice.ts

@@ -1,6 +1,6 @@
 import { PayloadAction, createSlice } from '@reduxjs/toolkit';
 import DigitalTwin from 'preview/util/digitalTwin';
-import { JobLog } from 'preview/model/executionHistory';
+import { JobLog } from 'model/backend/gitlab/types/executionHistory';
 import { RootState } from 'store/store';
 
 interface DigitalTwinState {
@@ -72,6 +72,9 @@ const digitalTwinSlice = createSlice({
 export const selectDigitalTwinByName = (name: string) => (state: RootState) =>
   state.digitalTwin.digitalTwin[name];
 
+export const selectDigitalTwins = (state: RootState) =>
+  Object.values(state.digitalTwin.digitalTwin);
+
 export const selectShouldFetchDigitalTwins = (state: RootState) =>
   state.digitalTwin.shouldFetchDigitalTwins;