mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-25 04:34:06 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Improve large data warning in input/output panel (#9671)

Browse source
This commit is contained in:
Elias Meire 2024-06-11 12:08:55 +02:00 committed by GitHub
parent 63e42b9b52
commit 4918ac81de
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 23 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
packages/editor-ui/src/components/RunData.vue
View file

@ -605,6 +605,7 @@ import {
LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG,
LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG,
MAX_DISPLAY_DATA_SIZE,
MAX_DISPLAY_DATA_SIZE_SCHEMA_VIEW,
MAX_DISPLAY_ITEMS_AUTO_ALL,
TEST_PIN_DATA,
HTML_NODE_TYPE,
@ -744,11 +745,13 @@ export default defineComponent({
binaryDataPreviewActive: false,
dataSize: 0,
showData: false,
userEnabledShowData: false,
outputIndex: 0,
binaryDataDisplayVisible: false,
binaryDataDisplayData: null as IBinaryData | null,
MAX_DISPLAY_DATA_SIZE,
MAX_DISPLAY_DATA_SIZE_SCHEMA_VIEW,
MAX_DISPLAY_ITEMS_AUTO_ALL,
currentPage: 1,
pageSize: 10,
@ -898,7 +901,7 @@ export default defineComponent({
: this.rawInputData.length;
},
dataSizeInMB(): string {
return (this.dataSize / 1024 / 1000).toLocaleString();
return (this.dataSize / (1024 * 1024)).toFixed(1);
},
maxOutputIndex(): number {
if (this.node === null || this.runIndex === undefined) {
@ -1385,6 +1388,7 @@ export default defineComponent({
},
showTooMuchData() {
this.showData = true;
this.userEnabledShowData = true;
this.$telemetry.track('User clicked ndv button', {
node_type: this.activeNode?.type,
workflow_id: this.workflowsStore.workflowId,
@ -1439,6 +1443,8 @@ export default defineComponent({
const previous = this.displayMode;
this.ndvStore.setPanelDisplayMode({ pane: this.paneType, mode: displayMode });
if (!this.userEnabledShowData) this.updateShowData();
const dataContainerRef = this.$refs.dataContainer as Element | undefined;
if (dataContainerRef) {
const dataDisplay = dataContainerRef.children[0];
@ -1636,11 +1642,15 @@ export default defineComponent({
// Hide by default the data from being displayed
this.showData = false;
const jsonItems = this.inputDataPage.map((item) => item.json);
this.dataSize = JSON.stringify(jsonItems).length;
if (this.dataSize < this.MAX_DISPLAY_DATA_SIZE) {
// Data is reasonable small (< 200kb) so display it directly
this.showData = true;
}
const byteSize = new Blob([JSON.stringify(jsonItems)]).size;
this.dataSize = byteSize;
this.updateShowData();
},
updateShowData() {
// Display data if it is reasonably small (< 1MB)
this.showData =
(this.isSchemaView && this.dataSize < this.MAX_DISPLAY_DATA_SIZE_SCHEMA_VIEW) ||
this.dataSize < this.MAX_DISPLAY_DATA_SIZE;
},
onRunIndexChange(run: number) {
this.$emit('runChange', run);

5
packages/editor-ui/src/constants.ts
View file

@ -11,8 +11,9 @@ export const MAX_WORKFLOW_SIZE = 1024 * 1024 * 16; // Workflow size limit in byt
export const MAX_EXPECTED_REQUEST_SIZE = 2048; // Expected maximum workflow request metadata (i.e. headers) size in bytes
export const MAX_PINNED_DATA_SIZE = import.meta.env.VUE_APP_MAX_PINNED_DATA_SIZE
? parseInt(import.meta.env.VUE_APP_MAX_PINNED_DATA_SIZE, 10)
: 1024 * 1024 * 12; // Workflow pinned data size limit in bytes
export const MAX_DISPLAY_DATA_SIZE = 1024 * 200;
: 1024 * 1024 * 12; // 12 MB; Workflow pinned data size limit in bytes
export const MAX_DISPLAY_DATA_SIZE = 1024 * 1024; // 1 MB
export const MAX_DISPLAY_DATA_SIZE_SCHEMA_VIEW = 1024 * 1024 * 4; // 4 MB
export const MAX_DISPLAY_ITEMS_AUTO_ALL = 250;
export const PLACEHOLDER_FILLED_AT_EXECUTION_TIME = '[filled at execution time]';

8
packages/editor-ui/src/plugins/i18n/locales/en.json
View file

@ -890,7 +890,7 @@
"ndv.input.mapping": "Mapping",
"ndv.input.debugging": "Debugging",
"ndv.input.parentNodes": "Parent nodes",
"ndv.input.tooMuchData.title": "Input data is huge",
"ndv.input.tooMuchData.title": "Display data?",
"ndv.input.noOutputDataInBranch": "No input data in this branch",
"ndv.input.noOutputDataInNode": "Node did not output any data. n8n stops executing the workflow when a node has no output data.",
"ndv.input.noOutputData": "No data",
@ -925,9 +925,9 @@
"ndv.output.insertTestData": "set mock data",
"ndv.output.staleDataWarning.regular": "Node parameters have changed.<br>Test node again to refresh output.",
"ndv.output.staleDataWarning.pinData": "Node parameter changes will not affect pinned output data.",
"ndv.output.tooMuchData.message": "The node contains {size} MB of data. Displaying it may cause problems. <br /> If you do decide to display it, avoid the JSON view.",
"ndv.output.tooMuchData.showDataAnyway": "Show data anyway",
"ndv.output.tooMuchData.title": "Output data is large",
"ndv.output.tooMuchData.message": "The node contains {size} MB of data. Displaying it may slow down your browser temporarily.",
"ndv.output.tooMuchData.showDataAnyway": "Show data",
"ndv.output.tooMuchData.title": "Display data?",
"ndv.output.waitingToRun": "Waiting to execute...",
"ndv.title.cancel": "Cancel",
"ndv.title.rename": "Rename",