@oneuptime/common 12.0.33 → 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";
@@ -19,6 +19,12 @@ import {
   CustomFieldDropdownOption,
   parseCustomFieldDropdownOptions,
 } from "../../../Types/CustomField/CustomFieldDropdownOption";
+import {
+  CustomFieldMappingSourceInfo,
+  getCustomFieldMappingRelationSelect,
+  getCustomFieldMappingSources,
+  hasCustomFieldMappingSource,
+} from "../../../Types/CustomField/CustomFieldMappingCatalog";
 import Color from "../../../Types/Color";
 import { LIMIT_PER_PROJECT } from "../../../Types/Database/LimitMax";
 import { PromiseVoidFunction } from "../../../Types/FunctionTypes";
@@ -73,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> = (
@@ -94,6 +116,74 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
   const [model, setModel] = useState<BaseModel | null>(null);
   const [showModelForm, setShowModelForm] = useState<boolean>(false);
 
+  /*
+   * Which related resources this resource's custom fields may inherit from.
+   * Empty for most of them, in which case everything below behaves exactly as
+   * it did before mapping existed.
+   */
+  const mappingSources: Array<CustomFieldMappingSourceInfo> =
+    getCustomFieldMappingSources(new props.customFieldType().tableName!);
+
+  /*
+   * A mapped field is a derived value, so it is shown rather than edited — but
+   * only on records that actually have a source to derive it from. On a record
+   * with none, the mapping can never fill it in and there is no reason to take
+   * the field away from the operator.
+   */
+  type IsMappedAndInheritedFunction = (schemaItem: BaseModel) => boolean;
+
+  const isMappedAndInherited: IsMappedAndInheritedFunction = (
+    schemaItem: BaseModel,
+  ): boolean => {
+    const resource: string | undefined = (schemaItem as any)
+      .mapFromResourceType;
+    const fieldName: string | undefined = (schemaItem as any)
+      .mapFromCustomFieldName;
+
+    if (!resource || !fieldName) {
+      return false;
+    }
+
+    const source: CustomFieldMappingSourceInfo | undefined =
+      mappingSources.find((candidate: CustomFieldMappingSourceInfo) => {
+        return candidate.resource === resource;
+      });
+
+    if (!source) {
+      return false;
+    }
+
+    return hasCustomFieldMappingSource({
+      source: source,
+      record: model as unknown as Record<string, unknown>,
+    });
+  };
+
+  type GetMappedDescriptionFunction = (
+    schemaItem: BaseModel,
+  ) => string | undefined;
+
+  const getMappedDescription: GetMappedDescriptionFunction = (
+    schemaItem: BaseModel,
+  ): string | undefined => {
+    const description: string | undefined = (schemaItem as any).description;
+
+    if (!isMappedAndInherited(schemaItem)) {
+      return description;
+    }
+
+    const source: CustomFieldMappingSourceInfo | undefined =
+      mappingSources.find((candidate: CustomFieldMappingSourceInfo) => {
+        return candidate.resource === (schemaItem as any).mapFromResourceType;
+      });
+
+    const note: string = `Copied from the ${source?.title} custom field "${
+      (schemaItem as any).mapFromCustomFieldName
+    }".`;
+
+    return description ? `${description} ${note}` : note;
+  };
+
   const onLoad: PromiseVoidFunction = async (): Promise<void> => {
     try {
       // load schema.
@@ -113,21 +203,44 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
             customFieldType: true,
             description: true,
             dropdownOptions: true,
+            mapFromResourceType: true,
+            mapFromCustomFieldName: true,
           } as any,
           sort: {},
         });
 
+      /*
+       * The relation a mapped field would inherit through is read alongside
+       * the values, so the card can tell "this field is mapped and this record
+       * has a monitor" (show it, read-only) from "this field is mapped but
+       * this record has none" (leave it editable — an SLO or security-event
+       * alert has no monitor and would otherwise be locked out of the field
+       * entirely). Nothing extra is selected for the six resources that have
+       * no mapping sources at all.
+       */
+      const itemSelect: JSONObject = {
+        customFields: true,
+      };
+
+      for (const source of mappingSources) {
+        Object.assign(itemSelect, getCustomFieldMappingRelationSelect(source));
+      }
+
       const item: BaseModel | null = await ModelAPI.getItem<BaseModel>({
         modelType: props.modelType,
         id: props.modelId,
-        select: {
-          customFields: true,
-        } as any,
+        select: itemSelect as any,
       });
 
       setSchemaList(schemaList.data);
       setModel(item);
 
