feat(editor): Show specific content when 0 data on insights (#14609)

This commit is contained in:
Guillaume Jacquart
2025-04-14 14:32:50 +02:00
committed by GitHub
parent 9c34e3d534
commit 296d5b4a7f
4 changed files with 44 additions and 1 deletions

View File

@@ -82,6 +82,15 @@ describe('InsightsSummary', () => {
{ id: 'averageRunTime', value: 2.5, deviation: null, unit: 's', deviationUnit: 's' },
],
],
[
[
{ id: 'total', value: 0, deviation: 0, unit: '', deviationUnit: '%' },
{ id: 'failed', value: 0, deviation: 0, unit: '', deviationUnit: '%' },
{ id: 'failureRate', value: 0, deviation: 0, unit: '%', deviationUnit: 'pp' },
{ id: 'timeSaved', value: 0, deviation: 0, unit: 'h', deviationUnit: 'h' },
{ id: 'averageRunTime', value: 0, deviation: 0, unit: 's', deviationUnit: 's' },
],
],
])('should render the summary correctly', (summary) => {
const { html } = renderComponent({
props: {

View File

@@ -32,6 +32,11 @@ const summaryTitles = computed<Record<keyof InsightsSummary, string>>(() => ({
averageRunTime: i18n.baseText('insights.banner.title.averageRunTime'),
}));
const summaryHasNoData = computed(() => {
const summaryValues = Object.values(props.summary);
return summaryValues.length > 0 && summaryValues.every((summary) => !summary.value);
});
const summaryWithRouteLocations = computed(() =>
props.summary.map((s) => ({
...s,
@@ -82,7 +87,15 @@ const trackTabClick = (insightType: keyof InsightsSummary) => {
<small :class="$style.days">{{
i18n.baseText('insights.lastNDays', { interpolate: { count: lastNDays } })
}}</small>
<span v-if="value === 0 && id === 'timeSaved'" :class="$style.empty">
<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">
<em>--</em>
<small>
<N8nTooltip placement="bottom">
@@ -243,6 +256,13 @@ const trackTabClick = (insightType: keyof InsightsSummary) => {
}
}
}
.noData {
em {
color: var(--color-text-light);
font-size: var(--font-size-m);
}
}
}
.positive {

View File

@@ -98,3 +98,15 @@ exports[`InsightsSummary > should render the summary correctly 5`] = `
</ul>
</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"><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>
</ul>
</div>"
`;

View File

@@ -3081,6 +3081,8 @@
"insights.lastNDays": "Last {count} days",
"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.title.total": "Prod. executions",
"insights.banner.title.failed": "Failed prod. executions",
"insights.banner.title.failureRate": "Failure rate",