n8n-editor-ui 1.85.2 → 1.87.0

package/dist/assets/{TestDefinitionEditView-5kDGEtaD.js → TestDefinitionEditView-DX6GIeq2.js}

@@ -1,19 +1,19 @@
-import { u as useTestDefinitionForm } from "./useTestDefinitionForm-TDiKTq9o.js";
-import { _ as _export_sfc, i as createElementBlock, g as openBlock, k as createBaseVNode, n as normalizeClass, d as defineComponent, r as ref, $ as useCssModule, q as computed, h as resolveComponent, m as unref, j as createVNode, f as createCommentVNode, aR as N8nTooltip, w as withCtx, e as createBlock, by as N8nText, x as renderSlot, F as Fragment, l as createTextVNode, t as toDisplayString, da as InfoTip, c as useI18n, ga as ne, bw as useTemplateRef, D as renderList, gb as N8nInput, aT as _sfc_main$a, b9 as N8nButton, z as nextTick, T as useWorkflowsStore, bu as useNodeTypesStore, U as useRoute, b as useRouter, fK as useModel, o as onMounted, cV as N8nHeading, gc as _sfc_main$b, b2 as mergeProps, ah as useTelemetry, a3 as useProjectsStore, gd as SAMPLE_EVALUATION_WORKFLOW, aS as N8nLink, ge as __unplugin_components_0, V as VIEWS, fJ as mergeModels, gf as Tag, gg as NODE_PINNING_MODAL_KEY, gh as __unplugin_components_0$1, aj as useMessage, fj as dateFormat, ba as watchEffect, aB as withDirectives, aC as vShow, gi as TestTableBase, c7 as N8nIcon, B as normalizeStyle, K as useDebounce, a as useToast, c4 as useTestDefinitionStore, fU as useAnnotationTagsStore, L as useUIStore, Z as useDocumentVisibility, I as watch, gj as InlineNameEdit } from "./index-DZljH0cm.js";
-import { u as useVueFlow, a as useCanvasMapping, C as Canvas, b as CanvasNode } from "./useCanvasMapping-C0PMQVwg.js";
-import { b as useCanvasOperations } from "./useCanvasOperations-2Ca5hPmu.js";
-import { L as Line } from "./index-Cjz62pAo.js";
-import "./useRunWorkflow-sGIs6NeH.js";
-import "./pushConnection.store-DHLcz9cC.js";
+import { u as useTestDefinitionForm } from "./useTestDefinitionForm-CCVy0jKP.js";
+import { _ as _export_sfc, i as createElementBlock, g as openBlock, k as createBaseVNode, n as normalizeClass, d as defineComponent, r as ref, a0 as useCssModule, q as computed, h as resolveComponent, m as unref, j as createVNode, f as createCommentVNode, aS as N8nTooltip, w as withCtx, e as createBlock, b9 as N8nText, x as renderSlot, F as Fragment, l as createTextVNode, t as toDisplayString, df as InfoTip, c as useI18n, g8 as ne, U as useWorkflowsStore, bw as useNodeTypesStore, W as useRoute, b as useRouter, fA as useModel, o as onMounted, c_ as N8nHeading, g9 as _sfc_main$9, b3 as mergeProps, bb as N8nButton, ai as useTelemetry, a4 as useProjectsStore, ga as SAMPLE_EVALUATION_WORKFLOW, aT as N8nLink, gb as __unplugin_components_0, V as VIEWS, fz as mergeModels, gc as Tag, gd as NODE_PINNING_MODAL_KEY, ge as __unplugin_components_0$1, ak as useMessage, gf as useCssVar, f9 as dateformat, bc as watchEffect, D as renderList, gg as TestTableBase, bE as N8nIcon, K as useDebounce, a as useToast, g5 as useTestDefinitionStore, fQ as useAnnotationTagsStore, L as useUIStore, $ as useDocumentVisibility, I as watch, d2 as orderBy, aU as _sfc_main$a, gh as InlineNameEdit } from "./index-DD7Wuhk5.js";
+import { u as useVueFlow, a as useCanvasMapping, C as Canvas, b as CanvasNode } from "./useCanvasMapping-DJvMRP2s.js";
+import { b as useCanvasOperations } from "./useCanvasOperations-DCaSrD1N.js";
+import { L as Line } from "./index-BrjPYODL.js";
+import { _ as __unplugin_components_0$2 } from "./AnimatedSpinner-urWn52iY.js";
+import { c as convertToDisplayDate } from "./dateFormatter-C7xnNKzY.js";
 const blockArrow = "_blockArrow_hbkir_123";
 const stalk = "_stalk_hbkir_129";
 const arrowHead = "_arrowHead_hbkir_136";