+      if (props.onValuesLoaded) {
+        props.onValuesLoaded(
+          ((item as any)?.["customFields"] as JSONObject) || {},
+        );
+      }
+
       setIsLoading(false);
     } catch (err) {
       setIsLoading(false);
@@ -195,8 +308,19 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
    * take the button away, or the error message is telling the operator to
    * retry something they can no longer reach.
    */
+  /*
+   * A field whose value is copied from a related resource is not one the
+   * modal offers, so a card where EVERY field is mapped has nothing to edit
+   * and the button would open an empty form.
+   */
+  const editableSchemaCount: number = schemaList.filter(
+    (schemaItem: BaseModel) => {
+      return !isMappedAndInherited(schemaItem);
+    },
+  ).length;
+
   const canEdit: boolean =
-    isEditable && !isLoading && schemaList.length > 0 && Boolean(model);
+    isEditable && !isLoading && editableSchemaCount > 0 && Boolean(model);
 
   /*
    * Custom field values live on the record itself, so editing them is an
@@ -211,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 />}
@@ -269,7 +396,7 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
               return {
                 key: (schemaItem as any).name,
                 title: (schemaItem as any).name,
-                description: (schemaItem as any).description,
+                description: getMappedDescription(schemaItem) as string,
                 fieldType: (schemaItem as any).customFieldType,
                 placeholder: "No data entered",
                 dropdownOptions: isDropdown
@@ -292,26 +419,42 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
             }}
             formProps={{
               initialValues: (model as any)?.["customFields"] || {},
-              fields: schemaList.map((schemaItem: BaseModel) => {
-                const isDropdown: boolean =
-                  (schemaItem as any).customFieldType ===
-                    CustomFieldType.Dropdown ||
-                  (schemaItem as any).customFieldType ===
-                    CustomFieldType.MultiSelectDropdown;
-                return {
-                  field: {
-                    [(schemaItem as any).name]: true,
-                  },
-                  title: (schemaItem as any).name,
-                  description: (schemaItem as any).description,
-                  fieldType: (schemaItem as any).customFieldType,
-                  required: false,
-                  placeholder: "",
-                  dropdownOptions: isDropdown
-                    ? parseDropdownOptions((schemaItem as any).dropdownOptions)
-                    : undefined,
-                };
-              }),
+              /*
+               * Mapped fields are left OUT of the form rather than rendered
+               * disabled: `Field.disabled` is honoured by only three of the
+               * form's input branches, so a disabled Dropdown, multi-select or
+               * toggle stays fully editable and the value would silently snap
+               * back on the next sync. Their stored values still survive the
+               * save — this form submits its whole values object, which starts
+               * from the record's existing bag — and the server re-applies the
+               * mapping on update either way.
+               */
+              fields: schemaList
+                .filter((schemaItem: BaseModel) => {
+                  return !isMappedAndInherited(schemaItem);
+                })
+                .map((schemaItem: BaseModel) => {
+                  const isDropdown: boolean =
+                    (schemaItem as any).customFieldType ===
+                      CustomFieldType.Dropdown ||
+                    (schemaItem as any).customFieldType ===
+                      CustomFieldType.MultiSelectDropdown;
+                  return {
+                    field: {
+                      [(schemaItem as any).name]: true,
+                    },
+                    title: (schemaItem as any).name,
+                    description: (schemaItem as any).description,
+                    fieldType: (schemaItem as any).customFieldType,
+                    required: false,
+                    placeholder: "",
+                    dropdownOptions: isDropdown
+                      ? parseDropdownOptions(
+                          (schemaItem as any).dropdownOptions,
+                        )
+                      : undefined,
+                  };
+                }),
             }}
           />
         )}

package/UI/Components/CustomFields/MapFromCustomFieldInput.tsx

