@oneuptime/common 12.0.34 → 13.0.0

package/UI/Components/CustomFields/CustomFieldsDetail.tsx

@@ -5,7 +5,7 @@ import PermissionGate, {
   PermissionGateResult,
 } from "../../Utils/PermissionGate";
 import { ButtonStyleType } from "../Button/Button";
-import Card from "../Card/Card";
+import Card, { CardButtonSchema } from "../Card/Card";
 import ComponentLoader from "../ComponentLoader/ComponentLoader";
 import Detail from "../Detail/Detail";
 import { DropdownOption } from "../Dropdown/Dropdown";
@@ -79,6 +79,22 @@ export interface ComponentProps {
    * real reason.
    */
   hideIfEmpty?: boolean | undefined;
+  /*
+   * Card buttons that belong beside "Edit Fields" rather than on a card of
+   * their own — the Monitor Template's "Sync Custom Fields to Linked Monitors"
+   * being the one that exists. They render after the edit button and are not
+   * touched by the gating above: whether a push to other records is offered is
+   * the caller's decision, not this card's.
+   */
+  additionalButtons?: Array<CardButtonSchema> | undefined;
+  /*
+   * The record's stored bag, handed back after every load — including the
+   * reload that follows a save — so a caller whose extra button acts on those
+   * values can enable and word it from what is actually stored, rather than
+   * re-reading the record behind this card's back and going stale the moment
+   * somebody edits it here.
+   */
+  onValuesLoaded?: ((customFields: JSONObject) => void) | undefined;
 }
 
 const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
@@ -219,6 +235,12 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
       setSchemaList(schemaList.data);
       setModel(item);
 
