admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 18:12:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): FE fixes to insights (#15228)

Browse Source
This commit is contained in:
Csaba Tuncsik
2025-05-13 17:59:31 +02:00
committed by GitHub
parent 131baabb7f
commit 3eb1c1c783
11 changed files with 488 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/frontend/@n8n/design-system/src/components/N8nDataTableServer/N8nDataTableServer.test.ts
View File

@@ -102,4 +102,22 @@ describe('N8nDataTableServer', () => {
]);
expect(emitted('update:options')[2]).toStrictEqual([expect.objectContaining({ page: 1 })]);
});
it('should not show the pagination if there are no items', async () => {
const { queryByTestId } = render(N8nDataTableServer, {
//@ts-expect-error testing-library errors due to header generics
props: { items: [], headers, itemsLength: 0 },
});
expect(queryByTestId('pagination')).not.toBeInTheDocument();
});
it('should not show the pagination if there are less items than the smallest page size value', async () => {
const { queryByTestId } = render(N8nDataTableServer, {
//@ts-expect-error testing-library errors due to header generics
props: { items: items.slice(0, 3), headers, itemsLength: 3 },
});
expect(queryByTestId('pagination')).not.toBeInTheDocument();
});
});

10
packages/frontend/@n8n/design-system/src/components/N8nDataTableServer/N8nDataTableServer.vue
View File

