refactor(ci, observability): separate slowest e2e charts from messenger

Keep the Loop report focused on feature duration status while moving slowest-specs into local and CI artifact renderers for deeper triage.

Signed-off-by: Nikita Korolev <nikita.korolev@flant.com>

Author: universal-itengineer

.github/scripts/js/e2e/report/cluster-report.test.js

@@ -477,7 +477,7 @@ describe("cluster-report", () => {
         },
         {
           name: "skipped",
-          group: "skipped",
+          group: "Top-level Its",
           state: "skipped",
           runtimeMs: 60000,
           labels: [],

.github/scripts/js/e2e/report/messenger-report.test.js

@@ -182,7 +182,7 @@ describe("messenger-report", () => {
   test("attaches duration chart files to thread reply without a text caption", async () =>
     inTempDir(async (tempDir) => {
       const chartFile = {
-        name: "replicated-slowest-specs.png",
+        name: "replicated-feature-duration-status.png",
         buffer: Buffer.from("png"),
         mimeType: "image/png",
       };
@@ -585,7 +585,7 @@ describe("messenger-report", () => {
   test("posts main report and per-cluster failed tests thread via Loop API", async () =>
     inTempDir(async (tempDir) => {
       const chartFile = {
-        name: "replicated-slowest-specs.png",
+        name: "replicated-feature-duration-status.png",
         buffer: Buffer.from("png"),
         mimeType: "image/png",
       };

.github/scripts/js/e2e/report/messenger/charts/__snapshots__/chart-config.test.js.snap

@@ -69,105 +69,6 @@ Array [
           "x": Object {
             "beginAtZero": true,
             "stacked": true,
-            "title": Object {
-              "display": true,
-              "text": "Duration, seconds",
-            },
-          },
-          "y": Object {
-            "stacked": true,
-          },
-        },
-      },
-      "plugins": Array [
-        Object {
-          "afterDatasetsDraw": [Function],
-          "id": "valueLabels",
-        },
-      ],
-      "type": "bar",
-    },
-    "name": "feature-duration-status",
-  },
-  Object {
-    "config": Object {
-      "data": Object {
-        "datasets": Array [
-          Object {
-            "backgroundColor": Array [
-              "#a371f7",
-              "#a371f7",
-              "#58a6ff",
-              "#76e3ea",
-              "#76e3ea",
-            ],
-            "borderColor": Array [
-              "#d29922",
-              "#f85149",
-              "transparent",
-              "transparent",
-              "transparent",
-            ],
-            "borderWidth": Array [
-              3,
-              3,
-              0,
-              0,
-              0,
-            ],
-            "data": Array [
-              601,
-              301,
-              60,
-              45,
-              10,
-            ],
-            "label": "Duration, seconds",
-            "states": Array [
-              "errors",
-              "failed",
-              "skipped",
-              "passed",
-              "passed",
-            ],
-          },
-        ],
-        "labels": Array [
-          "Network / error",
-          "VM / slow fail",
-          "Disk / medium skip",
-          "VM / passing peer",
-          "VM / fast pass",
-        ],
-      },
-      "options": Object {
-        "animation": false,
-        "indexAxis": "y",
-        "layout": Object {
-          "padding": Object {
-            "bottom": 8,
-            "top": 16,
-          },
-        },
-        "plugins": Object {
-          "legend": Object {
-            "display": true,
-            "labels": Object {
-              "generateLabels": [Function],
-            },
-          },
-          "title": Object {
-            "display": true,
-            "text": "Top slowest successful specs and failed specs (It/Entry)",
-          },
-          "valueLabels": Object {
-            "formatter": [Function],
-          },
-        },
-        "responsive": false,
-        "scales": Object {
-          "x": Object {
-            "beginAtZero": true,
             "ticks": Object {
               "stepSize": 60,
             },
@@ -176,106 +77,6 @@ Array [
               "text": "Duration, seconds",
             },
           },
-        },
-      },
-      "plugins": Array [
-        Object {
-          "afterDatasetsDraw": [Function],
-          "id": "valueLabels",
-        },
-      ],
-      "type": "bar",
-    },
-    "name": "slowest-specs",
-    "size": Object {
-      "height": 720,
-      "width": 2048,
-    },
-  },
-  Object {
-    "config": Object {
-      "data": Object {
-        "datasets": Array [
-          Object {
-            "backgroundColor": "#3fb950",
-            "barPercentage": 0.5,
-            "categoryPercentage": 0.6,
-            "data": Array [
-              0,
-              0,
-              2,
-            ],
-            "label": "passed",
-          },
-          Object {
-            "backgroundColor": "#f85149",
-            "barPercentage": 0.5,
-            "categoryPercentage": 0.6,
-            "data": Array [
-              1,
-              0,
-              0,
-            ],
-            "label": "failed",
-          },
-          Object {
-            "backgroundColor": "#d29922",
-            "barPercentage": 0.5,
-            "categoryPercentage": 0.6,
-            "data": Array [
-              1,
-              0,
-              0,
-            ],
-            "label": "errors",
-          },
-          Object {
-            "backgroundColor": "#8b949e",
-            "barPercentage": 0.5,
-            "categoryPercentage": 0.6,
-            "data": Array [
-              0,
-              1,
-              0,
-            ],
-            "label": "skipped",
-          },
-        ],
-        "labels": Array [
-          "Slow >300s",
-          "Medium 60-300s",
-          "Fast <60s",
-        ],
-      },
-      "options": Object {
-        "animation": false,
-        "indexAxis": "y",
-        "plugins": Object {
-          "legend": Object {
-            "display": true,
-          },
-          "title": Object {
-            "display": true,
-            "text": "It/Entry duration buckets by status",
-          },
-          "valueLabels": Object {
-            "calloutSmallStackedLabels": true,
-            "formatter": [Function],
-          },
-        },
-        "responsive": false,
-        "scales": Object {
-          "x": Object {
-            "beginAtZero": true,
-            "stacked": true,
-            "ticks": Object {
-              "precision": 0,
-            },
-            "title": Object {
-              "display": true,
-              "text": "Specs",
-            },
-          },
           "y": Object {
             "stacked": true,
           },
@@ -289,7 +90,12 @@ Array [
       ],
       "type": "bar",
     },
-    "name": "duration-buckets",
+    "name": "feature-duration-status",
+    "size": Object {
+      "height": 640,
+      "pixelRatio": 2,
+      "width": 1280,
+    },
   },
 ]
 `;

.github/scripts/js/e2e/report/messenger/charts/builders/feature-duration-status.js

@@ -0,0 +1,76 @@
+// Copyright 2026 Flant JSC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//     http://www.apache.org/licenses/LICENSE-2.0
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+const {
+  STATUSES,
+  STATUS_COLORS,
+  toSeconds,
+  formatSeconds,
+  baseOptions,
+} = require("../data");
+const { valueLabelsPlugin } = require("../plugins");
+
+function sortedGroups(byGroup, compareFn) {
+  return [...byGroup.entries()].sort(compareFn);
+}
+
+function problemCount(group) {
+  return group.statusCount.failed + group.statusCount.errors;
+}
+
+function featureDurationStatus({ byGroup }) {
+  // Most-broken features go to the top: failures desc, then total runtime desc,
+  // then alphabetical for a stable order.
+  const entries = sortedGroups(byGroup, (left, right) => {
+    return (
+      problemCount(right[1]) - problemCount(left[1]) ||
+      right[1].total - left[1].total ||
+      left[0].localeCompare(right[0])
+    );
+  });
+
+  const labels = entries.map(([name]) => name);
+  const datasets = STATUSES.map((status) => ({
+    label: status,
+    data: entries.map(([, group]) => toSeconds(group.statusDurations[status])),
+    backgroundColor: STATUS_COLORS[status],
+  }));
+  const height = Math.max(640, 120 + labels.length * 36);
+
+  return {
+    name: "feature-duration-status",
+    size: { width: 1280, height, pixelRatio: 2 },
+    config: {
+      type: "bar",
+      data: { labels, datasets },
+      options: baseOptions("Overall durations for Describes", {
+        indexAxis: "y",
+        plugins: {
+          legend: { display: true },
+          valueLabels: { formatter: formatSeconds },
+        },
+        scales: {
+          x: {
+            stacked: true,
+            beginAtZero: true,
+            ticks: { stepSize: 60 },
+            title: { display: true, text: "Duration, seconds" },
+          },
+          y: { stacked: true },
+        },
+      }),
+      plugins: [valueLabelsPlugin],
+    },
+  };
+}
+
+module.exports = featureDurationStatus;