n8n-editor-ui 1.85.2 → 1.87.0

package/dist/assets/InsightsChartFailureRate-BdFNsMpg.js

@@ -0,0 +1,57 @@
+import { d as defineComponent, gf as useCssVar, q as computed, f9 as dateformat, h_ as DATE_FORMAT_MASK, i0 as transformInsightsFailureRate, c as useI18n, e as createBlock, g as openBlock, m as unref, i1 as INSIGHTS_UNIT_MAPPING } from "./index-DD7Wuhk5.js";
+import { g as generateBarChartOptions } from "./chartjs.utils-DTEY3u-V.js";
+import { s as smartDecimal } from "./InsightsSummary-vMmKUcie.js";
+import { B as Bar } from "./index-BrjPYODL.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "InsightsChartFailureRate",
+  props: {
+    data: {},
+    type: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const i18n = useI18n();
+    const colorPrimary = useCssVar("--color-primary", document.body);
+    const chartOptions = computed(
+      () => generateBarChartOptions({
+        plugins: {
+          tooltip: {
+            callbacks: {
+              label: (context) => {
+                const label = context.dataset.label ?? "";
+                return `${label} ${smartDecimal(context.parsed.y)}${INSIGHTS_UNIT_MAPPING[props.type](context.parsed.y)}`;
+              }
+            }
+          }
+        }
+      })
+    );
+    const chartData = computed(() => {
+      const labels = [];
+      const data = [];
+      for (const entry of props.data) {
+        labels.push(dateformat(entry.date, DATE_FORMAT_MASK));
+        data.push(transformInsightsFailureRate(entry.values.failureRate));
+      }
+      return {
+        labels,
+        datasets: [
+          {
+            label: i18n.baseText("insights.banner.title.failureRate"),
+            data,
+            backgroundColor: colorPrimary.value
+          }
+        ]
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Bar), {
+        data: chartData.value,
+        options: chartOptions.value
+      }, null, 8, ["data", "options"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/assets/InsightsChartTimeSaved-C12GZzSQ.js

@@ -0,0 +1,71 @@
+import { d as defineComponent, q as computed, f9 as dateformat, h_ as DATE_FORMAT_MASK, c as useI18n, e as createBlock, g as openBlock, m as unref, i2 as index, i3 as transformInsightsTimeSaved, i1 as INSIGHTS_UNIT_MAPPING } from "./index-DD7Wuhk5.js";
+import { a as generateLineChartOptions, b as generateLinearGradient } from "./chartjs.utils-DTEY3u-V.js";
+import { L as Line } from "./index-BrjPYODL.js";
+import "./InsightsSummary-vMmKUcie.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "InsightsChartTimeSaved",
+  props: {
+    data: {},
+    type: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const i18n = useI18n();
+    const chartOptions = computed(
+      () => generateLineChartOptions({
+        plugins: {
+          tooltip: {
+            callbacks: {
+              label: (context) => {
+                const label = context.dataset.label ?? "";
+                const value = Number(context.parsed.y);
+                return `${label} ${transformInsightsTimeSaved(value).toLocaleString("en-US")}${INSIGHTS_UNIT_MAPPING[props.type](value)}`;
+              }
+            }
+          }
+        },
+        scales: {
+          y: {
+            ticks: {
+              // eslint-disable-next-line id-denylist
+              callback(tickValue) {
+                return transformInsightsTimeSaved(Number(tickValue));
+              }
+            }
+          }
+        }
+      })
+    );
+    const chartData = computed(() => {
+      const labels = [];
+      const data = [];
+      for (const entry of props.data) {
+        labels.push(dateformat(entry.date, DATE_FORMAT_MASK));
+        data.push(entry.values.timeSaved);
+      }
+      return {
+        labels,
+        datasets: [
+          {
+            label: i18n.baseText("insights.banner.title.timeSaved"),
+            data,
+            fill: "origin",
+            cubicInterpolationMode: "monotone",
+            backgroundColor: (ctx) => generateLinearGradient(ctx.chart.ctx, 292),
+            borderColor: "rgba(255, 64, 39, 1)"
+          }
+        ]
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Line), {
+        data: chartData.value,
+        options: chartOptions.value,
+        plugins: [unref(index)]
+      }, null, 8, ["data", "options", "plugins"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/assets/InsightsChartTotal-Cn386HO4.js

@@ -0,0 +1,59 @@
+import { B as Bar } from "./index-BrjPYODL.js";
+import { d as defineComponent, gf as useCssVar, q as computed, f9 as dateformat, h_ as DATE_FORMAT_MASK, c as useI18n, e as createBlock, g as openBlock, m as unref } from "./index-DD7Wuhk5.js";
+import { g as generateBarChartOptions } from "./chartjs.utils-DTEY3u-V.js";
+import "./InsightsSummary-vMmKUcie.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "InsightsChartTotal",
+  props: {
+    data: {},
+    type: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const i18n = useI18n();
+    const colorPrimary = useCssVar("--color-primary", document.body);
+    const chartOptions = computed(
+      () => generateBarChartOptions({
+        plugins: {
+          tooltip: {
+            itemSort: (a) => a.dataset.label === i18n.baseText("insights.banner.title.succeeded") ? -1 : 1
+          }
+        }
+      })
+    );
+    const chartData = computed(() => {
+      const labels = [];
+      const succeededData = [];
+      const failedData = [];
+      for (const entry of props.data) {
+        labels.push(dateformat(entry.date, DATE_FORMAT_MASK));
+        succeededData.push(entry.values.succeeded);
+        failedData.push(entry.values.failed);
+      }
+      return {
+        labels,
+        datasets: [
+          {
+            label: i18n.baseText("insights.banner.title.failed"),
+            data: failedData,
+            backgroundColor: colorPrimary.value
+          },
+          {
+            label: i18n.baseText("insights.banner.title.succeeded"),
+            data: succeededData,
+            backgroundColor: "#3E999F"
+          }
+        ]
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Bar), {
+        data: chartData.value,
+        options: chartOptions.value
+      }, null, 8, ["data", "options"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/assets/InsightsDashboard-BawwZ0Oo.js

@@ -0,0 +1,154 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/InsightsPaywall-g3JcqAYL.js","assets/index-DD7Wuhk5.js","assets/index-DJ205bL0.css","assets/InsightsPaywall-OeXh6LeZ.css","assets/InsightsChartTotal-Cn386HO4.js","assets/index-BrjPYODL.js","assets/chartjs.utils-DTEY3u-V.js","assets/InsightsSummary-vMmKUcie.js","assets/InsightsSummary-W08OzElS.css","assets/InsightsChartFailed-DRi6JC3m.js","assets/InsightsChartFailureRate-BdFNsMpg.js","assets/InsightsChartTimeSaved-C12GZzSQ.js","assets/InsightsChartAverageRuntime-DWrrriYN.js","assets/InsightsTableWorkflows-DQQ1vvMz.js","assets/InsightsTableWorkflows-Us3j4UTO.css"])))=>i.map(i=>d[i]);
+import { d as defineComponent, W as useRoute, gq as useInsightsStore, q as computed, bZ as defineAsyncComponent, I as watch, h as resolveComponent, i as createElementBlock, g as openBlock, j as createVNode, k as createBaseVNode, w as withCtx, l as createTextVNode, t as toDisplayString, m as unref, c as useI18n, e as createBlock, f as createCommentVNode, n as normalizeClass, F as Fragment, b2 as resolveDynamicComponent, aq as __vitePreload, _ as _export_sfc } from "./index-DD7Wuhk5.js";
+import { I as InsightsSummary } from "./InsightsSummary-vMmKUcie.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "InsightsDashboard",
+  props: {
+    insightType: {}
+  },
+  setup(__props) {
+    const InsightsPaywall = defineAsyncComponent(
+      async () => await __vitePreload(() => import("./InsightsPaywall-g3JcqAYL.js"), true ? __vite__mapDeps([0,1,2,3]) : void 0)
+    );
+    const InsightsChartTotal = defineAsyncComponent(
+      async () => await __vitePreload(() => import("./InsightsChartTotal-Cn386HO4.js"), true ? __vite__mapDeps([4,5,1,2,6,7,8]) : void 0)
+    );
+    const InsightsChartFailed = defineAsyncComponent(
+      async () => await __vitePreload(() => import("./InsightsChartFailed-DRi6JC3m.js"), true ? __vite__mapDeps([9,5,1,2,6,7,8]) : void 0)
+    );
+    const InsightsChartFailureRate = defineAsyncComponent(
+      async () => await __vitePreload(() => import("./InsightsChartFailureRate-BdFNsMpg.js"), true ? __vite__mapDeps([10,1,2,6,7,8,5]) : void 0)
+    );
+    const InsightsChartTimeSaved = defineAsyncComponent(
+      async () => await __vitePreload(() => import("./InsightsChartTimeSaved-C12GZzSQ.js"), true ? __vite__mapDeps([11,1,2,6,7,8,5]) : void 0)
+    );
+    const InsightsChartAverageRuntime = defineAsyncComponent(
+      async () => await __vitePreload(() => import("./InsightsChartAverageRuntime-DWrrriYN.js"), true ? __vite__mapDeps([12,1,2,6,7,8,5]) : void 0)
+    );
+    const InsightsTableWorkflows = defineAsyncComponent(
+      async () => await __vitePreload(() => import("./InsightsTableWorkflows-DQQ1vvMz.js"), true ? __vite__mapDeps([13,1,2,7,8,14]) : void 0)
+    );
+    const props = __props;
+    const route = useRoute();
+    const i18n = useI18n();
+    const insightsStore = useInsightsStore();
+    const chartComponents = computed(() => ({
+      total: InsightsChartTotal,
+      failed: InsightsChartFailed,
+      failureRate: InsightsChartFailureRate,
+      timeSaved: InsightsChartTimeSaved,
+      averageRunTime: InsightsChartAverageRuntime
+    }));
+    const getDefaultFilter = (query) => {
+      const { time_span } = query;
+      return {
+        time_span: time_span ?? "7"
+      };
+    };
+    const filters = computed(() => getDefaultFilter(route.query));
+    const transformFilter = ({ id, desc }) => {
+      const key = id;
+      const order = desc ? "desc" : "asc";
+      return `${key}:${order}`;
+    };
+    const fetchPaginatedTableData = ({
+      page,
+      itemsPerPage,
+      sortBy
+    }) => {
+      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
+      });
+    };
+    watch(
+      () => filters.value.time_span,
+      () => {
+        if (insightsStore.isSummaryEnabled) {
+          void insightsStore.summary.execute();
+        }
+        void insightsStore.charts.execute();
+        void insightsStore.table.execute();
+      },
+      {
+        immediate: true
+      }
+    );
+    return (_ctx, _cache) => {
+      const _component_N8nHeading = resolveComponent("N8nHeading");
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.insightsView)
+      }, [
+        createVNode(_component_N8nHeading, {
+          bold: "",
+          tag: "h2",
+          size: "xlarge"
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(unref(i18n).baseText("insights.dashboard.title")), 1)
+          ]),
+          _: 1
+        }),
+        createBaseVNode("div", null, [
+          unref(insightsStore).isSummaryEnabled ? (openBlock(), createBlock(InsightsSummary, {
+            key: 0,
+            summary: unref(insightsStore).summary.state,
+            loading: unref(insightsStore).summary.isLoading,
+            class: normalizeClass(_ctx.$style.insightsBanner)
+          }, null, 8, ["summary", "loading", "class"])) : createCommentVNode("", true),
+          unref(insightsStore).isInsightsEnabled ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: normalizeClass(_ctx.$style.insightsContent)
+          }, [
+            createBaseVNode("div", {
+              class: normalizeClass(_ctx.$style.insightsChartWrapper)
+            }, [
+              unref(insightsStore).charts.isLoading ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                createTextVNode(" loading ")
+              ], 64)) : (openBlock(), createBlock(resolveDynamicComponent(chartComponents.value[props.insightType]), {
+                key: 1,
+                type: props.insightType,
+                data: unref(insightsStore).charts.state
+              }, null, 8, ["type", "data"]))
+            ], 2),
+            createBaseVNode("div", {
+              class: normalizeClass(_ctx.$style.insightsTableWrapper)
+            }, [
+              createVNode(unref(InsightsTableWorkflows), {
+                data: unref(insightsStore).table.state,
+                loading: unref(insightsStore).table.isLoading,
+                "onUpdate:options": fetchPaginatedTableData
+              }, null, 8, ["data", "loading"])
+            ], 2)
+          ], 2)) : (openBlock(), createBlock(unref(InsightsPaywall), {
+            key: 2,
+            "data-test-id": "insights-dashboard-unlicensed"
+          }))
+        ])
+      ], 2);
+    };
+  }
+});
+const insightsView = "_insightsView_1upqv_123";
+const insightsBanner = "_insightsBanner_1upqv_133";
+const insightsContent = "_insightsContent_1upqv_140";
+const insightsChartWrapper = "_insightsChartWrapper_1upqv_149";
+const insightsTableWrapper = "_insightsTableWrapper_1upqv_154";
+const style0 = {
+  insightsView,
+  insightsBanner,
+  insightsContent,
+  insightsChartWrapper,
+  insightsTableWrapper
+};
+const cssModules = {
+  "$style": style0
+};
+const InsightsDashboard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  InsightsDashboard as default
+};

