Add Cockpit reports view

public/locales/de-DE/translation.json

@@ -39,6 +39,7 @@
     "deployments": "Deployments",
     "batches": "Stapelverarbeitung",
     "migrations": "Migrationen",
+    "reports": "Reports",
     "admin": "Admin",
     "help": "Hilfe",
     "account": "Konto",
@@ -77,6 +78,7 @@
       "decisions": "Entscheidungen",
       "deployments": "Deployments",
       "migrations": "Migrationen",
+      "reports": "Reports",
       "admin": "Admin",
       "admin-users": "Admin – Benutzer",
       "admin-groups": "Admin – Gruppen",
@@ -559,6 +561,46 @@
       "without-tenant-id": "Ohne Mandanten-ID"
     }
   },
+  "reports": {
+    "title": "Reports",
+    "subtitle": "Abgeschlossene Prozess- und Aufgabenhistorie mit Cockpit Enterprise Reports auswerten.",
+    "refresh": "Aktualisieren",
+    "run": "Report ausführen",
+    "export-csv": "CSV exportieren",
+    "export-json": "JSON exportieren",
+    "no-results": "Für die gewählten Filter wurden keine Report-Zeilen gefunden.",
+    "started-after": "Gestartet nach",
+    "started-before": "Gestartet vor",
+    "completed-after": "Abgeschlossen nach",
+    "completed-before": "Abgeschlossen vor",
+    "minimum": "Minimum",
+    "average": "Durchschnitt",
+    "maximum": "Maximum",
+    "count": "Anzahl",
+    "period": {
+      "title": "Zeitraum",
+      "month": "Monat",
+      "quarter": "Quartal",
+      "month-value": "Monat {{month}}",
+      "quarter-value": "Quartal {{quarter}}"
+    },
+    "process": {
+      "title": "Prozessinstanz-Dauer-Report",
+      "period": "Aggregation",
+      "keys": "Prozessdefinitionsschlüssel"
+    },
+    "task": {
+      "title": "Report für abgeschlossene Aufgaben",
+      "type": "Report-Typ",
+      "count": "Abgeschlossene Aufgaben",
+      "duration": "Aufgabendauer",
+      "period": "Aggregation",
+      "group-by": "Gruppieren nach",
+      "process-definition": "Prozessdefinition",
+      "task-name": "Aufgabenname",
+      "group": "Gruppe"
+    }
+  },
   "admin": {
     "users": "Benutzer",
     "groups": "Gruppen",

public/locales/en-US/translation.json

@@ -39,6 +39,7 @@
     "deployments": "Deployments",
     "batches": "Batches",
     "migrations": "Migrations",
+    "reports": "Reports",
     "admin": "Admin",
     "help": "Help",
     "account": "Account",
@@ -77,6 +78,7 @@
       "decisions": "Decisions",
       "deployments": "Deployments",
       "migrations": "Migrations",
+      "reports": "Reports",
       "admin": "Admin",
       "admin-users": "Admin – Users",
       "admin-groups": "Admin – Groups",
@@ -559,6 +561,46 @@
       "without-tenant-id": "Without Tenant ID"
     }
   },
