@n8n/frontend-module-insights 0.1.0

package/src/components/tables/InsightsTableWorkflows.vue

@@ -0,0 +1,279 @@
+<script lang="ts" setup="">
+import type { InsightsByWorkflow } from '@n8n/api-types';
+import { useTelemetry } from '@n8n/composables/useTelemetry';
+import type { TableHeader } from '@n8n/design-system';
+import { N8nDataTableServer, N8nHeading, N8nTooltip } from '@n8n/design-system';
+import { VIEWS } from '@n8n/frontend-constants/views';
+import { useI18n } from '@n8n/i18n';
+import { smartDecimal } from '@n8n/utils/number/smart-decimal';
+import { computed, defineAsyncComponent, ref, watch } from 'vue';
+import { type RouteLocationRaw, type LocationQueryRaw, RouterLink } from 'vue-router';
+
+import { INSIGHTS_UNIT_MAPPING } from '../../insights.constants';
+import {
+	transformInsightsAverageRunTime,
+	transformInsightsFailureRate,
+	transformInsightsTimeSaved,
+} from '../../insights.utils';
+const InsightsPaywall = defineAsyncComponent(async () => await import('../InsightsPaywall.vue'));
+
+const props = defineProps<{
+	data: InsightsByWorkflow;
+	loading?: boolean;
+	isDashboardEnabled?: boolean;
+}>();
+
+const i18n = useI18n();
+const telemetry = useTelemetry();
+
+type Item = InsightsByWorkflow['data'][number];
+
+const sampleWorkflows: InsightsByWorkflow['data'] = Array.from({ length: 10 }, (_, i) => ({
+	workflowId: `sample-workflow-${i + 1}`,
+	workflowName: `Sample Workflow ${i + 1}`,
+	hasReadAccess: true,
+	total: Math.floor(Math.random() * 2000) + 500,
+	failed: Math.floor(Math.random() * 100) + 20,
+	failureRate: Math.random() * 100,
+	timeSaved: Math.floor(Math.random() * 300000) + 60000,
+	averageRunTime: Math.floor(Math.random() * 60000) + 15000,
+	projectName: `Sample Project ${i + 1}`,
+	projectId: `sample-project-${i + 1}`,
+	succeeded: Math.floor(Math.random() * 2000) + 500,
+	runTime: Math.floor(Math.random() * 60000) + 15000,
+}));
+
+const sampleData: InsightsByWorkflow = {
+	data: sampleWorkflows,
+	count: sampleWorkflows.length,
+};
+
+const tableData = computed(() => (props.isDashboardEnabled ? props.data : sampleData));
+const rows = computed(() => tableData.value.data);
+
+const headers = ref<Array<TableHeader<Item>>>([
+	{
+		title: 'Name',
+		key: 'workflowName',
+		width: 400,
+		disableSort: !props.isDashboardEnabled,
+	},
+	{
+		title: i18n.baseText('insights.banner.title.total'),
+		key: 'total',
+		value(row) {
+			return row.total.toLocaleString('en-US');
+		},
+		disableSort: !props.isDashboardEnabled,
+	},
+	{
+		title: i18n.baseText('insights.banner.title.failed'),
+		key: 'failed',
+		value(row) {
+			return row.failed.toLocaleString('en-US');
+		},
+		disableSort: !props.isDashboardEnabled,
+	},
+	{
+		title: i18n.baseText('insights.banner.title.failureRate'),
+		key: 'failureRate',
+		value(row) {
+			return (
+				smartDecimal(transformInsightsFailureRate(row.failureRate)) +
+				INSIGHTS_UNIT_MAPPING.failureRate(row.failureRate)
+			);
+		},
+		disableSort: !props.isDashboardEnabled,
+	},
+	{
+		title: i18n.baseText('insights.banner.title.timeSaved'),
+		key: 'timeSaved',
+		value(row) {
+			return (
+				smartDecimal(transformInsightsTimeSaved(row.timeSaved)) +
+				INSIGHTS_UNIT_MAPPING.timeSaved(row.timeSaved)
+			);
+		},
+		disableSort: !props.isDashboardEnabled,
+	},
+	{
+		title: i18n.baseText('insights.banner.title.averageRunTime'),
+		key: 'averageRunTime',
+		value(row) {
+			return (
+				smartDecimal(transformInsightsAverageRunTime(row.averageRunTime)) +
+				INSIGHTS_UNIT_MAPPING.averageRunTime(row.averageRunTime)
+			);
+		},
+		disableSort: !props.isDashboardEnabled,
+	},
+	{
+		title: i18n.baseText('insights.dashboard.table.projectName'),
+		key: 'projectName',
+		disableSort: true,
+	},
+]);
+
+const sortBy = defineModel<Array<{ id: string; desc: boolean }>>('sortBy');
+const currentPage = ref(0);
+const itemsPerPage = ref(25);
+
+const emit = defineEmits<{
+	'update:options': [
+		payload: {
+			page: number;
+			itemsPerPage: number;
+			sortBy: Array<{ id: string; desc: boolean }>;
+		},
+	];
+}>();
+
+const getWorkflowLink = (item: Item, query?: LocationQueryRaw): RouteLocationRaw => ({
+	name: VIEWS.WORKFLOW,
+	params: {
+		workflowId: item.workflowId,
+	},
+	query,
+});
+
+const trackWorkflowClick = (item: Item) => {
+	telemetry.track('User clicked on workflow from insights table', {
+		workflow_id: item.workflowId,
+	});
+};
+
+watch(sortBy, (newValue) => {
+	telemetry.track('User sorted insights table', {
+		sorted_by: (newValue ?? []).map((item) => ({
+			...item,
+			label: headers.value.find((header) => header.key === item.id)?.title,
+		})),
+	});
+});
+</script>
+
+<template>
+	<div>
+		<N8nHeading bold tag="h3" size="medium" class="mb-s">{{
+			i18n.baseText('insights.dashboard.table.title')
+		}}</N8nHeading>
+		<N8nDataTableServer
+			v-model:sort-by="sortBy"
+			v-model:page="currentPage"
+			v-model:items-per-page="itemsPerPage"
+			:items="rows"
+			:headers="headers"
+			:items-length="tableData.count"
+			@update:options="emit('update:options', $event)"
+		>
+			<template #[`item.workflowName`]="{ item }">
+				<component
+					:is="item.workflowId && item.hasReadAccess ? RouterLink : 'span'"
+					:class="[$style.nameCell, { [$style.link]: item.workflowId && item.hasReadAccess }]"
+					v-bind="
+						item.workflowId && item.hasReadAccess
+							? {
+									to: getWorkflowLink(item),
+									onClick: () => trackWorkflowClick(item),
+								}
+							: {}
+					"
+				>
+					<N8nTooltip
+						:content="
+							item.hasReadAccess
+								? item.workflowName
+								: i18n.baseText('insights.dashboard.table.noAccess')
+						"
+						placement="top"
+					>
+						<div :class="$style.ellipsis">
+							{{ item.workflowName }}
+						</div>
+					</N8nTooltip>
+				</component>
+			</template>
+			<template #[`item.timeSaved`]="{ item, value }">
+				<RouterLink
+					v-if="!item.timeSaved && item.workflowId && item.hasReadAccess"
+					:to="getWorkflowLink(item, { settings: 'true' })"
+					:class="$style.link"
+				>
+					{{ i18n.baseText('insights.dashboard.table.estimate') }}
+				</RouterLink>
+				<template v-else>
+					{{ value }}
+				</template>
+			</template>
+			<template #[`item.projectName`]="{ item }">
+				<N8nTooltip v-if="item.projectName" :content="item.projectName" placement="top">
+					<div :class="$style.ellipsis">
+						{{ item.projectName }}
+					</div>
+				</N8nTooltip>
+				<template v-else> - </template>
+			</template>
+			<template v-if="!isDashboardEnabled" #cover>
+				<div :class="$style.blurryCover">
+					<InsightsPaywall />
+				</div>
+			</template>
+		</N8nDataTableServer>
+	</div>
+</template>
+
+<style lang="scss" module>
+.ellipsis {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	line-height: 1.2;
+	max-width: 100%;
+}
+
+.nameCell {
+	display: flex;
+	height: 100%;
+	align-items: center;
+	max-width: 100%;
+	overflow: hidden;
+	min-width: 0;
+	& > * {
+		min-width: 0;
+		overflow: hidden;
+	}
+}
+
+.link {
+	color: var(--color--text);
+	text-decoration: underline;
+	&:hover {
+		color: var(--color--text--shade-1);
+	}
+}
+
+.blurryCover {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 1;
+	backdrop-filter: blur(10px);
+
+	&::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: var(--color--foreground--tint-2);
+		opacity: 0.5;
+		z-index: -1;
+	}
+}
+</style>

