@oneuptime/common 12.0.7 → 12.0.9

package/UI/Components/Workflow/ModelSchema.ts

@@ -0,0 +1,278 @@
+/*
+ * Shared access to the workflow /model-schema/:tableName endpoint.
+ *
+ * Three builder inputs are backed by a model's column list — the field picker
+ * for Select arguments, the query builder for Query arguments, and the record
+ * form for create/update arguments — and all three want the same fetch, the
+ * same loading and error handling, and the same column shape.
+ */
+
+import HTTPErrorResponse from "../../../Types/API/HTTPErrorResponse";
+import HTTPResponse from "../../../Types/API/HTTPResponse";
+import URL from "../../../Types/API/URL";
+import TableColumnType from "../../../Types/Database/TableColumnType";
+import { JSONObject } from "../../../Types/JSON";
+import { WORKFLOW_URL } from "../../Config";
+import API from "../../Utils/API/API";
+import { useEffect, useState } from "react";
+
+/**
+ * A column as the endpoint describes it. `type` is deliberately a bare string
+ * rather than the server-side TableColumnType enum, so this file stays on the
+ * browser side of the wire format.
+ */
+export interface ModelSchemaColumn {
+  id: string;
+  title: string;
+  description?: string;
+  type: string;
+  isRelation: boolean;
+  relatedTableName?: string | undefined;
+  relatedColumns?: Array<ModelSchemaColumn> | undefined;
+  /*
+   * Present from the endpoint, absent on anything cached or hand-built before
+   * they existed, so every reader must treat them as optional.
+   */
+  required?: boolean | undefined;
+  hasDefault?: boolean | undefined;
+  isTenantColumn?: boolean | undefined;
+  example?: string | undefined;
+  placeholder?: string | undefined;
+}
+
+/**
+ * Which permission list the endpoint should gate columns on.
+ *
+ * "read" is the default and is what a Select or Query argument wants. "write"
+ * is for create/update payloads, and is not a superset: a write-only column
+ * (MonitorSecret.secretValue declares `read: []`) appears only under "write".
+ */
+export type ModelSchemaAccess = "read" | "write";
+
+export interface ModelSchemaState {
+  columns: Array<ModelSchemaColumn> | null;
+  isLoading: boolean;
+  error: string | null;
+}
+
+export type FetchModelSchemaFunction = (
+  tableName: string,
+  access?: ModelSchemaAccess,
+) => Promise<Array<ModelSchemaColumn>>;
+
+export const fetchModelSchema: FetchModelSchemaFunction = async (
+  tableName: string,
+  access: ModelSchemaAccess = "read",
+): Promise<Array<ModelSchemaColumn>> => {
+  const url: URL = URL.fromString(WORKFLOW_URL.toString()).addRoute(
+    `/model-schema/${encodeURIComponent(tableName)}`,
+  );
+
+  /*
+   * Only sent when it is not the default, so the read requests the field picker
+   * and query builder make keep the exact URL they had.
+   */
+  if (access === "write") {
+    url.addQueryParam("access", "write");
+  }
+
+  const result: HTTPResponse<JSONObject> | HTTPErrorResponse =
+    await API.get<JSONObject>({ url });
+
+  if (result instanceof HTTPErrorResponse) {
+    throw result;
+  }
+
+  const data: JSONObject = result.data as JSONObject;
+
+  return (data["columns"] as unknown as Array<ModelSchemaColumn>) || [];
+};
+
+export type UseModelSchemaFunction = (
+  tableName: string | undefined,
+  access?: ModelSchemaAccess,
+) => ModelSchemaState;
+
+/**
+ * Load a model's columns, once per table name.
+ *
+ * Never throws: a failure leaves `columns` as an empty array and puts the
+ * message in `error`, so a caller can fall back to its JSON editor rather than
+ * showing the builder a blank panel.
+ */
+export const useModelSchema: UseModelSchemaFunction = (
+  tableName: string | undefined,
+  access: ModelSchemaAccess = "read",
+): ModelSchemaState => {
+  const [columns, setColumns] = useState<Array<ModelSchemaColumn> | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(Boolean(tableName));
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!tableName) {
+      setColumns([]);
+      setIsLoading(false);
+      return;
+    }
+
+    let cancelled: boolean = false;
+
+    const load: () => Promise<void> = async (): Promise<void> => {
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        const loaded: Array<ModelSchemaColumn> = await fetchModelSchema(
+          tableName,
+          access,
+        );
+
+        if (cancelled) {
+          return;
+        }
+
+        setColumns(loaded);
+      } catch (err) {
+        if (cancelled) {
+          return;
+        }
+
+        setError(API.getFriendlyMessage(err));
+        setColumns([]);
+      } finally {
+        if (!cancelled) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    void load();
+
+    return () => {
+      cancelled = true;
+    };
+    // Re-fetches when the gate changes: the two access modes return different columns.
+  }, [tableName, access]);
+
+  return { columns: columns, isLoading: isLoading, error: error };
+};
+
+/*
+ * Column types that hold a single scalar the builder can sensibly type into a
+ * box. Everything else (relations, JSON blobs, buffers, monitor steps) needs
+ * the JSON editor.
+ *
+ * These are spelled with the enum, not with string literals, because the wire
+ * carries the enum's *values* and several of them differ from the member name
+ * that reads like the obvious literal: ShortText is "Text", ObjectID is
+ * "Object ID", PositiveNumber is "Positive Number", LongURL is "URL". Written
+ * out by hand this list silently classified the two most-declared non-relation
+ * types as non-scalar, and the tests that covered it pinned the same mistake.
+ */
+const SCALAR_COLUMN_TYPES: Array<string> = [
+  TableColumnType.ShortText,
+  TableColumnType.LongText,
+  TableColumnType.VeryLongText,
+  TableColumnType.Slug,
+  TableColumnType.Email,
+  TableColumnType.Phone,
+  TableColumnType.Color,
+  TableColumnType.Domain,
+  TableColumnType.Name,
+  TableColumnType.Description,
+  TableColumnType.ObjectID,
+  TableColumnType.Number,
+  TableColumnType.SmallNumber,
+  TableColumnType.BigNumber,
+  TableColumnType.PositiveNumber,
+  TableColumnType.SmallPositiveNumber,
+  TableColumnType.BigPositiveNumber,
+  TableColumnType.Boolean,
+  TableColumnType.Date,
+  TableColumnType.Password,
+  TableColumnType.HashedString,
+  TableColumnType.Port,
+  TableColumnType.LongURL,
+  TableColumnType.ShortURL,
+  TableColumnType.IP,
+  TableColumnType.Version,
+  TableColumnType.Markdown,
+  TableColumnType.HTML,
+  TableColumnType.JavaScript,
+  TableColumnType.CSS,
+  TableColumnType.OTP,
+];
+
+const NUMERIC_COLUMN_TYPES: Array<string> = [
+  TableColumnType.Number,
+  TableColumnType.SmallNumber,
+  TableColumnType.BigNumber,
+  TableColumnType.PositiveNumber,
+  TableColumnType.SmallPositiveNumber,
+  TableColumnType.BigPositiveNumber,
+  TableColumnType.Port,
+];
+
+export type IsScalarColumnFunction = (column: ModelSchemaColumn) => boolean;
+
+export const isScalarColumn: IsScalarColumnFunction = (
+  column: ModelSchemaColumn,
+): boolean => {
+  return !column.isRelation && SCALAR_COLUMN_TYPES.includes(column.type);
+};
+
+export type IsNumericColumnFunction = (column: ModelSchemaColumn) => boolean;
+
+export const isNumericColumn: IsNumericColumnFunction = (
+  column: ModelSchemaColumn,
+): boolean => {
+  return !column.isRelation && NUMERIC_COLUMN_TYPES.includes(column.type);
+};
+
+export type IsBooleanColumnFunction = (column: ModelSchemaColumn) => boolean;
+
+export const isBooleanColumn: IsBooleanColumnFunction = (
+  column: ModelSchemaColumn,
+): boolean => {
+  return !column.isRelation && column.type === TableColumnType.Boolean;
+};
+
+/**
+ * Columns a create must be given a value for.
+ *
+ * Mirrors the server's own rule in DatabaseService.checkRequiredFields —
+ * required, minus anything carrying a default — and additionally drops the
+ * project column, which the workflow runner stamps itself
+ * (ModelArguments.applyTenantColumn) and which a builder must never type.
+ * Relations are left out because a row holds one scalar.
+ */
+export type RequiredWritableColumnsFunction = (
+  columns: Array<ModelSchemaColumn>,
+) => Array<ModelSchemaColumn>;
+
+export const requiredWritableColumns: RequiredWritableColumnsFunction = (
+  columns: Array<ModelSchemaColumn>,
+): Array<ModelSchemaColumn> => {
+  return columns.filter((column: ModelSchemaColumn) => {
+    return (
+      Boolean(column.required) &&
+      !column.hasDefault &&
+      !column.isTenantColumn &&
+      !column.isRelation
+    );
+  });
+};
+
+export type FindColumnFunction = (
+  columns: Array<ModelSchemaColumn>,
+  columnId: string,
+) => ModelSchemaColumn | undefined;
+
+export const findColumn: FindColumnFunction = (
+  columns: Array<ModelSchemaColumn>,
+  columnId: string,
+): ModelSchemaColumn | undefined => {
+  return columns.find((column: ModelSchemaColumn) => {
+    return column.id === columnId;
+  });
+};

