@oneuptime/common 9.5.8 → 9.5.10

package/Types/Probe/ProbeMonitorResponse.ts

@@ -7,6 +7,7 @@ import CustomCodeMonitorResponse from "../Monitor/CustomCodeMonitor/CustomCodeMo
 import SslMonitorResponse from "../Monitor/SSLMonitor/SslMonitorResponse";
 import SyntheticMonitorResponse from "../Monitor/SyntheticMonitors/SyntheticMonitorResponse";
 import SnmpMonitorResponse from "../Monitor/SnmpMonitor/SnmpMonitorResponse";
+import DnsMonitorResponse from "../Monitor/DnsMonitor/DnsMonitorResponse";
 import MonitorEvaluationSummary from "../Monitor/MonitorEvaluationSummary";
 import ObjectID from "../ObjectID";
 import Port from "../Port";
@@ -30,6 +31,7 @@ export default interface ProbeMonitorResponse {
   syntheticMonitorResponse?: Array<SyntheticMonitorResponse> | undefined;
   customCodeMonitorResponse?: CustomCodeMonitorResponse | undefined;
   snmpResponse?: SnmpMonitorResponse | undefined;
+  dnsResponse?: DnsMonitorResponse | undefined;
   monitoredAt: Date;
   isTimeout?: boolean | undefined;
   ingestedAt?: Date | undefined;

package/UI/Components/Detail/Detail.tsx

@@ -4,7 +4,7 @@ import CodeBlock from "../CodeBlock/CodeBlock";
 import ColorViewer from "../ColorViewer/ColorViewer";
 import CopyableButton from "../CopyableButton/CopyableButton";
 import DictionaryOfStringsViewer from "../Dictionary/DictionaryOfStingsViewer";
-import { DropdownOption } from "../Dropdown/Dropdown";
+import { DropdownOption, DropdownOptionGroup } from "../Dropdown/Dropdown";
 import HiddenText from "../HiddenText/HiddenText";
 import MarkdownViewer from "../Markdown.tsx/LazyMarkdownViewer";
 import ObjectIDView from "../ObjectID/ObjectIDView";
@@ -72,13 +72,13 @@ const Detail: DetailFunction = <T extends GenericObject>(
 
   type GetDropdownViewerFunction = (
     data: string,
-    options: Array<DropdownOption>,
+    options: Array<DropdownOption | DropdownOptionGroup>,
     placeholder: string,
   ) => ReactElement;
 
   const getDropdownViewer: GetDropdownViewerFunction = (
     data: string,
-    options: Array<DropdownOption>,
+    options: Array<DropdownOption | DropdownOptionGroup>,
     placeholder: string,
   ): ReactElement => {
     if (!options) {
@@ -87,7 +87,16 @@ const Detail: DetailFunction = <T extends GenericObject>(
       );
     }
 
-    const selectedOption: DropdownOption | undefined = options.find(
+    const flatOptions: Array<DropdownOption> = options.flatMap(
+      (item: DropdownOption | DropdownOptionGroup) => {
+        if ("options" in item && Array.isArray(item.options)) {
+          return item.options;
+        }
+        return [item as DropdownOption];
+      },
+    );
+
+    const selectedOption: DropdownOption | undefined = flatOptions.find(
       (i: DropdownOption) => {
         return i.value === data;
       },

package/UI/Components/Detail/Field.ts

@@ -1,5 +1,5 @@
 import AlignItem from "../../Types/AlignItem";
-import { DropdownOption } from "../Dropdown/Dropdown";
+import { DropdownOption, DropdownOptionGroup } from "../Dropdown/Dropdown";
 import FieldType from "../Types/FieldType";
 import { Size } from "./FieldLabel";
 import Route from "../../../Types/API/Route";
@@ -18,7 +18,7 @@ export interface FieldBase<T> {
   description?: string | ReactElement;
   fieldTitleSize?: Size | undefined;
   fieldType?: FieldType;
-  dropdownOptions?: Array<DropdownOption> | undefined;
+  dropdownOptions?: Array<DropdownOption | DropdownOptionGroup> | undefined;
   colSpan?: number | undefined;
   alignItem?: AlignItem | undefined;
   contentClassName?: string | undefined;

package/UI/Components/Dropdown/Dropdown.tsx

@@ -35,8 +35,13 @@ export interface DropdownOption {
   color?: Color;
 }
 
-export interface ComponentProps {
+export interface DropdownOptionGroup {
+  label: string;
   options: Array<DropdownOption>;
+}
+
+export interface ComponentProps {
+  options: Array<DropdownOption | DropdownOptionGroup>;
   initialValue?: undefined | DropdownOption | Array<DropdownOption>;
   onClick?: undefined | (() => void);
   placeholder?: undefined | string;
@@ -61,6 +66,25 @@ const Dropdown: FunctionComponent<ComponentProps> = (
   const uniqueId: string = useId();
   const errorId: string = `dropdown-error-${uniqueId}`;
 
+  const isDropdownOptionGroup: (
+    item: DropdownOption | DropdownOptionGroup,
+  ) => item is DropdownOptionGroup = (
+    item: DropdownOption | DropdownOptionGroup,
+  ): item is DropdownOptionGroup => {
+    return (
+      "options" in item && Array.isArray((item as DropdownOptionGroup).options)
+    );
+  };
+
+  const flatOptions: Array<DropdownOption> = props.options.flatMap(
+    (item: DropdownOption | DropdownOptionGroup) => {
+      if (isDropdownOptionGroup(item)) {
+        return item.options;
+      }
+      return [item];
+    },
+  );
+
   type GetDropdownOptionFromValueFunctionProps =
     | undefined
     | DropdownValue
@@ -103,13 +127,14 @@ const Dropdown: FunctionComponent<ComponentProps> = (
           !Array.isArray(item) &&
           (typeof item === "string" || typeof item === "number")
         ) {
-          const option: DropdownOption | undefined | Array<DropdownOption> =
-            props.options.find((option: DropdownOption) => {
+          const option: DropdownOption | undefined = flatOptions.find(
+            (option: DropdownOption) => {
               return option.value === item;
-            }) as DropdownOption | Array<DropdownOption>;
+            },
+          );
 
           if (option) {
-            options.push(option as DropdownOption);
+            options.push(option);
           }
         }
       }
@@ -121,9 +146,9 @@ const Dropdown: FunctionComponent<ComponentProps> = (
       !Array.isArray(value) &&
       (typeof value === "string" || typeof value === "number")
     ) {
-      return props.options.find((option: DropdownOption) => {
+      return flatOptions.find((option: DropdownOption) => {
         return option.value === value;
-      }) as DropdownOption | Array<DropdownOption>;
+      });
     }
 
     return value as DropdownOption | Array<DropdownOption>;
@@ -569,6 +594,12 @@ const Dropdown: FunctionComponent<ComponentProps> = (
 
             return "px-3 py-2 text-sm text-gray-700";
           },
+          group: () => {
+            return "py-1";
+          },
+          groupHeading: () => {
+            return "px-3 py-2 text-xs font-semibold uppercase tracking-wider text-gray-500";
+          },
           noOptionsMessage: () => {
             return "px-3 py-2 text-sm text-gray-500";
           },

package/UI/Components/Forms/BasicForm.tsx

@@ -4,7 +4,11 @@ import Alert, { AlertType } from "../Alerts/Alert";
 import Button, { ButtonStyleType } from "../Button/Button";
 import ButtonTypes from "../Button/ButtonTypes";
 
-import { DropdownOption, DropdownValue } from "../Dropdown/Dropdown";
+import {
+  DropdownOption,
+  DropdownOptionGroup,
+  DropdownValue,
+} from "../Dropdown/Dropdown";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import FormField from "./Fields/FormField";
 import FormSummary from "./FormSummary";
@@ -301,7 +305,7 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
           setIsDropdownOptionsLoading(true);
           // If a dropdown has fetch optiosn then we need to fetch them
           try {
-            const options: Array<DropdownOption> =
+            const options: Array<DropdownOption | DropdownOptionGroup> =
               await item.fetchDropdownOptions(refCurrentValue.current);
             item.dropdownOptions = options;
           } catch (err) {
@@ -501,8 +505,21 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
           field.fieldType === FormFieldSchemaType.Dropdown &&
           (values as any)[fieldName]
         ) {
+          const flatDropdownOptions: Array<DropdownOption> =
+            field.dropdownOptions?.flatMap(
+              (item: DropdownOption | DropdownOptionGroup) => {
+                if (
+                  "options" in item &&
+                  Array.isArray((item as DropdownOptionGroup).options)
+                ) {
+                  return (item as DropdownOptionGroup).options;
+                }
+                return [item as DropdownOption];
+              },
+            ) || [];
+
           const dropdownOption: DropdownOption | undefined =
-            field.dropdownOptions?.find((option: DropdownOption) => {
+            flatDropdownOptions.find((option: DropdownOption) => {
               let valueToCompare: DropdownValue = (values as any)[fieldName];
 
               if ((valueToCompare as any) instanceof ObjectID) {
@@ -519,8 +536,21 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
           field.fieldType === FormFieldSchemaType.MultiSelectDropdown &&
           (values as any)[fieldName]
         ) {
+          const flatDropdownOptions: Array<DropdownOption> =
+            field.dropdownOptions?.flatMap(
+              (item: DropdownOption | DropdownOptionGroup) => {
+                if (
+                  "options" in item &&
+                  Array.isArray((item as DropdownOptionGroup).options)
+                ) {
+                  return (item as DropdownOptionGroup).options;
+                }
+                return [item as DropdownOption];
+              },
+            ) || [];
+
           const dropdownOptions: Array<DropdownOption> =
-            field.dropdownOptions?.filter((option: DropdownOption) => {
+            flatDropdownOptions.filter((option: DropdownOption) => {
               let valueToCompare: Array<DropdownValue> = [
                 ...(values as any)[fieldName],
               ];
@@ -534,7 +564,7 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
               });
 
               return valueToCompare.includes(option.value);
-            }) || [];
+            });
 
           (values as any)[fieldName] = dropdownOptions.map(
             (option: DropdownOption) => {

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

@@ -0,0 +1,261 @@
+import Permission, {
+  PermissionGroup,
+  PermissionHelper,
+  PermissionProps,
+} from "../../../../Types/Permission";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+
+export interface ComponentProps {
+  onChange: (value: Permission | null) => void;
+  initialValue?: Permission | undefined;
+  placeholder?: string | undefined;
+  onFocus?: (() => void) | undefined;
+  tabIndex?: number | undefined;
+  onBlur?: (() => void) | undefined;
+  error?: string | undefined;
+}
+
+const PermissionPicker: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [selectedPermission, setSelectedPermission] =
+    useState<Permission | null>(props.initialValue || null);
+  const [activeGroup, setActiveGroup] = useState<PermissionGroup | null>(null);
+  const [searchQuery, setSearchQuery] = useState<string>("");
+
+  const allPermissions: Array<PermissionProps> = useMemo(() => {
+    return PermissionHelper.getTenantPermissionProps();
+  }, []);
+
+  const groupedPermissions: Map<
+    PermissionGroup,
+    Array<PermissionProps>
+  > = useMemo(() => {
+    const map: Map<PermissionGroup, Array<PermissionProps>> = new Map();
+    for (const perm of allPermissions) {
+      if (!map.has(perm.group)) {
+        map.set(perm.group, []);
+      }
+      map.get(perm.group)!.push(perm);
+    }
+    return map;
+  }, [allPermissions]);
+
+  const groups: Array<PermissionGroup> = useMemo(() => {
+    return Array.from(groupedPermissions.keys());
+  }, [groupedPermissions]);
+
+  // Auto-select the group for the initial value
+  useEffect(() => {
+    if (props.initialValue && !activeGroup) {
+      const match: PermissionProps | undefined = allPermissions.find(
+        (p: PermissionProps) => {
+          return p.permission === props.initialValue;
+        },
+      );
+      if (match) {
+        setActiveGroup(match.group);
+      }
+    }
+  }, [props.initialValue, allPermissions, activeGroup]);
+
+  // Default to first group if none selected
+  useEffect(() => {
+    if (!activeGroup && groups.length > 0 && !props.initialValue) {
+      setActiveGroup(groups[0]!);
+    }
+  }, [activeGroup, groups, props.initialValue]);
+
+  const isSearching: boolean = searchQuery.trim().length > 0;
+  const lowerQuery: string = searchQuery.toLowerCase();
+
+  const filteredPermissions: Array<PermissionProps> = useMemo(() => {
+    if (!isSearching) {
+      return [];
+    }
+    return allPermissions.filter((p: PermissionProps) => {
+      return (
+        p.title.toLowerCase().includes(lowerQuery) ||
+        p.description.toLowerCase().includes(lowerQuery)
+      );
+    });
+  }, [allPermissions, isSearching, lowerQuery]);
+
+  const searchMatchCountByGroup: Map<PermissionGroup, number> = useMemo(() => {
+    const counts: Map<PermissionGroup, number> = new Map();
+    if (!isSearching) {
+      return counts;
+    }
+    for (const perm of filteredPermissions) {
+      counts.set(perm.group, (counts.get(perm.group) || 0) + 1);
+    }
+    return counts;
+  }, [filteredPermissions, isSearching]);
+
+  const visiblePermissions: Array<PermissionProps> = useMemo(() => {
+    if (isSearching) {
+      if (activeGroup) {
+        return filteredPermissions.filter((p: PermissionProps) => {
+          return p.group === activeGroup;
+        });
+      }
+      return filteredPermissions;
+    }
+    if (!activeGroup) {
+      return [];
+    }
+    return groupedPermissions.get(activeGroup) || [];
+  }, [isSearching, activeGroup, filteredPermissions, groupedPermissions]);
+
+  type HandlePermissionClickFunction = (perm: PermissionProps) => void;
+
+  const handlePermissionClick: HandlePermissionClickFunction = (
+    perm: PermissionProps,
+  ): void => {
+    setSelectedPermission(perm.permission);
+    props.onChange(perm.permission);
+  };
+
+  type GetGroupCountFunction = (group: PermissionGroup) => number;
+
+  const getGroupCount: GetGroupCountFunction = (
+    group: PermissionGroup,
+  ): number => {
+    if (isSearching) {
+      return searchMatchCountByGroup.get(group) || 0;
+    }
+    return groupedPermissions.get(group)?.length || 0;
+  };
+
+  return (
+    <div
+      tabIndex={props.tabIndex}
+      onFocus={props.onFocus}
+      onBlur={props.onBlur}
+    >
+      <div
+        className={`border rounded-md overflow-hidden ${
+          props.error ? "border-red-400" : "border-gray-300"
+        }`}
+        style={{ height: "400px" }}
+      >
+        {/* Search bar */}
+        <div className="border-b border-gray-200 p-2">
+          <input
+            type="text"
+            className="w-full rounded-md border border-gray-300 px-3 py-1.5 text-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none"
+            placeholder={props.placeholder || "Search permissions..."}
+            value={searchQuery}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setSearchQuery(e.target.value);
+            }}
+          />
+        </div>
+
+        <div className="flex" style={{ height: "calc(100% - 45px)" }}>
+          {/* Left sidebar - groups */}
+          <div
+            className="border-r border-gray-200 overflow-y-auto bg-gray-50 flex-shrink-0"
+            style={{ width: "200px" }}
+          >
+            {groups.map((group: PermissionGroup) => {
+              const count: number = getGroupCount(group);
+              const isActive: boolean = activeGroup === group;
+              const isDimmed: boolean = isSearching && count === 0;
+
+              return (
+                <button
+                  key={group}
+                  type="button"
+                  className={`w-full text-left px-3 py-2 text-sm flex items-center justify-between border-b border-gray-100 transition-colors ${
+                    isActive
+                      ? "bg-indigo-50 text-indigo-700 font-medium"
+                      : isDimmed
+                        ? "text-gray-300 cursor-default"
+                        : "text-gray-700 hover:bg-gray-100"
+                  }`}
+                  onClick={() => {
+                    if (!isDimmed) {
+                      setActiveGroup(group);
+                    }
+                  }}
+                >
+                  <span className="truncate">{group}</span>
+                  <span
+                    className={`ml-1 text-xs flex-shrink-0 ${
+                      isActive ? "text-indigo-500" : "text-gray-400"
+                    }`}
+                  >
+                    {count}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+
+          {/* Right panel - permissions */}
+          <div className="flex-1 overflow-y-auto">
+            {visiblePermissions.length === 0 && (
+              <div className="flex items-center justify-center h-full text-gray-400 text-sm">
+                {isSearching
+                  ? "No permissions match your search."
+                  : "Select a group to view permissions."}
+              </div>
+            )}
+
+            {visiblePermissions.map((perm: PermissionProps) => {
+              const isSelected: boolean =
+                selectedPermission === perm.permission;
+              return (
+                <button
+                  key={perm.permission}
+                  type="button"
+                  className={`w-full text-left px-4 py-2.5 border-b border-gray-100 transition-colors ${
+                    isSelected
+                      ? "bg-indigo-50 border-l-2 border-l-indigo-500"
+                      : "hover:bg-gray-50"
+                  }`}
+                  onClick={() => {
+                    handlePermissionClick(perm);
+                  }}
+                >
+                  <div className="flex items-start gap-2">
+                    <div className="flex-1 min-w-0">
+                      <div
+                        className={`text-sm font-medium ${
+                          isSelected ? "text-indigo-700" : "text-gray-900"
+                        }`}
+                      >
+                        {perm.title}
+                      </div>
+                      <div className="text-xs text-gray-500 mt-0.5">
+                        {perm.description}
+                      </div>
+                    </div>
+                    {isSearching && (
+                      <span className="inline-flex items-center rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-600 flex-shrink-0">
+                        {perm.group}
+                      </span>
+                    )}
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+
+      {props.error && (
+        <p className="mt-1 text-sm text-red-400">{props.error}</p>
+      )}
+    </div>
+  );
+};
+
+export default PermissionPicker;

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

@@ -4,7 +4,7 @@ import {
   CheckboxCategory,
 } from "../../CategoryCheckbox/CategoryCheckboxTypes";
 import { CardSelectOption } from "../../CardSelect/CardSelect";
-import { DropdownOption } from "../../Dropdown/Dropdown";
+import { DropdownOption, DropdownOptionGroup } from "../../Dropdown/Dropdown";
 import { RadioButton } from "../../RadioButtons/GroupRadioButtons";
 import FormFieldSchemaType from "./FormFieldSchemaType";
 import FormValues from "./FormValues";
@@ -50,10 +50,12 @@ export default interface Field<TEntity> {
   disabled?: boolean;
   stepId?: string | undefined;
   required?: boolean | ((item: FormValues<TEntity>) => boolean) | undefined;
-  dropdownOptions?: Array<DropdownOption> | undefined;
+  dropdownOptions?: Array<DropdownOption | DropdownOptionGroup> | undefined;
   cardSelectOptions?: Array<CardSelectOption> | undefined;
   fetchDropdownOptions?:
-    | ((item: FormValues<TEntity>) => Promise<Array<DropdownOption>>)
+    | ((
+        item: FormValues<TEntity>,
+      ) => Promise<Array<DropdownOption | DropdownOptionGroup>>)
     | undefined;
   showHorizontalRuleBelow?: boolean | undefined;
   showHorizontalRuleAbove?: boolean | undefined;

package/UI/Utils/Permission.ts

@@ -1,7 +1,11 @@
-import { DropdownOption } from "../Components/Dropdown/Dropdown";
+import {
+  DropdownOption,
+  DropdownOptionGroup,
+} from "../Components/Dropdown/Dropdown";
 import LocalStorage from "./LocalStorage";
 import { JSONObject } from "../../Types/JSON";
 import Permission, {
+  PermissionGroup,
   PermissionHelper,
   PermissionProps,
   UserGlobalAccessPermission,
@@ -60,16 +64,35 @@ export default class PermissionUtil {
     return userTenantAccessPermission;
   }
 
-  public static projectPermissionsAsDropdownOptions(): Array<DropdownOption> {
+  public static projectPermissionsAsDropdownOptions(): Array<DropdownOptionGroup> {
     const permissions: Array<PermissionProps> =
       PermissionHelper.getTenantPermissionProps();
 
-    return permissions.map((permissionProp: PermissionProps) => {
-      return {
+    const groupMap: Map<PermissionGroup, Array<DropdownOption>> = new Map();
+
+    for (const permissionProp of permissions) {
+      const group: PermissionGroup = permissionProp.group;
+
+      if (!groupMap.has(group)) {
+        groupMap.set(group, []);
+      }
+
+      groupMap.get(group)!.push({
         value: permissionProp.permission,
         label: permissionProp.title,
-      };
-    });
+      });
+    }
+
+    const groups: Array<DropdownOptionGroup> = [];
+
+    for (const [group, options] of groupMap) {
+      groups.push({
+        label: group,
+        options,
+      });
+    }
+
+    return groups;
   }
 
   public static setGlobalPermissions(

package/Utils/Monitor/MonitorMetricType.ts

@@ -85,7 +85,8 @@ class MonitorMetricTypeUtil {
       monitorType === MonitorType.Ping ||
       monitorType === MonitorType.IP ||
       monitorType === MonitorType.Port ||
-      monitorType === MonitorType.SNMP
+      monitorType === MonitorType.SNMP ||
+      monitorType === MonitorType.DNS
     ) {
       return [MonitorMetricType.IsOnline, MonitorMetricType.ResponseTime];
     }

package/build/dist/Models/DatabaseModels/Alert.js

@@ -51,7 +51,7 @@ let Alert = class Alert extends BaseModel {
         // monitor this alert was created for.
         this.monitor = undefined;
         this.monitorId = undefined;
-        this.onCallDutyPolicies = undefined; // monitors affected by this alert.
+        this.onCallDutyPolicies = undefined; // on-call duty policies affected by this alert.
         this.labels = undefined;
         this.currentAlertState = undefined;
         this.currentAlertStateId = undefined;
@@ -389,8 +389,8 @@ __decorate([
     }),
     TableColumn({
         type: TableColumnType.ObjectID,
-        title: "Deleted by User ID",
-        description: "User ID who deleted this object (if this object was deleted by a User)",
+        title: "Monitor ID",
+        description: "ID of the monitor this alert belongs to",
     }),
     Column({
         type: ColumnType.ObjectID,
@@ -424,9 +424,9 @@ __decorate([
     TableColumn({
         required: false,
         type: TableColumnType.EntityArray,
-        modelType: Monitor,
+        modelType: OnCallDutyPolicy,
         title: "On-Call Duty Policies",
-        description: "List of on-call duty policy affected by this alert.",
+        description: "List of on-call duty policies affected by this alert.",
     }),
     ManyToMany(() => {
         return OnCallDutyPolicy;
@@ -434,11 +434,11 @@ __decorate([
     JoinTable({
         name: "AlertOnCallDutyPolicy",
         inverseJoinColumn: {
-            name: "monitorId",
+            name: "onCallDutyPolicyId",
             referencedColumnName: "_id",
         },
         joinColumn: {
-            name: "onCallDutyPolicyId",
+            name: "alertId",
             referencedColumnName: "_id",
         },
     }),
@@ -663,7 +663,7 @@ __decorate([
     TableColumn({
         manyToOneRelationColumn: "monitorStatusWhenThisAlertWasCreatedId",
         type: TableColumnType.Entity,
-        modelType: AlertState,
+        modelType: MonitorStatus,
         title: "Monitor status when this alert was created",
         description: "Monitor status when this alert was created",
     }),