@oneuptime/common 12.0.6 → 12.0.8

package/UI/Components/Workflow/RunStatusWatcher.ts

@@ -0,0 +1,122 @@
+/*
+ * Pure helpers behind the builder's "what happened to the run I just started"
+ * strip.
+ *
+ * Triggering a run from the builder used to end at a modal saying the workflow
+ * had been scheduled and that the Logs tab would know more. That left the one
+ * question the builder actually has — did it work — to a different page, a
+ * table, and a text blob. The runner does not hand back a log id at enqueue
+ * time (RunWorkflow creates the WorkflowLog itself once it picks the job up),
+ * so the builder watches for the run instead of being told about it.
+ *
+ * The logic that decides when to stop watching lives here, separate from the
+ * page, because it is the part worth testing.
+ */
+
+import WorkflowStatus from "../../../Types/Workflow/WorkflowStatus";
+
+/**
+ * Statuses a run never moves on from. Waiting is not one of them — a Sleep
+ * step parks a run for as long as it likes and it carries on afterwards.
+ */
+const TERMINAL_STATUSES: Array<WorkflowStatus> = [
+  WorkflowStatus.Success,
+  WorkflowStatus.Error,
+  WorkflowStatus.Timeout,
+  WorkflowStatus.WorkflowCountExceeded,
+];
+
+export type IsTerminalRunStatusFunction = (
+  status: WorkflowStatus | null | undefined,
+) => boolean;
+
+export const isTerminalRunStatus: IsTerminalRunStatusFunction = (
+  status: WorkflowStatus | null | undefined,
+): boolean => {
+  if (!status) {
+    return false;
+  }
+
+  return TERMINAL_STATUSES.includes(status);
+};
+
+export type IsFailedRunStatusFunction = (
+  status: WorkflowStatus | null | undefined,
+) => boolean;
+
+export const isFailedRunStatus: IsFailedRunStatusFunction = (
+  status: WorkflowStatus | null | undefined,
+): boolean => {
+  return (
+    status === WorkflowStatus.Error ||
+    status === WorkflowStatus.Timeout ||
+    status === WorkflowStatus.WorkflowCountExceeded
+  );
+};
+
+/*
+ * How long to keep watching. A run that suspends on a Sleep step can outlive
+ * any sensible watch, so the strip stops following it and points at the Logs
+ * tab rather than polling for hours.
+ */
+export const MAX_RUN_WATCH_POLLS: number = 60;
+export const RUN_WATCH_POLL_INTERVAL_MS: number = 2000;
+
+export interface WatchedRun {
+  runId: string;
+  status: WorkflowStatus;
+}
+
+export interface RunWatchDecision {
+  /** Poll again? */
+  shouldContinue: boolean;
+  /** Text for the strip. Null when there is nothing to say yet. */
+  message: string | null;
+}
+
+export type DecideRunWatchFunction = (params: {
+  run: WatchedRun | null;
+  pollCount: number;
+}) => RunWatchDecision;
+
+/**
+ * What the strip should say, and whether to keep looking.
+ */
+export const decideRunWatch: DecideRunWatchFunction = (params: {
+  run: WatchedRun | null;
+  pollCount: number;
+}): RunWatchDecision => {
+  if (params.pollCount >= MAX_RUN_WATCH_POLLS) {
+    return {
+      shouldContinue: false,
+      message:
+        "This run is taking a while. Open the Logs tab to follow it from there.",
+    };
+  }
+
+  if (!params.run) {
+    return { shouldContinue: true, message: "Starting run…" };
+  }
+
+  if (isTerminalRunStatus(params.run.status)) {
+    return {
+      shouldContinue: false,
+      message: isFailedRunStatus(params.run.status)
+        ? `Run ${params.run.status.toLowerCase()}. Open the Logs tab to see why.`
+        : "Run finished successfully.",
+    };
+  }
+
+  if (params.run.status === WorkflowStatus.Waiting) {
+    return {
+      shouldContinue: false,
+      message:
+        "This run is sleeping and will carry on by itself. Follow it in the Logs tab.",
+    };
+  }
+
+  return {
+    shouldContinue: true,
+    message: `Run ${params.run.status.toLowerCase()}…`,
+  };
+};

