feat: Add global event bus (#4860)

* fix branch

* fix deserialize, add filewriter

* add catchAll eventGroup/Name

* adding simple Redis sender and receiver to eventbus

* remove native node threads

* improve eventbus

* refactor and simplify

* more refactoring and syslog client

* more refactor, improved endpoints and eventbus

* remove local broker and receivers from mvp

* destination de/serialization

* create MessageEventBusDestinationEntity

* db migrations, load destinations at startup

* add delete destination endpoint

* pnpm merge and circular import fix

* delete destination fix

* trigger log file shuffle after size reached

* add environment variables for eventbus

* reworking event messages

* serialize to thread fix

* some refactor and lint fixing

* add emit to eventbus

* cleanup and fix sending unsent

* quicksave frontend trial

* initial EventTree vue component

* basic log streaming settings in vue

* http request code merge

* create destination settings modals

* fix eventmessage options types

* credentials are loaded

* fix and clean up frontend code

* move request code to axios

* update lock file

* merge fix

* fix redis build

* move destination interfaces into workflow pkg

* revive sentry as destination

* migration fixes and frontend cleanup

* N8N-5777 / N8N-5789 N8N-5788

* N8N-5784

* N8N-5782 removed event levels

* N8N-5790 sentry destination cleanup

* N8N-5786 and refactoring

* N8N-5809 and refactor/cleanup

* UI fixes and anonymize renaming

* N8N-5837

* N8N-5834

* fix no-items UI issues

* remove card / settings label in modal

* N8N-5842 fix

* disable webhook auth for now and update ui

* change sidebar to tabs

* remove payload option

* extend audit events with more user data

* N8N-5853 and UI revert to sidebar

* remove redis destination

* N8N-5864 / N8N-5868 / N8N-5867 / N8N-5865

* ui and licensing fixes

* add node events and info bubbles to frontend

* ui wording changes

* frontend tests

* N8N-5896 and ee rename

* improves backend tests

* merge fix

* fix backend test

* make linter happy

* remove unnecessary cfg / limit  actions to owners

* fix multiple sentry DSN and anon bug

* eslint fix

* more tests and fixes

* merge fix

* fix workflow audit events

* remove 'n8n.workflow.execution.error' event

* merge fix

* lint fix

* lint fix

* review fixes

* fix merge

* prettier fixes

* merge

* review changes

* use loggerproxy

* remove catch from internal hook promises

* fix tests

* lint fix

* include review PR changes

* review changes

* delete duplicate lines from a bad merge

* decouple log-streaming UI options from public API

* logstreaming -> log-streaming for consistency

* do not make unnecessary api calls when log streaming is disabled

* prevent sentryClient.close() from being called if init failed

* fix the e2e test for log-streaming

* review changes

* cleanup

* use `private` for one last private property

* do not use node prefix package names.. just yet

* remove unused import

* fix the tests

because there is a folder called `events`, tsc-alias is messing up all imports for native events module.
https://github.com/justkey007/tsc-alias/issues/152

Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>

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

@@ -60,7 +60,6 @@
 <script lang="ts">
 import Vue from 'vue';
 import mixins from 'vue-typed-mixins';
-
 import Modal from './Modal.vue';
 import { CREDENTIAL_SELECT_MODAL_KEY } from '../constants';
 import { externalHooks } from '@/mixins/externalHooks';

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

@@ -96,6 +96,17 @@
 				/>
 			</template>
 		</ModalRoot>
+
+		<ModalRoot :name="LOG_STREAM_MODAL_KEY">
+			<template #default="{ modalName, data }">
+				<EventDestinationSettingsModal
+					:modalName="modalName"
+					:destination="data.destination"
+					:isNew="data.isNew"
+					:eventBus="data.eventBus"
+				/>
+			</template>
+		</ModalRoot>
 	</div>
 </template>
 
@@ -122,6 +133,7 @@ import {
 	WORKFLOW_SETTINGS_MODAL_KEY,
 	WORKFLOW_SHARE_MODAL_KEY,
 	IMPORT_CURL_MODAL_KEY,
+	LOG_STREAM_MODAL_KEY,
 } from '@/constants';
 
 import AboutModal from './AboutModal.vue';
@@ -145,6 +157,7 @@ import ExecutionsList from './ExecutionsList.vue';
 import ActivationModal from './ActivationModal.vue';
 import ImportCurlModal from './ImportCurlModal.vue';
 import WorkflowShareModal from './WorkflowShareModal.ee.vue';
+import EventDestinationSettingsModal from '@/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue';
 
 export default Vue.extend({
 	name: 'Modals',
@@ -170,6 +183,7 @@ export default Vue.extend({
 		WorkflowSettings,
 		WorkflowShareModal,
 		ImportCurlModal,
+		EventDestinationSettingsModal,
 	},
 	data: () => ({
 		COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY,
@@ -192,6 +206,7 @@ export default Vue.extend({
 		EXECUTIONS_MODAL_KEY,
 		WORKFLOW_ACTIVE_MODAL_KEY,
 		IMPORT_CURL_MODAL_KEY,
+		LOG_STREAM_MODAL_KEY,
 	}),
 });
 </script>

packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue

@@ -0,0 +1,207 @@
+<template>
+	<n8n-card :class="$style.cardLink" data-test-id="destination-card" @click="onClick">
+		<template #header>
+			<div>
+				<n8n-heading tag="h2" bold class="ph-no-capture" :class="$style.cardHeading">
+					{{ destination.label }}
+				</n8n-heading>
+				<div :class="$style.cardDescription">
+					<n8n-text color="text-light" size="small">
+						<span>{{ $locale.baseText(typeLabelName) }}</span>
+					</n8n-text>
+				</div>
+			</div>
+		</template>
+		<template #append>
+			<div :class="$style.cardActions">
+				<div :class="$style.activeStatusText" data-test-id="destination-activator-status">
+					<n8n-text v-if="nodeParameters.enabled" :color="'success'" size="small" bold>
+						{{ $locale.baseText('workflowActivator.active') }}
+					</n8n-text>
+					<n8n-text v-else color="text-base" size="small" bold>
+						{{ $locale.baseText('workflowActivator.inactive') }}
+					</n8n-text>
+				</div>
+
+				<el-switch
+					class="mr-s"
+					:disabled="!isInstanceOwner"
+					:value="nodeParameters.enabled"
+					@change="onEnabledSwitched($event, destination.id)"
+					:title="
+						nodeParameters.enabled
+							? $locale.baseText('workflowActivator.deactivateWorkflow')
+							: $locale.baseText('workflowActivator.activateWorkflow')
+					"
+					active-color="#13ce66"
+					inactive-color="#8899AA"
+					element-loading-spinner="el-icon-loading"
+					data-test-id="workflow-activate-switch"
+				>
+				</el-switch>
+
+				<n8n-action-toggle :actions="actions" theme="dark" @action="onAction" />
+			</div>
+		</template>
+	</n8n-card>
+</template>
+
+<script lang="ts">
+import mixins from 'vue-typed-mixins';
+import { EnterpriseEditionFeature } from '@/constants';
+import { showMessage } from '@/mixins/showMessage';
+import { useLogStreamingStore } from '../../stores/logStreamingStore';
+import { restApi } from '@/mixins/restApi';
+import Vue from 'vue';
+import { mapStores } from 'pinia';
+import {
+	deepCopy,
+	defaultMessageEventBusDestinationOptions,
+	MessageEventBusDestinationOptions,
+} from 'n8n-workflow';
+import { saveDestinationToDb } from './Helpers.ee';
+import { BaseTextKey } from '../../plugins/i18n';
+
+export const DESTINATION_LIST_ITEM_ACTIONS = {
+	OPEN: 'open',
+	DELETE: 'delete',
+};
+
+export default mixins(showMessage, restApi).extend({
+	data() {
+		return {
+			EnterpriseEditionFeature,
+			nodeParameters: {} as MessageEventBusDestinationOptions,
+		};
+	},
+	components: {},
+	props: {
+		eventBus: {
+			type: Vue,
+		},
+		destination: {
+			type: Object,
+			required: true,
+			default: deepCopy(
+				defaultMessageEventBusDestinationOptions,
+			) as MessageEventBusDestinationOptions,
+		},
+		isInstanceOwner: Boolean,
+	},
+	mounted() {
+		this.nodeParameters = Object.assign(
+			deepCopy(defaultMessageEventBusDestinationOptions),
+			this.destination,
+		);
+		this.eventBus.$on('destinationWasSaved', () => {
+			const updatedDestination = this.logStreamingStore.getDestination(this.destination.id);
+			if (updatedDestination) {
+				this.nodeParameters = Object.assign(
+					deepCopy(defaultMessageEventBusDestinationOptions),
+					this.destination,
+				);
+			}
+		});
+	},
+	computed: {
+		...mapStores(useLogStreamingStore),
+		actions(): Array<{ label: string; value: string }> {
+			const actions = [
+				{
+					label: this.$locale.baseText('workflows.item.open'),
+					value: DESTINATION_LIST_ITEM_ACTIONS.OPEN,
+				},
+			];
+			if (this.isInstanceOwner) {
+				actions.push({
+					label: this.$locale.baseText('workflows.item.delete'),
+					value: DESTINATION_LIST_ITEM_ACTIONS.DELETE,
+				});
+			}
+			return actions;
+		},
+		typeLabelName(): BaseTextKey {
+			return `settings.log-streaming.${this.destination.__type}` as BaseTextKey;
+		},
+	},
+	methods: {
+		async onClick(event?: PointerEvent) {
+			if (
+				event &&
+				event.target &&
+				'className' in event.target &&
+				event.target['className'] === 'el-switch__core'
+			) {
+				event.stopPropagation();
+			} else {
+				this.$emit('edit', this.destination.id);
+			}
+		},
+		onEnabledSwitched(state: boolean, destinationId: string) {
+			this.nodeParameters.enabled = state;
+			this.saveDestination();
+		},
+		async saveDestination() {
+			await saveDestinationToDb(this.restApi(), this.nodeParameters);
+		},
+		async onAction(action: string) {
+			if (action === DESTINATION_LIST_ITEM_ACTIONS.OPEN) {
+				this.$emit('edit', this.destination.id);
+			} else if (action === DESTINATION_LIST_ITEM_ACTIONS.DELETE) {
+				const deleteConfirmed = await this.confirmMessage(
+					this.$locale.baseText('settings.log-streaming.destinationDelete.message', {
+						interpolate: { destinationName: this.destination.label },
+					}),
+					this.$locale.baseText('settings.log-streaming.destinationDelete.headline'),
+					'warning',
+					this.$locale.baseText('settings.log-streaming.destinationDelete.confirmButtonText'),
+					this.$locale.baseText('settings.log-streaming.destinationDelete.cancelButtonText'),
+				);
+
+				if (deleteConfirmed === false) {
+					return;
+				}
+
+				this.$emit('remove', this.destination.id);
+			}
+		},
+	},
+});
+</script>
+
+<style lang="scss" module>
+.cardLink {
+	transition: box-shadow 0.3s ease;
+	cursor: pointer;
+
+	&:hover {
+		box-shadow: 0 2px 8px rgba(#441c17, 0.1);
+	}
+}
+
+.activeStatusText {
+	width: 64px; // Required to avoid jumping when changing active state
+	padding-right: var(--spacing-2xs);
+	box-sizing: border-box;
+	display: inline-block;
+	text-align: right;
+}
+
+.cardHeading {
+	font-size: var(--font-size-s);
+	word-break: break-word;
+}
+
+.cardDescription {
+	min-height: 19px;
+	display: flex;
+	align-items: center;
+}
+
+.cardActions {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+}
+</style>

packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue

@@ -0,0 +1,563 @@
+<template>
+	<Modal
+		:name="modalName"
+		:eventBus="modalBus"
+		:beforeClose="onModalClose"
+		:scrollable="true"
+		:center="true"
+		:loading="loading"
+		:minWidth="isTypeAbstract ? '460px' : '70%'"
+		:maxWidth="isTypeAbstract ? '460px' : '70%'"
+		:minHeight="isTypeAbstract ? '160px' : '650px'"
+		:maxHeight="isTypeAbstract ? '300px' : '650px'"
+		data-test-id="destination-modal"
+	>
+		<template #header>
+			<template v-if="isTypeAbstract">
+				<div :class="$style.headerCreate">
+					<span>Add new destination</span>
+				</div>
+			</template>
+			<template v-else>
+				<div :class="$style.header">
+					<div :class="$style.destinationInfo">
+						<InlineNameEdit
+							:name="headerLabel"
+							:subtitle="!isTypeAbstract ? $locale.baseText(typeLabelName) : 'Select type'"
+							:readonly="isTypeAbstract"
+							type="Credential"
+							data-test-id="subtitle-showing-type"
+							@input="onLabelChange"
+						/>
+					</div>
+					<div :class="$style.destinationActions">
+						<n8n-button
+							v-if="nodeParameters && hasOnceBeenSaved && unchanged"
+							:icon="testMessageSent ? (testMessageResult ? 'check' : 'exclamation-triangle') : ''"
+							:title="
+								testMessageSent && testMessageResult
+									? 'Event sent and returned OK'
+									: 'Event returned with error'
+							"
+							size="medium"
+							type="tertiary"
+							label="Send Test-Event"
+							:disabled="!hasOnceBeenSaved || !unchanged"
+							@click="sendTestEvent"
+							data-test-id="destination-test-button"
+						/>
+						<template v-if="isInstanceOwner">
+							<n8n-icon-button
+								v-if="nodeParameters && hasOnceBeenSaved"
+								:title="$locale.baseText('settings.log-streaming.delete')"
+								icon="trash"
+								size="medium"
+								type="tertiary"
+								:disabled="isSaving"
+								:loading="isDeleting"
+								@click="removeThis"
+								data-test-id="destination-delete-button"
+							/>
+							<SaveButton
+								:saved="unchanged && hasOnceBeenSaved"
+								:disabled="isTypeAbstract || unchanged"
+								:savingLabel="$locale.baseText('settings.log-streaming.saving')"
+								@click="saveDestination"
+								data-test-id="destination-save-button"
+							/>
+						</template>
+					</div>
+				</div>
+				<hr />
+			</template>
+		</template>
+		<template #content>
+			<div :class="$style.container">
+				<template v-if="isTypeAbstract">
+					<n8n-input-label
+						:class="$style.typeSelector"
+						:label="$locale.baseText('settings.log-streaming.selecttype')"
+						:tooltipText="$locale.baseText('settings.log-streaming.selecttypehint')"
+						:bold="false"
+						size="medium"
+						:underline="false"
+					>
+						<n8n-select
+							:value="typeSelectValue"
+							:placeholder="typeSelectPlaceholder"
+							@change="onTypeSelectInput"
+							data-test-id="select-destination-type"
+							name="name"
+							ref="typeSelectRef"
+						>
+							<n8n-option
+								v-for="option in typeSelectOptions || []"
+								:key="option.value"
+								:value="option.value"
+								:label="$locale.baseText(option.label)"
+							/>
+						</n8n-select>
+						<div class="mt-m text-right">
+							<n8n-button
+								size="large"
+								@click="onContinueAddClicked"
+								data-test-id="select-destination-button"
+								:disabled="!typeSelectValue"
+							>
+								{{ $locale.baseText(`settings.log-streaming.continue`) }}
+							</n8n-button>
+						</div>
+					</n8n-input-label>
+				</template>
+				<template v-else>
+					<div :class="$style.sidebar">
+						<n8n-menu mode="tabs" :items="sidebarItems" @select="onTabSelect"></n8n-menu>
+					</div>
+					<div v-if="activeTab === 'settings'" :class="$style.mainContent" ref="content">
+						<template v-if="isTypeWebhook">
+							<parameter-input-list
+								:parameters="webhookDescription"
+								:hideDelete="true"
+								:nodeValues="nodeParameters"
+								:isReadOnly="!isInstanceOwner"
+								path=""
+								@valueChanged="valueChanged"
+							/>
+						</template>
+						<template v-else-if="isTypeSyslog">
+							<parameter-input-list
+								:parameters="syslogDescription"
+								:hideDelete="true"
+								:nodeValues="nodeParameters"
+								:isReadOnly="!isInstanceOwner"
+								path=""
+								@valueChanged="valueChanged"
+							/>
+						</template>
+						<template v-else-if="isTypeSentry">
+							<parameter-input-list
+								:parameters="sentryDescription"
+								:hideDelete="true"
+								:nodeValues="nodeParameters"
+								:isReadOnly="!isInstanceOwner"
+								path=""
+								@valueChanged="valueChanged"
+							/>
+						</template>
+					</div>
+					<div v-if="activeTab === 'events'" :class="$style.mainContent">
+						<template>
+							<div class="">
+								<n8n-input-label
+									class="mb-m mt-m"
+									:label="$locale.baseText('settings.log-streaming.tab.events.title')"
+									:bold="true"
+									size="medium"
+									:underline="false"
+								/>
+								<event-selection
+									class=""
+									:destinationId="destination.id"
+									@input="onInput"
+									@change="valueChanged"
+									:readonly="!isInstanceOwner"
+								/>
+							</div>
+						</template>
+					</div>
+				</template>
+			</div>
+		</template>
+	</Modal>
+</template>
+
+<script lang="ts">
+import { get, set, unset } from 'lodash';
+import { mapStores } from 'pinia';
+import mixins from 'vue-typed-mixins';
+import { useLogStreamingStore } from '../../stores/logStreamingStore';
+import { useNDVStore } from '../../stores/ndv';
+import { useWorkflowsStore } from '../../stores/workflows';
+import { restApi } from '../../mixins/restApi';
+import ParameterInputList from '@/components/ParameterInputList.vue';
+import NodeCredentials from '@/components/NodeCredentials.vue';
+import { IMenuItem, INodeUi, ITab, IUpdateInformation } from '../../Interface';
+import {
+	deepCopy,
+	defaultMessageEventBusDestinationOptions,
+	defaultMessageEventBusDestinationWebhookOptions,
+	IDataObject,
+	INodeCredentials,
+	NodeParameterValue,
+	MessageEventBusDestinationTypeNames,
+	MessageEventBusDestinationOptions,
+	defaultMessageEventBusDestinationSyslogOptions,
+	defaultMessageEventBusDestinationSentryOptions,
+} from 'n8n-workflow';
+import Vue from 'vue';
+import { LOG_STREAM_MODAL_KEY } from '../../constants';
+import Modal from '@/components/Modal.vue';
+import { showMessage } from '@/mixins/showMessage';
+import { useUIStore } from '../../stores/ui';
+import { useUsersStore } from '../../stores/users';
+import { destinationToFakeINodeUi, saveDestinationToDb, sendTestMessage } from './Helpers.ee';
+import {
+	webhookModalDescription,
+	sentryModalDescription,
+	syslogModalDescription,
+} from './descriptions.ee';
+import { BaseTextKey } from '../../plugins/i18n';
+import InlineNameEdit from '../InlineNameEdit.vue';
+import SaveButton from '../SaveButton.vue';
+import EventSelection from '@/components/SettingsLogStreaming/EventSelection.ee.vue';
+import { Checkbox } from 'element-ui';
+
+export default mixins(showMessage, restApi).extend({
+	name: 'event-destination-settings-modal',
+	props: {
+		modalName: String,
+		destination: {
+			type: Object,
+			default: () => deepCopy(defaultMessageEventBusDestinationOptions),
+		},
+		isNew: Boolean,
+		eventBus: {
+			type: Vue,
+		},
+	},
+	components: {
+		Modal,
+		ParameterInputList,
+		NodeCredentials,
+		InlineNameEdit,
+		SaveButton,
+		EventSelection,
+		Checkbox,
+	},
+	data() {
+		return {
+			unchanged: !this.$props.isNew,
+			activeTab: 'settings',
+			hasOnceBeenSaved: !this.$props.isNew,
+			isSaving: false,
+			isDeleting: false,
+			loading: false,
+			showRemoveConfirm: false,
+			typeSelectValue: '',
+			typeSelectPlaceholder: 'Destination Type',
+			nodeParameters: deepCopy(defaultMessageEventBusDestinationOptions),
+			webhookDescription: webhookModalDescription,
+			sentryDescription: sentryModalDescription,
+			syslogDescription: syslogModalDescription,
+			modalBus: new Vue(),
+			headerLabel: this.$props.destination.label,
+			testMessageSent: false,
+			testMessageResult: false,
+			isInstanceOwner: false,
+			LOG_STREAM_MODAL_KEY,
+		};
+	},
+	computed: {
+		...mapStores(useUIStore, useUsersStore, useLogStreamingStore, useNDVStore, useWorkflowsStore),
+		typeSelectOptions(): Array<{ value: string; label: BaseTextKey }> {
+			const options: Array<{ value: string; label: BaseTextKey }> = [];
+			for (const t of Object.values(MessageEventBusDestinationTypeNames)) {
+				if (t === MessageEventBusDestinationTypeNames.abstract) {
+					continue;
+				}
+				options.push({
+					value: t,
+					label: `settings.log-streaming.${t}` as BaseTextKey,
+				});
+			}
+			return options;
+		},
+		isTypeAbstract(): boolean {
+			return this.nodeParameters.__type === MessageEventBusDestinationTypeNames.abstract;
+		},
+		isTypeWebhook(): boolean {
+			return this.nodeParameters.__type === MessageEventBusDestinationTypeNames.webhook;
+		},
+		isTypeSyslog(): boolean {
+			return this.nodeParameters.__type === MessageEventBusDestinationTypeNames.syslog;
+		},
+		isTypeSentry(): boolean {
+			return this.nodeParameters.__type === MessageEventBusDestinationTypeNames.sentry;
+		},
+		node(): INodeUi {
+			return destinationToFakeINodeUi(this.nodeParameters);
+		},
+		typeLabelName(): BaseTextKey {
+			return `settings.log-streaming.${this.nodeParameters.__type}` as BaseTextKey;
+		},
+		sidebarItems(): IMenuItem[] {
+			const items: IMenuItem[] = [
+				{
+					id: 'settings',
+					label: this.$locale.baseText('settings.log-streaming.tab.settings'),
+					position: 'top',
+				},
+			];
+			if (!this.isTypeAbstract) {
+				items.push({
+					id: 'events',
+					label: this.$locale.baseText('settings.log-streaming.tab.events'),
+					position: 'top',
+				});
+			}
+			return items;
+		},
+		tabItems(): ITab[] {
+			return [
+				{
+					label: this.$locale.baseText('settings.log-streaming.tab.settings'),
+					value: 'settings',
+				},
+				{
+					label: this.$locale.baseText('settings.log-streaming.tab.events'),
+					value: 'events',
+				},
+			];
+		},
+	},
+	mounted() {
+		this.isInstanceOwner = this.usersStore.currentUser?.globalRole?.name === 'owner';
+		this.setupNode(
+			Object.assign(deepCopy(defaultMessageEventBusDestinationOptions), this.destination),
+		);
+		this.workflowsStore.$onAction(
+			({
+				name, // name of the action
+				args, // array of parameters passed to the action
+			}) => {
+				if (name === 'updateNodeProperties') {
+					for (const arg of args) {
+						if (arg.name === this.destination.id) {
+							if ('credentials' in arg.properties) {
+								this.unchanged = false;
+								this.nodeParameters.credentials = arg.properties.credentials as INodeCredentials;
+							}
+						}
+					}
+				}
+			},
+		);
+	},
+	methods: {
+		onInput() {
+			this.unchanged = false;
+			this.testMessageSent = false;
+		},
+		onTabSelect(tab: string) {
+			this.activeTab = tab;
+		},
+		onLabelChange(value: string) {
+			this.onInput();
+			this.headerLabel = value;
+			this.nodeParameters.label = value;
+		},
+		setupNode(options: MessageEventBusDestinationOptions) {
+			this.workflowsStore.removeNode(this.node);
+			this.ndvStore.activeNodeName = options.id ?? 'thisshouldnothappen';
+			this.workflowsStore.addNode(destinationToFakeINodeUi(options));
+			this.nodeParameters = options;
+			this.logStreamingStore.items[this.destination.id].destination = options;
+		},
+		onTypeSelectInput(destinationType: MessageEventBusDestinationTypeNames) {
+			this.typeSelectValue = destinationType;
+		},
+		onContinueAddClicked() {
+			let newDestination;
+			switch (this.typeSelectValue) {
+				case MessageEventBusDestinationTypeNames.syslog:
+					newDestination = Object.assign(deepCopy(defaultMessageEventBusDestinationSyslogOptions), {
+						id: this.destination.id,
+					});
+					break;
+				case MessageEventBusDestinationTypeNames.sentry:
+					newDestination = Object.assign(deepCopy(defaultMessageEventBusDestinationSentryOptions), {
+						id: this.destination.id,
+					});
+					break;
+				case MessageEventBusDestinationTypeNames.webhook:
+					newDestination = Object.assign(
+						deepCopy(defaultMessageEventBusDestinationWebhookOptions),
+						{ id: this.destination.id },
+					);
+					break;
+			}
+			if (newDestination) {
+				this.headerLabel = newDestination?.label ?? this.headerLabel;
+				this.setupNode(newDestination);
+			}
+		},
+		valueChanged(parameterData: IUpdateInformation) {
+			this.unchanged = false;
+			this.testMessageSent = false;
+			const newValue: NodeParameterValue = parameterData.value as string | number;
+			const parameterPath = parameterData.name.startsWith('parameters.')
+				? parameterData.name.split('.').slice(1).join('.')
+				: parameterData.name;
+
+			const nodeParameters = deepCopy(this.nodeParameters);
+
+			// Check if the path is supposed to change an array and if so get
+			// the needed data like path and index
+			const parameterPathArray = parameterPath.match(/(.*)\[(\d+)\]$/);
+
+			// Apply the new value
+			if (parameterData.value === undefined && parameterPathArray !== null) {
+				// Delete array item
+				const path = parameterPathArray[1];
+				const index = parameterPathArray[2];
+				const data = get(nodeParameters, path);
+
+				if (Array.isArray(data)) {
+					data.splice(parseInt(index, 10), 1);
+					Vue.set(nodeParameters, path, data);
+				}
+			} else {
+				if (newValue === undefined) {
+					unset(nodeParameters, parameterPath);
+				} else {
+					set(nodeParameters, parameterPath, newValue);
+				}
+			}
+
+			this.nodeParameters = deepCopy(nodeParameters);
+			this.workflowsStore.updateNodeProperties({
+				name: this.node.name,
+				properties: { parameters: this.nodeParameters as unknown as IDataObject },
+			});
+			this.logStreamingStore.updateDestination(this.nodeParameters);
+		},
+		async sendTestEvent() {
+			this.testMessageResult = await sendTestMessage(this.restApi(), this.nodeParameters);
+			this.testMessageSent = true;
+		},
+		async removeThis() {
+			const deleteConfirmed = await this.confirmMessage(
+				this.$locale.baseText('settings.log-streaming.destinationDelete.message', {
+					interpolate: { destinationName: this.destination.label },
+				}),
+				this.$locale.baseText('settings.log-streaming.destinationDelete.headline'),
+				'warning',
+				this.$locale.baseText('settings.log-streaming.destinationDelete.confirmButtonText'),
+				this.$locale.baseText('settings.log-streaming.destinationDelete.cancelButtonText'),
+			);
+
+			if (deleteConfirmed === false) {
+				return;
+			} else {
+				this.$props.eventBus.$emit('remove', this.destination.id);
+				this.uiStore.closeModal(LOG_STREAM_MODAL_KEY);
+				this.uiStore.stateIsDirty = false;
+			}
+		},
+		onModalClose() {
+			if (!this.hasOnceBeenSaved) {
+				this.workflowsStore.removeNode(this.node);
+				this.logStreamingStore.removeDestination(this.nodeParameters.id!);
+			}
+			this.ndvStore.activeNodeName = null;
+			this.$props.eventBus.$emit('closing', this.destination.id);
+			this.uiStore.stateIsDirty = false;
+		},
+		async saveDestination() {
+			if (this.unchanged || !this.destination.id) {
+				return;
+			}
+			await saveDestinationToDb(this.restApi(), this.nodeParameters);
+			this.hasOnceBeenSaved = true;
+			this.testMessageSent = false;
+			this.unchanged = true;
+			this.$props.eventBus.$emit('destinationWasSaved', this.destination.id);
+			this.uiStore.stateIsDirty = false;
+		},
+	},
+});
+</script>
+
+<style lang="scss" module>
+.labelMargins {
+	margin-bottom: 1em;
+	margin-top: 1em;
+}
+.typeSelector {
+	width: 100%;
+	margin-bottom: 1em;
+	margin-top: 1em;
+}
+
+.sidebarSwitches {
+	margin-left: 1.5em;
+	margin-bottom: 0.5em;
+	span {
+		color: var(--color-text-dark) !important;
+	}
+}
+
+.tabbar {
+	margin-bottom: 1em;
+}
+
+.mainContent {
+	flex: 1;
+	overflow: auto;
+	padding-left: 1em;
+	padding-right: 1em;
+	padding-bottom: 2em;
+}
+
+.sidebar {
+	padding-top: 1em;
+	max-width: 170px;
+	min-width: 170px;
+	margin-right: var(--spacing-l);
+	flex-grow: 1;
+
+	ul {
+		padding: 0 !important;
+	}
+}
+
+.cardTitle {
+	font-size: 14px;
+	font-weight: bold;
+}
+
+.header {
+	display: flex;
+	min-height: 61px;
+}
+
+.headerCreate {
+	display: flex;
+	font-size: 20px;
+}
+
+.container {
+	display: flex;
+	height: 100%;
+}
+
+.destinationInfo {
+	display: flex;
+	align-items: center;
+	flex-direction: row;
+	flex-grow: 1;
+	margin-bottom: var(--spacing-l);
+}
+
+.destinationActions {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	margin-right: var(--spacing-xl);
+	margin-bottom: var(--spacing-l);
+
+	> * {
+		margin-left: var(--spacing-2xs);
+	}
+}
+</style>

packages/editor-ui/src/components/SettingsLogStreaming/EventSelection.ee.vue

@@ -0,0 +1,162 @@
+<template>
+	<div>
+		<div
+			v-for="group in logStreamingStore.items[destinationId]?.eventGroups"
+			:key="group.name"
+			shadow="never"
+		>
+			<!-- <template #header> -->
+			<checkbox
+				:value="group.selected"
+				:indeterminate="!group.selected && group.indeterminate"
+				@input="onInput"
+				@change="onCheckboxChecked(group.name, $event)"
+				:disabled="readonly"
+			>
+				<strong>{{ groupLabelName(group.name) }}</strong>
+				<n8n-tooltip
+					v-if="groupLabelInfo(group.name)"
+					placement="top"
+					:popper-class="$style.tooltipPopper"
+					class="ml-xs"
+				>
+					<n8n-icon icon="question-circle" size="small" />
+					<template #content>
+						{{ groupLabelInfo(group.name) }}
+					</template>
+				</n8n-tooltip>
+			</checkbox>
+			<checkbox
+				v-if="group.name === 'n8n.audit'"
+				:value="logStreamingStore.items[destinationId]?.destination.anonymizeAuditMessages"
+				@input="onInput"
+				@change="anonymizeAuditMessagesChanged"
+				:disabled="readonly"
+			>
+				{{ $locale.baseText('settings.log-streaming.tab.events.anonymize') }}
+				<n8n-tooltip placement="top" :popper-class="$style.tooltipPopper">
+					<n8n-icon icon="question-circle" size="small" />
+					<template #content>
+						{{ $locale.baseText('settings.log-streaming.tab.events.anonymize.info') }}
+					</template>
+				</n8n-tooltip>
+			</checkbox>
+			<!-- </template> -->
+			<ul :class="$style.eventList">
+				<li
+					v-for="event in group.children"
+					:key="event.name"
+					:class="`${$style.eventListItem} ${group.selected ? $style.eventListItemDisabled : ''}`"
+				>
+					<checkbox
+						:value="event.selected || group.selected"
+						:indeterminate="event.indeterminate"
+						:disabled="group.selected || readonly"
+						@input="onInput"
+						@change="onCheckboxChecked(event.name, $event)"
+					>
+						{{ event.label }}
+						<n8n-tooltip placement="top" :popper-class="$style.tooltipPopper">
+							<template #content>
+								{{ event.name }}
+							</template>
+						</n8n-tooltip>
+					</checkbox>
+				</li>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { Checkbox } from 'element-ui';
+import { mapStores } from 'pinia';
+import { BaseTextKey } from '../../plugins/i18n';
+import { useLogStreamingStore } from '../../stores/logStreamingStore';
+
+export default {
+	name: 'event-selection',
+	props: {
+		destinationId: {
+			type: String,
+			default: 'defaultDestinationId',
+		},
+		readonly: Boolean,
+	},
+	components: {
+		Checkbox,
+	},
+	data() {
+		return {
+			unchanged: true,
+		};
+	},
+	computed: {
+		...mapStores(useLogStreamingStore),
+		anonymizeAuditMessages() {
+			return this.logStreamingStore.items[this.destinationId]?.destination.anonymizeAuditMessages;
+		},
+	},
+	methods: {
+		onInput() {
+			this.$emit('input');
+		},
+		onCheckboxChecked(eventName: string, checked: boolean) {
+			this.logStreamingStore.setSelectedInGroup(this.destinationId, eventName, checked);
+			this.$forceUpdate();
+		},
+		anonymizeAuditMessagesChanged(value: boolean) {
+			this.logStreamingStore.items[this.destinationId].destination.anonymizeAuditMessages = value;
+			this.$emit('change', { name: 'anonymizeAuditMessages', node: this.destinationId, value });
+			this.$forceUpdate();
+		},
+		groupLabelName(t: string): string {
+			return this.$locale.baseText(`settings.log-streaming.eventGroup.${t}` as BaseTextKey) ?? t;
+		},
+		groupLabelInfo(t: string): string | undefined {
+			const labelInfo = `settings.log-streaming.eventGroup.${t}.info`;
+			const infoText = this.$locale.baseText(labelInfo as BaseTextKey);
+			if (infoText === labelInfo || infoText === '') return;
+			return infoText;
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+.eventListCard {
+	margin-left: 1em;
+}
+
+.eventList {
+	height: auto;
+	overflow-y: auto;
+	padding: 0;
+	margin: 0;
+	list-style: none;
+}
+.eventList .eventListItem {
+	display: flex;
+	align-items: center;
+	justify-content: left;
+	margin: 10px;
+	color: var(--el-color-primary);
+}
+
+.eventListItemDisabled > {
+	label > {
+		span > {
+			span {
+				background-color: transparent !important;
+				&:after {
+					border-color: rgb(54, 54, 54) !important;
+				}
+			}
+		}
+	}
+}
+
+.eventList .eventListItem + .listItem {
+	margin-top: 10px;
+}
+</style>

packages/editor-ui/src/components/SettingsLogStreaming/Helpers.ee.ts

@@ -0,0 +1,58 @@
+import { INodeCredentials, INodeParameters, MessageEventBusDestinationOptions } from 'n8n-workflow';
+import { INodeUi, IRestApi } from '../../Interface';
+import { useLogStreamingStore } from '../../stores/logStreamingStore';
+
+export function destinationToFakeINodeUi(
+	destination: MessageEventBusDestinationOptions,
+	fakeType = 'n8n-nodes-base.stickyNote',
+): INodeUi {
+	return {
+		id: destination.id,
+		name: destination.id,
+		typeVersion: 1,
+		type: fakeType,
+		position: [0, 0],
+		credentials: {
+			...(destination.credentials as INodeCredentials),
+		},
+		parameters: {
+			...(destination as unknown as INodeParameters),
+		},
+	} as INodeUi;
+}
+
+export async function saveDestinationToDb(
+	restApi: IRestApi,
+	destination: MessageEventBusDestinationOptions,
+) {
+	const logStreamingStore = useLogStreamingStore();
+	if (destination.id) {
+		const data: MessageEventBusDestinationOptions = {
+			...destination,
+			subscribedEvents: logStreamingStore.getSelectedEvents(destination.id),
+		};
+		try {
+			await restApi.makeRestApiRequest('POST', '/eventbus/destination', data);
+		} catch (error) {
+			console.log(error);
+		}
+		logStreamingStore.updateDestination(destination);
+	}
+}
+
+export async function sendTestMessage(
+	restApi: IRestApi,
+	destination: MessageEventBusDestinationOptions,
+) {
+	if (destination.id) {
+		try {
+			const sendResult = await restApi.makeRestApiRequest('GET', '/eventbus/testmessage', {
+				id: destination.id,
+			});
+			return sendResult;
+		} catch (error) {
+			console.log(error);
+		}
+		return false;
+	}
+}

packages/editor-ui/src/components/SettingsLogStreaming/descriptions.ee.ts

@@ -0,0 +1,479 @@
+import { INodeProperties } from 'n8n-workflow';
+
+export const webhookModalDescription = [
+	{
+		displayName: 'Method',
+		name: 'method',
+		noDataExpression: true,
+		type: 'options',
+		options: [
+			{
+				name: 'GET',
+				value: 'GET',
+			},
+			{
+				name: 'POST',
+				value: 'POST',
+			},
+			{
+				name: 'PUT',
+				value: 'PUT',
+			},
+		],
+		default: 'POST',
+		description: 'The request method to use',
+	},
+	{
+		displayName: 'URL',
+		name: 'url',
+		type: 'string',
+		noDataExpression: true,
+		default: '',
+		placeholder: 'http://example.com/index.html',
+		description: 'The URL to make the request to',
+	},
+	// TODO: commented out until required and implemented on backend
+	// {
+	// 	displayName: 'Authentication',
+	// 	name: 'authentication',
+	// 	noDataExpression: true,
+	// 	type: 'options',
+	// 	options: [
+	// 		{
+	// 			name: 'None',
+	// 			value: 'none',
+	// 		},
+	// 		// {
+	// 		// 	name: 'Predefined Credential Type',
+	// 		// 	value: 'predefinedCredentialType',
+	// 		// 	description:
+	// 		// 		"We've already implemented auth for many services so that you don't have to set it up manually",
+	// 		// },
+	// 		{
+	// 			name: 'Generic Credential Type',
+	// 			value: 'genericCredentialType',
+	// 			description: 'Fully customizable. Choose between basic, header, OAuth2, etc.',
+	// 		},
+	// 	],
+	// 	default: 'none',
+	// },
+	// {
+	// 	displayName: 'Credential Type',
+	// 	name: 'nodeCredentialType',
+	// 	type: 'credentialsSelect',
+	// 	noDataExpression: true,
+	// 	default: '',
+	// 	credentialTypes: ['extends:oAuth2Api', 'extends:oAuth1Api', 'has:authenticate'],
+	// 	displayOptions: {
+	// 		show: {
+	// 			authentication: ['predefinedCredentialType'],
+	// 		},
+	// 	},
+	// },
+	{
+		displayName: 'Generic Auth Type (OAuth not supported yet)',
+		name: 'genericAuthType',
+		type: 'credentialsSelect',
+		default: '',
+		credentialTypes: ['has:genericAuth'],
+		displayOptions: {
+			show: {
+				authentication: ['genericCredentialType'],
+			},
+		},
+	},
+	{
+		displayName: 'Add Query Parameters',
+		name: 'sendQuery',
+		type: 'boolean',
+		default: false,
+		noDataExpression: true,
+		description: 'Whether the request has query params or not',
+	},
+	{
+		displayName: 'Specify Query Parameters',
+		name: 'specifyQuery',
+		type: 'options',
+		displayOptions: {
+			show: {
+				sendQuery: [true],
+			},
+		},
+		options: [
+			{
+				name: 'Using Fields Below',
+				value: 'keypair',
+			},
+			{
+				name: 'Using JSON',
+				value: 'json',
+			},
+		],
+		default: 'keypair',
+	},
+	{
+		displayName: 'Add Query Parameters',
+		name: 'queryParameters',
+		type: 'fixedCollection',
+		displayOptions: {
+			show: {
+				sendQuery: [true],
+				specifyQuery: ['keypair'],
+			},
+		},
+		typeOptions: {
+			multipleValues: true,
+		},
+		placeholder: 'Add Parameter',
+		default: {
+			parameters: [
+				{
+					name: '',
+					value: '',
+				},
+			],
+		},
+		options: [
+			{
+				name: 'parameters',
+				displayName: 'Parameter',
+				values: [
+					{
+						displayName: 'Name',
+						name: 'name',
+						type: 'string',
+						default: '',
+					},
+					{
+						displayName: 'Value',
+						name: 'value',
+						type: 'string',
+						default: '',
+					},
+				],
+			},
+		],
+	},
+	{
+		displayName: 'JSON',
+		name: 'jsonQuery',
+		type: 'json',
+		displayOptions: {
+			show: {
+				sendQuery: [true],
+				specifyQuery: ['json'],
+			},
+		},
+		default: '',
+	},
+	{
+		displayName: 'Add Headers',
+		name: 'sendHeaders',
+		type: 'boolean',
+		default: false,
+		noDataExpression: true,
+		description: 'Whether the request has headers or not',
+	},
+	{
+		displayName: 'Specify Headers',
+		name: 'specifyHeaders',
+		type: 'options',
+		displayOptions: {
+			show: {
+				sendHeaders: [true],
+			},
+		},
+		options: [
+			{
+				name: 'Using Fields Below',
+				value: 'keypair',
+			},
+			{
+				name: 'Using JSON',
+				value: 'json',
+			},
+		],
+		default: 'keypair',
+	},
+	{
+		displayName: 'Header Parameters',
+		name: 'headerParameters',
+		type: 'fixedCollection',
+		displayOptions: {
+			show: {
+				sendHeaders: [true],
+				specifyHeaders: ['keypair'],
+			},
+		},
+		typeOptions: {
+			multipleValues: true,
+		},
+		placeholder: 'Add Parameter',
+		default: {
+			parameters: [
+				{
+					name: '',
+					value: '',
+				},
+			],
+		},
+		options: [
+			{
+				name: 'parameters',
+				displayName: 'Parameter',
+				values: [
+					{
+						displayName: 'Name',
+						name: 'name',
+						type: 'string',
+						default: '',
+					},
+					{
+						displayName: 'Value',
+						name: 'value',
+						type: 'string',
+						default: '',
+					},
+				],
+			},
+		],
+	},
+	{
+		displayName: 'JSON',
+		name: 'jsonHeaders',
+		type: 'json',
+		displayOptions: {
+			show: {
+				sendHeaders: [true],
+				specifyHeaders: ['json'],
+			},
+		},
+		default: '',
+	},
+	{
+		displayName: 'Options',
+		name: 'options',
+		type: 'collection',
+		placeholder: 'Add Option',
+		default: {},
+		options: [
+			{
+				displayName: 'Ignore SSL Issues',
+				name: 'allowUnauthorizedCerts',
+				type: 'boolean',
+				noDataExpression: true,
+				default: false,
+				description: 'Whether to ignore SSL certificate validation',
+			},
+			{
+				displayName: 'Array Format in Query Parameters',
+				name: 'queryParameterArrays',
+				type: 'options',
+				displayOptions: {
+					show: {
+						'/sendQuery': [true],
+					},
+				},
+				options: [
+					{
+						name: 'No Brackets',
+						value: 'repeat',
+						description: 'e.g. foo=bar&foo=qux',
+					},
+					{
+						name: 'Brackets Only',
+						value: 'brackets',
+						description: 'e.g. foo[]=bar&foo[]=qux',
+					},
+					{
+						name: 'Brackets with Indices',
+						value: 'indices',
+						description: 'e.g. foo[0]=bar&foo[1]=qux',
+					},
+				],
+				default: 'brackets',
+			},
+			{
+				displayName: 'Redirects',
+				name: 'redirect',
+				placeholder: 'Add Redirect',
+				type: 'fixedCollection',
+				typeOptions: {
+					multipleValues: false,
+				},
+				default: {
+					redirect: {},
+				},
+				options: [
+					{
+						displayName: 'Redirect',
+						name: 'redirect',
+						values: [
+							{
+								displayName: 'Follow Redirects',
+								name: 'followRedirects',
+								type: 'boolean',
+								default: false,
+								noDataExpression: true,
+								description: 'Whether to follow all redirects',
+							},
+							{
+								displayName: 'Max Redirects',
+								name: 'maxRedirects',
+								type: 'number',
+								displayOptions: {
+									show: {
+										followRedirects: [true],
+									},
+								},
+								default: 21,
+								description: 'Max number of redirects to follow',
+							},
+						],
+					},
+				],
+			},
+			{
+				displayName: 'Proxy',
+				name: 'proxy',
+				description: 'Add Proxy',
+				type: 'fixedCollection',
+				typeOptions: {
+					multipleValues: false,
+				},
+				default: {
+					proxy: {},
+				},
+				options: [
+					{
+						displayName: 'Proxy',
+						name: 'proxy',
+						values: [
+							{
+								displayName: 'Protocol',
+								name: 'protocol',
+								type: 'options',
+								default: 'https',
+								options: [
+									{
+										name: 'HTTPS',
+										value: 'https',
+									},
+									{
+										name: 'HTTP',
+										value: 'http',
+									},
+								],
+							},
+							{
+								displayName: 'Host',
+								name: 'host',
+								type: 'string',
+								default: '127.0.0.1',
+								description: 'Proxy Host (without protocol or port)',
+							},
+							{
+								displayName: 'Port',
+								name: 'port',
+								type: 'number',
+								default: 9000,
+								description: 'Proxy Port',
+							},
+						],
+					},
+				],
+			},
+			{
+				displayName: 'Timeout',
+				name: 'timeout',
+				type: 'number',
+				typeOptions: {
+					minValue: 1,
+				},
+				default: 10000,
+				description:
+					'Time in ms to wait for the server to send response headers (and start the response body) before aborting the request',
+			},
+		],
+	},
+] as INodeProperties[];
+
+export const syslogModalDescription = [
+	{
+		displayName: 'Host',
+		name: 'host',
+		type: 'string',
+		default: '127.0.0.1',
+		placeholder: '127.0.0.1',
+		description: 'The IP or host name to make the request to',
+		noDataExpression: true,
+	},
+	{
+		displayName: 'Port',
+		name: 'port',
+		type: 'number',
+		default: '514',
+		placeholder: '514',
+		description: 'The port number to make the request to',
+		noDataExpression: true,
+	},
+	{
+		displayName: 'Protocol',
+		name: 'protocol',
+		type: 'options',
+		options: [
+			{
+				name: 'TCP',
+				value: 'tcp',
+			},
+			{
+				name: 'UDP',
+				value: 'udp',
+			},
+		],
+		default: 'udp',
+		description: 'The protocol to use for the connection',
+	},
+	{
+		displayName: 'Facility',
+		name: 'facility',
+		type: 'options',
+		options: [
+			{ name: 'Kernel', value: 0 },
+			{ name: 'User', value: 1 },
+			{ name: 'System', value: 3 },
+			{ name: 'Audit', value: 13 },
+			{ name: 'Alert', value: 14 },
+			{ name: 'Local0', value: 16 },
+			{ name: 'Local1', value: 17 },
+			{ name: 'Local2', value: 18 },
+			{ name: 'Local3', value: 19 },
+			{ name: 'Local4', value: 20 },
+			{ name: 'Local5', value: 21 },
+			{ name: 'Local6', value: 22 },
+			{ name: 'Local7', value: 23 },
+		],
+		default: '16',
+		description: 'Syslog facility parameter',
+	},
+	{
+		displayName: 'App Name',
+		name: 'app_name',
+		type: 'string',
+		default: 'n8n',
+		placeholder: 'n8n',
+		noDataExpression: true,
+		description: 'Syslog app name parameter',
+	},
+] as INodeProperties[];
+
+export const sentryModalDescription = [
+	{
+		displayName: 'DSN',
+		name: 'dsn',
+		type: 'string',
+		default: 'https://',
+		noDataExpression: true,
+		description: 'Your Sentry DSN Client Key',
+	},
+] as INodeProperties[];

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

@@ -89,6 +89,15 @@ export default mixins(userHelpers, pushConnection).extend({
 				}
 			}
 
+			menuItems.push({
+				id: 'settings-log-streaming',
+				icon: 'sign-in-alt',
+				label: this.$locale.baseText('settings.log-streaming'),
+				position: 'top',
+				available: this.canAccessLogStreamingSettings(),
+				activateOnRouteNames: [VIEWS.LOG_STREAMING_SETTINGS],
+			});
+
 			menuItems.push({
 				id: 'settings-community-nodes',
 				icon: 'cube',
@@ -117,6 +126,9 @@ export default mixins(userHelpers, pushConnection).extend({
 		canAccessApiSettings(): boolean {
 			return this.canUserAccessRouteByName(VIEWS.API_SETTINGS);
 		},
+		canAccessLogStreamingSettings(): boolean {
+			return this.canUserAccessRouteByName(VIEWS.LOG_STREAMING_SETTINGS);
+		},
 		canAccessUsageAndPlan(): boolean {
 			return this.canUserAccessRouteByName(VIEWS.USAGE);
 		},
@@ -143,6 +155,11 @@ export default mixins(userHelpers, pushConnection).extend({
 						this.$router.push({ name: VIEWS.API_SETTINGS });
 					}
 					break;
+				case 'settings-log-streaming':
+					if (this.$router.currentRoute.name !== VIEWS.LOG_STREAMING_SETTINGS) {
+						this.$router.push({ name: VIEWS.LOG_STREAMING_SETTINGS });
+					}
+					break;
 				case 'users': // Fakedoor feature added via hooks when user management is disabled on cloud
 				case 'environments':
 				case 'logging':