@oneuptime/common 11.5.4 → 11.5.6

package/Types/Workflow/Components/AI.ts

@@ -0,0 +1,148 @@
+import Route from "../../API/Route";
+import IconProp from "../../Icon/IconProp";
+import ComponentID from "../ComponentID";
+import ComponentMetadata, {
+  ComponentInputType,
+  ComponentType,
+} from "./../Component";
+
+const components: Array<ComponentMetadata> = [
+  {
+    id: ComponentID.AIGenerateText,
+    title: "Generate Text with AI",
+    category: "AI",
+    description:
+      "Generate text from an instruction and explicit workflow context using the project's configured LLM provider.",
+    iconProp: IconProp.Sparkles,
+    componentType: ComponentType.Component,
+    documentationLink: Route.fromString("/workflow/docs/AI.md"),
+    arguments: [
+      {
+        type: ComponentInputType.LongText,
+        name: "System Instructions",
+        description:
+          "Optional high-level instructions that define the model's role, tone, or constraints.",
+        required: false,
+        id: "system-prompt",
+        placeholder:
+          "Example: Write concise, customer-safe operational updates.",
+        isSensitive: true,
+      },
+      {
+        type: ComponentInputType.Markdown,
+        name: "Prompt",
+        description:
+          "The task for the model. You can insert values from variables or earlier workflow components.",
+        required: true,
+        id: "prompt",
+        placeholder: "Summarize the following incident for our support team.",
+        isSensitive: true,
+      },
+      {
+        type: ComponentInputType.JSON,
+        name: "Context",
+        description:
+          "Optional JSON data appended after an explicit marker as untrusted workflow context.",
+        required: false,
+        id: "context",
+        placeholder: '{ "incident": "{{...}}" }',
+        isSensitive: true,
+      },
+      {
+        type: ComponentInputType.Decimal,
+        name: "Temperature",
+        description:
+          "Controls variation from 0 to 1. Defaults to 0.2 for predictable workflow output.",
+        required: false,
+        id: "temperature",
+        placeholder: "0.2",
+        isAdvanced: true,
+      },
+      {
+        type: ComponentInputType.Number,
+        name: "Maximum Output Tokens",
+        description:
+          "Maximum tokens the model may generate, from 1 to 4096. Defaults to 1024.",
+        required: false,
+        id: "max-output-tokens",
+        placeholder: "1024",
+        isAdvanced: true,
+      },
+    ],
+    returnValues: [
+      {
+        type: ComponentInputType.LongText,
+        name: "Response",
+        description: "Text generated by the configured AI model.",
+        required: false,
+        id: "response",
+        isSensitive: true,
+      },
+      {
+        type: ComponentInputType.Text,
+        name: "Provider",
+        description: "Name of the LLM provider used for the request.",
+        required: false,
+        id: "provider",
+      },
+      {
+        type: ComponentInputType.Text,
+        name: "Model",
+        description: "Configured model name used for the request.",
+        required: false,
+        id: "model",
+      },
+      {
+        type: ComponentInputType.Number,
+        name: "Total Tokens",
+        description: "Total input and output tokens reported by the provider.",
+        required: false,
+        id: "total-tokens",
+      },
+      {
+        type: ComponentInputType.Number,
+        name: "Completion Tokens",
+        description: "Output tokens reported by the provider.",
+        required: false,
+        id: "completion-tokens",
+      },
+      {
+        type: ComponentInputType.Text,
+        name: "LLM Log ID",
+        description: "ID of the metered LLM log for this request.",
+        required: false,
+        id: "llm-log-id",
+      },
+      {
+        type: ComponentInputType.Text,
+        name: "Error",
+        description: "Error message when the request follows the Error port.",
+        required: false,
+        id: "error",
+      },
+    ],
+    inPorts: [
+      {
+        title: "In",
+        description:
+          "Connect the component that should run before AI generation.",
+        id: "in",
+      },
+    ],
+    outPorts: [
+      {
+        title: "Success",
+        description: "Runs when the model returns a response successfully.",
+        id: "success",
+      },
+      {
+        title: "Error",
+        description:
+          "Runs when validation, access, provider, budget, billing, or timeout checks fail.",
+        id: "error",
+      },
+    ],
+  },
+];
+
+export default components;

package/Types/Workflow/Components.ts

@@ -1,6 +1,7 @@
 import IconProp from "../Icon/IconProp";
 import ComponentMetadata, { ComponentCategory } from "./Component";
 import APIComponents from "./Components/API";
