@oneuptime/common 12.0.7 → 12.0.8

package/Types/Workflow/Templates.ts

@@ -0,0 +1,316 @@
+/*
+ * Starter workflows.
+ *
+ * An empty canvas is a bad first lesson: the thing a new builder most needs to
+ * learn is how one step reads another's output, and nothing on a blank graph
+ * teaches it. Each template below is a small, working workflow whose whole
+ * point is to show a {{local.components.…}} reference in context.
+ *
+ * Every template here is deliberately runnable with no external configuration
+ * — no Slack token, no API key, no third-party account. Templates that need
+ * credentials belong in the docs, not in a one-click "start from this".
+ *
+ * The graphs are plain data in the same shape the builder saves and the JSON
+ * import reads, so a template is created through the ordinary Workflow create
+ * path (which denormalizes the trigger onto the row in
+ * WorkflowService.onCreateSuccess).
+ */
+
+import { JSONObject } from "../JSON";
+import ComponentID from "./ComponentID";
+import { ComponentType, NodeType } from "./Component";
+
+export interface WorkflowTemplate {
+  /** Stable key, used by the picker and by tests. */
+  id: string;
+  name: string;
+  /** One line, shown on the card. */
+  description: string;
+  /** What the builder should look at once it opens. */
+  teaches: string;
+  /** Suggested name for the created workflow. */
+  workflowName: string;
+  workflowDescription: string;
+}
+
+interface TemplateNodeSpec {
+  componentId: string;
+  metadataId: string;
+  componentType: ComponentType;
+  position: { x: number; y: number };
+  args?: JSONObject | undefined;
+}
+
+interface TemplateEdgeSpec {
+  fromComponentId: string;
+  toComponentId: string;
+  fromPort: string;
+}
+
+interface TemplateGraphSpec {
+  nodes: Array<TemplateNodeSpec>;
+  edges: Array<TemplateEdgeSpec>;
+}
+
+/*
+ * Node and edge identifiers are generated per creation rather than baked in,
+ * so two workflows made from the same template never share react-flow ids.
+ * The component ids (the user-facing "log-1") are stable, because that is what
+ * the {{...}} references inside the template point at.
+ */
+export type BuildTemplateGraphFunction = (
+  spec: TemplateGraphSpec,
+  generateId: () => string,
+) => JSONObject;
+
+export const buildTemplateGraph: BuildTemplateGraphFunction = (
+  spec: TemplateGraphSpec,
+  generateId: () => string,
+): JSONObject => {
+  const nodeIdByComponentId: Record<string, string> = {};
+
+  const nodes: Array<JSONObject> = spec.nodes.map(
+    (node: TemplateNodeSpec): JSONObject => {
+      const nodeId: string = generateId();
+      nodeIdByComponentId[node.componentId] = nodeId;
+
+      return {
+        id: nodeId,
+        type: "node",
+        position: node.position,
+        data: {
+          id: node.componentId,
+          nodeType: NodeType.Node,
+          componentType: node.componentType,
+          metadataId: node.metadataId,
+          internalId: generateId(),
+          error: "",
+          arguments: node.args || {},
+          returnValues: {},
+        },
+      };
+    },
+  );
+
+  const edges: Array<JSONObject> = spec.edges.map(
+    (edge: TemplateEdgeSpec): JSONObject => {
+      return {
+        id: generateId(),
+        source: nodeIdByComponentId[edge.fromComponentId] as string,
+        target: nodeIdByComponentId[edge.toComponentId] as string,
+        sourceHandle: edge.fromPort,
+        targetHandle: "in",
+      };
+    },
+  );
+
+  return { nodes: nodes, edges: edges };
+};
+
+type TemplateDefinition = WorkflowTemplate & { graph: TemplateGraphSpec };
+
+const TEMPLATE_DEFINITIONS: Array<TemplateDefinition> = [
+  {
+    id: "manual-log",
+    name: "Log a message when run by hand",
+    description:
+      "The smallest working workflow: a manual trigger and a step that writes a line to the run log.",
+    teaches: "How to run a workflow and where its output shows up.",
+    workflowName: "Log a message",
+    workflowDescription:
+      "Runs on demand and writes a line to the run log. A good place to start.",
+    graph: {
+      nodes: [
+        {
+          componentId: "manual-1",
+          metadataId: ComponentID.Manual,
+          componentType: ComponentType.Trigger,
+          position: { x: 100, y: 100 },
+        },
+        {
+          componentId: "log-1",
+          metadataId: ComponentID.Log,
+          componentType: ComponentType.Component,
+          position: { x: 100, y: 300 },
+          args: {
+            value: "Hello from OneUptime. This workflow ran.",
+          },
+        },
+      ],
+      edges: [
+        {
+          fromComponentId: "manual-1",
+          toComponentId: "log-1",
+          fromPort: "success",
+        },
+      ],
+    },
+  },
+  {
+    id: "webhook-echo",
+    name: "Echo what a webhook sent",
+    description:
+      "Takes the body posted to this workflow's webhook and writes it back out to the log.",
+    /*
+     * The reason this template exists: the log message is a reference, not
+     * text, and seeing that in place is the fastest way to understand the
+     * whole substitution model.
+     */
+    teaches:
+      "How one step reads another's output, using {{local.components...}}.",
+    workflowName: "Echo webhook body",
+    workflowDescription:
+      "Writes whatever was posted to this workflow's webhook into the run log.",
+    graph: {
+      nodes: [
+        {
+          componentId: "webhook-1",
+          metadataId: ComponentID.Webhook,
+          componentType: ComponentType.Trigger,
+          position: { x: 100, y: 100 },
+        },
+        {
+          componentId: "log-1",
+          metadataId: ComponentID.Log,
+          componentType: ComponentType.Component,
+          position: { x: 100, y: 300 },
+          args: {
+            value:
+              "Webhook received: {{local.components.webhook-1.returnValues.request-body}}",
+          },
+        },
+      ],
+      edges: [
+        {
+          fromComponentId: "webhook-1",
+          toComponentId: "log-1",
+          fromPort: "out",
+        },
+      ],
+    },
+  },
+  {
+    id: "scheduled-check",
+    name: "Call an API on a schedule",
+    description:
+      "Runs every hour, calls a URL, and logs whether it came back OK — with separate paths for success and failure.",
+    teaches:
+      "How a schedule works, and how a step's Success and Error ports branch.",
+    workflowName: "Hourly API check",
+    workflowDescription:
+      "Calls a URL every hour and logs the outcome. Point the URL at something of yours.",
+    graph: {
+      nodes: [
+        {
+          componentId: "schedule-1",
+          metadataId: ComponentID.Schedule,
+          componentType: ComponentType.Trigger,
+          position: { x: 100, y: 100 },
+          args: {
+            schedule: "0 * * * *",
+          },
+        },
+        {
+          componentId: "api-get-1",
+          metadataId: ComponentID.ApiGet,
+          componentType: ComponentType.Component,
+          position: { x: 100, y: 300 },
+          args: {
+            url: "https://api.github.com/zen",
+          },
+        },
+        {
+          componentId: "log-ok",
+          metadataId: ComponentID.Log,
+          componentType: ComponentType.Component,
+          position: { x: -100, y: 500 },
+          args: {
+            value:
+              "Responded {{local.components.api-get-1.returnValues.response-status}}: {{local.components.api-get-1.returnValues.response-body}}",
+          },
+        },
+        {
+          componentId: "log-failed",
+          metadataId: ComponentID.Log,
+          componentType: ComponentType.Component,
+          position: { x: 300, y: 500 },
+          args: {
+            value:
+              "Call failed: {{local.components.api-get-1.returnValues.error}}",
+          },
+        },
+      ],
+      edges: [
+        {
+          fromComponentId: "schedule-1",
+          toComponentId: "api-get-1",
+          fromPort: "execute",
+        },
+        {
+          fromComponentId: "api-get-1",
+          toComponentId: "log-ok",
+          fromPort: "success",
+        },
+        {
+          fromComponentId: "api-get-1",
+          toComponentId: "log-failed",
+          fromPort: "error",
+        },
+      ],
+    },
+  },
+];
+
+export type GetWorkflowTemplatesFunction = () => Array<WorkflowTemplate>;
+
+export const getWorkflowTemplates: GetWorkflowTemplatesFunction =
+  (): Array<WorkflowTemplate> => {
+    return TEMPLATE_DEFINITIONS.map(
+      (definition: TemplateDefinition): WorkflowTemplate => {
+        return {
+          id: definition.id,
+          name: definition.name,
+          description: definition.description,
+          teaches: definition.teaches,
+          workflowName: definition.workflowName,
+          workflowDescription: definition.workflowDescription,
+        };
+      },
+    );
+  };
+
+export type GetTemplateGraphSpecFunction = (
+  templateId: string,
+) => TemplateGraphSpec | null;
+
+export const getTemplateGraphSpec: GetTemplateGraphSpecFunction = (
+  templateId: string,
+): TemplateGraphSpec | null => {
+  const definition: TemplateDefinition | undefined = TEMPLATE_DEFINITIONS.find(
+    (candidate: TemplateDefinition) => {
+      return candidate.id === templateId;
+    },
+  );
+
+  return definition ? definition.graph : null;
+};
+
+export type BuildGraphForTemplateFunction = (
+  templateId: string,
+  generateId: () => string,
+) => JSONObject | null;
+
+export const buildGraphForTemplate: BuildGraphForTemplateFunction = (
+  templateId: string,
+  generateId: () => string,
+): JSONObject | null => {
+  const spec: TemplateGraphSpec | null = getTemplateGraphSpec(templateId);
+
+  if (!spec) {
+    return null;
+  }
+
+  return buildTemplateGraph(spec, generateId);
+};
+
+export default getWorkflowTemplates;

