feat(editor): Add workflow evaluation run views (no-changelog)

packages/cli/src/evaluation/test-runner/test-runner.service.ee.ts

@@ -127,6 +127,7 @@ export class TestRunnerService {
 		evaluationWorkflow: WorkflowEntity,
 		expectedData: IRunData,
 		actualData: IRunData,
+		testRunId?: string,
 	) {
 		// Prepare the evaluation wf input data.
 		// Provide both the expected data and the actual data
@@ -139,7 +140,13 @@ export class TestRunnerService {
 
 		// Prepare the data to run the evaluation workflow
 		const data = await getRunData(evaluationWorkflow, [evaluationInputData]);
-
+		// FIXME: This is a hack to add the testRunId to the evaluation workflow execution data
+		// So that we can fetch all execution runs for a test run
+		if (testRunId && data.executionData) {
+			data.executionData.resultData.metadata = {
+				testRunId,
+			};
+		}
 		data.executionMode = 'evaluation';
 
 		// Trigger the evaluation workflow
@@ -256,10 +263,9 @@ export class TestRunnerService {
 				evaluationWorkflow,
 				originalRunData,
 				testCaseRunData,
+				testRun.id,
 			);
 			assert(evalExecution);
-
-			// Extract the output of the last node executed in the evaluation workflow
 			metrics.addResults(this.extractEvaluationResult(evalExecution));
 		}
 

packages/design-system/src/components/N8nSelect/Select.vue

@@ -31,6 +31,10 @@ const props = defineProps({
 	multiple: {
 		type: Boolean,
 	},
+	multipleLimit: {
+		type: Number,
+		default: 0,
+	},
 	filterMethod: {
 		type: Function,
 	},
@@ -120,6 +124,7 @@ defineExpose({
 		<ElSelect
 			v-bind="{ ...$props, ...listeners }"
 			ref="innerSelect"
+			:multiple-limit="props.multipleLimit"
 			:model-value="props.modelValue ?? undefined"
 			:size="computedSize"
 			:popper-class="props.popperClass"

packages/editor-ui/src/api/testDefinition.ee.ts

@@ -1,5 +1,6 @@
 import type { IRestApiContext } from '@/Interface';
-import { makeRestApiRequest } from '@/utils/apiUtils';
+import { makeRestApiRequest, request } from '@/utils/apiUtils';
+
 export interface TestDefinitionRecord {
 	id: string;
 	name: string;
@@ -9,7 +10,10 @@ export interface TestDefinitionRecord {
 	description?: string | null;
 	updatedAt?: string;
 	createdAt?: string;
+	annotationTag?: string | null;
+	mockedNodes?: Array<{ name: string }>;
 }
+
 interface CreateTestDefinitionParams {
 	name: string;
 	workflowId: string;
@@ -21,31 +25,62 @@ export interface UpdateTestDefinitionParams {
 	evaluationWorkflowId?: string | null;
 	annotationTagId?: string | null;
 	description?: string | null;
+	mockedNodes?: Array<{ name: string }>;
 }
+
 export interface UpdateTestResponse {
 	createdAt: string;
 	updatedAt: string;
 	id: string;
 	name: string;
 	workflowId: string;
-	description: string | null;
-	annotationTag: string | null;
-	evaluationWorkflowId: string | null;
-	annotationTagId: string | null;
+	description?: string | null;
+	annotationTag?: string | null;
+	evaluationWorkflowId?: string | null;
+	annotationTagId?: string | null;
+}
+
+export interface TestRunRecord {
+	id: string;
+	testDefinitionId: string;
+	status: 'new' | 'running' | 'completed' | 'error';
+	metrics?: Record<string, number>;
+	createdAt: string;
+	updatedAt: string;
+	runAt: string;
+	completedAt: string;
+}
+
+interface GetTestRunParams {
+	testDefinitionId: string;
+	runId: string;
+}
+
+interface DeleteTestRunParams {
+	testDefinitionId: string;
+	runId: string;
 }
 
 const endpoint = '/evaluation/test-definitions';
+const getMetricsEndpoint = (testDefinitionId: string) => `${endpoint}/${testDefinitionId}/metrics`;
 
-export async function getTestDefinitions(context: IRestApiContext) {
+export async function getTestDefinitions(
+	context: IRestApiContext,
+	params?: { workflowId?: string },
+) {
+	let url = endpoint;
+	if (params?.workflowId) {
+		url += `?filter=${JSON.stringify({ workflowId: params.workflowId })}`;
+	}
 	return await makeRestApiRequest<{ count: number; testDefinitions: TestDefinitionRecord[] }>(
 		context,
 		'GET',
-		endpoint,
+		url,
 	);
 }
 
 export async function getTestDefinition(context: IRestApiContext, id: string) {
-	return await makeRestApiRequest<{ id: string }>(context, 'GET', `${endpoint}/${id}`);
+	return await makeRestApiRequest<TestDefinitionRecord>(context, 'GET', `${endpoint}/${id}`);
 }
 
 export async function createTestDefinition(
@@ -71,3 +106,124 @@ export async function updateTestDefinition(
 export async function deleteTestDefinition(context: IRestApiContext, id: string) {
 	return await makeRestApiRequest<{ success: boolean }>(context, 'DELETE', `${endpoint}/${id}`);
 }
+
+// Metrics
+export interface TestMetricRecord {
+	id: string;
+	name: string;
+	testDefinitionId: string;
+	createdAt?: string;
+	updatedAt?: string;
+}
+
+export interface CreateTestMetricParams {
+	testDefinitionId: string;
+	name: string;
+}
+
+export interface UpdateTestMetricParams {
+	name: string;
+	id: string;
+	testDefinitionId: string;
+}
+
+export interface DeleteTestMetricParams {
+	testDefinitionId: string;
+	id: string;
+}
+
+export const getTestMetrics = async (context: IRestApiContext, testDefinitionId: string) => {
+	return await makeRestApiRequest<TestMetricRecord[]>(
+		context,
+		'GET',
+		getMetricsEndpoint(testDefinitionId),
+	);
+};
+
+export const getTestMetric = async (
+	context: IRestApiContext,
+	testDefinitionId: string,
+	id: string,
+) => {
+	return await makeRestApiRequest<TestMetricRecord>(
+		context,
+		'GET',
+		`${getMetricsEndpoint(testDefinitionId)}/${id}`,
+	);
+};
+
+export const createTestMetric = async (
+	context: IRestApiContext,
+	params: CreateTestMetricParams,
+) => {
+	return await makeRestApiRequest<TestMetricRecord>(
+		context,
+		'POST',
+		getMetricsEndpoint(params.testDefinitionId),
+		{ name: params.name },
+	);
+};
+
+export const updateTestMetric = async (
+	context: IRestApiContext,
+	params: UpdateTestMetricParams,
+) => {
+	return await makeRestApiRequest<TestMetricRecord>(
+		context,
+		'PATCH',
+		`${getMetricsEndpoint(params.testDefinitionId)}/${params.id}`,
+		{ name: params.name },
+	);
+};
+
+export const deleteTestMetric = async (
+	context: IRestApiContext,
+	params: DeleteTestMetricParams,
+) => {
+	return await makeRestApiRequest(
+		context,
+		'DELETE',
+		`${getMetricsEndpoint(params.testDefinitionId)}/${params.id}`,
+	);
+};
+
+const getRunsEndpoint = (testDefinitionId: string) => `${endpoint}/${testDefinitionId}/runs`;
+
+// Get all test runs for a test definition
+export const getTestRuns = async (context: IRestApiContext, testDefinitionId: string) => {
+	return await makeRestApiRequest<TestRunRecord[]>(
+		context,
+		'GET',
+		getRunsEndpoint(testDefinitionId),
+	);
+};
+
+// Get specific test run
+export const getTestRun = async (context: IRestApiContext, params: GetTestRunParams) => {
+	return await makeRestApiRequest<TestRunRecord>(
+		context,
+		'GET',
+		`${getRunsEndpoint(params.testDefinitionId)}/${params.runId}`,
+	);
+};
+
+// Start a new test run
+export const startTestRun = async (context: IRestApiContext, testDefinitionId: string) => {
+	const response = await request({
+		method: 'POST',
+		baseURL: context.baseUrl,
+		endpoint: `${endpoint}/${testDefinitionId}/run`,
+		headers: { 'push-ref': context.pushRef },
+	});
+	// CLI is returning the response without wrapping it in `data` key
+	return response as { success: boolean };
+};
+
+// Delete a test run
+export const deleteTestRun = async (context: IRestApiContext, params: DeleteTestRunParams) => {
+	return await makeRestApiRequest<{ success: boolean }>(
+		context,
+		'DELETE',
+		`${getRunsEndpoint(params.testDefinitionId)}/${params.runId}`,
+	);
+};

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

@@ -43,6 +43,25 @@ const executionToReturnTo = ref('');
 const dirtyState = ref(false);
 const githubButtonHidden = useLocalStorage(LOCAL_STORAGE_HIDE_GITHUB_STAR_BUTTON, false);
 
+// Track the routes that are used for the tabs
+// This is used to determine which tab to show when the route changes
+// TODO: It might be easier to manage this in the router config, by passing meta information to the routes
+// This would allow us to specify it just once on the root route, and then have the tabs be determined for children
+const testDefinitionRoutes: VIEWS[] = [
+	VIEWS.TEST_DEFINITION,
+	VIEWS.TEST_DEFINITION_EDIT,
+	VIEWS.TEST_DEFINITION_RUNS,
+	VIEWS.TEST_DEFINITION_RUNS_DETAIL,
+	VIEWS.TEST_DEFINITION_RUNS_COMPARE,
+];
+
+const workflowRoutes: VIEWS[] = [VIEWS.WORKFLOW, VIEWS.NEW_WORKFLOW, VIEWS.EXECUTION_DEBUG];
+
+const executionRoutes: VIEWS[] = [
+	VIEWS.EXECUTION_HOME,
+	VIEWS.WORKFLOW_EXECUTIONS,
+	VIEWS.EXECUTION_PREVIEW,
+];
 const tabBarItems = computed(() => {
 	const items = [
 		{ value: MAIN_HEADER_TABS.WORKFLOW, label: locale.baseText('generic.editor') },
@@ -92,22 +111,24 @@ onMounted(async () => {
 	syncTabsWithRoute(route);
 });
 
+function isViewRoute(name: unknown): name is VIEWS {
+	return (
+		typeof name === 'string' &&
+		[testDefinitionRoutes, workflowRoutes, executionRoutes].flat().includes(name as VIEWS)
+	);
+}
+
 function syncTabsWithRoute(to: RouteLocation, from?: RouteLocation): void {
-	if (to.matched.some((record) => record.name === VIEWS.TEST_DEFINITION)) {
-		activeHeaderTab.value = MAIN_HEADER_TABS.TEST_DEFINITION;
-	}
-	if (
-		to.name === VIEWS.EXECUTION_HOME ||
-		to.name === VIEWS.WORKFLOW_EXECUTIONS ||
-		to.name === VIEWS.EXECUTION_PREVIEW
-	) {
-		activeHeaderTab.value = MAIN_HEADER_TABS.EXECUTIONS;
-	} else if (
-		to.name === VIEWS.WORKFLOW ||
-		to.name === VIEWS.NEW_WORKFLOW ||
-		to.name === VIEWS.EXECUTION_DEBUG
-	) {
-		activeHeaderTab.value = MAIN_HEADER_TABS.WORKFLOW;
+	if (isViewRoute(to.name)) {
+		if (testDefinitionRoutes.includes(to.name)) {
+			activeHeaderTab.value = MAIN_HEADER_TABS.TEST_DEFINITION;
+		}
+		if (executionRoutes.includes(to.name)) {
+			activeHeaderTab.value = MAIN_HEADER_TABS.EXECUTIONS;
+		}
+		if (workflowRoutes.includes(to.name)) {
+			activeHeaderTab.value = MAIN_HEADER_TABS.WORKFLOW;
+		}
 	}
 
 	if (to.params.name !== 'new' && typeof to.params.name === 'string') {