@oneuptime/common 12.0.8 → 12.0.9

package/UI/Components/Workflow/UseRunWatch.ts

@@ -0,0 +1,212 @@
+/*
+ * Following the run the builder just started, until it settles.
+ *
+ * RunStatusWatcher decides what to say and when to stop; this is the part that
+ * holds a timer, a generation counter and the run's log, and it lives here
+ * rather than in the page so it can be exercised through a real component
+ * lifecycle. Fetching is injected: the page knows how to ask the API for a
+ * run, and the hook only cares that asking returns one.
+ */
+
+import {
+  RUN_WATCH_POLL_INTERVAL_MS,
+  RunWatchDecision,
+  WatchedRun,
+  decideRunWatch,
+  isFailedRunStatus,
+} from "./RunStatusWatcher";
+import {
+  WorkflowStepTrace,
+  emptyTrace,
+} from "../../../Types/Workflow/StepTrace";
+import React, { useEffect, useRef, useState } from "react";
+
+/** A run, with everything the run log modal needs to show it. */
+export interface WatchedRunDetail extends WatchedRun {
+  logs: string;
+  stepTrace: WorkflowStepTrace;
+}
+
+export type FetchLatestRunFunction = () => Promise<WatchedRunDetail | null>;
+
+export interface UseRunWatchResult {
+  /** What the run is doing, in a sentence. Null before anything is watched. */
+  message: string | null;
+  /** The run ended badly. */
+  hasFailed: boolean;
+  /** Still following: what is on screen is not the final word. */
+  isWatching: boolean;
+  /** The run's log so far. */
+  logs: string;
+  /** The run's steps so far. */
+  stepTrace: WorkflowStepTrace;
+  /**
+   * Note which run is newest *before* triggering a new one. Await this before
+   * the request that starts the run: a worker can pick the job up and create
+   * its log while that request is still in flight, and asking afterwards can
+   * record the new run as the old one — leaving the watch waiting for a run
+   * that already exists.
+   */
+  captureRunBeforeTrigger: () => Promise<void>;
+  /** Start following the run that was just triggered. */
+  startWatchingRun: () => void;
+}
+
+export interface UseRunWatchParams {
+  fetchLatestRun: FetchLatestRunFunction;
+}
+
+export type UseRunWatchFunction = (
+  params: UseRunWatchParams,
+) => UseRunWatchResult;
+
+const useRunWatch: UseRunWatchFunction = (
+  params: UseRunWatchParams,
+): UseRunWatchResult => {
+  const [message, setMessage] = useState<string | null>(null);
+  const [hasFailed, setHasFailed] = useState<boolean>(false);
+  const [isWatching, setIsWatching] = useState<boolean>(false);
+  const [logs, setLogs] = useState<string>("");
+  const [stepTrace, setStepTrace] = useState<WorkflowStepTrace>(emptyTrace());
+
+  /*
+   * The page rebuilds its fetch function on every render. Reading it through a
+   * ref keeps a poll that is already in flight from being pinned to the
+   * function it started with.
+   */
+  const fetchLatestRun: React.MutableRefObject<FetchLatestRunFunction> =
+    useRef<FetchLatestRunFunction>(params.fetchLatestRun);
+
+  useEffect(() => {
+    fetchLatestRun.current = params.fetchLatestRun;
+  }, [params.fetchLatestRun]);
+
+  const pollTimer: React.MutableRefObject<ReturnType<
+    typeof setTimeout
+  > | null> = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const runIdBeforeTrigger: React.MutableRefObject<string | null> = useRef<
+    string | null
+  >(null);
+
+  /*
+   * Which watch a poll belongs to. A poll is a pending promise, so starting a
+   * second run while the first is mid-request leaves that request in flight —
+   * it comes back, and without this would report on the wrong run and schedule
+   * a second chain of timers alongside the new one.
+   */
+  const watchGeneration: React.MutableRefObject<number> = useRef<number>(0);
+
+  const isMounted: React.MutableRefObject<boolean> = useRef<boolean>(true);
+
+  useEffect(() => {
+    isMounted.current = true;
+
+    return () => {
+      isMounted.current = false;
+
+      if (pollTimer.current) {
+        clearTimeout(pollTimer.current);
+        pollTimer.current = null;
+      }
+    };
+  }, []);
+
+  type PollRunFunction = (
+    pollCount: number,
+    generation: number,
+  ) => Promise<void>;
+
+  const pollRun: PollRunFunction = async (
+    pollCount: number,
+    generation: number,
+  ): Promise<void> => {
+    let run: WatchedRunDetail | null = null;
+
+    try {
+      run = await fetchLatestRun.current();
+    } catch {
+      /*
+       * A failed poll is not a failed run. Keep watching — the next poll may
+       * well succeed, and the Logs tab is the fallback either way.
+       */
+      run = null;
+    }
+
+    // This watch was replaced or the page went away while we were asking.
+    if (!isMounted.current || generation !== watchGeneration.current) {
+      return;
+    }
+
+    // Not our run yet: the worker has not created its log.
+    if (run && run.runId === runIdBeforeTrigger.current) {
+      run = null;
+    }
+
+    if (run) {
+      setLogs(run.logs);
+      setStepTrace(run.stepTrace);
+    }
+
+    const decision: RunWatchDecision = decideRunWatch({
+      run: run,
+      pollCount: pollCount,
+    });
+
+    setMessage(decision.message);
+    setHasFailed(isFailedRunStatus(run?.status));
+
+    if (!decision.shouldContinue) {
+      setIsWatching(false);
+      return;
+    }
+
+    pollTimer.current = setTimeout(() => {
+      void pollRun(pollCount + 1, generation);
+    }, RUN_WATCH_POLL_INTERVAL_MS);
+  };
+
+  const captureRunBeforeTrigger: () => Promise<void> =
+    async (): Promise<void> => {
+      try {
+        const existing: WatchedRunDetail | null =
+          await fetchLatestRun.current();
+        runIdBeforeTrigger.current = existing ? existing.runId : null;
+      } catch {
+        /*
+         * Without a baseline the first run we see counts as ours. That is the
+         * kinder failure: showing the previous run beats showing nothing.
+         */
+        runIdBeforeTrigger.current = null;
+      }
+    };
+
+  const startWatchingRun: () => void = (): void => {
+    if (pollTimer.current) {
+      clearTimeout(pollTimer.current);
+      pollTimer.current = null;
+    }
+
+    watchGeneration.current = watchGeneration.current + 1;
+
+    setHasFailed(false);
+    setMessage("Starting run…");
+    setLogs("");
+    setStepTrace(emptyTrace());
+    setIsWatching(true);
+
+    void pollRun(0, watchGeneration.current);
+  };
+
+  return {
+    message: message,
+    hasFailed: hasFailed,
+    isWatching: isWatching,
+    logs: logs,
+    stepTrace: stepTrace,
+    captureRunBeforeTrigger: captureRunBeforeTrigger,
+    startWatchingRun: startWatchingRun,
+  };
+};
+
+export default useRunWatch;