+import AIComponents from "./Components/AI";
 import ConditionComponents from "./Components/Condition";
 import DiscordComponents from "./Components/Discord";
 import EmailComponents from "./Components/Email";
@@ -17,6 +18,7 @@ import WebhookComponents from "./Components/Webhook";
 import WorkflowComponents from "./Components/Workflow";
 
 const components: Array<ComponentMetadata> = [
+  ...AIComponents,
   ...LogComponents,
   ...APIComponents,
   ...ScheduleComponents,
@@ -37,6 +39,12 @@ const components: Array<ComponentMetadata> = [
 export default components;
 
 export const Categories: Array<ComponentCategory> = [
+  {
+    name: "AI",
+    description:
+      "Generate content with the LLM provider configured for this project.",
+    icon: IconProp.Sparkles,
+  },
   {
     name: "Webhook",
     description: "Integrate any apps into the workflow with webhooks.",

package/UI/Components/AI/GenerateFromAIModal.tsx

@@ -98,7 +98,7 @@ const GenerateFromAIModal: FunctionComponent<GenerateFromAIModalProps> = (
       title={props.title}
       description={
         props.description ||
-        "Generate content using AI based on the available data."
+        "AI will generate content based on the available data."
       }
       onClose={() => {
         if (!isGenerating) {

package/UI/Components/Markdown.tsx/MarkdownViewer.tsx

@@ -648,6 +648,17 @@ const MarkdownViewer: FunctionComponent<ComponentProps> = (
 
             // Handle mermaid diagrams
             if (match && match[1] === "mermaid") {
+              /*
+               * Never render mermaid for untrusted content: a diagram can
+               * carry an image node whose src the renderer fetches on paint
+               * (a zero-click exfil channel). Show the source as a plain,
+               * non-executing code block instead.
+               */
+              if (safeMode) {
+                return (
+                  <CodeBlock language="mermaid" content={content} rest={rest} />
+                );
+              }
               return <MermaidDiagram chart={content} />;
             }
 

package/UI/Components/MoreMenu/MoreMenu.tsx

@@ -201,7 +201,7 @@ const MoreMenu: React.ForwardRefExoticComponent<
           <div
             ref={ref}
             id={menuId}
-            className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-lg bg-white shadow-xl ring-1 ring-gray-200 focus:outline-none py-1"
+            className="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-lg bg-white shadow-xl ring-1 ring-gray-200 focus:outline-none py-1"
             role="menu"
             aria-orientation="vertical"
             aria-labelledby={buttonId}

package/UI/Components/Table/Table.tsx

@@ -1,8 +1,11 @@
 import { GetReactElementFunction } from "../../Types/FunctionTypes";
 import useTranslateValue from "../../Utils/Translation";
+import TableColumnsToCsv from "../../Utils/TableColumnsToCsv";
 import ActionButtonSchema from "../ActionButton/ActionButtonSchema";
+import { ButtonStyleType } from "../Button/Button";
 import BulkUpdateForm, {
   BulkActionButtonSchema,
+  BulkActionOnClickProps,
 } from "../BulkUpdate/BulkUpdateForm";
 import ComponentLoader from "../ComponentLoader/ComponentLoader";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
@@ -15,6 +18,7 @@ import TableHeader from "./TableHeader";
 import Columns from "./Types/Columns";
 import SortOrder from "../../../Types/BaseDatabase/SortOrder";
 import GenericObject from "../../../Types/GenericObject";
+import IconProp from "../../../Types/Icon/IconProp";
 import React, { ReactElement, useEffect, useState } from "react";
 import { DragDropContext, DropResult } from "react-beautiful-dnd";
 
@@ -81,6 +85,12 @@ export interface ComponentProps<T extends GenericObject> {
   onBulkActionEnd?: (() => void) | undefined;
   onBulkActionStart?: (() => void) | undefined;
   bulkItemToString?: ((item: T) => string) | undefined;
+  /*
+   * Every table that exposes bulk actions also gets an "Export CSV" action for
+   * the selected rows by default. Set this to true to hide it (for example when
+   * the rows contain data that should not be downloaded as a file).
+   */
+  disableBulkCsvExport?: boolean | undefined;
 }
 
 type TableFunction = <T extends GenericObject>(
@@ -100,6 +110,32 @@ const Table: TableFunction = <T extends GenericObject>(
     props.bulkActions.buttons &&
     props.bulkActions.buttons.length > 0;
 
+  /*
+   * "Export CSV" is offered on every table that already exposes bulk actions.
+   * It exports the currently selected rows using the table's own visible
+   * columns (headers + formatted values) - "export what you see" - and runs
+   * entirely client-side from the already-loaded row data, so no extra
+   * requests or permissions are needed beyond the ability to view the rows.
+   */
+  const csvExportBulkAction: BulkActionButtonSchema<T> = {
+    title: "Export CSV",
+    icon: IconProp.Download,
+    buttonStyleType: ButtonStyleType.NORMAL,
+    onClick: (onClickProps: BulkActionOnClickProps<T>): Promise<void> => {
+      TableColumnsToCsv.exportItemsToCsv({
+        items: onClickProps.items,
+        columns: props.columns,
+        label: translatedPluralLabel,
+      });
+      return Promise.resolve();
+    },
+  };
+
+  const bulkActionButtons: Array<BulkActionButtonSchema<T>> =
+    isBulkActionsEnabled && !props.disableBulkCsvExport
+      ? [...props.bulkActions!.buttons, csvExportBulkAction]
+      : props.bulkActions?.buttons || [];
+
   const [isAllItemsSelected, setIsAllItemsSelected] = useState<boolean>(false);
   const [bulkSelectedItems, setBulkSelectedItems] = useState<Array<T>>([]);
   const [isMobile, setIsMobile] = useState<boolean>(false);
@@ -258,9 +294,9 @@ const Table: TableFunction = <T extends GenericObject>(
         filterData={props.filterData}
         onAdvancedFiltersToggle={props.onAdvancedFiltersToggle}
       />
-      {props.bulkActions?.buttons && (
+      {bulkActionButtons.length > 0 && (
         <BulkUpdateForm
-          buttons={props.bulkActions.buttons}
+          buttons={bulkActionButtons}
           onClearSelectionClick={() => {
             props.onBulkClearAllItems?.();
             setIsAllItemsSelected(false);

package/UI/Utils/TableColumnsToCsv.ts

@@ -0,0 +1,385 @@
+import Column from "../Components/Table/Types/Column";
+import Columns from "../Components/Table/Types/Columns";
+import FieldType from "../Components/Types/FieldType";
+import GenericObject from "../../Types/GenericObject";
+import OneUptimeDate from "../../Types/Date";
+
+/*
+ * Converts the rows currently rendered in a table (or a bulk-selected subset of
+ * them) into a CSV file using the table's own column definitions. The goal is
+ * to export "what you see": one column per visible table column, formatted the
+ * same way the table renders it (dates, booleans, currency, etc).
+ *
+ * The value extraction is deliberately model-agnostic so the same utility works
+ * for:
+ *  - DatabaseBaseModel instances (column values are stored as direct
+ *    properties, so falsy values like false / 0 / "" are preserved).
+ *  - AnalyticsBaseModel instances (column values live in an internal map that
+ *    is only reachable through getColumnValue()).
+ *  - Plain objects used by LocalTable.
+ */
+export default class TableColumnsToCsv {
+  /*
+   * Escapes a single CSV field per RFC 4180 - wraps the value in double quotes
+   * and doubles any embedded quotes when it contains a comma, quote, or
+   * newline.
+   */
+  public static escapeCsvValue(value: string): string {
+    const needsQuoting: boolean =
+      value.includes(",") ||
+      value.includes('"') ||
+      value.includes("\n") ||
+      value.includes("\r");
+
+    if (needsQuoting) {
+      return `"${value.replace(/"/g, '""')}"`;
+    }
+
+    return value;
+  }
+
+  /*
+   * Neutralizes spreadsheet formula injection. A field that begins with "=",
+   * "+", "@", or a leading control character can be executed as a formula when
+   * the CSV is opened in Excel / Google Sheets. Prefixing such a value with a
+   * single quote makes the spreadsheet treat it as literal text. A leading "-"
+   * is intentionally left untouched so negative numbers are not corrupted.
+   */
+  public static sanitizeForCsvInjection(value: string): string {
+    if (value.length === 0) {
+      return value;
+    }
+
+    const firstChar: string = value.charAt(0);
+
+    if (
+      firstChar === "=" ||
+      firstChar === "+" ||
+      firstChar === "@" ||
+      firstChar === "\t" ||
+      firstChar === "\r"
+    ) {
+      return `'${value}`;
+    }
+
+    return value;
+  }
+
+  /*
+   * Reads a nested value from an item using dot-notation, e.g. "label.name".
+   * Each segment is resolved via direct property access first (which works for
+   * database models and plain objects and keeps falsy values) and falls back to
+   * getColumnValue() for analytics models that keep values in an internal map.
+   */
+  public static getRawValueByPath<T extends GenericObject>(
+    item: T,
+    path: string,
+  ): unknown {
+    const segments: Array<string> = path.split(".");
+    let current: unknown = item;
+
+    for (const segment of segments) {
+      current = this.getSegmentValue(current, segment);
+
+      if (current === null || current === undefined) {
+        return current;
+      }
+    }
+
+    return current;
+  }
+
+  private static getSegmentValue(obj: unknown, segment: string): unknown {
+    if (obj === null || obj === undefined) {
+      return undefined;
+    }
+
+    const direct: unknown = (obj as Record<string, unknown>)[segment];
+
+    if (direct !== undefined) {
+      return direct;
+    }
+
+    const getColumnValue: ((name: string) => unknown) | undefined = (
+      obj as { getColumnValue?: (name: string) => unknown }
+    ).getColumnValue;
+
+    if (typeof getColumnValue === "function") {
+      try {
+        return getColumnValue.call(obj, segment);
+      } catch {
+        return undefined;
+      }
+    }
+
+    return undefined;
+  }
+
+  /*
+   * Formats a raw value into a display string based on the column's field type,
+   * mirroring how the table renders the same value. Arrays are formatted
+   * element-by-element and joined so multi-value cells stay in a single CSV
+   * field.
+   */
+  public static formatValueForCsv(rawValue: unknown, type: FieldType): string {
+    if (rawValue === null || rawValue === undefined) {
+      return "";
+    }
+
+    if (Array.isArray(rawValue)) {
+      return rawValue
+        .map((element: unknown) => {
+          return this.formatScalarValue(element, type);
+        })
+        .filter((formatted: string) => {
+          return formatted.length > 0;
+        })
+        .join("; ");
+    }
+
+    return this.formatScalarValue(rawValue, type);
+  }
+
+  private static formatScalarValue(rawValue: unknown, type: FieldType): string {
+    if (rawValue === null || rawValue === undefined) {
+      return "";
+    }
+
+    switch (type) {
+      case FieldType.Date:
+        return this.formatDate(rawValue, true);
+      case FieldType.DateTime:
+        return this.formatDate(rawValue, false);
+      case FieldType.Boolean:
+        return rawValue ? "Yes" : "No";
+      case FieldType.USDCents: {
+        const num: number = Number(rawValue);
+        if (Number.isNaN(num)) {
+          return "";
+        }
+        return `${num / 100} USD`;
+      }
+      case FieldType.Percent:
+        return `${this.stringifyValue(rawValue)}%`;
+      default:
+        return this.stringifyValue(rawValue);
+    }
+  }
+
+  private static formatDate(rawValue: unknown, onlyShowDate: boolean): string {
+    if (rawValue instanceof Date) {
+      return OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+        rawValue,
+        onlyShowDate,
+      );
+    }
+
+    if (typeof rawValue === "string" && rawValue.length > 0) {
+      return OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+        rawValue,
+        onlyShowDate,
+      );
+    }
+
+    return "";
+  }
+
+  private static stringifyValue(rawValue: unknown): string {
+    if (rawValue === null || rawValue === undefined) {
+      return "";
+    }
+
+    const valueType: string = typeof rawValue;
+
+    if (valueType === "string") {
+      return rawValue as string;
+    }
+
+    if (
+      valueType === "number" ||
+      valueType === "boolean" ||
+      valueType === "bigint"
+    ) {
+      return String(rawValue);
+    }
+
+    if (valueType === "object") {
+      const customString: string | null = this.getCustomToString(rawValue);
+
+      if (customString !== null) {
+        return customString;
+      }
+
+      const obj: Record<string, unknown> = rawValue as Record<string, unknown>;
+
+      for (const displayKey of ["name", "title", "value"]) {
+        const displayValue: unknown = obj[displayKey];
+
+        if (typeof displayValue === "string" && displayValue.length > 0) {
+          return displayValue;
+        }
+
+        if (displayValue !== null && typeof displayValue === "object") {
+          const nested: string | null = this.getCustomToString(displayValue);
+
+          if (nested !== null && nested.length > 0) {
+            return nested;
+          }
+        }
+      }
+
+      try {
+        return JSON.stringify(rawValue);
+      } catch {
+        return "";
+      }
+    }
+
+    return String(rawValue);
+  }
+
+  /*
+   * Returns the result of a value's own toString() when it overrides the
+   * default Object.prototype.toString (as ObjectID, Color, Name, Email, etc do)
+   * and null otherwise so the caller can fall back to other strategies.
+   */
+  private static getCustomToString(value: unknown): string | null {
+    const toStringFn: (() => string) | undefined = (
+      value as { toString?: () => string }
+    )?.toString;
+
+    if (
+      typeof toStringFn === "function" &&
+      toStringFn !== Object.prototype.toString
+    ) {
+      const asString: string = toStringFn.call(value);
+
+      if (typeof asString === "string" && asString !== "[object Object]") {
+        return asString;
+      }
+    }
+
+    return null;
+  }
+
+  /*
+   * Columns that can be exported: everything except the Actions column (which
+   * only holds buttons) and columns without a data key (purely presentational).
+   */
+  public static getExportableColumns<T extends GenericObject>(
+    columns: Columns<T>,
+  ): Columns<T> {
+    return (columns || []).filter((column: Column<T>) => {
+      if (column.type === FieldType.Actions) {
+        return false;
+      }
+
+      if (column.key === null || column.key === undefined) {
+        return false;
+      }
+
+      return true;
+    });
+  }
+
+  public static getCellValue<T extends GenericObject>(
+    item: T,
+    column: Column<T>,
+  ): string {
+    if (column.key === null || column.key === undefined) {
+      return "";
+    }
+
+    const rawValue: unknown = this.getRawValueByPath(item, String(column.key));
+
+    return this.formatValueForCsv(rawValue, column.type);
+  }
+
+  /*
+   * Builds the full CSV text (header row + one row per item). Fields are
+   * sanitized against formula injection and escaped per RFC 4180, and rows are
+   * separated with CRLF.
+   */
+  public static convertToCsv<T extends GenericObject>(data: {
+    items: Array<T>;
+    columns: Columns<T>;
+  }): string {
+    const exportColumns: Columns<T> = this.getExportableColumns(data.columns);
+
+    const encodeField: (value: string) => string = (value: string): string => {
+      return this.escapeCsvValue(this.sanitizeForCsvInjection(value));
+    };
+
+    const headerRow: string = exportColumns
+      .map((column: Column<T>) => {
+        return encodeField(column.title || "");
+      })
+      .join(",");
+
+    const rows: Array<string> = (data.items || []).map((item: T) => {
+      return exportColumns
+        .map((column: Column<T>) => {
+          return encodeField(this.getCellValue(item, column));
+        })
+        .join(",");
+    });
+
+    return [headerRow, ...rows].join("\r\n");
+  }
+
+  /*
+   * Builds a filesystem-safe, timestamped file name from a human label, e.g.
+   * "Monitors" -> "monitors-export-2024-01-31T10-30-00.csv".
+   */
+  public static getExportFilename(label: string): string {
+    const safeLabel: string =
+      (label || "table")
+        .replace(/[^a-zA-Z0-9-_]+/g, "-")
+        .replace(/^-+|-+$/g, "")
+        .toLowerCase() || "table";
+
+    const timestamp: string = new Date()
+      .toISOString()
+      .replace(/[:.]/g, "-")
+      .slice(0, 19);
+
+    return `${safeLabel}-export-${timestamp}.csv`;
+  }
+
+  public static downloadCsv(data: { csv: string; filename: string }): void {
+    /*
+     * A UTF-8 byte order mark makes Excel open the file with the correct
+     * encoding so non-ASCII characters are not mangled.
+     */
+    const byteOrderMark: string = String.fromCharCode(0xfeff);
+
+    const blob: Blob = new Blob([`${byteOrderMark}${data.csv}`], {
+      type: "text/csv;charset=utf-8;",
+    });
+
+    const url: string = window.URL.createObjectURL(blob);
+    const anchor: HTMLAnchorElement = document.createElement("a");
+    anchor.href = url;
+    anchor.download = data.filename;
+    document.body.appendChild(anchor);
+    anchor.click();
+    document.body.removeChild(anchor);
+    window.URL.revokeObjectURL(url);
+  }
+
+  public static exportItemsToCsv<T extends GenericObject>(data: {
+    items: Array<T>;
+    columns: Columns<T>;
+    label: string;
+  }): void {
+    const csv: string = this.convertToCsv({
+      items: data.items,
+      columns: data.columns,
+    });
+
+    this.downloadCsv({
+      csv: csv,
+      filename: this.getExportFilename(data.label),
+    });
+  }
+}

package/Utils/Monitor/MonitorMetricType.ts

@@ -222,6 +222,7 @@ class MonitorMetricTypeUtil {
       monitorType === MonitorType.DNS ||
       monitorType === MonitorType.DNSSEC ||
       monitorType === MonitorType.Domain ||
+      monitorType === MonitorType.SQLQuery ||
       monitorType === MonitorType.ExternalStatusPage
     ) {
       return [MonitorMetricType.IsOnline, MonitorMetricType.ResponseTime];