@oneuptime/common 10.0.86 → 10.0.89

package/UI/Components/Dictionary/DictionaryFilterOperator.ts

@@ -0,0 +1,357 @@
+import EqualTo from "../../../Types/BaseDatabase/EqualTo";
+import NotEqual from "../../../Types/BaseDatabase/NotEqual";
+import Search from "../../../Types/BaseDatabase/Search";
+import NotContains from "../../../Types/BaseDatabase/NotContains";
+import StartsWith from "../../../Types/BaseDatabase/StartsWith";
+import EndsWith from "../../../Types/BaseDatabase/EndsWith";
+import GreaterThan from "../../../Types/BaseDatabase/GreaterThan";
+import GreaterThanOrEqual from "../../../Types/BaseDatabase/GreaterThanOrEqual";
+import LessThan from "../../../Types/BaseDatabase/LessThan";
+import LessThanOrEqual from "../../../Types/BaseDatabase/LessThanOrEqual";
+import IsNull from "../../../Types/BaseDatabase/IsNull";
+import NotNull from "../../../Types/BaseDatabase/NotNull";
+import { ObjectType } from "../../../Types/JSON";
+
+/*
+ * UI-facing operator identifiers. We store these in the Dictionary form
+ * state and translate to the corresponding backend operator wrapper at
+ * the API boundary so the existing serialization pipeline works.
+ */
+export enum DictionaryFilterOperator {
+  EqualTo = "EqualTo",
+  NotEqual = "NotEqual",
+  Contains = "Contains",
+  NotContains = "NotContains",
+  StartsWith = "StartsWith",
+  EndsWith = "EndsWith",
+  GreaterThan = "GreaterThan",
+  LessThan = "LessThan",
+  GreaterThanOrEqual = "GreaterThanOrEqual",
+  LessThanOrEqual = "LessThanOrEqual",
+  IsEmpty = "IsEmpty",
+  IsNotEmpty = "IsNotEmpty",
+}
+
+export interface DictionaryFilterOperatorOption {
+  operator: DictionaryFilterOperator;
+  label: string;
+  symbol: string;
+  // Operators like IsEmpty/IsNotEmpty don't take a user-supplied value.
+  hidesValueInput?: boolean | undefined;
+  // Numeric operators force a numeric value input.
+  expectsNumericValue?: boolean | undefined;
+}
+
+export const DICTIONARY_FILTER_OPERATOR_OPTIONS: ReadonlyArray<DictionaryFilterOperatorOption> =
+  [
+    {
+      operator: DictionaryFilterOperator.EqualTo,
+      label: "equals",
+      symbol: "=",
+    },
+    {
+      operator: DictionaryFilterOperator.NotEqual,
+      label: "does not equal",
+      symbol: "!=",
+    },
+    {
+      operator: DictionaryFilterOperator.Contains,
+      label: "contains",
+      symbol: "contains",
+    },
+    {
+      operator: DictionaryFilterOperator.NotContains,
+      label: "does not contain",
+      symbol: "does not contain",
+    },
+    {
+      operator: DictionaryFilterOperator.StartsWith,
+      label: "starts with",
+      symbol: "starts with",
+    },
+    {
+      operator: DictionaryFilterOperator.EndsWith,
+      label: "ends with",
+      symbol: "ends with",
+    },
+    {
+      operator: DictionaryFilterOperator.GreaterThan,
+      label: "greater than",
+      symbol: ">",
+      expectsNumericValue: true,
+    },
+    {
+      operator: DictionaryFilterOperator.GreaterThanOrEqual,
+      label: "greater than or equal",
+      symbol: ">=",
+      expectsNumericValue: true,
+    },
+    {
+      operator: DictionaryFilterOperator.LessThan,
+      label: "less than",
+      symbol: "<",
+      expectsNumericValue: true,
+    },
+    {
+      operator: DictionaryFilterOperator.LessThanOrEqual,
+      label: "less than or equal",
+      symbol: "<=",
+      expectsNumericValue: true,
+    },
+    {
+      operator: DictionaryFilterOperator.IsEmpty,
+      label: "is empty",
+      symbol: "is empty",
+      hidesValueInput: true,
+    },
+    {
+      operator: DictionaryFilterOperator.IsNotEmpty,
+      label: "is not empty",
+      symbol: "is not empty",
+      hidesValueInput: true,
+    },
+  ];
+
+export type DictionaryEntryValue =
+  | string
+  | number
+  | boolean
+  | EqualTo<string>
+  | NotEqual<string>
+  | Search<string>
+  | NotContains<string>
+  | StartsWith<string>
+  | EndsWith<string>
+  | GreaterThan<number>
+  | GreaterThanOrEqual<number>
+  | LessThan<number>
+  | LessThanOrEqual<number>
+  | IsNull
+  | NotNull;
+
+export const getOperatorOption: (
+  operator: DictionaryFilterOperator,
+) => DictionaryFilterOperatorOption = (
+  operator: DictionaryFilterOperator,
+): DictionaryFilterOperatorOption => {
+  return (
+    DICTIONARY_FILTER_OPERATOR_OPTIONS.find(
+      (option: DictionaryFilterOperatorOption) => {
+        return option.operator === operator;
+      },
+    ) ?? DICTIONARY_FILTER_OPERATOR_OPTIONS[0]!
+  );
+};
+
+/*
+ * Detect operator wrapper instances or `_type`-tagged plain objects
+ * (already-deserialized vs raw-from-storage).
+ */
+type ObjectTypeLike = { _type?: string };
+
+const matchesObjectType: (value: unknown, type: ObjectType) => boolean = (
+  value: unknown,
+  type: ObjectType,
+): boolean => {
+  return Boolean(
+    value &&
+      typeof value === "object" &&
+      (value as ObjectTypeLike)._type === type,
+  );
+};
+
+interface RawValueAndOperator {
+  operator: DictionaryFilterOperator;
+  rawValue: string;
+}
+
+/**
+ * Inspect a stored dictionary entry value (which may be a plain string,
+ * a hydrated operator instance, or a raw `{_type, value}` JSON shape)
+ * and recover the operator + display value used to populate the form.
+ */
+export const detectOperatorFromValue: (
+  value: unknown,
+) => RawValueAndOperator = (value: unknown): RawValueAndOperator => {
+  if (value === null || value === undefined) {
+    return {
+      operator: DictionaryFilterOperator.EqualTo,
+      rawValue: "",
+    };
+  }
+
+  if (
+    typeof value === "string" ||
+    typeof value === "number" ||
+    typeof value === "boolean"
+  ) {
+    return {
+      operator: DictionaryFilterOperator.EqualTo,
+      rawValue: String(value),
+    };
+  }
+
+  if (value instanceof IsNull || matchesObjectType(value, ObjectType.IsNull)) {
+    return { operator: DictionaryFilterOperator.IsEmpty, rawValue: "" };
+  }
+  if (
+    value instanceof NotNull ||
+    matchesObjectType(value, ObjectType.NotNull)
+  ) {
+    return { operator: DictionaryFilterOperator.IsNotEmpty, rawValue: "" };
+  }
+
+  const wrapperValue: string =
+    value instanceof Object && "value" in value
+      ? String(
+          (value as { value?: unknown }).value === undefined ||
+            (value as { value?: unknown }).value === null
+            ? ""
+            : (value as { value?: unknown }).value,
+        )
+      : "";
+
+  if (
+    value instanceof NotEqual ||
+    matchesObjectType(value, ObjectType.NotEqual)
+  ) {
+    return {
+      operator: DictionaryFilterOperator.NotEqual,
+      rawValue: wrapperValue,
+    };
+  }
+  if (
+    value instanceof EqualTo ||
+    matchesObjectType(value, ObjectType.EqualTo)
+  ) {
+    return {
+      operator: DictionaryFilterOperator.EqualTo,
+      rawValue: wrapperValue,
+    };
+  }
+  if (value instanceof Search || matchesObjectType(value, ObjectType.Search)) {
+    return {
+      operator: DictionaryFilterOperator.Contains,
+      rawValue: wrapperValue,
+    };
+  }
+  if (
+    value instanceof NotContains ||
+    matchesObjectType(value, ObjectType.NotContains)
+  ) {
+    return {
+      operator: DictionaryFilterOperator.NotContains,
+      rawValue: wrapperValue,
+    };
+  }
+  if (
+    value instanceof StartsWith ||
+    matchesObjectType(value, ObjectType.StartsWith)
+  ) {
+    return {
+      operator: DictionaryFilterOperator.StartsWith,
+      rawValue: wrapperValue,
+    };
+  }
+  if (
+    value instanceof EndsWith ||
+    matchesObjectType(value, ObjectType.EndsWith)
+  ) {
+    return {
+      operator: DictionaryFilterOperator.EndsWith,
+      rawValue: wrapperValue,
+    };
+  }
+  if (
+    value instanceof GreaterThan ||
+    matchesObjectType(value, ObjectType.GreaterThan)
+  ) {
+    return {
+      operator: DictionaryFilterOperator.GreaterThan,
+      rawValue: wrapperValue,
+    };
+  }
+  if (
+    value instanceof GreaterThanOrEqual ||
+    matchesObjectType(value, ObjectType.GreaterThanOrEqual)
+  ) {
+    return {
+      operator: DictionaryFilterOperator.GreaterThanOrEqual,
+      rawValue: wrapperValue,
+    };
+  }
+  if (
+    value instanceof LessThan ||
+    matchesObjectType(value, ObjectType.LessThan)
+  ) {
+    return {
+      operator: DictionaryFilterOperator.LessThan,
+      rawValue: wrapperValue,
+    };
+  }
+  if (
+    value instanceof LessThanOrEqual ||
+    matchesObjectType(value, ObjectType.LessThanOrEqual)
+  ) {
+    return {
+      operator: DictionaryFilterOperator.LessThanOrEqual,
+      rawValue: wrapperValue,
+    };
+  }
+
+  // Unknown structure — fall back to bare equality with stringified value.
+  return {
+    operator: DictionaryFilterOperator.EqualTo,
+    rawValue: wrapperValue,
+  };
+};
+
+/**
+ * Build the actual stored dictionary value for an operator + raw value.
+ * `EqualTo` produces a bare string for backwards compatibility with
+ * existing saved filters; everything else produces an operator wrapper
+ * instance.
+ */
+export const buildDictionaryValue: (input: {
+  operator: DictionaryFilterOperator;
+  rawValue: string;
+}) => DictionaryEntryValue = (input: {
+  operator: DictionaryFilterOperator;
+  rawValue: string;
+}): DictionaryEntryValue => {
+  const { operator, rawValue } = input;
+  const trimmed: string = rawValue ?? "";
+
+  switch (operator) {
+    case DictionaryFilterOperator.EqualTo:
+      return trimmed;
+    case DictionaryFilterOperator.NotEqual:
+      return new NotEqual<string>(trimmed);
+    case DictionaryFilterOperator.Contains:
+      /*
+       * Statement.serialize already wraps Search instances with `%...%`,
+       * so pass the bare needle here.
+       */
+      return new Search<string>(trimmed);
+    case DictionaryFilterOperator.NotContains:
+      return new NotContains<string>(trimmed);
+    case DictionaryFilterOperator.StartsWith:
+      return new StartsWith<string>(trimmed);
+    case DictionaryFilterOperator.EndsWith:
+      return new EndsWith<string>(trimmed);
+    case DictionaryFilterOperator.GreaterThan:
+      return new GreaterThan<number>(Number(trimmed));
+    case DictionaryFilterOperator.GreaterThanOrEqual:
+      return new GreaterThanOrEqual<number>(Number(trimmed));
+    case DictionaryFilterOperator.LessThan:
+      return new LessThan<number>(Number(trimmed));
+    case DictionaryFilterOperator.LessThanOrEqual:
+      return new LessThanOrEqual<number>(Number(trimmed));
+    case DictionaryFilterOperator.IsEmpty:
+      return new IsNull();
+    case DictionaryFilterOperator.IsNotEmpty:
+      return new NotNull();
+    default:
+      return trimmed;
+  }
+};

