@oneuptime/common 12.0.33 → 12.0.34

package/UI/Components/CustomFields/CustomFieldsDetail.tsx

@@ -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";
@@ -94,6 +100,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,16 +187,33 @@ 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);
@@ -195,8 +286,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
@@ -269,7 +371,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 +394,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;

package/UI/Components/Graphs/DayUptimeGraph.tsx

@@ -6,10 +6,13 @@ import OneUptimeDate from "../../../Types/Date";
 import Dictionary from "../../../Types/Dictionary";
 import ObjectID from "../../../Types/ObjectID";
 import UptimeBarTooltipIncident from "../../../Types/Monitor/UptimeBarTooltipIncident";
+import DayUptimeGraphUtil from "../../../Utils/Uptime/DayUptimeGraphUtil";
+import UptimeHistoryLabels from "../../../Types/Monitor/UptimeHistoryLabels";
 import React, {
   FunctionComponent,
   ReactElement,
   useEffect,
+  useRef,
   useState,
 } from "react";
 import UptimeEvent from "../../../Utils/Uptime/Event";
@@ -21,6 +24,20 @@ export interface BarChartRule {
   uptimePercentGreaterThanOrEqualTo: number;
 }
 
+/*
+ * Everything the tooltip shows for one day, handed to onBarClick so that a
+ * caller opening a dialog can show the same reading rather than a strictly
+ * poorer one. Before this existed the only way to see a day's uptime was to
+ * hover it, which is not something a touch screen or a keyboard can do.
+ */
+export interface UptimeBarDaySummary {
+  date: Date;
+  uptimePercent: number;
+  hasEvents: boolean;
+  statusDurations: Array<StatusDuration>;
+  incidents: Array<UptimeBarTooltipIncident>;
+}
+
 export interface ComponentProps {
   startDate: Date;
   endDate: Date;
@@ -31,9 +48,18 @@ export interface ComponentProps {
   defaultBarColor: Color;
   incidents?: Array<UptimeBarTooltipIncident> | undefined;
   onBarClick?:
-    | ((date: Date, incidents: Array<UptimeBarTooltipIncident>) => void)
+    | ((
+        date: Date,
+        incidents: Array<UptimeBarTooltipIncident>,
+        summary: UptimeBarDaySummary,
+      ) => void)
     | undefined;
   onIncidentClick?: ((incidentId: string) => void) | undefined;
+  /*
+   * Wording for the accessible names. Defaults to English, matching the
+   * tooltip; the status page passes translated strings.
+   */
+  labels?: UptimeHistoryLabels | undefined;
 }
 
 const DayUptimeGraph: FunctionComponent<ComponentProps> = (
@@ -41,6 +67,39 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
   const [days, setDays] = useState<number>(0);
 
+  /*
+   * The strip is one tab stop with a roving tabindex inside it - see
+   * DayUptimeGraphUtil. null means "nothing focused yet", which resolves to
+   * today rather than to three months ago.
+   */
+  const [focusedBarIndex, setFocusedBarIndex] = useState<number | null>(null);
+  const barRefs: React.MutableRefObject<Array<HTMLButtonElement | null>> =
+    useRef<Array<HTMLButtonElement | null>>([]);
+
+  /*
+   * Set only by a key press, so that moving focus is a thing the widget does
+   * in response to the keyboard and never a thing it does to a visitor who
+   * simply clicked. Focus is applied in an effect rather than in the handler
+   * because the bar the visitor is moving to may not be the same DOM node
+   * after the render that the key press causes.
+   */
+  const shouldRestoreFocus: React.MutableRefObject<boolean> =
+    useRef<boolean>(false);
+
+  useEffect(() => {
+    if (!shouldRestoreFocus.current) {
+      return;
+    }
+
+    shouldRestoreFocus.current = false;
+
+    if (focusedBarIndex === null) {
+      return;
+    }
+
+    barRefs.current[focusedBarIndex]?.focus();
+  }, [focusedBarIndex]);
+
   useEffect(() => {
     setDays(
       OneUptimeDate.getNumberOfDaysBetweenDatesInclusive(
@@ -50,6 +109,40 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
     );
   }, [props.startDate, props.endDate]);
 
+  const activeBarIndex: number = DayUptimeGraphUtil.getActiveBarIndex({
+    storedIndex: focusedBarIndex,
+    barCount: days,
+  });
+
+  type MoveFocusFunction = (event: React.KeyboardEvent, index: number) => void;
+
+  const moveFocus: MoveFocusFunction = (
+    event: React.KeyboardEvent,
+    index: number,
+  ): void => {
+    const nextIndex: number | null = DayUptimeGraphUtil.getNextFocusIndex({
+      key: event.key,
+      currentIndex: index,
+      barCount: days,
+    });
+
+    if (nextIndex === null) {
+      // Not ours: Tab, Enter and Space must keep their normal meaning.
+      return;
+    }
+
+    event.preventDefault();
+    shouldRestoreFocus.current = true;
+    setFocusedBarIndex(nextIndex);
+
+    /*
+     * Focused here as well as in the effect: when the strip does not re-render
+     * (the index it was already on), the effect does not run, and focus must
+     * still land somewhere real.
+     */
+    barRefs.current[nextIndex]?.focus();
+  };
+
   type GetIncidentsForDayFunction = (
     startOfDay: Date,
     endOfDay: Date,
@@ -236,8 +329,33 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
       });
     }
 
-    const hasDayIncidents: boolean = dayIncidents.length > 0;
-    const isClickable: boolean = hasDayIncidents && Boolean(props.onBarClick);
+    /*
+     * Every day opens, not only the days that happen to carry an incident.
+     * The uptime reading and the status breakdown used to live in a hover
+     * tooltip and nowhere else, which put them out of reach of every phone
+     * and every keyboard - and a phone is how most people read a status page
+     * during an outage.
+     */
+    const isClickable: boolean = Boolean(props.onBarClick);
+
+    const summary: UptimeBarDaySummary = {
+      date: todaysDay,
+      uptimePercent: uptimePercentForTheDay,
+      hasEvents: hasEvents,
+      statusDurations: statusDurations,
+      incidents: dayIncidents,
+    };
+
+    const ariaLabel: string = DayUptimeGraphUtil.getDayAriaLabel({
+      dateLabel: OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+        todaysDay,
+        true,
+      ),
+      hasEvents: hasEvents,
+      uptimePercent: uptimePercentForTheDay,
+      incidentCount: dayIncidents.length,
+      labels: props.labels,
+    });
 
     return (
       <Tooltip
@@ -250,22 +368,56 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
             statusDurations={statusDurations}
             incidents={dayIncidents}
             onIncidentClick={props.onIncidentClick}
+            labels={props.labels}
           />
         }
       >