@@ -55,10 +55,12 @@ const props = withDefaults(
returnObject?: boolean;
itemSelectable?: boolean | DeepKeys<T> | ((row: T) => boolean);
pageSizes?: number[];
}>(),
{
itemSelectable: undefined,
itemValue: 'id',
pageSizes: () => [10, 25, 50, 100],
},
);
@@ -218,6 +220,8 @@ const pagination = computed<PaginationState>({
},
});
const showPagination = computed(() => props.itemsLength > Math.min(...props.pageSizes));
const sortBy = defineModel<SortingState>('sort-by', { default: [], required: false });
function handleSortingChange(updaterOrValue: Updater<SortingState>) {
@@ -448,11 +452,11 @@ const table = useVueTable({
</table>
</div>
</div>
<div class="table-pagination" data-test-id="pagination">
<div v-if="showPagination" class="table-pagination" data-test-id="pagination">
<N8nPagination
:current-page="page + 1"
:page-size="itemsPerPage"
:page-sizes="[10, 20, 30, 40]"
:page-sizes="pageSizes"
layout="prev, pager, next"
:total="itemsLength"
@update:current-page="page = $event - 1"
@@ -466,7 +470,7 @@ const table = useVueTable({
size="small"
:teleported="false"
>
<el-option v-for="item in [10, 20, 30, 40]" :key="item" :label="item" :value="item" />
<el-option v-for="item in pageSizes" :key="item" :label="item" :value="item" />
</el-select>
</div>
</div>

71
packages/frontend/editor-ui/src/features/insights/components/InsightsDashboard.vue
View File

@@ -148,27 +148,22 @@ watch(
v-if="!insightsStore.isDashboardEnabled"
data-test-id="insights-dashboard-unlicensed"
/>
<div v-else>
<div v-else :class="$style.insightsContentWrapper">
<div
:class="[
$style.dataLoader,
{
[$style.isDataLoading]:
insightsStore.charts.isLoading || insightsStore.table.isLoading,
},
]"
>
<N8nSpinner />
<span>{{ i18n.baseText('insights.chart.loading') }}</span>
</div>
<div :class="$style.insightsChartWrapper">
<div v-if="insightsStore.charts.isLoading" :class="$style.chartLoader">
<svg
width="22"
height="22"
viewBox="0 0 22 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C11.6293 1 12.245 1.05813 12.8421 1.16931"
stroke="currentColor"
stroke-width="2"
/>
</svg>
{{ i18n.baseText('insights.chart.loading') }}
</div>
<component
:is="chartComponents[props.insightType]"
v-else
:type="props.insightType"
:data="insightsStore.charts.state"
:granularity
@@ -222,21 +217,59 @@ watch(
background: var(--color-background-xlight);
}
.insightsContentWrapper {
position: relative;
overflow-x: hidden;
}
.insightsChartWrapper {
position: relative;
height: 292px;
padding: 0 var(--spacing-l);
z-index: 1;
}
.insightsTableWrapper {
position: relative;
padding: var(--spacing-l) var(--spacing-l) 0;
z-index: 1;
}
.chartLoader {
.dataLoader {
position: absolute;
top: 0;
left: -100%;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 9px;
z-index: 2;
&.isDataLoading {
transition: left 0s linear;
left: 0;
transition-delay: 0.5s;
}
> span {
position: relative;
z-index: 2;
}
&::before {
content: '';
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-background-xlight);
opacity: 0.75;
z-index: 1;
}
}
</style>

39
packages/frontend/editor-ui/src/features/insights/components/InsightsSummary.vue
View File

@@ -68,13 +68,21 @@ const trackTabClick = (insightType: keyof InsightsSummary) => {
<template>
<div :class="$style.insights">
<ul data-test-id="insights-summary-tabs">
<N8nLoading v-if="loading" :class="$style.loading" :cols="5" />
<template v-else>
<li
v-for="{ id, value, deviation, deviationUnit, unit, to } in summaryWithRouteLocations"
:key="id"
:data-test-id="`insights-summary-tab-${id}`"
>
<li
v-for="{ id, value, deviation, deviationUnit, unit, to } in summaryWithRouteLocations"
:key="id"
:data-test-id="`insights-summary-tab-${id}`"
>
<N8nTooltip placement="top" :disabled="!(summaryHasNoData && id === 'total')">
<template #content>
<i18n-t keypath="insights.banner.noData.tooltip">
<template #link>
<a :href="i18n.baseText('insights.banner.noData.tooltip.link.url')" target="_blank">
{{ i18n.baseText('insights.banner.noData.tooltip.link') }}
</a>
</template>
</i18n-t>
</template>
<router-link :to="to" :exact-active-class="$style.activeTab" @click="trackTabClick(id)">
<strong>
<N8nTooltip placement="bottom" :disabled="id !== 'timeSaved'">
@@ -87,15 +95,7 @@ const trackTabClick = (insightType: keyof InsightsSummary) => {
<small :class="$style.days">
{{ TIME_RANGE_LABELS[timeRange] }}
</small>
<span v-if="summaryHasNoData" :class="$style.noData">
<N8nTooltip placement="bottom">
<template #content>
{{ i18n.baseText('insights.banner.noData.tooltip') }}
</template>
<em>{{ i18n.baseText('insights.banner.noData') }}</em>
</N8nTooltip>
</span>
<span v-else-if="value === 0 && id === 'timeSaved'" :class="$style.empty">
<span v-if="value === 0 && id === 'timeSaved'" :class="$style.empty">
<em>--</em>
<small>
<N8nTooltip placement="bottom">
@@ -130,8 +130,8 @@ const trackTabClick = (insightType: keyof InsightsSummary) => {
</small>
</span>
</router-link>
</li>
</template>
</N8nTooltip>
</li>
</ul>
</div>
</template>
@@ -208,6 +208,9 @@ const trackTabClick = (insightType: keyof InsightsSummary) => {
&.empty {
em {
color: var(--color-text-lighter);
body[data-theme='dark'] & {
color: var(--color-text-light);
}
}
small {
padding: 0;

170
packages/frontend/editor-ui/src/features/insights/components/__snapshots__/InsightsSummary.test.ts.snap
View File

@@ -9,26 +9,41 @@ exports[`InsightsSummary > should render the summary correctly 1`] = `
exports[`InsightsSummary > should render the summary correctly 2`] = `
"<div class="insights">
<ul data-test-id="insights-summary-tabs">
<li data-test-id="insights-summary-tab-total"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>525 <i></i></em><small class="positive"><span class="n8n-text compact size-medium regular n8n-icon icon positive icon positive n8n-icon icon positive icon positive"><svg class="svg-inline--fa fa-caret-up fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 85%</span>
<li data-test-id="insights-summary-tab-total"><a to="[object Object]" exact-active-class="activeTab" class="el-tooltip__trigger"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>525 <i></i></em><small class="positive"><span class="n8n-text compact size-medium regular n8n-icon icon positive icon positive n8n-icon icon positive icon positive"><svg class="svg-inline--fa fa-caret-up fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 85%</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
<li data-test-id="insights-summary-tab-failed"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failed prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>14 <i></i></em><small class="negative"><span class="n8n-text compact size-medium regular n8n-icon icon negative icon negative n8n-icon icon negative icon negative"><svg class="svg-inline--fa fa-caret-up fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 3%</span>
</a>
<!--teleport start-->
<!--teleport end-->
</li>
<li data-test-id="insights-summary-tab-failed"><a to="[object Object]" exact-active-class="activeTab" class="el-tooltip__trigger"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failed prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>14 <i></i></em><small class="negative"><span class="n8n-text compact size-medium regular n8n-icon icon negative icon negative n8n-icon icon negative icon negative"><svg class="svg-inline--fa fa-caret-up fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 3%</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
<li data-test-id="insights-summary-tab-failureRate"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failure rate</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>1.9 <i>%</i></em><small class="positive"><span class="n8n-text compact size-medium regular n8n-icon icon positive icon positive n8n-icon icon positive icon positive"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.8pp</span>
</a>
<!--teleport start-->
<!--teleport end-->
</li>
<li data-test-id="insights-summary-tab-failureRate"><a to="[object Object]" exact-active-class="activeTab" class="el-tooltip__trigger"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failure rate</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>1.9 <i>%</i></em><small class="positive"><span class="n8n-text compact size-medium regular n8n-icon icon positive icon positive n8n-icon icon positive icon positive"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.8pp</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
<li data-test-id="insights-summary-tab-timeSaved"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Time saved</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>55.56 <i>h</i></em><small class="negative"><span class="n8n-text compact size-medium regular n8n-icon icon negative icon negative n8n-icon icon negative icon negative"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 5.16h</span>
</a>
<!--teleport start-->
<!--teleport end-->
</li>
<li data-test-id="insights-summary-tab-timeSaved"><a to="[object Object]" exact-active-class="activeTab" class="el-tooltip__trigger"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Time saved</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>55.56 <i>h</i></em><small class="negative"><span class="n8n-text compact size-medium regular n8n-icon icon negative icon negative n8n-icon icon negative icon negative"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 5.16h</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
<li data-test-id="insights-summary-tab-averageRunTime"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Run time (avg.)</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>2.5 <i>s</i></em><small class="neutral"><span class="n8n-text compact size-medium regular n8n-icon icon neutral icon neutral n8n-icon icon neutral icon neutral"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.5s</span>
</a>
<!--teleport start-->
<!--teleport end-->
</li>
<li data-test-id="insights-summary-tab-averageRunTime"><a to="[object Object]" exact-active-class="activeTab" class="el-tooltip__trigger"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Run time (avg.)</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>2.5 <i>s</i></em><small class="neutral"><span class="n8n-text compact size-medium regular n8n-icon icon neutral icon neutral n8n-icon icon neutral icon neutral"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.5s</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
</a>
<!--teleport start-->
<!--teleport end-->
</li>
</ul>
</div>"
`;
@@ -36,26 +51,41 @@ exports[`InsightsSummary > should render the summary correctly 2`] = `
exports[`InsightsSummary > should render the summary correctly 3`] = `
"<div class="insights">
<ul data-test-id="insights-summary-tabs">
<li data-test-id="insights-summary-tab-total"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>525 <i></i></em><small class="positive"><span class="n8n-text compact size-medium regular n8n-icon icon positive icon positive n8n-icon icon positive icon positive"><svg class="svg-inline--fa fa-caret-up fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 85%</span>
<li data-test-id="insights-summary-tab-total"><a to="[object Object]" exact-active-class="activeTab" class="el-tooltip__trigger"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>525 <i></i></em><small class="positive"><span class="n8n-text compact size-medium regular n8n-icon icon positive icon positive n8n-icon icon positive icon positive"><svg class="svg-inline--fa fa-caret-up fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 85%</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
<li data-test-id="insights-summary-tab-failed"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failed prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>14 <i></i></em><small class="negative"><span class="n8n-text compact size-medium regular n8n-icon icon negative icon negative n8n-icon icon negative icon negative"><svg class="svg-inline--fa fa-caret-up fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 3%</span>
</a>
<!--teleport start-->
<!--teleport end-->
</li>
<li data-test-id="insights-summary-tab-failed"><a to="[object Object]" exact-active-class="activeTab" class="el-tooltip__trigger"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failed prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>14 <i></i></em><small class="negative"><span class="n8n-text compact size-medium regular n8n-icon icon negative icon negative n8n-icon icon negative icon negative"><svg class="svg-inline--fa fa-caret-up fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 3%</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
<li data-test-id="insights-summary-tab-failureRate"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failure rate</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>1.9 <i>%</i></em><small class="positive"><span class="n8n-text compact size-medium regular n8n-icon icon positive icon positive n8n-icon icon positive icon positive"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.8pp</span>
</a>
<!--teleport start-->
<!--teleport end-->
</li>
<li data-test-id="insights-summary-tab-failureRate"><a to="[object Object]" exact-active-class="activeTab" class="el-tooltip__trigger"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failure rate</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>1.9 <i>%</i></em><small class="positive"><span class="n8n-text compact size-medium regular n8n-icon icon positive icon positive n8n-icon icon positive icon positive"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.8pp</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
<li data-test-id="insights-summary-tab-timeSaved"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Time saved</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span class="empty"><em>--</em><small><span class="n8n-text compact size-medium regular n8n-icon icon el-tooltip__trigger el-tooltip__trigger icon el-tooltip__trigger el-tooltip__trigger n8n-icon icon el-tooltip__trigger el-tooltip__trigger icon el-tooltip__trigger el-tooltip__trigger"><svg class="svg-inline--fa fa-info-circle fa-w-16 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="info-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="" fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg></span>
</a>
<!--teleport start-->
<!--teleport end-->
</li>
<li data-test-id="insights-summary-tab-timeSaved"><a to="[object Object]" exact-active-class="activeTab" class="el-tooltip__trigger"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Time saved</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span class="empty"><em>--</em><small><span class="n8n-text compact size-medium regular n8n-icon icon el-tooltip__trigger el-tooltip__trigger icon el-tooltip__trigger el-tooltip__trigger n8n-icon icon el-tooltip__trigger el-tooltip__trigger icon el-tooltip__trigger el-tooltip__trigger"><svg class="svg-inline--fa fa-info-circle fa-w-16 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="info-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="" fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg></span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
<li data-test-id="insights-summary-tab-averageRunTime"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Run time (avg.)</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>2.5 <i>s</i></em><small class="neutral"><span class="n8n-text compact size-medium regular n8n-icon icon neutral icon neutral n8n-icon icon neutral icon neutral"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.5s</span>
</a>
<!--teleport start-->
<!--teleport end-->
</li>
<li data-test-id="insights-summary-tab-averageRunTime"><a to="[object Object]" exact-active-class="activeTab" class="el-tooltip__trigger"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Run time (avg.)</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>2.5 <i>s</i></em><small class="neutral"><span class="n8n-text compact size-medium regular n8n-icon icon neutral icon neutral n8n-icon icon neutral icon neutral"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.5s</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
</a>
<!--teleport start-->
<!--teleport end-->
</li>
</ul>
</div>"
`;
@@ -63,26 +93,41 @@ exports[`InsightsSummary > should render the summary correctly 3`] = `
exports[`InsightsSummary > should render the summary correctly 4`] = `
"<div class="insights">
<ul data-test-id="insights-summary-tabs">
<li data-test-id="insights-summary-tab-total"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>525 <i></i></em><small class="negative"><span class="n8n-text compact size-medium regular n8n-icon icon negative icon negative n8n-icon icon negative icon negative"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 2%</span>
<li data-test-id="insights-summary-tab-total"><a to="[object Object]" exact-active-class="activeTab" class="el-tooltip__trigger"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>525 <i></i></em><small class="negative"><span class="n8n-text compact size-medium regular n8n-icon icon negative icon negative n8n-icon icon negative icon negative"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 2%</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
<li data-test-id="insights-summary-tab-failed"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failed prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>14 <i></i></em><small class="positive"><span class="n8n-text compact size-medium regular n8n-icon icon positive icon positive n8n-icon icon positive icon positive"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 3%</span>
</a>
<!--teleport start-->
<!--teleport end-->
</li>
<li data-test-id="insights-summary-tab-failed"><a to="[object Object]" exact-active-class="activeTab" class="el-tooltip__trigger"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failed prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>14 <i></i></em><small class="positive"><span class="n8n-text compact size-medium regular n8n-icon icon positive icon positive n8n-icon icon positive icon positive"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 3%</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
<li data-test-id="insights-summary-tab-failureRate"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failure rate</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>1.9 <i>%</i></em><small class="negative"><span class="n8n-text compact size-medium regular n8n-icon icon negative icon negative n8n-icon icon negative icon negative"><svg class="svg-inline--fa fa-caret-up fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.8pp</span>
</a>
<!--teleport start-->
<!--teleport end-->
</li>
<li data-test-id="insights-summary-tab-failureRate"><a to="[object Object]" exact-active-class="activeTab" class="el-tooltip__trigger"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failure rate</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>1.9 <i>%</i></em><small class="negative"><span class="n8n-text compact size-medium regular n8n-icon icon negative icon negative n8n-icon icon negative icon negative"><svg class="svg-inline--fa fa-caret-up fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.8pp</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
<li data-test-id="insights-summary-tab-timeSaved"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Time saved</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>55.56 <i>h</i></em><small class="neutral"><span class="n8n-text compact size-medium regular n8n-icon icon neutral icon neutral n8n-icon icon neutral icon neutral"><svg class="svg-inline--fa fa-caret-right fa-w-6 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path class="" fill="currentColor" d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0h</span>
</a>
<!--teleport start-->
<!--teleport end-->
</li>
<li data-test-id="insights-summary-tab-timeSaved"><a to="[object Object]" exact-active-class="activeTab" class="el-tooltip__trigger"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Time saved</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>55.56 <i>h</i></em><small class="neutral"><span class="n8n-text compact size-medium regular n8n-icon icon neutral icon neutral n8n-icon icon neutral icon neutral"><svg class="svg-inline--fa fa-caret-right fa-w-6 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path class="" fill="currentColor" d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0h</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
<li data-test-id="insights-summary-tab-averageRunTime"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Run time (avg.)</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>2.5 <i>s</i></em><small class="neutral"><span class="n8n-text compact size-medium regular n8n-icon icon neutral icon neutral n8n-icon icon neutral icon neutral"><svg class="svg-inline--fa fa-caret-up fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.5s</span>
</a>
<!--teleport start-->
<!--teleport end-->
</li>
<li data-test-id="insights-summary-tab-averageRunTime"><a to="[object Object]" exact-active-class="activeTab" class="el-tooltip__trigger"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Run time (avg.)</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>2.5 <i>s</i></em><small class="neutral"><span class="n8n-text compact size-medium regular n8n-icon icon neutral icon neutral n8n-icon icon neutral icon neutral"><svg class="svg-inline--fa fa-caret-up fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.5s</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
</a>
<!--teleport start-->
<!--teleport end-->
</li>
</ul>
</div>"
`;
@@ -90,11 +135,26 @@ exports[`InsightsSummary > should render the summary correctly 4`] = `
exports[`InsightsSummary > should render the summary correctly 5`] = `
"<div class="insights">
<ul data-test-id="insights-summary-tabs">
<li data-test-id="insights-summary-tab-total"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>525 <i></i></em><!--v-if--></span></a></li>
<li data-test-id="insights-summary-tab-failed"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failed prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>14 <i></i></em><!--v-if--></span></a></li>
<li data-test-id="insights-summary-tab-failureRate"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failure rate</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>1.9 <i>%</i></em><!--v-if--></span></a></li>
<li data-test-id="insights-summary-tab-timeSaved"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Time saved</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>55.56 <i>h</i></em><!--v-if--></span></a></li>
<li data-test-id="insights-summary-tab-averageRunTime"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Run time (avg.)</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>2.5 <i>s</i></em><!--v-if--></span></a></li>
<li data-test-id="insights-summary-tab-total"><a to="[object Object]" exact-active-class="activeTab" class="el-tooltip__trigger"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>525 <i></i></em><!--v-if--></span></a>
<!--teleport start-->
<!--teleport end-->
</li>
<li data-test-id="insights-summary-tab-failed"><a to="[object Object]" exact-active-class="activeTab" class="el-tooltip__trigger"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failed prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>14 <i></i></em><!--v-if--></span></a>
<!--teleport start-->
<!--teleport end-->
</li>
<li data-test-id="insights-summary-tab-failureRate"><a to="[object Object]" exact-active-class="activeTab" class="el-tooltip__trigger"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failure rate</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>1.9 <i>%</i></em><!--v-if--></span></a>
<!--teleport start-->
<!--teleport end-->
</li>
<li data-test-id="insights-summary-tab-timeSaved"><a to="[object Object]" exact-active-class="activeTab" class="el-tooltip__trigger"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Time saved</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>55.56 <i>h</i></em><!--v-if--></span></a>
<!--teleport start-->
<!--teleport end-->
</li>
<li data-test-id="insights-summary-tab-averageRunTime"><a to="[object Object]" exact-active-class="activeTab" class="el-tooltip__trigger"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Run time (avg.)</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>2.5 <i>s</i></em><!--v-if--></span></a>
<!--teleport start-->
<!--teleport end-->
</li>
</ul>
</div>"
`;
@@ -102,11 +162,41 @@ exports[`InsightsSummary > should render the summary correctly 5`] = `
exports[`InsightsSummary > should render the summary correctly 6`] = `
"<div class="insights">
<ul data-test-id="insights-summary-tabs">
<li data-test-id="insights-summary-tab-total"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span class="noData"><em class="el-tooltip__trigger">Collecting...</em><!--teleport start--><!--teleport end--></span></a></li>
<li data-test-id="insights-summary-tab-failed"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failed prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span class="noData"><em class="el-tooltip__trigger">Collecting...</em><!--teleport start--><!--teleport end--></span></a></li>
<li data-test-id="insights-summary-tab-failureRate"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failure rate</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span class="noData"><em class="el-tooltip__trigger">Collecting...</em><!--teleport start--><!--teleport end--></span></a></li>
<li data-test-id="insights-summary-tab-timeSaved"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Time saved</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span class="noData"><em class="el-tooltip__trigger">Collecting...</em><!--teleport start--><!--teleport end--></span></a></li>
<li data-test-id="insights-summary-tab-averageRunTime"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Run time (avg.)</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span class="noData"><em class="el-tooltip__trigger">Collecting...</em><!--teleport start--><!--teleport end--></span></a></li>
<li data-test-id="insights-summary-tab-total"><a to="[object Object]" exact-active-class="activeTab" class="el-tooltip__trigger"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>0 <i></i></em><small class="neutral"><span class="n8n-text compact size-medium regular n8n-icon icon neutral icon neutral n8n-icon icon neutral icon neutral"><svg class="svg-inline--fa fa-caret-right fa-w-6 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path class="" fill="currentColor" d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0%</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a>
<!--teleport start-->
<!--teleport end-->
</li>
<li data-test-id="insights-summary-tab-failed"><a to="[object Object]" exact-active-class="activeTab" class="el-tooltip__trigger"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failed prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>0 <i></i></em><small class="neutral"><span class="n8n-text compact size-medium regular n8n-icon icon neutral icon neutral n8n-icon icon neutral icon neutral"><svg class="svg-inline--fa fa-caret-right fa-w-6 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path class="" fill="currentColor" d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0%</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a>
<!--teleport start-->
<!--teleport end-->
</li>
<li data-test-id="insights-summary-tab-failureRate"><a to="[object Object]" exact-active-class="activeTab" class="el-tooltip__trigger"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failure rate</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>0 <i>%</i></em><small class="neutral"><span class="n8n-text compact size-medium regular n8n-icon icon neutral icon neutral n8n-icon icon neutral icon neutral"><svg class="svg-inline--fa fa-caret-right fa-w-6 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path class="" fill="currentColor" d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0pp</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a>
<!--teleport start-->
<!--teleport end-->
</li>
<li data-test-id="insights-summary-tab-timeSaved"><a to="[object Object]" exact-active-class="activeTab" class="el-tooltip__trigger"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Time saved</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span class="empty"><em>--</em><small><span class="n8n-text compact size-medium regular n8n-icon icon el-tooltip__trigger el-tooltip__trigger icon el-tooltip__trigger el-tooltip__trigger n8n-icon icon el-tooltip__trigger el-tooltip__trigger icon el-tooltip__trigger el-tooltip__trigger"><svg class="svg-inline--fa fa-info-circle fa-w-16 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="info-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="" fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg></span>
<!--teleport start-->
<!--teleport end--></small></span>
</a>
<!--teleport start-->
<!--teleport end-->
</li>
<li data-test-id="insights-summary-tab-averageRunTime"><a to="[object Object]" exact-active-class="activeTab" class="el-tooltip__trigger"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Run time (avg.)</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>0 <i>s</i></em><small class="neutral"><span class="n8n-text compact size-medium regular n8n-icon icon neutral icon neutral n8n-icon icon neutral icon neutral"><svg class="svg-inline--fa fa-caret-right fa-w-6 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path class="" fill="currentColor" d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0s</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a>
<!--teleport start-->
<!--teleport end-->
</li>
</ul>
</div>"
`;

4
packages/frontend/editor-ui/src/features/insights/components/tables/InsightsTableWorkflows.vue
View File

@@ -89,7 +89,7 @@ const headers = ref<Array<TableHeader<Item>>>([
const sortBy = defineModel<Array<{ id: string; desc: boolean }>>('sortBy');
const currentPage = ref(0);
const itemsPerPage = ref(20);
const itemsPerPage = ref(25);
const emit = defineEmits<{
'update:options': [
@@ -135,7 +135,6 @@ watch(sortBy, (newValue) => {
:items="rows"
:headers="headers"
:items-length="data.count"
:loading="loading"
@update:options="emit('update:options', $event)"
>
<template #[`item.workflowName`]="{ item }">
@@ -185,7 +184,6 @@ watch(sortBy, (newValue) => {
display: inline-flex;
height: 100%;
align-items: center;
text-decoration: none;
color: var(--color-text-base);
text-decoration: underline;
max-width: 100%;

8
packages/frontend/editor-ui/src/features/insights/insights.store.ts
View File

@@ -33,7 +33,7 @@ export const useInsightsStore = defineStore('insights', () => {
return transformInsightsSummary(raw);
},
[],
{ immediate: false },
{ immediate: false, resetOnExecute: false },
);
const summary = useAsyncState(
@@ -42,7 +42,7 @@ export const useInsightsStore = defineStore('insights', () => {
return transformInsightsSummary(raw);
},
[],
{ immediate: false },
{ immediate: false, resetOnExecute: false },
);
const charts = useAsyncState(
@@ -50,7 +50,7 @@ export const useInsightsStore = defineStore('insights', () => {
return await insightsApi.fetchInsightsByTime(rootStore.restApiContext, filter);
},
[],
{ immediate: false },
{ immediate: false, resetOnExecute: false },
);
const table = useAsyncState(
@@ -61,7 +61,7 @@ export const useInsightsStore = defineStore('insights', () => {
count: 0,
data: [],
},
{ resetOnExecute: false, immediate: false },
{ immediate: false, resetOnExecute: false },
);
const dateRanges = computed(() => settingsStore.settings.insights.dateRanges);

246
packages/frontend/editor-ui/src/features/insights/insights.utils.test.ts Normal file
View File

@@ -0,0 +1,246 @@
import type { InsightsSummary } from '@n8n/api-types';
import {
transformInsightsTimeSaved,
transformInsightsAverageRunTime,
transformInsightsFailureRate,
transformInsightsValues,
transformInsightsDeviation,
transformInsightsSummary,
} from './insights.utils';
import {
INSIGHTS_UNIT_MAPPING,
INSIGHTS_DEVIATION_UNIT_MAPPING,
INSIGHTS_SUMMARY_ORDER,
} from '@/features/insights/insights.constants';
describe('Insights Transformers', () => {
describe('transformInsightsTimeSaved', () => {
it('should return minutes if absolute value is less than 60', () => {
expect(transformInsightsTimeSaved(30)).toBe(30);
expect(transformInsightsTimeSaved(59)).toBe(59);
expect(transformInsightsTimeSaved(-30)).toBe(-30);
expect(transformInsightsTimeSaved(-59)).toBe(-59);
});
it('should return hours if absolute value is 60 or more, rounding to nearest hour', () => {
expect(transformInsightsTimeSaved(60)).toBe(1);
expect(transformInsightsTimeSaved(120)).toBe(2);
expect(transformInsightsTimeSaved(89)).toBe(1);
expect(transformInsightsTimeSaved(90)).toBe(2);
expect(transformInsightsTimeSaved(-60)).toBe(-1);
expect(transformInsightsTimeSaved(-120)).toBe(-2);
expect(transformInsightsTimeSaved(-89)).toBe(-1);
expect(transformInsightsTimeSaved(-90)).toBe(-1);
});
it('should return 0 for 0 minutes', () => {
expect(transformInsightsTimeSaved(0)).toBe(0);
});
});
describe('transformInsightsAverageRunTime', () => {
it('should convert milliseconds to seconds', () => {
expect(transformInsightsAverageRunTime(1000)).toBe(1);
expect(transformInsightsAverageRunTime(500)).toBe(0.5);
expect(transformInsightsAverageRunTime(1234)).toBe(1.234);
expect(transformInsightsAverageRunTime(0)).toBe(0);
});
});
describe('transformInsightsFailureRate', () => {
it('should convert decimal to percentage', () => {
expect(transformInsightsFailureRate(0.5)).toBe(50);
expect(transformInsightsFailureRate(1)).toBe(100);
expect(transformInsightsFailureRate(0.253)).toBe(25.3);
expect(transformInsightsFailureRate(0)).toBe(0);
});
});
describe('transformInsightsValues', () => {
it('should correctly transform values based on type', () => {
expect(transformInsightsValues.total(100)).toBe(100);
expect(transformInsightsValues.failed(10)).toBe(10);
expect(transformInsightsValues.timeSaved(120)).toBe(2);
expect(transformInsightsValues.timeSaved(30)).toBe(30);
expect(transformInsightsValues.averageRunTime(2000)).toBe(2);
expect(transformInsightsValues.failureRate(0.1)).toBe(10);
});
});
describe('transformInsightsDeviation', () => {
describe('for total and failed types', () => {
it('should calculate percentage deviation', () => {
expect(transformInsightsDeviation.total(100, 10)).toBe(10);
expect(transformInsightsDeviation.failed(50, 5)).toBe(10);
});
it('should return 0 if value and deviation are 0', () => {
expect(transformInsightsDeviation.total(0, 0)).toBe(0);
expect(transformInsightsDeviation.failed(0, 0)).toBe(0);
});
it('should return Infinity if value is 0 and deviation is not 0', () => {
expect(transformInsightsDeviation.total(0, 10)).toBe(Infinity);
expect(transformInsightsDeviation.failed(0, 5)).toBe(Infinity);
});
it('should return 0 if deviation is 0 and value is not 0', () => {
expect(transformInsightsDeviation.total(100, 0)).toBe(0);
expect(transformInsightsDeviation.failed(50, 0)).toBe(0);
});
});
it('for timeSaved type, should transform deviation using transformInsightsTimeSaved', () => {
expect(transformInsightsDeviation.timeSaved(1000, 120)).toBe(2);
expect(transformInsightsDeviation.timeSaved(1000, 30)).toBe(30);
});
it('for averageRunTime type, should transform deviation using transformInsightsAverageRunTime', () => {
expect(transformInsightsDeviation.averageRunTime(5000, 1000)).toBe(1);
});
it('for failureRate type, should transform deviation using transformInsightsFailureRate', () => {
expect(transformInsightsDeviation.failureRate(0.5, 0.1)).toBe(10);
});
});
describe('transformInsightsSummary', () => {
beforeEach(() => {
vi.clearAllMocks();
INSIGHTS_SUMMARY_ORDER.forEach((key) => {
vi.spyOn(INSIGHTS_UNIT_MAPPING, key);
vi.spyOn(INSIGHTS_DEVIATION_UNIT_MAPPING, key);
});
});
it('should return an empty array if data is null', () => {
expect(transformInsightsSummary(null)).toEqual([]);
});
it('should correctly transform InsightsSummary data and respect INSIGHTS_SUMMARY_ORDER', () => {
const summaryData: InsightsSummary = {
timeSaved: { value: 1200, deviation: 120, unit: 'minute' },
total: { value: 100, deviation: 10, unit: 'count' },
failureRate: { value: 0.05, deviation: 0.01, unit: 'ratio' },
averageRunTime: { value: 5000, deviation: 1000, unit: 'millisecond' },
failed: { value: 5, deviation: 1, unit: 'count' },
};
const expectedOutput = [
{
id: 'total',
value: 100,
deviation: 10,
deviationUnit: '%',
unit: '',
},
{
id: 'failed',
value: 5,
deviation: 20,
deviationUnit: '%',
unit: '',
},
{
id: 'failureRate',
value: 5,
deviation: 1,
deviationUnit: 'pp',
unit: '%',
},
{
id: 'timeSaved',
value: 20,
deviation: 2,
deviationUnit: 'h',
unit: 'h',
},
{
id: 'averageRunTime',
value: 5,
deviation: 1,
deviationUnit: 's',
unit: 's',
},
];
const result = transformInsightsSummary(summaryData);
expect(result).toEqual(expectedOutput);
expect(result.map((item) => item.id)).toEqual([
'total',
'failed',
'failureRate',
'timeSaved',
'averageRunTime',
]);
expect(INSIGHTS_UNIT_MAPPING.total).toHaveBeenCalledWith(100);
expect(INSIGHTS_DEVIATION_UNIT_MAPPING.total).toHaveBeenCalledWith(10);
expect(INSIGHTS_UNIT_MAPPING.failed).toHaveBeenCalledWith(5);
expect(INSIGHTS_DEVIATION_UNIT_MAPPING.failed).toHaveBeenCalledWith(1);
expect(INSIGHTS_UNIT_MAPPING.timeSaved).toHaveBeenCalledWith(1200);
expect(INSIGHTS_DEVIATION_UNIT_MAPPING.timeSaved).toHaveBeenCalledWith(120);
expect(INSIGHTS_UNIT_MAPPING.averageRunTime).toHaveBeenCalledWith(5000);
expect(INSIGHTS_DEVIATION_UNIT_MAPPING.averageRunTime).toHaveBeenCalledWith(1000);
expect(INSIGHTS_UNIT_MAPPING.failureRate).toHaveBeenCalledWith(0.05);
expect(INSIGHTS_DEVIATION_UNIT_MAPPING.failureRate).toHaveBeenCalledWith(0.01);
});
it('should handle null deviation correctly', () => {
const summaryData: InsightsSummary = {
total: { value: 100, deviation: null, unit: 'count' },
failed: { value: 5, deviation: 1, unit: 'count' },
timeSaved: { value: 30, deviation: null, unit: 'minute' },
averageRunTime: { value: 2000, deviation: 500, unit: 'millisecond' },
failureRate: { value: 0.1, deviation: null, unit: 'ratio' },
};
const expectedOutput = [
{
id: 'total',
value: 100,
deviation: null,
deviationUnit: '',
unit: '',
},
{
id: 'failed',
value: 5,
deviation: 20,
deviationUnit: '%',
unit: '',
},
{
id: 'failureRate',
value: 10,
deviation: null,
deviationUnit: '',
unit: '%',
},
{
id: 'timeSaved',
value: 30,
deviation: null,
deviationUnit: '',
unit: 'm',
},
{
id: 'averageRunTime',
value: 2,
deviation: 0.5,
deviationUnit: 's',
unit: 's',
},
];
expect(transformInsightsSummary(summaryData)).toEqual(expectedOutput);
expect(INSIGHTS_UNIT_MAPPING.total).toHaveBeenCalledWith(100);
expect(INSIGHTS_DEVIATION_UNIT_MAPPING.total).not.toHaveBeenCalled(); // deviation is null
expect(INSIGHTS_UNIT_MAPPING.timeSaved).toHaveBeenCalledWith(30);
expect(INSIGHTS_DEVIATION_UNIT_MAPPING.timeSaved).not.toHaveBeenCalled(); // deviation is null
});
});
});

6
packages/frontend/editor-ui/src/features/insights/insights.utils.ts
View File

@@ -23,8 +23,10 @@ export const transformInsightsDeviation: Record<
InsightsSummaryType,
(value: number, deviation: number) => number
> = {
total: (value: number, deviation: number) => (deviation / value) * 100,
failed: (value: number, deviation: number) => (deviation / value) * 100,
total: (value: number, deviation: number) =>
value === 0 && deviation === 0 ? 0 : (deviation / value) * 100,
failed: (value: number, deviation: number) =>
value === 0 && deviation === 0 ? 0 : (deviation / value) * 100,
timeSaved: (_: number, deviation: number) => transformInsightsTimeSaved(deviation),
averageRunTime: (_: number, deviation: number) => transformInsightsAverageRunTime(deviation),
failureRate: (_: number, deviation: number) => transformInsightsFailureRate(deviation),

7
packages/frontend/editor-ui/src/plugins/i18n/locales/en.json
View File

@@ -3141,8 +3141,9 @@
"insights.oneYear": "One year",
"insights.banner.timeSaved.tooltip": "No estimate available yet. To see potential time savings, {link} to each workflow from workflow settings.",
"insights.banner.timeSaved.tooltip.link.text": "add time estimates",
"insights.banner.noData": "Collecting...",
"insights.banner.noData.tooltip": "Metrics can take up to 24 hours to appear. If you have just updated or started using n8n, please check back later.",
"insights.banner.noData.tooltip": "Manual executions aren’t counted. Data may take up to 24 hours to update after upgrading. {link}",
"insights.banner.noData.tooltip.link": "Learn more",
"insights.banner.noData.tooltip.link.url": "https://docs.n8n.io/insights/",
"insights.banner.title.total": "Prod. executions",
"insights.banner.title.failed": "Failed prod. executions",
"insights.banner.title.failureRate": "Failure rate",
@@ -3159,7 +3160,7 @@
"insights.banner.failureRate.deviation.tooltip": "Percentage point change from previous period",
"insights.chart.failed": "Failed",
"insights.chart.succeeded": "Successful",
"insights.chart.loading": "Loading data...",
"insights.chart.loading": "Loading data",
"communityNodesDocsLink.link.title": "Open community node docs",
"communityNodesDocsLink.title": "Docs",
"communityNodeItem.node.hint": "Install this node to start using it",

1
packages/frontend/editor-ui/src/views/NodeView.vue
View File

@@ -1862,6 +1862,7 @@ onActivated(async () => {
});
onDeactivated(() => {
uiStore.closeModal(WORKFLOW_SETTINGS_MODAL_KEY);
removeUndoRedoEventBindings();
});