@n8n/frontend-module-insights 0.1.0

package/src/components/InsightsDashboard.vue

@@ -0,0 +1,426 @@
+<script setup lang="ts">
+import type { DateValue } from '@internationalized/date';
+import { getLocalTimeZone, parseDate, today } from '@internationalized/date';
+import type { InsightsSummaryType } from '@n8n/api-types';
+import { useDocumentTitle } from '@n8n/composables/useDocumentTitle';
+import { useToast } from '@n8n/composables/useToast';
+import { N8nHeading, N8nSpinner } from '@n8n/design-system';
+import { componentRegistry, type SlotProjectSelection } from '@n8n/frontend-module-sdk';
+import { useI18n } from '@n8n/i18n';
+import { ResponseError } from '@n8n/rest-api-client/utils';
+import { computed, defineAsyncComponent, onMounted, ref, shallowRef, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { useInsightsStore } from '../insights.store';
+import InsightsSummary from './InsightsSummary.vue';
+import { INSIGHT_TYPES } from '../insights.constants';
+import { getAdjustedDateRange, getTimeRangeLabels, timeRangeMappings } from '../insights.utils';
+import InsightsDataRangePicker from './InsightsDataRangePicker.vue';
+import InsightsDateRangeAlert from './InsightsDateRangeAlert.vue';
+
+const InsightsPaywall = defineAsyncComponent(async () => await import('./InsightsPaywall.vue'));
+const InsightsChartTotal = defineAsyncComponent(
+	async () => await import('./charts/InsightsChartTotal.vue'),
+);
+const InsightsChartFailed = defineAsyncComponent(
+	async () => await import('./charts/InsightsChartFailed.vue'),
+);
+const InsightsChartFailureRate = defineAsyncComponent(
+	async () => await import('./charts/InsightsChartFailureRate.vue'),
+);
+const InsightsChartTimeSaved = defineAsyncComponent(
+	async () => await import('./charts/InsightsChartTimeSaved.vue'),
+);
+const InsightsChartAverageRuntime = defineAsyncComponent(
+	async () => await import('./charts/InsightsChartAverageRuntime.vue'),
+);
+const InsightsTableWorkflows = defineAsyncComponent(
+	async () => await import('./tables/InsightsTableWorkflows.vue'),
+);
+
+const props = defineProps<{
+	insightType: InsightsSummaryType;
+}>();
+
+const route = useRoute();
+const i18n = useI18n();
+const toast = useToast();
+
+const insightsStore = useInsightsStore();
+
+// The project picker is shell-hosted: its list, permissions and search live in
+// `features/collaboration/projects`, above this module. Unregistered (a module's
+// own test run) means no picker, and the dashboard reads as "all projects".
+const projectFilter = computed(() => componentRegistry.get('project-filter'));
+const isTimeSavedRoute = computed(() => route.params.insightType === INSIGHT_TYPES.TIME_SAVED);
+
+const chartComponents = computed(() => ({
+	total: InsightsChartTotal,
+	failed: InsightsChartFailed,
+	failureRate: InsightsChartFailureRate,
+	timeSaved: InsightsChartTimeSaved,
+	averageRunTime: InsightsChartAverageRuntime,
+}));
+
+const transformFilter = ({ id, desc }: { id: string; desc: boolean }) => {
+	const key = id as InsightsSummaryType;
+	const order = desc ? 'desc' : 'asc';
+	return `${key}:${order}` as const;
+};
+
+const sortTableBy = ref([{ id: props.insightType, desc: true }]);
+
+const granularity = computed(() => {
+	const { start, end } = range.value;
+	if (!start || !end) return 'day';
+
+	const comparison = end.compare(start);
+
+	if (comparison <= 0) return 'hour';
+	if (comparison <= 30) return 'day';
+	return 'week';
+});
+const selectedProject = ref<SlotProjectSelection>(null);
+
+const maxDate = today(getLocalTimeZone());
+
+const maxLicensedDate =
+	insightsStore.dateRanges.toReversed().find((dateRange) => dateRange.licensed)?.key ?? 'week';
+
+const timeRangeLabels = getTimeRangeLabels();
+const presets = computed(() =>
+	insightsStore.dateRanges.map((item) => {
+		return {
+			value: timeRangeMappings[item.key],
+			label: timeRangeLabels[item.key],
+			disabled: !item.licensed,
+		};
+	}),
+);
+
+const maximumValue = shallowRef(maxDate.copy());
+const minimumValue = shallowRef(
+	maxDate.copy().subtract({ days: timeRangeMappings[maxLicensedDate] }),
+);
+
+function getDefaultRangeStart(): DateValue {
+	const sevenDaysAgo = maxDate.copy().subtract({ days: 7 });
+	if (insightsStore.earliestDataDate) {
+		const earliestDate = parseDate(insightsStore.earliestDataDate.substring(0, 10));
+		// If data only starts within the last 7 days, begin from first data point
+		return earliestDate.compare(sevenDaysAgo) > 0 ? earliestDate : sevenDaysAgo;
+	}
+	return sevenDaysAgo;
+}
+
+const range = shallowRef<{
+	start: DateValue;
+	end: DateValue;
+}>({
+	start: getDefaultRangeStart(),
+	end: maxDate.copy(),
+});
+
+/**
+ * Converts the range to adjusted Date objects for API calls
+ */
+const getFilteredRange = () => {
+	return getAdjustedDateRange(range.value);
+};
+
+const fetchPaginatedTableData = ({
+	page = 0,
+	itemsPerPage = 25,
+	sortBy,
+	projectId = selectedProject.value?.id,
+}: {
+	page?: number;
+	itemsPerPage?: number;
+	sortBy: Array<{ id: string; desc: boolean }>;
+	projectId?: string;
+}) => {
+	const skip = page * itemsPerPage;
+	const take = itemsPerPage;
+
+	const sortKey = sortBy.length ? transformFilter(sortBy[0]) : undefined;
+
+	const { startDate, endDate } = getFilteredRange();
+	void insightsStore.table.execute(0, {
+		skip,
+		take,
+		sortBy: sortKey,
+		startDate,
+		endDate,
+		projectId,
+	});
+};
+
+let latestFetchId = 0;
+
+watch(
+	() => [props.insightType, selectedProject.value, range.value],
+	async () => {
+		const fetchId = ++latestFetchId;
+
+		sortTableBy.value = [{ id: props.insightType, desc: true }];
+
+		const { startDate, endDate } = getFilteredRange();
+		const projectId = selectedProject.value?.id;
+
+		if (insightsStore.isSummaryEnabled) {
+			void insightsStore.summary.execute(0, { startDate, endDate, projectId });
+		}
+
+		const chartsPromise = insightsStore.charts.execute(0, { startDate, endDate, projectId });
+
+		if (insightsStore.isDashboardEnabled) {
+			fetchPaginatedTableData({
+				sortBy: sortTableBy.value,
+				projectId,
+			});
+		}
+
+		await chartsPromise;
+
+		// A newer selection/range change has superseded this request.
+		if (fetchId !== latestFetchId) {
+			return;
+		}
+
+		// Callers may receive HTTP 403 if they have no `workflow:read` permission for a project.
+		// Revert to "All projects" instead of leaving the dashboard stuck on an all-zero, misleading state.
+		const chartsError = insightsStore.charts.error;
+		if (projectId && chartsError instanceof ResponseError && chartsError.httpStatusCode === 403) {
+			toast.showError(chartsError, i18n.baseText('insights.dashboard.error.forbidden.title'), {
+				message: i18n.baseText('insights.dashboard.error.forbidden.message'),
+			});
+			selectedProject.value = null;
+		}
+	},
+	{
+		immediate: true,
+	},
+);
+
+onMounted(() => {
+	useDocumentTitle().set(i18n.baseText('insights.heading'));
+});
+</script>
+
+<template>
+	<div :class="$style.insightsView">
+		<div :class="$style.insightsContainer">
+			<N8nHeading bold tag="h2" size="xlarge">
+				{{ i18n.baseText('insights.dashboard.title') }}
+			</N8nHeading>
+
+			<div class="mt-s" style="display: flex; gap: 12px; align-items: center">
+				<component
+					:is="projectFilter"
+					v-if="projectFilter"
+					v-model="selectedProject"
+					:placeholder="i18n.baseText('insights.dashboard.search.placeholder')"
+					size="mini"
+					:class="$style.projectSelect"
+				/>
+
+				<InsightsDataRangePicker
+					v-model="range"
+					:max-value="maximumValue"
+					:min-value="minimumValue"
+					:presets
+				/>
+			</div>
+
+			<InsightsDateRangeAlert
+				:key="range.start.toString()"
+				class="mt-s"
+				:earliest-data-date="insightsStore.earliestDataDate"
+				:range-start="range.start"
+				:range-end="range.end"
+			/>
+
+			<InsightsSummary
+				v-if="insightsStore.isSummaryEnabled"
+				:summary="insightsStore.summary.state"
+				:loading="insightsStore.summary.isLoading"
+				:start-date="range.start"
+				:end-date="range.end"
+				:class="$style.insightsBanner"
+			/>
+			<div :class="$style.insightsContent">
+				<div
+					v-if="insightsStore.isDashboardEnabled || isTimeSavedRoute"
+					: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">
+						<N8nHeading bold tag="h3" size="medium" class="mb-s">{{
+							i18n.baseText('insights.dashboard.chart.title', { interpolate: { granularity } })
+						}}</N8nHeading>
+						<component
+							:is="chartComponents[props.insightType]"
+							:type="props.insightType"
+							:data="insightsStore.charts.state"
+							:granularity
+							:start-date="range.start.toString()"
+							:end-date="range.end.toString()"
+						/>
+					</div>
+					<div :class="$style.insightsTableWrapper">
+						<InsightsTableWorkflows
+							v-model:sort-by="sortTableBy"
+							:data="insightsStore.table.state"
+							:loading="insightsStore.table.isLoading"
+							:is-dashboard-enabled="insightsStore.isDashboardEnabled"
+							@update:options="fetchPaginatedTableData"
+						/>
+					</div>
+				</div>
+				<InsightsPaywall v-else />
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" module>
+.insightsView {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	gap: 30px;
+	overflow: auto;
+}
+
+.insightsContainer {
+	width: 100%;
+	max-width: var(--content-container--width);
+	padding: var(--spacing--lg) var(--spacing--2xl);
+	margin: 0 auto;
+}
+
+.insightsBanner {
+	margin-bottom: 0;
+
+	ul {
+		border-bottom-left-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+}
+
+.insightsContent {
+	padding: var(--spacing--lg) 0;
+	border: var(--border-width) var(--border-style) var(--color--foreground);
+	border-top: 0;
+	border-bottom-left-radius: 6px;
+	border-bottom-right-radius: 6px;
+	background: var(--color--background--light-3);
+}
+
+.insightsContentWrapper {
+	position: relative;
+	overflow-x: hidden;
+}
+
+.insightsChartWrapper {
+	position: relative;
+	height: 292px;
+	padding: 0 var(--spacing--lg) var(--spacing--lg);
+	z-index: 1;
+}
+
+.insightsTableWrapper {
+	position: relative;
+	padding: var(--spacing--lg) var(--spacing--lg) 0;
+	z-index: 1;
+}
+
+.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--light-3);
+		opacity: 0.75;
+		z-index: 1;
+	}
+}
+
+.projectSelect {
+	min-width: 200px;
+	:global(.el-input--suffix .el-input__inner) {
+		padding-right: 26px;
+	}
+}
+
+.PresetButton {
+	background-color: transparent;
+	border: none;
+	transition-property:
+		color,
+		background-color,
+		border-color,
+		text-decoration-color,
+		fill,
+		stroke,
+		opacity,
+		box-shadow,
+		transform,
+		filter,
+		backdrop-filter,
+		-webkit-backdrop-filter;
+	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	transition-duration: 0.15s;
+	border-radius: 0.375rem;
+	padding-left: 0.75rem;
+	padding-right: 0.75rem;
+	padding-top: 0.5rem;
+	padding-bottom: 0.5rem;
+	text-align: left;
+	font-size: 13px;
+	cursor: pointer;
+	color: var(--color--text);
+	font-weight: 400;
+	&:hover {
+		background-color: var(--color--foreground--tint-1);
+	}
+}
+</style>