package/UI/Components/Workflow/RunForm.tsx

@@ -1,9 +1,16 @@
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import BasicForm, { FormProps } from "../Forms/BasicForm";
 import FormValues from "../Forms/Types/FormValues";
-import { componentInputTypeToFormFieldType } from "./Utils";
+import {
+  componentInputTypeToFormFieldType,
+  parseStringDictionaryValue,
+} from "./Utils";
 import { JSONObject } from "../../../Types/JSON";
-import { Argument, NodeDataProp } from "../../../Types/Workflow/Component";
+import {
+  Argument,
+  ComponentInputType,
+  NodeDataProp,
+} from "../../../Types/Workflow/Component";
 import React, {
   FunctionComponent,
   ReactElement,
@@ -34,6 +41,29 @@ const RunForm: FunctionComponent<ComponentProps> = (
     props.onFormChange(component);
   }, [component]);
 
+  /*
+   * Same hydration ArgumentsForm does: a StringDictionary renders as key/value
+   * rows, and those need a real object rather than the JSON string older
+   * workflows stored. The field type is chosen from the same value, so the two
+   * cannot disagree about which editor is on screen.
+   */
+  const formInitialValues: JSONObject = { ...(component.arguments || {}) };
+
+  for (const argument of component.metadata.runWorkflowManuallyArguments ||
+    []) {
+    if (argument.type !== ComponentInputType.StringDictionary) {
+      continue;
+    }
+
+    const parsed: JSONObject | null = parseStringDictionaryValue(
+      formInitialValues[argument.id],
+    );
+
+    if (parsed !== null) {
+      formInitialValues[argument.id] = parsed;
+    }
+  }
+
   return (
     <div className="mb-3 mt-3">
       <div className="mt-5 mb-5">
@@ -57,7 +87,7 @@ const RunForm: FunctionComponent<ComponentProps> = (
               hideSubmitButton={true}
               ref={formRef}
               initialValues={{
-                ...(component.arguments || {}),
+                ...formInitialValues,
               }}
               onChange={(values: FormValues<JSONObject>) => {
                 setComponent({
@@ -86,12 +116,16 @@ const RunForm: FunctionComponent<ComponentProps> = (
                       },
                       required: argument.required,
                       placeholder: argument.placeholder,
+                      /*
+                       * Decided from the value the form actually renders.
+                       * This used to read component.returnValues, which is not
+                       * where RunForm writes — so for a field holding a value
+                       * the row editor cannot represent, the editor on screen
+                       * and the value behind it could disagree.
+                       */
                       ...componentInputTypeToFormFieldType(
                         argument.type,
-                        component.returnValues &&
-                          component.returnValues[argument.id]
-                          ? component.returnValues[argument.id]
-                          : null,
+                        formInitialValues[argument.id] ?? null,
                       ),
                     };
                   },

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 run log 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 their full log.
+      </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;