package/UI/Components/Workflow/StepTraceViewer.tsx

@@ -0,0 +1,186 @@
+/*
+ * A workflow run, read as the list of steps it actually took.
+ *
+ * The raw log is still there and still useful — it carries the component's own
+ * log lines and the warnings the runner emits — but "what did this step
+ * receive, what did it return, and where did it go next" is a question about
+ * structure, and answering it by scanning a newline-joined blob was the whole
+ * problem.
+ */
+
+import Icon from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
+import { JSONObject } from "../../../Types/JSON";
+import {
+  WorkflowStepStatus,
+  WorkflowStepTrace,
+  WorkflowStepTraceEntry,
+} from "../../../Types/Workflow/StepTrace";
+import React, { FunctionComponent, ReactElement, useState } from "react";
+
+export interface ComponentProps {
+  trace: WorkflowStepTrace;
+}
+
+type FormatDurationFunction = (durationInMs: number) => string;
+
+export const formatStepDuration: FormatDurationFunction = (
+  durationInMs: number,
+): string => {
+  if (durationInMs < 1000) {
+    return `${durationInMs}ms`;
+  }
+
+  if (durationInMs < 60000) {
+    return `${(durationInMs / 1000).toFixed(1)}s`;
+  }
+
+  const minutes: number = Math.floor(durationInMs / 60000);
+  const seconds: number = Math.round((durationInMs % 60000) / 1000);
+
+  return `${minutes}m ${seconds}s`;
+};
+
+interface ValueBlockProps {
+  title: string;
+  values: JSONObject;
+}
+
+const ValueBlock: FunctionComponent<ValueBlockProps> = (
+  props: ValueBlockProps,
+): ReactElement => {
+  const keys: Array<string> = Object.keys(props.values || {});
+
+  return (
+    <div>
+      <p className="text-[11px] font-semibold uppercase tracking-wider text-gray-500 mb-1">
+        {props.title}
+      </p>
+      {keys.length === 0 ? (
+        <p className="text-sm text-gray-400">None</p>
+      ) : (
+        <dl className="space-y-1">
+          {keys.map((key: string) => {
+            const value: unknown = props.values[key];
+            const text: string =
+              typeof value === "string"
+                ? value
+                : JSON.stringify(value, null, 2);
+
+            return (
+              <div key={key} className="text-sm">
+                <dt className="text-gray-500 font-medium">{key}</dt>
+                <dd className="text-gray-800 font-mono text-xs whitespace-pre-wrap break-all">
+                  {text}
+                </dd>
+              </div>
+            );
+          })}
+        </dl>
+      )}
+    </div>
+  );
+};
+
+interface StepRowProps {
+  step: WorkflowStepTraceEntry;
+  index: number;
+}
+
+const StepRow: FunctionComponent<StepRowProps> = (
+  props: StepRowProps,
+): ReactElement => {
+  const [isOpen, setIsOpen] = useState<boolean>(
+    props.step.status === WorkflowStepStatus.Error,
+  );
+
+  const isError: boolean = props.step.status === WorkflowStepStatus.Error;
+
+  return (
+    <div
+      className={`rounded-md border ${
+        isError ? "border-red-200 bg-red-50" : "border-gray-200 bg-white"
+      }`}
+    >
+      <button
+        type="button"
+        aria-expanded={isOpen}
+        className="w-full text-left p-3 flex items-center gap-3 cursor-pointer"
+        onClick={() => {
+          setIsOpen(!isOpen);
+        }}
+      >
+        <span className="text-xs text-gray-400 w-5 shrink-0">
+          {props.index + 1}
+        </span>
+
+        <Icon
+          icon={isError ? IconProp.Alert : IconProp.CheckCircle}
+          className={`h-4 w-4 shrink-0 ${
+            isError ? "text-red-500" : "text-green-500"
+          }`}
+        />
+
+        <span className="flex-1 min-w-0">
+          <span className="block text-sm font-medium text-gray-900 truncate">
+            {props.step.title}
+          </span>
+          <span className="block text-xs text-gray-500 truncate">
+            {props.step.componentId}
+          </span>
+        </span>
+
+        <span className="text-xs text-gray-500 shrink-0">
+          {formatStepDuration(props.step.durationInMs)}
+        </span>
+
+        {props.step.executedPort && (
+          <span className="text-xs text-gray-500 shrink-0 hidden sm:inline">
+            → {props.step.executedPort}
+          </span>
+        )}
+      </button>
+
+      {isOpen && (
+        <div className="border-t border-gray-200 p-3 space-y-3">
+          {props.step.errorMessage && (
+            <p className="text-sm text-red-700">{props.step.errorMessage}</p>
+          )}
+          <ValueBlock title="Received" values={props.step.argumentValues} />
+          <ValueBlock title="Returned" values={props.step.returnValues} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+const StepTraceViewer: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const steps: Array<WorkflowStepTraceEntry> = props.trace?.steps || [];
+
+  if (steps.length === 0) {
+    return (
+      <p className="text-sm text-gray-500">
+        This run has no recorded steps. Runs from before step recording was
+        added show only the log below.
+      </p>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {props.trace.truncated && (
+        <p className="text-sm text-amber-700">
+          Only the last {steps.length} steps of this run were kept.
+        </p>
+      )}
+
+      {steps.map((step: WorkflowStepTraceEntry, index: number) => {
+        return <StepRow key={index} step={step} index={index} />;
+      })}
+    </div>
+  );
+};
+
+export default StepTraceViewer;

package/UI/Components/Workflow/Utils.ts

@@ -1,6 +1,8 @@
 import { DropdownOption } from "../Dropdown/Dropdown";
 import FormFieldSchemaType from "../Forms/Types/FormFieldSchemaType";
 import IconProp from "../../../Types/Icon/IconProp";
+import { JSONObject } from "../../../Types/JSON";
+import JSONFunctions from "../../../Types/JSONFunctions";
 import ComponentMetadata, {
   ComponentCategory,
   ComponentInputType,
@@ -44,6 +46,81 @@ export const loadComponentsAndCategories: LoadComponentsAndCategoriesFunction =
     return { components: initComponents, categories: initCategories };
   };
 
+export type ParseStringDictionaryValueFunction = (
+  argValue: unknown,
+) => JSONObject | null;
+
+/**
+ * The key/value view of a StringDictionary argument, or null when the value
+ * cannot be shown that way and belongs in the JSON editor instead.
+ *
+ * Editable as rows:
+ *   - nothing yet (a new component)
+ *   - an object of primitives, whether stored as an object (written by the row
+ *     editor) or as a JSON string (written by the old JSON editor, and by
+ *     every workflow that already exists)
+ *
+ * Not editable as rows, so left in the JSON editor:
+ *   - a whole-field template such as {{local.components.x.returnValues.headers}},
+ *     which substitutes an entire object at run time and is not JSON as written
+ *   - text that does not parse, which is exactly the case where the builder
+ *     most needs to see and fix what they typed
+ *   - nested objects or arrays, which the row editor cannot represent and would
+ *     therefore quietly discard
+ */
+export const parseStringDictionaryValue: ParseStringDictionaryValueFunction = (
+  argValue: unknown,
+): JSONObject | null => {
+  if (argValue === null || argValue === undefined || argValue === "") {
+    return {};
+  }
+
+  let candidate: unknown = argValue;
+
+  if (typeof candidate === "string") {
+    if (candidate.trim() === "") {
+      return {};
+    }
+
+    /*
+     * JSONFunctions.parse is JSON5, which is what the components themselves use
+     * on these values (ApiComponentUtils.sanitizeArgs). Parsing more strictly
+     * here than the runtime does would push a value that works today into the
+     * JSON editor for no reason.
+     */
+    try {
+      candidate = JSONFunctions.parse(candidate);
+    } catch {
+      return null;
+    }
+  }
+
+  if (
+    typeof candidate !== "object" ||
+    candidate === null ||
+    Array.isArray(candidate)
+  ) {
+    return null;
+  }
+
+  const entries: JSONObject = candidate as JSONObject;
+
+  for (const key of Object.keys(entries)) {
+    const value: unknown = entries[key];
+
+    const isPrimitive: boolean =
+      typeof value === "string" ||
+      typeof value === "number" ||
+      typeof value === "boolean";
+
+    if (!isPrimitive) {
+      return null;
+    }
+  }
+
+  return entries;
+};
+
 type ComponentInputTypeToFormFieldTypeFunction = (
   componentInputType: ComponentInputType,
   argValue: unknown,
@@ -110,9 +187,24 @@ export const componentInputTypeToFormFieldType: ComponentInputTypeToFormFieldTyp
       };
     }
 
+    /*
+     * A dictionary of strings is a list of key/value pairs — request headers,
+     * query params — and asking someone to hand-write the braces and commas
+     * for that is where a good share of workflow JSON mistakes come from. Give
+     * it the key/value row editor instead.
+     *
+     * Values written before this change are JSON strings, and a value can also
+     * be something the row editor cannot represent (a whole-field
+     * {{...}} substitution, or nested objects). parseStringDictionaryValue
+     * decides; anything it cannot represent stays in the JSON editor, so no
+     * existing value is ever silently dropped on the floor.
+     */
     if (componentInputType === ComponentInputType.StringDictionary) {
       return {
-        fieldType: FormFieldSchemaType.JSON,
+        fieldType:
+          parseStringDictionaryValue(argValue) === null
+            ? FormFieldSchemaType.JSON
+            : FormFieldSchemaType.Dictionary,
       };
     }
 

package/UI/Components/Workflow/Workflow.tsx

@@ -2,6 +2,12 @@ import WorkflowComponent from "./Component";
 import ComponentSettingsModal from "./ComponentSettingsModal";
 import ComponentsModal from "./ComponentsModal";
 import RunModal from "./RunModal";
+import {
+  LintGraphEdge,
+  LintGraphNode,
+  WorkflowLintResult,
+  lintWorkflowGraph,
+} from "./GraphLint";
 import { loadComponentsAndCategories } from "./Utils";
 import { VoidFunction } from "../../../Types/FunctionTypes";
 import IconProp from "../../../Types/Icon/IconProp";
@@ -17,6 +23,7 @@ import React, {
   FunctionComponent,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -111,7 +118,14 @@ export interface ComponentProps {
   workflowId: ObjectID;
   onRunModalUpdate: (isModalShown: boolean) => void;
   onRun: (trigger: NodeDataProp) => void;
+  /** Run one component on its own. */
+  onRunStep?: ((component: NodeDataProp) => void) | undefined;
   webhookSecretKey?: string | undefined;
+  /**
+   * Called whenever the static checks over the graph are recomputed, so the
+   * page around the canvas can show a count and decide what to do about it.
+   */
+  onLintResultChange?: ((result: WorkflowLintResult) => void) | undefined;
 }
 
 const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
@@ -244,6 +258,45 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     }
   }, [nodes, edges]);
 
+  /*
+   * Static checks over the graph, recomputed as it is edited.
+   *
+   * The results are deliberately NOT written back into node state. Node data is
+   * what gets persisted (Builder.saveGraph sends node.data verbatim, minus
+   * metadata), so storing lint output there would save today's warnings into
+   * the workflow itself and show them again on reload even once they were
+   * fixed. Deriving a separate array for rendering keeps the saved graph clean.
+   */
+  const lintResult: WorkflowLintResult = useMemo(() => {
+    return lintWorkflowGraph({
+      nodes: nodes as unknown as Array<LintGraphNode>,
+      edges: edges as unknown as Array<LintGraphEdge>,
+    });
+  }, [nodes, edges]);
+
+  useEffect(() => {
+    props.onLintResultChange?.(lintResult);
+  }, [lintResult]);
+
+  const nodesToRender: Array<Node> = useMemo(() => {
+    return nodes.map((node: Node) => {
+      const error: string = lintResult.errorsByNodeId[node.id] || "";
+
+      // Same object when there is nothing to say, so react-flow can bail early.
+      if (!error && !node.data.error) {
+        return node;
+      }
+
+      return {
+        ...node,
+        data: {
+          ...node.data,
+          error: error,
+        },
+      };
+    });
+  }, [nodes, lintResult]);
+
   const proOptions: ProOptions = { hideAttribution: true };
 
   const onConnect: OnConnect = useCallback(
@@ -467,7 +520,7 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
         `}
       </style>
       <ReactFlow
-        nodes={nodes}
+        nodes={nodesToRender}
         edges={edges}
         fitView={true}
         onEdgeClick={() => {
@@ -575,6 +628,16 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
           onDelete={(component: NodeDataProp) => {
             deleteNode(component.id);
           }}
+          /*
+           * Triggers have nothing to run on their own — they are the thing
+           * that starts a run, so "run just this step" is meaningless for one.
+           */
+          onRunStep={
+            props.onRunStep &&
+            selectedNodeData.componentType !== ComponentType.Trigger
+              ? props.onRunStep
+              : undefined
+          }
           description={
             selectedNodeData && selectedNodeData.metadata.description
               ? selectedNodeData.metadata.description
@@ -584,12 +647,22 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
             setShowComponentSettingsModal(false);
           }}
           onSave={(componentData: NodeDataProp) => {
-            // Update the node.
+            /*
+             * The settings modal was opened from the rendered node, so what
+             * comes back carries whatever lint message was on it. Clear that
+             * before it reaches node state — state is what gets saved, and a
+             * message about today's mistake has no business being written into
+             * the workflow.
+             */
+            const dataToStore: NodeDataProp = {
+              ...componentData,
+              error: "",
+            };
 
             setNodes((nds: Array<Node>) => {
               return nds.map((n: Node) => {
-                if (n.data.internalId === componentData.internalId) {
-                  n.data = componentData;
+                if (n.data.internalId === dataToStore.internalId) {
+                  n.data = dataToStore;
                 }
 
                 return n;

package/UI/Types/LayeredDismissal.ts

@@ -0,0 +1,31 @@
+/*
+ * Dismissal belongs to the topmost layer that is open.
+ *
+ * A colour picker, an icon grid or an autocomplete menu inside a modal is
+ * portalled to document.body so the modal body cannot clip it, and it closes
+ * itself on a press that lands anywhere else. Very often "anywhere else" is the
+ * modal's own backdrop, which reads the same press as a dismissal of the whole
+ * dialog - so one click aimed at the popup takes the half-filled form with it.
+ *
+ * A popup that consumes a press records it here, and the backdrop skips any
+ * press it finds. The set is keyed on the native event object and holds it
+ * weakly, so nothing outlives the press it describes.
+ */
+
+const pressesConsumedByAnAnchoredPopup: WeakSet<Event> = new WeakSet<Event>();
+
+export type ConsumePressFunction = (event: Event) => void;
+
+export const consumePressForAnchoredPopup: ConsumePressFunction = (
+  event: Event,
+): void => {
+  pressesConsumedByAnAnchoredPopup.add(event);
+};
+
+export type WasPressConsumedFunction = (event: Event) => boolean;
+
+export const wasPressConsumedByAnAnchoredPopup: WasPressConsumedFunction = (
+  event: Event,
+): boolean => {
+  return pressesConsumedByAnAnchoredPopup.has(event);
+};