384 lines
16 KiB
JavaScript
Executable File
384 lines
16 KiB
JavaScript
Executable File
import { d as defineComponent, eU as useUsageStore, a2 as useRoute, b as useRouter, Q as useUIStore, u as useUsersStore, a as useToast, ax as useDocumentTitle, aA as usePageRedirectionHelper, r as ref, x as computed, aD as hasPermission, aB as getResourcePermissions, o as onMounted, eV as i18n, a8 as resolveComponent, h as createElementBlock, g as openBlock, i as createVNode, f as createCommentVNode, w as withCtx, k as createTextVNode, t as toDisplayString, l as unref, m as N8nHeading, e as createBlock, j as createBaseVNode, ab as I18nT, n as normalizeClass, a9 as Tooltip, aK as N8nBadge, q as N8nButton, e0 as N8nNotice, p as N8nText, ap as normalizeStyle, cK as InfoTip, B as withModifiers, cT as N8nInput, eW as COMMUNITY_PLUS_ENROLLMENT_MODAL, eX as telemetry, _ as _export_sfc } from "./index-CeNA_ukL.js";
|
|
const _hoisted_1 = { class: "settings-usage-and-plan" };
|
|
const _hoisted_2 = { key: 0 };
|
|
const _hoisted_3 = { key: 0 };
|
|
const _hoisted_4 = { key: 1 };
|
|
const _hoisted_5 = { key: 0 };
|
|
const _hoisted_6 = { key: 1 };
|
|
const _hoisted_7 = ["href"];
|
|
const _hoisted_8 = ["href"];
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
__name: "SettingsUsageAndPlan",
|
|
setup(__props) {
|
|
const usageStore = useUsageStore();
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const uiStore = useUIStore();
|
|
const usersStore = useUsersStore();
|
|
const toast = useToast();
|
|
const documentTitle = useDocumentTitle();
|
|
const pageRedirectionHelper = usePageRedirectionHelper();
|
|
const queryParamCallback = ref(
|
|
`callback=${encodeURIComponent(`${window.location.origin}${window.location.pathname}`)}`
|
|
);
|
|
const viewPlansUrl = computed(
|
|
() => `${usageStore.viewPlansUrl}&${queryParamCallback.value}&source=usage_page`
|
|
);
|
|
const managePlanUrl = computed(() => `${usageStore.managePlanUrl}&${queryParamCallback.value}`);
|
|
const activationKeyModal = ref(false);
|
|
const activationKey = ref("");
|
|
const activationKeyInput = ref(null);
|
|
const canUserActivateLicense = computed(
|
|
() => hasPermission(["rbac"], { rbac: { scope: "license:manage" } })
|
|
);
|
|
const badgedPlanName = computed(() => {
|
|
const [badge, name] = usageStore.planName.split(" ");
|
|
return {
|
|
name,
|
|
badge
|
|
};
|
|
});
|
|
const isCommunity = computed(() => usageStore.planName.toLowerCase() === "community");
|
|
const isCommunityEditionRegistered = computed(
|
|
() => usageStore.planName.toLowerCase() === "registered community"
|
|
);
|
|
const canUserRegisterCommunityPlus = computed(
|
|
() => getResourcePermissions(usersStore.currentUser?.globalScopes).community.register
|
|
);
|
|
const showActivationSuccess = () => {
|
|
toast.showMessage({
|
|
type: "success",
|
|
title: i18n.baseText("settings.usageAndPlan.license.activation.success.title"),
|
|
message: i18n.baseText("settings.usageAndPlan.license.activation.success.message", {
|
|
interpolate: {
|
|
name: usageStore.planName,
|
|
type: usageStore.planId ? i18n.baseText("settings.usageAndPlan.plan") : i18n.baseText("settings.usageAndPlan.edition")
|
|
}
|
|
})
|
|
});
|
|
};
|
|
const showActivationError = (error) => {
|
|
toast.showError(
|
|
error,
|
|
i18n.baseText("settings.usageAndPlan.license.activation.error.title"),
|
|
error.message
|
|
);
|
|
};
|
|
const onLicenseActivation = async () => {
|
|
try {
|
|
await usageStore.activateLicense(activationKey.value);
|
|
activationKeyModal.value = false;
|
|
showActivationSuccess();
|
|
} catch (error) {
|
|
showActivationError(error);
|
|
}
|
|
};
|
|
onMounted(async () => {
|
|
documentTitle.set(i18n.baseText("settings.usageAndPlan.title"));
|
|
usageStore.setLoading(true);
|
|
if (route.query.key) {
|
|
try {
|
|
await usageStore.activateLicense(route.query.key);
|
|
await router.replace({ query: {} });
|
|
showActivationSuccess();
|
|
usageStore.setLoading(false);
|
|
return;
|
|
} catch (error) {
|
|
showActivationError(error);
|
|
}
|
|
}
|
|
try {
|
|
if (!route.query.key && canUserActivateLicense.value) {
|
|
await usageStore.refreshLicenseManagementToken();
|
|
} else {
|
|
await usageStore.getLicenseInfo();
|
|
}
|
|
usageStore.setLoading(false);
|
|
} catch (error) {
|
|
if (!error.name) {
|
|
error.name = i18n.baseText("settings.usageAndPlan.error");
|
|
}
|
|
toast.showError(error, error.name, error.message);
|
|
}
|
|
});
|
|
const sendUsageTelemetry = (action) => {
|
|
const telemetryPayload = usageStore.telemetryPayload;
|
|
telemetryPayload.action = action;
|
|
telemetry.track("User clicked button on usage page", telemetryPayload);
|
|
};
|
|
const onAddActivationKey = () => {
|
|
activationKeyModal.value = true;
|
|
sendUsageTelemetry("add_activation_key");
|
|
};
|
|
const onViewPlans = () => {
|
|
void pageRedirectionHelper.goToUpgrade("usage_page", "open");
|
|
sendUsageTelemetry("view_plans");
|
|
};
|
|
const onManagePlan = () => {
|
|
sendUsageTelemetry("manage_plan");
|
|
};
|
|
const onDialogClosed = () => {
|
|
activationKey.value = "";
|
|
};
|
|
const onDialogOpened = () => {
|
|
activationKeyInput.value?.focus();
|
|
};
|
|
const openCommunityRegisterModal = () => {
|
|
uiStore.openModalWithData({
|
|
name: COMMUNITY_PLUS_ENROLLMENT_MODAL,
|
|
data: {
|
|
customHeading: void 0
|
|
}
|
|
});
|
|
};
|
|
return (_ctx, _cache) => {
|
|
const _component_n8n_heading = N8nHeading;
|
|
const _component_N8nBadge = N8nBadge;
|
|
const _component_N8nTooltip = Tooltip;
|
|
const _component_N8nButton = N8nButton;
|
|
const _component_N8nNotice = N8nNotice;
|
|
const _component_n8n_text = N8nText;
|
|
const _component_n8n_button = N8nButton;
|
|
const _component_n8n_input = N8nInput;
|
|
const _component_el_dialog = resolveComponent("el-dialog");
|
|
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
createVNode(_component_n8n_heading, {
|
|
tag: "h2",
|
|
size: "2xlarge"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(i18n).baseText("settings.usageAndPlan.title")), 1)
|
|
]),
|
|
_: 1
|
|
}),
|
|
!unref(usageStore).isLoading ? (openBlock(), createElementBlock("div", _hoisted_2, [
|
|
createVNode(_component_n8n_heading, {
|
|
tag: "h3",
|
|
class: normalizeClass(_ctx.$style.title),
|
|
size: "large"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(I18nT), {
|
|
keypath: "settings.usageAndPlan.description",
|
|
tag: "span",
|
|
scope: "global"
|
|
}, {
|
|
name: withCtx(() => [
|
|
createTextVNode(toDisplayString(badgedPlanName.value.name ?? unref(usageStore).planName), 1)
|
|
]),
|
|
type: withCtx(() => [
|
|
unref(usageStore).planId ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(unref(i18n).baseText("settings.usageAndPlan.plan")), 1)) : (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(unref(i18n).baseText("settings.usageAndPlan.edition")), 1))
|
|
]),
|
|
_: 1
|
|
}),
|
|
badgedPlanName.value.badge && badgedPlanName.value.name ? (openBlock(), createElementBlock("span", {
|
|
key: 0,
|
|
class: normalizeClass(_ctx.$style.titleTooltip)
|
|
}, [
|
|
createVNode(_component_N8nTooltip, { placement: "top" }, {
|
|
content: withCtx(() => [
|
|
isCommunityEditionRegistered.value ? (openBlock(), createBlock(unref(I18nT), {
|
|
key: 0,
|
|
keypath: "settings.usageAndPlan.license.communityRegistered.tooltip",
|
|
scope: "global"
|
|
})) : createCommentVNode("", true)
|
|
]),
|
|
default: withCtx(() => [
|
|
createVNode(_component_N8nBadge, null, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(badgedPlanName.value.badge), 1)
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
], 2)) : createCommentVNode("", true)
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"]),
|
|
isCommunity.value && canUserRegisterCommunityPlus.value ? (openBlock(), createBlock(_component_N8nNotice, {
|
|
key: 0,
|
|
class: "mt-0",
|
|
theme: "warning"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(unref(I18nT), {
|
|
keypath: "settings.usageAndPlan.callOut",
|
|
scope: "global"
|
|
}, {
|
|
link: withCtx(() => [
|
|
createVNode(_component_N8nButton, {
|
|
class: "pl-0 pr-0",
|
|
text: "",
|
|
label: unref(i18n).baseText("settings.usageAndPlan.callOut.link"),
|
|
onClick: openCommunityRegisterModal
|
|
}, null, 8, ["label"])
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})) : createCommentVNode("", true),
|
|
createBaseVNode("div", {
|
|
class: normalizeClass(_ctx.$style.quota)
|
|
}, [
|
|
createVNode(_component_n8n_text, {
|
|
size: "medium",
|
|
color: "text-light"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(i18n).baseText("settings.usageAndPlan.activeWorkflows")), 1)
|
|
]),
|
|
_: 1
|
|
}),
|
|
createBaseVNode("div", {
|
|
class: normalizeClass(_ctx.$style.chart)
|
|
}, [
|
|
unref(usageStore).activeWorkflowTriggersLimit > 0 ? (openBlock(), createElementBlock("span", {
|
|
key: 0,
|
|
class: normalizeClass(_ctx.$style.chartLine)
|
|
}, [
|
|
createBaseVNode("span", {
|
|
class: normalizeClass(_ctx.$style.chartBar),
|
|
style: normalizeStyle({ width: `${unref(usageStore).executionPercentage}%` })
|
|
}, null, 6)
|
|
], 2)) : createCommentVNode("", true),
|
|
createVNode(unref(I18nT), {
|
|
tag: "span",
|
|
class: normalizeClass(_ctx.$style.count),
|
|
keypath: "settings.usageAndPlan.activeWorkflows.count",
|
|
scope: "global"
|
|
}, {
|
|
count: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(usageStore).activeWorkflowTriggersCount), 1)
|
|
]),
|
|
limit: withCtx(() => [
|
|
unref(usageStore).activeWorkflowTriggersLimit < 0 ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(unref(i18n).baseText("settings.usageAndPlan.activeWorkflows.unlimited")), 1)) : (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(unref(usageStore).activeWorkflowTriggersLimit), 1))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])
|
|
], 2)
|
|
], 2),
|
|
createVNode(unref(InfoTip), null, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(i18n).baseText("settings.usageAndPlan.activeWorkflows.hint")), 1)
|
|
]),
|
|
_: 1
|
|
}),
|
|
createBaseVNode("div", {
|
|
class: normalizeClass(_ctx.$style.buttons)
|
|
}, [
|
|
canUserActivateLicense.value ? (openBlock(), createBlock(_component_n8n_button, {
|
|
key: 0,
|
|
class: normalizeClass(_ctx.$style.buttonTertiary),
|
|
type: "tertiary",
|
|
size: "large",
|
|
onClick: onAddActivationKey
|
|
}, {
|
|
default: withCtx(() => [
|
|
createBaseVNode("span", null, toDisplayString(unref(i18n).baseText("settings.usageAndPlan.button.activation")), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("", true),
|
|
unref(usageStore).managementToken ? (openBlock(), createBlock(_component_n8n_button, {
|
|
key: 1,
|
|
size: "large",
|
|
onClick: onManagePlan
|
|
}, {
|
|
default: withCtx(() => [
|
|
createBaseVNode("a", {
|
|
href: managePlanUrl.value,
|
|
target: "_blank"
|
|
}, toDisplayString(unref(i18n).baseText("settings.usageAndPlan.button.manage")), 9, _hoisted_7)
|
|
]),
|
|
_: 1
|
|
})) : (openBlock(), createBlock(_component_n8n_button, {
|
|
key: 2,
|
|
size: "large",
|
|
onClick: withModifiers(onViewPlans, ["prevent"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createBaseVNode("a", {
|
|
href: viewPlansUrl.value,
|
|
target: "_blank"
|
|
}, toDisplayString(unref(i18n).baseText("settings.usageAndPlan.button.plans")), 9, _hoisted_8)
|
|
]),
|
|
_: 1
|
|
}))
|
|
], 2),
|
|
createVNode(_component_el_dialog, {
|
|
modelValue: activationKeyModal.value,
|
|
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => activationKeyModal.value = $event),
|
|
width: "480px",
|
|
top: "0",
|
|
title: unref(i18n).baseText("settings.usageAndPlan.dialog.activation.title"),
|
|
"modal-class": _ctx.$style.center,
|
|
onClosed: onDialogClosed,
|
|
onOpened: onDialogOpened
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_n8n_input, {
|
|
ref_key: "activationKeyInput",
|
|
ref: activationKeyInput,
|
|
modelValue: activationKey.value,
|
|
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activationKey.value = $event),
|
|
placeholder: unref(i18n).baseText("settings.usageAndPlan.dialog.activation.label")
|
|
}, null, 8, ["modelValue", "placeholder"])
|
|
]),
|
|
footer: withCtx(() => [
|
|
createVNode(_component_n8n_button, {
|
|
type: "secondary",
|
|
onClick: _cache[1] || (_cache[1] = ($event) => activationKeyModal.value = false)
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(i18n).baseText("settings.usageAndPlan.dialog.activation.cancel")), 1)
|
|
]),
|
|
_: 1
|
|
}),
|
|
createVNode(_component_n8n_button, { onClick: onLicenseActivation }, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(i18n).baseText("settings.usageAndPlan.dialog.activation.activate")), 1)
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
}, 8, ["modelValue", "title", "modal-class"])
|
|
])) : createCommentVNode("", true)
|
|
]);
|
|
};
|
|
}
|
|
});
|
|
const center = "_center_eht1q_123";
|
|
const actionBox = "_actionBox_eht1q_127";
|
|
const spacedFlex = "_spacedFlex_eht1q_131";
|
|
const title = "_title_eht1q_137";
|
|
const quota = "_quota_eht1q_143";
|
|
const count = "_count_eht1q_155";
|
|
const buttons = "_buttons_eht1q_160";
|
|
const chart = "_chart_eht1q_176";
|
|
const chartLine = "_chartLine_eht1q_183";
|
|
const chartBar = "_chartBar_eht1q_193";
|
|
const titleTooltip = "_titleTooltip_eht1q_207";
|
|
const style0 = {
|
|
center,
|
|
actionBox,
|
|
spacedFlex,
|
|
title,
|
|
quota,
|
|
count,
|
|
buttons,
|
|
chart,
|
|
chartLine,
|
|
chartBar,
|
|
titleTooltip
|
|
};
|
|
const cssModules = {
|
|
"$style": style0
|
|
};
|
|
const SettingsUsageAndPlan = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules], ["__scopeId", "data-v-980f524b"]]);
|
|
export {
|
|
SettingsUsageAndPlan as default
|
|
};
|