feat(editor): Rollout improved log view (2nd attempt) (#15382)

cypress/composables/logs.ts

@@ -2,6 +2,14 @@
  * Accessors
  */
 
+export function getOverviewPanel() {
+	return cy.getByTestId('logs-overview');
+}
+
+export function getOverviewPanelBody() {
+	return cy.getByTestId('logs-overview-body');
+}
+
 export function getOverviewStatus() {
 	return cy.getByTestId('logs-overview-status');
 }

cypress/composables/modals/chat-modal.ts

@@ -22,21 +22,10 @@ export function getManualChatModalCloseButton() {
 	return cy.getByTestId('workflow-chat-button');
 }
 
-export function getManualChatModalLogs() {
-	return cy.getByTestId('canvas-chat-logs');
-}
 export function getManualChatDialog() {
 	return getManualChatModal().getByTestId('workflow-lm-chat-dialog');
 }
 
-export function getManualChatModalLogsTree() {
-	return getManualChatModalLogs().getByTestId('lm-chat-logs-tree');
-}
-
-export function getManualChatModalLogsEntries() {
-	return getManualChatModalLogs().getByTestId('lm-chat-logs-entry');
-}
-
 /**
  * Actions
  */

cypress/e2e/233-AI-switch-to-logs-on-error.cy.ts

@@ -1,10 +1,9 @@
 import type { ExecutionError } from 'n8n-workflow';
 
+import * as logs from '../composables/logs';
 import {
 	closeManualChatModal,
 	getManualChatMessages,
-	getManualChatModalLogs,
-	getManualChatModalLogsEntries,
 	sendManualChatMessage,
 } from '../composables/modals/chat-modal';
 import { setCredentialValues } from '../composables/modals/credential-modal';
@@ -199,10 +198,10 @@ function checkMessages(inputMessage: string, outputMessage: string) {
 	messages.should('contain', inputMessage);
 	messages.should('contain', outputMessage);
 
-	getManualChatModalLogs().should('exist');
+	logs.getOverviewPanelBody().should('exist');
-	getManualChatModalLogsEntries()
+	logs.getLogEntries().should('have.length', 2);
-		.should('have.length', 1)
+	logs.getSelectedLogEntry().should('have.text', 'AI Agent');
-		.should('contain', AI_MEMORY_POSTGRES_NODE_NAME);
+	logs.getOutputPanel().should('contain', AI_MEMORY_POSTGRES_NODE_NAME);
 }
 
 describe("AI-233 Make root node's logs pane active in case of an error in sub-nodes", () => {

cypress/e2e/30-langchain.cy.ts

@@ -12,13 +12,12 @@ import {
 	EDIT_FIELDS_SET_NODE_NAME,
 	CHAT_TRIGGER_NODE_DISPLAY_NAME,
 } from './../constants';
+import * as logs from '../composables/logs';
 import {
 	closeManualChatModal,
+	getManualChatInput,
 	getManualChatMessages,
 	getManualChatModal,
-	getManualChatModalLogs,
-	getManualChatModalLogsEntries,
-	getManualChatModalLogsTree,
 	sendManualChatMessage,
 } from '../composables/modals/chat-modal';
 import { setCredentialValues } from '../composables/modals/credential-modal';
@@ -308,12 +307,14 @@ describe('Langchain Integration', () => {
 		messages.should('contain', inputMessage);
 		messages.should('contain', outputMessage);
 
-		getManualChatModalLogsTree().should('be.visible');
+		logs.getOverviewPanel().should('be.visible');
-		getManualChatModalLogsEntries().should('have.length', 1);
+		logs.getLogEntries().should('have.length', 2);
+		logs.getLogEntries().eq(0).should('have.text', 'AI Agent');
+		logs.getLogEntries().eq(1).should('have.text', 'OpenAI Chat Model');
 
 		closeManualChatModal();
-		getManualChatModalLogs().should('not.exist');
+		logs.getOverviewPanelBody().should('not.exist');
-		getManualChatModal().should('not.exist');
+		getManualChatInput().should('not.exist');
 	});
 
 	it('should auto-add chat trigger and basic LLM chain when adding LLM node', () => {
@@ -453,11 +454,11 @@ describe('Langchain Integration', () => {
 		cy.createFixtureWorkflow('Test_workflow_chat_partial_execution.json');
 		workflowPage.actions.zoomToFit();
 
-		getManualChatModal().should('not.exist');
+		getManualChatModal().find('main').should('not.exist');
 		openNode('Node 1');
 		ndv.actions.execute();
 
-		getManualChatModal().should('exist');
+		getManualChatModal().find('main').should('exist');
 		sendManualChatMessage('Test');
 
 		getManualChatMessages().should('contain', 'this_my_field_1');

cypress/utils/executions.ts

@@ -1,4 +1,5 @@
 import { stringify } from 'flatted';
+import { pick } from 'lodash';
 import type {
 	IDataObject,
 	IRunData,
@@ -114,7 +115,7 @@ export function runMockWorkflowExecution({
 		cy.push('nodeExecuteBefore', {
 			executionId,
 			nodeName,
-			data: nodeRunData,
+			data: pick(nodeRunData, ['startTime', 'executionIndex', 'source', 'hints']),
 		});
 		cy.push('nodeExecuteAfter', {
 			executionId,

packages/cli/src/config/schema.ts

@@ -289,7 +289,7 @@ export const schema = {
 	logs_view: {
 		enabled: {
 			format: Boolean,
-			default: false,
+			default: true,
 			env: 'N8N_ENABLE_LOGS_VIEW',
 			doc: 'Temporary env variable to enable logs view',
 		},

packages/frontend/editor-ui/src/components/CanvasChat/future/components/LogsOverviewPanel.vue

@@ -172,6 +172,7 @@ watch(
 						type="secondary"
 						icon="trash"
 						icon-size="medium"
+						data-test-id="clear-execution-data-button"
 						:class="$style.clearButton"
 						@click.stop="emit('clearExecutionData')"
 						>{{ locale.baseText('logs.overview.header.actions.clearExecution') }}</N8nButton