mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

wip commit

Browse source
This commit is contained in:
Charlie Kolb 2024-11-14 12:54:03 +01:00
parent 66b6ca4cc0
commit b54a31d8ef
No known key found for this signature in database
1 changed files with 102 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

144
packages/editor-ui/src/components/RunDataJson.vue
View file

@ -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,55 +186,72 @@ 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">
<!--
node = {"content":"3af3a3cc-ff5c-4775-af8c-88b37b0836aa","level":2,"key":"uid","path":"[0].uid","showComma":true,"length":1,"type":"content","id":2}
-->
<N8nIconButton <N8nIconButton
v-if="!isNaN(node.path[1]) && inputData[Number(node.path[1])].metadata"
type="secondary" type="secondary"
icon="external-link-alt" icon="external-link-alt"
data-test-id="debug-sub-execution" data-test-id="debug-sub-execution"
size="mini" size="mini"
@click="openRelatedExecution(inputData[Number(node.path[1])].metadata!, 'json')" @click="openRelatedExecution(inputData[Number(node.path[1])].metadata!, 'json')"
/> />
<!-- ^--- may want to stop event propagation so the row in the json component doesn't end up selected-->
</div> </div>
<TextWithHighlights <div v-else-if="node.key !== SUBWORKLOW_BUTTON_MARKER">
:content="getContent(node.key)" <div v-if="firstKey === defaultKey" :class="$style.goToButton">
:search="search" <!--
data-target="mappable" node = {"content":"3af3a3cc-ff5c-4775-af8c-88b37b0836aa","level":2,"key":"uid","path":"[0].uid","showComma":true,"length":1,"type":"content","id":2}
:data-value="getJsonParameterPath(node.path)" -->
:data-name="node.key" <N8nIconButton
:data-path="node.path" v-if="!isNaN(node.path[1]) && inputData[Number(node.path[1])].metadata"
:data-depth="node.level" type="secondary"
:class="{ icon="external-link-alt"
[$style.mappable]: mappingEnabled, data-test-id="debug-sub-execution"
[$style.dragged]: draggingPath === node.path, size="mini"
}" @click="openRelatedExecution(inputData[Number(node.path[1])].metadata!, 'json')"
/> />
<!-- ^--- may want to stop event propagation so the row in the json component doesn't end up selected-->
</div>
<TextWithHighlights
:content="getContent(node.key)"
:search="search"
data-target="mappable"
:data-value="getJsonParameterPath(node.path)"
:data-name="node.key"
:data-path="node.path"
:data-depth="node.level"
:class="{
[$style.mappable]: mappingEnabled,
[$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 }">
<TextWithHighlights <div v-if="node.key === SUBWORKLOW_BUTTON_MARKER" :class="$style.emptyElement">
v-if="isNaN(node.index)" <N8nInfoTip>{{ i18n.baseText('runData.emptyItemHint') }}</N8nInfoTip>
:content="getContent(node.content)" </div>
:search="search" <div v-else-if="node.key !== SUBWORKLOW_BUTTON_MARKER">
/> <TextWithHighlights
<TextWithHighlights v-if="isNaN(node.index)"
v-else :content="getContent(node.content)"
:content="getContent(node.content)" :search="search"
:search="search" />
data-target="mappable" <TextWithHighlights
:data-value="getJsonParameterPath(node.path)" :content="getContent(node.content)"
:data-name="getListItemName(node.path)" :search="search"
:data-path="node.path" data-target="mappable"
:data-depth="node.level" :data-value="getJsonParameterPath(node.path)"
:class="{ :data-name="getListItemName(node.path)"
[$style.mappable]: mappingEnabled, :data-path="node.path"
[$style.dragged]: draggingPath === node.path, :data-depth="node.level"
}" :class="{
class="ph-no-capture" [$style.mappable]: mappingEnabled,
/> [$style.dragged]: draggingPath === node.path,
[$style.offset]: !isNaN(node.path[1]) && inputData[Number(node.path[1])].metadata,
}"
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">