package/dist/assets/InsightsDashboard-CB4vHnBh.css

@@ -0,0 +1,152 @@
+/* BEM support Func
+ -------------------------- */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Outline
+-------------------------- */
+/* Box shadow
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+._insightsView_1upqv_123 {
+  padding: var(--spacing-l) var(--spacing-2xl);
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  overflow: auto;
+  max-width: var(--content-container-width);
+}
+._insightsBanner_1upqv_133 {
+  padding-bottom: 0;
+}
+._insightsBanner_1upqv_133 ul {
+  border-radius: 0;
+}
+._insightsContent_1upqv_140 {
+  padding: var(--spacing-l) 0;
+  border: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
+  border-top: 0;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+  background: var(--color-background-xlight);
+}
+._insightsChartWrapper_1upqv_149 {
+  height: 292px;
+  padding: 0 var(--spacing-l);
+}
+._insightsTableWrapper_1upqv_154 {
+  padding: var(--spacing-l) var(--spacing-l) 0;
+}

package/dist/assets/InsightsPaywall-OeXh6LeZ.css

@@ -0,0 +1,133 @@
+/* BEM support Func
+ -------------------------- */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Outline
+-------------------------- */
+/* Box shadow
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+._callout_tsein_123 {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  align-items: center;
+  max-width: 360px;
+  margin: 0 auto;
+  text-align: center;
+  gap: 10px;
+  justify-content: center;
+}

package/dist/assets/InsightsPaywall-g3JcqAYL.js

@@ -0,0 +1,58 @@
+import { _ as _export_sfc, h as resolveComponent, i as createElementBlock, g as openBlock, j as createVNode, w as withCtx, l as createTextVNode, n as normalizeClass } from "./index-DD7Wuhk5.js";
+const callout = "_callout_tsein_123";
+const style0 = {
+  callout
+};
+const _sfc_main = {};
+function _sfc_render(_ctx, _cache) {
+  const _component_N8nIcon = resolveComponent("N8nIcon");
+  const _component_N8nText = resolveComponent("N8nText");
+  const _component_N8nLink = resolveComponent("N8nLink");
+  const _component_N8nButton = resolveComponent("N8nButton");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.$style.callout)
+  }, [
+    createVNode(_component_N8nIcon, {
+      icon: "lock",
+      size: "size"
+    }),
+    createVNode(_component_N8nText, {
+      bold: "",
+      tag: "h3",
+      size: "large"
+    }, {
+      default: withCtx(() => _cache[0] || (_cache[0] = [
+        createTextVNode("Upgrade to Pro or Enterprise to see full data")
+      ])),
+      _: 1
+    }),
+    createVNode(_component_N8nText, null, {
+      default: withCtx(() => [
+        _cache[2] || (_cache[2] = createTextVNode("Gain access to detailed execution data with one year data retention. ")),
+        createVNode(_component_N8nLink, { to: "/" }, {
+          default: withCtx(() => _cache[1] || (_cache[1] = [
+            createTextVNode("Learn more")
+          ])),
+          _: 1
+        })
+      ]),
+      _: 1
+    }),
+    createVNode(_component_N8nButton, {
+      type: "primary",
+      size: "large"
+    }, {
+      default: withCtx(() => _cache[3] || (_cache[3] = [
+        createTextVNode("Upgrade")
+      ])),
+      _: 1
+    })
+  ], 2);
+}
+const cssModules = {
+  "$style": style0
+};
+const InsightsPaywall = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__cssModules", cssModules]]);
+export {
+  InsightsPaywall as default
+};