Files
Automata/packages/workflow/src/TelemetryHelpers.ts
Alex Grozav 15693b0056 feat(editor): Add data pinning functionality (#3511)
* feat: Design system color improvements and button component redesign.

* feat: Added button focus state and unit tests.

* refactor: Aligned n8n-button usage inside of editor-ui.

* test: Updated snapshots.

* refactor: Extracted focus outline width into scss variable.

* fix: Fixed select input border-radius.

* refactor: Removed element-ui references in button.

* fix: Fixed scss variable imports.

* feat: Added color-neutral variable story.

* fix: Fixed color-secondary variable definition.

* feat: Added color-white story.

* test: Updated button snapshot.

* feat: Replaced zoom buttons with new n8n-icon-button.

* feat: Added stories for float utilities.

* chore: Updated color shades generation code for later use.

* chore: Removed color-white code.

* chore: Updated story properties for button components.

* fix: Added el-button fallback for places where el-button is not replaceable (messagebox).

* feat: Reverted to css modules. Replaced el-button with n8n-button at application level.

* test: Updated button snapshot.

* fix: Fixed element-ui locally referenced buttons (via components: {}).

* fix: Updated colors. Removed irrelevant validation. Added ElButton override component.

* test: Updated button override snapshot.

* fix: Various button adjustments and fixes.

* fix: Updated button disabled state.

* test: Updated snapshots.

* fix: Consolidated css variables changes.

* Data pinning (#3512)

* refactor: Aligned n8n-button usage inside of editor-ui.

* feat: Added edit data button on json hover.

* feat: Extracted code editor into separate form component.

* feat: Added edit data button on json hover.

* feat: Added pinData and edit mode methods.

* 🔥 Remove conflict markers

* ✏️ Update i18n keys

*  Add JSON validation

* 🗃️ Add `pinData` column to `workflow_entity`

* 📘 Tighten type

*  Make `pinData` column nullable

*  Adjust workflow endpoints for pin data

* 📘 Improve types

* ✏️ Improve wording

* Inject pindata into items flow (#3420)

*  Inject pin data - Second approach

* 🔥 Remove unneeded lint exception

* feat: Added edit data button on json hover.

* feat: Extracted code editor into separate form component.

* feat: Added edit data button on json hover.

* fix: Fixed rebase conflicts.

*  Undo button change

* 🐛 Fix runNode call

Adjust per update in bdb84130d6

* 🧪 Fix workflow tests

* 🐛 More merge conflict fixes

* feat: Added pin/unpin button and store mutations.

* feat: Size check. Various design and ux improvements.

*  Add transformer

*  Hoist pin data

*  Adjust endpoints for hoisted pin data

* 📘 Expand interface

* 🐛 Fix stray array

* 👕 Fix build

* 👕 Add lint exception

* 👕 Fix header

* 🎨 Add color secondary tints

*  Create `HeaderMessage` component

*  Adjust `InfoTip` component

*  Add `HeaderMessage` to `RunData`

* 🐛 Fix console error

* 👕 Fix lint

*  Consolidate `HeaderMessage` and `Callout`

*  Undo `InfoTip` changes

* 🔥 Remove duplicate icons

*  Simplify template

* 🎨 Change cursor for action text

* 👕 Fix lint

*  Add URL

* 🐛 Fix handler name

*  Use constant

* ♻️ Refactor per feedback

* fix: Various fixes after data pinning relocation.

* fix: Added store mutation for setting pinned data.

* feat: Added pinned state for workflow canvas node.

* fix: Fixed workflow saving.

* fix: Removed pinData hoisting (no longer necessary).

* feat: Added canPinData flag to hide for input pane and binary data. Fixed unpin and execute flow.

*  Fixes for canvas pin data (#3587)

*  Fixes for canvas pin data

* 📘 Rename type

* 🧪 Fix unrelated Public API test

* 🔥 Remove logging

* feat: Updated pinData mixin to no longer include extra fields.

*  Output same pindata for every run

* 🎨 Fix cropping

* 🔥 Remove unrelated logging

* feat: Moved edit button next to pin button.

* feat: Changed data to be inserted for empty state.

* chore: Changed invalid editor output translation.

* feat: Added error line reporting on JSON Validation.

* feat: Migrated pinData edit mode to store.

* chore: Merged duplicate node border color condition.

* feat: Moved pin data validation to mixin. Added check before closing ndv modal.

* fix: Changed pinned data size calculation to discard active node pin data.

* feat: Added support for rename and delete node with pin data.

* feat: Simplified editing state. Fixed edit mode in input panel after store migration.

* feat: Various data pinning improvements.

* fix: Fixed callout link underline.

* refactor: Added support for both string and objects for data size check.

* feat: Added disabled node check for input panel. Fixed monaco editor resizing.

* fix: Fixed edit mode footer size.

*  Fix pindata items per run

* 👕 Remove unneeded exception

* refactor: Added isValidPinData() helper method.

* refactor: Changed how string size in bytes in calculated.g

* refactor: Updated pinData mixin interface.

* refactor: Merged filter and reduce in pinDataSize calculation.

* fix: Changed code-editor to correct type.

* fix: Added insert test data message to trigger nodes.

* feat: Disabled data pinning for multiple output nodes.

* refactor: Updated ndv.input.disabled translation to include node name.

* refactor: Aligned n8n-button usage inside of editor-ui.

* feat: Added edit data button on json hover.

* feat: Extracted code editor into separate form component.

* feat: Added edit data button on json hover.

* feat: Added pinData and edit mode methods.

* 🔥 Remove conflict markers

* ✏️ Update i18n keys

*  Add JSON validation

* 🗃️ Add `pinData` column to `workflow_entity`

* 📘 Tighten type

*  Make `pinData` column nullable

*  Adjust workflow endpoints for pin data

* 📘 Improve types

* ✏️ Improve wording

* Inject pindata into items flow (#3420)

*  Inject pin data - Second approach

* 🔥 Remove unneeded lint exception

* feat: Added edit data button on json hover.

* feat: Extracted code editor into separate form component.

* feat: Added edit data button on json hover.

* fix: Fixed rebase conflicts.

*  Undo button change

* 🐛 Fix runNode call

Adjust per update in bdb84130d6

* 🧪 Fix workflow tests

* 🐛 More merge conflict fixes

* feat: Added pin/unpin button and store mutations.

* feat: Size check. Various design and ux improvements.

*  Add transformer

*  Hoist pin data

*  Adjust endpoints for hoisted pin data

* 📘 Expand interface

* 🐛 Fix stray array

* 👕 Fix build

* 🎨 Add color secondary tints

*  Create `HeaderMessage` component

*  Adjust `InfoTip` component

*  Add `HeaderMessage` to `RunData`

* 🐛 Fix console error

* 👕 Fix lint

*  Consolidate `HeaderMessage` and `Callout`

*  Undo `InfoTip` changes

* 🔥 Remove duplicate icons

*  Simplify template

* 🎨 Change cursor for action text

* 👕 Fix lint

*  Add URL

* 🐛 Fix handler name

*  Use constant

* ♻️ Refactor per feedback

* fix: Various fixes after data pinning relocation.

* fix: Added store mutation for setting pinned data.

* feat: Added pinned state for workflow canvas node.

*  Fixes for canvas pin data (#3587)

*  Fixes for canvas pin data

* 📘 Rename type

* 🧪 Fix unrelated Public API test

* 🔥 Remove logging

* feat: Updated pinData mixin to no longer include extra fields.

* fix: Removed pinData hoisting (no longer necessary).

* chore: Merged duplicate node border color condition.

*  Output same pindata for every run

* 🎨 Fix cropping

* 🐛 Fix excess closing template tag

* fix: Removed rogue template tag after merge.

* fix: Fixed code-editor resizing when moving ndv panel.

* feat: Added node duplication pin data.

*  Implement telemetry

* ♻️ Add clarifications from call

* fix: Fixed run data header height.

* feat: Removed border from pin data callout.

* feat: Added line-break before 'or insert pin data'.

* feat: Changed enterEditMode to always insert test data if there's no execution data.

* feat: Removed copy output tooltip.

* feat: Removed unpin tooltip.

* fix: Removed thumbtack icon rotation.

* fix: Removed run info from Edit Output title.

* feat: Hid edit and pin buttons when editing.

* feat: Updated monaco code-editor padding and borders.

* feat: Progress on pinData error message format

* feat: Updated copy feature to work without any selected value.

* feat: Moved save and cancel buttons. Cleared notifications on save.

* feat: Changed pin data beforeClosing confirm text.

* feat: Closing ndv when discarding or saving pindata on close.

* feat: Added split in batches node to pin data denylist.

* fix: Added missing margin-bottom to webhook node.

* feat: Moved thumbtack icon to the right, replacing the checkmark.

* fix: Hid pagination while editing.

* feat: Added pin data discovery flow.

* feat: Changed pin data discovery flow to avoid tooltip glitching.

* fix: Changed copy selection to copy all input data.

* feat: Updated pin data validation error message for unexpected single quotes.

* fix: Replaced :manual='true' prop with manual shorthand.

* fix: Removed unused variable.

* chore: Renamed translation key to node.discovery.pinData.

* refactor: Extracted isPinDataNodeType to pinData mixin.

* fix: Updated watch condition to improve performance.

* refactor: Renamed some pin data variables and methods as per review.

* fix: Added partial translation for JSON.parse pin data error messages.

* chore: Temporarily disabled failing unit test.

* 🧪 Fix data pinning workflow retrieval test

* 🔥 Remove unused imports

* 🔥 Remove leftover line

*  Skip pindata node issues on BE

*  Skip pindata node issues on FE

*  Hide `RunInfo` for pindata node

*  Hide purple banner in edit output mode

* feat: Updated data pinning discoverability flow.

* fix: Fixed paginated data pinning.

* fix: Disabled pin data in read only mode.

* 🐛 Fix runtime error with non-array

* fix: Loading pin data when opening execution.

*  Adjust stale data warning for pinned data

*  Skip auth in endpoint

*  Mark start node for pinned trigger

* ✏️ Comment on passthrough

* 🔥 Remove comment

* Final pindata metrics changes (#3673)

* 🐛 Fix `pinData` tracked as `0`

*  Add `is_pinned` to `nodesGraph`

* 📘 Extend `IWorkflowBase`

*  Handle `pinData` being `undefined`

*  Add `data_pinning_tooltip_presented`

* ♻️ Refactor to remove circular dependency

* fix: Added pin data handling when importing workflow. (#3698)

* 🔥 Remove helper from WorkflowExecute

*  Add logic for single pinned trigger

* 👕 Remove lint exception

* fix: Added pin data handling in importWorkflowExact.

* N8N-4077 data pinning discoverability part 2 (#3701)

* fix: Fixed pin data discovery tooltip position when moving canvas.

* feat: Updated data pinning discovery tooltip copy.

* Fix data pinning build (#3702)

*  Disable edit button for disabled node

*  Ensure disabled pinned nodes are passthrough

* 🐛 Fix JSON key unfurling in edit mode

*  Improve implementation

* 🐛 Fix console error

* fix: Fixed copying pinned output data. (#3715)

* Fix pinning for webhook responding with output from last node (#3719)

* fix: Fixed entering edit mode after refresh.

* fix: Fixed type error during build.

* fix: RunData import formatting.

* chore: Updated pin data types.

* fix: Added missing type to stringSizeInBytes.

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>

* fix: Showing pin data without executing the node only in output pane.

* fix: Updated no data message when previous node not executed.

* feat: Added expression input and evaluation for pin data nodes without execution.

* chore: Fixed linting issues and removed remnant console.log().

* chore: Undone package-lock changes.

* fix: Removed pin data store changes.

* fix: Created a new object using vuex runExecutionData.

* fix: Fixed bug appearing when adding a new node after executing.

* fix: Fix editor-ui build

* feat: Added green node connectors when having pin data output.

* chore: Fixed linting errors.

* fix: Added pin data eventBus unsubscribe.

* fix: Added pin data color check after adding a connection.

* 🎨 Add pindata styles

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>
2022-07-20 17:50:39 +02:00

221 lines
6.5 KiB
TypeScript

/* eslint-disable import/no-cycle */
import {
IConnection,
INode,
INodeNameIndex,
INodesGraph,
INodeGraphItem,
INodesGraphResult,
IWorkflowBase,
INodeTypes,
} from '.';
import { INodeType } from './Interfaces';
const STICKY_NODE_TYPE = 'n8n-nodes-base.stickyNote';
export function getNodeTypeForName(workflow: IWorkflowBase, nodeName: string): INode | undefined {
return workflow.nodes.find((node) => node.name === nodeName);
}
export function isNumber(value: unknown): value is number {
return typeof value === 'number';
}
function getStickyDimensions(note: INode, stickyType: INodeType | undefined) {
const heightProperty = stickyType?.description.properties.find(
(property) => property.name === 'height',
);
const widthProperty = stickyType?.description.properties.find(
(property) => property.name === 'width',
);
const defaultHeight =
heightProperty && isNumber(heightProperty?.default) ? heightProperty.default : 0;
const defaultWidth =
widthProperty && isNumber(widthProperty?.default) ? widthProperty.default : 0;
const height: number = isNumber(note.parameters.height) ? note.parameters.height : defaultHeight;
const width: number = isNumber(note.parameters.width) ? note.parameters.width : defaultWidth;
return {
height,
width,
};
}
type XYPosition = [number, number];
function areOverlapping(
topLeft: XYPosition,
bottomRight: XYPosition,
targetPos: XYPosition,
): boolean {
return (
targetPos[0] > topLeft[0] &&
targetPos[1] > topLeft[1] &&
targetPos[0] < bottomRight[0] &&
targetPos[1] < bottomRight[1]
);
}
const URL_PARTS_REGEX = /(?<protocolPlusDomain>.*?\..*?)(?<pathname>\/.*)/;
export function getDomainBase(raw: string, urlParts = URL_PARTS_REGEX): string {
try {
const url = new URL(raw);
return [url.protocol, url.hostname].join('//');
} catch (_) {
const match = urlParts.exec(raw);
if (!match?.groups?.protocolPlusDomain) return '';
return match.groups.protocolPlusDomain;
}
}
function isSensitive(segment: string) {
if (/^v\d+$/.test(segment)) return false;
return /%40/.test(segment) || /\d/.test(segment) || /^[0-9A-F]{8}/i.test(segment);
}
export const ANONYMIZATION_CHARACTER = '*';
function sanitizeRoute(raw: string, check = isSensitive, char = ANONYMIZATION_CHARACTER) {
return raw
.split('/')
.map((segment) => (check(segment) ? char.repeat(segment.length) : segment))
.join('/');
}
/**
* Return pathname plus query string from URL, anonymizing IDs in route and query params.
*/
export function getDomainPath(raw: string, urlParts = URL_PARTS_REGEX): string {
try {
const url = new URL(raw);
if (!url.hostname) throw new Error('Malformed URL');
return sanitizeRoute(url.pathname);
} catch (_) {
const match = urlParts.exec(raw);
if (!match?.groups?.pathname) return '';
// discard query string
const route = match.groups.pathname.split('?').shift() as string;
return sanitizeRoute(route);
}
}
export function generateNodesGraph(
workflow: IWorkflowBase,
nodeTypes: INodeTypes,
): INodesGraphResult {
const nodesGraph: INodesGraph = {
node_types: [],
node_connections: [],
nodes: {},
notes: {},
is_pinned: Object.keys(workflow.pinData ?? {}).length > 0,
};
const nodeNameAndIndex: INodeNameIndex = {};
const webhookNodeNames: string[] = [];
try {
const notes = workflow.nodes.filter((node) => node.type === STICKY_NODE_TYPE);
const otherNodes = workflow.nodes.filter((node) => node.type !== STICKY_NODE_TYPE);
notes.forEach((stickyNote: INode, index: number) => {
const stickyType = nodeTypes.getByNameAndVersion(STICKY_NODE_TYPE, stickyNote.typeVersion);
const { height, width } = getStickyDimensions(stickyNote, stickyType);
const topLeft = stickyNote.position;
const bottomRight: [number, number] = [topLeft[0] + width, topLeft[1] + height];
const overlapping = Boolean(
otherNodes.find((node) => areOverlapping(topLeft, bottomRight, node.position)),
);
nodesGraph.notes[index] = {
overlapping,
position: topLeft,
height,
width,
};
});
otherNodes.forEach((node: INode, index: number) => {
nodesGraph.node_types.push(node.type);
const nodeItem: INodeGraphItem = {
type: node.type,
position: node.position,
};
if (node.type === 'n8n-nodes-base.httpRequest' && node.typeVersion === 1) {
try {
nodeItem.domain = new URL(node.parameters.url as string).hostname;
} catch (_) {
nodeItem.domain = getDomainBase(node.parameters.url as string);
}
} else if (node.type === 'n8n-nodes-base.httpRequest' && node.typeVersion === 2) {
const { authentication } = node.parameters as { authentication: string };
nodeItem.credential_type = {
none: 'none',
genericCredentialType: node.parameters.genericAuthType as string,
existingCredentialType: node.parameters.nodeCredentialType as string,
}[authentication];
nodeItem.credential_set = node.credentials
? Object.keys(node.credentials).length > 0
: false;
const { url } = node.parameters as { url: string };
nodeItem.domain_base = getDomainBase(url);
nodeItem.domain_path = getDomainPath(url);
nodeItem.method = node.parameters.requestMethod as string;
} else if (node.type === 'n8n-nodes-base.webhook') {
webhookNodeNames.push(node.name);
} else {
const nodeType = nodeTypes.getByNameAndVersion(node.type);
nodeType?.description.properties.forEach((property) => {
if (
property.name === 'operation' ||
property.name === 'resource' ||
property.name === 'mode'
) {
nodeItem[property.name] = property.default ? property.default.toString() : undefined;
}
});
nodeItem.operation = node.parameters.operation?.toString() ?? nodeItem.operation;
nodeItem.resource = node.parameters.resource?.toString() ?? nodeItem.resource;
nodeItem.mode = node.parameters.mode?.toString() ?? nodeItem.mode;
}
nodesGraph.nodes[`${index}`] = nodeItem;
nodeNameAndIndex[node.name] = index.toString();
});
const getGraphConnectionItem = (startNode: string, connectionItem: IConnection) => {
return { start: nodeNameAndIndex[startNode], end: nodeNameAndIndex[connectionItem.node] };
};
Object.keys(workflow.connections).forEach((nodeName) => {
const connections = workflow.connections[nodeName];
connections.main.forEach((element) => {
element.forEach((element2) => {
nodesGraph.node_connections.push(getGraphConnectionItem(nodeName, element2));
});
});
});
} catch (_) {
return { nodeGraph: nodesGraph, nameIndices: nodeNameAndIndex, webhookNodeNames };
}
return { nodeGraph: nodesGraph, nameIndices: nodeNameAndIndex, webhookNodeNames };
}