package/UI/Components/Workflow/VariableModal.tsx

@@ -2,6 +2,10 @@ import ModelListModal from "../ModelListModal/ModelListModal";
 import EqualToOrNull from "../../../Types/BaseDatabase/EqualToOrNull";
 import ObjectID from "../../../Types/ObjectID";
 import WorkflowVariable from "../../../Models/DatabaseModels/WorkflowVariable";
+import {
+  globalVariableReference,
+  variableReference,
+} from "../../../Types/Workflow/TemplateSyntax";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
@@ -43,9 +47,9 @@ const VariableModal: FunctionComponent<ComponentProps> = (
       onClose={props.onClose}
       onSave={(variables: Array<WorkflowVariable>) => {
         if (variables[0]?.workflowId) {
-          props.onSave(`{{local.variables.${variables[0]?.name}}}`);
+          props.onSave(variableReference(variables[0]?.name || ""));
         } else {
-          props.onSave(`{{global.variables.${variables[0]?.name}}}`);
+          props.onSave(globalVariableReference(variables[0]?.name || ""));
         }
       }}
     />

package/UI/Components/Workflow/Workflow.tsx

@@ -8,6 +8,7 @@ import {
   WorkflowLintResult,
   lintWorkflowGraph,
 } from "./GraphLint";
+import { findStepNodeToOpen } from "./GraphLintSummary";
 import { loadComponentsAndCategories } from "./Utils";
 import { VoidFunction } from "../../../Types/FunctionTypes";
 import IconProp from "../../../Types/Icon/IconProp";
@@ -126,6 +127,17 @@ export interface ComponentProps {
    * page around the canvas can show a count and decide what to do about it.
    */
   onLintResultChange?: ((result: WorkflowLintResult) => void) | undefined;
+  /**
+   * A react-flow node id whose settings should be opened. The issues panel
+   * lives outside the canvas but its whole point is fixing a step, and this is
+   * how it gets the builder there.
+   */
+  openStepForNodeId?: string | null | undefined;
+  /**
+   * Called once the request above has been handled — whether or not the node
+   * was still in the graph — so the page can clear it and ask again later.
+   */
+  onStepOpened?: (() => void) | undefined;
 }
 
 const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
@@ -278,6 +290,30 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     props.onLintResultChange?.(lintResult);
   }, [lintResult]);
 