-        <div
-          className={`${className}${isClickable ? " cursor-pointer hover:opacity-80" : ""}`}
+        <button
+          type="button"
+          ref={(element: HTMLButtonElement | null) => {
+            barRefs.current[dayNumber] = element;
+          }}
+          data-testid="uptime-bar"
+          data-day-index={dayNumber}
+          aria-label={ariaLabel}
+          /*
+           * One tab stop for the whole strip. Ninety bars per resource across
+           * a page of resources would otherwise bury the footer behind
+           * thousands of Tab presses.
+           */
+          tabIndex={DayUptimeGraphUtil.getBarTabIndex({
+            index: dayNumber,
+            activeIndex: activeBarIndex,
+          })}
+          /*
+           * The focus indicator is drawn *inside* the bar (a negative outline
+           * offset), not around it. Callers wrap this strip in an
+           * overflow-x-auto scroller so it can be swiped on a phone, and
+           * overflow-x also clips vertically - anything drawn outside the
+           * bar's own box loses its top and bottom edge to that scroller. Two
+           * pixels of indigo inside a seven pixel bar reads clearly against
+           * every bar colour and cannot be clipped by anything.
+           */
+          className={`${className} relative block p-0 border-0 appearance-none focus:outline-none focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-indigo-600${
+            isClickable ? " cursor-pointer hover:opacity-80" : ""
+          }`}
           style={{
             backgroundColor: color.toString(),
           }}
+          onFocus={() => {
+            setFocusedBarIndex(dayNumber);
+          }}
+          onKeyDown={(event: React.KeyboardEvent) => {
+            moveFocus(event, dayNumber);
+          }}
           onClick={
             isClickable
               ? () => {
-                  props.onBarClick!(todaysDay, dayIncidents);
+                  props.onBarClick!(todaysDay, dayIncidents, summary);
                 }
               : undefined
           }
-        ></div>
+        />
       </Tooltip>
     );
   };
@@ -282,8 +434,21 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
     return elements;
   };
 
+  /*
+   * Deliberately not overflow-hidden any more: it clipped the focus ring of
+   * the first and last bar, which is the one part of this widget a keyboard
+   * user has to be able to see.
+   */
   return (
-    <div className="flex space-x-0.5 rounded overflow-hidden">
+    <div
+      className="flex space-x-0.5 rounded"
+      role="group"
+      aria-label={DayUptimeGraphUtil.getGraphAriaLabel({
+        dayCount: days,
+        labels: props.labels,
+      })}
+      data-testid="day-uptime-graph"
+    >
       {getUptimeGraph()}
     </div>
   );