Add Cockpit process instance jobs tab

public/locales/de-DE/translation.json

@@ -345,7 +345,18 @@
     "jobs": {
       "overriding-job-priority": "Überschriebene Job-Priorität",
       "suspend": "Anhalten",
-      "change-priority": "Job-Priorität ändern"
+      "change-priority": "Job-Priorität ändern",
+      "due-date": "Fälligkeitsdatum",
+      "timestamp": "Zeitstempel",
+      "retries": "Retries",
+      "exception-message": "Fehlermeldung",
+      "event": "Ereignis",
+      "created": "Erstellt",
+      "failed": "Fehlgeschlagen",
+      "succeeded": "Erfolgreich",
+      "deleted": "Gelöscht",
+      "log": "Log",
+      "empty": "Keine Jobs gefunden."
     },
     "sort": {
       "name": "Name",

public/locales/en-US/translation.json

@@ -345,7 +345,18 @@
     "jobs": {
       "overriding-job-priority": "Overriding Job Priority",
       "suspend": "Suspend",
-      "change-priority": "Change Overriding Job Priority"
+      "change-priority": "Change Overriding Job Priority",
+      "due-date": "Due Date",
+      "timestamp": "Timestamp",
+      "retries": "Retries",
+      "exception-message": "Exception Message",
+      "event": "Event",
+      "created": "Created",
+      "failed": "Failed",
+      "succeeded": "Succeeded",
+      "deleted": "Deleted",
+      "log": "Log",
+      "empty": "No jobs found."
     },
     "sort": {
       "name": "Name",

src/api/engine_rest.jsx

@@ -12,6 +12,7 @@ import process_definition from "./resources/process_definition.js";
 import process_instance from "./resources/process_instance.js";
 import deployment from "./resources/deployment.js";
 import history from "./resources/history.js";
+import job from "./resources/job.js";
 import job_definition from "./resources/job_definition.js";
 import migration from "./resources/migration.js";
 import task from "./resources/task.js";
@@ -29,6 +30,7 @@ const engine_rest = {
   filter,
   group,
   history,
+  job,
   job_definition,
   migration,
   process_definition,

src/api/resources/history.js

@@ -46,6 +46,9 @@ const get_process_instance_variable = (state, instance_id) =>
 const get_historic_tasks_by_instance = (state, instance_id) =>
   GET(`/history/task?processInstanceId=${instance_id}`, state, state.api.history.task.by_process_instance)
 
+const get_job_logs_by_process_instance = (state, instance_id) =>
+  GET(`/history/job-log?processInstanceId=${instance_id}`, state, state.api.history.job_log.by_process_instance)
+
 const get_historic_called_instances = (state, instance_id) =>
   GET(`/history/process-instance?superProcessInstanceId=${instance_id}`, state, state.api.history.process_instance.called)
 
@@ -72,7 +75,10 @@ const history = {
   task: {
     by_process_instance: get_historic_tasks_by_instance,
   },
+  job_log: {
+    by_process_instance: get_job_logs_by_process_instance,
+  },
   get_user_operation
 }
 
-export default history
+export default history

src/api/resources/history.test.js

@@ -110,6 +110,15 @@ describe("api/resources/history", () => {
     });
   });
 
+  it("job_log.by_process_instance() GETs historic job logs filtered by instance", () => {
+    history.job_log.by_process_instance(state, "inst-1");
+    expect_api_call(GET, {
+      url: "/history/job-log?processInstanceId=inst-1",
+      state,
+      signal: state.api.history.job_log.by_process_instance,
+    });
+  });
+
   it("process_instance.called() GETs historic child instances of an instance", () => {
     history.process_instance.called(state, "inst-1");
     expect_api_call(GET, {

src/api/resources/job.js

@@ -0,0 +1,14 @@
+import { GET } from "../helper.jsx";
+
+const get_jobs_by_process_instance = (state, process_instance_id) =>
+  GET(
+    `/job?processInstanceId=${process_instance_id}`,
+    state,
+    state.api.job.by_process_instance,
+  );
+
+const job = {
+  by_process_instance: get_jobs_by_process_instance,
+};
+
+export default job;

src/api/resources/job.test.js

@@ -0,0 +1,25 @@
+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 job from "./job.js";
+
+describe("api/resources/job", () => {
+  let state;
+  beforeEach(() => {
+    state = create_mock_state();
+  });
+
+  it("by_process_instance() GETs jobs for a process instance", () => {
+    job.by_process_instance(state, "inst-1");
+    expect_api_call(GET, {
+      url: "/job?processInstanceId=inst-1",
+      state,
+      signal: state.api.job.by_process_instance,
+    });
+  });
+});

src/pages/Processes.jsx

@@ -686,7 +686,7 @@
       <a
         href="https://docs.operaton.org/manual/latest/installation/full/tomcat/manual/"
         target="_blank"
-        rel="noopener"
+        rel="noreferrer"
       >
         {t("processes.empty.how-to")}
       </a>
@@ -928,8 +928,7 @@
       params: { selection_id, definition_id, panel },
       query,
     } = useRoute(),
-    history_mode = query.history === "true",
-    [t] = useTranslation();
+    history_mode = query.history === "true";
 
   if (selection_id) {
     if (
@@ -1043,20 +1042,16 @@
             ? !history_mode
               ? Object.entries(
                   state.api.process.instance.variables.value.data,
-                ).map(
-                  // eslint-disable-next-line react/jsx-key
-                  ([name, { type, value }]) => (
-                    <tr>
-                      <td>{name}</td>
-                      <td>{type}</td>
-                      <td>{value}</td>
-                    </tr>
-                  ),
-                )
+                ).map(([name, { type, value }]) => (
+                  <tr key={name}>
+                    <td>{name}</td>
+                    <td>{type}</td>
+                    <td>{value}</td>
+                  </tr>
+                ))
               : state.api.process.instance.variables.value.data.map(
-                  // eslint-disable-next-line react/jsx-key
                   ({ name, type, value }) => (
-                    <tr>
+                    <tr key={name}>
                       <td>{name}</td>
                       <td>{type}</td>
                       <td>{value}</td>
@@ -1464,13 +1459,6 @@
   );
 };
 
-const BackToListBtn = ({ url, title, className }) => (
-  <a className={`tabs-back ${className || ""}`} href={url} title={title}>
-    <Icons.arrow_left />
-    <Icons.list />
-  </a>
-);
-
 const DefinitionsManage = () => {
   const state = useContext(AppState),
     { route } = useLocation(),
@@ -1571,8 +1559,103 @@
   </a>
 );
 
-// TODO: create Jobs example for old Camunda apps
-const InstanceJobsPlaceholder = () => <p>Jobs</p>;
+const job_log_event = (job_log) => {
+  if (job_log.creationLog) return "created";
+  if (job_log.failureLog) return "failed";
+  if (job_log.successLog) return "succeeded";
+  if (job_log.deletionLog) return "deleted";
+  return "log";
+};
+
+const InstanceJobs = () => {
+  const state = useContext(AppState),
+    { params, query } = useRoute(),
+    history_mode = query.history === "true",
+    [t] = useTranslation();
+
+  useEffect(() => {
+    if (history_mode) {
+      void engine_rest.history.job_log.by_process_instance(
+        state,
+        params.selection_id,
+      );
+    } else {
+      void engine_rest.job.by_process_instance(state, params.selection_id);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [params.selection_id, history_mode]);
+
+  const rows = history_mode
+    ? (state.api.history.job_log.by_process_instance.value?.data ?? [])
+    : (state.api.job.by_process_instance.value?.data ?? []);
+
+  return (
+    <div>
+      <table>
+        <thead>
+          <tr>
+            <th>{t("common.id")}</th>
+            <th>
+              {history_mode ? t("processes.jobs.event") : t("common.state")}
+            </th>
+            <th>{t("common.activity")}</th>
+            <th>
+              {history_mode
+                ? t("processes.jobs.timestamp")
+                : t("processes.jobs.due-date")}
+            </th>
+            <th>{t("processes.jobs.retries")}</th>
+            <th>{t("tasks.task-list.table-headings.priority")}</th>
+            <th>{t("processes.jobs.exception-message")}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.length === 0 ? (
+            <tr>
+              <td colspan="7">{t("processes.jobs.empty")}</td>
+            </tr>
+          ) : (
+            rows.map((job) => {
+              const id = history_mode ? (job.jobId ?? job.id) : job.id,
+                state_or_event = history_mode
+                  ? t(`processes.jobs.${job_log_event(job)}`)
+                  : job.suspended
+                    ? t("common.suspended")
+                    : t("common.active"),
+                activity = job.activityId ?? job.failedActivityId ?? "—",
+                due_date = history_mode
+                  ? (job.timestamp ?? job.jobDueDate)
+                  : job.dueDate,
+                retries = history_mode ? job.jobRetries : job.retries,
+                priority = history_mode ? job.jobPriority : job.priority,
+                exception_message = history_mode
+                  ? job.jobExceptionMessage
+                  : job.exceptionMessage;
+
+              return (
+                <tr key={job.id}>
+                  <td class="font-mono">{id?.substring(0, 8) ?? "—"}</td>
+                  <td>{state_or_event}</td>
+                  <td>{activity}</td>
+                  <td>
+                    {due_date ? (
+                      <time datetime={due_date}>{due_date}</time>
+                    ) : (
+                      "—"
+                    )}
+                  </td>
+                  <td>{retries ?? "—"}</td>
+                  <td>{priority ?? "—"}</td>
+                  <td>{exception_message ?? "—"}</td>
+                </tr>
+              );
+            })
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+};
 // TODO: create External Apps example for old Camunda apps
 const InstanceExternalTasksPlaceholder = () => <p>External Tasks</p>;
 
@@ -1605,7 +1688,7 @@
     nameKey: "processes.tabs.jobs",
     id: "jobs",
     pos: 4,
-    Component: InstanceJobsPlaceholder,
+    Component: InstanceJobs,
   },
   {
     nameKey: "processes.tabs.external-tasks",

src/pages/Processes.test.jsx

@@ -506,6 +506,61 @@ describe("ProcessesPage — instance details", () => {
     expect(getByText("Approve (historic)")).toBeTruthy();
   });
 
+  it("jobs sub-panel fetches and renders live jobs", () => {
+    mockParams = {
+      definition_id: "proc:1",
+      panel: "instances",
+      selection_id: "inst-9999",
+      sub_panel: "jobs",
+    };
+    signal_response(state.api.job.by_process_instance, [
+      {
+        id: "job-1",
+        activityId: "timerEvent",
+        dueDate: "2024-01-01T00:00:00Z",
+        retries: 3,
+        priority: 50,
+        suspended: false,
+        exceptionMessage: "live boom",
+      },
+    ]);
+    const { getByText } = renderPage(state);
+    expect(engine_rest.job.by_process_instance).toHaveBeenCalled();
+    expect(getByText("job-1")).toBeTruthy();
+    expect(getByText("timerEvent")).toBeTruthy();
+    expect(getByText("live boom")).toBeTruthy();
+  });
+
+  it("jobs sub-panel fetches and renders historic job logs in history mode", () => {
+    mockParams = {
+      definition_id: "proc:1",
+      panel: "instances",
+      selection_id: "inst-9999",
+      sub_panel: "jobs",
+    };
+    mockQuery = { history: "true" };
+    signal_response(state.api.history.job_log.by_process_instance, [
+      {
+        id: "job-log-1",
+        jobId: "job-77",
+        activityId: "serviceTask",
+        timestamp: "2024-01-01T00:00:00Z",
+        jobRetries: 0,
+        jobPriority: 80,
+        jobExceptionMessage: "history boom",
+        failureLog: true,
+      },
+    ]);
+    const { getByText } = renderPage(state);
+    expect(engine_rest.history.job_log.by_process_instance).toHaveBeenCalled();
+    expect(engine_rest.job.by_process_instance).not.toHaveBeenCalled();
+    expect(getByText("job-77")).toBeTruthy();
+    expect(getByText("serviceTask")).toBeTruthy();
+    expect(getByText("2024-01-01T00:00:00Z")).toBeTruthy();
+    expect(getByText("processes.jobs.failed")).toBeTruthy();
+    expect(getByText("history boom")).toBeTruthy();
+  });
+
   it("called-instances sub-panel uses the historic endpoint in history mode", () => {
     mockParams = {
       definition_id: "proc:1",

src/state.js

@@ -145,6 +145,9 @@ const createAppState = () => {
         create: signal(null),
       },
     },
+    job: {
+      by_process_instance: signal(null),
+    },
     filter: {
       list: signal(null),
       one: signal(null),
@@ -174,6 +177,9 @@ const createAppState = () => {
       task: {
         by_process_instance: signal(null),
       },
+      job_log: {
+        by_process_instance: signal(null),
+      },
       process_instance: {
         called: signal(null),
       },