@oneuptime/common 10.0.71 → 10.0.72

package/UI/Components/MonitorTemplateVariables/TemplateVariablesCatalog.ts

@@ -0,0 +1,453 @@
+import MonitorType from "../../../Types/Monitor/MonitorType";
+
+export interface TemplateVariable {
+  /** The placeholder users type, e.g. "monitorName" → renders as {{monitorName}}. */
+  key: string;
+  /** One-line explanation of what the variable resolves to at render time. */
+  description: string;
+  /** Example rendered value, shown in the "Example" column so users can picture the output. */
+  example?: string | undefined;
+}
+
+export interface TemplateVariableGroup {
+  title: string;
+  description?: string | undefined;
+  variables: Array<TemplateVariable>;
+}
+
+/**
+ * Single source of truth for the variables available to incident/alert
+ * template strings (`{{…}}`), mirroring what
+ * `MonitorTemplateUtil.buildTemplateStorageMap` exposes on the server.
+ *
+ * Grouped by monitor type so the template-variables modal can render a
+ * categorized, skimmable list that matches the actual monitor the user
+ * is editing — users don't see SSL fields while configuring a Metric
+ * monitor, and vice versa.
+ *
+ * Keep in sync with `Common/Server/Utils/Monitor/MonitorTemplateUtil.ts`.
+ */
+export default class TemplateVariablesCatalog {
+  public static getVariables(input: {
+    monitorType: MonitorType;
+    /**
+     * Attribute keys the user has configured on the metric query
+     * (e.g. ["host.name", "region"]). For metric/kubernetes/docker
+     * monitors, these become per-series template variables — one
+     * incident fires per unique value combination, and each incident
+     * can reference the label values via `{{host.name}}` etc.
+     */
+    seriesAttributeKeys?: Array<string> | undefined;
+  }): Array<TemplateVariableGroup> {
+    const groups: Array<TemplateVariableGroup> = [];
+
+    groups.push(TemplateVariablesCatalog.monitorIdentityGroup());
+
+    const perTypeGroup: TemplateVariableGroup | null =
+      TemplateVariablesCatalog.perTypeGroup(input.monitorType);
+    if (perTypeGroup) {
+      groups.push(perTypeGroup);
+    }
+
+    if (
+      input.monitorType === MonitorType.Metrics ||
+      input.monitorType === MonitorType.Kubernetes ||
+      input.monitorType === MonitorType.Docker
+    ) {
+      groups.push(
+        TemplateVariablesCatalog.seriesLabelsGroup(input.seriesAttributeKeys),
+      );
+    }
+
+    return groups;
+  }
+
+  private static monitorIdentityGroup(): TemplateVariableGroup {
+    return {
+      title: "Monitor",
+      description:
+        "Identity of the monitor that triggered the incident or alert.",
+      variables: [
+        {
+          key: "monitorName",
+          description: "Human-readable name of the monitor.",
+          example: "Production API",
+        },
+        {
+          key: "monitorId",
+          description: "UUID of the monitor.",
+          example: "a0f78958-da0a-4775-9fd9-c9fc63d3456f",
+        },
+      ],
+    };
+  }
+
+  private static seriesLabelsGroup(
+    attributeKeys: Array<string> | undefined,
+  ): TemplateVariableGroup {
+    const keys: Array<string> = attributeKeys || [];
+
+    if (keys.length === 0) {
+      return {
+        title: "Series Labels (per-host / per-container)",
+        description:
+          "When you configure 'Group By' attributes on the metric query, this monitor fires one incident per unique group (e.g. one per host). Each group's label values become template variables here. Add attributes under 'Group By' to see variables.",
+        variables: [],
+      };
+    }
+
+    return {
+      title: "Series Labels (per-host / per-container)",
+      description:
+        "One incident fires per unique combination of these values. Reference the triggering series' values in titles, descriptions, and remediation notes.",
+      variables: keys.map((key: string): TemplateVariable => {
+        return {
+          key,
+          description: `Value of \`${key}\` for the series that breached the threshold.`,
+          example:
+            key === "host.name"
+              ? "prod-db-01"
+              : key === "resource.k8s.container.name"
+                ? "mariadb"
+                : undefined,
+        };
+      }),
+    };
+  }
+
+  private static perTypeGroup(
+    monitorType: MonitorType,
+  ): TemplateVariableGroup | null {
+    switch (monitorType) {
+      case MonitorType.API:
+      case MonitorType.Website:
+        return {
+          title: "Response",
+          description:
+            "Details of the HTTP response from the monitored endpoint.",
+          variables: [
+            {
+              key: "isOnline",
+              description: "True if the endpoint responded successfully.",
+              example: "true",
+            },
+            {
+              key: "responseStatusCode",
+              description: "HTTP status code returned.",
+              example: "503",
+            },
+            {
+              key: "responseTimeInMs",
+              description: "Round-trip response time in milliseconds.",
+              example: "812",
+            },
+            {
+              key: "responseBody",
+              description:
+                "Parsed response body. Use dot paths like `{{responseBody.data.status}}` for JSON responses.",
+              example: '{"status":"degraded"}',
+            },
+            {
+              key: "responseHeaders",
+              description:
+                "Response headers. Use `{{responseHeaders.content-type}}` for a specific header.",
+            },
+          ],
+        };
+
+      case MonitorType.IncomingRequest:
+        return {
+          title: "Incoming Request",
+          variables: [
+            {
+              key: "requestMethod",
+              description: "HTTP method of the incoming request.",
+              example: "POST",
+            },
+            {
+              key: "requestBody",
+              description:
+                "Parsed request body. Use dot paths like `{{requestBody.event.type}}`.",
+            },
+            {
+              key: "requestHeaders",
+              description: "Request headers.",
+            },
+            {
+              key: "incomingRequestReceivedAt",
+              description: "Timestamp the request was received.",
+            },
+          ],
+        };
+
+      case MonitorType.Ping:
+      case MonitorType.IP:
+      case MonitorType.Port:
+        return {
+          title: "Connectivity",
+          variables: [
+            {
+              key: "isOnline",
+              description: "True if the target responded.",
+              example: "false",
+            },
+            {
+              key: "responseTimeInMs",
+              description: "Response time in milliseconds.",
+              example: "42",
+            },
+            {
+              key: "isTimeout",
+              description: "True if the check timed out.",
+            },
+            {
+              key: "failureCause",
+              description: "Reason the check failed, if any.",
+              example: "Connection refused",
+            },
+          ],
+        };
+
+      case MonitorType.SSLCertificate:
+        return {
+          title: "SSL Certificate",
+          variables: [
+            {
+              key: "commonName",
+              description: "Common name (CN) of the certificate.",
+              example: "*.example.com",
+            },
+            { key: "organization", description: "Issuing organization." },
+            { key: "organizationalUnit", description: "Organizational unit." },
+            { key: "locality", description: "Locality (city)." },
+            { key: "state", description: "State / region." },
+            { key: "country", description: "Country code." },
+            {
+              key: "expiresAt",
+              description: "Certificate expiration date.",
+              example: "2026-07-14T00:00:00.000Z",
+            },
+            { key: "createdAt", description: "Issue date." },
+            {
+              key: "isSelfSigned",
+              description: "True if the certificate is self-signed.",
+            },
+            { key: "serialNumber", description: "Serial number." },
+            { key: "fingerprint", description: "SHA-1 fingerprint." },
+            { key: "fingerprint256", description: "SHA-256 fingerprint." },
+            {
+              key: "isOnline",
+              description: "True if the SSL endpoint responded.",
+            },
+            {
+              key: "failureCause",
+              description: "Reason the SSL check failed, if any.",
+            },
+          ],
+        };
+
+      case MonitorType.Server:
+        return {
+          title: "Server Metrics",
+          description: "Basic host metrics reported by the OneUptime agent.",
+          variables: [
+            {
+              key: "hostname",
+              description: "Host name reported by the agent.",
+              example: "web-03.prod",
+            },
+            {
+              key: "cpuUsagePercent",
+              description: "Current CPU usage, 0-100.",
+              example: "87",
+            },
+            { key: "cpuCores", description: "Number of CPU cores." },
+            {
+              key: "memoryUsagePercent",
+              description: "Current memory usage, 0-100.",
+              example: "74",
+            },
+            {
+              key: "memoryFreePercent",
+              description: "Free memory percentage.",
+            },
+            {
+              key: "memoryTotalBytes",
+              description: "Total memory on the host.",
+            },
+            {
+              key: "diskMetrics",
+              description:
+                "Array of disks with {diskPath, usagePercent, freePercent, totalBytes}. Iterate with Handlebars or index: `{{diskMetrics.0.usagePercent}}`.",
+            },
+            {
+              key: "processes",
+              description:
+                "Array of {pid, name, command} for tracked processes.",
+            },
+            { key: "requestReceivedAt", description: "Heartbeat timestamp." },
+            {
+              key: "failureCause",
+              description: "Failure reason if the heartbeat failed.",
+            },
+          ],
+        };
+
+      case MonitorType.CustomJavaScriptCode:
+        return {
+          title: "Custom Code",
+          variables: [
+            {
+              key: "result",
+              description:
+                "Return value of your script. Dot-accessible if it's an object: `{{result.status}}`.",
+            },
+            {
+              key: "executionTimeInMs",
+              description: "Script runtime in milliseconds.",
+            },
+            {
+              key: "scriptError",
+              description: "Runtime error message, if any.",
+            },
+            {
+              key: "logMessages",
+              description: "Array of `console.log` output from the script.",
+            },
+            {
+              key: "failureCause",
+              description: "High-level failure reason.",
+            },
+          ],
+        };
+
+      case MonitorType.SyntheticMonitor:
+        return {
+          title: "Synthetic Monitor",
+          description:
+            "One entry per browser × screen-size run. Use `{{syntheticResponses.0.scriptError}}` or a `{{#each syntheticResponses}}` loop.",
+          variables: [
+            {
+              key: "syntheticResponses",
+              description:
+                "Array of {result, scriptError, executionTimeInMs, logMessages, screenshots, browserType, screenSizeType} — one per run.",
+            },
+            {
+              key: "failureCause",
+              description: "Overall failure reason if all runs failed.",
+            },
+          ],
+        };
+
+      case MonitorType.SNMP:
+        return {
+          title: "SNMP",
+          variables: [
+            {
+              key: "isOnline",
+              description: "True if the SNMP agent responded.",
+            },
+            {
+              key: "responseTimeInMs",
+              description: "Response time in milliseconds.",
+            },
+            {
+              key: "isTimeout",
+              description: "True if the SNMP request timed out.",
+            },
+            {
+              key: "failureCause",
+              description: "Failure reason.",
+            },
+            {
+              key: "oidResponses",
+              description:
+                "Array of {oid, name, value, type}. Each named OID is also exposed directly — e.g. a `.sysUpTime` OID resolves as `{{sysUpTime}}`.",
+            },
+          ],
+        };
+
+      case MonitorType.DNS:
+        return {
+          title: "DNS",
+          variables: [
+            { key: "isOnline", description: "True if the DNS query resolved." },
+            { key: "responseTimeInMs", description: "Query time." },
+            { key: "isTimeout", description: "True if the query timed out." },
+            { key: "isDnssecValid", description: "DNSSEC validation result." },
+            { key: "failureCause", description: "Failure reason." },
+            {
+              key: "records",
+              description: "Array of {type, value, ttl}.",
+            },
+            {
+              key: "recordValues",
+              description: "Flat array of record values for quick display.",
+            },
+          ],
+        };
+
+      case MonitorType.Domain:
+        return {
+          title: "Domain",
+          variables: [
+            { key: "isOnline", description: "True if WHOIS lookup succeeded." },
+            { key: "domainName", description: "Domain queried." },
+            { key: "registrar", description: "Registrar name." },
+            { key: "createdDate", description: "Domain registration date." },
+            { key: "updatedDate", description: "Last WHOIS update." },
+            { key: "expiresDate", description: "Expiration date." },
+            { key: "nameServers", description: "Array of nameservers." },
+            { key: "domainStatus", description: "EPP status codes." },
+            { key: "dnssec", description: "DNSSEC status." },
+            { key: "responseTimeInMs", description: "Lookup time." },
+            { key: "failureCause", description: "Failure reason." },
+          ],
+        };
+
+      case MonitorType.ExternalStatusPage:
+        return {
+          title: "External Status Page",
+          variables: [
+            {
+              key: "overallStatus",
+              description: "Overall status reported by the status page.",
+              example: "major_outage",
+            },
+            {
+              key: "activeIncidentCount",
+              description: "Number of active incidents on the status page.",
+            },
+            {
+              key: "componentStatuses",
+              description: "Array of {name, status, description}.",
+            },
+            {
+              key: "isOnline",
+              description: "True if the status page responded.",
+            },
+            { key: "responseTimeInMs", description: "Fetch time." },
+            { key: "failureCause", description: "Failure reason." },
+          ],
+        };
+
+      case MonitorType.Metrics:
+      case MonitorType.Kubernetes:
+      case MonitorType.Docker:
+        return {
+          title: "Metric",
+          variables: [
+            {
+              key: "metricName",
+              description:
+                "The OTel metric name the monitor is watching (e.g. container.cpu.time).",
+              example: "container.cpu.time",
+            },
+          ],
+        };
+
+      default:
+        return null;
+    }
+  }
+}

