n8n/packages/editor-ui/src/plugins/telemetry/index.ts
Alex Grozav dd6a4c956a
feat(editor): Migrate Design System and Editor UI to Vue 3 (#6476)
* feat: remove vue-fragment (no-changelog)

* feat: partial design-system migration

* feat: migrate info-accordion and info-tip components

* feat: migrate several components to vue 3

* feat: migrated several components

* feat: migrate several components

* feat: migrate several components

* feat: migrate several components

* feat: re-exported all design system components

* fix: fix design for popper components

* fix: editor kind of working, lots of issues to fix

* fix: fix several vue 3 migration issues

* fix: replace @change with @update:modelValue in several places

* fix: fix translation linking

* fix: fix inline-edit input

* fix: fix ndv and dialog design

* fix: update parameter input event bindings

* fix: rename deprecated lifecycle methods

* fix: fix json view mapping

* build: update lock file

* fix(editor): revisit last conflict with master and fix issues

* fix(editor): revisit last conflict with master and fix issues

* fix: fix expression editor bug causing code mirror to no longer be reactive

* fix: fix resource locator bug

* fix: fix vue-agile integration

* fix: remove global import for vue-agile

* fix: replace element-plus buttons with n8n-buttons everywhere

* fix(editor): Fix various element-plus styles (#6571)

* fix(editor): Fix various element-plus styles

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>

* Remove debugging code

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>

* Address PR comments

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>

---------

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>

* fix(editor): Fix loading in production mode [Vue 3] (#6578)

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>

* fix(editor): First round of e2e tests fixes with Vue 3 (#6579)

* fix(editor): Fix broken smoke and workflow list e2e tests
* ✔️ Fix failing canvas action tests. Updating some selectors used in credentials and workflow tests

* feat: add vue 3 eslint rules and fix issues

* fix: fix tags-dropdown

* fix: fix white-space issues caused by i18n-t

* fix: rename non-generic click events

* fix: fix search in resources list layout

* fix: fix datatable paginator

* fix: fix popper select caret and dropdown size

* fix: add width to action-dropdown

* fix: fix workflow settings icon not being hidden

* fix: refactor newly added code

* fix: fix merge issue

* fix: fix ndv credentials watcher

* fix: fix workflow saving and grabber notch

* fix: fix nodes list panel transition

* fix: fix node title visibility

* fix: fix data unpinning

* fix: fix value access

* fix: show  input panel only if trigger panel enabled or not trigger node

* fix: fix tags dropdown and executions status spcing

* fix(editor): Prevent execution list to load back when leaving the route (#6697)

fix(editor): prevent execution list to load back when leaving the route

* fix: fix drawer visibility

* fix: fix expression toggle padding

* fix: fix expressions editor styling

* chore: prepare for testing

* fix: fix styling for el-button without patching

* test: fix unit tests in design-system

* test: fix most unit tests

* fix: remove import cycle.

* fix: fix personalization modal tests

* fix further resource mapper test adjustments

* fix: fix multiple tests and n8n-route attr duplication

* fix: fix source control tets

* fix: fixed remaining unit tests

* fix: fix workflows and credentials e2e tests

* fix: fix localizeNodeNames

* fix: update ndv e2e tests

* fix: fix popper left placement arrow

* fix: fix 5-ndv e2e tests

* fix: fix 6-code-node e2e tests

* fix(editor): Drop click outside directive from NodeCreator (#6716)

* fix(editor): Drop click outside directive from NodeCreator

* fix(editor): make sure mouseup outside is unbound at least before the component is unmounted

* fix: fix 10-settings-log-streaming e2e tests

* fix: fix node redrawing

* fix: fix tooltip buttons styling

* fix: fix varous e2e suites

* fix: fix 15-scheduler-node e2e suite

* fix: fix route watcher

* fix: fixed param name update and credential edit

* feat: update event names

* refactor: Remove deprecated `$data` (#6576)

Co-authored-by: Alex Grozav <alex@grozav.com>

* fix: fix 17-sharing e2e suite

* fix: fix tags dropdown

* fix: fix tags manager

* fix(editor): move :deep selectors to a separate scoped style block

* fix: fix sticky component and inline text edit

* fix: update e2e tests

* fix: remove button override references

* fix(editor): Adjust spacing in templates for Vue 3 (#6744)

* fix(editor): Adjust spacing in templates

* fix: Undo unneeded change

* fix: Undo unneeded change

* fix(editor): Adjust NDV height for Vue 3 (#6742)

fix(editor): Adjust NDV height

* fix(editor): Restore collapsed sidebar items for Vue 3 (#6743)

fix(editor): Restore collapsed sidebar items

* fix: fix linting issues

* fix: fix design-system deps

* fix: post-merge fixes

* fix: update tests

* fix: increase timeout for executionslist tets

* chore: fix linting issue

* fix: fix 14-mapping e2e tests in ci

* fix: re-enable tests

* fix: fix workflow duplication e2e tests after tags update

* fix(editor): Change component prop to be typed

* fix: fix tags dropdown in duplicate wf modal

* fix: fix focus behaviour in tags selector

* fix: fix tag creation

* fix: fix log streaming e2e race condition

* fix(editor): Fix Vue 3 linting issues (#6748)

* fix(editor): Fix Vue 3 linting issues

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>

* fix MainSidebar linter issues

* revert pnpm lock

* update pnpm lock file

---------

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
Co-authored-by: Alex Grozav <alex@grozav.com>

* fix(editor): Some css fixes for vue3 branch (#6749)

*  Fixing filter button height

*  Update input modal button position

*  Updating tags styling

*  Fix event logging settings spacing

* 👕 Fixing lint errors

* fix: fix linting issues

* Revert to `// eslint-disable-next-line @typescript-eslint/no-misused-promises` disabling of mixins init

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>

* fix: fix css issue

* fix(editor): Lint fix

* fix(editor): Fix settings initialisation (#6750)

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>

* fix: fix initial settings loading

* fix: replace realClick with click force

* fix: fix randomly failing mapping e2e tests

* fix(editor): Fix menu item event handling

* fix: fix resource filters dropdown events (#6752)

* fix: fix resource filters dropdown events

* fix: remove teleported:false

* fix: fix event selection event naming (#6753)

* fix: removed console.log (#6754)

* fix: rever await nextTick changes

* fix: redo linting changes

* fix(editor): Redraw node connections if adding more than one node to canvas (#6755)

* fix(editor): Redraw node connections if adding more than one node to canvas

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>

* Update position before connection two nodes

* Lint fix

---------

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
Co-authored-by: Alex Grozav <alex@grozav.com>

* fix(editor): Fix `ResourceMapper` unit tests (#6758)

* ✔️ Fix matching columns test

* ✔️ Fix multiple matching columns test

* ✔️ Removing `skip` from the last test

* fix: Allow pasting a big workflow (#6760)

* fix: pasting a big workflow

* chore: update comment

* refactor: move try/catch to function

* refactor: move try/catch to function

* fix(editor): Fix modal layer width

* fix: fix position changes

* fix: undo it.only

* fix: make undo/redo multiple steps more verbose

* fix: Fix value survey styles (#6764)

* fix: fix value survey styles

* fix: lint

* Revert "fix: lint"

72869c431f

* fix: lint

* fix(editor): Fix collapsed sub menu

* fix: Fix drawer animation (#6767)

fix: drawer animation

* fix(editor): Fix source control buttons (#6769)

* fix(editor): Fix App loading & auth  (#6768)

* fix(editor): Fix App loading & auth

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>

* Await promises

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>

* Fix eslint error

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>

---------

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>

---------

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
Co-authored-by: Csaba Tuncsik <csaba@n8n.io>
Co-authored-by: OlegIvaniv <me@olegivaniv.com>
Co-authored-by: Milorad FIlipović <milorad@n8n.io>
Co-authored-by: Iván Ovejero <ivov.src@gmail.com>
Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
2023-07-28 09:51:07 +02:00

291 lines
8.2 KiB
TypeScript

import type { Plugin } from 'vue';
import type { ITelemetrySettings, ITelemetryTrackProperties, IDataObject } from 'n8n-workflow';
import type { RouteLocation } from 'vue-router';
import type { INodeCreateElement, IUpdateInformation } from '@/Interface';
import type { IUserNodesPanelSession } from './telemetry.types';
import { useSettingsStore } from '@/stores/settings.store';
import { useRootStore } from '@/stores/n8nRoot.store';
import { useTelemetryStore } from '@/stores/telemetry.store';
import { SLACK_NODE_TYPE } from '@/constants';
export class Telemetry {
private pageEventQueue: Array<{ route: RouteLocation }>;
private previousPath: string;
private get rudderStack() {
return window.rudderanalytics;
}
private userNodesPanelSession: IUserNodesPanelSession = {
sessionId: '',
data: {
nodeFilter: '',
resultsNodes: [],
filterMode: 'Regular',
},
};
constructor() {
this.pageEventQueue = [];
this.previousPath = '';
}
init(
telemetrySettings: ITelemetrySettings,
{
instanceId,
userId,
versionCli,
}: {
instanceId: string;
userId?: string;
versionCli: string;
},
) {
if (!telemetrySettings.enabled || !telemetrySettings.config || this.rudderStack) return;
const {
config: { key, url },
} = telemetrySettings;
const settingsStore = useSettingsStore();
const rootStore = useRootStore();
const logLevel = settingsStore.logLevel;
const logging = logLevel === 'debug' ? { logLevel: 'DEBUG' } : {};
this.initRudderStack(key, url, {
integrations: { All: false },
loadIntegration: false,
configUrl: 'https://api-rs.n8n.io',
...logging,
});
useTelemetryStore().init(this);
this.identify(instanceId, userId, versionCli);
this.flushPageEvents();
this.track('Session started', { session_id: rootStore.sessionId });
}
identify(instanceId: string, userId?: string, versionCli?: string) {
const traits = { instance_id: instanceId, version_cli: versionCli };
if (userId) {
this.rudderStack.identify(`${instanceId}#${userId}`, traits);
} else {
this.rudderStack.reset();
}
}
track(event: string, properties?: ITelemetryTrackProperties) {
if (!this.rudderStack) return;
const updatedProperties = {
...properties,
version_cli: useRootStore().versionCli,
};
this.rudderStack.track(event, updatedProperties);
}
page(route: Route) {
if (this.rudderStack) {
if (route.path === this.previousPath) {
// avoid duplicate requests query is changed for example on search page
return;
}
this.previousPath = route.path;
const pageName = route.name;
let properties: { [key: string]: string } = {};
if (
route.meta &&
route.meta.telemetry &&
typeof route.meta.telemetry.getProperties === 'function'
) {
properties = route.meta.telemetry.getProperties(route);
}
const category =
(route.meta && route.meta.telemetry && route.meta.telemetry.pageCategory) || 'Editor';
this.rudderStack.page(category, pageName!, properties);
} else {
this.pageEventQueue.push({
route,
});
}
}
flushPageEvents() {
const queue = this.pageEventQueue;
this.pageEventQueue = [];
queue.forEach(({ route }) => {
this.page(route);
});
}
trackNodesPanel(event: string, properties: IDataObject = {}) {
if (this.rudderStack) {
properties.nodes_panel_session_id = this.userNodesPanelSession.sessionId;
switch (event) {
case 'nodeView.createNodeActiveChanged':
if (properties.createNodeActive !== false) {
this.resetNodesPanelSession();
properties.nodes_panel_session_id = this.userNodesPanelSession.sessionId;
this.track('User opened nodes panel', properties);
}
break;
case 'nodeCreateList.destroyed':
if (
this.userNodesPanelSession.data.nodeFilter.length > 0 &&
this.userNodesPanelSession.data.nodeFilter !== ''
) {
this.track('User entered nodes panel search term', this.generateNodesPanelEvent());
}
break;
case 'nodeCreateList.nodeFilterChanged':
if (
(properties.newValue as string).length === 0 &&
this.userNodesPanelSession.data.nodeFilter.length > 0
) {
this.track('User entered nodes panel search term', this.generateNodesPanelEvent());
}
if (
(properties.newValue as string).length > ((properties.oldValue as string) || '').length
) {
this.userNodesPanelSession.data.nodeFilter = properties.newValue as string;
this.userNodesPanelSession.data.resultsNodes = (
(properties.filteredNodes || []) as INodeCreateElement[]
).map((node: INodeCreateElement) => node.key);
}
break;
case 'nodeCreateList.onCategoryExpanded':
properties.is_subcategory = false;
properties.nodes_panel_session_id = this.userNodesPanelSession.sessionId;
this.track('User viewed node category', properties);
break;
case 'nodeCreateList.onViewActions':
properties.nodes_panel_session_id = this.userNodesPanelSession.sessionId;
this.track('User viewed node actions', properties);
break;
case 'nodeCreateList.onActionsCustmAPIClicked':
properties.nodes_panel_session_id = this.userNodesPanelSession.sessionId;
this.track('User clicked custom API from node actions', properties);
break;
case 'nodeCreateList.addAction':
properties.nodes_panel_session_id = this.userNodesPanelSession.sessionId;
this.track('User added action', properties);
break;
case 'nodeCreateList.onSubcategorySelected':
properties.category_name = properties.subcategory;
properties.is_subcategory = true;
properties.nodes_panel_session_id = this.userNodesPanelSession.sessionId;
delete properties.selected;
this.track('User viewed node category', properties);
break;
case 'nodeView.addNodeButton':
this.track('User added node to workflow canvas', properties);
break;
case 'nodeView.addSticky':
this.track('User inserted workflow note', properties);
break;
default:
break;
}
}
}
// We currently do not support tracking directly from within node implementation
// so we are using this method as centralized way to track node parameters changes
trackNodeParametersValuesChange(nodeType: string, change: IUpdateInformation) {
if (this.rudderStack) {
switch (nodeType) {
case SLACK_NODE_TYPE:
if (change.name === 'parameters.includeLinkToWorkflow') {
this.track('User toggled n8n reference option');
}
break;
default:
break;
}
}
}
private resetNodesPanelSession() {
this.userNodesPanelSession.sessionId = `nodes_panel_session_${new Date().valueOf()}`;
this.userNodesPanelSession.data = {
nodeFilter: '',
resultsNodes: [],
filterMode: 'All',
};
}
private generateNodesPanelEvent() {
return {
search_string: this.userNodesPanelSession.data.nodeFilter,
results_count: this.userNodesPanelSession.data.resultsNodes.length,
filter_mode: this.userNodesPanelSession.data.filterMode,
nodes_panel_session_id: this.userNodesPanelSession.sessionId,
};
}
private initRudderStack(key: string, url: string, options: IDataObject) {
window.rudderanalytics = window.rudderanalytics || [];
this.rudderStack.methods = [
'load',
'page',
'track',
'identify',
'alias',
'group',
'ready',
'reset',
'getAnonymousId',
'setAnonymousId',
];
this.rudderStack.factory = (method: string) => {
return (...args: unknown[]) => {
const argsCopy = [method, ...args];
this.rudderStack.push(argsCopy);
return this.rudderStack;
};
};
for (const method of this.rudderStack.methods) {
this.rudderStack[method] = this.rudderStack.factory(method);
}
this.rudderStack.loadJS = () => {
const script = document.createElement('script');
script.type = 'text/javascript';
script.async = !0;
script.src = 'https://cdn-rs.n8n.io/v1/ra.min.js';
const element: Element = document.getElementsByTagName('script')[0];
if (element && element.parentNode) {
element.parentNode.insertBefore(script, element);
}
};
this.rudderStack.loadJS();
this.rudderStack.load(key, url, options);
}
}
export const telemetry = new Telemetry();
export const TelemetryPlugin: Plugin<{}> = {
install(app) {
app.config.globalProperties.$telemetry = telemetry;
},
};