@@ -0,0 +1,216 @@
+import API from "../../Utils/API/API";
+import ModelAPI, { ListResult } from "../../Utils/ModelAPI/ModelAPI";
+import ComponentLoader from "../ComponentLoader/ComponentLoader";
+import Dropdown, { DropdownOption, DropdownValue } from "../Dropdown/Dropdown";
+import ErrorMessage from "../ErrorMessage/ErrorMessage";
+import BaseModel, {
+  DatabaseBaseModelType,
+} from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import CustomFieldType from "../../../Types/CustomField/CustomFieldType";
+import { LIMIT_PER_PROJECT } from "../../../Types/Database/LimitMax";
+import ObjectID from "../../../Types/ObjectID";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useState,
+} from "react";
+
+/*
+ * Picks the field a custom field copies its value from
+ * (OneUptime/oneuptime#3549) — the "map from" half of the settings form.
+ *
+ * WHY THIS IS A CUSTOM COMPONENT AND NOT `fetchDropdownOptions`. The list of
+ * offerable fields depends on ANOTHER value in the same form: only source
+ * fields of the same type can be mapped, so choosing "Number" has to change
+ * what this picker shows. `Field.fetchDropdownOptions` is awaited from a
+ * `useAsyncEffect` in BasicForm whose dependency array is
+ * `[props.fields, currentFormStepId]` — it does not re-run when a value
+ * changes, so a picker built on it would keep offering the previous type's
+ * fields. `getCustomElement` receives the live form values on every render
+ * instead, which is the route three other call sites in this codebase already
+ * take for exactly this reason.
+ *
+ * A configured value that is no longer offered — the source field was renamed
+ * or deleted — is still shown, flagged. The mapping has quietly stopped
+ * resolving at that point, and the settings page is the only place anyone
+ * would find out.
+ */
+
+export interface ComponentProps {
+  projectId: ObjectID;
+  /** Definition table listing the fields available on the source resource. */
+  sourceDefinitionModelType: DatabaseBaseModelType;
+  /** How the source is named to the operator, e.g. "Monitor". */
+  sourceTitle: string;
+  /** The type this field holds; only same-typed sources can be mapped. */
+  targetFieldType?: CustomFieldType | undefined;
+  initialValue?: string | undefined;
+  onChange?: ((value: string) => void) | undefined;
+  onBlur?: (() => void) | undefined;
+  error?: string | undefined;
+  tabIndex?: number | undefined;
+}
+
+interface SourceField {
+  name: string;
+  customFieldType?: CustomFieldType | undefined;
+}
+
+const MapFromCustomFieldInput: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [sourceFields, setSourceFields] = useState<Array<SourceField>>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [loadError, setLoadError] = useState<string>("");
+  const [selectedValue, setSelectedValue] = useState<string>(
+    props.initialValue || "",
+  );
+
+  const sourceModelName: string = props.sourceDefinitionModelType.name;
+
+  useEffect(() => {
+    let isMounted: boolean = true;
+
+    const load: () => Promise<void> = async (): Promise<void> => {
+      try {
+        setIsLoading(true);
+        setLoadError("");
+
+        const result: ListResult<BaseModel> = await ModelAPI.getList<BaseModel>(
+          {
+            modelType: props.sourceDefinitionModelType,
+            query: {
+              projectId: props.projectId,
+            } as any,
+            limit: LIMIT_PER_PROJECT,
+            skip: 0,
+            select: {
+              name: true,
+              customFieldType: true,
+            } as any,
+            sort: {},
+          },
+        );
+
+        if (!isMounted) {
+          return;
+        }
+
+        setSourceFields(
+          result.data.map((item: BaseModel): SourceField => {
+            return {
+              name: (item as any)["name"],
+              customFieldType: (item as any)["customFieldType"],
+            };
+          }),
+        );
+        setIsLoading(false);
+      } catch (err) {
+        if (!isMounted) {
+          return;
+        }
+
+        setIsLoading(false);
+        setLoadError(API.getFriendlyMessage(err));
+      }
+    };
+
+    load().catch(() => {
+      // load() reports its own failures through loadError.
+    });
+
+    return () => {
+      isMounted = false;
+    };
+    /*
+     * The source list is per-project and per-source-table; neither changes
+     * while this input is mounted. The type filter below is applied on each
+     * render instead, so choosing a different field type re-filters without a
+     * refetch.
+     */
+  }, [props.projectId.toString(), sourceModelName]);
+
+  const options: Array<DropdownOption> = sourceFields
+    .filter((field: SourceField) => {
+      if (!field.name) {
+        return false;
+      }
+
+      /*
+       * With no type chosen yet there is nothing to be compatible with, so
+       * offer nothing rather than a list that will be rejected on save.
+       */
+      if (!props.targetFieldType) {
+        return false;
+      }
+
+      return field.customFieldType === props.targetFieldType;
+    })
+    .map((field: SourceField): DropdownOption => {
+      return { label: field.name, value: field.name };
+    });
+
+  const isSelectedValueOffered: boolean = options.some(
+    (option: DropdownOption) => {
+      return option.value === selectedValue;
+    },
+  );
+
+  if (selectedValue && !isSelectedValueOffered) {
+    options.unshift({
+      label: `${selectedValue} (no longer available on ${props.sourceTitle})`,
+      value: selectedValue,
+    });
+  }
+
+  if (isLoading) {
+    return <ComponentLoader />;
+  }
+
+  if (loadError) {
+    return <ErrorMessage message={loadError} />;
+  }
+
+  if (!props.targetFieldType) {
+    return (
+      <ErrorMessage message="Choose a field type above before picking the field to map from." />
+    );
+  }
+
+  if (options.length === 0) {
+    return (
+      <ErrorMessage
+        message={`No ${props.sourceTitle} custom field of this type exists in this project. Create one first, or choose a different field type.`}
+      />
+    );
+  }
+
+  return (
+    <Dropdown
+      options={options}
+      value={options.find((option: DropdownOption) => {
+        return option.value === selectedValue;
+      })}
+      tabIndex={props.tabIndex}
+      error={props.error}
+      placeholder={`Select a ${props.sourceTitle} custom field`}
+      onBlur={() => {
+        if (props.onBlur) {
+          props.onBlur();
+        }
+      }}
+      onChange={(value: DropdownValue | Array<DropdownValue> | null) => {
+        const nextValue: string = value ? value.toString() : "";
+
+        setSelectedValue(nextValue);
+
+        if (props.onChange) {
+          props.onChange(nextValue);
+        }
+      }}
+    />
+  );
+};
+
+export default MapFromCustomFieldInput;