package/UI/Components/MonitorTemplateVariables/TemplateVariablesModal.tsx

@@ -0,0 +1,229 @@
+import Modal, { ModalWidth } from "../Modal/Modal";
+import Icon, { SizeProp } from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
+import MonitorType from "../../../Types/Monitor/MonitorType";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useMemo,
+  useState,
+} from "react";
+import TemplateVariablesCatalog, {
+  TemplateVariable,
+  TemplateVariableGroup,
+} from "./TemplateVariablesCatalog";
+
+export interface ComponentProps {
+  monitorType: MonitorType;
+  /**
+   * Group-by attribute keys from the metric query, if any. Used to
+   * populate the "Series Labels" section with per-host / per-container
+   * variables like `{{host.name}}`.
+   */
+  seriesAttributeKeys?: Array<string> | undefined;
+  onClose: () => void;
+}
+
+/**
+ * Modal that surfaces the dynamic template variables available to the
+ * current monitor's incident/alert titles, descriptions, and
+ * remediation notes. Organized by monitor type so a metric monitor
+ * doesn't show SSL variables (and vice versa), with a live search
+ * that scales when a user groups by many attributes.
+ *
+ * Click a variable to copy `{{var}}` to the clipboard; the chip flips
+ * to a "Copied" state briefly so the user gets feedback without a
+ * toast.
+ */
+const TemplateVariablesModal: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [search, setSearch] = useState<string>("");
+  const [copiedKey, setCopiedKey] = useState<string | null>(null);
+
+  const groups: Array<TemplateVariableGroup> = useMemo(() => {
+    return TemplateVariablesCatalog.getVariables({
+      monitorType: props.monitorType,
+      seriesAttributeKeys: props.seriesAttributeKeys,
+    });
+  }, [props.monitorType, props.seriesAttributeKeys]);
+
+  const normalized: string = search.trim().toLowerCase();
+
+  const filteredGroups: Array<TemplateVariableGroup> = useMemo(() => {
+    if (!normalized) {
+      return groups;
+    }
+    return groups
+      .map((group: TemplateVariableGroup): TemplateVariableGroup => {
+        return {
+          ...group,
+          variables: group.variables.filter((v: TemplateVariable) => {
+            return (
+              v.key.toLowerCase().includes(normalized) ||
+              v.description.toLowerCase().includes(normalized)
+            );
+          }),
+        };
+      })
+      .filter((group: TemplateVariableGroup) => {
+        return group.variables.length > 0;
+      });
+  }, [groups, normalized]);
+
+  const copyToClipboard: (key: string) => void = (key: string): void => {
+    const token: string = `{{${key}}}`;
+    if (
+      typeof navigator !== "undefined" &&
+      navigator.clipboard &&
+      typeof navigator.clipboard.writeText === "function"
+    ) {
+      void navigator.clipboard.writeText(token);
+    }
+    setCopiedKey(key);
+    setTimeout(() => {
+      setCopiedKey((current: string | null): string | null => {
+        return current === key ? null : current;
+      });
+    }, 1500);
+  };
+
+  const renderVariableRow: (v: TemplateVariable) => ReactElement = (
+    v: TemplateVariable,
+  ): ReactElement => {
+    const isCopied: boolean = copiedKey === v.key;
+    return (
+      <button
+        key={v.key}
+        type="button"
+        onClick={(): void => {
+          copyToClipboard(v.key);
+        }}
+        className="group w-full rounded-md border border-gray-200 bg-white px-3 py-2.5 text-left transition hover:border-indigo-300 hover:bg-indigo-50/40"
+        title={`Click to copy {{${v.key}}}`}
+      >
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0 flex-1">
+            <code className="font-mono text-sm text-indigo-700 break-all">
+              {`{{${v.key}}}`}
+            </code>
+            <p className="mt-1 text-xs leading-snug text-gray-600">
+              {v.description}
+            </p>
+            {v.example ? (
+              <p className="mt-1 text-xs text-gray-400">
+                Example:{" "}
+                <span className="font-mono text-gray-500">{v.example}</span>
+              </p>
+            ) : null}
+          </div>
+          <span
+            className={`shrink-0 inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide transition ${
+              isCopied
+                ? "bg-emerald-100 text-emerald-700"
+                : "bg-gray-100 text-gray-500 group-hover:bg-indigo-100 group-hover:text-indigo-700"
+            }`}
+          >
+            {isCopied ? "Copied" : "Copy"}
+          </span>
+        </div>
+      </button>
+    );
+  };
+
+  const renderGroup: (group: TemplateVariableGroup) => ReactElement = (
+    group: TemplateVariableGroup,
+  ): ReactElement => {
+    return (
+      <div key={group.title} className="space-y-2">
+        <div className="border-b border-gray-200 pb-1.5">
+          <h3 className="text-sm font-semibold text-gray-900">{group.title}</h3>
+          {group.description ? (
+            <p className="mt-0.5 text-xs text-gray-500">{group.description}</p>
+          ) : null}
+        </div>
+        {group.variables.length > 0 ? (
+          <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+            {group.variables.map(renderVariableRow)}
+          </div>
+        ) : (
+          <p className="text-xs italic text-gray-400">
+            No variables in this section yet.
+          </p>
+        )}
+      </div>
+    );
+  };
+
+  const totalVariables: number = groups.reduce(
+    (sum: number, group: TemplateVariableGroup) => {
+      return sum + group.variables.length;
+    },
+    0,
+  );
+
+  return (
+    <Modal
+      title="Dynamic Template Variables"
+      description={`Use these variables in incident and alert titles, descriptions, and remediation notes. Click any variable to copy it. ${totalVariables} variables available for this monitor type.`}
+      onClose={props.onClose}
+      onSubmit={props.onClose}
+      submitButtonText="Done"
+      modalWidth={ModalWidth.Large}
+    >
+      <div className="space-y-4">
+        <div className="relative">
+          <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+            <Icon
+              icon={IconProp.Search}
+              size={SizeProp.Smaller}
+              className="h-4 w-4 text-gray-400"
+            />
+          </div>
+          <input
+            type="text"
+            value={search}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>): void => {
+              setSearch(e.target.value);
+            }}
+            placeholder="Filter variables…"
+            className="block w-full rounded-md border border-gray-300 bg-white py-2 pl-9 pr-3 text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+            autoFocus
+          />
+        </div>
+
+        {filteredGroups.length === 0 ? (
+          <div className="rounded-md border border-gray-200 bg-gray-50 p-6 text-center text-sm text-gray-500">
+            No variables match <code className="font-mono">{search}</code>.
+          </div>
+        ) : (
+          <div className="space-y-5 max-h-[60vh] overflow-y-auto pr-1">
+            {filteredGroups.map(renderGroup)}
+          </div>
+        )}
+
+        <div className="rounded-md border border-blue-100 bg-blue-50 p-3 text-xs text-blue-900">
+          <p className="font-medium">Syntax tips</p>
+          <ul className="mt-1 list-disc space-y-1 pl-4">
+            <li>
+              Wrap the variable name in double braces:{" "}
+              <code className="font-mono">{"{{monitorName}}"}</code>
+            </li>
+            <li>
+              Use dot paths for nested values:{" "}
+              <code className="font-mono">
+                {"{{responseBody.data.status}}"}
+              </code>
+            </li>
+            <li>
+              Missing values render as empty strings — they will not break the
+              template.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default TemplateVariablesModal;