+  "reports": {
+    "title": "Reports",
+    "subtitle": "Analyze completed process and task history with Cockpit Enterprise reports.",
+    "refresh": "Refresh",
+    "run": "Run report",
+    "export-csv": "Export CSV",
+    "export-json": "Export JSON",
+    "no-results": "No report rows found for the selected filters.",
+    "started-after": "Started after",
+    "started-before": "Started before",
+    "completed-after": "Completed after",
+    "completed-before": "Completed before",
+    "minimum": "Minimum",
+    "average": "Average",
+    "maximum": "Maximum",
+    "count": "Count",
+    "period": {
+      "title": "Period",
+      "month": "Month",
+      "quarter": "Quarter",
+      "month-value": "Month {{month}}",
+      "quarter-value": "Quarter {{quarter}}"
+    },
+    "process": {
+      "title": "Process Instance Duration Report",
+      "period": "Aggregation",
+      "keys": "Process definition keys"
+    },
+    "task": {
+      "title": "Completed Task Instance Report",
+      "type": "Report type",
+      "count": "Completed tasks",
+      "duration": "Task duration",
+      "period": "Aggregation",
+      "group-by": "Group by",
+      "process-definition": "Process definition",
+      "task-name": "Task name",
+      "group": "Group"
+    }
+  },
   "admin": {
     "users": "Users",
     "groups": "Groups",

src/api/engine_rest.jsx

@@ -14,6 +14,7 @@ import deployment from "./resources/deployment.js";
 import history from "./resources/history.js";
 import job_definition from "./resources/job_definition.js";
 import migration from "./resources/migration.js";
+import report from "./resources/report.js";
 import task from "./resources/task.js";
 import authorization from "./resources/authorization.js";
 import decision from "./resources/decision.js";
@@ -33,6 +34,7 @@ const engine_rest = {
   migration,
   process_definition,
   process_instance,
+  report,
   task,
   tenant,
   user,

src/api/resources/report.js

@@ -0,0 +1,38 @@
+import { GET } from "../helper.jsx";
+
+const compact_params = (params) =>
+  Object.fromEntries(
+    Object.entries(params).filter(
+      ([, value]) => value !== undefined && value !== null && value !== "",
+    ),
+  );
+
+const report_url = (path, params = {}) => {
+  const query = new URLSearchParams(compact_params(params)).toString();
+  return `${path}${query ? `?${query}` : ""}`;
+};
+
+const get_process_instance_duration = (state, params = {}) =>
+  GET(
+    report_url("/history/process-instance/report", {
+      reportType: "duration",
+      periodUnit: "month",
+      ...params,
+    }),
+    state,
+    state.api.report.process_duration,
+  );
+
+const get_task_report = (state, params = {}) =>
+  GET(
+    report_url("/history/task/report", params),
+    state,
+    state.api.report.task,
+  );
+
+const report = {
+  process_instance_duration: get_process_instance_duration,
+  task: get_task_report,
+};
+
+export default report;

src/api/resources/report.test.js

@@ -0,0 +1,65 @@
+import { describe, it, vi, beforeEach } from "vitest";
+
+vi.mock("../helper.jsx", () => ({
+  GET: vi.fn(),
+}));
+
+import { GET } from "../helper.jsx";
+import { create_mock_state, expect_api_call } from "../../test/helpers.js";
+import report from "./report.js";
+
+describe("api/resources/report", () => {
+  let state;
+
+  beforeEach(() => {
+    state = create_mock_state();
+  });
+
+  it("process_instance_duration() GETs the duration report with defaults", () => {
+    report.process_instance_duration(state);
+    expect_api_call(GET, {
+      url: "/history/process-instance/report?reportType=duration&periodUnit=month",
+      state,
+      signal: state.api.report.process_duration,
+    });
+  });
+
+  it("process_instance_duration() appends filters", () => {
+    report.process_instance_duration(state, {
+      periodUnit: "quarter",
+      processDefinitionKeyIn: "invoice",
+      startedAfter: "2026-01-01T00:00:00.000+0000",
+      startedBefore: "2026-12-31T23:59:59.999+0000",
+    });
+    expect_api_call(GET, {
+      url: "/history/process-instance/report?reportType=duration&periodUnit=quarter&processDefinitionKeyIn=invoice&startedAfter=2026-01-01T00%3A00%3A00.000%2B0000&startedBefore=2026-12-31T23%3A59%3A59.999%2B0000",
+      state,
+      signal: state.api.report.process_duration,
+    });
+  });
+
+  it("task() GETs the historic task count report", () => {
+    report.task(state, {
+      reportType: "count",
+      groupBy: "processDefinition",
+      completedAfter: "2026-01-01T00:00:00.000+0000",
+    });
+    expect_api_call(GET, {
+      url: "/history/task/report?reportType=count&groupBy=processDefinition&completedAfter=2026-01-01T00%3A00%3A00.000%2B0000",
+      state,
+      signal: state.api.report.task,
+    });
+  });
+
+  it("task() GETs the historic task duration report", () => {
+    report.task(state, {
+      reportType: "duration",
+      periodUnit: "quarter",
+    });
+    expect_api_call(GET, {
+      url: "/history/task/report?reportType=duration&periodUnit=quarter",
+      state,
+      signal: state.api.report.task,
+    });
+  });
+});

src/components/GoTo.jsx

@@ -30,6 +30,7 @@ const PAGES = [
   { nameKey: "goto.pages.decisions", href: "/decisions" },
   { nameKey: "goto.pages.deployments", href: "/deployments" },
   { nameKey: "goto.pages.migrations", href: "/migrations" },
+  { nameKey: "goto.pages.reports", href: "/reports" },
   { nameKey: "goto.pages.admin", href: "/admin" },
   { nameKey: "goto.pages.admin-users", href: "/admin/users" },
   { nameKey: "goto.pages.admin-groups", href: "/admin/groups" },

src/components/GoTo.test.jsx

@@ -46,6 +46,12 @@ describe("GoTo", () => {
     const items = Array.from(container.querySelectorAll(".goto-item"));
     const hrefs = items.map((a) => a.getAttribute("href"));
     expect(hrefs).toContain("/tasks");
+    type(input, "reports");
+    expect(
+      Array.from(container.querySelectorAll(".goto-item")).map((a) =>
+        a.getAttribute("href"),
+      ),
+    ).toContain("/reports");
     // A non-matching query should yield no page entries.
     type(input, "zzzznotarealpage");
     expect(

src/components/Header.jsx

@@ -67,6 +67,7 @@ export function Header() {
               <li><a href="/deployments" class={url.startsWith("/deployments") && "active"}>{t("nav.deployments")}</a></li>
               <li><a href="/batches"     class={url.startsWith("/batches")     && "active"}>{t("nav.batches")}</a></li>
               <li><a href="/migrations"  class={url.startsWith("/migrations")  && "active"}>{t("nav.migrations")}</a></li>
+              <li><a href="/reports"     class={url.startsWith("/reports")     && "active"}>{t("nav.reports")}</a></li>
               <li><a href="/admin"       class={url.startsWith("/admin")       && "active"}>{t("nav.admin")}</a></li>
             </menu>
           </nav>
@@ -146,6 +147,11 @@ export function Header() {
                 {t("nav.migrations")}
               </a>
             </li>
+            <li>
+              <a href="/reports" class={url.startsWith("/reports") && "active"}>
+                {t("nav.reports")}
+              </a>
+            </li>
             <li>
               <a href="/admin" class={url.startsWith("/admin") && "active"}>
                 {t("nav.admin")}

src/components/Header.test.jsx

@@ -61,7 +61,7 @@ describe("Header", () => {
       a.getAttribute("href"),
     );
     // Logo (/), tasks, processes, decisions, deployments, batches,
-    // migrations, admin.
+    // migrations, reports, admin.
     expect(hrefs).toEqual([
       "/",
       "/tasks",
@@ -70,6 +70,7 @@ describe("Header", () => {
       "/deployments",
       "/batches",
       "/migrations",
+      "/reports",
       "/admin",
     ]);
   });

src/css/style.css

@@ -828,6 +828,57 @@
     text-align: center;
   }
 
+  .reports {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+    height: 100%;
+    padding: var(--spacing-2);
+  }
+  .reports > header,
+  .reports > section > header {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: start;
+    gap: var(--spacing-2);
+  }
+  .reports > header p {
+    color: var(--text-2);
+    margin: 0;
+  }
+  .reports > section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-1);
+  }
+  .reports-filter {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: end;
+    gap: var(--spacing-1);
+  }
+  .reports-filter label {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    min-width: 12rem;
+  }
+  .reports-filter input,
+  .reports-filter select {
+    width: 100%;
+  }
+  .reports-filter button {
+    margin: 0;
+  }
+  .reports table {
+    width: 100%;
+  }
+  .reports :where(td, th) {
+    vertical-align: top;
+  }
+
   #admin-page {
     display: flex;
     flex: 1;

src/index.jsx

@@ -15,6 +15,7 @@ import { MigrationsPage } from "./pages/Migrations.jsx";
 import { AdminPage } from "./pages/Admin.jsx";
 import { DeploymentsPage } from "./pages/Deployments.jsx";
 import { BatchesPage } from "./pages/Batches.jsx";
+import { ReportsPage } from "./pages/Reports.jsx";
 import { NotFound } from "./pages/_404.jsx";
 import { AccountPage } from "./pages/Account.jsx";
 
@@ -90,6 +91,7 @@ const Routing = () => {
             component={DeploymentsPage}
           />
           <Route path="/batches/:batch_id?" component={BatchesPage} />
+          <Route path="/reports" component={ReportsPage} />
           <Route
             path="/admin/:page_id?/:selection_id?/:sub_selection_id?"
             component={AdminPage}