+      if (props.onValuesLoaded) {
+        props.onValuesLoaded(
+          ((item as any)?.["customFields"] as JSONObject) || {},
+        );
+      }
+
       setIsLoading(false);
     } catch (err) {
       setIsLoading(false);
@@ -313,30 +335,33 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
   const showEditButton: boolean =
     canEdit && (updateGate.isAllowed || Boolean(updateGate.disabledReason));
 
+  const cardButtons: Array<CardButtonSchema> = [
+    ...(showEditButton
+      ? [
+          {
+            title: "Edit Fields",
+            buttonStyle: ButtonStyleType.NORMAL,
+            disabled: !updateGate.isAllowed,
+            tooltip: updateGate.disabledReason,
+            onClick: () => {
+              if (!updateGate.isAllowed) {
+                return;
+              }
+
+              setShowModelForm(true);
+            },
+            icon: IconProp.Edit,
+          } as CardButtonSchema,
+        ]
+      : []),
+    ...(props.additionalButtons || []),
+  ];
+
   return (
     <Card
       title={props.title}
       description={props.description}
-      buttons={
-        showEditButton
-          ? [
-              {
-                title: "Edit Fields",
-                buttonStyle: ButtonStyleType.NORMAL,
-                disabled: !updateGate.isAllowed,
-                tooltip: updateGate.disabledReason,
-                onClick: () => {
-                  if (!updateGate.isAllowed) {
-                    return;
-                  }
-
-                  setShowModelForm(true);
-                },
-                icon: IconProp.Edit,
-              },
-            ]
-          : []
-      }
+      buttons={cardButtons}
     >
       <div className="border-t border-gray-200 px-4 py-5 sm:px-6 -m-6 -mt-2">
         {isLoading && !loadError && <ComponentLoader />}

package/UI/Components/Dashboard/DashboardVariableControl.tsx

@@ -0,0 +1,285 @@
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import DashboardVariable, {
+  DashboardVariableType,
+  DashboardVariableOption,
+} from "../../../Types/Dashboard/DashboardVariable";
+
+export interface VariableValueChange {
+  selectedValue?: string | undefined;
+  selectedValues?: Array<string> | undefined;
+}
+
+export interface ComponentProps {
+  variable: DashboardVariable;
+  dynamicOptions?: Array<string> | undefined;
+  isLoadingOptions?: boolean | undefined;
+  onVariableValueChange: (
+    variableId: string,
+    change: VariableValueChange,
+  ) => void;
+}
+
+const MultiSelectPopover: FunctionComponent<{
+  options: Array<DashboardVariableOption>;
+  selected: Array<string>;
+  label: string;
+  isLoading: boolean;
+  maxSelections?: number | undefined;
+  unavailableLabel?: string | undefined;
+  onChange: (next: Array<string>) => void;
+}> = ({
+  options,
+  selected,
+  label,
+  isLoading,
+  maxSelections,
+  unavailableLabel,
+  onChange,
+}: {
+  options: Array<DashboardVariableOption>;
+  selected: Array<string>;
+  label: string;
+  isLoading: boolean;
+  maxSelections?: number | undefined;
+  unavailableLabel?: string | undefined;
+  onChange: (next: Array<string>) => void;
+}): ReactElement => {
+  const [open, setOpen] = useState<boolean>(false);
+  const wrapRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) {
+      return undefined;
+    }
+    const onDocClick: (e: MouseEvent) => void = (e: MouseEvent): void => {
+      if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onDocClick);
+    return () => {
+      document.removeEventListener("mousedown", onDocClick);
+    };
+  }, [open]);
+
+  const buttonText: string =
+    selected.length === 0
+      ? isLoading
+        ? "Loading…"
+        : "All"
+      : selected.length === 1
+        ? options.find((option: DashboardVariableOption) => {
+            return option.value === selected[0];
+          })?.label ||
+          unavailableLabel ||
+          (selected[0] as string)
+        : `${selected.length} selected`;
+
+  const toggle: (value: string) => void = (value: string): void => {
+    if (selected.includes(value)) {
+      onChange(
+        selected.filter((v: string) => {
+          return v !== value;
+        }),
+      );
+    } else {
+      onChange([...selected, value]);
+    }
+  };
+
+  return (
+    <div className="relative" ref={wrapRef}>
+      <button
+        type="button"
+        className="text-xs border border-gray-200 rounded-md px-2.5 py-1.5 bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-300 transition-colors flex items-center gap-1"
+        disabled={isLoading}
+        onClick={() => {
+          setOpen(!open);
+        }}
+        title={label}
+        aria-label={`${label}: ${buttonText}`}
+        aria-expanded={open}
+      >
+        <span className="truncate max-w-[10rem]">{buttonText}</span>
+        <span className="text-gray-400">▾</span>
+      </button>
+      {open && (
+        <div className="absolute z-30 mt-1 right-0 w-56 max-h-72 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg py-1">
+          <div className="flex items-center justify-between px-3 py-1.5 border-b border-gray-100 text-[11px] text-gray-500">
+            <span>{selected.length} selected</span>
+            <button
+              type="button"
+              className="text-blue-600 hover:underline disabled:text-gray-300"
+              disabled={selected.length === 0}
+              onClick={() => {
+                onChange([]);
+              }}
+            >
+              Clear
+            </button>
+          </div>
+          {maxSelections !== undefined && selected.length >= maxSelections && (
+            <p className="px-3 py-1 text-xs text-gray-500">
+              Choose up to {maxSelections} labels.
+            </p>
+          )}
+          {options.length === 0 ? (
+            <div className="px-3 py-2 text-xs text-gray-400">
+              {isLoading ? "Loading options…" : "No options available"}
+            </div>
+          ) : (
+            options.map((option: DashboardVariableOption) => {
+              const checked: boolean = selected.includes(option.value);
+              return (
+                <label
+                  key={option.value}
+                  className="flex items-center gap-2 px-3 py-1.5 text-xs text-gray-700 hover:bg-gray-50 cursor-pointer"
+                >
+                  <input
+                    type="checkbox"
+                    className="h-3.5 w-3.5"
+                    checked={checked}
+                    disabled={
+                      !checked &&
+                      maxSelections !== undefined &&
+                      selected.length >= maxSelections
+                    }
+                    onChange={() => {
+                      toggle(option.value);
+                    }}
+                  />
+                  <span className="truncate">{option.label}</span>
+                </label>
+              );
+            })
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const DashboardVariableControl: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const { variable } = props;
+  const isTelemetryAttribute: boolean =
+    variable.type === DashboardVariableType.TelemetryAttribute;
+  const isCustomList: boolean =
+    variable.type === DashboardVariableType.CustomList ||
+    Boolean(variable.customListValues);
+
+  const customListOptions: Array<string> = variable.customListValues
+    ? variable.customListValues.split(",").map((v: string) => {
+        return v.trim();
+      })
+    : [];
+
+  const isProjectLabel: boolean =
+    variable.type === DashboardVariableType.ProjectLabel;
+  const options: Array<DashboardVariableOption> = isProjectLabel
+    ? variable.labelOptions || []
+    : (isTelemetryAttribute
+        ? props.dynamicOptions || []
+        : customListOptions
+      ).map((value: string) => {
+        return { label: value, value };
+      });
+  const selectedValue: string =
+    variable.selectedValue ?? variable.defaultValue ?? "";
+  const isUnavailableSelection: boolean = Boolean(
+    isProjectLabel &&
+      selectedValue &&
+      !options.some((option: DashboardVariableOption) => {
+        return option.value === selectedValue;
+      }),
+  );
+
+  const useSelect: boolean =
+    isTelemetryAttribute || isCustomList || isProjectLabel;
+  const label: string = variable.label || variable.name;
+
+  return (
+    <div className="flex items-center gap-1.5">
+      <label className="text-xs font-medium text-gray-400 uppercase tracking-wide">
+        {label}
+      </label>
+      {useSelect && variable.isMultiSelect ? (
+        /*
+         * `selectedValues` only — never defaultValue. The popover renders
+         * "All" for an empty list, and DashboardVariableInterpolation
+         * resolves an empty list to no predicate, so the two agree. Seeding
+         * this from defaultValue would put a filter behind a control that
+         * reads "All".
+         */
+        <MultiSelectPopover
+          options={options}
+          selected={variable.selectedValues || []}
+          label={label}
+          isLoading={Boolean(props.isLoadingOptions)}
+          maxSelections={isProjectLabel ? 100 : undefined}
+          unavailableLabel={isProjectLabel ? "Unavailable label" : undefined}
+          onChange={(next: Array<string>) => {
+            props.onVariableValueChange(variable.id, { selectedValues: next });
+          }}
+        />
+      ) : useSelect ? (
+        <select
+          aria-label={label}
+          className="text-xs border border-gray-200 rounded-md px-2.5 py-1.5 bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-300 transition-colors"
+          /*
+           * `??`, not `||`: picking "All" stores selectedValue as "", which is
+           * a real selection and must not collapse back to defaultValue. Only
+           * an unset (undefined) selection falls through to the default — the
+           * same rule the query side applies in
+           * Common/Utils/Dashboard/VariableInterpolation.ts, so what the
+           * toolbar shows and what the widgets are filtered by stay in step.
+           */
+          value={variable.selectedValue ?? variable.defaultValue ?? ""}
+          disabled={props.isLoadingOptions}
+          onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
+            props.onVariableValueChange(variable.id, {
+              selectedValue: e.target.value,
+            });
+          }}
+        >
+          <option value="">
+            {props.isLoadingOptions ? "Loading…" : "All"}
+          </option>
+          {isUnavailableSelection && (
+            <option value={selectedValue}>Unavailable label</option>
+          )}
+          {options.map((option: DashboardVariableOption) => {
+            return (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            );
+          })}
+        </select>
+      ) : (
+        <input
+          type="text"
+          aria-label={label}
+          className="text-xs border border-gray-200 rounded-md px-2.5 py-1.5 bg-white text-gray-700 w-28 focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-300 transition-colors"
+          // `??` so clearing the box stays cleared. See the select above.
+          value={variable.selectedValue ?? variable.defaultValue ?? ""}
+          placeholder={variable.name}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            props.onVariableValueChange(variable.id, {
+              selectedValue: e.target.value,
+            });
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default DashboardVariableControl;

package/UI/esbuild-config.js

@@ -304,6 +304,8 @@ function createConfig(options) {
   const isDev = process.env.NODE_ENV !== "production";
   const isAnalyze = process.env.analyze === "true";
   const reactRoot = resolvePackageRoot("react");
+  const reactRouterRoot = resolvePackageRoot("react-router");
+  const reactRouterDomRoot = resolvePackageRoot("react-router-dom");
   const reactI18nextRoot = resolvePackageRoot("react-i18next");
   const i18nextRoot = resolvePackageRoot("i18next");
 
@@ -356,6 +358,10 @@ function createConfig(options) {
       react: reactRoot,
       "react/jsx-runtime": path.join(reactRoot, "jsx-runtime.js"),
       "react/jsx-dev-runtime": path.join(reactRoot, "jsx-dev-runtime.js"),
+      // Public dashboards reuse widgets from the private dashboard package.
+      // Their links must share the router context installed by the entry app.
+      "react-router": reactRouterRoot,
+      "react-router-dom": reactRouterDomRoot,
       // Force a single instance of i18next/react-i18next so that translations
       // initialized in the service entry are visible to Common UI components.
       // Without this, Common's own node_modules copy gets a separate, never-

package/Utils/Dashboard/Components/DashboardMonitorListComponent.ts

@@ -74,7 +74,8 @@ export default class DashboardMonitorListComponentUtil extends DashboardBaseComp
 
     componentArguments.push({
       name: "Title",
-      description: "Header shown above the monitor list",
+      description:
+        "Header shown above the monitor list. Use {{UNIT}} to show a dashboard variable’s selected label; configure Label Variable separately to filter monitors.",
       required: false,
       type: ComponentInputType.Text,
       id: "title",
@@ -142,6 +143,16 @@ export default class DashboardMonitorListComponentUtil extends DashboardBaseComp
       entityFilterModelType: EntityFilterModelType.Label,
     });
 
+    componentArguments.push({
+      name: "Label Variable",
+      description:
+        "Filter monitors using a Project Labels dashboard variable. This is combined with the fixed filters above. All removes only the variable filter.",
+      required: false,
+      type: ComponentInputType.ProjectLabelVariable,
+      id: "labelVariableId",
+      section: FiltersSection,
+    });
+
     return componentArguments;
   }
 }

package/Utils/Dashboard/LabelVariable.ts

@@ -0,0 +1,152 @@
+import Includes from "../../Types/BaseDatabase/Includes";
+import IncludesAnyOfGroups from "../../Types/BaseDatabase/IncludesAnyOfGroups";
+import DashboardVariable, {
+  DashboardVariableOption,
+  DashboardVariableType,
+} from "../../Types/Dashboard/DashboardVariable";
+import BadDataException from "../../Types/Exception/BadDataException";
+import ObjectID from "../../Types/ObjectID";
+import DashboardVariableInterpolation, {
+  ResolvedVariableValue,
+} from "./VariableInterpolation";
+
+export interface DashboardLabelFilterData {
+  labelIds?: Array<string> | undefined;
+  labelVariableId?: string | undefined;
+  variables?: Array<DashboardVariable> | undefined;
+}
+
+export default class DashboardLabelVariable {
+  public static getOptions(
+    variable: DashboardVariable,
+  ): Array<DashboardVariableOption> {
+    const options: Array<DashboardVariableOption> | undefined =
+      variable.labelOptions;
+    if (
+      !Array.isArray(options) ||
+      options.length === 0 ||
+      options.length > 1000
+    ) {
+      throw new BadDataException(
+        "A project label variable must offer between 1 and 1000 labels.",
+      );
+    }
+
+    const seen: Set<string> = new Set<string>();
+    for (const option of options) {
+      if (
+        !option ||
+        typeof option.value !== "string" ||
+        !ObjectID.isValidUUID(option.value) ||
+        typeof option.label !== "string" ||
+        option.label.trim().length === 0 ||
+        option.label.length > 1024 ||
+        seen.has(option.value)
+      ) {
+        throw new BadDataException(
+          "Project label variable choices must have unique label IDs and nonempty display names.",
+        );
+      }
+      seen.add(option.value);
+    }
+    return options;
+  }
+
+  public static getFilter(
+    data: DashboardLabelFilterData,
+  ): Includes | IncludesAnyOfGroups | undefined {
+    const fixed: Array<string> = [...new Set(data.labelIds || [])];
+    if (!data.labelVariableId) {
+      return fixed.length > 0 ? new Includes(fixed) : undefined;
+    }
+
+    const matching: Array<DashboardVariable> = (data.variables || []).filter(
+      (variable: DashboardVariable) => {
+        return variable.id === data.labelVariableId;
+      },
+    );
+    const variable: DashboardVariable | undefined = matching[0];
+    if (
+      matching.length !== 1 ||
+      !variable ||
+      variable.type !== DashboardVariableType.ProjectLabel
+    ) {
+      throw new BadDataException(
+        "The monitor widget's label variable is missing or is not a project label variable. Edit the widget to select a label variable.",
+      );
+    }
+
+    const allowed: Set<string> = new Set(
+      DashboardLabelVariable.getOptions(variable).map(
+        (option: DashboardVariableOption) => {
+          return option.value;
+        },
+      ),
+    );
+    const resolved: ResolvedVariableValue | undefined =
+      DashboardVariableInterpolation.resolveValue(variable);
+    const selected: Array<string> =
+      resolved?.multi ||
+      (resolved?.scalar !== undefined ? [resolved.scalar] : []);
+    if (
+      selected.length > 100 ||
+      selected.some((value: string) => {
+        return !allowed.has(value);
+      })
+    ) {
+      throw new BadDataException(
+        "Choose up to 100 labels offered by this dashboard variable, or select All.",
+      );
+    }
+
+    if (selected.length === 0) {
+      return fixed.length > 0 ? new Includes(fixed) : undefined;
+    }
+    const dynamic: Array<string> = [...new Set(selected)];
+    return fixed.length > 0
+      ? new IncludesAnyOfGroups([fixed, dynamic])
+      : new Includes(dynamic);
+  }
+
+  public static interpolateTitle(
+    title: string | undefined,
+    variables: Array<DashboardVariable> | undefined,
+  ): string | undefined {
+    if (!title || !variables?.length) {
+      return title;
+    }
+    return title.replace(
+      /\{\{([a-zA-Z_][a-zA-Z0-9_]*)\}\}/g,
+      (placeholder: string, name: string): string => {
+        const variable: DashboardVariable | undefined = variables.find(
+          (item: DashboardVariable) => {
+            return item.name === name;
+          },
+        );
+        if (!variable) {
+          return placeholder;
+        }
+        const resolved: ResolvedVariableValue | undefined =
+          DashboardVariableInterpolation.resolveValue(variable);
+        if (!resolved) {
+          return "All";
+        }
+        const values: Array<string> = resolved.multi || [
+          resolved.scalar as string,
+        ];
+        return values
+          .map((value: string): string => {
+            if (variable.type !== DashboardVariableType.ProjectLabel) {
+              return value;
+            }
+            return (
+              variable.labelOptions?.find((option: DashboardVariableOption) => {
+                return option.value === value;
+              })?.label || "Unavailable label"
+            );
+          })
+          .join(", ");
+      },
+    );
+  }
+}

package/Utils/Dashboard/VariableUrlState.ts

@@ -65,10 +65,25 @@ export default class DashboardVariableUrlState {
       if (!fromName) {
         return variable;
       }
+
+      /*
+       * The URL's comma syntax cannot distinguish one multi-select choice
+       * from a scalar. Resolve that ambiguity using the saved definition.
+       */
+      if (variable.isMultiSelect) {
+        return {
+          ...variable,
+          selectedValue: undefined,
+          selectedValues:
+            fromName.selectedValues ||
+            (fromName.selectedValue ? [fromName.selectedValue] : []),
+        };
+      }
       return {
         ...variable,
-        selectedValue: fromName.selectedValue,
-        selectedValues: fromName.selectedValues,
+        selectedValue:
+          fromName.selectedValue ?? fromName.selectedValues?.join(","),
+        selectedValues: undefined,
       };
     });
   }
@@ -110,11 +125,18 @@ export default class DashboardVariableUrlState {
         continue;
       }
       const paramKey: string = `${VAR_PREFIX}${name}`;
-      if (variable.selectedValues && variable.selectedValues.length > 0) {
-        params.set(paramKey, variable.selectedValues.join(","));
+      if (variable.isMultiSelect) {
+        if (Array.isArray(variable.selectedValues)) {
+          params.set(paramKey, variable.selectedValues.join(","));
+        }
         continue;
       }
-      if (variable.selectedValue && variable.selectedValue.length > 0) {
+
+      /*
+       * Keep an explicit All as `var-name=`. Omitting it would restore the
+       * saved selection or default when this URL is reopened.
+       */
+      if (typeof variable.selectedValue === "string") {
         params.set(paramKey, variable.selectedValue);
       }
     }

package/Utils/MetricUnitUtil.ts

@@ -297,6 +297,40 @@ export default class MetricUnitUtil {
     return (value * fromDef.toCanonical) / metricDef.toCanonical;
   }
 
+  /*
+   * The canonical base of the family this unit belongs to — "B" for any
+   * data unit, "sec" for any time unit, "%" for percent, "bit" for bits.
+   * Null when the unit belongs to no known family.
+   *
+   * Distinct from getCanonicalUnitValue, which answers "what should the
+   * threshold dropdown default to for this metric" and returns the unit
+   * itself for a known family member. This answers "what is the one unit
+   * every member of this family can be converted into", which is what a
+   * formatter needs before it can pick a human-readable scale: a value
+   * carrying the unit "GB" has to become bytes before a bytes ladder can
+   * decide that 2500 of them read best as "2.5 TB".
+   */
+  public static getFamilyBaseUnit(
+    metricUnit: string | undefined,
+  ): string | null {
+    if (!metricUnit || !metricUnit.trim()) {
+      return null;
+    }
+
+    const family: Array<UnitDefinition> | null = findFamily(metricUnit);
+    if (!family) {
+      return null;
+    }
+
+    const base: UnitDefinition | undefined = family.find(
+      (u: UnitDefinition) => {
+        return u.toCanonical === 1;
+      },
+    );
+
+    return base?.value || null;
+  }
+
   /*
    * Convenience: does the metric unit belong to a family we can offer
    * conversions for? When false, the UI should still render a dropdown,