github-mirror/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2026-05-31 16:57:08 +02:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity Graph

feat(editor): Add dismissable callout for scaling mode enabled customers (#21897)

Browse Source
This commit is contained in:
Guillaume Jacquart 2025-11-21 15:11:42 +01:00 committed by GitHub
parent 1527ff5aaf
commit fe5697dee1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 332 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/frontend/@n8n/i18n/src/locales/en.json
View File

@ -3929,6 +3929,9 @@
"insights.dashboard.paywall.title": "Upgrade to access more detailed insights",
"insights.dashboard.paywall.description": "Gain access to more granular, per-workflow insights and visual breakdown of production executions over different time periods.",
"insights.banner.title.timeSaved.tooltip": "Total time saved calculated from your estimated time savings per execution across all workflows",
"insights.banner.queueMode.warning": "We identified and fixed an issue where insights execution counts were duplicated for queue mode users.",
"insights.banner.queueMode.warning.link.text": "Learn more",
"insights.banner.queueMode.warning.link.url": "https://community.n8n.io/t/insights-reporting-bug-for-queue-mode-users-on-v1-100-0",
"insights.banner.failureRate.deviation.tooltip": "Percentage point change from previous period",
"insights.chart.failed": "Failed",
"insights.chart.succeeded": "Successful",

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

@ -308,7 +308,7 @@ const projects = computed(() =>
}
.insightsBanner {
padding-bottom: 0;
margin-bottom: 0;
ul {
border-bottom-left-radius: 0;

8
packages/frontend/editor-ui/src/features/execution/insights/components/InsightsSummary.test.ts
View File

@ -2,6 +2,8 @@ import { reactive } from 'vue';
import InsightsSummary from '@/features/execution/insights/components/InsightsSummary.vue';
import { createComponentRenderer } from '@/__tests__/render';
import type { InsightsSummaryDisplay } from '@/features/execution/insights/insights.types';
import { createTestingPinia } from '@pinia/testing';
import { defaultSettings } from '@/__tests__/defaults';
vi.mock('vue-router', () => ({
useRouter: () => ({}),
@ -23,6 +25,12 @@ const renderComponent = createComponentRenderer(InsightsSummary, {
});
describe('InsightsSummary', () => {
beforeEach(() => {
createTestingPinia({
initialState: { settings: { settings: defaultSettings } },
});
});
it('should render without error', () => {
expect(() =>
renderComponent({

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

@ -1,5 +1,6 @@
<script setup lang="ts">
import { useTelemetry } from '@/app/composables/useTelemetry';
import { useSettingsStore } from '@/app/stores/settings.store';
import { VIEWS } from '@/app/constants';
import {
INSIGHT_IMPACT_TYPES,
@ -9,12 +10,14 @@ import type { InsightsSummaryDisplay } from '@/features/execution/insights/insig
import type { InsightsDateRange, InsightsSummary } from '@n8n/api-types';
import { useI18n } from '@n8n/i18n';
import { smartDecimal } from '@n8n/utils/number/smartDecimal';
import { computed, useCssModule } from 'vue';
import { computed, ref, useCssModule, onMounted } from 'vue';
import { I18nT } from 'vue-i18n';
import { useRoute } from 'vue-router';
import { getTimeRangeLabels } from '../insights.utils';
import { N8nIcon, N8nTooltip } from '@n8n/design-system';
import { N8nCallout, N8nIcon, N8nLink, N8nText, N8nTooltip } from '@n8n/design-system';
const INSIGHTS_QUEUE_MODE_WARNING_DISMISSED_KEY = 'n8n-insights-queue-mode-warning-dismissed';
const props = defineProps<{
summary: InsightsSummaryDisplay;
timeRange: InsightsDateRange['key'];
@ -25,9 +28,27 @@ const i18n = useI18n();
const route = useRoute();
const $style = useCssModule();
const telemetry = useTelemetry();
const settingsStore = useSettingsStore();
const timeRangeLabels = getTimeRangeLabels();
// Queue mode warning dismissal state
const isQueueModeWarningDismissed = ref(false);
onMounted(() => {
isQueueModeWarningDismissed.value =
localStorage.getItem(INSIGHTS_QUEUE_MODE_WARNING_DISMISSED_KEY) === 'true';
});
const dismissQueueModeWarning = () => {
localStorage.setItem(INSIGHTS_QUEUE_MODE_WARNING_DISMISSED_KEY, 'true');
isQueueModeWarningDismissed.value = true;
};
const shouldShowQueueModeWarning = computed(() => {
return settingsStore.isQueueModeEnabled && !isQueueModeWarningDismissed.value;
});
const summaryTitles = computed<Record<keyof InsightsSummary, string>>(() => ({
total: i18n.baseText('insights.banner.title.total'),
failed: i18n.baseText('insights.banner.title.failed'),
@ -70,89 +91,133 @@ const trackTabClick = (insightType: keyof InsightsSummary) => {
</script>
<template>
<div :class="$style.insights">
<ul data-test-id="insights-summary-tabs">
<li
v-for="{ id, value, deviation, deviationUnit, unit, to } in summaryWithRouteLocations"
:key="id"
:data-test-id="`insights-summary-tab-${id}`"
>
<N8nTooltip
:placement="route.name === VIEWS.INSIGHTS ? 'bottom' : 'top'"
:disabled="!(summaryHasNoData && id === 'total')"
:show-after="500"
<div :class="$style.insightsWrapper">
<N8nCallout
v-if="shouldShowQueueModeWarning"
:class="$style.queueModeWarning"
theme="warning"
data-test-id="insights-queue-mode-warning"
round-corners
>
<N8nText color="text-base" size="small">
{{ i18n.baseText('insights.banner.queueMode.warning') }}
<N8nLink
size="small"
:href="i18n.baseText('insights.banner.queueMode.warning.link.url')"
new-window
theme="text"
:underline="false"
>
<template #content>
<I18nT keypath="insights.banner.noData.tooltip" scope="global">
<template #link>
<a :href="i18n.baseText('insights.banner.noData.tooltip.link.url')" target="_blank">
{{ i18n.baseText('insights.banner.noData.tooltip.link') }}
</a>
</template>
</I18nT>
</template>
<RouterLink :to="to" :exact-active-class="$style.activeTab" @click="trackTabClick(id)">
<strong>
<N8nTooltip placement="bottom" :disabled="id !== 'timeSaved'">
<template #content>
{{ i18n.baseText('insights.banner.title.timeSaved.tooltip') }}
<span :class="$style.underlined">
{{ i18n.baseText('insights.banner.queueMode.warning.link.text') }}
</span>
↗
</N8nLink>
</N8nText>
<template #trailingContent>
<N8nIcon
icon="x"
:title="i18n.baseText('generic.dismiss')"
class="clickable"
data-test-id="insights-queue-mode-warning-close"
@click="dismissQueueModeWarning"
/>
</template>
</N8nCallout>
<div :class="$style.insights">
<ul data-test-id="insights-summary-tabs">
<li
v-for="{ id, value, deviation, deviationUnit, unit, to } in summaryWithRouteLocations"
:key="id"
:data-test-id="`insights-summary-tab-${id}`"
>
<N8nTooltip
:placement="route.name === VIEWS.INSIGHTS ? 'bottom' : 'top'"
:disabled="!(summaryHasNoData && id === 'total')"
:show-after="500"
>
<template #content>
<I18nT keypath="insights.banner.noData.tooltip" scope="global">
<template #link>
<a
:href="i18n.baseText('insights.banner.noData.tooltip.link.url')"
target="_blank"
>
{{ i18n.baseText('insights.banner.noData.tooltip.link') }}
</a>
</template>
{{ summaryTitles[id] }}
</N8nTooltip>
</strong>
<small :class="$style.days">
{{ timeRangeLabels[timeRange] }}
</small>
<span v-if="value === 0 && id === 'timeSaved'" :class="$style.empty">
<em>--</em>
<small>
<N8nTooltip placement="bottom">
</I18nT>
</template>
<RouterLink :to="to" :exact-active-class="$style.activeTab" @click="trackTabClick(id)">
<strong>
<N8nTooltip placement="bottom" :disabled="id !== 'timeSaved'">
<template #content>
<I18nT keypath="insights.banner.timeSaved.tooltip" scope="global">
<template #link>{{
i18n.baseText('insights.banner.timeSaved.tooltip.link.text')
}}</template>
</I18nT>
{{ i18n.baseText('insights.banner.title.timeSaved.tooltip') }}
</template>
<N8nIcon :class="$style.icon" icon="info" size="medium" />
{{ summaryTitles[id] }}
</N8nTooltip>
</strong>
<small :class="$style.days">
{{ timeRangeLabels[timeRange] }}
</small>
</span>
<span v-else>
<em
>{{ smartDecimal(value).toLocaleString('en-US') }} <i>{{ unit }}</i></em
>
<small v-if="deviation !== null" :class="getImpactStyle(id, deviation)">
<N8nIcon
:class="[$style.icon, getImpactStyle(id, deviation)]"
:icon="
deviation === 0
? 'chevron-right'
: deviation > 0
? 'chevron-up'
: 'chevron-down'
"
/>
<N8nTooltip placement="bottom" :disabled="id !== 'failureRate'">
<template #content>
{{ i18n.baseText('insights.banner.failureRate.deviation.tooltip') }}
</template>
{{ smartDecimal(Math.abs(deviation)).toLocaleString('en-US') }}{{ deviationUnit }}
</N8nTooltip>
</small>
</span>
</RouterLink>
</N8nTooltip>
</li>
</ul>
<span v-if="value === 0 && id === 'timeSaved'" :class="$style.empty">
<em>--</em>
<small>
<N8nTooltip placement="bottom">
<template #content>
<I18nT keypath="insights.banner.timeSaved.tooltip" scope="global">
<template #link>{{
i18n.baseText('insights.banner.timeSaved.tooltip.link.text')
}}</template>
</I18nT>
</template>
<N8nIcon :class="$style.icon" icon="info" size="medium" />
</N8nTooltip>
</small>
</span>
<span v-else>
<em
>{{ smartDecimal(value).toLocaleString('en-US') }} <i>{{ unit }}</i></em
>
<small v-if="deviation !== null" :class="getImpactStyle(id, deviation)">
<N8nIcon
:class="[$style.icon, getImpactStyle(id, deviation)]"
:icon="
deviation === 0
? 'chevron-right'
: deviation > 0
? 'chevron-up'
: 'chevron-down'
"
/>
<N8nTooltip placement="bottom" :disabled="id !== 'failureRate'">
<template #content>
{{ i18n.baseText('insights.banner.failureRate.deviation.tooltip') }}
</template>
{{ smartDecimal(Math.abs(deviation)).toLocaleString('en-US')
}}{{ deviationUnit }}
</N8nTooltip>
</small>
</span>
</RouterLink>
</N8nTooltip>
</li>
</ul>
</div>
<!-- TODO: This should be removed after some time when the number issue is behind us -->
</div>
</template>
<style lang="scss" module>
.insightsWrapper {
position: relative;
padding: var(--spacing--xs) 0 0;
margin-bottom: var(--spacing--2xl);
}
.insights {
display: grid;
grid-template-rows: auto 1fr;
padding: var(--spacing--xs) 0 var(--spacing--2xl);
ul {
display: flex;
@ -311,4 +376,16 @@ const trackTabClick = (insightType: keyof InsightsSummary) => {
border-radius: inherit;
}
}
.queueModeWarning {
margin-bottom: var(--spacing--xs);
a {
text-decoration: none;
.underlined {
text-decoration: underline;
}
}
}
</style>

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

@ -1,196 +1,214 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`InsightsSummary > should render the summary correctly 1`] = `
"<div class="insights">
<ul data-test-id="insights-summary-tabs"></ul>
"<div class="insightsWrapper">
<!--v-if-->
<div class="insights">
<ul data-test-id="insights-summary-tabs"></ul>
</div><!-- TODO: This should be removed after some time when the number issue is behind us -->
</div>"
`;
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" 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"><n8n-icon-stub icon="chevron-up" spin="false" class="icon positive"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 85%</span>
"<div class="insightsWrapper">
<!--v-if-->
<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" 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"><n8n-icon-stub icon="chevron-up" spin="false" class="icon positive"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 85%</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a>
<!--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>14 <i></i></em><small class="negative"><n8n-icon-stub icon="chevron-up" spin="false" class="icon negative"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 3%</span>
<!--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"><n8n-icon-stub icon="chevron-up" spin="false" class="icon negative"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 3%</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a>
<!--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>1.9 <i>%</i></em><small class="positive"><n8n-icon-stub icon="chevron-down" spin="false" class="icon positive"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.8pp</span>
<!--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"><n8n-icon-stub icon="chevron-down" spin="false" class="icon positive"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.8pp</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a>
<!--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><em>55.56 <i>h</i></em><small class="negative"><n8n-icon-stub icon="chevron-down" spin="false" class="icon negative"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 5.16h</span>
<!--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"><n8n-icon-stub icon="chevron-down" spin="false" class="icon negative"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 5.16h</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a>
<!--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>2.5 <i>s</i></em><small class="neutral"><n8n-icon-stub icon="chevron-down" spin="false" class="icon neutral"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.5s</span>
<!--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"><n8n-icon-stub icon="chevron-down" spin="false" class="icon neutral"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.5s</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a>
<!--teleport start-->
<!--teleport end--></small></span>
</a>
<!--teleport start-->
<!--teleport end-->
</li>
</ul>
<!--teleport end-->
</li>
</ul>
</div><!-- TODO: This should be removed after some time when the number issue is behind us -->
</div>"
`;
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" 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"><n8n-icon-stub icon="chevron-up" spin="false" class="icon positive"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 85%</span>
"<div class="insightsWrapper">
<!--v-if-->
<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" 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"><n8n-icon-stub icon="chevron-up" spin="false" class="icon positive"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 85%</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a>
<!--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>14 <i></i></em><small class="negative"><n8n-icon-stub icon="chevron-up" spin="false" class="icon negative"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 3%</span>
<!--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"><n8n-icon-stub icon="chevron-up" spin="false" class="icon negative"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 3%</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a>
<!--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>1.9 <i>%</i></em><small class="positive"><n8n-icon-stub icon="chevron-down" spin="false" class="icon positive"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.8pp</span>
<!--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"><n8n-icon-stub icon="chevron-down" spin="false" class="icon positive"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.8pp</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a>
<!--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><n8n-icon-stub icon="info" size="medium" spin="false" class="icon el-tooltip__trigger el-tooltip__trigger"></n8n-icon-stub><!--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>2.5 <i>s</i></em><small class="neutral"><n8n-icon-stub icon="chevron-down" spin="false" class="icon neutral"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.5s</span>
<!--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><n8n-icon-stub icon="info" size="medium" spin="false" class="icon el-tooltip__trigger el-tooltip__trigger"></n8n-icon-stub><!--teleport start--><!--teleport end--></small></span></a>
<!--teleport start-->
<!--teleport end--></small></span>
</a>
<!--teleport start-->
<!--teleport end-->
</li>
</ul>
<!--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"><n8n-icon-stub icon="chevron-down" spin="false" class="icon neutral"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.5s</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a>
<!--teleport start-->
<!--teleport end-->
</li>
</ul>
</div><!-- TODO: This should be removed after some time when the number issue is behind us -->
</div>"
`;
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" 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"><n8n-icon-stub icon="chevron-down" spin="false" class="icon negative"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 2%</span>
"<div class="insightsWrapper">
<!--v-if-->
<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" 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"><n8n-icon-stub icon="chevron-down" spin="false" class="icon negative"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 2%</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a>
<!--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>14 <i></i></em><small class="positive"><n8n-icon-stub icon="chevron-down" spin="false" class="icon positive"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 3%</span>
<!--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"><n8n-icon-stub icon="chevron-down" spin="false" class="icon positive"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 3%</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a>
<!--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>1.9 <i>%</i></em><small class="negative"><n8n-icon-stub icon="chevron-up" spin="false" class="icon negative"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.8pp</span>
<!--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"><n8n-icon-stub icon="chevron-up" spin="false" class="icon negative"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.8pp</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a>
<!--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><em>55.56 <i>h</i></em><small class="neutral"><n8n-icon-stub icon="chevron-right" spin="false" class="icon neutral"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0h</span>
<!--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"><n8n-icon-stub icon="chevron-right" spin="false" class="icon neutral"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0h</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a>
<!--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>2.5 <i>s</i></em><small class="neutral"><n8n-icon-stub icon="chevron-up" spin="false" class="icon neutral"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.5s</span>
<!--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"><n8n-icon-stub icon="chevron-up" spin="false" class="icon neutral"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.5s</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a>
<!--teleport start-->
<!--teleport end--></small></span>
</a>
<!--teleport start-->
<!--teleport end-->
</li>
</ul>
<!--teleport end-->
</li>
</ul>
</div><!-- TODO: This should be removed after some time when the number issue is behind us -->
</div>"
`;
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" 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 class="insightsWrapper">
<!--v-if-->
<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" 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><!-- TODO: This should be removed after some time when the number issue is behind us -->
</div>"
`;
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" 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"><n8n-icon-stub icon="chevron-right" spin="false" class="icon neutral"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0%</span>
"<div class="insightsWrapper">
<!--v-if-->
<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" 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"><n8n-icon-stub icon="chevron-right" spin="false" class="icon neutral"></n8n-icon-stub><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--></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"><n8n-icon-stub icon="chevron-right" spin="false" class="icon neutral"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0%</span>
<!--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"><n8n-icon-stub icon="chevron-right" spin="false" class="icon neutral"></n8n-icon-stub><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--></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"><n8n-icon-stub icon="chevron-right" spin="false" class="icon neutral"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0pp</span>
<!--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"><n8n-icon-stub icon="chevron-right" spin="false" class="icon neutral"></n8n-icon-stub><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--></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><n8n-icon-stub icon="info" size="medium" spin="false" class="icon el-tooltip__trigger el-tooltip__trigger"></n8n-icon-stub><!--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"><n8n-icon-stub icon="chevron-right" spin="false" class="icon neutral"></n8n-icon-stub><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0s</span>
<!--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><n8n-icon-stub icon="info" size="medium" spin="false" class="icon el-tooltip__trigger el-tooltip__trigger"></n8n-icon-stub><!--teleport start--><!--teleport end--></small></span></a>
<!--teleport start-->
<!--teleport end--></small></span>
</a>
<!--teleport start-->
<!--teleport end-->
</li>
</ul>
<!--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"><n8n-icon-stub icon="chevron-right" spin="false" class="icon neutral"></n8n-icon-stub><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><!-- TODO: This should be removed after some time when the number issue is behind us -->
</div>"
`;