package/src/index.ts

@@ -0,0 +1,4 @@
+// The module's public entry for consumers: the store and the summary widget the
+// shell renders on its list views.
+export { useInsightsStore } from './insights.store';
+export { default as InsightsSummary } from './components/InsightsSummary.vue';

package/src/insights.api.test.ts

@@ -0,0 +1,435 @@
+import { getLocalTimeZone } from '@internationalized/date';
+import type {
+	InsightsSummary,
+	InsightsByTime,
+	InsightsByWorkflow,
+	ListInsightsWorkflowQueryDto,
+	InsightsDateFilterDto,
+} from '@n8n/api-types';
+import { makeRestApiRequest } from '@n8n/rest-api-client';
+import { expect } from 'vitest';
+
+import {
+	fetchInsightsSummary,
+	fetchInsightsByTime,
+	fetchInsightsTimeSaved,
+	fetchInsightsByWorkflow,
+	serializeInsightsFilter,
+} from './insights.api';
+
+vi.mock('@n8n/rest-api-client', () => ({
+	makeRestApiRequest: vi.fn(),
+}));
+
+describe('insights.api', () => {
+	const mockContext = { baseUrl: '/rest', pushRef: 'test-push-ref' };
+	const timeZone = getLocalTimeZone();
+
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	describe('serializeInsightsFilter', () => {
+		it('should return undefined when filter is undefined', () => {
+			const result = serializeInsightsFilter(undefined);
+			expect(result).toBeUndefined();
+		});
+
+		it('should serialize filter with Date objects to ISO strings', () => {
+			const startDate = new Date('2025-01-01T00:00:00.000Z');
+			const endDate = new Date('2025-01-31T23:59:59.999Z');
+
+			const filter: InsightsDateFilterDto = {
+				startDate,
+				endDate,
+			};
+
+			const result = serializeInsightsFilter(filter);
+
+			expect(result).toEqual({
+				startDate: '2025-01-01T00:00:00.000Z',
+				endDate: '2025-01-31T23:59:59.999Z',
+				timeZone,
+			});
+		});
+
+		it('should handle filter with only startDate', () => {
+			const startDate = new Date('2025-01-01T00:00:00.000Z');
+
+			const filter: InsightsDateFilterDto = {
+				startDate,
+			};
+
+			const result = serializeInsightsFilter(filter);
+
+			expect(result).toEqual({
+				startDate: '2025-01-01T00:00:00.000Z',
+				timeZone,
+			});
+		});
+
+		it('should handle filter with only endDate', () => {
+			const endDate = new Date('2025-01-31T23:59:59.999Z');
+
+			const filter: InsightsDateFilterDto = {
+				endDate,
+			};
+
+			const result = serializeInsightsFilter(filter);
+
+			expect(result).toEqual({
+				endDate: '2025-01-31T23:59:59.999Z',
+				timeZone,
+			});
+		});
+
+		it('should preserve additional filter properties', () => {
+			const startDate = new Date('2025-01-01T00:00:00.000Z');
+			const endDate = new Date('2025-01-31T23:59:59.999Z');
+
+			const filter: ListInsightsWorkflowQueryDto = {
+				startDate,
+				endDate,
+				take: 10,
+				skip: 0,
+				sortBy: 'workflowName:asc',
+			};
+
+			const result = serializeInsightsFilter(filter);
+
+			expect(result).toEqual({
+				startDate: '2025-01-01T00:00:00.000Z',
+				endDate: '2025-01-31T23:59:59.999Z',
+				take: 10,
+				skip: 0,
+				sortBy: 'workflowName:asc',
+				timeZone,
+			});
+		});
+
+		it('should handle empty filter object', () => {
+			const filter: InsightsDateFilterDto = {};
+
+			const result = serializeInsightsFilter(filter);
+
+			expect(result).toEqual({ timeZone });
+		});
+
+		it('should include the local timeZone in the serialized output', () => {
+			const filter: InsightsDateFilterDto = {
+				startDate: new Date('2025-01-01T00:00:00.000Z'),
+			};
+
+			const result = serializeInsightsFilter(filter);
+
+			expect(result?.timeZone).toBe(getLocalTimeZone());
+		});
+	});
+
+	describe('fetchInsightsSummary', () => {
+		it('should make GET request to /insights/summary without filter', async () => {
+			const mockSummary: InsightsSummary = {
+				total: { value: 100, deviation: null, unit: 'count' },
+				failed: { value: 20, deviation: 5, unit: 'count' },
+				failureRate: { value: 0.2, deviation: -0.05, unit: 'ratio' },
+				timeSaved: { value: 120, deviation: 30, unit: 'minute' },
+				averageRunTime: { value: 5000, deviation: 200, unit: 'millisecond' },
+			};
+
+			vi.mocked(makeRestApiRequest).mockResolvedValue(mockSummary);
+
+			const result = await fetchInsightsSummary(mockContext);
+
+			expect(makeRestApiRequest).toHaveBeenCalledWith(
+				mockContext,
+				'GET',
+				'/insights/summary',
+				undefined,
+			);
+			expect(result).toEqual(mockSummary);
+		});
+
+		it('should make GET request to /insights/summary with serialized filter', async () => {
+			const startDate = new Date('2025-01-01T00:00:00.000Z');
+			const endDate = new Date('2025-01-31T23:59:59.999Z');
+
+			const filter: InsightsDateFilterDto = {
+				startDate,
+				endDate,
+			};
+
+			const mockSummary: InsightsSummary = {
+				total: { value: 50, deviation: null, unit: 'count' },
+				failed: { value: 10, deviation: 2, unit: 'count' },
+				failureRate: { value: 0.2, deviation: -0.03, unit: 'ratio' },
+				timeSaved: { value: 60, deviation: 15, unit: 'minute' },
+				averageRunTime: { value: 3000, deviation: 100, unit: 'millisecond' },
+			};
+
+			vi.mocked(makeRestApiRequest).mockResolvedValue(mockSummary);
+
+			const result = await fetchInsightsSummary(mockContext, filter);
+
+			expect(makeRestApiRequest).toHaveBeenCalledWith(mockContext, 'GET', '/insights/summary', {
+				startDate: '2025-01-01T00:00:00.000Z',
+				endDate: '2025-01-31T23:59:59.999Z',
+				timeZone,
+			});
+			expect(result).toEqual(mockSummary);
+		});
+	});
+
+	describe('fetchInsightsByTime', () => {
+		it('should make GET request to /insights/by-time without filter', async () => {
+			const mockInsightsByTime: InsightsByTime[] = [
+				{
+					date: '2025-01-01T00:00:00.000Z',
+					values: {
+						total: 10,
+						succeeded: 8,
+						failed: 2,
+						failureRate: 0.2,
+						averageRunTime: 5000,
+						timeSaved: 30,
+					},
+				},
+				{
+					date: '2025-01-02T00:00:00.000Z',
+					values: {
+						total: 15,
+						succeeded: 12,
+						failed: 3,
+						failureRate: 0.2,
+						averageRunTime: 4500,
+						timeSaved: 45,
+					},
+				},
+			];
+
+			vi.mocked(makeRestApiRequest).mockResolvedValue(mockInsightsByTime);
+
+			const result = await fetchInsightsByTime(mockContext);
+
+			expect(makeRestApiRequest).toHaveBeenCalledWith(
+				mockContext,
+				'GET',
+				'/insights/by-time',
+				undefined,
+			);
+			expect(result).toEqual(mockInsightsByTime);
+		});
+
+		it('should make GET request to /insights/by-time with serialized filter', async () => {
+			const startDate = new Date('2025-01-01T00:00:00.000Z');
+			const endDate = new Date('2025-01-31T23:59:59.999Z');
+
+			const filter: InsightsDateFilterDto = {
+				startDate,
+				endDate,
+			};
+
+			const mockInsightsByTime: InsightsByTime[] = [
+				{
+					date: '2025-01-15T00:00:00.000Z',
+					values: {
+						total: 20,
+						succeeded: 18,
+						failed: 2,
+						failureRate: 0.1,
+						averageRunTime: 4000,
+						timeSaved: 60,
+					},
+				},
+			];
+
+			vi.mocked(makeRestApiRequest).mockResolvedValue(mockInsightsByTime);
+
+			const result = await fetchInsightsByTime(mockContext, filter);
+
+			expect(makeRestApiRequest).toHaveBeenCalledWith(mockContext, 'GET', '/insights/by-time', {
+				startDate: '2025-01-01T00:00:00.000Z',
+				endDate: '2025-01-31T23:59:59.999Z',
+				timeZone,
+			});
+			expect(result).toEqual(mockInsightsByTime);
+		});
+	});
+
+	describe('fetchInsightsTimeSaved', () => {
+		it('should make GET request to /insights/by-time/time-saved without filter', async () => {
+			const mockTimeSaved: InsightsByTime[] = [
+				{
+					date: '2025-01-01T00:00:00.000Z',
+					values: {
+						total: 10,
+						succeeded: 8,
+						failed: 2,
+						failureRate: 0.2,
+						averageRunTime: 5000,
+						timeSaved: 60,
+					},
+				},
+				{
+					date: '2025-01-02T00:00:00.000Z',
+					values: {
+						total: 15,
+						succeeded: 12,
+						failed: 3,
+						failureRate: 0.2,
+						averageRunTime: 4500,
+						timeSaved: 90,
+					},
+				},
+			];
+
+			vi.mocked(makeRestApiRequest).mockResolvedValue(mockTimeSaved);
+
+			const result = await fetchInsightsTimeSaved(mockContext);
+
+			expect(makeRestApiRequest).toHaveBeenCalledWith(
+				mockContext,
+				'GET',
+				'/insights/by-time/time-saved',
+				undefined,
+			);
+			expect(result).toEqual(mockTimeSaved);
+		});
+
+		it('should make GET request to /insights/by-time/time-saved with serialized filter', async () => {
+			const startDate = new Date('2025-01-01T00:00:00.000Z');
+			const endDate = new Date('2025-01-31T23:59:59.999Z');
+
+			const filter: InsightsDateFilterDto = {
+				startDate,
+				endDate,
+			};
+
+			const mockTimeSaved: InsightsByTime[] = [
+				{
+					date: '2025-01-15T00:00:00.000Z',
+					values: {
+						total: 20,
+						succeeded: 18,
+						failed: 2,
+						failureRate: 0.1,
+						averageRunTime: 4000,
+						timeSaved: 120,
+					},
+				},
+			];
+
+			vi.mocked(makeRestApiRequest).mockResolvedValue(mockTimeSaved);
+
+			const result = await fetchInsightsTimeSaved(mockContext, filter);
+
+			expect(makeRestApiRequest).toHaveBeenCalledWith(
+				mockContext,
+				'GET',
+				'/insights/by-time/time-saved',
+				{
+					startDate: '2025-01-01T00:00:00.000Z',
+					endDate: '2025-01-31T23:59:59.999Z',
+					timeZone,
+				},
+			);
+			expect(result).toEqual(mockTimeSaved);
+		});
+	});
+
+	describe('fetchInsightsByWorkflow', () => {
+		it('should make GET request to /insights/by-workflow without filter', async () => {
+			const mockInsightsByWorkflow: InsightsByWorkflow = {
+				data: [
+					{
+						workflowId: 'workflow-1',
+						workflowName: 'Test Workflow 1',
+						hasReadAccess: true,
+						projectId: 'project-1',
+						projectName: 'Test Project',
+						total: 50,
+						succeeded: 40,
+						failed: 10,
+						failureRate: 0.2,
+						runTime: 250000,
+						averageRunTime: 5000,
+						timeSaved: 150,
+					},
+				],
+				count: 1,
+			};
+
+			vi.mocked(makeRestApiRequest).mockResolvedValue(mockInsightsByWorkflow);
+
+			const result = await fetchInsightsByWorkflow(mockContext);
+
+			expect(makeRestApiRequest).toHaveBeenCalledWith(
+				mockContext,
+				'GET',
+				'/insights/by-workflow',
+				undefined,
+			);
+			expect(result).toEqual(mockInsightsByWorkflow);
+		});
+
+		it('should make GET request to /insights/by-workflow with serialized filter', async () => {
+			const startDate = new Date('2025-01-01T00:00:00.000Z');
+			const endDate = new Date('2025-01-31T23:59:59.999Z');
+
+			const filter: ListInsightsWorkflowQueryDto = {
+				startDate,
+				endDate,
+				take: 10,
+				skip: 0,
+				sortBy: 'workflowName:asc',
+			};
+
+			const mockInsightsByWorkflow: InsightsByWorkflow = {
+				data: [
+					{
+						workflowId: 'workflow-1',
+						workflowName: 'Test Workflow 1',
+						hasReadAccess: true,
+						projectId: 'project-1',
+						projectName: 'Test Project 1',
+						total: 30,
+						succeeded: 25,
+						failed: 5,
+						failureRate: 0.17,
+						runTime: 120000,
+						averageRunTime: 4000,
+						timeSaved: 90,
+					},
+					{
+						workflowId: 'workflow-2',
+						workflowName: 'Test Workflow 2',
+						hasReadAccess: true,
+						projectId: 'project-2',
+						projectName: 'Test Project 2',
+						total: 20,
+						succeeded: 18,
+						failed: 2,
+						failureRate: 0.1,
+						runTime: 80000,
+						averageRunTime: 4000,
+						timeSaved: 60,
+					},
+				],
+				count: 2,
+			};
+
+			vi.mocked(makeRestApiRequest).mockResolvedValue(mockInsightsByWorkflow);
+
+			const result = await fetchInsightsByWorkflow(mockContext, filter);
+
+			expect(makeRestApiRequest).toHaveBeenCalledWith(mockContext, 'GET', '/insights/by-workflow', {
+				startDate: '2025-01-01T00:00:00.000Z',
+				endDate: '2025-01-31T23:59:59.999Z',
+				take: 10,
+				skip: 0,
+				sortBy: 'workflowName:asc',
+				timeZone,
+			});
+			expect(result).toEqual(mockInsightsByWorkflow);
+		});
+	});
+});