package/src/components/InsightsDataRangePicker.vue

@@ -0,0 +1,195 @@
+<script lang="ts" setup>
+import { getLocalTimeZone, isToday } from '@internationalized/date';
+import { useTelemetry } from '@n8n/composables/useTelemetry';
+import type {
+	DateRange,
+	DateValue,
+	N8nDateRangePickerProps,
+	N8nDateRangePickerRootEmits,
+} from '@n8n/design-system';
+import { N8nButton, N8nDateRangePicker, N8nIcon } from '@n8n/design-system';
+import { computed, ref, shallowRef, watch } from 'vue';
+
+import { formatDateRange, getAdjustedDateRange } from '../insights.utils';
+import InsightsUpgradeModal from './InsightsUpgradeModal.vue';
+
+type Props = Pick<N8nDateRangePickerProps, 'maxValue' | 'minValue'>;
+type Value = {
+	start: DateValue;
+	end: DateValue;
+};
+
+const props = defineProps<
+	Required<Props> & {
+		modelValue: Value;
+		presets: Array<{ value: number; label: string; disabled?: boolean }>;
+	}
+>();
+const emit = defineEmits<N8nDateRangePickerRootEmits>();
+const telemetry = useTelemetry();
+
+const upgradeModal = ref(false);
+function showUpgradeModal() {
+	upgradeModal.value = true;
+}
+
+const actionType = ref<'preset' | 'custom'>('custom');
+
+function getDaysDiff({ start, end }: DateRange) {
+	if (!start) return 0;
+	if (!end) return 0;
+
+	return end.compare(start);
+}
+
+function isBeforeOrSame(dateToCompare: DateValue, referenceDate: DateValue): boolean {
+	return dateToCompare.compare(referenceDate) <= 0;
+}
+
+function isAfterOrSame(dateToCompare: DateValue, referenceDate: DateValue) {
+	return dateToCompare.compare(referenceDate) >= 0;
+}
+
+function isEqual(dateToCompare?: DateValue, referenceDate?: DateValue) {
+	if (!dateToCompare || !referenceDate) return false;
+	return dateToCompare.compare(referenceDate) === 0;
+}
+
+function isValidDateRange({ start, end }: DateRange) {
+	if (!start) return false;
+	if (!end) return false;
+
+	return isBeforeOrSame(end, props.maxValue) && isAfterOrSame(start, props.minValue);
+}
+
+const range = shallowRef<N8nDateRangePickerProps['modelValue']>({
+	start: props.modelValue.start?.copy(),
+	end: props.modelValue.end?.copy(),
+});
+
+function syncWithParentValue() {
+	if (
+		!isEqual(range.value?.start, props.modelValue.start) ||
+		!isEqual(range.value?.end, props.modelValue.end)
+	) {
+		range.value = {
+			start: props.modelValue.start?.copy(),
+			end: props.modelValue.end?.copy(),
+		};
+	}
+}
+
+let lastSyncedRange: DateRange | null = null;
+
+function syncData(isOpen: boolean) {
+	if (isOpen) {
+		syncWithParentValue();
+		return;
+	}
+
+	const normalizedRange: DateRange = {
+		start: range.value?.start?.copy(),
+		end: range.value?.end?.copy() ?? range.value?.start?.copy(),
+	};
+
+	if (!isValidDateRange(normalizedRange)) {
+		console.error('Invalid date range selected', normalizedRange);
+		syncWithParentValue();
+		return;
+	}
+
+	// Check if this is the same range we just synced (prevent double sync)
+	if (
+		lastSyncedRange &&
+		isEqual(normalizedRange.start, lastSyncedRange.start) &&
+		isEqual(normalizedRange.end, lastSyncedRange.end)
+	) {
+		return;
+	}
+
+	if (
+		isEqual(normalizedRange.start, props.modelValue.start) &&
+		isEqual(normalizedRange.end, props.modelValue.end)
+	) {
+		return;
+	}
+
+	lastSyncedRange = normalizedRange;
+	emit('update:modelValue', normalizedRange);
+
+	const { startDate, endDate } = getAdjustedDateRange(normalizedRange);
+
+	const trackData = {
+		start_date: startDate.toISOString(),
+		end_date: endDate.toISOString(),
+		range_length_days: getDaysDiff(normalizedRange),
+		type: actionType.value,
+	};
+
+	telemetry.track('User updated insights time range', trackData);
+}
+const open = ref(false);
+watch(open, (opened) => {
+	if (opened) {
+		actionType.value = 'custom';
+	}
+	syncData(opened);
+});
+
+function setPresetRange(days: number) {
+	range.value = {
+		start: props.maxValue.copy().subtract({ days }),
+		end: props.maxValue.copy(),
+	};
+	actionType.value = 'preset';
+	open.value = false;
+}
+
+const formattedRange = computed(() => {
+	const { start, end } = props.modelValue;
+
+	if (!start) return 'Select range';
+
+	return formatDateRange({ start, end });
+});
+
+function isActiveRange(presetValue: number) {
+	if (!isToday(props.modelValue.end, getLocalTimeZone())) return false;
+
+	return props.modelValue.end.compare(props.modelValue.start) === presetValue;
+}
+</script>
+
+<template>
+	<!-- eslint-disable vue/no-multiple-template-root -->
+	<N8nDateRangePicker v-model="range" v-model:open="open" :max-value :min-value>
+		<template #trigger>
+			<N8nButton variant="subtle" icon="calendar">{{ formattedRange }}</N8nButton>
+		</template>
+		<template #presets>
+			<N8nButton
+				v-for="preset in presets"
+				:key="preset.value"
+				:class="$style.PresetButton"
+				:variant="isActiveRange(preset.value) ? 'solid' : 'outline'"
+				size="small"
+				@click="preset.disabled ? showUpgradeModal() : setPresetRange(preset.value)"
+			>
+				{{ preset.label }}
+				<N8nIcon v-if="preset.disabled" icon="lock" :class="$style.LockIcon" />
+			</N8nButton>
+		</template>
+	</N8nDateRangePicker>
+	<InsightsUpgradeModal v-model="upgradeModal" />
+</template>
+
+<style module>
+.PresetButton {
+	--button--border-color: transparent;
+	text-align: left;
+	display: flex;
+}
+.LockIcon {
+	margin-left: auto;
+}
+</style>