-const style0$8 = {
+const style0$7 = {
   blockArrow,
   stalk,
   arrowHead
 };
-const _sfc_main$9 = {};
+const _sfc_main$8 = {};
 function _sfc_render(_ctx, _cache) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(_ctx.$style.blockArrow)
@@ -26,11 +26,11 @@ function _sfc_render(_ctx, _cache) {
     }, null, 2)
   ], 2);
 }
-const cssModules$8 = {
-  "$style": style0$8
+const cssModules$7 = {
+  "$style": style0$7
 };
-const BlockArrow = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render], ["__cssModules", cssModules$8]]);
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const BlockArrow = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render], ["__cssModules", cssModules$7]]);
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "EvaluationStep",
   props: {
     title: { default: "" },
@@ -197,7 +197,7 @@ const infoTip = "_infoTip_1h8fm_172";
 const actions = "_actions_1h8fm_180";
 const cardContent = "_cardContent_1h8fm_186";
 const cardContentWrapper = "_cardContentWrapper_1h8fm_192";
-const style0$7 = {
+const style0$6 = {
   evaluationStep,
   evaluationTooltip,
   icon,
@@ -211,79 +211,10 @@ const style0$7 = {
   cardContentWrapper,
   "has-issues": "_has-issues_1h8fm_196"
 };
-const cssModules$7 = {
-  "$style": style0$7
-};
-const EvaluationStep = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__cssModules", cssModules$7]]);
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-  __name: "MetricsInput",
-  props: {
-    modelValue: {}
-  },
-  emits: ["update:modelValue", "deleteMetric"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const locale = useI18n();
-    const metricsRefs = useTemplateRef("metric");
-    function addNewMetric() {
-      emit("update:modelValue", [...props.modelValue, { name: "" }]);
-      void nextTick(() => metricsRefs.value?.at(-1)?.focus());
-    }
-    function updateMetric(index, name) {
-      const newMetrics = [...props.modelValue];
-      newMetrics[index].name = name;
-      emit("update:modelValue", newMetrics);
-    }
-    function onDeleteMetric(metric, index) {
-      if (!metric.id) {
-        const newMetrics = [...props.modelValue];
-        newMetrics.splice(index, 1);
-        emit("update:modelValue", newMetrics);
-      } else {
-        emit("deleteMetric", metric);
-      }
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", null, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.modelValue, (metric, index) => {
-          return openBlock(), createElementBlock("div", {
-            key: index,
-            class: normalizeClass([_ctx.$style.metricItem, "mb-xs"])
-          }, [
-            createVNode(unref(N8nInput), {
-              ref_for: true,
-              ref: "metric",
-              "data-test-id": "evaluation-metric-item",
-              "model-value": metric.name,
-              placeholder: unref(locale).baseText("testDefinition.edit.metricsPlaceholder"),
-              "onUpdate:modelValue": (value) => updateMetric(index, value)
-            }, null, 8, ["model-value", "placeholder", "onUpdate:modelValue"]),
-            createVNode(unref(_sfc_main$a), {
-              icon: "trash",
-              type: "secondary",
-              text: "",
-              onClick: ($event) => onDeleteMetric(metric, index)
-            }, null, 8, ["onClick"])
-          ], 2);
-        }), 128)),
-        createVNode(unref(N8nButton), {
-          type: "secondary",
-          label: unref(locale).baseText("testDefinition.edit.metricsNew"),
-          onClick: addNewMetric
-        }, null, 8, ["label"])
-      ]);
-    };
-  }
-});
-const metricItem = "_metricItem_1hbcq_123";
-const style0$6 = {
-  metricItem
-};
 const cssModules$6 = {
   "$style": style0$6
 };
