mirror of
https://github.com/n8n-io/n8n.git
synced 2025-03-05 20:50:17 -08:00
wip commit
This commit is contained in:
parent
66b6ca4cc0
commit
b54a31d8ef
|
@ -17,6 +17,11 @@ import { useTelemetry } from '@/composables/useTelemetry';
|
||||||
import { useElementSize } from '@vueuse/core';
|
import { useElementSize } from '@vueuse/core';
|
||||||
import { N8nIconButton } from 'n8n-design-system';
|
import { N8nIconButton } from 'n8n-design-system';
|
||||||
import { useExecutionHelpers } from '@/composables/useExecutionHelpers';
|
import { useExecutionHelpers } from '@/composables/useExecutionHelpers';
|
||||||
|
import { useI18n } from '@/composables/useI18n';
|
||||||
|
|
||||||
|
import _ from 'lodash-es';
|
||||||
|
|
||||||
|
const i18n = useI18n();
|
||||||
|
|
||||||
const { openRelatedExecution } = useExecutionHelpers();
|
const { openRelatedExecution } = useExecutionHelpers();
|
||||||
|
|
||||||
|
@ -24,6 +29,8 @@ const LazyRunDataJsonActions = defineAsyncComponent(
|
||||||
async () => await import('@/components/RunDataJsonActions.vue'),
|
async () => await import('@/components/RunDataJsonActions.vue'),
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const SUBWORKLOW_BUTTON_MARKER = 'o12u312o03u123u138u1239812u31983u12938u12893u1_BUTTON_MARKER';
|
||||||
|
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
defineProps<{
|
defineProps<{
|
||||||
editMode: { enabled?: boolean; value?: string };
|
editMode: { enabled?: boolean; value?: string };
|
||||||
|
@ -55,7 +62,17 @@ const jsonDataContainer = ref(null);
|
||||||
const { height } = useElementSize(jsonDataContainer);
|
const { height } = useElementSize(jsonDataContainer);
|
||||||
|
|
||||||
const jsonData = computed(() => {
|
const jsonData = computed(() => {
|
||||||
return executionDataToJson(props.inputData);
|
const x = executionDataToJson(props.inputData).map((x, i) =>
|
||||||
|
_.isEmpty(x)
|
||||||
|
? props.inputData[i].metadata
|
||||||
|
? {
|
||||||
|
[SUBWORKLOW_BUTTON_MARKER]: '',
|
||||||
|
}
|
||||||
|
: {}
|
||||||
|
: x,
|
||||||
|
);
|
||||||
|
console.log(x);
|
||||||
|
return x;
|
||||||
});
|
});
|
||||||
|
|
||||||
const firstKey = computed(() => {
|
const firstKey = computed(() => {
|
||||||
|
@ -122,6 +139,14 @@ const getContent = (value: unknown) => {
|
||||||
const getListItemName = (path: string) => {
|
const getListItemName = (path: string) => {
|
||||||
return path.replace(/^(\["?\d"?]\.?)/g, '');
|
return path.replace(/^(\["?\d"?]\.?)/g, '');
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function isMarkerNode(node: any, inputData: any) {
|
||||||
|
return (
|
||||||
|
node.key === SUBWORKLOW_BUTTON_MARKER &&
|
||||||
|
!isNaN(node.path[1]) &&
|
||||||
|
inputData[Number(node.path[1])].metadata
|
||||||
|
);
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -161,7 +186,17 @@ const getListItemName = (path: string) => {
|
||||||
@update:selected-value="selectedJsonPath = $event"
|
@update:selected-value="selectedJsonPath = $event"
|
||||||
>
|
>
|
||||||
<template #renderNodeKey="{ node, defaultKey }">
|
<template #renderNodeKey="{ node, defaultKey }">
|
||||||
<div v-if="firstKey === defaultKey" :class="[$style.parentHoverShow, $style.goToButton]">
|
<div v-if="isMarkerNode(node, inputData)" :class="$style.emptyElement">
|
||||||
|
<N8nIconButton
|
||||||
|
type="secondary"
|
||||||
|
icon="external-link-alt"
|
||||||
|
data-test-id="debug-sub-execution"
|
||||||
|
size="mini"
|
||||||
|
@click="openRelatedExecution(inputData[Number(node.path[1])].metadata!, 'json')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="node.key !== SUBWORKLOW_BUTTON_MARKER">
|
||||||
|
<div v-if="firstKey === defaultKey" :class="$style.goToButton">
|
||||||
<!--
|
<!--
|
||||||
node = {"content":"3af3a3cc-ff5c-4775-af8c-88b37b0836aa","level":2,"key":"uid","path":"[0].uid","showComma":true,"length":1,"type":"content","id":2}
|
node = {"content":"3af3a3cc-ff5c-4775-af8c-88b37b0836aa","level":2,"key":"uid","path":"[0].uid","showComma":true,"length":1,"type":"content","id":2}
|
||||||
-->
|
-->
|
||||||
|
@ -186,17 +221,22 @@ const getListItemName = (path: string) => {
|
||||||
:class="{
|
:class="{
|
||||||
[$style.mappable]: mappingEnabled,
|
[$style.mappable]: mappingEnabled,
|
||||||
[$style.dragged]: draggingPath === node.path,
|
[$style.dragged]: draggingPath === node.path,
|
||||||
|
[$style.offset]: !isNaN(node.path[1]) && inputData[Number(node.path[1])].metadata,
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #renderNodeValue="{ node }">
|
<template #renderNodeValue="{ node }">
|
||||||
|
<div v-if="node.key === SUBWORKLOW_BUTTON_MARKER" :class="$style.emptyElement">
|
||||||
|
<N8nInfoTip>{{ i18n.baseText('runData.emptyItemHint') }}</N8nInfoTip>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="node.key !== SUBWORKLOW_BUTTON_MARKER">
|
||||||
<TextWithHighlights
|
<TextWithHighlights
|
||||||
v-if="isNaN(node.index)"
|
v-if="isNaN(node.index)"
|
||||||
:content="getContent(node.content)"
|
:content="getContent(node.content)"
|
||||||
:search="search"
|
:search="search"
|
||||||
/>
|
/>
|
||||||
<TextWithHighlights
|
<TextWithHighlights
|
||||||
v-else
|
|
||||||
:content="getContent(node.content)"
|
:content="getContent(node.content)"
|
||||||
:search="search"
|
:search="search"
|
||||||
data-target="mappable"
|
data-target="mappable"
|
||||||
|
@ -207,9 +247,11 @@ const getListItemName = (path: string) => {
|
||||||
:class="{
|
:class="{
|
||||||
[$style.mappable]: mappingEnabled,
|
[$style.mappable]: mappingEnabled,
|
||||||
[$style.dragged]: draggingPath === node.path,
|
[$style.dragged]: draggingPath === node.path,
|
||||||
|
[$style.offset]: !isNaN(node.path[1]) && inputData[Number(node.path[1])].metadata,
|
||||||
}"
|
}"
|
||||||
class="ph-no-capture"
|
class="ph-no-capture"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</VueJsonPretty>
|
</VueJsonPretty>
|
||||||
</Draggable>
|
</Draggable>
|
||||||
|
@ -255,8 +297,22 @@ const getListItemName = (path: string) => {
|
||||||
|
|
||||||
.goToButton {
|
.goToButton {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -25px;
|
|
||||||
left: 35px;
|
// above
|
||||||
|
// top: -22px;
|
||||||
|
// left: 30px;
|
||||||
|
|
||||||
|
// left
|
||||||
|
left: 20px;
|
||||||
|
top: 3px;
|
||||||
|
|
||||||
|
// right
|
||||||
|
// right: 18px; // probably small button rather than mini?
|
||||||
|
}
|
||||||
|
|
||||||
|
.offset {
|
||||||
|
// left
|
||||||
|
margin-left: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// trouble here is that the Tree holds all rows as direct children, so we either show hover on first
|
// trouble here is that the Tree holds all rows as direct children, so we either show hover on first
|
||||||
|
@ -265,6 +321,10 @@ const getListItemName = (path: string) => {
|
||||||
*:not(:hover) > * > .parentHoverShow {
|
*:not(:hover) > * > .parentHoverShow {
|
||||||
// display: none;
|
// display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.emptyElement {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
Loading…
Reference in a new issue