fix(editor): Add 'Stop execution' button to execution preview

packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue

@@ -18,7 +18,8 @@
 					<n8n-spinner v-if="executionUIDetails.name === 'running'" size="small" :class="[$style.spinner, 'mr-4xs']"/>
 					<n8n-text :class="$style.statusLabel" size="small">{{ executionUIDetails.label }}</n8n-text>
 					<n8n-text v-if="executionUIDetails.name === 'running'" :color="isActive? 'text-dark' : 'text-base'" size="small">
-						{{ $locale.baseText('executionDetails.runningTimeRunning', { interpolate: { time: executionUIDetails.runningTime } }) }}
+						{{ $locale.baseText('executionDetails.runningTimeRunning') }}
+						<execution-time :start-time="execution.startedAt"/>
 					</n8n-text>
 					<n8n-text v-else-if="executionUIDetails.name !== 'waiting' && executionUIDetails.name !== 'unknown'" :color="isActive? 'text-dark' : 'text-base'" size="small">
 						{{ $locale.baseText('executionDetails.runningTimeFinished', { interpolate: { time: executionUIDetails.runningTime } }) }}
@@ -56,13 +57,17 @@ import { executionHelpers, IExecutionUIData } from '../mixins/executionsHelpers'
 import { VIEWS } from '../../constants';
 import { showMessage } from '../mixins/showMessage';
 import { restApi } from '../mixins/restApi';
+import ExecutionTime from '@/components/ExecutionTime.vue';
 
 export default mixins(
 	executionHelpers,
 	showMessage,
 	restApi,
 ).extend({
 	name: 'execution-card',
+	components: {
+		ExecutionTime,
+	},
 	data() {
 		return {
 			VIEWS,

packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue

@@ -1,11 +1,14 @@
 <template>
 	<div v-if="executionUIDetails && executionUIDetails.name === 'running'" :class="$style.runningInfo">
 		<div :class="$style.spinner">
-			<font-awesome-icon icon="spinner" spin />
+			<n8n-spinner type="ring" />
 		</div>
-		<n8n-text :class="$style.runningMessage">
+		<n8n-text :class="$style.runningMessage" color="text-light">
 			{{ $locale.baseText('executionDetails.runningMessage') }}
 		</n8n-text>
+		<n8n-button class="mt-l" type="tertiary" size="medium" @click="handleStopClick">
+			{{ $locale.baseText('executionsList.stopExecution') }}
+		</n8n-button>
 	</div>
 	<div v-else :class="$style.previewContainer">
 		<div :class="{[$style.executionDetails]: true, [$style.sidebarCollapsed]: sidebarCollapsed }" v-if="activeExecution">
@@ -111,6 +114,9 @@ export default mixins(restApi, showMessage, executionHelpers).extend({
 		handleRetryClick(command: string): void {
 			this.$emit('retryExecution', { execution: this.activeExecution, command });
 		},
+		handleStopClick(): void {
+			this.$emit('stopExecution');
+		},
 		onRetryButtonBlur(event: FocusEvent): void {
 			// Hide dropdown when clicking outside of current document
 			const retryDropdown = this.$refs.retryDropdown as Vue & { hide: () => void } | undefined;
@@ -146,6 +152,14 @@ export default mixins(restApi, showMessage, executionHelpers).extend({
 	}
 }
 
+.spinner {
+	div div {
+		width: 30px;
+		height: 30px;
+		border-width: 2px;
+	}
+}
+
 .running, .spinner { color: var(--color-warning); }
 .waiting { color: var(--color-secondary); }
 .success { color: var(--color-success); }
@@ -158,11 +172,6 @@ export default mixins(restApi, showMessage, executionHelpers).extend({
 	margin-top: var(--spacing-4xl);
 }
 
-.spinner {
-	font-size: var(--font-size-2xl);
-	color: var(--color-primary);
-}
-
 .runningMessage {
 	width: 200px;
 	margin-top: var(--spacing-l);

packages/editor-ui/src/components/ExecutionsView/ExecutionsView.vue

@@ -12,7 +12,12 @@
 			@refresh="loadAutoRefresh"
 		/>
 		<div :class="$style.content" v-if="!hidePreview">
-			<router-view name="executionPreview" @deleteCurrentExecution="onDeleteCurrentExecution" @retryExecution="onRetryExecution"/>
+			<router-view
+				name="executionPreview"
+				@deleteCurrentExecution="onDeleteCurrentExecution"
+				@retryExecution="onRetryExecution"
+				@stopExecution="onStopExecution"
+			/>
 		</div>
 		<div v-if="executions.length === 0 && filterApplied" :class="$style.noResultsContainer">
 			<n8n-text color="text-base" size="medium" align="center">
@@ -240,6 +245,29 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 				type: 'success',
 			});
 		},
+		async onStopExecution(): Promise<void> {
+			const activeExecutionId = this.$route.params.executionId;
+
+			try {
+				await this.restApi().stopCurrentExecution(activeExecutionId);
+
+				this.$showMessage({
+					title: this.$locale.baseText('executionsList.showMessage.stopExecution.title'),
+					message: this.$locale.baseText(
+						'executionsList.showMessage.stopExecution.message',
+						{ interpolate: { activeExecutionId } },
+					),
+					type: 'success',
+				});
+
+				this.loadAutoRefresh();
+			} catch (error) {
+				this.$showError(
+					error,
+					this.$locale.baseText('executionsList.showError.stopExecution.title'),
+				);
+			}
+		},
 		onFilterUpdated(newFilter: { finished: boolean, status: string }): void {
 			this.filter = newFilter;
 			this.setExecutions();

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -395,7 +395,7 @@
 	"executionDetails.readOnly.youreViewingTheLogOf": "You're viewing the log of a previous execution. You cannot<br />\n\t\tmake changes since this execution already occurred. Make changes<br />\n\t\tto this workflow by clicking on its name on the left.",
 	"executionDetails.retry": "Retry of execution",
 	"executionDetails.runningTimeFinished": "in {time}",
-	"executionDetails.runningTimeRunning": "for {time}",
+	"executionDetails.runningTimeRunning": "for",
 	"executionDetails.runningMessage": "Execution is running. It will show here once finished.",
 	"executionDetails.workflow": "workflow",
 	"executionsLandingPage.emptyState.noTrigger.heading": "Set up the first step. Then execute your workflow",