@atom8n/n8n-editor-ui 2.2.0

package/dist/assets/InsightsSummary-cmN1lHDm.js

@@ -0,0 +1,210 @@
+import { C as computed, Cn as toDisplayString, D as createElementBlock, E as createCommentVNode, Gt as unref, It as ref, M as createVNode, P as defineComponent, T as createBlock, Z as onMounted, _ as Fragment, bt as withCtx, c as useCssModule, et as openBlock, it as renderList, j as createTextVNode, ot as resolveComponent, vn as normalizeClass, w as createBaseVNode } from "./vue.runtime.esm-bundler-tP5dCd7J.js";
+import { it as I18nT, rt as useI18n } from "./core-CRbPymLT.js";
+import { Cn as N8nIcon_default, bn as N8nText_default, ht as N8nTooltip_default, mt as N8nLink_default, yn as N8nCallout_default } from "./src-jviYSG25.js";
+import { t as __plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BwBpWJRZ.js";
+import { k as useTelemetry, ms as useSettingsStore } from "./builder.store-Czk2ipDE.js";
+import { _ as useRoute } from "./get-BcEmeOxn.js";
+import { Ro as VIEWS } from "./constants-C8OH4tTq.js";
+import { i as INSIGHTS_UNIT_IMPACT_MAPPING, o as INSIGHT_IMPACT_TYPES } from "./insights.constants-BkJCYJTL.js";
+import { n as getMatchingPreset, r as getTimeRangeLabels, t as formatDateRange } from "./insights.utils-CcLXdrrz.js";
+import { t as smartDecimal } from "./smartDecimal-DAZl4HKA.js";
+var _hoisted_1 = { "data-test-id": "insights-summary-tabs" };
+var _hoisted_2 = ["data-test-id"];
+var _hoisted_3 = ["href"];
+var _hoisted_4 = { key: 1 };
+var INSIGHTS_QUEUE_MODE_WARNING_DISMISSED_KEY = "n8n-insights-queue-mode-warning-dismissed";
+var InsightsSummary_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "InsightsSummary",
+	props: {
+		summary: {},
+		startDate: {},
+		endDate: {},
+		loading: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const i18n = useI18n();
+		const route = useRoute();
+		const $style = useCssModule();
+		const telemetry = useTelemetry();
+		const settingsStore = useSettingsStore();
+		const timeRangeLabels = getTimeRangeLabels();
+		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 displayDateRangeLabel = computed(() => {
+			const timeRangeKey = getMatchingPreset({
+				start: props.startDate,
+				end: props.endDate
+			});
+			if (timeRangeKey) return timeRangeLabels[timeRangeKey];
+			return formatDateRange({
+				start: props.startDate,
+				end: props.endDate
+			});
+		});
+		const summaryTitles = computed(() => ({
+			total: i18n.baseText("insights.banner.title.total"),
+			failed: i18n.baseText("insights.banner.title.failed"),
+			failureRate: i18n.baseText("insights.banner.title.failureRate"),
+			timeSaved: i18n.baseText("insights.banner.title.timeSaved"),
+			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,
+			to: {
+				name: VIEWS.INSIGHTS,
+				params: { insightType: s.id },
+				query: route.query
+			}
+		})));
+		const getImpactStyle = (id, value) => {
+			const impact = INSIGHTS_UNIT_IMPACT_MAPPING[id];
+			if (value === 0 || impact === INSIGHT_IMPACT_TYPES.NEUTRAL) return $style.neutral;
+			if (impact === INSIGHT_IMPACT_TYPES.POSITIVE) return value > 0 ? $style.positive : $style.negative;
+			if (impact === INSIGHT_IMPACT_TYPES.NEGATIVE) return value < 0 ? $style.positive : $style.negative;
+			return $style.neutral;
+		};
+		const trackTabClick = (insightType) => {
+			telemetry.track(`User clicked ${summaryTitles.value[insightType]}`, { referrer: route.name === VIEWS.INSIGHTS ? "Dashboard" : "Overview" });
+		};
+		return (_ctx, _cache) => {
+			const _component_RouterLink = resolveComponent("RouterLink");
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref($style).insightsWrapper) }, [shouldShowQueueModeWarning.value ? (openBlock(), createBlock(unref(N8nCallout_default), {
+				key: 0,
+				class: normalizeClass(unref($style).queueModeWarning),
+				theme: "warning",
+				"data-test-id": "insights-queue-mode-warning",
+				"round-corners": ""
+			}, {
+				trailingContent: withCtx(() => [createVNode(unref(N8nIcon_default), {
+					icon: "x",
+					title: unref(i18n).baseText("generic.dismiss"),
+					class: "clickable",
+					"data-test-id": "insights-queue-mode-warning-close",
+					onClick: dismissQueueModeWarning
+				}, null, 8, ["title"])]),
+				default: withCtx(() => [createVNode(unref(N8nText_default), {
+					color: "text-base",
+					size: "small"
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("insights.banner.queueMode.warning")) + " ", 1), createVNode(unref(N8nLink_default), {
+						size: "small",
+						href: unref(i18n).baseText("insights.banner.queueMode.warning.link.url"),
+						"new-window": "",
+						theme: "text",
+						underline: false
+					}, {
+						default: withCtx(() => [createBaseVNode("span", { class: normalizeClass(unref($style).underlined) }, toDisplayString(unref(i18n).baseText("insights.banner.queueMode.warning.link.text")), 3), _cache[0] || (_cache[0] = createTextVNode(" ↗ "))]),
+						_: 1
+					}, 8, ["href"])]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["class"])) : createCommentVNode("", true), createBaseVNode("div", { class: normalizeClass(unref($style).insights) }, [createBaseVNode("ul", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(summaryWithRouteLocations.value, ({ id, value, deviation, deviationUnit, unit, to }) => {
+				return openBlock(), createElementBlock("li", {
+					key: id,
+					"data-test-id": `insights-summary-tab-${id}`
+				}, [createVNode(unref(N8nTooltip_default), {
+					placement: unref(route).name === unref(VIEWS).INSIGHTS ? "bottom" : "top",
+					disabled: !(summaryHasNoData.value && id === "total"),
+					"show-after": 500
+				}, {
+					content: withCtx(() => [createVNode(unref(I18nT), {
+						keypath: "insights.banner.noData.tooltip",
+						scope: "global"
+					}, {
+						link: withCtx(() => [createBaseVNode("a", {
+							href: unref(i18n).baseText("insights.banner.noData.tooltip.link.url"),
+							target: "_blank"
+						}, toDisplayString(unref(i18n).baseText("insights.banner.noData.tooltip.link")), 9, _hoisted_3)]),
+						_: 1
+					})]),
+					default: withCtx(() => [createVNode(_component_RouterLink, {
+						to,
+						"exact-active-class": unref($style).activeTab,
+						onClick: ($event) => trackTabClick(id)
+					}, {
+						default: withCtx(() => [
+							createBaseVNode("strong", null, [createVNode(unref(N8nTooltip_default), {
+								placement: "bottom",
+								disabled: id !== "timeSaved"
+							}, {
+								content: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("insights.banner.title.timeSaved.tooltip")), 1)]),
+								default: withCtx(() => [createTextVNode(" " + toDisplayString(summaryTitles.value[id]), 1)]),
+								_: 2
+							}, 1032, ["disabled"])]),
+							createBaseVNode("small", { class: normalizeClass(unref($style).days) }, toDisplayString(displayDateRangeLabel.value), 3),
+							value === 0 && id === "timeSaved" ? (openBlock(), createElementBlock("span", {
+								key: 0,
+								class: normalizeClass(unref($style).empty)
+							}, [_cache[1] || (_cache[1] = createBaseVNode("em", null, "--", -1)), createBaseVNode("small", null, [createVNode(unref(N8nTooltip_default), { placement: "bottom" }, {
+								content: withCtx(() => [createVNode(unref(I18nT), {
+									keypath: "insights.banner.timeSaved.tooltip",
+									scope: "global"
+								}, {
+									link: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("insights.banner.timeSaved.tooltip.link.text")), 1)]),
+									_: 1
+								})]),
+								default: withCtx(() => [createVNode(unref(N8nIcon_default), {
+									class: normalizeClass(unref($style).icon),
+									icon: "info",
+									size: "medium"
+								}, null, 8, ["class"])]),
+								_: 1
+							})])], 2)) : (openBlock(), createElementBlock("span", _hoisted_4, [createBaseVNode("em", null, [createTextVNode(toDisplayString(unref(smartDecimal)(value).toLocaleString("en-US")) + " ", 1), createBaseVNode("i", null, toDisplayString(unit), 1)]), deviation !== null ? (openBlock(), createElementBlock("small", {
+								key: 0,
+								class: normalizeClass(getImpactStyle(id, deviation))
+							}, [createVNode(unref(N8nIcon_default), {
+								class: normalizeClass([unref($style).icon, getImpactStyle(id, deviation)]),
+								icon: deviation === 0 ? "chevron-right" : deviation > 0 ? "chevron-up" : "chevron-down"
+							}, null, 8, ["class", "icon"]), createVNode(unref(N8nTooltip_default), {
+								placement: "bottom",
+								disabled: id !== "failureRate"
+							}, {
+								content: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("insights.banner.failureRate.deviation.tooltip")), 1)]),
+								default: withCtx(() => [createTextVNode(" " + toDisplayString(unref(smartDecimal)(Math.abs(deviation)).toLocaleString("en-US")) + toDisplayString(deviationUnit), 1)]),
+								_: 2
+							}, 1032, ["disabled"])], 2)) : createCommentVNode("", true)]))
+						]),
+						_: 2
+					}, 1032, [
+						"to",
+						"exact-active-class",
+						"onClick"
+					])]),
+					_: 2
+				}, 1032, ["placement", "disabled"])], 8, _hoisted_2);
+			}), 128))])], 2)], 2);
+		};
+	}
+});
+var InsightsSummary_vue_vue_type_style_index_0_lang_module_default = {
+	insightsWrapper: "_insightsWrapper_1vltt_123",
+	insights: "_insights_1vltt_123",
+	activeTab: "_activeTab_1vltt_166",
+	days: "_days_1vltt_179",
+	empty: "_empty_1vltt_190",
+	icon: "_icon_1vltt_201",
+	noData: "_noData_1vltt_231",
+	positive: "_positive_1vltt_236",
+	negative: "_negative_1vltt_240",
+	neutral: "_neutral_1vltt_244",
+	loading: "_loading_1vltt_259",
+	queueModeWarning: "_queueModeWarning_1vltt_270",
+	underlined: "_underlined_1vltt_276"
+};
+var InsightsSummary_default = /* @__PURE__ */ __plugin_vue_export_helper_default(InsightsSummary_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": InsightsSummary_vue_vue_type_style_index_0_lang_module_default }]]);
+export { InsightsSummary_default as t };

package/dist/assets/InsightsTableWorkflows-CqcC3IbQ.js

@@ -0,0 +1,203 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./InsightsPaywall-C8zLLKe8.js","./_plugin-vue_export-helper-BwBpWJRZ.js","./src-jviYSG25.js","./preload-helper-dyVz7ck7.js","./truncate-C0KYt7i3.js","./core-CRbPymLT.js","./vue.runtime.esm-bundler-tP5dCd7J.js","./chunk-6z4oVpB-.js","./CalendarDate-DgQUMbNo.js","./get-BcEmeOxn.js","./_MapCache-CcdIl4Ae.js","./sanitize-html-CbW56HUN.js","./empty-BuGRxzl4.js","./path-browserify-RUt2u7iT.js","./en-CF30SCh2.js","./constants-C8OH4tTq.js","./merge-DhuTk1HM.js","./builder.store-Czk2ipDE.js","./_baseOrderBy-N8Be_6z6.js","./dateformat-hG8NERse.js","./useDebounce-Br5_1ug-.js","./versions.store-B1z2OrLE.js","./usePageRedirectionHelper-DjkznpX6.js"])))=>i.map(i=>d[i]);
+import { C as computed, Cn as toDisplayString, D as createElementBlock, Gt as unref, I as guardReactiveProps, It as ref, M as createVNode, N as defineAsyncComponent, P as defineComponent, T as createBlock, U as mergeModels, _ as Fragment, _t as watch, bt as withCtx, ct as resolveDynamicComponent, et as openBlock, ft as useModel, j as createTextVNode, k as createSlots, vn as normalizeClass, w as createBaseVNode, yn as normalizeProps } from "./vue.runtime.esm-bundler-tP5dCd7J.js";
+import { rt as useI18n } from "./core-CRbPymLT.js";
+import { ht as N8nTooltip_default, u as N8nDataTableServer_default, vn as N8nHeading_default } from "./src-jviYSG25.js";
+import "./en-CF30SCh2.js";
+import { t as __vitePreload } from "./preload-helper-dyVz7ck7.js";
+import { t as __plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BwBpWJRZ.js";
+import "./truncate-C0KYt7i3.js";
+import { k as useTelemetry } from "./builder.store-Czk2ipDE.js";
+import "./empty-BuGRxzl4.js";
+import { u as RouterLink } from "./get-BcEmeOxn.js";
+import "./sanitize-html-CbW56HUN.js";
+import "./CalendarDate-DgQUMbNo.js";
+import "./path-browserify-RUt2u7iT.js";
+import "./_MapCache-CcdIl4Ae.js";
+import { Ro as VIEWS } from "./constants-C8OH4tTq.js";
+import "./merge-DhuTk1HM.js";
+import "./_baseOrderBy-N8Be_6z6.js";
+import "./dateformat-hG8NERse.js";
+import "./useDebounce-Br5_1ug-.js";
+import { a as INSIGHTS_UNIT_MAPPING } from "./insights.constants-BkJCYJTL.js";
+import { a as transformInsightsAverageRunTime, c as transformInsightsTimeSaved, o as transformInsightsFailureRate } from "./insights.utils-CcLXdrrz.js";
+import { t as smartDecimal } from "./smartDecimal-DAZl4HKA.js";
+var InsightsTableWorkflows_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "InsightsTableWorkflows",
+	props: /* @__PURE__ */ mergeModels({
+		data: {},
+		loading: { type: Boolean },
+		isDashboardEnabled: { type: Boolean }
+	}, {
+		"sortBy": {},
+		"sortByModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels(["update:options"], ["update:sortBy"]),
+	setup(__props, { emit: __emit }) {
+		const InsightsPaywall = defineAsyncComponent(async () => await __vitePreload(() => import("./InsightsPaywall-C8zLLKe8.js"), __vite__mapDeps([0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22]), import.meta.url));
+		const props = __props;
+		const i18n = useI18n();
+		const telemetry = useTelemetry();
+		const sampleWorkflows = Array.from({ length: 10 }, (_, i) => ({
+			workflowId: `sample-workflow-${i + 1}`,
+			workflowName: `Sample Workflow ${i + 1}`,
+			total: Math.floor(Math.random() * 2e3) + 500,
+			failed: Math.floor(Math.random() * 100) + 20,
+			failureRate: Math.random() * 100,
+			timeSaved: Math.floor(Math.random() * 3e5) + 6e4,
+			averageRunTime: Math.floor(Math.random() * 6e4) + 15e3,
+			projectName: `Sample Project ${i + 1}`,
+			projectId: `sample-project-${i + 1}`,
+			succeeded: Math.floor(Math.random() * 2e3) + 500,
+			runTime: Math.floor(Math.random() * 6e4) + 15e3
+		}));
+		const sampleData = {
+			data: sampleWorkflows,
+			count: sampleWorkflows.length
+		};
+		const tableData = computed(() => props.isDashboardEnabled ? props.data : sampleData);
+		const rows = computed(() => tableData.value.data);
+		const headers = ref([
+			{
+				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 = useModel(__props, "sortBy");
+		const currentPage = ref(0);
+		const itemsPerPage = ref(25);
+		const emit = __emit;
+		const getWorkflowLink = (item, query) => ({
+			name: VIEWS.WORKFLOW,
+			params: { name: item.workflowId },
+			query
+		});
+		const trackWorkflowClick = (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
+			})) });
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", null, [createVNode(unref(N8nHeading_default), {
+				bold: "",
+				tag: "h3",
+				size: "medium",
+				class: "mb-s"
+			}, {
+				default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("insights.dashboard.table.title")), 1)]),
+				_: 1
+			}), createVNode(unref(N8nDataTableServer_default), {
+				"sort-by": sortBy.value,
+				"onUpdate:sortBy": _cache[0] || (_cache[0] = ($event) => sortBy.value = $event),
+				page: currentPage.value,
+				"onUpdate:page": _cache[1] || (_cache[1] = ($event) => currentPage.value = $event),
+				"items-per-page": itemsPerPage.value,
+				"onUpdate:itemsPerPage": _cache[2] || (_cache[2] = ($event) => itemsPerPage.value = $event),
+				items: rows.value,
+				headers: headers.value,
+				"items-length": tableData.value.count,
+				"onUpdate:options": _cache[3] || (_cache[3] = ($event) => emit("update:options", $event))
+			}, createSlots({
+				[`item.workflowName`]: withCtx(({ item }) => [(openBlock(), createBlock(resolveDynamicComponent(item.workflowId ? unref(RouterLink) : "div"), normalizeProps(guardReactiveProps(item.workflowId ? {
+					to: getWorkflowLink(item),
+					class: _ctx.$style.link,
+					onClick: () => trackWorkflowClick(item)
+				} : {})), {
+					default: withCtx(() => [createVNode(unref(N8nTooltip_default), {
+						content: item.workflowName,
+						placement: "top"
+					}, {
+						default: withCtx(() => [createBaseVNode("div", { class: normalizeClass(_ctx.$style.ellipsis) }, toDisplayString(item.workflowName), 3)]),
+						_: 2
+					}, 1032, ["content"])]),
+					_: 2
+				}, 1040))]),
+				[`item.timeSaved`]: withCtx(({ item, value }) => [!item.timeSaved && item.workflowId ? (openBlock(), createBlock(unref(RouterLink), {
+					key: 0,
+					to: getWorkflowLink(item, { settings: "true" }),
+					class: normalizeClass(_ctx.$style.link)
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("insights.dashboard.table.estimate")), 1)]),
+					_: 2
+				}, 1032, ["to", "class"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(value), 1)], 64))]),
+				[`item.projectName`]: withCtx(({ item }) => [item.projectName ? (openBlock(), createBlock(unref(N8nTooltip_default), {
+					key: 0,
+					content: item.projectName,
+					placement: "top"
+				}, {
+					default: withCtx(() => [createBaseVNode("div", { class: normalizeClass(_ctx.$style.ellipsis) }, toDisplayString(item.projectName), 3)]),
+					_: 2
+				}, 1032, ["content"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(" - ")], 64))]),
+				_: 2
+			}, [!_ctx.isDashboardEnabled ? {
+				name: "cover",
+				fn: withCtx(() => [createBaseVNode("div", { class: normalizeClass(_ctx.$style.blurryCover) }, [createVNode(unref(InsightsPaywall))], 2)]),
+				key: "0"
+			} : void 0]), 1032, [
+				"sort-by",
+				"page",
+				"items-per-page",
+				"items",
+				"headers",
+				"items-length"
+			])]);
+		};
+	}
+});
+var InsightsTableWorkflows_vue_vue_type_style_index_0_lang_module_default = {
+	ellipsis: "_ellipsis_z0cff_123",
+	link: "_link_z0cff_132",
+	blurryCover: "_blurryCover_z0cff_144"
+};
+var InsightsTableWorkflows_default = /* @__PURE__ */ __plugin_vue_export_helper_default(InsightsTableWorkflows_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": InsightsTableWorkflows_vue_vue_type_style_index_0_lang_module_default }]]);
+export { InsightsTableWorkflows_default as default };