Improved delay actions reporting in playbook run sidebar

src/api/types/playbooks.ts

@@ -123,6 +123,7 @@ export type PlaybookResourceSelector = {
 
 export interface PlaybookAction {
   name: string;
+  delay?: string;
 
   // Action type specific fields
   ai?: any;

src/components/Playbooks/Runs/Actions/PlaybookRunsActionItem.tsx

@@ -8,6 +8,61 @@ import { PlaybookStatusIcon } from "../../../../ui/Icons/PlaybookStatusIcon";
 import { Badge } from "@flanksource-ui/ui/Badge/Badge";
 import { TbCornerDownRight } from "react-icons/tb";
 
+function ActionTimestampTooltip({
+  action
+}: {
+  action: Pick<
+    PlaybookRunAction,
+    "id" | "status" | "scheduled_time" | "start_time" | "end_time"
+  >;
+}) {
+  const fmt = (t?: string) =>
+    t ? dayjs(t).local().format("YYYY-MM-DD HH:mm:ss") : null;
+
+  const scheduledFmt = fmt(action.scheduled_time);
+  const startFmt = fmt(action.start_time);
+  const endFmt = fmt(action.end_time);
+
+  const delayMs =
+    action.scheduled_time && action.start_time
+      ? dayjs(action.start_time).diff(dayjs(action.scheduled_time))
+      : 0;
+
+  const showDelay = delayMs > 1000;
+
+  if (!scheduledFmt && !startFmt && !endFmt) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col gap-1 text-xs">
+      {scheduledFmt && (
+        <div className="flex gap-2">
+          <span className="min-w-[65px] text-gray-400">Scheduled:</span>
+          <span>{scheduledFmt}</span>
+        </div>
+      )}
+      {startFmt && (
+        <div className="flex gap-2">
+          <span className="min-w-[65px] text-gray-400">Started:</span>
+          <span>{startFmt}</span>
+          {showDelay && action.scheduled_time && (
+            <span className="text-gray-400">
+              (Δ {relativeDateTime(action.scheduled_time, action.start_time)})
+            </span>
+          )}
+        </div>
+      )}
+      {endFmt && (
+        <div className="flex gap-2">
+          <span className="min-w-[65px] text-gray-400">Ended:</span>
+          <span>{endFmt}</span>
+        </div>
+      )}
+    </div>
+  );
+}
+
 type PlaybookRunsActionItemProps = {
   agent?: string;
   action: Pick<
@@ -44,6 +99,7 @@ export default function PlaybookRunsActionItem({
       <div
         data-tooltip-id={action.id}
         role="button"
+        title={action.status}
         onClick={() => {
           if (action.status !== "skipped") {
             onClick();
@@ -55,7 +111,6 @@ export default function PlaybookRunsActionItem({
           isSelected ? "bg-gray-200" : "bg-white",
           action.status === "skipped" ? "cursor-not-allowed" : "cursor-pointer"
         )}
-        data-tooltip-content={action.status}
       >
         <div className="flex flex-col">
           <div className="flex flex-row gap-2 text-sm text-gray-600">
@@ -74,14 +129,9 @@ export default function PlaybookRunsActionItem({
         <div className="flex flex-row gap-2">
           <div className="text-sm text-gray-600">
             {action.status === "sleeping" ? (
-              <span
-                data-tooltip-id="scheduled-tooltip"
-                data-tooltip-content={`Scheduled to run in ${relativeDateTime(
-                  dayjs().toISOString(),
-                  action.scheduled_time
-                )}`}
-              >
-                -
+              <span className="text-blue-400">
+                in{" "}
+                {relativeDateTime(dayjs().toISOString(), action.scheduled_time)}
               </span>
             ) : (
               <FormatDuration
@@ -90,10 +140,11 @@ export default function PlaybookRunsActionItem({
               />
             )}
           </div>
-          <Tooltip id="scheduled-tooltip" />
         </div>
       </div>
-      <Tooltip id={action.id} />
+      <Tooltip id={action.id}>
+        <ActionTimestampTooltip action={action} />
+      </Tooltip>
     </div>
   );
 }

src/components/Playbooks/Runs/Actions/__tests__/PlaybookRunsActionItem.unit.test.tsx

@@ -55,4 +55,50 @@ describe("PlaybookRunsActionItem", () => {
 
     expect(screen.getByRole("button")).toHaveClass("bg-gray-200");
   });
+
+  it("shows 'in X' for sleeping actions with scheduled_time", () => {
+    const futureTime = new Date(Date.now() + 5 * 60 * 1000).toISOString();
+    const sleepingAction: PlaybookRunAction = {
+      playbook_run_id: "1",
+      id: "2",
+      name: "Sleeping Action",
+      status: "sleeping",
+      start_time: "2022-01-01T00:00:00Z",
+      scheduled_time: futureTime
+    };
+
+    render(
+      <PlaybookRunsActionItem
+        action={sleepingAction}
+        onClick={mockOnClick}
+        isSelected={false}
+        stepNumber={2}
+      />
+    );
+
+    // The sleeping action should show "in X" instead of "-"
+    const sleepText = screen.getByText(/^in /);
+    expect(sleepText).toBeInTheDocument();
+  });
+
+  it("does not call onClick for skipped actions", () => {
+    const skippedAction: PlaybookRunAction = {
+      ...mockAction,
+      id: "3",
+      status: "skipped"
+    };
+    const onClickForSkipped = jest.fn();
+
+    render(
+      <PlaybookRunsActionItem
+        action={skippedAction}
+        onClick={onClickForSkipped}
+        isSelected={false}
+        stepNumber={3}
+      />
+    );
+
+    fireEvent.click(screen.getByRole("button"));
+    expect(onClickForSkipped).not.toHaveBeenCalled();
+  });
 });

src/ui/Icons/PlaybookStatusIcon.tsx

@@ -4,6 +4,7 @@ import {
   BsCircle,
   BsClock,
   BsHourglassSplit,
+  BsMoon,
   BsSlashCircle,
   BsStopCircle,
   BsXCircle
@@ -67,7 +68,7 @@ export function PlaybookStatusIcon({
 
     case "sleeping":
       return (
-        <BsClock className="inline h-5 w-auto object-center pr-1 text-gray-400" />
+        <BsMoon className="inline h-5 w-auto object-center pr-1 text-blue-400" />
       );
 
     case "skipped":