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

Author: guillaumejacquart

packages/frontend/editor-ui/src/features/insights/components/InsightsSummary.test.ts

@@ -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: {

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

@@ -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 {

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

@@ -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>"
+`;

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

@@ -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",