diff --git a/packages/editor-ui/src/components/DataDisplay.vue b/packages/editor-ui/src/components/DataDisplay.vue index d77b91da06..1b5745da3f 100644 --- a/packages/editor-ui/src/components/DataDisplay.vue +++ b/packages/editor-ui/src/components/DataDisplay.vue @@ -4,7 +4,7 @@
-
+
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue index 384a1cb043..9810e477ca 100644 --- a/packages/editor-ui/src/components/RunData.vue +++ b/packages/editor-ui/src/components/RunData.vue @@ -48,7 +48,7 @@
- + @@ -61,16 +61,26 @@
{{workflowRunData[node.name][runIndex].error.stack}}
-
+
+

+ Node contains large amount of data +

+ +
+ The node contains {{parseInt(dataSize/1024).toLocaleString()}} KB of data.
+ Displaying it could cause problems! +
+ + + + Display Data Anyway + +
+
No text data found
- - -
+
Entries exist but they do not contain any JSON data.
@@ -83,6 +93,11 @@
+ +
@@ -188,8 +203,10 @@ export default mixins( data () { return { binaryDataPreviewActive: false, + dataSize: 0, displayMode: 'Table', runIndex: 0, + showData: false, outputIndex: 0, binaryDataDisplayVisible: false, binaryDataDisplayData: null as IBinaryDisplayData | null, @@ -427,8 +444,20 @@ export default mixins( }, watch: { node (newNode, oldNode) { - // Reset the selected output index every time another node gest selected + // Reset the selected output index every time another node gets selected this.outputIndex = 0; + + // Hide by default the data from being displayed + this.showData = false; + + // Check how much data there is to display + const inputData = this.getNodeInputData(this.node, this.runIndex, this.outputIndex); + this.dataSize = JSON.stringify(inputData).length; + if (this.dataSize < 102400) { + // Data is reasonable small (< 100kb) so display it directly + this.showData = true; + } + if (this.displayMode === 'Binary' && this.binaryData.length === 0) { this.displayMode = 'Table'; } @@ -544,7 +573,16 @@ export default mixins( .json-data, .message, .no-data { - margin: 10px; + margin: 1em; + } + + .to-much-data { + margin: 1em; + text-align: center; + + .text { + margin-bottom: 1em; + } } .error-display { diff --git a/packages/editor-ui/src/main.ts b/packages/editor-ui/src/main.ts index df4ef6d2d9..1784368ded 100644 --- a/packages/editor-ui/src/main.ts +++ b/packages/editor-ui/src/main.ts @@ -37,6 +37,7 @@ import { faDotCircle, faEdit, faEnvelope, + faEye, faExclamationTriangle, faExternalLinkAlt, faFile, @@ -107,6 +108,7 @@ library.add(faCopy); library.add(faDotCircle); library.add(faEdit); library.add(faEnvelope); +library.add(faEye); library.add(faExclamationTriangle); library.add(faExternalLinkAlt); library.add(faFile);