package/UI/Components/Date/CustomTimeRangeModal.tsx

@@ -0,0 +1,278 @@
+import React, { FunctionComponent, ReactElement, useId, useState } from "react";
+import InBetween from "../../../Types/BaseDatabase/InBetween";
+import OneUptimeDate from "../../../Types/Date";
+import IconProp from "../../../Types/Icon/IconProp";
+import Icon from "../Icon/Icon";
+import Input, { InputType } from "../Input/Input";
+import Modal, { ModalWidth } from "../Modal/Modal";
+
+export interface ComponentProps {
+  /*
+   * Window the editor opens on. Callers seed this with the range currently in
+   * effect so switching to "custom" starts from what the user is looking at
+   * rather than from an empty form.
+   */
+  initialValue?: InBetween<Date> | undefined;
+  title?: string | undefined;
+  description?: string | undefined;
+  onClose: () => void;
+  onSave: (value: InBetween<Date>) => void;
+}
+
+export interface QuickFillOption {
+  label: string;
+  minutes: number;
+}
+
+/*
+ * Shortcuts that fill both ends of the form at once, anchored to now. They are
+ * a starting point for a hand-tuned window — picking one does not apply the
+ * range, so the user can still nudge either end before hitting Apply.
+ */
+export const QUICK_FILL_OPTIONS: Array<QuickFillOption> = [
+  { label: "Last 1 hour", minutes: 60 },
+  { label: "Last 6 hours", minutes: 60 * 6 },
+  { label: "Last 12 hours", minutes: 60 * 12 },
+  { label: "Last 24 hours", minutes: 60 * 24 },
+  { label: "Last 7 days", minutes: 60 * 24 * 7 },
+  { label: "Last 30 days", minutes: 60 * 24 * 30 },
+];
+
+export type CustomTimeRangeValidationError = string;
+
+/*
+ * Kept pure and exported so the rules the Apply button is gated on can be
+ * checked directly, and so callers share one definition of "valid window".
+ */
+export function getCustomTimeRangeError(
+  startDate: Date | null,
+  endDate: Date | null,
+): CustomTimeRangeValidationError {
+  if (!startDate) {
+    return "Pick a start date and time.";
+  }
+
+  if (!endDate) {
+    return "Pick an end date and time.";
+  }
+
+  if (!OneUptimeDate.isAfter(endDate, startDate)) {
+    return "The end must be after the start. Adjust either end of the range.";
+  }
+
+  return "";
+}
+
+const CustomTimeRangeModal: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [startDate, setStartDate] = useState<Date | null>(
+    props.initialValue?.startValue || null,
+  );
+  const [endDate, setEndDate] = useState<Date | null>(
+    props.initialValue?.endValue || null,
+  );
+  // Two pickers can sit on one page, so the field ids cannot be constants.
+  const startFieldId: string = useId();
+  const endFieldId: string = useId();
+
+  const error: CustomTimeRangeValidationError = getCustomTimeRangeError(
+    startDate,
+    endDate,
+  );
+  const isValid: boolean = error === "";
+
+  const durationText: string = isValid
+    ? OneUptimeDate.secondsToFormattedFriendlyTimeString(
+        OneUptimeDate.getDifferenceInSeconds(endDate!, startDate!),
+      ).trim()
+    : "";
+
+  const formatDateTime: (date: Date) => string = (date: Date): string => {
+    return OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+      date,
+      false,
+      true,
+    );
+  };
+
+  const onQuickFill: (minutes: number) => void = (minutes: number): void => {
+    const end: Date = OneUptimeDate.resetSecondsAndMilliseconds(
+      OneUptimeDate.getCurrentDate(),
+    );
+    setStartDate(OneUptimeDate.addRemoveMinutes(end, -minutes));
+    setEndDate(end);
+  };
+
+  /*
+   * `Input` reports a cleared date field as an empty string. Anything else is
+   * an ISO string the field has already resolved in the user's timezone.
+   */
+  const toDate: (changedValue: string | Date) => Date | null = (
+    changedValue: string | Date,
+  ): Date | null => {
+    if (!changedValue) {
+      return null;
+    }
+
+    return OneUptimeDate.fromString(changedValue as string);
+  };
+
+  const isQuickFillActive: (minutes: number) => boolean = (
+    minutes: number,
+  ): boolean => {
+    if (!startDate || !endDate) {
+      return false;
+    }
+
+    return OneUptimeDate.getDifferenceInMinutes(startDate, endDate) === minutes;
+  };
+
+  return (
+    <Modal
+      title={props.title || "Custom Time Range"}
+      description={
+        props.description ||
+        "Choose the exact start and end date & time of the data you want to see."
+      }
+      modalWidth={ModalWidth.Medium}
+      submitButtonText="Apply"
+      closeButtonText="Cancel"
+      disableSubmitButton={!isValid}
+      onClose={props.onClose}
+      onSubmit={() => {
+        if (!isValid) {
+          return;
+        }
+
+        props.onSave(new InBetween<Date>(startDate!, endDate!));
+      }}
+    >
+      <div data-testid="custom-time-range-modal" className="space-y-5">
+        <div>
+          <div className="text-xs font-semibold uppercase tracking-wide text-gray-400">
+            Quick fill
+          </div>
+          <div className="mt-2 flex flex-wrap gap-2">
+            {QUICK_FILL_OPTIONS.map((option: QuickFillOption) => {
+              const isActive: boolean = isQuickFillActive(option.minutes);
+
+              return (
+                <button
+                  key={option.label}
+                  type="button"
+                  aria-pressed={isActive}
+                  onClick={() => {
+                    onQuickFill(option.minutes);
+                  }}
+                  className={`rounded-full border px-3 py-1 text-xs font-medium transition-colors ${
+                    isActive
+                      ? "border-indigo-200 bg-indigo-50 text-indigo-700"
+                      : "border-gray-200 bg-white text-gray-600 hover:border-gray-300 hover:bg-gray-50"
+                  }`}
+                >
+                  {option.label}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div className="rounded-lg border border-gray-200 bg-gray-50/60 p-3">
+            <label
+              htmlFor={startFieldId}
+              className="flex items-center gap-1.5 text-sm font-medium text-gray-900"
+            >
+              <Icon
+                icon={IconProp.Calendar}
+                className="h-4 w-4 text-gray-400"
+              />
+              From
+            </label>
+            <Input
+              id={startFieldId}
+              dataTestId="custom-time-range-start"
+              type={InputType.DATETIME_LOCAL}
+              showSecondsForDateTime={true}
+              placeholder="Start date & time"
+              value={startDate || ""}
+              onChange={(changedValue: string | Date) => {
+                setStartDate(toDate(changedValue));
+              }}
+            />
+          </div>
+
+          <div className="rounded-lg border border-gray-200 bg-gray-50/60 p-3">
+            <label
+              htmlFor={endFieldId}
+              className="flex items-center gap-1.5 text-sm font-medium text-gray-900"
+            >
+              <Icon
+                icon={IconProp.Calendar}
+                className="h-4 w-4 text-gray-400"
+              />
+              To
+            </label>
+            <Input
+              id={endFieldId}
+              dataTestId="custom-time-range-end"
+              type={InputType.DATETIME_LOCAL}
+              showSecondsForDateTime={true}
+              placeholder="End date & time"
+              value={endDate || ""}
+              onChange={(changedValue: string | Date) => {
+                setEndDate(toDate(changedValue));
+              }}
+            />
+          </div>
+        </div>
+
+        {isValid ? (
+          <div
+            data-testid="custom-time-range-summary"
+            className="rounded-lg border border-gray-200 bg-white p-3"
+          >
+            <div className="flex items-center justify-between text-sm">
+              <span className="text-gray-500">From</span>
+              <span className="font-medium text-gray-900">
+                {formatDateTime(startDate!)}
+              </span>
+            </div>
+            <div className="mt-2 flex items-center justify-between text-sm">
+              <span className="text-gray-500">To</span>
+              <span className="font-medium text-gray-900">
+                {formatDateTime(endDate!)}
+              </span>
+            </div>
+            <div className="mt-2 flex items-center justify-between border-t border-gray-100 pt-2 text-sm">
+              <span className="flex items-center gap-1.5 text-gray-500">
+                <Icon icon={IconProp.Clock} className="h-3.5 w-3.5" />
+                Duration
+              </span>
+              <span className="font-medium text-gray-900">{durationText}</span>
+            </div>
+          </div>
+        ) : (
+          <div
+            data-testid="custom-time-range-error"
+            role="alert"
+            className="flex items-start gap-2 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700"
+          >
+            <Icon
+              icon={IconProp.ErrorSolid}
+              className="mt-0.5 h-4 w-4 shrink-0 text-red-500"
+            />
+            <span>{error}</span>
+          </div>
+        )}
+
+        <div className="text-xs text-gray-400">
+          Times are shown in {OneUptimeDate.getCurrentTimezoneString()}.
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default CustomTimeRangeModal;