375 lines
16 KiB
JavaScript
Executable File
375 lines
16 KiB
JavaScript
Executable File
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/InsightsPaywall-D70_tWkc.js","assets/index-CeNA_ukL.js","assets/index-Am8RmnT4.css","assets/InsightsPaywall-CE5W3W4m.css","assets/InsightsChartTotal-SpC19AWs.js","assets/chartjs.utils-DvIjPJm3.js","assets/InsightsSummary-Bypgyn1_.js","assets/InsightsSummary-DTFIhBF3.css","assets/index-CaZY86md.js","assets/InsightsChartFailed-DDz6H6Hb.js","assets/InsightsChartFailureRate-CYIxGqMo.js","assets/InsightsChartTimeSaved-BnXbon7j.js","assets/InsightsChartAverageRuntime-L1tp64l4.js","assets/InsightsTableWorkflows-B8PrM_XF.js","assets/InsightsTableWorkflows-BTHSCwX8.css"])))=>i.map(i=>d[i]);
|
|
import { d as defineComponent, e9 as useModel, g2 as useInsightsStore, r as ref, gL as UNLICENSED_TIME_RANGE, gc as TIME_RANGE_LABELS, e as createBlock, g as openBlock, w as withCtx, h as createElementBlock, F as Fragment, A as renderList, l as unref, e2 as _sfc_main$3, k as createTextVNode, f as createCommentVNode, t as toDisplayString, j as createBaseVNode, e1 as N8nSelect, x as computed, c as useI18n, i as createVNode, p as N8nText, q as N8nButton, gM as ElDialog, aA as usePageRedirectionHelper, _ as _export_sfc, a2 as useRoute, gN as INSIGHT_TYPES, dl as defineAsyncComponent, a7 as watch, o as onMounted, ax as useDocumentTitle, m as N8nHeading, n as normalizeClass, dC as _sfc_main$4, c3 as resolveDynamicComponent, aU as __vitePreload, al as useTelemetry, gO as TELEMETRY_TIME_RANGE } from "./index-CeNA_ukL.js";
|
|
import { I as InsightsSummary } from "./InsightsSummary-Bypgyn1_.js";
|
|
const _hoisted_1$2 = {
|
|
key: 0,
|
|
width: "16",
|
|
height: "17",
|
|
viewBox: "0 0 16 17",
|
|
fill: "none",
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
style: { "margin-left": "auto" }
|
|
};
|
|
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
__name: "InsightsDateRangeSelect",
|
|
props: {
|
|
"modelValue": {
|
|
required: true
|
|
},
|
|
"modelModifiers": {}
|
|
},
|
|
emits: ["update:modelValue"],
|
|
setup(__props) {
|
|
const model = useModel(__props, "modelValue");
|
|
const insightsStore = useInsightsStore();
|
|
const timeOptions = ref(
|
|
insightsStore.dateRanges.map((option) => {
|
|
return {
|
|
key: option.key,
|
|
label: TIME_RANGE_LABELS[option.key],
|
|
value: option.licensed ? option.key : UNLICENSED_TIME_RANGE,
|
|
licensed: option.licensed
|
|
};
|
|
})
|
|
);
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(unref(N8nSelect), {
|
|
modelValue: model.value,
|
|
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
|
|
size: "small"
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(timeOptions.value, (item) => {
|
|
return openBlock(), createBlock(unref(_sfc_main$3), {
|
|
key: item.key,
|
|
value: item.value,
|
|
label: item.label
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(item.label) + " ", 1),
|
|
!item.licensed ? (openBlock(), createElementBlock("svg", _hoisted_1$2, _cache[1] || (_cache[1] = [
|
|
createBaseVNode("path", {
|
|
d: "M12.6667 7.83337H3.33333C2.59695 7.83337 2 8.43033 2 9.16671V13.8334C2 14.5698 2.59695 15.1667 3.33333 15.1667H12.6667C13.403 15.1667 14 14.5698 14 13.8334V9.16671C14 8.43033 13.403 7.83337 12.6667 7.83337Z",
|
|
stroke: "#9A9A9A",
|
|
"stroke-width": "1.33333",
|
|
"stroke-linecap": "round",
|
|
"stroke-linejoin": "round"
|
|
}, null, -1),
|
|
createBaseVNode("path", {
|
|
d: "M4.66681 7.83337V5.16671C4.66681 4.28265 5.018 3.43481 5.64312 2.80968C6.26824 2.18456 7.11609 1.83337 8.00014 1.83337C8.8842 1.83337 9.73204 2.18456 10.3572 2.80968C10.9823 3.43481 11.3335 4.28265 11.3335 5.16671V7.83337",
|
|
stroke: "#9A9A9A",
|
|
"stroke-width": "1.33333",
|
|
"stroke-linecap": "round",
|
|
"stroke-linejoin": "round"
|
|
}, null, -1)
|
|
]))) : createCommentVNode("", true)
|
|
]),
|
|
_: 2
|
|
}, 1032, ["value", "label"]);
|
|
}), 128))
|
|
]),
|
|
_: 1
|
|
}, 8, ["modelValue"]);
|
|
};
|
|
}
|
|
});
|
|
const _hoisted_1$1 = { class: "perks-list" };
|
|
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
__name: "InsightsUpgradeModal",
|
|
props: {
|
|
"modelValue": { type: Boolean },
|
|
"modelModifiers": {}
|
|
},
|
|
emits: ["update:modelValue"],
|
|
setup(__props) {
|
|
const model = useModel(__props, "modelValue");
|
|
const i18n = useI18n();
|
|
function goToUpgrade() {
|
|
model.value = false;
|
|
void usePageRedirectionHelper().goToUpgrade("insights", "upgrade-insights");
|
|
}
|
|
const perks = computed(
|
|
() => [...Array(3).keys()].map(
|
|
(index) => i18n.baseText(`insights.upgradeModal.perks.${index}`)
|
|
)
|
|
);
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(unref(ElDialog), {
|
|
modelValue: model.value,
|
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => model.value = $event),
|
|
title: unref(i18n).baseText("insights.upgradeModal.title"),
|
|
width: "500"
|
|
}, {
|
|
footer: withCtx(() => [
|
|
createBaseVNode("div", null, [
|
|
createVNode(unref(N8nButton), {
|
|
type: "secondary",
|
|
onClick: _cache[0] || (_cache[0] = ($event) => model.value = false)
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(i18n).baseText("insights.upgradeModal.button.dismiss")), 1)
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(unref(N8nButton), {
|
|
type: "primary",
|
|
onClick: goToUpgrade
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(i18n).baseText("generic.upgrade")), 1)
|
|
]),
|
|
_: 1
|
|
})
|
|
])
|
|
]),
|
|
default: withCtx(() => [
|
|
createBaseVNode("div", null, [
|
|
createVNode(unref(N8nText), {
|
|
tag: "p",
|
|
class: "mb-s"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(i18n).baseText("insights.upgradeModal.content")), 1)
|
|
]),
|
|
_: 1
|
|
}),
|
|
createBaseVNode("ul", _hoisted_1$1, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(perks.value, (perk) => {
|
|
return openBlock(), createBlock(unref(N8nText), {
|
|
key: perk,
|
|
color: "text-dark",
|
|
tag: "li"
|
|
}, {
|
|
default: withCtx(() => [
|
|
_cache[2] || (_cache[2] = createBaseVNode("svg", {
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
viewBox: "0 0 16 16",
|
|
width: "16px",
|
|
height: "16px"
|
|
}, [
|
|
createBaseVNode("path", {
|
|
d: "M 16 8 C 16 12.418 12.418 16 8 16 C 3.582 16 0 12.418 0 8 C 0 3.582 3.582 0 8 0 C 12.418 0 16 3.582 16 8 Z M 3.97 9.03 L 5.97 11.03 L 6.5 11.561 L 7.03 11.03 L 12.53 5.53 L 11.47 4.47 L 6.5 9.439 L 5.03 7.97 L 3.97 9.03 Z",
|
|
fill: "currentColor"
|
|
})
|
|
], -1)),
|
|
createTextVNode(" " + toDisplayString(perk), 1)
|
|
]),
|
|
_: 2
|
|
}, 1024);
|
|
}), 128))
|
|
])
|
|
])
|
|
]),
|
|
_: 1
|
|
}, 8, ["modelValue", "title"]);
|
|
};
|
|
}
|
|
});
|
|
const InsightsUpgradeModal = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-f995e7d0"]]);
|
|
const _hoisted_1 = { class: "mt-s" };
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
__name: "InsightsDashboard",
|
|
props: {
|
|
insightType: {}
|
|
},
|
|
setup(__props) {
|
|
const InsightsPaywall = defineAsyncComponent(
|
|
async () => await __vitePreload(() => import("./InsightsPaywall-D70_tWkc.js"), true ? __vite__mapDeps([0,1,2,3]) : void 0)
|
|
);
|
|
const InsightsChartTotal = defineAsyncComponent(
|
|
async () => await __vitePreload(() => import("./InsightsChartTotal-SpC19AWs.js"), true ? __vite__mapDeps([4,1,2,5,6,7,8]) : void 0)
|
|
);
|
|
const InsightsChartFailed = defineAsyncComponent(
|
|
async () => await __vitePreload(() => import("./InsightsChartFailed-DDz6H6Hb.js"), true ? __vite__mapDeps([9,1,2,5,6,7,8]) : void 0)
|
|
);
|
|
const InsightsChartFailureRate = defineAsyncComponent(
|
|
async () => await __vitePreload(() => import("./InsightsChartFailureRate-CYIxGqMo.js"), true ? __vite__mapDeps([10,1,2,5,6,7,8]) : void 0)
|
|
);
|
|
const InsightsChartTimeSaved = defineAsyncComponent(
|
|
async () => await __vitePreload(() => import("./InsightsChartTimeSaved-BnXbon7j.js"), true ? __vite__mapDeps([11,1,2,5,6,7,8]) : void 0)
|
|
);
|
|
const InsightsChartAverageRuntime = defineAsyncComponent(
|
|
async () => await __vitePreload(() => import("./InsightsChartAverageRuntime-L1tp64l4.js"), true ? __vite__mapDeps([12,1,2,5,6,7,8]) : void 0)
|
|
);
|
|
const InsightsTableWorkflows = defineAsyncComponent(
|
|
async () => await __vitePreload(() => import("./InsightsTableWorkflows-B8PrM_XF.js"), true ? __vite__mapDeps([13,1,2,6,7,14]) : void 0)
|
|
);
|
|
const props = __props;
|
|
const route = useRoute();
|
|
const i18n = useI18n();
|
|
const telemetry = useTelemetry();
|
|
const insightsStore = useInsightsStore();
|
|
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 }) => {
|
|
const key = id;
|
|
const order = desc ? "desc" : "asc";
|
|
return `${key}:${order}`;
|
|
};
|
|
const fetchPaginatedTableData = ({
|
|
page = 0,
|
|
itemsPerPage = 25,
|
|
sortBy,
|
|
dateRange = selectedDateRange.value
|
|
}) => {
|
|
const skip = page * itemsPerPage;
|
|
const take = itemsPerPage;
|
|
const sortKey = sortBy.length ? transformFilter(sortBy[0]) : void 0;
|
|
void insightsStore.table.execute(0, {
|
|
skip,
|
|
take,
|
|
sortBy: sortKey,
|
|
dateRange
|
|
});
|
|
};
|
|
const sortTableBy = ref([{ id: props.insightType, desc: true }]);
|
|
const upgradeModalVisible = ref(false);
|
|
const selectedDateRange = ref("week");
|
|
const granularity = computed(
|
|
() => insightsStore.dateRanges.find((item) => item.key === selectedDateRange.value)?.granularity ?? "day"
|
|
);
|
|
function handleTimeChange(value) {
|
|
if (value === UNLICENSED_TIME_RANGE) {
|
|
upgradeModalVisible.value = true;
|
|
return;
|
|
}
|
|
selectedDateRange.value = value;
|
|
telemetry.track("User updated insights time range", { range: TELEMETRY_TIME_RANGE[value] });
|
|
}
|
|
watch(
|
|
() => [props.insightType, selectedDateRange.value],
|
|
() => {
|
|
sortTableBy.value = [{ id: props.insightType, desc: true }];
|
|
if (insightsStore.isSummaryEnabled) {
|
|
void insightsStore.summary.execute(0, { dateRange: selectedDateRange.value });
|
|
}
|
|
void insightsStore.charts.execute(0, { dateRange: selectedDateRange.value });
|
|
if (insightsStore.isDashboardEnabled) {
|
|
fetchPaginatedTableData({ sortBy: sortTableBy.value, dateRange: selectedDateRange.value });
|
|
}
|
|
},
|
|
{
|
|
immediate: true
|
|
}
|
|
);
|
|
onMounted(() => {
|
|
useDocumentTitle().set(i18n.baseText("insights.heading"));
|
|
});
|
|
return (_ctx, _cache) => {
|
|
const _component_N8nHeading = N8nHeading;
|
|
const _component_N8nSpinner = _sfc_main$4;
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass(_ctx.$style.insightsView)
|
|
}, [
|
|
createBaseVNode("div", {
|
|
class: normalizeClass(_ctx.$style.insightsContainer)
|
|
}, [
|
|
createVNode(_component_N8nHeading, {
|
|
bold: "",
|
|
tag: "h2",
|
|
size: "xlarge"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(i18n).baseText("insights.dashboard.title")), 1)
|
|
]),
|
|
_: 1
|
|
}),
|
|
createBaseVNode("div", _hoisted_1, [
|
|
createVNode(_sfc_main$2, {
|
|
"model-value": selectedDateRange.value,
|
|
style: { "width": "173px" },
|
|
"data-test-id": "range-select",
|
|
"onUpdate:modelValue": handleTimeChange
|
|
}, null, 8, ["model-value"]),
|
|
createVNode(InsightsUpgradeModal, {
|
|
modelValue: upgradeModalVisible.value,
|
|
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => upgradeModalVisible.value = $event)
|
|
}, null, 8, ["modelValue"])
|
|
]),
|
|
unref(insightsStore).isSummaryEnabled ? (openBlock(), createBlock(InsightsSummary, {
|
|
key: 0,
|
|
summary: unref(insightsStore).summary.state,
|
|
loading: unref(insightsStore).summary.isLoading,
|
|
"time-range": selectedDateRange.value,
|
|
class: normalizeClass(_ctx.$style.insightsBanner)
|
|
}, null, 8, ["summary", "loading", "time-range", "class"])) : createCommentVNode("", true),
|
|
createBaseVNode("div", {
|
|
class: normalizeClass(_ctx.$style.insightsContent)
|
|
}, [
|
|
unref(insightsStore).isDashboardEnabled || isTimeSavedRoute.value ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(_ctx.$style.insightsContentWrapper)
|
|
}, [
|
|
createBaseVNode("div", {
|
|
class: normalizeClass([
|
|
_ctx.$style.dataLoader,
|
|
{
|
|
[_ctx.$style.isDataLoading]: unref(insightsStore).charts.isLoading || unref(insightsStore).table.isLoading
|
|
}
|
|
])
|
|
}, [
|
|
createVNode(_component_N8nSpinner),
|
|
createBaseVNode("span", null, toDisplayString(unref(i18n).baseText("insights.chart.loading")), 1)
|
|
], 2),
|
|
createBaseVNode("div", {
|
|
class: normalizeClass(_ctx.$style.insightsChartWrapper)
|
|
}, [
|
|
(openBlock(), createBlock(resolveDynamicComponent(chartComponents.value[props.insightType]), {
|
|
type: props.insightType,
|
|
data: unref(insightsStore).charts.state,
|
|
granularity: granularity.value
|
|
}, null, 8, ["type", "data", "granularity"]))
|
|
], 2),
|
|
createBaseVNode("div", {
|
|
class: normalizeClass(_ctx.$style.insightsTableWrapper)
|
|
}, [
|
|
createVNode(unref(InsightsTableWorkflows), {
|
|
"sort-by": sortTableBy.value,
|
|
"onUpdate:sortBy": _cache[1] || (_cache[1] = ($event) => sortTableBy.value = $event),
|
|
data: unref(insightsStore).table.state,
|
|
loading: unref(insightsStore).table.isLoading,
|
|
"is-dashboard-enabled": unref(insightsStore).isDashboardEnabled,
|
|
"onUpdate:options": fetchPaginatedTableData
|
|
}, null, 8, ["sort-by", "data", "loading", "is-dashboard-enabled"])
|
|
], 2)
|
|
], 2)) : (openBlock(), createBlock(unref(InsightsPaywall), { key: 1 }))
|
|
], 2)
|
|
], 2)
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
const insightsView = "_insightsView_8g4zl_123";
|
|
const insightsContainer = "_insightsContainer_8g4zl_131";
|
|
const insightsBanner = "_insightsBanner_8g4zl_138";
|
|
const insightsContent = "_insightsContent_8g4zl_146";
|
|
const insightsContentWrapper = "_insightsContentWrapper_8g4zl_155";
|
|
const insightsChartWrapper = "_insightsChartWrapper_8g4zl_160";
|
|
const insightsTableWrapper = "_insightsTableWrapper_8g4zl_167";
|
|
const dataLoader = "_dataLoader_8g4zl_173";
|
|
const isDataLoading = "_isDataLoading_8g4zl_186";
|
|
const style0 = {
|
|
insightsView,
|
|
insightsContainer,
|
|
insightsBanner,
|
|
insightsContent,
|
|
insightsContentWrapper,
|
|
insightsChartWrapper,
|
|
insightsTableWrapper,
|
|
dataLoader,
|
|
isDataLoading
|
|
};
|
|
const cssModules = {
|
|
"$style": style0
|
|
};
|
|
const InsightsDashboard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
|
|
export {
|
|
InsightsDashboard as default
|
|
};
|