@oneuptime/common 10.0.85 → 10.0.88

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 &&

package/UI/Components/Filters/FilterViewer.tsx

@@ -1,3 +1,9 @@
+import {
+  DictionaryFilterOperator,
+  DictionaryFilterOperatorOption,
+  detectOperatorFromValue,
+  getOperatorOption,
+} from "../Dictionary/DictionaryFilterOperator";
 import Icon, { SizeProp } from "../Icon/Icon";
 import Includes from "../../../Types/BaseDatabase/Includes";
 import IncludesAll from "../../../Types/BaseDatabase/IncludesAll";
@@ -81,20 +87,50 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
   const formatJson: FormatJsonFunction = (
     json: Dictionary<string | number | boolean>,
   ): ReactElement => {
+    /*
+     * Ignore entries with empty key or empty value, and translate
+     * operator wrappers into their display symbol so chips like
+     * `host.name != prod-1` or `path contains api` render correctly.
+     */
+    const isMeaningfulEntry: (key: string, value: unknown) => boolean = (
+      key: string,
+      value: unknown,
+    ): boolean => {
+      if (key.trim() === "" || value === undefined || value === null) {
+        return false;
+      }
+      const detected: { operator: DictionaryFilterOperator; rawValue: string } =
+        detectOperatorFromValue(value);
+      const option: DictionaryFilterOperatorOption = getOperatorOption(
+        detected.operator,
+      );
+      if (option.hidesValueInput) {
+        return true;
+      }
+      return detected.rawValue.trim() !== "";
+    };
+
+    const visibleKeys: Array<string> = Object.keys(json).filter(
+      (key: string) => {
+        return isMeaningfulEntry(key, json[key]);
+      },
+    );
+
     return (
       <div className="flex space-x-2 -mt-1">
-        {Object.keys(json).map((key: string, i: number) => {
-          let jsonText: string | number | boolean = json[key] as
-            | string
-            | number
-            | boolean;
-
-          if (typeof jsonText === "boolean" && jsonText === true) {
-            jsonText = "True";
-          }
+        {visibleKeys.map((key: string, i: number) => {
+          const rawValue: unknown = json[key];
+          const detected: {
+            operator: DictionaryFilterOperator;
+            rawValue: string;
+          } = detectOperatorFromValue(rawValue);
+          const option: DictionaryFilterOperatorOption = getOperatorOption(
+            detected.operator,
+          );
 
-          if (typeof jsonText === "boolean" && jsonText === false) {
-            jsonText = "False";
+          let jsonText: string = detected.rawValue;
+          if (typeof rawValue === "boolean") {
+            jsonText = rawValue ? "True" : "False";
           }
 
           return (
@@ -102,8 +138,14 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
               key={i}
               className="rounded-full h-7 bg-gray-100 text-gray-500 border-2 border-gray-200 p-1 pr-2 pl-2 text-xs"
             >
-              <span className="font-medium">{key}</span> ={" "}
-              <span className="font-medium">{jsonText}</span>
+              <span className="font-medium">{key}</span>{" "}
+              <span>{option.symbol}</span>
+              {!option.hidesValueInput && (
+                <>
+                  {" "}
+                  <span className="font-medium">{jsonText}</span>
+                </>
+              )}
             </div>
           );
         })}
@@ -334,13 +376,36 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
         key
       ] as Dictionary<string | number | boolean>;
 
-      // if json is empty, return null
+      /*
+       * Count only meaningful entries — empty key/value pairs aren't
+       * real filters, and value-less operators (IsEmpty/IsNotEmpty) are
+       * valid even with no value.
+       */
+      const nonEmptyEntryCount: number = Object.keys(json).filter(
+        (entryKey: string) => {
+          const value: unknown = json[entryKey];
+          if (entryKey.trim() === "" || value === undefined || value === null) {
+            return false;
+          }
+          const detected: {
+            operator: DictionaryFilterOperator;
+            rawValue: string;
+          } = detectOperatorFromValue(value);
+          const option: DictionaryFilterOperatorOption = getOperatorOption(
+            detected.operator,
+          );
+          if (option.hidesValueInput) {
+            return true;
+          }
+          return detected.rawValue.trim() !== "";
+        },
+      ).length;
 
-      if (Object.keys(json).length === 0) {
+      if (nonEmptyEntryCount === 0) {
         return null;
       }
 
-      const isPlural: boolean = Object.keys(json).length > 1;
+      const isPlural: boolean = nonEmptyEntryCount > 1;
 
       return (
         <span className="inline-flex items-center space-x-1">

package/UI/Components/Filters/FiltersForm.tsx

@@ -111,13 +111,21 @@ const FiltersForm: FiltersFormFunction = <T extends GenericObject>(
             props.filterData[filter.key] !== undefined &&
             props.filterData[filter.key] !== null;
 
+          const isMultiRowFilter: boolean = filter.type === FieldType.JSON;
+
           return (
             <div
               key={i}
-              className="grid grid-cols-[140px_1fr_auto] items-center gap-3"
+              className={`grid grid-cols-[140px_1fr_auto] gap-3 ${
+                isMultiRowFilter ? "items-start" : "items-center"
+              }`}
             >
               {/* Label column */}
-              <div className="flex items-center min-w-0">
+              <div
+                className={`flex items-center min-w-0 ${
+                  isMultiRowFilter ? "pt-7" : ""
+                }`}
+              >
                 <label className="text-sm font-medium text-gray-700 truncate">
                   {filter.title}
                 </label>
@@ -169,11 +177,18 @@ const FiltersForm: FiltersFormFunction = <T extends GenericObject>(
                   jsonKeys={filter.jsonKeys}
                   jsonValueSuggestions={filter.jsonValueSuggestions}
                   onJsonKeySelected={filter.onJsonKeySelected}
+                  isLoadingJsonKeys={filter.isLoadingJsonKeys}
+                  loadingJsonValueKeys={filter.loadingJsonValueKeys}
+                  enableOperators={filter.jsonEnableOperators}
                 />
               </div>
 
               {/* Clear column */}
-              <div className="flex items-center">
+              <div
+                className={`flex items-center ${
+                  isMultiRowFilter ? "pt-7" : ""
+                }`}
+              >
                 {hasValue && filter.key ? (
                   <button
                     type="button"

package/UI/Components/Filters/JSONFilter.tsx

@@ -1,5 +1,6 @@
 import { FindWhereProperty } from "../../../Types/BaseDatabase/Query";
 import DictionaryForm, { ValueType } from "../Dictionary/Dictionary";
+import { DictionaryEntryValue } from "../Dictionary/DictionaryFilterOperator";
 import FieldType from "../Types/FieldType";
 import Filter from "./Types/Filter";
 import FilterData from "./Types/FilterData";
@@ -14,6 +15,9 @@ export interface ComponentProps<T extends GenericObject> {
   jsonKeys?: Array<string> | undefined;
   jsonValueSuggestions?: Record<string, Array<string>> | undefined;
   onJsonKeySelected?: ((key: string) => void) | undefined;
+  isLoadingJsonKeys?: boolean | undefined;
+  loadingJsonValueKeys?: Array<string> | undefined;
+  enableOperators?: boolean | undefined;
 }
 
 type JSONFilterFunction = <T extends GenericObject>(
@@ -32,12 +36,17 @@ const JSONFilter: JSONFilterFunction = <T extends GenericObject>(
         keys={props.jsonKeys}
         valueSuggestions={props.jsonValueSuggestions}
         onKeySelected={props.onJsonKeySelected}
+        isLoadingKeys={props.isLoadingJsonKeys}
+        loadingValueKeys={props.loadingJsonValueKeys}
+        enableOperators={props.enableOperators}
         addButtonSuffix={filter.title}
         keyPlaceholder={"Key"}
         valuePlaceholder={"Value"}
         valueTypes={[ValueType.Text]}
-        initialValue={(filterData[filter.key] as Dictionary<string>) || {}}
-        onChange={(value: Dictionary<string | number | boolean>) => {
+        initialValue={
+          (filterData[filter.key] as Dictionary<DictionaryEntryValue>) || {}
+        }
+        onChange={(value: Dictionary<DictionaryEntryValue>) => {
           // if no keys in the dictionary, remove the filter
 
           if (Object.keys(value).length > 0) {

package/UI/Components/Filters/Types/Filter.ts

@@ -10,5 +10,8 @@ export default interface Filter<T extends GenericObject> {
   jsonKeys?: Array<string> | undefined;
   jsonValueSuggestions?: Record<string, Array<string>> | undefined;
   onJsonKeySelected?: ((key: string) => void) | undefined;
+  isLoadingJsonKeys?: boolean | undefined;
+  loadingJsonValueKeys?: Array<string> | undefined;
+  jsonEnableOperators?: boolean | undefined;
   isAdvancedFilter?: boolean | undefined;
 }

package/UI/Components/Forms/Fields/FormField.tsx

@@ -457,6 +457,11 @@ const FormField: <T extends GenericObject>(
           {props.field.fieldType === FormFieldSchemaType.Dictionary && (
             <DictionaryForm
               keys={props.field.jsonKeysForDictionary}
+              valueSuggestions={props.field.dictionaryValueSuggestions}
+              onKeySelected={props.field.onDictionaryKeySelected}
+              isLoadingKeys={props.field.isLoadingDictionaryKeys}
+              loadingValueKeys={props.field.loadingDictionaryValueKeys}
+              enableOperators={props.field.dictionaryEnableOperators}
               addButtonSuffix={props.field.title}
               keyPlaceholder={"Key"}
               valuePlaceholder={"Value"}
@@ -467,7 +472,7 @@ const FormField: <T extends GenericObject>(
                   ? (props.currentValues as any)[props.fieldName]
                   : props.field.defaultValue || {}
               }
-              onChange={(value: Dictionary<string | number | boolean>) => {
+              onChange={(value: Dictionary<any>) => {
                 onChange(value);
                 props.setFieldValue(props.fieldName, value);
               }}

package/UI/Components/Forms/Types/Field.ts

@@ -122,6 +122,11 @@ export default interface Field<TEntity> {
 
   //
   jsonKeysForDictionary?: Array<string> | undefined;
+  isLoadingDictionaryKeys?: boolean | undefined;
+  dictionaryValueSuggestions?: Record<string, Array<string>> | undefined;
+  loadingDictionaryValueKeys?: Array<string> | undefined;
+  onDictionaryKeySelected?: ((key: string) => void) | undefined;
+  dictionaryEnableOperators?: boolean | undefined;
 
   hideOptionalLabel?: boolean | undefined;