+  /*
+   * Opening a step from outside the canvas — the issues panel naming the node
+   * it is complaining about. A node that has since been deleted simply opens
+   * nothing; the request is still acknowledged so the page does not sit
+   * waiting for a step that no longer exists.
+   */
+  useEffect(() => {
+    if (!props.openStepForNodeId) {
+      return;
+    }
+
+    const nodeToOpen: Node | null = findStepNodeToOpen({
+      nodes: nodes,
+      nodeId: props.openStepForNodeId,
+    });
+
+    if (nodeToOpen) {
+      setSelectedNodeData(nodeToOpen.data as NodeDataProp);
+      setShowComponentSettingsModal(true);
+    }
+
+    props.onStepOpened?.();
+  }, [props.openStepForNodeId]);
+
   const nodesToRender: Array<Node> = useMemo(() => {
     return nodes.map((node: Node) => {
       const error: string = lintResult.errorsByNodeId[node.id] || "";
@@ -614,9 +650,19 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
 
       {showComponentSettingsModal && selectedNodeData && (
         <ComponentSettingsModal
-          graphComponents={nodes.map((node: Node) => {
-            return node.data as NodeDataProp;
-          })}
+          /*
+           * Placeholder nodes are excluded here rather than defended against
+           * downstream. The "click here to add trigger" node carries a partial
+           * metadata object — no returnValues, no arguments, an empty id — and
+           * passing it on made every consumer responsible for knowing that.
+           */
+          graphComponents={nodes
+            .map((node: Node) => {
+              return node.data as NodeDataProp;
+            })
+            .filter((data: NodeDataProp) => {
+              return data.nodeType !== NodeType.PlaceholderNode;
+            })}
           workflowId={props.workflowId}
           webhookSecretKey={props.webhookSecretKey}
           component={selectedNodeData}

package/UI/Components/Workflow/WorkflowIssuesModal.tsx

@@ -0,0 +1,255 @@
+/*
+ * Everything the static checks found, arranged so it can be fixed.
+ *
+ * The list used to be one card per issue, each headed by the step id in caps,
+ * so a step with two problems announced itself twice and a workflow with six
+ * looked like six unrelated failures. Here the issues belong to the step they
+ * are about: one card per step, headed by the step's name, with a button that
+ * takes the builder to it. The panel says "fixing them here saves a failed run
+ * later" — this is the part that makes "here" mean something.
+ */
+
+import Icon, { SizeProp } from "../Icon/Icon";
+import Modal, { ModalWidth } from "../Modal/Modal";
+import IconProp from "../../../Types/Icon/IconProp";
+import Dictionary from "../../../Types/Dictionary";
+import {
+  WorkflowLintIssue,
+  WorkflowLintResult,
+  WorkflowLintSeverity,
+} from "./GraphLint";
+import {
+  WorkflowIssueGroup,
+  getWorkflowLintSeverityLabel,
+  groupWorkflowLintIssues,
+} from "./GraphLintSummary";
+import React, { FunctionComponent, ReactElement } from "react";
+
+export interface ComponentProps {
+  lintResult: WorkflowLintResult;
+  /**
+   * Step titles by react-flow node id, so a group is headed the way the canvas
+   * heads the node rather than only by the id the builder typed.
+   */
+  stepTitlesByNodeId?: Dictionary<string> | undefined;
+  onClose: () => void;
+  /**
+   * Opens a step's settings. Without it the groups have no action and the
+   * panel is read-only, which is what happens for issues about the graph
+   * itself — there is no step to open.
+   */
+  onGoToStep?: ((nodeId: string) => void) | undefined;
+}
+
+type RenderSeverityIconFunction = (
+  severity: WorkflowLintSeverity,
+) => ReactElement;
+
+const renderSeverityIcon: RenderSeverityIconFunction = (
+  severity: WorkflowLintSeverity,
+): ReactElement => {
+  const isError: boolean = severity === WorkflowLintSeverity.Error;
+
+  return (
+    <span
+      className={`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full ${
+        isError ? "bg-red-100 text-red-600" : "bg-amber-100 text-amber-600"
+      }`}
+      data-testid={
+        isError ? "workflow-issue-error-icon" : "workflow-issue-warning-icon"
+      }
+    >
+      <Icon
+        icon={isError ? IconProp.Close : IconProp.Alert}
+        size={SizeProp.ExtraSmall}
+        className="h-2.5 w-2.5"
+      />
+    </span>
+  );
+};
+
+type RenderCountPillFunction = (params: {
+  count: number;
+  singular: string;
+  className: string;
+  testId: string;
+}) => ReactElement | null;
+
+const renderCountPill: RenderCountPillFunction = (params: {
+  count: number;
+  singular: string;
+  className: string;
+  testId: string;
+}): ReactElement | null => {
+  if (params.count <= 0) {
+    return null;
+  }
+
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium leading-4 whitespace-nowrap ${params.className}`}
+      data-testid={params.testId}
+    >
+      {params.count} {params.singular}
+      {params.count === 1 ? "" : "s"}
+    </span>
+  );
+};
+
+const WorkflowIssuesModal: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const groups: Array<WorkflowIssueGroup> = groupWorkflowLintIssues({
+    issues: props.lintResult.issues,
+    stepTitlesByNodeId: props.stepTitlesByNodeId,
+  });
+
+  return (
+    <Modal
+      title="Problems with this workflow"
+      description="These are found by reading the workflow. Fixing them here saves a failed run later."
+      modalWidth={ModalWidth.Medium}
+      closeButtonText="Close"
+      onClose={props.onClose}
+    >
+      <div className="space-y-3" data-testid="workflow-issues">
+        {groups.length === 0 ? (
+          <div
+            className="flex flex-col items-center gap-2 rounded-lg border border-dashed border-gray-200 px-4 py-8 text-center"
+            data-testid="workflow-issues-empty"
+          >
+            <Icon
+              icon={IconProp.CheckCircle}
+              className="h-6 w-6 text-emerald-500"
+            />
+            <p className="text-sm font-medium text-gray-900">
+              Nothing to fix here
+            </p>
+            <p className="text-sm text-gray-500">
+              The checks found nothing wrong with this workflow.
+            </p>
+          </div>
+        ) : (
+          <>
+            {/*
+              A running total up front: the groups below say what is wrong with
+              each step, and this says how much of it there is in total.
+            */}
+            <div
+              className="flex flex-wrap items-center gap-2"
+              data-testid="workflow-issues-summary"
+            >
+              {renderCountPill({
+                count: props.lintResult.errorCount,
+                singular: "error",
+                className:
+                  "bg-red-50 text-red-700 ring-1 ring-inset ring-red-200",
+                testId: "workflow-issues-error-count",
+              })}
+              {renderCountPill({
+                count: props.lintResult.warningCount,
+                singular: "warning",
+                className:
+                  "bg-amber-50 text-amber-800 ring-1 ring-inset ring-amber-200",
+                testId: "workflow-issues-warning-count",
+              })}
+              <span className="text-xs text-gray-500">
+                across{" "}
+                {groups.length === 1 ? "1 place" : `${groups.length} places`}
+              </span>
+            </div>
+
+            {groups.map((group: WorkflowIssueGroup): ReactElement => {
+              const canGoToStep: boolean = Boolean(
+                props.onGoToStep && group.nodeId,
+              );
+
+              return (
+                <section
+                  key={group.key}
+                  className="overflow-hidden rounded-lg border border-gray-200"
+                  data-testid="workflow-issue-group"
+                >
+                  <header className="flex items-start justify-between gap-3 border-b border-gray-200 bg-gray-50 px-3 py-2">
+                    <div className="min-w-0">
+                      <p className="truncate text-sm font-semibold text-gray-900">
+                        {group.title}
+                      </p>
+                      {group.componentId &&
+                        group.componentId !== group.title && (
+                          <p className="truncate font-mono text-xs text-gray-500">
+                            {group.componentId}
+                          </p>
+                        )}
+                    </div>
+                    <div className="flex shrink-0 items-center gap-2">
+                      {renderCountPill({
+                        count: group.errorCount,
+                        singular: "error",
+                        className:
+                          "bg-red-50 text-red-700 ring-1 ring-inset ring-red-200",
+                        testId: "workflow-issue-group-error-count",
+                      })}
+                      {renderCountPill({
+                        count: group.warningCount,
+                        singular: "warning",
+                        className:
+                          "bg-amber-50 text-amber-800 ring-1 ring-inset ring-amber-200",
+                        testId: "workflow-issue-group-warning-count",
+                      })}
+                      {canGoToStep && (
+                        <button
+                          type="button"
+                          onClick={() => {
+                            props.onGoToStep?.(group.nodeId as string);
+                          }}
+                          aria-label={`Open settings for ${group.title}`}
+                          data-testid="workflow-issue-go-to-step"
+                          className="inline-flex items-center gap-1 rounded-md border border-gray-300 bg-white px-2 py-1 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1"
+                        >
+                          Open step
+                          <Icon
+                            icon={IconProp.ChevronRight}
+                            size={SizeProp.ExtraSmall}
+                            className="h-3 w-3"
+                          />
+                        </button>
+                      )}
+                    </div>
+                  </header>
+
+                  <ul className="divide-y divide-gray-100">
+                    {group.issues.map(
+                      (
+                        issue: WorkflowLintIssue,
+                        index: number,
+                      ): ReactElement => {
+                        return (
+                          <li
+                            key={`${issue.rule}-${index}`}
+                            className="flex items-start gap-2.5 px-3 py-2.5"
+                            data-testid="workflow-issue"
+                          >
+                            {renderSeverityIcon(issue.severity)}
+                            <p className="text-sm leading-5 text-gray-700">
+                              <span className="sr-only">
+                                {getWorkflowLintSeverityLabel(issue.severity)}:{" "}
+                              </span>
+                              {issue.message}
+                            </p>
+                          </li>
+                        );
+                      },
+                    )}
+                  </ul>
+                </section>
+              );
+            })}
+          </>
+        )}
+      </div>
+    </Modal>
+  );
+};
+
+export default WorkflowIssuesModal;

package/UI/Components/Workflow/WorkflowLogModal.tsx

@@ -0,0 +1,128 @@
+/*
+ * One run of a workflow, shown in one place.
+ *
+ * A run answers two different questions and they want different shapes. "Which
+ * steps ran, what did each receive and return" is structure, and reads as a
+ * list. "What did the runner actually print" is a log, and reads as lines. They
+ * used to be stacked in the same modal, which meant the log was always pushed
+ * below a step list of unknown length and neither got the height it wanted.
+ * Tabs give each the whole body.
+ *
+ * The modal is presentational: whoever opens it owns the data. That is what
+ * lets the builder point it at a run it is still polling while the Logs table
+ * points it at a finished one.
+ */
+
+import { ButtonStyleType } from "../Button/Button";
+import Modal, { ModalWidth } from "../Modal/Modal";
+import SimpleLogViewer from "../SimpleLogViewer/SimpleLogViewer";
+import { Tab, TabType } from "../Tabs/Tab";
+import Tabs from "../Tabs/Tabs";
+import StepTraceViewer from "./StepTraceViewer";
+import {
+  WorkflowStepTrace,
+  WorkflowStepTraceEntry,
+} from "../../../Types/Workflow/StepTrace";
+import React, { FunctionComponent, ReactElement } from "react";
+
+export const STEPS_TAB_NAME: string = "Steps";
+export const FULL_LOG_TAB_NAME: string = "Full Log";
+
+export interface ComponentProps {
+  logs: string;
+  stepTrace: WorkflowStepTrace;
+  onClose: () => void;
+  title?: string | undefined;
+  description?: string | undefined;
+  /**
+   * A line about the run itself — "Run running…", "Run finished successfully".
+   * Shown above the tabs so it is visible whichever tab is open.
+   */
+  statusMessage?: string | null | undefined;
+  /** Colours the status line as a failure. */
+  isStatusMessageError?: boolean | undefined;
+  /** The run is still being followed, so what is on screen is not final. */
+  isRunning?: boolean | undefined;
+  initialTabName?: string | undefined;
+}
+
+const WorkflowLogModal: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const steps: Array<WorkflowStepTraceEntry> = props.stepTrace?.steps || [];
+
+  const tabs: Array<Tab> = [
+    {
+      name: STEPS_TAB_NAME,
+      countBadge: steps.length,
+      tabType: TabType.Info,
+      children: <StepTraceViewer trace={props.stepTrace} />,
+    },
+    {
+      name: FULL_LOG_TAB_NAME,
+      children: props.logs ? (
+        <SimpleLogViewer
+          title="Workflow Execution Log"
+          height="400px"
+          autoScrollToBottom={props.isRunning}
+        >
+          {props.logs}
+        </SimpleLogViewer>
+      ) : (
+        <p className="text-sm text-gray-500">
+          {props.isRunning
+            ? "Nothing has been logged yet."
+            : "This run did not log anything."}
+        </p>
+      ),
+    },
+  ];
+
+  return (
+    <Modal
+      title={props.title || "Workflow Run"}
+      description={
+        props.description || "Here is what happened when this workflow ran."
+      }
+      isLoading={false}
+      modalWidth={ModalWidth.Large}
+      /*
+       * Nothing here is submitted — the modal only shows a run. One button,
+       * which is the same thing the header's × and the Escape key do.
+       */
+      onClose={props.onClose}
+      closeButtonText={"Close"}
+      closeButtonStyleType={ButtonStyleType.NORMAL}
+    >
+      <div>
+        {props.statusMessage && (
+          <div className="flex items-center gap-2">
+            {props.isRunning && (
+              <span
+                aria-hidden="true"
+                className="h-2 w-2 shrink-0 rounded-full bg-indigo-500 animate-pulse"
+              />
+            )}
+            <p
+              className={`text-sm font-medium ${
+                props.isStatusMessageError ? "text-red-600" : "text-gray-600"
+              }`}
+            >
+              {props.statusMessage}
+            </p>
+          </div>
+        )}
+
+        <Tabs
+          tabs={tabs}
+          initialTabName={props.initialTabName}
+          onTabChange={() => {
+            // Nothing to do — the modal shows both tabs from data it already has.
+          }}
+        />
+      </div>
+    </Modal>
+  );
+};
+
+export default WorkflowLogModal;