-const MetricsInput = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__cssModules", cssModules$6]]);
+const EvaluationStep = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__cssModules", cssModules$6]]);
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "NodesPinning",
   props: {
@@ -407,7 +338,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         key: 1,
         class: normalizeClass(_ctx.$style.container)
       }, [
-        isLoading.value ? (openBlock(), createBlock(unref(_sfc_main$b), {
+        isLoading.value ? (openBlock(), createBlock(unref(_sfc_main$9), {
           key: 0,
           size: "large",
           type: "dots",
@@ -615,14 +546,12 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     "tagsModifiers": {},
     "evaluationWorkflow": { required: true },
     "evaluationWorkflowModifiers": {},
-    "metrics": { required: true },
-    "metricsModifiers": {},
     "mockedNodes": {
       required: true
     },
     "mockedNodesModifiers": {}
   }),
-  emits: /* @__PURE__ */ mergeModels(["openPinningModal", "deleteMetric", "openExecutionsViewForTag", "renameTag", "evaluationWorkflowCreated"], ["update:tags", "update:evaluationWorkflow", "update:metrics", "update:mockedNodes"]),
+  emits: /* @__PURE__ */ mergeModels(["openPinningModal", "openExecutionsViewForTag", "renameTag", "evaluationWorkflowCreated"], ["update:tags", "update:evaluationWorkflow", "update:mockedNodes"]),
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -651,7 +580,6 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       __props,
       "evaluationWorkflow"
     );
-    const metrics = useModel(__props, "metrics");
     const mockedNodes = useModel(__props, "mockedNodes");
     const selectedTag = computed(() => props.tagsById[tags.value.value[0]] ?? {});
     function openExecutionsView() {
@@ -782,25 +710,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               }, null, 8, ["modelValue", "example-pinned-data", "class", "sample-workflow-name"])
             ]),
             _: 1
-          }, 8, ["title", "description", "issues", "tooltip", "external-tooltip"]),
-          createVNode(BlockArrow, { class: "mt-5xs mb-5xs" }),
-          createVNode(EvaluationStep, {
-            title: unref(locale).baseText("testDefinition.edit.step.metrics"),
-            issues: _ctx.getFieldIssues("metrics"),
-            description: unref(locale).baseText("testDefinition.edit.step.metrics.description"),
-            tooltip: unref(locale).baseText("testDefinition.edit.step.metrics.tooltip"),
-            "external-tooltip": !_ctx.hasRuns
-          }, {
-            cardContent: withCtx(() => [
-              createVNode(MetricsInput, {
-                modelValue: metrics.value,
-                "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => metrics.value = $event),
-                class: normalizeClass([{ "has-issues": _ctx.getFieldIssues("metrics").length > 0 }, "mt-xs"]),
-                onDeleteMetric: _cache[4] || (_cache[4] = (metric) => emit("deleteMetric", metric))
-              }, null, 8, ["modelValue", "class"])
-            ]),
-            _: 1
-          }, 8, ["title", "issues", "description", "tooltip", "external-tooltip"])
+          }, 8, ["title", "description", "issues", "tooltip", "external-tooltip"])
         ], 2),
         createVNode(_component_Modal, {
           width: "calc(100% - (48px * 2))",
@@ -830,7 +740,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           content: withCtx(() => [
             createVNode(NodesPinning, {
               modelValue: mockedNodes.value,
-              "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => mockedNodes.value = $event),
+              "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => mockedNodes.value = $event),
               "data-test-id": "nodes-pinning-modal"
             }, null, 8, ["modelValue"])
           ]),
@@ -852,61 +762,44 @@ const cssModules$4 = {
   "$style": style0$4
 };
 const ConfigSection = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__cssModules", cssModules$4]]);
-const THEME_COLORS = {
-  light: {
-    primary: "rgb(255, 110, 92)",
-    text: {
-      primary: "rgb(68, 68, 68)",
-      secondary: "rgb(102, 102, 102)"
-    },
-    background: "rgb(255, 255, 255)",
-    grid: "rgba(68, 68, 68, 0.1)"
-  },
-  dark: {
-    primary: "rgb(255, 110, 92)",
-    text: {
-      primary: "rgb(255, 255, 255)",
-      secondary: "rgba(255, 255, 255, 0.7)"
-    },
-    background: "rgb(32, 32, 32)",
-    grid: "rgba(255, 255, 255, 0.1)"
-  }
-};
-function useMetricsChart(mode = "light") {
-  const colors = THEME_COLORS[mode];
-  const toRGBA = (color, alpha) => {
-    if (color.includes("rgba")) return color;
-    return color.replace("rgb", "rgba").replace(")", `, ${alpha})`);
+function useMetricsChart() {
+  const colors = {
+    primary: useCssVar("--color-primary", document.body).value,
+    textBase: useCssVar("--color-text-base", document.body).value,
+    backgroundXLight: useCssVar("--color-background-xlight", document.body).value,
+    foregroundLight: useCssVar("--color-foreground-light", document.body).value,
+    foregroundBase: useCssVar("--color-foreground-base", document.body).value,
+    foregroundDark: useCssVar("--color-foreground-dark", document.body).value
   };
   function generateChartData(runs2, metric) {
-    const sortedRuns = [...runs2].sort((a, b) => new Date(a.runAt).getTime() - new Date(b.runAt).getTime()).filter((run) => run.metrics?.[metric]);
-    return {
-      labels: sortedRuns.map((run) => {
-        return dateFormat(run.runAt, "yyyy-mm-dd HH:MM");
-      }),
+    const data = {
       datasets: [
         {
-          label: metric,
-          data: sortedRuns.map((run) => run.metrics?.[metric] ?? 0),
+          data: runs2,
+          parsing: {
+            xAxisKey: "id",
+            yAxisKey: `metrics.${metric}`
+          },
           borderColor: colors.primary,
-          backgroundColor: toRGBA(colors.primary, 0.1),
-          borderWidth: 2,
-          pointRadius: 4,
-          pointHoverRadius: 6,
-          pointBackgroundColor: colors.primary,
-          pointBorderColor: colors.primary,
-          pointHoverBackgroundColor: colors.background,
-          pointHoverBorderColor: colors.primary,
-          tension: 0.4,
-          fill: true
+          backgroundColor: colors.backgroundXLight,
+          borderWidth: 1,
+          pointRadius: 2,
+          pointHoverRadius: 4,
+          pointBackgroundColor: colors.backgroundXLight,
+          pointHoverBackgroundColor: colors.backgroundXLight
         }
       ]
     };
+    return data;
   }
-  function generateChartOptions(params) {
+  function generateChartOptions({
+    metric,
+    data
+  }) {
     return {
       responsive: true,
       maintainAspectRatio: false,
+      animation: false,
       devicePixelRatio: 2,
       interaction: {
         mode: "index",
@@ -914,67 +807,64 @@ function useMetricsChart(mode = "light") {
       },
       scales: {
         y: {
-          beginAtZero: true,
+          border: {
+            display: false
+          },
           grid: {
-            color: colors.grid
+            color: colors.foregroundBase
           },
           ticks: {
             padding: 8,
-            color: colors.text.primary
-          },
-          title: {
-            display: false,
-            text: params.metric,
-            padding: 16,
-            color: colors.text.primary
+            color: colors.textBase
           }
         },
         x: {
-          grid: {
+          border: {
             display: false
           },
-          ticks: {
+          grid: {
             display: false
           },
-          title: {
-            text: params.xTitle,
-            padding: 1,
-            color: colors.text.primary
+          ticks: {
+            color: colors.textBase,
+            // eslint-disable-next-line id-denylist
+            callback(_tickValue, index) {
+              return `#${data[index].index}`;
+            }
           }
         }
       },
       plugins: {
         tooltip: {
-          backgroundColor: colors.background,
-          titleColor: colors.text.primary,
+          backgroundColor: colors.backgroundXLight,
+          titleColor: colors.textBase,
           titleFont: {
             weight: "600"
           },
-          bodyColor: colors.text.secondary,
+          bodyColor: colors.textBase,
           bodySpacing: 4,
           padding: 12,
-          borderColor: toRGBA(colors.primary, 0.2),
+          borderColor: colors.foregroundBase,
           borderWidth: 1,
           displayColors: true,
           callbacks: {
-            title: (tooltipItems) => tooltipItems[0].label,
-            label: (context) => `${params.metric}: ${context.parsed.y.toFixed(2)}`
+            title: (tooltipItems) => {
+              return dateformat(tooltipItems[0].raw.runAt, "yyyy-mm-dd HH:MM");
+            },
+            label: (context) => `${metric}: ${context.parsed.y.toFixed(2)}`,
+            labelColor() {
+              return {
+                borderColor: "rgba(29, 21, 21, 0)",
+                backgroundColor: colors.primary,
+                borderWidth: 0,
+                borderRadius: 5
+              };
+            }
           }
         },
         legend: {
           display: false
         }
-      },
-      animation: {
-        duration: 750,
-        easing: "easeInOutQuart"
-      },
-      transitions: {
-        active: {
-          animation: {
-            duration: 300
-          }
-        }
       }
     };
   }
@@ -987,26 +877,29 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "MetricsChart",
   props: {
     selectedMetric: {},
-    runs: {},
-    theme: {}
+    runs: {}
   },
   emits: ["update:selectedMetric"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const props = __props;
-    const locale = useI18n();
-    const metricsChart = useMetricsChart(props.theme);
+    const metricsChart = useMetricsChart();
     const availableMetrics = computed(() => {
       return props.runs.reduce((acc, run) => {
         const metricKeys = Object.keys(run.metrics ?? {});
         return [.../* @__PURE__ */ new Set([...acc, ...metricKeys])];
       }, []);
     });
-    const chartData = computed(() => metricsChart.generateChartData(props.runs, props.selectedMetric));
+    const filteredRuns = computed(
+      () => props.runs.filter((run) => run.metrics?.[props.selectedMetric] !== void 0)
+    );
+    const chartData = computed(
+      () => metricsChart.generateChartData(filteredRuns.value, props.selectedMetric)
+    );
     const chartOptions = computed(
       () => metricsChart.generateChartOptions({
         metric: props.selectedMetric,
-        xTitle: locale.baseText("testDefinition.listRuns.runDate")
+        data: filteredRuns.value
       })
     );
     watchEffect(() => {
@@ -1017,8 +910,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_N8nOption = resolveComponent("N8nOption");
       const _component_N8nSelect = resolveComponent("N8nSelect");
-      return availableMetrics.value.length > 0 ? (openBlock(), createElementBlock("div", {
-        key: 0,
+      return openBlock(), createElementBlock("div", {
         class: normalizeClass(_ctx.$style.metricsChartContainer)
       }, [
         createBaseVNode("div", {
@@ -1046,22 +938,22 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         createBaseVNode("div", {
           class: normalizeClass(_ctx.$style.chartWrapper)
         }, [
-          availableMetrics.value.length > 0 ? (openBlock(), createBlock(unref(Line), {
+          (openBlock(), createBlock(unref(Line), {
             key: _ctx.selectedMetric,
             data: chartData.value,
             options: chartOptions.value,
             class: normalizeClass(_ctx.$style.metricsChart)
-          }, null, 8, ["data", "options", "class"])) : createCommentVNode("", true)
+          }, null, 8, ["data", "options", "class"]))
         ], 2)
-      ], 2)) : createCommentVNode("", true);
+      ], 2);
     };
   }
 });
-const metricsChartContainer = "_metricsChartContainer_1ejem_123";
-const chartHeader = "_chartHeader_1ejem_128";
-const chartTitle = "_chartTitle_1ejem_136";
-const metricSelect = "_metricSelect_1ejem_141";
-const chartWrapper = "_chartWrapper_1ejem_144";
+const metricsChartContainer = "_metricsChartContainer_1xhz2_123";
+const chartHeader = "_chartHeader_1xhz2_128";
+const chartTitle = "_chartTitle_1xhz2_131";
+const metricSelect = "_metricSelect_1xhz2_136";
+const chartWrapper = "_chartWrapper_1xhz2_139";
 const style0$3 = {
   metricsChartContainer,
   chartHeader,
@@ -1078,24 +970,43 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "TestRunsTable",
   props: {
     runs: {},
-    columns: {},
-    selectable: { type: Boolean }
+    columns: {}
   },
-  emits: ["rowClick", "selectionChange", "deleteRuns"],
+  emits: ["rowClick"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const props = __props;
-    const statusesColorDictionary = {
-      new: "var(--color-primary)",
-      running: "var(--color-secondary)",
-      completed: "var(--color-success)",
-      error: "var(--color-danger)",
-      cancelled: "var(--color-foreground-dark)",
-      warning: "var(--color-warning)",
-      success: "var(--color-success)"
+    const statusDictionary = {
+      new: {
+        icon: "status-new",
+        color: "foreground-xdark"
+      },
+      running: {
+        icon: "spinner",
+        color: "secondary"
+      },
+      completed: {
+        icon: "status-completed",
+        color: "success"
+      },
+      error: {
+        icon: "status-error",
+        color: "danger"
+      },
+      cancelled: {
+        icon: "status-canceled",
+        color: "foreground-xdark"
+      },
+      warning: {
+        icon: "status-warning",
+        color: "warning"
+      },
+      success: {
+        icon: "status-completed",
+        color: "success"
+      }
     };
     const locale = useI18n();
-    const selectedRows = ref([]);
     const runSummaries = computed(() => {
       return props.runs.map(({ status, finalResult, ...run }) => {
         if (status === "completed" && finalResult) {
@@ -1104,86 +1015,60 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         return { ...run, status };
       });
     });
-    function onSelectionChange(runs2) {
-      selectedRows.value = runs2;
-      emit("selectionChange", runs2);
-    }
-    async function deleteRuns() {
-      emit("deleteRuns", selectedRows.value);
-    }
     return (_ctx, _cache) => {
       const _component_N8nHeading = resolveComponent("N8nHeading");
-      const _component_n8n_button = resolveComponent("n8n-button");
+      const _component_AnimatedSpinner = __unplugin_components_0$2;
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(_ctx.$style.container)
       }, [
         createVNode(_component_N8nHeading, {
           size: "large",
           bold: true,
-          class: normalizeClass(_ctx.$style.runsTableHeading)
+          class: normalizeClass(_ctx.$style.runsTableHeading),
+          color: "text-base"
         }, {
           default: withCtx(() => [
-            createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.edit.pastRuns.total", { adjustToNumber: _ctx.runs.length })), 1)
+            createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.edit.pastRuns.total", { adjustToNumber: _ctx.runs.length })) + " ", 1),
+            createVNode(unref(N8nText), null, {
+              default: withCtx(() => [
+                createTextVNode(" (" + toDisplayString(_ctx.runs.length) + ") ", 1)
+              ]),
+              _: 1
+            })
           ]),
           _: 1
         }, 8, ["class"]),
-        createBaseVNode("div", {
-          class: normalizeClass(_ctx.$style.header)
-        }, [
-          withDirectives(createVNode(_component_n8n_button, {
-            type: "danger",
-            class: normalizeClass(_ctx.$style.activator),
-            size: "medium",
-            icon: "trash",
-            "data-test-id": "delete-runs-button",
-            onClick: deleteRuns
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.listRuns.deleteRuns", {
-                adjustToNumber: selectedRows.value.length
-              })), 1)
-            ]),
-            _: 1
-          }, 8, ["class"]), [
-            [vShow, selectedRows.value.length > 0]
-          ])
-        ], 2),
         createVNode(TestTableBase, {
           data: runSummaries.value,
           columns: _ctx.columns,
-          selectable: "",
           "default-sort": { prop: "runAt", order: "descending" },
-          onRowClick: _cache[0] || (_cache[0] = (row) => emit("rowClick", row)),
-          onSelectionChange
+          onRowClick: _cache[0] || (_cache[0] = (row) => emit("rowClick", row))
         }, {
+          id: withCtx(({ row }) => [
+            createTextVNode("#" + toDisplayString(row.index), 1)
+          ]),
           status: withCtx(({ row }) => [
             createBaseVNode("div", _hoisted_1$1, [
-              createVNode(unref(N8nIcon), {
-                icon: "circle",
-                size: "xsmall",
-                style: normalizeStyle({ color: statusesColorDictionary[row.status] })
-              }, null, 8, ["style"]),
-              row.status === "error" ? (openBlock(), createBlock(unref(N8nText), {
+              row.status === "running" ? (openBlock(), createBlock(unref(N8nText), {
                 key: 0,
-                size: "small",
-                bold: "",
-                color: "text-base"
+                color: "secondary",
+                class: "mr-2xs"
               }, {
                 default: withCtx(() => [
-                  createTextVNode(toDisplayString(row.failedCases) + " / " + toDisplayString(row.totalCases) + " " + toDisplayString(row.status), 1)
+                  createVNode(_component_AnimatedSpinner)
                 ]),
-                _: 2
-              }, 1024)) : (openBlock(), createBlock(unref(N8nText), {
+                _: 1
+              })) : (openBlock(), createBlock(unref(N8nIcon), {
                 key: 1,
-                size: "small",
-                bold: "",
-                color: "text-base"
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(row.status), 1)
-                ]),
-                _: 2
-              }, 1024))
+                icon: statusDictionary[row.status].icon,
+                color: statusDictionary[row.status].color,
+                class: "mr-2xs"
+              }, null, 8, ["icon", "color"])),
+              row.status === "error" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+                createTextVNode(toDisplayString(row.failedCases) + " " + toDisplayString(row.status), 1)
+              ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+                createTextVNode(toDisplayString(row.status), 1)
+              ], 64))
             ])
           ]),
           _: 1
@@ -1192,7 +1077,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const container = "_container_fgn23_123";
+const container = "_container_1rjad_123";
 const style0$2 = {
   container
 };
@@ -1204,22 +1089,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "RunsSection",
   props: /* @__PURE__ */ mergeModels({
     runs: {},
-    testId: {},
-    appliedTheme: {}
+    testId: {}
   }, {
     "selectedMetric": { required: true },
     "selectedMetricModifiers": {}
   }),
-  emits: /* @__PURE__ */ mergeModels(["deleteRuns"], ["update:selectedMetric"]),
-  setup(__props, { emit: __emit }) {
+  emits: ["update:selectedMetric"],
+  setup(__props) {
     const props = __props;
-    const emit = __emit;
     const locale = useI18n();
     const router = useRouter();
     const selectedMetric = useModel(__props, "selectedMetric");
-    function onDeleteRuns(toDelete) {
-      emit("deleteRuns", toDelete);
-    }
     const metrics = computed(() => {
       const metricKeys = props.runs.reduce((acc, run) => {
         Object.keys(run.metrics ?? {}).forEach((metric) => acc.add(metric));
@@ -1234,14 +1114,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         sortable: true,
         showHeaderTooltip: true,
         sortMethod: (a, b) => (a.metrics?.[metric] ?? 0) - (b.metrics?.[metric] ?? 0),
-        formatter: (row) => (row.metrics?.[metric] ?? 0).toFixed(2)
+        formatter: (row) => row.metrics?.[metric] !== void 0 ? (row.metrics?.[metric]).toFixed(2) : ""
       }))
     );
     const columns = computed(() => [
       {
-        prop: "runNumber",
+        prop: "id",
         label: locale.baseText("testDefinition.listRuns.runNumber"),
-        formatter: (row) => `${row.id}`,
         showOverflowTooltip: true
       },
       {
@@ -1249,6 +1128,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         label: "Run at",
         sortable: true,
         showOverflowTooltip: true,
+        formatter: (row) => {
+          const { date, time } = convertToDisplayDate(row.runAt);
+          return [date, time].join(", ");
+        },
         sortMethod: (a, b) => new Date(a.runAt ?? a.createdAt).getTime() - new Date(b.runAt ?? b.createdAt).getTime()
       },
       {
@@ -1271,23 +1154,21 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         createVNode(MetricsChart, {
           selectedMetric: selectedMetric.value,
           "onUpdate:selectedMetric": _cache[0] || (_cache[0] = ($event) => selectedMetric.value = $event),
-          runs: _ctx.runs,
-          theme: _ctx.appliedTheme
-        }, null, 8, ["selectedMetric", "runs", "theme"]),
+          runs: _ctx.runs
+        }, null, 8, ["selectedMetric", "runs"]),
         createVNode(TestRunsTable, {
           class: normalizeClass(_ctx.$style.runsTable),
           runs: _ctx.runs,
           columns: columns.value,
           selectable: true,
           "data-test-id": "past-runs-table",
-          onDeleteRuns,
           onRowClick: handleRowClick
         }, null, 8, ["class", "runs", "columns"])
       ], 2);
     };
   }
 });
-const runs = "_runs_gua3g_123";
+const runs = "_runs_37xaf_123";
 const style0$1 = {
   runs
 };
@@ -1321,21 +1202,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       await getExamplePinnedDataForTags();
       testDefinitionStore.updateRunFieldIssues(props.testId);
     });
-    const {
-      state,
-      isSaving,
-      cancelEditing,
-      loadTestData,
-      updateTest,
-      startEditing,
-      saveChanges,
-      deleteMetric,
-      updateMetrics
-    } = useTestDefinitionForm();
+    const { state, isSaving, cancelEditing, loadTestData, updateTest, startEditing, saveChanges } = useTestDefinitionForm();
     const isLoading = computed(() => tagsStore.isLoading);
     const tagsById = computed(() => tagsStore.tagsById);
     const currentWorkflowId = computed(() => props.name);
-    const appliedTheme = computed(() => uiStore.appliedTheme);
     const workflowName = computed(() => workflowStore.workflow.name);
     const hasRuns = computed(() => runs2.value.length > 0);
     const fieldsIssues = computed(() => testDefinitionStore.getFieldIssues(props.testId) ?? []);
@@ -1351,19 +1221,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     const handleUpdateTestDebounced = debounce(handleUpdateTest, { debounceTime: 400, trailing: true });
-    const handleUpdateMetricsDebounced = debounce(
-      async (testId) => {
-        await updateMetrics(testId);
-        testDefinitionStore.updateRunFieldIssues(testId);
-      },
-      { debounceTime: 400, trailing: true }
-    );
     function getFieldIssues(key) {
       return fieldsIssues.value.filter((issue) => issue.field === key);
     }
-    async function onDeleteMetric(deletedMetric) {
-      await deleteMetric(deletedMetric.id, props.testId);
-    }
     async function openPinningModal() {
       uiStore.openModal(NODE_PINNING_MODAL_KEY);
     }
@@ -1379,20 +1239,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
       window.open(executionsRoute.href, "_blank");
     }
-    const runs2 = computed(
-      () => Object.values(testDefinitionStore.testRunsById ?? {}).filter(
-        (run) => run.testDefinitionId === props.testId
-      )
-    );
+    const runs2 = computed(() => {
+      const testRuns = Object.values(testDefinitionStore.testRunsById ?? {}).filter(
+        ({ testDefinitionId }) => testDefinitionId === props.testId
+      );
+      return orderBy(testRuns, (record) => new Date(record.runAt), ["asc"]).map(
+        (record, index) => Object.assign(record, { index: index + 1 })
+      );
+    });
     const isRunning = computed(() => runs2.value.some((run) => run.status === "running"));
     const isRunTestEnabled = computed(() => fieldsIssues.value.length === 0 && !isRunning.value);
-    async function onDeleteRuns(toDelete) {
-      await Promise.all(
-        toDelete.map(async (run) => {
-          await testDefinitionStore.deleteTestRun({ testDefinitionId: props.testId, runId: run.id });
-        })
-      );
-    }
     async function renameTag(newName) {
       await tagsStore.rename({ id: state.value.tags.value[0], name: newName });
     }
@@ -1546,10 +1402,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "onUpdate:selectedMetric": _cache[1] || (_cache[1] = ($event) => selectedMetric.value = $event),
               class: normalizeClass(_ctx.$style.runs),
               runs: runs2.value,
-              "test-id": _ctx.testId,
-              "applied-theme": appliedTheme.value,
-              onDeleteRuns
-            }, null, 8, ["selectedMetric", "class", "runs", "test-id", "applied-theme"])) : createCommentVNode("", true),
+              "test-id": _ctx.testId
+            }, null, 8, ["selectedMetric", "class", "runs", "test-id"])) : createCommentVNode("", true),
             showConfig.value ? (openBlock(), createBlock(ConfigSection, {
               key: 1,
               tags: unref(state).tags,
@@ -1559,14 +1413,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 _cache[3] || (_cache[3] = ($event) => unref(state).evaluationWorkflow = $event),
                 unref(handleUpdateTestDebounced)
               ],
-              metrics: unref(state).metrics,
-              "onUpdate:metrics": [
-                _cache[4] || (_cache[4] = ($event) => unref(state).metrics = $event),
-                _cache[6] || (_cache[6] = () => unref(handleUpdateMetricsDebounced)(_ctx.testId))
-              ],
               mockedNodes: unref(state).mockedNodes,
               "onUpdate:mockedNodes": [
-                _cache[5] || (_cache[5] = ($event) => unref(state).mockedNodes = $event),
+                _cache[4] || (_cache[4] = ($event) => unref(state).mockedNodes = $event),
                 unref(handleUpdateTestDebounced)
               ],
               class: normalizeClass(_ctx.$style.config),
@@ -1581,10 +1430,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "sample-workflow-name": workflowName.value,
               onRenameTag: renameTag,
               onOpenPinningModal: openPinningModal,
-              onDeleteMetric,
               onOpenExecutionsViewForTag: openExecutionsViewForTag,
-              onEvaluationWorkflowCreated: _cache[7] || (_cache[7] = ($event) => onEvaluationWorkflowCreated($event))
-            }, null, 8, ["tags", "evaluationWorkflow", "metrics", "mockedNodes", "class", "cancel-editing", "tags-by-id", "is-loading", "start-editing", "save-changes", "has-runs", "example-pinned-data", "sample-workflow-name", "onUpdate:evaluationWorkflow", "onUpdate:mockedNodes"])) : createCommentVNode("", true)
+              onEvaluationWorkflowCreated: _cache[5] || (_cache[5] = ($event) => onEvaluationWorkflowCreated($event))
+            }, null, 8, ["tags", "evaluationWorkflow", "mockedNodes", "class", "cancel-editing", "tags-by-id", "is-loading", "start-editing", "save-changes", "has-runs", "example-pinned-data", "sample-workflow-name", "onUpdate:evaluationWorkflow", "onUpdate:mockedNodes"])) : createCommentVNode("", true)
           ], 2)
         ], 2)
       ], 2)) : createCommentVNode("", true);