n8n-editor-ui
Version:
Workflow Editor UI for n8n
577 lines (576 loc) • 24.8 kB
JavaScript
import { C as computed, Cn as toDisplayString, D as createElementBlock, E as createCommentVNode, Gt as unref, It as ref, J as onBeforeUnmount, M as createVNode, P as defineComponent, Pt as reactive, T as createBlock, Z as onMounted, _ as Fragment, _t as watch, bt as withCtx, et as openBlock, h as withModifiers, it as renderList, j as createTextVNode, k as createSlots, q as onBeforeMount, vn as normalizeClass, w as createBaseVNode } from "./vue.runtime.esm-bundler-tP5dCd7J.js";
import { _t as useI18n, mt as i18n, vt as I18nT } from "./_MapCache-ficiegRb.js";
import { D as N8nPopover_default, J as N8nSelect_default, Q as N8nCheckbox_default, Sn as N8nButton_default, Y as N8nOption_default, ht as N8nTooltip_default, lt as N8nBadge_default, mt as N8nLink_default, wn as N8nIcon_default, xn as N8nText_default, yt as N8nInput_default } from "./src-DgvumQTi.js";
import { t as __plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BwBpWJRZ.js";
import { t as ElDatePicker } from "./date-picker-B6nJ4qMb.js";
import { O as useTelemetry, Ui as isEmpty, gs as useSettingsStore, oa as useUIStore } from "./builder.store-sBTWwxRU.js";
import { bc as EnterpriseEditionFeature, us as STOP_MANY_EXECUTIONS_MODAL_KEY } from "./constants-BbpucWL4.js";
import { t as useDebounce } from "./useDebounce-Bnb8W2LR.js";
import { t as usePageRedirectionHelper } from "./usePageRedirectionHelper-fGNB6ZKK.js";
import { t as WorkflowTagsDropdown_default } from "./WorkflowTagsDropdown-DEysJMrX.js";
import { t as AnnotationTagsDropdown_ee_default } from "./AnnotationTagsDropdown.ee-CF7otrg2.js";
var ExecutionStopAllText_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
__name: "ExecutionStopAllText",
props: { executions: {} },
setup(__props) {
const props = __props;
const uiStore = useUIStore();
const i18n$1 = useI18n();
const hasCancellableExecution = computed(() => props.executions.find((x) => [
"new",
"running",
"waiting"
].includes(x.status)));
const telemetry = useTelemetry();
function onStopManyExecutions() {
telemetry.track("User initiated stop many executions");
uiStore.openModal(STOP_MANY_EXECUTIONS_MODAL_KEY);
}
return (_ctx, _cache) => {
return hasCancellableExecution.value ? (openBlock(), createBlock(unref(N8nText_default), {
key: 0,
class: normalizeClass(_ctx.$style.stopAll),
size: "small",
color: "text-base",
onClick: onStopManyExecutions
}, {
default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n$1).baseText("generic.stopAll")), 1)]),
_: 1
}, 8, ["class"])) : createCommentVNode("", true);
};
}
});
var ExecutionStopAllText_vue_vue_type_style_index_0_lang_module_default = { stopAll: "_stopAll_1ryby_123" };
var ExecutionStopAllText_default = /* @__PURE__ */ __plugin_vue_export_helper_default(ExecutionStopAllText_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": ExecutionStopAllText_vue_vue_type_style_index_0_lang_module_default }]]);
var ConcurrentExecutionsHeader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
__name: "ConcurrentExecutionsHeader",
props: {
runningExecutionsCount: {},
concurrencyCap: {},
isCloudDeployment: { type: Boolean }
},
emits: ["goToUpgrade"],
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const i18n$1 = useI18n();
const tooltipText = computed(() => {
let text = i18n$1.baseText("executionsList.activeExecutions.tooltip", { interpolate: {
running: props.runningExecutionsCount,
cap: props.concurrencyCap
} });
text += "\n" + i18n$1.baseText("executionsList.activeExecutions.evaluationNote");
return text;
});
const headerText = computed(() => {
if (props.runningExecutionsCount === 0) return i18n$1.baseText("executionsList.activeExecutions.none");
return i18n$1.baseText("executionsList.activeExecutions.header", { interpolate: {
running: props.runningExecutionsCount,
cap: props.concurrencyCap
} });
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
"data-test-id": "concurrent-executions-header",
class: normalizeClass(_ctx.$style.concurrentExecutionHeader)
}, [createVNode(unref(N8nText_default), null, {
default: withCtx(() => [createTextVNode(toDisplayString(headerText.value), 1)]),
_: 1
}), createVNode(unref(N8nTooltip_default), null, {
content: withCtx(() => [createBaseVNode("div", { class: normalizeClass(_ctx.$style.tooltip) }, [createTextVNode(toDisplayString(tooltipText.value) + " ", 1), props.isCloudDeployment ? (openBlock(), createBlock(unref(N8nLink_default), {
key: 0,
bold: "",
size: "small",
class: normalizeClass(_ctx.$style.link),
onClick: _cache[0] || (_cache[0] = ($event) => emit("goToUpgrade"))
}, {
default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n$1).baseText("generic.upgradeNow")), 1)]),
_: 1
}, 8, ["class"])) : (openBlock(), createBlock(unref(N8nLink_default), {
key: 1,
class: normalizeClass(_ctx.$style.link),
href: unref(i18n$1).baseText("executions.concurrency.docsLink"),
target: "_blank"
}, {
default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n$1).baseText("generic.viewDocs")), 1)]),
_: 1
}, 8, ["class", "href"]))], 2)]),
default: withCtx(() => [createVNode(unref(N8nIcon_default), {
icon: "info",
class: "ml-2xs"
})]),
_: 1
})], 2);
};
}
});
var ConcurrentExecutionsHeader_vue_vue_type_style_index_0_lang_module_default = {
tooltip: "_tooltip_5spe6_123",
link: "_link_5spe6_128",
concurrentExecutionHeader: "_concurrentExecutionHeader_5spe6_132"
};
var ConcurrentExecutionsHeader_default = /* @__PURE__ */ __plugin_vue_export_helper_default(ConcurrentExecutionsHeader_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": ConcurrentExecutionsHeader_vue_vue_type_style_index_0_lang_module_default }]]);
var _hoisted_1 = { "data-test-id": "execution-filter-form" };
var _hoisted_2 = { for: "execution-filter-workflows" };
var _hoisted_3 = { for: "execution-filter-tags" };
var _hoisted_4 = { for: "execution-filter-status" };
var _hoisted_5 = { for: "execution-filter-start-date" };
var _hoisted_6 = { for: "execution-filter-annotation-tags" };
var _hoisted_7 = { for: "execution-filter-annotation-vote" };
var _hoisted_8 = { for: "execution-filter-saved-data-key" };
var _hoisted_9 = { for: "execution-filter-saved-data-value" };
var DATE_TIME_MASK = "YYYY-MM-DD HH:mm";
var ExecutionsFilter_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
__name: "ExecutionsFilter",
props: {
workflows: { default: () => [] },
popoverSide: { default: "bottom" },
popoverAlign: { default: "center" },
teleported: {
type: Boolean,
default: true
}
},
emits: ["filterChanged"],
setup(__props, { emit: __emit }) {
const settingsStore = useSettingsStore();
const { debounce } = useDebounce();
const telemetry = useTelemetry();
const pageRedirectionHelper = usePageRedirectionHelper();
const props = __props;
const emit = __emit;
const debouncedEmit = debounce(emit, { debounceTime: 500 });
const isCustomDataFilterTracked = ref(false);
const isAdvancedExecutionFilterEnabled = computed(() => settingsStore.isEnterpriseFeatureEnabled[EnterpriseEditionFeature.AdvancedExecutionFilters]);
const isAnnotationFiltersEnabled = computed(() => isAdvancedExecutionFilterEnabled.value);
const showTags = computed(() => false);
const getDefaultFilter = () => ({
status: "all",
workflowId: "all",
tags: [],
annotationTags: [],
startDate: "",
endDate: "",
metadata: [{
key: "",
value: "",
exactMatch: false
}],
vote: "all"
});
const filter = reactive(getDefaultFilter());
watch(filter, (newFilter) => {
if (newFilter.startDate || newFilter.endDate) debouncedEmit("filterChanged", newFilter);
else emit("filterChanged", newFilter);
}, {
deep: true,
immediate: false
});
const statuses = computed(() => [
{
id: "all",
name: i18n.baseText("executionsList.anyStatus")
},
{
id: "error",
name: i18n.baseText("executionsList.error")
},
{
id: "canceled",
name: i18n.baseText("executionsList.canceled")
},
{
id: "new",
name: i18n.baseText("executionsList.new")
},
{
id: "running",
name: i18n.baseText("executionsList.running")
},
{
id: "success",
name: i18n.baseText("executionsList.success")
},
{
id: "waiting",
name: i18n.baseText("executionsList.waiting")
}
]);
const voteFilterOptions = computed(() => [
{
id: "all",
name: i18n.baseText("executionsFilter.annotation.rating.all")
},
{
id: "up",
name: i18n.baseText("executionsFilter.annotation.rating.good")
},
{
id: "down",
name: i18n.baseText("executionsFilter.annotation.rating.bad")
}
]);
const countSelectedFilterProps = computed(() => {
return [
filter.status !== "all",
filter.workflowId !== "all" && props.workflows.length,
!isEmpty(filter.tags),
!isEmpty(filter.annotationTags),
filter.vote !== "all",
!isEmpty(filter.metadata),
!!filter.startDate,
!!filter.endDate
].filter(Boolean).length;
});
const onFilterMetaChange = (index, prop, value) => {
if (!filter.metadata[index]) filter.metadata[index] = {
key: "",
value: "",
exactMatch: false
};
filter.metadata[index][prop] = value;
if (!isCustomDataFilterTracked.value) {
telemetry.track("User filtered executions with custom data");
isCustomDataFilterTracked.value = true;
}
debouncedEmit("filterChanged", filter);
};
const onTagsChange = () => {
emit("filterChanged", filter);
};
const onAnnotationTagsChange = () => {
emit("filterChanged", filter);
};
const onFilterReset = () => {
Object.assign(filter, getDefaultFilter());
};
const goToUpgrade = () => {
pageRedirectionHelper.goToUpgrade("custom-data-filter", "upgrade-custom-data-filter");
};
const onExactMatchChange = (e) => {
if (typeof e === "boolean") onFilterMetaChange(0, "exactMatch", e);
};
onBeforeMount(() => {
isCustomDataFilterTracked.value = false;
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(N8nPopover_default), {
side: props.popoverSide,
align: props.popoverAlign,
"position-strategy": "absolute",
width: "440px",
"content-class": _ctx.$style["popover-content"],
"show-arrow": ""
}, {
trigger: withCtx(() => [createVNode(unref(N8nButton_default), {
icon: "funnel",
type: "tertiary",
size: "medium",
square: "",
active: !!countSelectedFilterProps.value,
"data-test-id": "executions-filter-button",
class: normalizeClass(_ctx.$style.filterButton)
}, createSlots({ _: 2 }, [!!countSelectedFilterProps.value ? {
name: "default",
fn: withCtx(() => [createVNode(unref(N8nBadge_default), {
theme: "primary",
class: normalizeClass(["mr-4xs", _ctx.$style.filterBadge]),
"data-test-id": "execution-filter-badge"
}, {
default: withCtx(() => [createTextVNode(toDisplayString(countSelectedFilterProps.value), 1)]),
_: 1
}, 8, ["class"])]),
key: "0"
} : void 0]), 1032, ["active", "class"])]),
content: withCtx(() => [createBaseVNode("div", _hoisted_1, [
_ctx.workflows && _ctx.workflows.length > 0 ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(_ctx.$style.group)
}, [createBaseVNode("label", _hoisted_2, toDisplayString(unref(i18n).baseText("workflows.heading")), 1), createVNode(unref(N8nSelect_default), {
id: "execution-filter-workflows",
modelValue: filter.workflowId,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => filter.workflowId = $event),
placeholder: unref(i18n).baseText("executionsFilter.selectWorkflow"),
filterable: "",
"data-test-id": "executions-filter-workflows-select",
teleported: _ctx.teleported
}, {
default: withCtx(() => [createBaseVNode("div", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(props.workflows, (item, idx) => {
return openBlock(), createBlock(unref(N8nOption_default), {
key: idx,
label: item.name,
value: item.id
}, null, 8, ["label", "value"]);
}), 128))])]),
_: 1
}, 8, [
"modelValue",
"placeholder",
"teleported"
])], 2)) : createCommentVNode("", true),
showTags.value ? (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass(_ctx.$style.group)
}, [createBaseVNode("label", _hoisted_3, toDisplayString(unref(i18n).baseText("workflows.filters.tags")), 1), createVNode(WorkflowTagsDropdown_default, {
id: "execution-filter-tags",
modelValue: filter.tags,
"onUpdate:modelValue": [_cache[1] || (_cache[1] = ($event) => filter.tags = $event), onTagsChange],
placeholder: unref(i18n).baseText("workflowOpen.filterWorkflows"),
"create-enabled": false,
"data-test-id": "executions-filter-tags-select"
}, null, 8, ["modelValue", "placeholder"])], 2)) : createCommentVNode("", true),
createBaseVNode("div", { class: normalizeClass(_ctx.$style.group) }, [createBaseVNode("label", _hoisted_4, toDisplayString(unref(i18n).baseText("executionsList.status")), 1), createVNode(unref(N8nSelect_default), {
id: "execution-filter-status",
modelValue: filter.status,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => filter.status = $event),
placeholder: unref(i18n).baseText("executionsFilter.selectStatus"),
filterable: "",
"data-test-id": "executions-filter-status-select",
teleported: _ctx.teleported
}, {
default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(statuses.value, (item, idx) => {
return openBlock(), createBlock(unref(N8nOption_default), {
key: idx,
label: item.name,
value: item.id
}, null, 8, ["label", "value"]);
}), 128))]),
_: 1
}, 8, [
"modelValue",
"placeholder",
"teleported"
])], 2),
createBaseVNode("div", { class: normalizeClass(_ctx.$style.group) }, [createBaseVNode("label", _hoisted_5, toDisplayString(unref(i18n).baseText("executionsFilter.start")), 1), createBaseVNode("div", { class: normalizeClass(_ctx.$style.dates) }, [
createVNode(unref(ElDatePicker), {
id: "execution-filter-start-date",
modelValue: filter.startDate,
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => filter.startDate = $event),
type: "datetime",
teleported: false,
format: DATE_TIME_MASK,
placeholder: unref(i18n).baseText("executionsFilter.startDate"),
"data-test-id": "executions-filter-start-date-picker"
}, null, 8, ["modelValue", "placeholder"]),
createBaseVNode("span", { class: normalizeClass(_ctx.$style.divider) }, "to", 2),
createVNode(unref(ElDatePicker), {
id: "execution-filter-end-date",
modelValue: filter.endDate,
"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => filter.endDate = $event),
type: "datetime",
teleported: false,
format: DATE_TIME_MASK,
placeholder: unref(i18n).baseText("executionsFilter.endDate"),
"data-test-id": "executions-filter-end-date-picker"
}, null, 8, ["modelValue", "placeholder"])
], 2)], 2),
isAnnotationFiltersEnabled.value ? (openBlock(), createElementBlock("div", {
key: 2,
class: normalizeClass(_ctx.$style.group)
}, [createBaseVNode("label", _hoisted_6, toDisplayString(unref(i18n).baseText("executionsFilter.annotation.tags")), 1), createVNode(AnnotationTagsDropdown_ee_default, {
id: "execution-filter-annotation-tags",
modelValue: filter.annotationTags,
"onUpdate:modelValue": [_cache[5] || (_cache[5] = ($event) => filter.annotationTags = $event), onAnnotationTagsChange],
placeholder: unref(i18n).baseText("workflowOpen.filterWorkflows"),
"create-enabled": false,
"data-test-id": "executions-filter-annotation-tags-select"
}, null, 8, ["modelValue", "placeholder"])], 2)) : createCommentVNode("", true),
isAnnotationFiltersEnabled.value ? (openBlock(), createElementBlock("div", {
key: 3,
class: normalizeClass(_ctx.$style.group)
}, [createBaseVNode("label", _hoisted_7, toDisplayString(unref(i18n).baseText("executionsFilter.annotation.rating")), 1), createVNode(unref(N8nSelect_default), {
id: "execution-filter-annotation-vote",
modelValue: filter.vote,
"onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => filter.vote = $event),
placeholder: unref(i18n).baseText("executionsFilter.annotation.selectVoteFilter"),
filterable: "",
"data-test-id": "executions-filter-annotation-vote-select",
teleported: _ctx.teleported
}, {
default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(voteFilterOptions.value, (item, idx) => {
return openBlock(), createBlock(unref(N8nOption_default), {
key: idx,
label: item.name,
value: item.id
}, null, 8, ["label", "value"]);
}), 128))]),
_: 1
}, 8, [
"modelValue",
"placeholder",
"teleported"
])], 2)) : createCommentVNode("", true),
createBaseVNode("div", { class: normalizeClass(_ctx.$style.group) }, [createVNode(unref(N8nTooltip_default), { placement: "right" }, {
content: withCtx(() => [createVNode(unref(I18nT), {
tag: "span",
keypath: "executionsFilter.customData.docsTooltip",
scope: "global"
})]),
default: withCtx(() => [createBaseVNode("span", { class: normalizeClass([_ctx.$style.label, _ctx.$style.savedDataLabel]) }, [createBaseVNode("span", null, toDisplayString(unref(i18n).baseText("executionsFilter.savedData")), 1), createVNode(unref(N8nIcon_default), {
class: normalizeClass(_ctx.$style.tooltipIcon),
icon: "circle-help",
size: "medium"
}, null, 8, ["class"])], 2)]),
_: 1
}), createBaseVNode("div", { class: normalizeClass(_ctx.$style.subGroup) }, [
createBaseVNode("label", _hoisted_8, toDisplayString(unref(i18n).baseText("executionsFilter.savedDataKey")), 1),
createVNode(unref(N8nTooltip_default), {
disabled: isAdvancedExecutionFilterEnabled.value,
placement: "top"
}, {
content: withCtx(() => [createVNode(unref(I18nT), {
tag: "span",
keypath: "executionsFilter.customData.inputTooltip",
scope: "global"
}, {
link: withCtx(() => [createBaseVNode("a", {
href: "#",
"data-test-id": "executions-filter-view-plans-link",
onClick: withModifiers(goToUpgrade, ["prevent"])
}, toDisplayString(unref(i18n).baseText("executionsFilter.customData.inputTooltip.link")), 1)]),
_: 1
})]),
default: withCtx(() => [createVNode(unref(N8nInput_default), {
id: "execution-filter-saved-data-key",
name: "execution-filter-saved-data-key",
type: "text",
disabled: !isAdvancedExecutionFilterEnabled.value,
placeholder: unref(i18n).baseText("executionsFilter.savedDataKeyPlaceholder"),
"model-value": filter.metadata[0]?.key,
"data-test-id": "execution-filter-saved-data-key-input",
"onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => onFilterMetaChange(0, "key", $event))
}, null, 8, [
"disabled",
"placeholder",
"model-value"
])]),
_: 1
}, 8, ["disabled"]),
createBaseVNode("div", { class: normalizeClass(_ctx.$style.checkboxWrapper) }, [createVNode(unref(N8nTooltip_default), {
disabled: isAdvancedExecutionFilterEnabled.value,
placement: "top"
}, {
content: withCtx(() => [createVNode(unref(I18nT), {
tag: "span",
keypath: "executionsFilter.customData.inputTooltip",
scope: "global"
}, {
link: withCtx(() => [createBaseVNode("a", {
href: "#",
onClick: withModifiers(goToUpgrade, ["prevent"])
}, toDisplayString(unref(i18n).baseText("executionsFilter.customData.inputTooltip.link")), 1)]),
_: 1
})]),
default: withCtx(() => [createVNode(unref(N8nCheckbox_default), {
label: unref(i18n).baseText("executionsFilter.savedDataExactMatch"),
"model-value": filter.metadata[0]?.exactMatch,
disabled: !isAdvancedExecutionFilterEnabled.value,
"data-test-id": "execution-filter-saved-data-exact-match-checkbox",
"onUpdate:modelValue": onExactMatchChange
}, null, 8, [
"label",
"model-value",
"disabled"
])]),
_: 1
}, 8, ["disabled"])], 2),
createBaseVNode("label", _hoisted_9, toDisplayString(unref(i18n).baseText("executionsFilter.savedDataValue")), 1),
createVNode(unref(N8nTooltip_default), {
disabled: isAdvancedExecutionFilterEnabled.value,
placement: "top"
}, {
content: withCtx(() => [createVNode(unref(I18nT), {
tag: "span",
keypath: "executionsFilter.customData.inputTooltip",
scope: "global"
}, {
link: withCtx(() => [createBaseVNode("a", {
href: "#",
onClick: withModifiers(goToUpgrade, ["prevent"])
}, toDisplayString(unref(i18n).baseText("executionsFilter.customData.inputTooltip.link")), 1)]),
_: 1
})]),
default: withCtx(() => [createVNode(unref(N8nInput_default), {
id: "execution-filter-saved-data-value",
name: "execution-filter-saved-data-value",
type: "text",
disabled: !isAdvancedExecutionFilterEnabled.value,
placeholder: unref(i18n).baseText("executionsFilter.savedDataValuePlaceholder"),
"model-value": filter.metadata[0]?.value,
"data-test-id": "execution-filter-saved-data-value-input",
"onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => onFilterMetaChange(0, "value", $event))
}, null, 8, [
"disabled",
"placeholder",
"model-value"
])]),
_: 1
}, 8, ["disabled"])
], 2)], 2),
!!countSelectedFilterProps.value ? (openBlock(), createBlock(unref(N8nButton_default), {
key: 4,
class: normalizeClass(_ctx.$style.resetBtn),
size: "large",
text: "",
"data-test-id": "executions-filter-reset-button",
onClick: onFilterReset
}, {
default: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).baseText("executionsFilter.reset")), 1)]),
_: 1
}, 8, ["class"])) : createCommentVNode("", true)
])]),
_: 1
}, 8, [
"side",
"align",
"content-class"
]);
};
}
});
var ExecutionsFilter_vue_vue_type_style_index_0_lang_module_default = {
group: "_group_15fsf_123",
label: "_label_15fsf_124",
savedDataLabel: "_savedDataLabel_15fsf_131",
subGroup: "_subGroup_15fsf_139",
checkboxWrapper: "_checkboxWrapper_15fsf_147",
dates: "_dates_15fsf_155",
divider: "_divider_15fsf_163",
resetBtn: "_resetBtn_15fsf_168",
tooltipIcon: "_tooltipIcon_15fsf_173",
filterButton: "_filterButton_15fsf_177",
filterBadge: "_filterBadge_15fsf_180",
"popover-content": "_popover-content_15fsf_187"
};
var ExecutionsFilter_default = /* @__PURE__ */ __plugin_vue_export_helper_default(ExecutionsFilter_vue_vue_type_script_setup_true_lang_default, [["__cssModules", { "$style": ExecutionsFilter_vue_vue_type_style_index_0_lang_module_default }], ["__scopeId", "data-v-939ad775"]]);
var ExecutionsTime_default = /* @__PURE__ */ defineComponent({
__name: "ExecutionsTime",
props: { startTime: {} },
setup(__props) {
const props = __props;
const i18n$1 = useI18n();
const nowTime = ref(-1);
const intervalTimer = ref(null);
const time = computed(() => {
if (!props.startTime) return "...";
const msPassed = nowTime.value - new Date(props.startTime).getTime();
return i18n$1.displayTimer(msPassed);
});
onMounted(() => {
setNow();
intervalTimer.value = setInterval(() => {
setNow();
}, 1e3);
});
onBeforeUnmount(() => {
if (intervalTimer.value !== null) clearInterval(intervalTimer.value);
});
function setNow() {
nowTime.value = (/* @__PURE__ */ new Date()).getTime();
}
return (_ctx, _cache) => {
return openBlock(), createElementBlock("span", null, toDisplayString(time.value), 1);
};
}
});
export { ExecutionStopAllText_default as i, ExecutionsFilter_default as n, ConcurrentExecutionsHeader_default as r, ExecutionsTime_default as t };