@oneuptime/common 12.0.32 → 12.0.34

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/EditionLabel/EditionLabel.tsx

@@ -92,6 +92,10 @@ const parseLicenseInstances: ParseLicenseInstancesFunction = (
         typeof instance["userCount"] === "number"
           ? instance["userCount"]
           : null,
+      isCountedTowardsUsage:
+        typeof instance["isCountedTowardsUsage"] === "boolean"
+          ? instance["isCountedTowardsUsage"]
+          : undefined,
       lastReportedAt:
         typeof instance["lastReportedAt"] === "string"
           ? instance["lastReportedAt"]

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>
   );