package/UI/Components/Dictionary/DictionaryOfStrings.tsx

@@ -1,4 +1,5 @@
 import DictionaryForm, { ValueType } from "./Dictionary";
+import { DictionaryEntryValue } from "./DictionaryFilterOperator";
 import Dictionary from "../../../Types/Dictionary";
 import React, { FunctionComponent, ReactElement } from "react";
 
@@ -18,15 +19,19 @@ const DictionaryOfStrings: FunctionComponent<ComponentProps> = (
     <DictionaryForm
       {...props}
       valueTypes={[ValueType.Text]}
-      onChange={(value: Dictionary<string | number | boolean>) => {
-        const stringDict: Dictionary<string> = value as Dictionary<string>;
+      onChange={(value: Dictionary<DictionaryEntryValue>) => {
+        /*
+         * Operators are not enabled here, so values come back as bare
+         * strings/numbers/booleans only.
+         */
+        const stringDict: Dictionary<string> = {};
 
-        // convert all values to strings
-
-        for (const key in stringDict) {
-          if (stringDict[key]) {
-            stringDict[key] = stringDict[key]?.toString() || "";
+        for (const key of Object.keys(value)) {
+          const entry: DictionaryEntryValue | undefined = value[key];
+          if (entry === undefined || entry === null) {
+            continue;
           }
+          stringDict[key] = entry.toString();
         }
 
         if (props.onChange) {

package/UI/Components/EditionLabel/EditionLabel.tsx

@@ -98,6 +98,23 @@ const EditionLabel: FunctionComponent<ComponentProps> = (
           );
         }
 
+        if (typeof payload["userLimit"] === "number") {
+          configModel.enterpriseLicenseUserLimit = payload[
+            "userLimit"
+          ] as number;
+        }
+
+        if (typeof payload["currentUserCount"] === "number") {
+          configModel.enterpriseLicenseCurrentUserCount = payload[
+            "currentUserCount"
+          ] as number;
+        }
+
+        if (payload["userCountUpdatedAt"]) {
+          configModel.enterpriseLicenseUserCountUpdatedAt =
+            OneUptimeDate.fromString(payload["userCountUpdatedAt"] as string);
+        }
+
         setGlobalConfig(configModel);
 
         if (!licenseInputEditedRef.current) {
@@ -153,6 +170,65 @@ const EditionLabel: FunctionComponent<ComponentProps> = (
     return expiresAt.toLocaleString();
   }, [globalConfig?.enterpriseLicenseExpiresAt]);
 
+  const userLimit: number | null = useMemo(() => {
+    return typeof globalConfig?.enterpriseLicenseUserLimit === "number"
+      ? globalConfig.enterpriseLicenseUserLimit
+      : null;
+  }, [globalConfig?.enterpriseLicenseUserLimit]);
+
+  const currentUserCount: number | null = useMemo(() => {
+    return typeof globalConfig?.enterpriseLicenseCurrentUserCount === "number"
+      ? globalConfig.enterpriseLicenseCurrentUserCount
+      : null;
+  }, [globalConfig?.enterpriseLicenseCurrentUserCount]);
+
+  const userCountUpdatedAtText: string | null = useMemo(() => {
+    if (!globalConfig?.enterpriseLicenseUserCountUpdatedAt) {
+      return null;
+    }
+
+    const reportedAt: Date = OneUptimeDate.fromString(
+      globalConfig.enterpriseLicenseUserCountUpdatedAt,
+    );
+
+    if (Number.isNaN(reportedAt.getTime())) {
+      return null;
+    }
+
+    return reportedAt.toLocaleString();
+  }, [globalConfig?.enterpriseLicenseUserCountUpdatedAt]);
+
+  const isUserLimitBreached: boolean = useMemo(() => {
+    if (!licenseValid) {
+      return false;
+    }
+
+    if (typeof userLimit !== "number" || userLimit <= 0) {
+      return false;
+    }
+
+    if (typeof currentUserCount !== "number") {
+      return false;
+    }
+
+    return currentUserCount > userLimit;
+  }, [licenseValid, userLimit, currentUserCount]);
+
+  const userUsagePercent: number | null = useMemo(() => {
+    if (typeof userLimit !== "number" || userLimit <= 0) {
+      return null;
+    }
+
+    if (typeof currentUserCount !== "number") {
+      return null;
+    }
+
+    return Math.min(
+      100,
+      Math.max(0, Math.round((currentUserCount / userLimit) * 100)),
+    );
+  }, [userLimit, currentUserCount]);
+
   const editionName: string = useMemo(() => {
     if (!IS_ENTERPRISE_EDITION) {
       return "Community Edition";
@@ -176,8 +252,16 @@ const EditionLabel: FunctionComponent<ComponentProps> = (
       return "bg-yellow-400";
     }
 
-    return licenseValid ? "bg-emerald-500" : "bg-red-500";
-  }, [isConfigLoading, licenseValid]);
+    if (!licenseValid) {
+      return "bg-red-500";
+    }
+
+    if (isUserLimitBreached) {
+      return "bg-red-500";
+    }
+
+    return "bg-emerald-500";
+  }, [isConfigLoading, licenseValid, isUserLimitBreached]);
 
   const ctaLabel: string = useMemo(() => {
     if (!IS_ENTERPRISE_EDITION) {
@@ -188,8 +272,16 @@ const EditionLabel: FunctionComponent<ComponentProps> = (
       return "Checking";
     }
 
-    return licenseValid ? "View details" : "Validate license";
-  }, [isConfigLoading, licenseValid]);
+    if (!licenseValid) {
+      return "Validate license";
+    }
+
+    if (isUserLimitBreached) {
+      return "User limit exceeded";
+    }
+
+    return "View details";
+  }, [isConfigLoading, licenseValid, isUserLimitBreached]);
 
   const communityFeatures: Array<string> = useMemo(() => {
     return [
@@ -330,23 +422,40 @@ const EditionLabel: FunctionComponent<ComponentProps> = (
       : undefined
     : false;
 
+  const showAlertedPill: boolean =
+    IS_ENTERPRISE_EDITION &&
+    !isConfigLoading &&
+    (isUserLimitBreached ||
+      (!licenseValid && Boolean(globalConfig?.enterpriseLicenseKey)));
+
+  const pillClassName: string = showAlertedPill
+    ? "group inline-flex items-center gap-2 rounded-full border border-red-200 bg-red-50 px-3 py-1 text-xs font-medium text-red-700 shadow-sm transition hover:border-red-300 hover:bg-red-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400"
+    : "group inline-flex items-center gap-2 rounded-full border border-indigo-100 bg-white px-3 py-1 text-xs font-medium text-indigo-700 shadow-sm transition hover:border-indigo-300 hover:bg-indigo-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400";
+
+  const pillCtaTextClassName: string = showAlertedPill
+    ? "text-[11px] text-red-500 group-hover:text-red-600"
+    : "text-[11px] text-indigo-500 group-hover:text-indigo-600";
+
   return (
     <>
       <button
         type="button"
         onClick={openDialog}
-        className={`group inline-flex items-center gap-2 rounded-full border border-indigo-100 bg-white px-3 py-1 text-xs font-medium text-indigo-700 shadow-sm transition hover:border-indigo-300 hover:bg-indigo-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 ${
-          props.className ? props.className : ""
-        }`}
+        className={`${pillClassName} ${props.className ? props.className : ""}`}
         aria-label={`${editionName} details`}
       >
+        {showAlertedPill && (
+          <Icon
+            icon={IconProp.Alert}
+            size={SizeProp.Small}
+            className="text-red-600"
+          />
+        )}
         <span
           className={`h-2 w-2 rounded-full transition group-hover:scale-110 ${indicatorColor}`}
         ></span>
         <span className="tracking-wide">{editionName}</span>
-        <span className="text-[11px] text-indigo-500 group-hover:text-indigo-600">
-          {ctaLabel}
-        </span>
+        <span className={pillCtaTextClassName}>{ctaLabel}</span>
       </button>
 
       {isDialogOpen && (
@@ -397,6 +506,111 @@ const EditionLabel: FunctionComponent<ComponentProps> = (
                   </div>
                 )}
 
+                {!configError && !isConfigLoading && licenseValid && (
+                  <div
+                    className={`rounded-lg border p-4 shadow-sm ${
+                      isUserLimitBreached
+                        ? "border-red-200 bg-red-50"
+                        : "border-gray-200 bg-white"
+                    }`}
+                  >
+                    <div className="flex items-start gap-3">
+                      <div
+                        className={`flex h-9 w-9 items-center justify-center rounded-full ${
+                          isUserLimitBreached
+                            ? "bg-red-100 text-red-600"
+                            : "bg-indigo-100 text-indigo-600"
+                        }`}
+                      >
+                        <Icon
+                          icon={
+                            isUserLimitBreached ? IconProp.Alert : IconProp.User
+                          }
+                          size={SizeProp.Regular}
+                        />
+                      </div>
+                      <div className="flex-1">
+                        <div className="flex items-center justify-between">
+                          <h3
+                            className={`text-sm font-semibold ${
+                              isUserLimitBreached
+                                ? "text-red-900"
+                                : "text-gray-900"
+                            }`}
+                          >
+                            User Usage
+                          </h3>
+                          {isUserLimitBreached && (
+                            <span className="inline-flex items-center gap-1 rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700">
+                              Limit exceeded
+                            </span>
+                          )}
+                        </div>
+
+                        <div className="mt-2 flex items-baseline gap-1">
+                          <span
+                            className={`text-2xl font-semibold ${
+                              isUserLimitBreached
+                                ? "text-red-700"
+                                : "text-gray-900"
+                            }`}
+                          >
+                            {typeof currentUserCount === "number"
+                              ? currentUserCount.toLocaleString()
+                              : "—"}
+                          </span>
+                          <span className="text-sm text-gray-500">
+                            {" / "}
+                            {typeof userLimit === "number" && userLimit > 0
+                              ? `${userLimit.toLocaleString()} users`
+                              : "unlimited"}
+                          </span>
+                        </div>
+
+                        {typeof userUsagePercent === "number" && (
+                          <div className="mt-3">
+                            <div className="h-2 w-full overflow-hidden rounded-full bg-gray-200">
+                              <div
+                                className={`h-full rounded-full transition-all ${
+                                  isUserLimitBreached
+                                    ? "bg-red-500"
+                                    : userUsagePercent >= 80
+                                      ? "bg-amber-500"
+                                      : "bg-emerald-500"
+                                }`}
+                                style={{ width: `${userUsagePercent}%` }}
+                              />
+                            </div>
+                            <p className="mt-1 text-xs text-gray-500">
+                              {userUsagePercent}% of licensed seats in use
+                            </p>
+                          </div>
+                        )}
+
+                        {isUserLimitBreached && (
+                          <p className="mt-3 text-xs text-red-700">
+                            Your installation has more users than your license
+                            permits. Please contact{" "}
+                            <a
+                              href="mailto:sales@oneuptime.com"
+                              className="font-medium text-red-800 underline hover:text-red-900"
+                            >
+                              sales@oneuptime.com
+                            </a>{" "}
+                            to expand your license.
+                          </p>
+                        )}
+
+                        <p className="mt-3 text-xs text-gray-500">
+                          {userCountUpdatedAtText
+                            ? `Last reported to OneUptime on ${userCountUpdatedAtText}.`
+                            : "User count has not been reported to OneUptime yet. The first report will be sent within 24 hours."}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
                 {!configError &&
                   !isConfigLoading &&
                   !licenseValid &&