1
1
mirror of https://github.com/n8n-io/n8n.git synced 2024-09-17 16:08:12 +03:00

refactor(editor): Simplify data count in NDV (no-changelog) (#7568)

This commit is contained in:
Csaba Tuncsik 2023-11-03 12:07:04 +01:00 committed by GitHub
parent 6d42fad31a
commit 85e1a10021
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 61 additions and 99 deletions

View File

@ -190,6 +190,7 @@ export default defineComponent({
},
runIndex: {
type: Number,
required: true,
},
linkedRuns: {
type: Boolean,

View File

@ -144,6 +144,7 @@ export default defineComponent({
props: {
runIndex: {
type: Number,
required: true,
},
isReadOnly: {
type: Boolean,

View File

@ -104,7 +104,7 @@
icon="thumbtack"
:disabled="
editMode.enabled ||
(inputData.length === 0 && !hasPinData) ||
(rawInputData.length === 0 && !hasPinData) ||
isReadOnlyRoute ||
readOnlyEnv
"
@ -319,7 +319,7 @@
<Suspense v-else-if="hasNodeRun && displayMode === 'table'">
<run-data-table
:node="node"
:inputData="inputData"
:inputData="inputDataPage"
:mappingEnabled="mappingEnabled"
:distanceFromActive="distanceFromActive"
:runIndex="runIndex"
@ -338,7 +338,7 @@
:editMode="editMode"
:sessioId="sessionId"
:node="node"
:inputData="inputData"
:inputData="inputDataPage"
:mappingEnabled="mappingEnabled"
:distanceFromActive="distanceFromActive"
:runIndex="runIndex"
@ -347,7 +347,7 @@
</Suspense>
<Suspense v-else-if="hasNodeRun && isPaneTypeOutput && displayMode === 'html'">
<run-data-html :inputHtml="inputData[0].json.html" />
<run-data-html :inputHtml="inputDataPage[0].json.html" />
</Suspense>
<Suspense v-else-if="hasNodeRun && isSchemaView">
@ -457,7 +457,8 @@
!hasRunError &&
binaryData.length === 0 &&
dataCount > pageSize &&
!isSchemaView
!isSchemaView &&
!isArtificialRecoveredEventItem
"
v-show="!editMode.enabled"
>
@ -575,6 +576,7 @@ export default defineComponent({
},
runIndex: {
type: Number,
required: true,
},
linkedRuns: {
type: Boolean,
@ -748,7 +750,7 @@ export default defineComponent({
);
},
isArtificialRecoveredEventItem(): boolean {
return this.inputData?.[0]?.json?.isArtificialRecoveredEventItem !== undefined ?? false;
return !!this.rawInputData?.[0]?.json?.isArtificialRecoveredEventItem;
},
subworkflowExecutionError(): Error | null {
return this.workflowsStore.subWorkflowExecutionError;
@ -823,48 +825,14 @@ export default defineComponent({
return 0;
},
rawInputData(): INodeExecutionData[] {
let inputData: INodeExecutionData[] = [];
if (this.node) {
inputData = this.getNodeInputData(
this.node,
this.runIndex,
this.currentOutputIndex,
this.paneType,
this.connectionType,
);
}
if (inputData.length === 0 || !Array.isArray(inputData)) {
return [];
}
return inputData;
return this.getRawInputData(this.runIndex, this.currentOutputIndex, this.connectionType);
},
inputData(): INodeExecutionData[] {
let inputData = this.rawInputData;
if (this.node && this.pinData && !this.isProductionExecutionPreview) {
inputData = Array.isArray(this.pinData)
? this.pinData.map((value) => ({
json: value,
}))
: [
{
json: this.pinData,
},
];
}
// We don't want to paginate the schema view
if (this.isSchemaView) {
return inputData;
}
return this.getPinDataOrLiveData(this.rawInputData);
},
inputDataPage(): INodeExecutionData[] {
const offset = this.pageSize * (this.currentPage - 1);
inputData = inputData.slice(offset, offset + this.pageSize);
return inputData;
return this.inputData.slice(offset, offset + this.pageSize);
},
jsonData(): IDataObject[] {
return executionDataToJson(this.inputData);
@ -1199,47 +1167,58 @@ export default defineComponent({
const itemsLabel = itemsCount > 0 ? ` (${itemsCount} ${items})` : '';
return option + this.$locale.baseText('ndv.output.of') + (this.maxRunIndex + 1) + itemsLabel;
},
getRawInputData(
runIndex: number,
outputIndex: number,
connectionType: ConnectionTypes = NodeConnectionType.Main,
): INodeExecutionData[] {
let inputData: INodeExecutionData[] = [];
if (this.node) {
inputData = this.getNodeInputData(
this.node,
runIndex,
outputIndex,
this.paneType,
connectionType,
);
}
if (inputData.length === 0 || !Array.isArray(inputData)) {
return [];
}
return inputData;
},
getPinDataOrLiveData(inputData: INodeExecutionData[]): INodeExecutionData[] {
if (this.pinData && !this.isProductionExecutionPreview) {
return Array.isArray(this.pinData)
? this.pinData.map((value) => ({
json: value,
}))
: [
{
json: this.pinData,
},
];
}
return inputData;
},
getDataCount(
runIndex: number,
outputIndex: number,
connectionType: ConnectionTypes = NodeConnectionType.Main,
) {
if (this.pinData) {
return this.pinData.length;
}
if (this.node === null) {
if (!this.node) {
return 0;
}
const runData: IRunData | null = this.workflowRunData;
if (runData === null || !runData.hasOwnProperty(this.node.name)) {
return 0;
}
if (runData[this.node.name].length <= runIndex) {
return 0;
}
if (runData[this.node.name][runIndex].hasOwnProperty('error')) {
if (this.workflowRunData?.[this.node.name][runIndex].hasOwnProperty('error')) {
return 1;
}
if (
!runData[this.node.name][runIndex].hasOwnProperty('data') ||
runData[this.node.name][runIndex].data === undefined
) {
return 0;
}
const inputData = this.getInputData(
runData[this.node.name][runIndex].data!,
outputIndex,
connectionType,
);
return inputData.length;
const rawInputData = this.getRawInputData(runIndex, outputIndex, connectionType);
return this.getPinDataOrLiveData(rawInputData).length;
},
init() {
// Reset the selected output index every time another node gets selected
@ -1296,16 +1275,10 @@ export default defineComponent({
}
},
async downloadJsonData() {
const inputData = this.getNodeInputData(
this.node,
this.runIndex,
this.currentOutputIndex,
this.paneType,
this.connectionType,
);
const fileName = this.node!.name.replace(/[^\w\d]/g, '_');
const blob = new Blob([JSON.stringify(inputData, null, 2)], { type: 'application/json' });
const blob = new Blob([JSON.stringify(this.rawInputData, null, 2)], {
type: 'application/json',
});
saveAs(blob, `${fileName}.json`);
},
@ -1341,21 +1314,8 @@ export default defineComponent({
refreshDataSize() {
// 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.currentOutputIndex,
this.paneType,
this.connectionType,
);
const offset = this.pageSize * (this.currentPage - 1);
const jsonItems = inputData.slice(offset, offset + this.pageSize).map((item) => item.json);
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;
@ -1398,7 +1358,7 @@ export default defineComponent({
hasNodeRun() {
if (this.paneType === 'output') this.setDisplayMode();
},
inputData: {
inputDataPage: {
handler(data: INodeExecutionData[]) {
if (this.paneType && data) {
this.ndvStore.setNDVPanelDataIsEmpty({